/* ==========================================================================
   Ventro - foglio di stile unico
   Palette derivata dal logo: teal #25718f, ardesia #35464d.
   Ogni colore di testo e' verificato con il calcolo WCAG: i rapporti sono
   annotati accanto al token. Minimi applicati: 4.5:1 sotto i 18px,
   3:1 da 18px in su o in grassetto (accessibility.md > Best practices).
   ========================================================================== */

/* --- Token: tema chiaro -------------------------------------------------- */
:root {
  --superficie:      #FFFFFF;
  --superficie-2:    #F4F6F7;   /* fondo raggruppato */
  --superficie-3:    #E9EDEF;   /* intestazioni tabella, chip */
  --testo:           #101A1F;   /* 17.65:1 su bianco */
  --testo-2:         #55666F;   /*  5.97:1 su bianco */
  --testo-3:         #6B7780;   /*  4.59:1 su bianco */
  --separatore:      #D9DFE3;
  --accento:         #25718F;   /*  5.47:1 su bianco - teal del logo */
  --accento-forte:   #1F6383;   /*  6.62:1 su bianco */
  --accento-tenue:   #EAF2F6;
  --su-accento:      #FFFFFF;   /*  5.47:1 su --accento */
  --ok:              #1C6F49;   /*  6.14:1 su bianco */
  --ok-tenue:        #E7F3EC;
  --attenzione:      #8A5300;   /*  6.33:1 su bianco */
  --attenzione-tenue:#FBF1E2;
  --ombra:           0 1px 2px rgba(16, 26, 31, .06), 0 8px 24px rgba(16, 26, 31, .06);
  --ombra-tenue:     0 1px 2px rgba(16, 26, 31, .05);

  --raggio:    12px;
  --raggio-s:  8px;
  --raggio-xl: 18px;

  /* Scala di spaziatura a passo 4px */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;   --s9: 6rem;

  --larghezza:       1120px;
  --larghezza-larga: 1320px;
  --larghezza-testo: 68ch;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          system-ui, Roboto, Helvetica, Arial, sans-serif;

  color-scheme: light dark;
}

/* --- Token: tema scuro ---------------------------------------------------
   Nessun interruttore di tema nel sito: si segue l'impostazione di sistema.
   (dark-mode.md > Best practices: "Avoid offering an app-specific appearance
   setting.")                                                               */
@media (prefers-color-scheme: dark) {
  :root {
    --superficie:      #0E1417;
    --superficie-2:    #182126;
    --superficie-3:    #222D33;
    --testo:           #EDF1F3;  /* 16.34:1 - bianco ammorbidito, non #FFF */
    --testo-2:         #9BAAB3;  /*  7.78:1 */
    --testo-3:         #8A979F;  /*  6.20:1 */
    --separatore:      #2B353B;
    --accento:         #6CBCE0;  /*  8.76:1 su fondo scuro */
    --accento-forte:   #8FCDE9;
    --accento-tenue:   #17262E;
    --su-accento:      #0E1417;  /*  8.76:1 su --accento */
    --ok:              #4FC48E;  /*  8.50:1 */
    --ok-tenue:        #12261D;
    --attenzione:      #E3A945;  /*  8.87:1 */
    --attenzione-tenue:#2A2113;
    --ombra:           0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .4);
    --ombra-tenue:     0 1px 2px rgba(0, 0, 0, .45);
  }
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* L'attributo hidden deve vincere su qualsiasi display dichiarato piu' sotto:
   senza !important un .bottone { display: inline-flex } lascerebbe visibile un
   elemento marcato hidden, ed e' cosi' che si mostrano per sbaglio i comandi
   dell'area riservata. */
[hidden] { display: none !important; }

/* Pagine riservate: il contenuto compare quando il server ha confermato
   l'accesso (sessione.js toglie la classe). */
.attesa-accesso main { visibility: hidden; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  /* 1.0625rem = 17px al default del browser, la misura predefinita iOS.
     In rem, cosi' segue l'impostazione di corpo testo dell'utente. */
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--testo);
  background: var(--superficie);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 var(--s3); letter-spacing: -.018em; }
h1 { font-size: clamp(2rem, 1.3rem + 2.9vw, 3.25rem); font-weight: 700; letter-spacing: -.028em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem); font-weight: 650; }
h3 { font-size: 1.1875rem; font-weight: 620; }
p  { margin: 0 0 var(--s4); }

a { color: var(--accento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accento-forte); }

img, svg { max-width: 100%; height: auto; }

/* Tutti i numeri del sito usano cifre a larghezza fissa: in una colonna di
   prezzi le unita' restano incolonnate e il confronto e' immediato. */
.num, td, th, .prezzo, input, select { font-variant-numeric: tabular-nums; }

/* --- Accessibilita' ------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.salta-al-contenuto {
  position: absolute; left: var(--s4); top: -10rem; z-index: 100;
  padding: var(--s3) var(--s4);
  background: var(--accento); color: var(--su-accento);
  border-radius: var(--raggio-s); font-weight: 600;
  transition: top .15s ease;
}
.salta-al-contenuto:focus { top: var(--s4); }

.solo-lettori-schermo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* --- Impalcatura --------------------------------------------------------- */
.contenitore { width: 100%; max-width: var(--larghezza); margin-inline: auto; padding-inline: var(--s5); }
.contenitore-largo { max-width: var(--larghezza-larga); }
.sezione { padding-block: var(--s8); }
.sezione-grigia { background: var(--superficie-2); }
.misura { max-width: var(--larghezza-testo); }

@media (max-width: 640px) {
  .contenitore { padding-inline: var(--s4); }
  .sezione { padding-block: var(--s7); }
}

/* --- Intestazione -------------------------------------------------------- */
.intestazione {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--separatore);
}
/* Se il browser non supporta il fondo sfocato, si torna a un fondo pieno:
   il testo non deve mai poggiare su una traslucenza non calcolata. */
@supports not (backdrop-filter: blur(1px)) {
  .intestazione { background: var(--superficie); }
}

.barra { display: flex; align-items: center; gap: var(--s5); min-height: 60px; }

.marchio { display: inline-flex; align-items: center; flex: 0 0 auto; padding-block: var(--s2); }
.marchio img { height: 30px; width: auto; display: block; }
.marchio .logo-scuro { display: none; }
@media (prefers-color-scheme: dark) {
  .marchio .logo-chiaro { display: none; }
  .marchio .logo-scuro  { display: block; }
}

