/* =============================================================================
   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.55);
  --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;
}

/* Barra di fiducia sotto il titolo (stampata da functions.php) */
.pb-trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 26px;
  margin: 0 auto 38px;
  padding: 14px 18px;
  max-width: 900px;
  border-top: 1px solid var(--pb-gold-line);
  border-bottom: 1px solid var(--pb-gold-line);
}

.pb-trust-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pb-muted);
  font-size: 12.5px;
  letter-spacing: 0.4px;
}

.pb-trust-bar__item svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: var(--pb-gold);
}

/* ==========================================================================
   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.32) !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: 11px !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: 13px;
  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: 13px;
}

.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: 13px;
  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: 12.5px;
  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: 12.5px !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: 11px;
  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-trust-bar {
    gap: 8px 16px;
    padding: 12px;
    margin-bottom: 26px;
  }

  .pb-trust-bar__item { font-size: 11.5px; }
}

/* ==========================================================================
   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: 13px !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: 13px !important;
  line-height: 1.6 !important;
}

.woocommerce-checkout #payment div.payment_box p {
  font-size: 13px !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;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper
.woocommerce-form__label-for-checkbox {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  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;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper
.woocommerce-form__label-for-checkbox input[type="checkbox"] {
  flex: 0 0 20px;
}

/* ==========================================================================
   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: 13px;
}

.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: 13px !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: 10.5px !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: 13px !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: 12.5px !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: 13px;
  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: 13px;
  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: 13px;
  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: 13px;
  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: 13px !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: 12px;
  color: rgba(255, 255, 255, 0.42);
}

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