/**
 * La scheda prodotto secondo la tavola 4: tre aree, non tre riquadri.
 *
 * COME SI TENGONO INSIEME
 * -----------------------
 * Il configuratore ha un suo HTML — passi, pannelli, riepilogo — che il motore
 * produce e che non ha senso duplicare. `display: contents` sui suoi wrapper
 * li fa sparire dal flusso lasciando i figli alla griglia della pagina: cosi'
 * galleria, informazioni, passi, pannelli e riepilogo finiscono nella stessa
 * griglia senza toccare una riga di markup del configuratore.
 *
 * LE PROPORZIONI
 * --------------
 * Nella tavola la fotografia domina, la configurazione ha lo spazio per
 * respirare, il riepilogo resta stretto e sempre visibile.
 *
 * Le colonne sono quattro e non tre, e il motivo e' che le due righe hanno
 * bisogni diversi. Con tre colonne la larghezza si decideva una volta sola per
 * entrambe: la prima colonna la prendeva la fotografia — che ne ha bisogno — e
 * sotto ci finiva l'elenco dei passi, che e' una lista di otto parole e con
 * 700 px non sa cosa farsene. Intanto **i pannelli, dove si sceglie davvero,
 * restavano a 431 px su uno schermo da 1600**: le schede delle opzioni ci
 * stavano a tre per riga, strette, con le didascalie su quattro righe.
 *
 * Adesso ogni riga usa le quattro colonne come le serve: la fotografia ne
 * occupa due, l'elenco dei passi solo la prima — che e' una corsia da 260 px —
 * e i pannelli si prendono le due centrali. Su 1600 px passano da 431 a circa
 * 930.
 */

/* La soglia e' 1400 e deve combaciare con il `max-width: 1399px` del blocco a
 * due colonne: le due impaginazioni si escludono a vicenda. Quando questa
 * partiva da 1200 e l'altra arrivava a 1399, fra quelle due larghezze si
 * applicavano **entrambe** — una diceva `display: contents` sul contenitore
 * del configuratore e l'altra ne faceva una griglia, e il pannello delle
 * scelte finiva largo 220 px con dentro schede da 240.
 *
 * LE TRE COLONNE, E PERCHE' LA FOTOGRAFIA STA DENTRO QUELLA DI MEZZO
 *
 * Nella tavola le colonne sono tre e arrivano tutte alla stessa altezza:
 * a sinistra la corsia dei passi, al centro **la fotografia con sotto le
 * scelte**, a destra il riepilogo. Il centro e' una colonna sola: la foto e i
 * pulsanti che si premono stanno uno sopra l'altro, e insieme fanno l'altezza
 * della pagina.
 *
 * Prima la fotografia stava in una riga a se', accanto al titolo, e il
 * configuratore in quella sotto. Le due righe avevano altezze diverse e
 * nessuno riempiva la differenza: **meta' pagina era bianca**, con il pannello
 * delle scelte che galleggiava in mezzo come una scatoletta. Non era una
 * questione di larghezze — quelle le avevo gia' aggiustate — era la riga di
 * troppo.
 *
 * Il titolo e le informazioni salgono in cima, a tutta larghezza, come nella
 * tavola 13.
 */

/*
 * La soglia e' 1081, non 1000.
 *
 * A 1024 la griglia restava a due colonne e la galleria si stringeva a 570 px
 * contro i 384 fissi della colonna d'acquisto: l'immagine del prodotto — la
 * ragione per cui si e' su quella pagina — diventava piu' piccola del modulo
 * che le sta accanto. La specifica impila sotto i 1080, ed e' il punto in cui
 * 930 + 22 + 384 smette di starci con un margine ragionevole.
 */
