/* ============================================================================
   DIMOSTRAZIONE DEL CONFIGURATORE — foglio unico, autonomo.

   I VALORI vengono dalla direzione «La materia unica» di Showroom AI (palette
   «blu notte e gesso», approvata il 13/08/2026) e sono COPIATI qui, non
   importati: la dimostrazione non deve dipendere da un file di un altro
   progetto, altrimenti il giorno che quello si muove questa si rompe senza che
   nessuno l'abbia toccata. Sono valori, non logica: copiarli non crea due
   verità, crea una fotografia.

   QUATTRO COSE DA SAPERE PRIMA DI TOCCARLO

   1. LO SCELTO SI VEDE A COLPO D'OCCHIO. Prima lo scelto si riconosceva solo
      perché «s'incassava» nel gesso, e su un campo chiaro la differenza quasi
      non si vedeva. Ora ha un filo blu notte e la spunta; il rilievo resta, più
      leggero, a dire «questo si tocca». [scelta del titolare, 09/10/2026]
   2. MATERIA UNICA. Il campo e le superfici sono lo stesso gesso: si separano
      per rilievo, per un filo e per aria, non con riquadri bianchi.
   3. L'ABITO NON SI RIMPICCIOLISCE. Sta fermo e grande (sul telefono in alto,
      sul largo a sinistra); a scorrere sono le scelte, con la pagina. Prima la
      regola era «una schermata sola», e ai passi con molte scelte l'abito
      scendeva a un francobollo. [scelta del titolare, 09/10/2026]
   4. IN FONDO C'È SEMPRE LA BARRA: totale, Indietro, Avanti. Non si scorre mai
      per cercare il pulsante.
   ========================================================================== */

