/*
 * LA PAGINA DEL CONFIGURATORE
 *
 * La direzione grafica di questo foglio non e' dedotta: e' il mockup che il
 * cliente ha allegato l'11 agosto 2026 dicendo «esattamente cosi come vedi lo
 * devi fare nulla di piu' nulla di meno». Fondo avorio caldo, schede bianche
 * con angoli tondi e ombra appena accennata, accento rame, passi in fila
 * sopra, tre colonne sotto: anteprima, scelta, riepilogo.
 *
 * Tutto e' racchiuso in `.st-configurator--passi`. Lo stesso marcatore serve
 * anche il configuratore dentro la scheda prodotto, che ha un'altra forma e
 * che nessuno ha chiesto di cambiare: senza questo cancello, ogni regola qui
 * dentro lo raggiungerebbe.
 */

.st-configurator--passi {
  --p-fondo: #F7F3EF;
  --p-scheda: #FFFFFF;
  --p-inchiostro: #2A2724;
  --p-tenue: #7C766F;
  --p-riga: #E8E1D9;
  --p-rame: #B4551F;
  --p-rame-chiaro: #FBF1E8;
  --p-ombra: 0 1px 2px rgba(42, 39, 36, .04), 0 8px 24px -12px rgba(42, 39, 36, .16);
  --p-raggio: 14px;

  color: var(--p-inchiostro);
}

/*
 * Il fondo avorio deve coprire tutta la larghezza dello schermo, non solo la
 * colonna di contenuto: nel riferimento le schede bianche galleggiano su un
 * piano continuo. `.st-configpage` e' l'involucro della pagina, quindi il
 * colore si dichiara li' e non qui dentro.
 */
/*
 * LA PAGINA E' PIU' LARGA DEL RESTO DEL SITO
 *
 * Il contenitore comune del sito e' 1280px e va bene per una pagina di testo,
 * dove una riga troppo lunga si legge male. Qui dentro non c'e' testo lungo:
 * ci sono tre colonne che devono stare affiancate, e la piu' importante — la
 * tenda — era finita a 350px, la piu' stretta delle tre.
 *
 * Nel riferimento le tre colonne stanno su circa 1336px con margini di una
 * cinquantina di pixel: la pagina occupa lo schermo invece di lasciare due
 * bande vuote ai lati. Le misure qui sotto sono quelle, non una stima.
 */
/* `.st-container` non si allarga con `max-width`: e' dichiarato
   `width: min(100% - 2*margine, var(--st-container))`, e davanti a una
   larghezza calcolata un massimo piu' grande non ha voce. Si cambia la
   variabile che quella riga legge davvero. */
.st-configpage {
  --st-container: 1336px;
  background: #F7F3EF;
}

/* ------------------------------------------------------------------ *
 * LA TESTA DELLA PAGINA
 * ------------------------------------------------------------------ */

.st-configpage__testa {
  background: transparent;
  border: 0;
  padding: 26px 0 0;
}

.st-configpage__briciole {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  color: var(--st-tenue, #7C766F);
}

.st-configpage__briciole a {
  color: inherit;
  text-decoration: none;
}

.st-configpage__briciole a:hover {
  color: #B4551F;
}

.st-configpage__briciole [aria-current] {
  color: #2A2724;
}

/*
 * Il titolo e l'aiuto stanno sulla stessa riga, ai due estremi.
 *
 * La miniatura del prodotto che c'era prima e' sparita: nel riferimento
 * l'immagine del prodotto sta nell'anteprima grande a sinistra, e ripeterla
 * in piccolo qui sopra la fa sembrare un elenco di risultati invece della
 * pagina di una cosa sola.
 */
.st-configpage__identita {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 0 18px;
}

.st-configpage__miniatura,
.st-configpage__eyebrow,
.st-configpage__ritorno {
  display: none;
}

.st-configpage__titolo {
  margin: 0;
  font-family: var(--st-font-display, Georgia, serif);
  font-size: clamp(1.65rem, 2.4vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.15;
}

/* ------------------------------------------------------------------ *
 * I PASSI, IN FILA
 * ------------------------------------------------------------------ */

/*
 * LA TESTA RESTA VISIBILE, E NON FINISCE DIETRO ALLA TESTATA
 *
 * I passi scorrevano via con il resto: dopo mezza schermata non si sapeva piu'
 * a che punto si fosse ne' come tornare indietro, e l'unico modo era risalire
 * fino in cima. Adesso si agganciano.
 *
 * `top` vale l'altezza della testata del sito, che e' appiccicata anche lei:
 * senza quel valore i passi si fermerebbero a zero e scivolerebbero **sotto**
 * la testata, tagliati a meta'. Sono 77 px — 76 di altezza piu' il filo del
 * bordo — e stanno in una variabile perche' li' vicino ci sono altre tre
 * misure che devono seguirla.
 *
 * Il fondo e' pieno e va da bordo a bordo della colonna: una barra appiccicata
 * trasparente lascia intravedere il contenuto che le passa sotto, ed e' il
 * difetto che fa sembrare rotta una pagina altrimenti giusta.
 */
.st-configurator--passi {
  --p-testata: 77px;
  --p-passi: 62px;
}

.st-configurator--passi .st-steps {
  grid-area: passi;
  position: sticky;
  top: var(--p-testata);
  z-index: 5;
  margin: 0;
  padding: 14px 0 16px;
  background: var(--p-fondo);
  border: 0;
  /*
   * `max-height` e `overflow-y` vanno azzerati esplicitamente.
   *
   * `configurator.css:826` li dichiara per la vecchia colonna verticale, che
   * con dieci voci poteva superare lo schermo. Io avevo sovrascritto
   * posizione, margini e fondo — non questi due, e sono rimasti: e' la barra
   * di scorrimento che continuava a comparire sopra i passi. Cinque cerchi su
   * una riga non hanno niente da far scorrere.
   */
  max-height: none;
  overflow: visible;
}

/*
 * Il fondo a tutta larghezza non serve, e faceva danno.
 *
 * L'avevo messo temendo che le opzioni scorressero visibili nelle bande ai
 * lati della barra. Non possono: tutto il contenuto sta dentro il contenitore
 * da 1336, e le bande sono vuote — hanno gia' il fondo della pagina.
 *
 * In compenso quello pseudo-elemento largo `100vw` allargava l'elemento di
 * cinquantadue pixel oltre il contenitore: nessuna barra visibile, ma una
 * larghezza sforata che al primo cambio di margini sarebbe diventata
 * scorrimento orizzontale vero. Il filo sotto resta, e basta a staccare la
 * barra da cio' che le passa sotto.
 */
.st-configurator--passi .st-steps {
  border-bottom: 1px solid var(--p-riga);
}

/*
 * I CINQUE PASSI SI VEDONO TUTTI, E OCCUPANO LA RIGA
 *
 * Avevo messo `overflow-x: auto` pensando agli schermi stretti. Su cinque voci
 * non serve a niente e fa danno: basta un pixel di troppo e la fila comincia a
 * scorrere, cioe' l'unico elemento che deve dire **a che punto sei** nasconde
 * meta' di se stesso. Un percorso che va guardato scorrendo non e' piu' un
 * percorso.
 *
 * Ora la fila si distribuisce sull'intera larghezza: i cerchi ai loro posti e
 * le linee che li uniscono si allungano per riempire cio' che avanza. Sono
 * cinque punti allineati da un capo all'altro, che e' anche il modo in cui si
 * legge che il percorso e' corto.
 */
.st-configurator--passi .st-steps__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* L'ultima voce non si allarga: senza questo la sua etichetta verrebbe
   spostata al centro dello spazio residuo e uscirebbe dall'allineamento a
   destra. */
.st-configurator--passi .st-steps__item { flex: 1 1 auto; }
.st-configurator--passi .st-steps__item:last-child { flex: 0 0 auto; }

/* Le linee prendono lo spazio che avanza invece di averne uno fisso. */
.st-configurator--passi .st-steps__item + .st-steps__item::before {
  width: auto;
  flex: 1 1 auto;
  min-width: 16px;
  margin: 0 12px;
}

/*
 * `border: 0` qui non e' pulizia preventiva: nel foglio comune la voce del
 * passo era una riga di una colonna verticale, e portava una barretta rame sul
 * bordo sinistro per dire «sei qui». In orizzontale quella barretta diventa un
 * trattino appiccicato al cerchio, che sembra un errore di disegno. Stessa
 * cosa per il fondo e l'imbottitura della riga.
 */
.st-configurator--passi .st-steps__item {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.st-configurator--passi .st-steps__item.is-current,
.st-configurator--passi .st-steps__item.is-done,
.st-configurator--passi .st-steps__item.is-error {
  border: 0;
  background: none;
  box-shadow: none;
}

/*
 * IL PASSO INCOMPLETO NON SI SEGNALA IN CIMA
 *
 * `is-error` si accende su un passo che ha un campo obbligatorio vuoto — cioe'
 * su ogni passo che non e' ancora stato compilato. Nella colonna verticale
 * quella marcatura passava inosservata; in una fila di cinque cerchi diventa
 * un allarme rosso davanti a chi non ha ancora fatto niente di sbagliato.
 *
 * Il posto giusto per dire «qui manca qualcosa» e' il campo, quando si prova
 * ad andare avanti: li' l'avviso e' una risposta a un gesto, non un giudizio
 * dato in anticipo.
 */
.st-configurator--passi .st-steps__item.is-error:not(.is-current) .st-steps__n {
  border-color: var(--p-riga);
  color: var(--p-tenue);
  background: var(--p-scheda);
}

/*
 * Il foglio comune usa `::before` sulla voce corrente per disegnare la
 * barretta rame del «sei qui». Qui `::before` serve ad altro — e' la linea che
 * unisce i cerchi — quindi va spento su tutte le voci prima di riaccenderlo
 * dove serve. Senza questa riga, davanti al primo cerchio resta un trattino
 * rame appeso al nulla.
 */
.st-configurator--passi .st-steps__item::before {
  content: none;
}

/*
 * La barretta sta sul **pulsante**, non sulla voce: `configurator.css:843`
 * la disegna su `.st-steps__item.is-current .st-steps__btn::before`. Spegnerla
 * sulla voce, come sopra, non la toccava nemmeno — e restava un trattino rame
 * davanti al primo cerchio. Insieme se ne va il fondo rame chiaro della riga
 * corrente, che in colonna faceva da evidenziatore e in fila diventa una
 * macchia dietro il testo.
 */
.st-configurator--passi .st-steps__btn::before,
.st-configurator--passi .st-steps__item.is-current .st-steps__btn::before {
  content: none;
}

.st-configurator--passi .st-steps__item.is-current .st-steps__btn {
  background: none;
}

/*
 * La spunta del passo compilato: `configurator.css:868` la mette con
 * `.st-steps__n::before` sulla voce `is-filled`, questo foglio la disegna con
 * `::after` su `is-done`. Sono due marcature diverse per la stessa cosa, e un
 * passo che ha entrambe le classi mostrerebbe due spunte sovrapposte dentro un
 * cerchio da trenta pixel.
 */
.st-configurator--passi .st-steps__item.is-filled:not(.is-current) .st-steps__n::before {
  content: none;
}

/* E IL NUMERO VA RIMESSO, ALTRIMENTI IL CERCHIO RESTA VUOTO
 *
 * `configurator.css` nasconde il numero con `font-size: 0` e al suo posto
 * disegna una spunta in `::before`. La riga qui sopra toglie la spunta —
 * giustamente, perche' «compilato» non e' «completato» e `is-done` la spunta
 * ce l'ha gia' — ma il numero restava a zero pixel.
 *
 * Il risultato era un cerchio rosa chiaro senza niente dentro: il quarto
 * passo non diceva ne' a che punto sei ne' che l'hai gia' risposto. Il testo
 * c'era ed era leggibile — terracotta su rosa, 4,60:1 — ma alto zero.
 *
 * Due fogli che si contraddicono, e nessuno dei due sbagliava da solo. */
.st-configurator--passi .st-steps__item.is-filled:not(.is-current) .st-steps__n {
  font-size: 12.5px;
}

/* La linea che unisce due cerchi. Non c'e' prima del primo. */
.st-configurator--passi .st-steps__item + .st-steps__item::before {
  content: "";
  height: 1px;
  background: var(--p-riga);
}

.st-configurator--passi .st-steps__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--p-tenue);
  white-space: nowrap;
}

.st-configurator--passi .st-steps__n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--p-riga);
  background: var(--p-scheda);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--p-tenue);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.st-configurator--passi .st-steps__titolo {
  font-size: .875rem;
}

.st-configurator--passi .st-steps__item.is-current .st-steps__n {
  background: var(--p-rame);
  border-color: var(--p-rame);
  color: #fff;
}

.st-configurator--passi .st-steps__item.is-current .st-steps__btn {
  color: var(--p-inchiostro);
  font-weight: 500;
}

/*
 * Il passo gia' fatto porta una spunta al posto del numero.
 *
 * Il segno si disegna con lo pseudo-elemento e non sostituendo il testo: il
 * numero resta nel documento per chi legge con la voce, dove «passo 2
 * completato» vale piu' di un carattere di spunta.
 */
.st-configurator--passi .st-steps__item.is-done .st-steps__n {
  border-color: var(--p-rame);
  color: transparent;
  position: relative;
}

.st-configurator--passi .st-steps__item.is-done .st-steps__n::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--p-rame);
  border-bottom: 1.5px solid var(--p-rame);
  transform: rotate(-45deg);
}

.st-configurator--passi .st-steps__btn:focus-visible {
  outline: 2px solid var(--p-rame);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ------------------------------------------------------------------ *
 * LE TRE COLONNE
 * ------------------------------------------------------------------ */

/*
 * LE PROPORZIONI DEL RIFERIMENTO
 *
 * Misurate sull'immagine del cliente, non scelte a occhio: anteprima 549,
 * scelta 482, riepilogo 266, con diciassette pixel fra una e l'altra. In
 * frazioni fa 1.139 : 1 : 266px fissi.
 *
 * La colonna piu' larga e' la prima. E' la differenza piu' grossa rispetto a
 * prima, dove l'anteprima era la piu' stretta delle tre: si vende una tenda
 * guardandola, e la colonna che la mostra non puo' essere quella sacrificata.
 */
/*
 * 396 / 560 / 340 — la priorita' e' cambiata
 *
 * Era 552 / 484 / 266: l'anteprima si prendeva il 41 per cento e il riepilogo
 * il 20. Ma nel riepilogo c'e' il prezzo, cioe' la cosa che il cliente
 * controlla a ogni scelta, e in venti pixel di larghezza in piu' o in meno una
 * fotografia non guadagna niente mentre una colonna di importi guadagna la
 * leggibilita'.
 *
 * La nuova ripartizione mette al centro la scelta (560, che porta i campioni
 * da 101 a 120 px — su un tessuto e' la differenza fra vedere la trama e no),
 * da' al riepilogo la massa che gli serve (340), e lascia all'anteprima 396,
 * che e' ancora piu' della meta' della colonna centrale.
 *
 * 396 non e' un numero scelto per estetica: con rapporto 1:1 fa 396 px di
 * altezza, e **entra in uno schermo da 900 insieme a testata e passi**. E' la
 * condizione che rende possibile appiccicarla senza che riempia la vista.
 *
 * 396 + 560 + 340 + 40 di distacchi = 1336.
 */
.st-configurator--passi .st-configurator__grid {
  display: grid;
  grid-template-columns: 396px minmax(0, 1fr) 340px;
  grid-template-areas:
    "passi  passi   passi"
    "vista  scelta  conto";
  align-items: start;
  gap: 20px;
  padding-bottom: 48px;
}

/*
 * NIENTE STICKY
 *
 * L'anteprima e il riepilogo restavano appesi mentre il centro scorreva, e a
 * meta' pagina si ritrovavano due schede ferme in mezzo al nulla, staccate da
 * cio' che avevano intorno. Nel riferimento sono tre schede su una riga: si
 * muovono insieme, e la pagina resta una cosa sola invece di tre pezzi che
 * scivolano l'uno sull'altro.
 */
/*
 * ANTEPRIMA APPICCICATA
 *
 * Restava ferma perche' a 552 px di larghezza e 662 di altezza appiccicarla
 * significava riempire lo schermo con una fotografia. A 396 il problema non
 * c'e' piu': sta in uno schermo, e la tenda che si sta configurando resta
 * sott'occhio per tutto il percorso invece di scomparire alla seconda scelta.
 *
 * Essendo un elemento di griglia, l'aggancio muore con il corpo del
 * configuratore: non puo' uscire dalla colonna ne' arrivare sopra la fascia o
 * il piede.
 */
.st-anteprima {
  grid-area: vista;
  position: sticky;
  /* Sotto la testata **e** sotto la barra dei passi: agganciate a 20 px
     finirebbero sotto di loro appena si scorre. */
  top: calc(var(--p-testata) + var(--p-passi) + 16px);
  align-self: start;
}

.st-configurator--passi .st-panels {
  grid-area: scelta;
  display: block;
}

/*
 * IL RIEPILOGO SI APPICCICA, MA SOLO QUANDO SERVE DAVVERO
 *
 * Toglierlo del tutto aveva risolto un problema e ne aveva creato un altro:
 * su un passo da settantacinque campioni si scorre per due schermate e si
 * perdono di vista prezzo, scelte fatte e pulsante. Rimetterlo sempre riportava
 * il difetto di prima — schede ferme a mezz'aria mentre il resto scorre.
 *
 * `position: sticky` su un elemento di griglia e' gia' confinato al proprio
 * spazio: non puo' uscire dalla colonna ne' sopravvivere alla fine del corpo
 * del configuratore, quindi non arriva mai sopra la fascia o il piede. Restava
 * da renderlo **condizionale**, e la condizione e' fisica, non scritta a mano:
 * `align-self: start` piu' un'altezza massima pari al viewport meno la testata.
 * Se il riepilogo ci sta e la colonna centrale e' corta, non c'e' scorrimento
 * da cui staccarsi e l'elemento non si muove mai — si comporta da solo come un
 * blocco normale. Se invece la colonna centrale e' piu' alta dello schermo,
 * l'aggancio entra in funzione perche' c'e' qualcosa da scorrere.
 *
 * Nessun salto di layout: `sticky` non toglie l'elemento dal flusso, quindi lo
 * spazio che occupa resta suo in ogni momento.
 *
 * `top` vale l'altezza della testata piu' un respiro: cosi' non ci finisce
 * sotto. La testata del sito non e' appiccicata, ma se un giorno lo diventasse
 * questa misura e' gia' quella giusta.
 */
.st-configurator--passi .st-summary {
  grid-area: conto;
  /* Nessuno scorrimento, in nessuna forma: ne' qui ne' su cio' che contiene.
     Il foglio comune lo dichiara per la versione dentro la scheda prodotto. */
  max-height: none;
  overflow: visible;
  position: sticky;
  top: calc(var(--p-testata) + var(--p-passi) + 16px);
  align-self: start;
  /*
   * NIENTE SCORRIMENTO DENTRO LA COLONNA
   *
   * Qui c'era un tetto d'altezza con `overflow-y: auto`. Serviva a un problema
   * vero — una colonna piu' alta dello schermo, agganciata in cima, tiene il
   * proprio fondo fuori dalla vista e il pulsante d'acquisto diventa
   * irraggiungibile — ma il rimedio era peggio: per comprare bisognava
   * scorrere **dentro** un riquadro, dentro una pagina che scorre gia'. Due
   * scorrimenti annidati, e quello che conta nascosto nel piu' interno.
   *
   * La soluzione non e' far scorrere il pannello: e' **tenerlo corto**. Cio'
   * che cresce senza limite e' l'elenco delle scelte, e solo quello ha un
   * tetto (sotto). Totale, avviso, azioni e pulsante restano sempre in vista,
   * perche' sono la ragione per cui la colonna e' agganciata.
   */
}

/* Chi ha chiesto meno movimento non vuole nemmeno questo. */
@media (prefers-reduced-motion: reduce) {
  .st-configurator--passi .st-summary { position: static; max-height: none; }
}

/* ------------------------------------------------------------------ *
 * L'ANTEPRIMA
 * ------------------------------------------------------------------ */

.st-anteprima__scena {
  position: relative;
  margin: 0;
  border-radius: var(--p-raggio);
  overflow: hidden;
  background: var(--p-scheda);
  box-shadow: var(--p-ombra);
  /*
   * Quadrata, non 5:6.
   *
   * Il mockup la disegna verticale, e su 552 px di colonna fa 662 px di
   * altezza: sommati a testata, briciole, titolo e passi, su uno schermo da
   * 900 la prima opzione da scegliere resta sotto la piega. Si arrivava sul
   * configuratore e la prima cosa da fare era scorrere.
   *
   * A 1:1 la tenda resta grande — 552 px, piu' della meta' della larghezza
   * utile — e le tre colonne cominciano insieme. E' una deroga al disegno,
   * decisa sapendo cosa costava: 110 px di altezza contro il primo gesto
   * della pagina.
   *
   * Il tetto serve agli schermi bassi, dove anche 552 sarebbero troppi.
   */
  aspect-ratio: 1 / 1;
}

.st-anteprima__scena img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.st-anteprima__avviso {
  margin: 12px 2px 0;
  font-size: var(--st-fs-micro);
  line-height: 1.5;
  color: var(--p-tenue);
}

/* ------------------------------------------------------------------ *
 * LA SCHEDA DELLA SCELTA
 * ------------------------------------------------------------------ */

/*
 * Tre classi e non due: qualcosa nel foglio comune imponeva quaranta pixel di
 * imbottitura per lato — ottanta tolti alla colonna — e la mia regola a due
 * classi perdeva senza dirlo. Con `.st-panels` in mezzo la dichiarazione qui
 * e' quella che vince, e i pixel tornano ai campioni.
 */
.st-configurator--passi .st-panels .st-panel {
  background: var(--p-scheda);
  border: 1px solid var(--p-riga);
  border-radius: var(--p-raggio);
  box-shadow: var(--p-ombra);
  padding: 24px 24px 0;
  margin: 0;
}

/*
 * L'INTESTAZIONE DEL PASSO NON E' APPICCICATA
 *
 * `configurator.css:899` la fissa a `top: 142px` con fondo bianco, imbottitura
 * e angoli arrotondati suoi. Scorrendo si staccava dai campi e restava sospesa
 * a mezz'aria: il titolo del passo compariva **da solo dentro una scheda
 * vuota**, che e' il difetto che il cliente ha fotografato.
 *
 * Un'intestazione appiccicata ha senso su una lista lunga di cui si perde il
 * capo. Qui la lista sta in una colonna che si vede tutta, e il titolo e' la
 * prima riga della scheda: se si stacca, la scheda diventa due schede.
 */
.st-configurator--passi .st-panels .st-panel__header {
  position: static;
  margin: 0 0 20px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  z-index: auto;
}

/* Stessa ragione per il disegno delle quote: appiccicato a 236 px si stacca
   dai campi che spiega, e spiegare qualcosa da cui ti sei allontanato non
   serve. */
.st-configurator--passi .st-misure__figura {
  position: static;
}

.st-configurator--passi .st-panel__header {
  margin-bottom: 20px;
  padding: 0;
  border: 0;
}

.st-configurator--passi .st-panel__conta {
  display: none;
}

.st-configurator--passi .st-panel__title {
  margin: 0;
  font-family: var(--st-font-display, Georgia, serif);
  font-weight: 400;
  letter-spacing: -.005em;
}

.st-configurator--passi .st-panel__note {
  margin: 8px 0 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--p-tenue);
}

