/* ============================================================
   TEMA TIBALDI — continuità stilistica col sito cantinatibaldi.com
   Fonte: design system v2 (tema VamTam Lagar). Caricato per ULTIMO:
   a parità di specificità vince su tutti gli stili di pagina.
   Palette: oro #B98D58 · verde-grigio #545D5C · blu notte #242E35
            avorio #F9F8F4 · linee #DEDDD9 · rosso SOLO promo #A33035
   Tipografia: Poppins (titoli, prezzi, azioni) · Cormorant Infant
   (testo, citazioni) · Alata (etichette, occhielli, form).
   ============================================================ */

/* ---------- base ---------- */
body{font-size:18px;line-height:1.55}

/* ---------- registro display: titoli in Poppins maiuscolo spaziato,
     misure ricalibrate (il maiuscolo geometrico pesa più del serif) --- */
h1,h2,h3{text-transform:uppercase;line-height:1.28}
h1{letter-spacing:.1em;font-weight:700;font-size:clamp(1.55rem,2.9vw,2.2rem)}
.hero h1{letter-spacing:.14em;font-size:clamp(1.7rem,3.6vw,2.75rem)}
h2{letter-spacing:.16em;font-weight:700;font-size:clamp(1.02rem,2vw,1.3rem)}
h3{letter-spacing:.14em;font-weight:600;font-size:1rem}
.qv-name{text-transform:uppercase;letter-spacing:.08em}
.fam-n{text-transform:uppercase;letter-spacing:.1em;font-size:.82rem}
/* sottotitoli morbidi in Alata, come gli H4/H5 della cantina */
h4,.line h4{font-family:'Alata',system-ui,sans-serif;font-weight:400;text-transform:none;letter-spacing:.02em}

/* le citazioni tornano al serif corsivo (registro editoriale cantina) */
.story blockquote,.somm .q,.qv-somm{font-family:var(--sans);font-style:italic;letter-spacing:0;text-transform:none;line-height:1.45}
.vitigno{font-family:var(--sans)}

/* ---------- numeri e prezzi: Poppins pulito, mai spaziato ---------- */
.price,.pc-price,.wrow-price,.qv-price,.qnum,.sum-count b,.buybar .price,
.mbar .mb-t,.trio-tot .tt-v,.rc-p,.ti-p,.qspecs .v,.ricon-row b,.trust b,
.subt,.tot .tr.big,.yr-pick button{letter-spacing:0;text-transform:none}
.tot .tr.big{font-weight:700}

/* ---------- etichette e occhielli in Alata (leggibili ai corpi piccoli,
     dove il Cormorant si assottiglia troppo) ---------- */
.eyebrow,.topbar,.crumb,.pc-deno,.wrow-deno,.fmtline,.qv-deno,.sum-count,
.presets button,.tt-free,.cc2,.badge,.steps .st,.aw .src,.wmore,.chip,
.sp-msg,.ship{font-family:'Alata',system-ui,sans-serif;font-weight:400}
.topbar{color:#fff}

/* ---------- bottoni e campi: azione in Poppins, form in Alata ---------- */
button,.btn{font-family:'Poppins',system-ui,sans-serif}
input,textarea,select{font-family:'Alata',system-ui,sans-serif}

/* ---------- IL ROSSO — solo dove c'è uno sconto ---------- */
.p-now,.wrow-price .p-now,.qv-price .p-now,.pc-price .p-now{color:var(--promo)}
.tot .tr.disc,.tot .tr.disc #discLbl,.tot .tr.disc #disc{color:var(--promo)}
.p-was{color:#909090;text-decoration-color:rgba(144,144,144,.55)}

/* ---------- dettagli di continuità ---------- */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}


/* ============================================================
   AGGIORNAMENTO 01/09 — cantiere grafico (riferimento Fable)
   B: display H1 dal DNA del logotipo (Josefin Sans, alt: Jost)
   C: nav con la grammatica del sito cantina (barretta oro)
   C-bis: calibrazione dimensioni header (parenti, non fotocopie)
   ============================================================ */

/* --- B · display --- */
h1,.hero h1{
  font-family:'Josefin Sans','Jost',system-ui,sans-serif;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height:1.3;
}
.hero h1{font-size:clamp(2rem,4.2vw,3.2rem)}
h1{font-size:clamp(1.7rem,3.1vw,2.5rem)}
.hero h1 em,.hero h1 i{font-style:normal} /* niente corsivo nel display */

/* --- C · nav — la firma del sito cantina: linea PASSANTE che sborda
       oltre la parola (non sottolineatura). Attiva su hover e sulla
       voce della pagina corrente (classe .att dal mini-script nav). --- */
.hdr3 .nl a,.hdr .nl a{
  position:relative;
  font-size:13.5px;
  letter-spacing:.18em;
  font-weight:500;
}
.hdr3 .nl a::after,.hdr .nl a::after{
  content:"";
  position:absolute;left:-13px;right:-13px;top:50%;
  height:1.5px;margin-top:-1px;background:var(--gold);
  transform:scaleX(0);transform-origin:center;
  transition:transform .28s ease;
  pointer-events:none;
}
.hdr3 .nl a:hover::after,.hdr .nl a:hover::after,
.hdr3 .nl a:focus-visible::after,.hdr .nl a:focus-visible::after,
.hdr3 .nl a.att::after,.hdr .nl a.att::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.hdr3 .nl a::after,.hdr .nl a::after{transition:none}}

/* --- C-bis · calibrazione --- */
.hdr3 .brand-c img,.hdr .brand-c img{height:74px}          /* +12% sul 66px di partenza */
@media (max-width:900px){.hdr3 .brand-c img,.hdr .brand-c img{height:54px}}


/* --- Hero alternativo: VENTAGLIO originale (spento di default;
       si accende dal sintonizzatore o dal CSS esportato) --- */
.herofan{display:flex;align-items:flex-end;justify-content:center;min-height:520px;position:relative}
.herofan::after{content:"";position:absolute;left:8%;right:8%;bottom:18px;height:30px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(20,12,10,.12),transparent 72%);filter:blur(4px)}
.herofan .bot{position:relative;transform-origin:bottom center;transition:transform .35s}
.herofan .bot img{width:auto;filter:drop-shadow(0 16px 14px rgba(20,12,10,.18))}
.herofan .bot .grd{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:72%;height:20px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(20,12,10,.22),transparent 72%);filter:blur(2px);z-index:-1}

