/* ==========================================================================
   Sistema visivo di Pasticceria Buzzi
   Caricato su tutte le pagine costruite su misura. Contiene il linguaggio
   condiviso: colori, scala di spaziatura, tipografia, bottoni, tessere
   prodotto. Le singole pagine aggiungono solo cio' che e' loro.
   ========================================================================== */

:root {
	/* Scala di spaziatura: tutte le distanze escono da qui. E' quello che
	   tiene insieme il ritmo tra una sezione e l'altra. */
	--sp-1: 0.5rem;
	--sp-2: 0.9rem;
	--sp-3: 1.5rem;
	--sp-4: 2.4rem;
	--sp-5: 3.6rem;
	--sp-6: clamp(3.5rem, 7vw, 6.5rem);

	/* Passo laterale delle griglie a tutta pagina. Le intestazioni che le
	   introducono usano lo stesso valore, cosi' titolo e prima tessera sono
	   sulla stessa verticale. */
	--gutter-griglia: 10px;

	--buzzi-carta: #fdfaf4;
	--buzzi-fondo-foto: #f0e0c9;
	--buzzi-trama: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2752%27%20height%3D%2752%27%20viewBox%3D%270%200%2052%2052%27%3E%3Ccircle%20cx%3D%2713.00%27%20cy%3D%278.90%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2716.55%27%20cy%3D%2710.95%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2716.55%27%20cy%3D%2715.05%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2713.00%27%20cy%3D%2717.10%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%279.45%27%20cy%3D%2715.05%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%279.45%27%20cy%3D%2710.95%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2713%27%20cy%3D%2713%27%20r%3D%272.0%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.077%29%27%2F%3E%3Ccircle%20cx%3D%2739.00%27%20cy%3D%2734.90%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2742.55%27%20cy%3D%2736.95%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2742.55%27%20cy%3D%2741.05%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2739.00%27%20cy%3D%2743.10%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2735.45%27%20cy%3D%2741.05%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2735.45%27%20cy%3D%2736.95%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2739%27%20cy%3D%2739%27%20r%3D%272.0%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.077%29%27%2F%3E%3Ccircle%20cx%3D%2739%27%20cy%3D%2713%27%20r%3D%271.2%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.065%29%27%2F%3E%3Ccircle%20cx%3D%2713%27%20cy%3D%2739%27%20r%3D%271.2%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.065%29%27%2F%3E%3C%2Fsvg%3E");
	--buzzi-titolo: "Fraunces", Georgia, serif;
	--buzzi-testo: "Nunito", system-ui, sans-serif;
}

/* I nostri componenti ragionano sempre in border-box: senza, un padding
   sommato a una larghezza del 100% sfora il contenitore, e basta un solo
   elemento piu' largo dello schermo per allargare tutto il documento — e con
   esso ogni contenitore calcolato in percentuale. */
.buzzi-home,
.buzzi-negozio,
.buzzi-pagina,
.buzzi-pie,
.buzzi-home *,
.buzzi-negozio *,
.buzzi-pagina *,
.buzzi-pie * {
	box-sizing: border-box;
}

/* Rete di sicurezza: nessuna immagine puo' superare il proprio contenitore. */
.buzzi-home img,
.buzzi-negozio img,
.buzzi-pagina img,
.buzzi-pie img {
	max-width: 100%;
}

/* Divi colora i propri contenitori esterni col beige del tema: non basta
   intervenire su #main-content, il colore arriva da piu' in alto. */
body.home #page-container,
body.home #et-main-area,
body.woocommerce #page-container,
body.woocommerce #et-main-area,
body.woocommerce-page #page-container,
body.woocommerce-page #et-main-area {
	background-color: var(--buzzi-carta);
}

.buzzi-home,
.buzzi-negozio {
	background-color: var(--buzzi-carta);
	color: var(--buzzi-inchiostro);
	font-family: var(--buzzi-testo);
	font-weight: 400;
}

.buzzi-contenitore {
	width: min(92%, 1280px);
	margin-inline: auto;
}

/* Tipografia --------------------------------------------------------------- */

.buzzi-home h1,
.buzzi-home h2,
.buzzi-home h3,
.buzzi-negozio h1,
.buzzi-negozio h2,
.buzzi-negozio h3 {
	font-family: var(--buzzi-titolo);
	font-weight: 400;
	font-variation-settings: "opsz" 96, "SOFT" 20;
	letter-spacing: -0.005em;
	color: var(--buzzi-inchiostro);
	margin: 0;
	padding: 0;
}

.buzzi-home h2,
.buzzi-negozio h2 {
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	line-height: 1.1;
}

.buzzi-occhiello {
	font-family: var(--buzzi-testo);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--buzzi-marchio);
	margin: 0 0 var(--sp-3);
}

/* Bottoni ------------------------------------------------------------------ */