@media (min-width: 1081px) {
    /*
     * DUE COLONNE, NON TRE.
     *
     * La terza era la colonna dei passi: otto voci a sinistra che dicevano
     * dove ti trovavi dentro una procedura. La procedura non c'e' piu' — le
     * scelte stanno tutte in pagina, numerate, e si scorre — quindi quella
     * colonna non ha piu' niente da dire e lo spazio torna alle scelte.
     *
     * A sinistra la fotografia e sotto tutto quello che c'e' da decidere; a
     * destra il prezzo, che resta agganciato mentre si scorre. Sono le due
     * sole domande che una persona si fa mentre configura: «come viene» e
     * «quanto viene».
     */
    /*
     * 930 / 22 / 384.
     *
     * Le colonne erano `1fr` e `minmax(340px, 400px)`: a 1336 di contenitore la
     * seconda si prendeva i suoi 400 e la prima quel che restava. I mockup
     * dicono 384, e la differenza non e' estetica — 930 + 22 + 384 fa
     * esattamente 1336, mentre 400 obbligava la galleria a 914 e ogni misura
     * dentro di lei a essere un po' sbagliata.
     *
     * La seconda colonna e' **fissa**: e' una colonna d'acquisto, non un
     * contenitore elastico, e i suoi elementi — due pulsanti a tutta larghezza,
     * due campi affiancati, una riga di fiducia a tre voci — sono disegnati per
     * quella larghezza.
     */
    .st-product-layout {
        display: grid;
        /* Tre colonne, non due. La descrizione aveva la stessa colonna dei
           comandi: chi e' gia' deciso cerca prezzo e pulsante, chi non lo
           e' legge, e insieme il primo deve scorrere il secondo. */
        grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr) 316px;
        /*
         * `intro` e' la **colonna d'acquisto**, non una fascia sopra tutto.
         *
         * Prima occupava entrambe le colonne — `"intro intro"` — e dentro ci
         * finivano categoria, titolo, prezzo, descrizione e il blocco di avvio
         * del configuratore: cioe' tutto cio' che nei mockup sta stretto in
         * 384 px a destra della galleria, disteso invece su 1336. Il risultato
         * era un titolo lunghissimo su una riga sola e due pulsanti larghi
         * quanto la pagina.
         *
         * Qui prende la colonna destra e la tiene per tutte le righe: e' una
         * cosa sola dall'inizio alla fine, e spezzarla in due celle
         * l'avrebbe fatta scorrere via dalla galleria.
         */
        /* `avvio` non ha piu' una riga sua: sta dentro `acquisto`, il riquadro
           crema che parte dalla prima riga e scende accanto alla galleria. */
        grid-template-areas:
            "gallery intro  acquisto"
            "gallery intro  acquisto"
            "panels  panels acquisto";
        grid-template-rows: auto auto 1fr;
        gap: 32px var(--st-l, 22px);
        align-items: start;
    }

    /* I contenitori si dissolvono: contano i loro figli. */
    .st-product-layout .st-product__head,
    .st-product-layout .st-product__acquisto > .st-configurator,
    .st-product-layout .st-configurator,
    .st-product-layout .st-configurator__grid { display: contents; }

    .st-product-layout .st-product__gallery { grid-area: gallery; }

    .st-product-layout .st-product__intro   { grid-area: intro; }

    /*
     * Il blocco d'avvio del configuratore appartiene alla colonna d'acquisto.
     *
     * Arriva da un aggancio di WooCommerce e nel documento non sta dentro
     * `.st-product__intro`: senza un'area propria la griglia lo mandava nella
     * prima cella libera, che e' sotto la galleria, e i due campi di misura
     * uscivano larghi milletrecento pixel in fondo alla pagina invece di stare
     * sotto il prezzo.
     *
     * Sta sotto `intro` nella stessa colonna: titolo, prezzo, misure e
     * pulsanti tornano una cosa sola, che e' come si leggono.
     */
    .st-product-layout .st-avvio { grid-area: avvio; min-width: 0; }
    
    .st-product-layout .st-panels           { grid-area: panels; min-width: 0; }
    .st-product-layout .st-product__gallery { min-width: 0; }
    .st-product-layout .st-summary          { grid-area: summary; }

    /* Il riepilogo resta sott'occhio mentre si configura. `align-self: start`
       serve: senza, la cella si allunga a tutta la riga e `sticky` non ha piu'
       niente rispetto a cui restare fermo. */
    .st-product-layout .st-summary {
        position: sticky;
        top: 96px;
        align-self: start;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    /* Su schermi bassi il riepilogo appiccicato nasconderebbe il contenuto
       invece di aiutare: torna a scorrere con la pagina. */
    @media (max-height: 720px) {
        .st-product-layout .st-summary { position: static; max-height: none; }
    }

}

/* Tablet: due colonne, non tre compresse. Il riepilogo scende sotto la
   configurazione, dove si legge, invece di ridursi a una colonna di 180 px in
   cui il prezzo va a capo. */
