/* =============================================================================
   scatole.com — DIREZIONE "BIANCO CANDIDO" · 03 NEGOZIO
   -----------------------------------------------------------------------------
   Carrello, checkout, area cliente, login/registrazione, messaggi e avvisi
   WooCommerce, pagina ordine ricevuto, mini-carrello.
   È il tratto dove si perdono gli ordini.

   RISCRITTO DA CAPO il 23/08/2026, non travasato.
   Il foglio precedente era nato per la direzione SCURA e portato al bianco solo
   ribaltando la tavolozza. Il travaso aveva lasciato guasti veri, misurati a
   schermo su questo stesso perimetro (tutti chiusi qui sotto):
     · `color-scheme: dark` su pagina bianca — tendine native, barre di
       scorrimento e riempimento automatico di Chrome uscivano NERI. Visibile a
       occhio nudo nella tendina "Country / Region" del checkout.
     · Il metodo di pagamento SCELTO aveva fondo petrolio scuro e testo quasi
       nero: "Direct bank transfer" misurato 2,25:1.
     · Il messaggio `.woocommerce-info` aveva fondo petrolio scuro e testo
       grigio scuro: 1,12:1 — la frase "Please log in to your account to view
       this order" sulla pagina di conferma ordine era INVISIBILE, e la sua
       icona 1,43:1.
     · Il logo MyBank (SVG scuro) veniva incollato su un rettangolo --sc-ink,
       cioè quasi nero: logo scuro su fondo scuro.
     · I passi in alto: "Order Complete" 1,26:1, "Checkout" 1,82:1.
     · Il simbolo € aveva `opacity: .65` e scendeva a 3,55:1.
     · Il metodo di spedizione gratuita era agganciato a
       `input[value*="free_shipping"]`, che su questo negozio non esiste:
       codice morto (vedi sezione 7b).

   NESSUN COLORE PROPRIO: solo i gettoni di 00-fondamenta.

   -----------------------------------------------------------------------------
   LA REGOLA CHE HA GUIDATO OGNI SCELTA DI QUESTO FOGLIO
   -----------------------------------------------------------------------------
   Il bianco candido è bello finché il cliente guarda. Quando comincia a
   digitare l'indirizzo e la carta, il bello passa in secondo piano e conta una
   cosa sola: capire senza sforzo dove sono, cosa devo scrivere, quanto pago e
   cosa succede se premo. Dove le due cose litigano, VINCE LA FIDUCIA.
   In pratica, quattro punti in cui ho scelto la fiducia contro l'estetica:

   1. I CAMPI HANNO UN BORDO VERO, non una linea impercettibile.
      Il bianco candido vorrebbe un campo senza perimetro, definito solo da
      un'ombra. Misurato: --sc-linea-2 (#DDE1E6) su bianco fa 1,27:1, cioè un
      bordo che non c'è. La norma sul contrasto degli elementi non testuali
      chiede 3:1. Il bordo dei campi è quindi --sc-ink-4 (#79828D, 3,90:1):
      il gettone più tenue che supera la soglia. Un campo dove si digita la
      carta di credito deve avere un perimetro certo.

   2. IL CAMPO È BIANCO, IL PANNELLO CHE LO CONTIENE È --sc-carta.
      Rovescio della disposizione consueta: il campo è più CHIARO di quello
      che gli sta attorno, così legge come "buco di luce da riempire". Costa
      un tono di grigio sulla pagina e rende ovvio dove si scrive.

   3. L'ERRORE STA ANCHE ACCANTO AL CAMPO, non solo in cima alla pagina.
      WooCommerce marca la riga sbagliata con `.woocommerce-invalid` ma non ci
      scrive niente sopra: il messaggio è solo nel blocco rosso in alto, che su
      un modulo lungo resta fuori schermo. Qui la riga sbagliata si accende e
      si porta dietro una scritta sua (sezione 9c).

   4. I LOGHI DEI CIRCUITI STANNO SU CARTA BIANCA, non invertiti.
      Un logo di pagamento falsato è peggio di un logo assente.

   -----------------------------------------------------------------------------
   SEI COSE DA SAPERE PRIMA DI TOCCARE QUESTO FILE
   -----------------------------------------------------------------------------
   · IL PULSANTE CHE PORTA AVANTI HA CINQUE CLASSI DIVERSE.
     Una per pagina, e nessuna somiglia all'altra:
       Carrello:      <a class="btn btn-v-dark"> dentro .wc-proceed-to-checkout
                      (Porto: NON è un `.checkout-button` di WooCommerce)
       Checkout:      <button id="place_order" class="button alt btn-v-dark w-100">
       Login:         <button class="woocommerce-Button login-btn">
       Mini-carrello: <a class="elementor-button elementor-button--checkout">
       Conferma ordine: <button name="login" class="button wc-action-btn">
                      dentro form.login.global-login — questo l'avevo perso
                      alla prima passata e restava un pulsantino contornato da
                      137px, quando è l'UNICA strada per vedere l'ordine appena
                      pagato.
     Sono lo stesso pulsante e devono avere lo stesso vestito: se ne vesti
     quattro su cinque, un pezzo di percorso resta col vestito di prima e il
     cliente non riconosce più dove si preme.

   · L'IFRAME DI STRIPE SI VESTE DA SOLO, COPIANDO DA NOI.
     woocommerce-gateway-stripe (build/upe-classic.js) legge gli stili
     CALCOLATI di elementi veri della pagina e li rispedisce a Stripe come
     "appearance" dell'iframe. Per il checkout classico legge:
         campo     → #billing_first_name  (e #wc-stripe-hidden-style-input,
                     che è un <input class="input-text"> con opacity:0 messo
                     lì apposta per essere misurato)
         etichetta → .woocommerce-checkout .form-row label
         testo     → #payment .payment_methods li .payment_box fieldset
         fondo     → risale li.wc_payment_method .payment_box, #payment,
                     #order_review, form.checkout, body — si ferma al primo
                     fondo NON trasparente.
     Per questo #payment e .payment_box hanno un `background-color` ESPLICITO:
     non è decorazione, è quello che Stripe misura.
     RIMETTERLI A `transparent` ROMPEREBBE IL CAMPO CARTA. Non farlo.

   · IL CAMPO CARTA DI STRIPE OGGI NON SI DISEGNA — E NON È COLPA DI QUESTO
     FOGLIO. L'iframe monta e resta alto 0 pixel, senza errori in console.
     Verificato anche SENZA ?officina=1: è preesistente alla grafica. Già
     segnalato al proprietario. Qui do comunque al contenitore un'altezza
     minima e un perimetro, così quando il guasto sarà chiuso il campo nasce
     già vestito.

   · I PULSANTI PAYPAL NON SI VESTONO E NON VANNO VESTITI.
     .ppc-button-wrapper contiene iframe del SDK PayPal: giallo PayPal, blu
     PayPal, forma tonda. Intoccabili per contratto, e il cliente li riconosce
     a colpo d'occhio: è fiducia gratis. Qui gli diamo solo aria e un
     contenitore neutro perché non sembrino caduti dentro per sbaglio.

   · IL MINI-CARRELLO NON È IL WIDGET DI WOOCOMMERCE.
     È il carrello di Elementor Pro: tutto <div>, classi .elementor-menu-cart__*.
     `ul.woocommerce-mini-cart li` non aggancia niente — nel DOM vero non ci
     sono né <ul> né <li>. Inoltre 01-base ha già regole su quelle classi
     PREFISSATE CON #header: senza lo stesso prefisso qui, 01-base vince per
     specificità e metà di questa sezione sarebbe codice morto. Prefisso
     obbligatorio: #header.

   · --sc-ink-4 NON REGGE COME TESTO.
     Il gettone lo dichiara "circa 4,5:1 AA". Misurato a schermo su bianco:
     3,90:1. Sotto soglia. In questo foglio --sc-ink-4 è usato SOLO per bordi
     e tratti (dove la soglia è 3:1) e MAI per testo. Segnalato al proprietario
     in coda al lavoro: la correzione va fatta in 00-fondamenta, non qui.
   ========================================================================== */


/* =============================================================================
   1 · IL TERRENO DELLE PAGINE DI NEGOZIO
   -----------------------------------------------------------------------------
   `color-scheme: light` è dichiarato ESPLICITAMENTE, non lasciato al caso.
   Il foglio precedente diceva `dark` — eredità della direzione scura — e su
   pagina bianca faceva uscire nere le tendine native, le barre di scorrimento
   (visibile nella lista dei paesi) e il riempimento automatico di Chrome
   proprio mentre il cliente compila l'indirizzo. Un modulo che si comporta in
   modo strano mentre digiti l'indirizzo è un modulo che non finisci.
   ========================================================================== */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.woocommerce-order-received {
  color-scheme: light;
  background-color: var(--sc-fondo);
  color: var(--sc-ink-2);
}

body.woocommerce-cart #main,
body.woocommerce-checkout #main,
body.woocommerce-account #main,
body.woocommerce-order-received #main {
  background-color: var(--sc-fondo);
  background-image: none;
  padding-block: var(--sc-s6) var(--sc-s8);
}


/* -----------------------------------------------------------------------------
   1b · LE UTILITY DI PORTO E BOOTSTRAP CHE SPARANO NERO O GRIGIO
   Porto marca titoli e collegamenti con `.text-v-dark`, dichiarata !important:
   `color: var(--porto-dark-color)`, cioè #222529. Su bianco si legge, ma è un
   nero diverso dal nostro e sporca la pagina; su un fondo tinto (il metodo di
   pagamento scelto, un messaggio) diventa un buco.
   Contro `!important` non esiste specificità che tenga, quindi si risponde a
   tono — una volta sola, qui, invece di rincorrere ogni elemento.

   In tutto il foglio ci sono CINQUE `!important`, e nascono tutti dalla stessa
   causa. Sono, per intero:
     1.  `.text-v-dark`                          (qui sotto)
     2.  `.text-primary`                         (qui sotto)
     3.  i collegamenti che devono restare petrolio  (qui sotto)
     4.  il padding dell'etichetta "Ship to a different address?" (`.ps-1`)
     5.  lo stato dell'ordine nella pagina di conferma (`.text-primary`)
   Le dichiarazioni nel blocco @media print in fondo non contano: lì servono a
   SPOGLIARE la pagina, non a vestirla.
   -------------------------------------------------------------------------- */
body.woocommerce-cart #main .text-v-dark,
body.woocommerce-checkout #main .text-v-dark,
body.woocommerce-account #main .text-v-dark,
body.woocommerce-order-received #main .text-v-dark {
  color: var(--sc-ink) !important;
}

/* `.text-primary` è la utility che Porto appiccica p.es. allo stato
   dell'ordine: senza questa riga "PROCESSING" resta di un azzurro Bootstrap
   che non c'entra niente col petrolio. --sc-mar-testo, non --sc-mar: è testo
   piccolo su bianco e il pieno petrolio lì sotto fa 3,94:1. */
body.woocommerce-cart #main .text-primary,
body.woocommerce-checkout #main .text-primary,
body.woocommerce-account #main .text-primary,
body.woocommerce-order-received #main .text-primary {
  color: var(--sc-mar-testo) !important;
}

/* Due eccezioni: questi SONO collegamenti e devono sembrarlo. */
body.woocommerce-checkout #main .showcoupon,
body.woocommerce-account #main .woocommerce-LostPassword a,
body.woocommerce-account #main .lost_password a {
  color: var(--sc-mar-testo) !important;
}


/* =============================================================================
   2 · I PANNELLI — i fogli di carta appoggiati sulla pagina
   -----------------------------------------------------------------------------
   Porto usa tre nomi per la stessa idea di riquadro: .box-content,
   .featured-box, .card. Li porto tutti allo stesso oggetto.
   Su bianco il bordo non serve più: lo fanno il tono di --sc-carta e un'ombra
   di primo livello. È il punto in cui la direzione si vede davvero.
   ========================================================================== */
body.woocommerce-cart #main .box-content,
body.woocommerce-checkout #main .box-content,
body.woocommerce-account #main .box-content,
body.woocommerce-order-received #main .box-content,
body.woocommerce-cart #main .cart_totals .card,
body.woocommerce-checkout #main .checkout-order-review .box-content,
body.woocommerce-account #main .featured-box,
body.woocommerce-checkout #main .featured-box {
  background-color: var(--sc-carta);
  border: 0;
  border-radius: var(--sc-r);
  padding: var(--sc-s5);
  box-shadow: var(--sc-ombra-1);
}

/* Porto mette ombre sue, più dure e di un grigio diverso: le sostituisco
   invece di sommarle. */
body.woocommerce-cart #main .featured-box,
body.woocommerce-checkout #main .featured-box,
body.woocommerce-account #main .featured-box,
body.woocommerce-order-received #main .featured-box {
  box-shadow: var(--sc-ombra-1);
}


/* =============================================================================
   3 · L'ETICHETTA TECNICA — il tratto ricorrente della direzione
   -----------------------------------------------------------------------------
   Mono, maiuscolo, spaziato. Vale per: intestazioni di colonna, titoli di
   riquadro, passi in alto. NON per le etichette dei campi (vedi sezione 9):
   "Street address" si legge, non si ammira.
   Colore --sc-ink-3 (5,57:1 misurato). --sc-ink-4 qui NON entra: a 11px
   farebbe 3,90:1.
   ========================================================================== */
body.woocommerce-cart #main .cart-table thead th span,
body.woocommerce-checkout #main .review-order thead th h4,
body.woocommerce-cart #main .cart_totals .card-sub-title,
body.woocommerce-checkout #main #order_review_heading,
body.woocommerce-checkout #main #payment > h4,
body.woocommerce-account #main .woocommerce-MyAccount-navigation h5,
body.woocommerce-account #main .account-sub-title,
body.woocommerce-checkout #main .woocommerce-billing-fields > h3,
body.woocommerce-checkout #main .woocommerce-shipping-fields > h3,
body.woocommerce-checkout #main .woocommerce-additional-fields > h3 {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
  margin: 0 0 var(--sc-s4);
}

/* I titoli di sezione portano una riga di quota sotto, come le intestazioni di
   una tavola tecnica. */
body.woocommerce-checkout #main .woocommerce-billing-fields > h3,
body.woocommerce-checkout #main #order_review_heading,
body.woocommerce-checkout #main #payment > h4 {
  padding-bottom: var(--sc-s3);
  border-bottom: 1px solid var(--sc-linea-2);
}


/* =============================================================================
   4 · I PASSI IN ALTO — Shopping Cart › Checkout › Order Complete
   -----------------------------------------------------------------------------
   Dire al cliente "sei al passo 2 di 3" è una delle poche cose che abbassano
   davvero l'abbandono al carrello. Nel foglio precedente però il passo già
   fatto stava a 3,90:1 e quello ancora da fare a 1,26:1: cioè la fila dei
   passi era per metà invisibile e non diceva niente a nessuno.

   Qui NESSUNO dei tre passi scende sotto AA. Il passo in cui mi trovo non si
   distingue perché gli altri sono slavati, ma perché è petrolio, in grassetto
   e ha una barra sotto: la differenza si porta sul colore E sulla forma,
   non sulla quantità di luce.
   ========================================================================== */
.woo-page-header.page-header-8 {
  background: transparent;
  border-bottom: 1px solid var(--sc-linea-2);
  margin-bottom: var(--sc-s6);
  padding-block: var(--sc-s5);
}

.woo-page-header .breadcrumb {
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sc-s4);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.woo-page-header .breadcrumb li a,
.woo-page-header .breadcrumb li a.nolink,
.woo-page-header .breadcrumb li.disable a {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sc-ink-3);          /* 5,57:1 — vale per TUTTI e tre i passi */
  text-decoration: none;
  /* PORTO DIMEZZA I PASSI NON CORRENTI CON `opacity: .5`, e l'opacità si
     applica DOPO il colore: il gettone giusto arrivava a schermo dimezzato.
     Misurato: --sc-ink-3 (5,57:1 pieno) usciva #B0B5BA, cioè 2,07:1.
     È la stessa trappola del foglio precedente vista da un'altra parte: lì il
     colore era sbagliato, qui è giusto ma qualcun altro lo annacqua. Chi
     legge il CSS e trova --sc-ink-3 crede che vada bene; a schermo no.
     Se un giorno questa riga sparisce, i passi tornano illeggibili. */
  opacity: 1;
}

/* La regola di Porto che dimezza i passi è, per intero:
       .page-header-8 li.current ~ li a,
       .page-header-8 li.current ~ li .delimiter   { opacity: .5 }
   Specificità (0,2,3): batte la riga qui sopra, che è (0,2,2). Per questo
   "Order Complete" (che ha anche `.disable`, quindi 0,3,2) si era già
   raddrizzato e "Checkout" no — stessa dichiarazione, due esiti diversi, e
   a occhio sembrava un capriccio del browser.
   Qui rispondo con la stessa forma del selettore, un gradino più su. */
.woo-page-header .breadcrumb li.current ~ li a,
.woo-page-header .breadcrumb li.current ~ li .delimiter {
  opacity: 1;
}

/* passo attuale */
.woo-page-header .breadcrumb li.current a,
.woo-page-header .breadcrumb li.current a.nolink {
  color: var(--sc-mar-testo);      /* 5,88:1 */
  font-weight: 600;
  border-bottom: 2px solid var(--sc-mar-testo);
  padding-bottom: var(--sc-s1);
}

.woo-page-header .breadcrumb li:not(.current) a:hover {
  color: var(--sc-ink);
}

/* Il passo non ancora raggiunto non si può cliccare, ma si deve leggere.
   Il "non ancora" lo dice il cursore, non un grigio slavato. */
.woo-page-header .breadcrumb li.disable a {
  cursor: default;
}

/* Le frecce fra un passo e l'altro sono decorazione: qui --sc-quota va bene,
   non è testo. */
.woo-page-header .breadcrumb .delimiter,
.woo-page-header .breadcrumb .delimiter i {
  color: var(--sc-quota);
}


/* =============================================================================
   5 · IL CARRELLO — la tabella
   -----------------------------------------------------------------------------
   Righe come voci di distinta: un filo fra una e l'altra, niente zebratura,
   i numeri a destra e in mono perché si incolonnino da soli.
   ========================================================================== */
body.woocommerce-cart #main table.cart-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  margin: 0;
}

body.woocommerce-cart #main table.cart-table thead th {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sc-linea-2);
  padding: 0 var(--sc-s3) var(--sc-s3);
  text-align: left;
}

body.woocommerce-cart #main table.cart-table thead th.product-subtotal,
body.woocommerce-cart #main table.cart-table thead th.product-price,
body.woocommerce-cart #main table.cart-table thead th.product-quantity {
  text-align: right;
}

body.woocommerce-cart #main tr.cart_item td {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sc-linea);
  padding: var(--sc-s5) var(--sc-s3);
  vertical-align: middle;
  color: var(--sc-ink-2);
}

/* L'immagine prodotto su un piano di carta appena staccato dal pannello.
   NON applico .sc-tratto: nel carrello possono esserci campionari di carta e
   foto vere, e alterarne i colori qui falserebbe quello che il cliente ha
   scelto — proprio mentre controlla di aver scelto giusto. */
body.woocommerce-cart #main td.product-thumbnail .position-relative {
  width: 84px;
  background-color: var(--sc-fondo);
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r);
  padding: var(--sc-s1);
}

body.woocommerce-cart #main td.product-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--sc-r) - 4px);
  mix-blend-mode: normal;
  filter: none;
}

body.woocommerce-cart #main td.product-name a {
  font-family: var(--sc-disp);
  font-size: var(--sc-t-h3);
  font-weight: 700;
  color: var(--sc-ink);
  text-decoration: none;
  line-height: 1.25;
}

body.woocommerce-cart #main td.product-name a:hover {
  color: var(--sc-mar-testo);
}

/* Le opzioni scelte nel configuratore, sotto il nome: sono la prova che il
   cliente ha ordinato quello che voleva. Leggibili, non un mormorio grigio. */
body.woocommerce-cart #main td.product-name .variation,
body.woocommerce-cart #main td.product-name dl.variation,
body.woocommerce-cart #main td.product-name .wcpa_cart_meta {
  margin: var(--sc-s2) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sc-ink-3);
}

body.woocommerce-cart #main td.product-name dl.variation dt {
  font-weight: 600;
  color: var(--sc-ink-2);
}

/* Prezzi e quantità in mono: si incolonnano e si confrontano a occhio. */
body.woocommerce-cart #main td.product-price,
body.woocommerce-cart #main td.product-subtotal,
body.woocommerce-cart #main td.product-quantity {
  font-family: var(--sc-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

body.woocommerce-cart #main td.product-price {
  color: var(--sc-ink-3);
}

body.woocommerce-cart #main td.product-subtotal {
  color: var(--sc-ink);
  font-weight: 600;
}

body.woocommerce-cart #main td.product-quantity strong {
  display: inline-block;
  min-width: 44px;
  padding: var(--sc-s1) var(--sc-s2);
  background-color: var(--sc-incasso);
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r);
  color: var(--sc-ink-2);
  font-weight: 500;
}


/* -----------------------------------------------------------------------------
   5b · TOGLIERE UNA RIGA
   Porto la disegna come pallino appiccicato all'angolo della foto, con una × di
   Font Awesome. Il bersaglio di serie è 21px: troppo poco per un dito, e qui
   sbagliare mira significa non riuscire a togliere un articolo — motivo
   documentato di abbandono. La porto a 36px, su carta bianca con un bordo che
   si vede, e la faccio diventare rossa solo quando la si punta: rossa sempre
   sarebbe un allarme costante su una pagina dove non c'è niente che non va.
   -------------------------------------------------------------------------- */
body.woocommerce-cart #main a.remove.remove-product,
body.woocommerce-checkout #main .review-order a.remove.remove-product {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  line-height: 1;
  top: -12px;
  right: -12px;
  font-size: 14px;
  border-radius: 50%;
  background-color: var(--sc-fondo);
  border: 1px solid var(--sc-linea-2);
  color: var(--sc-ink-3);
  box-shadow: var(--sc-ombra-1);
  transition: color var(--sc-veloce) var(--sc-curva),
              border-color var(--sc-veloce) var(--sc-curva),
              background-color var(--sc-veloce) var(--sc-curva);
}

body.woocommerce-cart #main a.remove.remove-product:hover,
body.woocommerce-cart #main a.remove.remove-product:focus-visible,
body.woocommerce-checkout #main .review-order a.remove.remove-product:hover,
body.woocommerce-checkout #main .review-order a.remove.remove-product:focus-visible {
  background-color: var(--sc-urg-fondo);
  border-color: var(--sc-urg);
  color: var(--sc-urg);
}


/* -----------------------------------------------------------------------------
   5c · LE CIFRE
   Porto colora ogni .woocommerce-Price-amount col suo grigio-nero #222529 su un
   selettore che batte la regola della cella. Le cifre si dichiarano quindi una
   per una, qui, col prefisso #main che serve a vincere.

   IL SIMBOLO DI VALUTA STA ALLA PARI CON LA CIFRA.
   Il foglio precedente gli metteva `opacity: .65` per farne "un'unità di
   misura accanto a una quota". Misurato: portava il € a 3,55:1, sotto AA.
   Su una pagina dove si decide quanto spendere non si fanno giochi tipografici
   sui prezzi: "10.00" senza euro davanti non è una somma di denaro, e un euro
   sbiadito è un euro che qualcuno non legge.
   -------------------------------------------------------------------------- */
body.woocommerce-cart #main .woocommerce-Price-amount,
body.woocommerce-checkout #main .woocommerce-Price-amount,
body.woocommerce-account #main .woocommerce-Price-amount,
body.woocommerce-order-received #main .woocommerce-Price-amount,
body.woocommerce-cart #main .woocommerce-Price-amount bdi,
body.woocommerce-checkout #main .woocommerce-Price-amount bdi,
body.woocommerce-account #main .woocommerce-Price-amount bdi,
body.woocommerce-order-received #main .woocommerce-Price-amount bdi,
body.woocommerce-cart #main .woocommerce-Price-currencySymbol,
body.woocommerce-checkout #main .woocommerce-Price-currencySymbol,
body.woocommerce-account #main .woocommerce-Price-currencySymbol,
body.woocommerce-order-received #main .woocommerce-Price-currencySymbol {
  color: inherit;
  opacity: 1;
  font-family: var(--sc-mono);
  font-variant-numeric: tabular-nums;
}

/* Nel totale il simbolo prende il carattere da titolo insieme alla cifra:
   sono una cosa sola. */
body.woocommerce-cart #main tr.order-total .woocommerce-Price-currencySymbol,
body.woocommerce-checkout #main tr.order-total .woocommerce-Price-currencySymbol {
  font-family: var(--sc-disp);
}


/* =============================================================================
   6 · COUPON E AZIONI DEL CARRELLO
   ========================================================================== */
body.woocommerce-cart #main td.actions {
  background: transparent;
  border: 0;
  padding: var(--sc-s5) var(--sc-s3) 0;
}

body.woocommerce-cart #main #panel-cart-discount {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-s3);
  align-items: center;
  justify-content: space-between;
}

body.woocommerce-cart #main .coupon {
  display: flex;
  gap: var(--sc-s2);
  flex: 1 1 320px;
}

body.woocommerce-cart #main .coupon #coupon_code {
  flex: 1 1 auto;
  min-width: 0;
}


/* =============================================================================
   7 · IL RIQUADRO DEI TOTALI
   -----------------------------------------------------------------------------
   È la cosa che il cliente guarda prima di decidere. Voci a sinistra, cifre in
   mono a destra, e il totale staccato dal resto da una linea marcata.
   ========================================================================== */
body.woocommerce-cart #main .cart_totals .card {
  position: sticky;
  top: var(--sc-s5);
}

body.woocommerce-cart #main table.cart-total {
  width: 100%;
  border-collapse: collapse;
}

body.woocommerce-cart #main table.cart-total th,
body.woocommerce-cart #main table.cart-total td {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sc-linea);
  padding: var(--sc-s3) 0;
  vertical-align: baseline;
}

body.woocommerce-cart #main table.cart-total th {
  text-align: left;
  font-weight: 400;
}

body.woocommerce-cart #main table.cart-total th h4 {
  font-family: var(--sc-testo);
  font-size: var(--sc-t-p);
  font-weight: 500;
  color: var(--sc-ink-2);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

body.woocommerce-cart #main table.cart-total td {
  text-align: right;
  font-family: var(--sc-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink-2);
  white-space: nowrap;
}

body.woocommerce-cart #main tr.tax-rate th,
body.woocommerce-cart #main tr.tax-rate td {
  color: var(--sc-ink-3);
  font-size: .9em;
}

/* IL TOTALE. La cosa più grande e più scura della pagina. */
body.woocommerce-cart #main tr.order-total th,
body.woocommerce-cart #main tr.order-total td {
  border-bottom: 0;
  border-top: 2px solid var(--sc-linea-2);
  padding-top: var(--sc-s4);
}

body.woocommerce-cart #main tr.order-total th h4 {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
}

body.woocommerce-cart #main tr.order-total td strong,
body.woocommerce-cart #main tr.order-total td .amount {
  font-family: var(--sc-disp);
  font-size: var(--sc-t-h2);
  font-weight: 900;
  color: var(--sc-ink);
  line-height: 1;
}


/* -----------------------------------------------------------------------------
   7b · SPEDIZIONE — E LA SPEDIZIONE GRATUITA, CHE QUI NON È UN "free_shipping"
   -----------------------------------------------------------------------------
   QUESTA È LA CORREZIONE PIÙ IMPORTANTE DEL FOGLIO, e non è una questione di
   colore: è che prima non funzionava.

   Il foglio precedente accendeva la spedizione gratuita con
       li:has(> .porto-radio input[value*="free_shipping"])
   Su questo negozio quel valore NON ESISTE. Verificato a schermo e nel
   database: la zona ha due metodi, `flexible_shipping_single:3` e
   `flexible_shipping_fedex:4`, e la soglia di spedizione gratuita del plugin
   non è nemmeno configurata (`method_free_shipping` è vuoto).
   La spedizione gratuita di scatole.com arriva da un'altra parte:
   scatole-custom-plugin/elementor-newsletter-shipping.php aggancia
   `woocommerce_package_rates` e, se il cliente ha spuntato la newsletter,
   AZZERA il costo di tutti i metodi lasciandogli il loro nome.
   Quindi il gettone --sc-ok non si è mai acceso: codice morto.

   COME SI RICONOSCE IL COSTO ZERO IN CSS PURO.
   WooCommerce (wc_cart_totals_shipping_method_label) aggiunge la cifra
   all'etichetta SE E SOLO SE il costo è maggiore di zero:
       a pagamento →  <label>Shipping: <span class="amount">€10.00</span></label>
       gratuita    →  <label>Shipping</label>
   Cioè: una voce di spedizione SENZA `.amount` dentro è una voce che costa
   zero. È il criterio esatto, non un indovinello sul testo.
   Escludo il ritiro in negozio, che costa zero ma non è una spedizione
   regalata (oggi è disattivato, ma se lo riaccendono non deve dire "FREE").

   Le due parole in ::after non si traducono con GTranslate e non si
   selezionano: è un compromesso, e va detto. Fra una spedizione gratuita che
   non si vede e una pastiglia non traducibile su un negozio che è già tutto in
   inglese, scelgo la pastiglia. La soluzione giusta è un'etichetta nel PHP del
   plugin, che non è roba di questo foglio.
   -------------------------------------------------------------------------- */
body.woocommerce-cart #main ul#shipping_method,
body.woocommerce-checkout #main ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.woocommerce-cart #main ul#shipping_method li,
body.woocommerce-checkout #main ul#shipping_method li {
  margin-bottom: var(--sc-s2);
}

body.woocommerce-cart #main ul#shipping_method .porto-control-label,
body.woocommerce-checkout #main ul#shipping_method .porto-control-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-s2);
  /* 44px anche quando il metodo è uno solo e la riga non si può cliccare:
     appena la zona ne ha due, quella stessa riga diventa un bersaglio, e non
     deve cambiare misura da una pagina all'altra. Misurato a 390: era 32. */
  min-height: 44px;
  color: var(--sc-ink-2);
  font-size: var(--sc-t-p);
}

/* Il modello di Porto stampa "Shipping:" e la cifra senza spazio in mezzo:
   "Shipping:€10.00". Non posso toccare il PHP, ma il flex mette lo spazio. */
body.woocommerce-cart #main ul#shipping_method .porto-control-label .amount,
body.woocommerce-checkout #main ul#shipping_method .porto-control-label .amount {
  color: var(--sc-ink);
  font-weight: 600;
}

/* --- LA VOCE GRATUITA ---------------------------------------------------- */
body.woocommerce-cart #main ul#shipping_method li:has(input.shipping_method):not(:has(.amount)):not(:has(input[value*="local_pickup"])) .porto-control-label,
body.woocommerce-checkout #main ul#shipping_method li:has(input.shipping_method):not(:has(.amount)):not(:has(input[value*="local_pickup"])) .porto-control-label {
  color: var(--sc-ok);            /* 6,16:1 misurato su bianco */
  font-weight: 600;
}

body.woocommerce-cart #main ul#shipping_method li:has(input.shipping_method):not(:has(.amount)):not(:has(input[value*="local_pickup"])) .porto-control-label::after,
body.woocommerce-checkout #main ul#shipping_method li:has(input.shipping_method):not(:has(.amount)):not(:has(input[value*="local_pickup"])) .porto-control-label::after {
  content: "FREE";
  /* Porto usa GIÀ ::before e ::after su .porto-control-label per disegnare il
     pallino di scelta: `position: absolute`, riquadro di 18x12 e — la parte
     cattiva — `opacity: 0`, perché il pallino pieno si accende solo quando la
     voce è scelta. Senza questi SEI azzeramenti la pastiglia esiste, il
     browser la calcola col testo e i colori giusti (verificato con
     getComputedStyle), e resta invisibile: prima schiacciata sotto il testo,
     poi perfettamente al suo posto ma trasparente.
     È la terza volta in questo foglio che Porto nasconde qualcosa con
     l'opacità invece che col colore — vedi anche i passi in alto (sezione 4).
     Quando una cosa "c'è nel CSS ma non si vede", la prima da controllare è
     `opacity`, non il colore. Non togliere queste righe. */
  position: static;
  opacity: 1;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  background-image: none;
  display: inline-flex;
  align-items: center;
  padding: 3px var(--sc-s2);
  border-radius: var(--sc-r);
  background-color: var(--sc-ok-fondo);
  color: var(--sc-ok);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.4;
}

/* La riga del totale "Shipment": quando la spedizione è gratis, anche la voce
   nel riepilogo si tinge, così il vantaggio si vede anche di sfuggita. */
body.woocommerce-checkout #main tr.shipping:has(ul#shipping_method li:has(input.shipping_method):not(:has(.amount)):not(:has(input[value*="local_pickup"]))) h4,
body.woocommerce-cart #main tr.shipping:has(ul#shipping_method li:has(input.shipping_method):not(:has(.amount)):not(:has(input[value*="local_pickup"]))) h4 {
  color: var(--sc-ok);
}

body.woocommerce-cart #main .woocommerce-shipping-destination,
body.woocommerce-checkout #main .woocommerce-shipping-destination {
  font-size: var(--sc-t-mono);
  font-family: var(--sc-mono);
  letter-spacing: .04em;
  color: var(--sc-ink-3);        /* era --sc-ink-4: 3,77:1, sotto soglia */
  margin: var(--sc-s2) 0 0;
}

body.woocommerce-cart #main .woocommerce-shipping-destination strong {
  color: var(--sc-ink-2);
}

body.woocommerce-cart #main .shipping-calculator-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* è un comando: si deve poter colpire */
  color: var(--sc-mar-testo);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.woocommerce-cart #main .shipping-calculator-form {
  margin-top: var(--sc-s4);
  padding-top: var(--sc-s4);
  border-top: 1px solid var(--sc-linea-2);
}


/* =============================================================================
   8 · I PULSANTI CHE PORTANO AVANTI
   -----------------------------------------------------------------------------
   Cinque classi diverse (l'elenco è in testa al file) per un unico oggetto:
   il passo avanti. Petrolio pieno, e nient'altro sulla pagina è petrolio
   pieno, così non c'è dubbio su dove si preme.
   Il pulsante del login sta QUI e non nella sezione 15, insieme agli altri
   quattro: è l'unico modo perché non possano scollarsi l'uno dall'altro col
   passare delle modifiche.

   PERCHÉ --sc-mar-vivo E NON --sc-mar.
   00-fondamenta lo scrive chiaro: --sc-mar (#2F8C98) col testo bianco sopra fa
   3,94:1, cioè regge solo sotto testo grande (>=19px) e grassetto. Il testo di
   questi pulsanti è 1,05rem — sotto quella misura. --sc-mar-vivo (#226E78) col
   bianco sopra fa 5,88:1: AA pieno a qualsiasi corpo. Sul pulsante da cui
   dipendono gli ordini si prende il margine più largo, non il colore più bello.

   Al passaggio del mouse va PIÙ SCURO, non nero: --sc-mar-scuro. Un pulsante
   che diventa nero sotto il dito sembra un altro pulsante.
   ========================================================================== */
body.woocommerce-cart #main .wc-proceed-to-checkout .btn,
body.woocommerce-cart #main .wc-proceed-to-checkout .checkout-button,
body.woocommerce-checkout #main button#place_order,
body.woocommerce-account #main .login-btn,
body.woocommerce-account #main form.register .woocommerce-Button,
body.woocommerce-order-received #main form.login button[name="login"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-s2);
  width: 100%;
  min-height: 56px;
  padding: var(--sc-s4) var(--sc-s5);
  background-color: var(--sc-mar-vivo);
  border: 1px solid var(--sc-mar-vivo);
  border-radius: var(--sc-r);
  color: var(--sc-mar-ombra);      /* bianco: il gettone dice esattamente questo */
  font-family: var(--sc-disp);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--sc-ombra-mar);
  cursor: pointer;
  transition: background-color var(--sc-veloce) var(--sc-curva),
              box-shadow var(--sc-veloce) var(--sc-curva),
              transform var(--sc-veloce) var(--sc-curva);
}

body.woocommerce-cart #main .wc-proceed-to-checkout .btn:hover,
body.woocommerce-cart #main .wc-proceed-to-checkout .checkout-button:hover,
body.woocommerce-checkout #main button#place_order:hover,
body.woocommerce-account #main .login-btn:hover,
body.woocommerce-account #main form.register .woocommerce-Button:hover,
body.woocommerce-order-received #main form.login button[name="login"]:hover {
  background-color: var(--sc-mar-scuro);
  border-color: var(--sc-mar-scuro);
  color: var(--sc-mar-ombra);
  box-shadow: var(--sc-ombra-2);
}

body.woocommerce-cart #main .wc-proceed-to-checkout .btn:active,
body.woocommerce-checkout #main button#place_order:active,
body.woocommerce-account #main .login-btn:active,
body.woocommerce-order-received #main form.login button[name="login"]:active {
  transform: translateY(1px);
  box-shadow: var(--sc-ombra-1);
}

/* WooCommerce disabilita "Place order" mentre elabora. Se non si vede, il
   cliente ripreme e nascono due ordini. Il cursore dice "sto lavorando",
   il colore dice "non adesso" — e il testo resta leggibile (--sc-ink-3 su
   --sc-rilievo: 5,2:1), perché un pulsante illeggibile sembra rotto. */
body.woocommerce-checkout #main button#place_order:disabled,
body.woocommerce-checkout #main button#place_order[disabled] {
  background-color: var(--sc-rilievo);
  border-color: var(--sc-linea-2);
  color: var(--sc-ink-3);
  box-shadow: none;
  cursor: progress;
}


/* -----------------------------------------------------------------------------
   8b · PULSANTI DI SERVIZIO (Apply coupon, Update cart, Update totals, Edit…)
   Contornati, mai pieni: non devono competere con quelli qui sopra.
   Il bordo è --sc-linea-2 a riposo, ma il TESTO è --sc-ink-2 (9,3:1): un
   pulsante contornato deve avere un contorno tenue, non una scritta tenue.
   -------------------------------------------------------------------------- */
body.woocommerce-cart #main .button.wc-action-btn,
body.woocommerce-checkout #main .button.wc-action-btn,
body.woocommerce-account #main .button.wc-action-btn,
body.woocommerce-account #main .woocommerce-Button.button:not(.login-btn),
body.woocommerce-cart #main button[name="update_cart"],
body.woocommerce-cart #main button[name="apply_coupon"],
body.woocommerce-cart #main button[name="calc_shipping"],
body.woocommerce-checkout #main .checkout_coupon button[name="apply_coupon"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--sc-s5);
  background-color: var(--sc-fondo);
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r);
  color: var(--sc-ink-2);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: border-color var(--sc-veloce) var(--sc-curva),
              color var(--sc-veloce) var(--sc-curva),
              background-color var(--sc-veloce) var(--sc-curva);
}

body.woocommerce-cart #main .button.wc-action-btn:hover,
body.woocommerce-checkout #main .button.wc-action-btn:hover,
body.woocommerce-account #main .button.wc-action-btn:hover,
body.woocommerce-account #main .woocommerce-Button.button:not(.login-btn):hover,
body.woocommerce-cart #main button[name="update_cart"]:hover,
body.woocommerce-cart #main button[name="apply_coupon"]:hover,
body.woocommerce-cart #main button[name="calc_shipping"]:hover,
body.woocommerce-checkout #main .checkout_coupon button[name="apply_coupon"]:hover {
  background-color: var(--sc-mar-velo);
  border-color: var(--sc-mar-testo);
  color: var(--sc-mar-testo);
}


/* =============================================================================
   9 · I CAMPI — il cuore della fiducia
   -----------------------------------------------------------------------------
   Quattro vincoli non negoziabili, in ordine di importanza:
     1. 16px esatti — var(--sc-t-campo). Sotto i 16 iPhone ingrandisce la
        pagina a ogni tocco e non la rimpicciolisce più: al checkout si perde
        l'orientamento proprio mentre si scrive l'indirizzo. NON usare
        --sc-t-p, che è clamp(15px…16.5px): su telefono varrebbe 15.
     2. Altezza 52px: bersaglio comodo col pollice.
     3. Bordo visibile SEMPRE, non solo al fuoco, e con contrasto vero:
        --sc-ink-4 fa 3,90:1 contro il bianco del campo, sopra la soglia di
        3:1 richiesta per gli elementi non testuali. --sc-linea-2 sarebbe
        1,27:1, cioè un campo senza perimetro (vedi punto 1 in testa al file).
     4. Campo BIANCO dentro un pannello --sc-carta: lo spazio da riempire è
        più chiaro di quello che gli sta intorno.
   ========================================================================== */
body.woocommerce-checkout #main .form-row,
body.woocommerce-cart #main .form-row,
body.woocommerce-account #main .form-row {
  position: relative;    /* serve al comando "Show" della password, sez. 15b */
  margin: 0 0 var(--sc-s4);
  padding: 0;
}

/* ETICHETTE DEI CAMPI — qui il mono maiuscolo NON entra.
   Poppins, 15px, sopra il campo, mai dentro come segnaposto: un'etichetta che
   sparisce quando inizi a scrivere è un'etichetta che non c'è quando serve. */
body.woocommerce-checkout #main .form-row > label,
body.woocommerce-account #main .form-row > label,
body.woocommerce-checkout #main .woocommerce-address-fields label {
  display: block;
  margin-bottom: var(--sc-s2);
  font-family: var(--sc-testo);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sc-ink-2);          /* 9,3:1 */
}

/* L'asterisco del campo obbligatorio. */
body.woocommerce-checkout #main .form-row label .required,
body.woocommerce-account #main .form-row label .required {
  color: var(--sc-urg);
  text-decoration: none;
  margin-left: 2px;
}

/* "(optional)" deve dire subito "questo puoi saltarlo": è tempo risparmiato,
   ma va letto. Era --sc-ink-4 e misurava 3,77:1. */
body.woocommerce-checkout #main .form-row label .optional,
body.woocommerce-account #main .form-row label .optional {
  color: var(--sc-ink-3);          /* 5,57:1 */
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* IL CAMPO
   NB: `.input-text` è anche la classe di #wc-stripe-hidden-style-input, il
   campo invisibile che Stripe misura per vestire il suo iframe. Quello che
   scrivi qui finisce dentro il campo della carta. */
body.woocommerce-checkout #main input.input-text,
body.woocommerce-checkout #main textarea.input-text,
body.woocommerce-checkout #main textarea,
body.woocommerce-checkout #main select,
body.woocommerce-cart #main input.input-text,
body.woocommerce-cart #main select,
body.woocommerce-account #main input.input-text,
body.woocommerce-account #main input[type="text"],
body.woocommerce-account #main input[type="email"],
body.woocommerce-account #main input[type="tel"],
body.woocommerce-account #main input[type="password"],
body.woocommerce-account #main select,
body.woocommerce-account #main textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--sc-s3) var(--sc-s4);
  background-color: var(--sc-fondo);
  border: 1px solid var(--sc-ink-4);
  border-radius: var(--sc-r);
  color: var(--sc-ink);
  font-family: var(--sc-testo);
  font-size: var(--sc-t-campo);    /* 16px fissi */
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--sc-veloce) var(--sc-curva),
              box-shadow var(--sc-veloce) var(--sc-curva);
}

body.woocommerce-checkout #main textarea,
body.woocommerce-account #main textarea {
  min-height: 96px;
  resize: vertical;
}

/* Il segnaposto è un suggerimento, non un'etichetta: più tenue del testo che
   si scriverà, ma leggibile — spesso contiene un esempio del formato. */
body.woocommerce-checkout #main ::placeholder,
body.woocommerce-cart #main ::placeholder,
body.woocommerce-account #main ::placeholder {
  color: var(--sc-ink-3);
  opacity: 1;
}

/* AL FUOCO: bordo petrolio doppio + alone chiaro. Si deve vedere da mezzo
   metro dove sto scrivendo, anche di sbieco sul telefono. L'alone è
   --sc-mar-velo, non un'ombra scura: su bianco un anello scuro sembra un
   errore. */
body.woocommerce-checkout #main input.input-text:focus,
body.woocommerce-checkout #main textarea:focus,
body.woocommerce-checkout #main select:focus,
body.woocommerce-cart #main input.input-text:focus,
body.woocommerce-cart #main select:focus,
body.woocommerce-account #main input:focus,
body.woocommerce-account #main select:focus,
body.woocommerce-account #main textarea:focus {
  outline: none;
  background-color: var(--sc-fondo);
  border-color: var(--sc-mar-testo);
  box-shadow: 0 0 0 3px var(--sc-mar-velo);
}

/* RIEMPIMENTO AUTOMATICO DI CHROME.
   `color-scheme: light` in sezione 1 fa già il grosso; questo chiude i casi
   rimasti, in cui Chrome dipinge il campo di azzurrino e cambia il tono in
   mezzo a un modulo — e il cliente si insospettisce proprio mentre inserisce
   l'indirizzo. */
body.woocommerce-checkout #main input:-webkit-autofill,
body.woocommerce-checkout #main input:-webkit-autofill:hover,
body.woocommerce-checkout #main input:-webkit-autofill:focus,
body.woocommerce-account #main input:-webkit-autofill {
  -webkit-text-fill-color: var(--sc-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--sc-fondo) inset;
  box-shadow: 0 0 0 1000px var(--sc-fondo) inset;
  caret-color: var(--sc-ink);
}


/* -----------------------------------------------------------------------------
   9b · SELECT2 — le tendine di paese e provincia
   WooCommerce sostituisce i <select> di Country e Province con Select2, che
   appende la sua tendina direttamente a <body>: fuori da #main, quindi i
   selettori vanno agganciati a body.woocommerce-*.
   Il travaso aveva lasciato l'opzione evidenziata su fondo --sc-mar-scuro con
   testo --sc-ink: petrolio scuro sotto un testo quasi nero. Non si vedeva
   perché la versione di Select2 in uso non mette l'attributo su cui era
   agganciata la regola, ma era una mina innescata. Qui l'evidenza è un velo
   chiaro con testo petrolio: nessuna combinazione può finire scuro su scuro.
   -------------------------------------------------------------------------- */
body.woocommerce-checkout .select2-container--default .select2-selection--single,
body.woocommerce-cart .select2-container--default .select2-selection--single,
body.woocommerce-account .select2-container--default .select2-selection--single {
  height: 52px;
  display: flex;
  align-items: center;
  background-color: var(--sc-fondo);
  border: 1px solid var(--sc-ink-4);
  border-radius: var(--sc-r);
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered,
body.woocommerce-cart .select2-container--default .select2-selection--single .select2-selection__rendered,
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--sc-ink);
  font-size: var(--sc-t-campo);
  line-height: 1.4;
  padding-left: var(--sc-s4);
}

body.woocommerce-checkout .select2-container--default .select2-selection__placeholder {
  color: var(--sc-ink-3);
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--sc-ink-2);
}

body.woocommerce-checkout .select2-container--open .select2-selection--single {
  border-color: var(--sc-mar-testo);
  box-shadow: 0 0 0 3px var(--sc-mar-velo);
}

body.woocommerce-checkout .select2-dropdown,
body.woocommerce-cart .select2-dropdown,
body.woocommerce-account .select2-dropdown {
  background-color: var(--sc-fondo);
  border: 1px solid var(--sc-mar-testo);
  border-radius: var(--sc-r);
  box-shadow: var(--sc-ombra-2);
  color: var(--sc-ink-2);
  overflow: hidden;
}

body.woocommerce-checkout .select2-search--dropdown .select2-search__field,
body.woocommerce-cart .select2-search--dropdown .select2-search__field,
body.woocommerce-account .select2-search--dropdown .select2-search__field {
  background-color: var(--sc-fondo);
  border: 1px solid var(--sc-ink-4);
  border-radius: var(--sc-r);
  color: var(--sc-ink);
  font-size: var(--sc-t-campo);
  padding: var(--sc-s2) var(--sc-s3);
}

body.woocommerce-checkout .select2-results__option,
body.woocommerce-cart .select2-results__option,
body.woocommerce-account .select2-results__option {
  background-color: transparent;
  color: var(--sc-ink-2);
  padding: var(--sc-s3) var(--sc-s4);
}

/* L'opzione sotto il cursore o sotto la freccia della tastiera. */
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted,
body.woocommerce-cart .select2-container--default .select2-results__option--highlighted,
body.woocommerce-account .select2-container--default .select2-results__option--highlighted {
  background-color: var(--sc-mar-velo);
  color: var(--sc-mar-testo);
}

/* L'opzione già scelta: si distingue col grassetto, non con un altro fondo,
   così non si confonde con quella evidenziata. */
body.woocommerce-checkout .select2-container--default .select2-results__option[aria-selected="true"],
body.woocommerce-checkout .select2-container--default .select2-results__option[data-selected="true"] {
  background-color: var(--sc-rilievo);
  color: var(--sc-ink);
  font-weight: 600;
}


/* -----------------------------------------------------------------------------
   9c · CAMPO SBAGLIATO E MESSAGGIO DI ERRORE
   -----------------------------------------------------------------------------
   WooCommerce mette `.woocommerce-invalid` sulla <p class="form-row"> appena il
   campo perde il fuoco, e scrive il messaggio SOLO nel blocco rosso in cima
   alla pagina. Su un modulo di quindici campi quel blocco è fuori schermo:
   il cliente vede "qualcosa non va" e non sa dove.

   Qui l'errore si lega al campo in tre modi insieme:
     · il campo diventa rosso e resta rosso;
     · una barra rossa marca tutta la riga, così scorrendo l'occhio la trova;
     · sotto il campo compare una scritta sua, "Please check this field".
   L'ultima è testo generato in CSS: non traducibile con GTranslate e non
   selezionabile. Come per la pastiglia FREE, è un compromesso scelto: un
   errore muto accanto al campo costa più di una frase non traducibile su un
   negozio già in inglese.
   -------------------------------------------------------------------------- */
body.woocommerce-checkout #main .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout #main .form-row.woocommerce-invalid textarea,
body.woocommerce-checkout #main .form-row.woocommerce-invalid select,
body.woocommerce-account #main .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection--single {
  border-color: var(--sc-urg);
  border-width: 2px;
  background-color: var(--sc-urg-fondo);
}

body.woocommerce-checkout #main .form-row.woocommerce-invalid input.input-text:focus,
body.woocommerce-checkout #main .form-row.woocommerce-invalid select:focus {
  border-color: var(--sc-urg);
  box-shadow: 0 0 0 3px var(--sc-urg-fondo);
}

body.woocommerce-checkout #main .form-row.woocommerce-invalid {
  border-left: 3px solid var(--sc-urg);
  padding-left: var(--sc-s3);
  margin-left: calc((var(--sc-s3) + 3px) * -1);
}

body.woocommerce-checkout #main .form-row.woocommerce-invalid > label {
  color: var(--sc-urg);
  font-weight: 600;
}

/* La scritta accanto al campo. `::after` sulla riga, non sul campo, perché il
   campo è un elemento vuoto e non può avere figli generati. */
body.woocommerce-checkout #main .form-row.woocommerce-invalid::after {
  content: "Please check this field";
  display: block;
  margin-top: var(--sc-s2);
  color: var(--sc-urg);          /* 6,0:1 su bianco */
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Campo compilato bene: solo il bordo cambia tono. Discreto davvero — una
   spunta verde su ogni campo trasforma un modulo in un quadro di comando. */
body.woocommerce-checkout #main .form-row.woocommerce-validated input.input-text,
body.woocommerce-checkout #main .form-row.woocommerce-validated select,
body.woocommerce-checkout .form-row.woocommerce-validated .select2-selection--single {
  border-color: var(--sc-ok);
}


/* -----------------------------------------------------------------------------
   9d · CASELLE DI SPUNTA E SCELTE (Porto)
   Porto disegna le caselle con un ::before e un ::after. Su bianco il
   quadratino di serie ha un bordo #ccc che non si vede (1,5:1): gli do il
   bordo dei campi. Il pallino delle scelte singole resta TONDO — "tondo =
   scegline uno" è una convenzione più vecchia di questo sito, e romperla
   proprio davanti alla scelta di come pagare non è coraggio, è un ostacolo.
   -------------------------------------------------------------------------- */
body.woocommerce-checkout #main .porto-checkbox .porto-control-label::before,
body.woocommerce-account #main .porto-checkbox .porto-control-label::before {
  border-radius: 4px;
  border: 1px solid var(--sc-ink-4);
  background-color: var(--sc-fondo);
}

body.woocommerce-checkout #main .porto-checkbox .porto-control-label,
body.woocommerce-checkout #main .porto-radio .porto-control-label,
body.woocommerce-account #main .porto-checkbox .porto-control-label {
  color: var(--sc-ink-2);
  font-size: var(--sc-t-p);
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

/* "Ship to a different address?" — riga di comando, staccata dal resto. */
body.woocommerce-checkout #main #ship-to-different-address {
  position: relative;
  margin: var(--sc-s5) 0 var(--sc-s4);
  padding: var(--sc-s4);
  background-color: var(--sc-incasso);
  border-radius: var(--sc-r);
}

/* La casella di Porto è un ::before in posizione assoluta a left:0: dando un
   fondo al riquadro finiva SOPRA la scritta e la rendeva illeggibile.
   `!important` perché Porto appiccica a questa etichetta la utility Bootstrap
   `.ps-1`, dichiarata !important. */
body.woocommerce-checkout #main #ship-to-different-address label {
  padding-left: 30px !important;
  margin: 0;
  /* 44px: è una spunta che apre otto campi nuovi. Misurata a 390: era 25. */
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--sc-ink-2);
  cursor: pointer;
}

/* -----------------------------------------------------------------------------
   LA SPUNTA DELLA NEWSLETTER — non è un dettaglio, è la leva
   "Rimani iscritto alla newsletter per mantenere la spedizione gratuita":
   togliendola, la spedizione passa da 0 a 10 euro (vedi 7b). È l'unico posto
   del checkout dove una spunta cambia il totale, quindi è verde e ha lo
   spazio di un riquadro suo. Il bordo è pieno --sc-ok perché qui il fondo
   tinto da solo non basta a dire "questo ti conviene".
   -------------------------------------------------------------------------- */
body.woocommerce-checkout #main #newsletter_opt_in_checkout_field {
  margin-top: var(--sc-s5);
  padding: var(--sc-s4);
  background-color: var(--sc-ok-fondo);
  border: 1px solid var(--sc-ok);
  border-radius: var(--sc-r);
}

body.woocommerce-checkout #main #newsletter_opt_in_checkout_field label {
  display: flex;
  align-items: center;
  gap: var(--sc-s3);
  min-height: 44px;
  color: var(--sc-ok);            /* 5,7:1 sul suo fondo verde chiaro */
  font-weight: 600;
  margin: 0;
  cursor: pointer;
}

/* Questa NON è una casella di Porto: è nativa del browser. `accent-color` la
   tinge col gettone senza ridisegnarla, e 22px la rende toccabile. */
body.woocommerce-checkout #main #newsletter_opt_in_checkout_field input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--sc-ok);
}

body.woocommerce-checkout #main #newsletter_opt_in_checkout_field .optional {
  color: var(--sc-ok);
  opacity: 1;      /* l'opacità qui abbassava il contrasto sotto soglia */
}


/* =============================================================================
   10 · IL RIEPILOGO ORDINE (colonna destra del checkout)
   -----------------------------------------------------------------------------
   Resta appiccicato mentre si scorre il modulo: il cliente deve poter
   controllare in ogni momento quanto sta per pagare senza tornare su.
   ========================================================================== */
body.woocommerce-checkout #main .checkout-order-review {
  position: sticky;
  top: var(--sc-s5);
}

body.woocommerce-checkout #main table.review-order {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

body.woocommerce-checkout #main table.review-order th,
body.woocommerce-checkout #main table.review-order td {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sc-linea);
  padding: var(--sc-s3) 0;
  color: var(--sc-ink-2);
}

body.woocommerce-checkout #main table.review-order thead th {
  border-bottom: 1px solid var(--sc-linea-2);
  padding-bottom: var(--sc-s3);
  text-align: left;
}

body.woocommerce-checkout #main .product-checkout-wrap {
  display: flex;
  gap: var(--sc-s4);
  align-items: flex-start;
  padding: var(--sc-s4) 0;
}

body.woocommerce-checkout #main .product-checkout-wrap .product-thumbnail {
  flex: 0 0 64px;
  background-color: var(--sc-fondo);
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r);
  padding: var(--sc-s1);
}

body.woocommerce-checkout #main .product-checkout-wrap .product-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--sc-r) - 4px);
}

body.woocommerce-checkout #main .product-checkout-wrap .product-content {
  flex: 1 1 auto;
  min-width: 0;
}

body.woocommerce-checkout #main .product-checkout-wrap .product-name {
  font-family: var(--sc-disp);
  font-weight: 700;
  color: var(--sc-ink);
  line-height: 1.3;
  margin-bottom: var(--sc-s2);
}

body.woocommerce-checkout #main .product-checkout-wrap .product-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-s3);
}

body.woocommerce-checkout #main .product-checkout-wrap .product-total {
  font-family: var(--sc-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--sc-ink);
  white-space: nowrap;
}

/* Il selettore di quantità con − e + : bersagli veri, non francobolli. */
body.woocommerce-checkout #main .quantity.buttons_added {
  display: inline-flex;
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r);
  overflow: hidden;
  background-color: var(--sc-fondo);
}

body.woocommerce-checkout #main .quantity.buttons_added button.minus,
body.woocommerce-checkout #main .quantity.buttons_added button.plus {
  width: 44px;
  min-height: 44px;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: var(--sc-ink-2);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-campo);
  line-height: 1;
  cursor: pointer;
}

body.woocommerce-checkout #main .quantity.buttons_added button.minus:hover,
body.woocommerce-checkout #main .quantity.buttons_added button.plus:hover {
  background-color: var(--sc-mar-velo);
  color: var(--sc-mar-testo);
}

body.woocommerce-checkout #main .quantity.buttons_added input.qty {
  width: 56px;
  min-height: 44px;
  padding: 0;
  background-color: transparent;
  border: 0;
  border-inline: 1px solid var(--sc-linea-2);
  border-radius: 0;
  color: var(--sc-ink);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-campo);
  text-align: center;
  -moz-appearance: textfield;
}

body.woocommerce-checkout #main .quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-checkout #main .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Le righe di totale del riepilogo, stesso trattamento del carrello. */
body.woocommerce-checkout #main table.review-order tfoot th {
  text-align: left;
  font-weight: 400;
}

body.woocommerce-checkout #main table.review-order tfoot th h4 {
  font-family: var(--sc-testo);
  font-size: var(--sc-t-p);
  font-weight: 500;
  color: var(--sc-ink-2);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

body.woocommerce-checkout #main table.review-order tfoot td {
  text-align: right;
  font-family: var(--sc-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink-2);
  white-space: nowrap;
}

body.woocommerce-checkout #main tr.tax-rate th,
body.woocommerce-checkout #main tr.tax-rate td {
  color: var(--sc-ink-3);
  font-size: .9em;
}

body.woocommerce-checkout #main tr.order-total th,
body.woocommerce-checkout #main tr.order-total td {
  border-bottom: 0;
  border-top: 2px solid var(--sc-linea-2);
  padding-top: var(--sc-s4);
}

body.woocommerce-checkout #main tr.order-total th h4 {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
  margin: 0;
}

body.woocommerce-checkout #main tr.order-total td strong,
body.woocommerce-checkout #main tr.order-total td .amount {
  font-family: var(--sc-disp);
  font-size: var(--sc-t-h2);
  font-weight: 900;
  color: var(--sc-ink);
  line-height: 1;
}


/* =============================================================================
   11 · I METODI DI PAGAMENTO
   -----------------------------------------------------------------------------
   Questo blocco fa due lavori insieme:
   (a) si fa capire dal cliente;
   (b) fa da MODELLO ALL'IFRAME DI STRIPE (vedi nota in testa al file).
   Per questo #payment e .payment_box hanno un `background-color` ESPLICITO:
   è la superficie che il plugin di Stripe misura per decidere come disegnarsi.
   Il payment_box è BIANCO come i campi, così l'iframe della carta nasce dello
   stesso colore del campo che gli sta sopra.
   SE QUALCUNO LI RIMETTE A `transparent`, IL CAMPO CARTA SI ROMPE.

   Il metodo SCELTO: nel foglio precedente aveva fondo petrolio scuro e testo
   quasi nero (2,25:1 misurato). Qui è un velo chiaro con una barra petrolio a
   sinistra: si vede da lontano quale ho scelto, e il testo resta nero su
   quasi-bianco.
   ========================================================================== */
body.woocommerce-checkout #main #payment {
  background-color: var(--sc-carta);   /* esplicito: lo legge Stripe */
  border-radius: var(--sc-r);
  margin-top: var(--sc-s5);
  padding: 0;
}

body.woocommerce-checkout #main ul.wc_payment_methods {
  list-style: none;
  margin: 0 0 var(--sc-s4);
  padding: 0;
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r);
  overflow: hidden;
}

body.woocommerce-checkout #main li.wc_payment_method {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--sc-linea-2);
  background-color: var(--sc-fondo);
}

body.woocommerce-checkout #main li.wc_payment_method:last-child {
  border-bottom: 0;
}

/* Tutta la riga è cliccabile e alta 56px: sul telefono si sceglie come pagare
   col pollice, non con la punta di uno stuzzicadenti. */
body.woocommerce-checkout #main li.wc_payment_method > .porto-radio {
  margin: 0;
}

body.woocommerce-checkout #main li.wc_payment_method .porto-control-label {
  display: flex;
  align-items: center;
  gap: var(--sc-s3);
  min-height: 56px;
  padding: var(--sc-s3) var(--sc-s4) var(--sc-s3) var(--sc-s7);
  margin: 0;
  color: var(--sc-ink-2);
  font-size: var(--sc-t-p);
  font-weight: 500;
  cursor: pointer;
}

/* IL PALLINO DI SCELTA.
   Porto lo disegna con un ::before (cerchietto) e un ::after (un'immagine SVG
   del pallino pieno, disegnata per la carta bianca). Spengo l'immagine e
   ridisegno lo stato scelto con l'ombra interna: anello petrolio, centro
   bianco, cerchio pieno. È la forma che tutti riconoscono, coi nostri colori. */
body.woocommerce-checkout #main li.wc_payment_method .porto-control-label::before,
body.woocommerce-checkout #main li.wc_payment_method .porto-control-label::after {
  left: var(--sc-s4);
}

body.woocommerce-checkout #main li.wc_payment_method .porto-control-label::before {
  background-color: var(--sc-fondo);
  border: 2px solid var(--sc-ink-4);   /* 3,90:1: un cerchio che si vede */
}

body.woocommerce-checkout #main li.wc_payment_method .porto-control-label::after {
  display: none;
}

body.woocommerce-checkout #main li.wc_payment_method:has(input:checked) .porto-control-label::before {
  background-color: var(--sc-mar-vivo);
  border-color: var(--sc-mar-vivo);
  box-shadow: inset 0 0 0 3px var(--sc-fondo);
}

/* Il metodo scelto: velo petrolio e una barra piena a sinistra. Il fondo tinto
   da solo, su bianco, è troppo timido per dire "è questo"; la barra lo dice. */
body.woocommerce-checkout #main li.wc_payment_method:has(input:checked) {
  background-color: var(--sc-mar-velo);
  box-shadow: inset 3px 0 0 var(--sc-mar-vivo);
}

body.woocommerce-checkout #main li.wc_payment_method:has(input:checked) .porto-control-label {
  color: var(--sc-ink);
  font-weight: 600;
}

/* I LOGHI DEI CIRCUITI (MyBank, PayPal, carte).
   Sono SVG serviti da paypalobjects.com, disegnati per fondo bianco: il
   MyBank è blu scurissimo su trasparente.
   Il foglio precedente li incollava su un rettangolo --sc-ink — che nella
   direzione scura era chiaro e nel bianco è quasi nero: risultato, logo scuro
   su fondo scuro. Qui tornano sul bianco per cui sono nati, con un filo di
   bordo perché non galleggino sul velo del metodo scelto.
   Non li inverto e non li ricoloro: un logo di pagamento falsato è peggio di
   un logo assente. Anche qui la fiducia batte la coerenza estetica,
   dichiaratamente. */
body.woocommerce-checkout #main li.wc_payment_method .porto-control-label img {
  max-height: 26px;
  width: auto;
  background-color: var(--sc-fondo);
  border: 1px solid var(--sc-linea-2);
  border-radius: 6px;
  padding: 3px var(--sc-s2);
  filter: none;
}

/* La spiegazione del metodo (es. le coordinate del bonifico).
   Fondo BIANCO esplicito: è quello che Stripe misura. */
body.woocommerce-checkout #main .payment_box {
  background-color: var(--sc-fondo);
  border: 0;
  border-top: 1px solid var(--sc-linea-2);
  border-radius: 0;
  margin: 0;
  padding: var(--sc-s4) var(--sc-s4) var(--sc-s4) var(--sc-s7);
  color: var(--sc-ink-2);
  font-size: var(--sc-t-p);
  line-height: 1.55;
}

/* WooCommerce disegna una punta di freccia sopra il riquadro, di un colore
   che non è nessuno dei nostri. Via. */
body.woocommerce-checkout #main .payment_box::before {
  display: none;
}

body.woocommerce-checkout #main .payment_box p {
  margin: 0;
  color: var(--sc-ink-2);
}

/* Le coordinate del bonifico: sono da copiare a mano, quindi in mono e
   selezionabili con un gesto solo. */
body.woocommerce-checkout #main .payment_box .wc-bacs-bank-details,
body.woocommerce-checkout #main .payment_box ul {
  margin: var(--sc-s3) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  line-height: 1.9;
  color: var(--sc-ink);
  user-select: all;
}


/* -----------------------------------------------------------------------------
   11b · STRIPE — il campo della carta
   L'iframe si colora da sé leggendo gli elementi qui sopra. Da questa parte
   resta da: dargli spazio, non stringerlo, e vestire quello che NON è dentro
   l'iframe (errori, carte salvate).

   OGGI L'IFRAME È ALTO 0 PIXEL — guasto preesistente, non causato dalla
   grafica (verificato anche senza ?officina=1) e già segnalato. Il contenitore
   ha comunque altezza e perimetro da campo, così il giorno che il guasto viene
   chiuso il campo carta nasce già vestito come gli altri; e nel frattempo il
   cliente vede un rettangolo che sta caricando, non il vuoto.
   -------------------------------------------------------------------------- */
body.woocommerce-checkout #main #wc-stripe-upe-form,
body.woocommerce-checkout #main .wc-upe-form {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.woocommerce-checkout #main .wc-stripe-upe-element {
  min-height: 52px;
  margin-top: var(--sc-s2);
  padding: var(--sc-s2) var(--sc-s3);
  background-color: var(--sc-fondo);
  border: 1px solid var(--sc-ink-4);
  border-radius: var(--sc-r);
}

/* L'errore della carta rifiutata. È il messaggio più delicato di tutto il
   negozio: deve dire "riprova", non "hai sbagliato tu". Blocco pieno, non una
   riga rossa persa in mezzo. */
body.woocommerce-checkout #main #wc-stripe-upe-errors:not(:empty) {
  display: block;
  margin-top: var(--sc-s3);
  padding: var(--sc-s3) var(--sc-s4);
  background-color: var(--sc-urg-fondo);
  border-left: 3px solid var(--sc-urg);
  border-radius: var(--sc-r);
  color: var(--sc-urg);
  font-size: var(--sc-t-p);
  line-height: 1.5;
}

body.woocommerce-checkout #main .wc-saved-payment-methods {
  list-style: none;
  margin: 0 0 var(--sc-s3);
  padding: 0;
}

body.woocommerce-checkout #main .wc-saved-payment-methods li {
  display: flex;
  align-items: center;
  gap: var(--sc-s2);
  min-height: 44px;
  color: var(--sc-ink-2);
}

body.woocommerce-checkout #main .wc-saved-payment-methods label {
  margin: 0;
  font-size: var(--sc-t-p);
  color: var(--sc-ink-2);
  cursor: pointer;
}


/* -----------------------------------------------------------------------------
   11c · PAYPAL — i pulsanti del SDK
   Iframe di PayPal: giallo/blu PayPal, angoli tondi, impossibili da ridisegnare
   e giusto così. Solo respiro e un contenitore neutro perché non sembrino
   incollati sopra la pagina per sbaglio. Nel DOM stanno FUORI da #payment,
   attaccati in fondo a .checkout-order-review: sono fratelli del pulsante
   "Place order", non figli del blocco pagamenti.
   I due contenitori Apple Pay / Google Pay oggi restano vuoti: `:not(:empty)`
   evita che si veda un riquadro grigio senza niente dentro.
   -------------------------------------------------------------------------- */
body.woocommerce-checkout #main .ppc-button-wrapper,
body.woocommerce-checkout #main #ppc-button-ppcp-applepay,
body.woocommerce-checkout #main #ppc-button-ppcp-googlepay,
body.woocommerce-cart #main #wc-stripe-express-checkout-element {
  margin-top: var(--sc-s4);
}

/* NIENTE RIQUADRO INTORNO A PAYPAL — e vale la pena spiegare perché, perché
   la tentazione di rimetterlo tornerà.
   L'idea era incorniciare i pulsanti PayPal con un fondo neutro. Non si può
   fare in modo pulito: quando PayPal non li disegna (p.es. col bonifico
   scelto) il contenitore NON è vuoto e NON è senza iframe — dentro restano
   due iframe montati e alti ZERO. Quindi né `:not(:empty)` né `:has(iframe)`
   sanno rispondere alla domanda "c'è davvero qualcosa da incorniciare?", e
   sotto "Place order" comparivo un rettangolo grigio alto 28px con niente
   dentro (misurato nel telaio a 390).
   CSS non sa misurare un'altezza. Quindi al riquadro rinuncio: resta solo
   l'aria. Sul bianco candido i pulsanti PayPal sono già gialli e tondi, si
   distinguono da soli — la cornice non stava aggiungendo niente e poteva
   togliere. */
body.woocommerce-cart #main #wc-stripe-express-checkout-element:not(:empty) {
  padding: var(--sc-s3);
  background-color: var(--sc-incasso);
  border-radius: var(--sc-r);
}


/* -----------------------------------------------------------------------------
   11d · QUELLO CHE STA SOTTO IL PULSANTE
   La riga sulla privacy: nel vestito di serie è grigio topo e non la legge
   nessuno. Resta secondaria, ma leggibile (5,6:1).
   -------------------------------------------------------------------------- */
body.woocommerce-checkout #main .woocommerce-privacy-policy-text p,
body.woocommerce-checkout #main .woocommerce-terms-and-conditions-wrapper p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--sc-ink-3);
  margin: 0 0 var(--sc-s3);
}

body.woocommerce-checkout #main .woocommerce-privacy-policy-link,
body.woocommerce-checkout #main .woocommerce-terms-and-conditions-link {
  color: var(--sc-mar-testo);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Le righe divisorie di Porto dentro il pagamento. */
body.woocommerce-checkout #main .porto-separator .separator-line {
  border: 0;
  border-top: 1px solid var(--sc-linea-2);
  background: transparent;
  opacity: 1;
}

/* Il coupon del checkout, chiuso a fisarmonica. */
body.woocommerce-checkout #main .woocommerce-form-coupon-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-s2);
  padding: var(--sc-s3) var(--sc-s4);
  background-color: var(--sc-incasso);
  border-radius: var(--sc-r);
  color: var(--sc-ink-2);
  font-size: var(--sc-t-p);
}

/* Il colore lo mette la sezione 1b (contro `.text-v-dark` di Porto): qui
   restano forma e corpo. È un comando, non una parola in mezzo a una frase:
   44px di altezza utile perché si possa colpire col pollice. */
body.woocommerce-checkout #main .woocommerce-form-coupon-toggle .showcoupon {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sc-s2);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .12em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.woocommerce-checkout #main form.checkout_coupon {
  margin: var(--sc-s4) 0 0;
  padding: var(--sc-s5);
  background-color: var(--sc-carta);
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r);
}

body.woocommerce-checkout #main form.checkout_coupon p {
  color: var(--sc-ink-2);
}


/* =============================================================================
   12 · I MESSAGGI DI WOOCOMMERCE
   -----------------------------------------------------------------------------
   Tre stati, tre gettoni, una forma sola: barra piena a sinistra + fondo
   tinto chiaro.
   Il travaso aveva lasciato qui il guasto peggiore del foglio: `.woocommerce-info`
   aveva fondo --sc-mar-scuro (petrolio scuro) e testo --sc-ink-2 (grigio
   scuro) — 1,12:1, invisibile, con l'icona a 1,43:1. La frase
   "Please log in to your account to view this order" sulla pagina di conferma
   ordine, cioè la riga che spiega al cliente che ha pagato perché non vede
   l'ordine, era un rettangolo scuro vuoto.
   ========================================================================== */
body.woocommerce-cart #main .woocommerce-message,
body.woocommerce-cart #main .woocommerce-info,
body.woocommerce-cart #main .woocommerce-error,
body.woocommerce-checkout #main .woocommerce-message,
body.woocommerce-checkout #main .woocommerce-info,
body.woocommerce-checkout #main .woocommerce-error,
body.woocommerce-account #main .woocommerce-message,
body.woocommerce-account #main .woocommerce-info,
body.woocommerce-account #main .woocommerce-error,
body.woocommerce-order-received #main .woocommerce-message,
body.woocommerce-order-received #main .woocommerce-info,
body.woocommerce-order-received #main .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-s3);
  margin: 0 0 var(--sc-s5);
  padding: var(--sc-s4) var(--sc-s5);
  border: 0;
  border-left: 3px solid var(--sc-linea-2);
  border-radius: var(--sc-r);
  background-color: var(--sc-incasso);
  color: var(--sc-ink-2);
  font-size: var(--sc-t-p);
  line-height: 1.5;
  list-style: none;
}

/* L'icona in ::before di Porto/WooCommerce è posizionata in assoluto e sul
   nostro riquadro finiva sopra il testo: la riporto nel flusso e le do il
   colore dello stato. */
body.woocommerce-cart #main .woocommerce-message::before,
body.woocommerce-cart #main .woocommerce-info::before,
body.woocommerce-cart #main .woocommerce-error::before,
body.woocommerce-checkout #main .woocommerce-message::before,
body.woocommerce-checkout #main .woocommerce-info::before,
body.woocommerce-checkout #main .woocommerce-error::before,
body.woocommerce-account #main .woocommerce-message::before,
body.woocommerce-account #main .woocommerce-info::before,
body.woocommerce-account #main .woocommerce-error::before,
body.woocommerce-order-received #main .woocommerce-info::before,
body.woocommerce-order-received #main .woocommerce-message::before {
  position: static;
  margin: 0;
  padding: 0;
  top: auto;
  left: auto;
  font-size: 1em;
  line-height: 1;
  color: inherit;
}

/* ANDATA BENE */
body.woocommerce-cart #main .woocommerce-message,
body.woocommerce-checkout #main .woocommerce-message,
body.woocommerce-account #main .woocommerce-message,
body.woocommerce-order-received #main .woocommerce-message {
  border-left-color: var(--sc-ok);
  background-color: var(--sc-ok-fondo);
  color: var(--sc-ok);
}

body.woocommerce-cart #main .woocommerce-message strong,
body.woocommerce-checkout #main .woocommerce-message strong,
body.woocommerce-account #main .woocommerce-message strong {
  color: var(--sc-ok);
}

/* DA SAPERE — velo petrolio, testo scuro. Mai il contrario. */
body.woocommerce-cart #main .woocommerce-info,
body.woocommerce-checkout #main .woocommerce-info,
body.woocommerce-account #main .woocommerce-info,
body.woocommerce-order-received #main .woocommerce-info {
  border-left-color: var(--sc-mar-vivo);
  background-color: var(--sc-mar-velo);
  color: var(--sc-ink-2);          /* 8,2:1 sul velo */
}

body.woocommerce-cart #main .woocommerce-info::before,
body.woocommerce-checkout #main .woocommerce-info::before,
body.woocommerce-account #main .woocommerce-info::before,
body.woocommerce-order-received #main .woocommerce-info::before {
  color: var(--sc-mar-testo);      /* 5,3:1 sul velo */
}

/* NON VA */
body.woocommerce-cart #main .woocommerce-error,
body.woocommerce-checkout #main .woocommerce-error,
body.woocommerce-account #main .woocommerce-error,
body.woocommerce-order-received #main .woocommerce-error {
  border-left-color: var(--sc-urg);
  background-color: var(--sc-urg-fondo);
  color: var(--sc-urg);
  flex-direction: column;
  align-items: flex-start;
}

body.woocommerce-cart #main .woocommerce-error li,
body.woocommerce-checkout #main .woocommerce-error li,
body.woocommerce-account #main .woocommerce-error li {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--sc-urg);
  font-weight: 500;
}

/* Il collegamento dentro un messaggio deve restare distinguibile dal testo
   colorato che lo circonda: sottolineato, sempre. */
body.woocommerce-cart #main .woocommerce-message a:not(.button),
body.woocommerce-cart #main .woocommerce-info a:not(.button),
body.woocommerce-checkout #main .woocommerce-message a:not(.button),
body.woocommerce-checkout #main .woocommerce-info a:not(.button),
body.woocommerce-account #main .woocommerce-info a:not(.button),
body.woocommerce-order-received #main .woocommerce-info a:not(.button) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* Il pulsante che a volte WooCommerce infila nel messaggio (es. "View cart").
   `currentColor` sul bordo: il pulsante prende il colore del suo messaggio e
   non serve una regola per ciascuno dei tre stati. */
body.woocommerce-cart #main .woocommerce-message .button,
body.woocommerce-checkout #main .woocommerce-message .button,
body.woocommerce-account #main .woocommerce-info .button,
body.woocommerce-order-received #main .woocommerce-info .button {
  margin-left: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sc-s4);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--sc-r);
  color: inherit;
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}


/* =============================================================================
   13 · CARRELLO VUOTO
   -----------------------------------------------------------------------------
   Non è una pagina d'errore: è un invito a tornare al negozio.
   ========================================================================== */
body.woocommerce-cart #main .cart-empty {
  font-family: var(--sc-disp);
  font-size: var(--sc-t-h2);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--sc-ink);
  text-align: center;
  margin-bottom: var(--sc-s5);
}

body.woocommerce-cart #main .return-to-shop {
  text-align: center;
}

body.woocommerce-cart #main .return-to-shop .button {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--sc-s6);
  background-color: var(--sc-mar-vivo);
  border: 1px solid var(--sc-mar-vivo);
  border-radius: var(--sc-r);
  color: var(--sc-mar-ombra);
  font-family: var(--sc-disp);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--sc-ombra-mar);
}

body.woocommerce-cart #main .return-to-shop .button:hover {
  background-color: var(--sc-mar-scuro);
  border-color: var(--sc-mar-scuro);
  color: var(--sc-mar-ombra);
}


/* =============================================================================
   14 · AREA CLIENTE
   -----------------------------------------------------------------------------
   Menu a sinistra come indice di un raccoglitore: voci in mono, la voce
   corrente marcata da una barra e non solo da un grassetto.
   NOTA ONESTA: le pagine dell'area cliente da utente COLLEGATO (bacheca,
   ordini, indirizzi) non sono state provate a schermo — non ho credenziali di
   un cliente e non devo crearne. Sono vestite sui selettori standard di
   WooCommerce e di Porto, e vanno guardate al primo accesso vero.
   ========================================================================== */
body.woocommerce-account #main .woocommerce-MyAccount-navigation {
  background-color: var(--sc-carta);
  border: 0;
  border-radius: var(--sc-r);
  box-shadow: var(--sc-ombra-1);
  padding: var(--sc-s4);
  margin-bottom: var(--sc-s5);
}

body.woocommerce-account #main .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.woocommerce-account #main .woocommerce-MyAccount-navigation li {
  margin: 0;
  border-bottom: 1px solid var(--sc-linea);
}

body.woocommerce-account #main .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: 0;
}

body.woocommerce-account #main .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--sc-s3) var(--sc-s3) var(--sc-s3) var(--sc-s4);
  border-left: 2px solid transparent;
  border-radius: 0 var(--sc-r) var(--sc-r) 0;
  color: var(--sc-ink-2);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--sc-veloce) var(--sc-curva),
              border-color var(--sc-veloce) var(--sc-curva),
              background-color var(--sc-veloce) var(--sc-curva);
}

body.woocommerce-account #main .woocommerce-MyAccount-navigation li a:hover {
  color: var(--sc-mar-testo);
  border-left-color: var(--sc-quota);
  background-color: var(--sc-fondo);
}

body.woocommerce-account #main .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--sc-mar-testo);
  font-weight: 600;
  border-left-color: var(--sc-mar-vivo);
  background-color: var(--sc-mar-velo);
}

body.woocommerce-account #main .woocommerce-MyAccount-content {
  color: var(--sc-ink-2);
}

body.woocommerce-account #main .woocommerce-MyAccount-content p {
  color: var(--sc-ink-2);
  line-height: 1.6;
}

body.woocommerce-account #main .woocommerce-MyAccount-content a:not(.button) {
  color: var(--sc-mar-testo);
}

/* La tabella degli ordini */
body.woocommerce-account #main table.my_account_orders {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

body.woocommerce-account #main table.my_account_orders th {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sc-linea-2);
  padding: 0 var(--sc-s3) var(--sc-s3);
  text-align: left;
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
}

body.woocommerce-account #main table.my_account_orders td {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sc-linea);
  padding: var(--sc-s4) var(--sc-s3);
  color: var(--sc-ink-2);
  vertical-align: middle;
}

body.woocommerce-account #main table.my_account_orders td.woocommerce-orders-table__cell-order-number a,
body.woocommerce-account #main table.my_account_orders td.woocommerce-orders-table__cell-order-total {
  font-family: var(--sc-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink);
}

body.woocommerce-account #main table.my_account_orders td.woocommerce-orders-table__cell-order-status {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sc-ink-2);
}

/* Gli indirizzi salvati */
body.woocommerce-account #main .woocommerce-Address {
  margin-bottom: var(--sc-s5);
}

body.woocommerce-account #main .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sc-s3);
  padding-bottom: var(--sc-s3);
  border-bottom: 1px solid var(--sc-linea-2);
  margin-bottom: var(--sc-s3);
}

body.woocommerce-account #main .woocommerce-Address address,
body.woocommerce-account #main .myaccount_address {
  font-style: normal;
  line-height: 1.7;
  color: var(--sc-ink-2);
}

/* I riquadri della bacheca */
body.woocommerce-account #main .box-with-icon,
body.woocommerce-account #main .featured-boxes-style-5 .featured-box {
  background-color: var(--sc-carta);
  border: 0;
  border-radius: var(--sc-r);
  box-shadow: var(--sc-ombra-1);
}

body.woocommerce-account #main .box-with-icon .icon-featured {
  color: var(--sc-mar-testo);
}

body.woocommerce-account #main .account-text-user strong {
  color: var(--sc-ink);
}


/* =============================================================================
   15 · LOGIN E REGISTRAZIONE
   -----------------------------------------------------------------------------
   ATTENZIONE: su questo negozio l'acquisto come ospite è SPENTO. Questa non è
   una pagina accessoria, è un passaggio obbligato prima di pagare. Vestita
   male, gli ordini si fermano qui.
   Il pulsante è lo stesso oggetto di "Proceed to checkout" e "Place order":
   sta nella sezione 8 insieme a loro, non qui, apposta perché non possano
   scollarsi l'uno dall'altro.
   ========================================================================== */
body.woocommerce-account #main form.woocommerce-form-login,
body.woocommerce-account #main form.register {
  margin: 0;
  padding: 0;
  border: 0;
}

body.woocommerce-account #main form.woocommerce-form-login h3,
body.woocommerce-account #main form.register h3 {
  font-family: var(--sc-disp);
  font-size: var(--sc-t-h2);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--sc-ink);
  margin: 0 0 var(--sc-s5);
}

/* "Remember me" e "Forgot Password?" sulla stessa riga: la spunta a sinistra,
   il collegamento a destra, tutti e due alti 44px. */
body.woocommerce-account #main .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-s2);
  min-height: 44px;
  color: var(--sc-ink-2);
  margin: 0;
}

body.woocommerce-account #main .woocommerce-form-login__rememberme input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--sc-mar-vivo);
}

body.woocommerce-account #main .woocommerce-LostPassword a,
body.woocommerce-account #main .lost_password a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* -----------------------------------------------------------------------------
   15b · IL COMANDO CHE MOSTRA LA PASSWORD
   WooCommerce infila dopo ogni campo password un <button class=
   "show-password-input"> in posizione ASSOLUTA, che va agganciato a un
   antenato posizionato: nel vestito di Porto quell'antenato non c'è e il
   pulsante scivola SOTTO il campo (la sezione 9 mette `position: relative`
   sulla .form-row proprio per questo).

   E L'ICONA NON C'È PROPRIO. WooCommerce la disegna con un ::before che carica
   un SVG nero da un data:URI, ma quella regola sta in woocommerce-layout.css,
   che Porto NON mette in coda: misurato a schermo, il pulsante esce col fondo
   e il bordo del bottone di sistema, cioè senza nessuno stile di WooCommerce.
   Renderlo trasparente lo avrebbe reso invisibile: un comando che c'è ma non
   si vede è peggio di un comando brutto.
   Quindi al posto dell'icona c'è una PAROLA in mono maiuscolo — il linguaggio
   di tutta questa direzione. SHOW quando la password è coperta, HIDE quando è
   scoperta (WooCommerce aggiunge `.display-password` al pulsante).
   -------------------------------------------------------------------------- */
body.woocommerce-account #main .show-password-input,
body.woocommerce-checkout #main .show-password-input {
  position: absolute;
  right: 1px;
  bottom: 1px;
  top: auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 50px;
  padding: 0 var(--sc-s3);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--sc-linea-2);
  border-radius: 0 var(--sc-r) var(--sc-r) 0;
  color: var(--sc-ink-3);
  cursor: pointer;
}

body.woocommerce-account #main .show-password-input::before,
body.woocommerce-checkout #main .show-password-input::before {
  content: "Show";
  display: block;
  width: auto;
  height: auto;
  background-image: none;
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.woocommerce-account #main .show-password-input.display-password::before,
body.woocommerce-checkout #main .show-password-input.display-password::before {
  content: "Hide";
}

body.woocommerce-account #main .show-password-input:hover,
body.woocommerce-account #main .show-password-input.display-password,
body.woocommerce-checkout #main .show-password-input:hover,
body.woocommerce-checkout #main .show-password-input.display-password {
  color: var(--sc-mar-testo);
}

/* Il testo digitato non deve finire sotto il comando. */
body.woocommerce-account #main input[type="password"],
body.woocommerce-checkout #main input[type="password"] {
  padding-right: 84px;
}


/* =============================================================================
   16 · ORDINE RICEVUTO
   -----------------------------------------------------------------------------
   L'unica pagina del percorso dove il cliente ha già pagato. Qui il lavoro è
   uno solo: rassicurare. Numero d'ordine grande e copiabile, totale chiaro,
   verde perché è andata bene.
   ========================================================================== */
body.woocommerce-order-received #main .woocommerce-thankyou-order-received {
  display: block;
  padding: var(--sc-s6) var(--sc-s5);
  background-color: var(--sc-ok-fondo);
  border: 1px solid var(--sc-ok);
  border-radius: var(--sc-r);
  color: var(--sc-ok);
  font-family: var(--sc-disp);
  font-size: var(--sc-t-h2);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  margin-bottom: var(--sc-s6);
}

body.woocommerce-order-received #main .order-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background-color: var(--sc-linea-2);
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r);
  overflow: hidden;
  margin: 0 0 var(--sc-s6);
  padding: 0;
  list-style: none;
}

body.woocommerce-order-received #main .order-info .order-item {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: var(--sc-s2);
  margin: 0;
  padding: var(--sc-s4);
  background-color: var(--sc-carta);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sc-ink-3);       /* era --sc-ink-4: 3,90:1, sotto soglia */
  border: 0;
}

body.woocommerce-order-received #main .order-info .order-item strong {
  font-family: var(--sc-disp);
  font-size: var(--sc-t-h3);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sc-ink);
  user-select: all;   /* il numero d'ordine si seleziona con un clic */
}

/* Lo stato dell'ordine: `.order-status` È il <strong>, non il suo genitore.
   Qui vince il verde sul petrolio: su questa pagina lo stato non è un dato fra
   i tanti, è la risposta alla domanda "è andata bene?". `!important` contro
   `.text-primary` di Bootstrap. */
body.woocommerce-order-received #main .order-info strong.order-status {
  color: var(--sc-ok) !important;
  text-transform: uppercase;
}

body.woocommerce-order-received #main .woocommerce-order h2,
body.woocommerce-order-received #main .woocommerce-column__title {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
  padding-bottom: var(--sc-s3);
  border-bottom: 1px solid var(--sc-linea-2);
  margin: var(--sc-s6) 0 var(--sc-s4);
}

/* Il riepilogo dell'ordine non sta dentro nessun .box-content: senza un
   contorno galleggia in mezzo al vuoto. Gli do la carta degli altri riquadri. */
body.woocommerce-order-received #main table.woocommerce-table--order-details,
body.woocommerce-order-received #main table.order_details {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--sc-carta);
  border: 0;
  border-radius: var(--sc-r);
  box-shadow: var(--sc-ombra-1);
  overflow: hidden;
}

body.woocommerce-order-received #main table.order_details thead th,
body.woocommerce-order-received #main table.woocommerce-table--order-details thead th {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
}

body.woocommerce-order-received #main table.order_details tfoot th,
body.woocommerce-order-received #main table.woocommerce-table--order-details tfoot th {
  text-align: left;
  color: var(--sc-ink-2);
}

body.woocommerce-order-received #main table.order_details td:last-child,
body.woocommerce-order-received #main table.woocommerce-table--order-details td:last-child,
body.woocommerce-order-received #main table.order_details tfoot td,
body.woocommerce-order-received #main table.woocommerce-table--order-details tfoot td {
  text-align: right;
  font-family: var(--sc-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink);
}

body.woocommerce-order-received #main table.order_details th,
body.woocommerce-order-received #main table.order_details td,
body.woocommerce-order-received #main table.woocommerce-table--order-details th,
body.woocommerce-order-received #main table.woocommerce-table--order-details td {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sc-linea);
  padding: var(--sc-s4);
  color: var(--sc-ink-2);
}

/* Il totale della conferma è l'ultima riga del piede: è la cifra che il
   cliente ricontrollerà, quindi si legge come quella del carrello. */
body.woocommerce-order-received #main table.order_details tfoot tr:last-child th,
body.woocommerce-order-received #main table.woocommerce-table--order-details tfoot tr:last-child th,
body.woocommerce-order-received #main table.order_details tfoot tr:last-child td,
body.woocommerce-order-received #main table.woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: 0;
  border-top: 2px solid var(--sc-linea-2);
  color: var(--sc-ink);
  font-weight: 700;
}

body.woocommerce-order-received #main .woocommerce-thankyou-order-failed {
  display: block;
  padding: var(--sc-s5);
  background-color: var(--sc-urg-fondo);
  border-left: 3px solid var(--sc-urg);
  border-radius: var(--sc-r);
  color: var(--sc-urg);
}


/* =============================================================================
   17 · IL MINI-CARRELLO NELL'INTESTAZIONE
   -----------------------------------------------------------------------------
   QUI CI SI SBAGLIA FACILE — due volte.
   (1) Non è il widget di WooCommerce: è il carrello di Elementor Pro in
       modalità pannello laterale, tutto <div> e classi .elementor-menu-cart__*.
       Nel DOM vero non ci sono né <ul> né <li>: `ul.woocommerce-mini-cart li`
       non aggancia niente. Le classi buone, lette a pannello aperto:
         .elementor-menu-cart__main            il pannello che entra da destra
         .elementor-menu-cart__products        l'elenco
         .elementor-menu-cart__product         una riga (un <div>)
           …__product-image / -name / -price / -remove
         .elementor-menu-cart__subtotal        il totale
         .elementor-menu-cart__footer-buttons  i due pulsanti
   (2) 01-base ha GIÀ regole su queste stesse classi, prefissate con #header.
       Senza lo stesso prefisso qui, 01-base vince per specificità e questa
       sezione è inutile. Questo foglio carica dopo: a parità di specificità
       vinco io, ma il prefisso #header non è facoltativo.

   Queste regole NON sono agganciate a body.woocommerce-*: il mini-carrello sta
   su ogni pagina del sito ed è mio anche lì. La LEVETTA in alto (icona, cifra,
   pallino del contatore) resta invece di 01-base: due fogli che si contendono
   lo stesso bottone è esattamente come si ottiene un bottone illeggibile.
   ========================================================================== */
#header .elementor-menu-cart__container .elementor-menu-cart__main {
  background-color: var(--sc-fondo);
  border-left: 1px solid var(--sc-linea-2);
  box-shadow: var(--sc-ombra-3);
  color: var(--sc-ink-2);
  padding: var(--sc-s5);
}

#header .elementor-menu-cart__close-button-custom,
#header .elementor-menu-cart__close-button {
  width: 44px;
  height: 44px;
  border-radius: var(--sc-r);
  color: var(--sc-ink-2);
}