.navigazione { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
/* :not(.bottone) e' necessario: senza, questa regola vincerebbe per
   specificita' sulle classi .bottone-* e il pulsante "Accedi" finirebbe
   con il testo grigio su fondo teal. */
.navigazione a:not(.bottone) {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--s3);
  color: var(--testo-2); text-decoration: none;
  font-size: .9375rem; font-weight: 500;
  border-radius: var(--raggio-s);
}
.navigazione a:not(.bottone):hover { color: var(--testo); background: var(--superficie-2); }
/* La posizione corrente e' segnata da colore, peso e da una barra: mai dal
   solo colore (accessibility.md). aria-current="page" e' l'ancora. */
.navigazione a[aria-current="page"]:not(.bottone) { color: var(--testo); font-weight: 640; position: relative; }
.navigazione a[aria-current="page"]:not(.bottone)::after {
  content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: 6px;
  height: 2px; border-radius: 2px; background: var(--accento);
}

.apri-menu {
  display: none; margin-left: var(--s1);
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--separatore); border-radius: var(--raggio-s);
  color: var(--testo); cursor: pointer;
}
.apri-menu:hover { background: var(--superficie-2); }
.apri-menu svg { width: 20px; height: 20px; }

@media (max-width: 860px) {
  .apri-menu { display: inline-flex; }
  .navigazione {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s2) var(--s4) var(--s4);
    background: var(--superficie); border-bottom: 1px solid var(--separatore);
    box-shadow: var(--ombra);
  }
  .navigazione.aperta { display: flex; }
  .navigazione a:not(.bottone) { min-height: 48px; padding-inline: var(--s3); font-size: 1rem; }
  .navigazione a[aria-current="page"]:not(.bottone)::after { display: none; }
  .navigazione a[aria-current="page"]:not(.bottone) { background: var(--accento-tenue); }
  .navigazione .bottone { margin-top: var(--s2); justify-content: center; }
  .barra { position: relative; }
}

/* --- Bottoni -------------------------------------------------------------
   Altezza minima 44px: il bersaglio tattile predefinito di iOS
   (accessibility.md > Interactions).                                        */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s5);
  font: inherit; font-size: 1rem; font-weight: 600;
  border: 1px solid transparent; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.bottone:active { transform: scale(.98); }

.bottone-principale { background: var(--accento); color: var(--su-accento); }
.bottone-principale:hover { background: var(--accento-forte); color: var(--su-accento); }

.bottone-secondario { background: transparent; color: var(--testo); border-color: var(--separatore); }
.bottone-secondario:hover { background: var(--superficie-2); color: var(--testo); border-color: var(--testo-3); }

.bottone-tenue { background: var(--superficie-2); color: var(--testo); }
.bottone-tenue:hover { background: var(--superficie-3); color: var(--testo); }

.bottone-largo { width: 100%; }
.gruppo-bottoni { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Link che vale come un comando, non incastonato in una frase: va portato a
   un'altezza cliccabile. I link dentro un testo corrente restano inline,
   dove il bersaglio minimo non si applica. */
.link-azione { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; }

/* --- Etichette di stato --------------------------------------------------
   Colore piu' parola: lo stato non e' mai affidato al solo colore.          */
.stato {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; white-space: nowrap;
}
.stato::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stato-ok       { color: var(--ok);         background: var(--ok-tenue); }
.stato-poche    { color: var(--attenzione); background: var(--attenzione-tenue); }
.stato-esaurito { color: var(--testo-2);    background: var(--superficie-3); }

.etichetta {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: var(--superficie-3); color: var(--testo-2);
  font-size: .75rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}

.occhiello {
  display: block; margin-bottom: var(--s3);
  font-size: .8125rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accento);
}

/* --- Copertina ----------------------------------------------------------- */
.copertina { padding-block: var(--s8) var(--s7); }
.copertina-griglia {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s7); align-items: center;
}
.copertina h1 { margin-bottom: var(--s4); }
.copertina .occhiello { color: var(--accento); }
.sottotitolo { font-size: 1.1875rem; color: var(--testo-2); max-width: 48ch; margin-bottom: var(--s5); }

@media (max-width: 900px) {
  .copertina-griglia { grid-template-columns: 1fr; gap: var(--s6); }
}

/* --- La lavagna: l'elemento distintivo del sito --------------------------
   Non una fotografia di repertorio ma il listino vero, con la data di
   aggiornamento in chiaro. Per un distributore la merce in casa oggi e'
   l'unico argomento di vendita che conti.                                   */
.lavagna {
  background: var(--superficie); border: 1px solid var(--separatore);
  border-radius: var(--raggio-xl); box-shadow: var(--ombra); overflow: hidden;
}
.lavagna-testata {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--separatore);
  background: var(--superficie-2);
}
.lavagna-titolo { font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--testo-2); }
.lavagna-data { font-size: .8125rem; color: var(--testo-2); }
.lavagna-riga {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s3); align-items: center;
  padding: var(--s3) var(--s5); border-bottom: 1px solid var(--separatore);
}
.lavagna-riga:last-of-type { border-bottom: 0; }
.lavagna-nome { font-size: .9375rem; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lavagna-prezzo { font-size: 1rem; font-weight: 680; letter-spacing: -.01em; }
.lavagna-pie {
  padding: var(--s1) var(--s5); border-top: 1px solid var(--separatore);
  background: var(--superficie-2); font-size: .875rem;
}
.lavagna-pie a { display: inline-flex; align-items: center; min-height: 40px; }

@media (max-width: 480px) {
  .lavagna-riga { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s1); padding-inline: var(--s4); }
  .lavagna-riga .stato { grid-column: 1; justify-self: start; }
  .lavagna-testata, .lavagna-pie { padding-inline: var(--s4); }
}

/* --- Riga di sintesi -----------------------------------------------------
   Numeri in linea nel flusso del testo, non riquadri decorativi.            */
.sintesi {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  padding-block: var(--s5); border-block: 1px solid var(--separatore);
  font-size: .9375rem; color: var(--testo-2);
}
.sintesi b { color: var(--testo); font-weight: 680; }

/* --- Schede -------------------------------------------------------------- */
.griglia { display: grid; gap: var(--s4); }
.griglia-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.griglia-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
/* Cinque categorie: a tre colonne diventano 3 + 2, una griglia chiusa.
   A quattro resterebbe una scheda orfana sulla seconda riga. */
.griglia-categorie { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.griglia-contatti { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s7); }
@media (max-width: 860px) { .griglia-contatti { grid-template-columns: 1fr; gap: var(--s6); } }