@font-face { font-family: 'Satoshi'; src: url('font/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('font/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('font/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* materia */
  --campo: #EFEDE8;          /* il gesso: campo e superficie sono la stessa cosa */
  --campo-luce: #F7F6F2;     /* il gesso dove batte la luce: il fondo del palco */
  --testo: #232730;          /* 12,78:1 sul campo */
  --testo-2: #585D68;        /* secondario tinto dal campo, 5,64:1 */
  --azione: #1F2A3D;         /* il blu notte: appare solo dove dà qualcosa */
  --azione-hover: #2C3B55;
  --testo-su-azione: #EFEDE8;
  --errore: #8A3B2E;         /* terra: l'errore, caldo come i neutri */
  --bordo: rgba(35, 39, 48, 0.12);
  --bordo-controllo: #79808C;
  --disabilitato-fondo: #E2DFD7;
  --disabilitato-testo: #7C7A70;
  --azione-velo: color-mix(in srgb, #1F2A3D 7%, #EFEDE8);

  /* tipografia: una famiglia, tre pesi */
  --font: 'Satoshi', -apple-system, 'Helvetica Neue', sans-serif;
  --peso-testo: 400; --peso-medio: 500; --peso-forte: 700;
  --t-h1: clamp(1.5rem, 3vw, 1.875rem);
  --t-h2: 1.375rem;
  --t-h3: 1.125rem;
  --t-corpo: 1rem;
  --t-nota: 0.875rem;
  --t-etichetta: 0.75rem;

  /* IL RILIEVO SARTORIALE: una sola luce da nord-ovest, ombra di gesso
     bruciato a sud-est. Più leggero di prima: ora non porta più da solo il
     segno della scelta, dice solo «questo si tocca». */
  --luce-no: rgba(255, 255, 253, 0.85);
  --ombra-se: rgba(140, 130, 104, 0.24);
  --rilievo: -6px -6px 14px var(--luce-no), 7px 8px 18px var(--ombra-se);
  --rilievo-lieve: -3px -3px 8px var(--luce-no), 4px 4px 10px var(--ombra-se);
  /* Il filo dello scelto: dentro la sagoma, così non sposta niente. */
  --filo-scelto: inset 0 0 0 2px var(--azione);

  /* misure */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-24: 96px;
  --raggio: 10px;
  --bersaglio-min: 44px;     /* il dito, non il puntatore */
  --h-tappe: 3.25rem;        /* la barra dei passi: anche il palco si ferma sotto di lei */
  --h-testa: 3.5rem;         /* la testata, da tablet in su: la foto si misura sotto di lei */
  /* La foto sul telefono. In `svh` e non `dvh`: `dvh` segue la barra dell'indirizzo, che
     sul telefono compare e scompare mentre si scorre, e la foto cambiava misura sotto il
     dito (sull'iPhone si rimpiccioliva e restava piccola, 13/10/2026). `svh` e' l'altezza
     con la barra visibile: non cambia mai. Vale per tutti i `vh` di questo foglio. */
  --palco-alto: clamp(15rem, 48svh, 34rem);
  --margine: var(--s-4);
  --dur-feedback: 160ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--campo);
  color: var(--testo);
  font-family: var(--font);
  font-size: var(--t-corpo);
  font-weight: var(--peso-testo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
h1, h3 { margin: 0; }
svg { display: block; inline-size: 1em; block-size: 1em; flex: none; }

.vt-vuoto {
  max-inline-size: 46ch;
  margin: var(--s-24) auto;
  padding-inline: var(--s-6);
}
.vt-vuoto h1 { font-size: var(--t-h1); font-weight: var(--peso-forte); letter-spacing: -0.015em; }
.vt-vuoto p { color: var(--testo-2); }

.vt-occhiello {
  display: block;
  margin: 0;
  font-size: var(--t-etichetta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--testo-2);
  font-weight: var(--peso-medio);
}

/* ---------- il bottone ---------------------------------------------------- */
/* Un bottone è un bottone anche quando è un collegamento: niente
   sottolineatura sopra un pieno scuro. */
.vt-bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--bersaglio-min);
  padding: var(--s-2) var(--s-6);
  border: 0;
  border-radius: var(--raggio);
  background: transparent;
  font-family: inherit;
  font-size: var(--t-corpo);
  font-weight: var(--peso-medio);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--testo);
  cursor: pointer;
  transition: background-color var(--dur-feedback) var(--ease), box-shadow var(--dur-feedback) var(--ease), transform var(--dur-feedback) var(--ease);
}
.vt-bottone:active { transform: scale(0.97); }
.vt-bottone--primo { background: var(--azione); color: var(--testo-su-azione); font-weight: var(--peso-forte); }
.vt-bottone--primo:hover { background: var(--azione-hover); }
.vt-bottone--secondo { box-shadow: var(--rilievo-lieve), inset 0 0 0 1px var(--bordo); }
.vt-bottone--secondo:hover { box-shadow: var(--rilievo), inset 0 0 0 1px var(--bordo); }
.vt-bottone--icona { inline-size: var(--bersaglio-min); padding: 0; font-size: 1.125rem; }
.vt-bottone--terzo {
  min-height: 40px;
  padding: var(--s-1) var(--s-4);
  font-size: var(--t-nota);
  box-shadow: var(--rilievo-lieve), inset 0 0 0 1px var(--bordo);
}
.vt-bottone--terzo:hover { box-shadow: var(--rilievo), inset 0 0 0 1px var(--bordo); }

/* La spunta dello scelto. Nei gettoni sta in fila col testo; nelle carte e nei
   campioni è un bollino nell'angolo. */
.vt-spunta {
  display: inline-grid;
  place-items: center;
  font-size: 0.875rem;
  color: var(--azione);
}

/* ---------- testata ------------------------------------------------------- */

.vt-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--margine);
}
.vt-insegna {
  font-weight: var(--peso-forte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: var(--t-nota);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Sul telefono l'insegna spaziata non ci stava accanto all'etichetta della
   dimostrazione e finiva in «CONFIGURATORE D'A…». */
@media (max-width: 420px) {
  .vt-insegna { letter-spacing: 0.08em; font-size: 0.8125rem; }
}
.vt-demo {
  flex: none;
  font-size: var(--t-etichetta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-2);
  border: 1px dashed var(--bordo-controllo);   /* il tratteggio è la lingua del non-vero */
  border-radius: var(--raggio);
  padding: 2px var(--s-2);
}

/* ---------- la barra dei passi -------------------------------------------- */

/* Al posto di nove trattini muti: i passi coi loro nomi, raggruppati per capo.
   Quello corrente è pieno, quelli fatti hanno la spunta, tutti si toccano.
   Sul telefono la barra scorre di lato (il corrente lo tiene al centro il JS)
   e resta ferma in cima mentre le scelte scorrono. */
.vt-tappe {
  position: sticky;
  top: 0;
  z-index: 5;
  block-size: var(--h-tappe);
  display: flex;
  align-items: center;
  background: var(--campo);
  border-bottom: 1px solid var(--bordo);
}
.vt-tappe ol {
  display: flex;
  gap: var(--s-2);
  inline-size: 100%;
  margin: 0;
  padding: 0 var(--margine);
  overflow-x: auto;
  scrollbar-width: none;
}
.vt-tappe ol::-webkit-scrollbar { display: none; }
/* Dove la barra continua fuori dallo schermo, sfuma e mostra una freccia. */
.vt-tappe--sx ol { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3rem); mask-image: linear-gradient(to right, transparent 0, #000 3rem); }
.vt-tappe--dx ol { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 3rem); mask-image: linear-gradient(to left, transparent 0, #000 3rem); }
.vt-tappe--sx.vt-tappe--dx ol {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
}
.vt-tappe-freccia {
  position: absolute;
  inset-block: 0;
  z-index: 1;
  display: none;
  place-items: center;
  inline-size: var(--bersaglio-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--testo);
  font-size: 1rem;
  cursor: pointer;
}
.vt-tappe-freccia svg {
  box-sizing: content-box;
  padding: 6px;
  border-radius: 50%;
  background: var(--campo);
  box-shadow: var(--rilievo-lieve), inset 0 0 0 1px var(--bordo);
}
.vt-tappe-freccia:hover svg { box-shadow: var(--rilievo), inset 0 0 0 1px var(--bordo-controllo); }
.vt-tappe-freccia--sx { inset-inline-start: 0; }
.vt-tappe-freccia--dx { inset-inline-end: 0; }
.vt-tappe--sx .vt-tappe-freccia--sx,
.vt-tappe--dx .vt-tappe-freccia--dx { display: grid; }
.vt-tappe li { flex: none; }
.vt-tappa {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--bersaglio-min);
  padding: 0 var(--s-4) 0 var(--s-2);
  border-radius: 999px;
  font-size: var(--t-nota);
  font-weight: var(--peso-medio);
  color: var(--testo-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-feedback) var(--ease), color var(--dur-feedback) var(--ease);
}
.vt-tappa:hover { background: var(--azione-velo); color: var(--testo); }
.vt-tappa-num {
  display: inline-grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  font-size: var(--t-etichetta);
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--bordo-controllo);
}
.vt-tappa--fatta { color: var(--testo); }
.vt-tappa--fatta .vt-tappa-num { box-shadow: none; background: var(--azione-velo); color: var(--azione); font-size: 0.875rem; }
.vt-tappa--qui,
.vt-tappa--qui:hover { background: var(--azione); color: var(--testo-su-azione); }
.vt-tappa--qui .vt-tappa-num { box-shadow: inset 0 0 0 1px rgba(239, 237, 232, 0.5); }

/* ---------- l'impianto: telefono prima ------------------------------------ */

.vt-corpo { display: flex; flex-direction: column; }

/* L'abito: fermo in alto, sotto la barra dei passi, mentre le scelte gli
   scorrono sotto. Il fondo è pieno perché le scelte ci passano dietro.
   LA FOTO È LA PROTAGONISTA: metà del telefono, anche al riepilogo. È lei che
   vende l'abito; le scelte possono scorrere. [scelta del titolare, 09/10/2026]
   E RESTA GRANDE ANCHE SCORRENDO: per un'ora si è raccolta a un terzo per
   lasciare posto alle scelte, e il titolare l'ha tolto. Il prezzo si paga sui
   telefoni bassi (iPhone SE): le scelte hanno meno posto e si scorre di più. */
.vt-palco {
  position: sticky;
  top: var(--h-tappe);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  block-size: var(--palco-alto);
  padding: var(--s-3) var(--margine) var(--s-2);
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, var(--campo-luce) 0%, transparent 100%),
    var(--campo);
  /* Una sfumatura sotto il palco: le scelte che gli passano dietro non vengono
     tagliate di netto, spariscono. */
  box-shadow: 0 10px 12px -10px rgba(140, 130, 104, 0.35);
}

.vt-didascalia { display: none; margin: 0; text-align: center; }
.vt-didascalia b { display: block; font-weight: var(--peso-forte); }
.vt-didascalia span { font-size: var(--t-nota); color: var(--testo-2); }

.vt-piede {
  position: relative;
  z-index: 1;
  padding: var(--s-5) var(--margine) 0;
  container-type: inline-size;
}


/* ---------- il capo, e la sua tintura ------------------------------------

   IL CAPO OCCUPA LO SPAZIO CHE C'E': è il palco a dargli l'altezza e la
   fotografia ci si adatta dentro (`contain`).

   LA TINTURA. La fotografia e' un capo in panno avorio grezzo, ritagliato, in
   un PNG/WebP con l'alfa. Sopra ci si MOLTIPLICA il colore del tessuto scelto —
   o la macro della stoffa, dove c'e' — e il moltiplicare conserva la
   luminosita' di sotto: pieghe, cadute e ombre restano quelle vere della
   fotografia, cambia solo la tinta del panno. E' il motivo per cui il capo
   dev'essere fotografato CHIARO: da chiaro si va verso qualunque colore, da
   scuro non si torna indietro.

   La maschera e' lo stesso file della fotografia: `mask-image` usa l'alfa, e
   `contain` centrato le fa combaciare con `object-fit: contain` dell'immagine —
   stessa scatola, stessa proporzione, stesso centro.

   `isolation: isolate` tiene il moltiplicare DENTRO questa figura. Senza, il
   capo tingerebbe anche il gesso della pagina. */
.vt-capo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  /* `flex: 1 1 0` e non `auto`: con `auto` la base e' il contenuto, e il
     contenuto qui e' una fotografia da 1200px — cresceva oltre il palco. Con
     base zero prende ESATTAMENTE lo spazio che avanza, ne' un pixel di piu'. */
  flex: 1 1 0;
  min-block-size: 0;
  min-inline-size: 0;
  overflow: hidden;
}

