/* =============================================================================
   DE LUX 21 — Componenti riusabili
   Tutto legge i token. Cross-progetto: ogni componente nuovo nasce qui.
   ========================================================================== */

/* --- Layout ---------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: 1560px; }
.container--narrow { max-width: 880px; }
.section { padding-block: var(--space-section); }
.section--tight { padding-block: clamp(3rem, 6vw, 6rem); }

/* Testata di pagina · mini-hero condiviso (catalogo, produttori, territori, contatti).
   Fonte unica: stessa aria sopra l'eyebrow e stessa altezza su tutte queste pagine. */
.page-head { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); border-bottom: var(--hairline) solid var(--line); }
.page-head h1 { margin: .4rem 0 1rem; }

/* Header con immagine di sfondo (es. catalogo). Layer mappa + scrim tema-aware:
   la foto resta una velatura morbida e il testo scuro rimane leggibile.
   Lo strato si regge da solo: .page-head--bg porta il position:relative e mette
   i layer dietro (z-index 0) e il contenuto sopra (z-index 1). Fino al
   07/09/2026 quel compito lo divideva con .contour--soft, che disegnava la
   trama di curve di livello sotto mezzo sito; il cliente l'ha fatta togliere. */
.page-head--bg { position: relative; overflow: hidden; }
.page-head--bg > .page-head__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat; }
.page-head--bg > .page-head__scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 68%, transparent); }
.page-head--bg > .container { position: relative; z-index: 1; }

/* Blocco scuro (brand) per contrasti */
.on-brand { background: var(--brand); color: var(--on-brand); }
.on-brand h1, .on-brand h2, .on-brand h3 { color: var(--on-brand); }
.on-brand .label { color: var(--gold); }

/* --- Eyebrow / label + hairline -------------------------------------------- */
.eyebrow { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.4rem; }
.eyebrow::before { content: ""; width: 2.2rem; height: var(--hairline); background: var(--gold); display: inline-block; }

.hairline { height: var(--hairline); background: var(--line); border: 0; width: 100%; }
.hairline--gold { background: var(--gold); }

/* coordinate geografiche (firma cartografica) */
.coord { font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: .16em; color: var(--gold); text-transform: uppercase; }

/* --- Bottoni --------------------------------------------------------------- */
.btn {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: var(--fw-sb);
  font-size: var(--fs-label);
  border-radius: var(--radius-pill);
  padding: 1rem 2.4rem;
  display: inline-flex; gap: .6rem; align-items: center; justify-content: center;
  border: var(--hairline) solid transparent;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--ghost  { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.btn--gold   { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold); color: var(--bg); }
.on-brand .btn--ghost { border-color: var(--on-brand); color: var(--on-brand); }
.on-brand .btn--ghost:hover { background: var(--on-brand); color: var(--brand); }
.btn--block { width: 100%; }

.link-arrow {
  font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .12em;
  font-size: var(--fs-label); font-weight: var(--fw-sb); color: var(--gold);
  display: inline-flex; align-items: center; gap: .5rem; padding-bottom: .3rem;
  border-bottom: var(--hairline) solid var(--gold);
}
.link-arrow .arr { transition: transform .3s var(--ease-emph); }
.link-arrow:hover .arr { transform: translateX(.4rem); }

/* =============================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: var(--hairline) solid var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }
.nav__brand { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .02em; }

/* Wordmark "DE LUX 21" tematizzabile (sostituisce emblema + scritta nell'header).
   Il logo beige e' pensato per fondi scuri: sul tema champagne (fondo beige)
   sarebbe illeggibile, quindi li' si usa la versione navy. */
.brand-logo { display: inline-block; flex: none; height: 47px; width: 115px; background: center / contain no-repeat; }
html[data-theme="navy"]      .brand-logo { background-image: url("../img/header-logo-navy.png"); }
html[data-theme="notte"]     .brand-logo { background-image: url("../img/header-logo-nero.png"); }
html[data-theme="champagne"] .brand-logo { background-image: url("../img/header-logo-navy.png"); }

/* Stellina oro ai due lati del logo (rif. prima pagina PDF modifiche) */
.brand-star { flex: none; width: 11px; height: 11px; fill: var(--gold); }

/* emblema tematizzabile (ancora usato nel footer) */
.brand-mark { display: inline-block; flex: none; width: 44px; height: 44px; background: center / contain no-repeat; }
html[data-theme="navy"]      .brand-mark { background-image: url("../img/logo-emblema-navy.png"); }
html[data-theme="notte"]     .brand-mark { background-image: url("../img/logo-emblema-black.png"); }
html[data-theme="champagne"] .brand-mark { background-image: url("../img/logo-emblema-champagne.png"); }
.nav__brand b { font-weight: var(--fw-med); }
.nav__brand small { font-family: var(--font-ui); font-size: .55rem; letter-spacing: .28em; color: var(--gold); text-transform: uppercase; display: block; }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); }
.nav__links a { font-family: var(--font-ui); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .12em; font-weight: var(--fw-med); color: var(--ink-soft); transition: color .25s var(--ease); position: relative; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: var(--hairline); background: var(--gold); }
.nav__actions { display: flex; align-items: center; gap: 1.2rem; }
.nav__tools { display: flex; align-items: center; gap: 1.2rem; }
.nav__auth { display: flex; align-items: center; gap: 1.2rem; }
.nav__brand b, .nav__brand small { white-space: nowrap; }

