/* =============================================================================
   PROBAR - CHECKOUT
   -----------------------------------------------------------------------------
   Percorso: [child]/css/checkout-ui.css  |  Caricato solo su carrello/checkout.

   PRINCIPI (rubati ai checkout che convertono meglio al mondo)
   1. UNA COLONNA su mobile, riepilogo sopra e collassato: l'utente vede subito
      COSA sta comprando, poi compila. Su desktop, riepilogo affiancato e fisso.
   2. ETICHETTE SEMPRE VISIBILI, mai solo placeholder: il placeholder sparisce
      appena scrivi e l'utente non sa piu' cosa stava compilando. E' la prima
      causa di errori nei form.
   3. CAMPI GRANDI (52px): il pollice non e' un mouse.
   4. RASSICURAZIONE DOVE NASCE IL DUBBIO: la sicurezza si dichiara accanto al
      pagamento, non nel footer.
   5. UN SOLO PULSANTE che chiude. Niente distrazioni, niente link in uscita.
   ============================================================================= */

:root {
  --pb-gold: #FFCE53;
  --pb-gold-line: rgba(255, 206, 83, 0.18);
  --pb-gold-hover: rgba(255, 206, 83, 0.75);
  --pb-field: #0f0f0f;
  --pb-field-focus: #141414;
  --pb-panel: #0a0a0a;
  --pb-line: rgba(255, 255, 255, 0.10);
  --pb-text: #ffffff;
  --pb-muted: rgba(255, 255, 255, 0.62);
  --pb-ok: #35c26b;
  --pb-err: #ff6b6b;
  --pb-ease: cubic-bezier(0.16, 1, 0.30, 1);
  --pb-radius: 12px;
}

/* ==========================================================================
   1. IMPIANTO GENERALE
   ========================================================================== */
.woocommerce-checkout .site-main,
.woocommerce-cart .site-main {
  background-color: #000;
}

.woocommerce-checkout .entry-title,
.woocommerce-cart .entry-title {
  text-align: center;
  color: var(--pb-text);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* =============================================================================
   LE GARANZIE: UNA PER PASSO, DOVE NASCE IL DUBBIO
   -----------------------------------------------------------------------------
   Rifatte il 26 agosto 2026 (tre schede al posto di tre etichette), separate la
   sera dello stesso giorno. Le tre schede stavano insieme sopra il modulo, cioe'
   fuori da tutti e tre i passi: quindi si vedevano in tutti e tre, tre volte per
   ordine. Una promessa ripetuta tre volte non rassicura tre volte: diventa
   fondale, e il cliente smette di leggerla gia' alla seconda.

   Adesso e' una scheda sola per passo, e ognuna sta accanto alla domanda a cui
   risponde: il recesso dove si sceglie come ordinare, il tracciamento in fondo
   all'indirizzo di spedizione. Nel passo del pagamento non ce ne sono: li'
   parla il riquadro verde della carta, e solo a chi la carta l'ha scelta.
   ========================================================================== */
.pb-garanzia {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto 26px;
  padding: 16px 18px;
  border: 1px solid var(--pb-gold-line);
  border-radius: 12px;
  background: rgba(255, 206, 83, 0.035);
}

/* Dentro la capsula della spedizione non e' piu' una scheda a se': e' la riga
   conclusiva di quella capsula, e un riquadro dentro un riquadro sarebbe una
   scatola nelle scatole. Filo sopra, niente bordo, niente fondo. */
.woocommerce-checkout .woocommerce-shipping-fields .pb-garanzia {
  max-width: none;
  margin: 0;
  padding: 14px 18px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: transparent;
}

.pb-garanzia__icona {
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 2px;
}

.pb-garanzia__icona svg {
  width: 17px;
  height: 17px;
  fill: var(--pb-gold);
}

.pb-garanzia__testo { display: block; }

.pb-garanzia__titolo {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.pb-garanzia__riga {
  display: block;
  color: var(--pb-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* ==========================================================================
   2. SEZIONI DEL FORM - "schede" scure, respiro, gerarchia
   ========================================================================== */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .ast-customer-info {
  background-color: var(--pb-panel);
  border: 1px solid var(--pb-line);
  border-radius: var(--pb-radius);
  padding: 26px 24px;
  margin-bottom: 20px;
}

/* I metodi di pagamento NON stanno in una scatola: le card respirano
   direttamente sulla pagina, senza un contenitore che le stringe */
.woocommerce-checkout #payment {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 24px;
}

.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
  color: var(--pb-text) !important;
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 20px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pb-gold-line);
}

/* ==========================================================================
   3. CAMPI - il cuore. Etichetta sopra, campo alto, focus dorato.
   ========================================================================== */
.woocommerce-checkout .form-row {
  margin: 0 0 16px !important;
  padding: 0 !important;
}

.woocommerce-checkout .form-row label {
  display: block !important;
  margin: 0 0 7px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.woocommerce-checkout .required {
  color: var(--pb-gold) !important;
  text-decoration: none;
  border: none;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-container .select2-selection,
.woocommerce-checkout .form-row select {
  width: 100% !important;
  min-height: 52px !important;         /* comodo per il pollice */
  padding: 14px 16px !important;
  box-sizing: border-box;
  background-color: var(--pb-field) !important;
  border: 1px solid var(--pb-line) !important;
  border-radius: 10px !important;
  color: var(--pb-text) !important;
  font-size: 16px !important;          /* < 16px = iOS zooma da solo: mai */
  line-height: 1.4;
  transition: border-color 0.35s var(--pb-ease),
              background-color 0.35s var(--pb-ease),
              box-shadow 0.35s var(--pb-ease);
}

.woocommerce-checkout .form-row textarea {
  min-height: 110px !important;
  resize: vertical;
}

.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder {
  color: rgba(255, 255, 255, 0.62) !important;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
  outline: none !important;
  background-color: var(--pb-field-focus) !important;
  border-color: var(--pb-gold-hover) !important;
  box-shadow: 0 0 0 3px rgba(255, 206, 83, 0.12) !important;
}

/* Campo compilato correttamente: spunta discreta, non invadente */
.woocommerce-checkout .form-row.woocommerce-validated input.input-text {
  border-color: rgba(53, 194, 107, 0.45) !important;
}

.woocommerce-checkout .form-row.woocommerce-invalid input.input-text {
  border-color: rgba(255, 107, 107, 0.6) !important;
}

/* Select2 (paese/provincia): deve sembrare un campo, non un widget estraneo */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  display: flex !important;
  align-items: center;
  background-color: var(--pb-field) !important;
  border: 1px solid var(--pb-line) !important;
  border-radius: 10px !important;
  height: 52px !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single
.select2-selection__rendered {
  color: var(--pb-text) !important;
  line-height: 52px !important;
  padding-left: 4px !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single
.select2-selection__arrow { height: 50px !important; }

.select2-dropdown {
  background-color: #0f0f0f !important;
  border: 1px solid var(--pb-gold-line) !important;
  color: var(--pb-text) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(255, 206, 83, 0.14) !important;
  color: var(--pb-gold) !important;
}

/* Due colonne su desktop per nome/cognome, citta'/CAP: meno scroll */
@media (min-width: 769px) {
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    width: 48.5% !important;
    float: none !important;
    display: inline-block;
    vertical-align: top;
  }
  .woocommerce-checkout .form-row-first { margin-right: 2.5% !important; }
}

/* Su mobile TUTTO a piena larghezza: mai due campi affiancati sotto i 768px */
@media (max-width: 768px) {
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last,
  .woocommerce-checkout .form-row-wide {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }
}

/* Casella "spedire a un indirizzo diverso" */
.woocommerce-checkout #ship-to-different-address {
  margin: 0 !important;
}

.woocommerce-checkout #ship-to-different-address label,
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: var(--pb-text) !important;
  font-size: 13px !important;
  text-transform: none;
  letter-spacing: 0.3px;
  cursor: pointer;
}

.woocommerce-checkout input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--pb-gold);
  cursor: pointer;
}

/* ==========================================================================
   4. RIEPILOGO ORDINE - la vetrina della fiducia
   ========================================================================== */
.woocommerce-checkout #ast-order-review-wrapper,
.woocommerce-checkout .woocommerce-checkout-review-order {
  background-color: var(--pb-panel);
  border: 1px solid var(--pb-gold-line);
  border-radius: var(--pb-radius);
  padding: 24px 22px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--pb-line) !important;
  color: var(--pb-text) !important;
  background: transparent !important;
  font-size: 14px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
  color: var(--pb-muted) !important;
  font-size: 12px !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}

.woocommerce-checkout .cart_item img {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
}

.woocommerce-checkout .order-total th,
.woocommerce-checkout .order-total td,
.woocommerce-checkout .order-total .amount {
  color: var(--pb-gold) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  border-bottom: none !important;
}

/* Spedizione mancante: il messaggio piu' costoso del sito. Va visto. */
.woocommerce-checkout .woocommerce-shipping-totals td {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 14px;
  text-align: right;
}

/* ==========================================================================
   5. COUPON - un dettaglio, non un invito a uscire a cercare sconti
   ========================================================================== */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin-bottom: 18px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background-color: transparent !important;
  border: 1px dashed var(--pb-gold-line) !important;
  border-radius: 10px;
  padding: 12px 16px !important;
  color: var(--pb-muted) !important;
  font-size: 14px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle a { color: var(--pb-gold) !important; }

.woocommerce-checkout .checkout_coupon {
  background-color: var(--pb-panel) !important;
  border: 1px solid var(--pb-gold-line) !important;
  border-radius: var(--pb-radius);
  padding: 20px !important;
}

/* ==========================================================================
   6. PAGAMENTO + PULSANTE FINALE
   ========================================================================== */
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0 !important;
  margin: 0 0 18px !important;
  border: none !important;
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
  padding: 16px !important;
  margin-bottom: 10px;
  border: 1px solid var(--pb-line);
  border-radius: 10px;
  background-color: var(--pb-field);
  transition: border-color 0.35s var(--pb-ease);
}

.woocommerce-checkout #payment ul.payment_methods li:hover {
  border-color: var(--pb-gold-hover);
}

.woocommerce-checkout #payment ul.payment_methods li label {
  color: var(--pb-text) !important;
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-radius: 8px;
  color: var(--pb-muted) !important;
  font-size: 14px;
  margin-top: 12px !important;
}

.woocommerce-checkout #payment div.payment_box::before { display: none !important; }

/* Sicurezza dichiarata ACCANTO al pagamento, dove nasce il dubbio */
.pb-secure-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(53, 194, 107, 0.28);
  border-radius: 10px;
  background-color: rgba(53, 194, 107, 0.06);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.55;
}

.pb-secure-note svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-top: 1px;
  fill: var(--pb-ok);
}

.pb-secure-note strong { color: #fff; }

/* Privacy / GDPR */
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  color: var(--pb-muted) !important;
  font-size: 14px !important;
  line-height: 1.6;
}

.woocommerce-checkout .woocommerce-privacy-policy-text a,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
  color: var(--pb-gold) !important;
  text-decoration: underline;
}

/* IL PULSANTE. Uno solo, pieno, inequivocabile. */
.woocommerce-checkout #place_order,
.woocommerce-checkout .button.alt {
  display: block;
  width: 100%;
  min-height: 58px;
  margin-top: 8px;
  padding: 18px 24px !important;
  background-color: var(--pb-gold) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 10px !important;
  color: #111 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.5s var(--pb-ease),
              box-shadow 0.5s var(--pb-ease),
              background-color 0.35s ease;
}

.woocommerce-checkout #place_order:hover {
  background-color: #ffd977 !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(255, 206, 83, 0.22);
}

.woocommerce-checkout #place_order:disabled,
.woocommerce-checkout #place_order.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   7. DESKTOP: riepilogo che segue lo scroll
   ========================================================================== */
@media (min-width: 993px) {
  .woocommerce-checkout #ast-order-review-wrapper {
    position: sticky;
    top: 24px;
  }
}

/* ==========================================================================
   8. MOBILE: il 70% del tuo traffico
   - riepilogo in cima, richiudibile
   - barra fissa in basso con totale e pulsante: il traguardo e' sempre visibile
   ========================================================================== */
.pb-mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background-color: rgba(8, 8, 8, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--pb-gold-line);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}

.pb-mobile-bar__total {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.pb-mobile-bar__label {
  color: var(--pb-muted);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pb-mobile-bar__amount {
  color: var(--pb-gold);
  font-size: 19px;
  font-weight: 700;
}

.pb-mobile-bar__btn {
  flex: 1 1 auto;
  max-width: 62%;
  min-height: 50px;
  border: none;
  border-radius: 10px;
  background-color: var(--pb-gold);
  color: #111;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 992px) {
  .woocommerce-checkout .pb-mobile-bar { display: flex; }

  /* spazio in fondo, altrimenti la barra copre l'ultimo campo */
  .woocommerce-checkout .site-main { padding-bottom: 96px; }

  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields,
  .woocommerce-checkout #payment,
  .woocommerce-checkout #ast-order-review-wrapper {
    padding: 20px 16px;
  }

  .pb-garanzia {
    margin-bottom: 20px;
    padding: 14px 16px;
  }

  .woocommerce-checkout .woocommerce-shipping-fields .pb-garanzia {
    padding: 14px;
  }

  .pb-garanzia__titolo { font-size: 14px; }
  .pb-garanzia__riga { font-size: 14px; }
}

/* ==========================================================================
   9. AVVISI WOOCOMMERCE (errori, notifiche)
   ========================================================================== */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
  border-radius: 10px;
  border: 1px solid var(--pb-line);
  background-color: var(--pb-panel) !important;
  color: var(--pb-text) !important;
}

.woocommerce-checkout .woocommerce-error {
  border-color: rgba(255, 107, 107, 0.5);
  border-top-color: rgba(255, 107, 107, 0.5) !important;
}