.buzzi-bottone {
	display: inline-block;
	padding: 0.95rem 2.2rem;
	border: 1px solid var(--buzzi-marchio);
	background-color: transparent;
	color: var(--buzzi-marchio);
	font-family: var(--buzzi-testo);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.28s ease, color 0.28s ease;
}

.buzzi-bottone:hover {
	background-color: var(--buzzi-marchio);
	color: #fff;
}

.buzzi-bottone--chiaro {
	border-color: rgba(255, 255, 255, 0.9);
	color: #fff;
}

.buzzi-bottone--chiaro:hover {
	background-color: #fff;
	color: var(--buzzi-marchio);
}

/* Intestazioni di sezione --------------------------------------------------- */

/* Lo stacco che chiude una griglia a tutta pagina: stessa misura del passo
   fra le tessere, cosi' la sezione finisce con il ritmo con cui e' costruita. */
.buzzi-stacco-griglia {
	height: var(--gutter-griglia);
}

/* Intestazione di sezione.
   Impilata quando introduce contenuto incolonnato dentro il contenitore;
   affiancata (titolo a sinistra, link a destra sulla stessa linea di base)
   quando introduce una griglia a tutta pagina: li' il vuoto centrale non si
   percepisce perche' la griglia sottostante occupa la stessa larghezza. */
.buzzi-sezione__intestazione {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-2);
	padding-block: var(--sp-5) var(--sp-4);
}

.buzzi-sezione__intestazione--griglia {
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	width: min(92%, 1280px);
	margin-inline: auto;
	padding-inline: 0;
}

.buzzi-sezione__link {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--buzzi-marchio);
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: 0.2rem;
	box-shadow: inset 0 -1px 0 rgba(97, 103, 86, 0.35);
	transition: box-shadow 0.25s ease;
}

a.buzzi-sezione__link:hover {
	box-shadow: inset 0 -1px 0 var(--buzzi-marchio);
}

/* Fregio --------------------------------------------------------------------
   Fascia ornamentale. Il motivo e' il fiore dei biscotti della casa, non un
   damasco generico: l'ornamento esce dal prodotto. Sottile e tenue, deve
   leggersi come una trama e non come un disegno.
   --------------------------------------------------------------------------- */

.buzzi-fregio {
	position: relative;
	height: 26px;
	overflow: hidden;
	background-color: var(--buzzi-marchio);
}

/* La trama vive su un livello proprio, largo una piastrella in piu' del
   contenitore: traslandolo esattamente di una piastrella il ciclo si chiude
   senza stacco. Si anima "transform" e non "background-position" perche' il
   primo lo gestisce la scheda grafica, il secondo costringe a ridisegnare. */
.buzzi-fregio::before {
	content: "";
	position: absolute;
	inset: 0 -52px 0 0;
	background-image: var(--buzzi-trama);
	background-size: 52px 52px;
	background-repeat: repeat;
}

/* Tessera prodotto ----------------------------------------------------------
   Usata nella galleria della home, nel negozio e nei correlati: e' l'unita'
   base del catalogo. A riposo la griglia resta pura; le informazioni si
   rivelano al passaggio, come nelle gallerie di moda.
   --------------------------------------------------------------------------- */

.buzzi-vetrina__griglia {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gutter-griglia);
	padding-inline: var(--gutter-griglia);
}

.buzzi-tessera {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: var(--buzzi-fondo-foto);
	text-decoration: none;
	color: inherit;
}

.buzzi-tessera img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.buzzi-tessera--grande {
	grid-column: span 2;
	grid-row: span 2;
}

a.buzzi-tessera:hover img {
	transform: scale(1.035);
}

