/*
 * Graditi – stile: the old Crems look on Kadence. No external URLs: fonts and graphics are files of this plugin.
 * Colours come from the Kadence palette (inc/settings.php): --global-palette1 gold, 2 dark gold (text on white),
 * 3 black, 4 headings, 5 body, 13 red.
 */

/* ---------- B: fonts (SIL OFL, files in fonts/) ---------- */
@font-face { font-family: Cormorant; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/cormorant-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: Cormorant; font-style: italic; font-weight: 300; font-display: swap; src: url(fonts/cormorant-latin-300-italic.woff2) format("woff2"); }
@font-face { font-family: Cormorant; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/cormorant-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Cormorant; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/cormorant-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: Cormorant; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/cormorant-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Mulish; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/mulish-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Mulish; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/mulish-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: Mulish; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/mulish-latin-700-normal.woff2) format("woff2"); }

:root {
	--graditi-serif: Cormorant, "Cormorant Garamond", Georgia, serif;
	--graditi-gold-large: #B28C45; /* gold for large text on white: 3.1:1 (AA large) */
	--graditi-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- C: base ---------- */
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5 { letter-spacing: .01em; }

/* Italic serif accent in gold, like "Dal 1986" under the headings. */
.graditi-accent, .graditi-accent p {
	font-family: var(--graditi-serif);
	font-style: italic;
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
	line-height: 1.2;
	color: var(--graditi-gold-large);
	margin-top: 0;
}
.wp-block-cover .graditi-accent, .has-theme-palette-3-background-color .graditi-accent { color: var(--global-palette1); }

/* Small gold squiggle under section headings (old site). */
.graditi-wave::after {
	content: "";
	display: block;
	width: 90px;
	height: 8px;
	margin: .5em auto 0;
	background: var(--global-palette1);
	-webkit-mask: url(svg/wave.svg) center / contain no-repeat;
	mask: url(svg/wave.svg) center / contain no-repeat;
}
.graditi-wave:not(.has-text-align-center)::after { margin-left: 0; }

/* Small spaced caps above a heading ("ONLINE STORE", "PASTICCERIA GRADITI"). */
.graditi-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--global-palette2);
	margin-bottom: .25em;
}

/* Quotes on the black band (was Customizer "Additional CSS", post 21481). */
.has-theme-palette-3-background-color .wp-block-quote,
.has-theme-palette-3-background-color .wp-block-quote cite { color: var(--global-palette9); border-color: var(--global-palette1); }

/* ---------- C: buttons — black pill, gold caps, small arrow ---------- */
.wp-block-button__link, .button, button.button, input[type="submit"], .wpcf7-submit {
	transition: background-color .25s var(--graditi-ease), color .25s var(--graditi-ease), border-color .25s var(--graditi-ease);
}
.wp-block-button .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-left: .6em;
	vertical-align: -.25em;
	background: currentColor;
	-webkit-mask: url(svg/ico-arrow.svg) center / contain no-repeat;
	mask: url(svg/ico-arrow.svg) center / contain no-repeat;
}
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; border: 1px solid currentColor; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--global-palette3); color: var(--global-palette1); border-color: var(--global-palette3); }
/* On dark backgrounds the outline button is gold. */
.wp-block-cover .is-style-outline .wp-block-button__link,
.has-theme-palette-3-background-color .is-style-outline .wp-block-button__link { color: var(--global-palette1); }