/* switcher tema COLLASSATO: un pallino (colore attuale) che apre il popover */
.switcher { position: relative; display: inline-flex; }
.switcher__toggle { display: grid; place-items: center; padding: .35rem; border: var(--hairline) solid var(--line); border-radius: var(--radius-pill); background: transparent; transition: border-color .25s var(--ease); }
.switcher__toggle:hover { border-color: var(--gold); }
.switcher__swatch { width: 18px; height: 18px; border-radius: 50%; border: var(--hairline) solid var(--line); display: block; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--gold); }
/* il pallino mostra sempre il colore del tema attivo */
[data-theme="navy"]      .switcher__swatch { background: #16243F; }
[data-theme="notte"]     .switcher__swatch { background: #0E0E0E; }
[data-theme="champagne"] .switcher__swatch { background: #EEE3CF; }

.switcher__menu { position: absolute; top: calc(100% + .55rem); right: 0; z-index: 60; display: inline-flex; gap: .5rem; padding: .5rem; background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-pill); box-shadow: 0 16px 40px -22px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .25s var(--ease-emph), visibility .25s; }
.switcher.is-open .switcher__menu { opacity: 1; visibility: visible; transform: none; }
.switcher__toggle[aria-expanded="true"] { border-color: var(--gold); }

.switcher__dot { width: 20px; height: 20px; border-radius: 50%; border: var(--hairline) solid var(--line); position: relative; transition: transform .2s var(--ease); cursor: pointer; }
.switcher__dot:hover { transform: scale(1.12); }
.switcher__dot[data-set="navy"] { background: #16243F; }
.switcher__dot[data-set="notte"] { background: #0E0E0E; }
.switcher__dot[data-set="champagne"] { background: #EEE3CF; }
.switcher__dot[aria-pressed="true"]::after { content: ""; position: absolute; inset: -4px; border: var(--hairline) solid var(--gold); border-radius: 50%; }

.nav__burger { display: none; flex-direction: column; gap: 5px; width: 28px; background: none; border: 0; padding: 4px; }
.nav__burger span { height: 1.5px; background: var(--ink); transition: .3s var(--ease); }

.nav__cart { font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .45rem; }
.nav__cart b { color: var(--accent); }

@media (max-width: 1024px) {
  /* chiuso: oltre al transform, lo rendo invisibile e non interattivo, così
     il pannello del menu non intercetta i click quando è chiuso */
  .nav__links { position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--bg); border-bottom: var(--hairline) solid var(--line); padding: 1rem var(--gutter) 2rem; transform: translateY(-120%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .4s var(--ease-emph), opacity .35s var(--ease), visibility .4s; }
  .nav__links.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .nav__links a { padding: .9rem 0; width: 100%; border-bottom: var(--hairline) solid var(--line); font-size: .9rem; }
  .nav__burger { display: flex; }

  /* barra pulita: solo logo + hamburger. Gli strumenti (#navTools) vengono
     spostati da JS qui dentro al drawer. */
  .nav__links .nav__tools { display: flex; flex-direction: column; align-items: flex-start; gap: 1.3rem; width: 100%; padding-top: 1.4rem; margin-top: .4rem; border-top: var(--hairline) solid var(--line); }
  .nav__links .nav__auth { flex-direction: column; align-items: stretch; gap: .8rem; width: 100%; }
  /* la CTA "Accedi al listino" appesantiva il menu mobile: nascosta qui,
     resta sui link Catalogo/Contatti del drawer e sulla barra desktop */
  .nav__links .nav__auth .btn--gold { display: none; }
  .nav__links .nav__auth .btn { width: 100%; }
  .nav__links .switcher__menu { left: 0; right: auto; }
}

/* =============================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--brand); color: var(--on-brand); position: relative; overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(4rem, 7vw, 7rem); }
.footer h4 { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .18em; font-size: var(--fs-label); color: var(--gold); margin-bottom: 1.2rem; }
.footer a { color: var(--on-brand); opacity: .8; display: block; padding: .25rem 0; font-family: var(--font-ui); font-size: .9rem; transition: opacity .25s; }
.footer a:hover { opacity: 1; }
.footer__brand { display: inline-block; line-height: 0; }
.footer__brand .brand-mark { width: clamp(100px, 10vw, 200px); height: clamp(100px, 10vw, 200px); }
.footer__bottom { border-top: var(--hairline) solid rgba(255,255,255,.12); padding-block: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-family: var(--font-ui); font-size: .78rem; opacity: .7; letter-spacing: .04em; }
/* Da mobile il footer si incolonna, e incolonnato va tutto centrato: tre
   blocchi allineati a sinistra su una colonna sola sembrano appoggiati al
   bordo. Il logo e' inline-block, quindi lo centra il text-align del genitore;
   la descrizione invece e' un blocco con max-width, e senza margini automatici
   resterebbe a sinistra dentro lo spazio centrato. */
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr; text-align: center; }
  .footer__grid p { margin-inline: auto; }
  .footer__bottom { justify-content: center; text-align: center; }
}

/* =============================================================================
   CARD PRODOTTO
   ========================================================================== */
.grid-prodotti { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 980px) { .grid-prodotti { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-prodotti { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border-radius: var(--radius-card);
  border: var(--hairline) solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .4s var(--ease-emph), box-shadow .4s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(0,0,0,.35); }
/* zona immagine ad altezza FISSA e uguale per tutte le card: le bottiglie
   poggiano sulla stessa base (flex-end) e sono contenute da max-height, così
   restano tutte alla stessa altezza senza mai sforare. */
/* il wrapper <picture> (per il WebP) non deve creare un box proprio: cosi'
   le regole "X img { max-height: 100% }" restano relative al contenitore reale */
picture { display: contents; }
/* La riga separa a colpo d'occhio la bottiglia dalle informazioni. Sta sul
   media e non sul body: cosi' segue l'altezza della bottiglia, che e' fissa,
   invece di dipendere da quanto testo ha quella referenza. */
.card__media { height: clamp(300px, 26vw, 380px); display: flex; align-items: flex-end; justify-content: center; padding: 2rem 2rem 1.6rem; position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 60%, var(--surface)), var(--surface)); border-bottom: 3px solid var(--card-divisore); }
.card__media img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.22)); }
.card__tag { position: absolute; top: 1rem; left: 1rem; }
.card__body { padding: 1.4rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card__prod { font-family: var(--font-ui); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.card__name { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.05; }
.card__den { color: var(--gold); }
.card__foot { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: var(--hairline) solid var(--line); }
.card__price { font-family: var(--font-ui); font-weight: var(--fw-sb); font-size: 1.05rem; }
.card__price--gated { font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

/* badge novità */
.badge { font-family: var(--font-ui); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; font-weight: var(--fw-bold); color: var(--accent-ink); background: var(--accent); padding: .35rem .7rem; border-radius: var(--radius-pill); }
/* Variante spenta del tag sulla card: la referenza c'e' ma ora non si ordina.
   Deve leggersi come uno stato, non come un richiamo: percio' inchiostro
   smorzato su superficie, non il bordeaux del tag "Novita'". */
.card__tag--off { color: var(--ink-soft); background: var(--surface); border: var(--hairline) solid var(--line); }

/* --- Avviso in pagina --------------------------------------------------------
   Una riga di servizio rivolta al cliente (per esempio: la disponibilita' e'
   cambiata e il carrello e' stato aggiornato). Sta in components.css perche'
   non e' di una pagina sola: appena servira' anche al checkout o all'area
   riservata, e' gia' qui. */
.avviso {
  font-family: var(--font-ui); font-size: .92rem; line-height: 1.5;
  padding: .9rem 1.2rem; border-radius: var(--radius-card);
  border: var(--hairline) solid var(--line); background: var(--surface); color: var(--ink);
  margin-block: 1.4rem 0;
}
.avviso--attenzione { border-color: var(--gold); border-inline-start: 3px solid var(--gold); }

/* placeholder bottiglia reale (PNG su trasparenza): mantiene le proporzioni native */
.bottle-ph { width: auto; height: 100%; object-fit: contain; }

/* =============================================================================
   DIVISORE REGIONI (firma cartografica)
   ========================================================================== */
.regioni-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hairline); background: var(--line); border: var(--hairline) solid var(--line); }
@media (max-width: 860px) { .regioni-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .regioni-grid { grid-template-columns: 1fr; } }
.regione-cell { background: var(--bg); padding: clamp(1.8rem, 3.5vw, 3rem); min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; position: relative; overflow: hidden; transition: background .35s var(--ease); }
/* Lo strato sotto il contenuto della cella. Nudo di suo: lo riempie
   .regione-cell--map con la mappa del territorio. Portava anche la trama di
   curve di livello, tolta dal progetto il 07/09/2026; il ::before resta perche'
   e' lo stesso su cui poggia la mappa, non un residuo. */
.regione-cell::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.regione-cell:hover { background: var(--surface); }
.regione-cell > * { position: relative; }
/* La card ha SEMPRE fondo chiaro: titolo sempre navy scuro (alto contrasto),
   anche dentro sezioni .on-brand (che altrimenti lo schiarirebbe -> illeggibile). */
.regione-cell h2, .regione-cell h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--ink); }
.regione-cell .paese { font-family: var(--font-ui); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); }

