/* components.css — componenti di sezione e chrome del verticale food_producer.
   Tesi: produttore agricolo di famiglia, editoriale-caldo. Fondo crema, bande piene di bordeaux (il marchio)
   e arancio-zagara come unico accento. Il linguaggio della categoria Food: hero foto-cibo, eredità/tradizione,
   griglia di barattoli, passi dal raccolto al barattolo, banda sconto. Le foto grandi (agrumeto) sono lo hero;
   i barattoli, piccoli, stanno in tessere con gutter. I colori arrivano da tokens.css: qui non si dichiarano. */

/* ============================ Chrome: header ============================ */
/* Header fisso "a vetro". ⚠ backdrop-filter crea un containing-block per il position:fixed → l'overlay
   del menu mobile va forzato a 100vh (vedi .is-menu-open in fondo), altrimenti si confina all'header. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: var(--border);
}
/* Il wrapper WP del template-part limiterebbe lo sticky: display:contents lo toglie di mezzo. */
.wp-block-template-part { display: contents; }

/* Riga header CENTRATA verticalmente: align-items:center + azzeramento dei margini di blocco WP,
   che spingerebbero nav e CTA sotto il centro. */
.site-header__row {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 84px; padding-block: var(--space-1);
}
.site-header__row > * { align-self: center; margin-block: 0; }

.wordmark { font-family: var(--font-display); font-size: 1.55rem; line-height: 1; display: flex; align-items: center; gap: var(--space-3); color: var(--brand); }
.wordmark small { display: block; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); margin-top: .25rem; }
/* Logo del cliente (emblema + testo, già integrato): sostituisce il wordmark testuale, nessuno span extra. */
.wordmark--logo .wordmark__logo { height: 72px; width: auto; display: block; }
/* Lockup d'intestazione: emblema del cliente (mark) + nome in Pacifico (wordmark, verde del logo). */
.wordmark--lockup { gap: var(--space-3); }
.wordmark__emblem { height: 66px; width: auto; display: block; flex: none; }
.wordmark__name { font-family: var(--font-brand); font-weight: 400; color: #58a55a; font-size: 1.95rem; line-height: 1; letter-spacing: 0; padding-top: .1em; }
@media (max-width: 640px) { .wordmark__emblem { height: 52px; } .wordmark__name { font-size: 1.5rem; } }
.wordmark__mark { flex: none; }
.wordmark__txt { display: block; }
@media (max-width: 560px) { .wordmark--logo .wordmark__logo { height: 60px; } }

.site-nav { margin-left: auto; }
/* Voci con underline d'accento animata all'hover (micro-interazione moderna, sobria). */
.site-nav a { font-size: .95rem; font-weight: 500; position: relative; padding-block: .35rem; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent-deco); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.site-nav a:hover::after, .site-nav .current-menu-item > a::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .site-nav a::after { transition: none; } }

/* Sotto-menu DESKTOP: il default WP è una card bianca squadrata. Qui è un pannello bordeaux col filetto
   d'arancio in testa. ⚠ SPECIFICITÀ: WP dichiara `.wp-block-navigation .wp-block-navigation__submenu-container
   {background-color:#fff}` (0,2,0) iniettato DOPO il tema → a parità vince WP e il pannello resta BIANCO.
   Serve un livello in più (`.site-header .site-nav …`). Stessa trappola del bottone header e dell'overlay. */
.site-header .site-nav .wp-block-navigation__submenu-container {
  background: var(--brand);
  border: none; border-top: 2px solid var(--accent-fill);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
  padding-block: var(--space-3);
  min-width: 15rem;
}
.site-header .site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--on-dark); padding: var(--space-3) var(--space-5); width: 100%;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-header .site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: color-mix(in srgb, var(--on-dark) 10%, transparent); color: var(--accent-fill);
}
/* Telefono come secondario leggero (con icona): la CTA "Chiama ora" resta l'azione primaria. */
.site-header__tel { font-weight: 500; font-size: .92rem; white-space: nowrap; color: var(--ink-muted); display: inline-flex; align-items: center; gap: .4rem; transition: color var(--dur) var(--ease); }
.site-header__tel:hover { color: var(--brand); }
.site-header__tel svg { flex: none; opacity: .85; }
.site-header__cta { white-space: nowrap; }
/* Su mobile telefono e CTA escono dall'header (che ha già logo + hamburger): li porta la .cta-bar fissa in
   basso. ⚠ Selettore discendente: `.site-header__cta` e `.btn` hanno pari specificità e `.btn` è dichiarato
   DOPO — la media query non aggiunge specificità, quindi una regola piatta verrebbe sovrascritta. */
