/** Carrello e riepilogo. */

.woocommerce-cart .st-configurator { display: none; }

/* La tabella tiene il suo filetto, al contrario delle schede di catalogo: qui
   il perimetro non e' decorazione, e' cio' che dice dove finisce l'elenco di
   quello che si sta per pagare. Si ammorbidisce il colore e si aggiunge
   l'ombra bassa, cosi' e' della stessa famiglia del resto senza perdere il
   bordo. */
.woocommerce table.shop_table {
    border: 1px solid var(--st-p-riga);
    border-radius: var(--st-r-scheda, 20px);
    border-collapse: separate;
    overflow: hidden;
    box-shadow: var(--st-ombra-scheda);
}
.woocommerce table.shop_table th {
    background: var(--st-ivory);
    font-family: var(--st-font-body);
    font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--st-muted);
}
.woocommerce-cart-form__cart-item .variation,
.woocommerce-cart-form__cart-item dl.variation {
    margin: 8px 0 0; font-size: .82rem; line-height: 1.6; color: var(--st-muted);
}
.woocommerce-cart-form__cart-item dl.variation dt { font-weight: 500; }
.woocommerce-cart-form__cart-item dl.variation dd { margin: 0 0 4px; }

.cart_totals h2 { font-size: var(--st-fs-h3); }
.woocommerce .cart-collaterals .cart_totals table { border-radius: var(--st-radius); }

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button {
    min-height: 48px;
    padding: 12px 26px;
    border-radius: var(--st-radius-sm);
    background: var(--st-copper);
    color: #fff;
    font-family: var(--st-font-body);
    font-weight: 600;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--st-copper-dark); color: #fff; }

/* Il nome del prodotto ha bisogno di spazio: senza vincoli la miniatura si
   prende meta' riga e il titolo va a capo a ogni parola. Si limita la sola
   immagine e si lascia che la tabella distribuisca il resto da se': imporre
   larghezze fisse alle colonne faceva traboccare la tabella sul riepilogo. */
/* Il carrello ereditava la larghezza di un articolo di testo (750px): dentro
   quello spazio, tolte miniatura, quantita' e importi, al nome del prodotto ne
   restavano poco piu' di cento e andava a capo a ogni parola. Una tabella non e'
   un articolo: qui serve tutta la larghezza disponibile. */
/* La larghezza del carrello e della cassa sta in `chrome.css`, in un blocco
   solo. Qui c'era un terzo tetto — 1440 px — che perdeva comunque per
   precisione: tre fogli che descrivevano la stessa colonna con tre numeri
   diversi (1240, 1336, 1440), e vinceva quello con l'`!important`. Chi
   leggeva il codice trovava tre risposte e nessuna era quella vera. */

/* Blocksy avvolge la miniatura in un contenitore che impone il rapporto di
   forma: e' quello che va dimensionato. Agire sull'immagine non basta, perche'
   dentro quel contenitore e' posizionata in assoluto e sparirebbe. */
.woocommerce table.shop_table td.product-thumbnail { width: 100px; }
.woocommerce table.shop_table td.product-thumbnail .ct-media-container,
.woocommerce table.shop_table td.product-thumbnail img {
    width: 84px;
    max-width: 84px;
    border-radius: var(--st-radius, 10px);
    overflow: hidden;
}
.woocommerce table.shop_table td.product-subtotal,
.woocommerce table.shop_table td.product-price { white-space: nowrap; }

/* =======================================================================
 * IL CARRELLO
 *
 * Non e' fotografato in nessuna tavola, quindi prende la grammatica della
 * cassa: e' la pagina immediatamente precedente, e due pagine consecutive
 * con due grammatiche diverse sembrano due siti.
 * ===================================================================== */

.woocommerce-cart .cart_totals h2,
.woocommerce-cart .cart-collaterals h2 {
    font-family: var(--st-font-display, Georgia, serif);
    font-size: clamp(1.2rem, 1.7vw, 1.45rem);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--st-p-inchiostro, #15181B);
}

/* Il nome della tenda nella riga: serif, come nella griglia di catalogo e
   nella scheda. E' lo stesso oggetto, e va chiamato allo stesso modo. */
.woocommerce-cart .product-name > a {
    font-family: var(--st-font-display, Georgia, serif);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--st-p-inchiostro, #15181B);
    text-decoration: none;
}