/* ---------- Product cards: button above the title, centred serif title, red price, round "Promo" badge ---------- */
.woocommerce ul.products li.product .product-details {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-top: 1.25rem;
}
.woocommerce ul.products li.product .product-details .product-action-wrap { order: -1; margin: 0 0 1rem; }
.woocommerce ul.products li.product .product-details .woocommerce-loop-product__title { order: 0; padding: 0; margin: 0 0 .4em; }
.woocommerce ul.products li.product .product-details .product-excerpt { order: 1; font-size: 13px; line-height: 1.6; color: var(--global-palette6); }
.woocommerce ul.products li.product .product-details .product-excerpt p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 .6em;
}
.woocommerce ul.products li.product .product-details .price { order: 2; }
/* Old shop: no card box, square photos (CSS crop: no thumbnail regeneration needed), excerpt also in grid view. */
.woocommerce ul.products li.product.entry { background: transparent; box-shadow: none; }
.woocommerce ul.products li.product .product-details.content-bg { background: transparent; }
.woocommerce ul.products li.product a.woocommerce-loop-image-link img { aspect-ratio: 1; width: 100%; object-fit: cover; }
.woocommerce ul.products:not(.products-list-view) li.product .product-excerpt { display: block; }
.woocommerce ul.products li.product .price del,
.woocommerce div.product .price del { color: var(--global-palette6); font-weight: 400; opacity: 1; margin-right: .4em; }
.woocommerce ul.products li.product .price ins,
.woocommerce div.product .price ins { color: var(--global-palette13); text-decoration: none; }
.woocommerce ul.products li.product .product-action-wrap .button { padding: 10px 20px; }
.woocommerce ul.products li.product a.woocommerce-loop-image-link img { transition: transform .6s var(--graditi-ease); }
.woocommerce ul.products li.product a.woocommerce-loop-image-link { overflow: hidden; display: block; }
@media (hover: hover) {
	.woocommerce ul.products li.product:hover a.woocommerce-loop-image-link img { transform: scale(1.04); }
}
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	min-height: 0;
	padding: 0;
	border-radius: 50%;
	background: var(--global-palette13);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
	top: 10px;
	right: 10px;
	left: auto;
}

/* ---------- Contatti: 4 info columns with gold icons and dotted separators ---------- */
.graditi-info { gap: 0 !important; }
.graditi-info > .wp-block-column { text-align: center; padding: 0 1.5rem; }
.graditi-info > .wp-block-column + .wp-block-column { border-left: 1px dashed var(--global-palette7); }
.graditi-info h3 { font-size: 22px; margin: .6em 0 .4em; }
.graditi-info p { font-size: 14px; color: var(--global-palette6); margin: 0; }
.graditi-info a { color: inherit; text-decoration: none; }
.graditi-info a:hover { color: var(--global-palette2); }
@media (max-width: 781px) {
	.graditi-info > .wp-block-column { padding: 1.5rem 0; }
	.graditi-info > .wp-block-column + .wp-block-column { border-left: 0; border-top: 1px dashed var(--global-palette7); }
}

/* Gold line icons (mask: the colour comes from CSS). Usage: class "graditi-ico graditi-ico--phone" on a block. */
.graditi-ico::before {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto;
	background: var(--global-palette1);
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
}
.graditi-ico--pin { --ico: url(svg/ico-pin.svg); }
.graditi-ico--phone { --ico: url(svg/ico-phone.svg); }
.graditi-ico--mail { --ico: url(svg/ico-mail.svg); }
.graditi-ico--clock { --ico: url(svg/ico-clock.svg); }
.graditi-ico--quality { --ico: url(svg/ico-quality.svg); }
.graditi-ico--box { --ico: url(svg/ico-box.svg); }
.graditi-ico--plane { --ico: url(svg/ico-plane.svg); }

