/**
 * Carrello e checkout secondo le tavole 5 e 6.
 *
 * WooCommerce resta il motore: sconti, imposte, spedizioni e gateway sono
 * suoi. Cambia cosa si vede. La tabella standard di WooCommerce e' pensata per
 * prodotti a magazzino — nome, prezzo, quantita' — e su un prodotto su misura
 * lascia fuori proprio le informazioni che contano: quali misure, quale
 * tessuto, quale comando.
 *
 * Su schermo stretto la tabella diventa una serie di schede. Una tabella a
 * sette colonne su 390 px non si legge: si scorre lateralmente, e nessuno
 * scorre lateralmente.
 */

/* ====================================================== carrello, tavola 5 */

/* La colonna di carrello e cassa e' definita una volta sola in `chrome.css`,
   con la formula di `.st-container`. Qui c'era una seconda dichiarazione. */

@media (min-width: 1024px) {
    /* 70/30 come nella tavola: le righe hanno bisogno di spazio, il riepilogo
       di restare sott'occhio.

       La griglia e' quella che Blocksy mette gia' su `.ct-woocommerce-cart-form`,
       che e' il contenitore vero di form e riepilogo. Averne aggiunta una
       nostra su `.woocommerce` faceva due griglie annidate: la tabella
       lavorava su 680 px con 340 di colonna vuota accanto. Si cambiano le
       proporzioni della sua invece di costruirne una seconda. */
    .woocommerce-cart .ct-woocommerce-cart-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--st-col-riepilogo, 420px);
        gap: var(--st-space-5, 40px);
        align-items: start;
    }
    /* `cart_totals`, non `cart-collaterals`: Blocksy non stampa il wrapper
       che WooCommerce userebbe, quindi la vecchia regola non agganciava
       niente e il riepilogo non e' mai stato appiccicato in alto. */
    .woocommerce-cart .cart_totals,
    .woocommerce-cart .cart-collaterals {
        position: sticky;
        top: 96px;
        width: 100%;
    }
}
.woocommerce-cart table.shop_table thead th {
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--st-border, #DED8D0);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--st-muted, #6F6B66);
}
.woocommerce-cart table.shop_table td {
    padding: 20px 12px;
    border-top: 0;
    border-bottom: 1px solid var(--st-border, #DED8D0);
    vertical-align: top;
}
.woocommerce-cart .product-thumbnail img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--st-radius-sm, 6px);
}
.woocommerce-cart .product-name a {
    font-weight: 600;
    color: var(--st-charcoal, #2F3236);
    text-decoration: none;
}
.woocommerce-cart .product-name a:hover { color: var(--st-copper, #AE4C0B); }

/* La configurazione: e' la parte che distingue una tenda su misura da un
   articolo a magazzino, e va letta senza sforzo. */
.woocommerce-cart .variation,
.woocommerce-checkout .variation {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    margin: 8px 0 0;
    font-size: .82rem;
    line-height: 1.5;
}
.woocommerce-cart .variation dt,
.woocommerce-checkout .variation dt {
    color: var(--st-muted, #6F6B66);
    font-weight: 400;
}
.woocommerce-cart .variation dd,
.woocommerce-checkout .variation dd {
    margin: 0;
    color: var(--st-text, #242424);
}
.woocommerce-cart .variation p, .woocommerce-checkout .variation p { margin: 0; }

.woocommerce-cart .quantity input[type="number"] {
    width: 76px;
    min-height: 44px;
    padding: 8px 10px;
    text-align: center;
    border: 1.5px solid var(--st-border-strong, #9D8B73);
    border-radius: var(--st-radius-sm, 6px);
}
.woocommerce-cart td.product-remove a.remove {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--st-muted, #6F6B66) !important;
    font-size: 20px;
    text-decoration: none;
}
.woocommerce-cart td.product-remove a.remove:hover {
    background: var(--st-ivory, #F7F4EF);
    color: var(--st-error, #A53A32) !important;
}

.woocommerce-cart .cart_totals {
    padding: 24px;
    background: var(--st-white, #fff);
    border: 1px solid var(--st-border, #DED8D0);
    border-radius: var(--st-radius, 10px);
    box-shadow: var(--st-shadow-sm, 0 1px 3px rgba(47, 50, 54, .07));
}
.woocommerce-cart .cart_totals h2 {
    margin: 0 0 16px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--st-muted, #6F6B66);
}
.woocommerce-cart .cart_totals table { border: 0; width: 100%; }
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--st-border, #DED8D0);
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
    border-bottom: 0;
    padding-top: 16px;
}
.woocommerce-cart .checkout-button {
    display: block;
    width: 100%;
    margin-top: 18px;
    text-align: center;
}
.woocommerce-cart .coupon {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding: 16px;
    background: var(--st-ivory, #F7F4EF);
    border-radius: var(--st-radius, 10px);
}
.woocommerce-cart .coupon input[type="text"] { flex: 1; min-height: 44px; }

/* Su schermo stretto ogni riga diventa una scheda. */
@media (max-width: 780px) {
    .woocommerce-cart table.shop_table thead { display: none; }
    .woocommerce-cart table.shop_table tr.cart_item {
        display: grid;
        grid-template-columns: 96px 1fr;
        gap: 4px 14px;
        padding: 18px 0;
        border-bottom: 1px solid var(--st-border, #DED8D0);
    }
    .woocommerce-cart table.shop_table tr.cart_item td {
        padding: 0;
        border: 0;
    }
    .woocommerce-cart .product-thumbnail { grid-row: 1 / span 2; }
    .woocommerce-cart .product-name { grid-column: 2; }
    .woocommerce-cart .product-price,
    .woocommerce-cart .product-quantity,
    .woocommerce-cart .product-subtotal,
    .woocommerce-cart .product-remove {
        grid-column: 2;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
    }
    .woocommerce-cart .product-price::before { content: "Prezzo"; }
    .woocommerce-cart .product-subtotal::before { content: "Totale"; }
    .woocommerce-cart .product-price::before,
    .woocommerce-cart .product-subtotal::before {
        font-size: .78rem;
        color: var(--st-muted, #6F6B66);
        min-width: 62px;
    }
}

/* ====================================================== checkout, tavola 6 */

/* I quattro passi stanno in `st-passi-acquisto`, piu' avanti in questo file.
   Qui prima c'era `.st-checkout-progress`: una versione precedente, rimasta
   senza il markup che la usava — trenta righe che nessuna pagina caricava. */

@media (min-width: 1024px) {
    .woocommerce-checkout form.checkout {
        display: grid;
        /* 420 e non 380: dentro ci sta il riepilogo di una tenda su misura, che
           non e' una riga di prodotto ma sei — larghezza, altezza, tessuto,
           colore, installazione, comando. A 380 la colonna del prezzo finiva
           oltre il bordo e il totale si leggeva a meta'. */
        grid-template-columns: minmax(0, 1fr) var(--st-col-riepilogo, 420px);
        gap: var(--st-space-5, 40px);
        align-items: start;
    }
    .woocommerce-checkout #customer_details { grid-column: 1; }
    .woocommerce-checkout h3#order_review_heading,
    .woocommerce-checkout #order_review,
    .woocommerce-checkout .st-checkout__fiducia {
        grid-column: 2;
    }
    .woocommerce-checkout #order_review {
        position: sticky;
        top: 96px;
    }
    .woocommerce-checkout h3#order_review_heading { position: static; }
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
    padding: 24px;
    margin-bottom: 20px;
    background: var(--st-white, #fff);
    border: 1px solid var(--st-border, #DED8D0);
    border-radius: var(--st-radius, 10px);
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3 {
    margin: 0 0 18px;
    font-size: 1.05rem;
}

/* L'etichetta si vede sempre. Un segnaposto usato come unica etichetta
   sparisce appena si comincia a scrivere, e chi torna indietro a controllare
   non sa piu' quale campo sta guardando. */
.woocommerce-checkout .form-row label {
    display: block;
    margin-bottom: 5px;
    font-size: .85rem;
    font-weight: 500;
    color: var(--st-charcoal, #2F3236);
}
.woocommerce-checkout .form-row .required {
    color: var(--st-error, #A53A32);
    text-decoration: none;
}
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
    border-color: var(--st-error, #A53A32);
    box-shadow: 0 0 0 3px rgba(165, 58, 50, .12);
}

.woocommerce-checkout #order_review {
    padding: 24px;
    background: var(--st-white, #fff);
    border: 1px solid var(--st-border, #DED8D0);
    border-radius: var(--st-radius, 10px);
    box-shadow: var(--st-shadow-sm, 0 1px 3px rgba(47, 50, 54, .07));
}
.woocommerce-checkout #order_review table.shop_table { border: 0; width: 100%; }
.woocommerce-checkout #order_review th,
.woocommerce-checkout #order_review td {
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--st-border, #DED8D0);
}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
    padding-top: 16px;
    border-bottom: 0;
}
.woocommerce-checkout .wc_payment_methods { list-style: none; margin: 0; padding: 0; }
.woocommerce-checkout .wc_payment_method {
    margin-bottom: 10px;
    padding: 14px 16px;
    border: 1.5px solid var(--st-border, #DED8D0);
    border-radius: var(--st-radius-sm, 6px);
}
.woocommerce-checkout .wc_payment_method label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}
.woocommerce-checkout #place_order {
    width: 100%;
    min-height: 52px;
    margin-top: 18px;
    font-size: 1rem;
}

@media (max-width: 1023px) {
    /* Il riepilogo scende sotto il modulo: su un telefono si compila prima e
       si controlla dopo. */
    .woocommerce-checkout #order_review { margin-top: 24px; }
}

/* ==========================================================================
   Accessibilita': i venticinque elementi che la misurazione ha trovato,
   corretti uno per uno invece che con una regola generale.

   Applicare `min-height: 44px` a ogni collegamento del sito avrebbe azzerato
   il conteggio e rovinato il testo: un link dentro una frase non e' un
   pulsante, e trasformarlo in un blocco alto quattro centimetri spezza la
   riga. La misura giusta dipende da cosa quell'elemento e'.
   ========================================================================== */

/* CONTROL_INTERACTIVE — caselle di scelta e consenso. Erano 13x13 e 1x1:
   il quadratino si preme, e a quella dimensione si preme male. */
.st-choice input[type="radio"],
.st-choice input[type="checkbox"],
.st-quote__consent input[type="checkbox"],
.woocommerce form .form-row input[type="checkbox"] {
    /* 24, non 22: la soglia e' 24, e fermarsi a 22 significa rifare la stessa
       misurazione fra un mese e ritrovare gli stessi quattro elementi. */
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    cursor: pointer;
}
/* La casella nascosta dentro una scheda-scelta non si preme: si preme la
   scheda. L'area utile e' l'etichetta, che e' grande. */
.st-choice input[type="radio"].st-visually-hidden,
.st-choice input[type="radio"][hidden] { width: 1px; height: 1px; }
.st-choice label, .st-quote__consent {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;
}

/* THEME_GENERATED_LINK — le briciole di pane. Erano alte 19 px. */
.st-breadcrumb a,
.st-breadcrumb span {

    
}
@media (pointer: coarse) { .st-breadcrumb a { min-height: 44px; } }

/* Il collegamento all'assistenza nella colonna dei passi: e' un invito
   all'azione, non una parola dentro una frase. */
.st-steps__help .st-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* INLINE_TEXT_LINK — «informativa privacy» dentro la frase del consenso.
   Non si ingrandisce il riquadro, si aumenta l'interlinea: cosi' il bersaglio
   cresce senza spezzare la frase. */
.st-quote__consent, .st-quote__consent label { line-height: 1.9; }
.st-quote__consent a { padding: 3px 0; }

/* TESTI PICCOLI — i metodi di pagamento nel footer erano a .72rem. La regola
   in `global.css` li portava a .78rem, ma `footer.css` si carica dopo e
   rimetteva il valore di prima: una correzione scritta e mai applicata. */
.st-footer__payment { font-size: 12.5px; }
.st-summary__eyebrow { font-size: var(--st-fs-micro); }

/* Le briciole di pane di WooCommerce e i residui del tema padre sulle pagine
   senza contenuto (autore, commenti): non appartengono a questo sito. */
.woocommerce-breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; }
.ct-meta-element-author, .meta-comments, .entry-meta { display: none; }

/* Il foglio del configuratore si carica dopo quello del tema e vinceva su
   queste regole. `!important` qui e' la scelta onesta: l'alternativa era
   gonfiare i selettori fino a superarlo, ottenendo lo stesso effetto con
   meno chiarezza su cosa stia succedendo. */
.st-quote__consent input[type="checkbox"],
.st-choice input[type="checkbox"],
.woocommerce form .form-row input[type="checkbox"],
.woocommerce-form__input-checkbox {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    min-height: 24px;
}

/* Il collegamento «informativa privacy» dentro la frase del consenso: 21 px,
   tre sotto la soglia. Non si trasforma in un blocco — spezzerebbe la frase —
   si allarga l'interlinea, che porta il bersaglio a 24 senza toccare il testo. */
.st-quote__consent a, .woocommerce-privacy-policy-link { display: inline-block; padding: 2px 0; }

/*
 * Il titolo principale di carrello, cassa e area cliente.
 *
 * Prima non c'era affatto: la pagina si apriva sul contenuto, senza dire dove
 * si fosse arrivati. Ha lo stesso peso visivo dei titoli di sezione del resto
 * del sito, perche' e' esattamente quello che e'.
 */
.st-page__title {
    font-family: var(--st-font-display);
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
    line-height: 1.15;
    /* Misurato: la barra di navigazione finisce a 173 px e il titolo cominciava
       a 173 — appoggiato al menu, senza un pixel di stacco. Ogni altra pagina
       del sito apre con l'aria della sezione di testa; qui non c'era nessuna
       sezione a darla, perche' questo titolo lo stampa un gancio dentro il
       contenuto. */
    margin: var(--st-space-6) 0 var(--st-space-6);
    color: var(--st-charcoal);
}

/*
 * Gli schermi vuoti: centrati, con aria misurata sopra e sotto invece del
 * vuoto involontario che restava fra l'avviso e il fondo pagina.
 */
.st-empty {
    max-width: 34rem;
    margin: var(--st-xxl) auto var(--st-space-6);
    text-align: center;
}
.st-empty__lead {
    font-family: var(--st-font-display);
    font-size: var(--st-fs-h3);
    color: var(--st-charcoal);
    margin: 0 0 var(--st-space-3);
}
/*
 * Il bottone deve restare toccabile: come collegamento in linea si schiacciava
 * a 23px di altezza, appena sotto la soglia dei 24 — che e' il modo piu' facile
 * di renderlo scomodo senza che si veda.
 */
.st-empty .st-button {
    /* La regola alzava il bersaglio a 44 px quando `.st-button` era un
       collegamento senza altezza propria e si schiacciava a 23. Da quando la
       classe prende la geometria dai token — 48 px — questa riga non alza
       piu' niente: **abbassa**, ed era l'unico punto del sito in cui un
       pulsante era piu' piccolo del canonico. Resta l'allineamento, che il
       contesto richiede davvero. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.st-empty__text {
    color: var(--st-muted);
    margin: 0 0 var(--st-space-6);
    line-height: 1.6;
}

/*
 * Il pulsante che mostra la password nasce 14×14: un bersaglio da centrare col
 * dito su un vetro. L'area cliccabile sale a 44px senza che l'icona cambi
 * dimensione — cresce lo spazio attorno, non il disegno.
 */
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
    width: 44px;
    height: 44px;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    background-position: center;
}

/*
 * Caselle e pulsanti di scelta della cassa.
 *
 * Nascono a 13-16px: sono i comandi con cui si accetta le condizioni e si
 * sceglie come pagare, e sono i piu' piccoli della pagina. La soglia che questo
 * progetto si e' dato e' 24px, e qui vale in modo particolare — sbagliare il
 * tocco sulla casella delle condizioni significa non poter concludere e non
 * capire perche'.
 */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"],
.woocommerce-account input[type="checkbox"],
.woocommerce-account input[type="radio"],
.woocommerce-cart input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    accent-color: var(--st-copper);
}

/* ==========================================================================
   Carrello e checkout — tavole 5 e 6
   ========================================================================== */

/* I quattro passi dell'acquisto.
   La linea che li unisce e' uno pseudo-elemento del `li`, non un bordo del
   contenitore: cosi' l'ultimo passo non ha la coda che finisce nel vuoto. */
.st-passi-acquisto {
    display: flex;
    align-items: flex-start;
    gap: 0;
    list-style: none;
    margin: 0 0 var(--st-space-6);
    padding: 0;
    counter-reset: passo;
}

.st-passo-acq {
    position: relative;
    flex: 1 1 0;
    text-align: center;
    min-width: 0;
}

.st-passo-acq > a,
.st-passo-acq > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.st-passo-acq > a:hover .st-passo-acq__testo,
.st-passo-acq > a:focus-visible .st-passo-acq__testo {
    color: var(--st-copper-text);
}

/* La linea verso il passo precedente */
.st-passo-acq:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 17px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--st-border);
}

.st-passo-acq.is-fatto::before,
.st-passo-acq.is-ora::before {
    background: var(--st-copper);
}

.st-passo-acq__n {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--st-border);
    background: #fff;
    color: var(--st-muted);
    font-weight: 700;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--st-transition), border-color var(--st-transition);
}

.st-passo-acq.is-fatto .st-passo-acq__n,
.st-passo-acq.is-ora .st-passo-acq__n {
    background: var(--st-copper);
    border-color: var(--st-copper);
    color: #fff;
}

.st-passo-acq__testo {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--st-muted);
    transition: color var(--st-transition);
}

.st-passo-acq.is-ora .st-passo-acq__testo {
    color: var(--st-charcoal);
}

/* Le rassicurazioni */
.st-rassicurazioni {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--st-space-3);
    list-style: none;
    margin: var(--st-space-5) 0 0;
    padding: 0;
}

.st-rassicurazioni li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: var(--st-space-3);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-ivory);
}

.st-rassicurazione__icona {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--st-copper-soft);
    color: var(--st-copper-text);
}

.st-rassicurazioni strong {
    display: block;
    font-size: 0.94rem;
    line-height: 1.3;
}

.st-rassicurazioni strong + span {
    display: block;
    margin-top: 3px;
    font-size: var(--st-fs-micro);
    color: var(--st-muted);
    line-height: 1.45;
}

/* Il riquadro dell'aiuto */
.st-aiuto-box {
    margin-top: var(--st-space-5);
    padding: var(--st-space-4);
    border: 1px solid var(--st-border);
    border-left: 3px solid var(--st-copper);
    border-radius: var(--st-radius);
    background: #fff;
}

.st-aiuto-box h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    font-size: 1.02rem;
}

.st-aiuto-box h2 svg {
    color: var(--st-copper-text);
}

.st-aiuto-box p {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: var(--st-muted);
    max-width: 60ch;
}

.st-aiuto-box ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--st-space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.st-aiuto-box li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: 0.92rem;
}

.st-aiuto-box li svg {
    color: var(--st-copper-text);
}

/* I loghi sotto i totali: piu' piccoli che nel pie' di pagina, perche' qui
   accompagnano il pulsante invece di chiudere la pagina. */
.st-loghi-pag {
    margin-top: var(--st-space-4);
}

.st-loghi-pag__eti {
    display: block;
    margin-bottom: 8px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--st-muted);
}

