/**
 * LE PAGINE D'ACQUISTO ENTRANO NEL SITO
 * =====================================
 *
 * COSA NON ANDAVA
 * ---------------
 * Non i margini: quelli erano stati misurati e allineati, e tornavano. Era la
 * lingua. Il resto del sito parla per campiture piene, carta calda, titoli
 * serif grandi e fotografie; carrello e cassa parlavano per **nove riquadri
 * bordati su bianco** — pagamento rapido, fatturazione, indirizzo diverso,
 * note, riepilogo, carta, Klarna, bonifico, rassicurazioni. Tutti con lo
 * stesso filetto da un pixel e lo stesso raggio, quindi nessuno piu'
 * importante di un altro.
 *
 * Una pagina fatta di scatole uguali non ha gerarchia: l'occhio non sa dove
 * andare e la legge tutta, o non la legge. E la home, due clic prima, non ha
 * **nemmeno una** scatola.
 *
 * LE TRE DECISIONI
 * ----------------
 * 1. **La carta.** Il fondo delle pagine d'acquisto diventa avorio, come il
 *    resto del sito. Il bianco resta solo dove si scrive — i campi — e dove
 *    sta la merce. Non serve piu' nessun filetto per staccare le cose: le
 *    stacca il colore, che e' come le stacca la home.
 *
 * 2. **Una scatola sola.** Il riepilogo dell'ordine e' l'unico pannello della
 *    pagina, ed e' giusto che lo sia: e' la cosa che si guarda mentre si
 *    decide se premere «paga». Tutto il resto — moduli, sezioni, metodi di
 *    pagamento — sta sulla carta, separato da filetti sottili e introdotto da
 *    un titolo serif. Otto scatole in meno.
 *
 * 3. **Il totale e' il momento.** Su ogni pagina di questo sito c'e' una riga
 *    serif grande che tiene insieme la schermata. Qui quella riga e' la cifra
 *    che si sta per pagare: non un numero in una tabella, ma il punto in cui
 *    l'occhio si ferma.
 *
 * PERCHE' UN FOGLIO NUOVO
 * -----------------------
 * Carrello e cassa erano descritti in cinque file diversi che si contendevano
 * le stesse regole — questo progetto ci ha gia' perso mezza giornata. Questo
 * si carica **per ultimo e solo su queste tre pagine**: a parita' di
 * precisione vince, quindi non serve rincorrere nessuno con `!important`, e
 * chi cerca «come sono fatte le pagine d'acquisto» ha un posto solo dove
 * guardare.
 */

/* ======================================================================
 * 1. LA CARTA
 * ==================================================================== */

body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
    background: var(--st-p-avorio, #F7F4EF);
}

/* Il titolo della pagina prende il respiro che ha su tutte le altre. */
body.woocommerce-cart .st-page__title,
body.woocommerce-checkout .st-page__title {
    margin-block: clamp(40px, 5vw, 72px) clamp(28px, 3vw, 40px);
    font-size: var(--st-fs-h1);
    font-weight: 400;
    letter-spacing: -.015em;
}

/* ======================================================================
 * 2. I QUATTRO PASSI
 *
 * Sono navigazione, non decorazione: si fanno leggeri e si tolgono di mezzo.
 * ==================================================================== */