.woocommerce-checkout .woocommerce-error li { color: #ffb3b3 !important; }

/* ==========================================================================
   10. ACCESSIBILITA
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .woocommerce-checkout #place_order,
  .woocommerce-checkout #place_order:hover {
    transition: none !important;
    transform: none !important;
  }
}

.woocommerce-checkout a:focus-visible,
.woocommerce-checkout button:focus-visible,
.woocommerce-checkout input:focus-visible {
  outline: 2px solid var(--pb-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   11. NEUTRALIZZAZIONE DEGLI STILI INLINE ("incollato da Word")
   --------------------------------------------------------------------------
   Il contenuto dei Termini e la descrizione dei metodi di pagamento arrivano
   dall'editor con stili scritti nel tag: <p style="background:#FFFFFF...">.
   Uno stile inline vince su qualunque foglio di stile: solo !important lo
   annulla.

   *** REGOLA D'ORO: NON TOCCARE MAI IL WIDGET IUBENDA. ***
   Il badge di iubenda vive dentro questi stessi contenitori e la sua icona e'
   disegnata con un background-image. Azzerare lo sfondo "a tappeto" la fa
   esplodere in miniature sparse. Per questo ogni selettore jolly qui sotto
   esclude esplicitamente tutto cio' che ha "iubenda" nel nome della classe,
   e i suoi discendenti.
   ========================================================================== */

.woocommerce-checkout .woocommerce-terms-and-conditions *:not([class*="iubenda"]):not([class*="iubenda"] *),
.woocommerce-checkout .woocommerce-privacy-policy-text *:not([class*="iubenda"]):not([class*="iubenda"] *),
.woocommerce-checkout #payment div.payment_box *:not([class*="iubenda"]):not([class*="iubenda"] *) {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: inherit !important;
  text-indent: 0 !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions,
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout #payment div.payment_box {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Eccezioni: cio' che deve restare in evidenza */
.woocommerce-checkout .woocommerce-terms-and-conditions strong,
.woocommerce-checkout .woocommerce-terms-and-conditions b,
.woocommerce-checkout #payment div.payment_box strong,
.woocommerce-checkout #payment div.payment_box b {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Link di TESTO (non i badge iubenda) */
.woocommerce-checkout .woocommerce-terms-and-conditions a:not([class*="iubenda"]),
.woocommerce-checkout .woocommerce-privacy-policy-text a:not([class*="iubenda"]),
.woocommerce-checkout #payment div.payment_box a:not([class*="iubenda"]) {
  color: var(--pb-gold) !important;
  text-decoration: underline !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions h1,
.woocommerce-checkout .woocommerce-terms-and-conditions h2,
.woocommerce-checkout .woocommerce-terms-and-conditions h3,
.woocommerce-checkout .woocommerce-terms-and-conditions h4 {
  color: #ffffff !important;
  font-size: 14px !important;
  margin: 18px 0 8px !important;
}

/* Word semina paragrafi vuoti a decine */
.woocommerce-checkout .woocommerce-terms-and-conditions p:empty,
.woocommerce-checkout #payment div.payment_box p:empty {
  display: none !important;
}

/* Riquadro scorrevole dei Termini (se mai riaffiorasse un contenuto locale) */
.woocommerce-checkout .woocommerce-terms-and-conditions {
  max-height: 220px !important;
  overflow-y: auto !important;
  margin: 14px 0 18px !important;
  padding: 18px 20px !important;
  border: 1px solid var(--pb-gold-line) !important;
  border-radius: 10px !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 206, 83, 0.35) rgba(255, 255, 255, 0.04);
}

.woocommerce-checkout .woocommerce-terms-and-conditions::-webkit-scrollbar { width: 8px; }
.woocommerce-checkout .woocommerce-terms-and-conditions::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04); border-radius: 8px;
}
.woocommerce-checkout .woocommerce-terms-and-conditions::-webkit-scrollbar-thumb {
  background: rgba(255, 206, 83, 0.35); border-radius: 8px;
}

/* Descrizione del metodo di pagamento (es. contrassegno) */
.woocommerce-checkout #payment div.payment_box {
  padding: 14px 16px !important;
  border-radius: 8px !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.woocommerce-checkout #payment div.payment_box p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 0 8px !important;
}

.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0 !important; }

/* Loghi dei gateway: mai resi trasparenti, sparirebbero */
.woocommerce-checkout #payment div.payment_box img,
.woocommerce-checkout #payment ul.payment_methods img {
  background: initial !important;
  max-height: 26px;
  width: auto;
  vertical-align: middle;
}

/* ==========================================================================
   12. WIDGET IUBENDA - MANI LONTANE
   --------------------------------------------------------------------------
   Zero regole sul badge: lo veste iubenda, con la livrea "Scuro" scelta nel
   portale e attivata dalla classe iubenda-black. Ogni nostro ritocco sarebbe
   una battaglia col loro CSS, persa al primo aggiornamento.
   Qui solo il respiro della riga che lo contiene: il badge e' piu' alto del
   testo e ha bisogno di spazio, altrimenti finisce sotto la riga successiva.
   ========================================================================== */

.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper
.woocommerce-form__label-for-checkbox {
  line-height: 2.3 !important;
}

/* NIENTE FLEX SU QUESTA ETICHETTA, ed e' il punto (corretto il 19 agosto 2026).
   Qui c'era `display:flex; flex-wrap:wrap`, e faceva due danni in uno:

   1. ogni pezzo diventava un item per conto suo, quindi l'asterisco
      dell'obbligatorieta' finiva su una RIGA TUTTA SUA, e con line-height 2.3
      quella riga gonfiava la capsula di una trentina di pixel per niente;
   2. i figli di un contenitore flex vengono "blockificati": l'`abbr.required`
      era dichiarato `display:inline` dalla sezione 22, ma da item flex
      calcolava `block` lo stesso. Si cercava il colpevole nel posto sbagliato.

   La sezione 22 dice gia' come deve stare: etichetta a blocco, spunta assoluta
   a sinistra, testo e pill che FLUISCONO in linea. Quella regola pero' pesa
   due classi piu' un elemento e perdeva contro le tre classi di qui: la
   correzione e' togliere il flex, non aggiungere un !important sopra. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper
.woocommerce-form__label-for-checkbox {
  padding: 16px;
  border: 1px solid var(--pb-gold-line);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.03);
  font-size: 13.5px !important;
  text-transform: none !important;
  letter-spacing: 0.2px;
}

/* ==========================================================================
   13. MODALE IUBENDA - vestita di scuro
   --------------------------------------------------------------------------
   Questo si', possiamo vestirlo: grazie a iubenda-noiframe il documento viene
   iniettato nel DOM (non in un iframe). Qui NON tocchiamo il badge, ma la
   finestra che si apre dopo il click.
   ========================================================================== */

#iubenda-iframe.iubenda-iframe-visible,
#iubenda-iframe {
  background-color: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(8px);
  z-index: 99999 !important;
}

#iubenda-iframe #iubenda-iframe-content,
#iubenda-iframe .iubenda-iframe-content,
#iubenda-iframe .iub_container,
#iubenda-iframe .iub_content,
#iubenda-iframe .iub_base_container {
  background-color: #0a0a0a !important;
  background-image: none !important;
  border: 1px solid rgba(255, 206, 83, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

#iubenda-iframe #iubenda-iframe-content p,
#iubenda-iframe #iubenda-iframe-content li,
#iubenda-iframe #iubenda-iframe-content span,
#iubenda-iframe #iubenda-iframe-content div,
#iubenda-iframe .iub_content p,
#iubenda-iframe .iub_content li,
#iubenda-iframe .iub_content span {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

#iubenda-iframe h1,
#iubenda-iframe h2,
#iubenda-iframe h3,
#iubenda-iframe strong,
#iubenda-iframe b { color: #ffffff !important; }

#iubenda-iframe h1 {
  border-bottom: 1px solid rgba(255, 206, 83, 0.22) !important;
  padding-bottom: 14px !important;
}

#iubenda-iframe a {
  color: #FFCE53 !important;
  text-decoration: underline !important;
}

#iubenda-iframe .box_primary,
#iubenda-iframe .box_10,
#iubenda-iframe ul.for_boxes li {
  background-color: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
}

/* Immagini e icone dentro la modale: MAI trasparenti */
#iubenda-iframe img,
#iubenda-iframe svg { background-color: initial !important; }

/* Tasto di chiusura: nero su nero sarebbe invisibile */
#iubenda-iframe .iubenda-iframe-close-btn {
  filter: invert(1) !important;
  opacity: 0.85 !important;
}

#iubenda-iframe .iubenda-iframe-close-btn:hover { opacity: 1 !important; }

#iubenda-iframe *::-webkit-scrollbar { width: 8px; }
#iubenda-iframe *::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04); border-radius: 8px;
}
#iubenda-iframe *::-webkit-scrollbar-thumb {
  background: rgba(255, 206, 83, 0.35); border-radius: 8px;
}

@media (max-width: 768px) {
  #iubenda-iframe #iubenda-iframe-content,
  #iubenda-iframe .iubenda-iframe-content {
    width: 94% !important;
    max-height: 88vh !important;
    border-radius: 12px !important;
  }
}

/* ==========================================================================
   12. RESPIRO v2 - la stessa aria elegante della pagina Carrello
   --------------------------------------------------------------------------
   Il checkout era troppo fitto: testi appiccicati ai bordi dei riquadri e
   celle della tabella attaccate l'una all'altra. Qui si allarga tutto di
   un passo: padding piu' generosi nei pannelli, celle con margine
   orizzontale, titoli che non toccano mai il contenuto.
   ========================================================================== */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .ast-customer-info {
  padding: 32px 30px !important;
  margin-bottom: 24px !important;
}

/* Il riquadro GRANDE sta vicino a quello piccolo (gap minimo)... */
.woocommerce-checkout #ast-order-review-wrapper {
  padding: 14px 12px !important;
}

/* ...ed e' DENTRO il riquadro piccolo che il testo respira */
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-checkout #order_review {
  padding: 26px 24px !important;
}

/* Le celle del riepilogo: margine orizzontale, mai testo a filo bordo */
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  padding: 18px 14px !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th:first-child,
.woocommerce-checkout .woocommerce-checkout-review-order-table td:first-child {
  padding-left: 6px !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th:last-child,
.woocommerce-checkout .woocommerce-checkout-review-order-table td:last-child {
  padding-right: 6px !important;
}

/* Titoli delle sezioni: piu' distacco dal contenuto che introducono */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
  margin: 0 0 24px !important;
  padding-bottom: 14px !important;
}

/* Il box di login al checkout ("Il tuo account"): campi mai a filo bordo */
.woocommerce-checkout .ast-customer-info .woocommerce-form-login,
.woocommerce-checkout .ast-customer-info .woocommerce-form-login .form-row {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================================
   13. CARRELLO - nomi prodotto leggibili, totale senza indirizzo
   ========================================================================== */
/* Il nome del prodotto era nero su nero: bianco, e oro al passaggio,
   come ogni altro link del sito */
.woocommerce-cart table.cart td.product-name a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.woocommerce-cart table.cart td.product-name a:hover {
  color: var(--pb-gold) !important;
}

/* L'indirizzo di spedizione NON si anticipa nel totale carrello:
   comparira' solo al checkout, nel riepilogo con fatturazione/spedizione */
.woocommerce-shipping-destination {
  display: none !important;
}

/* ==========================================================================
   13. LUCCHETTO DEL PULSANTE D'ORDINE - via quando il metodo non e' un
   pagamento online (bonifico, contrassegno). La classe abm-no-lock la
   applica js/checkout-payment-labels.js in base al metodo selezionato.
   ========================================================================== */
#place_order.abm-no-lock::before,
#place_order.abm-no-lock::after,
#place_order.abm-no-lock .ast-icon,
#place_order.abm-no-lock svg,
#place_order.abm-no-lock i {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   14. PAGINA CONFERMA ORDINE - via i blocchi orfani
   --------------------------------------------------------------------------
   Nel contenuto della pagina di conferma sono rimasti blocchi Gutenberg
   di WooCommerce mai configurati ("Review My Order", "Suggested for you",
   "Subtotal", "Taxes & shipping calculated at checkout"): scheletri in
   inglese senza dati. Spariscono; il riepilogo vero (.woocommerce) resta.
   ========================================================================== */
.woocommerce-order-received .entry-content > .wp-block-group {
  display: none !important;
}

/* ==========================================================================
   15. LINK NELLE NOTIFICHE DEL CHECKOUT - bianchi, oro al passaggio
   --------------------------------------------------------------------------
   "Leggi e accetta i termini e le condizioni..." era grigio scuro su
   fondo scuro: invisibile proprio quando serve di piu'.
   ========================================================================== */
.woocommerce-checkout .woocommerce-error a,
.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .woocommerce-message a,
.woocommerce-checkout .woocommerce-NoticeGroup a {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  transition: color 0.3s ease;
}

.woocommerce-checkout .woocommerce-error a:hover,
.woocommerce-checkout .woocommerce-info a:hover,
.woocommerce-checkout .woocommerce-message a:hover,
.woocommerce-checkout .woocommerce-NoticeGroup a:hover {
  color: var(--pb-gold) !important;
}

/* ==========================================================================
   16. AUTOFILL SEMPRE SCURO + VALIDAZIONE VERDE/ROSSA
   --------------------------------------------------------------------------
   Chrome dipinge di bianco/celeste i campi compilati automaticamente:
   il box-shadow interno lo copre con il nostro nero, il testo resta
   bianco. La validazione parla con i bordi: verde tenue quando il dato
   e' buono, rosso tenue quando manca o e' sbagliato.
   ========================================================================== */
.woocommerce-checkout input:-webkit-autofill,
.woocommerce-checkout input:-webkit-autofill:hover,
.woocommerce-checkout input:-webkit-autofill:focus,
.woocommerce-checkout select:-webkit-autofill,
.woocommerce-checkout textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--pb-field) inset !important;
  box-shadow: 0 0 0 1000px var(--pb-field) inset !important;
  -webkit-text-fill-color: var(--pb-text) !important;
  caret-color: var(--pb-text);
  border: 1px solid var(--pb-line) !important;
  transition: background-color 99999s ease-out 0s;
}

/* Validazione live anche dove WooCommerce non mette le sue classi:
   verde solo con contenuto reale, rosso su obbligatori vuoti o errati */
.woocommerce-checkout .form-row input.input-text:user-valid:not(:placeholder-shown) {
  border-color: rgba(53, 194, 107, 0.45) !important;
}

.woocommerce-checkout .form-row input.input-text:user-invalid {
  border-color: rgba(255, 107, 107, 0.6) !important;
}

/* ==========================================================================
   17. CODICE SCONTO AL CHECKOUT - stesso vestito degli altri campi
   ========================================================================== */
#ast-checkout-coupon input.input-text,
#ast-checkout-coupon input[type="text"],
.woocommerce-checkout .checkout_coupon input.input-text {
  width: 100% !important;
  min-height: 52px !important;
  padding: 14px 16px !important;
  box-sizing: border-box;
  background-color: var(--pb-field) !important;
  border: 1px solid var(--pb-line) !important;
  border-radius: 10px !important;
  color: var(--pb-text) !important;
  font-size: 16px !important;
  transition: border-color 0.35s var(--pb-ease), box-shadow 0.35s var(--pb-ease);
}

#ast-checkout-coupon input.input-text:focus,
.woocommerce-checkout .checkout_coupon input.input-text:focus {
  outline: none !important;
  background-color: var(--pb-field-focus) !important;
  border-color: var(--pb-gold-hover) !important;
  box-shadow: 0 0 0 3px rgba(255, 206, 83, 0.12) !important;
}