/* =============================================================================
   BLOCCO NUMERI / FIDUCIA
   ========================================================================== */
/* Quante voci ci sono lo decide il pannello (blocchi_numeri, righe attive), non
   il CSS: erano quattro colonne fisse, e togliendo "Clienti" le tre rimaste si
   incolonnavano sulle prime tre lasciando un buco a destra, cioe' il blocco
   usciva dal centro. In flex non c'e' un numero di colonne da indovinare: le
   voci si dividono la riga in parti uguali qualunque siano, e justify-content
   le tiene centrate anche quando avanzano (una sola voce, o l'ultima riga
   quando vanno a capo). Il max-width evita l'effetto opposto: con due voci,
   senza tetto, si allontanerebbero ai due bordi della fascia. */
.numeri { display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.5rem, 4vw, 4rem); text-align: center; }
.numeri > .numero { flex: 1 1 clamp(9rem, 14vw, 14rem); max-width: 22rem; }
@media (max-width: 760px) { .numeri { gap: 2.5rem; } }
.numero .val { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 6rem); line-height: 1; color: var(--accent); }
.numero .lab { font-family: var(--font-ui); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); margin-top: .8rem; }

/* =============================================================================
   FORM
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.3rem; }
.field label { font-family: var(--font-ui); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font-family: var(--font-ui); font-size: 1rem; color: var(--ink);
  background: var(--surface); border: var(--hairline) solid var(--line);
  border-radius: var(--radius-card); padding: .9rem 1rem; transition: border-color .25s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); outline: none; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 560px) { .field--row { grid-template-columns: 1fr; } }
.form-card { background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-card); padding: clamp(1.8rem, 4vw, 3rem); }

/* avviso/nota */
.note { font-family: var(--font-ui); font-size: .85rem; color: var(--ink-soft); border-left: 2px solid var(--gold); padding: .4rem 0 .4rem 1rem; }

/* tabella generica (ordini, carrello) */
.table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: .92rem; }
.table th { text-align: left; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); font-weight: var(--fw-sb); padding: .9rem 1rem; border-bottom: var(--hairline) solid var(--line); }
.table td { padding: 1rem; border-bottom: var(--hairline) solid var(--line); }