.buzzi-tessera__info {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 0.25rem;
	padding: 1.3rem;
	background: linear-gradient(to top, rgba(24, 12, 10, 0.72) 0%, rgba(24, 12, 10, 0.28) 45%, rgba(24, 12, 10, 0) 78%);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.buzzi-tessera__nome,
.buzzi-tessera__prezzo {
	transform: translateY(8px);
	transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.buzzi-tessera__prezzo {
	transition-delay: 0.04s;
}

a.buzzi-tessera:hover .buzzi-tessera__info,
a.buzzi-tessera:focus-visible .buzzi-tessera__info {
	opacity: 1;
}

a.buzzi-tessera:hover .buzzi-tessera__nome,
a.buzzi-tessera:hover .buzzi-tessera__prezzo,
a.buzzi-tessera:focus-visible .buzzi-tessera__nome,
a.buzzi-tessera:focus-visible .buzzi-tessera__prezzo {
	transform: translateY(0);
}

.buzzi-tessera__nome {
	font-family: var(--buzzi-testo);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

.buzzi-tessera__prezzo,
.buzzi-tessera__prezzo .amount {
	font-size: 0.88rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.88);
}

.buzzi-tessera__esaurito {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.35rem 0.75rem;
	background-color: rgba(253, 250, 244, 0.92);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--buzzi-marchio);
}

@media (hover: none) {
	.buzzi-tessera__info {
		opacity: 1;
		background: linear-gradient(to top, rgba(24, 12, 10, 0.68) 0%, rgba(24, 12, 10, 0) 46%);
	}

	.buzzi-tessera__nome,
	.buzzi-tessera__prezzo {
		transform: none;
	}
}

@media (max-width: 680px) {
	.buzzi-vetrina__griglia {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		padding-inline: 8px;
	}

	.buzzi-tessera--grande {
		grid-column: span 2;
		grid-row: span 1;
	}

	.buzzi-fregio {
		height: 20px;
	}

	/* Impilati, titolo e collegamento restavano schiacciati contro il bordo
	   sinistro, e il collegamento — minuscolo e subito sotto — sembrava un
	   sottotitolo invece di un'azione. Sul telefono non c'e' spazio per
	   tenerli affiancati, quindi la lettura passa sull'asse centrale, come
	   gia' fa la sezione dei Baci poco sopra, e il collegamento prende aria. */
	.buzzi-sezione__intestazione,
	.buzzi-sezione__intestazione--griglia {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--sp-2);
	}
}

/* ==========================================================================
   Pie' di pagina
   Caricato ovunque perche' base.css e' il foglio condiviso: il pie' di pagina
   e' l'unico elemento che deve essere identico su tutte le pagine del sito.
   ========================================================================== */

.buzzi-pie {
	/* Era un marrone quasi nero, scelto per accordarsi al bordeaux. Ora il
	   piede e' verde come la fascia in cima: la pagina si apre e si chiude
	   con lo stesso colore, e il verde smette di essere un accento sparso.
	   Si usa la variante scura e non il marchio pieno perche' sopra al piede
	   c'e' quasi sempre la fascia d'invito, anch'essa verde: con lo stesso
	   valore i due blocchi si fonderebbero in un'unica massa alta 700px. */
	background-color: var(--buzzi-marchio-scuro);
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--buzzi-testo);
	font-weight: 300;
}

.buzzi-pie .buzzi-fregio {
	height: 18px;
}