#ast-checkout-coupon .button,
.woocommerce-checkout .checkout_coupon .button {
  min-height: 52px;
  background: var(--pb-gold) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #111 !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   18. METODI DI PAGAMENTO - card eleganti, selezione dorata
   --------------------------------------------------------------------------
   Ogni metodo e' una card scura senza le righe-separatore bianche di
   Astra. Al passaggio il bordo si scalda; il metodo SELEZIONATO ha il
   bordo oro illuminato e un leggerissimo zoom. Il radio e' dorato.
   Le icone dei circuiti (raggruppate dal JS in .abm-pay-icons) vivono su
   una riga propria sotto il titolo: mai piu' vagoni a capo.
   ========================================================================== */
.woocommerce-checkout .wc_payment_methods {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.woocommerce-checkout .wc_payment_method {
  margin: 0 !important;
  padding: 16px 18px !important;
  background: var(--pb-field);
  border: 1px solid var(--pb-line) !important;
  border-radius: 12px !important;
  transition: border-color 0.35s var(--pb-ease),
              box-shadow 0.35s var(--pb-ease),
              transform 0.35s var(--pb-ease);
}

/* Le righe-separatore di Astra/Woo: spente, il bordo della card basta */
.woocommerce-checkout .wc_payment_method::before,
.woocommerce-checkout .wc_payment_method::after {
  content: none !important;
  display: none !important;
}

.woocommerce-checkout .wc_payment_method:hover {
  border-color: var(--pb-gold-hover) !important;
}

/* Metodo selezionato: oro illuminato + leggerissimo zoom */
.woocommerce-checkout .wc_payment_method:has(> input.input-radio:checked),
.woocommerce-checkout .wc_payment_method:has(input.input-radio:checked) {
  border-color: var(--pb-gold) !important;
  box-shadow: 0 0 18px rgba(255, 206, 83, 0.25);
  transform: scale(1.012);
}

/* Il puntino di selezione: aspetto e misura in css/controls-ui.css
   (pallino unico del sito). Qui resta solo il respiro verso il nome del
   metodo. NB: qui viveva un `width: 18px !important` che, caricandosi
   dopo il foglio condiviso, teneva il pallino dei pagamenti piu' piccolo
   degli altri due (misurato dal vivo: 18 contro 20). */
.woocommerce-checkout .wc_payment_methods input.input-radio,
.woocommerce-checkout .wc_payment_methods input[type="radio"] {
  margin-right: 10px !important;
  cursor: pointer;
}

.woocommerce-checkout .wc_payment_method > label {
  display: inline-block;
  cursor: pointer;
  color: var(--pb-text) !important;
  font-weight: 600;
}

/* La riga delle icone circuiti, sotto il titolo */
.abm-pay-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.abm-pay-icons img {
  display: block;
  margin: 0 !important;
  float: none !important;
  max-height: 24px;
  width: auto;
}

/* La descrizione del metodo (payment_box): DENTRO la card, a tutta
   larghezza della card, perfettamente allineata al bordo dorato -
   mai un box che scivola fuori o si disallinea */
.woocommerce-checkout .wc_payment_method {
  display: block;
}

.woocommerce-checkout .wc_payment_method .payment_box {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 12px 0 0 !important;
  padding: 12px 0 0 !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--pb-line) !important;
  border-radius: 0 !important;
  color: var(--pb-muted) !important;
  font-size: 14px;
}

.woocommerce-checkout .wc_payment_method .payment_box p {
  margin: 0 !important;
}

.woocommerce-checkout .wc_payment_method .payment_box::before,
.woocommerce-checkout .wc_payment_method .payment_box::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   19. METODI DI SPEDIZIONE - stesse card dorate dei pagamenti
   --------------------------------------------------------------------------
   Ogni opzione di spedizione (riepilogo checkout E pagina carrello) e' una
   mini-card scura: radio dorato, bordo che si scalda al passaggio, e il
   metodo SELEZIONATO si veste d'oro illuminato con un leggerissimo zoom -
   identico ai metodi di pagamento, una sola grammatica.
   ========================================================================== */
.woocommerce ul#shipping_method,
.woocommerce-checkout ul#shipping_method,
.woocommerce-cart ul#shipping_method {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* La cella della spedizione ha bisogno di respiro: l'etichetta a
   sinistra si stringe, le card prendono lo spazio che serve al testo */
.woocommerce-checkout .shop_table tr.woocommerce-shipping-totals th {
  width: 30%;
  vertical-align: top;
}

.woocommerce ul#shipping_method,
.woocommerce-checkout ul#shipping_method,
.woocommerce-cart ul#shipping_method {
  align-items: stretch;
}

/* Card a tutta colonna: il testo decide l'altezza, mai tagliato, e sta
   nel CENTRO ESATTO del riquadro - orizzontale e verticale (flex; il
   radio nascosto e' position:absolute, quindi non disturba il flusso) */
.woocommerce ul#shipping_method li,
.woocommerce-checkout ul#shipping_method li,
.woocommerce-cart ul#shipping_method li {
  position: relative;
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 11px 14px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--pb-field);
  border: 1px solid var(--pb-line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.35s var(--pb-ease),
              box-shadow 0.35s var(--pb-ease),
              transform 0.35s var(--pb-ease);
}

.woocommerce ul#shipping_method li::before,
.woocommerce ul#shipping_method li::after {
  content: none !important;
  display: none !important;
}

.woocommerce ul#shipping_method li:hover {
  border-color: var(--pb-gold-hover);
}

/* Selezionata: oro illuminato + leggerissimo zoom, come i pagamenti */
.woocommerce ul#shipping_method li:has(input.shipping_method:checked),
.woocommerce ul#shipping_method li:has(input[type="radio"]:checked) {
  border-color: var(--pb-gold);
  box-shadow: 0 0 14px rgba(255, 206, 83, 0.25);
  transform: scale(1.012);
}

/* NIENTE puntino: parla solo il riquadro. Il radio resta nel DOM
   (WooCommerce e screen reader ne hanno bisogno) ma invisibile:
   la selezione avviene toccando la card, via label. */
.woocommerce ul#shipping_method input.shipping_method,
.woocommerce ul#shipping_method input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* Tastiera: quando il radio nascosto ha il focus, la card lo mostra */
.woocommerce ul#shipping_method li:has(input:focus-visible) {
  border-color: var(--pb-gold);
  box-shadow: 0 0 0 3px rgba(255, 206, 83, 0.2);
}

.woocommerce ul#shipping_method li label,
.woocommerce-page ul#shipping_method li label {
  display: block !important;
  width: 100% !important;
  flex: 1 1 100%;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  cursor: pointer;
  color: var(--pb-text) !important;
  font-size: 14px !important;
  line-height: 1.5;
  text-align: center !important;
  white-space: normal; /* il testo va a capo con grazia, mai tagliato */
  overflow-wrap: break-word;
}

/* IL COLPEVOLE della centratura storta: il tema flotta a destra lo
   span del prezzo dentro la label - il titolo restava a sinistra e il
   prezzo scappava. Tutto torna nel flusso, in linea col testo. */
.woocommerce ul#shipping_method li label .woocommerce-Price-amount,
.woocommerce ul#shipping_method li label .amount,
.woocommerce ul#shipping_method li label span {
  float: none !important;
  display: inline !important;
}

/* DUE RIGHE, SEMPRE LE STESSE:
     riga 1 -> "Corriere espresso:"
     riga 2 -> "6,48 EUR IVA escl."
   L&#39;a-capo e&#39; forzato PRIMA del prezzo (newline nel ::before): vale solo
   per i metodi con un costo. Il ritiro, senza prezzo, resta su riga
   unica centrata con a-capo naturale se il box e&#39; stretto. */
.woocommerce ul#shipping_method li label .woocommerce-Price-amount::before {
  content: "\A";
  white-space: pre;
}

.woocommerce ul#shipping_method li label .woocommerce-Price-amount {
  color: var(--pb-gold);
  font-weight: 600;
}

/* Il suffisso fiscale sta IN CODA al prezzo, sulla stessa riga */
.woocommerce ul#shipping_method li label .abm-ship-tax {
  display: inline !important;
  margin-left: 5px;
  color: var(--pb-muted) !important;
  font-size: 14px !important;
  letter-spacing: 0.3px;
}

.woocommerce ul#shipping_method label .woocommerce-Price-amount {
  color: var(--pb-gold);
  font-weight: 600;
}

/* Il caso a scelta unica (niente radio): stessa card, solo piu' quieta */
.woocommerce ul#shipping_method li:only-child:not(:has(input[type="radio"])) {
  border-color: var(--pb-line);
}

/* ==========================================================================
   20. RIEPILOGO ORDINE SU MOBILE - dentro lo schermo, elegante
   --------------------------------------------------------------------------
   Il riepilogo collassabile di Astra sbordava a destra: contenitori
   blindati al 100%, tabella fluida che va a capo, padding a misura di
   pollice, e la barra "Mostra/Nascondi il riepilogo" vestita come una
   card di casa.
   ========================================================================== */
@media (max-width: 921px) {
  /* IL FIX CHIAVE (misurato dal vivo): Astra da' al riepilogo mobile
     margini negativi di -20px per il "full-bleed", ma il nostro layout
     non ha il padding che li compensa - il blocco usciva di 20px dal
     bordo sinistro dello schermo. */
  .woocommerce-checkout .ast-mobile-order-review-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .woocommerce-checkout .ast-mobile-order-review-wrap,
  .woocommerce-checkout #ast-order-review-toggle,
  .woocommerce-checkout #ast-order-review-content,
  .woocommerce-checkout #ast-order-review-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  .woocommerce-checkout #ast-order-review-wrapper,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout .woocommerce-checkout-review-order {
    padding: 14px 12px !important;
  }

  /* Tabella fluida NATURALE (mai table-layout fixed: strozzava il nome
     prodotto in una colonna di lettere). Foto sopra, nome per esteso. */
  .woocommerce-checkout .woocommerce-checkout-review-order-table {
    width: 100% !important;
    table-layout: auto !important;
    margin: 0 !important;
  }

  .woocommerce-checkout .woocommerce-checkout-review-order-table th,
  .woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding: 12px 8px !important;
  }

  /* (Le vecchie regole "foto sopra, nome sotto" sono state sostituite dal
     layout a riga [foto | nome | quantita' | prezzo]: v. sezione RIEPILOGO
     PRODOTTI IN RIGA in fondo al file.) */

  /* SPEDIZIONE SU MOBILE: etichetta su riga propria, card a tutta
     larghezza sotto (misurato dal vivo: la tabella responsive di Woo
     flottava l'etichetta e strizzava le card in 210px a destra) */
  .woocommerce table.shop_table_responsive tr.woocommerce-shipping-totals td,
  .woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td {
    text-align: left !important;
  }

  .woocommerce table.shop_table_responsive tr.woocommerce-shipping-totals td::before {
    display: block;
    float: none !important;
    margin-bottom: 10px;
  }

  tr.woocommerce-shipping-totals ul#shipping_method {
    width: 100% !important;
    float: none !important;
  }

  /* Stessa disposizione nel riepilogo del checkout */
  .woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th,
  .woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
    display: block;
    width: 100% !important;
    text-align: left;
  }

  .woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th {
    padding-bottom: 2px !important;
    border-bottom: none !important;
  }

  /* Le etichette dei campi vanno a capo: mai un "(facoltativo)" che
     sborda oltre lo schermo */
  .woocommerce-checkout .form-row label {
    white-space: normal !important;
    overflow-wrap: break-word;
  }

  .woocommerce-checkout .form-row label .optional {
    display: inline !important;
    float: none !important;
  }

  /* La barra del riepilogo collassabile: una card di casa, non una riga
     anonima */
  .woocommerce-checkout #ast-order-review-toggle {
    padding: 14px 16px !important;
    background: var(--pb-panel) !important;
    border: 1px solid var(--pb-gold-line) !important;
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .woocommerce-checkout .ast-order-review-toggle-text {
    color: var(--pb-text) !important;
    font-size: 14px !important;
    font-weight: 600;
    letter-spacing: 0.5px;
  }

  .woocommerce-checkout .ast-order-review-total {
    color: var(--pb-gold) !important;
    font-weight: 700;
  }
}

/* ==========================================================================
   21. PULIZIE FINALI CHECKOUT (misurate dal vivo)
   --------------------------------------------------------------------------
   1. Su mobile il wrapper desktop del riepilogo resta come GUSCIO vuoto
      di 30px, sticky: era lui la "barra" sotto il conferma ordine E il
      box sottile che galleggiava sopra i testi. Via, quando esiste il
      riepilogo mobile.
   2. Il micro-zoom del metodo selezionato, negli stack stretti mobile,
      faceva sovrapporre i bordi: resta solo il bagliore.
   ========================================================================== */
@media (max-width: 921px) {
  body:has(.ast-mobile-order-review-wrap) #ast-order-review-wrapper {
    display: none !important;
  }

  .woocommerce-checkout .wc_payment_method:has(input.input-radio:checked) {
    transform: none !important;
  }
}

/* Il contenuto dei metodi resta DENTRO la propria card, sempre */
.woocommerce-checkout .wc_payment_method {
  overflow: hidden;
}

.woocommerce-checkout .woocommerce-privacy-policy-text {
  position: relative;
  z-index: 1;
  margin: 16px 0 !important;
}

/* ==========================================================================
   22. PRIVACY + "HO LETTO E ACCETTO" - UN SOLO CONTENITORE ORDINATO
   --------------------------------------------------------------------------
   Il contenitore e' il WRAPPER esterno (una sola card): dentro, il testo
   privacy giustificato, poi la riga del consenso. Niente scatole nelle
   scatole. La label NON e' flex: con testo e pill mescolati, il flex
   trasformava ogni pezzo in un item che andava a capo da solo - la
   spunta e' assoluta a sinistra e il testo FLUISCE giustificato con le
   pill inline.
   ========================================================================== */
/* Anche i consensi respirano liberi: niente scatola attorno */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  display: block;
  margin: 6px 0 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-sizing: border-box;
}

/* Gli strati interni tornano trasparenti: la card e' una sola */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text {
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--pb-line) !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text p {
  margin: 0 !important;
  color: var(--pb-muted) !important;
  font-size: 14px !important;
  line-height: 1.7;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* La riga del consenso: spunta ancorata a sinistra, testo che fluisce */
.woocommerce-checkout label.woocommerce-form__label-for-checkbox {
  display: block !important;
  position: relative;
  margin: 0 !important;
  padding: 0 0 0 32px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.7;
  text-transform: none !important;
  text-align: justify;
  text-justify: inter-word;
  cursor: pointer;
}

/* ALLINEAMENTO DELLE SPUNTE - i tre pallini devono stare sulla stessa
   verticale. Nel riquadro dei Termini la card E' l'etichetta stessa: senza
   respiro interno il pallino finiva appiccicato al bordo, 16px piu' a
   sinistra di quelli dei pagamenti e del consenso (misurato: 170 contro
   186). Qui il riquadro riceve lo stesso padding della card del consenso
   (14px/16px) e la spunta si sposta di conseguenza.
   Scopo limitato al blocco Termini: la spunta "Spedire a un indirizzo
   diverso" vive in un'altra card e non va toccata. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
  padding: 14px 16px 14px 48px !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
  left: 16px;
  top: 16px;
}

/* La spunta e' TONDA, sorella dei radio dei pagamenti: cerchio scuro a
   riposo, punto d'oro dentro l'anello quando accettata.
   UNA SOLA FONTE DI VERITA': le stesse regole vestono la spunta dei
   Termini e quella del consenso marketing. Aggiungere qui l'eventuale
   terza spunta futura, mai riscrivere lo stile da capo. */
/* L'ASPETTO del pallino (cerchio scuro, anello oro, punto d'oro da
   selezionato) NON vive piu' qui: sta in css/controls-ui.css, unico per
   tutto il sito. Qui resta solo cio' che e' specifico del checkout, cioe'
   DOVE si posiziona in ciascun blocco. */

/* POSIZIONE - le due spunte stanno a sinistra di un testo lungo */
.woocommerce-checkout .pb-marketing-consent input[type="checkbox"],
.woocommerce-checkout label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
  position: absolute !important;
  left: 0;
  top: 2px;
  margin: 0 !important;
}