/*
 * `.st-fields` aveva ventotto pixel di imbottitura per lato dentro un pannello
 * che ne ha gia' ventiquattro: cinquantadue per lato in tutto, centoquattro
 * tolti alla larghezza utile. Su una colonna da 485 pixel sono un quinto dello
 * spazio, ed erano il motivo per cui i campioni entravano in tre invece che in
 * quattro. L'aria attorno al contenuto la da' il pannello, una volta sola.
 */
.st-configurator--passi .st-fields {
  display: grid;
  gap: 26px;
  padding-left: 0;
  padding-right: 0;
}

.st-configurator--passi .st-field__label {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--p-inchiostro);
}

/* ------------------------------------------------------------------ *
 * LE OPZIONI
 * ------------------------------------------------------------------ */

/*
 * I due selettori nominati esistono per un effetto collaterale del
 * raggruppamento: `data-kind` sul pannello adesso porta la chiave del gruppo —
 * «modello», «tessuto», «misure» — e il foglio comune ha regole scritte per
 * `[data-kind="tessuto"]` e `[data-kind="colore"]` che prima colpivano un
 * pannello diverso. Fra queste una griglia a tre colonne
 * (`configurator.css:961`), che con l'attributo in mezzo pesa piu' della mia a
 * due classi e vinceva in silenzio: il passo dei tessuti restava a tre
 * campioni mentre tutti gli altri erano passati a quattro.
 */
/*
 * I GRUPPI CORTI STANNO SU DUE COLONNE, NON SU UNA
 *
 * `configurator.css:182` da' corsie di almeno 240 px ai gruppi con quattro
 * opzioni o meno. La ragione e' buona: quelle opzioni sono spesso disegni di
 * installazione, e un disegno rimpicciolito a cento pixel non spiega piu'
 * niente. Ma il calcolo era tarato su un pannello largo: in una colonna da 434
 * px entra **una sola** corsia da 240, e le opzioni escono una per riga —
 * quattro schermate per scegliere fra quattro cose.
 *
 * Due colonne tengono insieme le due esigenze: il disegno resta grande abbastanza
 * per leggersi (~207 px, il doppio di un campione normale) e il gruppo si vede
 * tutto senza scorrere.
 *
 * La specificita' deve superare quella dell'originale — una classe piu' un
 * `:has()` che vale quanto il suo argomento — quindi serve il cancello della
 * pagina davanti.
 */
.st-configurator--passi .st-choices--visual:has(.st-choice:nth-child(-n+4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Sotto i 560 px di colonna anche due sono troppe: il disegno tornerebbe
   piccolo come prima, e allora tanto vale una sola grande. */
@media (max-width: 560px) {
  .st-configurator--passi .st-choices--visual:has(.st-choice:nth-child(-n+4):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.st-configurator--passi .st-choices--visual,
.st-configurator--passi .st-panel[data-kind="tessuto"] .st-choices--visual,
.st-configurator--passi .st-panel[data-kind="colore"] .st-choices--visual {
  display: grid;
  /* Quattro campioni per riga come nel riferimento. `auto-fill` con un minimo
     basso li fa quattro sulla colonna centrale a schermo intero e scende a tre
     e a due da solo, senza un punto di rottura scritto a mano per ognuno. */
  /* Quattro per riga come nel riferimento. Con 437 pixel utili e dieci di
     distacco, il minimo che ne fa entrare quattro e' 96: `auto-fill` scende
     poi da solo a tre e a due quando la colonna si stringe, senza un punto di
     rottura scritto a mano per ogni misura di schermo. */
  /*
   * Quattro per riga, e il minimo va rialzato quando la colonna cresce.
   *
   * Con 436 px utili il minimo era 92, ed era giusto. Portata la colonna
   * centrale a 560 — quindi 512 utili — lo stesso 92 ne fa entrare **cinque**:
   * `auto-fill` riempie finche' ci sta, e cinque campioni da 92 sono piu'
   * stretti di quattro da 120. Il riferimento ne vuole quattro, e su un
   * tessuto quei ventotto pixel in piu' sono la trama che si vede.
   *
   * 112 e' il minimo che tiene quattro e rifiuta cinque: 5x112 piu' quattro
   * distacchi fa 600, oltre i 512 disponibili. `auto-fill` scende poi da solo
   * a tre e a due quando la colonna si stringe davvero.
   */
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}

.st-configurator--passi .st-choices--visual .st-choice {
  display: block;
  position: relative;
  padding: 0 0 10px;
  border: 1.5px solid var(--p-riga);
  border-radius: 10px;
  background: var(--p-scheda);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.st-configurator--passi .st-choices--visual .st-choice:hover {
  border-color: #D6C7B5;
}

.st-configurator--passi .st-choice__media {
  display: block;
  aspect-ratio: 1 / 1;
  background: #F4F0EB;
  margin-bottom: 8px;
}

.st-configurator--passi .st-choice__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
 * L'ETICHETTA SI FERMA A TRE RIGHE
 *
 * I nomi del catalogo sono lunghi: «Cover e Coprivite in Plastica, Staffa in
 * Metallo Profilo di premontaggio» su una scheda da cento pixel occupa cinque
 * righe. Le schede finivano alte una il doppio dell'altra e la griglia
 * diventava un merletto.
 *
 * Tre righe, poi i puntini. Il nome intero resta nel `title` e nel testo
 * alternativo, quindi non si perde: si perde solo il diritto di sfondare la
 * riga. E l'altezza minima tiene allineate anche quelle corte, cosi' le
 * cornici di selezione stanno sulla stessa linea.
 */
.st-configurator--passi .st-choice__text {
  display: block;
  padding: 0 10px;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--p-inchiostro);
}

/* Il ritaglio sta sul nome, non sul contenitore: il sovrapprezzo gli vive
   accanto e deve restare visibile anche quando il nome finisce nei puntini. */
.st-configurator--passi .st-choice__nome {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.35em;
}

.st-configurator--passi .st-choice__price {
  display: block;
  margin-top: 3px;
  font-size: var(--st-fs-micro);
  color: var(--p-tenue);
  font-variant-numeric: tabular-nums;
}

/*
 * La scelta fatta: cornice rame e spunta nell'angolo.
 *
 * Il quadratino nasce con la scheda invece di comparire al momento della
 * scelta: un elemento che si aggiunge sposta di un pelo quello che ha
 * intorno, e su una griglia di venti campioni il salto si vede.
 */
.st-configurator--passi .st-choices--visual .st-choice::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--p-rame) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6 4 7.6 10 1.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: 0;
  transform: scale(.7);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}

.st-configurator--passi .st-choices--visual .st-choice:has(input:checked) {
  border-color: var(--p-rame);
}

.st-configurator--passi .st-choices--visual .st-choice:has(input:checked)::after {
  opacity: 1;
  transform: scale(1);
}

.st-configurator--passi .st-choice:has(input:focus-visible) {
  outline: 2px solid var(--p-rame);
  outline-offset: 2px;
}

/* Le opzioni senza immagine restano righe, non diventano schede vuote. */
.st-configurator--passi .st-choices:not(.st-choices--visual) {
  display: grid;
  gap: 8px;
}

.st-configurator--passi .st-choices:not(.st-choices--visual) .st-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--p-riga);
  border-radius: 10px;
  cursor: pointer;
  font-size: .875rem;
}

.st-configurator--passi .st-choices:not(.st-choices--visual) .st-choice:has(input:checked) {
  border-color: var(--p-rame);
  background: var(--p-rame-chiaro);
}

.st-configurator--passi .st-choice__swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(42, 39, 36, .14);
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------ *
 * LE PILLOLE DI FILTRO
 * ------------------------------------------------------------------ */

.st-configurator--passi .st-pillole {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.st-configurator--passi .st-pillola {
  padding: 8px 15px;
  border: 1px solid var(--p-riga);
  border-radius: 999px;
  background: var(--p-scheda);
  font: inherit;
  font-size: .8125rem;
  color: var(--p-tenue);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.st-configurator--passi .st-pillola:hover {
  border-color: #D6C7B5;
  color: var(--p-inchiostro);
}

/*
 * Lo stato acceso si legge da `aria-pressed`, non da una classe messa a mano.
 *
 * Cosi' non esistono due verita' da tenere allineate: quella che vede chi
 * guarda e quella che sente chi naviga con la voce. Se il pulsante e' premuto,
 * lo e' per tutti e due.
 */
.st-configurator--passi .st-pillola[aria-pressed="true"] {
  background: var(--p-rame);
  border-color: var(--p-rame);
  color: #fff;
}

.st-configurator--passi .st-pillola:focus-visible {
  outline: 2px solid var(--p-rame);
  outline-offset: 2px;
}

/* Il campo di ricerca resta, ma sottovoce: serve a chi il nome ce l'ha gia'
   in testa, mentre le pillole servono a chi sta guardando. */
.st-configurator--passi .st-scelte__barra {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.st-configurator--passi .st-scelte__filtro {
  flex: 1 1 auto;
  max-width: 280px;
}

.st-configurator--passi .st-scelte__filtro input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--p-riga);
  border-radius: 9px;
  background: var(--p-scheda);
  font: inherit;
  font-size: .875rem;
}

.st-configurator--passi .st-scelte__filtro input:focus-visible {
  outline: 2px solid var(--p-rame);
  outline-offset: 1px;
  border-color: var(--p-rame);
}

.st-configurator--passi .st-scelte__conta {
  font-size: .8125rem;
  color: var(--p-tenue);
  white-space: nowrap;
}

.st-configurator--passi .st-scelte__altri {
  margin-top: 12px;
  padding: 10px 18px;
  border: 1px solid var(--p-riga);
  border-radius: 9px;
  background: var(--p-scheda);
  font: inherit;
  font-size: .8125rem;
  color: var(--p-inchiostro);
  cursor: pointer;
}

.st-configurator--passi .st-scelte__altri:hover {
  border-color: #D6C7B5;
}

.st-configurator--passi .st-choice[data-nascosto] {
  display: none;
}

/* ------------------------------------------------------------------ *
 * LA FASCIA DELLE RASSICURAZIONI
 * ------------------------------------------------------------------ */

.st-rassicura {
  border-top: 1px solid var(--p-riga, #E8E1D9);
  margin-top: 8px;
  padding: 26px 0 44px;
}

.st-rassicura__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-rassicura__voce {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.st-rassicura__voce svg {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: #B4551F;
}

.st-rassicura__titolo {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  color: #2A2724;
}

.st-rassicura__nota {
  display: block;
  margin-top: 2px;
  font-size: .8125rem;
  line-height: 1.45;
  color: #7C766F;
}

@media (max-width: 640px) {
  .st-rassicura__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

/* ------------------------------------------------------------------ *
 * AVANTI E INDIETRO
 * ------------------------------------------------------------------ */

/*
 * AVANTI RESTA A PORTATA, SEMPRE
 *
 * Il pannello delle scelte e' alto tremilacinquecento pixel: per premere
 * «avanti» bisognava scorrere tre schermate e mezzo, e chi non voleva
 * cambiare nulla in quel passo doveva comunque attraversarlo tutto. E' il
 * punto in cui si perde la gente — non perche' il passo sia difficile, ma
 * perche' proseguire costa piu' che fermarsi.
 *
 * PERCHE' ORA VA BENE E PRIMA NO
 *
 * Una versione precedente era gia' appiccicata ed e' stata respinta: era una
 * scheda bianca che galleggiava **in mezzo** alle opzioni e le tagliava a
 * meta', perche' aveva i suoi margini e il suo fondo e sembrava capitata li'.
 *
 * Qui la barra e' larga quanto la scheda — i margini negativi la portano ai
 * bordi — ha il fondo pieno, un filo sopra e l'angolo inferiore arrotondato
 * come la scheda che chiude. Non galleggia sopra il contenuto: **e' il fondo
 * della scheda**, che resta agganciato mentre il resto le scorre dentro.
 *
 * `bottom: 0` la ferma al fondo della finestra; essendo dentro il pannello,
 * l'aggancio muore con lui e non arriva mai sulla fascia o sul piede. Non e'
 * una seconda barra fissa: sul telefono, dove esiste gia' la barra del
 * totale, questa torna statica.
 */
.st-configurator--passi .st-panel__nav {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px -24px 0;
  padding: 16px 24px;
  border-top: 1px solid var(--p-riga);
  border-radius: 0 0 var(--p-raggio) var(--p-raggio);
  background: var(--p-scheda);
  box-shadow: 0 -6px 18px -12px rgba(42, 39, 36, .28);
}

.st-configurator--passi .st-panel__prev {
  order: 1;
  margin-right: auto;
  background: none;
  border: 0;
  padding: 8px 0;
  font: inherit;
  font-size: .875rem;
  color: var(--p-tenue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.st-configurator--passi .st-panel__next {
  order: 2;
  margin-left: auto;
  padding: 12px 24px;
  border: 0;
  border-radius: 9px;
  background: var(--p-rame);
  color: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
}

.st-configurator--passi .st-panel__next:hover {
  background: #9C4718;
}

/* ------------------------------------------------------------------ *
 * IL RIEPILOGO
 * ------------------------------------------------------------------ */

.st-configurator--passi .st-summary__inner {
  background: var(--p-scheda);
  border: 1px solid var(--p-riga);
  border-radius: var(--p-raggio);
  box-shadow: var(--p-ombra);
  padding: 24px;
}

/*
 * IL TOTALE E' L'ANCORA DELLA COLONNA
 *
 * Era 24 px, cioe' lo stesso peso delle righe che lo compongono: si leggeva
 * come l'ultima voce di un elenco invece che come la risposta. A 28 px, con una
 * linea in inchiostro sopra e aria attorno, diventa la cosa che si vede per
 * prima guardando quella colonna — che e' il motivo per cui la colonna esiste.
 */
.st-configurator--passi .st-summary__total {
  margin-top: 18px;
  padding-top: 16px;
  align-items: baseline;
}

.st-configurator--passi .st-summary__total-label {
  font-size: 1rem;
  font-weight: 500;
}

.st-configurator--passi .st-summary__total-value {
  font-size: 1.75rem;
  line-height: 1.05;
  letter-spacing: -.01em;
}

/*
 * CIO' CHE MANCA SI SCRIVE IN RAME
 *
 * Il riquadro «completa i campi obbligatori» era beige su beige e si leggeva
 * come una nota a margine. E' invece l'unica cosa che separa il cliente dal
 * prezzo: merita il colore che in questa pagina significa «qui si agisce».
 * Resta un riquadro tenue — non un allarme — ma con il bordo e il testo che si
 * vedono.
 */
.st-configurator--passi .st-summary__message {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(180, 90, 23, .28);
  border-radius: 8px;
  background: var(--p-rame-chiaro);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--p-inchiostro);
}

.st-configurator--passi .st-summary__message a {
  color: var(--p-rame);
  font-weight: 500;
}

/*
 * SALVA E CONDIVIDI SCENDONO DI RANGO
 *
 * Erano due pulsanti bordati larghi quanto «aggiungi al carrello», e a colpo
 * d'occhio pesavano quanto lui: tre riquadri uguali, di cui due per azioni che
 * quasi nessuno compie al primo passaggio. Diventano due collegamenti
 * testuali, affiancati, sotto la CTA.
 */
/*
 * Erano due collegamenti che finivano su due righe centrate, come capitati li'
 * per caso: i pulsanti del foglio comune sono dichiarati a larghezza piena, e
 * un `display: flex` sul contenitore non basta a stringerli. Qui si dichiara
 * anche la larghezza di cio' che sta dentro.
 */
.st-configurator--passi .st-summary__keep {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--p-riga);
}

.st-configurator--passi .st-summary__keep > * {
  width: auto;
  flex: 0 0 auto;
  justify-content: flex-start;
  text-align: left;
}

.st-configurator--passi .st-summary__keep-btn {
  flex: 0 0 auto;
  min-height: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  font-size: var(--st-fs-micro);
  color: var(--p-tenue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.st-configurator--passi .st-summary__keep-btn:hover {
  color: var(--p-rame);
}

.st-configurator--passi .st-summary__keep-btn svg {
  width: 14px;
  height: 14px;
}

/* La quantita' non e' una scelta di prodotto: sta accanto alla CTA, piccola,
   non sopra di lei a tutta larghezza come se fosse un passo. */
.st-configurator--passi .st-summary__qty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: .8125rem;
  color: var(--p-tenue);
}

.st-configurator--passi .st-summary__qty input {
  width: 72px;
  height: 44px;
  text-align: center;
  border: 1px solid var(--p-riga);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

.st-configurator--passi .st-button--primary {
  height: 56px;
  font-size: .875rem;
}

/* La fascia di fiducia chiude il pannello con un fondo suo: senza, quelle tre
   righe si confondono con le note del prezzo che hanno sopra. */
.st-configurator--passi .st-summary__reassurance {
  margin: 18px -24px -24px;
  padding: 16px 24px;
  border-top: 1px solid var(--p-riga);
  border-radius: 0 0 var(--p-raggio) var(--p-raggio);
  background: var(--p-fondo);
  font-size: .75rem;
  line-height: 1.55;
  color: var(--p-tenue);
  text-align: center;
}

/*
 * L'intestazione torna visibile: `configurator.css` la spegneva con
 * `display: none`, e la colonna del prezzo cominciava con una linea vuota.
 * Servono due classi davanti per superare quella regola.
 */
.st-configurator--passi .st-summary .st-summary__testa {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.st-configurator--passi .st-summary .st-summary__mini {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--p-fondo);
}

.st-configurator--passi .st-summary .st-summary__mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.st-configurator--passi .st-summary .st-summary__ident { min-width: 0; }

.st-configurator--passi .st-summary .st-summary__eyebrow {
  display: block;
  margin: 0 0 3px;
  /* Il gradino minimo della scala, non un numero: e' l'etichetta sopra il
     nome del prodotto nella colonna del prezzo. Una regola piu' avanti in
     questo stesso foglio provava a portarla a 12 e perdeva, perche' ha una
     classe in meno; adesso dicono la stessa cosa e nessuna sorprende
     l'altra. */
  font-size: var(--st-fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--p-tenue);
}

.st-configurator--passi .st-summary .st-summary__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-family: var(--st-font-display, Georgia, serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
}

.st-configurator--passi .st-summary__choices {
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--p-riga);
  display: grid;
  gap: 9px;
  font-size: .8125rem;
}

.st-configurator--passi .st-summary__choices > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}

.st-configurator--passi .st-summary__choices dt {
  color: var(--p-tenue);
  white-space: nowrap;
}

.st-configurator--passi .st-summary__choices dd {
  margin: 0;
  text-align: right;
}

.st-configurator--passi .st-summary__empty {
  margin: 0;
  font-size: .8125rem;
  color: var(--p-tenue);
}

/*
 * IL PREZZO SCOMPOSTO
 *
 * E' la parte del riferimento che regge sui dati veri: `/calculate` restituisce
 * gia' `lines`, una voce per riga con etichetta e importo, ripulita lato server
 * da formule e chiavi interne. Qui si mostra quello che arriva — non una
 * scomposizione inventata per far somigliare la pagina al mockup.
 */
.st-configurator--passi .st-summary__lines {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--p-riga);
  display: grid;
  gap: 8px;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}

.st-configurator--passi .st-summary__lines > * {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--p-tenue);
}

.st-configurator--passi .st-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--p-inchiostro);
}

.st-configurator--passi .st-summary__total-label {
  font-size: .9375rem;
}

.st-configurator--passi .st-summary__total-value {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.st-configurator--passi .st-summary__tax {
  margin: 3px 0 0;
  text-align: right;
  font-size: var(--st-fs-micro);
  color: var(--p-tenue);
}

.st-configurator--passi .st-summary__form {
  margin-top: 18px;
}

.st-configurator--passi .st-button--primary {
  background: var(--p-rame);
  border-color: var(--p-rame);
  border-radius: 9px;
  padding: 14px 20px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .8125rem;
}

.st-configurator--passi .st-button--primary:hover {
  background: #9C4718;
  border-color: #9C4718;
}

/* ------------------------------------------------------------------ *
 * SCHERMI STRETTI
 * ------------------------------------------------------------------ */

@media (max-width: 1140px) {
  .st-configurator--passi .st-configurator__grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas:
      "passi  passi"
      "vista  conto"
      "scelta conto";
  }
}

@media (max-width: 860px) {
  .st-configurator--passi .st-configurator__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "passi"
      "vista"
      "scelta"
      "conto";
  }

  /* Due elementi appiccicati in cima, uno sopra l'altro, mangiano mezzo
     schermo di telefono: su stretto scorrono con il resto. */
  .st-anteprima,
  .st-configurator--passi .st-summary {
    position: static;
  }

  .st-configurator--passi .st-panel {
    padding: 20px 18px 0;
  }

  .st-configurator--passi .st-panel__nav {
    position: static;
    margin: 20px -18px 0;
    padding: 14px 18px;
    box-shadow: none;
  }
}


/* ==================================================================== *
 * IL PASSO DELLE MISURE
 * ==================================================================== */

/*
 * L'ANTEPRIMA NON SI RIPETE DENTRO IL PANNELLO
 *
 * Lo script disegna un'anteprima con le quote dentro il passo delle misure.
 * Aveva senso quando la pagina non ne aveva un'altra; adesso a sinistra c'e'
 * la stessa fotografia, grande e agganciata, che resta visibile per tutto il
 * percorso. Ripeterla al centro costava quattrocentotrenta pixel di altezza e
 * spingeva i due campi — l'unica cosa da fare in quel passo — sotto la piega.
 *
 * Si nasconde solo nella pagina a passi: nel configuratore dentro la scheda
 * prodotto quell'anteprima e' l'unica che esiste e deve restare.
 */
.st-configurator--passi .st-preview {
  display: none;
}

/*
 * I CAMPI DI MISURA
 *
 * Erano alti 64 px con il testo a 24 e il segnaposto tagliato a meta'
 * («Inserisci la larg…»), e i due comandi + e − erano quadrati grigi staccati
 * dal campo: tre riquadri per scrivere un numero di tre cifre.
 *
 * Un campo numerico deve sembrare un campo numerico. Qui i tre pezzi tornano
 * un oggetto solo — bordo unico, comandi dentro, unita' attaccata — alto
 * quanto gli altri campi del sito.
 */
.st-configurator--passi .st-number {
  display: flex;
  align-items: stretch;
  max-width: 260px;
  height: 52px;
  border: 1px solid var(--p-riga);
  border-radius: var(--st-r-campo, 8px);
  background: #fff;
  overflow: hidden;
}

.st-configurator--passi .st-number:focus-within {
  border-color: var(--p-rame);
  outline: 2px solid var(--p-rame);
  outline-offset: 1px;
}

.st-configurator--passi .st-number input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: none;
  font: 500 1.0625rem/1 var(--st-font-body);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--p-inchiostro);
}

.st-configurator--passi .st-number input:focus-visible { outline: none; }

/* Il segnaposto dice l'ordine di grandezza, non una frase: «Inserisci la
   larghezza in centimetri» in un campo da centoventi pixel non si legge
   comunque, e tagliato a meta' sembra un difetto. */
