/*
 * IL RAME DEL TESTO NON E' IL RAME DELLE SUPERFICI
 *
 * `--st-copper` (#B45A17) e' il rame dei pulsanti, dei bordi e dei fondi.
 * Su avorio, come colore di testo piccolo, misura **4,34:1** — sotto la
 * soglia di 4,50 che serve perche' una scritta piccola si legga. Per quello
 * esiste `--st-copper-text` (#AE4C0B), che sullo stesso avorio fa 4,99.
 *
 * Qui le dichiarazioni avevano `var(--st-copper, #AE4C0B)`: la variabile e il
 * valore di ripiego dicevano due colori diversi. Il ripiego, #AE4C0B, e'
 * quello giusto — era l'intenzione di chi ha scritto la riga, quando
 * `--st-copper` significava ancora «il rame del marchio». La revisione della
 * palette gli ha cambiato significato e queste righe non sono state riviste:
 * finche' la variabile esiste vince lei, quindi vinceva il colore sbagliato.
 *
 * I bordi restano su `--st-copper`: un bordo non e' testo, e li' il rame
 * pieno e' quello che serve.
 */

/**
 * Configuratore prodotto.
 *
 * I colori e i caratteri arrivano dai token del tema child: qui si usano solo
 * le variabili, mai valori letterali. Cosi' una modifica alla palette non
 * richiede di toccare questo file.
 *
 * Il fallback dopo ogni `var()` serve nel caso il configuratore venga usato
 * fuori dal tema Soluzione Tende.
 */