/* GLI STRATI. L'abito non e' una fotografia sola: ogni pezzo e' uno strato
   (camicia, pantalone, gilet, giacca, cravatta, scarpe…), un'immagine in panno
   avorio grande quanto le altre e allineata al pixel. Si impilano tutti nella
   stessa scatola — stessa proporzione, stesso centro, `contain` — e ognuno si
   tinge col suo tessuto con la ricetta di sempre, qui sotto.

   Accanto a ogni strato, FUORI dalla sua figura, c'e' la sua mappa delle luci:
   bianco con l'opacita' di quanto il punto era piu' luminoso del tipico. Dentro
   la figura il moltiplicare l'avrebbe tinta e spenta; fuori, schiarisce le creste
   del panno come fa la luce vera — su un blu notte, senza, la giacca era piatta. */
.vt-strati {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
}
.vt-coppia { position: absolute; inset: 0; }
.vt-coppia--contorno { opacity: 0.55; }  /* c'e' per far vedere l'abito, ma non e' nel conto */
.vt-strato {
  position: absolute;
  inset: 0;
  margin: 0;
  isolation: isolate;
}
.vt-strato img,
.vt-luce {
  display: block;
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  pointer-events: none;
}
.vt-strato::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--tinta);
  background-image: var(--macro, none);
  /* La macro si POSA sul colore invece di sostituirlo: `soft-light` prende la
     trama dalla fotografia della stoffa e lascia comandare la tinta. Messa da
     sola, la macro portava con sé anche il proprio colore e il proprio
     contrasto — lo spigato verde diventava una maglia bicolore, e chi aveva
     appena cliccato «Verde bosco» non vedeva il verde che aveva scelto.
     Il colore comanda, la stoffa lo veste. */
  background-blend-mode: soft-light;
  /* Sull'ALTEZZA, non sulla larghezza: la scatola e' larga quanto la colonna
     ma alta quanto il capo (la fotografia e' limitata dall'altezza), quindi
     l'altezza e' l'unica misura che segue davvero l'abito. Cosi' la trama
     resta della stessa scala su un monitor e su un telefono.
     La scala e' del TESSUTO (`--scala` dal catalogo), non una per tutti: il
     quadro del Principe di Galles alla scala vera spariva in mezzo pixel di
     riga, e si legge solo un po' piu' grande del vero. La trama non e' la
     fotografia della stoffa ma la sua versione in grigi a tutto contrasto
     (tools/strati/trame.mjs): il soft-light lavora per intero e il disegno si vede. */
  background-size: auto var(--scala, 4%);
  mix-blend-mode: multiply;
  -webkit-mask-image: var(--sagoma);
          mask-image: var(--sagoma);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transition: background-color var(--dur-feedback) var(--ease);
}