/* ===== MOBILE (solo qui; il desktop non usa queste regole) ===== */
.herofan{display:none}

/* --- Footer come il sito cantina: strati di terreno + strappo SVG ---
       Asset attesi in tibaldi-assets/: strati-terreno.webp, footer-shape.svg.
       Se mancano, resta il fondo pieno di prima: nessuna rottura. --- */
footer{position:relative;
  background:var(--ink) url('tibaldi-assets/strati-terreno.webp') bottom center/cover no-repeat;
  color:#fff;padding-top:120px}
footer::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:102vw;height:calc(102vw * 103 / 2062); /* proporzioni esatte del file (2062x103) */
  background:url('tibaldi-assets/footer-shape.svg') top center/100% 100% no-repeat;
  pointer-events:none}
footer a{color:#fff}
footer a:hover{color:rgba(255,255,255,.76)}


/* ============================================================
   AGGIORNAMENTO 02/09 — FOOTER come il sito cantina
   Struttura a righe centrate (niente colonne da e-commerce):
   badge FIVI · Telefono/Email/Indirizzo · Instagram · link shop · legale.
   Misure dal design system: Cormorant Infant 18px bianco, hover .76,
   icona social 30px con cerchio oro al passaggio, legale 16px.
   Icona Instagram da Font Awesome 6 brands (cdnjs), come sul sito cantina.
   ============================================================ */
footer{padding:120px 0 48px;min-height:45vh;font-size:18px;line-height:1.4;text-align:center;
  font-family:'Cormorant Infant',Georgia,serif;color:#fff}
@media (max-width:1024px){footer{min-height:30vh}}
@media (max-width:767px){footer{min-height:35vh;padding-top:90px}}
footer .ft{display:flex;flex-direction:column;align-items:center}
footer a{color:#fff}
footer a:hover{color:rgba(255,255,255,.76)}

/* badge FIVI: centrato in alto, come sul sito cantina */
.ft-fivi img{width:72px;height:auto;display:block}
.ft-fivi:hover img{opacity:.88}

/* contatti su tre colonne, etichetta + valore, tutto 18px */
.ft-contatti{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 40px;width:100%;max-width:1060px;margin:44px auto 0}
.ft-contatti div{line-height:1.25}
@media (max-width:767px){.ft-contatti{grid-template-columns:1fr;gap:18px}}

/* Instagram: 30px, cerchio trasparente → oro al passaggio (grammatica Elementor cantina) */
.ft-ig{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  margin-top:34px;transition:background .25s,transform .25s}
.ft-ig i{font-size:30px;line-height:1;font-style:normal;display:inline-block;color:#fff} /* glifo Font Awesome (brands), come sul sito cantina */
.ft-ig:hover{background:var(--gold);transform:scale(.96)}

/* link shop: Alata maiuscolo spaziato, come i menu secondari del sito cantina */
.ft-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;margin-top:40px;
  font-family:'Alata',system-ui,sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;line-height:1.6}
.ft-links a{position:relative}
.ft-links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .25s}
.ft-links a:hover{color:#fff}
.ft-links a:hover::after{transform:scaleX(1)}
.ft-club:empty{display:none}
.ft-club{text-transform:none;letter-spacing:0;font-family:'Cormorant Infant',Georgia,serif;font-size:16px}

/* riga legale: 16px, centrata, sopra un filo bianco leggero */
.ft-legal{width:100%;margin:44px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.28);
  font-size:16px;line-height:1.5;color:rgba(255,255,255,.92);max-width:none}
.ft-legal a{text-decoration:underline;text-underline-offset:4px}

/* loghi PSR (UE · Repubblica · Regione Piemonte): riga discreta sopra il legale */
.ft-psr{margin-top:46px}
.ft-psr-logos{display:flex;align-items:center;justify-content:center;gap:30px}
.ft-psr-logos img{height:38px;width:auto;display:block;opacity:.94;transition:opacity .25s}
.ft-psr-logos img:nth-child(2){height:42px}
.ft-psr-logos img:nth-child(3){height:32px}
.ft-psr:hover img{opacity:1}
.ft-psr p{margin:12px 0 0;font-family:'Alata',system-ui,sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.82);max-width:none}
@media (max-width:767px){.ft-psr-logos{gap:22px}.ft-psr-logos img{height:32px}.ft-psr-logos img:nth-child(2){height:36px}.ft-psr-logos img:nth-child(3){height:27px}}


/* --- Footer v3 (02/09): stessa altezza del sito cantina (~630px dallo strappo).
       Loghi PSR accorpati nella riga legale, a sinistra del testo, come il banner
       sul sito cantina. Wine Club in Alata maiuscolo come gli altri link. --- */
footer{padding:120px 0 42px;min-height:0}
@media (max-width:767px){footer{padding-top:90px}}
.ft-contatti{margin-top:40px}
.ft-ig{margin-top:22px}
.ft-links{margin-top:26px}
.ft-club{text-transform:uppercase;letter-spacing:2px;font-family:'Alata',system-ui,sans-serif;font-size:12px}
.ft-club a{text-decoration:none}

.ft-bottom{display:flex;align-items:center;justify-content:center;gap:40px;width:100%;margin-top:34px;flex-wrap:wrap}
.ft-psr{display:flex;flex-direction:column;align-items:center;margin:0;flex:0 0 auto}
.ft-psr:hover{color:#fff}
.ft-psr-logos{display:flex;align-items:center;gap:18px}
.ft-psr-logos img{height:30px;width:auto;display:block;opacity:.94}
.ft-psr-logos img:nth-child(2){height:34px}
.ft-psr-logos img:nth-child(3){height:26px}
.ft-psr-cap{display:block;margin-top:6px;font-family:'Alata',system-ui,sans-serif;font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.82)}
.ft-legal{flex:1 1 420px;max-width:760px;margin:0;padding:0;border:0;text-align:center;font-size:16px;line-height:1.5}
@media (max-width:767px){.ft-bottom{gap:22px}.ft-psr-logos img{height:26px}.ft-psr-logos img:nth-child(2){height:30px}.ft-psr-logos img:nth-child(3){height:22px}}

/* ============================================================
   AGGIORNAMENTO 02/09 (bis) — sfondo pagina e contrasti
   ============================================================ */
/* Sfondo pagina: avorio #F9F8F4 ovunque (le pagine prodotto erano su #fff:
   lo strappo SVG del footer, che è avorio, creava uno scarto visibile). */
body{background:var(--paper)}

/* Grigio secondario: #909090 → #6E7776. Stesso registro, ma leggibile (≈4.6:1 su avorio).
   Ridefinendo la variabile si sistemano nav, prezzi, didascalie e note in tutto il sito. */
:root{--ink-soft:#6E7776}

/* Navigazione: verde-grigio pieno, oro al passaggio (come il menu sticky della cantina). */
.hdr3 .nl a,.hdr .nl a,.nl a{color:var(--ink)}
.hdr3 .nl a:hover,.hdr .nl a:hover,.nl a:hover,.nl a.att{color:var(--gold)}

/* Scheda tecnica (pagine prodotto): etichette in blu notte, valori in verde-grigio. */
.tech .lead{color:var(--ink)}
.spec-list .row .k{color:var(--wine-deep)}
.spec-list .row .v{color:var(--ink)}
.qspecs .k,.tt-l{color:var(--ink)}

/* Instagram: mappatura glifo (in FA6 sta nel css principale, che non carichiamo). */
.ft-ig .fa-instagram::before{content:"\f16d"}

/* ============================================================
   AGGIORNAMENTO 02/09 (ter) — colori in palette, hero H1, aria sopra il footer
   ============================================================ */
/* Titoli H2/H3 in blu notte (dal feedback colori, riportato alla palette cantina). */
h2,h3{color:var(--wine-deep)}
.minifaq h2{color:var(--wine-deep)}

/* Hero H1: un solo colore, peso 400 (Josefin è caricato 300/400), niente corsivo. */
.hero h1,.hero h1 em{color:var(--wine-deep);font-weight:400;font-style:normal}
.hero h1{letter-spacing:.18em;line-height:1.22}
/* Lead sotto l'H1: più largo, 2–3 righe invece di 4. */
.hero .lead{max-width:46ch;font-size:1.12rem;color:var(--ink);line-height:1.55}

/* Aria prima dello strappo, su tutte le pagine (lo sfondo è avorio: il margine è invisibile). */
footer{margin-top:90px}
.minifaq{padding-bottom:36px}
@media (max-width:767px){footer{margin-top:56px}}

/* Instagram: il file brands.css di FA6 non assegna la famiglia alla classe .fab
   (sta nel css principale): la assegniamo qui. */
.ft-ig .fab{font-family:"Font Awesome 6 Brands";font-weight:400}

/* ============================================================
   AGGIORNAMENTO 02/09 (quater) — footer 625px come la cantina, contrasti fondi scuri, H1
   Misure a 1920px: cantina 625px dallo strappo al fondo pagina; noi eravamo a 537.
   Le posizioni interne coincidevano già (±13px): +30 sopra, +58 sotto.
   ============================================================ */
footer{padding:150px 0 100px}
@media (max-width:1024px){footer{padding:130px 0 80px}}
@media (max-width:767px){footer{padding:90px 0 56px}}

/* Titoli sui fondi scuri restano bianchi (la regola h2 blu notte non deve toccarli). */
.band h2,.club h2{color:#fff}

/* H1: verde-grigio #545D5C, lo stesso colore dei titoli del sito cantina. */
h1,.hero h1,.hero h1 em{color:var(--ink)}

/* ============================================================
   AGGIORNAMENTO 02/09 (quinquies) — decisione titoli (versione 3 "sintesi")
   Occhielli oro (come la cantina) · H1 verde-grigio #545D5C (come la cantina)
   · H2/H3 oro #B98D58 in Poppins 700: la resa dei bottoni-testo del sito cantina.
   Sui fondi scuri i titoli restano bianchi.
   ============================================================ */
h2,h3,.minifaq h2{color:var(--gold)}
.band h2,.club h2{color:#fff}

/* 02/09 — decisione finale: anche l'H1 in oro (titolo home e titolo pagina prodotto). */
h1,.hero h1,.hero h1 em{color:var(--gold)}

/* ============================================================
   AGGIORNAMENTO 02/09 (sexies) — richieste della cantina dopo la visione
   1) testo "nero": blu notte #242E35 (accent-3 della loro palette) al posto del verde-grigio,
      su tutto il sito compresi i testi piccoli; il verde-grigio scala a colore secondario.
   2) H1 home: "Il Roero," in nero, "a casa tua." in oro corsivo minuscolo su una riga.
   ============================================================ */
:root{--ink:#242E35;--ink-soft:#545D5C}
body{color:var(--ink)}
.spec-list .row .v,.tech .lead,.hero .lead{color:var(--ink)}

h1,.hero h1{color:var(--ink)}
.hero h1 em{display:block;color:var(--gold);font-style:italic;font-weight:400;text-transform:none;letter-spacing:.04em;font-size:.92em;line-height:1.1;margin-top:.04em}

/* 02/09 — "a casa tua." riempie la riga: stessa larghezza di "IL ROERO," (~1.25× perché minuscolo e corsivo sono più stretti). */
.hero h1 em{font-size:1.24em;letter-spacing:.03em;line-height:1.05;margin-top:.02em}
/* nav: specificità alzata per battere la regola inline della pagina in ogni caso */
header .nl a,.hdr .nl a,.hdr3 .nl a{color:var(--ink)}
header .nl a:hover,.hdr .nl a:hover,.hdr3 .nl a:hover{color:var(--gold)}

/* 02/09 — paragrafi in Cormorant 500: stesso colore, aste più piene, "più nero" all'occhio. */
body,p,li,.lead,.hero .lead,.tech .lead,.spec-list .row .v,.pc-desc,.wrow-desc,.fam-p,.note p,footer{font-weight:500}
b,strong{font-weight:700}

/* 02/09 — riconoscimenti (home): didascalie +1px e più staccate dal titolo. */
.ricon-row span{font-size:.78rem;margin-top:3px;line-height:1.45;color:var(--ink-soft)}

/* ============================================================
   AGGIORNAMENTO 02/09 (septies)
   ============================================================ */
/* Voci con icona sotto la hero e sottotitoli della fascia fiducia: stesso colore/peso del paragrafo. */
.medal{color:var(--ink);font-weight:600;font-size:.74rem}
.trust small{color:var(--ink);font-weight:500;font-size:.8rem}


/* Bottoni secondari "Aggiungi" nelle card: verde-grigio (bottoni WooCommerce del design system),
   non il nero del testo. */
.pc-add{background:var(--ink-soft);color:#fff}
.pc-add:hover{background:var(--wine-deep)}

/* Quick view: barra prezzo+bottone ancorata al fondo (non tagliava più "Scheda completa"),
   bottone senza raggio come il resto del sito cantina. */
.qv-foot{bottom:0;padding:14px 0 12px}
.qv-add{border-radius:0;height:48px;font-size:.78rem}


/* --- Magnum: immagine dedicata (placeholder con sagoma 750 di confronto).
       Niente ombra: né il filtro sull'immagine né l'ellisse disegnata dallo
       stage (.stage::after), che altrimenti resta visibile sotto qualunque foto. --- */
.v-bottle.magnum{filter:none}
.stage.no-shadow::after{opacity:0}

/* card /vini: la riga sopra il titolo riserva due righe, così i titoli restano allineati anche se una va a capo */
.pc-deno{min-height:2.6em}

/* ============================================================
   CHIP ANNATA / FORMATO — v3 definitiva (chat designer, 2/9)
   Sabbia come i tondi del contatore quantità; stesso carattere per
   anno e formato; selezionato = bordo doppio oro + testo oro.
   ============================================================ */
.yr-pick button,
.fmt-pick button{font-family:var(--serif);font-size:1.05rem;font-weight:600;letter-spacing:0;text-transform:none;padding:8px 18px;
  background:var(--cream);border:1px solid var(--cream);color:var(--ink);border-radius:40px;transition:.2s}
.fmt-pick{border:0;border-radius:0;overflow:visible;gap:8px}
.yr-pick button:hover:not(:disabled),
.fmt-pick button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.yr-pick button.on,
.fmt-pick button.on{background:var(--cream);border-color:var(--gold);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.yr-pick button:disabled,
.fmt-pick button:disabled{background:transparent;border:1px dashed var(--line);color:var(--ink-soft);opacity:.6}
.opt-l{color:var(--ink)}

/* --- Spaziatura H1 (chat designer, 2/9): .2em era troppo per nomi isolati in Josefin leggero.
       La hero resta .18em perché è calibrata con il corsivo sotto. L'ordine conta. --- */
h1{letter-spacing:.14em}                        /* H1 di pagina: vini, casse, faq, legale */
.info h1{letter-spacing:.12em;line-height:1.06} /* nome del vino in pagina prodotto */
.hero h1{letter-spacing:.18em}                   /* riafferma la hero dopo la regola h1 */

/* ============================================================
   FORMATO — interruttore a due posizioni (sostituisce i due chip)
   Binario sabbia unico, pillola attiva in oro. L'annata resta un chip.
   Viene DOPO il blocco chip v3: a parità di specificità vince qui.
   ============================================================ */
.fmt-pick{display:inline-flex;gap:0;padding:3px;background:var(--cream);border:1px solid var(--cream);border-radius:40px;overflow:visible}
.fmt-pick button{font-family:var(--serif);font-size:1.02rem;font-weight:600;letter-spacing:0;text-transform:none;padding:6px 20px;
  background:transparent;border:0;box-shadow:none;color:var(--ink-soft);border-radius:40px;cursor:pointer;transition:background .22s,color .22s}
.fmt-pick button:hover:not(:disabled):not(.on){color:var(--gold)}
.fmt-pick button.on{background:var(--gold);border:0;box-shadow:none;color:#fff}
.fmt-pick button:disabled{background:transparent;border:0;color:var(--ink-soft);opacity:.45;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}

/* ============================================================
   AGGIORNAMENTO 03/09 — titoli di pagina e pannello casse
   Solo righe aggiunte in coda: nessuna regola precedente toccata.
   ============================================================ */
/* H1 di /vini, /casse (e /faq, /legale): un gradino sotto la hero.
   Un maiuscolo spaziato leggero si legge ~30% più grande del suo corpo:
   a 40px «CREA LA TUA CASSA» superava la larghezza dell'intro sotto.
   Il nome del vino in pagina prodotto (.info h1) NON cambia. */
.cat-head h1,.bhero h1{font-size:clamp(1.5rem,3.2vw,2rem)}

/* Pannello «La tua cassa»: il titolo è funzionale, non decorativo.
   Sopra c'è già l'occhiello maiuscolo spaziato; l'oro su sabbia #F5E6C8
   sta a 2,4:1. Minuscolo, blu notte, come «Totale cassa» due righe sotto. */
.sum-head h2{text-transform:none;letter-spacing:0;font-size:1.5rem;font-weight:600;color:var(--ink)}

/* ============================================================
   AGGIORNAMENTO 05/09 — MOBILE (dagli screenshot Samsung, 360px)
   Solo righe aggiunte in coda. Le regole desktop non cambiano
   salvo dove indicato (breadcrumb, club, bottone card).
   ============================================================ */

/* --- 1 · Hero: le bottiglie tornano anche su touch.
       index.html nasconde .cerchio sui dispositivi touch e mostra
       <picture class="cerchio-static"> che punta a composizione.webp/png,
       file che non esiste negli asset (immagine spezzata). Il cerchio
       funziona senza hover: sono link posizionati. Lo riaccendiamo. --- */
@media (hover:none),(pointer:coarse){
  .cerchio{display:block}
  .cerchio-static{display:none}
}
/* ordine mobile: cerchio → testo → bottoni+premi (decisione 5/9) */
@media(max-width:1000px){
  .hero{padding-top:8px}
  .cerchio-slot{order:1;padding:6px 0 0}
  .hero-copy{order:2;padding-top:6px}
  .hero-actions{order:3}
}
@media(max-width:600px){
  .hero .eyebrow{font-size:.6rem;letter-spacing:.18em}
}

/* --- 2 · Header: aria intorno al logo.
       Pagine prodotto: riga 62px con logo 54px (4px per lato); home: 66px.
       Il PNG ha il marchio al bordo superiore, quindi sembra tagliato.
       Il backdrop-filter su sticky ha rese instabili su Chrome Android
       quando la barra URL si ritrae: su mobile fondo pieno, stesso colore. --- */
@media(max-width:980px){
  .hdr3 .nav-v2,.nav-v2{min-height:76px;padding:6px 0}
  .hdr3 .brand-c img,.hdr .brand-c img,.brand-c img{height:52px}
  .hdr3{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
}

/* --- 3 · Breadcrumb: .crumb azzerava il padding orizzontale di .wrap
       (stessa specificità, dichiarato dopo). Vale anche su desktop. --- */
.wrap.crumb{padding:20px 26px 4px}
@media(max-width:600px){.wrap.crumb{padding:14px 18px 2px}}

/* --- 4 · Prezzo su una riga: 2,6rem + contatore da 170px non stanno
       in 344px. --- */
.buybar .price{white-space:nowrap}
@media(max-width:600px){
  .buybar{gap:12px}
  .buybar .price{font-size:2.1rem}
  .qsel{height:48px;padding:4px}
  .qbtn{width:38px;height:38px}
  .qnum{min-width:36px;font-size:1.25rem}
}

/* --- 5 · Pagina prodotto: sequenza mobile.
       Ordine DOM in .info: deno, h1, vitigno, fmtline, TAGLINE, choose,
       buybar, btn-add, ship, awards. Su mobile la descrizione scende
       sotto il bottone: nome → vitigno → annata/formato → prezzo →
       aggiungi → descrizione → premi. Immagine più bassa: nome e prezzo
       entrano nella prima schermata. --- */
@media(max-width:980px){
  .info{display:flex;flex-direction:column}
  .info>*{order:20}
  .info>.deno{order:1}
  .info>h1{order:2}
  .info>.vitigno{order:3}
  .info>.fmtline{order:4}
  .info>.choose{order:5}
  .info>.buybar{order:6}
  .info>.btn-add{order:7}
  .info>.ship{order:8}
  .info>.tagline{order:9;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
  .info>.awards-lite{order:10}
  .stage{min-height:0;height:min(52vh,440px)}
  .stage .v-bottle{height:auto;max-height:86%}
}

/* --- 6 · "Completa la cassa": in colonna, align-items:center dava a
       ogni card la larghezza del proprio contenuto; il "+" era nascosto. --- */
@media(max-width:820px){
  .trio-items{align-items:stretch;gap:8px}
  .trio-items .ti{flex:none;width:100%;max-width:360px;margin:0 auto}
  .ti-plus{display:block;text-align:center;line-height:1;margin:-2px 0}
  .ti-im{height:200px}
  .ti-im .ti-bot{max-height:172px}
  .ti-im .ti-lab{max-height:190px}
}

/* --- 7 · Topbar: da tre righe a due (il testo è contenuto, non si tocca). --- */
@media(max-width:600px){
  .topbar{font-size:.62rem;letter-spacing:.08em;padding:7px 14px;line-height:1.5}
}

/* --- 8 · Club: fondo blu notte (decisione 5/9). Il testo chiaro già
       in pagina passa da 2,7:1 a 13:1; su mobile il titolo scende di corpo. --- */
.club{background:var(--wine-deep)}
@media(max-width:600px){
  .club h2{font-size:1.55rem;letter-spacing:.12em}
  .club{padding-top:56px;padding-bottom:56px}
}

/* --- 9 · Bottone "Aggiungi" delle card: era l'unico bottone serif del sito. --- */
.pc-add,.add{font-family:'Poppins',system-ui,sans-serif}

/* ============================================================
   AGGIORNAMENTO 05/09 (bis) — MOBILE, secondo giro: esperienza
   Solo righe aggiunte in coda.
   ============================================================ */

/* --- A · Caroselli a scatto per gli insiemi "da sfogliare":
       le altre etichette (.fam-strip) e i consigliati (.rel-grid).
       La card successiva sbuca dal bordo destro: è il segnale che si
       può scorrere. "Completa la cassa" resta in colonna: è una somma. --- */
@media(max-width:820px){
  .fam-strip{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-end;
    gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:26px;
    padding:6px 26px 16px;margin:0 -26px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fam-strip::-webkit-scrollbar{display:none}
  .fam-item{flex:0 0 38%;width:auto;scroll-snap-align:start}
}
@media(max-width:760px){
  .rel-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:26px;
    padding:4px 26px 18px;margin:0 -26px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rel-grid::-webkit-scrollbar{display:none}
  .rc{flex:0 0 72%;scroll-snap-align:start}
  .rc-img{height:200px}.rc-img .rc-bottle{height:170px}
}

/* --- B · Quickview come foglio dal basso (solo mobile).
       Ancoraggio in basso, angoli arrotondati sopra, maniglia. Entra da
       sotto invece che dal centro. La chiusura a trascinamento è JS:
       qui c'è solo l'aspetto; la X e il tap sullo sfondo funzionano già. --- */
@media(max-width:760px){
  .qv-scrim{place-items:end center;padding:0}
  .qv{position:relative;width:100%;max-width:none;max-height:92vh;border-radius:22px 22px 0 0;
    transform:translateY(100%);box-shadow:0 -20px 60px -20px rgba(20,12,10,.5)}
  .qv::before{content:"";position:absolute;top:8px;left:50%;width:44px;height:4px;margin-left:-22px;
    border-radius:2px;background:var(--line);z-index:4}
  .qv-media{min-height:250px;padding-top:10px}
  .qv-media .qv-bottle{height:200px}
  .qv-x{top:12px}
  .qv-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* --- C · Cassetto carrello e barra casse: bordi sicuri su iPhone --- */
@media(max-width:600px){
  .drawer{width:100%}
  .drawer-f{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .mbar{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* --- D · Catalogo /vini a due colonne sotto i 480px (decisione 5/9).
       Bottiglie generose, poco testo: si confronta, non si scorre.
       La descrizione vive nella scheda; la quantità nel carrello. --- */
@media(max-width:480px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px;padding:6px 0 50px}
  .pc{border-radius:8px}
  .pc-media{height:196px}
  .pc-media .shot-bottle{height:168px}
  .pc-media::after{bottom:12px;left:30%;right:30%}
  .pc-type,.pc-award{width:28px;height:28px;top:8px}
  .pc-type{left:8px}.pc-award{right:8px}
  .pc-type svg{width:16px;height:16px}.pc-award svg{width:14px;height:14px}
  .pc-body{padding:11px 11px 12px}
  .pc-deno{min-height:0;font-size:.56rem;margin-bottom:3px}
  .pc-body h3{font-size:1.05rem;line-height:1.12}
  .pc-desc{display:none}
  .pc-foot{gap:8px;margin-top:8px}
  .pc-price{font-size:1.12rem}
  .qty{display:none}
  .pc-add{height:40px;font-size:.7rem;letter-spacing:.04em}
}

/* --- E · Filtri /vini: una riga scorrevole, bersagli da 44px.
       (Non appiccicati: stanno dentro .cat-head, che scorre via prima
       della griglia — sticky non avrebbe effetto.) --- */
@media(max-width:820px){
  .filters{flex-wrap:nowrap;justify-content:flex-start;gap:8px;overflow-x:auto;
    padding:4px 26px 8px;margin:18px -26px 0;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:none;min-height:44px;padding:0 18px}
}

/* --- F · Ritmo verticale mobile: padding pensati per il desktop
       diventano vuoto su telefono. --- */
@media(max-width:600px){
  .band-in{padding:48px 0}
  .minifaq{padding:48px 0 56px}
  .family{padding:36px 0 44px}
  .related{padding:40px 0}
  .tech{padding:40px 0}
  .trio-sec{padding:36px 0 8px}
  .cat-head{padding:28px 0 16px}
  .bhero{padding:26px 0 8px}
  .tasting-body{padding:28px 20px}
  footer{margin-top:44px}
}

/* --- G · Hero: la prima bottiglia ondeggia una volta al caricamento.
       Dice "sono toccabili" senza scrivere nulla. Ferma dopo 1,6s;
       spenta con prefers-reduced-motion. --- */
@keyframes tb-sway{
  0%,100%{transform:rotate(var(--r))}
  30%{transform:rotate(calc(var(--r) - 3deg))}
  65%{transform:rotate(calc(var(--r) + 2deg))}
}
@media (hover:none),(pointer:coarse){
  .cerchio .cb:first-child{animation:tb-sway 1.6s 1s ease-in-out 1 both}
}
@media (prefers-reduced-motion:reduce){.cerchio .cb:first-child{animation:none}}

/* --- H · Topbar mobile a una riga: il messaggio lungo resta nel data-text
       (nascosto), la riga corta la scrive offers.js in data-short dalla regola
       del motore (TIBOffers.shipping()). Il content qui sotto è solo la riserva
       se offers.js non è ancora arrivato. --- */
@media(max-width:600px){
  .topbar span{display:none}
  .topbar::after{content:"Spedizione gratuita da 6 bottiglie in su"}
  .topbar[data-short]::after{content:attr(data-short)}
  .topbar{padding:9px 14px;font-size:.66rem;letter-spacing:.14em}
}

/* ============================================================
   CORREZIONI 05/09 (ter) — regressioni del giro mobile
   Le regole qui sotto vengono DOPO quelle di oggi e le correggono.
   ============================================================ */

/* 1 · Topbar: nelle pagine interne il testo NON è in uno <span> (sta
      direttamente nel div), quindi span{display:none} non lo nascondeva
      e ::after si accodava. Si azzera il corpo del testo, ::after ha il suo. */
@media(max-width:600px){
  .topbar{font-size:0;line-height:0;letter-spacing:0}
  .topbar::after{display:block;font-size:.66rem;line-height:1.5;letter-spacing:.14em}
}

/* 2 · Header: .nav-v2 è anche .wrap; il mio padding:6px 0 gli aveva tolto
      i 26px laterali. */
@media(max-width:980px){
  .hdr3 .nav-v2,.nav-v2{padding:6px 26px}
}

/* 3 · Immagine prodotto: max-height in % non si risolve dentro una griglia
      a righe automatiche, quindi la bottiglia usciva a dimensione naturale.
      Altezza esplicita in unità viewport. */
@media(max-width:980px){
  .stage{height:min(52vh,440px);min-height:0}
  .stage .v-bottle{height:min(44vh,372px);max-height:none;width:auto}
}

/* 4 · Catalogo a due colonne: titoli e bottoni allineati.
      La denominazione va spesso su due righe: le riservo sempre; il titolo
      idem; prezzo e bottone si ancorano in fondo alla card. */
@media(max-width:480px){
  .pc-deno{min-height:2.4em;line-height:1.2}
  .pc-body h3{min-height:2.3em}
  .pc-foot{margin-top:auto}
}

/* 5 · /vini: .cat-head è anche .wrap e azzerava i 26px laterali (stesso
      difetto del breadcrumb, preesistente). I filtri passano da riga
      scorrevole a controllo segmentato: quattro celle uguali, una riga,
      niente scorrimento, niente margini negativi. */
.wrap.cat-head{padding:46px 26px 26px}
@media(max-width:600px){
  .wrap.cat-head{padding:28px 18px 16px}
}
@media(max-width:820px){
  .filters{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:18px 0 0;padding:0;overflow:visible}
  .filters button{font-family:'Poppins',system-ui,sans-serif;font-size:.62rem;letter-spacing:.04em;
    min-height:42px;padding:0 4px;white-space:nowrap}
}

/* 6 · Header: le pagine interne usano .hdr, la home .hdr3. La mitigazione
      per Chrome Android (fondo pieno al posto del backdrop-filter su sticky)
      copriva solo .hdr3: qui si estende. */
@media(max-width:980px){
  .hdr,.hdr3{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
}

/* 7 · Barra fissa di /casse allineata alla barra prodotto: blu notte della
      palette al posto del marrone ereditato dalla base. */
@media(max-width:980px){
  .mbar{background:rgba(36,46,53,.97);color:#F9F8F4}
  .mbar .mb-c{color:#B98D58}
  .mbar button{background:#F9F8F4;color:#242E35;font-family:'Poppins',system-ui,sans-serif;font-weight:600}
}

/* ============================================================
   CORREZIONI 05/09 (quater) — colori approvati, bottone, hero, titoli
   ============================================================ */

/* 1 · Club delle annate: torna ORO. I colori erano stati decisi da chat
      dedicata e approvati dalle sorelle; il blu notte del 5/9 era mio. */
.club{background:var(--wine)}

/* 2 · Barra fissa di /casse: stessa grammatica della barra prodotto —
      superficie sabbia (colore dei controlli), testo blu notte, bottone
      oro identico al bottone principale. Sostituisce la regola (ter) 7. */
@media(max-width:980px){
  .mbar{background:rgba(245,230,200,.97);color:var(--ink);
    border-top:1px solid var(--line);box-shadow:0 -10px 30px -14px rgba(20,12,10,.25)}
  .mbar .mb-c{color:var(--gold)}
  .mbar .mb-t{color:var(--ink)}
  .mbar button{background:var(--gold);color:#fff;font-family:'Poppins',system-ui,sans-serif;font-weight:600}
  .mbar button:disabled{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
}

/* 3 · «Aggiungi al carrello» schiacciato: .btn-add ha flex:1 per la riga
      orizzontale di .buybar; con .info in colonna governava l'altezza. */
@media(max-width:980px){
  .info>.btn-add{flex:none}
}

/* 4 · Hero mobile: aria tra header e cerchio. */
@media(max-width:1000px){
  .hero{padding-top:22px}
}

/* 5 · Titoli di sezione delle pagine prodotto: hanno un corpo proprio
      (2rem) che vince sulla scala del tema; su mobile vanno su tre righe.
      Restano oro, Poppins, spaziati: solo più piccoli. */
@media(max-width:600px){
  .tech h2,.related h2,.trio-head h2,.family h2,.tasting-body h2,.fam-head h2{
    font-size:1.3rem;letter-spacing:.14em;line-height:1.3}
}

/* ============================================================
   05/09 (quinquies) — riconoscimenti home sempre aperti su mobile
   La pagina li richiude sotto i 1000px con un bottone "mostra altri";
   decisione 5/9: si vedono tutti, subito.
   ============================================================ */
@media(max-width:1000px){
  .ricon-more{display:flex}
  .ricon-toggle,.ricon.open .ricon-toggle{display:none}
}

/* ============================================================
   05/09 (sexies) — menu mobile nelle pagine interne (nav-mobile.js)
   Stesso aspetto del pannello della home (.mm). Il burger delle pagine
   interne esisteva nel markup ma senza misure sull'icona: qui le prende.
   ============================================================ */
@media(max-width:980px){
  .hdr .burger,.hdr3 .burger{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-left:-10px;color:var(--ink);background:none;border:0;cursor:pointer}
  .hdr .burger svg,.hdr3 .burger svg{width:26px;height:26px}
  .hdr .mm,.hdr3 .mm{display:none;flex-direction:column;background:var(--paper);
    border-top:1px solid var(--line);padding:6px 26px 16px}
  .hdr .mm.open,.hdr3 .mm.open{display:flex}
  .hdr .mm a,.hdr3 .mm a{color:var(--ink);padding:13px 0;border-bottom:1px solid var(--line);
    font-family:'Poppins',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;
    font-size:.82rem;font-weight:600;text-decoration:none}
  .hdr .mm a[aria-current="page"],.hdr3 .mm a[aria-current="page"]{color:var(--gold)}
  .hdr .mm a:last-child,.hdr3 .mm a:last-child{border-bottom:0}
}

/* 05/09 (septies) — CORREZIONE: il pannello .mm creato da nav-mobile.js
   era nascosto solo dentro la media query mobile; su desktop restava in
   pagina come una riga di voci senza stile. La regola base va fuori da
   qualsiasi media query, come nella home. */
.hdr .mm,.hdr3 .mm{display:none}
@media(max-width:980px){.hdr .mm.open,.hdr3 .mm.open{display:flex}}

/* ============================================================
   05/09 (octies) — il cerchio vivo è l'unica versione (decisione 5/9)
   La composizione statica non si mostra più in nessuna condizione:
   né su touch (già così dal 5/9), né con prefers-reduced-motion.
   Per chi ha le animazioni ridotte il cerchio è fermo: niente
   ondeggiamento (già spento) e niente scivolamento all'hover.
   Il <picture class="cerchio-static"> resta nel markup, inerte.
   ============================================================ */
.cerchio-static{display:none!important}
.cerchio{display:block!important}
@media (prefers-reduced-motion:reduce){
  .cerchio .cb,.cerchio .cb img{transition:none}
  .cerchio .cb:hover,.cerchio .cb:focus-visible{transform:rotate(var(--r))}
  .cerchio .cb:hover img,.cerchio .cb:focus-visible img{filter:drop-shadow(0 14px 20px rgba(20,12,10,.32))}
}

/* ============================================================
   15/09 — BARRA FINALE DEL FOOTER a tre colonne (.ft-bottom.ft-v2)
   Struttura comune alle tre colonne: .col > .top (riga alta, 30px,
   centrata) + .cap (didascalia Alata). Così loghi istituzionali, riga
   legale e firma stanno sulla stessa linea, e sotto FEASR · Bevi
   responsabilmente · dicitura hanno stesso corpo e stesso attacco.
   Firma: tibaldi-assets/logo/wuoz-firma.svg (bianco; per provare il
   cerchio basta sostituire il file con wuoz-firma-cerchio.svg rinominato).
   Le regole valgono SOLO con la classe .ft-v2: il markup vecchio non
   cambia aspetto finché non viene aggiornato.
   ============================================================ */
.ft-bottom.ft-v2{display:grid;grid-template-columns:1fr auto 1fr;column-gap:40px;align-items:start;
  width:100%;margin-top:34px;margin-bottom:-16px;flex-wrap:nowrap}
.ft-v2 .col{display:flex;flex-direction:column;align-items:center;gap:9px;margin:0;flex:none;max-width:none;
  text-decoration:none;color:#fff}
.ft-v2 .ft-psr{justify-self:start}
.ft-v2 .ft-credit{justify-self:end;opacity:.85;transition:opacity .25s}
.ft-v2 .ft-credit:hover,.ft-v2 .ft-credit:focus-visible{opacity:1;color:#fff}
.ft-v2 .top{height:30px;display:flex;align-items:center;justify-content:center;gap:18px;margin:0}
.ft-v2 .cap{display:block;margin:0;font-family:'Alata',system-ui,sans-serif;font-size:9.5px;letter-spacing:1.2px;
  text-transform:uppercase;line-height:1.3;color:rgba(255,255,255,.82);text-align:center;max-width:34ch}
.ft-v2 .ft-psr .top img{height:30px;width:auto;display:block;opacity:.94}
.ft-v2 .ft-psr .top img:nth-child(2){height:34px}
.ft-v2 .ft-psr .top img:nth-child(3){height:26px}
.ft-v2 .ft-legal .top{font-size:16px;line-height:1.3;color:rgba(255,255,255,.92);white-space:nowrap}
.ft-v2 .ft-legal .cap{color:#fff}
.ft-v2 .ft-credit .top img{height:30px;width:auto;display:block}
@media(max-width:1100px){
  .ft-v2 .ft-legal .top{white-space:normal;height:auto;min-height:30px;max-width:36ch}
}
@media(max-width:700px){
  .ft-bottom.ft-v2{grid-template-columns:1fr;row-gap:24px;justify-items:center;margin-bottom:0}
  .ft-v2 .ft-psr,.ft-v2 .ft-credit{justify-self:center}
}

/* ============================================================
   15/09 (bis) — CORREZIONI
   1 · Barra di scorrimento orizzontale su desktop: lo strappo
       (footer::before, largo 102vw, centrato) sporgeva di 1vw per lato
       e il footer non ritagliava. Presente dal 2/9, mai vista prima.
       overflow:hidden sul footer: lo strappo resta intero (sta dentro,
       top:-1px), niente esce dallo schermo.
   2 · Firma Wuoz: era a opacità .85 e accanto a loghi e testi pieni si
       leggeva grigia. Piena a riposo; leggermente attenuata al passaggio,
       come i link del footer.
   ============================================================ */
footer{overflow:hidden}
.ft-v2 .ft-credit{opacity:1}
.ft-v2 .ft-credit:hover,.ft-v2 .ft-credit:focus-visible{opacity:.82}

/* ============================================================
   17/09 — HEADER: categorie a sinistra, azione a destra
   Markup atteso (chat coordinatrice): nel nav sinistro «Tutti i vini ·
   Rossi · Bianchi · Spumante»; a destra, fuori dal nav,
   <a class="pill" href="/shop/casse"><svg class="ic">…</svg>Componi la cassa</a>
   e poi il carrello. Finché il pill non esiste, queste regole sono inerti.
   Carrello e burger in un cerchio da 42px con lo stesso bordo del pill:
   tre oggetti di una famiglia. L'oro pieno resta al solo hover del pill,
   così non compete con «Aggiungi al carrello».
   ============================================================ */
.hdr3 .cell-right,.hdr .cell-right{gap:14px}
.hdr3 .pill,.hdr .pill{display:inline-flex;align-items:center;gap:9px;
  font-family:'Poppins',system-ui,sans-serif;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--ink);text-decoration:none;border:1px solid var(--ink-soft);border-radius:40px;padding:10px 20px;
  transition:background .22s,color .22s,border-color .22s;white-space:nowrap}
.hdr3 .pill:hover,.hdr .pill:hover,.hdr3 .pill:focus-visible,.hdr .pill:focus-visible{background:var(--gold);border-color:var(--gold);color:#fff}
.hdr3 .pill.att,.hdr .pill.att{border-color:var(--gold);color:var(--gold)}
.hdr3 .pill .ic,.hdr .pill .ic{width:17px;height:17px;flex:none}
.hdr3 .cart-btn,.hdr .cart-btn{width:42px;height:42px;justify-content:center;padding:0;
  border:1px solid var(--ink-soft);border-radius:50%;transition:border-color .22s,color .22s}
.hdr3 .cart-btn:hover,.hdr .cart-btn:hover,.hdr3 .cart-btn:focus-visible,.hdr .cart-btn:focus-visible{border-color:var(--gold);color:var(--gold)}
.hdr3 .cart-btn .cart-count,.hdr .cart-btn .cart-count{top:-4px;right:-4px;min-width:18px;height:18px;box-shadow:0 0 0 2px var(--paper)}
@media(max-width:980px){
  .hdr3 .pill,.hdr .pill{display:none}                 /* l'azione vive nel menu e nel bottone della hero */
  .hdr3 .burger,.hdr .burger{width:42px;height:42px;margin-left:0;border:1px solid var(--ink-soft);border-radius:50%}
  .hdr3 .burger svg,.hdr .burger svg{width:22px;height:22px}
  .hdr3 .burger.is-open,.hdr .burger.is-open{border-color:var(--gold);color:var(--gold)}
}

/* 17/09 (bis) — respiro fra le voci del menu a sinistra.
   Con quattro voci e 26px di gap il blocco era compatto contro pill e
   cerchio a destra, e la barra oro della voce attiva (±13px) sfiorava la
   parola accanto. 36px sopra i 1200px, 30px fra 980 e 1200. */
.hdr3 .nl,.hdr .nl{gap:36px}
@media(max-width:1200px){.hdr3 .nl,.hdr .nl{gap:30px}}

/* --- Ritorno al sito istituzionale: «‹ Sito cantina» a sinistra del menu
       (desktop) e ultima voce del pannello mobile, in grigio. --- */
/* cerchio con freccia, speculare al cerchio del carrello a destra (42px) */
.nl a.site-back{flex:none;width:42px;height:42px;border:1px solid var(--ink-soft);border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:border-color .2s,color .2s}
.nl a.site-back:hover,.nl a.site-back:focus-visible{border-color:var(--gold);color:var(--gold)}
.nl a{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mm a.mm-ext,.hdr .mm a.mm-ext,.hdr3 .mm a.mm-ext{color:var(--ink-soft);border-bottom:0;margin-top:8px}
/* tra 900 e 1180 px il menu non ha spazio per una voce in piu': il link resta nel pannello mobile sotto i 900 */
/* 24/09 (Federico): su desktop il link al sito NON si mostra. Il markup resta
   nell'header perche' nav-mobile.js lo legge per costruire la voce «‹ Sito cantina»
   in coda al pannello mobile (sotto i 900 px). */
.nl a.site-back{display:none}