/* ---------- Contact form (CF7 12000, old markup with .row/.col-md-6) ---------- */
.wpcf7 .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 600px) { .wpcf7 .row { grid-template-columns: 1fr; } }
.wpcf7 .form-group { margin-bottom: 1rem; }
.wpcf7 input.form-control, .wpcf7 textarea.form-control {
	width: 100%;
	border: 1px solid #b9b2a6;
	border-radius: 999px;
	padding: 14px 26px;
	background: #fff;
	font-size: 14px;
}
.wpcf7 textarea.form-control { border-radius: 28px; height: 140px; resize: vertical; }
.wpcf7 input.form-control:focus, .wpcf7 textarea.form-control:focus { border-color: var(--global-palette2); outline: 2px solid var(--global-palette1); outline-offset: 1px; }
.wpcf7 .btn-wrap { text-align: center; }
.wpcf7 .wpcf7-submit {
	background: var(--global-palette3);
	color: var(--global-palette1);
	border: 1px solid var(--global-palette3);
	border-radius: 999px;
	padding: 14px 56px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
}
.wpcf7 .wpcf7-submit:hover { background: var(--global-palette4); color: #fff; }
.wpcf7 .wpcf7-spinner { display: block; margin: .5rem auto 0; }

/* ---------- G: header ---------- */
/* Over a photo the bar is transparent with a soft dark fade, so menu and logo stay readable. */
.transparent-header #masthead .site-main-header-wrap,
.mobile-transparent-header #masthead .site-main-header-wrap {
	background: linear-gradient(to bottom, rgba(15, 14, 15, .72), rgba(15, 14, 15, 0));
}
/* Account (desktop) and "Chiama" (mobile) as icon links, from the [graditi_account] / [graditi_chiama] shortcodes. */
.graditi-hdr-ico {
	display: inline-block;
	width: 22px;
	height: 22px;
	vertical-align: middle;
	color: var(--global-palette9);
	background: currentColor;
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
	transition: color .2s;
}
.graditi-hdr-ico:hover, .graditi-hdr-ico:focus-visible { color: var(--global-palette1); }
.graditi-hdr-ico--user { --ico: url(svg/ico-user.svg); }
.graditi-hdr-ico--phone { --ico: url(svg/ico-phone.svg); width: 26px; height: 26px; }
.site-header-item .header-html, .site-header-item .mobile-html { line-height: 1; }
/* Mobile: the call icon is a 44px tap target. */
@media (max-width: 1024px) {
	.mobile-html .graditi-hdr-ico--phone { padding: 9px; box-sizing: content-box; background-clip: content-box; -webkit-mask-origin: content-box; mask-origin: content-box; }
}
#masthead .header-button {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 24px;
	line-height: 1;
}
#masthead .header-button::after {
	content: "";
	width: 1.2em;
	height: 1.2em;
	margin-left: .6em;
	background: currentColor;
	-webkit-mask: url(svg/ico-arrow.svg) center / contain no-repeat;
	mask: url(svg/ico-arrow.svg) center / contain no-repeat;
}
#masthead .search-toggle-open .search-toggle-icon { font-size: 17px; }
#masthead .header-cart-button .kadence-svg-iconset { font-size: 22px; }