/* Sotto i 1000 px: una colonna sola.
 *
 * Qui c'era il blocco che sistemava le tre colonne sul tablet, con la corsia
 * dei passi a 240 px. Quella corsia non esiste piu' e le sue regole
 * restavano ad assegnare colonne a un elemento assente, sovrapponendosi alla
 * nuova impaginazione: fra 1000 e 1399 px si applicavano **entrambe** e la
 * colonna delle scelte si riduceva a 136 px.
 *
 * Adesso non serve niente: sotto la soglia gli elementi tornano uno sotto
 * l'altro da soli, che su uno schermo stretto e' l'ordine giusto —
 * fotografia, scelte, prezzo. */
@media (max-width: 1080px) {
    .st-product-layout .st-summary {
        position: static;
    }

    /*
     * Sotto i 1080 si impila, e l'ordine e' dichiarato qui.
     *
     * Senza queste righe la griglia a due colonne semplicemente non si
     * applicava e i blocchi tornavano al flusso: `.st-product__head` — che
     * altrove si dissolve con `display: contents` — riprendeva la sua forma e
     * metteva galleria e testo affiancati a 468 px ciascuno, mentre il blocco
     * d'avvio restava largo quanto la pagina. Tre larghezze diverse per tre
     * pezzi della stessa colonna.
     *
     * L'ordine e' quello della specifica: si guarda la tenda, si legge cos'e',
     * si scrivono le misure, si preme.
     */
    .st-product-layout,
    .st-product-layout .st-product__head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: none;
        gap: var(--st-xl, 32px);
    }

    .st-product-layout .st-product__gallery { order: 1; }
    .st-product-layout .st-product__intro   { order: 2; }
    .st-product-layout .st-avvio            { order: 3; }
    .st-product-layout .st-panels           { order: 4; }
    .st-product-layout .st-summary          { order: 5; }

    .st-product-layout .st-product__gallery,
    .st-product-layout .st-product__intro,
    .st-product-layout .st-avvio { grid-area: auto; min-width: 0; }
}

/* ------------------------------------------------------------------ galleria */