.scheda {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5);
  background: var(--superficie); border: 1px solid var(--separatore);
  border-radius: var(--raggio); box-shadow: var(--ombra-tenue);
}
.scheda h3 { margin: 0; }
.scheda p { margin: 0; color: var(--testo-2); font-size: .9375rem; }

a.scheda { text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
a.scheda:hover { border-color: var(--accento); transform: translateY(-2px); color: inherit; }
a.scheda .freccia { margin-top: auto; padding-top: var(--s2); color: var(--accento); font-size: .9375rem; font-weight: 600; }

/* Illustrazioni per famiglia di prodotto (30/09/2026), in testa alle schede
   di home e Servizi. Disegni nostri, non foto dei produttori: le foto
   ufficiali Apple/Samsung vogliono un'autorizzazione. SVG in pagina, cosi'
   prendono i colori dai token e cambiano da sole col tema scuro. Quando
   arriveranno foto vere andranno nello stesso riquadro. */
.illustrazione {
  display: grid; place-items: center;
  height: 152px;
  margin: calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s3);
  background: var(--accento-tenue);
  border-bottom: 1px solid var(--separatore);
  border-radius: calc(var(--raggio) - 1px) calc(var(--raggio) - 1px) 0 0;
  overflow: hidden;
}
.illustrazione svg { width: min(100%, 240px); height: auto; transition: transform .25s ease; }
a.scheda:hover .illustrazione svg { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .illustrazione svg { transition: none; }
  a.scheda:hover .illustrazione svg { transform: none; }
}
/* Servizi: fila compatta delle cinque famiglie, ognuna porta al listino. */
.griglia-famiglie { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.scheda-famiglia { padding: var(--s4); }
.scheda-famiglia .illustrazione { height: 116px; margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s2); }
.scheda-famiglia .illustrazione svg { width: min(100%, 190px); }
.scheda-famiglia h3 { font-size: 1rem; }
.ill-corpo  { fill: var(--superficie); stroke: var(--testo-2); stroke-width: 2; stroke-linejoin: round; }
.ill-schermo { fill: var(--accento); }
.ill-luce   { fill: #FFFFFF; opacity: .24; }
.ill-riflesso { fill: #FFFFFF; opacity: .10; }
.ill-nero   { fill: #0B1114; }
.ill-foro   { fill: var(--superficie-3); stroke: var(--testo-2); stroke-width: 1.5; }
.ill-ok     { fill: var(--ok); }
.ill-ok-bordo { fill: var(--superficie); stroke: var(--ok); stroke-width: 2; }
.ill-lettera { fill: var(--superficie); font: 700 20px var(--font); }
.ill-matita-bordo { stroke: var(--testo-2); stroke-width: 9; stroke-linecap: round; }
.ill-matita { stroke: var(--superficie); stroke-width: 5.5; stroke-linecap: round; }

.elenco-passi { counter-reset: passo; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.elenco-passi li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--s4); align-items: start; }
.elenco-passi li::before {
  counter-increment: passo; content: counter(passo);
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accento-tenue); color: var(--accento);
  font-size: .875rem; font-weight: 700;
}
.elenco-passi h3 { margin-bottom: var(--s1); }
.elenco-passi p { margin: 0; color: var(--testo-2); font-size: .9375rem; }

/* --- Richiamo finale ----------------------------------------------------- */
.richiamo {
  padding: var(--s7); border-radius: var(--raggio-xl);
  background: var(--accento-tenue); border: 1px solid var(--separatore);
  text-align: center;
}
.richiamo h2 { margin-bottom: var(--s3); }
.richiamo p { color: var(--testo-2); max-width: 52ch; margin-inline: auto; }
.richiamo .gruppo-bottoni { justify-content: center; margin-top: var(--s5); }

/* --- Moduli -------------------------------------------------------------- */
.modulo { display: grid; gap: var(--s5); }
/* Il pulsante di invio si dimensiona sul proprio testo: essendo figlio di una
   griglia, senza questo si stirerebbe per tutta la colonna. Fa eccezione
   .bottone-largo, usato dove la larghezza piena e' voluta (accesso). */
.modulo > button[type="submit"]:not(.bottone-largo) { justify-self: start; }
.campo { display: grid; gap: var(--s2); }
.campo label { font-size: .9375rem; font-weight: 600; }
.campo .aiuto { font-size: .8125rem; color: var(--testo-2); }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], select, textarea {
  width: 100%; min-height: 44px; padding: var(--s3) var(--s4);
  font: inherit; font-size: 1rem; color: var(--testo);
  background: var(--superficie); border: 1px solid var(--separatore);
  border-radius: var(--raggio-s);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
/* Numeri e date nei moduli (Cercami un prodotto, 17/10/2026) come gli altri
   campi. Solo dentro .modulo: le quantita' del listino e del carrello hanno
   il loro stile. */
.modulo input[type="number"], .modulo input[type="date"] {
  width: 100%; min-height: 44px; padding: var(--s3) var(--s4);
  font: inherit; font-size: 1rem; color: var(--testo);
  background: var(--superficie); border: 1px solid var(--separatore);
  border-radius: var(--raggio-s);
}

/* Campo password con il pulsante «mostra» dentro, a destra (sito.js).
   Il pulsante e' largo 44 px come ogni bersaglio toccabile; l'input lascia
   lo spazio perche' il testo non ci finisca sotto. */
.campo-password { position: relative; display: block; }
.campo-password input { padding-right: 52px; }
.mostra-password {
  position: absolute; top: 0; right: 0; width: 44px; height: 100%; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 0 var(--raggio-s) var(--raggio-s) 0;
  color: var(--testo-2); cursor: pointer;
}
.mostra-password:hover { color: var(--testo); }
.mostra-password svg { width: 20px; height: 20px; }
.mostra-password .occhio-chiuso,
.mostra-password[aria-pressed="true"] .occhio-aperto { display: none; }
.mostra-password[aria-pressed="true"] .occhio-chiuso { display: block; }
input::placeholder, textarea::placeholder { color: var(--testo-3); }
input:hover, select:hover, textarea:hover { border-color: var(--testo-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 22%, transparent);
}
select {
  appearance: none; padding-right: var(--s7); cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7780' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s4) center; background-size: 12px 8px;
}

/* L'errore compare accanto al campo che lo genera, mai in una finestra
   modale (writing.md > Best practices). */
.errore { display: none; font-size: .875rem; font-weight: 500; color: #B3261E; }
@media (prefers-color-scheme: dark) { .errore { color: #FFB4AB; } }
.campo[data-errore="si"] .errore { display: block; }
/* Contenitore del solo messaggio generale: fuori dal flusso finche' non
   c'e' un errore, altrimenti lascia un vuoto sopra il pulsante. */
.campo-solo-errore { display: none; }
.campo-solo-errore[data-errore="si"] { display: grid; }
.campo[data-errore="si"] input,
.campo[data-errore="si"] textarea { border-color: #B3261E; }

.esito {
  padding: var(--s4) var(--s5); border-radius: var(--raggio);
  background: var(--ok-tenue); color: var(--ok);
  font-size: .9375rem; font-weight: 500;
}

/* Lo stesso riquadro quando la richiesta non e' partita: stesso posto, stesso
   peso, colore che dice da solo che c'e' qualcosa da rileggere. */
.esito.esito-storto { background: var(--attenzione-tenue); color: var(--attenzione); }

/* --- Listino: barra dei filtri ------------------------------------------- */
.filtri {
  position: sticky; top: 61px; z-index: 20;
  padding-block: var(--s4);
  background: var(--superficie); border-bottom: 1px solid var(--separatore);
}
.filtri-riga { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; }

.campo-ricerca { position: relative; flex: 1 1 300px; min-width: 0; }
.campo-ricerca input { padding-left: 42px; }
.campo-ricerca svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--testo-3); pointer-events: none;
}
.campo-ricerca .pulisci {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: none;
  align-items: center; justify-content: center;
  background: var(--superficie-3); color: var(--testo-2);
  border: 0; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1;
}
.campo-ricerca .pulisci:hover { color: var(--testo); }
.campo-ricerca.ha-testo .pulisci { display: flex; }

.gruppo-filtro { display: grid; gap: var(--s2); }
.gruppo-filtro > span { font-size: .8125rem; font-weight: 600; color: var(--testo-2); }
.gruppo-filtro select { min-width: 160px; }

/* Segmenti: Tutti / Nuovo / Ricondizionato ... */
.segmenti { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--superficie-2); border-radius: 999px; }
.segmenti input { position: absolute; opacity: 0; pointer-events: none; }
.segmenti label {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s4);
  border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--testo-2);
  cursor: pointer; white-space: nowrap; transition: background-color .15s ease, color .15s ease;
}
.segmenti label:hover { color: var(--testo); }
.segmenti input:checked + label { background: var(--superficie); color: var(--testo); box-shadow: var(--ombra-tenue); }
.segmenti input:focus-visible + label { outline: 2px solid var(--accento); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  .segmenti input:checked + label { background: var(--superficie-3); }
}