/* NIENTE SCHEDA ATTORNO A UNA SCHEDA
   Avevo dato a `.cart_totals` fondo, cornice e spaziatura: ma quel riquadro
   una cornice ce l'aveva gia', e la mia gliene ha messa una seconda intorno
   restringendo lo spazio interno. La tabella dentro non si e' ristretta con
   lui, e l'importo del totale finiva tagliato sul bordo destro.
   Qui resta solo cio' che mancava davvero: il peso della cifra. */
.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
    font-family: var(--st-font-display, Georgia, serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--st-p-inchiostro, #15181B);
}

/* =======================================================================
 * GLI IMPORTI NON SI TAGLIANO PIU'
 *
 * `table.shop_table` ha `overflow: hidden` per tenere gli angoli tondi. Ma
 * una tabella si allarga per stare dietro al suo contenuto, e quando il testo
 * di una variante — «Cover e Coprivite in Plastica, Staffa in Metallo» —
 * allarga la prima colonna, la colonna degli importi finisce oltre il bordo e
 * `overflow: hidden` la taglia. In silenzio: nessun errore, solo un totale che
 * non si legge.
 *
 * Si risolve dove nasce, cioe' lasciando che il testo lungo vada a capo,
 * invece che alzando il tappeto sull'importo.
 * ===================================================================== */

.woocommerce table.shop_table { table-layout: fixed; width: 100%; }

/* La prima colonna cede: e' quella che puo' andare a capo. */
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { min-width: 0; overflow-wrap: anywhere; }

/* Le colonne delle cifre no: un importo spezzato a meta' non e' un importo.
   Restano su una riga e si tengono la larghezza che serve. */
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal,
.woocommerce table.shop_table .amount,
.woocommerce table.shop_table .woocommerce-Price-amount {
    white-space: nowrap;
    overflow-wrap: normal;
}
.woocommerce table.shop_table td.product-remove { width: 48px; }
.woocommerce table.shop_table td.product-thumbnail { width: 110px; }

/* Nel riepilogo dei totali l'etichetta prende cio' che le serve e l'importo
   sta a destra: due colonne, non una griglia che si contende lo spazio. */
.cart_totals table.shop_table,
.woocommerce-checkout-review-order-table { table-layout: auto; }
.cart_totals table.shop_table th,
.woocommerce-checkout-review-order-table tfoot th { width: 46%; text-align: left; }
/* A capo si', ma non dentro la cifra. La riga del totale non contiene solo
   l'importo: contiene anche «(inclusi 9,20 € di IVA)», che e' una frase e su
   una colonna da 172 px deve poter andare a capo. Il `nowrap` resta dove
   serve davvero — sul numero — perche' un importo spezzato a meta' non e' un
   importo. */
.cart_totals table.shop_table td,
.woocommerce-checkout-review-order-table tfoot td { text-align: right; white-space: normal; }
.cart_totals table.shop_table td .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table tfoot td .woocommerce-Price-amount { white-space: nowrap; }

/* =======================================================================
   CARRELLO E CASSA — RIORDINO
   ======================================================================= */

/*
 * IL CAMPO CARTA USCIVA DAL SUO RIQUADRO
 *
 * Misurato: l'input di Stripe e' largo 368 px dentro un contenitore che ne
 * regge 328. Quaranta pixel fuori, proprio sul campo dove si scrive il numero
 * della carta — il punto in cui un difetto grafico si legge come «questo sito
 * non e' a posto» e la mano si ferma.
 *
 * La causa e' una larghezza fissa che il tema di base mette su `.input-text`
 * senza `box-sizing`: il riempimento si somma invece di stare dentro.
 */
#payment .wc-upe-form input.input-text,
#payment .wc-upe-form .input-text,
#payment .payment_box input.input-text,
#payment .wc-stripe-upe-element,
#payment .wc-stripe-elements-field {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#payment .payment_box { overflow: hidden; }

/*
 * IL CESTINO SPORGEVA DALLA TABELLA
 *
 * Nove pixel: poco, ma bastano a far sembrare storta l'unica colonna con un
 * bordo visibile. E' un bersaglio da toccare, quindi non si rimpicciolisce
 * sotto i 44 px: si toglie il margine che lo spingeva fuori.
 */
/* La cella del cestino aveva 18 px di riempimento per lato: su una colonna
   larga 52 restavano 16 px utili per un bersaglio che ne vuole 40, e
   l'eccedenza usciva dalla tabella. Si stringe il riempimento e si allarga la
   colonna quel tanto che basta. */
.woocommerce table.shop_table.woocommerce-cart-form__contents td.product-remove,
.woocommerce-cart-form td.product-remove {
    width: 60px;
    text-align: center;
    padding-inline: 8px !important;
}

/* Il margine destro negativo arriva dal foglio WooCommerce del tema di base —
   `margin-right: -28px`, misurato — e serviva a far sporgere il cestino su una
   tabella che li' non ha bordo. Qui il bordo c'e', e il risultato erano nove
   pixel di icona fuori dal riquadro. Si azzera in modo esplicito: `margin: 0`
   da solo perdeva contro la regola d'origine. */
.woocommerce table.shop_table.woocommerce-cart-form__contents td.product-remove a.remove,
.woocommerce-cart-form td.product-remove a.remove {
    width: 40px;
    height: 40px;
    margin: 0 auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/*
 * IL RIEPILOGO SEGUE CHI COMPILA
 *
 * Alla cassa la colonna di destra e' alta il doppio di quella di sinistra: il
 * modulo finiva a meta' pagina e sotto restavano duemila pixel di bianco,
 * mentre il totale — cioe' il numero che si vuole ricontrollare mentre si
 * scrive — era gia' scorso via in alto.
 *
 * `sticky` lo tiene in vista finche' c'e' modulo da compilare. Si stacca da
 * solo quando la colonna e' piu' alta dello schermo, quindi non nasconde mai
 * niente.
 */
@media (min-width: 901px) {
    .woocommerce-checkout .woocommerce-checkout-review-order {
        position: sticky;
        top: 24px;
    }
}

/*
 * LA RIGA DEL CODICE PROMOZIONALE
 *
 * Erano tre controlli in fila — campo, «Applica», «Aggiorna carrello» — e il
 * terzo cadeva su una seconda riga sfalsato, con l'aria di essere disattivato.
 * «Aggiorna carrello» non e' un'azione dello stesso ordine: si separa e si
 * fa quieto, perche' serve solo dopo aver cambiato una quantita'.
 */
.woocommerce-cart-form .actions .coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.woocommerce-cart-form .actions .coupon input[type="text"] {
    flex: 1 1 200px;
    min-width: 0;
    min-height: 48px;
}

.woocommerce-cart-form .actions .coupon button,
.woocommerce-cart-form .actions .coupon .button {
    flex: 0 0 auto;
    min-height: 48px;
}

.woocommerce-cart-form .actions > button[name="update_cart"],
.woocommerce-cart-form .actions > .button[name="update_cart"] {
    display: block;
    margin-top: 14px;
    min-height: 44px;
}

/*
 * LE PAROLE NON SI SPEZZANO A META'
 *
 * Nella riga del prodotto si leggeva «Cov er e Coprivite» e «Cat ena»: la
 * colonna e' stretta e il tema di base spezza ovunque. Su un elenco di scelte
 * tecniche — che il cliente rilegge per controllare di non aver sbagliato —
 * una parola tagliata sembra un errore di configurazione, non di grafica.
 */
.woocommerce-cart-form .variation,
.woocommerce-cart-form .variation dd,
.woocommerce-cart-form .variation dt,
.woocommerce-checkout-review-order .variation,
.woocommerce-checkout-review-order .variation dd {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

/* Il contorno sotto il modulo, a riga intera: rassicurazioni e aiuto non
   stanno piu' nella colonna di destra, che diventava alta il doppio della
   sinistra lasciando mezza pagina bianca. */
.st-checkout__sotto {
    /* Il modulo della cassa e' una griglia a due colonne: senza questa riga il
       blocco finiva nella prima, largo 780 su una pagina larga 1232, con
       mezza riga vuota accanto e le quattro rassicurazioni schiacciate a 180
       px l'una — quattro colonnine di testo a capo ogni due parole. Prende
       tutte le colonne perche' sta *sotto* il modulo, non accanto. */
    grid-column: 1 / -1;
    margin-top: 40px;
    display: grid;
    gap: 24px;
}

@media (min-width: 901px) {
    .st-checkout__sotto .st-rassicurazioni {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }
}

/*
 * LA RIGA DEL TOTALE
 *
 * Misurata: la nota dell'IVA e' un `<small>` in linea che, in una cella larga
 * 141 px, andava a capo due o tre volte e portava la riga a 132 px di altezza.
 * Il numero che conta — il totale — finiva schiacciato sopra un blocchetto di
 * testo storto, e la cifra dell'IVA sembrava un secondo importo da pagare.
 *
 * Diventano due righe pulite: l'importo grande, la nota sotto, entrambi
 * allineati a destra come tutti gli altri numeri della tabella. La colonna
 * dell'etichetta si stringe perche' «TOTALE» non ha bisogno di 229 px.
 */
.cart_totals .order-total th,
.woocommerce-checkout-review-order .order-total th {
    width: 38%;
    vertical-align: top;
    white-space: nowrap;
}

.cart_totals .order-total td,
.woocommerce-checkout-review-order .order-total td {
    text-align: right;
    vertical-align: top;
    white-space: normal;
}

.cart_totals .order-total td > .woocommerce-Price-amount,
.woocommerce-checkout-review-order .order-total td > .woocommerce-Price-amount {
    display: block;
    white-space: nowrap;
}

/* Il corpo lo dice `acquisto.css` (sezione 14): era descritto qui a .75rem,
   in `commerce.css` a .78rem e li' a 13 px, e vinceva questo. */
.cart_totals .order-total small.includes_tax,
.woocommerce-checkout-review-order .order-total small.includes_tax {
    display: block;
    margin-top: 5px;
    line-height: 1.4;
    color: var(--st-muted, #6F6A64);
    white-space: normal;
}

/* Anche l'importo dell'IVA dentro la nota resta piccolo: era grande come il
   totale e si leggeva come una seconda cifra da pagare. */
.cart_totals .order-total small.includes_tax .woocommerce-Price-amount,
.woocommerce-checkout-review-order .order-total small.includes_tax .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/*
 * «Spedizione a LATINA» e «Modifica indirizzo» uscivano dal riquadro dei
 * totali del carrello: sono testo lungo in una cella stretta senza posto dove
 * andare a capo.
 */
.cart_totals .shipping td,
.cart_totals .woocommerce-shipping-destination {
    white-space: normal;
    overflow-wrap: break-word;
}

/* =======================================================================
   IL PAGAMENTO RAPIDO — UNA SEZIONE, NON TRE VOLANTINI
   ======================================================================= */

.st-rapido {
    border: 1px solid var(--st-border-soft, #E9E5DF);
    border-radius: var(--st-r-scheda, 20px);
    padding: 22px 24px 24px;
    margin-bottom: 26px;
    background: var(--st-white, #fff);
}

.st-rapido__titolo {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 4px;
    font-family: var(--st-font-display, Georgia, serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--st-charcoal, #23201D);
}

.st-rapido__titolo svg { flex: none; color: var(--st-copper, #B65532); }

.st-rapido__nota {
    margin: 0 0 16px;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--st-muted, #6F6A64);
}

/*
 * TRE PULSANTI, UNA RIGA, LARGHEZZE UGUALI
 *
 * Stripe li disponeva 2 + 1: Apple e Google affiancati a 385 px, Link da solo
 * a 780 sotto. Misurato. Quella asimmetria e' esattamente cio' che fa sembrare
 * disordinata una fila di marchi — il terzo elemento largo il doppio non si
 * legge come «un'altra opzione», si legge come «qualcosa e' andato storto».
 *
 * La griglia li pareggia. Le larghezze in linea le mette Stripe da JavaScript,
 * quindi qui serve `!important`: e' l'unico modo di avere l'ultima parola su
 * uno stile che non passa da un foglio.
 */
/* Due colonne, non tre.
   A tre le celle scendono a 237 px e l'etichetta di Link — «Paga in sicurezza
   con Link» — viene tagliata a meta' parola. Un pulsante di pagamento con il
   testo mozzato e' peggio di un pulsante largo il doppio: il primo sembra
   rotto, il secondo solo asimmetrico. Link prende quindi la riga intera,
   sotto gli altri due, e la simmetria la fa il riquadro che li contiene. */
#wc-stripe-express-checkout-element {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100% !important;
}

#wc-stripe-express-checkout-element > div[id$="-link"] {
    grid-column: 1 / -1;
}

#wc-stripe-express-checkout-element > div {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Sotto i 600 px tre pulsanti affiancati diventano tre francobolli: si
   impilano, ma restano della stessa larghezza fra loro. */
@media (max-width: 600px) {
    #wc-stripe-express-checkout-element {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
}

/*
 * IL DIVISORE FRA LE DUE STRADE
 *
 * Stripe stampa un «oppure» piccolo e centrato che si perde. Diventa una riga
 * con due filetti: dice che sotto non c'e' altro dello stesso, c'e'
 * l'alternativa.
 */
#wc-stripe-express-checkout-button-separator {
    display: flex !important;
    align-items: center;
    gap: 14px;
    margin: 26px 0 0;
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--st-muted, #6F6A64);
}

#wc-stripe-express-checkout-button-separator::before,
#wc-stripe-express-checkout-button-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--st-border-soft, #E9E5DF);
}

/* =======================================================================
   IL RIEPILOGO A DESTRA — RIGHE, NON RIQUADRI A META'
   =======================================================================

   COSA NON ANDAVA
   ---------------
   Le righe SUBTOTALE e TOTALE avevano il fondo crema **solo sulla cella di
   sinistra**: il colore finiva a meta' riga e l'importo restava sul bianco,
   con l'aria di un riquadro finito male piu' che di una riga evidenziata.
   Le celle inoltre avevano riempimento orizzontale zero, quindi il testo
   toccava i bordi.

   Misurato anche: righe alte 49, 49, 89 e 91 px, cioe' nessun ritmo.

   COME FUNZIONA ORA
   -----------------
   Niente fondi a meta'. Le righe si distinguono con il filetto e con il peso
   del carattere, che e' come si separano le voci di un conto su carta. Il
   totale prende un filetto piu' marcato sopra, che e' il segno che tutti
   riconoscono senza doverlo imparare.
   ======================================================================= */

/* Il riempimento orizzontale delle celle resta zero, ed e' giusto: l'inset lo
   da' il contenitore `#order_review` con i suoi 24 px. Aggiungerlo qui avrebbe
   rientrato il testo due volte. */
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    vertical-align: top;
}

/*
 * IL FONDO CREMA CHE FINIVA A META' RIGA
 *
 * `.woocommerce table.shop_table th` da' il crema a **ogni** cella
 * intestazione. Nell'intestazione vera — PRODOTTO / SUBTOTALE — e' giusto: e'
 * una fascia. Ma nelle righe dei totali la cella di sinistra e' anch'essa un
 * `th`, e li' il colore copriva meta' riga e si fermava di netto prima
 * dell'importo: non una riga evidenziata, un riquadro finito male.
 *
 * Serve `table.shop_table` nel selettore per pareggiare la regola d'origine e
 * l'ordine nel foglio per superarla: e' la stessa aritmetica che mi era
 * sfuggita sulle icone dell'area clienti.
 */
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tbody th,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce .cart_totals table.shop_table tbody th,
.woocommerce .cart_totals table.shop_table tfoot th {
    background: none;
}

.woocommerce-checkout-review-order-table thead th {
    padding-block: 11px;
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--st-muted, #6F6A64);
    background: var(--st-ivory, #FAF6F1);
}

.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals th,
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals td {
    font-size: .9375rem;
    color: var(--st-charcoal, #23201D);
}

/* Il totale: filetto marcato sopra, niente fondo, cifra grande. */
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td,
.cart_totals .order-total th,
.cart_totals .order-total td {
    padding-top: 18px;
    border-top: 2px solid var(--st-charcoal, #23201D);
    background: none;
}

.woocommerce-checkout-review-order-table .order-total td > .woocommerce-Price-amount,
.cart_totals .order-total td > .woocommerce-Price-amount {
    font-size: 1.25rem;
    font-weight: 600;
}

/*
 * L'ELENCO DELLE SCELTE
 *
 * E' il punto in cui il cliente ricontrolla che la tenda sia quella giusta,
 * e leggerlo era faticoso: righe attaccate senza respiro.
 *
 * Etichetta piccola e grigia sopra, valore sotto, **una colonna sola**. Il
 * primo tentativo lo aveva lasciato su due colonne come lo mette
 * `commerce.css`: in 370 px la colonna del valore scendeva a centoquaranta, e
 * «Cover e Coprivite in Plastica, Staffa in Metallo» si spalmava su sei righe.
 * Peggio di prima. Qui serve `grid-template-columns` esplicito, o la regola
 * d'origine resta in piedi. */
/* Questo elenco lo disegna adesso `acquisto.css`, e in un altro modo:
   etichetta e valore **sulla stessa riga**, «Larghezza: 120 cm». La versione
   qui sotto — etichetta maiuscola sopra, valore sotto, una colonna sola —
   risolveva davvero il problema che descrive, ma al prezzo di ventidue righe
   per una tenda sola: undici etichette grigie in maiuscolo alternate a undici
   valori, un muro di testo tecnico proprio accanto al pulsante «paga».

   Restava per due `!important` che nessun altro foglio poteva battere. Sono
   tolti insieme alla regola: un `!important` messo per vincere una gara e
   lasciato li' quando la gara e' finita e' un ostacolo per chi arriva dopo. */

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

/* Il nome del prodotto si stacca dalle sue scelte. */
.woocommerce-checkout-review-order-table td.product-name > :first-child {
    font-weight: 600;
    line-height: 1.4;
}

/* =======================================================================
   LA CONFERMA D'ORDINE
   =======================================================================
   Arriva subito dopo il pagamento, ed e' la pagina dove il cliente cerca due
   risposte: e' andata bene, e adesso cosa succede. Trovava una fascia grigia
   uguale a quella degli avvisi d'errore.
   ======================================================================= */

.st-conferma__testa {
    text-align: center;
    max-width: 46rem;
    /* Lo stesso stacco dal menu che ha il titolo di carrello e cassa: senza,
       il segno di spunta cominciava esattamente dove finisce la barra di
       navigazione, appoggiato al bordo. */
    margin: var(--st-space-6, 64px) auto 34px;
}

.st-conferma__segno {
    margin: 0 0 12px;
    line-height: 0;
}

.st-conferma__segno svg {
    color: var(--st-success, #477255);
}

.st-conferma__titolo {
    margin: 0 0 10px;
    font-family: var(--st-font-display, Georgia, serif);
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--st-charcoal, #23201D);
}

.st-conferma__sottotitolo {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--st-muted, #6F6A64);
}

/* L'avviso di WooCommerce diventa superfluo: il titolo dice gia' che e'
   andata bene, e ripeterlo con una fascia grigia sopra lo indebolisce. */
.woocommerce-order > .woocommerce-notice--success,
.woocommerce-order > p.woocommerce-thankyou-order-received {
    display: none;
}

/* --- cosa succede adesso --- */

.st-conferma__poi {
    margin-top: 40px;
    padding: 28px 30px 30px;
    border: 1px solid var(--st-border-soft, #E9E5DF);
    border-radius: var(--st-r-scheda, 20px);
    background: var(--st-ivory, #FAF6F1);
}

.st-conferma__poi-titolo {
    margin: 0 0 20px;
    font-family: var(--st-font-display, Georgia, serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--st-charcoal, #23201D);
}

.st-conferma__passi {
    list-style: none;
    counter-reset: cp;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 20px;
}

@media (min-width: 780px) {
    .st-conferma__passi {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 26px;
    }
}

.st-conferma__passi li {
    counter-increment: cp;
    display: grid;
    gap: 5px;
    padding-top: 30px;
    position: relative;
}

.st-conferma__passi li::before {
    content: counter(cp);
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--st-copper, #B65532);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.st-conferma__passi strong {
    font-size: .9375rem;
    color: var(--st-charcoal, #23201D);
}

.st-conferma__passi span {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--st-muted, #6F6A64);
}

.st-conferma__dubbi {
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--st-border-soft, #E9E5DF);
    font-size: .875rem;
    line-height: 1.55;
    color: var(--st-muted, #6F6A64);
}

.st-conferma__dubbi a { color: var(--st-copper, #B65532); }

/*
 * LO SPAZIO PRIMA DEL PIEDE
 *
 * `section.woocommerce-customer-details` chiudeva con margine zero e i
 * riquadri degli indirizzi finivano tagliati dal filetto del footer. Su una
 * pagina che si stampa o si salva, un riquadro tagliato e' il dettaglio che fa
 * dubitare che l'ordine sia a posto.
 */
.woocommerce-order .woocommerce-customer-details,
.woocommerce-order > section:last-child {
    margin-bottom: 56px;
}

/* I riquadri degli indirizzi erano tratteggiati: e' l'unico punto del sito con
   un bordo di quel tipo, e sembra un segnaposto invece di un dato definitivo. */
.woocommerce-order .woocommerce-customer-details address {
    border: 1px solid var(--st-border-soft, #E9E5DF);
    border-radius: var(--st-r-scheda, 20px);
    padding: 20px 22px;
    font-style: normal;
    line-height: 1.7;
}

/* La tabella dei dettagli: stesso trattamento del riepilogo alla cassa —
   niente fondo a meta' riga sulle celle di sinistra. */
.woocommerce-order table.shop_table tfoot th,
.woocommerce-order table.shop_table tbody th {
    background: none;
}

/* Anche qui le celle partono dall'alto. La riga del prodotto e' alta quanto la
   sua lista di configurazione — dieci righe o piu' — e il totale, centrato,
   finiva a meta' altezza accanto a una voce qualsiasi dell'elenco. */
.woocommerce-order table.shop_table tbody th,
.woocommerce-order table.shop_table tbody td {
    vertical-align: top;
}

.woocommerce-order table.shop_table tfoot tr:last-child th,
.woocommerce-order table.shop_table tfoot tr:last-child td {
    border-bottom: 0;
}

/* =======================================================================
   IL RIQUADRO CON NUMERO, DATA E TOTALE DELL'ORDINE

   WooCommerce ne stampa da tre a cinque voci a seconda dell'ordine — l'email
   e il metodo di pagamento ci sono solo se ci sono. Erano due colonne fisse:
   con tre voci restava una casella vuota bordata in basso a destra, che si
   legge come un dato mancante invece che come una casella che non esiste.
   Con `auto-fit` le colonne che nessuno occupa si chiudono.
   ======================================================================= */
.woocommerce-order-overview {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Il filetto sta fra una voce e l'altra, non dopo l'ultima. La regola di
   Blocksy lo toglieva alle voci pari, che nella disposizione a due colonne
   erano quelle di destra: con tre voci in fila spariva dal mezzo. */
.woocommerce-order .woocommerce-order-overview > li {
    border: 0;
    border-inline-end: 1px solid var(--st-border, #DED8D0);
}

.woocommerce-order .woocommerce-order-overview > li:last-child {
    border-inline-end: 0;
}

/* Sotto i 690 px le voci non stanno piu' in riga ma una sull'altra: li' il
   filetto va sotto, non a destra. Un filetto verticale alla destra di tre
   blocchi impilati non separa niente — segna solo un margine che non c'e'. */
@media (max-width: 689.98px) {
    .woocommerce-order .woocommerce-order-overview > li {
        border-inline-end: 0;
        border-block-end: 1px solid var(--st-border, #DED8D0);
    }

    .woocommerce-order .woocommerce-order-overview > li:last-child {
        border-block-end: 0;
    }
}

/* =======================================================================
   LA SPEDIZIONE, QUANDO IL PACCO E' PARTITO

   Compare fra la tabella dell'ordine e gli indirizzi, e usciva come due righe
   di testo nudo in mezzo a una pagina fatta di schede: si leggeva come una
   nota a piede di pagina. Ma dal momento in cui c'e', **e' l'informazione per
   cui il cliente riapre questa pagina** — non il totale, non l'IVA: dov'e' il
   pacco. Ha il peso che le tocca.
   ===================================================================== */
.st-tracciatura {
    margin: 28px 0 0;
    padding: 22px 24px;
    background: var(--st-p-avorio, #F7F4EF);
    border: 1px solid var(--st-border, #E4DDD2);
    border-radius: var(--st-r-scheda, 20px);
}

.st-tracciatura h2 {
    margin: 0 0 10px;
    font-family: var(--st-font-display, Georgia, serif);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--st-p-inchiostro, #15181B);
}

.st-tracciatura p {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0;
    color: var(--st-muted, #6F6B66);
}

/* Il numero e' un numero: cifre a passo fisso, cosi' si legge a colpo d'occhio
   e si ricopia senza perdere il segno. */
.st-tracciatura strong {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    color: var(--st-p-inchiostro, #15181B);
}

.st-tracciatura a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1.5px solid var(--st-copper, #AE4C0B);
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--st-copper-text, #AE4C0B);
}

.st-tracciatura a:hover,
.st-tracciatura a:focus-visible {
    background: var(--st-copper, #AE4C0B);
    color: #fff;
}

@media (max-width: 560px) {
    .st-tracciatura a { width: 100%; justify-content: center; }
}