/* pill stato */
.pill { display: inline-block; font-family: var(--font-ui); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding: .3rem .7rem; border-radius: var(--radius-pill); border: var(--hairline) solid var(--line); color: var(--ink-soft); }
.pill--ok { color: var(--accent); border-color: var(--accent); }
.pill--gold { color: var(--gold); border-color: var(--gold); }
/* stati ordine: un colore distinto per fase */
.pill--warn { color: var(--gold); border-color: var(--gold); }
.pill--progress { color: #3a6ea5; border-color: color-mix(in srgb, #3a6ea5 60%, transparent); }
.pill--transit { color: var(--accent); border-color: var(--accent); }
.pill--done { color: #2e7d32; border-color: color-mix(in srgb, #2e7d32 60%, transparent); }
.pill--off { color: var(--ink-soft); border-color: var(--line); }

/* =============================================================================
   UTILITY
   ========================================================================== */
.prose { font-family: var(--font-text); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.75; color: var(--ink); }
.prose p + p { margin-top: 1.2rem; }
.lead { font-family: var(--font-text); font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.4; }
/* Come .prose: le descrizioni possono avere piu' di un paragrafo. */
.lead p + p { margin-top: .8rem; }
.measure { max-width: 62ch; }
.center { text-align: center; }
.mt-s { margin-top: 1rem; } .mt-m { margin-top: 2rem; } .mt-l { margin-top: 3.5rem; }
.mx-auto { margin-inline: auto; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* Pulsante tondo delle slider. Sta qui, e non nel foglio di un blocco, perche'
   lo usano sia la vetrina (home) sia la slider selezione (produttori). */
.round-btn { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); background: transparent; font-size: 1.2rem; display: grid; place-items: center; transition: background .3s var(--ease), color .3s var(--ease); }
.round-btn:hover { background: var(--gold); color: var(--brand); }

/* reveal di base (data-fade) */
[data-fade] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-emph), transform .9s var(--ease-emph); }
[data-fade].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-fade] { opacity: 1; transform: none; transition: none; } }

/* =============================================================================
   DETERRENTE ANTI-COPIA (BOZZA): niente selezione testo ne' trascinamento
   immagini. I campi form restano selezionabili/incollabili. Vedi protect.js.
   ========================================================================== */
body { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; -moz-user-select: text; user-select: text; }
img { -webkit-user-drag: none; user-drag: none; }

/* toast del deterrente */
#dlx-protect-toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 1rem);
  z-index: 9999; pointer-events: none;
  background: var(--brand); color: var(--on-brand);
  font-family: var(--font-ui); font-size: .82rem; letter-spacing: .08em;
  padding: .8rem 1.4rem; border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--gold); box-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), transform .3s var(--ease-emph), visibility .3s;
}
#dlx-protect-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* =============================================================================
   TABELLE SU TELEFONO: `.table--stack` (28/09/2026)
   -----------------------------------------------------------------------------
   Una tabella a quattro o cinque colonne su uno schermo da 360 px non e' una
   tabella: e' una colonna da 90 px dove "Ageius Grand Cru" va a capo a ogni
   parola, e le ultime colonne finiscono fuori dallo schermo. E' quello che il
   cliente ha fotografato nel carrello e nella dashboard.

   Sotto i 720 px ogni riga diventa una scheda: una voce per riga, il nome
   della colonna a sinistra e il valore a destra. Il nome della colonna lo
   porta la cella con `data-col`, non una regola CSS che conta le posizioni:
   cosi' se un giorno si sposta o si aggiunge una colonna l'etichetta viaggia
   con la sua cella invece di restare indietro in silenzio.
   Le celle senza `data-col` (il nome della referenza, il pulsante rimuovi)
   restano piene larghezza senza etichetta: li' il contenuto si spiega da solo.

   `thead` sparisce perche' le intestazioni sono diventate le etichette.
   ========================================================================== */
@media (max-width: 720px) {
  .table--stack,
  .table--stack thead,
  .table--stack tbody,
  .table--stack tr,
  .table--stack td { display: block; width: 100%; }
  .table--stack thead { display: none; }

  .table--stack tr {
    padding: 1rem 0;
    border-bottom: var(--hairline) solid var(--line);
  }
  .table--stack tr:last-child { border-bottom: 0; }

  .table--stack td {
    border: 0; padding: .3rem 0;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .table--stack td[data-col]::before {
    content: attr(data-col);
    flex: 0 0 auto;
    font-family: var(--font-ui); font-size: var(--fs-label);
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  }
  /* La cella senza etichetta apre la scheda: e' il nome della referenza, e
     prende tutta la riga invece di stare in fila con un'etichetta assente. */
  .table--stack td:not([data-col]) { display: block; }
  /* Il valore sta a destra e non va a capo per colpa dell'etichetta a sinistra. */
  .table--stack td[data-col] > * { text-align: right; }
  .table--stack td[data-col] { text-align: right; }
}

/* =============================================================================
   AVVISO "FATTO" (28/09/2026)
   -----------------------------------------------------------------------------
   Lo costruisce acquisto.js quando una referenza entra nel carrello e il
   pannello si chiude: senza, restare sulla scheda vorrebbe dire premere un
   pulsante e non vedere succedere niente.

   Sta QUI e non in pages/prodotto.css perche' un "fatto" servira' anche
   altrove, e il carrello e' il primo candidato. E' la regola di casa: se il
   pezzo puo' finire in due pagine, il suo CSS non puo' stare in una.
   Il modello e' il toast del deterrente qui sopra, con una differenza: questo
   si puo' cliccare, perche' dentro c'e' il collegamento al carrello.
   ========================================================================== */
.dlx-avviso {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem);
  z-index: 9998; max-width: min(92vw, 30rem);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--brand); color: var(--on-brand);
  font-family: var(--font-ui); font-size: .86rem;
  padding: .9rem 1.2rem; border-radius: var(--radius-m, 10px);
  border: var(--hairline) solid var(--gold);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease-emph), visibility .3s;
}
.dlx-avviso.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dlx-avviso a {
  margin-inline-start: auto; white-space: nowrap;
  color: var(--gold); text-decoration: underline; text-underline-offset: .2em;
}
@media (prefers-reduced-motion: reduce) { .dlx-avviso { transition: opacity .01s; } }