.interruttore { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: .9375rem; font-weight: 500; cursor: pointer; }
.interruttore input { width: 18px; height: 18px; accent-color: var(--accento); cursor: pointer; }

.conteggio { padding-block: var(--s4); font-size: .9375rem; color: var(--testo-2); }
.conteggio b { color: var(--testo); }

/* --- Listino: tabella ----------------------------------------------------
   Una riga per prodotto, intestazioni di colonna ordinabili al clic
   (lists-and-tables.md > Desktop): "let people click a column heading to
   sort a table view based on that column".                                  */
.tabella-avvolgi { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.listino { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.listino caption { text-align: left; padding-bottom: var(--s3); color: var(--testo-2); font-size: .875rem; }
table.listino th, table.listino td { padding: var(--s3) var(--s4); text-align: left; vertical-align: middle; }
/* Niente intestazione fissa: .tabella-avvolgi ha overflow-x e diventa lei
   stessa il contesto di scorrimento, quindi un thead in position:sticky si
   ancorerebbe al contenitore e finirebbe in mezzo alle righe. A restare in
   vista e' la barra dei filtri, che e' quella che serve davvero. */
table.listino thead th {
  background: var(--superficie-2); border-bottom: 1px solid var(--separatore);
  font-size: .8125rem; font-weight: 680; color: var(--testo-2); white-space: nowrap;
}
table.listino tbody tr { border-bottom: 1px solid var(--separatore); }
table.listino tbody tr:hover { background: var(--superficie-2); }
table.listino td.nome { font-weight: 500; color: var(--testo); min-width: 260px; }
table.listino td.dettagli { color: var(--testo-2); font-size: .875rem; }
table.listino .a-destra { text-align: right; }
.prezzo { font-size: 1rem; font-weight: 680; letter-spacing: -.01em; white-space: nowrap; }

/* Offerte (dal 27/09/2026): etichetta piena nel colore del marchio, cosi'
   non si confonde con le pastiglie di disponibilita', e prezzo normale
   barrato accanto. La parola «Offerta» c'e' sempre: non basta il colore. */
.offerta { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px var(--s2); }
.etichetta-offerta {
  align-self: center; padding: 2px 8px; border-radius: 6px;
  background: var(--accento); color: var(--su-accento);   /* 5.47:1 */
  font-size: .75rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.prezzo-barrato { color: var(--testo-3); font-size: .875rem; font-weight: 500; white-space: nowrap; }
/* Prezzo riservato al cliente (17/10/2026): stessa forma dell'offerta, colori
   rovesciati del testo, cosi' le due etichette non si confondono. Il contrasto
   e' quello di testo e sfondo, in chiaro e in scuro. */
.etichetta-riservato { background: var(--testo); color: var(--superficie); }

/* Novita' rispetto al giorno prima (dal 04/10/2026). Etichette tenui, per
   non confondersi con quella piena dell'offerta; sempre con la parola.
   Contrasti: Nuovo 4.83:1 (scuro 7.32), Tornato 5.39:1 (7.28),
   prezzo sceso 6.14:1 su bianco, 5.67:1 sulla riga alterna (scuro 8.50). */
.novita {
  display: inline-block; vertical-align: 1px; margin-left: var(--s2);
  padding: 1px 7px; border-radius: 6px;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.novita-nuovo   { background: var(--accento-tenue); color: var(--accento); }
.novita-tornato { background: var(--ok-tenue);      color: var(--ok); }
.scheda-prodotto .meta .novita { margin-left: 0; }
.ribasso { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 600; color: var(--ok); white-space: nowrap; }
.scheda-prodotto .ribasso { margin: 0 auto 0 0; }   /* accanto al prezzo, non in fondo alla riga */
.nota-novita { margin-top: var(--s2); font-size: .9375rem; color: var(--testo-2); }
.nota-novita b { color: var(--testo); }
.lavagna-prezzo { text-align: right; }
.lavagna-prezzo .prezzo-barrato { display: block; font-size: .8125rem; line-height: 1.2; }
/* Riga secondaria sotto il nome: grado, batteria, colore, regime IVA. */
.sottotesto { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 500; color: var(--testo-2); }

th.ordinabile { padding: 0; }
th.ordinabile button {
  display: inline-flex; align-items: center; gap: 4px;
  width: 100%; min-height: 44px; padding: var(--s3) var(--s4);
  font: inherit; font-size: .8125rem; font-weight: 680; color: var(--testo-2);
  background: none; border: 0; cursor: pointer; text-align: left;
}
th.ordinabile.a-destra button { justify-content: flex-end; }
th.ordinabile button:hover { color: var(--testo); }
th.ordinabile button .verso { opacity: 0; font-size: .7rem; }
th[aria-sort] button { color: var(--testo); }
th[aria-sort] button .verso { opacity: 1; color: var(--accento); }

/* Schede al posto della tabella sotto i 1024px. La soglia non e' estetica:
   sotto quella larghezza le cinque colonne piu' il comando d'ordine non ci
   stanno e la tabella andrebbe fatta scorrere in orizzontale per ordinare. */
.schede-listino { display: none; }
@media (max-width: 1100px) {
  .tabella-avvolgi { display: none; }
  .schede-listino { display: grid; gap: var(--s3); }
  .scheda-prodotto {
    display: grid; gap: var(--s2); min-width: 0;
    padding: var(--s4); background: var(--superficie);
    border: 1px solid var(--separatore); border-radius: var(--raggio);
  }
  /* Le descrizioni dei Mac sono lunghissime e senza spazi utili dove andare a
     capo: senza questo, il nome esce dalla scheda. */
  .scheda-prodotto .nome {
    font-size: .9375rem; font-weight: 600; line-height: 1.35;
    margin: 0; min-width: 0; overflow-wrap: anywhere;
  }
  /* A due righe di chip la pastiglia piena sembra un errore: raggio piu' corto. */
  .segmenti { border-radius: var(--raggio); }
  .scheda-prodotto .meta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
  .scheda-prodotto .riga-prezzo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--separatore); }
  .filtri { position: static; }
}

/* --- Modelli a fisarmonica (11/10/2026) ----------------------------------
   Il listino mostra i modelli chiusi (iPhone 12, 13 ... Galaxy S25, iPad
   Air...) e un tocco apre le righe. La testa e' un vero <button> con
   aria-expanded: tastiera e lettori di schermo la usano senza aiuti.
   La freccia ruota, ma il numero dei prodotti e il prezzo di partenza
   dicono gia' cosa c'e' dentro senza aprire. */
.testa-gruppo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3);
  width: 100%; min-height: 52px; padding: var(--s3) var(--s4);
  font: inherit; color: var(--testo); text-align: left;
  background: var(--superficie); border: 0; border-radius: 0; cursor: pointer;
}
.testa-gruppo:hover { background: var(--superficie-2); }
.testa-gruppo:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }
.testa-gruppo .freccia {
  width: 18px; height: 18px; flex: 0 0 auto; color: var(--accento);
  transition: transform .15s ease;
}
.testa-gruppo[aria-expanded="true"] .freccia { transform: rotate(90deg); }
.nome-gruppo { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; }
.testa-gruppo .novita { margin-left: 0; }
.info-gruppo { margin-left: auto; font-size: .875rem; font-weight: 500; color: var(--testo-2); white-space: nowrap; }
.apri-tutti { margin-right: auto; }