@media (max-width: 820px) {
  .site-header .site-header__tel, .site-header .site-header__cta { display: none; }
}

/* ============================ Bottoni ============================ */
/* ⚠ CONTRATTO a11y (verificato): CTA primaria = bordeaux + testo --on-dark (10.2:1). CTA accento = fondo
   --accent-fill (#E08A3C) + testo --ink (6.4:1). MAI testo bianco su arancio (4.0:1) né ink su --accent-deco. */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--accent { background: var(--accent-fill); color: var(--ink); }
.btn--accent:hover { background: #EEA45E; }
.btn--brand { background: var(--brand); color: var(--on-dark); }
.btn--brand:hover { background: var(--brand-deep); }
.btn--ghost { border-color: var(--brand); color: var(--brand); }
.btn--ghost:hover { background: var(--brand); color: var(--on-dark); }
/* Ghost su banda scura: bordo ed etichetta ereditano crema, l'hover inverte. */
.btn--ghost-on-dark { border-color: var(--on-dark); color: var(--on-dark); }
.btn--ghost-on-dark:hover { background: var(--on-dark); color: var(--brand); }

/* ============================ Hero ============================ */
/* L'hero si estende SOTTO l'header fisso (overlay): l'immagine arriva fino in cima allo schermo, l'header
   cream-glass ci galleggia sopra (logo/menu restano leggibili sul vetro chiaro). Solo la home ha .hero →
   le altre pagine sono intatte. Il contenuto ha un padding-top che libera l'altezza dell'header. */
.hero { position: relative; color: var(--on-dark); isolation: isolate; overflow: hidden; }
.hero__inner { position: relative; z-index: 2; display: grid; align-items: center; min-height: clamp(30rem, 24rem + 22vw, 44rem); padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.hero__text { max-width: 44rem; }
.hero .eyebrow--light { margin-bottom: var(--space-4); }
/* ⚠ Size PROPRIA (non riuso di --text-3xl secco): l'h1 sta su colonna larga ma la copy reale del cliente
   può superare i 60 caratteri → il cap del clamp evita le 5 righe. La misura di lettura sta sulla LEAD. */
.hero h1 { color: var(--on-dark); font-size: var(--text-3xl); margin-block: 0 var(--space-5); }
.hero .lead { color: var(--on-dark); opacity: .95; max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* Hero DESIGN (senza foto): banda bordeaux piena. È il caso limite del verticale e il fondo del demo. */
.hero--design { background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%); }
.hero--design::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 85% 15%, color-mix(in srgb, var(--accent-deco) 30%, transparent), transparent 60%); }

/* Hero FOTO: slideshow crossfade di foto-cibo (agrumeto/marmellata). Il testo NON dipende dal fotogramma:
   scrim bordeaux forte sotto il testo. reduced-motion → prima foto fissa. (rule 2) */
.hero--photo .hero__inner { min-height: clamp(32rem, 26rem + 22vw, 46rem); }
.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--brand-deep); }
/* Effetto "video": 6 foto naturalistiche in crossfade rapido + zoom continuo (Ken Burns). Non è un mp4
   (il video non è nel materiale né gestito dalla pipeline): il movimento continuo lo simula, senza il peso. */
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; will-change: opacity, transform; animation: fp-hero-fade 27s ease-in-out infinite; }
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 4.5s; }
.hero-slide:nth-child(3) { animation-delay: 9s; }
.hero-slide:nth-child(4) { animation-delay: 13.5s; }
.hero-slide:nth-child(5) { animation-delay: 18s; }
.hero-slide:nth-child(6) { animation-delay: 22.5s; }
@keyframes fp-hero-fade {
  0% { opacity: 0; transform: scale(1.0); }
  4% { opacity: 1; }
  13% { opacity: 1; }
  18% { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.0); }
}
/* Scrim: sfuma il bordeaux da sinistra (sotto il testo) e scurisce il fondo. */
.hero--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-deep) 92%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 70%, transparent) 45%, color-mix(in srgb, var(--brand-deep) 30%, transparent) 100%),
              linear-gradient(0deg, color-mix(in srgb, var(--brand-deep) 55%, transparent), transparent 55%); }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; opacity: 0; }
  .hero-slide:nth-child(1) { opacity: 1; }
}
@media (max-width: 640px) { .hero__actions .btn { flex: 1 1 auto; justify-content: center; } }