/* =============================================================================
   MAPPE A MATITA (sfondi territorio) + hover card territori — brief PDF 6-7-26
   Gli asset (assets/maps/pencil/{mappa}.png) li fornisce il cliente; finche'
   mancano il layer resta invisibile e la sezione resta nuda (prima sotto c'era
   la trama contour, tolta dal progetto il 07/09/2026).
   ========================================================================== */
.pencil-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-position: center; background-size: cover;
  opacity: .10; mix-blend-mode: multiply; }
[data-theme="notte"] .pencil-bg { mix-blend-mode: screen; opacity: .08; }
/* Variante "foto": mappa disegnata caricata da admin. E' un'immagine finita (non
   una matita tenue), quindi piu' presente e senza blend che la slaverebbe.
   Il .regione-hero__veil sopra mantiene titolo e coordinate leggibili. */
.pencil-bg--photo { opacity: .72; mix-blend-mode: normal; }
[data-theme="notte"] .pencil-bg--photo { opacity: .5; mix-blend-mode: normal; }
.has-pencil { position: relative; }
.has-pencil > .container, .has-pencil > * { position: relative; z-index: 1; }
/* Eccezione: il layer mappa NON deve essere sollevato dalla regola qui sopra
   (che ha la stessa specificita' di .pencil-bg e, venendo dopo, lo trasformava
   in position:relative annullando lo sfondo). Ripristino con selettore piu' forte. */
.has-pencil > .pencil-bg { position: absolute; inset: 0; z-index: 0; }

/* Card territorio: leggero sollevamento all'hover (come da richiesta) */
.regione-cell { position: relative; overflow: hidden; transition: transform .4s var(--ease-emph), box-shadow .4s var(--ease); }
.regione-cell::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../img/compass.svg") no-repeat right -30px bottom -30px / 160px; opacity: .05; transition: opacity .4s var(--ease); }
.regione-cell:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(22,36,63,.10); }
.regione-cell:hover::before { opacity: .12; }
.regione-cell > * { position: relative; z-index: 1; }

/* Card con sfondo-mappa caricato: la mappa disegnata sostituisce il compass e
   fa da velatura sotto al testo. Opacita' contenuta = testo scuro leggibile. */
.regione-cell--map::before { background: var(--map) center / cover no-repeat; opacity: .22; }
.regione-cell--map:hover::before { opacity: .34; }

/* =============================================================================
   NASTRI DI LOGHI (partials/nastro-loghi.php)
   -----------------------------------------------------------------------------
   Scorrimento in CSS puro, non GSAP: e' un ciclo continuo che non dipende dallo
   scroll, quindi funziona anche se il CDN non risponde.
   La pista contiene DUE copie della sequenza e trasla del 50%: a fine ciclo la
   copia 2 e' esattamente dove era la copia 1 all'inizio, quindi il ritorno a
   zero e' invisibile.
   Le classi si chiamavano .partner* finche' il nastro era uno solo; dal
   07/09/2026 sono due (partner e produttori, a versi opposti) e condividono
   questo stesso codice.
   ========================================================================== */
.nastro {
  padding-block: clamp(1.4rem, 2.6vw, 2.2rem);
  border-top: var(--hairline) solid var(--line);
  overflow: hidden;
  /* Niente content-visibility: sulla carta risparmia il disegno finche' la
     fascia e' fuori schermo, alla prova lasciava il nastro vuoto anche quando
     era in vista. Il guadagno era teorico, il rischio no: le immagini sono gia'
     lazy e il peso e' modesto. */
}
.nastro__t { text-align: center; margin-bottom: 1rem; opacity: .75; }