/* Tabella: un <tbody> per la testa e uno per le righe di ogni modello. */
table.listino tbody.testa th { padding: 0; }
table.listino tbody.testa tr:hover { background: none; }
table.listino tbody.righe-gruppo tr:last-child { border-bottom: 1px solid var(--separatore); }
table.listino tbody.righe-gruppo td:first-child { padding-left: calc(var(--s4) + 18px + var(--s3)); }
table.listino tbody.sezione-listino tr { border-bottom: 0; }
table.listino tbody.sezione-listino tr:hover { background: none; }
.sezione-listino, table.listino tbody.sezione-listino th {
  font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--testo-2);
}
table.listino tbody.sezione-listino th { padding: var(--s6) var(--s4) var(--s2); border-bottom: 2px solid var(--separatore); }
table.listino tbody.sezione-listino:first-of-type th { padding-top: var(--s4); }

/* Schede (telefono e tablet): ogni modello e' un riquadro; aperto, la testa
   resta in cima mentre si scorre, cosi' si chiude senza tornare su. */
.schede-listino h2.sezione-listino { margin: var(--s5) 0 0; }
.schede-listino h2.sezione-listino:first-child { margin-top: 0; }
.gruppo-schede { background: var(--superficie-2); border-radius: var(--raggio); }
.gruppo-schede > .testa-gruppo {
  position: sticky; top: var(--alto-intestazione, 61px); z-index: 5;
  background: var(--superficie-2); border-radius: var(--raggio);
}
.gruppo-schede > .testa-gruppo:hover { background: var(--superficie-3); }
.corpo-gruppo { display: grid; gap: var(--s3); padding: 0 var(--s3) var(--s3); }

/* --- Stato vuoto e caricamento ------------------------------------------- */
.vuoto { padding: var(--s8) var(--s5); text-align: center; }
.vuoto h3 { margin-bottom: var(--s2); }
.vuoto p { color: var(--testo-2); max-width: 42ch; margin-inline: auto; }

.scheletro { display: grid; gap: var(--s2); padding-block: var(--s4); }
.scheletro div {
  height: 44px; border-radius: var(--raggio-s);
  background: linear-gradient(90deg, var(--superficie-2) 25%, var(--superficie-3) 37%, var(--superficie-2) 63%);
  background-size: 400% 100%; animation: scorri 1.4s ease infinite;
}
@keyframes scorri { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* --- Pagina di accesso --------------------------------------------------- */
.pagina-accesso { display: grid; place-items: center; min-height: calc(100vh - 61px); padding-block: var(--s7); }
.riquadro-accesso {
  width: 100%; max-width: 420px; padding: var(--s6);
  background: var(--superficie); border: 1px solid var(--separatore);
  border-radius: var(--raggio-xl); box-shadow: var(--ombra);
}
.riquadro-accesso h1 { font-size: 1.625rem; margin-bottom: var(--s2); }
.riquadro-accesso > p { color: var(--testo-2); font-size: .9375rem; }
.riquadro-accesso .marchio { justify-content: center; width: 100%; margin-bottom: var(--s5); }
.riquadro-accesso .marchio img { height: 34px; }

.nota {
  padding: var(--s3) var(--s4); border-radius: var(--raggio-s);
  background: var(--superficie-2); color: var(--testo-2);
  font-size: .8125rem; line-height: 1.5;
}

/* --- Pie' di pagina ------------------------------------------------------ */
.pie {
  margin-top: var(--s8); padding-block: var(--s7) var(--s5);
  background: var(--superficie-2); border-top: 1px solid var(--separatore);
  font-size: .9375rem;
}
.pie-griglia { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: var(--s6); }
.pie h4 { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-2); margin-bottom: var(--s3); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; }
/* Un link alto 17px sta sotto il bersaglio minimo: il riempimento verticale
   lo porta a 40px senza cambiare l'aspetto del testo. */