/* ---------- A: home slider — 3 photos cross-fading with a slow zoom, CSS only (21 s loop, 7 s per photo) ---------- */
.wp-block-cover.graditi-slider { min-height: 640px !important; overflow: hidden; }
@media (max-width: 781px) { .wp-block-cover.graditi-slider { min-height: 70vh !important; } }
/* The inner container goes static so the slide layer can cover the whole block, behind the dim and the text. */
.graditi-slider > .wp-block-cover__inner-container { position: static; }
.graditi-slider > .wp-block-cover__inner-container > :not(.graditi-slides) { position: relative; z-index: 2; }
.graditi-slides { position: absolute; inset: 0; z-index: 0; margin: 0; max-width: none !important; pointer-events: none; }
.graditi-slides .graditi-slide { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; }
.graditi-slider > .wp-block-cover__image-background { animation: graditi-slide-1 21s linear infinite; transform-origin: 60% 50%; }
.graditi-slides .graditi-slide--2 { animation: graditi-slide-2 21s linear infinite; }
.graditi-slides .graditi-slide--3 { animation: graditi-slide-3 21s linear infinite; }
@keyframes graditi-slide-1 { 0% { transform: scale(1); } 36% { transform: scale(1.09); } 37%, 100% { transform: scale(1); } }
@keyframes graditi-slide-2 {
	0%, 30% { opacity: 0; transform: scale(1); }
	36% { opacity: 1; }
	64% { opacity: 1; }
	70%, 100% { opacity: 0; transform: scale(1.1); }
}
@keyframes graditi-slide-3 {
	0%, 63% { opacity: 0; transform: scale(1); }
	69% { opacity: 1; }
	94% { opacity: 1; }
	100% { opacity: 0; transform: scale(1.1); }
}
.graditi-slider h1 { color: #fff; }
@media (prefers-reduced-motion: reduce) {
	.graditi-slider > .wp-block-cover__image-background { animation: none; }
	.graditi-slides { display: none; }
}
.graditi-slider h1, .graditi-slider .graditi-accent { text-shadow: 0 1px 14px rgba(0, 0, 0, .65); }

/* ---------- F: "la Passione" — big gold italic serif crossing a thin tilted gold square (block style of core/heading) ---------- */
.is-style-graditi-passione {
	position: relative;
	isolation: isolate;
	margin: 0 auto;
	padding: .9em 0;
	font-family: var(--graditi-serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(3.2rem, 2rem + 5vw, 6.5rem);
	line-height: 1;
	color: var(--graditi-gold-large) !important;
	text-align: center;
}
.is-style-graditi-passione::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: 1.45em;
	aspect-ratio: 1;
	border: 1px solid var(--global-palette1);
	transform: translate(-15%, -62%) rotate(-12deg);
	pointer-events: none;
}
/* Long text (Chi siamo): smaller type, the frame sized on the block instead of the letters. */
.is-style-graditi-passione.graditi-passione--long {
	max-width: 760px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 1.4em .5em;
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
	line-height: 1.15;
}
.is-style-graditi-passione.graditi-passione--long::before { width: min(15rem, 46%); transform: translate(-50%, -50%) rotate(-14deg); }
.graditi-passione-band { overflow: hidden; } /* the tilted frame never causes horizontal scroll */

/* ---------- E: page headers — dark photo band, white serif title, "HOME // PAGINA", torn-paper bottom edge ---------- */
.graditi-photo-header .entry-hero-container-inner {
	position: relative;
	background-color: var(--global-palette3);
	background-position: center;
	background-size: cover;
}
.graditi-photo-header .hero-section-overlay { background: rgba(15, 14, 15, .58) !important; }
.graditi-photo-header .entry-hero-container-inner::after {
	content: "";
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 40px;
	background: var(--global-palette9);
	-webkit-mask: url(svg/torn.svg) bottom / 100% 100% no-repeat;
	mask: url(svg/torn.svg) bottom / 100% 100% no-repeat;
	pointer-events: none;
}
.graditi-photo-header .entry-hero .entry-header { padding-bottom: 20px; }
.graditi-photo-header .entry-hero .kadence-breadcrumbs { margin-top: .9em; color: var(--global-palette9); }
.graditi-photo-header .entry-hero .kadence-breadcrumbs a { color: var(--global-palette1); text-decoration: none; }
.graditi-photo-header .entry-hero .kadence-breadcrumbs .bc-delimiter { font-size: 0; }
.graditi-photo-header .entry-hero .kadence-breadcrumbs .bc-delimiter::before { content: "//"; font-size: 10px; margin: 0 .8em; color: var(--global-palette1); }
.graditi-photo-header .entry-hero .archive-description { color: var(--global-palette9); }

/* Chi siamo photo (att. 16494, graditi-home-1024x640-1.jpg): the file has a dark overlay baked in (it was a slider
   background, white is at ~29 %). No undarkened original in the media library: compensate here. */
img.wp-image-16494 { filter: brightness(3) contrast(.95); }
/* Shop/categories use the WooCommerce breadcrumb: same small caps as the pages. */
.graditi-photo-header .entry-hero .woocommerce-breadcrumb,
.graditi-photo-header .entry-hero .kadence-breadcrumbs { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--global-palette9); }
.graditi-photo-header .entry-hero .woocommerce-breadcrumb a { color: var(--global-palette1); text-decoration: none; }

