/* ============================================================
   CAR SYSTEM FP — skin WooCommerce (design system).
   Mappa il markup standard di WooCommerce ai token di sv-base.
   Caricato su shop, prodotto, carrello, checkout, account.
   ============================================================ */

#wc-stripe-express-checkout-element, #wc-stripe-express-checkout-button-separator {display: none !important;} /* Stripe Express Checkout non è supportato dal design system */

.woocommerce, .woocommerce-page { color: var(--ink); font-family: var(--font); }
/* I link ereditano il colore del contesto, tranne quelli che hanno un colore
   proprio: i bottoni .btn e i chip, che da attivi sono bianchi su fondo scuro. */
.woocommerce a:not(.btn):not(.chip) { color: inherit; }
.woocommerce .woocommerce-breadcrumb { display: none; } /* usiamo .crumbs nel wrapper */

/* ---------- avvisi (nessun ordine, carrello vuoto, errori…) ----------

   WooCommerce mette un'icona in position:absolute a sinistra e le lascia posto
   con `padding-left: 3.5em`. Ridefinendo il padding quel posto sparisce e
   l'icona finisce sopra al testo. Qui l'icona viene tolta del tutto: il segnale
   è la barra colorata a sinistra, come negli altri riquadri del sito. */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  display: block;
  border: 1px solid var(--line); border-left: 4px solid var(--gray-3);
  background: var(--soft); color: var(--ink); border-radius: 6px;
  padding: 15px 18px; margin: 0 0 18px; font-size: 14.5px; line-height: 1.55;
  list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before { content: none; }

.woocommerce-message { border-left-color: #138a4e; }
.woocommerce-error { border-left-color: var(--red); }
.woocommerce-error li { list-style: none; margin: 0; }

/* il bottone dell'avviso ("Vai al negozio", "Continua gli acquisti") sta in riga
   col testo su desktop e va a capo quando lo spazio non basta */
.woocommerce-message, .woocommerce-info {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
.woocommerce-message .button, .woocommerce-info .button { float: none; margin-left: auto; }

/* ---------- bottoni ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit,
.woocommerce .woocommerce-Button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  padding: 13px 22px; border: 0; background: var(--red); color: #fff; border-radius: 0;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: background .16s ease, transform .16s ease; cursor: pointer; line-height: 1.2;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce #respond input#submit:hover {
  background: var(--red-dark); color: #fff;
}
.woocommerce a.button.alt.disabled, .woocommerce button.button:disabled { opacity: .5; }
.woocommerce .button.wc-backward, .woocommerce a.added_to_cart {
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); clip-path: none; border-radius: var(--radius);
}

/* ---------- barra risultati + ordinamento ---------- */
.woocommerce .woocommerce-result-count { color: var(--gray); font-size: 14px; margin: 0; float: none; display: inline-block; }

/* ⚠️ La tendina di ordinamento è NASCOSTA, non tolta (24 agosto 2026).
   L'ordine predefinito del catalogo è "più recente"
   (`woocommerce_default_catalog_orderby` = `date`), e con 6.501 ricambi che
   arrivano dal gestionale le altre voci — popolarità, valutazione media — non
   dicono niente: nessun prodotto ha recensioni o storico di vendita qui.
   Per rimetterla basta togliere `display:none` da questa riga. Il markup e il
   form restano nella pagina, quindi `?orderby=price` continua a funzionare. */
.woocommerce .woocommerce-ordering { float: none; margin: 0; display: none; }
.woocommerce .woocommerce-ordering select, .woocommerce select {
  padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: var(--radius);
  font-family: var(--font); font-size: 14px; background: #fff; color: var(--ink);
}
.woocommerce nav.woocommerce-pagination { margin-top: 34px; text-align: center; }
.woocommerce nav.woocommerce-pagination ul, .woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--line); border-radius: 6px; margin: 0 3px; padding: 8px 14px; color: var(--ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- griglia prodotti (usa .pcard del design) ---------- */
.woocommerce ul.products, .woocommerce-page ul.products {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  list-style: none; margin: 20px 0 0; padding: 0;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  width: auto; margin: 0; float: none; padding: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; } /* no clearfix: sarebbero celle grid fantasma */
.woocommerce ul.products li.product::before { display: none; }
.woocommerce ul.products li.product .pcard { height: 100%; }

/* ============================================================
   SCHEDA PRODOTTO (PDP)
   Sinistra: galleria del tema (HTML+CSS), appiccicata mentre si scorre.
   Destra: tutto il resto — codice, titolo, prezzo, acquisto, descrizione,
   dati tecnici. Prima descrizione e schede stavano in fondo a tutta pagina,
   con mezzo schermo vuoto accanto alla foto.
   ============================================================ */
.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 44px; align-items: start; }
.woocommerce div.product .summary { margin: 0; width: 100% !important; float: none; }

/* ---------- galleria ---------- */
.cs-gal {
  position: sticky; top: 96px;
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start;
}
.cs-gal.cs-gal-una { grid-template-columns: minmax(0, 1fr); }
.cs-gal-radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.cs-gal-main {
  position: relative; grid-column: 2; aspect-ratio: 1 / 1;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff;
}
.cs-gal.cs-gal-una .cs-gal-main, .cs-gal-vuota .cs-gal-main { grid-column: 1; }
.cs-gal-slide {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .18s ease;
}
.cs-gal-slide img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.cs-gal-lente {
  position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px;
  display: grid; place-items: center; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow);
}
.cs-gal-thumbs { grid-column: 1; grid-row: 1; display: grid; gap: 10px; }
.cs-gal-thumbs label {
  display: block; cursor: pointer; border: 1.5px solid var(--line); border-radius: 6px;
  overflow: hidden; background: #fff; aspect-ratio: 1 / 1; transition: border-color .15s;
}
.cs-gal-thumbs label:hover { border-color: var(--line-2); }
.cs-gal-thumbs label img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