.buzzi-pie__griglia {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
	gap: clamp(2rem, 4vw, 4rem);
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.buzzi-pie__logo {
	display: block;
	height: 30px;
	width: auto;
	margin-bottom: var(--sp-3);
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

.buzzi-pie__marca p {
	margin: 0;
	max-width: 24rem;
	font-size: 0.95rem;
	line-height: 1.75;
}

.buzzi-pie__social {
	display: flex;
	gap: var(--sp-3);
	margin: var(--sp-3) 0 0;
	padding: 0;
	list-style: none;
}

.buzzi-pie__social a {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	padding-bottom: 0.25rem;
	box-shadow: inset 0 -1px 0 rgba(97, 103, 86, 0.35);
	transition: box-shadow 0.25s ease, color 0.25s ease;
}

.buzzi-pie__social a:hover {
	color: var(--buzzi-crema);
	box-shadow: inset 0 -1px 0 var(--buzzi-crema);
}

.buzzi-pie h2 {
	margin: 0 0 var(--sp-2);
	font-family: var(--buzzi-testo) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55) !important;
}

.buzzi-pie__colonna ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.buzzi-pie__colonna li + li {
	margin-top: 0.55rem;
}

.buzzi-pie a,
.buzzi-pie address {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.95rem;
	font-style: normal;
	line-height: 1.75;
	text-decoration: none;
	transition: color 0.22s ease;
}

.buzzi-pie__colonna a:hover,
.buzzi-pie__dove a:hover {
	color: #fff;
}

.buzzi-pie__dove p {
	margin: var(--sp-2) 0 0;
}

.buzzi-pie__coda {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-block: var(--sp-3);
}

.buzzi-pie__coda .buzzi-contenitore {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
}

/* Il modulo Codice di Divi rimuove i <p> adiacenti: la coda usa span. */
.buzzi-pie__coda p,
.buzzi-pie__legale,
.buzzi-pie__nota {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 980px) {
	.buzzi-pie__griglia {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-4);
	}

	.buzzi-pie__marca {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.buzzi-pie__griglia {
		grid-template-columns: minmax(0, 1fr);
	}

	.buzzi-pie__coda .buzzi-contenitore {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Nota: le tracce mobile usano minmax(0, 1fr) e non 1fr. Una traccia 1fr ha
   come dimensione minima il contenuto: un'immagine con larghezza intrinseca di
   1024px allarga la colonna oltre lo schermo e fa traboccare la pagina. */

/* ==========================================================================
   Movimento
   Animazioni legate allo scorrimento, scritte in CSS puro: niente JavaScript,
   niente libreria, nessun costo di caricamento.

   Tre cautele deliberate:
   1. tutto sta dentro @supports: dove il browser non conosce animation-timeline
      non viene applicato nemmeno lo stato iniziale, quindi il sito resta
      perfettamente leggibile invece di restare invisibile;
   2. tutto sta dentro prefers-reduced-motion: no-preference — chi ha chiesto
      meno animazioni non ne vede nessuna;
   3. gli spostamenti sono minimi (12-16px) e le scale impercettibili: il
      movimento deve accompagnare la lettura, non annunciarsi.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {

		@keyframes buzzi-entra {
			from {
				opacity: 0;
				transform: translateY(16px);
			}
			to {
				opacity: 1;
				transform: none;
			}
		}

		/* Comparsa alla lettura: titoli, testi, schede, blocchi informativi. */
		.buzzi-sezione__intestazione,
		.buzzi-laboratorio__testata,
		.buzzi-firma__testo,
		.buzzi-firma__foto,
		.buzzi-storia__testo,
		.buzzi-ambiente,
		.buzzi-chiusura .buzzi-contenitore,
		.buzzi-negozio__testata,
		.buzzi-pagina__testata,
		.buzzi-pagina__testo,
		.buzzi-pagina__figura,
		.buzzi-recapiti__blocco,
		.buzzi-scheda__info,
		.buzzi-pie__griglia > * {
			animation: buzzi-entra linear both;
			animation-timeline: view();
			animation-range: entry 4% cover 26%;
		}

		/* Le tessere del catalogo entrano una a una mentre la griglia scorre:
		   lo sfalsamento nasce dalla posizione, non da ritardi calcolati. */
		.buzzi-tessera,
		.buzzi-laboratorio__scatto {
			animation: buzzi-entra linear both;
			animation-timeline: view();
			animation-range: entry 2% cover 18%;
		}

		/* L'immagine si assesta dentro la propria cornice mentre scorre: e' il
		   parente sobrio del parallax, senza il salto che il parallax produce
		   su telefono. */
		@keyframes buzzi-assesta {
			from { transform: scale(1.1); }
			to   { transform: scale(1); }
		}

		/* La scala del 10% va ritagliata dalla cornice. Senza questo
		   l'immagine, larga quanto lo schermo, deborda mentre si assesta: sul
		   telefono la pagina scorre di lato di qualche pixel e sembra rotta.
		   Sta qui dentro, e non fra gli stili di base, perche' serve solo dove
		   l'animazione viene davvero applicata. */
		.buzzi-firma__foto,
		.buzzi-pagina__ritratto,
		.buzzi-storia__foto {
			overflow: hidden;
		}

		.buzzi-firma__foto img,
		.buzzi-pagina__ritratto img,
		.buzzi-storia__foto img {
			animation: buzzi-assesta linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 90%;
		}

	}
}

/* ==========================================================================
   Messa a fuoco da tastiera
   Chi naviga senza mouse deve sempre sapere dove si trova. Divi rimuove il
   contorno di sistema: qui viene rimesso, con i colori della casa.
   ========================================================================== */

.buzzi-home a:focus-visible,
.buzzi-negozio a:focus-visible,
.buzzi-pagina a:focus-visible,
.buzzi-pie a:focus-visible,
.buzzi-home button:focus-visible,
.buzzi-negozio button:focus-visible,
.buzzi-negozio input:focus-visible,
.buzzi-pagina summary:focus-visible,
.buzzi-negozio summary:focus-visible {
	outline: 2px solid var(--buzzi-marchio);
	outline-offset: 3px;
	border-radius: 1px;
}

.buzzi-pie a:focus-visible {
	outline-color: #fff;
}

/* Sulle tessere il contorno segue l'immagine, non il testo sovrapposto. */
a.buzzi-tessera:focus-visible {
	outline: 3px solid var(--buzzi-marchio);
	outline-offset: -3px;
}

/* Piè di pagina a tutta larghezza, su qualunque tipo di pagina --------------
   Il piede vive dentro una riga del Theme Builder di Divi. Divi assegna a
   quella riga una larghezza che cambia a seconda del tipo di pagina: sulle
   pagine di archivio (categoria prodotto, per esempio) restava all'80%, e sul
   telefono il piede compariva rimpicciolito, con due margini chiari ai lati
   che facevano sembrare rotta la pagina.
   L'aggancio e' il suffisso "_tb_footer", che Divi mette su sezione, riga e
   colonna del layout piede: regge anche se cambia la numerazione dei moduli. */
.et_pb_row[class*="_tb_footer"],
.et_pb_section[class*="_tb_footer"] .et_pb_row,
.et_pb_column[class*="_tb_footer"] {
	width: 100% !important;
	max-width: 100% !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}