/* ---------- D: footer — black, plain horizontal top edge, 3 columns ---------- */
#colophon { position: relative; margin-top: 0; background: var(--global-palette3); color: rgba(255, 255, 255, .78); }
#colophon::before { content: none; display: none; }
/* No decorative drip or reserved spacing above the footer (Daniel's preference, ticket 35). */
.graditi-footer { padding: 40px 0 48px; font-size: 13px; line-height: 1.8; }
.graditi-footer__inner { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 48px; }
@media (max-width: 900px) { .graditi-footer__inner { grid-template-columns: 1fr; gap: 36px; } }
.graditi-footer__logo { width: 220px; height: auto; margin-bottom: 1rem; }
.graditi-footer__title { color: var(--global-palette1) !important; font-size: 30px; font-weight: 400; margin: 0 0 1.2rem; }
.graditi-footer__title.graditi-wave::after { margin-left: 0; width: 70px; }
.graditi-footer__title:not(:first-child) { margin-top: 2rem; }
.graditi-footer__list { list-style: none; margin: 0; padding: 0; }
.graditi-footer__list li { position: relative; padding-left: 36px; margin-bottom: 1rem; color: #fff; }
.graditi-footer__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: 22px;
	height: 22px;
	background: var(--global-palette1);
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
}
.graditi-ico-row--phone { --ico: url(svg/ico-phone.svg); }
.graditi-ico-row--pin { --ico: url(svg/ico-pin.svg); }
.graditi-ico-row--mail { --ico: url(svg/ico-mail.svg); }
.graditi-footer__label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--global-palette1); line-height: 1.6; }
#colophon a { color: inherit; text-decoration: none; }
#colophon a:hover { color: var(--global-palette1); }
.graditi-footer__social { display: flex; gap: 18px; margin-top: 1.2rem; }
.graditi-hdr-ico--facebook { --ico: url(svg/ico-facebook.svg); width: 20px; height: 20px; }
.graditi-hdr-ico--instagram { --ico: url(svg/ico-instagram.svg); width: 20px; height: 20px; }
.graditi-footer__partner { max-width: 170px; height: auto; }
.graditi-footer__payments { max-width: 260px; height: auto; }
#colophon .site-bottom-footer-wrap { border-top: 1px solid rgba(193, 159, 95, .25); font-size: 12px; color: rgba(255, 255, 255, .6); }
#colophon .footer-navigation .menu { justify-content: flex-end; }
#colophon .footer-navigation a { color: rgba(255, 255, 255, .75); font-size: 12px; }
@media (max-width: 781px) { #colophon .footer-navigation .menu { justify-content: center; } }

/* ---------- H (partial): gentle reveal on scroll, CSS only ----------
   Scroll-driven animations: browsers without animation-timeline simply show everything (nothing waits for a script).
   An element already in view when the page loads is past its range, so it is drawn in its final state: nothing above
   the fold animates. Off with prefers-reduced-motion. No parallax, no animated headers (on purpose). */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.entry-content > .wp-block-group:not(:first-child):not(.graditi-passione-band),
		.woocommerce ul.products li.product,
		.graditi-info > .wp-block-column,
		.wp-block-gallery > .wp-block-image,
		.graditi-footer__col {
			animation: graditi-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
		.is-style-graditi-passione {
			animation: graditi-grow linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 40%;
		}
	}
}
@keyframes graditi-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes graditi-grow { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
/* The title colour setting is shared with the plain pages (cart, checkout…): white only over the photo. */
.graditi-photo-header .entry-hero .entry-title, .graditi-photo-header .entry-hero .page-title h1 { color: var(--global-palette9); }