/* ---------- il passo: dove sei e cosa scegli ------------------------------ */

.vt-passo { margin-bottom: var(--s-4); }
.vt-passo-titolo {
  margin-top: var(--s-1);
  font-size: var(--t-h2);
  font-weight: var(--peso-forte);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.vt-passo-titolo:focus { outline: none; }

/* I due passi di un capo come due linguette: si vede che sono due, e quale. */
.vt-linguette {
  display: inline-flex;
  gap: 2px;
  margin-top: var(--s-3);
  padding: 3px;
  border-radius: calc(var(--raggio) + 3px);
  background: var(--disabilitato-fondo);
}
.vt-linguetta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s-4);
  border-radius: var(--raggio);
  font-size: var(--t-nota);
  font-weight: var(--peso-medio);
  color: var(--testo-2);
  text-decoration: none;
  white-space: nowrap;
}
.vt-linguetta:hover { color: var(--testo); }
.vt-linguetta--qui { background: var(--campo); color: var(--testo); box-shadow: 0 1px 3px rgba(140, 130, 104, 0.35); }

/* ---------- il consiglio e l'avviso --------------------------------------- */

.vt-consiglio,
.vt-avviso {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-inline-start: 3px solid var(--azione);
  background: var(--azione-velo);
  border-radius: 0 var(--raggio) var(--raggio) 0;
}
.vt-avviso { border-inline-start-color: var(--errore); background: color-mix(in srgb, var(--errore) 6%, var(--campo)); }
.vt-avviso .vt-occhiello { color: var(--errore); }
.vt-consiglio p:not(.vt-occhiello),
.vt-avviso p:not(.vt-occhiello) { margin: var(--s-1) 0 var(--s-3); font-size: var(--t-nota); }

/* ---------- i gruppi di scelte -------------------------------------------- */

/* Un gruppo: in alto il nome e, accanto, ciò che è scelto («Revers Classico»);
   sotto, la nota della scelta («A dente, il più portato») — sul telefono non
   c'è il passaggio del mouse a dirla. Poi i valori. Prima il nome stava in una
   colonna a sinistra che, a 375px, rubava un terzo della riga ai gettoni. */
.vt-scelte { display: flex; flex-direction: column; gap: var(--s-6); }
.vt-gruppi { display: grid; gap: var(--s-6) var(--s-8); align-items: start; }
.vt-gruppo { display: flex; flex-direction: column; min-inline-size: 0; }
.vt-gruppo-nome {
  margin: 0 0 var(--s-2);
  font-size: var(--t-nota);
  color: var(--testo-2);
}
.vt-gruppo-nome b { color: var(--testo); font-weight: var(--peso-medio); margin-inline-start: var(--s-1); }
.vt-gruppo-nota { margin: calc(-1 * var(--s-1)) 0 var(--s-3); font-size: var(--t-etichetta); color: var(--testo-2); }

@container (min-width: 34rem) {
  .vt-gruppi--fila { grid-template-columns: 1fr 1fr; }
}
@container (min-width: 46rem) {
  .vt-gruppi { grid-template-columns: 1fr 1fr; }
}

/* I gettoni: per chi, occasione, i dettagli. */
.vt-gettoni { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.vt-gettone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--bersaglio-min);
  padding: var(--s-1) var(--s-4);
  border-radius: 999px;
  font-size: var(--t-nota);
  text-decoration: none;
  color: var(--testo);
  box-shadow: var(--rilievo-lieve), inset 0 0 0 1px var(--bordo);
  transition: box-shadow var(--dur-feedback) var(--ease), background-color var(--dur-feedback) var(--ease);
}
.vt-gettone em { font-style: normal; font-size: var(--t-etichetta); color: var(--testo-2); }
a.vt-gettone:hover { box-shadow: var(--rilievo), inset 0 0 0 1px var(--bordo-controllo); }
.vt-gettone.vt-scelto,
a.vt-gettone.vt-scelto:hover {
  padding-inline-start: var(--s-3);
  background: var(--azione-velo);
  box-shadow: var(--filo-scelto);
  font-weight: var(--peso-medio);
}
/* Il consigliato si annuncia con un filo tratteggiato, non con un colore pieno:
   è un consiglio, non una scelta già fatta. */
.vt-gettone.vt-consigliato:not(.vt-scelto) { outline: 1.5px dashed var(--azione); outline-offset: 2px; }
/* Il negato resta VISIBILE E CLICCABILE. Toglierlo farebbe sparire una scelta
   senza dire perché, e chi la cercava penserebbe che il catalogo è più povero
   di così; spegnerlo del tutto lascerebbe la domanda senza risposta. Cliccando
   si legge il motivo, e la via d'uscita è un pulsante. */
.vt-gettone.vt-negato {
  color: var(--disabilitato-testo);
  background: var(--disabilitato-fondo);
  box-shadow: none;
  text-decoration: line-through;
  text-decoration-color: var(--bordo-controllo);
}
a.vt-gettone.vt-negato:hover { color: var(--testo-2); box-shadow: none; }
.vt-gettone--presto { color: var(--disabilitato-testo); box-shadow: none; background: var(--disabilitato-fondo); cursor: default; }

/* Le griglie: tessuti, abiti, modelli. Vanno a capo invece di scappare di
   lato: una fila che esce dallo schermo a destra, sul telefono, nasconde metà
   del catalogo a chi non pensa di trascinarla. */
.vt-griglia { display: grid; gap: var(--s-3); }
.vt-griglia--campioni { grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); gap: var(--s-4) var(--s-3); }
.vt-griglia--carte { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.vt-griglia--modelli { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }

/* Il campione di tessuto: la fotografia della stoffa è il campione. */
.vt-campione {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  text-decoration: none;
  color: var(--testo-2);
}
.vt-quadro {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 1;
  border-radius: var(--raggio);
  overflow: hidden;
  box-shadow: var(--rilievo-lieve);
  transition: box-shadow var(--dur-feedback) var(--ease);
}
.vt-quadro img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.vt-campione-nome { margin-top: var(--s-1); font-size: var(--t-nota); line-height: 1.25; color: var(--testo); overflow-wrap: break-word; }
.vt-campione-prezzo { font-size: var(--t-etichetta); font-variant-numeric: tabular-nums; }
.vt-campione:hover .vt-quadro { box-shadow: var(--rilievo); }
.vt-campione.vt-scelto .vt-quadro { box-shadow: 0 0 0 2px var(--campo), 0 0 0 4px var(--azione); }
.vt-campione.vt-scelto .vt-campione-nome { font-weight: var(--peso-forte); }

/* Il bollino della spunta, nell'angolo di carte e campioni. */
.vt-campione .vt-spunta,
.vt-carta .vt-spunta {
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-end: var(--s-2);
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background: var(--azione);
  color: var(--testo-su-azione);
  box-shadow: 0 0 0 2px var(--campo);
}

/* «Non lo facciamo»: il quadretto vuoto, barrato in diagonale. */
.vt-quadro--nessuno {
  background: linear-gradient(135deg, transparent calc(50% - 1px), var(--bordo-controllo) 50%, transparent calc(50% + 1px)), var(--campo);
}
/* «Come la giacca»: mezzo campione nel tessuto della giacca, mezzo gesso. */
.vt-quadro--come { background: linear-gradient(135deg, var(--tinta) 0 50%, var(--campo) 50%); }

/* Le carte: abiti e modelli. */
.vt-carta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  block-size: 100%;
  padding: var(--s-3);
  border-radius: var(--raggio);
  text-decoration: none;
  color: var(--testo-2);
  box-shadow: var(--rilievo-lieve), inset 0 0 0 1px var(--bordo);
  transition: box-shadow var(--dur-feedback) var(--ease), background-color var(--dur-feedback) var(--ease);
}
.vt-carta:hover { box-shadow: var(--rilievo), inset 0 0 0 1px var(--bordo-controllo); }
.vt-carta.vt-scelto,
.vt-carta.vt-scelto:hover { background: var(--azione-velo); box-shadow: var(--filo-scelto); }
.vt-carta-im {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--s-1);
  border-radius: calc(var(--raggio) - 4px);
  overflow: hidden;
  background: var(--disabilitato-fondo);
}
.vt-carta-im img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; display: block; }
.vt-carta-nome { color: var(--testo); font-weight: var(--peso-medio); line-height: 1.3; padding-inline-end: var(--s-6); }
.vt-carta-nota { font-size: var(--t-nota); line-height: 1.4; }
.vt-carta-prezzo { font-size: var(--t-nota); font-variant-numeric: tabular-nums; margin-top: auto; padding-top: var(--s-1); color: var(--testo); }
.vt-carta--testo { padding: var(--s-4); }

/* Un tessuto o un modello vietato, nelle carte e nei campioni, si spegne come il gettone. */
.vt-campione.vt-negato .vt-quadro { opacity: 0.35; }
.vt-carta.vt-negato { color: var(--disabilitato-testo); box-shadow: none; background: var(--disabilitato-fondo); }

/* Gli accessori: uno sotto l'altro sul telefono, affiancati dove c'e' posto. */
.vt-accessori { display: grid; gap: var(--s-8); }
@container (min-width: 46rem) {
  .vt-accessori { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: start; }
}
.vt-accessorio { display: flex; flex-direction: column; gap: var(--s-5); }
.vt-accessorio-nome {
  font-size: var(--t-h3);
  font-weight: var(--peso-forte);
  letter-spacing: -0.01em;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--bordo);
}

.vt-tondi { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.vt-tondo {
  display: block;
  inline-size: var(--bersaglio-min);
  block-size: var(--bersaglio-min);
  border-radius: 50%;
  box-shadow: var(--rilievo-lieve), inset 0 0 0 1px var(--bordo);
  transition: box-shadow var(--dur-feedback) var(--ease);
}
.vt-tondo span {  /* il nome c'e' per chi legge con la voce; a schermo basta il colore e il titolo */
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.vt-tondo:hover { box-shadow: var(--rilievo), inset 0 0 0 1px var(--bordo); }
.vt-tondo.vt-scelto { box-shadow: 0 0 0 2px var(--campo), 0 0 0 4px var(--azione); }
.vt-tondo.vt-consigliato:not(.vt-scelto) { outline: 1.5px dashed var(--azione); outline-offset: 3px; }

/* ---------- il conto (ultimo passo) --------------------------------------- */

.vt-conto { max-inline-size: 36rem; }
.vt-conto-rif { margin: calc(-1 * var(--s-2)) 0 var(--s-5); font-size: var(--t-nota); color: var(--testo-2); }
.vt-conto-rif b { color: var(--testo); font-weight: var(--peso-medio); }
.vt-conto-riga {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-1) 0;
  font-size: var(--t-nota);
  color: var(--testo-2);
}
.vt-conto-riga span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--testo); }
.vt-conto-riga--totale {
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--bordo);
  color: var(--testo);
  font-size: var(--t-h3);
  font-weight: var(--peso-forte);
}
.vt-conto-nota { margin: var(--s-3) 0 0; font-size: var(--t-etichetta); color: var(--testo-2); }
.vt-conto-pezzo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-1);
  font-size: var(--t-etichetta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo);
  font-weight: var(--peso-medio);
}
.vt-conto-pezzo:first-child { margin-top: 0; }
/* «Modifica»: piccolo nel testo, ma col bersaglio di un dito. */
.vt-modifica {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-block-size: var(--bersaglio-min);
  margin-block: calc(-1 * var(--s-3));
  padding-inline: var(--s-3);
  margin-inline-end: calc(-1 * var(--s-3));
  border-radius: var(--raggio);
  font-size: var(--t-nota);
  letter-spacing: 0;
  text-transform: none;
  color: var(--azione);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--bordo-controllo);
}
.vt-modifica:hover { background: var(--azione-velo); text-decoration-color: var(--azione); }

.vt-altrimenti { margin: var(--s-4) 0 0; text-align: center; font-size: var(--t-nota); color: var(--testo-2); }
.vt-altrimenti a { color: var(--testo); }

/* ---------- la barra ferma in fondo --------------------------------------- */

/* Totale, Indietro, Avanti: sempre lì, anche a metà di una lista lunga.
   La scheda non c'è: sta tutta nel riepilogo. */
.vt-azione {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin: var(--s-6) calc(-1 * var(--margine)) 0;
  padding: var(--s-3) var(--margine) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--campo) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-top: 1px solid var(--bordo);
}
.vt-azione-passi { display: flex; gap: var(--s-2); flex: none; }

.vt-totale {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: var(--bersaglio-min);
  margin: 0;
  line-height: 1.2;
}
.vt-totale > span {
  font-size: var(--t-etichetta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-2);
}
.vt-totale b {
  font-size: var(--t-h3);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
}
.vt-totale > span { white-space: nowrap; }
/* All'ultimo passo la barra porta «Provalo addosso», il pulsante più lungo: su
   un telefono stretto l'etichetta del totale andava a capo. Cede l'imbottitura. */
@media (max-width: 400px) {
  .vt-azione .vt-bottone--primo { padding-inline: var(--s-4); }
  .vt-azione { gap: var(--s-2); }
}

/* ---------- fuoco visibile ovunque ---------------------------------------- */

.vt :where(a, label, input):focus-visible {
  outline: 2px solid var(--azione);
  outline-offset: 3px;
  border-radius: var(--raggio);
}

@media (prefers-reduced-motion: reduce) {
  .vt * { transition: none !important; animation: none !important; }
}

/* ---------- da tablet: abito a sinistra, scelte a destra ------------------- */

/* Anche il TELEFONO IN ORIZZONTALE va su due colonne: alto 360px, con la foto
   sopra non restava posto né per le scelte né per la barra in fondo.
   [misurato a 740×360, 09/10/2026] La stessa condizione è in configuratore.js
   (`DUE_COLONNE`): se cambia qui, cambia anche là. */
@media (min-width: 768px), (orientation: landscape) and (min-width: 560px) {
  :root { --margine: var(--s-6); --h-tappe: 3.75rem; }
  .vt-testa { block-size: var(--h-testa); padding-block: 0; }

  .vt-corpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  /* L'abito si ferma sotto la barra dei passi e prende l'altezza che resta
     sotto testata e barra — non di più: alto quanto la finestra, partiva sotto
     la testata e gli ultimi 56px (le scarpe, il nome dell'abito) finivano fuori
     schermo. [segnalato dal titolare, misurato a 1035×914, 09/10/2026] */
  .vt-palco {
    top: var(--h-tappe);
    block-size: calc(100svh - var(--h-testa) - var(--h-tappe));
    padding-block: var(--s-6);
    box-shadow: none;
  }
  .vt-didascalia { display: block; max-inline-size: 30rem; }
  /* La colonna delle scelte è alta almeno quanto la foto: con poche scelte la
     barra di Avanti restava a metà schermo invece che in fondo. */
  .vt-piede {
    display: flex;
    flex-direction: column;
    min-block-size: calc(100svh - var(--h-testa) - var(--h-tappe));
    padding-top: var(--s-8);
    padding-inline: var(--s-2) var(--margine);
  }
  .vt-scelte { flex: 1 0 auto; }
  .vt-azione { margin-inline: calc(-1 * var(--s-2)) calc(-1 * var(--margine)); padding-inline: var(--s-2) var(--margine); }

}