/* POSIZIONE - il pallino del pagamento resta in riga col nome del metodo.
   Il nome deve poter andare a capo DENTRO se stesso: senza il max-width,
   su schermi stretti l'etichetta non entra accanto al pallino e scivola
   tutta alla riga sotto (misurato dal vivo a 375px). */
.woocommerce-checkout .wc_payment_methods input.input-radio,
.woocommerce-checkout .wc_payment_methods input[type="radio"] {
  margin-right: 10px !important;
  vertical-align: middle;
}

.woocommerce-checkout .wc_payment_method > label {
  max-width: calc(100% - 34px);
  vertical-align: middle;
}

/* (hover, stato selezionato e anello del fuoco da tastiera: controls-ui.css) */

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .required,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper span {
  display: inline !important;
  float: none !important;
}

/* ==========================================================================
   23. TESTI LUNGHI SU MOBILE - giustificati, mai fuori dai bordi
   ========================================================================== */
@media (max-width: 921px) {
  .woocommerce-checkout .wc_payment_method .payment_box p,
  .woocommerce-checkout .woocommerce-privacy-policy-text p,
  .woocommerce-checkout label.woocommerce-form__label-for-checkbox span {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* ==========================================================================
   24. TORNA AL CARRELLO DAL CHECKOUT - la pasticca dorata flottante
   --------------------------------------------------------------------------
   ModernCart non stampa il suo carrello flottante sul checkout: questa e'
   nostra (functions.php, abm_checkout_back_to_cart) e porta alla pagina
   carrello per gestire gli articoli senza perdere il checkout.
   ========================================================================== */
.pb-back-to-cart {
  position: fixed;
  right: 18px;
  bottom: 26px;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pb-gold);
  color: #111 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 206, 83, 0.35);
  transition: transform 0.3s var(--pb-ease), box-shadow 0.3s var(--pb-ease);
}

.pb-back-to-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 22px rgba(255, 206, 83, 0.5);
}

.pb-back-to-cart svg {
  width: 24px;
  height: 24px;
  display: block;
}

.pb-back-to-cart__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  background: #000;
  color: #fff;
  border: 1px solid var(--pb-gold);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@media (max-width: 921px) {
  .pb-back-to-cart {
    width: 52px;
    height: 52px;
    right: 14px;
    bottom: 96px; /* sopra la barra sticky del conferma ordine */
  }
}

/* ==========================================================================
   VALIDAZIONE INLINE (js/checkout-live-validation.js)
   --------------------------------------------------------------------------
   Feedback quieto, campo per campo: bordo che si accende e una riga di
   testo gentile sotto il campo. Il verde urlato non abita qui: la conferma
   e' oro tenue, l'errore e' un richiamo caldo, mai un allarme.
   ========================================================================== */
/* La regola base dei campi usa !important: qui serve pari forza, altrimenti
   il bordo non si accende (verificato dal vivo al primo deploy). */
.woocommerce-checkout .form-row.pb-live-ok input.input-text {
  border-color: rgba(255, 206, 83, 0.55) !important;
}

form.checkout .form-row.pb-live-ok {
  position: relative;
}

form.checkout .form-row.pb-live-ok::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 18px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23FFCE53' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}

/* Le select (paese/provincia) hanno la freccia dove metteremmo la spunta */
.woocommerce-checkout .form-row.pb-live-ok select {
  border-color: rgba(255, 206, 83, 0.55) !important;
}

.woocommerce-checkout .form-row.pb-live-err input.input-text {
  border-color: rgba(255, 107, 107, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.08) !important;
}

.pb-live-msg {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: #e79b9b;
  letter-spacing: 0.2px;
}

/* ==========================================================================
   RIEPILOGO PRODOTTI IN RIGA: [foto] [nome] [quantita'] | [prezzo]
   --------------------------------------------------------------------------
   Astra impila foto sopra e nome sotto dentro .ast-product-image: su colonne
   strette diventava una torre disordinata. Qui ogni articolo e' UNA riga
   pulita: miniatura fissa a sinistra, nome che respira al centro, quantita'
   come pillola discreta, prezzo nella sua colonna a destra. Vale su mobile
   e desktop (il riepilogo e' la stessa tabella).
   ========================================================================== */
/* I due flex-wrap:nowrap sono il cuore del fix (misurato dal vivo): Astra
   mette wrap sia sul td sia su .ast-product-image, e nome e quantita'
   finivano a capo sotto la foto. */
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .ast-product-image {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .ast-product-thumbnail {
  flex: 0 0 auto;
  margin: 0 !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .ast-product-thumbnail img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 3px;
  box-sizing: border-box;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .ast-product-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  line-height: 1.4;
  overflow-wrap: normal;
  word-break: normal;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name .product-quantity {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--pb-muted);
  border: 1px solid var(--pb-line);
  border-radius: 999px;
  padding: 2px 10px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total {
  vertical-align: middle;
}

/* ==========================================================================
   PROMESSA DI SPEDIZIONE SOPRA IL PULSANTE (abm_checkout_dispatch_note)
   ========================================================================== */
.pb-dispatch-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--pb-gold-line);
  border-radius: var(--pb-radius);
  background: rgba(255, 206, 83, 0.04);
  color: var(--pb-text);
  font-size: 14px;
  line-height: 1.5;
}

.pb-dispatch-note svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: var(--pb-gold);
}

/* ==========================================================================
   TENDINA GOOGLE PLACES (autocompletamento indirizzo) IN VESTE SCURA
   --------------------------------------------------------------------------
   Il dropdown .pac-container e' appeso al body da Google con stili chiari:
   qui si riveste di nero e oro come il resto del checkout.
   ========================================================================== */
.pac-container {
  background: #0f0f0f;
  border: 1px solid var(--pb-gold-line);
  border-radius: var(--pb-radius);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65);
  font-family: inherit;
  z-index: 100000;
}

.pac-item {
  padding: 10px 14px;
  border-top: 1px solid var(--pb-line);
  color: var(--pb-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
}

.pac-item:first-child { border-top: none; }

.pac-item:hover,
.pac-item-selected {
  background: rgba(255, 206, 83, 0.08);
}

.pac-item-query {
  color: var(--pb-text);
  font-size: 14px;
}

.pac-item-query .pac-matched {
  color: var(--pb-gold);
}

/* Il logo "powered by Google" resta visibile (obbligo di licenza) ma
   si adegua al fondo scuro. */
.pac-logo::after {
  filter: brightness(0) invert(0.75);
}

/* ==========================================================================
   CAMPO FACOLTATIVO DIETRO UN TOCCO (+ Aggiungi insegna...)
   ========================================================================== */
.pb-field-reveal {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 6px 2px;
  background: none;
  border: none;
  text-align: left;
  color: var(--pb-muted);
  font-size: 14px;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color 0.25s var(--pb-ease);
}

.pb-field-reveal:hover,
.pb-field-reveal:focus-visible {
  color: var(--pb-gold);
  background: none;
}

/* La riga nascosta dietro "+ Aggiungi": !important perche' gli script
   indirizzo di WooCommerce (cambio paese) fanno .show() sulle righe. */
.woocommerce-checkout .form-row.pb-field-collapsed {
  display: none !important;
}

/* ==========================================================================
   CONSENSO MARKETING (abm_marketing_consent_field)
   --------------------------------------------------------------------------
   Stessa impostazione dei consensi del checkout: label non-flex, spunta
   assoluta a sinistra, testo che fluisce. Tono sommesso: e' una richiesta,
   non una pretesa.
   ========================================================================== */
.pb-marketing-consent {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--pb-line);
  border-radius: var(--pb-radius);
  background: rgba(255, 255, 255, 0.02);
}

/* Il blocco vive dentro .form-row.place-order, quindi eredita le regole
   delle ETICHETTE del checkout: maiuscolo, grassetto, position:absolute
   (che sfila la label dal flusso e fa collassare il riquadro), **opacity:0**
   di Astra Addon (che nasconde le etichette per l'effetto "flottante" e le
   rivela solo al fuoco del campo) e - la piu' insidiosa di tutte -
   **pointer-events:none**, sempre di Astra, che rende le etichette
   trasparenti ai clic perche' il clic arrivi al campo sottostante.
   Astra esclude da quella regola solo le classi .checkbox, .radio e
   .woocommerce-form__label-for-checkbox: la nostra label non le ha, quindi
   spunta e link "Informativa privacy" risultavano MORTI, impossibili da
   cliccare. Qui si ripristina tutto, con la stessa forza. */
.woocommerce-checkout .pb-marketing-consent label,
.woocommerce-checkout .pb-marketing-consent label * {
  pointer-events: auto !important;
}

.woocommerce-checkout .pb-marketing-consent label,
.pb-marketing-consent label {
  display: block !important;
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding-left: 32px;
  margin: 0 !important;
  cursor: pointer;
  color: var(--pb-muted) !important;
  font-size: 14px !important;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.woocommerce-checkout .pb-marketing-consent label span,
.woocommerce-checkout .pb-marketing-consent label em {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Posizione e stile della spunta vivono nella regola condivisa con i
   Termini (sez. 22): qui si garantisce solo lo spazio a sinistra perche'
   il testo non le finisca sotto. */
.woocommerce-checkout .pb-marketing-consent label {
  padding-left: 32px !important;
}

.pb-marketing-consent label span,
.pb-marketing-consent em {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.pb-marketing-consent em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}

.pb-marketing-consent a {
  color: var(--pb-gold);
  text-decoration: underline;
}

/* ============================================================================
   25. LE TRE STRADE AL CHECKOUT (pb-gate)
   ----------------------------------------------------------------------------
   Card in cima al checkout per chi non e' loggato: accedi / apri l'account /
   resta ospite. Non e' un muro: e' un cartello. Il modulo ospite resta sotto,
   e chi scegle "ospite" vede tutto richiudersi in una riga sola.
   ========================================================================== */

.pb-gate {
  margin: 0 0 34px;
  padding: 26px 26px 22px;
  border: 1px solid var(--pb-gold-line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 206, 83, 0.045), rgba(255, 255, 255, 0.014));
}

.pb-gate__head {
  text-align: center;
  margin-bottom: 22px;
}

.pb-gate__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--pb-gold);
}

.pb-gate__title {
  margin: 0 0 10px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
  color: #fff;
}

.pb-gate__lead {
  margin: 0 auto;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.66);
}

/* --- Le tre strade: pari dignita', una sola dorata --- */
.pb-gate__ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.pb-gate__way {
  display: flex;
  flex-direction: column;
  padding: 20px 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.022);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

/* IL PASSAGGIO DEL MOUSE SOLO DOVE UN MOUSE C'E'.
   Su un telefono il tocco lascia lo stato :hover appiccicato alla scheda
   toccata: da li' in poi restavano accese due caselle, quella scelta e quella
   che era stata sfiorata per ultima. E' la terza volta che questo progetto ci
   inciampa (v. le schede dei tre passi, e i pulsanti d'oro di Astra). */
@media (hover: hover) {
  .pb-gate__way:hover {
    border-color: var(--pb-gold-hover);
    background: rgba(255, 255, 255, 0.038);
  }
}

/* Tutta la scheda si preme, quindi tutta la scheda lo dice. */
.pb-gate__way {
  cursor: pointer;
}

.pb-gate__pannello {
  cursor: auto;
}

.pb-gate__way--gold {
  border-color: rgba(255, 206, 83, 0.42);
  background: rgba(255, 206, 83, 0.055);
}

.pb-gate__label {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.pb-gate__way--gold .pb-gate__label {
  color: var(--pb-gold);
}

.pb-gate__way-title {
  margin: 0 0 10px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
  color: #fff;
}

.pb-gate__text {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}

.pb-gate__text strong {
  color: var(--pb-gold);
  font-weight: 600;
}

/* --- CTA: la strada dorata piena, le altre di contorno --- */
.pb-gate__cta {
  margin-top: auto;
  display: inline-block;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--pb-gold-hover);
  border-radius: 999px;
  background: transparent;
  color: var(--pb-gold);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.pb-gate__cta:hover,
.pb-gate__cta:focus-visible {
  background: rgba(255, 206, 83, 0.14);
  color: var(--pb-gold);
  text-decoration: none;
}

.pb-gate__cta--gold {
  border-color: var(--pb-gold);
  background: var(--pb-gold);
  color: #0d0d0d;
}

.pb-gate__cta--gold:hover,
.pb-gate__cta--gold:focus-visible {
  background: #ffd977;
  color: #0d0d0d;
}

.pb-gate__cta:focus-visible {
  outline: 2px solid var(--pb-gold);
  outline-offset: 3px;
}

/* =============================================================================
   OGNI STRADA HA IL SUO CASSETTO (26 agosto 2026, sera)
   -----------------------------------------------------------------------------
   Fino a stamattina "Accedi" apriva il modulo sul posto e le altre due strade
   no: chi sceglieva "ospite" o "registrati" veniva mandato piu' in giu', dentro
   un riquadro di Astra intitolato "Il tuo account" con sopra "Already have an
   account? Log in" - in inglese, e con le due scritte una sopra l'altra. Il
   committente e' stato netto, e aveva ragione.

   Adesso le tre strade si comportano tutte allo stesso modo: si tocca, e il
   cassetto si apre li' sotto con dentro esattamente quello che serve a quella
   strada. Il campo email e' UNO SOLO e migra nel cassetto aperto (v.
   abm-checkout-accesso.php): due caselle per lo stesso indirizzo sarebbero due
   valori che possono divergere.

   NIENTE `hidden`, COMANDA UNA CLASSE. Stessa ragione del 7 agosto: il tema
   stampa regole di display che scavalcano l'attributo, e uno stato invisibile
   che resta visibile e' il difetto piu' difficile da vedere.
   ========================================================================== */
.pb-gate__pannello {
  display: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 206, 83, 0.24);
  text-align: left;
}

.pb-gate__way--aperta .pb-gate__pannello {
  display: block;
}

/* La strada aperta si prende la scena; le altre due restano li', leggibili ma
   in secondo piano, perche' cambiare idea deve costare un tocco solo. */