.nastro__pista-box {
  position: relative;
  /* I bordi sfumano invece di tagliare netto: il logo entra ed esce con grazia. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.nastro__pista {
  display: flex; width: max-content;
  animation: nastro-scorri var(--nastro-durata, 30s) linear infinite;
  will-change: transform;
}
/* Verso opposto: stessa animazione letta al contrario. Due fasce che scorrono
   in senso inverso si leggono come due cose diverse, non come un doppione. */
.nastro--inverso .nastro__pista { animation-direction: reverse; }
/* La pausa e' per fascia: il mouse ferma quella che sta guardando, non l'altra. */
.nastro__pista-box:hover .nastro__pista { animation-play-state: paused; }

.nastro__gruppo {
  display: flex; align-items: center; gap: clamp(2.2rem, 5vw, 4rem);
  margin: 0; padding: 0 clamp(1.1rem, 2.5vw, 2rem); list-style: none;
}
.nastro__voce { flex: 0 0 auto; }
.nastro__voce img {
  display: block; height: clamp(28px, 4vw, 42px); width: auto; max-width: 150px;
  object-fit: contain;
  /* Loghi in grigio, colore pieno al passaggio del mouse: nessun logo urla
     sopra gli altri e la fascia resta coerente con i tre temi. */
  filter: grayscale(1); opacity: .62;
  transition: filter .3s ease, opacity .3s ease;
}
.nastro__voce a:hover img, .nastro__voce a:focus-visible img { filter: none; opacity: 1; }
[data-theme="notte"] .nastro__voce img { filter: grayscale(1) invert(1) brightness(1.6); opacity: .5; }
[data-theme="notte"] .nastro__voce a:hover img { filter: invert(1) brightness(1.1); opacity: 1; }

@keyframes nastro-scorri {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Chi ha chiesto meno animazioni vede i loghi fermi, non un nastro che scatta. */
@media (prefers-reduced-motion: reduce) {
  .nastro__pista { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .nastro__gruppo:nth-child(2) { display: none; }
  .nastro__gruppo { flex-wrap: wrap; justify-content: center; row-gap: 1.2rem; }
  .nastro__pista-box { -webkit-mask-image: none; mask-image: none; }
}

/* =============================================================================
   MAPPA INTERATTIVA  ·  riquadro, marcatori, popup
   Il contenitore contiene DUE cose sovrapposte: il contenuto stampato dal
   server (coordinate, indirizzo, link) e la tela della mappa, che compare solo
   quando la mappa e' viva davvero (classe .is-viva). Se la mappa non parte,
   quello che si vede e' il contenuto del server: nessun buco grigio.
   ========================================================================== */
.mappa-box {
  position: relative;
  min-height: clamp(300px, 42vh, 520px);
  background: var(--surface);
  border-block: var(--hairline) solid var(--line);
  overflow: hidden;
}
.mappa-box__fallback {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; text-align: center; padding: var(--gutter);
  transition: opacity .4s var(--ease);
}
/* Con la mappa viva il fallback si spegne davvero, invece di contare sul fatto
   che il canvas sia opaco: se i tile tardano, il testo traspariva sotto la mappa. */
.mappa-box.is-viva .mappa-box__fallback { opacity: 0; visibility: hidden; }
/* La tela va scritta con DUE classi, non una.
   MapLibre applica al proprio contenitore la classe .maplibregl-map, che nel suo
   foglio di stile porta `position: relative`. Quel foglio lo carica il componente
   a runtime, quindi arriva DOPO components.css: a parita' di specificita' (una
   classe contro una classe) vinceva lui, la tela perdeva `position:absolute` e
   restava alta ZERO. Risultato: canvas presente, mappa disegnata in un riquadro
   di altezza nulla, e in pagina si vedeva solo il fallback sotto.
   Con `.mappa-box .mappa-tela` la specificita' e' 0,2,0 contro 0,1,0: vince
   sempre, qualunque sia l'ordine di caricamento dei fogli. */
.mappa-box .mappa-tela {
  position: absolute; inset: 0; z-index: 2;
  width: auto; height: auto;          /* mai dimensioni implicite a zero */
  opacity: 0; transition: opacity .6s var(--ease);
}
.mappa-box.is-viva .mappa-tela { opacity: 1; }

/* Mentre la libreria arriva: un respiro, non uno spinner che grida. */
.mappa-box.is-carica .mappa-box__fallback { opacity: .55; transition: opacity .4s var(--ease); }

/* Marcatore: lo stesso punto della carta disegnata, per continuita' visiva. */
.mappa-pin { cursor: pointer; line-height: 0; }
.mappa-pin__dot {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
              0 2px 6px rgba(0,0,0,.25);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mappa-pin:hover .mappa-pin__dot {
  transform: scale(1.3);
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 16%, transparent), 0 2px 8px rgba(0,0,0,.3);
}

/* Popup: tipografia del sito, non quella di serie della libreria. */
.mappa-popup { display: flex; flex-direction: column; gap: .15rem; min-width: 150px; }
.mappa-popup b { font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--ink); }
.mappa-popup small {
  font-family: var(--font-ui); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.mappa-popup__coord { text-transform: none !important; letter-spacing: .04em !important; }
.mappa-popup a {
  margin-top: .35rem; font-family: var(--font-ui); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold); text-decoration: none;
}
.mappa-popup a:hover { text-decoration: underline; }
.maplibregl-popup-content {
  background: var(--bg); color: var(--ink);
  border: var(--hairline) solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: .7rem .9rem;
}
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--bg); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--bg); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--bg); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--bg); }

/* Controlli e attribuzione: presenti e leggibili, ma in punta di piedi. */
.mappa-box .maplibregl-ctrl-group { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.mappa-box .maplibregl-ctrl-attrib { font-family: var(--font-ui); font-size: .68rem; }
.mappa-box .maplibregl-ctrl-attrib a { color: var(--ink-soft); }

/* --- Fascia mappa in fondo alla scheda produttore ------------------------- */
.mappa-cantina { position: relative; }
.mappa-cantina .mappa-box { min-height: clamp(320px, 48vh, 560px); }
.mappa-cantina__intro {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .6rem 1.4rem; margin-bottom: 1.1rem;
}
.mappa-cantina__fb { display: flex; flex-direction: column; gap: .35rem; align-items: center; }
.mappa-cantina__fb .coord { font-size: 1rem; }

/* Carta d'insieme (mappa.php): qui il fallback NON e' un blocchetto centrato ma
   la carta disegnata per intero, che detta anche l'altezza del riquadro. Quindi
   torna nel flusso e la tela della mappa le si sovrappone. */
.mappa-box--insieme { min-height: 0; border: 0; background: none; }
.mappa-box--insieme .mappa-box__fallback {
  position: static; display: block; padding: 0; text-align: left;
}
.mappa-box--insieme .mappa-tela { border: var(--hairline) solid var(--line); border-radius: var(--radius-card); }

/* --- .documento: testo formattato scritto dal pannello ---------------------
   Lo usano le condizioni commerciali (area riservata) e il blocco "Come
   lavoriamo" di Chi siamo. Sta qui e non in un foglio di pagina proprio
   perche' lo condividono due pagine che caricano CSS diversi.
   Il markup che arriva puo' essere qualsiasi combinazione della lista chiusa
   di lib/rich.php: ogni tag ammesso deve avere una resa, o basta un elenco
   per far sembrare la pagina rotta.
   Misura di lettura limitata: un documento si legge riga per riga, e a tutta
   larghezza l'occhio perde il capo del rigo successivo. */
/* Corpo e misura sono gli STESSI di .prose + .measure, che e' il testo lungo del
   sito (le biografie dei soci qui sopra, le descrizioni di produttori e
   territori). Erano 1.02rem fissi contro il clamp fino a 1.25rem di .prose: su
   uno schermo largo faceva 16px contro 20px, e nella stessa pagina si vedeva
   che questo blocco era il parente povero. Se un giorno cambia .prose, cambia
   anche questa riga. */
.documento { font-family: var(--font-text); font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.75; color: var(--ink); max-width: 62ch; }
.documento > :first-child { margin-top: 0; }
.documento > :last-child  { margin-bottom: 0; }
.documento p  { margin: 0 0 1.1rem; }
.documento h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 500;
  line-height: 1.25; margin: 2.4rem 0 .8rem; }