#header .elementor-menu-cart__close-button-custom:hover,
#header .elementor-menu-cart__close-button:hover {
  background-color: var(--sc-incasso);
  color: var(--sc-ink);
}

#header .elementor-menu-cart__close-button-custom svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* --- una riga di prodotto ------------------------------------------------
   NON toccare il modo di disporre gli elementi: Elementor impagina questa riga
   con una griglia sua, e l'immagine, il nome, il prezzo e la crocetta stanno
   in celle definite dal widget. Provato: mettendo `display: flex` qui,
   l'immagine si prende tutta la riga e NOME E PREZZO SPARISCONO — schiacciati
   a larghezza zero. Il pannello resta bello e non dice più cosa hai comprato.
   Qui si danno solo colori, fili e misure dei bersagli. L'impaginazione è
   roba di Elementor.
   ------------------------------------------------------------------------- */
#header .elementor-menu-cart__product {
  padding: var(--sc-s4) 0;
  border-bottom: 1px solid var(--sc-linea);
}

#header .elementor-menu-cart__product:last-child {
  border-bottom: 0;
}

#header .elementor-menu-cart__product-image {
  background-color: var(--sc-fondo);
  border: 1px solid var(--sc-linea-2);
  border-radius: var(--sc-r);
  overflow: hidden;
}

#header .elementor-menu-cart__product-image img {
  display: block;
  width: 100%;
  height: auto;
}

#header .elementor-menu-cart__product-name,
#header .elementor-menu-cart__product-name a {
  color: var(--sc-ink);
  font-family: var(--sc-disp);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

#header .elementor-menu-cart__product-name a:hover {
  color: var(--sc-mar-testo);
}

/* "1 × €1.00": è una quota, quindi mono. */
#header .elementor-menu-cart__product-price,
#header .elementor-menu-cart__product-price .quantity {
  font-family: var(--sc-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink-2);
}

#header .elementor-menu-cart__product-price .amount,
#header .elementor-menu-cart__product-price .woocommerce-Price-amount {
  color: var(--sc-ink);
  font-weight: 600;
}

/* Togliere una riga: il bersaglio è il link, che porto a 44px.
   Il contenitore che Elementor stampa ne misura 22 e lo lascio così: il link
   più grande sborda, ma resta cliccabile per intero (niente overflow nascosto)
   e soprattutto la cella della griglia non si deforma. Dare 44px anche al
   contenitore sembrava più pulito e spostava la crocetta fuori posto. */
#header .elementor-menu-cart__product-remove a,
#header .elementor-menu-cart__product-remove .remove_from_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--sc-r);
  color: var(--sc-ink-3);
  text-decoration: none;
}

#header .elementor-menu-cart__product-remove a:hover,
#header .elementor-menu-cart__product-remove .remove_from_cart_button:hover {
  background-color: var(--sc-urg-fondo);
  color: var(--sc-urg);
}

/* --- il totale ------------------------------------------------------------ */
#header .elementor-menu-cart__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sc-s3);
  margin: var(--sc-s4) 0;
  padding-top: var(--sc-s4);
  border-top: 2px solid var(--sc-linea-2);
  color: var(--sc-ink-2);
}

#header .elementor-menu-cart__subtotal strong {
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
}

#header .elementor-menu-cart__subtotal .amount,
#header .elementor-menu-cart__subtotal .woocommerce-Price-amount {
  font-family: var(--sc-disp);
  font-size: var(--sc-t-h3);
  font-weight: 900;
  color: var(--sc-ink);
}

/* --- i due pulsanti -------------------------------------------------------
   Uno solo pieno. 01-base riempie di petrolio OGNI `#header .elementor-button`:
   qui i pulsanti sono due, e pieni tutti e due si annullano a vicenda.
   "View cart" torna a essere un contorno; "Checkout" resta il pieno, perché è
   l'unico che porta avanti — ed è lo stesso pulsante della sezione 8.
   ------------------------------------------------------------------------- */
#header .elementor-menu-cart__footer-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--sc-s2);
  margin: 0;
}

#header .elementor-menu-cart__footer-buttons .elementor-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border-radius: var(--sc-r);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}

#header .elementor-menu-cart__footer-buttons .elementor-button--view-cart {
  background-color: var(--sc-fondo);
  border: 1px solid var(--sc-linea-2);
  color: var(--sc-ink-2);
}

#header .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
  background-color: var(--sc-mar-velo);
  border-color: var(--sc-mar-testo);
  color: var(--sc-mar-testo);
}

#header .elementor-menu-cart__footer-buttons .elementor-button--checkout {
  min-height: 52px;
  background-color: var(--sc-mar-vivo);
  border: 1px solid var(--sc-mar-vivo);
  color: var(--sc-mar-ombra);
  font-family: var(--sc-disp);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .08em;
}

#header .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
  background-color: var(--sc-mar-scuro);
  border-color: var(--sc-mar-scuro);
  color: var(--sc-mar-ombra);
}

/* --- carrello vuoto -------------------------------------------------------- */
#header .elementor-menu-cart__empty-message,
#header .woocommerce-mini-cart__empty-message {
  color: var(--sc-ink-2);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--sc-s6) 0;
}


/* =============================================================================
   18 · TELEFONO — 390px
   -----------------------------------------------------------------------------
   Provato a 390 di larghezza con un prodotto vero dentro. Tre cose: la tabella
   del carrello smette di essere una tabella e diventa una scheda; i pulsanti
   restano larghi tutta la riga; niente scende sotto i 44px.
   ========================================================================== */
@media (max-width: 767px) {

  body.woocommerce-cart #main,
  body.woocommerce-checkout #main,
  body.woocommerce-account #main,
  body.woocommerce-order-received #main {
    padding-block: var(--sc-s5) var(--sc-s7);
  }

  body.woocommerce-cart #main .box-content,
  body.woocommerce-checkout #main .box-content,
  body.woocommerce-account #main .box-content,
  body.woocommerce-order-received #main .box-content,
  body.woocommerce-cart #main .cart_totals .card,
  body.woocommerce-checkout #main .checkout-order-review .box-content {
    padding: var(--sc-s4);
  }

  /* La tabella del carrello diventa una scheda per prodotto. */
  body.woocommerce-cart #main table.cart-table thead {
    display: none;
  }

  body.woocommerce-cart #main table.cart-table,
  body.woocommerce-cart #main table.cart-table tbody,
  body.woocommerce-cart #main tr.cart_item,
  body.woocommerce-cart #main tr.cart_item td {
    display: block;
    width: 100%;
  }

  body.woocommerce-cart #main tr.cart_item {
    position: relative;
    margin-bottom: var(--sc-s4);
    padding: var(--sc-s4);
    background-color: var(--sc-fondo);
    border: 1px solid var(--sc-linea-2);
    border-radius: var(--sc-r);
  }

  body.woocommerce-cart #main tr.cart_item td {
    border-bottom: 0;
    padding: var(--sc-s2) 0;
    text-align: left;
  }

  body.woocommerce-cart #main tr.cart_item td.product-thumbnail {
    padding-top: 0;
  }

  body.woocommerce-cart #main td.product-thumbnail .position-relative {
    width: 96px;
    background-color: var(--sc-incasso);
  }

  /* SENZA INTESTAZIONI DI COLONNA, UN NUMERO DA SOLO NON DICE COSA SIA.
     Il modello di WooCommerce mette `data-title="Subtotal"` sulla cella del
     subtotale — e SOLO su quella. Prezzo e quantità resterebbero due numeri
     muti uno sotto l'altro, e su un carrello con più righe si confondono.
     Quelle due etichette le scrivo in CSS, con le stesse parole
     dell'intestazione della tabella su schermo grande.
     Stesso compromesso della pastiglia FREE e del messaggio d'errore: testo
     generato, non traducibile, non selezionabile. Fra un numero senza nome e
     un'etichetta non traducibile su un sito già tutto in inglese, scelgo
     l'etichetta. La soluzione giusta è un `data-title` nel modello PHP di
     Porto, che non è roba di questo foglio. */
  body.woocommerce-cart #main tr.cart_item td.product-price,
  body.woocommerce-cart #main tr.cart_item td.product-subtotal,
  body.woocommerce-cart #main tr.cart_item td.product-quantity {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sc-s3);
    text-align: right;
    border-top: 1px solid var(--sc-linea);
    padding-top: var(--sc-s3);
    margin-top: var(--sc-s2);
  }

  body.woocommerce-cart #main tr.cart_item td.product-price::before,
  body.woocommerce-cart #main tr.cart_item td.product-subtotal::before,
  body.woocommerce-cart #main tr.cart_item td.product-quantity::before {
    font-family: var(--sc-mono);
    font-size: var(--sc-t-mono);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sc-ink-3);       /* era --sc-ink-4: sotto soglia */
    white-space: nowrap;
  }

  body.woocommerce-cart #main tr.cart_item td.product-price::before    { content: "Unit price"; }
  body.woocommerce-cart #main tr.cart_item td.product-quantity::before { content: "Quantity"; }
  body.woocommerce-cart #main tr.cart_item td.product-subtotal::before { content: attr(data-title); }

  /* Sul telefono il subtotale di riga è l'unico numero che conta davvero:
     cresce, così si legge scorrendo col pollice. */
  body.woocommerce-cart #main tr.cart_item td.product-subtotal {
    font-size: var(--sc-t-h3);
    border-top-color: var(--sc-linea-2);
  }

  /* La crocetta torna dentro la scheda, in alto a destra. Sul telefono CRESCE
     invece di rimpicciolirsi: 44px pieni, misurati nel telaio a 390. È il
     comando con cui si toglie un articolo, e sbagliare mira qui è un motivo
     documentato di abbandono del carrello. */
  body.woocommerce-cart #main a.remove.remove-product,
  body.woocommerce-checkout #main .review-order a.remove.remove-product {
    top: -10px;
    right: -10px;
    width: 44px;
    height: 44px;
    font-size: 15px;
  }

  body.woocommerce-cart #main td.actions {
    padding: var(--sc-s4) 0 0;
  }

  body.woocommerce-cart #main #panel-cart-discount,
  body.woocommerce-cart #main .coupon {
    flex-direction: column;
    align-items: stretch;
  }

  /* In colonna, `flex: 1 1 auto` faceva crescere il campo del coupon fino a
     riempire lo spazio libero: usciva una casella alta 120px per otto
     caratteri. In verticale la crescita va spenta. */
  body.woocommerce-cart #main .coupon,
  body.woocommerce-cart #main .coupon #coupon_code {
    flex: 0 0 auto;
  }

  body.woocommerce-cart #main #panel-cart-discount > button,
  body.woocommerce-cart #main .coupon > button {
    width: 100%;
  }

  /* I riquadri appiccicati si staccano: su un telefono rubano mezzo schermo. */
  body.woocommerce-cart #main .cart_totals .card,
  body.woocommerce-checkout #main .checkout-order-review {
    position: static;
  }

  /* Nome e cognome su una riga sola: su 390px due colonne fanno campi da
     170px e nessuno ci scrive dentro comodo. */
  body.woocommerce-checkout #main .form-row-first,
  body.woocommerce-checkout #main .form-row-last {
    float: none;
    width: 100%;
  }

  /* Il riepilogo ordine va SOPRA il modulo? No: lascio l'ordine del DOM
     (prima l'indirizzo, poi il riepilogo, poi il pagamento) perché è la
     sequenza che il cliente si aspetta, e cambiarla con `order` rompe la
     navigazione da tastiera. */

  body.woocommerce-checkout #main .product-checkout-wrap {
    gap: var(--sc-s3);
  }

  body.woocommerce-checkout #main .product-checkout-wrap .product-price {
    flex-wrap: wrap;
  }

  /* Il metodo di pagamento: su 390px il rientro da --sc-s7 mangiava metà
     della riga e "Credit / Debit Card" andava a capo sotto il pallino. */
  body.woocommerce-checkout #main li.wc_payment_method .porto-control-label,
  body.woocommerce-checkout #main .payment_box {
    padding-left: var(--sc-s6);
  }

  body.woocommerce-order-received #main .order-info .order-item {
    flex: 1 1 100%;
  }

  body.woocommerce-account #main .woocommerce-MyAccount-navigation {
    padding: var(--sc-s3);
  }

  /* Il pannello del mini-carrello a tutta larghezza meno un dito, così si
     vede che è un pannello e si può chiudere toccando fuori. */
  #header .elementor-menu-cart__container .elementor-menu-cart__main {
    padding: var(--sc-s4);
  }
}


/* =============================================================================
   19 · STAMPA — la conferma d'ordine finisce spesso nella stampante
   -----------------------------------------------------------------------------
   Su carta il vestito si toglie: niente carta color carta, niente ombre.
   ========================================================================== */
@media print {
  /* Unico punto del foglio con colori letterali invece dei gettoni, e a ragion
     veduta: nero su bianco non è un colore di marca, è l'assenza di vestito. */
  body.woocommerce-order-received,
  body.woocommerce-order-received #main,
  body.woocommerce-order-received #main .box-content,
  body.woocommerce-order-received #main .order-info .order-item,
  body.woocommerce-order-received #main table.order_details,
  body.woocommerce-order-received #main table.woocommerce-table--order-details {
    background: #fff !important;
    background-image: none !important;
    color: #000 !important;
    border-color: #999 !important;
    box-shadow: none !important;
  }

  body.woocommerce-order-received #main .woocommerce-thankyou-order-received,
  body.woocommerce-order-received #main .order-info .order-item strong,
  body.woocommerce-order-received #main .order-info strong.order-status {
    color: #000 !important;
  }
}