.st-configurator--passi .st-number input::placeholder {
  font-weight: 400;
  font-size: .9375rem;
  color: var(--p-debole, #9A948C);
}

/* I comandi stanno **dentro** il bordo e sono separati da un filo, non da uno
   spazio: cosi' si legge un solo oggetto invece di tre. */
.st-configurator--passi .st-num__btn,
.st-configurator--passi .st-number button {
  flex: 0 0 44px;
  width: 44px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--p-fondo);
  color: var(--p-inchiostro);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.st-configurator--passi .st-number button:first-child { border-right: 1px solid var(--p-riga); }
.st-configurator--passi .st-number button:last-of-type { border-left: 1px solid var(--p-riga); }
.st-configurator--passi .st-number button:hover { background: #F0EAE2; }

.st-configurator--passi .st-number__unit {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0 14px;
  border-left: 1px solid var(--p-riga);
  background: var(--p-fondo);
  font-size: .8125rem;
  color: var(--p-tenue);
}

/* Etichetta e limiti: minuscolo e piccolo. In maiuscolo a sedici pixel
   sembravano il titolo del passo, e sopra c'era gia' quello vero. */
.st-configurator--passi .st-panel[data-kind="misure"] .st-field__label {
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.st-configurator--passi .st-panel[data-kind="misure"] .st-field__hint {
  margin-top: 8px;
  font-size: var(--st-fs-micro);
  color: var(--p-tenue);
}

/* Due misure affiancate: sono una coppia, e in colonna la seconda finiva
   sotto la piega. */
.st-configurator--passi .st-panel[data-kind="misure"] .st-fields {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}


/*
 * SCHERMI BASSI: IL PANNELLO SI STRINGE, NON SCORRE
 *
 * Su un portatile da 720 px di altezza il pannello arrivava a 542 e il
 * pulsante d'acquisto restava tagliato di una quindicina di pixel — abbastanza
 * per non vederlo, che e' come non averlo.
 *
 * La risposta non e' rimettere uno scorrimento interno: e' togliere da li'
 * quello che puo' stare altrove. La fascia di fiducia in fondo al pannello
 * ripete cose che la pagina dice gia' nella sua fascia; l'elenco delle scelte
 * si accorcia; le imbottiture si stringono. Il prezzo e il pulsante non si
 * toccano: sono il motivo per cui il pannello e' agganciato.
 */
@media (max-height: 820px) and (min-width: 1081px) {
  .st-configurator--passi .st-summary__inner { padding: 18px; }
  .st-configurator--passi .st-summary__testa { margin-bottom: 14px; }
  .st-configurator--passi .st-summary__mini { width: 44px; height: 44px; }
  .st-configurator--passi .st-summary__choices { max-height: 104px; }
  .st-configurator--passi .st-summary__total { margin-top: 12px; padding-top: 12px; }
  .st-configurator--passi .st-summary__keep { margin-top: 12px; padding-top: 10px; }
  .st-configurator--passi .st-summary__qty { margin-bottom: 10px; }

  /* Ripete la fascia che la pagina ha gia' in fondo: qui costa lo spazio del
     pulsante, e sotto vale piu' il pulsante. */
  .st-configurator--passi .st-summary__reassurance { display: none; }
}


/* ==================================================================== *
 * L'ORDINE DEL PANNELLO: PRIMA IL PREZZO E IL PULSANTE, POI IL RESTO
 * ==================================================================== */

/*
 * Nessuna parte di questa colonna scorre al suo interno. Ci ho provato due
 * volte — prima con un tetto sull'intero pannello, poi con un tetto sul solo
 * elenco delle scelte — e tutte e due le volte il risultato era lo stesso: un
 * riquadro che scorre dentro una pagina che scorre gia'.
 *
 * Il problema vero non era l'altezza: era **l'ordine**. Con le scelte in cima
 * e il pulsante in fondo, piu' cose sceglie il cliente piu' il pulsante si
 * allontana — cioe' il percorso punisce chi lo sta completando.
 *
 * Rovesciato: subito sotto il nome del prodotto ci sono il totale e il
 * pulsante, che sono le due cose per cui questa colonna esiste. I dettagli —
 * cosa ho scelto, come si scompone il prezzo, salva e condividi — stanno
 * sotto, e si leggono quando servono. Cosi' il pannello puo' essere lungo
 * quanto vuole: cio' che conta e' sempre nella parte alta, e la parte alta e'
 * quella che l'aggancio tiene in vista.
 *
 * L'ordine si dichiara qui e non nel PHP perche' il marcatore serve anche al
 * configuratore dentro la scheda prodotto, dove la colonna non e' agganciata e
 * l'ordine di lettura naturale — prima cosa ho scelto, poi quanto costa — e'
 * quello giusto.
 */
.st-configurator--passi .st-summary__inner {
  display: flex;
  flex-direction: column;
}

.st-configurator--passi .st-summary__testa        { order: 1; }
.st-configurator--passi .st-summary__total        { order: 2; margin-top: 0; }
.st-configurator--passi .st-summary__tax          { order: 3; }
.st-configurator--passi .st-summary__message      { order: 4; }
.st-configurator--passi .st-summary__form         { order: 5; }
.st-configurator--passi .st-summary__qty          { order: 5; }
.st-configurator--passi .st-quote                 { order: 6; }
.st-configurator--passi .st-summary__choices      { order: 7; }
.st-configurator--passi .st-summary__lines        { order: 8; }
.st-configurator--passi .st-summary__saved        { order: 9; }
.st-configurator--passi .st-summary__keep         { order: 10; }
.st-configurator--passi .st-summary__reassurance  { order: 11; }

/* Il totale apre il pannello: sopra di lui non c'e' piu' un elenco, quindi la
   linea in inchiostro che lo separava dalle voci non serve — la sua forza ora
   gliela da' la posizione. */
.st-configurator--passi .st-summary__total {
  border-top: 0;
  padding-top: 0;
  margin-bottom: 2px;
}

/* Le scelte tornano un elenco leggibile sotto la linea, senza tetti ne'
   barre di scorrimento. */
.st-configurator--passi .st-summary__choices {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--p-riga);
}

/* ==================================================================== *
 * LA PAGINA DEL CONFIGURATORE NON HA PIEDE
 * ==================================================================== */

.st-senza-piede .st-footer,
.st-senza-piede .st-trust,
.st-senza-piede .ct-footer,
.st-senza-piede footer[class*="footer"] {
  display: none;
}

/* Al suo posto una riga sola con i recapiti: chi si blocca su una misura deve
   poter chiedere senza uscire dalla pagina. */
/*
 * L'AIUTO STA SOTTO L'ANTEPRIMA, NON IN FONDO ALLA PAGINA
 *
 * Era una riga a tutta larghezza dopo il contenuto: per vederla bisognava
 * arrivare in fondo, cioe' proprio dove non arriva chi si e' bloccato a meta'.
 *
 * Nella colonna di sinistra sta sotto la fotografia, dentro la parte
 * agganciata: resta sott'occhio per tutto il percorso senza rubare spazio al
 * centro, e chi ha un dubbio sulla misura ha il numero davanti nel momento in
 * cui il dubbio gli viene.
 */
.st-anteprima__aiuto {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--p-riga);
  border-radius: var(--p-raggio);
  background: #fff;
}

.st-anteprima__aiuto p {
  margin: 0 0 8px;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--p-tenue);
}

.st-anteprima__aiuto a {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  color: var(--p-rame);
  text-decoration: none;
}

.st-anteprima__aiuto a + a { margin-top: 4px; }
.st-anteprima__aiuto a:hover { text-decoration: underline; text-underline-offset: 3px; }

.st-configpage__aiuto-rec a {
  color: var(--p-rame);
  font-weight: 500;
  text-decoration: none;
}

.st-configpage__aiuto-rec a:hover { text-decoration: underline; text-underline-offset: 3px; }


/*
 * Su schermi stretti spariscono le **etichette**, non i passi.
 *
 * Cinque cerchi da trenta pixel stanno in trecentonovanta; cinque etichette
 * no. Fra mostrare tre passi su cinque e mostrarne cinque senza nome, il
 * secondo dice comunque a che punto sei e quanto manca — che e' tutto quello
 * per cui quella fila esiste. Il nome del passo corrente e' scritto grande
 * subito sotto, come titolo della scheda.
 */
@media (max-width: 900px) {
    .st-configurator--passi .st-anteprima { margin-bottom: 10px; }
    .st-configurator--passi .st-anteprima__scena { aspect-ratio: auto; height: 96px; }
    .st-configurator--passi .st-anteprima__img { object-fit: contain; }
    .st-configurator--passi .st-anteprima__avviso { font-size: 12px; line-height: 1.5; margin-block: 6px 0; }
  /* `.st-steps__testo`, non `.st-steps__et`: quest'ultima e' la classe del
     componente generico, e nel configuratore non esiste. Con il nome sbagliato
     la regola non toccava niente e la fila continuava a scorrere — quattro
     passi visibili su cinque a 768, due a 390. */
  .st-configurator--passi .st-steps__testo { display: none; }
  .st-configurator--passi .st-steps__btn { gap: 0; padding: 6px; }
  .st-configurator--passi .st-steps__item + .st-steps__item::before { margin: 0 6px; min-width: 8px; }
}


/*
 * LA TESTA DELLA PAGINA NON SERVE PIU'
 *
 * Briciole e nome del prodotto occupavano centoventi pixel sopra i passi, e
 * dicevano due cose che il cliente sa gia': da dove viene — ci e' arrivato
 * adesso, cliccando — e che tenda sta configurando, che ha davanti in
 * fotografia a sinistra e scritta nel riepilogo a destra. Tre volte la stessa
 * informazione, e centoventi pixel tolti al lavoro.
 *
 * Sparendo, i passi salgono in cima e la prima opzione da scegliere entra
 * nella prima schermata.
 */
.st-configpage__testa {
  display: none;
}

/* Senza la testa, il corpo comincia subito sotto la testata del sito. */
.st-configpage .st-container:first-of-type {
  padding-top: 18px;
}

/*
 * IL RIEPILOGO STA IN UNA SCHERMATA
 *
 * Deve entrare tutto senza scorrere, quindi le voci si accorciano invece di
 * moltiplicarsi: le scelte fatte si leggono su una riga per passo, non una per
 * campo, e la scomposizione del prezzo mostra le voci che pesano — non ogni
 * singolo supplemento da zero euro.
 */
.st-configurator--passi .st-summary__choices > div {
  gap: 10px;
  padding: 5px 0;
  font-size: var(--st-fs-micro);
}

.st-configurator--passi .st-summary__lines > * {
  padding: 3px 0;
  font-size: var(--st-fs-micro);
}

/* Le voci senza importo non dicono niente e occupano una riga: via. */
.st-configurator--passi .st-summary__lines .st-summary__line:empty { display: none; }

/* ==================================================================== *
 * LA PAGINA NON SCORRE. SCORRE UNA COLONNA SOLA.
 *
 * Finora la pagina scorreva e le colonne restavano agganciate: funzionava, ma
 * restava una pagina lunga tremilacinquecento pixel di cui si vedeva una
 * fetta. Muovendo la rotella si muoveva tutto — testata compresa — e la
 * sensazione era di stare dentro un documento, non dentro uno strumento.
 *
 * Qui il configuratore diventa una schermata: alta quanto la finestra, ferma.
 * Le opzioni scorrono **dentro** la loro colonna, che e' l'unica cosa che ha
 * senso scorrere perche' e' l'unica che puo' contenere seicento voci.
 * Anteprima e riepilogo non si muovono affatto — non perche' siano agganciati,
 * ma perche' non c'e' piu' niente che li possa spostare.
 *
 * Il prezzo di questa scelta e' che il riepilogo **deve entrare**: se non
 * entra, scorre lui, ed e' l'unica eccezione ammessa.
 *
 * Si applica solo da 1081 in su: su un telefono una schermata fissa con tre
 * pannelli e' una gabbia, e li' la pagina torna a scorrere normalmente.
 * ==================================================================== */

@media (min-width: 1081px) {
  /* La pagina non scorre: lo fa una colonna, dentro. */
  html:has(body.st-senza-piede),
  body.st-senza-piede { overflow: hidden; height: 100%; }

  .st-configpage {
    display: flex;
    flex-direction: column;
    /*
     * Sopra il configuratore non c'e' solo la testata: c'e' anche la barra
     * delle rassicurazioni, quarantadue pixel. Sottraendo la sola testata
     * restavano centoventi pixel di pagina oltre la finestra — ed erano
     * esattamente i centoventi che continuavano a scorrere.
     */
    /*
     * `--st-sopra` la scrive il copione misurando dove comincia questa pagina.
     * Il ripiego resta per il caso in cui il copione non parta: sbaglia di un
     * pixel, e un pixel sbagliato e' meglio di una pagina alta quanto lo
     * schermo intero che nasconde la meta' di sotto.
     */
    height: calc(100dvh - var(--st-sopra, 120px));
    overflow: hidden;
  }

  .st-configpage > .st-container {
    flex: 1 1 auto;
    min-height: 0;      /* senza, il figlio non puo' rimpicciolirsi e sfonda */
    display: flex;
    flex-direction: column;
    padding-top: 14px;
    padding-bottom: 0;
  }

  /*
   * `.st-configurator` deve essere anche **contenitore** flessibile, non solo
   * elemento flessibile.
   *
   * Gli avevo dato `flex: 1 1 auto` e lo stesso alla griglia dentro: ma un
   * `flex` su un figlio vale solo se il genitore e' un contenitore flex, e
   * questo era rimasto `block`. La griglia non riceveva altezza, `.st-panels`
   * cresceva quanto il contenuto, e la colonna non aveva niente da far
   * scorrere — restava lunga e basta.
   */
  .st-configurator--passi {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .st-configurator--passi .st-configurator__grid {
    flex: 1 1 auto;
    min-height: 0;
  }

  .st-configurator--passi .st-configurator__grid {
    grid-template-rows: auto minmax(0, 1fr);
    padding-bottom: 0;
  }

  /* La barra dei passi non ha piu' bisogno di essere agganciata: non c'e'
     niente che le scorra sotto. */
  .st-configurator--passi .st-steps {
    position: static;
    padding: 0 0 14px;
  }

  /* Le tre colonne sono alte quanto la riga e non di piu'. */
  .st-anteprima,
  .st-configurator--passi .st-panels,
  .st-configurator--passi .st-summary {
    position: static;
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  /* L'UNICA che scorre. La barra sta dentro la scheda, non sul bordo dello
     schermo, cosi' si capisce cosa si sta scorrendo. */
  .st-configurator--passi .st-panels {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--p-riga) transparent;
  }

  .st-configurator--passi .st-panels::-webkit-scrollbar { width: 6px; }
  .st-configurator--passi .st-panels::-webkit-scrollbar-thumb {
    background: var(--p-riga);
    border-radius: 6px;
  }

  /* La scheda della scelta riempie la colonna e tiene la navigazione in fondo
     alla vista, non in fondo al contenuto. */
  .st-configurator--passi .st-panel {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .st-configurator--passi .st-fields { flex: 1 1 auto; }
  .st-configurator--passi .st-panel__nav { position: sticky; bottom: 0; }

  /*
   * IL RIEPILOGO NON SCORRE. MAI.
   *
   * Avevo lasciato `overflow-y: auto` come «unica eccezione, se proprio non
   * entra». Non e' un'eccezione accettabile: una colonna che scorre dentro una
   * schermata ferma e' il difetto che il cliente ha segnalato tre volte, e
   * l'eccezione si presenta esattamente quando il pannello e' pieno — cioe'
   * quando le informazioni servono di piu'.
   *
   * Se non entra, il rimedio non e' farlo scorrere: e' toglierci qualcosa. Qui
   * sotto se ne va la fascia di fiducia, che la pagina ripete gia' altrove, e
   * l'elenco delle scelte si stringe. Cio' che non si tocca mai e' il totale e
   * il pulsante.
   */
  .st-configurator--passi .st-summary { overflow: visible; }

  .st-configurator--passi .st-summary__reassurance { display: none; }

  /*
   * La scheda deve chiudersi dentro la finestra, bordo compreso.
   *
   * Misurato a 1440x900: il riquadro finiva a 903 px. Tre pixel — invisibili
   * a leggerli qui, non a guardarli: la scheda del riepilogo restava aperta in
   * fondo, senza bordo di chiusura, e un riquadro che non si chiude sembra
   * tagliato. Su una schermata ferma, dove nessuno puo' scorrere per
   * verificare, sembra un errore di caricamento.
   *
   * Si recupera dal basso, dove c'e' il margine piu' inutile: sotto il blocco
   * «conserva la configurazione», che e' l'ultima cosa della colonna e non ha
   * bisogno di respiro sotto di se'.
   */
  .st-configurator--passi .st-summary__inner { padding-bottom: 14px; }
  .st-configurator--passi .st-summary__keep { margin-bottom: 0; }

  /* La riga si stringe, il testo no: dodici px erano sotto il minimo che il
     sito si e' dato, e il pixel per riga si recupera dal margine interno.
     (Il commento piu' in alto parla di far chiudere la scheda dentro la
     finestra: misurato adesso, con tredici scelte fatte, la scheda e' alta
     911 px e la pagina scorre — `position: static`, `overflow: visible`.
     Quella preoccupazione non vale piu', il margine stretto resta perche'
     tiene compatta una colonna lunga.) */
  .st-configurator--passi .st-summary__choices > div { padding: 3px 0; font-size: var(--st-fs-micro); }
  .st-configurator--passi .st-summary__lines > * { padding: 1px 0; font-size: var(--st-fs-micro); }

  .st-anteprima { overflow: hidden; }
}

/* ==================================================================== *
 * IL CONFIGURATORE SU TELEFONO
 *
 * A 390 px era una pagina di **8 285 pixel** senza prezzo ne' pulsante nella
 * prima schermata: si sceglieva al buio e si scorreva fino in fondo per sapere
 * quanto costa.
 *
 * Su telefono il riepilogo non puo' stare in coda. Il prezzo va **in cima**,
 * sotto i passi, dove si vede a ogni scelta; le azioni vanno in una barra
 * ancorata in fondo, che e' l'unico posto sempre raggiungibile.
 * ==================================================================== */

@media (max-width: 1080px) {
  .st-configurator--passi .st-configurator__grid {
    grid-template-areas:
      "passi"
      "conto"
      "vista"
      "scelta";
  }

  /* Il riepilogo sale sotto i passi, ridotto all'essenziale: il resto si
     legge in fondo, dove il pannello si riapre per intero. */
  .st-configurator--passi .st-summary__inner {
    padding: 14px 16px;
  }

  .st-configurator--passi .st-summary__testa,
  .st-configurator--passi .st-summary__choices,
  .st-configurator--passi .st-summary__lines,
  .st-configurator--passi .st-summary__keep,
  .st-configurator--passi .st-summary__reassurance,
  .st-configurator--passi .st-summary__qty {
    display: none;
  }

  .st-configurator--passi .st-summary__total { margin: 0; padding: 0; }
  .st-configurator--passi .st-summary__total-value { font-size: 1.5rem; }

  /* L'anteprima si accorcia: a schermo stretto una fotografia quadrata da
     390 px e' meta' schermata prima di aver scelto qualcosa. */
  .st-anteprima__scena { aspect-ratio: 16 / 10; }
  .st-anteprima__aiuto { display: none; }

  /* Le opzioni a due per riga: a 390 px quattro campioni fanno 80 px l'uno. */
  .st-configurator--passi .st-choices--visual,
  .st-configurator--passi .st-panel[data-kind="tessuto"] .st-choices--visual,
  .st-configurator--passi .st-panel[data-kind="colore"] .st-choices--visual {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* La navigazione del passo diventa la barra ancorata: e' l'unica azione che
     serve sempre, e in fondo alla pagina non la trova nessuno. */
  .st-configurator--passi .st-panel__nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    margin: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--p-riga);
    border-radius: 0;
    background: #fff;
    box-shadow: 0 -6px 20px -12px rgba(42, 39, 36, .3);
  }

  .st-configurator--passi .st-panels { padding-bottom: 84px; }

  /* Niente doppia barra: quella del totale del configuratore si spegne,
     perche' il totale ora e' in cima. */
  .st-configurator--passi .st-mobilebar { display: none; }
}

/*
 * Gli ultimi due sotto soglia del configuratore.
 *
 * «La tua tenda» e «Totale» sono occhielli: dicono che cos'e' la cosa che
 * hanno sotto. Un occhiello e' accessorio per definizione — la specifica
 * concede 10,5 px proprio a questi — ma questi due stanno sopra **il prezzo**,
 * cioe' il numero per cui la colonna esiste. Un'etichetta che non si legge
 * sopra il numero che decide non e' accessoria.
 *
 * Dodici, come tutto il resto.
 */
.st-configurator--passi .st-summary__eyebrow,
.st-configurator--passi .st-summary small,
.st-configurator--passi .st-summary__total small {
  font-size: var(--st-fs-micro);
}


/*
 * «Totale» nella barra del passo.
 *
 * Sta in `.st-panel__prezzo`, non nel riepilogo: la regola che avevo scritto
 * per il riepilogo non lo toccava nemmeno, ed e' rimasto a 11 px in due punti.
 * E' l'etichetta del numero che il cliente controlla a ogni scelta.
 */
.st-configurator--passi .st-panel__prezzo small,
.st-configurator--passi .st-panel__prezzo span:not([class]) {
  font-size: var(--st-fs-micro);
}

/* --- la via di ritorno ------------------------------------------------- */

.st-configpage__ritorno-riga {
  padding-top: 14px;
  padding-bottom: 2px;
}

.st-configpage__indietro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: .8125rem;
  color: var(--p-tenue);
  text-decoration: none;
}

.st-configpage__indietro:hover { color: var(--p-rame); }