.pie a { display: inline-flex; align-items: center; min-height: 40px; color: var(--testo-2); text-decoration: none; }
.pie a:hover { color: var(--accento); text-decoration: underline; }
.pie .marchio img { height: 28px; }
.pie p { color: var(--testo-2); font-size: .875rem; max-width: 34ch; }
.pie-fondo {
  display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between;
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--separatore);
  font-size: .8125rem; color: var(--testo-2);
}
@media (max-width: 700px) {
  .pie-griglia { grid-template-columns: 1fr; gap: var(--s5); }
}

/* --- Stampa -------------------------------------------------------------- */
@media print {
  .intestazione, .filtri, .pie, .gruppo-bottoni, .schede-listino { display: none !important; }
  .tabella-avvolgi { display: block !important; overflow: visible; }
  /* Su carta escono tutti i modelli, aperti o no. */
  table.listino tbody.righe-gruppo[hidden] { display: table-row-group !important; }
  .testa-gruppo .freccia, .apri-tutti { display: none !important; }
  body { font-size: 10pt; color: #000; background: #fff; }
}

/* ==========================================================================
   Area cliente: zona utente, carrello, ordini
   ========================================================================== */

/* --- Zona utente nell'intestazione --------------------------------------- */
.zona-utente { display: flex; align-items: center; gap: var(--s2); margin-left: var(--s2); }

.carrello-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--raggio-s);
  color: var(--testo-2); text-decoration: none;
}
.carrello-link:hover { color: var(--testo); background: var(--superficie-2); }
.carrello-link svg { width: 21px; height: 21px; }

/* Il numero sul pallino e' un di piu': il conteggio in parole sta in
   #etichetta-carrello, che i lettori di schermo leggono al posto dell'icona. */
.pallino {
  position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
  background: var(--accento); color: var(--su-accento);
  border: 2px solid var(--superficie); border-radius: 999px;
  font-size: .6875rem; font-weight: 700; line-height: 1;
}

.menu-utente { position: relative; }
.apri-account {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; max-width: 220px; padding: 0 var(--s3);
  font: inherit; font-size: .875rem; font-weight: 600; color: var(--testo);
  background: none; border: 1px solid var(--separatore); border-radius: 999px;
  cursor: pointer;
}
.apri-account:hover { background: var(--superficie-2); }
.apri-account svg { width: 11px; height: 8px; flex: 0 0 auto; color: var(--testo-2); }
.apri-account .sigla {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accento); color: var(--su-accento);
  font-size: .6875rem; font-weight: 700; letter-spacing: .02em;
}
.apri-account .nome-azienda { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1080px) { .apri-account .nome-azienda { display: none; } }

.menu-a-tendina {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 230px; padding: var(--s2);
  background: var(--superficie); border: 1px solid var(--separatore);
  border-radius: var(--raggio); box-shadow: var(--ombra);
}
.menu-intestazione {
  margin: 0 0 var(--s2); padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--separatore);
  font-size: .875rem; font-weight: 600; line-height: 1.3;
}
.menu-intestazione span {
  display: block; margin-top: 2px;
  font-size: .8125rem; font-weight: 400; color: var(--testo-2);
  overflow: hidden; text-overflow: ellipsis;
}
.menu-a-tendina a, .menu-a-tendina button {
  display: flex; align-items: center; width: 100%; min-height: 40px;
  padding: 0 var(--s3); border: 0; border-radius: var(--raggio-s);
  font: inherit; font-size: .9375rem; color: var(--testo);
  background: none; text-align: left; text-decoration: none; cursor: pointer;
}
.menu-a-tendina a:hover, .menu-a-tendina button:hover { background: var(--superficie-2); color: var(--testo); }
.menu-a-tendina button { color: var(--accento); font-weight: 600; }

@media (max-width: 860px) {
  /* Su schermo stretto la zona utente esce dal menu a scomparsa e resta
     sempre in vista: il carrello e' il comando piu' usato del portale. */
  .barra > .zona-utente { position: static; margin-left: auto; }
  .navigazione .zona-utente { display: none; }
  .menu-a-tendina { right: 0; }
  .apri-account { padding: 0 var(--s2); }
}

/* --- Pannello "solo per clienti" in copertina ---------------------------- */
.riservato { padding: var(--s6) var(--s5); text-align: center; }
.riservato .lucchetto {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 auto var(--s4);
  background: var(--accento-tenue); color: var(--accento); border-radius: 50%;
}
.riservato .lucchetto svg { width: 20px; height: 20px; }
.riservato h3 { margin-bottom: var(--s2); }
.riservato p { color: var(--testo-2); font-size: .9375rem; max-width: 34ch; margin-inline: auto; }
.riservato .gruppo-bottoni { justify-content: center; margin-top: var(--s5); }

/* --- Quantita' e aggiunta al carrello ------------------------------------ */
.aggiungi-riga { display: flex; align-items: center; gap: var(--s2); justify-content: flex-end; }

.quantita {
  display: inline-flex; align-items: center;
  border: 1px solid var(--separatore); border-radius: var(--raggio-s);
  background: var(--superficie); overflow: hidden;
}
.quantita button {
  width: 30px; height: 40px; flex: 0 0 auto;
  font: inherit; font-size: 1.125rem; line-height: 1; color: var(--testo-2);
  background: none; border: 0; cursor: pointer;
}
.quantita button:hover:not(:disabled) { background: var(--superficie-2); color: var(--testo); }
.quantita button:disabled { opacity: .4; cursor: default; }
.quantita input {
  width: 40px; min-height: 40px; padding: 0; flex: 0 0 auto;
  text-align: center; font-size: .9375rem; font-weight: 600;
  border: 0; border-inline: 1px solid var(--separatore); border-radius: 0;
  -moz-appearance: textfield;
}
.quantita input::-webkit-outer-spin-button,
.quantita input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantita input:focus { outline: 2px solid var(--accento); outline-offset: -2px; box-shadow: none; }