.st-product__gallery-main img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--st-radius, 10px);
    background: var(--st-sand, #E7E2DA);
}
.st-product__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.st-product__thumbs img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--st-radius-sm, 6px);
    border: 1.5px solid var(--st-border, #DED8D0);
    cursor: pointer;
    transition: border-color .18s ease;
}
.st-product__thumbs img:hover,
.st-product__thumbs img.is-current { border-color: var(--st-copper, #AE4C0B); }
/* Con una sola fotografia non si mostrano controlli che non controllano niente. */
.st-product__thumbs:empty,
.st-product__thumbs:has(img:only-child) { display: none; }

/* ------------------------------------------------------------- informazioni */

.st-product__category {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-bottom: 6px;
    font-size: var(--st-fs-micro);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--st-copper, #AE4C0B);
    text-decoration: none;
}
.st-product__category:hover { text-decoration: underline; text-underline-offset: 3px; }

/*
 * IL PREZZO TORNA VISIBILE
 *
 * Questa regola lo nascondeva sopra i 1400 px. Aveva una ragione: quando il
 * riepilogo del configuratore stava **dentro** la scheda prodotto, il prezzo
 * compariva due volte e non si capiva quale fosse quello buono.
 *
 * Quel riepilogo non e' piu' qui — nella scheda resta solo il blocco che porta
 * al configuratore, e non ha prezzo. Cosi' la regola nascondeva l'unico prezzo
 * della pagina, e per giunta **solo su schermi larghi**: appariva a 1366 e
 * spariva a 1440, che e' il tipo di difetto che sembra un guasto.
 *
 * Una scheda prodotto senza prezzo e' la peggior cosa che possa capitare a una
 * scheda prodotto.
 */
.st-product-layout .st-product__price {
    /* Sedici e non diciotto: prezzo e misure sono la stessa risposta — quanto
       costa e se ci sta — e si leggono meglio come un blocco solo. */
    margin: 0 0 16px;
    font-size: var(--st-fs-h3);
    line-height: 1.15;
}

/* -------------------------------------------------------- barra su telefono */

@media (max-width: 767px) {
    .st-product-layout { display: block; }

    /* Il riepilogo su telefono non e' una colonna: e' la barra in fondo piu'
       il dettaglio che si apre. */
    .st-mobilebar {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 70;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: var(--st-white, #fff);
        border-top: 1px solid var(--st-border, #DED8D0);
        box-shadow: 0 -6px 24px rgba(47, 50, 54, .1);
    }
    /* Lo spazio in fondo alla pagina, altrimenti la barra copre l'ultima riga
       di testo — e il collegamento alle preferenze cookie, che sta li'. */
    body.single-product { padding-bottom: 84px; }

    /* Quando la tastiera del telefono e' aperta la barra fissa finisce sopra il
       campo che si sta compilando. */
    @media (max-height: 460px) { .st-mobilebar { position: static; box-shadow: none; } }
}

/* ==========================================================================
   Correzioni trovate guardando la schermata, non l'HTML.
   ========================================================================== */

/* Il titolo andava a capo sei volte. La colonna centrale e' piu' stretta della
   pagina intera, e una scala tipografica tarata sulla larghezza del viewport
   non lo sa: `clamp` va legato allo spazio che il titolo ha davvero. */
/* IL SALTO A 1400 PX
   Questa regola stava dentro `@media (min-width: 1400px)`, e il risultato era
   che a 1399 px il titolo valeva 49,3 px su quattro righe e a 1400 ne valeva
   25 su due: **ventiquattro pixel di differenza per un pixel di finestra**.
   Guardate le due schermate una accanto all'altra non c'e' partita — a 1400
   si vedono insieme il nome, le due misure, le tre promesse e la fascia delle
   garanzie; a 1399 il nome si prende lo schermo e spinge tutto il resto sotto
   la piega. Non era il limite a essere sbagliato: era il fatto che ci fosse.

   La colonna del titolo e' larga 360-390 px a **qualunque** larghezza di
   finestra, perche' accanto ci sono la galleria e la scheda d'acquisto. Una
   misura tarata sul viewport non lo sa: e' esattamente il motivo per cui
   questa regola esiste, e vale a ogni larghezza.

   Gli estremi sono i gradini della scala, non due numeri: il titolo scivola
   **fra** il terzo livello e il secondo secondo lo spazio che ha davvero. */
.st-product-layout .st-product__intro { container-type: inline-size; }

.st-product-layout .st-product__title {
    font-size: clamp(var(--st-fs-h3), 1.9cqw + .9rem, var(--st-fs-h2));
    line-height: 1.22;
    hyphens: auto;
}
.st-product__title { text-wrap: balance; }

/* «Condividi» finiva fuori dal riquadro: due pulsanti affiancati non stanno in
   300 px quando l'etichetta e' lunga. Vanno a capo. */
.st-summary__keep { flex-wrap: wrap; }
.st-summary__keep-btn { flex: 1 1 130px; min-width: 0; }
.st-summary__keep-btn svg { flex: 0 0 auto; }

/* Il riepilogo non deve mai sborda re: e' la colonna piu' stretta e contiene i
   testi piu' lunghi (nomi di prodotto, messaggi del motore). */
.st-summary, .st-summary__inner { min-width: 0; }
.st-summary__title, .st-summary__message { overflow-wrap: anywhere; }

/* L'anteprima con le quote ripeteva la fotografia gia' grande a sinistra.
   Nella tavola l'immagine compare una volta: qui serve solo a mostrare *dove*
   vanno le misure, quindi resta piccola. */
@media (min-width: 1400px) {
    .st-product-layout .st-preview { max-width: 380px; }
}

/* Il vuoto sotto le informazioni.
 *
 * La prima riga della griglia e' alta quanto l'elemento piu' alto, e la
 * fotografia in 4:3 su una colonna da 600 px arriva a 450: sotto le
 * informazioni restavano duecento pixel di niente.
 *
 * Non si accorcia la fotografia con `object-fit` violento — si perderebbe la
 * tenda per far quadrare una griglia. Si limita l'altezza della riga e si
 * lascia che l'immagine riempia lo spazio mantenendo il centro. */
@media (min-width: 1400px) {
    .st-product-layout { grid-template-rows: minmax(0, auto) 1fr; }
    .st-product-layout .st-product__gallery-main img {
        max-height: 360px;
        object-position: center;
    }
    .st-product-layout .st-product__intro { align-self: start; }
    .st-product-layout .st-panels { margin-top: 0; }
}


/*
 * Il riepilogo appiccicato non deve diventare una gabbia.
 *
 * Sui prodotti a preventivo dentro il riepilogo c'e' un modulo — nome, email,
 * telefono, note — e su schermi bassi finiva oltre il bordo dell'area di
 * griglia: il riquadro si chiudeva a meta' del campo «Note», e i campi
 * successivi non erano raggiungibili in alcun modo. Un modulo che non si puo'
 * completare e' peggio di un modulo assente: sembra funzionante.
 *
 * Ora, quando il contenuto supera l'altezza dello schermo, il riepilogo scorre
 * per conto proprio invece di troncare.
 */
@media (min-width: 1400px) {
    .st-product-layout .st-summary__inner {
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ------------------------------------------- misure realizzabili, in alto
 *
 * Il disegno di questo blocco sta in `product.css`, in fondo, e qui non c'e'
 * piu' niente.
 *
 * Qui c'era la versione col filetto di rame a sinistra e le due voci in
 * colonna. Non era sbagliata: era vecchia, e siccome questo foglio si carica
 * dopo l'altro continuava a vincere sulle regole nuove — margine, spaziatura
 * e disposizione restavano quelli di prima mentre il resto cambiava, e il
 * risultato non era ne' l'uno ne' l'altro disegno.
 *
 * Due fogli che descrivono lo stesso blocco sono un guasto in attesa: vince
 * l'ordine di caricamento, che nessuno ha in mente mentre scrive. Meglio un
 * posto solo. */

/* ---------------------------------------------------- servizi e assistenza
   La striscia dei servizi chiude la parte «decidi se comprare» e apre quella
   «leggi i dettagli»: sta fra il configuratore e i tab, come nella tavola 4. */
.st-servizi {
    list-style: none; margin: var(--st-space-5) 0 0; padding: var(--st-space-4);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--st-space-3);
    background: var(--st-ivory);
    border-radius: var(--st-radius);
}
.st-servizio { display: flex; align-items: center; gap: 12px; min-width: 0; }
.st-servizio + .st-servizio { border-left: 1px solid var(--st-border); padding-left: var(--st-space-3); }
.st-servizio__icona { flex: none; color: var(--st-copper); display: inline-flex; }
.st-servizio strong { display: block; font-size: .94rem; color: var(--st-charcoal); }
.st-servizio a { text-decoration: none; }
.st-servizio a:hover strong { color: var(--st-copper-text, var(--st-copper)); }
.st-servizio span span { display: block; font-size: .82rem; color: var(--st-muted); }

/* I tab e il riquadro d'aiuto stanno affiancati: il dubbio viene mentre si
   leggono i dettagli, non dopo. */
.st-tabs-riga {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .34fr);
    gap: var(--st-space-4);
    align-items: start;
    margin-top: var(--st-space-6);
}
.st-tabs-riga .st-tabs { margin-top: 0; }

.st-aiuto {
    padding: var(--st-space-4);
    background: var(--st-ivory);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    position: sticky; top: 96px;
}
.st-aiuto__icona { display: inline-flex; color: var(--st-copper); margin-bottom: 10px; }
.st-aiuto h2 { margin: 0 0 8px; font-size: var(--st-fs-h3); }
.st-aiuto p { margin: 0 0 var(--st-space-3); font-size: .92rem; color: var(--st-muted); line-height: 1.6; }
.st-aiuto__recapito { font-weight: 600; color: var(--st-charcoal); }
.st-aiuto__recapito a { color: inherit; text-decoration: none; }
.st-aiuto__recapito a:hover { color: var(--st-copper-text, var(--st-copper)); }

@media (max-width: 900px) {
    .st-tabs-riga { grid-template-columns: 1fr; }
    .st-aiuto { position: static; }
    .st-servizio + .st-servizio { border-left: 0; padding-left: 0; }
}

/* ------------------------------------------------ i campi dentro un pannello */

@media (min-width: 1400px) {
    /* Con il pannello largo, incolonnare due caselle numeriche da 930 px l'una
       e' spazio sprecato e fa sembrare lungo un passo che e' corto: larghezza e
       altezza stanno benissimo affiancate. Le griglie di opzioni no — quelle
       hanno bisogno della riga intera, soprattutto quando i tessuti sono
       settantacinque. */
    .st-product-layout .st-fields {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 26px 24px;
        align-items: start;
    }

    .st-product-layout .st-field:has(.st-choices--visual),
    .st-product-layout .st-field:has(textarea) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1400px) {
    /* Il titolo in cima non deve correre per tutta la pagina: una riga larga
       1400 px non si legge. Le informazioni gli stanno accanto invece che
       sotto, cosi' la fascia in cima resta bassa e la fotografia comincia
       subito. */
    /* L'intestazione resta in colonna.
       Ci avevo messo una griglia a due colonne e i figli, che sono quattro, si
       erano distribuiti a scacchiera: l'occhiello a sinistra, il titolo a
       destra, le misure sotto a sinistra. Una griglia dispone in ordine di
       markup, e qui l'ordine di markup e' una colonna. Basta il tetto alla
       lunghezza della riga. */
    .st-product-layout .st-product__intro {
        padding-bottom: var(--st-space-3, 16px);
        border-bottom: 1px solid var(--st-border);
    }

    .st-product-layout .st-product__title {
        max-width: 30ch;
    }

    /* La fotografia riempie la sua colonna: nella tavola e' l'elemento piu'
       grande della pagina, non un francobollo dentro una cornice beige. */
    /* 16/10 e non 4/3: a tutta larghezza una proporzione da 4/3 faceva una
       fotografia alta settecento pixel, e la prima scelta finiva sotto la
       piega — si apriva la pagina di un configuratore senza vedere niente da
       configurare. */
    /* Solo la proporzione, senza tetto all'altezza.
       `aspect-ratio: 16/10` **piu'** `max-height: 460px` sono due vincoli che
       si contraddicono: il tetto vince sull'altezza e la proporzione ricava la
       larghezza da li' — 460 x 1,6 = 736 px in una colonna da 950, con
       duecento pixel di vuoto a destra della fotografia. 16/9 tiene l'altezza
       bassa e riempie la colonna. */
    .st-product-layout .st-product__gallery-main {
        aspect-ratio: 16 / 9;
    }

    .st-product-layout .st-product__gallery-main img {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
    }

    /* La corsia dei passi arriva in fondo con il riquadro dell'aiuto
       appoggiato alla base, come nella tavola. */
}

/* ------------------------------------------------- il passo del configuratore */

/* Come nella tavola: una scheda bianca con un filo di bordo, non una lastra
   colorata. Il colore, nella pagina, ce l'hanno la fotografia e le opzioni —
   se ce l'ha anche il contenitore non si capisce piu' dove guardare. */
.st-panels .st-panel {
    padding: var(--st-space-5, 40px);
    background: #fff;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-lg, 14px);
}

@media (max-width: 767px) {
    .st-panels .st-panel {
        padding: var(--st-space-4, 24px);
    }
}

/* ======================================================= le scelte in pagina */

.st-panels {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-5, 40px);
}

/* Ogni gruppo di scelte e' una scheda con il suo numero.
   Il numero non e' decorazione: dice quante decisioni ci sono e a che punto
   sei, che e' l'unica cosa utile che faceva la colonna dei passi. */
.st-panel__title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.st-panel__n {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--st-copper);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Un gruppo gia' deciso si abbassa di tono: resta leggibile e modificabile,
   ma smette di chiedere attenzione come quelli ancora da fare. */
.st-panels .st-panel:has(input:checked) .st-panel__n,
.st-panels .st-panel:has(select:valid) .st-panel__n {
    background: var(--st-success, #477255);
}

@media (max-width: 999px) {
    .st-panels {
        gap: var(--st-space-4, 24px);
    }
}

/* ==================================================================== *
 * TELEFONO: PREZZO E AZIONE PRIMA DI TUTTO
 *
 * A 390 px la scheda prodotto mostrava la fotografia e basta: per sapere
 * quanto costa e cosa fare bisognava scorrere. Il motivo e' meccanico — la
 * colonna che a 1440 sta **accanto** alla galleria, a 390 finisce **sotto** —
 * e nessuno se n'era accorto perche' ogni correzione era stata verificata solo
 * a 1440.
 *
 * Su telefono l'ordine si rovescia: prima si legge **cosa e' e quanto costa**,
 * poi si guarda. Chi e' interessato scorre; chi non lo e' ha risparmiato dieci
 * secondi. E chi scorre trova comunque il prezzo, perche' la barra in fondo lo
 * porta con se'.
 * ==================================================================== */

@media (max-width: 1080px) {
  .st-product-layout .st-product__intro   { order: 1; }
  .st-product-layout .st-product__gallery { order: 2; }
  .st-product-layout .st-avvio            { order: 3; }
  .st-product-layout .st-panels           { order: 4; }

  /* Nell'intestazione resta l'essenziale: categoria, titolo, prezzo. Le
     pastiglie e l'intervallo di produzione scendono con il resto, dopo la
     fotografia — sono cose che si leggono dopo aver deciso di guardare. */
  .st-product-layout .st-product__range,
  .st-product-layout .st-product__badges { order: 5; }

  /* Su schermo stretto il titolo e il prezzo scendono di un gradino, non di
     un valore scelto a occhio: 1,5rem e 1,375rem davano 24 e 22 px, due
     misure che non esistono altrove nel sito. */
  .st-product-layout .st-product__title { font-size: var(--st-fs-h3); }
  .st-product-layout .st-product__price { font-size: var(--st-fs-lead); margin-bottom: 12px; }
}

/* --- la barra d'azione ------------------------------------------------ *
 *
 * Ancorata in fondo allo schermo, con il prezzo a sinistra e l'azione a
 * destra. Compare solo quando il pulsante vero e' uscito dalla vista: finche'
 * si vede quello, due pulsanti identici a otto centimetri di distanza sono
 * rumore.
 */

.st-azionebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--st-p-riga, #EAE4DC);
  box-shadow: 0 -6px 20px -12px rgba(35, 32, 29, .3);
}

.st-azionebar__prezzo {
  flex: 1 1 auto;
  min-width: 0;
  font: 500 1.0625rem/1.2 var(--st-font-body);
  font-variant-numeric: tabular-nums;
  color: var(--st-p-inchiostro, #23201D);
}

.st-azionebar__prezzo small {
  display: block;
  font-size: .6875rem;
  font-weight: 400;
  color: var(--st-p-grigio, #6F6A64);
}

.st-azionebar__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--st-r-campo, 8px);
  background: var(--st-p-rame, #B45A17);
  color: #fff;
  font: 600 .8125rem/1 var(--st-font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}

@media (max-width: 1080px) {
  .st-azionebar.is-visibile { display: flex; }
  /* Spazio in fondo alla pagina: senza, la barra copre l'ultima riga. */
  body:has(.st-azionebar.is-visibile) { padding-bottom: 76px; }
}

/* =======================================================================
 * TRE COLONNE: GALLERIA, DESCRIZIONE, ACQUISTO
 *
 * Erano due, e nella seconda stava tutto: categoria, titolo, prezzo,
 * descrizione, comandi. Chi e' gia' deciso cerca il prezzo e il pulsante,
 * chi non lo e' legge la descrizione — nella stessa colonna il primo deve
 * scorrere il secondo.
 * ===================================================================== */

/* La griglia sta su `__head` e non sul contenitore esterno, perche' `__head`
   e' esattamente cio' che deve stare a tre colonne: galleria, descrizione,
   acquisto. Sul contenitore esterno ci finivano dentro anche le linguette, i
   servizi e i correlati, che si spartivano le colonne rimaste e uscivano
   larghi una parola. */
@media (min-width: 992px) {
    .st-product__head {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.02fr) 316px;
        gap: clamp(24px, 2.6vw, 44px);
        align-items: start;
    }
}

/* Il riquadro d'acquisto: crema, raggio ampio, filetto sottile. E' l'unico
   elemento della pagina con un fondo proprio, e basta quello a dire che li'
   si fa una cosa diversa dal leggere. */
.st-product__acquisto {
    background: var(--st-p-crema, #FAF6F1);
    border: 1px solid var(--st-border, #E4DDD2);
    border-radius: var(--st-r-scheda, 20px);
    padding: clamp(18px, 2vw, 26px);
    position: sticky;
    top: calc(var(--st-header-h, 76px) + 20px);
}
.st-product__acquisto .st-product__price {
    margin: 0 0 14px;
    font-family: var(--st-font-display, Georgia, serif);
    font-size: var(--st-fs-h2);
    font-weight: 600;
    line-height: 1.1;
    color: var(--st-p-inchiostro, #15181B);
}
.st-product__acquisto .st-avvio {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
.st-product__acquisto .st-avvio__azioni { display: grid; gap: 10px; }
.st-product__acquisto .st-avvio__azioni > * { width: 100%; justify-content: center; }

/* Il blocco aiuto, in coda al riquadro e staccato da un filetto. */
.st-product__aiuto {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--st-border, #E4DDD2);
}
.st-product__aiuto-icona { color: var(--st-copper, #B65532); display: flex; }
.st-product__aiuto-testo strong {
    display: block;
    font-size: var(--st-fs-small); font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--st-p-inchiostro, #15181B);
}
.st-product__aiuto-testo > span { display: block; margin-top: 2px; font-size: var(--st-fs-micro); color: var(--st-muted, #7B766D); }
.st-product__aiuto-vie { margin: 8px 0 0; font-size: 13px; }
.st-product__aiuto-vie a { color: var(--st-copper-text, #B45431); text-decoration: none; }
.st-product__aiuto-vie a:hover { text-decoration: underline; text-underline-offset: 3px; }
.st-product__aiuto-vie > span { color: var(--st-border-strong, #CBBFAE); }

@media (max-width: 991px) {
    .st-product__acquisto {
        position: static;
        margin-top: 24px;
    }
}

/* Le quattro garanzie nella colonna descrittiva: icona, due righe, filetto
   verticale fra una e l'altra. Due per riga, perche' quattro in fila in una
   colonna da 380 px danno etichette di una parola per riga. */
.st-product__garanzie {
    /* UNA COLONNA, NON DUE
       Il commento qui sopra dice «due per riga, perche' quattro in fila in
       una colonna da 380 px danno etichette di una parola per riga». Era
       vero, ma la conclusione non regge piu': due colonne in 380 px ne danno
       170 a testa, meno l'icona restano 130, e «Prodotti di qualita'» a 14 px
       ne chiede 132. Andavano a capo il titolo **e** la nota, e ogni voce
       occupava tre righe. Reggeva a 10,5 px, cioe' sotto il minimo che il
       sito si e' dato. In colonna sola ogni voce ha 340 px. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 0;
    margin: 26px 0 0;
    padding: 26px 0 0;
    border-top: 1px solid var(--st-border, #E4DDD2);
    list-style: none;
}
.st-product__garanzie > li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    padding-inline: 0;
}
.st-product__garanzia-icona { color: var(--st-p-inchiostro, #15181B); opacity: .66; display: flex; }
.st-product__garanzia-testo strong {
    /* MAIUSCOLETTO NO, A QUESTA MISURA
       Il maiuscoletto spaziato regge una o due parole corte: «SUBTOTALE»,
       «PAGAMENTI ACCETTATI». Queste sono affermazioni di tre parole —
       «Prodotti di qualita'», «Ricevi e installa» — e in maiuscolo a 14 px
       chiedono il 35% di larghezza in piu' di quanto la loro colonna abbia:
       tre voci su quattro andavano a capo, sulla scheda anche a 1280.
       Finche' stavano a 10-11 px ci entravano, cioe' finche' erano sotto il
       minimo che il sito si e' dato. Scritte come si parla ci stanno, e sono
       affermazioni: e' anche il modo giusto di scriverle. */

    display: block;
    font-size: var(--st-fs-small); font-weight: 600; color: var(--st-p-inchiostro, #15181B); line-height: 1.35;
}
.st-product__garanzia-testo > span { display: block; margin-top: 2px; font-size: var(--st-fs-micro); line-height: 1.35; color: var(--st-muted, #7B766D); }
@media (max-width: 991px) {
    .st-product__garanzie { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .st-product__garanzie > li:nth-child(odd) { padding-left: 16px; border-left: 1px solid var(--st-border, #E4DDD2); }
    .st-product__garanzie > li:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
    .st-product__garanzie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-product__garanzie > li { padding-left: 0; border-left: 0; }
}

/* Sotto i 560 px anche due colonne sono strette: 170 px meno l'icona non
   bastano a «Prodotti di qualita'». Una sola, come nella colonna d'acquisto. */
@media (max-width: 559.98px) {
    .st-product__garanzie { grid-template-columns: minmax(0, 1fr); }
}