.st-configpage__indietro:focus-visible {
  outline: 2px solid var(--p-rame);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- i campi di misura, di nuovo -------------------------------------- *
 *
 * Restavano larghi 244 px con il campo interno a 92: un numero di tre cifre
 * in centoventi pixel di riquadro, con i comandi che ne prendevano ottantotto.
 * La proporzione era rovesciata — contava piu' il contorno del contenuto.
 */

.st-configurator--passi .st-panel[data-kind="misure"] .st-field {
  max-width: 300px;
}

.st-configurator--passi .st-number {
  max-width: 300px;
  height: 56px;
}

.st-configurator--passi .st-number input {
  font-size: var(--st-fs-lead);
  font-weight: 500;
  letter-spacing: .01em;
}

/* I comandi si stringono: servono, ma non sono la cosa principale. */
.st-configurator--passi .st-num__btn,
.st-configurator--passi .st-number button {
  flex: 0 0 40px;
  width: 40px;
  font-size: 1rem;
  color: var(--p-tenue);
}

.st-configurator--passi .st-number__unit {
  padding: 0 12px;
  font-size: .8125rem;
}

/* ==================================================================== *
 * IL PASSO RIEPILOGO: LA COLONNA DESTRA DIVENTA IL CENTRO
 *
 * Al quinto passo la pagina mostrava un riepilogo al centro **e** un riepilogo
 * a destra: le stesse informazioni due volte, in due formati diversi, una
 * accanto all'altra. Chi ci arriva non sa quale delle due leggere, e la
 * schermata che dovrebbe dare la certezza finale e' quella che ne da' meno.
 *
 * Qui la colonna del prezzo **si sposta al centro** e si allarga: diventa il
 * documento che si legge prima di comprare — cosa ho scelto, come si scompone
 * il prezzo, quanto pago — con l'aria per leggerlo. Al centro resta soltanto
 * cio' che manca da fare, cioe' le note aggiuntive.
 *
 * `:has()` legge quale passo e' aperto senza che il JavaScript debba dirlo:
 * il pannello del riepilogo e' l'unico senza `hidden`, e la griglia se ne
 * accorge da sola. Se un domani i passi cambiassero nome, questa regola
 * smetterebbe di applicarsi invece di applicarsi al passo sbagliato.
 * ==================================================================== */

@media (min-width: 1081px) {
  .st-configurator--passi:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-configurator__grid {
    grid-template-columns: 396px minmax(0, 1fr);
    grid-template-areas:
      "passi  passi"
      "vista  conto"
      "vista  scelta";
    /*
     * L'ALTEZZA SI DA' ALLA RIGA, NON AL RIQUADRO — E QUESTO ERA IL NODO.
     *
     * Senza questa riga le tre fasce si dimensionano sul contenuto. La fascia
     * di mezzo contiene il riepilogo, che al quinto passo deve poter scorrere;
     * ma un elemento che scorre ha misura minima **zero**, perche' per
     * definizione puo' mostrare una fetta qualunque di se stesso. La griglia
     * gli credeva e gli dava ventisette pixel.
     *
     * Da li' ogni tentativo di curare il riquadro era destinato a fallire, e
     * ne ho fatti quattro: togliergli il minimo, dargli `height: auto`, un
     * tetto legato alla finestra, l'allineamento steso. Tutti agivano sul
     * riquadro, mentre chi decideva era la fascia — e la fascia chiedeva al
     * riquadro quanto voleva essere. Un cerchio: nessuna delle due parti
     * poteva romperlo da sola.
     *
     * `minmax(0, 1fr)` lo rompe dall'esterno: la fascia di mezzo prende tutto
     * lo spazio che avanza fra i passi e la barra dei comandi, e il riepilogo
     * dentro si adatta a lei invece del contrario. `0` come minimo perche'
     * `1fr` da solo non scende sotto il contenuto, ed e' esattamente cio' che
     * qui deve poter fare.
     */
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  /*
   * Il riepilogo si allarga e si apre.
   *
   * L'animazione non e' decorazione: senza, il pannello **salta** da una
   * colonna all'altra e sembra un errore di caricamento. Con duecentoquaranta
   * millisecondi di dissolvenza e un piccolo scivolamento si legge come uno
   * spostamento voluto — «questa cosa e' arrivata al centro perche' ora conta
   * lei».
   */
  .st-configurator--passi:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-summary {
    animation: st-riepilogo-entra .24s ease both;
  }

  @keyframes st-riepilogo-entra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }

  /* Al centro resta una cosa sola da fare: scrivere le note. Il pannello si
     stringe e smette di sembrare un passo pieno di scelte. */
  .st-configurator--passi:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-panels {
    overflow: visible;
  }

  /*
   * Qui il riepilogo e' il contenuto principale, quindi torna intero: le
   * scelte fatte, la scomposizione del prezzo e la fascia di fiducia — che
   * negli altri passi si nascondono per far entrare il pulsante — qui ci
   * stanno, perche' la colonna e' larga il doppio.
   */
  .st-configurator--passi:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-summary__reassurance {
    display: block;
  }

  .st-configurator--passi:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-summary__choices > div,
  .st-configurator--passi:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-summary__lines > * {
    padding: 7px 0;
    font-size: .8125rem;
  }

  /* Le scelte su due colonne: dieci passi compilati in colonna singola
     sarebbero un elenco lungo quanto la pagina. */
  .st-configurator--passi:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-summary__choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
}

/* Chi ha chiesto meno movimento non vede l'animazione, ma vede lo stesso
   spostamento: la posizione conta, l'effetto no. */
@media (prefers-reduced-motion: reduce) {
  .st-configurator--passi:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-summary {
    animation: none;
  }
}

/* ==================================================================== *
 * LA FISARMONICA DEI CAMPI (solo su schermo stretto)
 * ==================================================================== */

@media (max-width: 900px) {
  /* LA CORSIA DEVE POTER STRINGERSI
     Misurato a 390: l'intestazione della fisarmonica era larga 437 dentro un
     contenitore da 292 — centoquarantacinque pixel oltre il bordo, con il
     valore scelto tagliato via. Non e' l'intestazione ad essere larga: e' la
     corsia della griglia. Una colonna implicita e' `auto`, cioe' si dimensiona
     sul contenuto piu' largo, e il `width: 100%` qui sotto misura quella
     corsia, non lo schermo. `minmax(0, 1fr)` le toglie il diritto di crescere.
     Il documento non sfondava — per questo il collaudo dei margini, che
     guarda la pagina, non lo vedeva: sfondava dentro. */
  .st-configurator--passi .st-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-fisarmonica .st-fis__testa {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 12px 4px;
    border: 0;
    border-bottom: 1px solid var(--p-riga);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .st-fis__n {
    display: grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border: 1px solid var(--p-riga);
    border-radius: 50%;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--p-tenue);
  }

  .st-fis__titolo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9375rem;
    color: var(--p-inchiostro);
  }

  /* Il valore scelto sta nella riga chiusa: e' cio' che trasforma un elenco di
     domande in un elenco di risposte. */
  .st-fis__valore {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 45%;
    font-size: .8125rem;
    color: var(--p-rame);
    text-align: right;
  }

  .st-fis__testa.is-fatto .st-fis__n {
    border-color: var(--p-rame);
    color: transparent;
    position: relative;
  }

  .st-fis__testa.is-fatto .st-fis__n::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 8px;
    height: 4px;
    border-left: 1.5px solid var(--p-rame);
    border-bottom: 1.5px solid var(--p-rame);
    transform: rotate(-45deg);
  }

  .st-fis__testa[aria-expanded="true"] {
    border-bottom-color: transparent;
  }

  .st-fis__testa[aria-expanded="true"] .st-fis__titolo { font-weight: 500; }
  .st-fis__testa[aria-expanded="true"] .st-fis__valore { display: none; }

  .st-fisarmonica .st-fis__corpo {
    padding: 4px 0 20px;
    border-bottom: 1px solid var(--p-riga);
  }

  /* L'etichetta del campo la dice gia' la riga sopra. */
  .st-fisarmonica .st-fis__corpo > .st-field__label { display: none; }

  .st-fis__testa:focus-visible {
    outline: 2px solid var(--p-rame);
    outline-offset: -2px;
    border-radius: 6px;
  }
}

/*
 * `hidden` da solo non nasconde niente.
 *
 * L'attributo vale `display: none` **nel foglio del browser**, che e' l'ultimo
 * della catena: qualunque regola d'autore che dichiari `display` su
 * `.st-field` lo batte, e il campo resta visibile. E' il motivo per cui la
 * fisarmonica si formava — teste, valori, apertura del campo successivo tutti
 * giusti — e restavano aperti tutti e cinque i campi.
 *
 * `!important` qui non e' un modo per vincere una gara di specificita': e' il
 * modo di dire che un elemento marcato nascosto **e' nascosto**, qualunque
 * cosa dichiari il resto del foglio.
 */
@media (max-width: 900px) {
  .st-fisarmonica .st-fis__corpo.st-fis--chiuso { display: none !important; }
}

/* ====================================================================
 * LA SCHERMATA FISSA VUOLE ALTEZZA, E VA CHIESTA
 *
 * La schermata fissa sopra e' condizionata alla sola larghezza. Ma cio' che
 * consuma la schermata fissa e' l'altezza, e su un portatile da tredici pollici
 * la finestra utile scende sotto i settecento pixel.
 *
 * Misurato a 1440x680: il pulsante «Aggiungi al carrello» finiva a 705 px —
 * venticinque sotto la piega — su una pagina che per costruzione **non
 * scorre**. Non «scomodo da raggiungere»: irraggiungibile. Il difetto peggiore
 * possibile, perche' colpisce solo alcune finestre e su quelle azzera la
 * vendita in silenzio.
 *
 * Sotto gli 800 px di finestra la schermata fissa si scioglie e la pagina torna
 * a scorrere come una pagina normale. Si perde il pregio — i passi e il totale
 * sempre in vista — ma si riprende l'unica cosa che non e' negoziabile: il
 * riepilogo si legge tutto.
 *
 * La soglia e' 800 e non 760, e il numero non e' scelto: e' misurato. Dopo le
 * riduzioni previste — margini degli elementi vuoti, blocco «conserva»,
 * messaggio stretto — il riquadro chiude a 793 px. A 800 ci sta per sette
 * pixel; a 768 uscirebbe di venticinque, e venticinque pixel fuori dal bordo
 * su una pagina che non scorre sono una riga che non si legge piu'.
 *
 * La regola vale in generale: la schermata fissa si accende dove il contenuto
 * ci sta, non dove sarebbe bello che ci stesse.
 * ==================================================================== */

/* ====================================================================
 * I TRE GRADINI DI COMPATTAZIONE DEL RIEPILOGO
 *
 * Le classi le mette il copione, misurando: `st-conto-1`, poi `-2`, poi `-3`,
 * e si ferma al primo che fa entrare il riquadro. La pagina resta ferma a
 * qualunque gradino — la schermata fissa non si scioglie piu'.
 *
 * Cio' che non si tocca mai, a nessun gradino: il totale, l'IVA, l'elenco
 * delle scelte fatte, le righe di costo, la quantita', il pulsante.
 * ==================================================================== */

@media (min-width: 1081px) {

  /* --- gradino 1: si stringe il respiro, non sparisce niente --------- */

  body.st-conto-1 .st-configurator--passi .st-summary__inner { padding: 14px 16px 12px; }
  body.st-conto-1 .st-configurator--passi .st-summary__testa { margin-bottom: 8px; }
  body.st-conto-1 .st-configurator--passi .st-summary__choices { margin-top: 8px; }
  body.st-conto-1 .st-configurator--passi .st-summary__lines { margin-block: 8px 6px; }
  body.st-conto-1 .st-configurator--passi .st-summary__message { margin-block: 8px 6px; }
  body.st-conto-1 .st-configurator--passi .st-summary__keep { margin-top: 6px; }
  body.st-conto-1 .st-configurator--passi .st-summary__form { margin-top: 8px; }

  body.st-conto-1 .st-configurator--passi .st-summary__choices > div,
  body.st-conto-1 .st-configurator--passi .st-summary__lines > * { padding-block: 2px; }

  /* L'immagine del prodotto si stringe: serve a riconoscere cosa si sta
     comprando, e per riconoscerlo bastano quaranta pixel. */
  body.st-conto-1 .st-configurator--passi .st-summary__testa img { width: 44px; height: 44px; }

  /* --- gradino 2: le scelte fatte su due colonne --------------------- */

  /*
   * E' il gradino che rende davvero: l'elenco delle scelte e' l'unica parte
   * che cresce senza limite — una voce per ogni campo compilato — e messa su
   * due colonne si dimezza in altezza senza perdere una riga.
   *
   * Etichetta sopra e valore sotto invece che ai due capi della riga: in una
   * colonna larga centoquaranta pixel «Colori Struttura Standard» e «Marrone
   * 8017» non stanno affiancati, e affiancarli per forza spezzerebbe le due
   * parole a meta'.
   */
  body.st-conto-2 .st-configurator--passi .st-summary__choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
  }

  body.st-conto-2 .st-configurator--passi .st-summary__choices > div {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  /*
   * Anche l'etichetta va a capo, non solo il valore.
   *
   * Avevo dato `overflow-wrap` al solo valore, pensando che i nomi dei campi
   * fossero corti. «Colori Struttura Standard» in una colonna da centoquaranta
   * pixel non ci sta, e senza il permesso di andare a capo usciva dal bordo
   * della scheda — la stessa cosa che stavo correggendo, spostata di
   * quindici centimetri.
   */
  body.st-conto-2 .st-configurator--passi .st-summary__choices > div > :first-child {
    display: block;
    font-size: var(--st-fs-micro);
    line-height: 1.25;
    color: var(--p-tenue, #6F6A64);
    /*
     * `white-space: normal` e' la riga che mancava, e senza di lei le altre
     * due non servono a niente: l'etichetta nasce `nowrap` — giusto quando sta
     * su una riga sola accanto al suo valore — e a una riga a cui e' vietato
     * andare a capo nessun `overflow-wrap` puo' fare niente. Su due colonne il
     * divieto va tolto prima di concedere il permesso.
     */
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  body.st-conto-2 .st-configurator--passi .st-summary__choices > div > :last-child {
    display: block;
    font-size: .8125rem;
    line-height: 1.3;
    font-weight: 600;
    text-align: left;
    color: var(--p-inchiostro, #23201D);
    overflow-wrap: anywhere;
  }

  /* --- gradino 3: se ne va cio' che non e' un dato ------------------- */

  /*
   * La fascia di fiducia la pagina la ripete gia' in cima, e «salva» e
   * «condividi» sono due comodita' che il carrello offre comunque. Escono per
   * ultimi perche' sono gli unici pezzi la cui assenza non toglie niente a chi
   * sta decidendo se comprare.
   */
  body.st-conto-3 .st-configurator--passi .st-summary__reassurance,
  body.st-conto-3 .st-configurator--passi .st-summary__keep,
  body.st-conto-3 .st-configurator--passi .st-summary__saved { display: none; }

  body.st-conto-3 .st-configurator--passi .st-summary__testa img { width: 36px; height: 36px; }
  body.st-conto-3 .st-configurator--passi .st-summary__inner { padding: 12px 14px 10px; }
}

@media (min-width: 1081px) and (max-height: 799px) {
  html:has(body.st-senza-piede),
  body.st-senza-piede { overflow: auto; height: auto; }

  .st-configpage { height: auto; overflow: visible; }

  .st-configurator--passi .st-panels { overflow-y: visible; }

  /* I passi restano appesi in cima: e' l'orientamento del percorso, ed e'
     l'unica cosa che vale ancora la pena tenere ferma quando tutto scorre. */
  .st-configurator--passi .st-steps {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--p-fondo, #fff);
  }

  /*
   * Il riepilogo qui NON e' appiccicato, ed e' una correzione a me stesso.
   *
   * L'avevo messo `sticky; top: 84px` per tenerlo in vista. Misurato a 680: il
   * riepilogo e' alto 613 px e appiccicato a 84 arriva a 697 — sedici oltre il
   * bordo — e lo sticky gli impedisce di risalire. Il fondo del riquadro, cioe'
   * il pulsante, diventava irraggiungibile **anche scorrendo**: peggio del
   * difetto che stavo correggendo.
   *
   * Un elemento appiccicato piu' alto della finestra e' sempre una trappola.
   * Qui scorre con la pagina, e il pulsante si raggiunge sempre.
   */
  .st-configurator--passi .st-summary {
    position: static;
  }
}

/* ====================================================================
 * I CINQUE PASSI ENTRANO SEMPRE, ANCHE NELLA BANDA STRETTA
 *
 * Fra 769 e 1080 px — tablet in orizzontale, finestre affiancate — le cinque
 * etichette chiedevano 810 px in 656 disponibili, e la striscia scorreva in
 * orizzontale. Misurato a 1024: voci da 116, 214, 145, 169, 166.
 *
 * Uno scorrimento orizzontale sui passi e' un difetto silenzioso: nessuno lo
 * cerca. Chi non trascina la striscia crede che i passi siano tre, non cinque,
 * e perde la sola cosa che la striscia deve dare — sapere quanto manca alla
 * fine. E' il contrario dell'effetto voluto.
 *
 * Cinque colonne uguali risolvono il problema per costruzione invece che per
 * misura: qualunque sia la larghezza, i passi sono cinque e lo spazio si divide
 * in cinque. Le etichette lunghe vanno a capo, che costa una riga di altezza e
 * non toglie niente.
 * ==================================================================== */

@media (min-width: 769px) and (max-width: 1080px) {
  /*
   * Prima di stringere le etichette, dare alla striscia lo spazio che le
   * spetta. In questa banda la griglia ha due colonne — il centro e il
   * riepilogo da 300 — e i passi stavano solo nella prima: a 1024 significava
   * 656 px per cinque voci, e le etichette andavano a capo su tre righe
   * facendo una striscia alta 103 px sopra le domande.
   *
   * I passi non appartengono a una colonna: sono l'intestazione del percorso.
   * Attraversano la griglia intera, e a 1024 passano da 656 a 976 px — che
   * bastano alle cinque etichette su una riga sola.
   */
  .st-configurator--passi .st-steps { grid-column: 1 / -1; }

  .st-configurator--passi .st-steps__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow-x: visible;
  }

  /* La colonna puo' stringersi (minmax parte da 0), quindi devono poterlo fare
     anche la voce e il pulsante: senza `min-width: 0` il contenuto non si
     comprime, sfonda la colonna e la striscia torna a scorrere — che e'
     esattamente quello che stavo togliendo. */
  .st-configurator--passi .st-steps__item { min-width: 0; }

  .st-configurator--passi .st-steps__btn {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    padding-inline: 8px;
    white-space: normal;
  }

  .st-configurator--passi .st-steps__testo {
    min-width: 0;
    white-space: normal;      /* senza, le colonne stanno strette e il testo no */
    text-wrap: balance;
    line-height: 1.25;
  }
}

/* ====================================================================
 * IL RIEPILOGO SI CHIUDE DENTRO LA FINESTRA
 *
 * Non scorrere non basta: se il riquadro esce dal fondo, l'ultima parte non si
 * legge e non c'e' modo di andarla a prendere. E' peggio dello scorrimento
 * annidato, non meglio.
 *
 * Misurato a 1440x768: il riquadro andava da 288 a 856 — ottantotto pixel
 * oltre il bordo. Dentro, questa contabilita':
 *
 *     testa            64      choices          66      totale     34
 *     iva              20      messaggio       100      conserva   39
 *     modulo+pulsante 110
 *     righe costi       0  +30 di margine      salvato   0  +10 di margine
 *     fascia fiducia    0  +18 di margine
 *
 * Quaranta pixel di margine appartengono a elementi **vuoti**. Un margine e'
 * spazio fra due cose: se una delle due non c'e', non e' respiro, e' un buco.
 * Toglierli non costa nessuna informazione — ed e' il primo taglio da fare
 * sempre, prima di ragionare su cosa nascondere.
 *
 * Il resto si recupera solo dove serve, cioe' sulle finestre basse, e solo da
 * cio' che non e' un dato: il blocco «conserva la configurazione» e' un'azione
 * secondaria, non un'informazione, e il messaggio si stringe nei margini senza
 * perdere una parola.
 *
 * Non si tocca mai: il totale, l'IVA, le scelte fatte, il pulsante.
 * ==================================================================== */

@media (min-width: 1081px) {
  /* Un elemento vuoto non ha diritto a un margine. */
  .st-configurator--passi .st-summary__lines:empty,
  .st-configurator--passi .st-summary__saved:empty,
  .st-configurator--passi .st-summary__choices:empty,
  .st-configurator--passi .st-summary__reassurance:empty {
    margin: 0;
    padding: 0;
  }
}

@media (min-width: 1081px) and (max-height: 869px) {
  /*
   * «Conserva la configurazione» esce per primo: e' un'azione di comodo, la
   * offre gia' il carrello, e nessuno la cerca prima di aver deciso. Cio' che
   * resta e' il perche' si e' arrivati fin qui — scelte, totale, pulsante.
   */
  .st-configurator--passi .st-summary__keep,
  .st-configurator--passi .st-summary__saved { display: none; }

  .st-configurator--passi .st-summary__message { margin-block: 10px 8px; }
  .st-configurator--passi .st-summary__testa   { margin-bottom: 12px; }
}

/* ====================================================================
 * IL CAMPO NUMERICO: IL TELAIO ERA SULL'ELEMENTO SBAGLIATO
 *
 * Piu' sopra ho scritto che i tre pezzi — meno, numero, piu' — dovevano
 * tornare un oggetto solo, e ho messo bordo, altezza e angoli su `.st-number`.
 * Ma `.st-number` e' solo l'involucro: la fila vera e' `.st-num`, che sta
 * dentro e ha un `gap: 8px` suo.
 *
 * Risultato: il bordo veniva disegnato attorno a un contenitore, e dentro i
 * pezzi restavano staccati di otto pixel l'uno dall'altro, con l'unita' «cm»
 * spinta oltre il pulsante «+» e mezza fuori dall'angolo arrotondato. Il
 * campo misurava 64 px invece dei 52 dichiarati e il numero usciva a 24 px
 * invece che a 20: le due regole erano scritte, ma su un elemento che non
 * governava la disposizione.
 *
 * Qui il telaio va dove sta davvero la fila. Il gap si azzera: fra i pezzi di
 * un campo unico non ci va spazio, ci va un filo.
 * ==================================================================== */

.st-configurator--passi .st-number {
  display: block;
  max-width: 260px;
  height: auto;
  border: 0;
  background: none;
  overflow: visible;
}

.st-configurator--passi .st-num {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 260px;
  height: 52px;
  border: 1px solid var(--p-riga);
  border-radius: var(--st-r-campo, 8px);
  background: #fff;
  overflow: hidden;
}

.st-configurator--passi .st-num:focus-within {
  border-color: var(--p-rame);
  outline: 2px solid var(--p-rame);
  outline-offset: 1px;
}

/* Il numero e' il protagonista, ma non e' un titolo: a 24 px sfondava il campo
   e costringeva a stringere tutto il resto. */
.st-configurator--passi .st-num input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 8px;
  border: 0;
  background: none;
  font: 500 var(--st-fs-lead)/1 var(--st-font-body);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--p-inchiostro);
}

.st-configurator--passi .st-num input:focus-visible { outline: none; }

.st-configurator--passi .st-num__btn {
  flex: 0 0 42px;
  width: 42px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--p-fondo);
  color: var(--p-tenue);
  font-size: 1.0625rem;
  line-height: 1;
  cursor: pointer;
}

