/* ===========================================================================
   WooCommerce — carrello e checkout.

   Origine: gli override del tema di un progetto precedente, che l'utente usa e vuole identici qui.
   I template sono copiati come sono; il CSS invece e' stato riportato sui
   token di questo progetto — un progetto precedente usa un suo set di variabili (--red, --soft,
   --line) che qui non esiste, e copiarlo tale e quale avrebbe dato un checkout
   scolorito, con ogni valore ricaduto su `initial`.

   Si carica solo dove serve (vedi sv_enqueue_assets): sono ~400 righe che non
   hanno motivo di stare su ogni pagina del sito.

   ---- Le misure del testo, e perché sono queste ----------------------------

   ⚠️ Questo foglio arriva da un altro progetto, con una scala tipografica sua:
   le misure erano scritte a mano fra 11 e 15px, mentre il resto del sito sta
   su 16 di corpo, 19 di lead, 26 di h3. Il risultato era un checkout che
   «sembrava più piccolo» senza che si capisse perché — e sembrare più piccolo,
   sulla pagina in cui si scrivono i dati di pagamento, si legge come «meno
   importante».

   La scala di riferimento è quella di sv-base.css. Qui dentro:

     16px  campi da compilare, avvisi, nome del prodotto nel carrello
     15px  etichette secondarie, righe del riepilogo, totali parziali
     14px  etichette dei campi, note
     13px  micro-etichette in maiuscolo, note a piè di riquadro
     22px  titoli di sezione (h4 del tema)
     19px  il totale da pagare

   ⚠️ **I campi non scendono mai sotto i 16px.** Non è una scelta estetica: iOS
   Safari ingrandisce la pagina da solo quando si tocca un campo più piccolo di
   16px, e il checkout salta di scala mentre si sta scrivendo l'indirizzo. Chi
   abbassa quel valore per «farlo stare meglio» rompe il mobile senza vederlo
   dal desktop.

   Si controlla con `bash .pw/run-node.sh misura-testo.js`, che mette le misure
   del checkout accanto a quelle di una pagina normale, per ruolo.
   =========================================================================== */

/* ============================================================
   CARRELLO / CHECKOUT / ACCOUNT
   ============================================================ */
.woocommerce table.shop_table {
  border: 1px solid var(--border); border-radius: 6px; border-collapse: separate; border-spacing: 0;
}
.woocommerce table.shop_table th { background: var(--bg-alt); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: 14px 16px; }
.woocommerce table.shop_table td { padding: 16px; border-top: 1px solid var(--border); }
.woocommerce .cart_totals h2, .woocommerce-checkout #order_review_heading { font-size: 22px; font-weight: 800; margin-bottom: 12px; }
/* "Vai al checkout" è lo stesso bottone di "Effettua ordine": la regola
   condivisa sta più in basso, nella sezione Pagamento. */

.woocommerce form .form-row label { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select,
.woocommerce .woocommerce-form-login input, .woocommerce .woocommerce-form-register input,
.woocommerce #order_review input, .select2-container .select2-selection {
  width: 100%; font-family: var(--font-sans); font-size: 16px; padding: 12px 13px;
  border: 1.5px solid var(--border-soft); border-radius: var(--radius-s); background: #fff; color: var(--ink);
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--ink); outline: 0; }

/* Paese e provincia non sono `select` normali: WooCommerce li sostituisce con
   selectWoo (Select2), che nasconde il campo vero e disegna al suo posto una
   catasta di `span` con misure proprie. La riga sopra veste il guscio esterno,
   ma dentro restano un `padding` e una `line-height` di Select2 che portavano
   il campo a 60px contro i 45px degli altri: affiancati a un campo di testo la
   differenza si vede subito. Qui l'interno viene azzerato e la freccia
   ricentrata, così l'altezza torna a farla il `padding` del guscio. */
.select2-container .select2-selection--single { height: auto; }
.select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0; line-height: normal; font-size: 16px; color: var(--ink);
}
.select2-container .select2-selection--single .select2-selection__arrow {
  height: auto; top: 0; bottom: 0; right: 10px;
}
.select2-container--open .select2-selection,
.select2-container--focus .select2-selection { border-color: var(--ink) !important; }

/* account: nav + content (come acct-layout)

   Il clearfix di WooCommerce (`.woocommerce::before/::after { display: table }`)
   dentro un contenitore grid non è più un clearfix: sono due celle fantasma.
   Prendevano la prima cella e spingevano il menu nella colonna larga e il
   contenuto sotto, nella colonna stretta. Vanno spenti, e per sicurezza le due
   colonne sono assegnate esplicitamente invece di affidarsi all'ordine. */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: 30px; align-items: start; }
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { content: none; }
.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; }
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: auto; }
/* ⚠️ Da sloggati la griglia va spenta: dentro `.woocommerce` c'è solo il
   modulo di accesso, e in una griglia `240px 1fr` finiva nella prima colonna,
   cioè in 240 pixel. La regola c'era già ma agganciata a `.logged-out`, che
   WordPress NON aggiunge mai: `body_class()` aggiunge `logged-in` quando si è
   dentro e basta. Quindi non ha mai fatto niente, e la pagina di accesso è
   stata larga 240px finché non l'abbiamo guardata.

   Il selettore è COMPOSTO (`body:not(...).woocommerce-account`), senza spazio:
   `woocommerce-account` è una classe del body, non di un discendente. Scritto
   con lo spazio il selettore è valido, non dà nessun errore e non trova mai
   niente — che è esattamente il modo in cui questa regola era rotta prima. */
body:not(.logged-in).woocommerce-account .woocommerce { display: block; }
.woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; float: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { border: 1px solid var(--border); border-radius: 8px; padding: 8px; list-style: none; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { border: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 12px 14px; border-radius: 6px; font-weight: 600; font-size: 15px; color: var(--ink); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--ink); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: var(--bg-alt); }
.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 26px; }

/* ---- Il dettaglio di un ordine: i buchi da duecento pixel -----------------
   ⚠️ È la trappola dei 96px, di nuovo, e stavolta dentro Il mio account.
   `section { padding: 96px 0 }` vale per QUALUNQUE <section>, e i template di
   WooCommerce stampano `.woocommerce-order-details` e
   `.woocommerce-customer-details` proprio come <section>: fra il bottone
   «Ordina di nuovo» e «Indirizzo di fatturazione» restavano quasi duecento
   pixel di niente, e in fondo alla scatola bianca altrettanti. Nel CSS della
   pagina quel vuoto non era scritto da nessuna parte.

   Si azzera solo dentro il contenuto dell'account, e si rimette una distanza
   scelta: `padding: 0` da solo lascerebbe i blocchi appiccicati, che è
   l'errore opposto. */
.woocommerce-account .woocommerce-MyAccount-content section { padding: 0; }
.woocommerce-account .woocommerce-MyAccount-content > section + section,
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details,
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-customer-details { margin-top: 32px; }

/* Il paragrafo di stato in cima («L'ordine #… è stato creato il…») e i titoli
   delle due sezioni: margini normali, non quelli da pagina intera. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title { margin: 0 0 14px; font-size: 22px; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details .shop_table { margin-bottom: 0; }
/* «Ordina di nuovo» esce dentro l'ultima cella della tabella: senza questo
   resta incollato al bordo, come se facesse parte della riga del totale. */
.woocommerce-account .woocommerce-MyAccount-content .order-again { margin-top: 18px; }

/* L'indirizzo dentro il suo riquadro, senza il corsivo del browser. */
.woocommerce-account .woocommerce-MyAccount-content address {
  font-style: normal; line-height: 1.7;
  border: 1px solid var(--border); border-radius: 6px; padding: 16px 18px;
}

/* Le due colonne degli indirizzi: WooCommerce le stampa come `col2-set`, che
   senza stile diventano due blocchi uno sotto l'altro a tutta larghezza. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns--addresses {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns--addresses .col-1,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-columns--addresses .col-2 { width: auto; float: none; }

/* ---- I bottoni di WooCommerce, vestiti come il sito -----------------------
   WooCommerce stampa i suoi `.button` con la sua palette: fondo grigio-lilla,
   angoli arrotondati, il suo font. In mezzo a una pagina che ha bottoni
   bordeaux e angoli tagliati si vede subito che sono di un altro programma —
   il caso lampante era «Visualizza carrello» dentro l'avviso «aggiunto al
   carrello», l'unico bottone lilla di tutto il sito.

   ⚠️ La regola è generale APPOSTA, non un elenco di posti: un `.button` che
   spunta in una pagina a cui non avevamo pensato — e WooCommerce ne stampa in
   una dozzina di punti fra account, avvisi e carrello vuoto — deve nascere già
   vestito, non aspettare che qualcuno se ne accorga.

   ⚠️ La specificità non è decorativa, qui: il foglio di WooCommerce scrive
   `.woocommerce a.button` (0,2,1), e un selettore più leggero non si vede
   nemmeno — la regola c'è, il bottone resta lilla, e sembra che la CSS non sia
   stata caricata. Serve almeno (0,3,0): da qui `.woocommerce` + `.button` +
   `:not(.btn)`.

   Chi deve continuare a vincere su questa regola, e come:
     - `.btn` del tema → escluso da `:not(.btn)`;
     - `.cs-coupon button` → è un link sottolineato per scelta, e più sotto è
       scritto con un `:not(.btn)` apposta per stare sopra a questa;
     - `.cs-pagamento #place_order` → ha un ID, vince da sé;
     - `.qty button` → i −/+ sono `type="button"` senza classe: non li tocca.
   Il controllo è `bash .pw/run-node.sh misura-checkout.js 390`, che confronta
   ogni bottone col `.btn-primary` vero invece che con dei valori scritti a
   mano. */
.woocommerce .button:not(.btn),
.woocommerce button[type="submit"]:not(.btn),
.woocommerce input[type="submit"]:not(.btn),
.woocommerce .woocommerce-Button:not(.btn),
.woocommerce-notices-wrapper .button:not(.btn),
.woocommerce-account .woocommerce-Address-title .edit {
  display: inline-flex; align-items: center; justify-content: center;
  /* Il raggio è quello di `.btn` (--radius-s), non zero: erano 2px di
     differenza, invisibili da soli e visibilissimi accanto a un bottone del
     tema — che è esattamente dove questi bottoni capitano. */
  padding: 13px 22px; border: 1px solid var(--accent); border-radius: var(--radius-s);
  background: var(--accent); color: var(--bg);
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.woocommerce .button:not(.btn):hover,
.woocommerce button[type="submit"]:not(.btn):hover,
.woocommerce input[type="submit"]:not(.btn):hover,
.woocommerce .woocommerce-Button:not(.btn):hover,
.woocommerce-notices-wrapper .button:not(.btn):hover {
  background: var(--accent-dark); border-color: var(--accent-dark); color: var(--bg);
}
/* Azioni secondarie: stessa forma, fondo chiaro — nel resto del sito è
   `.btn-ghost`. Sono «Vedi» accanto a un ordine, «Aggiungi indirizzo», e i
   bottoni dentro un avviso: lì l'azione che conta è quella della pagina, e un
   secondo rettangolo pieno se la contende. «Visualizza carrello» nell'avviso
   «aggiunto al carrello» è esattamente questo caso. */
.woocommerce-account .woocommerce-MyAccount-content .button.view,
.woocommerce-account .woocommerce-Address-title .edit,
.woocommerce-message .button:not(.btn),
.woocommerce-info .button:not(.btn),
.woocommerce-error .button:not(.btn),
.woocommerce .return-to-shop .button:not(.btn),
.woocommerce .button.wc-backward:not(.btn) {
  background: transparent; color: var(--ink); border-color: var(--border-strong);
  font-weight: 500; padding: 9px 16px; font-size: 13.5px;
}
.woocommerce-account .woocommerce-MyAccount-content .button.view:hover,
.woocommerce-account .woocommerce-Address-title .edit:hover,
.woocommerce-message .button:not(.btn):hover,
.woocommerce-info .button:not(.btn):hover,
.woocommerce-error .button:not(.btn):hover,
.woocommerce .return-to-shop .button:not(.btn):hover,
.woocommerce .button.wc-backward:not(.btn):hover {
  background: var(--bg-alt); color: var(--accent); border-color: var(--accent);
}

/* I due riquadri degli indirizzi, uno accanto all'altro.
   ⚠️ WooCommerce li dispone con i float e con larghezze in percentuale
   (`.u-columns`, `.col-1`, `.col-2`): senza azzerarle la griglia qui sotto non
   serve a niente e i riquadri si accavallano a metà pagina. */
.woocommerce-account .woocommerce-Addresses {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after { content: none; display: none; }
.woocommerce-account .woocommerce-Address {
  border: 1px solid var(--border); padding: 20px; border-radius: 6px;
  width: auto !important; float: none !important; margin: 0 !important;
}
/* «Aggiungi indirizzo» arriva come <a class="edit"> dentro il titolo del
   riquadro: senza questo sta appiccicato all'h2 e sembra un refuso. */
.woocommerce-account .woocommerce-Address-title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 { font-size: 19px; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 { font-size: 20px; }
@media (max-width: 640px) {
  .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; }
}
body:not(.logged-in).woocommerce-account .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
body:not(.logged-in).woocommerce-account .u-columns::before,
body:not(.logged-in).woocommerce-account .u-columns::after { content: none; }
.woocommerce-account .u-column1, .woocommerce-account .u-column2 { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 26px; }


/* ============================================================
   AVVISI WOOCOMMERCE — carrello vuoto, coupon, errori
   ============================================================ */
/* WooCommerce li stampa con la sua palette: bordo superiore azzurro, fondo
   grigio e un quadratino azzurro al posto dell'icona. Sul carrello vuoto era
   l'unico blu di tutto il sito. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  background: var(--bg-alt); border-top: 3px solid var(--accent);
  padding: 18px 22px; margin: 0 0 24px;
  font-size: 16px; color: var(--ink-soft); list-style: none;
}
/* ⚠️ L'icona e' un ::before in posizione assoluta, piazzato sui 3.5em di
   padding sinistro che WooCommerce si aspetta. Con un padding diverso finisce
   SOPRA la prima parola. E' un glifo del font di WooCommerce, che nel resto
   del sito non compare da nessuna parte: si toglie. */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { content: none; }
.woocommerce-error { border-top-color: var(--warning); }
.woocommerce-info a,
.woocommerce-message a { color: var(--accent); font-weight: 600; }

/* ============================================================
   STEPPER QUANTITÀ (−/+) — override quantity-input.php
   ============================================================ */
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--border-soft); border-radius: var(--radius-s); overflow: hidden; background: #fff; }
.qty button { width: 40px; height: 44px; background: #fff; border: 0; font-size: 18px; color: var(--ink); cursor: pointer; line-height: 1; }
.qty button:hover { background: var(--bg-deep); }
.qty input, .qty .qty-input { width: 52px; height: 44px; border: 0; text-align: center; font-size: 16px; font-family: var(--font-sans); background: #fff; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


/* ============================================================
   CARRELLO — layout a card (override cart.php / cart-totals.php)
   ============================================================ */
/* due terzi agli articoli, un terzo al riepilogo */
.cs-cart.cartlayout { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }
/* stesso motivo dell'area riservata: il clearfix di WooCommerce diventerebbe
   una cella della griglia */
.cs-cart.cartlayout::before, .cs-cart.cartlayout::after,
.cs-checkout-grid::before, .cs-checkout-grid::after,
.woocommerce div.product::before, .woocommerce div.product::after { content: none; }
/* riga articolo: foto | nome e "Rimuovi" | quantità | subtotale */
.cs-cart-item {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 18px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--border);
}
.cs-cart-item:first-child { border-top: 1px solid var(--border); }
.cs-cart-item .ci-foto img { width: 84px; height: auto; border-radius: 6px; border: 1px solid var(--border); display: block; }
.cs-cart-item .ci-nome a { font-weight: 700; font-size: 16px; color: var(--ink); line-height: 1.35; }
.cs-cart-item .ci-nome a:hover { color: var(--accent); }
.cs-cart-item .ci-rimuovi { margin-top: 8px; }
.cs-cart-item .ci-rimuovi a { font-size: 13px; color: var(--ink-mute); text-decoration: underline; }
.cs-cart-item .ci-rimuovi a:hover { color: var(--accent); }
.cs-cart-item .ci-qta { min-width: 108px; }
.cs-cart-item .ci-sub { font-weight: 900; font-size: 17px; white-space: nowrap; min-width: 86px; text-align: right; }
/* Il pulsante "Aggiorna carrello" non serve: la quantità si applica da sola.
   Resta nel markup per chi naviga senza JavaScript. */
.cs-cart .actions { display: none; }
.no-js .cs-cart .actions { display: block; margin-top: 16px; }
.cs-cart-side { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px; padding: 22px; position: sticky; top: 150px; }
/* "Pagamenti sicuri" sotto il pulsante del checkout: stesso blocco del footer
   (inc/pagamenti.php), ma in colonna stretta va incolonnato e centrato sotto
   il pulsante invece che disteso in riga. */
.pagamenti-carrello {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  display: grid; justify-items: center; gap: 9px;
}
.pagamenti-carrello .pag-titolo {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute);
}
.pagamenti-carrello .pag-titolo svg { width: 15px; height: 15px; color: var(--accent); }
.pagamenti-carrello .pag-loghi {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
}
.pagamenti-carrello .pag-loghi li { display: grid; place-items: center; width: 46px; height: 30px; background: #fff; border: 1px solid #dcdce1; border-radius: 5px; overflow: hidden; }
.pagamenti-carrello .pag-loghi svg { display: block; border-radius: 5px; }

.cs-continua { text-align: center; margin-top: 18px; }
.cs-continua a {
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute); text-decoration: underline; text-underline-offset: 3px;
}
.cs-continua a:hover { color: var(--accent); }
.cs-totals-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.cs-totals-table th { text-align: left; font-weight: 600; color: var(--ink-soft); padding: 6px 0; font-size: 15px; }
.cs-totals-table td { text-align: right; font-weight: 700; padding: 6px 0; }

/* Regime del margine: una riga sola, sotto i totali, e solo se serve */
.cs-nota-iva { color: var(--ink-faint); font-size: 13px; font-weight: 500; white-space: normal; }


/* ============================================================
   CHECKOUT — «Hai già prenotato con me?» (override checkout/form-login.php)
   ============================================================ */
/* La barra sta sopra alla griglia, larga quanto la pagina: è la prima cosa che
   si incontra scendendo verso «I tuoi dati», ed è lì che serve — dopo aver
   ricompilato mezzo modulo, accedere non conviene più a nessuno.

   ⚠️ Il bottone di Google lo disegna Google, dentro un iframe: qui NON si
   decide come è fatto (colori, carattere, angoli), si decide solo quanto spazio
   occupa. Il foglio del plugin lo tiene fra 200 e 400px, che è il massimo che
   Google accetta. */
.cs-accesso {
  margin: 0 0 26px;
  padding: 18px 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
}
.cs-accesso-riga {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
}
.cs-accesso-invito {
  display: flex; flex-direction: column; gap: 3px; margin: 0; flex: 1 1 260px;
  font-size: 15px; line-height: 1.5;
}
.cs-accesso-invito strong { font-weight: 700; color: var(--ink); }
.cs-accesso-invito span { color: var(--ink-soft); font-size: 14px; }
/* Dentro la barra il gruppo del plugin sta in riga, e il separatore «oppure»
   non serve: qui l'alternativa alla password è scritta accanto, nel link. */
/* ⚠️ La larghezza è scritta, non lasciata al contenuto. Il JavaScript del
   plugin misura questo contenitore per dire a Google quanto fare largo il
   bottone: con `width:auto` misurava quello che c'era dentro in quel momento —
   cioè il ripiego, che sta ancora per essere nascosto — e il numero cambiava
   da solo. */
.cs-accesso .wcgl-login-wrapper { flex: 0 0 260px; width: 260px; margin: 0; gap: 0; }
.cs-accesso .wcgl-separatore { display: none; }
.cs-accesso-password { margin: 0; flex: 0 0 auto; font-size: 14px; }
.cs-accesso-password a { color: var(--ink-dim); text-decoration: underline; }
.cs-accesso-password a:hover { color: var(--accent); }

/* Il modulo con la password: chiuso finché non lo si chiede. */
.cs-accesso form.login {
  margin: 18px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--border-strong);
  border-radius: 0;
  display: flex; flex-wrap: wrap; gap: 14px 18px;
}
.cs-accesso form.login .form-row { flex: 1 1 220px; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-accesso form.login .form-row:last-of-type,
.cs-accesso form.login .lost_password { flex: 1 1 100%; }
.cs-accesso form.login label { font-size: 13px; color: var(--ink-soft); font-weight: 400; }
.cs-accesso form.login .woocommerce-form-login__rememberme {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
}
.cs-accesso form.login .woocommerce-form-login__rememberme input { width: auto; margin: 0; }
.cs-accesso form.login .lost_password { font-size: 13px; margin: 0; }
.cs-accesso .clear { display: none; }

@media (max-width: 640px) {
  .cs-accesso-riga { flex-direction: column; align-items: stretch; }
  /* ⚠️ Va rifatta anche la `flex`, non solo la larghezza: qui la riga diventa
     una colonna, e in una colonna il `flex-basis: 260px` di prima non è più
     una larghezza — è un'ALTEZZA, cioè 220px di buco sotto al bottone. */
  .cs-accesso .wcgl-login-wrapper { flex: 0 0 auto; width: 100%; }
  .cs-accesso-password { text-align: center; }
}

/* ============================================================
   CHECKOUT — 2 colonne (override form-checkout.php)
   ============================================================ */
/* Due colonne uguali: dati a sinistra, riepilogo a destra.
   Su mobile il riepilogo va in cima (order: -1). */
/* Colonne larghe, righe strette: fra i dati e il pagamento serve una pausa,
   non un buco. La riga del clone su desktop non esiste proprio (l'elemento è
   display:none e non viene nominato nelle aree), altrimenti resterebbe una
   riga vuota con i suoi due spazi. */
.cs-checkout-grid {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; row-gap: 26px;
  align-items: start;
  grid-template-areas: "dati riepilogo" "pagamento riepilogo";
}
.cs-checkout-main { grid-area: dati; }
.cs-riepilogo-clone { display: none; }
.cs-pagamento { grid-area: pagamento; }
.cs-checkout-side { grid-area: riepilogo; }
.cs-checkout-side { position: sticky; top: 110px; }
.cs-checkout-side #order_review_heading { font-size: 22px; font-weight: 800; }

/* Riepilogo: card con tabella articoli, coupon e totali. */
.cs-riepilogo-corpo {
  margin-top: 14px; background: #fff;
  border: 1px solid var(--border); border-radius: 6px; padding: 18px 20px;
  box-shadow: var(--shadow-md);
}
/* ⚠️ `table-layout: fixed`: le colonne le decide la tabella, non il contenuto.
   Con il calcolo automatico bastava la riga del coupon — una frase lunga e un
   campo di testo — a portare la tabella a 495px dentro un riquadro da 316 su
   un telefono: i totali finivano tagliati fuori e la pagina scorreva di lato.
   Con `fixed` le due colonne sono quelle dichiarate qui sotto e il contenuto
   va a capo. `word-break` serve perché una parola lunghissima, in una colonna
   fissa, uscirebbe dalla cella invece di spezzarsi. */
.cs-riepilogo-tabella { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cs-riepilogo-tabella th, .cs-riepilogo-tabella td { overflow-wrap: anywhere; }
.cs-riepilogo-tabella .cs-destra { width: 34%; }
.cs-riepilogo-tabella th,
.cs-riepilogo-tabella td { padding: 10px 0; vertical-align: top; text-align: left; }
/* La data dell'appuntamento sotto al nome del prodotto.
   WooCommerce la stampa come `<dl class="variation"><dt>Appuntamento:</dt>
   <dd><p>giovedì …</p></dd></dl>`, e il browser mette al `<dd>` il suo rientro
   di 40px: usciva l'etichetta su una riga e la data più a destra, sotto, come
   se fosse una nota. È l'unica cosa che la paziente deve ricontrollare prima
   di pagare: va su una riga sola, leggibile. */
.cs-riepilogo-tabella .variation {
  display: flex; flex-wrap: wrap; gap: 0 6px;
  margin: 4px 0 0; font-size: 14px; line-height: 1.5;
}
.cs-riepilogo-tabella .variation dt { margin: 0; font-weight: 600; color: var(--ink-mute); }
.cs-riepilogo-tabella .variation dd { margin: 0; color: var(--ink); }
.cs-riepilogo-tabella .variation dd p { margin: 0; }
.cs-riepilogo-tabella thead th {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 1px solid var(--border); padding-bottom: 8px;
}
.cs-riepilogo-tabella tbody tr + tr td { border-top: 1px solid var(--border); }
.cs-riepilogo-tabella .cs-destra { text-align: right; white-space: nowrap; }
.cs-riga-nome { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.cs-riga-meta { display: block; font-size: 13px; color: var(--ink-faint); margin-top: 2px; }
.cs-riga-meta b { color: var(--ink-soft); }
.cs-riepilogo-tabella tfoot { border-top: 1px solid var(--border); }
.cs-riepilogo-tabella tfoot th { font-size: 15px; font-weight: 600; color: var(--ink-soft); padding: 7px 0; }
.cs-riepilogo-tabella tfoot td { font-size: 15px; font-weight: 700; padding: 7px 0; }
.cs-riepilogo-tabella tfoot tr:first-child th,
.cs-riepilogo-tabella tfoot tr:first-child td { padding-top: 12px; }
.cs-riepilogo-tabella .cs-sconto th,
.cs-riepilogo-tabella .cs-sconto td { color: #138a4e; }
.cs-riepilogo-tabella .cs-totale th,
.cs-riepilogo-tabella .cs-totale td {
  font-size: 19px; font-weight: 900; color: var(--ink);
  border-top: 1px solid var(--border); padding-top: 12px;
}
.cs-attesa { font-weight: 600; font-size: 14px; color: var(--ink-faint); white-space: normal; }
.cs-coupon-riga td { border-top: 1px solid var(--border) !important; }
.woocommerce form.checkout h3 { font-size: 22px; font-weight: 800; margin: 8px 0 12px; }

/* ---------- campi del checkout su due colonne ----------
   L'ordine dei campi e le classi form-row-first/last/wide le decide
   inc/checkout.php; qui c'è solo come si dispongono.

   Griglia e non i float di WooCommerce: le due celle affiancate restano alte
   uguali da sole anche quando una ha un messaggio di errore sotto, e non serve
   il JS che su un progetto precedente pareggiava le altezze a mano. */
.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start;
}
.woocommerce form.checkout .form-row {
  float: none; width: auto; padding: 0; margin: 0 0 14px; grid-column: 1 / -1;
}
.woocommerce form.checkout .form-row-first { grid-column: 1; }
.woocommerce form.checkout .form-row-last { grid-column: 2; }
/* Tutto quello che i plugin infilano fra un campo e l'altro (il pulsante VIES,
   le note) è comunque figlio della griglia: senza questo starebbe in mezza riga. */
.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper > *:not(.form-row),
.woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper > *:not(.form-row) { grid-column: 1 / -1; }
.woocommerce form.checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce form.checkout .form-row.woocommerce-invalid select { border-color: var(--accent); }
.woocommerce form.checkout .form-row .optional { font-weight: 500; color: var(--ink-faint); }

/* ---------- "Desidero ricevere la fattura" ----------
   La spunta e i campi fiscali che apre (ragione sociale, P. IVA, PEC/SDI,
   codice fiscale) arrivano dal plugin WooCommerce VIES Integration. Qui si
   staccano dagli altri campi, così si legge come una scelta e non come un
   campo qualsiasi in mezzo all'indirizzo. */
.woocommerce form.checkout .vies-fattura-checkbox {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 14px; margin: 4px 0 16px;
}
.woocommerce form.checkout .vies-fattura-checkbox label.checkbox {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 14.5px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.woocommerce form.checkout .vies-fattura-checkbox input[type="checkbox"] {
  accent-color: var(--accent); width: 17px; height: 17px; margin: 0; flex: 0 0 auto; cursor: pointer;
}
/* Il pulsante di ricerca in Camera di Commercio: il plugin lo inserisce
   subito dopo la spunta, ed è un'alternativa alla compilazione a mano. */
#vies-lookup-trigger { margin-bottom: 16px; }

/* Coordinate del bonifico dentro il riquadro del metodo di pagamento */
.cs-bonifico {
  margin-top: 12px; padding: 14px 16px; background: #fff;
  border: 1px solid var(--border); border-radius: 6px;
}
.cs-bonifico-conto {
  display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 6px 16px; margin: 0;
}
.cs-bonifico-conto + .cs-bonifico-conto { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.cs-bonifico-conto dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.cs-bonifico-conto dd { margin: 0; font-size: 15px; color: var(--ink); font-weight: 600; word-break: break-word; }
.cs-bonifico-conto dd.cs-iban { font-variant-numeric: tabular-nums; letter-spacing: .04em; font-weight: 800; }
.cs-bonifico-nota { margin: 12px 0 0; font-size: 13px; color: var(--ink-mute); line-height: 1.5; }

/* "Spedire a un indirizzo diverso?" è una scelta come "Desidero ricevere la
   fattura": stesso riquadro, stessa spunta rossa, stesso peso del testo.
   WooCommerce la stampa dentro un <h3>, che di suo è grande e blu. */
.woocommerce form.checkout h3#ship-to-different-address {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 14px; margin: 4px 0 16px; font-size: inherit; font-weight: inherit;
}
.woocommerce form.checkout h3#ship-to-different-address label {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 14.5px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.woocommerce form.checkout h3#ship-to-different-address input[type="checkbox"] {
  accent-color: var(--accent); width: 17px; height: 17px; margin: 0; flex: 0 0 auto; cursor: pointer;
}
.woocommerce form.checkout h3#ship-to-different-address span { font-weight: 700; }

/* Riepilogo richiudibile: su desktop resta sempre aperto e senza freccia,
   su mobile diventa una riga che si apre. */
.cs-riepilogo { margin-bottom: 22px; }
.cs-riepilogo-testa {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  list-style: none; cursor: default;
}
.cs-riepilogo-testa::-webkit-details-marker { display: none; }
.cs-riepilogo-totale { font-size: 19px; font-weight: 900; white-space: nowrap; }
.cs-riepilogo-corpo { margin-top: 14px; }

/* Coupon dentro il riepilogo, non più in cima alla pagina. */
.cs-coupon { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.cs-coupon .checkout_coupon { border: 0; padding: 0; margin: 0; }
.woocommerce form.checkout .cs-coupon .form-row { margin-bottom: 8px; }
.cs-coupon .woocommerce-form-coupon-toggle { margin-bottom: 8px; }
.cs-coupon .woocommerce-info {
  background: none; border: 0; padding: 0; margin: 0;
  font-size: 15px; color: var(--ink-soft);
}
.cs-coupon .woocommerce-info::before { display: none; }
/* Nella colonna stretta il campo e il bottone stanno uno sopra l'altro,
   altrimenti l'etichetta del bottone va a capo tre volte. */
.cs-coupon .checkout_coupon .form-row { width: 100%; float: none; padding: 0; }
/* ⚠️ `min-width: 0` sul campo, se no la tabella non si stringe.
   Il coupon sta dentro il riepilogo, cioè dentro una `<table>`: un `<input>`
   porta con sé una larghezza minima di una ventina di caratteri, e in una
   cella quella diventa la larghezza minima della COLONNA. Su un telefono la
   tabella cresceva a 495px dentro un riquadro da 358 e i totali finivano
   tagliati fuori. Il `width: 100%` da solo non basta: senza `min-width: 0` il
   browser non scende sotto la misura intrinseca del campo. */
.cs-coupon input[type="text"] { width: 100%; min-width: 0; }
/* «Applica codice promozionale» è un link, non un bottone pieno: un secondo
   rettangolo colorato accanto a «Effettua ordine» si contende l'attenzione con
   l'unica azione che conta, e nel resto del sito le azioni secondarie sono
   testo con la freccia (`.link-freccia`). Qui la stessa cosa.
   ⚠️ Il `:not(.btn)` non serve a escludere niente: serve a pesare (0,3,1), cioè
   a stare sopra alla regola generale dei bottoni WooCommerce di più in su. Se
   lo togli, questo torna un rettangolo bordeaux senza che nessuno lo chieda. */
.woocommerce .cs-coupon button:not(.btn),
.woocommerce .cs-coupon button,
.cs-coupon button {
  width: auto; white-space: nowrap; padding: 0; font-size: 15px;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  color: var(--accent); font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; font-family: inherit;
  letter-spacing: normal; text-transform: none; min-height: 0;
}
/* ⚠️ L'hover NON cambia niente, ed è una richiesta esplicita.
   «Applica» è un bottone che sta accanto a un campo di testo: illuminandosi al
   passaggio del mouse sembrava l'azione principale della schermata, che invece
   è «Effettua ordine». Resta scritto com'è, e la sola cosa che cambia è il
   cursore — che basta a dire che si può premere. */
.woocommerce .cs-coupon button:hover,
.cs-coupon button:hover { color: var(--accent); background: none; text-decoration: underline; }

/* ---- Il pannello del codice promozionale (form-coupon.php del tema) ----
   Chiuso di suo: lo apre `assets/js/checkout-coupon.js` togliendo `hidden`.
   `[hidden]` va forzato perché la regola generica dei `.form-row` e dei
   blocchi del checkout usa `display` e vincerebbe sull'attributo. */
.cs-coupon-pannello[hidden] { display: none; }
.cs-coupon-invito { margin: 0; font-size: 15px; color: var(--ink-soft); }
/* Il «Inseriscilo qui» è il grilletto della fisarmonica: un link, come le
   azioni secondarie del resto del sito. */
.cs-coupon-toggle { text-decoration: underline; text-underline-offset: 3px; }
.cs-coupon-pannello { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cs-coupon-pannello .cs-coupon-codice { flex: 1 1 140px; }
.cs-coupon-esito:empty { display: none; }
.cs-coupon-esito { flex: 1 1 100%; margin: 0; font-size: 14px; color: var(--ink-mute); }

/* Pagamento: sezione a sé, sotto il riepilogo. */
.cs-pagamento { border-top: 1px solid var(--border); padding-top: 18px; }
.cs-pagamento h3 { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.cs-pagamento-nota { font-size: 13px; color: var(--ink-mute); margin: 0 0 14px; }
.cs-pagamento #payment { background: none; border-radius: 0; }
.cs-pagamento #payment div.form-row { padding: 0; }

/* Metodi di pagamento: ognuno è una riga selezionabile, non un elenco nudo.
   Il markup di WooCommerce arriva senza stile e va vestito qui.

   I selettori partono da `#payment` perché la CSS del plugin usa quell'ID
   (`#payment ul.payment_methods`): con le sole classi vincerebbero i suoi
   `padding: 1em` e `border-bottom`, e l'elenco resterebbe rientrato. */
.woocommerce-checkout .cs-pagamento #payment ul.payment_methods {
  list-style: none; border: 0; padding: 0; margin: 0 0 18px;
  display: grid; gap: 10px;
}
/* WooCommerce mette un clearfix (`::before/::after { display: table }`) su ul
   e li: sull'elenco diventano due celle vuote della griglia, sulla riga una
   riga vuota fra l'etichetta e il riquadro che si apre. */
.cs-pagamento #payment ul.payment_methods::before,
.cs-pagamento #payment ul.payment_methods::after,
.cs-pagamento #payment ul.payment_methods > li::before,
.cs-pagamento #payment ul.payment_methods > li::after { content: none; }
/* La riga resta un blocco normale: radio ed etichetta sono due scatole in
   linea allineate al centro, il riquadro che si apre è un div e va a capo da sé.

   Niente flex o grid sul `li`: Stripe nasconde e rimostra le righe con jQuery,
   e nel rimostrarle scrive `style="display: block"` sull'elemento — una
   dichiarazione in linea che vincerebbe su qualsiasi `display` messo qui, e
   l'etichetta finirebbe sotto al radio (succedeva con Klarna). Forzarlo con
   `!important` non si può: renderebbe visibili anche le righe che Stripe
   nasconde perché il metodo non è disponibile. */
.cs-pagamento #payment ul.payment_methods > li {
  border: 1.5px solid var(--border-soft); border-radius: 8px;
  padding: 14px 16px; margin: 0; background: #fff; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
  /* Tutta la striscia sceglie il metodo, non solo il pallino e l'etichetta:
     fra i due c'è mezzo riquadro vuoto (fino a 460px su desktop) che sembrava
     cliccabile e non lo era. La selezione la fa sv.js — con un'etichetta stesa
     su tutto il `li` i campi di Stripe e PayPal, che stanno dentro lo stesso
     `li`, finirebbero sotto a uno strato invisibile. */
  cursor: pointer;
}
/* Quello che si clicca per sé (i campi carta, i link "Cos'è PayPal?") tiene il
   suo puntatore. */
.cs-pagamento #payment ul.payment_methods > li a,
.cs-pagamento #payment ul.payment_methods > li input,
.cs-pagamento #payment ul.payment_methods > li select,
.cs-pagamento #payment ul.payment_methods > li iframe,
.cs-pagamento #payment ul.payment_methods > li .payment_box { cursor: auto; }
.cs-pagamento #payment ul.payment_methods > li a { cursor: pointer; }
.cs-pagamento #payment ul.payment_methods > li:hover { border-color: var(--ink-faint); }
.cs-pagamento #payment ul.payment_methods > li:has(input:checked) {
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(12,12,13,.05);
}
.cs-pagamento #payment ul.payment_methods > li > input[type="radio"] {
  accent-color: var(--accent); width: 17px; height: 17px;
  margin: 0 10px 0 0; vertical-align: middle; cursor: pointer;
}
.cs-pagamento #payment ul.payment_methods > li > label {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  vertical-align: middle; margin: 0; max-width: calc(100% - 30px);
  font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.cs-pagamento #payment ul.payment_methods > li img {
  display: inline-block; max-height: 24px; max-width: 100%; width: auto;
  margin: 0 0 0 4px; vertical-align: middle;
}
.cs-pagamento #payment ul.payment_methods > li .about_paypal { font-size: 12.5px; font-weight: 500; }

/* Il riquadro che si apre sotto il metodo scelto: nessuna cornice e nessun
   rientro, è la continuazione della riga e non un riquadro dentro il riquadro.
   Il `fieldset` che Stripe e PayPal ci mettono dentro va azzerato a mano:
   senza reset il browser gli disegna il suo bordo scuro di default. */
.cs-pagamento #payment div.payment_box {
  background: none !important; border: 0 !important; border-radius: 0;
  padding: 0 !important; margin: 12px 0 0 !important;
  font-size: 14px; color: var(--ink-soft); position: relative;
}
.cs-pagamento #payment div.payment_box::before,
.cs-pagamento #payment div.payment_box::after { display: none !important; }
.cs-pagamento .payment_box fieldset { border: 0; padding: 0; margin: 0; }
.cs-pagamento .payment_box p { margin: 0 0 8px; }
.cs-pagamento .payment_box p:last-child { margin-bottom: 0; }

/* Condizioni e pulsante finale. */
.cs-pagamento .woocommerce-privacy-policy-text { font-size: 13px; color: var(--ink-mute); margin-bottom: 12px; }
.cs-pagamento .woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; }
.cs-pagamento .validate-required.woocommerce-invalid label { color: var(--accent); }

/* Il pulsante che chiude l'acquisto. Stessa regola per il carrello ("Vai al
   checkout") e per il checkout ("Effettua ordine"): sono lo stesso gesto, e in
   due pagine di fila una differenza di peso o di altezza si nota. */
.cs-pagamento #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block; width: 100%; text-align: center; white-space: normal;
  font-family: var(--font-sans); font-size: 16px; font-weight: 800; line-height: 1.2;
  padding: 16px 24px; background: var(--accent); color: #fff; border: 0; border-radius: 0;
  clip-path: polygon(var(--radius-s) 0, 100% 0, 100% calc(100% - var(--radius-s)),
             calc(100% - var(--radius-s)) 100%, 0 100%, 0 var(--radius-s));
  transition: background .16s;
}
.cs-pagamento #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--accent-dark); }


/* ============================================================
   CHECKOUT SENZA VIE D'USCITA
   ============================================================
   Header e footer nel checkout perdono tutto quello che porta altrove (barra
   in alto, menu, mega menu, CTA, burger, colonne di link, social, telefono):
   li toglie il PHP, in header.php e footer.php, non questa CSS — così non
   vengono nemmeno stampati e non c'è il lampo del contenuto che sparisce, né
   un menu che resta raggiungibile da tastiera perché era solo `display:none`.

   Qui c'è solo come si ricompone quello che resta: il marchio e la riga
   legale. Il segno è `body.sv-checkout-focus`, messo da inc/checkout.php.

   ⚠️ Vale solo sul checkout DA COMPILARE. Sulla conferma d'ordine header e
   footer tornano interi: lì le vie d'uscita servono, ed è la pagina da cui si
   va all'area riservata a preparare la visita. */

/* La barra resta, ma con il solo logo: senza `justify-content` il marchio si
   allargherebbe a tutta la riga, perché era una griglia a tre.

   ⚠️ E `overflow: visible`. `.nav` in sv-base.css ha `overflow-x: hidden` come
   rete di sicurezza contro gli sfori orizzontali — ma `overflow-x: hidden` con
   `overflow-y: visible` NON esiste: le specifiche lo trasformano in
   `overflow-y: auto`, quindi taglia anche in verticale. La barra è alta una
   sessantina di pixel, e il riquadro «Vuoi lasciare il pagamento?» ne è alto
   185: usciva tagliato appena sotto il logo, e la parte con i due bottoni non
   si vedeva né si poteva premere. Sembrava uno z-index, e non lo era — infatti
   alzarlo non avrebbe cambiato niente.
   Qui si può togliere la rete senza rischi: in questa pagina dentro `.nav` c'è
   solo il logo, e non c'è niente che possa sforare. */
.sv-checkout-focus .site-header .nav { justify-content: flex-start; overflow: visible; }
/* La barra è `sticky` con `z-index: 50` e fa stacking context suo: il riquadro
   sta sopra la pagina già così. Il valore alto è perché non se lo mangi un
   plugin che si piazza nell'header con un numero a caso. */
.sv-checkout-focus .cs-esci-pop { z-index: 80; }

/* Il footer diventa una riga sola: niente griglia a quattro colonne con tre
   celle vuote. */
.sv-checkout-focus .site-footer .foot-grid { display: block; }
.sv-checkout-focus .site-footer .foot-brand { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sv-checkout-focus .site-footer .foot-legal { margin: 0; }

/* I due link obbligatori, in piccolo e in riga: sono la parte legalese, non un
   menu. Restano perché una persona ha il diritto di leggerli PRIMA di pagare. */
.foot-legal-link {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  list-style: none; margin: 6px 0 0; padding: 0;
}
.foot-legal-link a { text-decoration: underline; text-underline-offset: 2px; }

/* Il logo chiede conferma prima di portare via: il primo clic apre il riquadro,
   il link dentro è il secondo clic. È un `details`, quindi funziona anche senza
   JavaScript; sv.js lo richiude solo quando si clicca fuori o si preme Esc. */
.cs-esci { position: relative; }
.cs-esci > summary {
  display: flex; align-items: center; cursor: pointer;
  list-style: none; -webkit-tap-highlight-color: transparent;
}
.cs-esci > summary::-webkit-details-marker { display: none; }
.cs-esci > summary::marker { content: ""; }
.cs-esci > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.cs-esci-pop {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 60;
  width: 300px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-lg); padding: 16px;
}
/* La punta che lega il riquadro al logo. */
.cs-esci-pop::before {
  content: ""; position: absolute; top: -7px; left: 26px; width: 12px; height: 12px;
  background: #fff; border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.cs-esci-pop b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
.cs-esci-pop p { margin: 6px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.cs-esci-azioni { display: flex; gap: 8px; }
.cs-esci-azioni .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .woocommerce div.product { grid-template-columns: 1fr; gap: 28px; }
  /* una colonna sola: vanno annullate anche le posizioni fissate su desktop,
     altrimenti `grid-column: 2` si porta dietro una seconda colonna implicita */
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content { grid-column: 1; grid-row: auto; }
  .cs-cart.cartlayout, .cs-checkout-grid { grid-template-columns: 1fr; gap: 24px; }
  /* ⚠️ `min-width: 0` sui figli, se no la colonna non si stringe.
     Un elemento di griglia parte da `min-width: auto`, cioè non scende sotto
     la larghezza minima del suo contenuto: bastava una riga che non va a capo
     dentro il riepilogo per far crescere la traccia `1fr` fino a 537px su uno
     schermo da 390, e la pagina scorreva di lato. Da fuori sembrava "il
     carrello sballato". */
  .cs-cart.cartlayout > *, .cs-checkout-grid > * { min-width: 0; }
  .cs-cart-side, .cs-checkout-side { position: static; }
  /* Una colonna sola. In cima "Il tuo ordine", che parte chiuso e si apre con
     un tocco; poi i dati; poi la copia della tabella, già aperta, subito prima
     del pagamento — così si rivede l'ordine nel momento in cui si sceglie come
     pagarlo, senza risalire la pagina. */
  .cs-checkout-grid { grid-template-areas: "riepilogo" "dati" "clone" "pagamento"; }
  .cs-riepilogo-clone { display: block; grid-area: clone; }
  .cs-riepilogo-clone .cs-riepilogo-tabella { margin-top: 4px; }
  /* Su mobile il riepilogo si apre e si chiude, per non spingere in fondo
     i campi da compilare. */
  .cs-riepilogo-testa { cursor: pointer; }
  .cs-riepilogo-testa::after {
    content: ""; width: 9px; height: 9px; flex: 0 0 auto; margin-left: 4px;
    border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
    transform: rotate(45deg); transition: transform .18s;
  }
  .cs-riepilogo[open] .cs-riepilogo-testa::after { transform: rotate(-135deg); }
  .cs-cart-item { grid-template-columns: auto 1fr; }
  .cs-cart-item .ci-sub { grid-column: 2; text-align: left; }
}
@media (max-width: 560px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
  /* Campi del checkout in colonna unica: due campi affiancati su un telefono
     diventano illeggibili. Vale anche qui la nota di sopra sulle posizioni
     fissate: `grid-column: 2` va annullato o si porta dietro una colonna. */
  .woocommerce form.checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
  .woocommerce form.checkout .form-row-first,
  .woocommerce form.checkout .form-row-last { grid-column: 1; }
  body:not(.logged-in).woocommerce-account .u-columns { grid-template-columns: 1fr; }
  .woocommerce table.shop_table_responsive tr td { text-align: right; }
}