.documento h3 { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 500;
  margin: 1.9rem 0 .6rem; }
.documento h4 { font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--gold); margin: 1.6rem 0 .5rem; }
/* design-tokens.css azzera list-style e padding di ogni ul: in un documento
   i pallini servono, quindi qui si rimettono. */
.documento ul { margin: 0 0 1.1rem; padding-left: 1.3rem; list-style: disc; }
.documento ol { margin: 0 0 1.1rem; padding-left: 1.3rem; list-style: decimal; }
.documento li { margin-bottom: .45rem; }
.documento li::marker { color: var(--accent); }
.documento a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.documento strong { font-weight: 600; }
.documento blockquote { margin: 0 0 1.1rem; padding-left: 1.1rem; border-left: 2px solid var(--gold); color: var(--ink-soft); }
.documento hr { border: 0; border-top: var(--hairline) solid var(--line); margin: 2rem 0; }
/* Una tabella di tempi o di soglie non deve mai allargare la pagina: scorre
   dentro il suo riquadro, come le tabelle larghe del pannello. */
.documento table { border-collapse: collapse; width: 100%; margin: 0 0 1.2rem; font-family: var(--font-ui); font-size: .9rem; }
.documento th, .documento td { border: var(--hairline) solid var(--line); padding: .6rem .8rem; text-align: left; vertical-align: top; }
.documento th { background: var(--surface); font-weight: 600; letter-spacing: .02em; }
@media (max-width: 620px) {
  /* Su schermo stretto la tabella scorre dentro il suo riquadro invece di
     allargare la pagina: e' la stessa rete di .a-tabellone nel pannello. */
  .documento table { display: block; overflow-x: auto; }
}

/* Variante centrata (la usa "Come lavoriamo" su Chi siamo, per stare in asse
   con l'occhiello e il titolo della pagina). Centrare un documento e' delicato:
   paragrafi e titoli reggono, un ELENCO centrato no, perche' ogni riga parte da
   un punto diverso e i pallini si sfalsano. Quindi la lista diventa un blocco
   centrato con il testo dentro allineato a sinistra: la si legge, e resta in
   asse col resto. Vale anche per le tabelle, che si centrano ma non si
   sformano. Serve perche' il testo lo scrive il cliente dal pannello: oggi c'e'
   un paragrafo, domani puo' metterci tre punti elenco. */
.documento--centrato { margin-inline: auto; text-align: center; }
.documento--centrato ul,
.documento--centrato ol { display: inline-block; text-align: left; margin-inline: auto; }
.documento--centrato table { width: auto; margin-inline: auto; text-align: left; }
.documento--centrato blockquote { display: inline-block; text-align: left; }
.documento--centrato hr { margin-inline: auto; width: 6rem; }

/* --- Nastro anteprime (filmstrip.js) ----------------------------------------
   Sta qui e non in un foglio di pagina perche' il componente lo usano sia la
   vetrina della home sia la slider in fondo a Produttori. Tenerlo in
   pages/slider.css e' gia' costato una fascia esplosa in altezza: la home
   caricava filmstrip.js, il track si costruiva davvero e nessuna regola gli
   diceva di stare in fila dentro una maschera. Chi carica il JS ha il CSS.
   La maschera clippa in orizzontale, il track scorre; il padding verticale e'
   il respiro per l'hover-lift e le ombre. */
.dlx-strip-mask { overflow: hidden; position: relative; padding-block: 10px; }
.dlx-strip-track { display: flex; flex-wrap: nowrap; align-items: flex-end; will-change: transform; }
.dlx-strip-track > * { min-width: 0; }