/* La foto scelta e la miniatura attiva: una coppia di regole per posizione.
   Otto bastano — nessun ricambio ha piu' di otto foto. */
#cs-gal-0:checked ~ .cs-gal-main .cs-gal-slide:nth-of-type(1),
#cs-gal-1:checked ~ .cs-gal-main .cs-gal-slide:nth-of-type(2),
#cs-gal-2:checked ~ .cs-gal-main .cs-gal-slide:nth-of-type(3),
#cs-gal-3:checked ~ .cs-gal-main .cs-gal-slide:nth-of-type(4),
#cs-gal-4:checked ~ .cs-gal-main .cs-gal-slide:nth-of-type(5),
#cs-gal-5:checked ~ .cs-gal-main .cs-gal-slide:nth-of-type(6),
#cs-gal-6:checked ~ .cs-gal-main .cs-gal-slide:nth-of-type(7),
#cs-gal-7:checked ~ .cs-gal-main .cs-gal-slide:nth-of-type(8) { opacity: 1; visibility: visible; }

#cs-gal-0:checked ~ .cs-gal-thumbs label:nth-of-type(1),
#cs-gal-1:checked ~ .cs-gal-thumbs label:nth-of-type(2),
#cs-gal-2:checked ~ .cs-gal-thumbs label:nth-of-type(3),
#cs-gal-3:checked ~ .cs-gal-thumbs label:nth-of-type(4),
#cs-gal-4:checked ~ .cs-gal-thumbs label:nth-of-type(5),
#cs-gal-5:checked ~ .cs-gal-thumbs label:nth-of-type(6),
#cs-gal-6:checked ~ .cs-gal-thumbs label:nth-of-type(7),
#cs-gal-7:checked ~ .cs-gal-thumbs label:nth-of-type(8) { border-color: var(--ink); }