/* ============================ Storia (featured) ============================ */
/* Editoriale a due campi: eyebrow + statement display a sinistra, racconto a destra. Nessuna foto nella
   sezione (le foto vivono nell'hero e nella specialità): text-only regge sia il demo sia il sito reale.
   Il primo capoverso del racconto è l'attacco editoriale (nessun campo nuovo: è il body, trattato). */
.storia__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem) clamp(2rem, 6vw, 5rem); align-items: start; }
/* Effetto macchina da scrivere sulla frase della storia (font ORIGINALE DM Serif via .statement; l'animazione
   la fa reveal.js digitando una lettera alla volta). Cursore lampeggiante mentre digita, poi sparisce. */
.storia .statement.is-typing::after { content: "|"; margin-left: .04em; color: var(--accent-text); font-weight: 400; animation: fp-tw-blink 1s step-end infinite; }
@keyframes fp-tw-blink { 50% { opacity: 0; } }
.storia__body > p:first-child { font-family: var(--font-display); font-size: var(--text-md); color: var(--accent-text); border-left: 3px solid var(--accent-deco); padding-left: var(--space-5); margin-bottom: var(--space-5); line-height: 1.4; }
.storia__body > p + p { margin-top: var(--space-4); }
@media (max-width: 860px) { .storia__grid { grid-template-columns: 1fr; } }

/* ============================ Prodotti (services): griglia di barattoli ============================ */
.prodotti__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tile-gap); }
.jar { display: flex; flex-direction: column; background: var(--paper); border: var(--border); border-radius: var(--radius); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.jar:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* ⚠ Il barattolo si vede INTERO (richiesta cliente, come il sito attuale): contain, non cover. Le foto
   sono su fondo bordeaux (#691b20) → il box ha lo stesso fondo e la lettera-box è invisibile. Ratio 4/5
   = quello del formato foto, così il barattolo riempie la cella senza tagli sull'etichetta. */
.jar__media { aspect-ratio: 4 / 5; overflow: hidden; background: #691b20; }
.jar__media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur) var(--ease); }
.jar:hover .jar__media img { transform: scale(1.04); }
.jar__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.jar h3 { color: var(--ink); }
.jar__text { color: var(--ink-muted); font-size: .92rem; }
/* Link all'etichetta del prodotto (PDF, apre in nuova scheda), in fondo alla card. */
.jar__label { margin-top: auto; padding-top: var(--space-3); align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--accent-text); text-decoration: none; }
.jar__label:hover { text-decoration: underline; text-underline-offset: 2px; }
.spec__text-col .jar__label { margin-top: var(--space-4); }
/* Variante DESIGN (demo / nessuna foto): tessere piene, come dispensa. Nessuna foto finta. */
.jar--filled { min-height: 13rem; justify-content: center; }
.jar--filled .jar__body { justify-content: center; }
.jar--brand { background: var(--brand); border-color: var(--brand); }
.jar--brand h3, .jar--brand .jar__text { color: var(--on-dark); }
.jar--brand .jar__text { opacity: .9; }
.jar--accent { background: var(--accent-tint); border-color: var(--accent-tint); }
.jar--accent h3 { color: var(--brand); }
.jar--accent .jar__text { color: var(--ink-muted); }
@media (max-width: 900px) { .prodotti__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .prodotti__grid { grid-template-columns: 1fr; } }

/* Banda sconto (device Food: "receive a 10% discount"). Arancio tenue, testo ink; il numero in display. */
.promo { margin-top: var(--space-7); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5);
  background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent-deco) 40%, transparent); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); }
.promo__big { font-family: var(--font-display); font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem); color: var(--brand); line-height: 1.1; }
.promo__text { color: var(--ink); }
.promo__text strong { color: var(--accent-text); }