/* --- Parallax dei fondali ([data-parallax]) ----------------------------------
   Lo guida il BROWSER, non il JavaScript. Un tempo lo muoveva parallax.js
   agganciato allo scroll: e' il classico "scroll-linked positioning effect" per
   cui Firefox stampa un avviso in console, e l'avviso ha ragione. La pagina
   scorre sul compositor, cioe' su un thread suo, e l'evento di scroll arriva al
   JavaScript quando lo schermo si e' gia' mosso: il fondale resta sempre un
   fotogramma indietro. Su una macchina potente non si nota, su una debole
   struscia. Con una view-timeline l'animazione la esegue lo stesso thread che
   fa scorrere la pagina: nessun ritardo e, soprattutto, zero lavoro sul thread
   principale mentre si scorre.

   La timeline sta sulla SEZIONE e non sul layer di proposito: il layer e' piu'
   alto della sezione (inset negativo, gli serve per avere corsa) e misurato su
   se stesso darebbe un intervallo diverso da quello che faceva GSAP.

   La corsa e' --dlx-parallax, la frazione dell'altezza del layer: la scrive
   parallax.js leggendo l'attributo data-parallax, che resta la fonte unica.
   Senza JavaScript resta il valore predefinito e il parallax funziona lo stesso.

   Chi non ha le animazioni guidate dallo scroll (sotto Chrome 115 / Firefox 132
   / Safari 18) non entra qui e resta servito da parallax.js con GSAP, identico
   a prima. E con prefers-reduced-motion non si muove niente, come sempre. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-parallax] { view-timeline-name: --dlx-parallax-tl; }
    [data-parallax] > [data-parallax-layer] {
      animation: dlx-parallax linear both;
      animation-timeline: --dlx-parallax-tl;
      will-change: transform;
    }
    @keyframes dlx-parallax {
      from { transform: translateY(calc(var(--dlx-parallax, .1) * -100%)); }
      to   { transform: translateY(calc(var(--dlx-parallax, .1) *  100%)); }
    }
  }
}

/* --- Selettore di quantita' ([data-qty]) -------------------------------------
   Sta qui e non in un foglio di pagina per la stessa ragione del nastro qui
   sopra: lo pilota UN componente condiviso (assets/js/components/cart.js) e lo
   usano DUE pagine, la barra acquisto della scheda prodotto (fondo navy) e le
   righe del carrello (fondo chiaro). Le regole stavano divise fra
   pages/prodotto.css e pages/account.css, e la meta' chiara si limitava a
   ridipingere il testo: i fondi dei tasti erano scritti in rgba(255,255,255,..),
   cioe' bianco su bianco, e sul carrello i due riquadri sparivano.

   Adesso il colore si dichiara UNA volta (--qty-ink) e tutto il resto si ricava
   da li' con color-mix. La variante chiara cambia quel solo valore.

   I tasti hanno un fondo ANCHE DA FERMI (richiesta cliente 16/09/2026: "dovrebbe
   essere piu' pieno che si vedono le righe dentro i riquadri del + e del -").
   Prima erano trasparenti a riposo e le tre celle si vedevano solo passandoci
   sopra il mouse, cioe' mai su un telefono. */
.qty {
  --qty-ink:     var(--on-brand);
  --qty-bordo:   color-mix(in srgb, var(--qty-ink) 30%, transparent);
  --qty-tasto:   color-mix(in srgb, var(--qty-ink) 10%, transparent);
  --qty-hover:   color-mix(in srgb, var(--qty-ink) 18%, transparent);
  --qty-premuto: color-mix(in srgb, var(--qty-ink) 26%, transparent);
  display: inline-flex; align-items: center; height: 48px;
  border: var(--hairline) solid var(--qty-bordo);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
/* I tasti NON hanno piu' un fondo da fermi, e non e' un ritorno indietro
   rispetto al 16/09/2026 ("dovrebbe essere piu' pieno"). Quella richiesta
   nasceva dal fatto che a riposo i tasti erano INVISIBILI, e la risposta di
   allora fu dargli un fondo. Il fondo pero' disegna due rettangoli dentro la
   pillola, e insieme ai filetti dell'input il risultato e' quello che il
   cliente descrive il 23/09/2026: "sembra ci sia un quadrato dentro".
   Ora i tasti si vedono per il SEGNO, non per il riquadro: + e - sono pieni,
   grossi e in pieno contrasto. Il fondo torna al passaggio del mouse e alla
   pressione, dove serve davvero perche' e' li' che deve dare riscontro. */
.qty button {
  width: 42px; height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  /* `border: 0` NON e' pleonastico, ed e' qui che stavano davvero le "linette".
     Il reset di design-tokens.css da' ai bottoni font, cursore e colore, ma non
     tocca il bordo, quindi resta quello predefinito del browser. Non si vedeva
     un rettangolo intero perche' `.qty` ha overflow:hidden e angoli tondi: il
     ritaglio mangiava i lati esterni e lasciava in piedi solo i due lati
     INTERNI, cioe' esattamente le due stanghette verticali attorno al numero.
     Togliere il border-inline dell'input da solo non bastava: era la meta'
     visibile del problema. */
  border: 0;
  background: transparent;
  color: var(--qty-ink);
  font-size: 1.15rem; font-weight: 700; line-height: 1;
  transition: background .18s ease;
}
.qty button:hover  { background: var(--qty-hover); }
.qty button:active { background: var(--qty-premuto); }
/* outline all'interno: il selettore ha overflow:hidden e un contorno esterno
   verrebbe tagliato dai bordi arrotondati. */
.qty button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* Niente piu' `border-inline`: erano quelle le "linette" che chiudevano il
   numero in una cella e facevano leggere la pillola come tre scatole in fila.
   Adesso il gruppo e' UN oggetto solo, con il numero in mezzo.
   `tabular-nums` resta e qui conta: senza, passando da 6 a 12 la cifra cambia
   larghezza, il numero si sposta e i tasti ballano sotto il dito. */
.qty input {
  width: 52px; height: 100%; text-align: center;
  background: transparent; border: 0;
  color: var(--qty-ink);
  font-family: var(--font-ui); font-weight: var(--fw-sb);
  font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
.qty input:focus { outline: none; background: color-mix(in srgb, var(--qty-ink) 7%, transparent); }
/* via le freccette native del browser (lo spinner brutto) */
.qty input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.qty input[type=number]::-webkit-outer-spin-button,
.qty input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Variante su fondo chiaro (carrello): cambia SOLO l'inchiostro, il resto si
   ricalcola da solo. Il bordo prende il token di linea, che e' gia' tarato
   sul fondo chiaro nei tre temi. */
.qty--light { --qty-ink: var(--ink); --qty-bordo: var(--line); }

/* Variante BASSA per le righe dei formati nella fascia acquisto (23/09/2026).
   Con tre formati la fascia diventava alta quanto mezzo schermo, ed e' la cosa
   che il cliente non voleva. Qui si scende da 48 a 42 px: sotto i 42 il tasto
   non e' piu' un bersaglio comodo da toccare, quindi e' il pavimento e non una
   misura scelta a occhio. Su mobile la fascia si impila e torna a 48. */
.qty--fila { height: 42px; }
.qty--fila button { width: 38px; }
.qty--fila input { width: 46px; }