.st-configurator--passi .st-num__btn:first-child { border-right: 1px solid var(--p-riga); }
.st-configurator--passi .st-num__btn:hover { background: #F0EAE2; color: var(--p-inchiostro); }

/*
 * L'unita' e' l'ultimo pezzo della fila, dentro il bordo, non appesa fuori.
 *
 * `position: static` e' la riga che conta, e mancava. L'unita' nasce
 * `position: absolute` ancorata a `.st-number` con `top: 50%`: finche' il
 * telaio stava su `.st-number` i due riquadri coincidevano e l'inganno non si
 * vedeva. Spostando il telaio su `.st-num` le due scatole si sono separate, e
 * l'unita' ha continuato a centrarsi su quella vecchia — ventiquattro pixel
 * piu' in alto, fuori dal bordo, esattamente com'era nello scatto.
 *
 * Un elemento posizionato in assoluto non partecipa alla fila: puo' sembrare
 * al posto giusto per coincidenza, e smettere di esserlo appena qualcosa
 * attorno cambia. Qui torna un pezzo come gli altri.
 */
.st-configurator--passi .st-num__unita,
.st-configurator--passi .st-num .st-number__unit {
  position: static;
  transform: none;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  order: 9;
  padding: 0 12px;
  border-left: 1px solid var(--p-riga);
  background: var(--p-fondo);
  font-size: .8125rem;
  color: var(--p-tenue);
}

/* Il pulsante «+» sta prima dell'unita', non dopo: l'ordine e' meno, numero,
   piu', unita' — comandi vicini al numero, etichetta in fondo. */
.st-configurator--passi .st-num__btn:nth-of-type(2) {
  order: 8;
  border-left: 1px solid var(--p-riga);
}

/* Larghezza e altezza affiancate hanno la stessa base: senza, il campo con il
   suggerimento piu' lungo alzava la propria riga e i due riquadri finivano
   sfalsati di qualche pixel — cioe' storti. */
.st-configurator--passi .st-panel[data-kind="misure"] .st-field { align-self: start; }
.st-configurator--passi .st-panel[data-kind="misure"] .st-field__hint { min-height: 1.25em; }

/* ====================================================================
 * OGNI SCELTA SI SPIEGA DA SOLA
 *
 * Le schede mostravano «VANO: misure da muro a...» e «FINITE: produrrem o
 * come d...»: due frasi tagliate a meta' che non dicono cosa si sta
 * scegliendo. Ora il titolo sta da solo e in chiaro, la spiegazione sta sotto
 * su due righe, e il testo intero compare passandoci sopra.
 *
 * La bolla resta **dentro** la scheda, e non e' una questione di gusto: la
 * colonna centrale scorre, e tutto cio' che sporge da un contenitore che
 * scorre viene tagliato dal suo bordo. Una bolla sopra la scheda si vedrebbe
 * a meta' proprio sulle schede in cima alla lista — le prime che si guardano.
 * ==================================================================== */

.st-configurator--passi .st-choice { position: relative; }

.st-configurator--passi .st-choice__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  font-size: .75rem;
  line-height: 1.35;
  color: var(--p-tenue, #6F6A64);
}


/* La spiegazione per esteso non sta piu' qui dentro: la disegna il copione in
   una bolla sola, attaccata al corpo del documento, e compare solo quando
   queste tre righe non bastano a contenerla. Vedi `.st-bolla` in fondo. */

/*
 * La misura del carattere nel campo: qui serve un selettore piu' lungo, e vale
 * la pena dire perche' invece di scrivere `!important`.
 *
 * La regola che vinceva e' `.st-panel[data-kind="misure"] .st-field
 * input[type="number"]` — due classi e due attributi — e imponeva 24 px e 64
 * di altezza. La mia ne aveva due di classe: piu' recente, ma piu' debole, e
 * la cascata guarda il peso prima dell'ordine. Per questo il campo continuava
 * a misurare 64 px con il numero a 24 mentre le regole nuove dicevano altro.
 *
 * `!important` avrebbe risolto la riga e rotto il foglio: la volta dopo si
 * scrive un altro `!important` piu' in basso e nessuno capisce piu' chi
 * comanda. Si pareggia il peso e si va avanti.
 *
 * Venti pixel e non ventiquattro perche' il numero deve dominare il campo, non
 * la colonna: a ventiquattro, «120,5» piu' i due comandi piu' l'unita' non
 * stavano in duecentosessanta pixel, e qualcosa doveva per forza uscire.
 */
.st-configurator--passi .st-panel[data-kind="misure"] .st-field input[type="number"],
.st-configurator--passi .st-panel[data-kind="misure"] .st-num input[type="number"] {
  width: auto;
  height: 100%;
  padding: 0 8px;
  font-size: var(--st-fs-lead);
  font-weight: 500;
  min-width: 0;
}

.st-configurator--passi .st-panel[data-kind="misure"] .st-num__btn { flex: 0 0 42px; width: 42px; }
.st-configurator--passi .st-panel[data-kind="misure"] .st-num { max-width: 260px; }

/* ====================================================================
 * IL RITMO DEL RIEPILOGO, QUANDO IL PREZZO C'E'
 *
 * Avevo misurato il riepilogo con il prezzo ancora da calcolare, e le righe
 * dei costi vuote. Appena si inseriscono le misure quelle righe si riempiono —
 * settantuno pixel — e la scheda esce dal fondo di ventisei. E' il caso
 * normale, non un caso limite: chi e' arrivato al passo delle misure ha il
 * prezzo, ed e' esattamente il momento in cui il riepilogo serve tutto intero.
 *
 * Misurare lo stato vuoto e concludere che ci sta e' l'errore, non la regola
 * che ne e' seguita.
 *
 * Non si toglie nessun dato. Fra i sette blocchi del riepilogo c'erano circa
 * centodieci pixel di soli distacchi, ereditati da quando la colonna poteva
 * scorrere e lo spazio non costava niente. Portandoli a dodici si recuperano i
 * ventisei che servono, e la colonna resta arieggiata: dodici pixel fra due
 * blocchi con un bordo in mezzo sono respiro, non compressione.
 * ==================================================================== */

@media (min-width: 1081px) and (min-height: 800px) {
  /* La colonna non si stira per pareggiare la riga: se lo fa, la sua altezza
     la decide il vicino e non il proprio contenuto — ed e' cosi' che la scheda
     finiva tre pixel oltre il bordo pur avendo dentro spazio da avanzare. */
  .st-configurator--passi .st-summary { align-self: start; min-height: 0; }

  .st-configurator--passi .st-summary__testa    { margin-bottom: 12px; }
  .st-configurator--passi .st-summary__choices  { margin-top: 12px; }
  .st-configurator--passi .st-summary__lines    { margin-block: 12px 10px; }
  .st-configurator--passi .st-summary__message  { margin-block: 12px 10px; }
  .st-configurator--passi .st-summary__keep     { margin-top: 10px; }
  .st-configurator--passi .st-summary__form     { margin-top: 12px; }

  /* Gli ultimi pixel vengono dai bordi interni della scheda: ventiquattro sopra
     e sotto erano la spaziatura di un riquadro che poteva crescere quanto
     voleva. Qui non puo', e diciotto sopra con quattordici sotto tengono la
     stessa aria attorno al testo senza spingere il pulsante oltre il bordo. */
  .st-configurator--passi .st-summary__inner    { padding: 18px 20px 14px; }

  /* Salva e condividi sono due comodita', non due azioni: entrano in una riga
     sola e non chiedono l'attenzione che spetta al pulsante d'acquisto. */
  .st-configurator--passi .st-summary__keep-btn {
    padding: 5px 8px;
    font-size: var(--st-fs-micro);
  }
}

/* ====================================================================
 * LE SCHEDE DI SCELTA SI LEGGONO
 *
 * Le tre schede del tipo di misura — Vano, Finite, Incasso — erano larghe
 * centodieci pixel in una colonna da cinquecentotrenta, con la spiegazione
 * tagliata a «misure da muro a...». Tre francobolli e mezza frase: chi sceglie
 * non capisce fra cosa sta scegliendo, ed e' la scelta che decide se la tenda
 * entrera' nella finestra.
 *
 * LA CAUSA non era la larghezza delle corsie. Le corsie erano gia' due, giuste.
 * Era un `justify-items: start` che arriva dal foglio di base: con
 * l'allineamento a inizio corsia una scheda smette di riempire la propria
 * corsia e si stringe attorno al contenuto — cioe' attorno alla figura, che e'
 * la cosa piu' stretta che ha dentro. Le corsie restavano da 255 px e le
 * schede dentro ne prendevano 110.
 *
 * E' lo stesso tipo di guasto del pulsante che spariva sotto il mouse: una
 * proprieta' ereditata da un contesto diverso, che continua a valere dove non
 * ha piu' senso. Qui l'allineamento serviva quando le schede erano bottoni
 * larghi quanto la loro parola; ora sono schede, e una scheda riempie il suo
 * posto.
 * ==================================================================== */

.st-configurator--passi .st-choices--visual:has(.st-choice:nth-child(-n+4):last-child) {
  justify-items: stretch;
}

.st-configurator--passi .st-choices--visual:has(.st-choice:nth-child(-n+4):last-child) .st-choice {
  width: 100%;
  max-width: none;
}

/*
 * Le schede con una spiegazione dentro vogliono piu' respiro delle altre.
 *
 * `:has(.st-choice__desc)` distingue i due casi da solo: un campione di
 * tessuto non ha niente da spiegare e sta bene stretto, una scelta come
 * «Vano» contro «Finite» ha una frase da far leggere prima di premere. Non
 * serve un elenco di eccezioni per passo — la regola guarda il contenuto.
 */
.st-configurator--passi .st-choices--visual:has(.st-choice__desc) {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
}

.st-configurator--passi .st-choices--visual .st-choice__nome {
  /* NIENTE `display: block` QUI
     Piu' avanti in questo foglio c'e' la regola che ferma il nome a tre
     righe — `display: -webkit-box` con `-webkit-line-clamp: 3` — e il
     commento che spiega perche'. Non ha mai funzionato: questa riga ha una
     classe in piu' e vince, e un `line-clamp` senza `-webkit-box` e' inerte.
     Misurato: «Cover e Coprivite in Plastica, Staffa in Metallo» occupava
     cinque righe sul telefono e tre sul desktop, cioe' esattamente il
     merletto che quella regola voleva evitare. */
  padding: 0 12px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--p-inchiostro);
}

/*
 * Nessun ritaglio: la spiegazione si legge tutta.
 *
 * Prima erano due righe, poi tre, e ogni volta restava un «...» che non dice
 * niente e per giunta fa credere che il sito sia rotto. La bolla che doveva
 * completare il taglio e' stata tolta — ripeteva la scheda invece di
 * aggiungere qualcosa — e senza di lei un taglio e' solo informazione persa.
 *
 * Le schede di una riga si pareggiano in altezza fra loro, quindi una
 * spiegazione lunga alza la riga e non sfonda niente.
 */
.st-configurator--passi .st-choices--visual .st-choice__desc {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
  padding: 0 12px;
  margin-top: 4px;
  font-size: .75rem;
  line-height: 1.4;
}

/*
 * UN GRUPPO DI SCHEDE NON E' UN CAMPO: PRENDE TUTTA LA RIGA
 *
 * Il passo delle misure dispone i campi su due colonne, ed e' giusto: larghezza
 * e altezza sono due numeri corti e stanno bene affiancati.
 *
 * Ma nella stessa griglia finiva anche il tipo di misura — «Vano», «Finite»,
 * «Incasso» — che non e' un numero: sono tre schede con figura e spiegazione.
 * Chiuse in mezza colonna la griglia interna restava larga 275 px e le schede
 * ne prendevano 133 a testa. Non erano piccole per come erano fatte: erano
 * piccole per dove stavano.
 *
 * Un campo si misura da quanto e' lungo cio' che ci si scrive dentro. Un gruppo
 * di schede si misura da quanto serve a distinguerle. Sono due cose diverse e
 * vogliono due larghezze diverse.
 */
.st-configurator--passi .st-panel[data-kind="misure"] .st-field:has(.st-choices--visual) {
  grid-column: 1 / -1;
  /*
   * Il tetto di trecento pixel e' pensato per i campi da compilare, e li' e'
   * giusto: un campo di testo largo mezza pagina invita a scriverci dentro un
   * tema, non una misura. Su un gruppo di schede lo stesso tetto le ricacciava
   * a centoquarantacinque pixel l'una **anche dopo** avergli dato tutta la
   * riga — la riga era larga, il campo dentro no.
   */
  max-width: none;
}

/*
 * Le schede con spiegazione si adattano alla colonna invece di essere due.
 *
 * La regola per «poche opzioni» impone due corsie, e nasce giusta: due schede
 * grandi si confrontano meglio di quattro piccole. Ma con la riga intera a
 * disposizione due corsie diventano due schede da 430 px per tre disegni
 * quotati — ingrandire un disegno non lo spiega meglio, e allontana le schede
 * fra loro proprio mentre si sta confrontandole.
 *
 * `auto-fit` con un minimo di 200 fa il conto da solo: due schede da 260 nella
 * colonna stretta, quattro da 210 in quella larga. Il numero di corsie smette
 * di essere una decisione e torna a essere una conseguenza.
 *
 * La specificita' pareggia quella della regola delle quattro opzioni — il
 * `[data-kind]` vale come una classe — e vince per posizione, che qui e'
 * corretto: e' la piu' specifica delle due condizioni, non la piu' recente.
 */