.st-checkout__fiducia {
    margin-top: var(--st-space-5);
}

/* `.st-carrello__aiuto` non esiste piu': il riquadro d'aiuto e' finito dentro
   `.st-carrello__sotto` quando l'ho spostato sotto le rassicurazioni. */
.st-carrello__sotto {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    /* Su schermo stretto i quattro passi non ci stanno con le parole: restano
       i numeri e la parola del passo corrente, che e' l'unica che serve. */
    .st-passo-acq:not(.is-ora) .st-passo-acq__testo {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Il riepilogo dell'ordine non deve sbordare.
   La tabella di WooCommerce lascia decidere la larghezza al contenuto: con un
   nome di prodotto lungo e sei righe di configurazione, la colonna del prezzo
   veniva spinta oltre il bordo del riquadro e il totale si leggeva a meta'.
   `table-layout: fixed` toglie quella decisione al contenuto. */
.woocommerce-checkout-review-order-table {
    table-layout: fixed;
    width: 100%;
}

.woocommerce-checkout-review-order-table th:first-child,
.woocommerce-checkout-review-order-table td:first-child {
    width: 62%;
}

.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
    /* Un codice prodotto senza spazi non deve allargare la colonna */
    overflow-wrap: anywhere;
}

.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* La configurazione, dentro il riepilogo: due colonne strette non ci stanno,
   quindi etichetta sopra e valore sotto. */
.woocommerce-checkout-review-order-table .variation {
    display: block;
    margin: 6px 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
}

.woocommerce-checkout-review-order-table .variation dt {
    float: none;
    clear: both;
    font-weight: 600;
    color: var(--st-muted);
}

.woocommerce-checkout-review-order-table .variation dd {
    margin: 0 0 4px;
}

/* Le sezioni del modulo che restano vuote non devono lasciare un riquadro
   bordato in mezzo alla pagina: WooCommerce stampa il contenitore della
   spedizione anche quando dentro non ci finisce niente. */
.woocommerce-checkout .woocommerce-shipping-fields:not(:has(*)),
.woocommerce-checkout .woocommerce-shipping-fields:has(> .shipping_address:empty):not(:has(#ship-to-different-address)) {
    display: none;
}

/* Blocksy incapsula il riepilogo in un `.ct-order-review` con 35 px di
   spaziatura per lato, e dentro c'e' gia' il nostro pannello con i suoi 24:
   sono due cornici concentriche che si mangiano 118 px dei 420 della colonna,
   e la tabella si ritrovava a lavorare su 296. La cornice la disegniamo noi,
   quindi quella esterna resta senza. */
.woocommerce-checkout .ct-order-review {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

/* La nota «(imposte incluse)» sotto al totale usciva dalla cella: va mandata
   a capo, non tenuta su una riga sola.
   (L'altro «sbordo» che il controllo segnalava era `(facoltativo)` dentro una
   `label.screen-reader-text` larga 1 px per costruzione: li' il figlio esce
   sempre, ed e' proprio come deve funzionare quella tecnica.) */
.woocommerce-checkout .includes_tax {
    white-space: normal;
    overflow-wrap: anywhere;
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--st-muted);
}

/* «Modifica» accanto al nome dell'articolo.
   Il filtro lo attacca in coda al titolo senza separatore, e si leggeva
   «...18464Modifica». Va staccato e va riconoscibile come collegamento: e' il
   modo per tornare al configuratore senza svuotare il carrello. */
.st-cart__edit {
    /* `block` e non `inline-block`: serve che vada a capo davvero. Con
       `inline-block` restava attaccato al nome — «...18464Modifica». */
    display: block;
    margin-top: 6px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--st-copper-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* I passi prendono la larghezza che hanno: stretti a 720 px le quattro
   parole si toccavano — «Spedizion?agament?Conferma». Le etichette stanno
   sotto ai numeri e hanno bisogno del loro spazio, non di stare vicine. */
/* La barra dei passi occupa la colonna, come tutto il resto della pagina.
   Aveva un tetto di 1000 px centrato: dentro una colonna di 1232 partiva da
   140 mentre il modulo partiva da 24, e i quattro passi sembravano un
   riquadro appoggiato sopra la pagina invece della sua intestazione. Il tetto
   era nato per non far toccare le quattro parole a 720 px di colonna; la
   colonna oggi ne misura 1232 e a 390 i passi si impilano piu' sotto. */
.st-passi-acquisto {
    max-width: none;
    margin-inline: 0;
}

.st-passo-acq__testo {
    padding-inline: 6px;
}

/* La tabella del carrello riempie la sua colonna. Senza, si dimensionava sul
   contenuto e lasciava mezzo schermo vuoto fra gli articoli e il riepilogo. */
.woocommerce-cart table.shop_table {
    width: 100%;
}

.woocommerce-cart .product-name {
    width: 55%;
}

/* La riga di configurazione il cui campo non ha etichetta.
   WooCommerce stampa i due punti dentro il proprio template — `<dt>nome:</dt>` —
   quindi con l'etichetta vuota resta un «:» sospeso sopra il valore. Non e' un
   dato mancante da riempire: quei due campi hanno l'etichetta vuota nella
   sorgente, e inventargliene una direbbe qualcosa che nessuno ha scritto. Si
   toglie il segno e il valore si prende la riga.
   La classe `variation-` senza suffisso e' proprio come WooCommerce marca una
   voce senza nome. */
.woocommerce-cart .variation dt[class="variation-"],
.woocommerce-checkout .variation dt[class="variation-"] {
    display: none;
}

.woocommerce-cart .variation dt[class="variation-"] + dd,
.woocommerce-checkout .variation dt[class="variation-"] + dd {
    grid-column: 1 / -1;
}

/* ======================================================================
 * IL RIEPILOGO DEL CARRELLO NON E' APPICCICATO SUL TELEFONO
 *
 * Il collaudo a 360 px ha trovato che il comando «Modifica» di una riga del
 * carrello era **coperto** dal pulsante «Procedi con l'ordine»: si toccava
 * «Modifica» e si andava alla cassa.
 *
 * La causa non e' nostra — la nostra regola `sticky` sta dentro
 * `@media (min-width: 1024px)` e a 360 non si applica — ma del tema padre, che
 * lo rende adesivo a ogni larghezza. Su desktop ha senso: il riepilogo sta in
 * una colonna stretta accanto alle righe e restare sott'occhio e' il suo
 * mestiere. Su un telefono quel riquadro e' alto 672 px in una finestra di
 * 780: appiccicato non «resta sott'occhio», galleggia sopra la merce.
 *
 * Sotto i 1024 torna nel flusso, sotto le righe, dove non copre niente.
 * ====================================================================== */
@media (max-width: 1023px) {
    .woocommerce-cart .cart_totals,
    .woocommerce-cart .cart-collaterals {
        position: static;
    }
}

/* ======================================================================
 * TUTTO SULLA STESSA COLONNA
 *
 * Misurato a 1280 px sulla cassa, prima di questo blocco: l'intestazione del
 * sito partiva da 24, il modulo da 20, la barra dei passi da 140 e gli avvisi
 * di WooCommerce da 265. Quattro ascisse diverse in una pagina sola — ed e'
 * esattamente cio' che si vede senza righello: niente sembra allineato a
 * niente, e la pagina dove si paga e' l'ultima in cui conviene sembrare
 * approssimativi.
 *
 * La colonna e' una sola, quella di `.st-container`, dichiarata in
 * `chrome.css`. Qui si tolgono i tetti che facevano deviare i singoli pezzi.
 * ==================================================================== */

/* Gli avvisi — «coupon applicato», «campo obbligatorio» — avevano un tetto di
   750 px centrato: comparivano in una striscia stretta che non si allineava a
   nulla. Sono a altezza zero finche' non c'e' niente da dire, quindi il
   difetto si vede solo nel momento peggiore: quando un ordine si e' fermato. */
body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper {
    max-width: none;
    width: auto;
    margin-inline: 0;
}

/* ----------------------------------------------------------------------
 * LA TABELLA DEL CARRELLO: LE COLONNE SE LE PRENDE IL NOME
 *
 * Misurato: la cella della miniatura era larga 275 px per una foto di 112, e
 * il nome del prodotto ne aveva altrettanti per dodici righe di
 * configurazione. Non era un margine sbagliato: era l'algoritmo di tabella
 * automatica che, avendo colonne senza larghezza dichiarata, distribuisce
 * l'avanzo in parti uguali. Con `width: 100%` sul nome e `1%` sulle altre,
 * l'avanzo va tutto dove serve leggere.
 * -------------------------------------------------------------------- */
/* Le larghezze delle colonne del carrello stanno in `chrome.css`, sul
   `colgroup`. Qui ne avevo scritte altre: sarebbe stato il quinto posto in cui
   la stessa tabella veniva descritta. */
.woocommerce-cart table.shop_table td.product-subtotal { white-space: nowrap; }

/* Il prezzo unitario sta sotto la lista di configurazione e ripete la stessa
   cifra del subtotale: con una tenda sola sono lo stesso numero scritto due
   volte, e si legge come un errore. L'etichetta (messa in `commercio.php`,
   non qui) dice quale dei due e'; questa regola le da' il tono di etichetta. */
.st-carrello__unitario {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--st-muted, #6F6B66);
}
.woocommerce-cart table.shop_table td.product-name > p.price {
    margin: 14px 0 0;
    font-size: .95rem;
}

/* Sul telefono la riga non e' piu' una tabella: Blocksy la ricompone in
   «[quantita'] x [prezzo] = [totale]», e li' il prezzo ha gia' il segno di
   moltiplicazione a dire cos'e'. L'etichetta non serve, e in quella riga
   stretta veniva schiacciata a una lettera per riga — quindici righe di
   «P R E Z Z O ...» in verticale in mezzo al carrello. */
@media (max-width: 780.98px) {
    .st-carrello__unitario { display: none; }

    /* Il campo del codice sconto ha `flex: 1 1 200px` per prendersi la riga
       accanto al bottone. Quando la riga diventa una colonna, quei 200 px
       smettono di essere una larghezza e diventano un'**altezza**: il campo
       usciva alto come mezzo schermo. */
    .woocommerce-cart-form .actions .coupon input[type="text"] { flex: 0 0 auto; }
}

/* ----------------------------------------------------------------------
 * LA RIGA DELLA SPEDIZIONE NEI TOTALI DEL CARRELLO
 *
 * WooCommerce da' a questa riga una cella sola con `colspan="2"`: non c'e'
 * l'intestazione a sinistra che hanno il subtotale e il totale, quindi
 * ereditava l'allineamento a destra delle celle degli importi e le sue
 * quattro righe — titolo, metodo, destinazione, «modifica indirizzo» —
 * finivano tutte schiacciate contro il bordo destro.
 * -------------------------------------------------------------------- */
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals > td {
    text-align: left;
    background: none;
}
.woocommerce-cart .cart_totals .ct-shipping-heading {
    margin-bottom: 8px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--st-muted, #6F6B66);
}
.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods {
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
    margin: 8px 0 0;
    font-size: .84rem;
    color: var(--st-muted, #6F6B66);
}

/* ----------------------------------------------------------------------
 * IL RIEPILOGO DELLA CASSA: LE CELLE PARTONO DALL'ALTO
 *
 * Misurato: la riga del prodotto e' alta 719 px — nome piu' dodici righe di
 * configurazione — e le celle erano centrate verticalmente. Il prezzo finiva
 * a meta' altezza, lontano dal nome a cui si riferisce e allineato a una riga
 * di configurazione qualsiasi, che sembrava il suo prezzo.
 * -------------------------------------------------------------------- */
.woocommerce-checkout-review-order-table tbody th,
.woocommerce-checkout-review-order-table tbody td { vertical-align: top; }

/* Il riquadro dei totali del carrello ha lo stesso spazio interno del
   riepilogo della cassa. Blocksy glielo assegna con una sua variabile
   (`--cart-totals-padding`, 20 px) e con la nostra stessa precisione: la
   nostra dichiarazione perdeva per ordine di caricamento, e i due pannelli
   gemelli respiravano in modo diverso. */
.woocommerce-cart .ct-woocommerce-cart-form .cart_totals { padding: 24px; }

/* Sul telefono Blocksy fa uscire la lista dei metodi di pagamento dal riquadro
   del riepilogo, per farla arrivare fino ai bordi: e' una scelta giusta, un
   elenco di scelte a tutta larghezza si tocca meglio. Lo fa pero' con
   `margin: -26px` su tutti e quattro i lati, misurato sul *suo* spazio interno
   di 26 px; il nostro e' di 24, quindi la lista sporgeva di due pixel oltre la
   scheda — e sopra e sotto si mangiava 26 px di respiro.
   Qui esce solo di lato, e della misura giusta. */
@media (max-width: 689.98px) {
    .woocommerce-checkout .woocommerce-checkout-payment {
        margin: 0 -24px;
    }
}

/* Le celle del riepilogo partono dall'alto: la regola generica poco sopra
   perdeva contro quella di Blocksy, che le centra. La riga del prodotto e'
   alta 719 px — nome piu' dodici righe di configurazione — e il prezzo finiva
   a meta' altezza, allineato a una riga di configurazione qualsiasi che
   sembrava allora il suo prezzo. */
.woocommerce-checkout .ct-order-review table.shop_table tbody th,
.woocommerce-checkout .ct-order-review table.shop_table tbody td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td {
    vertical-align: top;
}