.st-configurator {
    --st-radius: 10px;
    --st-gap: clamp(16px, 2.4vw, 32px);
    margin: 32px 0 0;
    font-family: var(--st-font-body, "Poppins", system-ui, sans-serif);
    color: var(--st-text, #242424);
}

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

/* ---------------------------------------------------------------- griglia */

.st-configurator__grid {
    display: grid;
    grid-template-columns:
        clamp(232px, 17vw, 360px)
        minmax(0, 1fr)
        clamp(340px, 23vw, 460px);
    gap: var(--st-gap);
    align-items: start;
}

/* ------------------------------------------------------------------- step */

/* Bianco con un bordo, come nella tavola 11 — e non e' solo estetica.
   Il fondo sabbia (#E7E2DA) e' il piu' scuro dei tre chiari, e su di esso
   **nessuno dei due rami del rame arriva a 4,50**: il collegamento «Contatta
   l'assistenza» misurava 4,24:1. Su bianco lo stesso colore fa 5,47. */

/* `.st-link` e' definito anche in `home.css`, che e' il componente condiviso:
   qui si tiene solo cio' che non c'e' li', per non avere due aspetti dello
   stesso collegamento a seconda di quale foglio arriva per ultimo. */
.st-link { color: var(--st-copper-text, #AE4C0B); font-weight: 600; text-decoration: none; }
.st-link:hover { text-decoration: underline; }

/* Qui c'erano le regole di `.st-steps`, `.st-panel__nav` e
   `.st-panel__eyebrow`: la colonna dei passi, i pulsanti «Continua» e
   «Indietro», e la scritta «Passaggio 1 di 8». Quella procedura non esiste
   piu' — le scelte stanno tutte in pagina — e il markup che le usava e' stato
   tolto. Le regole erano rimaste: trenta righe che nessuna pagina applicava. */

/* ---------------------------------------------------------------- pannelli */

.st-panel__title {
    margin: 0 0 8px;
    font-family: var(--st-font-heading, "Montserrat", Georgia, serif);
    font-size: var(--st-fs-h3);
    line-height: 1.2;
    color: var(--st-charcoal, #2F3236);
}
.st-panel__note {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--st-muted, #6F6B66);
}
.st-panel__header { margin-bottom: 26px; }

.st-fields { display: flex; flex-direction: column; gap: 26px; }

/* ------------------------------------------------------------------ campi */

.st-field__label {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--st-charcoal, #2F3236);
}
.st-field__required { color: var(--st-copper-text, #AE4C0B); }
.st-field__hint {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--st-muted, #6F6B66);
}
.st-field__error {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--st-error, #A53A32);
}

.st-number { position: relative; max-width: 260px; }
.st-number input,
.st-field select,
.st-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1.5px solid var(--st-border, #DED8D0);
    border-radius: 8px;
    background: var(--st-white, #fff);
    font: inherit;
    font-size: 16px;   /* 16px evita lo zoom automatico su iOS */
    color: var(--st-text, #242424);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.st-number input:focus,
.st-field select:focus,
.st-field textarea:focus {
    outline: none;
    border-color: var(--st-copper, #AE4C0B);
    box-shadow: 0 0 0 3px rgba(var(--st-copper-rgb, 174, 76, 11), .14);
}
.st-number__unit {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--st-muted, #6F6B66);
    pointer-events: none;
}
.st-number input { padding-right: 46px; }

/* --------------------------------------------------------------- opzioni */

.st-choices { display: flex; flex-direction: column; gap: 8px; }

.st-choices--visual {
    display: grid;
    /*
     * `auto-fit` e non `auto-fill`, e una corsia che cresce fino a 200 px.
     *
     * Con `auto-fill` le corsie vuote restano in griglia: un passo con due
     * sole opzioni si ritrovava due schede da 126 px e mezzo pannello vuoto
     * accanto, con le didascalie mandate a capo quattro volte. `auto-fit`
     * lascia collassare le corsie che nessuno occupa, e le schede crescono.
     *
     * Il tetto a 200 px serve nel verso opposto: senza, due opzioni sole si
     * prenderebbero 460 px l'una, e una figurina di tenda ingrandita cosi'
     * non spiega niente di piu' — occupa solo piu' spazio.
     */
    grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
    justify-content: start;
    gap: 12px;
}

/*
 * QUANTE SONO CAMBIA COSA SONO
 *
 * Un passo con due o tre opzioni e un passo con settantacinque non sono la
 * stessa cosa. Nel primo le figure **spiegano la scelta** — sono disegni con
 * le quote, «larghezza vetro» contro «larghezza tenda» — e vanno guardate.
 * Nel secondo sono campioni di stoffa, e servono fitti per poterli
 * confrontare a colpo d'occhio.
 *
 * Con una griglia sola per entrambi i casi vinceva il secondo: due schede da
 * 200 px in un pannello da 642, con **240 px di vuoto accanto** e la
 * didascalia mandata a capo quattro volte. Da qui il «tutto stretto».
 *
 * `:has(.st-choice:nth-child(-n+4):last-child)` vuol dire «l'ultima scheda e'
 * fra le prime quattro», cioe' le schede sono quattro o meno.
 */
.st-choices--visual:has(.st-choice:nth-child(-n+4):last-child) {
    /* Corsie flessibili, tetto sulla scheda.
       Con `minmax(240px, 380px)` il massimo e' una lunghezza fissa: il browser
       calcola quante corsie **da 380** ci stanno e non le rimpicciolisce — in
       un pannello da 642 px ne entrava una sola e le due schede si impilavano.
       Con `1fr` le corsie si dividono lo spazio (due da 315), e il `max-width`
       impedisce che una scheda sola si allarghi a mezzo schermo: un disegno
       ingrandito non spiega niente di piu'. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    justify-items: start;
}

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

/* La figura, quando le opzioni sono poche: intera e alta, non un ritaglio.
   `cover` su un disegno quotato taglia via proprio le quote. */
.st-choices--visual:has(.st-choice:nth-child(-n+4):last-child) .st-choice__media img {
    height: 190px;
    object-fit: contain;
    background: var(--st-ivory, #F7F4EF);
    padding: 10px;
}

.st-choices--visual:has(.st-choice:nth-child(-n+4):last-child) .st-choice {
    padding: 12px;
    gap: 12px;
}

.st-choices--visual:has(.st-choice:nth-child(-n+4):last-child) .st-choice__label {
    font-size: 15px;
    line-height: 1.45;
}

.st-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;          /* area di tocco adeguata */
    padding: 12px 14px;
    border: 1.5px solid var(--st-border, #DED8D0);
    border-radius: 8px;
    background: var(--st-white, #fff);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.st-choice:hover { border-color: var(--st-copper, #AE4C0B); }
.st-choice input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
}
.st-choice:has(input:checked) {
    border-color: var(--st-copper, #AE4C0B);
    box-shadow: 0 0 0 2px rgba(var(--st-copper-rgb, 174, 76, 11), .16);
}
.st-choice:has(input:focus-visible) {
    outline: 2px solid var(--st-copper, #AE4C0B);
    outline-offset: 2px;
}

.st-choices--visual .st-choice {
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    gap: 8px;
}
.st-choice__media { display: block; border-radius: 6px; overflow: hidden; }
.st-choice__media img {
    display: block;
    width: 100%;
    height: 96px;
    object-fit: cover;
}
.st-choice__swatch {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    /* Il bordo tenue va bene per separare due blocchi, non per delimitare un
       campione: un tessuto bianco su fondo bianco sparirebbe, e il campione
       bianco e' il piu' frequente del catalogo. */
    border: 1px solid var(--st-border-strong, #9D8B73);
}
.st-choice__text { font-size: var(--st-fs-small); line-height: 1.4; }

/* ------------------------------------------------------------ navigazione */

.st-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Stessa geometria delle altre due classi di pulsante del sito: i valori
       stanno nei token del tema, non qui. Il plugin li legge come chiunque
       altro — se il tema non c'e', i valori di riserva tengono in piedi il
       componente. */
    gap: var(--st-btn-gap, 8px);
    min-height: var(--st-btn-h, 48px);
    padding: var(--st-btn-pad-y, 13px) var(--st-btn-pad-x, 28px);
    border: var(--st-btn-bordo, 1.5px) solid transparent;
    border-radius: var(--st-btn-radius, 6px);
    font-family: inherit;
    font-size: var(--st-btn-size, .95rem);
    font-weight: var(--st-btn-peso, 600);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
/* La specificita' e' volutamente alta: i temi WooCommerce applicano stili
   generici a `button` e `.button`, e senza questo il pulsante piu' importante
   della pagina prenderebbe il colore del tema invece del nostro. */
.st-configurator .st-button--primary,
.st-configurator button.st-button--primary,
.st-configurator input[type="submit"].st-button--primary {
    background: var(--st-copper, #AE4C0B);
    color: #fff;
    border-color: var(--st-copper, #AE4C0B);
}
.st-configurator .st-button--primary:hover:not(:disabled),
.st-configurator button.st-button--primary:hover:not(:disabled) {
    background: var(--st-copper-dark, #8F3E09);
    border-color: var(--st-copper-dark, #8F3E09);
    color: #fff;
}
.st-configurator .st-button--ghost,
.st-configurator button.st-button--ghost {
    background: transparent;
    border-color: var(--st-border, #DED8D0);
    color: var(--st-charcoal, #2F3236);
}
.st-button--ghost:hover { border-color: var(--st-charcoal, #2F3236); }
.st-button--block { width: 100%; }
.st-button:disabled { opacity: .45; cursor: not-allowed; }

/* --------------------------------------------------------------- riepilogo */

.st-summary { position: sticky; top: 24px; }
.st-summary__inner {
    padding: 24px;
    background: var(--st-ivory, #F7F4EF);
    border: 1px solid var(--st-border, #DED8D0);
    border-radius: var(--st-radius);
}
.st-summary__eyebrow {
    margin: 0 0 4px;
    font-size: var(--st-fs-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--st-muted, #6F6B66);
}
.st-summary__title {
    margin: 0 0 18px;
    font-family: var(--st-font-heading, "Montserrat", Georgia, serif);
    font-size: 18px;
    line-height: 1.3;
    color: var(--st-charcoal, #2F3236);
}
.st-summary__choices { margin: 0 0 16px; }
.st-summary__choice {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--st-border, #DED8D0);
    font-size: var(--st-fs-micro);
}
.st-summary__choice dt { color: var(--st-muted, #6F6B66); margin: 0; }
.st-summary__choice dd { margin: 0; text-align: right; font-weight: 600; }
.st-summary__empty { margin: 0; font-size: var(--st-fs-small); color: var(--st-muted, #6F6B66); }

.st-summary__lines { margin: 0 0 14px; }
.st-summary__line {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
    color: var(--st-muted, #6F6B66);
}

.st-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 0 4px;
    border-top: 2px solid var(--st-charcoal, #2F3236);
}
.st-summary__total-label { font-size: var(--st-fs-micro); font-weight: 600; }
.st-summary__total-value {
    font-family: var(--st-font-heading, "Montserrat", Georgia, serif);
    font-size: 26px;
    font-weight: 700;
    color: var(--st-charcoal, #2F3236);
}
.st-summary__tax { margin: 0 0 16px; font-size: var(--st-fs-micro); color: var(--st-muted, #6F6B66); }

.st-summary__message {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    background: var(--st-sand, #E7E2DA);
    color: var(--st-charcoal, #2F3236);
}
.st-summary__message.is-error {
    background: rgba(165, 58, 50, .1);
    color: var(--st-error, #A53A32);
}
.st-summary__message.is-pending { opacity: .7; }

.st-summary__qty {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.st-summary__qty label { font-size: var(--st-fs-small); color: var(--st-muted, #6F6B66); }
.st-summary__qty input {
    width: 76px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1.5px solid var(--st-border, #DED8D0);
    border-radius: 8px;
    font: inherit;
    font-size: 16px;
    text-align: center;
}
.st-summary__reassurance {
    margin: 14px 0 0;
    font-size: 12px;
    text-align: center;
    color: var(--st-muted, #6F6B66);
}

/* ------------------------------------------------------------ prezzo shop */

.st-price__prefix {
    /* Era `.8em`, cioe' una frazione del prezzo accanto: quando il prezzo e'
       32 px il «da» diventa 25,6, un corpo che non esiste in nessuna scala e
       che cambia da un contesto all'altro. Un «da» e' una parola di servizio:
       ha la sua misura, non una percentuale di quella del numero. */
    font-size: var(--st-fs-ui);
    color: var(--st-muted, #6F6B66);
    font-weight: 400;
}
.st-price--onrequest { color: var(--st-muted, #6F6B66); font-style: italic; }

.st-notice--error {
    padding: 14px 16px;
    border-left: 4px solid var(--st-error, #A53A32);
    background: rgba(165, 58, 50, .07);
}

/* --------------------------------------------------------------- mobile */

.st-mobilebar { display: none; }

@media (max-width: 1180px) {
    .st-configurator__grid { grid-template-columns: minmax(0, 1fr) 320px; }
    .st-steps {
        grid-column: 1 / -1;
        position: static;
    }
    .st-steps__list { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
    .st-steps__button { white-space: nowrap; }
    .st-steps__help { display: none; }
}

@media (max-width: 860px) {
    .st-configurator__grid { grid-template-columns: minmax(0, 1fr); }

    .st-summary { position: static; }
    .st-summary__inner { padding: 18px; }

    /* Il riepilogo si comprime: su schermo piccolo il contenuto conta piu'
       del prospetto. Il totale resta sempre visibile nella barra inferiore. */
    .st-summary__choices,
    .st-summary__lines { max-height: 210px; overflow-y: auto; }

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

    .st-mobilebar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 90;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: var(--st-white, #fff);
        border-top: 1px solid var(--st-border, #DED8D0);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .07);
    }
    .st-mobilebar__label {
        display: block;
        /* 12px e' il minimo che il progetto si e' dato; sotto, una didascalia
           smette di essere letta e resta solo ingombro. */
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--st-muted, #6F6B66);
    }
    .st-mobilebar__value {
        font-family: var(--st-font-heading, "Montserrat", Georgia, serif);
        font-size: 20px;
        font-weight: 700;
    }
    .st-mobilebar .st-button { flex: 0 0 auto; padding: 12px 22px; }

    /* Anche qui `auto-fit`: su schermo stretto `auto-fill` teneva in griglia
       corsie vuote e le schede restavano a 108 px anche quando ce n'erano due
       sole e lo spazio per farle grandi c'era. Il tetto e' 170 e non 200
       perche' qui la colonna e' una, e due schede da 200 con lo spazio fra
       loro non ci starebbero su un telefono. */
    .st-choices--visual {
        grid-template-columns: repeat(auto-fit, minmax(120px, 170px));
    }
}

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

/* Il sovrapprezzo dell'opzione: presente ma discreto. Nel vecchio sistema era
   incollato dentro il nome ("Nessuna <br>+ € 0"); qui e' un dato a se', mostrato
   solo quando c'e' davvero qualcosa da pagare. */
.st-choice__price {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--st-copper-text, #AE4C0B);
}
.st-choices--visual .st-choice__price { margin-top: 4px; }

/* Prodotto non ordinabile: il configuratore resta visibile — serve a farsi
   un'idea — ma al posto del pulsante c'e' una via d'uscita utile. */
.st-notice--blocked {
    padding: 16px;
    border: 1.5px solid var(--st-border, #DED8D0);
    border-left: 4px solid var(--st-copper, #AE4C0B);
    border-radius: var(--st-radius, 10px);
    background: var(--st-ivory, #F7F4EF);
    font-size: 14px;
    line-height: 1.6;
}
.st-notice--blocked p { margin: 0 0 12px; }
.st-notice__title { font-weight: 600; color: var(--st-charcoal, #2F3236); }
.st-summary__admin-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--st-muted, #6F6B66);
}

/* --------------------------------------------------- richiesta preventivo */

.st-quote__intro {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--st-ivory, #F7F4EF);
    border-left: 3px solid var(--st-copper, #AE4C0B);
    border-radius: 6px;
    font-size: var(--st-fs-small);
    line-height: 1.6;
}
.st-quote__form { display: flex; flex-direction: column; gap: 12px; }
.st-quote__field { display: flex; flex-direction: column; gap: 5px; }
.st-quote__field label { font-size: 13px; font-weight: 600; color: var(--st-charcoal, #2F3236); }
.st-quote__field input,
.st-quote__field textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1.5px solid var(--st-border, #DED8D0);
    border-radius: 8px;
    background: var(--st-white, #fff);
    font: inherit;
    font-size: 16px;   /* evita lo zoom automatico su iOS */
}
.st-quote__field textarea { min-height: 76px; resize: vertical; }
.st-quote__field input:focus,
.st-quote__field textarea:focus {
    outline: none;
    border-color: var(--st-copper, #AE4C0B);
    box-shadow: 0 0 0 3px rgba(var(--st-copper-rgb, 174, 76, 11), .14);
}
.st-quote__consent {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--st-muted, #6F6B66);
}
.st-quote__consent input { margin-top: 2px; flex: 0 0 auto; }
.st-quote__message { margin: 0; font-size: 13px; }
.st-quote__message.is-error   { color: var(--st-error, #A53A32); }
.st-quote__message.is-success { color: var(--st-success, #477255); font-weight: 600; }
.st-quote__message.is-info    { color: var(--st-muted, #6F6B66); }

/* Badge di catalogo: informa, non scoraggia. «Non disponibile» direbbe una
   cosa falsa — il prodotto si vende, solo con un passaggio in piu'. */
.st-badge--quote {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--st-sand, #E7E2DA);
    color: var(--st-charcoal, #2F3236);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* --- selezione corrente sotto ogni passo -------------------------------- */
/* Le tavole 11 e 14 mostrano sotto ogni passo cio' che si e' scelto. E' la
   differenza fra un elenco di passi e una mappa di dove si e' arrivati. */

/* --- salva e condividi --------------------------------------------------- */
.st-summary__keep {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.st-summary__keep-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 10px 12px;
    background: none;
    border: 1.5px solid var(--st-border-strong, #9D8B73);
    border-radius: var(--st-radius-sm, 6px);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--st-charcoal, #2F3236);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}
.st-summary__keep-btn:hover {
    border-color: var(--st-copper, #AE4C0B);
    color: var(--st-copper-text, #AE4C0B);
}
.st-summary__keep-btn:disabled { opacity: .55; cursor: progress; }
.st-summary__keep-btn:focus-visible {
    outline: 3px solid var(--st-copper, #AE4C0B);
    outline-offset: 2px;
}

.st-summary__saved {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--st-copper-soft, #F9F1EB);
    border-radius: var(--st-radius-sm, 6px);
    font-size: .82rem;
    line-height: 1.55;
}
.st-summary__saved input {
    width: 100%;
    margin-top: 8px;
    padding: 9px 11px;
    min-height: 40px;
    border: 1px solid var(--st-border, #DED8D0);
    border-radius: 4px;
    font: inherit;
    font-size: .78rem;
    background: #fff;
}

/* --- anteprima con le quote ---------------------------------------------- */
/* Le quote disegnate sull'immagine sono il pezzo della tavola 14 che spiega
   piu' di qualunque didascalia: si vede *quale* misura si sta inserendo. */
.st-preview { position: relative; margin-bottom: 18px; }
.st-preview__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--st-radius, 10px);
    background: var(--st-sand, #E7E2DA);
}
.st-preview__dims {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.st-preview__dims line { stroke: #fff; stroke-width: 1.5; }
.st-preview__dims .tick { stroke: #fff; stroke-width: 1.5; }
.st-preview__label {
    fill: #fff;
    font-size: 13px;
    font-weight: 600;
    paint-order: stroke;
    stroke: rgba(47, 50, 54, .55);
    stroke-width: 4px;
    stroke-linejoin: round;
}
.st-preview__caption {
    margin: 8px 0 0;
    font-size: .78rem;
    color: var(--st-muted, #6F6B66);
}

/* --- modifica di una riga del carrello ---------------------------------- */
.st-cart__edit {
    display: inline-block;
    margin-top: 4px;
    font-size: .82rem;
    color: var(--st-copper-text, #AE4C0B);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.st-summary__editing {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--st-copper-soft, #F9F1EB);
    border-left: 3px solid var(--st-copper, #AE4C0B);
    border-radius: 4px;
    font-size: .82rem;
    line-height: 1.5;
}

/* Una scelta il cui campo non ha etichetta: il valore si prende tutta la riga
   invece di lasciare una colonna vuota accanto a se'. */
.st-summary__choice--anonima > dt {
    display: none;
}

.st-summary__choice--anonima > dd {
    grid-column: 1 / -1;
    text-align: left;
}

/* ========================================================================
   MENO COSE INSIEME
   ======================================================================== */

/*
 * Il nome del prodotto non si ripete.
 *
 * Nella prima schermata compariva **tre volte**: nel percorso di navigazione,
 * nel titolo della pagina e di nuovo qui nel riepilogo, in quattro righe di
 * testo grande. Su schermo largo il titolo vero e' li' accanto, a quattrocento
 * pixel: ripeterlo non ricorda niente, aggiunge solo una cosa da leggere.
 *
 * Su schermo stretto invece il riepilogo sta molto piu' in basso, oltre tutto
 * il configuratore, e a quel punto ricordare cosa si sta configurando serve
 * davvero. Quindi sparisce solo dove la ripetizione si vede.
 */
@media (min-width: 1000px) {
    .st-summary__eyebrow,
    .st-summary__title {
        display: none;
    }
}

/*
 * «Salva configurazione» e «Condividi» compaiono quando c'e' qualcosa da
 * salvare.
 *
 * All'apertura erano gia' li', due pulsanti sotto un totale che dice «—»:
 * chiedono un'attenzione che in quel momento non porta da nessuna parte, e
 * sono i primi due pulsanti che l'occhio incontra dopo il prezzo. Il
 * configuratore stampa `.st-summary__choice` per ogni scelta fatta, quindi la
 * loro presenza e' il segnale che serve — nessuna riga di JavaScript in piu'.
 */
.st-summary__keep {
    display: none;
}

.st-summary:has(.st-summary__choice) .st-summary__keep {
    display: grid;
}

/* =======================================================================
   IL CONFIGURATORE, COME APPLICAZIONE — tavole 11-15
   =======================================================================
   Non un modulo lungo con una fotografia accanto: tre zone con tre compiti.

     sinistra   dove sono, e cosa ho gia' scelto
     centro     la cosa che sto scegliendo adesso
     destra     cosa sto comprando e quanto costa

   Le due colonne laterali non scorrono. Nel centro non scorrono ne' il titolo
   del passo ne' i comandi: scorre solo l'elenco delle scelte, che e' l'unica
   cosa che ha senso scorrere.

   Ogni passo ha il **suo** componente: `data-kind` dice se e' misure, tessuto,
   colore, comando, montaggio, accessori o note. Un layout unico per tutti e
   dieci e' cio' che li faceva sembrare un questionario.
   ======================================================================= */

/* ======================================================================
 * IL CONFIGURATORE PRENDE TUTTA LA FINESTRA
 *
 * Il resto del sito sta dentro un contenitore da 1336 px, ed e' giusto: una
 * riga di testo larga duemila pixel non si legge, e una griglia di prodotti
 * larga altrettanto diventa una tabella.
 *
 * Qui pero' non si legge e non si sfoglia: si configura. Le tre colonne — i
 * passi, le opzioni, il riepilogo — vogliono stare **tutte e tre insieme sotto
 * gli occhi**, perche' ogni scelta cambia il totale nella terza mentre si
 * guarda la seconda. Dentro 1336 px su uno schermo da 1920 restavano
 * cinquecento pixel di bianco per lato e le fotografie dei tessuti erano
 * francobolli: si comprimeva l'unica pagina del sito che ha davvero bisogno di
 * spazio per lasciare aria a due margini vuoti.
 *
 * SI SCRIVE SUL CONTENITORE, NON SUL TOKEN
 * Il primo tentativo ridefiniva `--st-container` su `.st-configpage`. Non ha
 * funzionato, e per un motivo che vale la pena ricordare: `:root` e
 * `.st-configpage` valgono **la stessa specificita'** — una classe entrambi —
 * e a parita' vince chi si carica dopo. Questo foglio arriva prima di
 * `tokens.css`, quindi il valore di `:root` sovrascriveva il nostro e il
 * configuratore restava largo 1336 senza che nessuna riga sembrasse sbagliata.
 *
 * `.st-configpage .st-container` invece vale due classi: batte `.st-container`
 * qualunque sia l'ordine di caricamento. Il token resta quello del sito, e qui
 * dentro si dichiara una larghezza — che e' cio' che serviva davvero.
 * ====================================================================== */
.st-configpage { background: var(--st-white); }

.st-configpage .st-container {
    /* 1680 e non «tutta la finestra».
       A 100% su uno schermo da 2560 le tre colonne si allontanavano tanto da
       diventare tre pagine affiancate: per leggere il totale mentre si sceglie
       un tessuto bisognava girare la testa. Millesettecento scarsi e' la
       misura in cui le tre cose stanno ancora in un colpo d'occhio, e su un
       portatile da 1440 il limite non morde: li' comanda il 100%. */
    width: min(100% - 2 * var(--st-container-margine, 24px), 1680px);
}

/* --- testata ------------------------------------------------------------
   Sottile e senza pretese: qui la scena e' il prodotto, non l'intestazione. */
.st-configpage__testa {
    background: var(--st-white);
    border-bottom: 1px solid var(--st-border-soft, #E9E5DF);
}
.st-configpage__testa-inner { padding-block: 16px 18px; }
.st-configpage__briciole {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-bottom: 14px;
    font-size: 13px; color: var(--st-muted, #686560);
}
.st-configpage__briciole a { color: var(--st-muted, #686560); text-decoration: none; }
.st-configpage__briciole a:hover { color: var(--st-copper-text, #AE4C0B); text-decoration: underline; }
.st-configpage__briciole [aria-current] { color: var(--st-charcoal, #2F3236); font-weight: 600; }
/* Il separatore e' lo stesso della scheda prodotto — stesso glifo, stesso
   colore — perche' le due pagine si visitano una dopo l'altra e due percorsi
   disegnati diversamente si notano piu' di quanto sembri. Il gap del
   contenitore basta a distanziarlo: qui serve solo allinearlo al testo. */
.st-configpage__sep { display: inline-flex; align-items: center; color: var(--st-border-strong, #9D8B73); }

.st-configpage__identita { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.st-configpage__miniatura {
    flex: 0 0 auto; width: 56px; height: 56px;
    border-radius: 8px; overflow: hidden;
    background: var(--st-sand, #E7E2DA); border: 1px solid var(--st-border-soft, #E9E5DF);
}
.st-configpage__miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-configpage__eyebrow {
    margin: 0 0 2px;
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--st-copper-text, #AE4C0B);
}
.st-configpage__titolo {
    margin: 0;
    font-family: var(--st-font-display, Georgia, serif);
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    font-weight: 600; line-height: 1.25; color: var(--st-charcoal, #2F3236);
}
.st-configpage__ritorno {
    margin-left: auto;
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
    font-size: 14px; font-weight: 600;
    color: var(--st-muted, #686560); text-decoration: none;
    border: 1px solid var(--st-border-soft, #E9E5DF); border-radius: 4px;
}
.st-configpage__ritorno:hover { border-color: var(--st-copper, #B45A17); color: var(--st-copper-text, #AE4C0B); }

/* --- la griglia --------------------------------------------------------- */
.st-configurator--passi { padding-block: 26px 64px; }
.st-configurator--passi .st-configurator__grid {
    display: grid;
    /* Le colonne laterali crescono con la finestra invece di restare ferme.
       Con due misure fisse, tutto lo spazio in piu' finiva al centro: il
       pannello delle opzioni diventava larghissimo e le sue griglie di tessuti
       si allargavano in file di quattro o cinque, mentre l'anteprima del
       prodotto — la cosa che si sta guardando — restava alta 232 px come su un
       portatile. I limiti superiori evitano l'eccesso opposto. */
    grid-template-columns:
        clamp(232px, 17vw, 360px)
        minmax(0, 1fr)
        clamp(328px, 23vw, 460px);
    gap: clamp(32px, 2.6vw, 52px);
    align-items: start;
}

/* --- colonna dei passi --------------------------------------------------
   Numero, etichetta breve, valore scelto. Niente descrizioni: una colonna che
   spiega non e' una barra di avanzamento, e' un secondo pannello. */
.st-steps { position: sticky; top: 158px; max-height: calc(100vh - 178px); overflow-y: auto; overscroll-behavior: contain; }
.st-steps::-webkit-scrollbar { width: 4px; }
.st-steps::-webkit-scrollbar-thumb { background: var(--st-border, #DED8D0); border-radius: 4px; }
.st-steps__list { margin: 0 0 18px; padding: 0; list-style: none; }
.st-steps__item + .st-steps__item { margin-top: 2px; }
.st-steps__btn {
    position: relative;
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 11px 12px;
    text-align: left; background: none; border: 0; border-radius: 8px;
    cursor: pointer; font-family: inherit;
    transition: background .18s ease;
}
.st-steps__btn:hover { background: var(--st-ivory, #F7F4EF); }
/* Lo stato corrente e' un filo di rame a sinistra, non un riquadro: un bordo
   completo su ogni voce trasforma la colonna in dieci schede. */
.st-steps__item.is-current .st-steps__btn { background: var(--st-copper-soft, #F9F2EC); }
.st-steps__item.is-current .st-steps__btn::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 3px; border-radius: 2px; background: var(--st-copper, #B45A17);
}
.st-steps__n {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
    color: var(--st-muted, #686560);
    background: var(--st-white); border: 1px solid var(--st-border-soft, #E9E5DF);
    border-radius: 50%;
    transition: all .18s ease;
}
.st-steps__item.is-current .st-steps__n {
    color: #fff; background: var(--st-copper, #B45A17); border-color: var(--st-copper, #B45A17);
}
/* Il passo compilato prende una spunta discreta al posto del numero: dice
   «fatto» senza aggiungere una parola. */
.st-steps__item.is-filled:not(.is-current) .st-steps__n {
    color: var(--st-copper-text, #AE4C0B);
    background: var(--st-copper-soft, #F9F2EC);
    border-color: rgba(180, 90, 23, .35);
    font-size: 0;
}
.st-steps__item.is-filled:not(.is-current) .st-steps__n::before { content: "\2713"; font-size: 13px; }
.st-steps__testo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st-steps__titolo { font-size: var(--st-fs-small); font-weight: 600; line-height: 1.3; color: var(--st-charcoal, #2F3236); }
.st-steps__valore {
    font-size: 12.5px; line-height: 1.35; color: var(--st-muted, #686560);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-steps__item.is-filled .st-steps__valore { color: var(--st-copper-text, #AE4C0B); font-weight: 600; }

.st-steps__aiuto { padding: 16px; background: var(--st-ivory, #F7F4EF); border-radius: 8px; }
.st-steps__aiuto p { margin: 0 0 5px; font-size: 12.5px; color: var(--st-muted, #686560); }
.st-steps__aiuto p:first-child { font-size: 14px; font-weight: 700; color: var(--st-charcoal, #2F3236); }
.st-steps__aiuto-tel a { color: var(--st-charcoal, #2F3236); font-weight: 600; text-decoration: none; }
.st-steps__aiuto-link {
    display: inline-flex; align-items: center; min-height: 40px;
    font-size: 12.5px; font-weight: 600;
    color: var(--st-copper-text, #AE4C0B); text-decoration: underline; text-underline-offset: 3px;
}

/* --- il passo corrente --------------------------------------------------- */
.st-configurator--passi .st-panel {
    position: relative;
    display: flex; flex-direction: column;
    padding: 0;
    background: var(--st-white);
    border: 1px solid var(--st-border-soft, #E9E5DF);
    border-radius: 12px;
    animation: st-passo .22s cubic-bezier(.16, 1, .3, 1);
}
@keyframes st-passo { from { opacity: 0; transform: translateY(6px); } }

.st-configurator--passi .st-panel__header {
    position: sticky; top: 142px; z-index: 3;
    margin: 0; padding: 22px 28px 18px;
    background: var(--st-white);
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--st-border-soft, #E9E5DF);
}
.st-panel__conta {
    margin: 0 0 6px;
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--st-copper-text, #AE4C0B);
}
.st-configurator--passi .st-panel__title {
    margin: 0;
    /* Il corpo lo dice `passi.css`: era descritto qui e li' con due clamp
       diversi, piu' altri due piu' in alto nei due fogli. Quattro numeri per
       lo stesso titolo, tre dei quali non hanno mai disegnato niente. */
    font-family: var(--st-font-display, Georgia, serif);
    font-weight: 600; line-height: 1.15; color: var(--st-charcoal, #2F3236);
}
.st-configurator--passi .st-panel__title .st-panel__n { display: none; }
.st-configurator--passi .st-panel__note {
    margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--st-muted, #686560);
}
.st-configurator--passi .st-fields { padding: 24px 28px 10px; display: grid; gap: 26px; }

.st-configurator--passi .st-panel__nav {
    position: sticky; bottom: 0; z-index: 3;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0; padding: 16px 28px 18px;
    background: var(--st-white);
    border-top: 1px solid var(--st-border-soft, #E9E5DF);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 -8px 20px rgba(47, 50, 54, .05);
}
.st-panel__prev, .st-panel__next {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 0 28px;
    font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: .03em;
    border-radius: 4px; cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.st-panel__prev { background: none; color: var(--st-muted, #686560); border: 0; padding-left: 4px; }
.st-panel__prev:hover { color: var(--st-charcoal, #2F3236); }
.st-panel__next {
    margin-left: auto;
    background: var(--st-copper, #B45A17); color: #fff; border: 0;
}
.st-panel__next:hover { background: var(--st-copper-dark, #944A13); transform: translateY(-1px); }

/* --- il campo, dentro il passo ------------------------------------------ */
.st-configurator--passi .st-field__label {
    display: block; margin-bottom: 12px;
    font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--st-muted, #686560);
}
/* Con un campo solo l'etichetta ripete il titolo del passo: si toglie. */
.st-configurator--passi .st-fields > .st-field:only-child > .st-field__label { display: none; }

/* =======================================================================
   I COMPONENTI, UNO PER TIPO DI PASSO
   ======================================================================= */

/* --- tessuto: il campione e' grande, il testo e' poco -------------------- */
.st-panel[data-kind="tessuto"] .st-choices--visual,
.st-panel[data-kind="colore"] .st-choices--visual {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 14px;
}
.st-panel[data-kind="tessuto"] .st-choice,
.st-panel[data-kind="colore"] .st-choice {
    width: 100%; max-width: none;
    border-radius: 10px; overflow: hidden;
    border: 1.5px solid var(--st-border-soft, #E9E5DF);
    background: var(--st-white);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.st-panel[data-kind="tessuto"] .st-choice:hover,
.st-panel[data-kind="colore"] .st-choice:hover {
    border-color: var(--st-border-strong, #9D8B73);
    box-shadow: 0 6px 18px rgba(47, 50, 54, .08);
    transform: translateY(-2px);
}
.st-panel[data-kind="tessuto"] .st-choice__media,
.st-panel[data-kind="colore"] .st-choice__media {
    aspect-ratio: 1 / 1; width: 100%; height: auto;
    border-radius: 0; border: 0; margin: 0;
}
.st-panel[data-kind="tessuto"] .st-choice__label,
.st-panel[data-kind="colore"] .st-choice__label {
    display: block; padding: 10px 12px 12px;
    font-size: 13px; font-weight: 600; line-height: 1.3; text-align: left;
    color: var(--st-charcoal, #2F3236);
}
/* Selezionato: bordo rame e una spunta nell'angolo. Il colore da solo non
   basta a chi non lo distingue. */
.st-panel[data-kind="tessuto"] .st-choice.is-selected,
.st-panel[data-kind="colore"] .st-choice.is-selected,
.st-panel[data-kind="tessuto"] input:checked + .st-choice,
.st-panel[data-kind="colore"] input:checked + .st-choice {
    border-color: var(--st-copper, #B45A17);
    box-shadow: 0 0 0 3px rgba(180, 90, 23, .16);
}

/* --- misure: il diagramma comanda, i campi obbediscono ------------------- */
.st-panel[data-kind="misure"] .st-fields {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 28px;
    align-items: start;
}
.st-panel[data-kind="misure"] .st-field { grid-column: 2; }
/* Il disegno delle quote sta a sinistra e occupa tutte le righe: e' la parte
   che spiega, i campi sono solo dove si scrive. */
.st-misure__figura {
    grid-column: 1; grid-row: 1 / -1;
    position: sticky; top: 236px;
    display: flex; flex-direction: column; gap: 12px;
    padding: 18px; background: var(--st-ivory, #F7F4EF); border-radius: 10px;
}
.st-misure__figura img { width: 100%; height: auto; border-radius: 8px; display: block; }
.st-misure__quote { display: flex; gap: 10px; flex-wrap: wrap; }
.st-misure__quota {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 8px 14px; background: var(--st-white); border-radius: 6px;
    border: 1px solid var(--st-border-soft, #E9E5DF);
    font-size: 13px; color: var(--st-muted, #686560);
}
.st-misure__quota strong { font-size: 16px; font-weight: 700; color: var(--st-charcoal, #2F3236); font-variant-numeric: tabular-nums; }
.st-misure__guida {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px;
    font-size: 13px; font-weight: 600;
    color: var(--st-copper-text, #AE4C0B); background: none; border: 0;
    cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
    font-family: inherit;
}
/* Il campo numerico: grande, con i due comandi ai lati. Un `number` di
   sistema, alto trenta pixel, e' la cosa che piu' fa sembrare un configuratore
   un modulo. */
.st-panel[data-kind="misure"] .st-field input[type="number"] {
    width: 100%; height: 64px;
    padding: 0 16px;
    font-size: 1.5rem; font-weight: 600; text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--st-charcoal, #2F3236);
    background: var(--st-white);
    border: 1.5px solid var(--st-border, #DED8D0); border-radius: 8px;
    -moz-appearance: textfield;
}
.st-panel[data-kind="misure"] .st-field input[type="number"]::-webkit-outer-spin-button,
.st-panel[data-kind="misure"] .st-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.st-panel[data-kind="misure"] .st-field input[type="number"]:focus {
    border-color: var(--st-copper, #B45A17); outline: none;
    box-shadow: 0 0 0 3px rgba(180, 90, 23, .16);
}
.st-num { display: flex; align-items: stretch; gap: 8px; }
.st-num__btn {
    flex: 0 0 auto; width: 56px;
    display: grid; place-items: center;
    font-size: 22px; font-weight: 400; line-height: 1;
    color: var(--st-charcoal, #2F3236);
    background: var(--st-ivory, #F7F4EF); border: 1.5px solid transparent; border-radius: 8px;
    cursor: pointer; font-family: inherit;
    transition: background .18s ease, border-color .18s ease;
}
.st-num__btn:hover { background: var(--st-white); border-color: var(--st-copper, #B45A17); color: var(--st-copper-text, #AE4C0B); }
.st-num__unita {
    display: flex; align-items: center; padding-inline: 4px;
    font-size: 14px; font-weight: 600; color: var(--st-muted, #686560);
}

/* --- scelte visive: montaggio, comando, accessori, generiche ------------- */
.st-panel[data-kind="montaggio"] .st-choices--visual,
.st-panel[data-kind="comando"] .st-choices--visual,
.st-panel[data-kind="scelta"] .st-choices--visual {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

/* --- accessori: righe con la spunta, non una griglia di quadrati --------- */
.st-panel[data-kind="accessori"] .st-choices,
.st-panel[data-kind="note"] .st-choices { gap: 10px; }

/* =======================================================================
   PROGRESSIVE DISCLOSURE
   =======================================================================
   Settantacinque campioni tutti visibili sono un database, non una scelta.
   Se ne mostrano dodici; il resto arriva su richiesta, e nel frattempo c'e'
   un campo per filtrarli. Nessuna opzione viene nascosta: si nasconde la
   fatica di scorrerle tutte.
   ======================================================================= */
.st-scelte__barra {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.st-scelte__filtro {
    position: relative; flex: 1 1 240px; max-width: 340px;
}
.st-scelte__filtro input {
    width: 100%; height: 46px; padding: 0 40px 0 16px;
    font-family: inherit; font-size: 14px;
    background: var(--st-ivory, #F7F4EF);
    border: 1.5px solid transparent; border-radius: 6px;
    color: var(--st-charcoal, #2F3236);
}
.st-scelte__filtro input:focus {
    background: var(--st-white); border-color: var(--st-copper, #B45A17); outline: none;
}
.st-scelte__filtro .st-icon {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: var(--st-muted, #686560); pointer-events: none;
}
.st-scelte__conta { font-size: 13px; color: var(--st-muted, #686560); }
.st-scelte__conta strong { color: var(--st-charcoal, #2F3236); font-weight: 700; }
.st-choice[data-nascosto] { display: none !important; }
.st-scelte__altri {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 52px; margin-top: 18px;
    font-family: inherit; font-size: 14px; font-weight: 700;
    color: var(--st-charcoal, #2F3236);
    background: var(--st-white);
    border: 1.5px solid var(--st-border, #DED8D0); border-radius: 6px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.st-scelte__altri:hover {
    border-color: var(--st-copper, #B45A17); background: var(--st-copper-soft, #F9F2EC);
    color: var(--st-copper-text, #AE4C0B);
}
.st-scelte__vuoto {
    padding: 26px 0; text-align: center;
    font-size: 14px; color: var(--st-muted, #686560);
}

/* --- la scelta fatta, sempre in vista ----------------------------------- */
.st-scelte__scelto {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 16px; padding: 12px 14px;
    background: var(--st-copper-soft, #F9F2EC);
    border: 1px solid rgba(180, 90, 23, .22); border-radius: 10px;
}
.st-scelte__scelto img {
    width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex: 0 0 auto;
    border: 1px solid rgba(180, 90, 23, .2);
}
.st-scelte__scelto span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st-scelte__scelto small {
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--st-copper-text, #AE4C0B);
}
.st-scelte__scelto strong { font-size: 15px; font-weight: 600; color: var(--st-charcoal, #2F3236); }

/* =======================================================================
   IL RIEPILOGO — una mini scheda d'acquisto, non un elenco di campi
   ======================================================================= */
.st-configurator--passi .st-summary { position: sticky; top: 158px; }
/*
 * IL RIEPILOGO NON SCORRE DENTRO SE' STESSO
 *
 * Qui c'era `max-height: calc(100vh - 178px); overflow-y: auto`, scritto quando
 * la pagina del configuratore scorreva tutta e la colonna destra doveva stare
 * dentro il viewport da sola.
 *
 * Con la schermata fissa quella regola e' diventata dannosa: produceva un
 * riquadro con la sua barra di scorrimento interna, dentro una pagina che non
 * scorre, e per arrivare al pulsante d'acquisto bisognava scorrere dentro un
 * blocco largo 340 px. Un secondo scorrimento annidato dove il primo non
 * esiste piu' e' la cosa piu' facile da non vedere: chi non si accorge della
 * barra crede che il pulsante non ci sia.
 *
 * L'annullamento c'era gia' — piu' in basso, sotto i 1200 px — ma sul desktop
 * pieno, dove sta la maggior parte delle sessioni d'acquisto, non arrivava mai.
 *
 * Ora l'altezza la decide il contenuto. Se un giorno il riepilogo non ci
 * stara' piu', la risposta non e' farlo scorrere: e' toglierci qualcosa.
 */
.st-configurator--passi .st-summary__inner {
    padding: 22px;
    background: var(--st-white);
    border: 1px solid var(--st-border-soft, #E9E5DF);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(47, 50, 54, .06);
}
.st-configurator--passi .st-summary__eyebrow {
    margin: 0 0 4px;
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--st-copper-text, #AE4C0B);
}
.st-configurator--passi .st-summary__title {
    margin: 0 0 18px;
    font-family: var(--st-font-display, Georgia, serif);
    font-size: 1.1rem; font-weight: 600; line-height: 1.3;
    color: var(--st-charcoal, #2F3236);
}
.st-configurator--passi .st-summary__choices { margin: 0 0 18px; display: grid; gap: 0; }
.st-configurator--passi .st-summary__choices > div,
.st-configurator--passi .st-summary__choices .st-summary__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--st-border-soft, #E9E5DF);
    font-size: var(--st-fs-small);
}
.st-configurator--passi .st-summary__choices dt { color: var(--st-muted, #686560); }
.st-configurator--passi .st-summary__choices dd {
    margin: 0; font-weight: 600; text-align: right; color: var(--st-charcoal, #2F3236);
}
.st-summary__empty { margin: 0; padding: 14px 0; font-size: var(--st-fs-small); color: var(--st-muted, #686560); }

/* Il prezzo non e' una riga come le altre: e' la risposta. */
.st-configurator--passi .st-summary__total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-top: 6px; padding-top: 16px;
    border-top: 2px solid var(--st-charcoal, #2F3236);
}
.st-configurator--passi .st-summary__total-label {
    font-size: 14px; font-weight: 600; color: var(--st-charcoal, #2F3236);
}
.st-configurator--passi .st-summary__total-value {
    font-family: var(--st-font-display, Georgia, serif);
    font-size: 2rem; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--st-charcoal, #2F3236);
}
.st-configurator--passi .st-summary__total-value.is-attesa {
    font-size: 1rem; font-weight: 600; color: var(--st-muted, #686560); font-family: inherit;
}
.st-configurator--passi .st-summary__tax {
    margin: 4px 0 16px; font-size: 12.5px; color: var(--st-muted, #686560);
}

/* Una primaria sola. Le altre scendono di peso: piena, poi bordata, poi
   testo. Cinque pulsanti dello stesso peso non sono cinque possibilita', sono
   una decisione rimandata. */
.st-configurator--passi [data-add-button],
.st-configurator--passi .st-summary .st-btn--primary {
    width: 100%; min-height: 56px;
    font-size: 15px; font-weight: 700; letter-spacing: .03em;
    border-radius: 4px;
}
.st-configurator--passi .st-summary__keep {
    display: flex; gap: 8px; margin-top: 12px;
}
.st-summary__keep-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 12px;
    font-family: inherit; font-size: 13px; font-weight: 600;
    color: var(--st-muted, #686560);
    background: none; border: 1px solid var(--st-border-soft, #E9E5DF); border-radius: 4px;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}
.st-summary__keep-btn:hover { border-color: var(--st-copper, #B45A17); color: var(--st-copper-text, #AE4C0B); }

/* --- il totale che cambia ------------------------------------------------ */
.st-summary__total-value.is-updated { animation: st-prezzo .4s ease; }
@keyframes st-prezzo {
    50% { transform: scale(1.045); color: var(--st-copper-text, #AE4C0B); }
}

/* =======================================================================
   TABLET E TELEFONO — non il desktop compresso
   ======================================================================= */
@media (max-width: 1200px) {
    .st-configurator--passi .st-configurator__grid { grid-template-columns: 208px minmax(0, 1fr); gap: 24px; }
    .st-configurator--passi .st-summary { grid-column: 1 / -1; position: static; }
    /* (l'altezza libera del riepilogo ora e' la regola ovunque, vedi sopra) */
    .st-panel[data-kind="misure"] .st-fields { grid-template-columns: minmax(0, 1fr); }
    .st-panel[data-kind="misure"] .st-field { grid-column: 1; }
    .st-misure__figura { grid-column: 1; grid-row: auto; position: static; }
}

@media (max-width: 900px) {
    .st-configurator--passi { padding-block: 0 0; }
    .st-configurator--passi .st-configurator__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }

    /* La colonna dei passi diventa una barra di avanzamento: resta il senso
       di dove si e', senza dieci righe prima della prima domanda. */
    .st-steps { position: static; max-height: none; overflow: visible; }
    .st-steps__list {
        display: flex; gap: 6px; overflow-x: auto;
        margin: 0 0 14px; padding: 12px 0 8px;
        scrollbar-width: none; scroll-snap-type: x mandatory;
    }
    .st-steps__list::-webkit-scrollbar { display: none; }
    .st-steps__item + .st-steps__item { margin-top: 0; }
    .st-steps__item { flex: 0 0 auto; scroll-snap-align: start; }
    .st-steps__btn { border: 1px solid var(--st-border-soft, #E9E5DF); background: var(--st-white); padding: 8px 12px; }
    .st-steps__valore { display: none; }
    .st-steps__aiuto { display: none; }

    .st-configurator--passi .st-panel { border: 0; border-radius: 0; }
    .st-configurator--passi .st-panel__header {
        top: 129px; padding: 16px 0 14px;
        margin-inline: 0; border-radius: 0;
    }
    .st-configurator--passi .st-fields { padding: 18px 0 8px; }

    /* La barra dei comandi si stacca dal pannello e si incolla al bordo dello
       schermo, con il prezzo accanto: su un telefono le due domande sono
       «quanto costa» e «e adesso?», e devono stare nello stesso posto. */
    .st-configurator--passi .st-panel__nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        margin: 0; padding: 12px var(--st-gutter, 20px);
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        box-shadow: 0 -10px 26px rgba(47, 50, 54, .12);
    }
    .st-panel__prev, .st-panel__next { min-height: 50px; }
    .st-panel__next { flex: 1 1 auto; justify-content: center; }
    /* Spazio perche' l'ultima scelta non finisca sotto la barra fissa. */
    .st-configurator--passi .st-summary { padding-bottom: 96px; }
    .st-configurator--passi .st-summary__inner { border-radius: 12px; }
    .st-panel[data-kind="tessuto"] .st-choices--visual,
    .st-panel[data-kind="colore"] .st-choices--visual {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .st-configurator--passi .st-panel,
    .st-searchover__pannello, .st-searchover__velo { animation: none; }
    .st-choice, .st-panel__next, .st-scelte__altri { transition: none; }
    .st-summary__total-value.is-updated { animation: none; }
}

/* --- correzioni viste a schermo ---------------------------------------- */

/*
 * IL CAMPO DELLE MISURE NON DEVE SCHIACCIARSI
 *
 * `width: 100%` dentro un flex non basta: i due pulsanti e l'unita' hanno una
 * base loro, e l'input si stringeva fino a mostrare «Ins» al posto del
 * segnaposto, con «cm» sovrapposto al «+». Il campo e' l'elemento che deve
 * crescere; gli altri hanno una misura fissa.
 */
.st-num { align-items: stretch; }
.st-panel[data-kind="misure"] .st-num input[type="number"] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.st-num__btn { flex: 0 0 56px; }
.st-num__unita { flex: 0 0 auto; white-space: nowrap; }

/*
 * DUE BARRE FISSE IN FONDO NON SONO UNA INTERFACCIA
 *
 * Sul telefono la pagina ne aveva due sovrapposte: quella storica del
 * configuratore — totale piu' «Aggiungi al carrello» — e quella nuova dei
 * passi, con «Avanti». Il risultato era il prezzo tagliato a meta' da un
 * pulsante che ne copriva un altro.
 *
 * Ne resta una: quella dei passi, con dentro il prezzo. E' la barra giusta,
 * perche' sul telefono le due domande sono «quanto costa» e «e adesso?», e
 * devono stare nello stesso posto. «Aggiungi al carrello» vive nel riepilogo,
 * che e' dove si conclude.
 */
.st-configurator--passi .st-mobilebar { display: none !important; }

.st-panel__prezzo {
    display: none;
    flex-direction: column; gap: 1px;
    margin-right: auto;
    line-height: 1.15;
}
.st-panel__prezzo small {
    font-size: var(--st-fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--st-muted, #686560);
}
.st-panel__prezzo strong {
    font-family: var(--st-font-display, Georgia, serif);
    font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--st-charcoal, #2F3236);
}
@media (max-width: 900px) {
    .st-panel__prezzo { display: flex; }
    .st-configurator--passi .st-panel__nav { gap: 14px; }
    .st-panel__prev { display: none; }
    /* «Indietro» sul telefono e' il gesto del sistema operativo, e la colonna
       dei passi in cima porta ovunque: un pulsante in piu' in una barra da
       due elementi toglie spazio a quello che serve. */
    .st-panel__next { flex: 0 1 auto; min-width: 150px; }
}

/*
 * DUE COLONNE SOLO SE C'E' QUALCOSA NELLA PRIMA
 *
 * Il passo delle misure era disegnato per avere il diagramma delle quote a
 * sinistra e i campi a destra. Il diagramma pero' e' un asset che non abbiamo:
 * il risultato era mezzo pannello vuoto e i campi schiacciati in duecento
 * pixel, con il segnaposto tagliato a «Ins» e l'unita' sopra il pulsante «+».
 *
 * Finche' la figura non c'e', i campi prendono tutta la larghezza. `:has()`
 * fa il lavoro da solo: il giorno in cui il diagramma arriva, la colonna
 * torna senza toccare niente.
 */
.st-panel[data-kind="misure"] .st-fields { grid-template-columns: minmax(0, 1fr); }
.st-panel[data-kind="misure"] .st-field { grid-column: 1; }
.st-panel[data-kind="misure"] .st-fields:has(.st-misure__figura) {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}
.st-panel[data-kind="misure"] .st-fields:has(.st-misure__figura) .st-field { grid-column: 2; }

/* Un campo di misura largo settecento pixel non si legge meglio: si ferma
   dove smette di aiutare. */
.st-panel[data-kind="misure"] .st-num { max-width: 360px; }

/* I due campi affiancati quando c'e' spazio: larghezza e altezza si guardano
   insieme, non una sotto l'altra. */
@media (min-width: 760px) {
    .st-panel[data-kind="misure"] .st-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-panel[data-kind="misure"] .st-field { grid-column: auto; }
    .st-panel[data-kind="misure"] .st-fields:has(.st-misure__figura) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/*
 * IL CAMPO PRIMA DELLA SIMMETRIA
 *
 * Larghezza e altezza affiancate sono belle da guardare e inutili da usare:
 * nella colonna centrale ogni campo resta sotto i duecentotrenta pixel, e fra
 * i due pulsanti e l'unita' all'input ne restavano settantotto — il segnaposto
 * si leggeva «Inse» e «cm» finiva sopra il «+».
 *
 * Uno sotto l'altro, a tutta larghezza. Si affiancano solo quando la finestra
 * e' abbastanza larga da lasciare a ciascuno lo spazio che serve.
 */
.st-panel[data-kind="misure"] .st-num { max-width: 100%; }
.st-panel[data-kind="misure"] .st-num input[type="number"] { min-width: 92px; }
.st-num__btn { flex: 0 0 48px; }

@media (min-width: 760px) and (max-width: 1599px) {
    .st-panel[data-kind="misure"] .st-fields { grid-template-columns: minmax(0, 1fr); }
    .st-panel[data-kind="misure"] .st-num { max-width: 340px; }
}

/* `.st-number` limitava il campo a 260 px: era la misura giusta per un input
   di sistema alto trenta pixel, non per una riga con due comandi da 48 e
   l'unita'. Nel passo delle misure il limite si alza. */
.st-panel[data-kind="misure"] .st-number { max-width: none; position: static; }
.st-panel[data-kind="misure"] .st-num { width: 100%; max-width: 360px; }
.st-num__unita { position: static !important; }

/* =======================================================================
   L'ANTEPRIMA CON LE QUOTE — il prodotto e' il protagonista
   =======================================================================
   Sta in cima al passo delle misure, prima dei campi, e occupa piu' peso
   visivo di loro: e' la parte che **spiega** cosa si sta misurando. I campi
   dicono solo dove scrivere.
   ======================================================================= */
.st-configurator--passi .st-preview {
    position: relative;
    margin: 0 0 26px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--st-ivory, #F7F4EF);
}
.st-configurator--passi .st-preview__image {
    display: block; width: 100%; height: auto;
    aspect-ratio: 4 / 3; object-fit: cover;
}
.st-configurator--passi .st-preview__dims {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
/* Le linee di quota: sottili, rame, con i terminali arrotondati. Non un
   reticolo tecnico sopra una fotografia — due misure e basta. */
.st-configurator--passi .st-preview__dims line {
    stroke: var(--st-copper, #B45A17);
    stroke-width: 1.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.st-configurator--passi .st-preview__label {
    fill: var(--st-charcoal, #2F3236);
    font-family: var(--st-font-body, sans-serif);
    font-size: 13px; font-weight: 700;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, .9); stroke-width: 4px; stroke-linejoin: round;
}
.st-configurator--passi .st-preview__caption {
    padding: 12px 16px;
    font-size: 13px; color: var(--st-muted, #686560);
    background: var(--st-white);
    border-top: 1px solid var(--st-border-soft, #E9E5DF);
}
@media (max-width: 900px) {
    .st-configurator--passi .st-preview { margin-bottom: 18px; }
    .st-configurator--passi .st-preview__image { aspect-ratio: 16 / 10; }
}

/* L'anteprima sta dentro la griglia dei campi e ne occupa tutta la larghezza:
   e' il protagonista del passo, non una colonna accanto ai campi. */
.st-panel[data-kind="misure"] .st-fields > .st-preview { grid-column: 1 / -1; }

/* --- il passo a cui manca qualcosa -------------------------------------- */
.st-steps__item.is-error .st-steps__n {
    color: var(--st-error, #A53A32);
    background: #FCF4F3;
    border-color: rgba(165, 58, 50, .4);
    font-size: 12px;
}
.st-steps__item.is-error .st-steps__n::before { content: none; }
.st-steps__item.is-error .st-steps__valore { color: var(--st-error, #A53A32); font-weight: 600; }
.st-summary__vai {
    display: inline-flex; align-items: center;
    min-height: 44px; margin-top: 6px; padding: 0;
    font-family: inherit; font-size: 13px; font-weight: 700;
    color: var(--st-copper-text, #AE4C0B);
    background: none; border: 0; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}

/* Il campo che manca, nel passo aperto: un filo rosso a sinistra e l'etichetta
   che cambia colore. Non un riquadro rosso — il campo non e' sbagliato, e'
   vuoto, e allarmare per un campo vuoto e' sproporzionato. */
.st-configurator--passi .st-field.is-error {
    padding-left: 14px;
    border-left: 3px solid var(--st-error, #A53A32);
}
.st-configurator--passi .st-field.is-error .st-field__label { color: var(--st-error, #A53A32); }

/* --- l'avvertenza sulle misure ------------------------------------------
   Non e' un errore e non e' un allarme: e' l'informazione che manca a chi sta
   per digitare i centimetri. Colore del rame appena accennato, non il rosso
   degli errori — il rosso direbbe «hai sbagliato», e qui non ha ancora
   sbagliato nessuno. */
.st-panel__attenzione {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 20px;
    padding: 14px 16px;
    border-left: 3px solid var(--st-copper, #B45A17);
    border-radius: var(--st-r-campo, 8px);
    background: var(--st-copper-soft, #F9F2EC);
    font-size: 14px;
    line-height: 1.55;
    color: var(--st-p-inchiostro, #23201D);
}
.st-panel__attenzione strong { font-weight: 600; }
.st-panel__attenzione-link {
    align-self: flex-start;
    margin-top: 2px;
    font-weight: 600;
    color: var(--st-copper-text, #AE4C0B);
    text-underline-offset: 2px;
}