.bottone-aggiungi {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 var(--s3);
  font: inherit; font-size: .875rem; font-weight: 600;
  color: var(--su-accento); background: var(--accento);
  border: 0; border-radius: var(--raggio-s); cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease;
}
.bottone-aggiungi:hover { background: var(--accento-forte); }
/* Conferma breve sul posto: un riscontro dentro l'interfaccia, non un avviso
   modale (feedback.md). */
.bottone-aggiungi.fatto { background: var(--ok); }

table.listino td.azione { width: 1%; white-space: nowrap; }
table.listino td, table.listino thead th { padding-inline: var(--s3); }

@media (max-width: 1100px) {
  .scheda-prodotto .aggiungi-riga { justify-content: space-between; padding-top: var(--s2); }
  .scheda-prodotto .bottone-aggiungi { flex: 1 1 auto; }
}

/* --- Pagina carrello ------------------------------------------------------ */
.carrello-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s6); align-items: start; }
@media (max-width: 900px) { .carrello-griglia { grid-template-columns: 1fr; } }

.riga-carrello {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: var(--s4); align-items: center;
  padding: var(--s4) 0; border-bottom: 1px solid var(--separatore);
}
.riga-carrello .titolo { font-size: .9375rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.riga-carrello .subtotale { font-size: 1rem; font-weight: 680; white-space: nowrap; min-width: 82px; text-align: right; }
.riga-carrello .togli {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 1rem; color: var(--testo-2);
  background: none; border: 0; border-radius: var(--raggio-s); cursor: pointer;
}
.riga-carrello .togli:hover { color: #B3261E; background: var(--superficie-2); }
@media (prefers-color-scheme: dark) { .riga-carrello .togli:hover { color: #FFB4AB; } }

@media (max-width: 620px) {
  .riga-carrello { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s3); }
  .riga-carrello .titolo { grid-column: 1 / -1; }
  .riga-carrello .subtotale { text-align: right; }
}

.riepilogo {
  position: sticky; top: 76px;
  padding: var(--s5); background: var(--superficie-2);
  border: 1px solid var(--separatore); border-radius: var(--raggio);
}
.riepilogo h2 { font-size: 1.1875rem; margin-bottom: var(--s4); }
.riepilogo dl { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4); margin: 0 0 var(--s4); font-size: .9375rem; }
.riepilogo dt { color: var(--testo-2); }
.riepilogo dd { margin: 0; text-align: right; font-weight: 600; }
.riepilogo dt.totale, .riepilogo dd.totale {
  padding-top: var(--s3); margin-top: var(--s1);
  border-top: 1px solid var(--separatore); font-size: 1.0625rem;
}
.riepilogo dd.totale { font-weight: 700; }
@media (max-width: 900px) { .riepilogo { position: static; } }

/* --- Ordini e account ----------------------------------------------------- */
.ordine {
  padding: var(--s5); margin-bottom: var(--s4);
  background: var(--superficie); border: 1px solid var(--separatore);
  border-radius: var(--raggio); box-shadow: var(--ombra-tenue);
}
.ordine-testata {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline;
  justify-content: space-between; padding-bottom: var(--s3);
  border-bottom: 1px solid var(--separatore); margin-bottom: var(--s3);
}
.ordine-numero { font-size: 1rem; font-weight: 700; letter-spacing: .01em; }
.ordine-righe { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: .9375rem; }
.ordine-righe li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); }
.ordine-righe .conto { color: var(--testo-2); white-space: nowrap; }
.ordine-totale {
  display: flex; justify-content: space-between; gap: var(--s3);
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--separatore); font-weight: 700;
}

/* Importi e bonifico dell'ordine (dal 04/10/2026). Le righe sopra il totale
   (merce, spedizione, IVA) sono secondarie; il riquadro del bonifico ha i
   dati da copiare, ognuno con il suo pulsante. */
.ordine-conto { display: grid; gap: 2px; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--separatore); font-size: .9375rem; color: var(--testo-2); }
.ordine-conto > div { display: flex; justify-content: space-between; gap: var(--s3); }
.ordine-conto + .ordine-totale { margin-top: var(--s2); }
.bonifico {
  margin-top: var(--s4); padding: var(--s4);
  background: var(--superficie-2); border-radius: var(--raggio-s);
  font-size: .9375rem;
}
.bonifico h3 { margin: 0 0 var(--s2); font-size: 1rem; }
.bonifico dl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: center; margin: 0; }
.bonifico dt { color: var(--testo-2); }
.bonifico dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.bonifico .copia { min-height: 32px; padding: 2px 10px; font-size: .8125rem; }
.bonifico p { margin: var(--s3) 0 0; color: var(--testo-2); }

.dati-cliente { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s5); margin: 0; }
.dati-cliente > div { display: grid; gap: 2px; }
.dati-cliente dt { font-size: .8125rem; font-weight: 600; color: var(--testo-2); }
.dati-cliente dd { margin: 0; font-size: 1rem; }

/* --- .segmenti usato come navigazione dell'area cliente -------------------
   Stessa forma dei filtri del listino, ma con veri collegamenti: la pagina
   corrente e' marcata con aria-current, non con il solo colore. */
.segmenti a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4);
  border-radius: 999px; font-size: .875rem; font-weight: 600;
  color: var(--testo-2); text-decoration: none; white-space: nowrap;
}
.segmenti a:hover { color: var(--testo); }
.segmenti a[aria-current="page"] {
  background: var(--superficie); color: var(--testo); box-shadow: var(--ombra-tenue);
}
@media (prefers-color-scheme: dark) {
  .segmenti a[aria-current="page"] { background: var(--superficie-3); }
}

/* ==========================================================================
   Preferiti, fascia di prezzo, esportazione, indirizzi
   ========================================================================== */

/* --- Stella dei preferiti sulla riga -------------------------------------
   aria-pressed dice lo stato: la stella piena da sola non basterebbe a chi
   usa un lettore di schermo. */
.preferito {
  width: 36px; height: 40px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--raggio-s);
  color: var(--testo-3); cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.preferito svg { width: 19px; height: 19px; }
.preferito:hover { color: var(--accento); background: var(--superficie-2); }
.preferito.attivo { color: var(--accento); }
.preferito.attivo svg { fill: currentColor; }

/* --- Fascia di prezzo ----------------------------------------------------- */
.fascia-prezzo { display: flex; align-items: center; gap: var(--s2); }
.fascia-prezzo input { width: 84px; min-width: 0; }
.fascia-prezzo span { color: var(--testo-2); }