.pb-gate__way--aperta {
  border-color: var(--pb-gold) !important;
  background: rgba(255, 206, 83, 0.07);
}

.pb-gate__way--sfumata {
  opacity: 0.5;
}

@media (hover: hover) {
  .pb-gate__way--sfumata:hover {
    opacity: 1;
  }
}

/* UNA SOLA CASELLA ACCESA, SEMPRE.
   La classe "gold" veste d'oro la scheda della registrazione per farla emergere fra
   le tre, e finche' nessuno aveva scelto era giusto. Scelta un'altra strada
   pero' restava dorata comunque: due caselle accese, e nessuna che dicesse la
   verita'. Quando la scelta c'e', chi non e' stato scelto torna neutro. */
.pb-gate__way--sfumata.pb-gate__way--gold {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.022);
}

.pb-gate__way--sfumata.pb-gate__way--gold .pb-gate__label {
  color: rgba(255, 255, 255, 0.62);
}

/* Il campo email dentro il cassetto: perde i margini del checkout e prende il
   passo della card. */
.pb-gate__slot .form-row {
  margin: 0 0 4px !important;
  padding: 0 !important;
}

.pb-gate__slot label {
  display: block;
  position: static !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  pointer-events: auto !important;
}

.pb-gate__slot input[type="email"],
.pb-gate__slot input[type="text"] {
  width: 100%;
}

.pb-gate__nota {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

.pb-gate__nota strong {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
}

/* --- L'ambito, dentro il cassetto della registrazione --------------------- */
.pb-gate__ambito {
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pb-gate__ambito-tit {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  font-weight: 600;
}

.pb-gate__ambito-nota {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

.pb-gate__ambito-scelte {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pb-gate__ambito-scelta {
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Astra riempie d'oro `button:hover` E `button:focus`: senza queste due righe
   la pillola toccata resterebbe accesa anche dopo averne scelta un'altra,
   perche' il fuoco non se ne va da solo. */
.pb-gate__ambito-scelta:hover,
.pb-gate__ambito-scelta:focus {
  border-color: var(--pb-gold-hover) !important;
  background: rgba(255, 206, 83, 0.08) !important;
  color: #ffffff !important;
}

.pb-gate__ambito-scelta--presa,
.pb-gate__ambito-scelta--presa:hover,
.pb-gate__ambito-scelta--presa:focus {
  border-color: var(--pb-gold) !important;
  background: rgba(255, 206, 83, 0.16) !important;
  color: var(--pb-gold) !important;
}

.pb-gate__ambito-scelta:focus-visible {
  outline: 2px solid var(--pb-gold);
  outline-offset: 2px;
}

/* --- Il riquadro "Il tuo account" di Astra -------------------------------
   Titolo in italiano, sottotitolo in inglese, e le due scritte sovrapposte.
   Da quando il campo email vive nel cassetto della strada scelta, di questo
   riquadro non resta niente da mostrare: l'intestazione se ne va sempre, e il
   contenitore si chiude quando il campo e' altrove (classe messa dallo script
   della card). Non lo si toglie dal documento: dentro ci sono gli avvisi di
   Astra, che devono poter comparire. */
.woocommerce-checkout .ast-customer-info .ast-checkout-form-heading,
.woocommerce-checkout .ast-customer-info .woocommerce-billing-fields__customer-login-label,
.woocommerce-checkout .ast-customer-info #ast-customer-login-section,
.woocommerce-checkout .ast-customer-info .ast-create-account-section {
  display: none !important;
}

.woocommerce-checkout .ast-customer-info.pb-info-vuota {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* --- L'AVVISO SULL'EMAIL GIA' REGISTRATA ----------------------------------
   Sta accanto al campo email, dentro il modulo: si dice mentre la scrive,
   non dopo il tentativo. `[hidden]` qui e' rinforzato con !important per la
   stessa ragione di sopra. */
.pb-gate-email {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-left: 2px solid var(--pb-gold);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 206, 83, 0.06);
  font-size: 14px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.66);
}

.pb-gate-email[hidden] {
  display: none !important;
}

.pb-gate-email strong {
  display: block;
  margin-bottom: 4px;
  color: var(--pb-gold);
  font-weight: 600;
}

.pb-gate-email a {
  color: var(--pb-gold);
  text-decoration: underline;
  font-weight: 600;
}

.pb-gate-email--stop {
  border-left-color: #e6b84f;
}

/* --- Scelto l'account: la spunta nativa si fa notare --- */
.pb-gate--registra ~ form.checkout .create-account,
.pb-gate--registra ~ form.checkout p.form-row:has(#createaccount) {
  border: 1px solid var(--pb-gold-hover);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(255, 206, 83, 0.06);
}

/* --- Mobile: una colonna, ordine di lettura invariato --- */
@media (max-width: 900px) {
  .pb-gate__ways {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pb-gate {
    padding: 22px 18px 18px;
  }

  .pb-gate__way {
    padding: 18px 16px;
  }

  .pb-gate__coins {
    text-align: justify;
  }
}

/* ============================================================================
   26. PRIVATO O AZIENDA: il selettore quando il tipo non si sa
   ----------------------------------------------------------------------------
   Prima riga dei dati di fatturazione per ospiti e clienti importati senza
   tipo di account. Due scelte affiancate, stile delle card di pagamento:
   la selezionata prende il bordo oro. Sotto, la spiegazione in grigio.
   ========================================================================== */

.woocommerce-checkout .abm-bf-tipo {
  margin-bottom: 22px !important;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--pb-gold-line);
}

/* L'ETICHETTA DEL CAMPO, e perche' serve !important.
   Astra mette la classe `ast-animate-input` sulle righe del checkout e
   posiziona l'etichetta in ASSOLUTO (le sue etichette flottanti, che
   scivolano dentro il campo). Su una riga di radio quell'etichetta finiva
   dentro la prima scelta: "STAI ACQUISTANDO COME" stampato sopra "Privato".
   Qui torna un titolino statico sopra le due strade. */
.woocommerce-checkout .abm-bf-tipo > label:first-child {
  position: static !important;
  display: block !important;
  width: auto !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  transform: none !important;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  pointer-events: none;
}

/* Le due scelte affiancate: il contenitore che WooCommerce mette attorno ai
   campi diventa la griglia. (Astra impone `display:block` alle label, quindi
   senza flex le due strade si impilavano.) */
.woocommerce-checkout .abm-bf-tipo .woocommerce-input-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* La radio nativa resta, invisibile ma funzionante e raggiungibile da tastiera */
.woocommerce-checkout .abm-bf-tipo input.input-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.woocommerce-checkout .abm-bf-tipo label.radio {
  flex: 1 1 calc(50% - 4px);
  display: block !important;
  width: auto;
  min-width: 0;
  margin: 0 !important;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.022);
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

.woocommerce-checkout .abm-bf-tipo label.radio:hover {
  border-color: var(--pb-gold-hover);
  color: #fff;
}

.woocommerce-checkout .abm-bf-tipo input.input-radio:checked + label.radio {
  border-color: var(--pb-gold);
  background: rgba(255, 206, 83, 0.09);
  color: var(--pb-gold);
  box-shadow: 0 0 0 1px rgba(255, 206, 83, 0.28);
}

.woocommerce-checkout .abm-bf-tipo input.input-radio:focus-visible + label.radio {
  outline: 2px solid var(--pb-gold);
  outline-offset: 3px;
}

.woocommerce-checkout .abm-bf-tipo .description,
.woocommerce-checkout .abm-bf-tipo span.description {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  text-align: left;
}

/* --- "(facoltativo)" DOVE NON E' VERO -------------------------------------
   WooCommerce appende "(facoltativo)" a ogni campo non `required`. Nella
   strada azienda Ragione sociale e P.IVA sono obbligatorie, ma l'obbligo lo
   decide la validazione (un campo required su una riga nascosta bloccherebbe
   il modulo in silenzio): risultato, l'etichetta diceva "Ragione sociale
   (facoltativo) *", obbligatorio e facoltativo nella stessa riga. Qui la
   parola sbagliata sparisce e resta l'asterisco messo dal JS.
   SDI e PEC: obbligo "almeno uno", quindi nemmeno li' "(facoltativo)" e'
   vero, e la regola la spiega la nota qui sotto.
   Il Codice Fiscale invece e' davvero facoltativo: il suo "(facoltativo)"
   resta, perche' li' e' l'informazione giusta. */
#billing_company_field.abm-bf-azienda .optional,
#billing_vat_field.abm-bf-azienda .optional,
#billing_sdi_field.abm-bf-azienda .optional,
#billing_pec_field.abm-bf-azienda .optional {
  display: none;
}

/* La nota su SDI e PEC: si dice prima, non nell'errore dopo il tentativo */
.pb-bf-nota {
  margin: 4px 0 18px;
  padding: 12px 15px;
  border-left: 2px solid var(--pb-gold-hover);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 206, 83, 0.045);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}

.pb-bf-nota strong {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 600;
}

/* Su mobile le due strade una sopra l'altra, a tutta larghezza */
@media (max-width: 600px) {
  .woocommerce-checkout .abm-bf-tipo label.radio {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   27. LA SPEDIZIONE NEL RIEPILOGO: l'etichetta sopra, le capsule larghe
   --------------------------------------------------------------------------
   IL CASO (19 agosto 2026). Nel riepilogo dell'ordine le capsule di scelta
   spedizione mandavano il testo a capo in punti a caso: "Ritiro in / Negozio /
   PROBAR" su tre righe, "Spedizione / gratuita" su due.

   NON ERA IL TESTO, ERA LO SPAZIO. Misurato dal vivo su una finestra da
   1427px: la tabella del riepilogo e' larga **386px** (e' una colonna
   laterale, non cambia con lo schermo), e la cella dell'etichetta
   "Spedizione" se ne prendeva **210**, lasciando alle capsule **174**. Con
   174px qualunque frase di tre parole va a capo storta.

   La soluzione era gia' scritta per il mobile, sotto i 921px: etichetta sopra,
   capsule sotto a tutta larghezza. Qui vale sempre, perche' quella colonna e'
   stretta anche su un monitor grande. Le capsule passano da 174 a 249px, e
   "Ritiro in Negozio PROBAR" torna su una riga sola.

   La regola sotto i 921px resta dov'e' ed e' identica: non si contraddicono.
   ========================================================================== */

.woocommerce-checkout .woocommerce-checkout-review-order-table
tr.woocommerce-shipping-totals th,
.woocommerce-checkout .woocommerce-checkout-review-order-table
tr.woocommerce-shipping-totals td {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table
tr.woocommerce-shipping-totals th {
  padding-bottom: 4px !important;
  border-bottom: none !important;
}

/* Quando una riga sola non basta, le righe si dividono il testo in parti
   uguali invece di lasciare una parola orfana in fondo. Dove il browser non
   conosce `balance` non succede niente: si torna all'a-capo normale. */
.woocommerce ul#shipping_method li label,
.woocommerce-checkout ul#shipping_method li label,
.woocommerce-cart ul#shipping_method li label {
  text-wrap: balance;
}

/* Il prezzo e il suo suffisso fiscale non si separano mai: "6,48 EUR" e
   "IVA escl." restano appaiati anche se la capsula si stringe. */
.woocommerce ul#shipping_method li label .woocommerce-Price-amount,
.woocommerce ul#shipping_method li label .abm-ship-tax {
  white-space: nowrap;
}

/* =============================================================================
   LA REGOLA DI SDI E PEC VIVE DENTRO IL CAMPO PEC
   -----------------------------------------------------------------------------
   E' la "description" del campo, non un paragrafo accanto: WooCommerce la
   stampa dentro la riga, quindi campo e spiegazione si spostano insieme
   qualunque cosa faccia il tema (v. il commento in abm-billing-fields.php:
   attaccata di fianco, Astra la lasciava indietro in cima al modulo).
   Qui prende l'aspetto che aveva prima da paragrafo: filo d'oro a sinistra,
   fondo appena acceso, corpo piccolo.
   ========================================================================== */
#billing_pec-description {
  display: block;
  margin: 8px 0 0;
  padding: 10px 13px;
  border-left: 2px solid var(--pb-gold-hover);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 206, 83, 0.045);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

#billing_pec-description strong {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 600;
}

/* =============================================================================
   "SPEDIRE A UN INDIRIZZO DIVERSO": una capsula, non nove campi buttati li'
   -----------------------------------------------------------------------------
   Segnalato dal committente il 25 agosto 2026, e aveva ragione: era una spunta
   nuda seguita da nove campi in fila, senza cornice e senza titolo. In mezzo a
   un modulo gia' lungo sembrava un errore di impaginazione, non una scelta.
   Adesso e' una scheda come le altre del sito: filo d'oro, fondo appena
   staccato, e l'interruttore in cima che si legge come tale.
   ========================================================================== */
.woocommerce-checkout .woocommerce-shipping-fields {
  margin: 26px 0 18px;
  border: 1px solid rgba(255, 206, 83, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

/* La riga dell'interruttore: tutta cliccabile, alta abbastanza per un dito. */
.woocommerce-checkout .woocommerce-shipping-fields h3#ship-to-different-address {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.woocommerce-checkout #ship-to-different-address label {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin: 0 !important;
  padding: 0 18px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  font-weight: 600;
}

.woocommerce-checkout #ship-to-different-address-checkbox {
  width: 20px;
  height: 20px;
  margin: 0 !important;
  accent-color: #FFCE53;
  cursor: pointer;
  flex: 0 0 auto;
}

/* Aperta, la capsula si separa dal suo interruttore con un filo, cosi' si
   capisce che i campi appartengono a quella spunta e non alla pagina. */