/* ingrandimento a tutto schermo, senza JavaScript */
.cs-zoom { display: none; }
.cs-zoom:target {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 9999; padding: 32px;
}
.cs-zoom-fondo { position: absolute; inset: 0; background: rgba(12,12,13,.9); }
.cs-zoom img { position: relative; max-width: min(1100px, 92vw); max-height: 88vh; width: auto; height: auto; object-fit: contain; }
.cs-zoom-chiudi {
  position: absolute; top: 22px; right: 26px; width: 44px; height: 44px;
  display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); border-radius: 50%;
}

/* ---------- colonna destra ---------- */
.cs-pdp-occhiello {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red);
  margin-bottom: 10px;
}
.cs-pdp-occhiello .cs-pdp-sku { color: var(--gray-3); letter-spacing: .04em; }
.woocommerce div.product .product_title {
  font-size: clamp(21px, 2vw, 27px); font-weight: 800; letter-spacing: -.015em; line-height: 1.22; margin: 0;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--ink); font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 16px 0 2px;
  font-variant-numeric: tabular-nums;
}
.woocommerce div.product p.price del, .woocommerce div.product span.price del { color: var(--gray-3); font-weight: 600; font-size: 17px; opacity: 1; margin-right: 8px; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--gray); font-size: 14.5px; line-height: 1.6; margin-top: 14px;
}
.woocommerce div.product form.cart {
  margin: 20px 0 0; padding: 18px; background: var(--soft); border: 1px solid var(--line);
  border-radius: 8px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.woocommerce .quantity input.qty {
  width: 64px; height: 46px; border: 1.5px solid var(--line-2); border-radius: var(--radius);
  text-align: center; font-family: var(--font); font-size: 15px; background: #fff;
}
/* ⚠️ Il bordo doppio del campo quantità.
   La regola qui sopra è di WooCommerce "nudo", quando il campo sta da solo. Nel
   tema il campo sta **dentro** lo stepper `.qty`, che ha già il suo bordo: si
   vedevano due cornici, una dentro l'altra, e il numero sembrava un secondo
   riquadro incastrato fra − e +. Dentro lo stepper il campo non ha bordo.
   Serve questa specificità (0,4,2): `.woocommerce .quantity input.qty` è (0,3,2)
   e batte il `border: 0` di `.qty input`. Vale scheda prodotto e carrello. */
.woocommerce .quantity.qty input.qty-input,
.woocommerce-page .quantity.qty input.qty-input {
  width: 52px; height: 44px; border: 0; border-radius: 0;
}
/* Ultimo pezzo: niente − e +, e il contenitore non deve restare come una
   cornice vuota intorno a un campo invisibile. */
.qty.qty-fissa { border: 0; background: none; }
.woocommerce div.product form.cart .button { padding: 14px 26px; font-size: 15.5px; }

/* rassicurazioni sotto l'acquisto */
.cs-pdp-rass { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.cs-pdp-rass li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--gray); }
.cs-pdp-rass li svg { color: var(--red); flex: 0 0 auto; width: 17px; height: 17px; }
.cs-pdp-rass b { color: var(--ink); font-weight: 700; }

/* box "su richiesta / preventivo" iniettato via hook */
.cs-quote-box { background: #fff; border: 1.5px solid var(--ink); border-radius: 8px; padding: 20px; margin: 20px 0 0; }
/* ⚠️ `> b`, non `b`.
   La regola prendeva **qualunque** grassetto dentro al riquadro, compreso
   l'`<b>entro 24 ore</b>` che sta dentro al paragrafo: quelle tre parole
   uscivano a 17px invece che a 14 e, per via del `display: block`, andavano
   pure a capo da sole. Sembrava un errore di composizione ed era questo. Il
   figlio diretto è solo il titolo. */
.cs-quote-box > b { font-size: 17px; display: block; line-height: 1.3; }
.cs-quote-box p { color: var(--gray); font-size: 14px; margin: 8px 0 16px; }
.cs-quote-box p b { font-weight: 800; color: var(--ink); }

/* descrizione e dati tecnici, a fisarmonica */
.cs-pdp-dettagli { margin-top: 24px; border-top: 1px solid var(--line); }
.cs-acc { border-bottom: 1px solid var(--line); }
.cs-acc > summary {
  cursor: pointer; list-style: none; padding: 15px 2px;
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  display: flex; align-items: center;
}
.cs-acc > summary::-webkit-details-marker { display: none; }
.cs-acc > summary::after { content: "+"; margin-left: auto; font-size: 18px; font-weight: 600; color: var(--gray-3); }
.cs-acc[open] > summary::after { content: "−"; }
.cs-acc-corpo { padding: 0 2px 18px; color: var(--gray); font-size: 14.5px; line-height: 1.65; }
.cs-acc-corpo p { margin: 0 0 10px; }
.cs-acc-corpo p:last-child { margin-bottom: 0; }
.cs-attr { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 18px; margin: 0; }
.cs-attr dt { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-3); }
.cs-attr dd { margin: 0; color: var(--ink); font-size: 14px; word-break: break-word; }

/* meta + stock */
.woocommerce div.product .product_meta { font-size: 13.5px; color: var(--gray-3); padding-top: 14px; margin-top: 4px; }
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 5px; }
.woocommerce div.product .product_meta .sku_wrapper { display: none; } /* il codice sta gia' sopra il titolo */
/* Riga di disponibilità sotto il prezzo. Il selettore è legato a `p.stock` e non
   al solo `.stock`: quest'ultimo prendeva anche il badge verde delle card
   (<span class="badge stock">), che è tutt'altra cosa, e vincendo su `.badge`
   gli cambiava corpo, peso e margine rispetto a "Su richiesta". Il badge ora si
   chiama `.badge.avail`; il selettore resta comunque stretto per non ripetere
   l'incidente. `div.product p.stock` va tenuto: serve a battere la regola di
   WooCommerce, che ha la stessa specificità. */
.woocommerce div.product p.stock, .woocommerce p.stock { font-size: 13.5px; font-weight: 700; margin: 10px 0 0; }
.woocommerce div.product p.stock.in-stock, .woocommerce p.stock.in-stock { color: #138a4e; }
.woocommerce div.product p.stock.out-of-stock, .woocommerce p.stock.out-of-stock { color: var(--gray); }

/* Correlati e upsell: blocchi a piena larghezza sotto la scheda, non più celle
   della griglia. Stanno fuori da <div class="product"> (vedi la nota sugli hook
   in functions.php), così la griglia resta di una riga sola e la galleria
   appiccicata si ferma a fine scheda invece di scendere accanto ai correlati. */
.woocommerce .related, .woocommerce .upsells { margin-top: 48px; }
.woocommerce .related > h2, .woocommerce .upsells > h2 { font-size: 24px; font-weight: 800; margin-bottom: 20px; }

@media (max-width: 900px) {
  .woocommerce div.product { grid-template-columns: 1fr; gap: 26px; }
  .cs-gal { position: static; grid-template-columns: minmax(0, 1fr); }
  .cs-gal-main { grid-column: 1; }
  .cs-gal-thumbs { grid-column: 1; grid-row: 2; grid-auto-flow: column; grid-auto-columns: 68px; overflow-x: auto; }
}

/* ============================================================
   CARRELLO / CHECKOUT / ACCOUNT
   ============================================================ */
.woocommerce table.shop_table {
  border: 1px solid var(--line); border-radius: 6px; border-collapse: separate; border-spacing: 0;
}
.woocommerce table.shop_table th { background: var(--soft); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray); padding: 14px 16px; }
.woocommerce table.shop_table td { padding: 16px; border-top: 1px solid var(--line); }
.woocommerce .cart_totals h2, .woocommerce-checkout #order_review_heading { font-size: 20px; 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: 12.5px; font-weight: 700; color: var(--gray); }
.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); font-size: 15px; padding: 12px 13px;
  border: 1.5px solid var(--line-2); border-radius: var(--radius); 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: 15px; 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; }
.woocommerce-account.logged-out .woocommerce { display: block; }
.woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; float: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { border: 1px solid var(--line); 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: 14.5px; 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(--soft); }
.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 26px; }
.woocommerce-account.logged-out .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.woocommerce-account.logged-out .u-columns::before,
.woocommerce-account.logged-out .u-columns::after { content: none; }
.woocommerce-account .u-column1, .woocommerce-account .u-column2 { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 26px; }

/* ============================================================
   STEPPER QUANTITÀ (−/+) — override quantity-input.php
   ============================================================ */
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: var(--radius); 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(--soft-2); }
.qty input, .qty .qty-input { width: 52px; height: 44px; border: 0; text-align: center; font-size: 15px; font-family: var(--font); 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 (come nell'override AIGAB) */
.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(--line);
}
.cs-cart-item:first-child { border-top: 1px solid var(--line); }
.cs-cart-item .ci-foto img { width: 84px; height: auto; border-radius: 6px; border: 1px solid var(--line); display: block; }
.cs-cart-item .ci-nome a { font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.35; }
.cs-cart-item .ci-nome a:hover { color: var(--red); }
.cs-cart-item .ci-rimuovi { margin-top: 8px; }
.cs-cart-item .ci-rimuovi a { font-size: 12.5px; color: var(--gray-2); text-decoration: underline; }
.cs-cart-item .ci-rimuovi a:hover { color: var(--red); }
.cs-cart-item .ci-qta { min-width: 108px; }
.cs-cart-item .ci-sub { font-weight: 900; font-size: 16px; 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(--soft); border: 1px solid var(--line); 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(--line);
  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(--gray-2);
}
.pagamenti-carrello .pag-titolo svg { width: 15px; height: 15px; color: var(--red); }
.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(--gray-2); text-decoration: underline; text-underline-offset: 3px;
}
.cs-continua a:hover { color: var(--red); }
.cs-totals-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.cs-totals-table th { text-align: left; font-weight: 600; color: var(--gray); padding: 6px 0; font-size: 14px; }
.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(--gray-3); font-size: 12px; font-weight: 500; white-space: normal; }

/* ============================================================
   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), come nell'override AIGAB. */
/* 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: 20px; font-weight: 800; }

/* Riepilogo: card con tabella articoli, coupon e totali. */
.cs-riepilogo-corpo {
  margin-top: 14px; background: #fff;
  border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px;
  box-shadow: var(--shadow);
}
.cs-riepilogo-tabella { width: 100%; border-collapse: collapse; }
.cs-riepilogo-tabella th,
.cs-riepilogo-tabella td { padding: 10px 0; vertical-align: top; text-align: left; }
.cs-riepilogo-tabella thead th {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gray-3); border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.cs-riepilogo-tabella tbody tr + tr td { border-top: 1px solid var(--line); }
.cs-riepilogo-tabella .cs-destra { text-align: right; white-space: nowrap; }
.cs-riga-nome { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.cs-riga-meta { display: block; font-size: 12px; color: var(--gray-3); margin-top: 2px; }
.cs-riga-meta b { color: var(--gray); }
.cs-riepilogo-tabella tfoot { border-top: 1px solid var(--line); }
.cs-riepilogo-tabella tfoot th { font-size: 14px; font-weight: 600; color: var(--gray); padding: 7px 0; }
.cs-riepilogo-tabella tfoot td { font-size: 14px; 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: 17px; font-weight: 900; color: var(--ink);
  border-top: 1px solid var(--line); padding-top: 12px;
}
.cs-attesa { font-weight: 600; font-size: 13px; color: var(--gray-3); white-space: normal; }
.cs-coupon-riga td { border-top: 1px solid var(--line) !important; }
.woocommerce form.checkout h3 { font-size: 18px; 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 ITALIANWAY 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(--red); }
.woocommerce form.checkout .form-row .optional { font-weight: 500; color: var(--gray-3); }

/* ---------- "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(--soft); border: 1px solid var(--line); 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(--red); 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(--line); 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(--line); }
.cs-bonifico-conto dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-3); }
.cs-bonifico-conto dd { margin: 0; font-size: 14px; 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: 12.5px; color: var(--gray-2); 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(--soft); border: 1px solid var(--line); 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(--red); width: 17px; height: 17px; margin: 0; flex: 0 0 auto; cursor: pointer;
}
.woocommerce form.checkout h3#ship-to-different-address span { font-weight: 700; }

/* ---------- "Salva questo indirizzo nella rubrica" ----------
   Arriva dal plugin Rubrica indirizzi (.rbi-salva) ed e' la stessa specie di
   scelta di "Spedire a un indirizzo diverso?" e di "Desidero ricevere la
   fattura": stesso riquadro, stessa spunta rossa, stesso peso del testo.
   Il campo del soprannome, che compare solo a spunta accesa, sta dentro lo
   stesso riquadro perche' appartiene a quella scelta. */
.woocommerce form.checkout .rbi-salva {
  background: var(--soft); border: 1px solid var(--line); border-radius: 6px;
  padding: 12px 14px; margin: 4px 0 16px;
}
.woocommerce form.checkout .rbi-salva .form-row { margin: 0; }
.woocommerce form.checkout .rbi-salva 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 .rbi-salva input[type="checkbox"] {
  accent-color: var(--red); width: 17px; height: 17px; margin: 0; flex: 0 0 auto; cursor: pointer;
}
/* Il soprannome resta un campo normale: etichetta piccola sopra, non in grassetto. */
.woocommerce form.checkout .rbi-salva .rbi-salva-nome { margin-top: 12px; }
.woocommerce form.checkout .rbi-salva .rbi-salva-nome label {
  display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--gray-2);
}

/* 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: 17px; 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(--line); 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: 13.5px; color: var(--gray);
}
.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; }
.cs-coupon .checkout_coupon input[type="text"] { width: 100%; }
.cs-coupon .checkout_coupon button {
  width: 100%; white-space: nowrap; padding: 11px 14px; font-size: 14px;
}

/* Pagamento: sezione a sé, sotto il riepilogo. */
.cs-pagamento { border-top: 1px solid var(--line); padding-top: 18px; }
.cs-pagamento h3 { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.cs-pagamento-nota { font-size: 13px; color: var(--gray-2); 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(--line-2); 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(--gray-3); }
.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(--red); 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(--gray); 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(--gray-2); margin-bottom: 12px; }
.cs-pagamento .woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; }
.cs-pagamento .validate-required.woocommerce-invalid label { color: var(--red); }

/* 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); font-size: 16px; font-weight: 800; line-height: 1.2;
  padding: 16px 24px; background: var(--red); color: #fff; border: 0; border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
             calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background .16s;
}
.cs-pagamento #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--red-dark); }

/* ============================================================
   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; }
  .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; }
  .woocommerce-account.logged-out .u-columns { grid-template-columns: 1fr; }
  .woocommerce table.shop_table_responsive tr td { text-align: right; }
}

/* ============================================================
   CHECKOUT SENZA VIE D'USCITA
   ============================================================
   Header e footer nel checkout perdono tutto quello che porta altrove
   (ricerca, menu, categorie, carrello, contatti, social, WhatsApp): 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.

   Qui c'è solo come si ricompone quello che resta: la fascia nera con
   spedizione e garanzia, il marchio, i pagamenti e la riga legale. */

/* Come si ricompongono header e footer senza le loro parti sta in sv-base.css,
   sotto `.cs-focus`: questo foglio si carica solo sulle pagine WooCommerce, e
   la stessa modalità serve anche alle landing pubblicitarie (inc/adv.php). */

/* 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(--line); border-radius: 8px;
  box-shadow: var(--shadow-hover); padding: 16px 18px 18px;
}
/* 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(--line); border-top: 1px solid var(--line);
  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(--gray); }
.cs-esci-azioni { display: flex; gap: 8px; }
.cs-esci-azioni .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; }