/* --- Riga del conteggio con l'esportazione -------------------------------- */
.riga-conteggio {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  align-items: center; justify-content: space-between;
}
.riga-conteggio .conteggio { margin: 0; }
.riga-conteggio .bottone { min-height: 40px; padding-inline: var(--s4); font-size: .9375rem; }
.gruppo-scarica { display: flex; flex-wrap: wrap; gap: var(--s2); }
.gruppo-scarica .bottone svg { width: 17px; height: 17px; flex: 0 0 auto; }
.gruppo-scarica .bottone:disabled { opacity: .6; cursor: progress; }

/* --- Indirizzi ------------------------------------------------------------ */
.elenco-indirizzi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--s4);
}
.indirizzo {
  display: grid; gap: var(--s2); align-content: start;
  padding: var(--s5); background: var(--superficie);
  border: 1px solid var(--separatore); border-radius: var(--raggio);
}
.indirizzo h3 { margin: 0; font-size: 1rem; }
.indirizzo address { font-style: normal; font-size: .9375rem; color: var(--testo-2); line-height: 1.5; }
.indirizzo .etichette { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* Dal 30/09/2026 il cliente gestisce da solo gli indirizzi di consegna. */
.indirizzo .azioni-indirizzo { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.indirizzo .gestito { font-size: .8125rem; color: var(--testo-3); margin: var(--s2) 0 0; }
.riga-campi { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.spunta { display: flex; gap: var(--s3); align-items: center; font-size: .9375rem; min-height: 44px; cursor: pointer; }
.spunta input { width: 20px; height: 20px; accent-color: var(--accento); }
.pulsanti-modulo { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Scelta dell'indirizzo di consegna nel carrello: ogni voce e' un bersaglio
   pieno, non solo il pallino del radio. */
.scelta-indirizzo { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.scelta-indirizzo label {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s3);
  align-items: start; padding: var(--s3) var(--s4);
  border: 1px solid var(--separatore); border-radius: var(--raggio-s);
  cursor: pointer; font-size: .9375rem;
}
.scelta-indirizzo label:hover { border-color: var(--testo-3); }
.scelta-indirizzo input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accento); }
.scelta-indirizzo input:checked + span { font-weight: 600; }
.scelta-indirizzo label:has(input:checked) {
  border-color: var(--accento); background: var(--accento-tenue);
}
.scelta-indirizzo .riga-indirizzo { display: block; font-weight: 400; color: var(--testo-2); font-size: .875rem; }

/* --- Cruscotto dell'account ----------------------------------------------- */
.cruscotto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s4); }
.tabella-semplice { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabella-semplice th {
  text-align: left; padding: var(--s2) var(--s3) var(--s2) 0;
  font-size: .8125rem; font-weight: 680; color: var(--testo-2);
  border-bottom: 1px solid var(--separatore);
}
.tabella-semplice td { padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--separatore); }
.tabella-semplice tr:last-child td { border-bottom: 0; }
.tabella-semplice .a-destra { text-align: right; padding-right: 0; }

/* Con quattro icone piu' la pastiglia l'intestazione si affolla: su schermo
   stretto l'esportazione resta comunque nella pagina del listino. */
@media (max-width: 560px) {
  #scarica-link { display: none; }
}

/* --- Pagine legali: privacy e condizioni di vendita -----------------------
   Testo lungo da leggere, non da scorrere: una colonna sola a misura di
   lettura, titoli di sezione numerati e un indice in testa per saltare al
   punto che interessa (typography.md > legibility). */
.testo-legale { max-width: var(--larghezza-testo); }
.testo-legale h2 {
  font-size: 1.3125rem; font-weight: 650; letter-spacing: -.01em;
  margin: var(--s7) 0 var(--s3); scroll-margin-top: 84px;
}
.testo-legale h3 { font-size: 1.0625rem; margin: var(--s5) 0 var(--s2); }
.testo-legale ul, .testo-legale ol { padding-left: 1.25rem; margin: 0 0 var(--s4); }
.testo-legale li { margin-bottom: var(--s2); }
/* Non .tabella-avvolgi: quella sparisce sotto i 1100px per lasciare posto
   alle schede del listino. */
.tabella-finalita { margin-bottom: var(--s4); }
.testo-legale .tabella-semplice td { vertical-align: top; }
/* Tre colonne di testo non stanno su un telefono: ogni riga diventa un
   blocco con l'etichetta della colonna sopra il valore. */
@media (max-width: 640px) {
  .tabella-finalita thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabella-finalita table, .tabella-finalita tbody, .tabella-finalita tr, .tabella-finalita td { display: block; }
  .tabella-finalita tr { padding-block: var(--s3); border-bottom: 1px solid var(--separatore); }
  .tabella-finalita tr:last-child { border-bottom: 0; }
  .tabella-finalita td { padding: var(--s1) 0; border-bottom: 0; }
  .tabella-finalita td::before {
    content: attr(data-etichetta); display: block;
    font-size: .75rem; font-weight: 680; color: var(--testo-2);
  }
  .tabella-finalita td:first-child { font-weight: 600; }
}
.aggiornato { font-size: .9375rem; color: var(--testo-2); }

.indice {
  margin: var(--s5) 0 0; padding: var(--s4) var(--s5);
  background: var(--superficie-2); border-radius: var(--raggio);
}
.indice h2 { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-2); margin: 0 0 var(--s2); }
.indice ol { margin: 0; padding-left: 1.25rem; columns: 2 16rem; column-gap: var(--s6); }
.indice li { margin: 0; break-inside: avoid; }
.indice a { display: inline-flex; min-height: 36px; align-items: center; }

/* Bozza: il riquadro resta visibile anche online, di proposito. Se la
   pagina venisse pubblicata senza revisione, chi la legge sa che non e'
   il testo definitivo. */
.avviso-bozza {
  margin-top: var(--s5); padding: var(--s4) var(--s5); border-radius: var(--raggio);
  background: var(--attenzione-tenue); color: var(--attenzione);
  font-size: .9375rem; font-weight: 500; max-width: var(--larghezza-testo);
}
.avviso-bozza p { margin: 0; }
.avviso-bozza p + p { margin-top: var(--s2); }
/* I dati ancora da decidere: evidenziati come parola, non solo come colore. */
mark.da-completare {
  background: var(--attenzione-tenue); color: var(--attenzione);
  padding: 0 .3em; border-radius: 4px; font-weight: 600;
}

/* --- Accettazione delle condizioni nel carrello --------------------------- */
.campo .accetta {
  display: flex; align-items: flex-start; gap: var(--s3);
  min-height: 44px; padding-block: var(--s2);
  font-size: .875rem; font-weight: 400; line-height: 1.45; cursor: pointer;
}
.accetta input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--accento); cursor: pointer; }