.woocommerce-checkout .woocommerce-shipping-fields .shipping_address {
  padding: 4px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.woocommerce-checkout .woocommerce-shipping-fields .shipping_address h3 {
  display: none; /* il titolo lo dice gia' l'interruttore qui sopra */
}

@media (max-width: 544px) {
  .woocommerce-checkout #ship-to-different-address label { padding: 0 14px; }
  .woocommerce-checkout .woocommerce-shipping-fields .shipping_address { padding: 4px 14px 14px; }
}

/* =============================================================================
   IL MODULO DI ACCESSO, DENTRO IL CHECKOUT
   -----------------------------------------------------------------------------
   Da oggi il modulo nativo di WooCommerce esiste in pagina (v.
   abm-checkout-accesso.php): lo apre il pulsante "Accedi al tuo account" della
   card, e chi entra resta dov'era invece di finire sulla pagina account.

   La riga di richiamo di WooCommerce, "Sei un cliente registrato? Accedi",
   sparisce: e' esattamente quello che la card dice meglio, e due inviti alla
   stessa cosa a due centimetri l'uno dall'altro si annullano.

   Il modulo prende il vestito delle altre schede del checkout, perche' arriva
   nudo: e' un form di WooCommerce, non nostro.
   ========================================================================== */
.woocommerce-checkout .woocommerce-form-login-toggle {
  display: none !important;
}

.woocommerce-checkout form.woocommerce-form-login {
  margin: 0 0 28px;
  padding: 22px 20px;
  border: 1px solid rgba(255, 206, 83, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  scroll-margin-top: 20px;
}

.woocommerce-checkout form.woocommerce-form-login .form-row {
  padding-left: 0;
  padding-right: 0;
}

.woocommerce-checkout form.woocommerce-form-login label {
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  font-weight: 600;
}

/* "Ricordami" e "Password dimenticata" sono di servizio: restano leggibili ma
   non competono con il pulsante che fa entrare. */
.woocommerce-checkout form.woocommerce-form-login .woocommerce-form-login__rememberme,
.woocommerce-checkout form.woocommerce-form-login .lost_password {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}

.woocommerce-checkout form.woocommerce-form-login .lost_password a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce-checkout form.woocommerce-form-login .lost_password a:hover {
  color: #FFCE53;
}

/* =============================================================================
   IL RESPIRO SOPRA IL PUNTO DI ARRIVO
   -----------------------------------------------------------------------------
   Le tre strade della card portano a un punto preciso della pagina, e lo
   scorrimento adesso allinea l'inizio del blocco (`block: start`) invece del
   suo centro: senza questi pixel il titolo "Dettagli di fatturazione"
   finirebbe incollato al bordo dello schermo, che si legge come "tagliato".
   La misura sta qui e non nel JavaScript: e' una questione di impaginazione.
   ========================================================================== */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields {
  scroll-margin-top: 24px;
}

/* Il modulo di accesso vive DENTRO la card "Accedi": quando si apre, quella
   strada si allunga e le altre due restano dove sono. Qui perde i margini che
   si porta dietro da fuori e prende il passo della card. */
.pb-gate__way form.woocommerce-form-login {
  margin: 16px 0 0;
  padding: 16px 0 0;
  border: none;
  border-top: 1px solid rgba(255, 206, 83, 0.24);
  border-radius: 0;
  background: none;
  text-align: left;
}

/* Da quando il modulo vive dentro un cassetto, il filo sopra lo disegna gia'
   il cassetto: due fili a quattro pixel di distanza si leggono come un errore
   di stampa. */
.pb-gate__pannello form.woocommerce-form-login {
  margin: 0;
  padding: 0;
  border-top: none;
}

.pb-gate__way form.woocommerce-form-login .form-row {
  margin: 0 0 12px;
  padding: 0;
}

.pb-gate__way form.woocommerce-form-login label {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 600;
}

.pb-gate__way form.woocommerce-form-login input[type="text"],
.pb-gate__way form.woocommerce-form-login input[type="password"] {
  width: 100%;
}

/* Il pulsante che fa entrare e' l'azione principale di quella card: prende la
   pillola piena, come "Registrati mentre ordini" nella card accanto. */
.pb-gate__way form.woocommerce-form-login button[name="login"] {
  width: 100%;
  margin-top: 4px;
}

.pb-gate__way form.woocommerce-form-login .woocommerce-form-login__rememberme,
.pb-gate__way form.woocommerce-form-login .lost_password {
  display: block;
  margin: 10px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}

.pb-gate__way form.woocommerce-form-login .lost_password a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pb-gate__way form.woocommerce-form-login .lost_password a:hover { color: #FFCE53; }

/* =============================================================================
   IL CHECKOUT A TRE PASSI
   -----------------------------------------------------------------------------
   Consegna C. Il passo aperto si vede, gli altri no: la classe la mette e la
   toglie `js/checkout-passi.js`, e questo e' l'unico posto dove quel
   nascondere diventa vero. Spegnendo il foglio, la pagina torna intera.
   ========================================================================== */
.pb-passo-nascosto {
  display: none !important;
}

/* --- La barra dei tre passi ---------------------------------------------- */
.pb-passi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 900px;
  margin: 0 auto 26px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.pb-passi__voce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 10px 8px;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.pb-passi__voce:first-child { border-left: none; }

/* Un passo dove non si puo' ancora andare non deve sembrare cliccabile. */
.pb-passi__voce[disabled] {
  cursor: default;
  color: rgba(255, 255, 255, 0.62);
}

.pb-passi__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pb-passi__voce--attiva {
  color: #FFCE53;
  background: rgba(255, 206, 83, 0.08);
}

.pb-passi__voce--attiva .pb-passi__n {
  background: #FFCE53;
  border-color: #FFCE53;
  color: #111111;
}

/* Un passo gia' fatto resta chiaro e cliccabile: si torna indietro senza
   paura di perdere quello che si e' scritto. */
.pb-passi__voce--fatta {
  color: rgba(255, 255, 255, 0.72);
}

.pb-passi__voce--fatta .pb-passi__n {
  border-color: rgba(255, 206, 83, 0.6);
  color: #FFCE53;
}

.pb-passi__voce:focus-visible {
  outline: 2px solid #FFCE53;
  outline-offset: -3px;
}

/* --- Il pulsante che porta al passo dopo --------------------------------- */
.pb-passi__avanti {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 26px auto 10px;
  padding: 15px 22px;
  border: none;
  border-radius: 999px;
  background: #FFCE53;
  color: #111111;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.pb-passi__avanti:hover,
.pb-passi__avanti:focus {
  background: #e6b93d;
  color: #111111;
}

.pb-passi__avanti[hidden] { display: none; }

/* --- Il totale sempre in vista, sul telefono ----------------------------- */
.pb-totale-fisso {
  display: none;
}

@media (max-width: 921px) {
  /* Compare solo quando ha un numero da mostrare: una barra vuota in fondo
     allo schermo e' peggio di nessuna barra. */
  .woocommerce-checkout .pb-totale-fisso--pronto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: rgba(12, 12, 12, 0.96);
    border-top: 1px solid rgba(255, 206, 83, 0.40);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .pb-totale-fisso__et {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .pb-totale-fisso__v {
    color: #FFCE53;
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* Lo spazio perche' l'ultimo pulsante non finisca sotto la barra. */
  .woocommerce-checkout form.checkout { padding-bottom: 74px; }

  .pb-passi { margin-bottom: 20px; }
  .pb-passi__voce { flex-direction: column; gap: 4px; font-size: 14px; min-height: 62px; }
}

/* =============================================================================
   LA DOMANDA SULL'AMBITO, NELLA PAGINA DI CONFERMA
   -----------------------------------------------------------------------------
   Deve leggersi come una cortesia, non come un ultimo modulo da compilare:
   quindi niente riquadro pesante, un filo d'oro a sinistra e cinque pillole da
   toccare. Chi non risponde non deve sentirsi in difetto.
   ========================================================================== */
.pb-ambito {
  max-width: 760px;
  margin: 34px auto;
  padding: 22px 24px;
  border-left: 2px solid rgba(255, 206, 83, 0.55);
  border-radius: 0 12px 12px 0;
  background: rgba(255, 206, 83, 0.05);
}

.pb-ambito__occhiello {
  margin: 0 0 6px;
  color: #FFCE53;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pb-ambito__titolo {
  margin: 0 0 8px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  color: #ffffff;
}

.pb-ambito__testo {
  margin: 0 0 16px;
  max-width: 56ch;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}

.pb-ambito__scelte {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pb-ambito__scelta {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 206, 83, 0.42);
  border-radius: 999px;
  background: transparent;
  color: #FFCE53;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pb-ambito__scelta:hover,
.pb-ambito__scelta:focus-visible {
  background: #FFCE53;
  color: #111111;
}

/* Quella scelta resta accesa: il tocco deve lasciare un segno, altrimenti il
   cliente non sa se e' stato registrato. */
.pb-ambito__scelta--presa {
  background: #FFCE53;
  color: #111111;
}

/* A risposta data le altre si spengono, ma restano leggibili: sparire di colpo
   farebbe sembrare che si sia rotto qualcosa. */
.pb-ambito--fatto .pb-ambito__scelta:not(.pb-ambito__scelta--presa) {
  opacity: 0.32;
  pointer-events: none;
}

.pb-ambito__grazie {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

@media (max-width: 544px) {
  .pb-ambito { margin: 26px 0; padding: 18px 16px; border-radius: 0 8px 8px 0; }
  .pb-ambito__titolo { font-size: 19px; }
  .pb-ambito__scelta { flex: 1 1 auto; }
}

/* =============================================================================
   IL CHECKOUT, SECONDA PASSATA (26 agosto 2026, sera)
   -----------------------------------------------------------------------------
   Quindici righe di segnalazioni del committente sul checkout appena
   consegnato, guardato dal suo telefono. Tutto quello che segue nasce da li',
   e ogni blocco porta scritto a quale osservazione risponde.

   REGOLA GENERALE DI QUESTA PASSATA: **si riordina con `order`, non spostando
   nodi**. WooCommerce riscrive `#payment` e il riepilogo a ogni ricalcolo: un
   nodo spostato da uno script dentro quel pezzo di pagina sparirebbe al primo
   cambio di metodo. Un numero d'ordine in un contenitore flessibile no.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. LA BARRA DEI TRE PASSI: cliccabile davvero, e senza oro appiccicato
   -----------------------------------------------------------------------------
   "sono cliccabili ma sono rotte, se io clicco devo poter ritornare a quella
   scheda che ho cliccato e devi togliere l'hover post clic ma evidenziare oro
   la casella senza riempire di oro tutta la capsula".

   Due difetti, e nessuno dei due era dove sembrava.

   IL PRIMO stava nel JavaScript: si poteva tornare indietro ma non piu'
   rientrare avanti, perche' la regola era "clicca solo i passi prima di
   questo". Chi tornava al passo uno per controllare l'email si trovava le
   altre due schede spente. Adesso si torna su qualunque passo gia' visto.

   IL SECONDO e' Astra, e in questo progetto e' la terza volta: `button:hover`
   E `button:focus` vengono riempiti d'oro pieno. Dopo un tocco il fuoco resta
   sul pulsante, quindi la scheda toccata restava dorata anche dopo esserne
   uscito: due schede accese, e nessuna che dicesse la verita'. Qui il colore
   lo dichiariamo noi, sfondo e testo insieme, e l'affordance del passaggio del
   mouse vale solo dove un mouse c'e' davvero.
   -------------------------------------------------------------------------- */
.woocommerce-checkout .pb-passi__voce,
.woocommerce-checkout .pb-passi__voce:hover,
.woocommerce-checkout .pb-passi__voce:focus,
.woocommerce-checkout .pb-passi__voce:active {
  background: transparent !important;
  border-color: transparent;
  border-left-color: rgba(255, 255, 255, 0.08);
  box-shadow: none !important;
}

.woocommerce-checkout .pb-passi__voce:first-child {
  border-left-color: transparent;
}

/* Il passaggio del mouse: un accenno, non un riempimento. Su un dito non
   esiste, e infatti la regola non lo riguarda. */
@media (hover: hover) {
  .woocommerce-checkout .pb-passi__voce:not([disabled]):not(.pb-passi__voce--attiva):hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }
}

/* IL PASSO APERTO: oro nel testo, nel numero e in un filo sotto. La capsula
   resta scura, che era la richiesta. */
.woocommerce-checkout .pb-passi__voce--attiva,
.woocommerce-checkout .pb-passi__voce--attiva:hover,
.woocommerce-checkout .pb-passi__voce--attiva:focus {
  background: rgba(255, 206, 83, 0.07) !important;
  color: #FFCE53 !important;
  box-shadow: inset 0 -2px 0 0 #FFCE53 !important;
}

.woocommerce-checkout .pb-passi__voce--fatta,
.woocommerce-checkout .pb-passi__voce--fatta:hover,
.woocommerce-checkout .pb-passi__voce--fatta:focus {
  color: rgba(255, 255, 255, 0.72) !important;
}

.woocommerce-checkout .pb-passi__voce[disabled],
.woocommerce-checkout .pb-passi__voce[disabled]:hover {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* -----------------------------------------------------------------------------
   2. IL PASSO DUE: solo indirizzi, nelle stesse capsule della prima scheda
   -----------------------------------------------------------------------------
   "quando arrivi alla scheda Dove spediamo deve essere pulito, con uno stile
   praticamente identico a quello delle capsule del registrati o accedi o
   ospite, con solo gli indirizzi da inserire".

   Quindi le due sezioni prendono il vestito di `.pb-gate__way`: stesso bordo,
   stesso raggio, stesso fondo appena staccato. E il titolo smette di essere
   un'insegna da 15 pixel con la riga sotto: diventa l'occhiello delle card,
   che sopra un elenco di campi e' tutto quello che serve.
   -------------------------------------------------------------------------- */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields {
  margin: 0 0 16px !important;
  padding: 20px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.022) !important;
}

.woocommerce-checkout .woocommerce-billing-fields > h3 {
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
}

/* La capsula della spedizione non ha respiro proprio: dentro ci sono un
   interruttore alto 56 px, i campi e la garanzia, e ognuno porta il suo. */
.woocommerce-checkout .woocommerce-shipping-fields {
  padding: 0 !important;
  overflow: hidden;
}

/* -----------------------------------------------------------------------------
   3. "SPEDIRE A UN INDIRIZZO DIVERSO": il pallino torna in riga
   -----------------------------------------------------------------------------
   "ha il pallino da cliccare decentrato verticalmente, e va ricentrato, la
   scritta la vorrei proporzionata al riquadro e in stampatello".

   IL PALLINO ERA FUORI POSTO PER UNA REGOLA SCRITTA PER UN ALTRO BLOCCO.
   Nella sezione 22 c'e' una regola che ancora le spunte in alto a sinistra
   (`position: absolute; top: 2px`) perche' nei Termini il testo e' lungo tre
   righe e il pallino deve stare accanto alla prima. Il commento diceva "scopo
   limitato al blocco Termini", ma il selettore no: prendeva anche questa
   spunta, che invece vive in una riga alta 56 pixel e va centrata come si
   centra qualunque cosa dentro un flex.

   Il difetto non era nel disegno di questa capsula: era una regola giusta
   applicata a una casa che non era la sua. E' la lezione del cassetto
   ModernCart al contrario: li' eravamo entrati in casa d'altri con i nostri
   appigli, qui abbiamo lasciato aperta la porta di casa nostra.
   -------------------------------------------------------------------------- */
.woocommerce-checkout #ship-to-different-address label input[type="checkbox"],
.woocommerce-checkout #ship-to-different-address-checkbox {
  position: static !important;
  left: auto !important;
  top: auto !important;
  align-self: center;
}

.woocommerce-checkout #ship-to-different-address label {
  align-items: center !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

/* Acceso, l'interruttore lo dice col colore: la capsula si accende e il titolo
   diventa oro, cosi' i campi che compaiono hanno un padre riconoscibile. */
.woocommerce-checkout .woocommerce-shipping-fields:has( #ship-to-different-address-checkbox:checked ) {
  border-color: rgba(255, 206, 83, 0.40) !important;
}

.woocommerce-checkout .woocommerce-shipping-fields:has( #ship-to-different-address-checkbox:checked ) #ship-to-different-address label {
  color: #FFCE53 !important;
}

/* Le note sull'ordine arrivano qui dal passo tre (v. checkout-passi.js): una
   richiesta sulla consegna appartiene alla pagina della consegna. Prendono lo
   stesso respiro della garanzia che le precede. */
.woocommerce-checkout .woocommerce-shipping-fields .woocommerce-additional-fields__field-wrapper {
  padding: 0 18px 18px;
}

.woocommerce-checkout .woocommerce-shipping-fields .woocommerce-additional-fields__field-wrapper .form-row {
  margin: 0 !important;
}

@media (max-width: 544px) {
  .woocommerce-checkout .woocommerce-billing-fields {
    padding: 18px 16px !important;
  }

  .woocommerce-checkout .woocommerce-shipping-fields .woocommerce-additional-fields__field-wrapper {
    padding: 0 14px 14px;
  }
}

/* -----------------------------------------------------------------------------
   4. IL PASSO TRE, RIMESSO IN ORDINE
   -----------------------------------------------------------------------------
   "porta su il box Mostra riepilogo mostrando da subito questo e non il box
   garanzie. Subito dopo metti il box Hai una gift card, subito dopo Scegli il
   tuo metodo di pagamento".

   L'ordine che ne esce, dall'alto:

       il riepilogo (aperto: lo apre il JavaScript entrando nel passo)
       Hai una gift card
       Codice sconto
       Scegli il metodo di pagamento
       i quattro metodi
       il messaggio PayPal      solo se PayPal e' scelto
       il riquadro verde        solo se la carta e' scelta
       termini, consenso, pulsante

   IL CODICE SCONTO NON ERA NELL'ELENCO del committente, che passava dalla gift
   card direttamente al pagamento. Toglierlo non era chiesto, e un campo coupon
   che sparisce dal checkout e' un ordine perso ogni volta che qualcuno ha un
   codice in mano: sta accanto alla gift card, che e' l'altro codice da
   riscattare, e le due cose si cercano insieme.

   PERCHE' `display: contents` SU `#payment`. I due riquadri condizionali devono
   stare FRA l'elenco dei metodi e il pulsante d'ordine, che sono i due figli di
   `#payment`. Un fratello di `#payment` puo' solo stare tutto prima o tutto
   dopo. Con `display: contents` i due figli diventano elementi del contenitore
   esterno, e da li' `order` li puo' interlacciare con gli altri. Il nodo
   `#payment` resta nel documento con il suo id e i suoi eventi: sparisce solo
   la sua scatola, che era gia' trasparente e senza bordi.
   -------------------------------------------------------------------------- */
.woocommerce-checkout .woocommerce-additional-fields {
  display: flex;
  flex-direction: column;
}

.woocommerce-checkout .woocommerce-additional-fields #payment {
  display: contents;
}

.woocommerce-checkout .woocommerce-additional-fields > .woocommerce-additional-fields__field-wrapper { order: 0; }
.woocommerce-checkout .woocommerce-additional-fields > #abm-credito { order: 1; }
.woocommerce-checkout .woocommerce-additional-fields > #ast-checkout-coupon { order: 2; }
.woocommerce-checkout .woocommerce-additional-fields > .ast-payment-option-heading { order: 3; }
.woocommerce-checkout .woocommerce-additional-fields #payment > ul.wc_payment_methods { order: 4; }
.woocommerce-checkout .woocommerce-additional-fields > .ppcp-messages { order: 5; }
.woocommerce-checkout .woocommerce-additional-fields #payment > .place-order { order: 6; }
.woocommerce-checkout .woocommerce-additional-fields > .ppc-button-wrapper,
.woocommerce-checkout .woocommerce-additional-fields > #ppc-button-ppcp-applepay,
.woocommerce-checkout .woocommerce-additional-fields > #ppc-button-ppcp-googlepay { order: 8; }

/* Il margine stava sulla scatola di `#payment`, che adesso non c'e' piu': si
   sposta sull'elenco, che e' cio' che deve staccarsi da quello che segue. */
.woocommerce-checkout .woocommerce-additional-fields #payment > ul.wc_payment_methods {
  margin-bottom: 18px !important;
}

/* Dentro il blocco del pulsante l'ordine e' altrettanto voluto: il riquadro
   verde per primo, cioe' appena sotto l'ultimo metodo di pagamento. */
.woocommerce-checkout .woocommerce-additional-fields .place-order {
  display: flex;
  flex-direction: column;
}

.woocommerce-checkout .place-order > .pb-secure-note { order: 0; }
.woocommerce-checkout .place-order > .woocommerce-terms-and-conditions-wrapper { order: 1; }
.woocommerce-checkout .place-order > .pb-termini-errore { order: 2; }
.woocommerce-checkout .place-order > .pb-marketing-consent { order: 3; }
.woocommerce-checkout .place-order > .pb-dispatch-note { order: 4; }
.woocommerce-checkout .place-order > #place_order { order: 5; }

/* -----------------------------------------------------------------------------
   5. I DUE RIQUADRI CHE PARLANO SOLO A CHI LI RIGUARDA
   -----------------------------------------------------------------------------
   "il box verde va messo subito sotto i metodi di pagamento SOLO SE viene
   selezionato carta di credito, altrimenti non deve essere visto da nessuna
   parte" - e lo stesso per la riga "Paga in 3 rate" che stampa PayPal.

   LA CONDIZIONE E' IN CSS, NON IN JAVASCRIPT, ed e' una scelta tecnica precisa:
   WooCommerce ridisegna tutto `#payment` a ogni cambio di metodo, e una classe
   messa da uno script verrebbe cancellata proprio dall'evento che dovrebbe
   accenderla. `:has()` guarda lo stato del radio nel momento in cui il browser
   disegna: non c'e' niente da rimettere a posto dopo.

   IL MESSAGGIO PAYPAL NON SI SPOSTA DENTRO LA SUA CAPSULA, e vale la pena
   scriverlo per chi ci tornera'. La capsula sta dentro `#payment`, che viene
   riscritto da capo a ogni ricalcolo: portarci dentro il contenitore del
   messaggio significherebbe farlo distruggere al primo cambio di metodo, e quel
   contenitore ospita un iframe di PayPal che a quel punto sparirebbe per
   sempre. Restando fuori, il messaggio compare comunque nel punto giusto -
   subito sotto l'ultimo metodo, che e' PayPal - e solo quando PayPal e' scelto.
   Il bordo che continua quello della capsula lo fa leggere come una sua coda.
   -------------------------------------------------------------------------- */
.woocommerce-checkout .place-order > .pb-secure-note {
  display: none;
}

.woocommerce-checkout .woocommerce-additional-fields:has( #payment_method_wc_gateway_gestpay:checked ) .place-order > .pb-secure-note {
  display: flex;
}

/* `!important` PERCHE' LO SCRIVE LUI SULL'ELEMENTO. Verificato dal vivo: il
   contenitore arriva con `style="display: block"` scritto nell'attributo dal
   codice di PayPal, e uno stile in linea batte qualunque foglio. Qui non c'e'
   modo di essere piu' educati: o `!important`, o la riga resta in pagina per
   tutti e quattro i metodi di pagamento. */
.woocommerce-checkout .woocommerce-additional-fields > .ppcp-messages {
  display: none !important;
}

.woocommerce-checkout .woocommerce-additional-fields:has( #payment_method_ppcp-gateway:checked ) > .ppcp-messages {
  display: block !important;
  margin: -18px 0 18px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: rgba(255, 255, 255, 0.02);
}

/* -----------------------------------------------------------------------------
   6. "HO LETTO E ACCETTO I TERMINI": stessa voce del consenso qui sotto
   -----------------------------------------------------------------------------
   "il testo e il pallino non sono sulla stessa riga"; "non mi piace lo stile
   della scritta, sembra diversa dalle altre, forse con lettere troppo
   distaccate. Vorrei che fosse uguale al box sottostante".

   Aveva ragione su tutto, e la causa delle "lettere troppo distaccate" e'
   esattamente quella: il testo era **giustificato**. Giustificare tre parole su
   una riga stretta significa allargare gli spazi fino a farli sembrare errori
   di battitura. Misurato: `text-align: justify`, interlinea 31 px, spaziatura
   0,2 px - contro `start`, 21 px e `normal` del consenso accanto. Due riquadri
   gemelli scritti con due voci diverse.

   Ora sono davvero gemelli. E il pallino sta sulla prima riga perche'
   l'interlinea e' tornata umana: con 31 pixel di riga, un pallino alto 20 non
   puo' stare in mezzo a niente.
   -------------------------------------------------------------------------- */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
  padding: 14px 16px 14px 44px !important;
  border: 1px solid var(--pb-line);
  border-radius: var(--pb-radius);
  background: rgba(255, 255, 255, 0.02);
  color: var(--pb-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 1.6 !important;
  text-align: left !important;
  text-justify: auto !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
  left: 15px;
  top: 15px;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text {
  letter-spacing: normal !important;
  text-align: left !important;
}

/* Manca la spunta: la cornice lo dice, e il messaggio nasce QUI SOTTO.
   "l'avviso deve comparire proprio sotto il box, non sopra alla pagina in alto
   dove poi il cliente e' costretto a cercare chissa' dove". */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper.pb-termini-manca label.woocommerce-form__label-for-checkbox {
  border-color: rgba(230, 90, 90, 0.55);
  background: rgba(230, 90, 90, 0.06);
}

.pb-termini-errore {
  margin: 8px 0 14px !important;
  padding: 12px 15px;
  border-left: 2px solid #e65a5a;
  border-radius: 0 8px 8px 0;
  background: rgba(230, 90, 90, 0.08);
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  line-height: 1.6;
}

/* =============================================================================
   I DUE ASTERISCHI DI SDI E PEC (26 agosto 2026, sera)
   -----------------------------------------------------------------------------
   Chiesto dal committente: ragione sociale e partita IVA con l'asterisco
   visibile come nome e cognome; codice destinatario e PEC con DUE asterischi,
   ripetuti in testa alla riga che spiega la regola.

   PERCHE' DUE E NON UNO. L'obbligo su quei campi e' "almeno uno dei due": un
   asterisco per ciascuno direbbe la cosa sbagliata - obbligatori entrambi - e
   nessun asterisco lascerebbe due campi che sembrano facoltativi e alla
   conferma bloccano l'ordine. Due asterischi uguali su due campi, e gli stessi
   due in testa alla spiegazione, dicono senza parole che la regola riguarda la
   coppia.

   E DOVE STAVA IL PROBLEMA VERO: l'asterisco c'era gia' anche su ragione
   sociale e partita IVA, ma **nell'etichetta**, e Astra tiene l'etichetta
   invisibile finche' il campo e' vuoto (le sue etichette flottanti). Nome e
   Cognome lo mostravano solo perche' erano compilati. Su un campo vuoto quindi
   l'unica scritta che si vede e' il SEGNAPOSTO, ed e' li' che l'asterisco
   serviva: adesso ce l'hanno tutti e quattro, scritto da PHP.
   ========================================================================== */
.woocommerce-checkout .pb-bf-marca,
.pb-bf-nota .pb-bf-marca {
  color: var(--pb-gold);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* La riga della regola, dentro il campo PEC: il rimando in oro apre la frase,
   come una nota a pie' di pagina aperta dal suo numero. */
#billing_pec_field .description .pb-bf-marca,
#billing_pec-description .pb-bf-marca {
  margin-right: 2px;
}

/* LE DUE NOTE DEVONO VEDERSI SEMPRE, e di loro WooCommerce non e' d'accordo.
   -----------------------------------------------------------------------------
   La `description` di un campo, per WooCommerce, e' un suggerimento che compare
   quando si entra nel campo: nasce a `display: none` e la accende il fuoco.
   Per un aiuto contestuale va benissimo. Per queste due righe no, ed e' lo
   stesso identico errore del vecchio "(facoltativo)": la regola dei due
   recapiti fiscali e il motivo per cui chiediamo il telefono servono a chi sta
   DECIDENDO se scrivere, cioe' prima di toccare il campo. Una regola che si
   legge solo dopo esserci entrati dentro e' una regola che non si legge.
   -------------------------------------------------------------------------- */
.woocommerce-checkout #billing_pec_field .description,
.woocommerce-checkout #billing_pec-description,
.woocommerce-checkout #billing_phone_field .description,
.woocommerce-checkout #billing_phone-description {
  display: block !important;
}

.woocommerce-checkout #billing_pec_field .description {
  margin: 8px 0 0;
  padding: 10px 13px;
  border-left: 2px solid var(--pb-gold-hover);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 206, 83, 0.045);
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.7;
}

/* -----------------------------------------------------------------------------
   IL TELEFONO NON E' PIU' FACOLTATIVO, E LA SUA RIGA DICE A COSA SERVE
   -----------------------------------------------------------------------------
   Un campo che diventa obbligatorio fa nascere una domanda muta - "perche' vi
   serve il mio numero?" - e un modulo che non risponde se la tiene addosso.
   La riga qui sotto non promette di non usarlo per altro: dice CHI lo usa e
   QUANDO, che e' verificabile. (Una rassicurazione non richiesta e' un sospetto
   suggerito: e' la lezione del 26 agosto sull'ambito, e vale anche qui.)
   -------------------------------------------------------------------------- */
.woocommerce-checkout #billing_phone_field .description,
.woocommerce-checkout #billing_phone-description {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.55;
}

/* =============================================================================
   IL PULSANTE CHE VIAGGIA (26 agosto 2026, notte - terza stesura, quella coi tre stati)
   -----------------------------------------------------------------------------
   Chiesto dal committente: la barra in fondo deve dire quello che dice il
   pulsante del passo aperto, e quando si scorre fino a quel pulsante le due
   cose devono diventare una sola - «come per magia il pulsante fisso si fissa
   dove si trova ora il pulsante interno alla scheda».

   IL PULSANTE E' UNO SOLO, ed e' quello della barra. Il pulsante dentro la
   scheda resta nel documento e tiene il suo spazio, ma diventa invisibile: e'
   il bersaglio su cui la barra si posa.

   TRE STATI, E NESSUNA TRANSIZIONE SUL POSIZIONAMENTO.

       1. FONDO       niente classe        position: fixed;    bottom: 0
       2. INTERMEDIO  --posata             position: absolute; top: <pagina>
       3. CIELO       --cielo              position: fixed;    top: 0

   PERCHE' NON PIU' `transform`. Le prime due stesure inseguivano lo
   scorrimento riscrivendo `translateY()` sessanta volte al secondo. Con la
   transizione accesa la barra rincorreva un bersaglio che si spostava, e il
   movimento diventava elastico: e' il "molleggio" che il committente ha
   segnalato. Spegnendo la transizione durante la rincorsa il molleggio
   spariva, ma quella versione e' stata bocciata lo stesso.
   La radice era un'altra: un elemento che deve scorrere con la pagina non va
   riposizionato, va MESSO nella pagina. `position: absolute` con un `top` in
   coordinate di documento scorre da solo, senza un calcolo per fotogramma:
   non puo' molleggiare, per costruzione.

   E I PASSAGGI NON SI VEDONO perche' avvengono dove le due posizioni
   COINCIDONO: nessun salto da coprire, quindi nessuna transizione da
   accendere. Una transizione serve a coprire un salto, non a inseguire uno
   scorrimento.

   E PRIMA DI TUTTO, LE BARRE ERANO DUE. `.pb-mobile-bar` (85 px, totale e
   pulsante) esisteva da luglio; la consegna dei tre passi ne ha aggiunta una
   seconda col solo totale, `.pb-totale-fisso` (60 px), sovrapposta alla prima.
   Il totale era scritto due volte, una sopra l'altra. Adesso la barra e' una,
   e la seconda non nasce piu' dal JavaScript: queste regole restano spente,
   perche' un foglio di stile non deve rompersi se qualcuno torna indietro.
   ========================================================================== */
.pb-totale-fisso,
.woocommerce-checkout .pb-totale-fisso,
.woocommerce-checkout .pb-totale-fisso--pronto {
  display: none !important;
}

@media (max-width: 921px) {

  /* Angoli e ombra si accendono quando la barra si posa, e quello e' un vero
     cambio di stato: mezzo battito di transizione ci sta. Sul POSIZIONAMENTO
     invece non c'e' niente, ed e' il punto di tutta questa stesura. */
  .woocommerce-checkout .pb-mobile-bar {
    transition: border-radius 0.22s ease, box-shadow 0.22s ease;
  }

  /* STATO 2. `position: absolute` e basta: il `top` glielo scrive il
     JavaScript una volta sola, in coordinate di pagina, e da li' in poi la
     barra scorre insieme al resto senza che nessuno la tocchi.
     Posata sul segnaposto non e' piu' una barra incollata al fondo dello
     schermo: prende gli angoli e l'ombra di una scheda, cosi' si legge come
     "sono arrivato", non come "sono rimasta indietro". */
  .woocommerce-checkout .pb-mobile-bar--posata {
    position: absolute;
    bottom: auto;
    border-top-color: transparent;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
  }

  /* STATO 3. Il segnaposto e' uscito dall'alto: la barra si ferma a filo del
     bordo superiore invece di seguirlo fuori dallo schermo. L'ombra cambia
     verso, perche' adesso il buio sta sotto di lei e non sopra. */
  .woocommerce-checkout .pb-mobile-bar--cielo {
    position: fixed;
    top: 0;
    bottom: auto;
    border-top-color: transparent;
    border-bottom: 1px solid var(--pb-gold-line);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  }

  /* IL SEGNAPOSTO. Resta nel flusso e tiene il suo spazio - e' li' che la
     barra si posa - ma non si vede e non si puo' premere: il pulsante e'
     quello della barra.
     `body.pb-barra-viva` lo mette il JavaScript: senza di lui questi pulsanti
     restano pulsanti veri, e il cliente ordina lo stesso. Un checkout che si
     rompe in silenzio quando uno script non parte non e' un checkout. */
  body.pb-barra-viva.woocommerce-checkout .pb-passi__avanti,
  body.pb-barra-viva.woocommerce-checkout #place_order {
    visibility: hidden;
    pointer-events: none;
  }

  /* L'altezza del segnaposto e' quella della barra: se fossero diverse, nel
     momento in cui la barra si posa il contenuto sotto scivolerebbe.
     `--pb-barra-h` la MISURA il JavaScript, non la indovina questo foglio: in
     fondo la barra si tiene anche lo spazio della tacca del telefono
     (`env(safe-area-inset-bottom)`), che su un iPhone sono trenta pixel che da
     qui non si possono sapere. Gli 85 sono solo la rete per il primo
     fotogramma. */
  body.pb-barra-viva.woocommerce-checkout .pb-passi__avanti {
    min-height: var(--pb-barra-h, 85px);
    margin-top: 18px;
    margin-bottom: 0;
  }

  body.pb-barra-viva.woocommerce-checkout #place_order {
    min-height: var(--pb-barra-h, 85px);
  }
}