/* ============================ Metodo: dal raccolto al barattolo ============================ */
.pattern-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.pstep { position: relative; padding-top: var(--space-6); }
.pstep__n { font-family: var(--font-display); font-size: 3.2rem; line-height: 1; color: var(--accent-text); display: block; }
.pstep h3 { margin-block: var(--space-3) var(--space-2); color: var(--ink); }
.pstep__text { color: var(--ink-muted); font-size: .92rem; }
/* Filo orizzontale che cuce gli step (si spegne a una colonna). */
.pstep::before { content: ""; position: absolute; top: var(--space-6); left: 0; right: calc(var(--gutter) * -1); height: 2px; background: var(--accent-deco); opacity: .5; }
.pstep:last-child::before { right: 0; }
@media (max-width: 980px) { .pattern-steps { grid-template-columns: repeat(2, 1fr); } .pstep::before { display: none; } }
@media (max-width: 520px) { .pattern-steps { grid-template-columns: 1fr; } }

/* ============================ Specialità (gallery): miele + Amarello ============================ */
/* Due prodotti-firma in evidenza: foto grande + testo, sfalsati (foto a lati alternati). Present solo con
   le foto reali dei due prodotti (variante asset-driven); il demo, senza foto, li omette. */
.spec { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.spec__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.spec__row:nth-child(even) .spec__media { order: 2; }
/* Le foto specialità (bottiglia Amarello verticale, miele orizzontale) si vedono INTERE: contain sul bordeaux
   delle foto (#691b20), box quadrato = buon compromesso per i due orientamenti. Niente tappo tagliato. */
.spec__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: #691b20; aspect-ratio: 1 / 1; }
.spec__media img { width: 100%; height: 100%; object-fit: contain; }
.spec h3 { color: var(--brand); font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); margin-bottom: var(--space-3); }
.spec__text { color: var(--ink-muted); }
@media (max-width: 760px) { .spec__row { grid-template-columns: 1fr; } .spec__row:nth-child(even) .spec__media { order: 0; } }

/* ============================ Naturale (trust) ============================ */
.trust__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.trust__items { display: grid; gap: var(--space-4); }
.tcard { padding: var(--space-5); background: var(--paper); border: var(--border); border-radius: var(--radius); }
.tcard h3 { color: var(--ink); margin-bottom: var(--space-2); }
.tcard__text { color: var(--ink-muted); font-size: .92rem; }
/* Checks = pill list (device Food: "senza addensanti/coloranti/conservanti"). Arancio tenue, testo ink. */
.checks { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.checks li { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--accent-tint); color: var(--ink); font-weight: 500; font-size: .9rem; padding: var(--space-2) var(--space-4); border-radius: 999px; }
.checks li::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent-deco); flex: none; }
@media (max-width: 860px) { .trust__grid { grid-template-columns: 1fr; } }

/* ============================ Banda contatti (contact_band) ============================ */
.band--dark { background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%); color: var(--on-dark); }
.band--dark h2 { color: var(--on-dark); }
.band--dark .lead { color: var(--on-dark); opacity: .95; }
.contact-band__inner { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: space-between; }
.contact-band__text { max-width: 48ch; }

/* ============================ Testata di pagina ============================ */
/* ⚠ La page-head NON riusa la size dell'hero (--text-3xl): è una testata, non un hero. È CONDIVISA da tutte
   le pagine interne: sistemala UNA volta. */
.page-head { background: var(--surface); padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); border-bottom: var(--border); }
.page-head h1 { font-size: var(--text-2xl); color: var(--brand); }
.page-head p { color: var(--ink-muted); }

/* Intro di sezione: colonna di misura leggibile, non riga piena. */
.section-intro { max-width: 48rem; margin-bottom: var(--space-7); }

/* ============================ Pagina Contatti (2 colonne) — sito reale ============================ */
.contact-cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-cols h2 { margin-bottom: var(--space-5); }
.contact-form { display: grid; gap: var(--space-4); }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field label { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.field input, .field textarea {
  font: inherit; color: var(--ink); width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent-deco); }
/* ⚠ .consent è un flex: il testo (link incluso) va TUTTO in uno <span>, altrimenti l'<a> diventa un flex-item a sé. */
.consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: .92rem; color: var(--ink-muted); }
.consent input { margin-top: .25rem; flex: none; }
.consent a { color: var(--accent-text); text-decoration: underline; }
.contact-form button { justify-self: start; }
.form-note { margin-top: var(--space-1); }
.contact-info { background: var(--surface); border: var(--border); border-radius: var(--radius); padding: var(--space-6); }
.contact-info dl { display: grid; gap: var(--space-4); margin: 0; }
.contact-info dt { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-text); }
.contact-info dd { margin: var(--space-1) 0 0; line-height: 1.6; }
.contact-info a { text-decoration: underline; text-underline-offset: 2px; }
.contact-info .btn { margin-top: var(--space-5); text-decoration: none; }
@media (max-width: 860px) {
  .contact-cols { grid-template-columns: 1fr; }
  .contact-form .row { grid-template-columns: 1fr; }
}