body.woocommerce-cart .st-passi-acquisto,
body.woocommerce-checkout .st-passi-acquisto {
    margin-bottom: clamp(36px, 4vw, 56px);
    padding-bottom: clamp(24px, 3vw, 34px);
    border-bottom: 1px solid var(--st-p-riga, #EAE4DC);
}

body.woocommerce-cart .st-passo-acq__testo,
body.woocommerce-checkout .st-passo-acq__testo {
    font-size: var(--st-fs-micro);
    letter-spacing: .04em;
}

/* ======================================================================
 * 3. VIA LE SCATOLE DAL MODULO
 *
 * Fatturazione, spedizione e note erano tre schede bianche bordate una sotto
 * l'altra. Diventano tre sezioni sulla carta, separate da un filetto: la
 * stessa informazione, tre cornici in meno.
 * ==================================================================== */

body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout .st-rapido {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
    margin-top: clamp(30px, 3.4vw, 44px);
    padding-top: clamp(30px, 3.4vw, 44px);
    border-top: 1px solid var(--st-p-riga, #EAE4DC);
}

/* I titoli di sezione: serif, e della misura di un titolo. Erano serif ma
   grigi e alti quanto un'etichetta di campo, quindi si leggevano come una
   didascalia del modulo invece che come il suo indice. */
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-shipping-fields > h3,
body.woocommerce-checkout .woocommerce-additional-fields > h3,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout .st-rapido__titolo,
body.woocommerce-cart .cart_totals > h2 {
    margin: 0 0 clamp(18px, 2vw, 26px);
    font-family: var(--st-font-display, Georgia, serif);
    font-size: var(--st-fs-h3);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--st-p-inchiostro, #15181B);
}

/* ======================================================================
 * 4. I CAMPI
 *
 * Il bianco resta qui, ed e' l'unico posto della colonna dove ce n'e': un
 * campo bianco su carta si vede senza bisogno di un bordo che lo annunci.
 * ==================================================================== */

body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout form.checkout .select2-selection {
    background: #fff;
    border: 1px solid var(--st-p-riga, #EAE4DC);
    border-radius: 10px;
}

body.woocommerce-checkout .woocommerce form .form-row label {
    font-size: var(--st-fs-small);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--st-p-debole, #6F6B66);
}

/* ======================================================================
 * 5. IL PAGAMENTO RAPIDO
 *
 * Era la prima scatola della pagina, e la prima cosa che si vedeva era una
 * cornice. Adesso e' una riga di pulsanti sotto un titolo, chiusa da un
 * «oppure» che dice cosa sono: una scorciatoia, non la strada.
 * ==================================================================== */

body.woocommerce-checkout .st-rapido {
    margin-bottom: clamp(30px, 3.4vw, 44px);
    padding-bottom: clamp(30px, 3.4vw, 44px);
    border-bottom: 1px solid var(--st-p-riga, #EAE4DC);
}

/* ======================================================================
 * 6. IL RIEPILOGO: L'UNICO PANNELLO
 * ==================================================================== */

@media (min-width: 1024px) {
    body.woocommerce-checkout #order_review,
    body.woocommerce-cart .cart_totals {
        position: sticky;
        top: 96px;
    }
}

body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-cart .cart_totals {
    padding: clamp(26px, 2.6vw, 36px);
    background: var(--st-p-crema, #FAF6F1);
    border: 0;
    border-radius: var(--st-r-grande, 24px);
    box-shadow: none;
}

/* La tabella dentro il pannello non e' una tabella: e' un elenco. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
body.woocommerce-cart .cart_totals table thead {
    display: none;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-cart .cart_totals td,
body.woocommerce-cart .cart_totals th {
    padding: 12px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--st-p-riga, #EAE4DC);
}

/* Il nome della tenda: serif, come ogni nome di prodotto sul sito. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
    font-family: var(--st-font-display, Georgia, serif);
    font-size: var(--st-fs-lead);
    line-height: 1.3;
    color: var(--st-p-inchiostro, #15181B);
}

/* LA CONFIGURAZIONE, DA MURO A ELENCO
   Erano undici etichette maiuscole con il valore sotto: ventidue righe per
   una tenda, e la piu' importante — il prezzo — sepolta in mezzo. Etichetta e
   valore tornano sulla stessa riga, in corpo minore, con l'etichetta chiara e
   il valore scuro. Undici righe invece di ventidue, e si leggono. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .variation,
body.woocommerce-cart .variation {
    /* NON UNA GRIGLIA: DUE COLONNE QUI NON CI STANNO
       Provato: con `auto minmax(0,1fr)` la colonna delle etichette si prende
       171 px per stare dietro a «Configurazioni di azionamento:» e ne lascia
       37 ai valori. In un pannello largo 348 px non c'e' spazio per due
       colonne allineate. Etichetta e valore vanno **sulla stessa riga**, di
       seguito come una frase: «Larghezza: 120 cm». Una riga per voce, il
       nome chiaro e il dato scuro, e va a capo dove serve.

       Il `!important` che teneva in piedi la versione a una colonna e' stato
       tolto da `cart.css` insieme alla sua regola: qui non serve rincorrerlo. */
    display: block;
    margin: 10px 0 0;
    /* Il nome del prodotto qui sopra e' serif: senza questa riga la lista lo
       eredita, e undici righe di dati tecnici in Cormorant a 12 px non si
       leggono. Il serif e' per i nomi e per le cifre, non per gli elenchi. */
    font-family: var(--st-font-body, system-ui, sans-serif);
    font-size: var(--st-fs-micro);
    line-height: 1.45;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .variation dt,
body.woocommerce-cart .variation dt {
    display: inline;
    margin: 0 4px 0 0;
    padding: 0;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--st-p-debole, #8A837B);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .variation dd,
body.woocommerce-cart .variation dd {
    display: inline;
    margin: 0;
    padding: 0;
    color: var(--st-p-inchiostro, #15181B);
}

/* Ogni voce va a capo dopo il suo valore: sono dati distinti, non una frase
   sola. Il ritorno a capo si fa con uno pseudo-elemento invece che con
   `display: block` sul `dd`, se no torna sotto l'etichetta. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .variation dd::after,
body.woocommerce-cart .variation dd::after {
    content: '';
    display: block;
    height: 3px;
}

/* ======================================================================
 * 7. IL TOTALE E' IL MOMENTO
 * ==================================================================== */

body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td,
body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td {
    padding-top: 20px;
    border-bottom: 0;
    border-top: 1px solid var(--st-p-inchiostro, #15181B);
    vertical-align: baseline;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
body.woocommerce-cart .cart_totals .order-total th {
    /* «Totale» e' l'etichetta della cifra, non un titolo. A 17 px in serif
       nero pesava come un'intestazione di sezione e faceva concorrenza al
       numero che introduce; e nella stessa tabella «Spedizione» era 11,5 e
       «Subtotale» 15. Le tre righe si intitolano tutte allo stesso modo. */
    font-family: var(--st-font-body, system-ui, sans-serif);
    font-size: var(--st-fs-micro);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--st-p-debole, #8A837B);
}

body.woocommerce-checkout .order-total .woocommerce-Price-amount,
body.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
    display: block;
    font-family: var(--st-font-display, Georgia, serif);
    font-size: var(--st-fs-h2);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--st-p-inchiostro, #15181B);
}

body.woocommerce-checkout .order-total small,
body.woocommerce-cart .cart_totals .order-total small {
    display: block;
    margin-top: 6px;
    font-size: var(--st-fs-micro);
    color: var(--st-p-debole, #8A837B);
}

/* ======================================================================
 * 8. I METODI DI PAGAMENTO: UN ELENCO, NON TRE SCATOLE
 * ==================================================================== */

body.woocommerce-checkout #payment ul.payment_methods {
    margin: clamp(22px, 2.4vw, 30px) 0 0;
    padding: 0;
    border-top: 1px solid var(--st-p-riga, #EAE4DC);
}

body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method {
    margin: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--st-p-riga, #EAE4DC);
    border-radius: 0;
}

body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label {
    padding: 16px 0;
    font-size: var(--st-fs-ui);
    font-weight: 500;
}

/* Il metodo scelto si accende: fondo bianco a tutta riga, come una pagina che
   si apre sotto la voce scelta. Il resto resta sulla carta. */
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method .payment_box {
    margin: 0 0 16px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--st-p-riga, #EAE4DC);
    border-radius: 12px;
    font-size: var(--st-fs-small);
}

body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method .payment_box::before {
    display: none;
}

/* ======================================================================
 * 9. IL CARRELLO
 *
 * La tabella non e' piu' una scheda dentro una pagina bianca: e' la merce,
 * appoggiata sul bianco, con l'intestazione a tutta larghezza. Prima la
 * fascia dell'intestazione finiva a due terzi della scheda e il resto restava
 * vuoto: si vedeva che la tabella e il suo contenitore non erano d'accordo.
 * ==================================================================== */

body.woocommerce-cart .woocommerce-cart-form {
    padding: clamp(8px, 1.2vw, 16px) clamp(18px, 2vw, 26px) clamp(4px, 1vw, 12px);
    background: #fff;
    border: 0;
    border-radius: var(--st-r-grande, 24px);
    box-shadow: 0 1px 2px rgba(35, 32, 29, .04);
}

body.woocommerce-cart table.shop_table {
    background: none;
    border: 0;
    box-shadow: none;
}

body.woocommerce-cart table.shop_table thead th {
    padding: 16px 12px 12px;
    background: none;
    border-bottom: 1px solid var(--st-p-riga, #EAE4DC);
    font-size: var(--st-fs-micro);
    letter-spacing: .1em;
    color: var(--st-p-debole, #8A837B);
}

body.woocommerce-cart table.shop_table tbody td {
    background: none;
    border-bottom: 1px solid var(--st-p-riga, #EAE4DC);
}

/* Il nome della tenda nel carrello: serif, come nel riepilogo e nel catalogo. */
body.woocommerce-cart td.product-name > a {
    font-family: var(--st-font-display, Georgia, serif);
    font-size: var(--st-fs-lead);
    line-height: 1.3;
    color: var(--st-p-inchiostro, #15181B);
}

body.woocommerce-cart table.shop_table td.actions {
    border-bottom: 0;
    border-top: 1px solid var(--st-p-riga, #EAE4DC);
}

/* ======================================================================
 * 10. LE RASSICURAZIONI: UNA RIGA, NON QUATTRO SCHEDE
 *
 * Erano quattro riquadri con icona, cornice e fondo: la stessa forma delle
 * cose che si devono leggere, per quattro frasi che si devono solo sfiorare.
 * Diventano una riga sola, come le voci in cima all'intestazione del sito —
 * che sono esattamente la stessa promessa, scritta la' senza cornici.
 * ==================================================================== */

body.woocommerce-cart .st-rassicurazioni,
body.woocommerce-checkout .st-rassicurazioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px clamp(20px, 3vw, 44px);
    padding: clamp(22px, 2.6vw, 32px) 0;
    border-top: 1px solid var(--st-p-riga, #EAE4DC);
}

body.woocommerce-cart .st-rassicurazioni > *,
body.woocommerce-checkout .st-rassicurazioni > * {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: var(--st-fs-micro);
    color: var(--st-p-debole, #6F6B66);
}

/* Della coppia titolo + spiegazione resta il titolo. In una riga sola la
   spiegazione diventa rumore: sono quattro frasi che nessuno legge due volte,
   e in cima all'intestazione del sito le stesse promesse stanno gia' scritte
   senza spiegazione. Resta nel documento per chi usa la voce.

   Il bersaglio e' lo `span` **dentro** lo `span` del testo — la struttura e'
   `<li><span icona><span><strong>titolo</strong><span>spiegazione</span></span></li>`.
   Al primo tentativo avevo nascosto il contenitore invece del suo secondo
   figlio, e la riga era rimasta con quattro icone e nessuna parola. */
body.woocommerce-cart .st-rassicurazioni li > span > span,
body.woocommerce-checkout .st-rassicurazioni li > span > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

body.woocommerce-cart .st-rassicurazioni li strong,
body.woocommerce-checkout .st-rassicurazioni li strong {
    font-size: var(--st-fs-small);
    font-weight: 500;
    color: var(--st-p-inchiostro, #15181B);
}

/* L'icona non deve sparire con la regola qui sopra: e' il primo figlio. */
body.woocommerce-cart .st-rassicurazioni li > .st-rassicurazione__icona,
body.woocommerce-checkout .st-rassicurazioni li > .st-rassicurazione__icona {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    color: var(--st-copper, #AE4C0B);
}

/* ======================================================================
 * 11. SU SCHERMO STRETTO
 * ==================================================================== */

@media (max-width: 1023px) {
    body.woocommerce-checkout #order_review,
    body.woocommerce-cart .cart_totals {
        margin-top: clamp(30px, 4vw, 44px);
    }
}

@media (max-width: 620px) {
    body.woocommerce-cart .woocommerce-cart-form {
        padding-inline: 14px;
    }

    body.woocommerce-cart .st-rassicurazioni,
    body.woocommerce-checkout .st-rassicurazioni {
        justify-content: flex-start;
    }
}

/* ======================================================================
 * 12. TRE COSE VISTE SOLO DOPO AVER TOLTO LE SCATOLE
 *
 * Con nove cornici in pagina non si notavano. Con una sola, si vedono tutte.
 * ==================================================================== */

/* (a) LA TABELLA DEL RIEPILOGO AVEVA ANCORA LA SUA OMBRA
   Dentro il pannello crema si intravedeva un rettangolo piu' chiaro attorno
   alla merce: era l'ombra che `cart.css` da' a ogni `table.shop_table`, buona
   quando la tabella era una scheda a se' e ora solo una scheda dentro una
   scheda. Misurata: `rgba(21,24,27,.12) 0 4px…`. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* (b) IL VALORE ANDAVA A CAPO SOTTO LA SUA ETICHETTA
   `dt` e `dd` erano entrambi in linea, eppure finivano su due righe: dentro
   il `dd` WooCommerce mette un `<p>`, che e' un blocco e spezza la riga. Nel
   carrello era gia' corretto — la regola c'era, ma solo li'. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .variation dd p {
    display: inline;
    margin: 0;
}

/* (c) LE ETICHETTE VUOTE LASCIAVANO UN «:» SOSPESO
   Due campi della configurazione non hanno nome nella sorgente, e WooCommerce
   stampa i due punti dentro il proprio modello: restava una riga con un
   segno di interpunzione e niente altro. Nel carrello era gia' tolto. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .variation dt:empty,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .variation dt[class="variation-"] {
    display: none;
}

/* ======================================================================
 * 13. IL TOTALE PRENDE LA RIGA INTERA
 *
 * Misurato: l'etichetta si prendeva 216 px e alla cifra ne restavano 132. In
 * 132 px un numero in corpo 40 non ci sta: andava a capo, e la nota dell'IVA
 * gli finiva addosso su due righe. Il totale non e' una voce di tabella
 * accanto a un'etichetta — e' la conclusione della pagina. Etichetta sopra,
 * cifra sotto, tutta la larghezza del pannello.
 * ==================================================================== */

/* IL `width: 100%` NON BASTAVA, E SI VEDEVA
   Misurato mentre si sistemavano i corpi: la riga del totale era larga 171 px
   su 372 nel carrello e 219 su 353 nella cassa — la larghezza della **prima
   colonna**, non del pannello. Il filetto sopra «Totale» finiva a meta' strada
   e sembrava un errore di disegno.

   La ragione: un `th` in `display: block` dentro un `tr` resta figlio di una
   riga di tabella, e il browser gli costruisce attorno una cella anonima. Il
   `100%` si misura su quella cella, che l'algoritmo delle colonne ha gia'
   dimensionato. Perche' la riga prenda tutto, deve smettere di essere una riga
   anche lei: allora le due celle diventano blocchi dentro un blocco, e il
   `100%` e' finalmente la tabella. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr,
body.woocommerce-cart .cart_totals table,
body.woocommerce-cart .cart_totals tbody,
body.woocommerce-cart .cart_totals tfoot,
body.woocommerce-cart .cart_totals tr {
    display: block;
    width: 100%;
}

/* Le righe a due voci — nome e prezzo, etichetta e importo — tornano a due
   colonne con flex: e' quello che facevano da tabella, senza l'algoritmo
   delle colonne che decideva anche la larghezza del totale. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr:not(.order-total),
body.woocommerce-cart .cart_totals tr:not(.order-total) {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
}

/* Il filetto passa dalla cella alla riga. Da quando le celle sono elementi
   flex con uno spazio in mezzo, due filetti affiancati fanno vedere il vuoto
   che li separa: sotto «Subtotale» la linea si interrompeva 18 px prima
   dell'importo, e sembrava sottolineata solo la parola. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr:not(.order-total),
body.woocommerce-cart .cart_totals tr:not(.order-total) {
    border-bottom: 1px solid var(--st-p-riga, #EAE4DC);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tr:not(.order-total) > th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr:not(.order-total) > td,
body.woocommerce-cart .cart_totals tr:not(.order-total) > th,
body.woocommerce-cart .cart_totals tr:not(.order-total) > td {
    border-bottom: 0;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tr:not(.order-total) > th,
body.woocommerce-cart .cart_totals tr:not(.order-total) > th {
    flex: 1 1 auto;
    text-align: left;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tr:not(.order-total) > td,
body.woocommerce-cart .cart_totals tr:not(.order-total) > td {
    flex: 0 1 auto;
    text-align: right;
}

/* La riga della merce fa eccezione: il nome puo' essere lungo dieci parole e
   deve poter andare a capo, il prezzo no. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item > td.product-name {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

/* La riga della spedizione ha una sola cella, che si prende tutto. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > td,
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals > td {
    flex: 1 1 auto;
    text-align: left;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td,
body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td {
    display: block;
    width: 100%;
    text-align: left;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
body.woocommerce-cart .cart_totals .order-total th {
    padding-bottom: 2px;
    border-bottom: 0;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td,
body.woocommerce-cart .cart_totals .order-total td {
    padding-top: 0;
    border-top: 0;
}

/* La nota dell'IVA sotto il totale sta su una riga sola. Dentro c'e' un
   importo, e l'importo e' avvolto in uno `span` che altrove nel sito e'
   trattato come un blocco: «(inclusi» / «11,77 €» / «IVA 22%)» finiva su tre
   righe, con la cifra da sola in mezzo come se fosse un altro totale. */
body.woocommerce-checkout .order-total small,
body.woocommerce-cart .cart_totals .order-total small {
    line-height: 1.4;
}

body.woocommerce-checkout .order-total small .woocommerce-Price-amount,
body.woocommerce-checkout .order-total small .woocommerce-Price-currencySymbol,
body.woocommerce-cart .cart_totals .order-total small .woocommerce-Price-amount,
body.woocommerce-cart .cart_totals .order-total small .woocommerce-Price-currencySymbol {
    display: inline;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    white-space: nowrap;
}

/* La colonna fantasma nata dal `colspan="6"` della riga dei comandi: vedi
   `inc/commercio.php`. A zero smette di contendere l'avanzo al nome. */
body.woocommerce-cart table.shop_table col.st-col--fantasma { width: 0; }

/* ======================================================================
 * 14. UNA SCALA SOLA
 *
 * COSA E' STATO MISURATO
 * ----------------------
 * Contati i corpi di carattere davvero disegnati sullo schermo, escluso il
 * testo riservato ai lettori di schermo (`tools/sonda_tipografia.py`):
 * **ventitre' nel carrello, diciotto nella cassa**. Fra 10,9 e 17,6 px ce ne
 * stavano diciannove, cioe' mezzo pixel di passo fra l'uno e l'altro.
 *
 * Mezzo pixel non si legge come una differenza: si legge come un'esitazione.
 * Davanti a 12,5 / 13 / 13,1 / 13,4 / 14 / 14,4 / 14,7 / 15 / 15,2 l'occhio
 * non riesce a mettere in ordine niente, quindi smette di provarci e guarda
 * tutta la pagina allo stesso livello. E' esattamente la sensazione di
 * «non e' bilanciata»: non c'e' un errore grosso da nessuna parte, ce ne sono
 * venti piccoli che si annullano.
 *
 * Tre casi non erano affollati, erano **rovesciati**:
 * - il suggerimento sotto un campo («Solo se ti serve la fattura») era 16 px
 *   contro i 13 della sua etichetta: la spiegazione piu' grande della cosa
 *   che spiega;
 * - la nota di una garanzia (13,4) era piu' grande del suo titolo (13,1);
 * - nella stessa tabella dei totali le tre righe si intitolavano a 11,5 px
 *   («Spedizione»), 15 («Subtotale») e 17 («Totale»).
 *
 * LA SCALA C'ERA GIA'
 * -------------------
 * Non c'era da inventarla. `tokens.css` la definisce da tempo — nove gradini,
 * una quinta maggiore addolcita — e si chiude con
 * `--st-fs-micro: .8125rem; /` + `* 13 — topbar, note; sotto non si scende *` + `/`.
 * Sotto i 13 px, in queste due pagine, di misure ce n'erano sette.
 *
 * Su settantasette dichiarazioni di corpo nei quattro fogli che vestono le
 * pagine d'acquisto, **due** usavano un gradino della scala. Le altre
 * settantacinque erano numeri decisi sul posto — questo foglio compreso: le
 * intestazioni di colonna a 10,9 px le avevo scritte io, tre settimane fa,
 * mentre in altri tre fogli la stessa cella era gia' descritta a 0,8rem,
 * 0,72rem e 13 px.
 *
 * Qui sotto ogni testo che arriva dagli altri fogli torna su un gradino.
 * Restano otto misure invece di ventitre', e sono le stesse del resto del
 * sito. Quello che prima distingueva un livello dall'altro con mezzo pixel
 * adesso lo distingue con il peso, il colore e la spaziatura — che a corpo
 * piccolo e' l'unica cosa che funziona davvero.
 * ==================================================================== */

/* (a) LE RIGHE DEL RIEPILOGO SI INTITOLANO TUTTE ALLO STESSO MODO
   Subtotale, Spedizione e Totale sono la stessa cosa — il nome di una riga —
   e avevano tre corpi, due famiglie e tre pesi. Diventano un occhiello solo,
   e la differenza fra le righe la fa il valore, che e' quello che si legge. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .ct-shipping-heading,
body.woocommerce-cart .cart_totals tbody th,
body.woocommerce-cart .cart_totals .ct-shipping-heading {
    font-family: var(--st-font-body, system-ui, sans-serif);
    font-size: var(--st-fs-micro);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--st-p-debole, #8A837B);
}

/* Il valore di una riga sta sopra la sua etichetta, non sotto: era 14,4 nella
   cassa e 15 nel carrello per la stessa cifra. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td label,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal td,
body.woocommerce-cart .cart_totals tbody td,
body.woocommerce-cart .cart_totals tbody td label,
body.woocommerce-cart td.product-subtotal,
body.woocommerce-cart td.product-price {
    font-size: var(--st-fs-ui);
    line-height: 1.5;
}

/* Il prezzo della riga di merce nel riepilogo della cassa. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total {
    font-size: var(--st-fs-ui);
    line-height: 1.5;
}

/* La destinazione della spedizione e il collegamento per cambiarla sono una
   nota e un comando: la nota scende a nota, il comando resta un comando. */
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
body.woocommerce-checkout .woocommerce-shipping-destination {
    font-size: var(--st-fs-micro);
    line-height: 1.5;
}

/* La nota dell'IVA sotto ogni prezzo: era in grassetto a 11,8 px, cioe' il
   testo piu' piccolo e piu' pesante della pagina per la cosa meno importante
   che ci sta scritta. */
body.woocommerce-cart small.includes_tax,
body.woocommerce-checkout small.includes_tax {
    font-size: var(--st-fs-micro);
    font-weight: 400;
    color: var(--st-p-debole, #8A837B);
}

/* (b) IL SUGGERIMENTO NON PUO' ESSERE PIU' GRANDE DELLA SUA ETICHETTA
   Era 16 px sotto un'etichetta da 13: chi guardava la colonna leggeva prima
   «Solo se ti serve la fattura» e poi cercava a quale campo appartenesse.
   Adesso l'etichetta e' 14 e la spiegazione 13 in grigio, che e' l'ordine in
   cui vanno lette. */
body.woocommerce-checkout .woocommerce form .form-row span.description,
body.woocommerce-checkout .woocommerce form .form-row .description {
    font-size: var(--st-fs-micro);
    line-height: 1.5;
    color: var(--st-p-debole, #8A837B);
}

/* L'accettazione delle condizioni e' un'etichetta di campo come le altre. */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text,
body.woocommerce-checkout .woocommerce-privacy-policy-text p {
    font-size: var(--st-fs-small);
    line-height: 1.55;
}

/* L'avviso dell'ambiente di prova e quello della carta di prova non sono
   contenuto del negozio: spariranno al lancio, e fino ad allora stanno al
   corpo delle note. */
body.woocommerce-cart .st-staging-notice,
body.woocommerce-checkout .st-staging-notice,
body.woocommerce-checkout p.testmode-info {
    font-size: var(--st-fs-micro);
    line-height: 1.6;
}

/* La spiegazione del pagamento rapido invece si deve leggere: e' la ragione
   per cui uno dovrebbe usarlo. */
body.woocommerce-checkout .st-rapido__nota {
    font-size: var(--st-fs-small);
    line-height: 1.55;
}

/* «— OPPURE —» separa due strade, non ne racconta nessuna. */
body.woocommerce-checkout .st-rapido + p,
body.woocommerce-checkout .st-rapido__oppure {
    font-size: var(--st-fs-micro);
    letter-spacing: .12em;
    color: var(--st-p-debole, #8A837B);
}

/* (c) I COMANDI
   Bottoni e campi avevano cinque corpi fra 12,6 e 16 px, e l'interlinea dei
   bottoni era pari al corpo — per questo sembravano schiacciati. Il campo
   della quantita' stava a 12,6: il piu' piccolo della pagina, per l'unico
   numero che si puo' cambiare. Sedici px sui campi non e' un capriccio, e'
   la soglia sotto la quale iOS ingrandisce la pagina appena ci si entra. */
body.woocommerce-cart .woocommerce a.button,
body.woocommerce-cart .woocommerce button.button,
body.woocommerce-cart .woocommerce input.button,
body.woocommerce-checkout .woocommerce button.button,
body.woocommerce-checkout #place_order {
    font-size: var(--st-fs-ui);
    line-height: 1.25;
}

body.woocommerce-cart .quantity input.qty,
body.woocommerce-cart .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout form.checkout .select2-selection__rendered {
    font-size: var(--st-fs-body);
}

/* «Modifica» accanto alla tenda nel carrello era in serif a 13 px: il serif
   qui e' per i nomi e per le cifre, e un comando non e' ne' l'uno ne' l'altra. */
body.woocommerce-cart a.st-cart__edit {
    font-family: var(--st-font-body, system-ui, sans-serif);
    font-size: var(--st-fs-micro);
    font-weight: 600;
}

/* Il prezzo unitario e' un'annotazione sotto il prezzo di riga. */
body.woocommerce-cart .st-carrello__unitario {
    font-size: var(--st-fs-micro);
}

/* (d) LE FASCE IN FONDO
   Occhiello dei loghi, garanzie, riquadro d'aiuto e blocco «un'altra
   finestra?»: quattro blocchi indipendenti, ognuno con il suo corpo deciso
   quando e' stato scritto. Erano 12,2 / 13,1 / 13,4 / 14 / 14,4 / 14,7 /
   16,3 / 17,6 px. */
body.woocommerce-cart .st-loghi-pag__eti,
body.woocommerce-checkout .st-loghi-pag__eti {
    font-size: var(--st-fs-micro);
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--st-p-debole, #8A837B);
}

body.woocommerce-cart .st-loghi-pag .st-payments__item,
body.woocommerce-checkout .st-loghi-pag .st-payments__item {
    font-size: var(--st-fs-micro);
}

/* Il riquadro d'aiuto chiude la pagina: il suo titolo e' un titolo piccolo,
   non un'intestazione di sezione mancata a 16,3 px in semigrassetto. */
body.woocommerce-cart .st-aiuto-box h2,
body.woocommerce-checkout .st-aiuto-box h2 {
    font-family: var(--st-font-display, Georgia, serif);
    font-size: var(--st-fs-lead);
    font-weight: 400;
    line-height: 1.3;
}

body.woocommerce-cart .st-aiuto-box p,
body.woocommerce-checkout .st-aiuto-box p {
    font-size: var(--st-fs-small);
    line-height: 1.6;
}

body.woocommerce-cart .st-aiuto-box a,
body.woocommerce-checkout .st-aiuto-box a {
    font-size: var(--st-fs-ui);
    font-weight: 600;
}

/* «Un'altra finestra?» apre una sezione vera, con dentro tre prodotti: sta
   sul gradino dei titoli di sezione, come «Totale carrello» che le sta
   accanto e che era il doppio piu' grande. */
body.woocommerce-cart .st-carrello__ancora h2 {
    font-size: var(--st-fs-h3);
    font-weight: 400;
    line-height: 1.2;
}

body.woocommerce-cart .st-carrello__ancora-sotto {
    font-size: var(--st-fs-small);
    line-height: 1.6;
}

body.woocommerce-cart .st-carrello__ancora strong {
    font-size: var(--st-fs-small);
    font-weight: 600;
}

body.woocommerce-cart .st-carrello__ancora li span {
    font-size: var(--st-fs-micro);
    color: var(--st-p-debole, #8A837B);
}

/* Il prezzo unitario accanto al nome nel carrello arriva dal foglio del
   catalogo, dove `p.price` e' il prezzo di una scheda prodotto: qui e'
   l'annotazione «Prezzo unitario 65,28 €» e vale quanto le altre cifre. */
body.woocommerce-cart td.product-name p.price,
body.woocommerce-cart td.product-name .woocommerce-Price-amount {
    font-size: var(--st-fs-ui);
}

/* ======================================================================
 * 15. IL RIEPILOGO SU SCHERMO STRETTO
 *
 * Visto misurando a 390 px: il nome della tenda stava in una colonna larga
 * 106 px e l'elenco della configurazione in una da 94 accanto — «Tende a
 * Rullo con tessuto Filtran / te "Colo / rtex", 30 / Colora / zioni», una
 * parola spezzata per riga.
 *
 * La causa e' una regola giusta applicata al posto sbagliato: sotto i 620 px
 * `account.css` rende ogni cella di `table.shop_table` un contenitore flex,
 * che e' il modo consueto di impilare una tabella mettendo l'etichetta a
 * sinistra e il valore a destra. Funziona per la tabella degli ordini
 * dell'area clienti, dove ogni cella contiene un dato corto. Qui dentro una
 * cella ci sono un nome di dieci parole e una lista di dodici voci, e messi
 * in fila diventano due colonne strettissime.
 *
 * Il riepilogo su schermo stretto e' un elenco che scorre: le celle tornano
 * blocchi, e le due colonne — merce e prezzo — le tiene gia' la riga.
 * ==================================================================== */

@media (max-width: 620px) {
    body.woocommerce-checkout .woocommerce-checkout-review-order-table td,
    body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
    body.woocommerce-cart .cart_totals td,
    body.woocommerce-cart .cart_totals th {
        display: block;
    }
}

/* ======================================================================
 * 16. LA CONFERMA PARLA COME LE DUE PAGINE PRIMA
 *
 * Questa pagina non aveva il problema delle altre — sei corpi, non ventitre'.
 * Aveva l'altro: **diceva le stesse cose in un altro modo**. La stessa
 * configurazione che nel carrello e nella cassa e' un elenco a 13 px con
 * l'etichetta chiara e il dato scuro, qui era a 15 px con l'etichetta in
 * grassetto nero e il dato in tondo — l'esatto contrario, sulle stesse dodici
 * righe, due clic dopo. E i titoli di sezione erano 18 px in semigrassetto
 * dove nelle altre due sono 23 in tondo.
 *
 * Chi arriva qui ha appena guardato quelle due pagine. Se la stessa lista
 * cambia aspetto fra la cassa e la conferma, la lettura ricomincia da capo
 * proprio nel momento in cui serve solo un controllo.
 * ==================================================================== */

/* Il titolo della conferma e' il titolo di una pagina, come «Carrello» e
   «Pagamento»: era l'unico corpo fuori scala rimasto nelle tre pagine. */
body.woocommerce-order-received .st-conferma__titolo {
    font-size: var(--st-fs-h1);
    font-weight: 400;
}

body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title,
body.woocommerce-order-received .st-conferma__poi-titolo {
    font-size: var(--st-fs-h3);
    font-weight: 400;
    line-height: 1.2;
}

/* L'elenco della configurazione, uguale a quello del carrello e della cassa:
   nome della voce chiaro, dato scuro, sulla stessa riga. */
body.woocommerce-order-received .wc-item-meta {
    font-size: var(--st-fs-micro);
    line-height: 1.45;
}

body.woocommerce-order-received .wc-item-meta .wc-item-meta-label {
    font-weight: 400;
    color: var(--st-p-debole, #8A837B);
}

/* Il `font-size` va ripetuto sul valore: il corpo messo sull'elenco non lo
   raggiunge, perche' il `p` dentro la voce ne ha uno suo che arriva da un
   altro foglio. Restava il dato a 15 px sotto un nome a 13 — la stessa
   inversione tolta dalla cassa, al contrario. */
body.woocommerce-order-received .wc-item-meta li,
body.woocommerce-order-received .wc-item-meta p {
    font-size: var(--st-fs-micro);
    color: var(--st-p-inchiostro, #15181B);
}

/* Le quattro caselle in cima: «Numero ordine» e' il nome del dato, «1905» e'
   il dato. Erano lo stesso corpo, distinti solo dal grassetto. */
body.woocommerce-order-received .woocommerce-order-overview > li {
    font-size: var(--st-fs-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--st-p-debole, #8A837B);
}

body.woocommerce-order-received .woocommerce-order-overview > li strong {
    display: block;
    margin-top: 4px;
    font-size: var(--st-fs-ui);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--st-p-inchiostro, #15181B);
}