/* =============================================================================
   LA SCHEDA "CHI SEI" SI LEGGE (27 agosto 2026)
   -----------------------------------------------------------------------------
   Segnalato dal committente: «il testo dei box del checkout, soprattutto della
   scheda CHI SEI, e' di dimensioni troppo piccole e difficilmente leggibile».

   MISURATO A 375 PX, prima di toccare niente:

       pb-gate__eyebrow        11 px    oro
       pb-gate__label        10,5 px    bianco al 42%
       pb-gate__ambito-nota    12 px    bianco al 45%
       pb-gate__nota         12,5 px    bianco al 50%
       pb-gate__text         13,5 px    bianco al 62%
       pb-gate__lead         14,5 px    bianco al 66%

   NON ERA SOLO LA DIMENSIONE: era la dimensione **per** l'opacita'. Dieci
   pixel e mezzo al 42% di bianco su fondo nero non e' testo tenue, e' testo che
   sparisce - e sparisce prima a chi ha piu' di quarant'anni, che qui e' meta'
   dei clienti. Le due cose si aggiustano insieme, altrimenti si ingrandisce una
   scritta che resta comunque troppo pallida.

   LE MISURE NUOVE stanno in fondo a questo foglio apposta: cosi' si leggono
   tutte insieme e si capisce che sono una scala, non nove decisioni sparse.
   ========================================================================== */