/* ============================ Footer ============================ */
.site-footer { background: var(--brand-deep); color: var(--on-dark); padding-block: var(--space-8) var(--space-6); }
.site-footer a:hover { color: var(--accent-fill); }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--gutter); }
.site-footer .wordmark { color: var(--on-dark); }
.site-footer h4 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-fill); margin-bottom: var(--space-4); }
/* Il wordmark è condiviso con l'header (fondo chiaro), dove il suo <small> è --ink-muted: sul fondo scuro
   del footer quel valore scende sotto soglia → qui va il testo secondario da fondo scuro. */
.site-footer .wordmark small { color: var(--on-dark-muted); }
.site-footer p { color: var(--on-dark); opacity: .92; font-size: .95rem; }
.site-footer__tag { margin-top: var(--space-4); max-width: 34ch; }
.site-footer__demo { margin-top: var(--space-4); color: var(--on-dark-muted); font-size: var(--text-sm); }
.site-footer__legal { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid color-mix(in srgb, var(--on-dark) 18%, transparent); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; color: var(--on-dark-muted); font-size: var(--text-sm); }
.site-footer__dgitaly { display: inline-flex; align-items: center; gap: var(--space-2); }
.site-footer__dgitaly img { display: inline-block; }
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ============================ CTA bar mobile ============================ */
.cta-bar { display: none; }
@media (max-width: 820px) {
  .cta-bar {
    position: fixed; inset: auto 0 0 0; z-index: 40;
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--brand-deep); border-top: 1px solid color-mix(in srgb, var(--on-dark) 18%, transparent);
  }
  .cta-bar a { padding: var(--space-4); text-align: center; color: var(--on-dark); font-weight: 600; font-size: .95rem; }
  .cta-bar__call { background: var(--accent-fill); color: var(--ink); }   /* contratto: su arancio chiaro, testo ink (6.4:1) */
  body { padding-bottom: 56px; }
}

/* ============================ Menu mobile (overlay wp:navigation) ============================ */
/* ⚠ L'header ha backdrop-filter → containing-block per il fixed: senza questo, l'overlay si confina
   all'altezza dell'header e il menu risulta "rotto". ⚠ SPECIFICITÀ: WP dichiara l'overlay bianco con
   (0,4,0) → va ripreso lo stesso schema di selettore. */
.site-nav:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay),
.wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--brand); color: var(--on-dark);
}
/* Le voci a SINISTRA: va messo su TUTTA la catena (è il padre largo quanto il viewport che spinge a destra). */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  align-items: flex-start; justify-content: flex-start;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-left: var(--gutter); padding-bottom: 96px; }
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  top: var(--space-4); right: var(--space-4); padding: var(--space-3); color: var(--on-dark); border-radius: var(--radius);
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover { background: color-mix(in srgb, var(--on-dark) 12%, transparent); }
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 1.4; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { width: 100%; text-align: left; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { margin-left: auto; }
/* I sotto-menu su mobile stanno INLINE, non come card-dropdown desktop. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important; border: none !important; box-shadow: none !important; background: none !important; padding-left: var(--space-5);
}

/* ============================ Scroll-reveal (micro-JS IntersectionObserver) ============================ */
/* Fail-visible: senza JS il contenuto è già visibile. reduced-motion rivela tutto.
   ⚠ MAI `.reveal` su un contenitore di IMMAGINI: con opacity:0 il browser NON scarica le img che contiene.
   Il reveal MUOVE (transform), non tocca l'opacity dei testi vicino alla soglia AA. */
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .prodotti__grid, .js .spec, .js .hero-media { opacity: 1; transform: none; }
.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity 620ms var(--ease), transform 620ms var(--ease); transition-delay: calc(var(--reveal-i, 0) * 90ms); }
/* Il metodo "dal raccolto al barattolo" appare uno step alla volta, ogni ~1,2 secondi (richiesta cliente).
   Ogni step ha .reveal + --reveal-i (0..3); il container NON è .reveal. */
.js .pstep.reveal.is-visible { transition-delay: calc(var(--reveal-i, 0) * 1200ms); }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }