/* ============================================================================
   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.

   TRE COSE DA SAPERE PRIMA DI TOCCARLO

   1. LA REGOLA DELL'ARIA. Ciò che è scelto NON si illumina: si incassa nella
      materia (--incavo). Ciò che è disponibile affiora (--rilievo-lieve). È il
      segno principale della selezione — il colore è il secondo, non il primo.
   2. MATERIA UNICA. Il campo e le superfici sono lo stesso gesso: si separano
      per rilievo e per aria, non con riquadri bianchi.
   3. UNA SCHERMATA. Il capo cede altezza alle scelte, non il contrario: se la
      pagina comincia a scorrere, la vetrina è diventata un modulo.
   ========================================================================== */

@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 */
  --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 8%, #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.844rem;
  --t-etichetta: 0.688rem;

  /* IL RILIEVO SARTORIALE: una sola luce da nord-ovest, ombra di gesso
     bruciato a sud-est. La materia affiora o s'incassa. */
  --luce-no: rgba(255, 255, 253, 0.90);
  --ombra-se: rgba(140, 130, 104, 0.32);
  --rilievo: -8px -8px 20px var(--luce-no), 10px 12px 26px var(--ombra-se);
  --rilievo-lieve: -5px -5px 12px var(--luce-no), 6px 7px 16px var(--ombra-se);
  --incavo: inset 5px 5px 12px var(--ombra-se), inset -5px -5px 12px var(--luce-no);

  /* 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 */
  --dur-feedback: 140ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--campo);
  color: var(--testo);
  font-family: var(--font);
  font-size: var(--t-corpo);
  font-weight: var(--peso-testo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

/* ---------- 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;
  color: var(--testo);
  cursor: pointer;
  transition: background-color var(--dur-feedback) var(--ease), box-shadow var(--dur-feedback) var(--ease);
}
.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); }
.vt-bottone--secondo:hover { box-shadow: var(--rilievo); }
.vt-bottone--terzo {
  min-height: 36px;
  padding: var(--s-1) var(--s-4);
  font-size: var(--t-nota);
  box-shadow: var(--rilievo-lieve);
}
.vt-bottone--terzo:hover { box-shadow: var(--rilievo); }


/* ---------- impianto ------------------------------------------------------ */

/* La pagina intera vive dentro `#app`, e per questo la colonna alta quanto la
   finestra dev'essere LUI. Messa su `body` non serviva a niente: fra body e la
   testata c'era `#app`, un div qualunque, e il `flex: 1` del corpo non trovava
   nessuno spazio da prendersi — il capo si accartocciava a cinquanta pixel in
   mezzo a mezza schermata vuota. [trovato misurando, 03/09/2026] */
body.vt { margin: 0; }

#app {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
}

.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); }

/* ---------- testata: solo tre cose, e l'insegna al centro ----------------- */

.vt-testa {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
}
.vt-testa-lato { min-width: 0; }
.vt-testa-destra { display: flex; justify-content: flex-end; }

.vt-insegna {
  font-weight: var(--peso-forte);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: var(--t-nota);
  /* Un'insegna lunga rimpicciolisce, non si mozza: il nome del negozio è la
     prima cosa che si legge. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: 40vw;
}

.vt-esci {
  color: var(--testo-2);
  text-decoration: none;
  font-size: var(--t-nota);
}
.vt-esci:hover { color: var(--testo); }

.vt-totale {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.vt-totale span {
  font-size: var(--t-etichetta);
  letter-spacing: 0.08em;
  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;
}

/* ---------- il corpo: palco, scheda, piede -------------------------------- */

.vt-corpo {
  flex: 1;
  display: grid;
  /* `minmax(0, 1fr)` e non `1fr`: senza il minimo a zero la colonna prende la
     larghezza MASSIMA del contenuto, e la fila dei tessuti (dieci campioni,
     quasi 900px) allargava la pagina invece di scorrere dentro di se'. Su
     telefono il capo finiva fuori schermo e non si vedeva piu' niente.
     [trovato guardando la vetrina a 375px, 03/09/2026] */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'palco' 'piede';
  grid-template-rows: 1fr auto;
  gap: var(--s-3);
  min-height: 0;
}
/* Al riepilogo la scheda entra anche su schermo stretto: è il contenuto. */
.vt-corpo--riepilogo {
  grid-template-areas: 'palco' 'scheda' 'piede';
  grid-template-rows: auto auto auto;
}

.vt-palco { grid-area: palco; min-inline-size: 0; }
.vt-piede { grid-area: piede; min-inline-size: 0; }
.vt-scheda { grid-area: scheda; min-inline-size: 0; display: none; }
.vt-corpo--riepilogo .vt-scheda { display: block; }

@media (min-width: 1080px) {
  .vt-corpo,
  .vt-corpo--riepilogo {
    grid-template-columns: minmax(0, 1fr) 25rem;
    grid-template-areas: 'palco scheda' 'piede scheda';
    grid-template-rows: 1fr auto;
    column-gap: var(--s-6);
    padding-inline-end: var(--s-6);
  }
  .vt-scheda { display: block; align-self: start; position: sticky; top: var(--s-4); }
}

/* ---------- il palco ------------------------------------------------------ */

.vt-palco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-6) 0;
  min-height: 0;
}

.vt-passo { margin: 0; text-align: center; }
.vt-occhiello {
  display: block;
  font-size: var(--t-etichetta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--testo-2);
  font-weight: var(--peso-medio);
}
.vt-passo b {
  display: block;
  font-size: var(--t-h2);
  font-weight: var(--peso-forte);
  letter-spacing: -0.015em;
  margin-top: var(--s-1);
}

.vt-demo {
  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);
}

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

   IL CAPO OCCUPA LO SPAZIO CHE C'E'. Prima aveva un'altezza fissa e su uno
   schermo grande restava un francobollo in mezzo a un campo vuoto. Ora e' la
   riga della griglia a dargli l'altezza e la fotografia ci si adatta dentro
   (`contain`): su un portatile basso si stringe, su un monitor si prende tutto.

   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 la riga e
     spingeva le scelte fuori dallo schermo. 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;
}

.vt-panno {
  position: relative;
  display: block;
  margin: 0;
  inline-size: 100%;
  block-size: 100%;
  isolation: isolate;
}
.vt-panno img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
.vt-panno::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.
     Il valore e' piccolo perche' le macro sono scatti ravvicinati: ritraggono
     cinque centimetri di stoffa. Stese su un nono dell'abito facevano sembrare
     il lino un bouclé e lo spigato una maglia. Un ventesimo dell'altezza e' la
     misura in cui la trama torna trama. */
  background-size: auto 5%;
  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 dei dettagli porta tutte le scelte insieme: lì il capo cede spazio.
   Non è un ripiego — è il momento in cui si guardano le opzioni, non la figura. */
.vt-corpo--dettagli .vt-capo { max-block-size: 32vh; }

.vt-didascalia { 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); }

/* ---------- la scheda che si scrive da sola ------------------------------- */

.vt-scheda { padding: var(--s-4) var(--s-6) var(--s-6); }
.vt-scheda-testa { margin: 0 0 var(--s-3); }
.vt-scheda-testa b {
  display: block;
  font-size: var(--t-h3);
  font-weight: var(--peso-forte);
  letter-spacing: -0.01em;
  margin-top: var(--s-1);
}
.vt-scheda-rif { font-size: var(--t-nota); color: var(--testo-2); }

.vt-righe { margin: 0; }
.vt-riga {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  /* Il punteggiato è la guida di una scheda scritta a mano, non un bordo di
     tabella: separa senza costruire una griglia. */
  border-bottom: 1px dotted var(--bordo);
}
.vt-riga dt {
  font-size: var(--t-nota);
  color: var(--testo-2);
  white-space: nowrap;
}
.vt-riga dd {
  margin: 0 0 0 auto;
  text-align: right;
  font-size: var(--t-nota);
  font-weight: var(--peso-medio);
}
.vt-riga dd a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.vt-riga dd a:hover { border-bottom-color: var(--bordo-controllo); }
.vt-riga dd em { font-style: normal; font-weight: var(--peso-testo); color: var(--testo-2); margin-inline-start: var(--s-2); }

.vt-conto { margin-top: var(--s-5); }
.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; }
.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-nota); color: var(--testo-2); }

/* ---------- il piede: ciò che si dice e ciò che si sceglie ---------------- */

.vt-piede { padding: 0 var(--s-6) var(--s-4); }

.vt-consiglio,
.vt-avviso {
  max-inline-size: 60ch;
  margin: 0 auto var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-inline-start: 2px solid var(--azione);
  background: var(--azione-velo);
  border-radius: 0 var(--raggio) var(--raggio) 0;
}
.vt-avviso { border-inline-start-color: var(--errore); background: transparent; }
.vt-avviso .vt-occhiello { color: var(--errore); }
.vt-consiglio p,
.vt-avviso p { margin: var(--s-1) 0 0; font-size: var(--t-nota); }
.vt-consiglio-azione { margin-top: var(--s-2); }

.vt-scelte { padding-block: var(--s-1); }

.vt-nastro {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  justify-content: safe center;   /* con molte scelte non taglia la prima */
  margin: 0;
  padding: var(--s-2) 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.vt-nastro > li { scroll-snap-align: center; flex: none; }

/* Il campione di tessuto: la fotografia della stoffa è il campione. */
.vt-campione {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  inline-size: 5.5rem;
  text-align: center;
  text-decoration: none;
  color: var(--testo-2);
}
.vt-quadro {
  position: relative;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  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-quadro::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: box-shadow var(--dur-feedback) var(--ease);
}
.vt-campione-nome { font-size: var(--t-nota); line-height: 1.25; }
.vt-campione-prezzo { font-size: var(--t-etichetta); font-variant-numeric: tabular-nums; }

/* La Regola dell'Aria: lo scelto s'incassa, e resta premuto. */
.vt-campione.vt-scelto .vt-quadro { box-shadow: none; }
.vt-campione.vt-scelto .vt-quadro::after { box-shadow: var(--incavo); }
.vt-campione.vt-scelto .vt-campione-nome { color: var(--testo); font-weight: var(--peso-forte); }
.vt-campione:hover .vt-quadro { box-shadow: var(--rilievo); }
.vt-campione.vt-scelto:hover .vt-quadro { box-shadow: none; }

/* Le carte: capi e modelli. */
.vt-nastro--carte { gap: var(--s-4); }
.vt-carta {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  inline-size: 11rem;
  padding: var(--s-3);
  border-radius: var(--raggio);
  text-decoration: none;
  color: var(--testo-2);
  box-shadow: var(--rilievo-lieve);
  transition: box-shadow var(--dur-feedback) var(--ease);
}
.vt-carta:hover { box-shadow: var(--rilievo); }
.vt-carta.vt-scelto,
.vt-carta.vt-scelto:hover { box-shadow: var(--incavo); }
.vt-carta-im {
  display: block;
  block-size: 7rem;
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--disabilitato-fondo);
}
.vt-carta-im img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.vt-carta-nome { color: var(--testo); font-weight: var(--peso-medio); line-height: 1.3; }
.vt-carta-nota { font-size: var(--t-nota); line-height: 1.35; }
.vt-carta-prezzo { font-size: var(--t-nota); font-variant-numeric: tabular-nums; margin-top: auto; }
.vt-carta--testo { inline-size: 14rem; }

/* I dettagli: un gruppo per riga, i valori come gettoni. */
.vt-gruppi {
  display: flex;
  flex-direction: column;
  gap: var(--s-2) var(--s-8);
  max-inline-size: 62rem;
  margin-inline: auto;
}
/* Cinque gruppi in colonna non stanno in una schermata, e la vetrina vive di
   quello. In due colonne ci stanno, e il gruppo resta un'unita' leggibile. */
@media (min-width: 820px) {
  .vt-gruppi { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
/* Etichetta e gettoni su due colonne fisse: cosi' i nomi dei gruppi restano
   incolonnati anche quando le file di gettoni hanno lunghezze diverse. In
   flex si sfilacciavano, e cinque righe sfilacciate sembrano disordine. */
.vt-gruppo { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: start; gap: var(--s-3); }
.vt-gruppo-nome {
  margin: 0;
  padding-top: var(--s-2);
  text-align: end;
  font-size: var(--t-nota);
  color: var(--testo-2);
}
.vt-gettoni { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.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-2);
  box-shadow: var(--rilievo-lieve);
  transition: box-shadow var(--dur-feedback) var(--ease), color var(--dur-feedback) var(--ease);
}
.vt-gettone em { font-style: normal; font-size: var(--t-etichetta); }
a.vt-gettone:hover { box-shadow: var(--rilievo); color: var(--testo); }
.vt-gettone.vt-scelto,
a.vt-gettone.vt-scelto:hover {
  box-shadow: var(--incavo);
  color: var(--testo);
  font-weight: var(--peso-medio);
}
/* Il consigliato si annuncia con un filo, non con un colore pieno: è un
   consiglio, non una scelta già fatta. */
.vt-gettone.vt-consigliato { outline: 1px dashed var(--azione); outline-offset: -1px; }
/* 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; }

/* ---------- avanti, indietro, e dove siamo -------------------------------- */

.vt-azione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  max-inline-size: 40rem;
  margin: var(--s-3) auto 0;
}

.vt-punti {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}
.vt-punti a {
  display: block;
  inline-size: 2.75rem;
  block-size: 2px;
  background: var(--bordo);
  text-decoration: none;
}
.vt-punti a span {
  /* Il nome del passo c'è per chi legge con la voce, non per lo schermo: la
     riga di progresso deve restare muta. */
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.vt-punto-fatto a { background: var(--azione); }

/* ---------- 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; }
}

/* ---------- lo schermo stretto ------------------------------------------- */

@media (max-width: 560px) {
  /* La testata a tre colonne su un telefono si accavalla: l'etichetta della
     dimostrazione finisce sopra il nome. Il nome vince — e' l'unica delle tre
     cose che dice che cos'e' questa pagina. */
  .vt-demo { display: none; }
  .vt-testa { grid-template-columns: auto 1fr; }
  .vt-insegna { max-inline-size: none; text-align: start; }
  .vt-testa-lato:first-child { display: none; }
  /* La riga dell'atelier («Sartoria dal 1948 · Bergamo») su un telefono si
     spezza in tre righe e schiaccia l'insegna. Il nome basta: il resto lo si
     legge dove c'è posto. */
  .vt-esci { display: none; }
  .vt-testa { padding: var(--s-3) var(--s-4); }
  .vt-palco, .vt-piede { padding-inline: var(--s-4); }
}

/* ---------- la schermata piena, sotto le due colonne ---------------------- */

/* Il principio della vetrina e' «tutto in UNA schermata: niente scorrimento
   per arrivare al pulsante». Reggeva ai passi 1, 2 e 3 e NON agli ultimi due:
   a 375x812 il passo 4 sforava di 188px e il passo 5 di 207px, e «Prenota la
   prova in atelier» cominciava 117px sotto la piega. Su una vetrina il
   pulsante che non si vede e' un pulsante che non esiste.
   [misurato camminando la dimostrazione, 04/09/2026]

   La causa e' scritta due schermate piu' su: i gruppi di dettagli vanno in due
   colonne solo da 820px, e sotto si impilano — sei gruppi fanno 668px da soli.
   Allargare la soglia non si puo': a 375px due colonne di gettoni non stanno.

   Allora si cambia cosa scorre. La PAGINA non scorre piu': `#app` vale
   esattamente una schermata. Dentro, la fascia che porta il contenuto lungo
   (le scelte al passo 4, la scheda del conto al passo 5) cede spazio e scorre
   DENTRO DI SE'. Testata, capo, pulsanti e pallini restano dove sono. E' la
   stessa cura gia' usata per la fila dei tessuti, che scorre nel suo nastro
   invece di allargare la pagina. */
@media (max-width: 819px) {
  #app { block-size: 100dvh; }

  /* Qui il corpo smette di essere una griglia e diventa una COLONNA.
     Con la griglia si sbaglia: mettendo il palco su una riga `auto` il capo
     collassa a zero — dentro c'e' un `flex: 1 1 0` che senza un'altezza
     definita non ha niente da dividere, e si vede una schermata vuota col
     pulsante in mezzo. In colonna flex ognuno dichiara quanto puo' cedere, e
     il capo non perde mai la sua misura. [rotto e rifatto, 04/09/2026] */
  .vt-corpo,
  .vt-corpo--riepilogo {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
  }

  /* Il capo si prende lo spazio che avanza e cede per ultimo. */
  .vt-palco { flex: 1 1 auto; min-block-size: 0; }

  /* ...ma non fino a sparire. `.vt-capo` e' fatto per prendere «esattamente lo
     spazio che avanza» (`flex: 1 1 0`), e ai passi 4 e 5 non ne avanzava piu':
     il piede si prendeva tutto e la figura collassava a ZERO — una vetrina
     d'abiti senza l'abito. Questo e' il pavimento sotto cui non scende, e
     restando un minimo (non un'altezza fissa) il capo continua a crescere dove
     c'e' posto. [rotto e rifatto, 04/09/2026] */
  .vt-capo { min-block-size: 18vh; }
  .vt-corpo--riepilogo .vt-capo { min-block-size: 12vh; }

  /* Il piede parte dalla sua altezza naturale e CEDE quando non ci sta
     (`flex: 0 1 auto`), invece di spingere i pulsanti fuori schermo. */
  .vt-piede {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-block-size: 0;
  }

  /* La base e' `auto`, cioe' l'altezza vera del contenuto, e il permesso e'
     quello di CEDERE (`0 1 auto`). Con `1 1 0` si sbaglia — e l'ho sbagliato:
     una fascia con base zero non conta nell'altezza del piede, quindi il piede
     si stringe attorno ai soli pulsanti e la fascia resta schiacciata a niente.
     Le carte dei modelli sparivano. [rotto e rifatto, 04/09/2026] */
  .vt-scelte {
    flex: 0 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;   /* scorrendo qui non si trascina la pagina */
  }

  /* Al riepilogo il contenuto lungo e' la scheda del conto: e' lei a prendersi
     lo spazio e a scorrere, e il capo si fa da parte perche' li' la scheda E'
     il contenuto. */
  .vt-corpo--riepilogo .vt-palco { flex: 0 1 auto; }

  /* E li' il piede NON cede. Al passo dei dettagli puo' farlo, perche' dentro
     ha la fascia delle scelte che assorbe; al riepilogo quella fascia e' quasi
     vuota (otto pixel), quindi a cedere finivano pulsanti e pallini, che
     uscivano di 14px sotto il bordo. Chi cede, qui, e' la scheda.
     [misurato, 04/09/2026] */
  .vt-corpo--riepilogo .vt-piede { flex: 0 0 auto; }
  .vt-corpo--riepilogo .vt-scheda {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Pulsanti e pallini non cedono mai: sono il fondo della schermata. */
  .vt-azione, .vt-punti { flex: none; }
}