.st-configurator--passi .st-panel[data-kind] .st-choices--visual:has(.st-choice__desc) {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ====================================================================
 * IL PUNTO INTERROGATIVO ACCANTO A OGNI DOMANDA
 *
 * Chi compra una tenda su misura non compra un oggetto: compra una serie di
 * decisioni tecniche che non ha mai preso prima. «Vano o finite», «catena a
 * destra o a sinistra» sono domande ovvie per chi le tende le monta e oscure
 * per tutti gli altri — e chi non capisce una domanda non sceglie a caso: se
 * ne va, oppure ordina sbagliato e poi telefona.
 *
 * Si chiama `st-spiega` e non `st-aiuto`, e la ragione merita una riga:
 * `st-aiuto` esisteva gia' — e' il riquadro appiccicato «Hai un dubbio su una
 * misura?» nella colonna di sinistra. Il bottoncino ne ereditava in silenzio
 * il `position: sticky`, e siccome un elemento appiccicato e' un elemento
 * posizionato, la bolla si misurava su di lui — diciotto pixel — invece che
 * sul campo. Si apriva addosso alla casella da compilare, e nessuna delle
 * regole scritte per spostarla poteva funzionare: erano tutte giuste, il
 * riferimento era sbagliato.
 *
 * Il segno resta piccolo e scolorito finche' non serve. Non deve competere con
 * la domanda a cui sta accanto: chi ha gia' capito non lo vede nemmeno, chi
 * non ha capito lo trova esattamente dove lo cerca.
 * ==================================================================== */

.st-configurator--passi .st-field { position: relative; }

/* Etichetta e segno sulla stessa riga. Senza questo l'etichetta, che e' un
   blocco, spingerebbe il segno a capo da solo — un punto interrogativo
   orfano su una riga sua non si capisce a cosa si riferisca. */
.st-configurator--passi .st-field:has(.st-spiega) .st-field__label {
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

.st-configurator--passi .st-spiega {
  /*
   * `position: static`, ed e' la riga che fa funzionare tutto il resto.
   *
   * Una regola larga di questo foglio rende appiccicati i pulsanti dentro i
   * pannelli — serve alla barra «Indietro / Avanti», che deve restare in fondo
   * alla vista. Ma «appiccicato» vuol dire anche «posizionato», e un elemento
   * posizionato diventa il riferimento per tutto cio' che sta dentro di lui in
   * assoluto: la bolla, invece di misurarsi sul campo alto 353 px, si misurava
   * sul bottoncino alto 18, e si apriva venti pixel piu' in giu' — cioe'
   * addosso alla casella da compilare.
   *
   * E' lo stesso inganno dell'unita' «cm» che galleggiava fuori dal campo: un
   * elemento posizionato per un motivo che qui non c'entra. Quando una bolla
   * si apre nel posto sbagliato, la prima cosa da guardare non e' la bolla —
   * e' chi le fa da riferimento.
   */
  position: static;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: 0 0 2px;
  padding: 0;
  border: 1px solid var(--p-riga, #E4DED6);
  border-radius: 50%;
  background: transparent;
  color: var(--p-tenue, #6F6A64);
  font-size: var(--st-fs-micro);
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}

.st-configurator--passi .st-spiega:hover,
.st-configurator--passi .st-spiega:focus-visible {
  border-color: var(--p-rame, #B45A17);
  background: var(--p-rame-tenue, #FBF1E8);
  color: var(--p-rame-testo, #AE4C0B);
}

.st-configurator--passi .st-spiega:focus-visible {
  outline: 2px solid var(--p-rame, #B45A17);
  outline-offset: 2px;
}

/*
 * La bolla e' ancorata al **campo**, non al segno.
 *
 * Ancorandola al segno sarebbe larga quanto lui e dovrebbe sporgere di lato,
 * finendo mezza fuori dalla colonna sui campi vicini al bordo. Ancorata al
 * campo parte dal suo margine sinistro e ha tutta la larghezza del campo per
 * distendersi: nessun calcolo, nessuna sporgenza.
 *
 * Il testo e' lungo per scelta — una spiegazione di mezza riga non spiega
 * niente — quindi la bolla e' un riquadro da leggere, non un'etichetta
 * volante: fondo pieno, testo chiaro, interlinea larga.
 */

/*
 * La bolla si apre **sotto tutto il campo**, non sotto la sola etichetta.
 *
 * Prima la ancoravo a ventisei pixel, appena sotto la riga del titolo: cosi'
 * si distendeva sopra il campo da compilare e lo nascondeva. Coprire la
 * casella della larghezza mentre si spiega cosa scriverci dentro e' il
 * contrario di aiutare — e chi voleva rileggere la spiegazione mentre scriveva
 * non poteva fare ne' l'una ne' l'altra cosa.
 *
 * Sotto il campo copre quello che viene dopo, che mentre si compila questo
 * campo non serve ancora.
 */

/*
 * IL CAMPO NON SI SOLLEVA PIU', ED E' LA CORREZIONE DI UN DANNO CHE AVEVO
 * FATTO IO.
 *
 * Qui c'era `z-index: 30` sul campo con l'aiuto aperto. Serviva quando la
 * bolla era un figlio del campo: fra due campi posizionati vince chi viene
 * dopo nel documento, e la bolla di sinistra finiva sotto il campo di destra.
 * Alzare il campo risolveva quello.
 *
 * Da quando la bolla e' un elemento a se', attaccato al corpo del documento,
 * quella regola non serve piu' — e nel frattempo era diventata dannosa. La
 * barra «Indietro / Avanti» e' appiccicata in fondo alla colonna con
 * `z-index: 3`: sollevando il campo a trenta, la parte di scheda che stava
 * **sotto** la barra le finiva sopra e ricompariva dentro di essa. Da fuori si
 * legge come una scheda duplicata dentro la barra dei comandi, ed e' esattamente
 * cosi' che il cliente l'ha descritta.
 *
 * Comparendo solo mentre il puntatore era sull'aiuto, sembrava un difetto
 * dell'aiuto. Non lo era: era una riga rimasta accesa dopo che il motivo per
 * cui l'avevo scritta era sparito. Quando si sposta un elemento altrove, le
 * regole scritte per tenerlo al suo posto vanno rimosse — non lasciate li' a
 * fare qualcos'altro.
 */

/* Anche qui la bolla e' altrove: `.st-bolla`, in fondo al foglio. */

/*
 * QUANDO MANCA UNA RISPOSTA
 *
 * Il passo incompleto si segna nella fila in alto e i campi vuoti si
 * accendono. Il colore e' il rame del sito e non il rosso d'allarme: non e'
 * successo niente di grave, manca solo una risposta — e trattare una
 * dimenticanza come un errore mette in difficolta' chi stava solo andando
 * avanti.
 */
.st-configurator--passi .st-steps__item.is-incompleto .st-steps__n {
  border-color: var(--p-rame, #B45A17);
  color: var(--p-rame-testo, #AE4C0B);
  box-shadow: 0 0 0 3px var(--p-rame-tenue, #FBF1E8);
}

.st-configurator--passi .st-field.is-mancante .st-num,
.st-configurator--passi .st-field.is-mancante .st-number,
.st-configurator--passi .st-field.is-mancante select,
.st-configurator--passi .st-field.is-mancante textarea {
  border-color: var(--p-rame, #B45A17);
  background: var(--p-rame-tenue, #FBF1E8);
}

.st-configurator--passi .st-field.is-mancante .st-field__label {
  color: var(--p-rame-testo, #AE4C0B);
}

/* Sui gruppi di schede non c'e' un bordo da accendere: si accende la cornice
   del gruppo, che e' l'unica cosa che li tiene insieme. */
.st-configurator--passi .st-field.is-mancante .st-choices {
  padding: 8px;
  border-radius: 10px;
  outline: 2px solid var(--p-rame, #B45A17);
  outline-offset: 2px;
}

/* ====================================================================
 * LA BOLLA DELLE SPIEGAZIONI
 *
 * Sta attaccata al corpo del documento e si posiziona da sola: e' l'unico modo
 * perche' non la tagli la colonna che scorre. `position: fixed` la sgancia da
 * qualunque contenitore, e il copione le dice dove mettersi.
 *
 * Un `z-index` alto qui ha senso — sopra c'e' solo la testata — mentre dentro
 * la colonna non ne aveva nessuno: oltre il bordo di un contenitore che scorre
 * non si disegna, per quanto in alto si dichiari di stare.
 * ==================================================================== */

.st-bolla {
  position: fixed;
  z-index: 9000;
  max-width: 340px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--st-p-inchiostro, #23201D);
  color: #fff;
  font-family: var(--st-font-body, inherit);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 12px 34px rgba(35, 32, 29, .34);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .13s ease, transform .13s ease;
  /* Non intercetta il puntatore: se lo facesse, aprendosi sotto il mouse si
     chiuderebbe da sola nell'istante in cui compare. */
  pointer-events: none;
}

.st-bolla.is-visibile {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .st-bolla { transition: none; transform: none; }
}

/*
 * SOTTO LA BARRA «INDIETRO / AVANTI» NON FINISCE MAI NIENTE
 *
 * La barra e' appiccicata in fondo alla colonna che scorre, ed e' giusto: e'
 * la ragione per cui non si deve scorrere fino in fondo per proseguire.
 *
 * Ma un elemento appiccicato **galleggia sopra** il contenuto che gli passa
 * sotto, e la colonna aveva dieci pixel di spazio in fondo. Risultato: le
 * ultime righe — l'ultima voce di prezzo, l'ultimo accessorio — finivano
 * coperte dalla barra e non c'era modo di scoprirle, perche' la pagina era
 * gia' scorsa fino in fondo. Sono dati nascosti da un pulsante.
 *
 * Lo spazio in fondo vale quanto la barra, piu' un po' d'aria. E' la stessa
 * ragione per cui sotto una testata fissa si mette un margine: cio' che
 * galleggia toglie spazio a cio' che scorre, e quello spazio va restituito.
 */
.st-configurator--passi .st-panels .st-fields,
.st-configurator--passi .st-panel .st-fields {
  padding-bottom: 100px;
}

/*
 * QUI C'ERA UN `:last-of-type` CHE COLPIVA L'INTESTAZIONE
 *
 * La regola voleva dare cento pixel di respiro all'ultimo blocco del passo
 * riepilogo, perche' la barra appiccicata non gli finisse sopra. Diceva:
 * «l'ultimo figlio che non sia la barra».
 *
 * Ma `:last-of-type` non vuol dire «l'ultimo»: vuol dire «l'ultimo del proprio
 * tipo di elemento». L'intestazione e' un `<header>`, ed essendo l'unico
 * `<header>` del pannello e' anche l'ultimo — quindi la regola si applicava a
 * lei. Cento pixel di margine sotto il titolo «Indicazioni per la produzione»:
 * la fascia bianca in mezzo alla pagina, che ho inseguito per tre giri
 * credendo fosse un problema di altezze della griglia.
 *
 * Non serve piu' a niente comunque: lo spazio per la barra lo da' gia' il
 * `padding-bottom` sui campi, che e' il posto giusto perche' e' il contenitore
 * di cio' che scorre. Via.
 */

/*
 * LA COLONNA DI SINISTRA NON TAGLIA I RECAPITI
 *
 * Contenuto alto 864 px in una colonna alta 836, con `overflow: hidden`: gli
 * ultimi ventotto pixel sparivano, e ventotto pixel in fondo a quella colonna
 * sono l'indirizzo di posta — «ordini@soluzionetende.it» mozzato a meta'.
 *
 * Nascondere un recapito su una pagina il cui scopo dichiarato e' far sentire
 * il cliente assistito e' il difetto piu' caro di tutta la schermata: chi non
 * trova come chiedere aiuto sul passo delle misure non chiede aiuto, chiude.
 *
 * A cedere e' l'immagine. E' l'unico elemento della colonna che ha senso a
 * qualunque altezza: una tenda si riconosce anche trenta pixel piu' bassa,
 * mentre un indirizzo o si legge tutto o non serve a niente. `min-height: 0`
 * e' la riga che glielo permette — senza, un elemento in colonna flessibile
 * non scende sotto la propria misura naturale, e la colonna sfonda comunque.
 */
@media (min-width: 1081px) {
  /* La colonna deve poter distribuire l'altezza fra i suoi tre pezzi, e per
     farlo deve essere una colonna flessibile: era `display: block`, dove
     nessuno cede niente e l'ultimo pezzo esce dal fondo. */
  /* Il selettore passa dalla griglia perche' un'altra regola, piu' specifica
     della mia, rimetteva `display: block`: senza pareggiarla la colonna
     restava rigida e continuava a tagliare i recapiti. */
  .st-configurator--passi .st-configurator__grid .st-anteprima {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .st-configurator--passi .st-anteprima__scena {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .st-configurator--passi .st-anteprima__scena img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* L'avviso sui colori e i recapiti non si stringono e non si tagliano: i
     recapiti sono il motivo per cui questa colonna esiste. */
  .st-configurator--passi .st-anteprima__avviso,
  .st-configurator--passi .st-anteprima__aiuto {
    flex: 0 0 auto;
  }
}

/* ====================================================================
 * I MICRO-PASSI
 *
 * Un passo troppo lungo mostra una domanda per volta. I cinque passi in cima
 * restano quelli — sono la mappa del percorso — e questa riga dice a che punto
 * si e' dentro il passo aperto.
 *
 * Deliberatamente piccola e scolorita: non e' un secondo indice, e' una nota a
 * margine. Due barre di avanzamento nella stessa schermata competono fra loro
 * e finiscono per non dire niente ne' l'una ne' l'altra.
 * ==================================================================== */

.st-configurator--passi .st-micro-fuori { display: none; }

/* Vista d'insieme richiesta dal cliente: conserva le condizioni del server,
   ma non nasconde domande dentro micro-passi o fisarmoniche mobile. */
.st-configurator--passi .st-overview {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.st-configurator--passi .st-panel[data-overview="1"] .st-field:not([hidden]) {
    display: block !important;
}
.st-configurator--passi .st-panel[data-overview="1"] .st-fis__testa {
    display: none !important;
}
.st-configurator--passi .st-panel[data-overview="1"] .st-field > .st-field__label {
    display: block !important;
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    white-space: normal;
    overflow: visible;
}
.st-configurator--passi .st-panel[data-overview="1"] .st-field > .st-spiega {
    position: static;
}
.st-configurator--passi .st-panel[data-overview="1"] .st-fields {
    gap: 26px;
}

.st-configurator--passi .st-micro {
  margin: 6px 0 0;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--p-debole, #726C64);
}

/* Con i micro-passi il passo contiene una domanda sola: il titolo del passo
   e la domanda finivano appiccicati, e si leggevano come un titolo doppio. */
.st-configurator--passi .st-panel.ha-micro .st-fields {
  padding-top: 6px;
}

/* ====================================================================
 * IL RIEPILOGO FINALE SI LEGGE TUTTO — RISOLTO, E LA CAUSA ERO IO
 *
 * Al quinto passo il riepilogo restava tagliato: dalla barra «Indietro» che gli
 * passava sopra e dal fondo della pagina. Avevo provato tre volte a dargli una
 * barra di scorrimento e ogni volta era peggiorato, fino a una fessura da
 * ventotto pixel. Non capivo cosa lo stringesse.
 *
 * Lo stringevo io. Nei passi di scelta avevo scritto `min-height: 0` sulla
 * colonna destra per farla entrare — ed e' giusto li', perche' senza quella
 * riga una colonna non scende sotto la propria misura naturale e sfonda.
 *
 * Ma `min-height: 0` toglie anche il minimo che un elemento di griglia impone
 * alla propria riga. Nei passi di scelta non si vedeva, perche' la riga la
 * decideva comunque la colonna centrale. Al quinto passo la colonna centrale
 * non c'e' piu' — il riepilogo E' il contenuto — e la riga, libera di
 * stringersi quanto voleva, e' collassata a 27,78 px con dentro 755 px di
 * riepilogo, che sono usciti a coprire tutto quello che stava sotto.
 *
 * I ventotto pixel che vedevo non erano il sintomo di un vincolo da trovare:
 * erano il vincolo, scritto da me duecento righe piu' su, per un caso che al
 * quinto passo non esiste. Cercavo una causa esterna a una regola mia.
 *
 * Qui il minimo torna automatico — la riga si dimensiona sul contenuto — e
 * un tetto legato alla finestra impedisce al riquadro di uscire dal fondo.
 * Sotto quel tetto il riepilogo scorre, ed e' l'unico punto del configuratore
 * dove uno scorrimento interno e' giusto: qui il riepilogo e' cio' che si sta
 * guardando, occupa il centro della pagina, e una barra e' dove chiunque la
 * cerchi. Nei passi di scelta e' una colonna di servizio larga 340, e li' una
 * barra non la vede nessuno.
 * ==================================================================== */

@media (min-width: 1081px) {
  .st-configurator--passi:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-summary {
    /*
     * `height: auto` e' la seconda meta' della correzione, e senza di lei la
     * prima non serve a niente.
     *
     * Una regola raggruppata piu' su da' `height: 100%` a tutte le colonne
     * della griglia, riepilogo compreso: e' quella che le fa riempire la
     * schermata nei passi di scelta. Qui il cento per cento si calcolava sulla
     * riga collassata — ventisette pixel — e ridava al riquadro esattamente
     * l'altezza da cui stavo cercando di liberarlo. Ripristinare il minimo
     * automatico non bastava: l'altezza gliela imponeva un'altra riga.
     */
    min-height: 0;
    height: 100%;
    align-self: stretch;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--p-riga) transparent;
  }

  .st-configurator--passi:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-summary::-webkit-scrollbar {
    width: 8px;
  }

  .st-configurator--passi:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-summary::-webkit-scrollbar-thumb {
    background: var(--p-riga);
    border-radius: 8px;
  }

  /* Sotto l'ultima riga ci va lo spazio della barra dei comandi: e' appiccicata
     e galleggia, quindi coprirebbe l'ultima voce di costo — proprio quella che
     si controlla prima di comprare. */
  .st-configurator--passi:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-summary__inner {
    padding-bottom: 88px;
  }
}

/* ====================================================================
 * NELLA COLONNA LATERALE SOLO CIO' CHE SERVE A DECIDERE
 *
 * Configurato fino in fondo, il riquadro sforava di settantadue pixel anche al
 * massimo della compattazione. Non era piu' un problema di margini: era troppa
 * roba.
 *
 * Dentro c'erano centoventidue pixel di **dettaglio del prezzo** — «Su misura
 * 297,00 €», «Su misura 19,23 €», «Arrotondamento 0,00 €» — in una colonna
 * larga 340 mentre si sta scegliendo il tessuto. Quel dettaglio non serve a
 * decidere: serve a controllare, ed e' un'altra cosa che si fa in un altro
 * momento. Al quinto passo il riepilogo diventa il contenuto della pagina e li'
 * il dettaglio c'e' tutto, con lo spazio per leggerlo.
 *
 * Due righe chiamate tutte e due «Su misura» erano poi il peggior modo di
 * occupare quello spazio: chi le legge non capisce cosa distingua la prima
 * dalla seconda, e una somma che non si sa scomporre vale meno del suo totale.
 *
 * Quindi: mentre si sceglie, la colonna dice cosa stai comprando, quanto
 * costa, quanti ne vuoi e come si compra. Quando si controlla, dice tutto.
 * ==================================================================== */

@media (min-width: 1081px) {
  .st-configurator--passi:not(:has(.st-panel[data-kind="riepilogo"]:not([hidden]))) .st-summary__lines {
    display: none;
  }
}

/* ====================================================================
 * AL QUINTO PASSO LA PAGINA SCORRE. SOLO LI'.
 *
 * Ho provato cinque volte a far scorrere il riquadro dentro una schermata
 * ferma: togliergli il minimo, dargli altezza automatica, un tetto legato alla
 * finestra, l'allineamento steso, e infine dare la fascia intera alla griglia.
 * Ogni volta restava sui ventisette pixel, con 820 di contenuto dentro.
 *
 * La ragione e' un cerchio che dall'interno non si rompe: la fascia della
 * griglia si dimensiona sul riquadro, e un riquadro che scorre ha misura
 * minima **zero** — per definizione puo' mostrare una fetta qualunque di se'.
 * Chiedere alla fascia quanto e' alto il riquadro, e al riquadro quanto e'
 * alta la fascia, non da' nessuna risposta.
 *
 * Allora si toglie la domanda. Qui la pagina torna a scorrere come una pagina
 * normale, e ogni cosa si dimensiona sul proprio contenuto senza negoziare con
 * nessuno.
 *
 * Si perde la schermata ferma, e su questo passo si puo'. I quattro passi di
 * scelta restano fermi: li' il valore e' avere sempre in vista il totale e i
 * passi mentre si decide. Al quinto non si decide piu', si **controlla** — e
 * per controllare serve leggere tutto, che e' esattamente cio' che la
 * schermata ferma impediva.
 * ==================================================================== */

@media (min-width: 1081px) {
  html:has(body.st-senza-piede .st-panel[data-kind="riepilogo"]:not([hidden])),
  body.st-senza-piede:has(.st-panel[data-kind="riepilogo"]:not([hidden])) {
    overflow: auto;
    height: auto;
  }

  body:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-configpage {
    height: auto;
    overflow: visible;
  }

  /* Niente altezze imposte e niente barre interne: con la pagina che scorre il
     riquadro si dimensiona sul proprio contenuto, che e' cio' che voleva fare
     dall'inizio. */
  body:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-configurator--passi .st-summary {
    min-height: auto;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  body:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-configurator--passi .st-panels {
    overflow-y: visible;
  }

  /* I passi restano appesi in cima: e' l'unica cosa che vale la pena tenere
     ferma quando tutto il resto scorre. */
  body:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-configurator--passi .st-steps {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--p-fondo, #fff);
  }
}

/*
 * AL QUINTO PASSO L'ANTEPRIMA NON SI ALLUNGA
 *
 * Nei passi di scelta la colonna di sinistra deve riempire la schermata ferma,
 * e l'immagine si allunga con lei: `flex: 1 1 auto` piu' `object-fit: cover`
 * le fanno prendere tutta l'altezza ritagliando quello che avanza. E' giusto
 * finche' l'altezza e' quella dello schermo.
 *
 * Al quinto passo la pagina scorre e la fascia diventa alta quanto il
 * riepilogo: la stessa regola ha prodotto una fotografia di 396 per 1056 —
 * un ritaglio verticale di una tenda larga, che non e' deformato ma sembra
 * peggio, perche' della tenda si vede una striscia.
 *
 * Qui l'immagine torna a essere alta quanto le serve, e la colonna si ferma in
 * cima invece di stirarsi fino in fondo.
 */
@media (min-width: 1081px) {
  body:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-configurator--passi .st-anteprima {
    align-self: start;
  }

  body:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-configurator--passi .st-anteprima__scena {
    flex: 0 0 auto;
    height: auto;
  }

  body:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-configurator--passi .st-anteprima__scena img {
    height: auto;
    max-height: 420px;
    object-fit: contain;
  }
}

/*
 * IL PASSO FINALE SI DIMENSIONA SUL PROPRIO CONTENUTO
 *
 * Sotto il riepilogo resta il riquadro delle note per la produzione: due righe
 * di titolo, un campo di testo, il pulsante «Indietro». Trecentotrentasette
 * pixel di roba dentro quattrocentottantanove di riquadro — centocinquanta di
 * vuoto in fondo, che a schermo si legge come una sezione bianca capitata li'
 * per sbaglio.
 *
 * Due cause, ed entrambe sono regole giuste altrove che qui non servono piu':
 *
 *   l'altezza minima del pannello, che nei passi di scelta lo fa riempire la
 *   schermata ferma perche' la barra «Avanti» resti in fondo alla vista;
 *
 *   i cento pixel di spazio sotto i campi, messi perche' la barra appiccicata
 *   non coprisse l'ultima riga. Qui la pagina scorre e la barra non galleggia
 *   piu' su niente: quello spazio non protegge nulla, occupa e basta.
 *
 * E la fascia «Produzione su misura in Italia · Pagamenti sicuri» se ne va: in
 * mezzo alla pagina, fra il riepilogo e le note, non rassicura — sembra una
 * riga rimasta indietro. Le stesse parole stanno in cima al sito, dove chi
 * arriva le legge prima di decidere invece che dopo aver deciso.
 */
@media (min-width: 1081px) {
  /* La colonna prima del pannello: e' lei a tenere l'altezza della schermata
     ferma, e finche' la tiene il pannello dentro non puo' rimpicciolirsi
     comunque gli si dica di farlo. */
  body:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-configurator--passi .st-panels {
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
  }

  body:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-configurator--passi .st-panel {
    min-height: 0;
    flex: 0 0 auto;
  }

  body:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-configurator--passi .st-fields {
    flex: 0 0 auto;
    padding-bottom: 8px;
  }

  /*
   * La barra smette di essere spinta in fondo.
   *
   * Nei passi di scelta ha `margin-top: auto`: in una colonna flessibile quel
   * margine mangia tutto lo spazio che avanza e incolla la barra al fondo del
   * pannello, che e' esattamente cio' che serve quando il pannello e' alto
   * quanto la schermata — «Avanti» resta in vista senza scorrere.
   *
   * Al quinto passo il pannello e' alto quanto il suo contenuto, e quel
   * margine si e' trasformato in centoventotto pixel di niente fra il campo
   * delle note e la barra: la fascia bianca che si vedeva a meta' pagina.
   *
   * Non era spaziatura decorativa da riequilibrare: era una molla che spingeva
   * verso un fondo che non c'e' piu'.
   */
  body:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-configurator--passi .st-panel__nav {
    position: static;
    margin-top: 0;
  }

  body:has(.st-panel[data-kind="riepilogo"]:not([hidden])) .st-configurator--passi .st-summary__reassurance {
    display: none;
  }
}

/* ====================================================================
 * I DUE PULSANTI DEL RIEPILOGO
 *
 * «Acquista ora» pieno, «Aggiungi al carrello» col solo contorno. Non e' una
 * questione di gusto: sono due azioni che portano a due posti diversi, e la
 * gerarchia dice quale delle due il negozio consiglia. Due pulsanti pieni
 * uguali obbligherebbero a leggerli entrambi per scegliere — che e' un
 * pensiero in piu' proprio nel punto in cui se ne vogliono zero.
 *
 * Il primo e' quello pieno perche' chi ha appena fatto dieci scelte quasi
 * sempre vuole una tenda sola: il carrello, per lui, e' una schermata che gli
 * ripete cio' che ha appena visto e gli chiede un altro clic.
 * ==================================================================== */

.st-summary__azioni {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.st-summary__azioni .st-button--outline {
    background: #fff;
    border: 1px solid var(--st-p-riga, #EAE4DC);
    color: var(--st-p-inchiostro, #23201D);
}

.st-summary__azioni .st-button--outline:hover:not(:disabled) {
    border-color: var(--st-p-rame, #B45A17);
    background: var(--st-p-rame-tenue, #FBF1E8);
    color: var(--st-p-rame-scuro, #8F3D08);
}

/* Da spenti restano visibili, e si vede che sono spenti: nasconderli finche'
   la configurazione non e' completa toglierebbe a chi guarda la cosa piu'
   utile della schermata — sapere che alla fine si compra. */
.st-summary__azioni .st-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/*
 * Su una finestra bassa i due pulsanti diventano una riga sola.
 *
 * Sotto gli 800 px la schermata fissa si scioglie e la pagina scorre; due
 * pulsanti impilati sono ottanta pixel in piu' fra il totale e la fine della
 * colonna, cioe' altro da scorrere proprio dove si sta decidendo.
 */
@media (max-height: 799px) and (min-width: 1081px) {
    .st-summary__azioni { grid-template-columns: 1fr 1fr; }
}

/* ======================================================================
 * LE OPZIONI POCHE: SCHEDE MANEGGEVOLI, FIGURA CHE RIEMPIE
 *
 * Da quando il configuratore usa tutta la finestra, un passo con due sole
 * opzioni faceva due schede da 518 px con dentro un disegno alto 190 e
 * trecento pixel di beige sotto. Piu' grande e piu' vuoto insieme: il
 * contrario di maneggevole. Per scegliere fra «con viti» e «con biadesivo»
 * non serve un cartellone, serve vedere le due figure vicine.
 *
 * DUE REGOLE SI PESTAVANO I PIEDI
 * `passi.css` dava al riquadro un rapporto 1:1 e all'immagine `cover` a
 * riempirlo; `configurator.css` — che si carica prima ma con un selettore che
 * vale due classi in piu' — imponeva all'immagine `height: 190px` e
 * `contain`. Vinceva il secondo, e restava il riquadro quadrato del primo con
 * dentro la figura bassa del secondo. Quel vuoto non l'aveva deciso nessuno:
 * e' la differenza fra due regole scritte in due file diversi.
 *
 * Qui si fissano tutte e tre le cose insieme — larghezza della scheda,
 * rapporto del riquadro, comportamento dell'immagine — e con una specificita'
 * che basta a chiudere la discussione. `contain` e non `cover`: sono disegni
 * quotati, e ritagliarli toglie proprio le quote.
 * ====================================================================== */

.st-configurator--passi .st-panel[data-kind]
    .st-choices--visual:has(.st-choice:nth-child(-n+4):last-child) {
    /* Corsie con un tetto vero, e allineate a sinistra: due opzioni fanno due
       schede da 220, non due mezze pagine. */
    grid-template-columns: repeat(auto-fit, minmax(170px, 220px));
    justify-content: start;
    gap: 14px;
}

.st-configurator--passi
    .st-choices--visual:has(.st-choice:nth-child(-n+4):last-child) .st-choice {
    width: 100%;
    max-width: 220px;
}

.st-configurator--passi
    .st-choices--visual:has(.st-choice:nth-child(-n+4):last-child) .st-choice__media {
    /* 4:3 e non 1:1. I disegni delle opzioni sono piu' larghi che alti: in un
       quadrato ci stanno lasciando due fasce vuote sopra e sotto. */
    aspect-ratio: 4 / 3;
}

.st-configurator--passi
    .st-choices--visual:has(.st-choice:nth-child(-n+4):last-child) .st-choice__media img {
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
}

/* ======================================================================
 * IL RIEPILOGO NON PERDE PEZZI
 *
 * La compattazione ha tre gradini. I primi due stringono e basta — spaziature
 * piu' corte, le scelte su due colonne — e non tolgono niente. Il terzo invece
 * **nascondeva** la fascia di fiducia e i due comandi «salva» e «condividi».
 *
 * Era una scelta difendibile finche' la regola era «la colonna deve stare in
 * una schermata». Non lo e' piu' se la conseguenza e' che dal riepilogo
 * spariscono delle voci: chi sta per pagare deve poter vedere tutto quello che
 * ha scelto, e «non c'era spazio» non e' una risposta.
 *
 * Adesso al terzo gradino non sparisce niente: la colonna si limita all'altezza
 * della finestra e **scorre dentro di se'**. Tutto resta raggiungibile, e la
 * pagina sotto non si muove mentre si scorre il riepilogo (`overscroll-behavior`).
 * ====================================================================== */

body.st-conto-3 .st-configurator--passi .st-summary__reassurance,
body.st-conto-3 .st-configurator--passi .st-summary__keep,
body.st-conto-3 .st-configurator--passi .st-summary__extra {
    display: revert;
}

body.st-conto-3 .st-configurator--passi .st-summary {
    /* `--p-testata` e `--p-passi` sono le due fasce che restano appiccicate in
       alto: quello che avanza sotto di loro e' lo spazio vero della colonna. */
    max-height: calc(100vh - var(--p-testata, 76px) - var(--p-passi, 64px) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* La lista delle scelte non ha piu' bisogno del suo tetto: a scorrere adesso
   ci pensa la colonna, e un tetto dentro un contenitore che gia' scorre fa due
   barre di scorrimento annidate — quella interna nessuno la trova. */
.st-configurator--passi .st-summary__choices { max-height: none; }

/* Lo stile della barra del ritorno non sta qui: quella barra compare sulle
   pagine *fuori* dal configuratore — la guida, le spedizioni — dove questo
   foglio non viene caricato. Viaggia in linea con il markup, in Ritorno.php. */

/* ======================================================================
 * LO SCORRIMENTO DEL RIEPILOGO
 *
 * Da quando la colonna scorre, e' comparsa **anche** una barra orizzontale.
 * Non era un difetto di larghezza del contenuto: e' la fascia di fiducia in
 * fondo, che ha margini negativi per arrivare fino al bordo della scheda —
 * 348 px in una colonna da 330, misurati. Finche' il riquadro non scorreva
 * quei margini uscivano e basta, senza conseguenze. Appena si dichiara
 * `overflow-y`, il browser deve decidere anche l'asse orizzontale, e diciotto
 * pixel di sbordo diventano una barra.
 *
 * Si tolgono i margini negativi quando la colonna scorre — la fascia resta
 * dentro l'imbottitura, che a quel punto e' anche piu' giusto — e si dichiara
 * `overflow-x: hidden`, perche' un riquadro che scorre in verticale non deve
 * mai scorrere in orizzontale: e' il modo piu' rapido di perdere il pulsante
 * «acquista» fuori dallo schermo senza accorgersene.
 * ====================================================================== */
body.st-conto-3 .st-configurator--passi .st-summary {
    overflow-x: hidden;
}

body.st-conto-3 .st-configurator--passi .st-summary__reassurance {
    margin-inline: 0;
    border-radius: 0 0 var(--p-raggio, 12px) var(--p-raggio, 12px);
}

/* --- la barra, disegnata invece che di sistema ------------------------- *
 *
 * Quella del sistema e' larga quindici pixer, grigia, e su una colonna di
 * trecento e' un quinto di niente che si prende spazio vero. Questa e' larga
 * sei, non ha traccia, e il cursore e' la terracotta del marchio tenuta bassa
 * di opacita': si vede quando serve e non compete con il totale.
 *
 * Due dichiarazioni per due mondi: `scrollbar-width`/`scrollbar-color` sono lo
 * standard e li leggono Firefox e i browser recenti; `::-webkit-scrollbar` e'
 * la versione di WebKit, che lo standard ancora non lo applica ovunque.
 * Tenerle entrambe non e' ridondanza, e' copertura. */
body.st-conto-3 .st-configurator--passi .st-summary {
    scrollbar-width: thin;
    scrollbar-color: rgba(182, 85, 50, .45) transparent;
}

body.st-conto-3 .st-configurator--passi .st-summary::-webkit-scrollbar {
    width: 6px;
}

body.st-conto-3 .st-configurator--passi .st-summary::-webkit-scrollbar-track {
    background: transparent;
}

body.st-conto-3 .st-configurator--passi .st-summary::-webkit-scrollbar-thumb {
    background: rgba(182, 85, 50, .38);
    border-radius: 999px;
}

body.st-conto-3 .st-configurator--passi .st-summary:hover::-webkit-scrollbar-thumb {
    background: rgba(182, 85, 50, .62);
}

/* ======================================================================
 * I TESSUTI: QUATTRO PER RIGA, NON SETTE
 *
 * Con `minmax(112px, 1fr)` e la colonna larga 844 uscivano sette schede da
 * 112. Un campione di stoffa a 112 px si guarda ancora; il suo nome no —
 * «Tenda a Rullo con tessuto Filtrante Microforato» a corpo 15 su 112 pixel
 * diventa tre righe tagliate, e sette nomi tagliati uno accanto all'altro non
 * si distinguono fra loro. Fitto serve a confrontare i colori, non a leggere.
 *
 * A 190 px minimi ne entrano quattro: il campione e' piu' grande, il nome sta
 * su due righe intere, e in una schermata se ne vedono comunque otto o dodici.
 * Il confronto a colpo d'occhio resta, la lettura torna.
 * ====================================================================== */
.st-configurator--passi .st-panel[data-kind="tessuto"] .st-choices--visual,
.st-configurator--passi .st-panel[data-kind="colore"] .st-choices--visual {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.st-configurator--passi .st-panel[data-kind="tessuto"] .st-choice__nome,
.st-configurator--passi .st-panel[data-kind="colore"] .st-choice__nome {
    -webkit-line-clamp: 2;
    min-height: 0;
}

/* ======================================================================
 * IL CAMPO DELLA MISURA, RIMESSO INSIEME
 *
 * Misurato sul DOM: larghezza 271 con `max-width: none`, `position: static`,
 * nessun bordo — e il «cm» in posizione **assoluta** dentro un genitore
 * statico, quindi ancorato a un antenato lontano. E' il margine sbagliato che
 * si vedeva: non era un margine, era un'unita' di misura che non sapeva piu'
 * a quale riquadro appartenere.
 *
 * Due cause, in due file diversi.
 *
 * 1. `configurator.css` dichiara `.st-panel[data-kind="misure"] .st-number
 *    { max-width: none; position: static }`. Vale una classe, un attributo e
 *    una classe — tre — e batte `.st-configurator--passi .st-number`, che ne
 *    vale due, anche se il nostro foglio si carica dopo. Il campo si allargava
 *    a tutto il pannello.
 *
 * 2. Piu' in basso in questo stesso foglio, `.st-configurator--passi
 *    .st-number` viene riportato a `display: block; border: 0`, perche' il
 *    controllo vero doveva diventare `.st-num` — quello con i due pulsanti.
 *    Ma il markup di questo passo stampa ancora `.st-number` con dentro
 *    `.st-number__unit`: la regola nuova ha spento la vecchia, e la nuova non
 *    trova niente da vestire.
 *
 * Qui si rimette il riquadro come deve essere, con la specificita' che serve
 * a chiudere entrambe le questioni: quattro classi.
 * ====================================================================== */
.st-configurator--passi .st-panel[data-kind="misure"] .st-field .st-number {
    display: flex;
    align-items: stretch;
    position: relative;
    width: 100%;
    max-width: 260px;
    height: 52px;
    border: 1px solid var(--p-riga, #EAE4DC);
    border-radius: var(--p-raggio-campo, 12px);
    background: #fff;
    overflow: hidden;
}

.st-configurator--passi .st-panel[data-kind="misure"] .st-field .st-number:focus-within {
    border-color: var(--p-rame, #B65532);
    outline: 2px solid var(--p-rame, #B65532);
    outline-offset: 1px;
}

.st-configurator--passi .st-panel[data-kind="misure"] .st-field .st-number input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: none;
    font: 500 var(--st-fs-lead)/1 var(--st-font-body, inherit);
    color: var(--p-inchiostro, #15181B);
}

.st-configurator--passi .st-panel[data-kind="misure"] .st-field .st-number input:focus-visible {
    outline: none;
}

/* Statico e in fila, non assoluto: l'unita' e' una parte del controllo, non
   un'etichetta appoggiata sopra. Cosi' non puo' finire fuori posto qualunque
   cosa faccia il genitore. */
.st-configurator--passi .st-panel[data-kind="misure"] .st-field .st-number__unit {
    position: static;
    transform: none;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0 14px;
    border-left: 1px solid var(--p-riga, #EAE4DC);
    background: var(--p-fondo, #FAF6F1);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--p-tenue, #7B766D);
}

/* ======================================================================
 * QUANTE SCHEDE PER RIGA: UN TETTO, NON SOLO UN MINIMO
 *
 * `minmax(190px, 1fr)` e' un minimo: dice quanto puo' essere stretta una
 * scheda, non quante ce ne stanno. Su un pannello largo mille e passa ne
 * usciva una fila da cinque o sei, e a quella larghezza il nome del tessuto
 * torna a spezzarsi — «Luce» andava a capo in mezzo alla parola, che e' la
 * cosa peggiore che possa fare un'etichetta: chi legge non capisce se e' una
 * parola sola o due.
 *
 * Il tetto lo si mette alla **griglia**, non alle schede: larga al massimo
 * quanto quattro colonne comode piu' i loro spazi. Le schede restano larghe,
 * i nomi stanno su una riga, e sopra i quattro elementi la fila va a capo
 * invece di stringersi. Lo spazio che avanza a destra non e' sprecato: e'
 * quello che rende leggibile il resto.
 * ====================================================================== */
.st-configurator--passi .st-panel[data-kind] .st-choices--visual {
    max-width: calc(4 * 240px + 3 * 16px);
}

/* Le parole non si spezzano. `break-word` interviene solo quando non c'e'
   alternativa, ma «non c'e' alternativa» capitava troppo spesso perche' le
   schede erano strette: allargate quelle, la regola non serve piu' e toglierla
   evita che il caso limite torni senza che nessuno se ne accorga. */
.st-configurator--passi .st-choice__nome,
.st-configurator--passi .st-choice__label {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

/* Niente tre righe riservate sotto ogni scheda.
   `.st-choice__nome` aveva `min-height: 3.35em`, cioe' lo spazio di tre righe
   anche quando il nome e' «Bianco». Serviva a tenere le schede della stessa
   altezza, ma di quello se ne occupa gia' la griglia: le celle di una riga
   sono alte uguali per costruzione. Il risultato era una fascia vuota sotto
   ogni nome corto — e a occhio sembrava che la parola fosse andata a capo. */
.st-configurator--passi .st-choice__nome {
    -webkit-line-clamp: 2;
    min-height: 0;
}

/* ======================================================================
 * IL PASSO DEGLI ACCESSORI SFONDAVA IL PANNELLO — E LA COLPA ERA MIA
 *
 * Misurato: `.st-field` largo 966 dentro una traccia da 806, con la griglia
 * delle opzioni a otto colonne e i nomi tagliati a meta'.
 *
 * La causa e' la regola con cui poco fa ho impedito alle parole di andare a
 * capo. Un elemento di griglia nasce con `min-width: auto`, cioe' «non
 * stringerti sotto il tuo contenuto minimo». Finche' le parole potevano
 * spezzarsi, quel minimo era una lettera. Vietata la spezzatura, il minimo e'
 * diventato **la parola piu' lunga** — «Smacchiatore», «Cartongesso» — e la
 * colonna si e' allargata fino a contenerla, portandosi dietro tutto il campo
 * fuori dal pannello.
 *
 * Tre rimedi, e servono tutti e tre.
 *
 * 1. `min-width: 0` sui campi: e' la rete strutturale. Un campo non deve
 *    poter uscire dalla propria traccia, qualunque cosa contenga. Vale anche
 *    per i contenuti di domani, che nessuno sta guardando adesso.
 *
 * 2. Colonne da 170 px invece che da 112. Le parole piu' lunghe degli
 *    accessori stanno in centoventi pixel: a centosettanta ci stanno con
 *    margine, e nessuna deve andare a capo. E' il vero modo di non spezzare
 *    le parole — dare loro lo spazio, non vietare la spezzatura.
 *
 * 3. `overflow-wrap: break-word` rimesso come **ultima risorsa**. Non e' una
 *    marcia indietro: quella regola interviene solo quando una parola non ci
 *    sta comunque, e in quel caso l'alternativa non e' «va su una riga», e'
 *    «esce dal riquadro». Fra una parola spezzata e un pannello sfondato,
 *    meglio la prima — ma con colonne larghe non capitera'.
 * ====================================================================== */
.st-configurator--passi .st-field {
    min-width: 0;
}

.st-configurator--passi .st-panel[data-kind] .st-choices--visual {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.st-configurator--passi .st-choice__nome,
.st-configurator--passi .st-choice__label {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

/* ======================================================================
 * IL PULSANTE «?» ERA ALTO DICIOTTO PIXEL
 *
 * E' il comando che apre la spiegazione di una scelta — quello che serve a chi
 * non sa cosa vuol dire «luce» o «finita», cioe' esattamente la persona che ha
 * piu' bisogno di premerlo. Diciotto pixel sono meta' di un polpastrello.
 *
 * Il disegno resta di diciotto: cresce l'area premibile, con l'imbottitura, e
 * si riprende con un margine negativo perche' la fila accanto all'etichetta non
 * si allarghi. E' lo stesso trucco della testata, e per la stessa ragione:
 * cresce cio' che si preme, non cio' che si vede.
 * ====================================================================== */
.st-configurator--passi .st-spiega {
    width: auto;
    height: auto;
    min-height: 0;
    padding: 11px;
    margin: -11px;
}

.st-configurator--passi .st-panel__attenzione-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
}

/* Sul telefono la barra «Indietro / Avanti» e la bolla d'aiuto finivano nello
   stesso angolo. Si riserva in fondo al pannello lo spazio della bolla: cosi'
   la barra si puo' sempre portare sopra di lei scorrendo, invece di restarle
   sotto. Vedi il commento in `chrome.css` per l'altra meta' del rimedio. */
@media (max-width: 1080px) {
    /* La barra «Indietro / Avanti» qui e' fissa in fondo, alta 71 px: senza
       questo spazio l'ultima riga del pannello le finisce sotto. */
    .st-configurator--passi .st-panels { padding-bottom: 84px; }

    /* E la bolla d'aiuto si toglie di mezzo. Misurato: la barra sta a y 709
       alta 71, la bolla a y 720 alta 48 — una sopra l'altra, e la bolla vince
       perche' ha lo z-index piu' alto. Chi premeva «Avanti» apriva l'aiuto.
       Novantasei e' l'altezza della barra piu' il respiro che la bolla aveva
       gia' prima. */
    body:has(.st-configurator--passi) .st-soccorso { bottom: 96px; }
}

/* =======================================================================
 * LA VESTE DELLA TAVOLA
 *
 * La macchina sotto non cambia: i cinque passi restano cinque passi, e il
 * percorso e' quello gia' collaudato. Cambia come si presenta.
 * ===================================================================== */

/* --- LA BARRA DEI PASSI ---------------------------------------------
 *
 * Le classi di stato sono `is-current` e `is-filled`, e `aria-current="step"`
 * sta sul pulsante e non sulla voce. Scritto a memoria — `is-on`, `is-fatto` —
 * il selettore non da' errore, non cambia niente e sembra funzionare: il
 * terracotta sul passo corrente arrivava dal foglio preesistente, non da qui.
 * Verificato leggendo il DOM, non il codice che lo genera.
 * Era una riga larga quanto la pagina, con i trattini fra un numero e
 * l'altro e l'etichetta di fianco. La tavola la vuole raccolta al centro,
 * con l'etichetta sotto il numero e un filo continuo che li unisce: cosi'
 * si legge come una sequenza e non come cinque voci di menu.
 * ------------------------------------------------------------------- */

.st-configurator--passi .st-steps__list {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: start;
    gap: 0;
    max-width: 780px;
    margin-inline: auto;
    padding: 0;
    list-style: none;
}
/* Il filo passa dietro i numeri e comincia e finisce dentro il primo e
   l'ultimo: un filo che sborda oltre il primo pallino sembra un pezzo
   mancante invece di un collegamento. */
.st-configurator--passi .st-steps__list::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--st-border, #E4DDD2);
    z-index: 0;
}
.st-configurator--passi .st-steps__item { position: relative; z-index: 1; }
.st-configurator--passi .st-steps__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    text-align: center;
}
.st-configurator--passi .st-steps__n {
    display: grid;
    place-items: center;
    width: 31px; height: 31px;
    border-radius: 50%;
    border: 1px solid var(--st-border-strong, #CBBFAE);
    background: #fff;
    color: var(--st-muted, #7B766D);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background .18s, border-color .18s, color .18s;
}
.st-configurator--passi .st-steps__item.is-current .st-steps__n {
    background: var(--st-copper, #B65532);
    border-color: var(--st-copper, #B65532);
    color: #fff;
}
/* NIENTE FONDO SUL PASSO GIA' COMPILATO
 *
 * Il foglio ha tre stati, non due: `is-current`, `is-filled` e `is-done`. E
 * `is-done` era gia' disegnato — numero nascosto (`color: transparent`) e una
 * spunta terracotta tracciata in `::after`.
 *
 * Riempiendo di inchiostro anche `is-filled` ho ottenuto due cose sbagliate
 * insieme: la spunta terracotta finiva su fondo nero, e il passo compilato ma
 * non completato diventava un cerchio nero vuoto, perche' il numero li' e'
 * gia' trasparente. Due colori sbagliati nati da una regola sola.
 *
 * Lo stato compilato lo disegna il foglio che c'era. Qui resta solo cio' che
 * ho davvero aggiunto: le etichette sotto i numeri e il filo che li unisce. */
.st-configurator--passi .st-steps__testo { display: block; }
.st-configurator--passi .st-steps__titolo {
    display: block;
    font-size: var(--st-fs-micro);
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--st-muted, #7B766D);
    line-height: 1.3;
}
.st-configurator--passi .st-steps__item.is-current .st-steps__titolo {
    color: var(--st-p-inchiostro, #15181B);
    font-weight: 600;
}
/* Il valore scelto sotto l'etichetta: nella tavola non c'e', ma qui esiste ed
   e' utile — dice cosa si e' gia' scelto senza tornare indietro. Resta, piu'
   piccolo e piu' quieto. */
.st-configurator--passi .st-steps__valore {
    display: block;
    margin-top: 2px;
    font-size: var(--st-fs-micro);
    color: var(--st-copper-text, #B45431);
    line-height: 1.3;
}

/* --- LA SCHEDA DELLA DOMANDA ---------------------------------------- */

.st-configurator--passi .st-panel {
    background: #fff;
    border: 1px solid var(--st-border, #E4DDD2);
    border-radius: var(--st-r-scheda, 20px);
    padding: clamp(20px, 2.2vw, 30px);
}
.st-configurator--passi .st-panel__header { margin-bottom: 20px; }
.st-configurator--passi .st-panel__title {
    font-family: var(--st-font-display, Georgia, serif);
    font-size: var(--st-fs-h3);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.012em;
    color: var(--st-p-inchiostro, #15181B);
}

/* --- IL RIEPILOGO --------------------------------------------------- */

.st-configurator--passi .st-summary {
    background: var(--st-p-crema, #FAF6F1);
    border: 1px solid var(--st-border, #E4DDD2);
    border-radius: var(--st-r-scheda, 20px);
}
.st-configurator--passi .st-summary__total-label {
    font-size: var(--st-fs-micro);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--st-p-inchiostro, #15181B);
}
/* Il totale in terracotta: e' il solo numero della colonna che cambia
   mentre si sceglie, ed e' la ragione per cui questa colonna esiste. */
.st-configurator--passi .st-summary__total-value {
    font-family: var(--st-font-display, Georgia, serif);
    font-size: var(--st-fs-h2);
    font-weight: 600;
    color: var(--st-copper, #B65532);
    line-height: 1.1;
}

@media (max-width: 900px) {
    .st-configurator--passi .st-steps__list { max-width: none; }
    .st-configurator--passi .st-steps__titolo { font-size: 10.5px; }
    .st-configurator--passi .st-steps__valore { display: none; }
}

/* Sotto i 560px cinque etichette non ci stanno: a 360 ogni colonna ha 64px e
   «Comando e accessori» esce dal bordo. Restano i numeri — che dicono a che
   punto si e' e quanto manca — e l'etichetta del solo passo corrente, che e'
   l'unica che serve leggere mentre la si sta facendo. */
@media (max-width: 560px) {
    .st-configurator--passi .st-steps__titolo { display: none; }
    .st-configurator--passi .st-steps__item.is-current .st-steps__titolo {
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 38px;
        white-space: nowrap;
        font-size: var(--st-fs-micro);
    }
    .st-configurator--passi .st-steps__list { padding-bottom: 22px; }
    .st-configurator--passi .st-steps__list::before { left: 8%; right: 8%; }
}

/* =======================================================================
 * IL NOME DEL COLORE NON SI LEGGE DUE VOLTE
 *
 * Le fotografie dei campioni arrivano dal fornitore con il nome stampato
 * dentro, in corsivo, sulla fascia bassa: «Bianco 137», «Avorio 125». Sotto
 * la fotografia c'e' poi l'etichetta della scheda, che dice la stessa cosa.
 * Il nome compariva due volte a due centimetri di distanza, e sui campioni
 * piu' bassi la scritta stampata finiva tagliata a meta' dall'etichetta —
 * che e' peggio del doppione, perche' sembra un errore di caricamento.
 *
 * L'immagine e' 192x192 e la cornice pure, quindi `cover` la mostra intera,
 * fascia compresa. Alzandola al 125% e ancorandola in alto, la cornice taglia
 * il quinto basso: via la scritta, resta il tessuto. Il nome lo dice
 * l'etichetta, una volta sola e nella tipografia del sito.
 * ===================================================================== */

.st-configurator--passi .st-choice__media { overflow: hidden; }
.st-configurator--passi .st-choice__media img {
    height: 125%;
    object-fit: cover;
    object-position: center top;
}

/*
 * L'AVVISO DEL RITORNO FORZATO
 *
 * Compare quando le misure inserite fanno nascere domande nuove in un passo
 * gia' superato, e il configuratore ci riporta. Il salto e' corretto, ma senza
 * una parola sembra un guasto: "arrivo alle misure, vado avanti e mi riporta
 * indietro" era la segnalazione piu' frequente.
 *
 * Tono informativo, non d'errore: chi legge non ha sbagliato niente.
 */
.st-panel__ritorno {
  margin: 12px 0 0;
  padding: 11px 14px;
  border-left: 3px solid var(--st-terracotta, #B65532);
  background: var(--st-crema, #FAF6F1);
  color: var(--st-inchiostro, #15181B);
  font-size: 14.5px;
  line-height: 1.5;
  border-radius: 0 3px 3px 0;
}

.st-panel__ritorno[hidden] { display: none; }

@media (max-width: 640px) {
  .st-panel__ritorno { font-size: var(--st-fs-small); padding: 10px 12px; }
}

/*
 * LE OPZIONI IMPOSSIBILI
 *
 * Spente e spiegate, non nascoste: chi cercava quell'opzione deve capire
 * cosa cambiare per averla, non dubitare di averla immaginata.
 */
.st-choice.is-vietata {
  opacity: .5;
  cursor: not-allowed;
  position: relative;
}

.st-choice.is-vietata:hover { opacity: .62; }

.st-choice__vincolo {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--st-terracotta, #B65532);
  font-weight: 500;
}

.st-panel__vincolo {
  margin: 12px 0 0;
  padding: 11px 14px;
  border-left: 3px solid var(--st-terracotta, #B65532);
  background: var(--st-crema, #FAF6F1);
  color: var(--st-inchiostro, #15181B);
  font-size: 14.5px;
  line-height: 1.5;
  border-radius: 0 3px 3px 0;
}

.st-panel__vincolo[hidden] { display: none; }

/* ======================================================================
 * IL CONFIGURATORE SU TELEFONO
 *
 * COSA E' STATO MISURATO (390x844, iPhone)
 * ----------------------------------------
 * Un giro completo, contando i pixel che si scorrono:
 *
 *   passi          y   80  alto  93
 *   riepilogo      y  193  alto 530   <- il 63% del primo schermo
 *   anteprima      y  743  alto 265
 *   **le domande** y 1028             <- oltre uno schermo e mezzo piu' giu'
 *
 * Cioe': si apre il configuratore e la prima cosa che si vede e' una scheda
 * con **due pulsanti d'acquisto spenti** («Acquista ora», «Aggiungi al
 * carrello»), un totale che dice «—», e due comandi per salvare e condividere
 * una configurazione che non esiste ancora. La prima domanda — larghezza e
 * altezza — non si vede senza scorrere.
 *
 * E le domande, una volta raggiunte, sono lunghissime:
 *
 *   Colori Tessuto                30 opzioni   4225 px = 5,0 schermate
 *   Articoli opzionali            12 opzioni   4128 px = 4,9
 *   Staffe, Cassonetto, Mantovane  9 opzioni   3575 px = 4,2
 *   Catene                        10 opzioni   1552 px = 1,8
 *
 * **Sedicimila pixel di sole domande: diciannove schermate.** Sul desktop le
 * stesse domande stanno in una griglia dentro un pannello che scorre da solo,
 * e la pagina resta alta uno schermo.
 *
 * PERCHE' LA GRIGLIA COLLASSAVA
 * -----------------------------
 * Una regola per il telefono c'era gia' — `repeat(2, minmax(0, 1fr))` — e non
 * ha mai disegnato niente: la battono tre regole piu' precise scritte dopo,
 * che chiedono corsie da 170, 176 e 200 px. Nel contenitore del telefono, che
 * e' largo 292, nessuna di quelle tre ne fa entrare due. Ogni opzione si
 * prendeva la riga intera, e siccome la sua fotografia e' quadrata,
 * un'opzione era alta quanto la colonna e' larga: 292 px di immagine piu' il
 * nome. Trecentoquarantanove pixel per scegliere un colore.
 *
 * LE DECISIONI
 * ------------
 * 1. **Prima si sceglie, poi si fa il conto.** Il riepilogo scende in fondo e
 *    non compare affatto finche' non si arriva al passo che si chiama proprio
 *    «Riepilogo». Il totale intanto non sparisce: sta nella barra fissa in
 *    basso, che c'e' gia' ed e' sempre sott'occhio.
 * 2. **Tre forme di opzione, non una.** Un campione di tessuto e' un colore:
 *    tre per riga. Un'opzione con un nome e' una scheda: due per riga. Una
 *    scelta con una spiegazione da leggere non e' una scheda: e' una riga,
 *    con la miniatura a sinistra e il testo accanto — su un telefono si legge
 *    per righe, non per quadrati.
 * 3. **Il nome non riserva piu' tre righe.** `min-height: 3.35em` teneva
 *    allineate le cornici quando le schede erano larghe; a tre per riga sono
 *    quarantatre pixel di vuoto sotto «Bianco 137», trenta volte.
 * ==================================================================== */

@media (max-width: 700px) {

    /* --- 1. L'ORDINE DELLA PAGINA ------------------------------------ */

    .st-configurator--passi .st-configurator__grid {
        grid-template-areas:
            "passi"
            "vista"
            "scelta"
            "conto";
    }

    /* ALL'ULTIMO PASSO L'ORDINE SI ROVESCIA
       Spostando il riepilogo in fondo — giusto per i primi quattro passi —
       al quinto il pulsante d'acquisto finiva a y=1176 su una finestra da
       844: una schermata e mezzo di scorrimento dopo un campo per le note
       facoltative. E la barra ancorata, all'ultimo passo, non ha comandi:
       «Indietro» e «Avanti» sono 0x0, quindi non c'era **nessun** modo di
       comprare senza scorrere.

       Al passo che si chiama «Riepilogo» il conto e' il contenuto: torna
       sopra, e le note restano sotto, dove appartengono le cose
       facoltative. */
    .st-configurator--passi .st-configurator__grid:has(.st-panel.is-active[data-kind="riepilogo"]) {
        grid-template-areas:
            "passi"
            "vista"
            "conto"
            "scelta";
    }

    /* Il riepilogo esiste quando c'e' qualcosa da riepilogare. Prima di
       allora e' una scheda alta mezzo schermo che dice «—» e offre due
       pulsanti spenti: e' il modo piu' rapido di far credere che il sito
       non funzioni. Il selettore guarda il passo attivo per **tipo**, non
       per numero: se un domani i passi cambiano ordine, questa regola
       continua a dire la stessa cosa. */
    .st-configurator--passi .st-configurator__grid:not(:has(.st-panel.is-active[data-kind="riepilogo"])) .st-summary {
        display: none;
    }

    /* --- 2. L'ANTEPRIMA ---------------------------------------------- */

    /* Duecentosessantacinque pixel sono un terzo dello schermo, e prima di
       aver scelto qualcosa mostrano una fotografia di catalogo. Resta —
       e' un prodotto che si compra con gli occhi — ma piu' bassa. */
    .st-configurator--passi .st-anteprima__scena { aspect-ratio: 2 / 1; }

    /* --- 3. LE OPZIONI CON UN NOME DIVENTANO RIGHE -------------------
     *
     * Non due schede per riga: **una riga per opzione**.
     *
     * A due colonne la scheda e' larga 141, e i nomi di questo catalogo sono
     * frasi tecniche — «Cover e Coprivite in Plastica, Staffa in Metallo»,
     * «Profilo di premontaggio con biadesivo». In 141 px o si tagliano (e
     * allora non si puo' scegliere quello che non si legge) o si prendono
     * cinque righe (e allora la scheda torna alta come prima).
     *
     * Una riga con la miniatura a sinistra e il nome accanto risolve
     * entrambe: al nome restano quasi duecento pixel, quindi si legge per
     * intero, e l'opzione e' alta novanta pixel invece di trecento. E' anche
     * la forma che un telefono conosce gia': gli elenchi si scorrono per
     * righe, non per quadrati.
     * ---------------------------------------------------------------- */

    .st-configurator--passi .st-configurator__grid .st-panel[data-kind] .st-choices--visual,
    .st-configurator--passi .st-configurator__grid .st-panel[data-kind] .st-choices--visual:has(.st-choice__desc),
    .st-configurator--passi .st-configurator__grid .st-choices--visual,
    .st-configurator--passi .st-configurator__grid .st-choices--visual:has(.st-choice__desc),
    .st-configurator--passi .st-configurator__grid .st-choices--visual:has(.st-choice:nth-child(-n+4):last-child),
    .st-configurator--passi .st-configurator__grid .st-panel[data-kind] .st-choices--visual:has(.st-choice:nth-child(-n+4):last-child) {
        /* Il secondo selettore non e' un doppione: i gruppi con quattro
           opzioni o meno hanno una regola tutta loro, larga 220 px a corsia,
           e senza `[data-kind]` la mia ha una classe in meno e perde. Con
           tre opzioni «Lato del comando» restava alto 740 px. */
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .st-configurator--passi .st-configurator__grid .st-choices--visual .st-choice,
    .st-configurator--passi .st-configurator__grid .st-choices--visual:has(.st-choice:nth-child(-n+4):last-child) .st-choice {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        width: 100%;
        /* Il tetto di 220 px serve sul desktop, dove due opzioni sole
           diventerebbero due mezze pagine. In una riga di telefono e' il
           contrario: la riga deve arrivare in fondo, se no sembra tagliata. */
        max-width: none;
        padding: 8px 14px 8px 8px;
    }

    /* La miniatura resta quadrata anche nei gruppi piccoli, dove il foglio
       la vuole 4:3: in una riga alta 76 px le due forme si notano. */
    .st-configurator--passi .st-configurator__grid .st-choices--visual .st-choice__media,
    .st-configurator--passi .st-configurator__grid .st-choices--visual:has(.st-choice:nth-child(-n+4):last-child) .st-choice__media {
        aspect-ratio: 1 / 1;
    }

    .st-configurator--passi .st-configurator__grid .st-choices--visual .st-choice__media {
        width: 76px;
        margin: 0;
        border-radius: 8px;
    }

    .st-configurator--passi .st-configurator__grid .st-choices--visual .st-choice__text {
        padding: 0;
        text-align: left;
    }

    /* Il nome ha spazio: tre righe piene, senza puntini e senza altezza
       riservata — in una riga le schede non devono pareggiarsi fra loro. */
    .st-configurator--passi .st-configurator__grid .st-choices--visual .st-choice__nome {
        -webkit-line-clamp: 3;
        min-height: 0;
    }

    .st-configurator--passi .st-configurator__grid .st-choices--visual .st-choice__desc {
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding: 0;
        margin-top: 2px;
    }

    /* --- 4. I CAMPIONI RESTANO UNA GRIGLIA ---------------------------
     *
     * Qui il contenuto **e'** l'immagine: «Bianco 137» accanto a un
     * quadratino di tessuto non aggiunge niente che il quadratino non dica
     * gia'. Trenta campioni in riga singola sarebbero trenta righe; a tre
     * per riga sono dieci, e si confrontano a colpo d'occhio, che e' il modo
     * in cui si sceglie un colore.
     *
     * Queste regole stanno **dopo** quelle delle righe di proposito: hanno
     * la stessa precisione, e a parita' vince l'ultima. Invertirle rimette
     * i campioni in colonna senza che nessuna riga cambi.
     * ---------------------------------------------------------------- */

    .st-configurator--passi .st-configurator__grid .st-panel[data-kind="tessuto"] .st-choices--visual,
    .st-configurator--passi .st-configurator__grid .st-panel[data-kind="colore"] .st-choices--visual {
        grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
        gap: 8px;
    }

    .st-configurator--passi .st-configurator__grid .st-panel[data-kind="tessuto"] .st-choices--visual .st-choice,
    .st-configurator--passi .st-configurator__grid .st-panel[data-kind="colore"] .st-choices--visual .st-choice {
        display: block;
        padding: 0 0 8px;
    }

    .st-configurator--passi .st-configurator__grid .st-panel[data-kind="tessuto"] .st-choices--visual .st-choice__media,
    .st-configurator--passi .st-configurator__grid .st-panel[data-kind="colore"] .st-choices--visual .st-choice__media {
        width: auto;
        margin-bottom: 6px;
        border-radius: 0;
    }

    .st-configurator--passi .st-configurator__grid .st-panel[data-kind="tessuto"] .st-choices--visual .st-choice__text,
    .st-configurator--passi .st-configurator__grid .st-panel[data-kind="colore"] .st-choices--visual .st-choice__text {
        padding: 0 6px;
        text-align: center;
    }

    .st-configurator--passi .st-configurator__grid .st-panel[data-kind="tessuto"] .st-choices--visual .st-choice__nome,
    .st-configurator--passi .st-configurator__grid .st-panel[data-kind="colore"] .st-choices--visual .st-choice__nome {
        -webkit-line-clamp: 2;
        min-height: 0;
        font-size: var(--st-fs-micro);
    }

    /* --- 5. PRIMA LA DOMANDA, POI L'AVVERTENZA -----------------------
     *
     * Il passo delle misure si apriva con duecentocinquanta pixel di
     * avvertenza — «la tenda viene tagliata su queste misure e non puo'
     * essere rifatta o resa» — e i due campi cominciavano a y=806, cioe'
     * sotto la piega di uno schermo da 844.
     *
     * L'avvertenza e' giusta e resta: e' la cosa piu' onesta della pagina.
     * Ma si legge **dopo** aver capito che cosa si deve fare, non prima. Chi
     * apre il configuratore vuole vedere «Larghezza» e «Altezza»; chi ha
     * scritto i numeri vuole sapere che sono definitivi, e allora l'ha
     * proprio sotto gli occhi, subito sopra il pulsante «Avanti».
     * ---------------------------------------------------------------- */

    .st-configurator--passi .st-panel > * { order: 2; }
    .st-configurator--passi .st-panel > .st-panel__header { order: 1; }
    .st-configurator--passi .st-panel > .st-panel__attenzione { order: 3; }

    /* --- 6. LA BARRA FISSA NON DEVE COPRIRE L'ULTIMA OPZIONE ---------- */

    .st-configurator--passi .st-panel {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }
}

/* ======================================================================
 * I BERSAGLI DEL CONFIGURATORE SU TELEFONO
 *
 * Misurati a 390 px: i cinque passi in cima sono 48x40, il «?» accanto a
 * ogni campo 31x37, «Torna alla scheda» 222x32, «Guarda come si misura»
 * 167x34. Sotto la soglia, tutti.
 *
 * Il «?» ha gia' un commento in questo foglio che racconta di quando era
 * alto diciotto pixel e di come lo si e' portato a trentasette con un
 * margine negativo. Trentasette non basta: il pollice ne chiede
 * quarantaquattro, e questa e' la schermata dove si compra.
 * ==================================================================== */

@media (max-width: 700px) {
    .st-configurator--passi .st-steps__btn {
        min-height: 44px;
    }

    .st-configurator--passi .st-spiega {
        width: 44px;
        height: 44px;
        min-height: 44px;
        /* Il margine negativo tiene il disegno dov'era: cresce cio' che si
           preme, non cio' che si vede. E' lo stesso mestiere della regola
           piu' in alto, portato fino in fondo. */
        margin: -10px -6px -10px 0;
    }

    /* «Torna alla scheda» sta **sopra** il configuratore, non dentro: con
       l'antenato davanti la regola non lo prendeva. */
    .st-configpage__indietro,
    .st-configurator--passi .st-panel__attenzione-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* IL FILTRO E' DEL PASSO, NON DELLA DOMANDA
       «Filtra per nome…» e «29 opzioni disponibili» stanno sopra l'elenco
       delle domande, non dentro una di esse: filtrano tutte le opzioni del
       passo insieme. Sul computer, dove le domande sono aperte una sotto
       l'altra, si capisce. Con la fisarmonica no: sopra cinque righe chiuse
       sembra che filtri le domande, e costa duecento pixel prima della prima.

       Sparisce **solo** dove la fisarmonica c'e'. Il passo dei tessuti ha una
       domanda sola e la fisarmonica non si accende: li' trenta colori con un
       campo per cercarli sono esattamente quello che serve, e restano. */
    .st-fisarmonica > .st-fields > .st-scelte__barra {
        display: none;
    }

    /* La fisarmonica dice gia' il nome della domanda nella sua intestazione:
       ripeterlo dentro, in maiuscoletto, e' la stessa frase due volte a
       sessanta pixel di distanza. Resta per chi naviga a voce, dove e' il
       nome del gruppo di campi e serve davvero. */
    .st-fisarmonica .st-fis__corpo > .st-field__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* IL «?» NON DEVE RESTARE ORFANO
       E' fratello dell'etichetta, non figlio: nascosta lei, restava da solo
       su una riga tutta sua, staccato dalla domanda a cui si riferisce.
       Va all'angolo in alto a destra della domanda aperta — il posto dove un
       punto interrogativo si cerca — e smette di occupare una riga. */
    /* In una fisarmonica le righe si toccano: il filetto sotto ogni
       intestazione e' cio' che le separa, e i ventisei pixel di divario che
       `.st-fields` da' ai campi affiancati qui aprono un vuoto fra la
       domanda e la sua risposta — cinque domande, centotrenta pixel. */
    .st-fisarmonica .st-fields {
        gap: 0;
    }

    .st-fisarmonica .st-fis__corpo {
        position: relative;
        padding: 4px 0 18px;
    }

    /* Lo spazio per il «?» si riserva **solo** con la domanda aperta: e'
       l'unico momento in cui esiste, ed e' anche l'unico in cui il valore
       scelto — che sta a destra quando la riga e' chiusa — non c'e'. Senza
       questa riga il cerchio finiva sopra l'ultima parola del titolo:
       «Staffe, Cassonetto, Mantovan(?)». */
    .st-fisarmonica .st-fis__testa[aria-expanded="true"] {
        padding-right: 52px;
    }

    .st-fisarmonica .st-fis__corpo > .st-spiega {
        position: absolute;
        right: 0;
        /* Ancorato al **bordo** dell'intestazione, non a una distanza fissa:
           il corpo della domanda comincia dove l'intestazione finisce, quindi
           spostarlo indietro di tutta la propria altezza lo appoggia dentro
           l'intestazione qualunque altezza abbia. Con un numero fisso, una
           domanda dal nome lungo — che va a capo e alza l'intestazione — se
           lo sarebbe ritrovato a meta'. */
        /* `bottom: 100%` appoggia il bordo inferiore del pulsante sul bordo
           superiore del corpo, che — tolto il divario qui sopra — e' il bordo
           inferiore dell'intestazione. Non dipende dall'altezza del pulsante
           ne' da quella dell'intestazione: e' un'ancora, non una misura. */
        bottom: 100%;
        margin: 0 0 6px;
        z-index: 2;
    }
}
/* Misure e aiuti: la specificità mantiene coerente il controllo con/senza JS. */
.st-configurator--passi .st-panel[data-kind="misure"] .st-field .st-number {
    max-width: none;
    height: auto;
    min-height: 52px;
    margin-top: 10px;
}
.st-configurator--passi .st-panel[data-kind="misure"] .st-field .st-num {
    width: 100%;
    max-width: none;
    border: 0;
    margin: 0;
    box-shadow: none;
}
.st-configurator--passi .st-panel[data-kind="misure"] .st-field {
    min-width: 0;
    padding: 16px;
    border: 1px solid #e7dfd5;
    border-radius: 12px;
    background: #fcfaf7;
}
.st-configurator--passi .st-panel[data-kind="misure"] .st-fields { gap: 16px; }
.st-configurator--passi .st-panel[data-kind="misure"] .st-field__hint { margin: 9px 0 0; font-size: 13px; }
.st-configurator--passi .st-panel[data-kind="misure"] .st-field__label { display: inline; line-height: 1.5; }
.st-configurator--passi .st-spiega[aria-expanded="true"] { background: #f4e8df; border-color: #ae4c0b; color: #863d12; }
.st-configurator--passi .st-spiega:focus-visible { outline: 2px solid #ae4c0b; outline-offset: 3px; }
.st-configurator .st-aiuto-campo {
    clear: both; margin: 12px 0 16px; padding: 14px 16px;
    background: #f5eee7; border-left: 3px solid #ae4c0b; border-radius: 8px;
    color: #34312e; font-size: 14px; line-height: 1.65; font-weight: 400;
    text-align: left; overflow-wrap: anywhere;
}
.st-configurator .st-aiuto-campo[hidden] { display: none !important; }
@media (max-width: 600px) {
    .st-configurator--passi .st-panel[data-kind="misure"] .st-field { padding: 14px; }
    .st-configurator--passi .st-panel[data-kind="misure"] .st-fields { gap: 14px; }
}
.st-configurator--passi .st-panel[data-kind="misure"] .st-field { position: relative; }
.st-configurator--passi .st-panel[data-kind="misure"] .st-field > .st-spiega {
    position: absolute; top: 7px; right: 10px; bottom: auto;
    margin: 0; width: 40px; height: 40px; padding: 0;
}
.st-configurator--passi .st-panel[data-kind="misure"] .st-field > .st-field__label {
    display: block; padding-right: 44px; min-height: 26px; margin: 0;
}
.st-configurator--passi .st-panel__attenzione { font-size: 13px; line-height: 1.6; }
.st-config-cookie { padding: 12px 24px 110px; text-align: center; }
.st-config-cookie button { min-height: 44px; }

/* Misure leggibili e aiuti a richiesta, senza coprire le scelte. */
.st-measure-guide, .st-optional-items {
    margin: 10px 0 16px; border: 1px solid #d8cec4; border-radius: 10px;
    padding: 0 14px; background: #faf6f0; color: #34312e;
}
.st-measure-guide summary, .st-optional-items summary {
    padding: 12px 0; min-height: 48px; cursor: pointer;
    font-size: 14px; font-weight: 600; line-height: 1.55;
}
.st-measure-guide summary:focus-visible, .st-optional-items summary:focus-visible {
    outline: 3px solid #7b350e; outline-offset: 3px;
}
.st-measure-guide svg { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto 12px; }
.st-measure-guide p { font-size: 14px; line-height: 1.65; margin: 0 0 12px; }
.st-optional-items [data-optional-summary] { display: block; font-weight: 400; }
.st-configurator .st-field__error { color: #9b241f; font-size: 14px; line-height: 1.5; margin: 8px 0 0; }
.st-configurator .st-field__error[hidden] { display: none; }
.st-configurator .st-field { scroll-margin-block: 150px 100px; }
.st-configurator [data-input] { scroll-margin-bottom: 110px; }
.st-configurator--passi .st-summary__inner > .st-acquisto-condizioni { order: 8; }
.st-configurator--passi .st-panel__nav [data-sticky-purchase] { display: inline-flex !important; }
.st-configurator--simple .st-panel__nav [data-sticky-purchase][hidden] { display: none !important; }
.st-configurator--simple .st-panel__prev:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; }
.st-personalizza-field { margin-block: 12px; padding: 0 12px; border: 1px solid #d8cec4; border-radius: 10px; background: #faf6f0; }
.st-personalizza-field > summary { padding: 14px 0; min-height: 48px; cursor: pointer; font-size: 15px; font-weight: 600; line-height: 1.5; }
.st-personalizza-field > summary span { display: block; font-size: 14px; font-weight: 400; color: #59554f; }
.st-personalizza-field[hidden] { display: none !important; }
.st-price-change { font-size: 14px; line-height: 1.5; padding: 10px 12px; background: #f5eee7; color: #4f321d; border-radius: 8px; }
.st-standard-summary { padding: 12px 14px; margin: 10px 0; border: 1px solid #d8cec4; border-radius: 10px; background: #faf6f0; font-size: 14px; line-height: 1.6; }
.st-standard-summary p { margin: 0; }
.st-standard-summary button { min-height: 44px; text-decoration: underline; background: none; color: #74320d; padding: 6px 0; }
.st-preserved-conflict { border: 2px solid #9b241f; border-radius: 8px; padding: 12px; color: #80251c; background: #fff5f2; font-size: 14px; line-height: 1.6; }
.st-configurator--simple .st-field[data-conflict] { outline: 2px solid #9b241f; outline-offset: 4px; }
.st-quick-review { width: min(560px, calc(100vw - 24px)); max-height: 85dvh; overflow-y: auto; padding: 22px; border: 1px solid #b9ab9d; border-radius: 14px; color: #302b25; background: #fffdfa; }
.st-quick-review::backdrop { background: rgb(0 0 0 / .5); }
.st-quick-review h2 { font-size: 23px; margin: 0 0 12px; }
.st-quick-review p { font-size: 15px; line-height: 1.6; }
.st-quick-review__choices { display: block; margin: 16px 0; }
.st-quick-review__choices dt { font-size: 13px; color: #59554f; margin-top: 10px; }
.st-quick-review__choices dd { font-size: 15px; font-weight: 600; margin: 0; }
.st-quick-review button { display: block; width: 100%; min-height: 46px; margin-top: 12px; white-space: normal; }
.st-quick-review button:focus-visible { outline: 3px solid #74320d; outline-offset: 3px; }
@media(max-width: 600px) {
    .st-configurator--simple .st-panel__nav { gap: 8px; }
    .st-configurator--simple .st-panel__nav [data-sticky-purchase] { font-size: 13px; white-space: normal; padding: 10px 12px; min-height: 46px; }
    .st-configurator--simple .st-panel__nav.st-nav--ready { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); }
    .st-configurator--simple .st-panel__nav.st-nav--ready .st-panel__prezzo { grid-column: 1; grid-row: 1; }
    .st-configurator--simple .st-panel__nav.st-nav--ready [data-sticky-purchase] { grid-column: 2; grid-row: 1; }
    .st-configurator--simple .st-panel__nav.st-nav--ready [data-prev] { grid-column: 1; grid-row: 2; min-height: 44px; }
    .st-configurator--simple .st-panel__nav.st-nav--ready [data-next] { grid-column: 2; grid-row: 2; min-height: 44px; }
    /* The ready bar has two rows: preserve room for the last field and help. */
    body:has(.st-configurator--simple .st-panel.is-active .st-nav--ready) .st-soccorso { bottom: calc(144px + env(safe-area-inset-bottom)); }
    body:has(.st-configurator--simple .st-panel.is-active .st-nav--ready) .st-config-cookie { padding-bottom: 160px; }
    .st-configurator--simple .st-panel:has(.st-nav--ready) { padding-bottom: 160px; }
}
.st-configurator--passi { --p-tenue: #59554f; --st-muted: #59554f; --st-tenue: #59554f; }
.st-configurator--passi .st-steps__titolo,
.st-configurator--passi .st-summary__eyebrow,
.st-configurator--passi .st-summary__choices dt { color: #59554f; }
.st-calculation-error { padding: 12px 14px; margin-block: 10px; border: 1px solid #a63228; border-radius: 8px; background: #fff5f2; color: #80251c; font-size: 14px; }
.st-calculation-error p { margin: 0; }
.st-calculation-error button { min-height: 44px; margin-top: 8px; }
.st-configurator--passi .st-anteprima__avviso,
.st-configurator--passi .st-anteprima__aiuto p,
.st-configurator--passi .st-panel__note,
.st-configurator--passi .st-field__hint,
.st-configurator--passi .st-panel__prezzo small,
.st-configurator--passi .st-summary__tax,
.st-configurator--passi .st-micro,
.st-configpage__briciole { color: #59554f; }
.st-configurator--passi .st-panel__attenzione-link { color: #963b18; }
.st-configurator--passi .st-panel__next,
.st-configurator--passi .st-summary__azioni .st-btn--primary { background-color: #984310; color: #fff; }
.st-configurator--passi [data-sticky-purchase]:disabled { opacity: .5; cursor: wait; }
@media (max-width: 900px) {
    .st-configurator--passi .st-panel[data-kind="misure"] .st-fields { padding-top: 8px; gap: 10px; }
    .st-configurator--passi .st-panel[data-kind="misure"] .st-field { padding: 12px 14px; }
    .st-configurator--passi .st-panel__note { font-size: 15px; line-height: 1.6; }
    .st-configurator--passi .st-preview__image { max-height: 150px; object-fit: contain; }
    .st-configurator--passi .st-panel[data-kind="misure"] .st-field > .st-spiega { width: 44px; height: 44px; }
    .st-configurator--passi .st-optional-items { margin-inline: 0; padding-inline: 12px; }
    .st-configurator--passi .st-acquisto-condizioni { font-size: 14px; }
    .st-configurator--passi .st-anteprima__scena { aspect-ratio: auto; height: 96px; }
    .st-configurator--passi .st-anteprima__img { object-fit: contain; }
    .st-configurator--passi .st-anteprima__avviso { font-size: 12px; line-height: 1.5; margin-block: 6px 0; }
}
@media (max-width: 1080px) {
    .st-configurator--passi:has(.st-panel.is-active[data-kind="riepilogo"]) .st-summary__choices {
        display: block; order: 2; max-height: none; overflow: visible; margin: 14px 0;
    }
    .st-configurator--passi:has(.st-panel.is-active[data-kind="riepilogo"]) .st-summary__qty {
        display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px;
    }
    .st-configurator--passi .st-summary__qty input { min-height: 48px; font-size: 18px; }
    .st-configurator--passi .st-summary__choices > div {
        display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        gap: 12px; font-size: 14px; line-height: 1.5;
    }
    .st-configurator--passi .st-summary__choices dt,
    .st-configurator--passi .st-summary__choices dd {
        min-width: 0; white-space: normal; overflow-wrap: anywhere;
    }
    .st-configurator--passi .st-summary__total { order: 3; }
    .st-configurator--passi .st-summary__tax { order: 4; }
    .st-configurator--passi .st-summary__message { order: 4; }
}