.pb-gate .pb-gate__eyebrow {
  font-size: 12px;
  letter-spacing: 1.6px;
}

.pb-gate .pb-gate__lead {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15.5px;
  line-height: 1.6;
}

.pb-gate .pb-gate__label {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  letter-spacing: 1.2px;
}

/* E QUI SALTA FUORI UN DIFETTO CHE C'ERA DA SEMPRE. La regola originale di
   `.pb-gate__way-title` dichiara 19px, ma il titolo si e' sempre visto a 15:
   piu' su in questo stesso foglio c'e' un
   `.woocommerce-checkout h3 { font-size: 15px !important }` che uniforma TUTTI
   gli `h3` del checkout, e `.pb-gate__way-title` e' un `h3`. Quei 19px non
   hanno mai avuto effetto, e nessuno se n'era accorto perche' 15 era comunque
   leggibile - solo piccolo.
   E' il motivo per cui questa riga porta `!important`: non per vincere sulla
   regola di due righe piu' su, ma su quella. */
.pb-gate .pb-gate__way-title {
  font-size: 16.5px !important;
}

.pb-gate .pb-gate__text {
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  line-height: 1.55;
}

.pb-gate .pb-gate__nota {
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.55;
}

/* --- L'ambito: le pillole parlano, il testo tace -------------------------
   Chiesto dal committente: «invece di tutto quel copy, piu' a bullet point
   selezionabili». Il copy e' stato tagliato nel PHP (da 137 caratteri a una
   riga); qui le pillole diventano grandi abbastanza da essere la cosa che si
   guarda per prima, che e' quello che devono essere. */
.pb-gate .pb-gate__ambito-tit {
  color: rgba(255, 255, 255, 0.92);
  font-size: 14.5px;
}

.pb-gate .pb-gate__ambito-nota {
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
}

.pb-gate .pb-gate__ambito-scelta {
  min-height: 42px;
  padding: 10px 16px;
  font-size: 14px;
}

/* =============================================================================
   L'AVVISO "QUESTA EMAIL HA GIA' UN ACCOUNT" (27 agosto 2026)
   -----------------------------------------------------------------------------
   Fino al 27 mattina, quando l'email risultava gia' registrata, la card saltava
   da sola su "Ospite". Il committente: «e' come se non fossi libero di
   scegliere». Adesso la scheda resta dove l'ha messa lui e l'avviso dice cosa
   succede, cosi' la scelta successiva e' sua e consapevole.

   UNA VIA SOLA, DAL 28 AGOSTO 2026. Qui c'erano due pulsanti, "Accedi" col
   filo d'oro e "Continua come ospite" in grigio. Il secondo e' stato tolto su
   richiesta del committente: la strada da ospite si sceglie nella sua scheda,
   piu' in basso, e ripeterla dentro il riquadro della registrazione spostava
   una scelta fuori dal posto dove si fa. Resta il filo d'oro, che adesso e'
   l'unica via, e la riga sotto che dice la conseguenza di non prenderla.

   Le regole sotto reggono comunque due o piu' figli: `__vie` e' un flex con
   `gap`, quindi il giorno che tornasse una seconda via non c'e' niente da
   riscrivere.
   ========================================================================== */

.pb-gate-email__vie {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
}

.pb-gate-email__via {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.pb-gate-email__via--primaria {
  border-color: var(--pb-gold, #FFCE53);
  color: var(--pb-gold, #FFCE53);
}

/* Sfondo e testo si dichiarano insieme, sempre. */
@media (hover: hover) {
  .pb-gate-email__via:hover,
  .pb-gate-email__via:focus {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
  }

  .pb-gate-email__via--primaria:hover,
  .pb-gate-email__via--primaria:focus {
    background-color: rgba(255, 206, 83, 0.12);
    color: var(--pb-gold, #FFCE53);
  }
}

/* La conseguenza, detta piano ma detta. */
.pb-gate-email__coda {
  display: block;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.5;
}

/* ============================================================================
   28. LA PAGINA CHE RESTA QUANDO LA CARTA VIENE RIFIUTATA (28 agosto 2026)
   ----------------------------------------------------------------------------
   Cercando `woocommerce-thankyou-order-failed`, `woocommerce-notice--error` e
   `a.button.pay` in tutto il CSS del tema, il 28 agosto uscivano **zero
   occorrenze**. Quella pagina la disegnava Astra con i suoi valori di serie,
   dentro un sito che di serie non ha piu' niente. Ed e' la pagina su cui
   atterra chi si e' visto rifiutare la carta: il momento in cui un negozio
   sembra affidabile oppure no.

   IL DIFETTO DI WOOCOMMERCE CHE SI CORREGGE QUI. Il template dell'ordine
   fallito mette la classe d'errore su DUE elementi: il messaggio e **la riga
   dei pulsanti**. Cosi' il cliente si trova due riquadri rossi uno sotto
   l'altro, e il secondo contiene soltanto i bottoni con cui rimediare. Il
   rosso deve stare sul fatto, non sulla via d'uscita: qui la riga dei pulsanti
   perde la cornice e torna a essere quello che e'.

   Il testo lo riscrive `inc/abm-ordine-fallito.php`, e dice per primo che non
   e' stato addebitato niente.
   ========================================================================== */

.woocommerce-thankyou-order-failed {
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 107, 107, 0.42);
  border-radius: var(--pb-radius);
  background-color: var(--pb-panel);
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.75;
}

/* La riga dei pulsanti: nessuna cornice, nessun fondo. Sono due bottoni, non
   un secondo errore. */
.woocommerce-thankyou-order-failed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: none;
}

/* --- I due pulsanti: uno porta avanti, l'altro e' una via laterale ---------
   WooCommerce li stampa con la stessa identica classe (`button pay`), quindi
   il peso lo diamo con la posizione: il primo e' "Paga", ed e' quello che
   risolve; il secondo e' "I miei ordini". Se un domani ne comparisse un terzo
   prenderebbe la veste di contorno, che e' la scelta prudente. */
.woocommerce-thankyou-order-failed-actions a.button,
.woocommerce-thankyou-order-failed-actions a.button.pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 26px;
  border: 1px solid var(--pb-gold-hover);
  border-radius: 10px;
  background-color: transparent;
  color: var(--pb-gold);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.28s var(--pb-ease), color 0.28s var(--pb-ease);
}

.woocommerce-thankyou-order-failed-actions a.button:first-child,
.woocommerce-thankyou-order-failed-actions a.button.pay:first-child {
  border-color: var(--pb-gold);
  background-color: var(--pb-gold);
  color: #111111;
}

/* Sfondo e testo si dichiarano insieme, sempre: Astra riempie d'oro ogni
   `button:hover`, e senza il colore del testo qui sotto si finisce con oro
   su oro. */
@media (hover: hover) {
  .woocommerce-thankyou-order-failed-actions a.button:hover,
  .woocommerce-thankyou-order-failed-actions a.button.pay:hover {
    background-color: rgba(255, 206, 83, 0.14);
    color: var(--pb-gold);
  }

  .woocommerce-thankyou-order-failed-actions a.button:first-child:hover,
  .woocommerce-thankyou-order-failed-actions a.button.pay:first-child:hover {
    background-color: #ffd977;
    color: #111111;
  }
}

.woocommerce-thankyou-order-failed-actions a.button:focus-visible {
  outline: 2px solid var(--pb-gold);
  outline-offset: 3px;
}

/* --- La riga dell'assistenza, stampata da abm-ordine-fallito.php ---------- */
.pb-fallito__aiuto {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.7;
}

.pb-fallito__aiuto a {
  color: var(--pb-gold);
  text-decoration: none;
  border-bottom: 1px solid var(--pb-gold-line);
}

@media (hover: hover) {
  .pb-fallito__aiuto a:hover {
    border-bottom-color: var(--pb-gold);
  }
}

/* Sul telefono i due pulsanti stanno uno sopra l'altro e prendono tutta la
   riga: sono il gesto che si sta cercando, non una decorazione. */
@media (max-width: 600px) {
  .woocommerce-thankyou-order-failed-actions {
    flex-direction: column;
    gap: 10px;
  }

  .woocommerce-thankyou-order-failed-actions a.button,
  .woocommerce-thankyou-order-failed-actions a.button.pay {
    width: 100%;
  }
}

/* ============================================================================
   29. "STAI PAGANDO UN ORDINE FATTO DA UN OSPITE": ORO, NON ROSSO
   ----------------------------------------------------------------------------
   Sulla pagina di pagamento, a chi non ha fatto l'accesso, WooCommerce mostra
   quell'avviso dentro un riquadro d'errore. Non e' un errore: e' una cautela,
   e mettergli attorno la cornice del guasto fa credere a chi torna a pagare
   che qualcosa sia andato storto per colpa sua.

   Nel nostro sito l'oro vuol dire "guarda questo". E' la cornice giusta: si
   vede benissimo, e la ragione dell'avviso resta seria (quel collegamento apre
   il pagamento di un ordine a chiunque ce l'abbia).

   La classe la mette `woocommerce/notices/abm-cautela.php`, scelto da
   `inc/abm-ordine-fallito.php` solo per questo messaggio e solo su quella
   pagina.
   ========================================================================== */

.woocommerce-checkout .woocommerce-error.pb-avviso--cautela,
.woocommerce-error.pb-avviso--cautela {
  border-color: var(--pb-gold-hover);
  background-color: rgba(255, 206, 83, 0.05);
}

.woocommerce-checkout .woocommerce-error.pb-avviso--cautela li,
.woocommerce-error.pb-avviso--cautela li {
  color: rgba(255, 255, 255, 0.92) !important;
}