/* Schermi bassi (il telefono in orizzontale): sotto la foto basta il nome
   dell'abito, e il palco stringe l'aria sopra e sotto. */
@media (max-height: 500px) and (orientation: landscape) {
  .vt-didascalia span { display: none; }
  .vt-palco { padding-block: var(--s-3); }
  .vt-piede { padding-top: var(--s-4); }
}

/* ---------- schermo largo: la foto prende tutto, le scelte una colonna ----- */

/* Qui l'altezza c'è: la pagina vale una schermata, l'abito sta fermo, e a
   scorrere è la colonna delle scelte, larga quanto serve e non di più: tutto il
   resto è della foto. La barra in fondo è la base di quella colonna. */
@media (min-width: 1180px) {
  #app { display: flex; flex-direction: column; block-size: 100svh; }
  .vt-corpo {
    flex: 1;
    min-block-size: 0;
    grid-template-columns: minmax(0, 1fr) minmax(26rem, 32rem);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }
  .vt-palco { position: relative; top: 0; block-size: auto; min-block-size: 0; padding-block: var(--s-4); }
  .vt-piede {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline: var(--s-6);
    border-inline-start: 1px solid var(--bordo);
  }
  .vt-scelte { flex: 1 0 auto; }
  .vt-azione { margin-inline: calc(-1 * var(--s-6)); padding-inline: var(--s-6); padding-block-end: var(--s-4); }
}

/* ---------- col mouse: la barra dei passi a scomparsa --------------------- */

/* COL MOUSE, LA BARRA DEI PASSI SI NASCONDE. Sempre aperta toglieva una fascia
   alla foto e diceva una cosa che serve solo ogni tanto. Al suo posto, in
   testata, «Passo 2 di 9 · Giacca»: passandoci sopra la barra scende SOPRA la
   foto, senza spostare niente, e risale quando il mouse se ne va (con un attimo
   di ritardo, per non sparire sotto un movimento sbavato). Dalla tastiera si
   apre col fuoco. Sul telefono il passaggio del mouse non esiste: lì resta
   aperta e ferma in cima. [scelta del titolare, 09/10/2026] */
.vt-dove { display: none; }
@media (hover: hover) and (pointer: fine) {
  #app { position: relative; }
  .vt-testa { position: relative; z-index: 6; block-size: var(--h-testa, 3.5rem); padding-block: 0; background: var(--campo); }
  .vt-dove {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    min-block-size: 2.25rem;
    padding: 0 var(--s-3);
    border-radius: 999px;
    font-size: var(--t-nota);
    color: var(--testo-2);
    cursor: default;
    transition: background-color var(--dur-feedback) var(--ease);
  }
  .vt-dove b { color: var(--testo); font-weight: var(--peso-medio); }
  .vt-dove svg { font-size: 0.875rem; transition: transform var(--dur-feedback) var(--ease); }
  .vt-tappe {
    position: absolute;
    inset-inline: 0;
    top: var(--h-testa, 3.5rem);
    /* Nascosta con l'opacità e non con `visibility`: un elemento invisibile non
       prende il fuoco, e dalla tastiera la barra non si sarebbe aperta mai. */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    box-shadow: 0 12px 20px -14px rgba(140, 130, 104, 0.55);
    transition: opacity 180ms var(--ease) 220ms, transform 180ms var(--ease) 220ms;
  }
  .vt-testa:hover + .vt-tappe,
  .vt-tappe:hover,
  .vt-tappe:focus-within {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }
  .vt-testa:hover .vt-dove { background: var(--azione-velo); }
  .vt-testa:hover .vt-dove svg { transform: rotate(180deg); }
  /* La barra non occupa più posto: il palco si ferma subito in cima. */
  .vt-palco { top: 0; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px),
       (hover: hover) and (pointer: fine) and (orientation: landscape) and (min-width: 560px) {
  .vt-palco { top: 0; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) and (max-width: 1179px),
       (hover: hover) and (pointer: fine) and (orientation: landscape) and (min-width: 560px) and (max-width: 1179px) {
  /* Col mouse la barra dei passi non occupa posto. */
  .vt-palco { block-size: calc(100svh - var(--h-testa)); }
  .vt-piede { min-block-size: calc(100svh - var(--h-testa)); }
}