/* =============================================================================
   PRESTIGE / PROBAR - Shop UI Fixes
   -----------------------------------------------------------------------------
   Salva questo file in: [tema-child]/css/shop-ui.css
   Caricato sitewide tramite functions.php (funzione abm_enqueue_shop_ui_assets)
   ============================================================================= */

/* ==========================================================================
   1. PREZZI NEL CARRELLO
   Prezzo di listino barrato -> Colore 2 (var(--ast-global-color-1) = #FFCE53)
   Prezzo effettivo/attuale -> bianco
   ========================================================================== */
.woocommerce-cart-form del,
.woocommerce-cart-form del bdi,
.woocommerce-cart-form del .woocommerce-Price-amount {
  color: var(--ast-global-color-1) !important;
  text-decoration: line-through;
  opacity: 0.85;
}

.woocommerce-cart-form ins,
.woocommerce-cart-form ins bdi,
.woocommerce-cart-form ins .woocommerce-Price-amount {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Prezzo pieno, quando il prodotto non è in offerta (nessun del/ins) */
.woocommerce-cart-form .cart_item .amount,
.woocommerce-cart-form .cart_item bdi {
  color: #ffffff;
}

/* ==========================================================================
   1b. PREZZI NELLE GRIGLIE PRODOTTO (negozio, correlati, categoria)
   Stessa logica del carrello: listino oro barrato, effettivo bianco
   ========================================================================== */
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount {
  color: var(--ast-global-color-1) !important;
  text-decoration: line-through;
  opacity: 0.85;
}

.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .woocommerce-Price-amount {
  color: #ffffff !important;
  text-decoration: none !important;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount {
  color: #ffffff;
}

/* ==========================================================================
   1c. CATEGORIA PRODOTTO NELLE GRIGLIE - colore fisso oro, niente hover
   ========================================================================== */
.woocommerce ul.products li.product .product-category,
.woocommerce ul.products li.product .posted_in,
.woocommerce ul.products li.product .product_cat,
.woocommerce ul.products li.product a.button.product_type_simple + .product-category {
  color: var(--ast-global-color-1) !important;
}

.woocommerce ul.products li.product .product-category a,
.woocommerce ul.products li.product .posted_in a,
.woocommerce ul.products li.product .product_cat a {
  color: var(--ast-global-color-1) !important;
}

.woocommerce ul.products li.product .product-category a:hover,
.woocommerce ul.products li.product .posted_in a:hover,
.woocommerce ul.products li.product .product_cat a:hover {
  color: var(--ast-global-color-1) !important;
}

/* ==========================================================================
   2. NASCONDE I TAG E IL MARCHIO NELLA PAGINA PRODOTTO
   Classi standard WooCommerce - il marchio è spostato in "Informazioni
   aggiuntive" tramite functions.php (abm_output_brand_in_additional_info)
   ========================================================================== */
.product_meta .tagged_as,
.product_meta .product_brand {
  display: none !important;
}

/* RETE DI SICUREZZA: nasconde qualsiasi blocco metadati stampato dal tema
   o da WooCommerce che NON sia il nostro (.abm-product-meta) */
.single-product .product_meta:not(.abm-product-meta) {
  display: none !important;
}

/* ==========================================================================
   3. FIX SOVRAPPOSIZIONE BARRA DI RICERCA SUL MEGAMENU
   Alza la priorità di sovrapposizione (z-index) del megamenu rispetto
   alla barra di ricerca dell'header, così il menu a tendina resta sempre
   sopra e visibile per intero
   ========================================================================== */
.main-header-menu .sub-menu,
.main-header-menu .ast-megamenu-container,
.main-header-menu .ast-megamenu-wrapper {
  z-index: 9999 !important;
}

.ast-search-menu-icon .search-form,
.ast-search-menu-icon.slide-search .search-field,
.ast-header-search .search-form {
  z-index: 3 !important;
}

/* ==========================================================================
   4. MOBILE - garantisce che il fix valga anche su header mobile/tablet
   ========================================================================== */
@media (max-width: 921px) {
  .ast-mobile-header-wrap .main-header-menu .sub-menu,
  .ast-mobile-header-wrap .main-header-menu .ast-megamenu-container {
    z-index: 9999 !important;
  }
}

/* ==========================================================================
   5. BARRA SPEDIZIONE GRATUITA CUSTOM (Carrello + Mini-carrello)
   Colori: box antracite, riempimento oro (Colore 2), testo bianco
   ========================================================================== */
.abm-fsl-bar-wrap {
  background-color: #1a1a1a;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 16px 0;
  box-sizing: border-box;
  width: 100%;
}

.abm-fsl-title,
.abm-fsl-desc,
.abm-fsl-reached {
  color: #ffffff;
  font-size: 14px;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.abm-fsl-title strong,
.abm-fsl-desc strong {
  color: var(--ast-global-color-1);
  font-weight: 700;
}

.abm-fsl-desc {
  margin: 10px 0 0 0;
  margin-bottom: 0;
}

.abm-fsl-reached {
  margin-bottom: 0;
  font-weight: 600;
  text-align: center;
}

.abm-fsl-track {
  width: 100%;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  overflow: hidden;
}

.abm-fsl-fill {
  height: 100%;
  background-color: var(--ast-global-color-1);
  border-radius: 20px;
  width: 0%;
  transition: width 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Mobile: padding leggermente ridotto */
@media (max-width: 480px) {
  .abm-fsl-bar-wrap {
    padding: 14px;
  }
  .abm-fsl-title,
  .abm-fsl-desc,
  .abm-fsl-reached {
    font-size: 14px;
  }
}

/* Accessibilità: niente animazione se l'utente la disattiva */
@media (prefers-reduced-motion: reduce) {
  .abm-fsl-fill {
    transition: none !important;
  }
}

/* ==========================================================================
   6. PULSANTE "PROCEDI AL PAGAMENTO" - sfondo oro
   Copre sia il carrello classico che lo slide-out "moderncart"
   ========================================================================== */
.wc-proceed-to-checkout .checkout-button,
.wc-proceed-to-checkout a.button,
a.checkout-button,
.moderncart-slide-out-footer .checkout-button,
.woocommerce .cart_totals .checkout-button {
  background-color: var(--ast-global-color-1) !important;
  border-color: var(--ast-global-color-1) !important;
  color: #111111 !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.wc-proceed-to-checkout .checkout-button:hover,
.wc-proceed-to-checkout a.button:hover,
a.checkout-button:hover,
.moderncart-slide-out-footer .checkout-button:hover,
.woocommerce .cart_totals .checkout-button:hover {
  background-color: #e6b93d !important;
  color: #111111 !important;
}

/* ==========================================================================
   7. BADGE "PROMO"
   ========================================================================== */

/* 7a. Badge nativo WooCommerce (shop, pagina prodotto) */
.abm-onsale,
.woocommerce span.onsale.abm-onsale {
  background-color: #1a1a1a !important;
  color: var(--ast-global-color-1) !important;
  border: 1px solid var(--ast-global-color-1) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.6 !important;
}

/* 7b. Badge nel carrello slide-out ("moderncart")
   Sfondo trasparente per non coprire la miniatura, posizionato in basso
   a destra dell'immagine. Il contorno nero sottilissimo garantisce la
   leggibilità su qualsiasi foto prodotto. */
.moderncart-cart-item-image {
  position: relative !important;
}

.moderncart-cart-item-onsale {
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  top: auto !important;
  left: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  /* ORO DEL MARCHIO (25 agosto 2026, chiesto dal committente).
     Era verde #2ECC71 dal 21 agosto: si leggeva bene ma era un colore
     estraneo al marchio, e nel cassetto e' l'unica scritta che non fosse
     oro o bianca. Adesso e' #FFCE53, lo stesso oro di tutto il resto.
     Per cambiarlo basta questa riga (e la gemella piu' sotto, che le da'
     il peso necessario). */
  color: #FFCE53 !important;
  text-transform: none !important;   /* mantiene "Promo", non "PROMO" */
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.3px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  line-height: 1.2 !important;

  /* IL CONTORNO, non un'ombra. L'oro su una foto chiara o su un metallo
     dorato sparirebbe: serve staccarlo dallo sfondo. Ma l'alone scuro che
     c'era prima (un'ombra da 6px) sporcava la miniatura e si vedeva.
     Quattro ombre da mezzo pixel, una per lato, disegnano un filo nero
     tutto intorno alle lettere: praticamente invisibile su una foto scura,
     quel tanto che basta su una chiara.
     `-webkit-text-stroke` farebbe la stessa cosa con una riga sola, ma
     mangia il tratto dall'interno e a 12px assottiglia le lettere: le
     quattro ombre stanno FUORI dal glifo e non lo toccano.
     Per renderlo piu' o meno marcato si alza l'opacita', non il raggio. */
  text-shadow:
      -0.5px 0 0 rgba(0, 0, 0, .55),
       0.5px 0 0 rgba(0, 0, 0, .55),
       0 -0.5px 0 rgba(0, 0, 0, .55),
       0 0.5px 0 rgba(0, 0, 0, .55) !important;
  z-index: 2;
}

/* IL COLORE HA BISOGNO DI PIU' PESO, e chi lo batteva e' qui sopra.
   La regola generale di questo stesso foglio

       [class*="moderncart"][class*="line-items"] * { color: #fff !important; }

   vale due classi piu' l'asterisco, cioe' (0,2,0), mentre
   `.moderncart-cart-item-onsale` da sola vale (0,1,0): contro un !important la
   sola dichiarazione non basta, serve anche pesare di piu'. Tre classi, e il
   colore passa. E' la terza volta che quella riga generale si mangia qualcosa:
   chi mette qualunque cosa dentro il cassetto deve saperlo.
   QUESTO E' IL COLORE CHE SI VEDE DAVVERO: cambiando quello qui sopra senza
   cambiare questo, il badge resta com'era. */
[class*="moderncart"] .moderncart-cart-item-image .moderncart-cart-item-onsale {
  color: #FFCE53 !important;
}

/* ==========================================================================
   8. FIX PRODOTTI CORRELATI / CROSS-SELLS
   Il prodotto non deve fuoriuscire dal riquadro con bordo
   ========================================================================== */
.cross-sells,
.up-sells,
.related.products {
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 0 24px 0;
}

.cross-sells ul.products,
.up-sells ul.products,
.related.products ul.products {
  margin: 0 !important;
  padding: 0 20px !important;
  box-sizing: border-box;
}

.cross-sells ul.products li.product,
.up-sells ul.products li.product,
.related.products ul.products li.product {
  box-sizing: border-box;
  margin-bottom: 0 !important;
  padding: 10px;
  max-width: 100%;
}

.cross-sells ul.products li.product img,
.up-sells ul.products li.product img,
.related.products ul.products li.product img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   9. ICONA CARRELLO FLOTTANTE - sfondo oro (sitewide)
   ========================================================================== */
.moderncart-floating-cart-button,
button.moderncart-floating-cart-button {
  background-color: var(--ast-global-color-1) !important;
  background: var(--ast-global-color-1) !important;
  color: #111111 !important;
}

.moderncart-floating-cart-button svg,
.moderncart-floating-cart-button svg path,
.moderncart-floating-cart-button i {
  fill: #111111 !important;
  color: #111111 !important;
}

/* ==========================================================================
   10. PULSANTE "AGGIUNGI AL CARRELLO" - sfondo oro (sitewide)
   ========================================================================== */
.single_add_to_cart_button,
button.single_add_to_cart_button,
.woocommerce div.product form.cart .button,
.woocommerce ul.products li.product .button,
.woocommerce a.button.add_to_cart_button {
  background-color: var(--ast-global-color-1) !important;
  border-color: var(--ast-global-color-1) !important;
  color: #111111 !important;
  transition: all 0.3s ease !important;
}

.single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button.add_to_cart_button:hover {
  background-color: #e6b93d !important;
  border-color: #e6b93d !important;
  color: #111111 !important;
}

/* ==========================================================================
   11. CATEGORIA PRODOTTO - oro fisso, nessun hover (griglie e metadati)
   ========================================================================== */
.ast-woo-product-category,
.astra-shop-summary-wrap .ast-woo-product-category,
.abm-product-meta .posted_in a,
.abm-product-meta .posted_in a:hover {
  color: var(--ast-global-color-1) !important;
}

/* ==========================================================================
   12. PRODOTTI CORRELATI / CROSS-SELLS - colori pieni, niente opacità
   L'oro appariva "spento" perché il tema applica un'opacità/filtro alle card.
   ========================================================================== */
.related.products ul.products li.product,
.cross-sells ul.products li.product,
.up-sells ul.products li.product,
.related.products .astra-shop-summary-wrap,
.related.products .astra-shop-summary-wrap * {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Nome prodotto -> BIANCO */
.related.products ul.products li.product .woocommerce-loop-product__title,
.related.products ul.products li.product .woocommerce-loop-product__title a,
.cross-sells ul.products li.product .woocommerce-loop-product__title,
.cross-sells ul.products li.product .woocommerce-loop-product__title a,
.up-sells ul.products li.product .woocommerce-loop-product__title,
.up-sells ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Categoria sopra il titolo -> oro brillante */
.related.products .ast-woo-product-category,
.cross-sells .ast-woo-product-category,
.up-sells .ast-woo-product-category {
  color: #FFCE53 !important;
  opacity: 1 !important;
}

/* Prezzo (non scontato) -> BIANCO, 14.4px */
.related.products ul.products li.product .price,
.related.products ul.products li.product .price bdi,
.related.products ul.products li.product .price .amount,
.cross-sells ul.products li.product .price,
.cross-sells ul.products li.product .price bdi,
.up-sells ul.products li.product .price,
.up-sells ul.products li.product .price bdi {
  color: #ffffff !important;
  opacity: 1 !important;
  font-size: 14.4px !important;
}

/* Prezzo di LISTINO (barrato) -> oro brillante */
.related.products ul.products li.product .price del,
.related.products ul.products li.product .price del bdi,
.related.products ul.products li.product .price del .amount,
.cross-sells ul.products li.product .price del,
.cross-sells ul.products li.product .price del bdi,
.up-sells ul.products li.product .price del,
.up-sells ul.products li.product .price del bdi {
  color: #FFCE53 !important;
  opacity: 1 !important;
  text-decoration: line-through !important;
  font-size: 14.4px !important;
}

/* Prezzo SCONTATO (attuale) -> BIANCO, come nel carrello */
.related.products ul.products li.product .price ins,
.related.products ul.products li.product .price ins bdi,
.related.products ul.products li.product .price ins .amount,
.cross-sells ul.products li.product .price ins,
.cross-sells ul.products li.product .price ins bdi,
.up-sells ul.products li.product .price ins,
.up-sells ul.products li.product .price ins bdi {
  color: #ffffff !important;
  opacity: 1 !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 14.4px !important;
}

/* ==========================================================================
   13. CONTATORE DEL CARRELLO FLOTTANTE
   Sfondo nero, testo bianco, contorno tondo oro
   ========================================================================== */
.moderncart-floating-cart-count,
div.moderncart-floating-cart-count {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid var(--ast-global-color-1) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-weight: 600;
}

/* ==========================================================================
   14. PULSANTE "+" QUANTITÀ - oro, grassetto, 20px
   ========================================================================== */
.quantity .plus,
a.plus,
.quantity-buttons .plus,
.quantity.buttons_added .plus {
  color: var(--ast-global-color-1) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* ==========================================================================
   15. Z-INDEX: la barra di ricerca NON deve coprire il megamenu
   La ricerca sta in una riga SOTTO l'header, quindi nel DOM viene dopo e
   verrebbe disegnata sopra. Qui l'header (con il menu) viene alzato e la
   riga di ricerca abbassata.
   ========================================================================== */
.site-primary-header-wrap,
.ast-primary-header-bar,
.main-header-bar,
.ast-primary-header-bar .main-header-menu {
  position: relative !important;
  z-index: 999 !important;
}

.site-below-header-wrap,
.ast-below-header-bar,
.ast-below-header-wrap,
.ast-header-search,
.ast-search-menu-icon {
  position: relative !important;
  z-index: 1 !important;
}

/* Il megamenu resta sopra a tutto */
.main-header-menu .sub-menu,
.main-header-menu .ast-megamenu-container,
.main-header-menu .ast-megamenu-wrapper {
  z-index: 99999 !important;
}

/* ==========================================================================
   16. CROSS-SELLS ("Potresti essere interessato a...") - prodotto centrato
   ========================================================================== */
.cross-sells ul.products {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: stretch;
  gap: 16px;
  margin: 0 !important;
  padding: 0 16px 24px 16px !important;
  list-style: none;
}

.cross-sells ul.products li.product {
  float: none !important;
  margin: 0 !important;
  padding: 10px !important;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* ==========================================================================
   17. PULSANTE "APPLICA" CODICE SCONTO (carrello slide-out)
   ========================================================================== */
.moderncart-slide-out-coupon-form-button,
button.moderncart-slide-out-coupon-form-button,
.moderncart-button {
  background-color: var(--ast-global-color-1) !important;
  background: var(--ast-global-color-1) !important;
  color: #000000 !important;
  border-color: var(--ast-global-color-1) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.moderncart-slide-out-coupon-form-button:hover,
button.moderncart-slide-out-coupon-form-button:hover,
.moderncart-button:hover {
  background-color: #e6b93d !important;
  color: #000000 !important;
}

/* ==========================================================================
   18. OVERLAY DI CARICAMENTO - LA SFOCATURA, come nel cassetto
   --------------------------------------------------------------------------
   PRIMA: WooCommerce (blockUI) copre l'area con un velo bianco, che su tema
   scuro e' un flash fastidioso. Lo si scuriva a #0d0d0d con opacita' 0,75, e
   il risultato era un riquadro nero che nascondeva tutto.

   DAL 21 AGOSTO 2026 fa quello che fa ModernCart quando cambi una quantita'
   nel cassetto, e che il committente ha chiesto di avere dappertutto: **il
   contenuto sotto resta li' e si sfoca**. Non sparisce, non viene coperto: si
   vede che e' la stessa cosa di prima, momentaneamente fuori fuoco. La
   ricetta e' la sua, presa dal suo `cart.css`:

       .moderncart-cart-item-loading { backdrop-filter: blur(3px); }

   IL VELO RESTA, ma appena accennato (28% invece del 75%): serve a togliere
   contrasto al testo sfocato, non a nasconderlo. La rotella oro sopra e'
   quella di prima.

   PERCHE' `opacity: 1` E IL COLORE IN RGBA, e non piu' `opacity: 0,75`:
   l'opacita' agisce sull'elemento intero, quindi sbiadirebbe anche la rotella
   e, soprattutto, con un fondo opaco dietro non ci sarebbe niente da sfocare.
   La trasparenza deve stare nel colore.

   DOVE ARRIVA: ogni caricamento che passa da blockUI, che su questo sito e'
   quasi tutto. Carrello, totali, checkout moderno di Astra Addon, anteprima
   rapida, aggiornamenti dei metodi di spedizione, applicazione di un coupon.
   Non arriva dove il caricamento non ha un velo ma una rotella dentro un
   pulsante: li' non c'e' niente da sfocare, ed e' giusto cosi'.
   ========================================================================== */
.woocommerce .blockUI.blockOverlay,
.blockUI.blockOverlay,
.woocommerce .blockOverlay {
  background-color: rgba(13, 13, 13, 0.28) !important;
  background: rgba(13, 13, 13, 0.28) !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
}

/* CHI NON SA SFOCARE NON DEVE RESTARE SENZA SEGNALE. Su un browser che non
   conosce `backdrop-filter` il velo al 28% sarebbe quasi invisibile e il
   caricamento non si vedrebbe: li' si torna al velo scuro di prima, che e'
   brutto ma dice la verita'. */
@supports not ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))) {
  .woocommerce .blockUI.blockOverlay,
  .blockUI.blockOverlay,
  .woocommerce .blockOverlay {
    background-color: rgba(13, 13, 13, 0.75) !important;
    background: rgba(13, 13, 13, 0.75) !important;
  }
}

/* IL BORDO BIANCO ATTORNO AL VELO: e' di ASTRA ADDON, non di WooCommerce.
   Su carrello e checkout moderno lui aggiunge

       border: 1px solid var(--ast-border-color) !important;

   ed e' quello che disegna il "riquadro" attorno all'area che sta caricando.
   Con la sfocatura non serve piu' e anzi la contraddice: la sfocatura dice
   "questa roba e' la stessa, sta cambiando", il riquadro dice "qui c'e' un
   pannello nuovo". Ne resta l'angolo arrotondato, che non da' fastidio.

   I suoi selettori pesano fino a (1,4,0) e dichiarano `!important`: per
   batterli non basta ripeterli, serve pesare di piu'. E' la stessa regola gia'
   imparata sul cassetto: contro un `!important` la sola specificita' non
   basta, e viceversa.

   IL PESO SI ALZA RIPETENDO LA CLASSE (`.blockOverlay.blockOverlay`) e non
   mettendo `body` davanti. Il `body` davanti era il primo tentativo, e dal
   vivo non cambiava niente: `woocommerce-cart` e' una classe **del body
   stesso**, quindi `body .woocommerce-cart` cerca un discendente che non
   esiste e la regola non si applica a nessuno. Ripetere la classe invece pesa
   di piu' senza cambiare di una virgola quello che il selettore trova. */
.woocommerce-cart .cart_totals .blockOverlay.blockOverlay,
.woocommerce-cart .woocommerce-cart-form .blockOverlay.blockOverlay,
.ast-modern-checkout .woocommerce #payment .blockUI.blockOverlay.blockOverlay,
.ast-modern-checkout .woocommerce .woocommerce-checkout-review-order-table .blockUI.blockOverlay.blockOverlay {
  border: 0 !important;
  background-color: rgba(13, 13, 13, 0.28) !important;
  background: rgba(13, 13, 13, 0.28) !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
}

/* Spinner oro al posto del cerchietto bianco di default */
.woocommerce .blockUI.blockOverlay::before,
.blockUI.blockOverlay::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 28px !important;
  height: 28px !important;
  margin: -14px 0 0 -14px !important;
  border: 2px solid rgba(255, 206, 83, 0.25) !important;
  border-top-color: var(--ast-global-color-1) !important;
  border-radius: 50% !important;
  background: none !important;
  animation: abmSpin 0.7s linear infinite !important;
}

@keyframes abmSpin {
  to { transform: rotate(360deg); }
}

/* Transizione morbida invece di uno stacco netto */
.woocommerce-cart-form,
.cart_totals,
.moderncart-slide-out-cart {
  transition: opacity 0.2s ease;
}

/* ==========================================================================
   19. FESTEGGIAMENTO "SPEDIZIONE GRATUITA" - stile fuochi d'artificio dorati
   Sfondo notturno, scintille che cadono, scoppi luminosi e testo serif oro
   con effetto shimmer. Tutto in CSS puro: nessuna libreria, zero peso.
   ========================================================================== */
.abm-fsl-celebrate {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  padding: 22px 14px;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 206, 83, 0.18) 0%, transparent 60%),
    #0a0a0a;
  isolation: isolate;
}

/* --- TESTO --- */
.abm-fsl-reached {
  position: relative;
  z-index: 3;
  margin: 0 !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.abm-fsl-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.2;

  /* Gradiente oro con luccichio che scorre */
  background: linear-gradient(
    100deg,
    #c9962b 0%,
    #FFCE53 25%,
    #fff6d8 45%,
    #FFCE53 65%,
    #c9962b 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #FFCE53;                       /* fallback */
  animation: abmShimmer 3.2s linear infinite;
  filter: drop-shadow(0 0 12px rgba(255, 206, 83, 0.45));
}

@keyframes abmShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -50% 0; }
}

.abm-fsl-sub {
  font-size: 18px !important;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.3px;
}

/* --- SCOPPI DI FUOCHI D'ARTIFICIO (bagliori pulsanti) --- */
.abm-fsl-burst {
  position: absolute;
  z-index: 1;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 206, 83, 0.45) 0%, rgba(255, 206, 83, 0) 65%);
  opacity: 0;
  animation: abmBurst 3s ease-out infinite;
}

.abm-fsl-burst--1 { top: -18px; left: 12%;  animation-delay: 0s; }
.abm-fsl-burst--2 { top: 8px;   right: 14%; animation-delay: 1s; }
.abm-fsl-burst--3 { bottom: -22px; left: 46%; animation-delay: 2s; }

@keyframes abmBurst {
  0%   { transform: scale(0.2); opacity: 0; }
  25%  { transform: scale(1);   opacity: 0.9; }
  60%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --- SCINTILLE DORATE CHE CADONO --- */
.abm-fsl-spark {
  position: absolute;
  z-index: 2;
  top: -8px;
  left: calc(var(--i) * 4.4%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #FFCE53;
  box-shadow: 0 0 6px 1px rgba(255, 206, 83, 0.9);
  opacity: 0;
  animation: abmFall 2.8s linear infinite;
  animation-delay: calc(var(--i) * 0.13s);
}

/* Qualche scintilla bianca per dare varietà, come nel riferimento */
.abm-fsl-spark:nth-child(4n) {
  background: #fff6d8;
  box-shadow: 0 0 7px 1px rgba(255, 246, 216, 0.95);
  width: 2px;
  height: 2px;
}

/* Scintille più lente/veloci: profondità */
.abm-fsl-spark:nth-child(3n)   { animation-duration: 3.6s; }
.abm-fsl-spark:nth-child(3n+1) { animation-duration: 2.2s; }

@keyframes abmFall {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(110px) scale(0.3);
    opacity: 0;
  }
}

/* --- MOBILE --- */
@media (max-width: 480px) {
  .abm-fsl-title { font-size: 21px; letter-spacing: 1px; }
  .abm-fsl-sub   { font-size: 16px !important; }
  .abm-fsl-celebrate { padding: 18px 10px; }
}

/* --- ACCESSIBILITA': niente animazioni se l'utente le disattiva --- */
@media (prefers-reduced-motion: reduce) {
  .abm-fsl-spark,
  .abm-fsl-burst {
    display: none !important;
  }
  .abm-fsl-title {
    animation: none !important;
    -webkit-text-fill-color: #FFCE53;
    background: none;
  }
  .blockUI.blockOverlay::before {
    animation: none !important;
  }
}

/* ==========================================================================
   20. CARRELLO - ARROTONDAMENTO ELEGANTE DELLE TABELLE (desktop + mobile)
   ========================================================================== */
.woocommerce table.shop_table,
.woocommerce .cart_totals table,
.cross-sells,
.cart_totals {
  border-radius: 14px !important;
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   21. CARRELLO MOBILE - LAYOUT A SCHEDE (card)
   La tabella diventa una lista di schede: gerarchia chiara, nome prodotto
   sempre leggibile, azione "rimuovi" esplicita. Standard dei luxury shop.
   ========================================================================== */
@media (max-width: 768px) {

  .woocommerce table.shop_table_responsive thead {
    display: none !important;   /* le intestazioni non servono: ogni riga è una scheda */
  }

  .woocommerce table.shop_table_responsive,
  .woocommerce table.shop_table_responsive tbody {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
  }

  /* Ogni prodotto = una scheda */
  .woocommerce table.shop_table_responsive tr.cart_item {
    display: grid !important;
    grid-template-columns: 88px 1fr;
    grid-template-areas:
      "thumb  name"
      "thumb  price"
      "qty    subtotal";
    gap: 6px 14px;
    align-items: center;

    position: relative;
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 18px 16px !important;
    margin: 0 0 14px 0 !important;
  }

  .woocommerce table.shop_table_responsive tr.cart_item td {
    display: flex !important;
    align-items: center;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }

  /* Etichette ("Prezzo:", "Quantità:") -> discrete, non urlate */
  .woocommerce table.shop_table_responsive tr.cart_item td::before {
    content: attr(data-title);
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.3px;
    margin-right: 8px;
  }

  /* Immagine */
  .woocommerce table.shop_table_responsive td.product-thumbnail {
    grid-area: thumb;
    justify-content: center;
  }
  .woocommerce table.shop_table_responsive td.product-thumbnail::before {
    display: none !important;
  }
  .woocommerce table.shop_table_responsive td.product-thumbnail img {
    width: 88px !important;
    height: auto;
    border-radius: 10px !important;
    background: #ffffff;
  }

  /* NOME PRODOTTO -> protagonista, ben leggibile */
  .woocommerce table.shop_table_responsive td.product-name {
    grid-area: name;
    display: block !important;
  }
  .woocommerce table.shop_table_responsive td.product-name::before {
    display: none !important;   /* "Prodotto:" è superfluo, il nome parla da solo */
  }
  .woocommerce table.shop_table_responsive td.product-name a,
  .woocommerce table.shop_table_responsive td.product-name .ast-product-name,
  .woocommerce table.shop_table_responsive td.product-name .ast-product-name a {
    display: block !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
  }
  /* Nasconde SOLO l'immagine duplicata dentro la cella nome (Astra), non il
     wrapper: Astra annida il NOME dentro .ast-product-image, quindi nascondere
     tutto il wrapper faceva sparire il nome del prodotto su mobile. */
  .woocommerce table.shop_table_responsive td.product-name .ast-product-image img {
    display: none !important;
  }
  /* Su mobile il link "Sposta nella lista dei desideri" affolla e si sovrappone
     alla cella nome: nel carrello lo togliamo (resta disponibile su desktop). */
  .woocommerce table.shop_table_responsive td.product-name .abm-wl-move-wrap {
    display: none !important;
  }

  /* Prezzo unitario -> discreto */
  .woocommerce table.shop_table_responsive td.product-price {
    grid-area: price;
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 14px !important;
  }

  /* Quantità */
  .woocommerce table.shop_table_responsive td.product-quantity {
    grid-area: qty;
    margin-top: 6px;
  }
  .woocommerce table.shop_table_responsive td.product-quantity::before {
    display: none !important;
  }

  /* Subtotale -> in evidenza, allineato a destra */
  .woocommerce table.shop_table_responsive td.product-subtotal {
    grid-area: subtotal;
    justify-content: flex-end;
    margin-top: 6px;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
  }
  .woocommerce table.shop_table_responsive td.product-subtotal::before {
    display: none !important;
  }

  /* RIMUOVI -> pulsante tondo, in alto a destra della scheda */
  .woocommerce table.shop_table_responsive td.product-remove {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    padding: 0 !important;
    z-index: 2;
  }
  .woocommerce table.shop_table_responsive td.product-remove::before {
    display: none !important;
  }

  /* Riga "Applica coupon / Aggiorna carrello" */
  .woocommerce table.shop_table_responsive td.actions {
    display: block !important;
    padding: 8px 0 0 0 !important;
    border: none !important;
  }
  .woocommerce table.shop_table_responsive td.actions::before {
    display: none !important;
  }
}

/* Pulsante RIMUOVI - stile coerente anche su desktop */
.woocommerce a.remove,
.woocommerce table.shop_table td.product-remove a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transition: all 0.25s ease !important;
}

.woocommerce a.remove:hover {
  border-color: #e05a4f !important;
  background: rgba(224, 90, 79, 0.12) !important;
  color: #e05a4f !important;
}

/* ==========================================================================
   22. CATEGORIA SOTTO IL NOME nei correlati / cross-sells
   ========================================================================== */
.cross-sells .astra-shop-summary-wrap,
.related.products .astra-shop-summary-wrap,
.up-sells .astra-shop-summary-wrap {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.cross-sells .astra-shop-summary-wrap .ast-loop-product__link,
.related.products .astra-shop-summary-wrap .ast-loop-product__link,
.up-sells .astra-shop-summary-wrap .ast-loop-product__link {
  order: 1;
}

.cross-sells .astra-shop-summary-wrap .ast-woo-product-category,
.related.products .astra-shop-summary-wrap .ast-woo-product-category,
.up-sells .astra-shop-summary-wrap .ast-woo-product-category {
  order: 2;                       /* categoria SOTTO il nome */
  font-size: 14px !important;
  letter-spacing: 0.4px;
  margin: 0 !important;
}

.cross-sells .astra-shop-summary-wrap .price,
.related.products .astra-shop-summary-wrap .price,
.up-sells .astra-shop-summary-wrap .price {
  order: 3;
  margin-top: 2px;
}

/* ==========================================================================
   23. CHECKOUT MOBILE - respiro, leggibilità, campi comodi da toccare
   ========================================================================== */
@media (max-width: 768px) {

  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
    margin-bottom: 24px;
  }

  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout .woocommerce-checkout-review-order {
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 18px 16px;
    box-sizing: border-box;
  }

  /* Campi: font 16px = niente zoom automatico su iOS */
  .woocommerce-checkout .form-row input.input-text,
  .woocommerce-checkout .form-row textarea,
  .woocommerce-checkout .form-row select,
  .woocommerce-checkout .select2-container .select2-selection {
    width: 100% !important;
    font-size: 16px !important;
    padding: 13px 14px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: #0d0d0d !important;
    color: #ffffff !important;
    box-sizing: border-box;
  }

  .woocommerce-checkout .form-row label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    margin-bottom: 6px;
    display: block;
  }

  .woocommerce-checkout .form-row {
    margin-bottom: 16px !important;
    padding: 0 !important;
  }

  /* Riepilogo ordine leggibile */
  .woocommerce-checkout table.shop_table th,
  .woocommerce-checkout table.shop_table td {
    padding: 12px 10px !important;
    font-size: 14px;
  }

  /* Pulsante finale: pieno, comodo, sempre raggiungibile */
  .woocommerce-checkout #place_order {
    width: 100% !important;
    padding: 16px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    letter-spacing: 0.5px;
  }
}

/* ==========================================================================
   24. BLOCCO CONSENSO PRIVACY NEWSLETTER - respiro e allineamento su mobile
   ========================================================================== */
.probar-privacy-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 0 4px !important;
  margin-top: 12px !important;
  line-height: 1.55 !important;
  font-size: 13px !important;
  text-align: left !important;
  color: rgba(255, 255, 255, 0.7) !important;
  box-sizing: border-box;
}

.probar-privacy-label input[type="checkbox"] {
  flex: 0 0 auto !important;
  margin: 3px 0 0 0 !important;
  width: 16px;
  height: 16px;
  accent-color: var(--ast-global-color-1);
}

@media (max-width: 768px) {
  .probar-newsletter-container,
  .probar-newsletter-form {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box;
  }

  .probar-privacy-label {
    padding: 0 !important;
    font-size: 12.5px !important;
  }
}

/* ==========================================================================
   25. CROSS-SELLS / CORRELATI NEL CARRELLO - card orizzontale allineata
   Immagine a sx | nome + categoria al centro | prezzo a dx (allineato)
   ========================================================================== */
.cross-sells ul.products li.product {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 14px 16px !important;
  margin: 0 0 10px 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  text-align: left !important;
  box-sizing: border-box;
}

.cross-sells ul.products li.product:last-child {
  margin-bottom: 0 !important;
}

/* Immagine: dimensione fissa, non deve schiacciarsi */
.cross-sells .astra-shop-thumbnail-wrap {
  flex: 0 0 72px !important;
  margin: 0 !important;
}

.cross-sells .astra-shop-thumbnail-wrap img {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain;
  border-radius: 8px !important;
  background: #ffffff;
  padding: 4px;
  box-sizing: border-box;
}

/* Testo + prezzo: griglia a 2 colonne, prezzo verticalmente centrato */
.cross-sells .astra-shop-summary-wrap {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title price"
    "cat   price";
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  text-align: left !important;
  min-width: 0;                    /* evita l'overflow dei titoli lunghi */
}

.cross-sells .astra-shop-summary-wrap .ast-loop-product__link {
  grid-area: title;
  order: 0 !important;
}

.cross-sells .astra-shop-summary-wrap .woocommerce-loop-product__title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

.cross-sells .astra-shop-summary-wrap .ast-woo-product-category {
  grid-area: cat;
  order: 0 !important;
  text-align: left !important;
  font-size: 14px !important;
  margin: 0 !important;
}

.cross-sells .astra-shop-summary-wrap .price {
  grid-area: price;
  order: 0 !important;
  align-self: center;
  justify-self: end;
  margin: 0 !important;
  white-space: nowrap;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* --- PULSANTE "AGGIUNGI" nei cross-sells: sotto il prezzo, a destra --- */
.cross-sells .astra-shop-summary-wrap {
  grid-template-areas:
    "title price"
    "cat   btn" !important;
}

.cross-sells ul.products li.product .button,
.cross-sells ul.products li.product a.button.add_to_cart_button,
.cross-sells ul.products li.product a.button {
  grid-area: btn;
  display: inline-block !important;
  justify-self: end;
  align-self: start;

  background-color: #000000 !important;
  background: #000000 !important;
  color: var(--ast-global-color-1) !important;
  border: 1px solid var(--ast-global-color-1) !important;
  border-radius: 8px !important;

  padding: 6px 16px !important;
  margin: 4px 0 0 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  line-height: 1.4 !important;
  white-space: nowrap;
  min-width: auto !important;
  width: auto !important;

  transition: background-color 0.3s ease, color 0.3s ease !important;
}

.cross-sells ul.products li.product .button:hover,
.cross-sells ul.products li.product a.button.add_to_cart_button:hover,
.cross-sells ul.products li.product a.button:hover {
  background-color: var(--ast-global-color-1) !important;
  background: var(--ast-global-color-1) !important;
  color: #ffffff !important;
  border-color: var(--ast-global-color-1) !important;
}

/* Stato "aggiunto": non deve rompere il layout */
.cross-sells ul.products li.product a.added_to_cart {
  grid-area: btn;
  justify-self: end;
  font-size: 14px !important;
  color: var(--ast-global-color-1) !important;
  margin-top: 2px !important;
}

/* --- MOBILE: impila testo e prezzo, mantiene l'immagine a sinistra --- */
@media (max-width: 600px) {
  .cross-sells ul.products li.product {
    padding: 12px !important;
    gap: 12px !important;
  }

  .cross-sells .astra-shop-thumbnail-wrap,
  .cross-sells .astra-shop-thumbnail-wrap img {
    flex: 0 0 60px !important;
    width: 60px !important;
    height: 60px !important;
  }

  .cross-sells .astra-shop-summary-wrap {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "cat"
      "price"
      "btn" !important;
    row-gap: 3px;
  }

  .cross-sells ul.products li.product .button,
  .cross-sells ul.products li.product a.button {
    justify-self: start !important;
  }

  .cross-sells .astra-shop-summary-wrap .price {
    justify-self: start;
    margin-top: 2px !important;
  }

  .cross-sells .astra-shop-summary-wrap .woocommerce-loop-product__title {
    font-size: 14px !important;
  }
}

/* ==========================================================================
   26. RICERCA LIVE - restyle elegante + miniatura prodotto
   --------------------------------------------------------------------------
   Il pannello dei risultati (Astra Live Search) arrivava senza alcun nostro
   stile: testo quasi nero (#141516) ereditato dal tema, su uno sfondo che il
   resto del sito rende scuro -> illeggibile. Qui gli diamo la stessa identita'
   del sito (nero, oro, respiro) e affianchiamo la miniatura del prodotto
   (iniettata da js/search-live-thumbs.js): risolve il problema vero di chi
   cerca, che e' RICONOSCERE il prodotto a colpo d'occhio, non solo leggerne
   il nome.

   NOTA SUI SELETTORI: Astra ha usato grafie leggermente diverse tra versioni
   (ast-search-live-results / ast-live-search-results, ast-search--postype-
   heading / ast-search--posttype-heading). Copriamo entrambe cosi' lo stile
   regge a prescindere dalla versione installata sul sito.
   ========================================================================== */
:root {
  --pb-gold: #FFCE53;
  --pb-gold-line: rgba(255, 206, 83, 0.16);
  --pb-gold-hover: rgba(255, 206, 83, 0.70);
  --pb-card-bg: #0d0d0d;
  --pb-ease: cubic-bezier(0.16, 1, 0.30, 1);
}

/* --- Il pannello --- */
.ast-search-live-results,
.ast-live-search-results {
  background-color: var(--pb-card-bg) !important;
  border: 1px solid var(--pb-gold-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55),
              0 0 30px rgba(255, 206, 83, 0.06) !important;
  padding: 8px !important;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--pb-gold-hover) transparent;
}

.ast-search-live-results::-webkit-scrollbar,
.ast-live-search-results::-webkit-scrollbar { width: 6px; }

.ast-search-live-results::-webkit-scrollbar-thumb,
.ast-live-search-results::-webkit-scrollbar-thumb {
  background-color: rgba(255, 206, 83, 0.35);
  border-radius: 10px;
}

/* --- Intestazione "Prodotti" --- */
.ast-search-live-results label.ast-search--postype-heading,
.ast-search-live-results label.ast-search--posttype-heading,
.ast-live-search-results label.ast-search--postype-heading,
.ast-live-search-results label.ast-search--posttype-heading {
  color: var(--pb-gold) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 14px 6px !important;
}

/* --- Nessun risultato --- */
.ast-search-live-results label.ast-search--no-results-heading,
.ast-live-search-results label.ast-search--no-results-heading {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 14px !important;
  padding: 16px 14px !important;
}

/* --- Ogni risultato: riga con miniatura + nome, mai un muro di testo --- */
.ast-search-live-results a.ast-search-item,
.ast-live-search-results a.ast-search-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px;
  padding: 9px 12px !important;
  margin: 2px 4px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 14px !important;
  line-height: 1.4;
  text-decoration: none !important;
  transition: background-color 0.4s var(--pb-ease), color 0.4s var(--pb-ease);
}

.ast-search-live-results a.ast-search-item:hover,
.ast-search-live-results a.ast-search-item:focus-visible,
.ast-live-search-results a.ast-search-item:hover,
.ast-live-search-results a.ast-search-item:focus-visible {
  background-color: rgba(255, 206, 83, 0.08) !important;
  color: var(--pb-gold) !important;
  outline: none;
}

/* --- "Vedi tutti i risultati" - pillola oro, come il resto del sito --- */
.ast-search-live-results a.ast-search-page-link,
.ast-live-search-results a.ast-search-page-link {
  display: flex !important;
  margin: 8px 6px 4px !important;
  padding: 10px !important;
  border: 1px solid var(--pb-gold-hover) !important;
  border-radius: 8px;
  color: var(--pb-gold) !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: background-color 0.4s var(--pb-ease), color 0.4s var(--pb-ease);
}

.ast-search-live-results a.ast-search-page-link:hover,
.ast-live-search-results a.ast-search-page-link:hover {
  background-color: var(--pb-gold) !important;
  color: #111111 !important;
}

/* --- LA MINIATURA (iniettata da js/search-live-thumbs.js) ---
   Stesso trattamento delle anteprime prodotto in tutto il sito: fondo
   trasparente, foto SEMPRE intera (contain), mai tagliata. Nessuno spazio
   riservato per i risultati senza corrispondenza: l'elenco resta pulito,
   niente caselle vuote in attesa di un'immagine che non arrivera'. */
.pb-search-thumb {
  flex: 0 0 auto;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid var(--pb-gold-line);
}

.pb-search-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  box-sizing: border-box;
}

/* ==========================================================================
   27. RICERCA LIVE - MOBILE
   ========================================================================== */
@media (max-width: 921px) {
  .ast-search-live-results,
  .ast-live-search-results {
    border-radius: 10px !important;
    max-height: 70vh;
  }

  .ast-search-live-results a.ast-search-item,
  .ast-live-search-results a.ast-search-item {
    padding: 9px 10px !important;
    font-size: 14px !important;
  }

  .pb-search-thumb {
    width: 38px;
    height: 38px;
  }
}

/* ==========================================================================
   28. RICERCA LIVE - ACCESSIBILITA
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ast-search-live-results a.ast-search-item,
  .ast-live-search-results a.ast-search-item,
  .ast-search-live-results a.ast-search-page-link,
  .ast-live-search-results a.ast-search-page-link {
    transition: none !important;
  }
}

/* ==========================================================================
   29. NOTIFICHE SENZA "MARKER" - sitewide
   --------------------------------------------------------------------------
   WooCommerce (e Astra) antepongono alle notifiche un'icona presa dal loro
   font-icona: quando il font non c'e', resta un glifo rotto (un quadratino/
   spunta sporca) all'inizio di ogni messaggio - su carrello, checkout,
   account, ovunque. Qui viene spento definitivamente, su tutto il sito.
   ========================================================================== */
.woocommerce-message::before,
.woocommerce-message::after,
.woocommerce-error::before,
.woocommerce-error::after,
.woocommerce-info::before,
.woocommerce-info::after,
.woocommerce-error li::before,
.woocommerce-message li::before,
.woocommerce-info li::before,
.woocommerce-notice::before,
.wc-block-components-notice-banner > svg,
.woocommerce-NoticeGroup .woocommerce-error::before {
  content: none !important;
  display: none !important;
}

/* Il padding extra che Astra riserva all'icona non serve piu' */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  padding-left: 18px !important;
}

/* ==========================================================================
   30. ETICHETTA "ESAURITO" - sempre a misura dell'immagine
   --------------------------------------------------------------------------
   Il badge di Astra (ast-shop-product-out-of-stock) ha una taglia fissa:
   sulle miniature piccole (cross-sell del carrello, liste compatte)
   debordava dall'immagine spezzandosi su due righe. Qui diventa una
   pillola centrata DENTRO l'immagine, che non sfora mai: su una miniatura
   e' minuscola, su una card grande resta discreta.
   ========================================================================== */
span.ast-shop-product-out-of-stock {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  max-width: 92% !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.3 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #141516 !important;
  z-index: 2;
}

/* I contenitori dell'immagine devono fare da riferimento al badge */
.woocommerce ul.products li.product,
.cross-sells li.product,
td.product-thumbnail,
.moderncart-cart-item-image {
  position: relative;
}

/* ==========================================================================
   30. MODERNCART - stop alle "reminescenze" chiare
   --------------------------------------------------------------------------
   Il plugin del carrello slide-out porta con se' una notifica e una barra
   di avanzamento spedizione proprie, in tema CHIARO: doppioni stonati
   della nostra barra dorata (sez. 19). Vanno spente del tutto.
   Il blocco riepilogo (coupon, subtotale, IVA, totale) resta ma si veste
   di scuro come il resto del sito.
   ========================================================================== */
.moderncart-notification,
[class*="moderncart"][class*="free-shipping"] {
  display: none !important;
}

/* Riepilogo e coupon dello slide-out: fondo scuro, testo chiaro */
[class*="moderncart"][class*="order-summary"],
[class*="moderncart"][class*="coupon-form-container"],
[class*="moderncart"][class*="line-items"],
.moderncart-slide-out-footer {
  background: #0a0a0a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[class*="moderncart"][class*="order-summary"] *,
[class*="moderncart"][class*="coupon-form-container"] *,
[class*="moderncart"][class*="line-items"] * {
  color: #fff !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* I campi del coupon dentro lo slide-out restano leggibili */
[class*="moderncart"][class*="coupon-form-container"] input {
  background: #0f0f0f !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* --------------------------------------------------------------------------
   ...MA LA NOSTRA BARRA NON E' UNA "REMINESCENZA" DA SPEGNERE
   --------------------------------------------------------------------------
   Il reset con l'asterisco qui sopra nasce per domare i pezzi in tema chiaro
   del plugin. Solo che colpisce OGNI discendente del riepilogo, e la nostra
   barra spedizione vive li' dentro: si portava via il fondo antracite, il
   binario e il riempimento dorato, lasciando del testo su un rettangolo
   invisibile. Peggio ancora nello stato "festeggiamento": il titolo e' oro
   con la tecnica del gradiente ritagliato sul testo, quindi senza sfondo il
   testo diventa TRASPARENTE e la scritta di congratulazioni sparisce del
   tutto (succedeva sopra i 100 euro, su desktop e su mobile).

   Qui la barra si riprende i suoi colori. Le regole stanno DOPO il reset e
   hanno la stessa forza, quindi vincono; niente selettori acrobatici.
   -------------------------------------------------------------------------- */
[class*="moderncart"] .abm-fsl-bar-wrap {
  background-color: #1a1a1a !important;
}

[class*="moderncart"] .abm-fsl-track {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

[class*="moderncart"] .abm-fsl-fill {
  background-color: var(--ast-global-color-1, #ffce53) !important;
}

/* Stato festeggiamento: cielo notturno, scoppi e scintille */
[class*="moderncart"] .abm-fsl-celebrate {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 206, 83, 0.18) 0%, transparent 60%),
    #0a0a0a !important;
}

[class*="moderncart"] .abm-fsl-burst {
  background: radial-gradient(circle, rgba(255, 206, 83, 0.45) 0%, rgba(255, 206, 83, 0) 65%) !important;
}

[class*="moderncart"] .abm-fsl-spark {
  background: #FFCE53 !important;
}

[class*="moderncart"] .abm-fsl-spark:nth-child(4n) {
  background: #fff6d8 !important;
}

/* Il titolo dorato con luccichio: il gradiente E' il colore del testo.
   ATTENZIONE AL DETTAGLIO CHE COSTA CARO: "background: transparent" del
   reset e' una SCORCIATOIA, e le scorciatoie riazzerano tutte le proprieta'
   collegate, ritaglio compreso (background-clip torna a border-box). Con il
   ritaglio perso, il gradiente dipinge il rettangolo e il testo resta
   trasparente: la scritta sparisce. Per questo anche il ritaglio vuole
   !important, non basta ridare lo sfondo. */
[class*="moderncart"] .abm-fsl-title {
  background: linear-gradient(
    100deg,
    #c9962b 0%,
    #FFCE53 25%,
    #fff6d8 45%,
    #FFCE53 65%,
    #c9962b 100%
  ) !important;
  background-size: 250% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ==========================================================================
   31. CROSS-SELLS: CTA SOTTO IL PREZZO + "IVA ESCL." DENTRO I BORDI
   --------------------------------------------------------------------------
   Nei box "Potresti essere interessato a..." il suffisso di prezzo
   sbordava oltre il contorno della card. Ora il prezzo puo' andare a capo
   e il suffisso vive su una riga propria, sempre dentro i bordi.
   Il pulsante "Aggiungi" sta ESATTAMENTE sotto il prezzo.
   ========================================================================== */
.cross-sells ul.products li.product {
  overflow: hidden;
}

.cross-sells ul.products li.product .price {
  display: block !important;
  white-space: normal !important;
  max-width: 100%;
}

.cross-sells ul.products li.product .price .woocommerce-price-suffix,
.woocommerce ul.products li.product .price .woocommerce-price-suffix {
  display: block;
  margin-top: 2px;
  font-size: 14px !important;
  opacity: 0.7;
  white-space: nowrap;
}

/* La CTA subito sotto il prezzo, pillola dorata compatta */
.cross-sells ul.products li.product .button,
.cross-sells ul.products li.product a.add_to_cart_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 10px 0 0 !important;
  padding: 8px 20px !important;
  background: var(--ast-global-color-1, #FFCE53) !important;
  border: none !important;
  border-radius: 20px !important;
  color: #111 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 1 !important;
}

.cross-sells ul.products li.product .button:hover,
.cross-sells ul.products li.product a.add_to_cart_button:hover {
  background: #ffd977 !important;
  color: #111 !important;
}

/* ==========================================================================
   32. "VISUALIZZA CARRELLO" - visibile a riposo, oro al passaggio
   --------------------------------------------------------------------------
   Il link che compare dopo l'aggiunta al carrello era quasi invisibile
   (grigio scuro su fondo scuro): ora e' un antracite CHIARO, leggibile
   ma discreto. L'hover resta l'oro di sempre.
   ========================================================================== */
.woocommerce a.added_to_cart,
a.added_to_cart.wc-forward {
  color: #9aa2a6 !important;
}

.woocommerce a.added_to_cart:hover,
a.added_to_cart.wc-forward:hover {
  color: var(--ast-global-color-1, #FFCE53) !important;
}

/* ==========================================================================
   33. ICONE ON-CARD DEL CATALOGO - stessa famiglia del cuore wishlist
   --------------------------------------------------------------------------
   Astra impila carrello e vista-rapida in alto a destra, dove ora abita il
   cuore. Nuova disposizione: CUORE in alto a destra, CARRELLO e VISTA
   RAPIDA in basso a destra (a scomparsa, come sempre). Tutte e tre le
   pasticche parlano la stessa lingua: cerchio nero in trasparenza, icona
   chiara, oro con bagliore al passaggio.
   ========================================================================== */
.woocommerce ul.products li.product .ast-on-card-button {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-shadow: none !important;
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.woocommerce ul.products li.product .ast-on-card-button svg,
.woocommerce ul.products li.product .ast-on-card-button svg path {
  fill: currentColor !important;
}

.woocommerce ul.products li.product .ast-on-card-button:hover {
  color: var(--ast-global-color-1, #FFCE53) !important;
  border-color: var(--ast-global-color-1, #FFCE53) !important;
  box-shadow: 0 0 14px rgba(255, 206, 83, 0.45) !important;
}

/* Posizioni: vista rapida nell'angolo basso, carrello subito sopra */
.woocommerce ul.products li.product .ast-on-card-button.ast-quick-view-trigger {
  top: auto !important;
  bottom: 10px !important;
  right: 10px !important;
}

.woocommerce ul.products li.product .ast-on-card-button:not(.ast-quick-view-trigger) {
  top: auto !important;
  bottom: 52px !important;
  right: 10px !important;
}

/* ==========================================================================
   34. PULSANTE "AGGIUNGI" SU OGNI CARD - posizioni
   --------------------------------------------------------------------------
   Griglie del catalogo: il pulsante e' l'ultimo elemento della card,
   IN BASSO E CENTRATO (le card di Astra sono flex: margin-top auto lo
   inchioda al fondo anche quando i titoli hanno altezze diverse).
   Cross-sells del carrello (righe compatte): IN BASSO A DESTRA, sotto
   il prezzo.
   ========================================================================== */
.woocommerce ul.products li.product .abm-xs-add {
  margin-top: auto !important;
  align-self: center;
}

/* Un filo d'aria sopra il pulsante quando la card e' corta */
.woocommerce ul.products li.product .abm-xs-add,
.woocommerce ul.products li.product a.abm-xs-add {
  margin-bottom: 4px;
}

/* --- Cross-sells del carrello: righe compatte --- */
.woocommerce-cart .cross-sells ul.products li.product {
  position: relative;
  padding-bottom: 54px !important;
}

.woocommerce-cart .cross-sells ul.products li.product .abm-xs-add {
  position: absolute;
  right: 14px;
  bottom: 12px;
  margin: 0 !important;
}

/* ==========================================================================
   35. MINIATURE PICCOLE: NIENTE ICONE SOVRAPPOSTE
   --------------------------------------------------------------------------
   Nelle righe compatte dei cross-sells del carrello la foto e' minuscola:
   cuore, carrellino e vista-rapida sopra l'immagine diventano solo
   rumore. Li' non devono MAI comparire (il pulsante "Aggiungi" basta e
   avanza).
   ========================================================================== */
.woocommerce-cart .cross-sells .ast-on-card-button,
.woocommerce-cart .cross-sells .abm-wl-heart,
.woocommerce-cart .cross-sells .ast-quick-view-trigger {
  display: none !important;
}

/* ==========================================================================
   36. PULSANTE "AGGIUNGI" - UNO STILE SOLO, OVUNQUE
   --------------------------------------------------------------------------
   La stessa pillola dorata compatta dei cross-sells, su ogni card del
   catalogo: qualunque cosa Astra pensi dei .button, qui vince questa.
   ========================================================================== */
a.abm-xs-add,
.woocommerce ul.products li.product a.abm-xs-add,
.woocommerce-page ul.products li.product a.abm-xs-add {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  margin: 10px auto 4px !important;
  padding: 7px 18px !important;
  background: var(--ast-global-color-1, #FFCE53) !important;
  border: none !important;
  border-radius: 20px !important;
  color: #111 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  line-height: 1.4 !important;
  text-transform: uppercase;
  text-decoration: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

a.abm-xs-add:hover {
  background: #ffd977 !important;
  color: #111 !important;
}

/* Nelle griglie flex di Astra: inchiodato in fondo alla card, centrato */
.woocommerce ul.products li.product a.abm-xs-add {
  margin-top: auto !important;
  align-self: center;
}

/* ==========================================================================
   37. CARRELLO SLIDE-OUT SU MOBILE - le miniature si vedono
   --------------------------------------------------------------------------
   ModernCart su mobile nasconde le foto dei prodotti (display:none inline):
   tornano visibili come su desktop - immagine a sinistra, nome e prezzi
   alla sua destra. L'!important vince sullo stile inline del plugin.
   ========================================================================== */
@media (max-width: 921px) {
  .moderncart-cart-item-image {
    display: block !important;
    flex: 0 0 auto;
  }

  .moderncart-cart-item-image img {
    width: 62px !important;
    height: 62px !important;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
  }

  .moderncart-cart-item-container {
    display: flex !important;
    align-items: center;
    gap: 12px;
  }

  .moderncart-cart-item-product {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Cross-sells del carrello: la pillola sta in basso a DESTRA della riga
   (questa regola vive dopo la 36 apposta: deve vincerci sul margin) */
.woocommerce-cart .cross-sells ul.products li.product a.abm-xs-add {
  position: absolute;
  right: 16px;
  bottom: 14px;
  margin: 0 !important;
}

/* ==========================================================================
   38. SLIDE-OUT: "PROCEDI" DORATO + QUANTITA' CON GERARCHIA
   --------------------------------------------------------------------------
   Il pulsante "Procedi" del carrello slide-out veste come ogni CTA di
   casa: fondo oro, scritta nera, bagliore al passaggio.
   Sui controlli quantita' il "+" invita (oro, grassetto), il "-" si fa
   da parte (bianco, peso normale).
   ========================================================================== */
[class*="moderncart"] .wc-proceed-to-checkout a.checkout-button,
[class*="moderncart"] .wc-proceed-to-checkout a.wc-forward,
.moderncart-slide-out-footer a.checkout-button {
  display: block;
  background: var(--ast-global-color-1, #FFCE53) !important;
  color: #111111 !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  text-align: center;
  text-decoration: none !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

[class*="moderncart"] .wc-proceed-to-checkout a.checkout-button:hover,
[class*="moderncart"] .wc-proceed-to-checkout a.wc-forward:hover,
.moderncart-slide-out-footer a.checkout-button:hover {
  background: #ffd977 !important;
  color: #111111 !important;
  box-shadow: 0 0 18px rgba(255, 206, 83, 0.45) !important;
}

/* Quantita' nello slide-out: "+" oro grassetto, "-" bianco normale */
[class*="moderncart"] button.quantity__button--up {
  color: var(--ast-global-color-1, #FFCE53) !important;
  font-weight: 700 !important;
}

[class*="moderncart"] button.quantity__button--up svg,
[class*="moderncart"] button.quantity__button--up svg path {
  fill: var(--ast-global-color-1, #FFCE53) !important;
  stroke: var(--ast-global-color-1, #FFCE53) !important;
}

[class*="moderncart"] button.quantity__button--down {
  color: #ffffff !important;
  font-weight: 400 !important;
}

[class*="moderncart"] button.quantity__button--down svg,
[class*="moderncart"] button.quantity__button--down svg path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Le icone +/- di ModernCart arrivano SENZA viewBox e il plugin le dimensiona
   a 10px con overflow:hidden: il path (coordinate ~0-18) veniva tagliato e il
   "+" si vedeva come un angolo ("cornetto") in alto a sinistra. Allarghiamo il
   viewport dell'SVG e lasciamo debordare: il glifo intero torna visibile.
   Il pulsante e' 30x25, un'icona da 18px ci sta centrata. */
[class*="moderncart"] button.quantity__button--up svg,
[class*="moderncart"] button.quantity__button--down svg {
  width: 18px !important;
  height: 18px !important;
  overflow: visible !important;
}

/* Titolo dello slide-out ("Rivedi il tuo carrello") reso cliccabile verso la
   pagina Carrello (comportamento in functions.php, delega su body). */
.moderncart-slide-out-header-title {
  cursor: pointer;
  transition: color 0.2s ease;
}

.moderncart-slide-out-header-title:hover {
  color: #FFCE53;
}

/* ==========================================================================
   39. AUTOFILL DI CHROME - SEMPRE SCURO, SU TUTTO IL SITO
   --------------------------------------------------------------------------
   Chrome dipinge di bianco i campi compilati/suggeriti automaticamente,
   ovunque: il box-shadow interno lo copre col nostro nero su QUALSIASI
   input del sito (checkout, account, registrazione, ricerca...).
   ========================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #0f0f0f inset !important;
  box-shadow: 0 0 0 1000px #0f0f0f inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff;
  transition: background-color 99999s ease-out 0s !important;
}

/* ==========================================================================
   40. BARRA DI RICERCA SOTTO-HEADER SU MOBILE - dentro lo schermo
   --------------------------------------------------------------------------
   Astra le da' margini negativi di -10px senza compensazione nel nostro
   layout: usciva dal bordo sinistro (misurato dal vivo sul checkout).
   Vale sitewide: quella barra sta su ogni pagina.
   ========================================================================== */
@media (max-width: 921px) {
  .ast-header-break-point .site-below-header-wrap.ast-below-header-bar,
  body .ast-below-header-bar.ast-below-header {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   41. TOAST "AGGIUNTO AL CARRELLO" - la pillola parla la nostra lingua
   --------------------------------------------------------------------------
   La notifica di ModernCart accanto al carrello flottante era una pillola
   BIANCA su sito nero: ora e' una card scura col filo d'oro e il bagliore
   di casa.
   ========================================================================== */
p.moderncart-floating-cart-button-notification,
.moderncart-add-to-cart-notification {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border: 1px solid #FFCE53 !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 206, 83, 0.25) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
}

/* ==========================================================================
   42. SLIDE-OUT: I PRODOTTI SONO I PROTAGONISTI (mobile)
   --------------------------------------------------------------------------
   Il blocco dei totali si spalmava su meta' schermo spingendo fuori i
   prodotti. Ora: la lista prodotti prende la scena (flex 1, mai sotto il
   40% dello schermo), il piede si compatta - righe totali strette, testi
   a misura - e se proprio non ci sta, scorre lui, non i prodotti.
   ========================================================================== */
@media (max-width: 921px) {
  .moderncart-panel {
    display: flex !important;
    flex-direction: column !important;
  }

  .moderncart-slide-out-cart {
    flex: 1 1 auto !important;
    min-height: 40vh !important;
    overflow-y: auto !important;
  }

  .moderncart-slide-out-footer {
    flex: 0 0 auto !important;
    max-height: 48vh;
    overflow-y: auto;
  }

  /* Righe dei totali: compatte, niente altezze gonfiate o spazi vuoti */
  .moderncart-cart-total,
  [class*="moderncart"][class*="order-summary"] {
    height: auto !important;
    min-height: 0 !important;
  }

  .moderncart-cart-total > div,
  .moderncart-cart-total tr,
  [class*="moderncart"][class*="order-summary"] > div {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  .moderncart-cart-total,
  .moderncart-cart-total * {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* ==========================================================================
   43. FRECCE DELLO SLIDE-OUT - oro, mai blu
   ========================================================================== */
svg.moderncart-arrow-down-icon,
svg.moderncart-arrow-up-icon,
svg.moderncart-arrow-down-icon path,
svg.moderncart-arrow-up-icon path,
[class*="moderncart"] svg[class*="arrow"] path {
  stroke: #FFCE53 !important;
  color: #FFCE53 !important;
  fill: none !important;
}

/* ==========================================================================
   44. DOPPIO PREZZO - riga "IVA inclusa" discreta sotto il prezzo (IVA escl.)
   L'IVA esclusa resta prominente (B2B); l'inclusa e' grigia, piccola, sotto.
   Vedi inc/abm-prezzi-iva.php.
   ========================================================================== */
/* PERCHE' TUTTI QUESTI !important E IL SELETTORE SUI FIGLI (8 agosto 2026).
   La riga era gia' scritta piccola e grigia, ma in scheda prodotto usciva
   BIANCA e a 24px, cioe' vistosa quanto il prezzo vero. Causa: dentro il
   nostro span WooCommerce annida un `.woocommerce-Price-amount`, e Astra lo
   colpisce con le sue regole sul prezzo della scheda (`.price .amount`), piu'
   specifiche della nostra. Non bastava vestire il contenitore: la dimensione e
   il colore vanno imposti anche a CIO' CHE STA DENTRO.
   Scelta di fondo: l'IVA esclusa resta il prezzo del negozio (B2B), l'inclusa
   e' una cortesia al cliente e il dato che Google si aspetta. Deve leggersi,
   non deve competere. Vedi inc/abm-prezzi-iva.php. */
.abm-price-incl,
.abm-price-incl * {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #8f9498 !important;
}

.abm-price-incl {
  display: block;
  margin-top: 3px;
  opacity: 0.95;
}

/* La parola "IVA incl." un gradino sotto la cifra: la cifra e' l'informazione,
   l'etichetta e' solo il contesto. */
.abm-price-incl__label {
  color: #7c8286 !important;
}

/* IL PAVIMENTO ANCHE QUI, E SERVE LA SPECIFICITA' (28 agosto 2026).
   Sulle schede della griglia questa parola misurava **9,92 pixel**, dentro un
   `.abm-price-incl` che era gia' a 14: qualcosa la rimpiccioliva del trenta per
   cento, e quel qualcosa non sta in un nostro foglio (e' Astra, che dimensiona
   i discendenti di `.price` in `em`). Una regola sulla sola classe perdeva.
   Con il genitore davanti pesa (0,2,0) e vince.

   Nove pixel per la riga che dice a un'azienda se il prezzo e' con o senza IVA
   e' l'esempio perfetto del difetto che questa passata doveva chiudere: non e'
   decorazione, e' il dato. */
.abm-price-incl .abm-price-incl__label,
.woocommerce ul.products li.product .price .abm-price-incl__label {
  font-size: 14px !important;
}

/* Scheda prodotto: il prezzo principale e' grande, questa riga resta minuta.
   Un soffio piu' grande della griglia perche' li' la colonna e' larga.

   PERCHE' UN SELETTORE COSI' LUNGO (verificato dal vivo l'8 agosto): con
   `.single-product .abm-price-incl` la riga restava a 24px BIANCA, mentre
   nella griglia dei correlati - stessa pagina, stesso foglio - veniva
   correttamente 10,88px grigia. Quindi non era il CSS a non arrivare: dentro
   `.summary` c'e' una regola di Astra piu' specifica che vince. Invece di
   inseguirla si alza la specificita' nostra: `.single-product` + `.summary` +
   `p.price` + la classe fa (0,4,1), sopra qualunque cosa Astra usi li'.
   Ripetuto su `.entry-summary` perche' il contenitore cambia nome secondo il
   layout della scheda. */
.single-product .summary p.price .abm-price-incl,
.single-product .summary p.price .abm-price-incl *,
.single-product .entry-summary p.price .abm-price-incl,
.single-product .entry-summary p.price .abm-price-incl *,
.single-product .summary .abm-price-incl,
.single-product .summary .abm-price-incl *,
.single-product .abm-price-incl,
.single-product .abm-price-incl * {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: #8f9498 !important;
}
/* IL NODO DELLA CIFRA, che resiste anche al selettore qui sopra.
   Dopo il primo giro il contenitore era sceso a 12,48px ma "36,55 EUR" restava
   a 24px: dentro il nostro span WooCommerce mette un `.woocommerce-Price-amount`
   che Astra colpisce direttamente nella scheda. Va nominato per esteso, con la
   sua specificita' (0,5,1), altrimenti la cifra resta grande e l'etichetta
   piccola: il peggiore dei due mondi. */
.single-product .summary p.price .abm-price-incl .woocommerce-Price-amount,
.single-product .summary p.price .abm-price-incl bdi,
.single-product .summary p.price .abm-price-incl .woocommerce-Price-currencySymbol,
.single-product .entry-summary p.price .abm-price-incl .woocommerce-Price-amount,
.single-product .entry-summary p.price .abm-price-incl bdi,
.single-product .summary .abm-price-incl .woocommerce-Price-amount,
.single-product .summary .abm-price-incl bdi {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #8f9498 !important;
}

.single-product .summary .abm-price-incl__label,
.single-product .abm-price-incl__label {
  color: #7c8286 !important;
}
.single-product .abm-price-incl {
  margin-top: 5px;
}

/* Nelle card del catalogo lo spazio e' poco: ancora piu' contenuta. */
ul.products .abm-price-incl,
ul.products .abm-price-incl * {
  font-size: 0.68rem !important;
}

/* --- Doppio prezzo nel CARRELLO: 2 righe su mobile ---
   Su desktop la cella e' una tabella e la riga IVA incl. va gia' a capo (ok).
   Su mobile la cella e' flex e le due righe finivano affiancate: qui le
   impiliamo (escl. sopra, incl. sotto) e mostriamo la dicitura "IVA escl."
   solo su mobile (desktop resta com'era, senza etichetta). */
.abm-price-2l { display: block; }
.abm-price-excl__label { display: none; }

@media (max-width: 768px) {
  .abm-price-2l {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .abm-price-excl__label {
    display: inline;
    color: #9aa2a6;
    font-size: 14px;
    font-weight: 400;
  }
}

/* ==========================================================================
   34. CASSETTO CARRELLO - PROPORZIONI E GERARCHIA (6 agosto 2026)
   --------------------------------------------------------------------------
   IL PROBLEMA. Il cassetto arrivava con proporzioni sbagliate: testata da
   103px per due parole, ogni articolo alto 196px (la miniatura verticale
   veniva stirata a 136px), e un fondo da 404px. Su un telefono restavano
   briciole per i prodotti, e il pulsante finiva fuori schermo.

   IL PROGETTO. Testata e fondo COMPATTI E FISSI, la lista prodotti e' l'unica
   parte che si restringe e scorre. Il fondo e' separato da un filo dorato:
   dice all'occhio "da qui in giu' i conti non si muovono". La lista porta
   aloni dorati sul bordo che compaiono SOLO se c'e' altro da vedere: e' la
   tecnica degli sfondi con background-attachment local, zero JavaScript, e
   suggerisce la scorrevolezza senza scrivere "scorri".

   PERCHE' TANTI !important E QUALCHE #moderncart-slide-out: il plugin usa
   selettori con ID e regole dentro media query. Non e' pigrizia, e' l'unico
   modo per vincere. VERIFICATO che il plugin NON riscrive questi valori via
   JavaScript (nessuno stile inline sugli elementi: provato azzerandoli).

   MISURE OTTENUTE (viewport 375x620, il caso peggiore realistico):
     testata 103 -> 77 | articolo 196 -> 119 | fondo 404 -> 392
     totale 606 su 620, con il pulsante interamente visibile.
   ========================================================================== */

/* --- Struttura: chi sta fermo e chi scorre ---
   L'ALTEZZA E' 100svh, NON 100dvh. Differenza che conta sui telefoni veri:
   dvh e' la misura CORRENTE e cambia quando la barra degli indirizzi si
   nasconde o riappare. Un cassetto aperto con la barra nascosta si dimensiona
   grande, e appena la barra torna il fondo finisce sotto lo schermo: e' il
   motivo per cui il pulsante spariva riaprendo il carrello dall'icona dopo
   aver navigato, mentre subito dopo l'aggiunta al carrello funzionava.
   svh e' la misura piu' PICCOLA possibile, quella con la barra del browser
   tutta aperta: il cassetto ci sta sempre, in qualunque momento lo si apra. */
.moderncart-modal.moderncart-cart-style-slideout {
  height: 100vh;   /* ripiego per i browser senza unita' dinamiche */
  height: 100svh;
}

.moderncart-modal .moderncart-default-slide-out {
  height: 100svh;
  max-height: 100svh;
}

.moderncart-modal .moderncart-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.moderncart-modal .moderncart-slide-out-header {
  flex: 0 0 auto;
}

.moderncart-modal .moderncart-slide-out-cart {
  flex: 1 1 auto !important;
  min-height: 132px !important;   /* mai meno di un articolo e mezzo */
  max-height: none !important;
  height: auto !important;
  overflow-y: auto !important;
}

.moderncart-modal .moderncart-slide-out-footer {
  flex: 0 0 auto !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  /* Il filo dorato vuole !important: la sez. 30 qui sopra impone
     border-color bianco su questo stesso elemento, sempre con !important.
     E' la terza volta che un nostro reset vince su un nostro stile: quando
     si scrive un reset largo, ricordarsi di chi ci vive dentro. */
  border-top: 1px solid rgba(255, 206, 83, 0.40) !important;
  padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
}

/* --- L'indizio di scorrimento: aloni dorati solo quando servono --- */
.moderncart-modal .moderncart-slide-out-cart {
  background-image:
    linear-gradient(#0a0a0a 30%, rgba(10, 10, 10, 0)),
    linear-gradient(rgba(10, 10, 10, 0), #0a0a0a 70%),
    radial-gradient(farthest-side at 50% 0, rgba(255, 206, 83, 0.30), rgba(255, 206, 83, 0)),
    radial-gradient(farthest-side at 50% 100%, rgba(255, 206, 83, 0.30), rgba(255, 206, 83, 0)) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 26px, 100% 26px, 100% 11px, 100% 11px !important;
  background-position: top, bottom, top, bottom !important;
  background-attachment: local, local, scroll, scroll !important;
}

/* --- Testata compatta --- */
#moderncart-slide-out .moderncart-slide-out-header-heading {
  padding: 10px 16px !important;
}

.moderncart-modal .moderncart-slide-out-header-title {
  font-size: 17px !important;
  line-height: 1.25 !important;
}

/* --- Articoli: miniatura quadrata (niente foto stirate), testo su due righe --- */
#moderncart-slide-out .moderncart-cart-item-container {
  padding: 12px 10px 12px 0 !important;
}

.moderncart-modal .moderncart-cart-item-image {
  width: 64px !important;
  height: 64px !important;
  flex: 0 0 64px !important;
}

.moderncart-modal .moderncart-cart-item-image a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.moderncart-modal .moderncart-cart-item-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  max-width: none !important;
}

/* Il nome si ferma a due righe. Si taglia con max-height e non con
   -webkit-line-clamp perche' il plugin impone display:flow-root da dentro
   una media query e vincerebbe lui. */
#moderncart-slide-out .moderncart-cart-item__details {
  max-height: 37px !important;
  overflow: hidden !important;
}

.moderncart-modal .moderncart-cart-item__details,
.moderncart-modal .moderncart-cart-item-product-name,
.moderncart-modal .moderncart-cart-item-product-link {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.moderncart-modal .moderncart-cart-item-actions--pricing {
  font-size: 14px !important;
  margin-top: 2px !important;
}

.moderncart-modal .moderncart-cart-item-actions-remove {
  font-size: 14px !important;
  margin-top: 2px !important;
}

/* --- Conti e coupon: righe piu' strette --- */
#moderncart-slide-out .moderncart-cart-line-items-item {
  padding: 5px 16px !important;
}

#moderncart-slide-out .moderncart-have-coupon-code-area {
  padding: 2px 16px !important;
}

/* --- Barra spedizione gratuita: stessa veste, ingombro ridotto --- */
.moderncart-modal .abm-fsl-bar-wrap {
  padding: 10px 14px !important;
  margin: 6px 0 !important;
}

.moderncart-modal .abm-fsl-title {
  font-size: 14px !important;
  margin-bottom: 6px !important;
}

.moderncart-modal .abm-fsl-desc {
  font-size: 14px !important;
  margin-top: 6px !important;
}

/* --- Il pulsante chiude il blocco, senza spazi sprecati --- */
.moderncart-modal .wc-proceed-to-checkout {
  padding: 6px 16px 0 !important;
}

.moderncart-modal .wc-proceed-to-checkout .checkout-button {
  margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   34b. IL RIEPILOGO: ORDINE DELLE VOCI ED ETICHETTE
   --------------------------------------------------------------------------
   Il plugin stampa le righe in ordine subtotale, IVA, spedizione, totale.
   L'ordine che si legge meglio e' invece: quanto costa la merce, quanto
   costa portarla, quanta imposta, quanto si paga in tutto. Si riordina con
   flex order, senza toccare il markup.

   Le etichette si ritoccano con ::after (aggiunta) e, per la prima riga che
   era troppo lunga, azzerando il testo e riscrivendolo. Il testo per i
   lettori di schermo resta quello del plugin, quindi l'accessibilita' non
   perde nulla. NOTA: queste stringhe sono in italiano dentro il CSS; se un
   domani il negozio parlera' altre lingue, andranno spostate in PHP.
   -------------------------------------------------------------------------- */
.moderncart-modal .moderncart-cart-line-items {
  display: flex !important;
  flex-direction: column !important;
}

.moderncart-modal .moderncart-cart-line-items__subtotal { order: 1 !important; }
.moderncart-modal .moderncart-cart-line-items__shipping { order: 2 !important; }
.moderncart-modal .moderncart-cart-line-items__tax      { order: 3 !important; }
.moderncart-modal .moderncart-cart-line-items__total    { order: 4 !important; }

/* Ogni etichetta su una riga sola: due righe rubavano spazio prezioso */
.moderncart-modal .moderncart-cart-line-items-label {
  white-space: nowrap !important;
}

/* "Totale prodotti (IVA escl.)" era troppo lunga: si riscrive piu' corta */
.moderncart-modal .moderncart-cart-line-items__subtotal .moderncart-cart-line-items-label {
  font-size: 0 !important;
}

.moderncart-modal .moderncart-cart-line-items__subtotal .moderncart-cart-line-items-label::after {
  content: "Tot. prodotti (IVA escl.)";
  font-size: 13px;
}

/* La spedizione dichiara che e' al netto dell'imposta, come il subtotale */
.moderncart-modal .moderncart-cart-line-items__shipping .moderncart-cart-line-items-label::after {
  content: " (IVA escl.)";
}

/* "Totale" da solo e' ambiguo accanto agli altri totali: e' il totale ordine */
.moderncart-modal .moderncart-cart-line-items__total .moderncart-cart-line-items-label::after {
  content: " ordine";
}

/* --------------------------------------------------------------------------
   34c. DESKTOP: LA BARRA DELLA SPEDIZIONE GRATUITA SI FA VEDERE
   Sul telefono ogni pixel e' conteso e la barra sta compatta. Sul desktop
   quello spazio c'e', e questa barra e' un incentivo commerciale: merita
   corpo del testo piu' grande, binario piu' spesso e piu' aria.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .moderncart-modal .abm-fsl-bar-wrap {
    padding: 18px 20px !important;
    margin: 10px 0 !important;
  }

  .moderncart-modal .abm-fsl-title {
    font-size: 16px !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
  }

  .moderncart-modal .abm-fsl-desc {
    font-size: 14px !important;
    margin-top: 10px !important;
  }

  .moderncart-modal .abm-fsl-track {
    height: 14px !important;
  }

  .moderncart-modal .moderncart-cart-line-items-label,
  .moderncart-modal .moderncart-cart-line-items-value {
    font-size: 15px !important;
  }

  .moderncart-modal .moderncart-cart-line-items__subtotal .moderncart-cart-line-items-label::after {
    font-size: 15px !important;
  }
}

/* --------------------------------------------------------------------------
   34d. MOBILE: LA LINEA SALE, I TOTALI RESPIRANO, IL PULSANTE STA IN FONDO
   --------------------------------------------------------------------------
   Su telefono vero (non nell'emulatore) il fondo non ci stava ancora: la
   barra degli indirizzi si prende piu' spazio di quanto qualunque
   simulazione mostri. Invece di rincorrere l'altezza, si sposta il confine:
   ai prodotti il minimo indispensabile (96px, un articolo e mezzo, che basta
   a capire che la lista scorre), tutto il resto ai totali. Cosi' il fondo sta
   INTERO nello schermo e il pulsante non ha bisogno di trucchi per restare
   visibile: ci sta e basta.

   LA RIGA "Sei a X euro dalla spedizione gratuita" RESTA SEMPRE, anche su
   mobile: e' la cifra che manca alla soglia, l'informazione che fa aggiungere
   un altro prodotto al carrello. Toglierla per guadagnare 24px era un
   risparmio pagato con la parte piu' commerciale del messaggio (provato e
   annullato su richiesta: non si tocca). I pixel si trovano altrove, dal
   confine tra lista e totali.

   VERIFICATO a 375x560, piu' stretto di qualunque telefono in commercio:
   testata 77 | lista 106 | fondo 363 | pulsante 488-547 dentro lo schermo,
   con 13px d'aria sotto e il binario dorato pienamente visibile.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .moderncart-modal .abm-fsl-desc {
    display: block !important;
    font-size: 14px !important;
    margin-top: 8px !important;
  }

  .moderncart-modal .abm-fsl-title {
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }

  .moderncart-modal .abm-fsl-track {
    height: 12px !important;
  }

  .moderncart-modal .abm-fsl-bar-wrap {
    padding: 12px 14px !important;
    margin: 8px 0 !important;
  }

  /* Il confine si alza: la lista tiene il minimo, i conti prendono il resto.
     80px = un articolo intero; i 24px in meno rispetto a prima pagano la
     riga "Sei a X euro...", che resta. */
  .moderncart-modal .moderncart-slide-out-cart {
    min-height: 80px !important;
  }

  .moderncart-modal .moderncart-slide-out-footer {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   34. IL CAMPO "CODICE SCONTO" ESCE DALLA PAGINA CARRELLO
   --------------------------------------------------------------------------
   Deciso col committente il 25 agosto 2026, e non e' una questione di spazio.

   Un campo per il codice sconto dice a chi sta per pagare che **esiste un
   prezzo migliore di quello che ha davanti**, e lo manda a cercarlo altrove.
   E' uno dei modi piu' collaudati per perdere un carrello: chi esce a cercare
   un codice spesso non torna. Averlo due volte, qui e al checkout, raddoppia
   l'invito e non aggiunge niente: chi un codice ce l'ha lo inserisce alla
   cassa, dove il campo c'e' gia' ed e' fatto meglio.

   In piu', da oggi, sopra a questo campo c'e' il regalo di benvenuto: mostrare
   a qualcuno che ha appena ricevuto uno sconto la porta per un altro sconto
   che quasi certamente non ha e' il modo perfetto per rovinargli la
   soddisfazione appena data.

   NASCOSTO, NON RIMOSSO: il campo lo stampa Astra Addon dentro
   `woocommerce_proceed_to_checkout`, e non espone un modo pulito per
   toglierlo. Nascosto non fa danni (e' un div a se', fuori dai form del
   carrello), e resta li' se un domani lo si rivolesse.
   ========================================================================== */
.woocommerce-cart #ast-checkout-coupon {
  display: none !important;
}

/* ==========================================================================
   35. LA DIETA DEL CASSETTO
   --------------------------------------------------------------------------
   Deciso col committente il 25 agosto 2026, dopo averlo misurato: su un
   telefono da 812 pixel il piede del cassetto se ne prendeva 602 e all'elenco
   dei prodotti ne restavano 119. Il cliente apriva il carrello e vedeva un
   prodotto e mezzo di quello che aveva appena scelto.

   IL CASSETTO HA UN MESTIERE SOLO: confermare che e' entrata la cosa giusta, e
   togliersi di mezzo. Non e' un carrello e non e' un checkout. Tutto quello che
   non serve a quelle due cose compete con l'unica azione che conta, e qui
   competere vuol dire rubare pixel ai prodotti.

   LA REGOLA, misurabile: i prodotti non scendono mai sotto la meta' del
   pannello. Vale anche per il prossimo elemento che qualcuno vorra' metterci.

   Cosa esce, e perche':

   1. IL CAMPO CODICE SCONTO. Dice a chi sta guardando il carrello che esiste
      un prezzo migliore di quello che ha davanti, e lo manda a cercarlo
      altrove. Nel cassetto e' puro danno: li' il cliente non sta ancora
      comprando, sta controllando. Il campo resta al checkout, dove chi un
      codice ce l'ha lo usa. Stessa ragione per cui e' uscito dalla pagina
      carrello (sez. 34).

   2. IMPONIBILE, IVA E SPEDIZIONE. Sono numeri da controllare, e si controlla
      nel carrello. Nel cassetto non servono a decidere niente e costano 96
      pixel. Restano lo sconto (che e' denaro del cliente e non si nasconde),
      il Totale, e la riga del risparmio.
   ========================================================================== */
#moderncart-slide-out-modal .moderncart-have-coupon-code-area,
#moderncart-slide-out-modal #moderncart-coupon-form-container {
  display: none !important;
}

#moderncart-slide-out-modal .moderncart-cart-line-items__subtotal,
#moderncart-slide-out-modal .moderncart-cart-line-items__tax,
#moderncart-slide-out-modal .moderncart-cart-line-items__shipping {
  display: none !important;
}

/* ==========================================================================
   36. LA BARRA DELLA SPEDIZIONE, NEL CASSETTO, DICE LA COSA UNA VOLTA SOLA
   --------------------------------------------------------------------------
   Misurato dopo la dieta della sez. 35: dentro il piede del cassetto la nostra
   barra si prende 127 pixel, ed e' il singolo blocco piu' pesante rimasto.
   Non e' colpa della barra di scorrimento, che sono 6 pixel: sono le PAROLE,
   e sono dette due volte.

       Arriva a 100,00 EUR (IVA escl.) per ottenere la spedizione gratuita!
       [====                                                             ]
       Sei a 27,11 EUR dalla spedizione gratuita!

   La prima riga e la terza dicono la stessa cosa, e nella colonna stretta del
   cassetto la prima ne occupa tre di righe. La seconda frase e' anche la
   migliore: e' la distanza da coprire, cioe' quello su cui il cliente puo'
   fare qualcosa. Quindi nel cassetto resta solo lei, con la sua barra.

   SOLO NEL CASSETTO. Nella pagina Carrello la soglia e la distanza restano
   tutte e due: li' lo spazio non manca, e la soglia scritta per esteso serve
   a chi arriva sulla pagina senza sapere che esiste.

   `p.abm-fsl-title` e non `.abm-fsl-title`: quando la soglia e' raggiunta il
   titolo diventa uno `span` dentro il blocco della festa, e quello deve
   restare, perche' li' e' l'unica riga che dice "Spedizione Gratuita".
   ========================================================================== */
#moderncart-slide-out-modal .abm-fsl-bar-wrap p.abm-fsl-title {
  display: none !important;
}

/* =============================================================================
   IL CASSETTO: IL TITOLO PORTA AL CARRELLO, E SI VEDE (26 agosto 2026, sera)
   -----------------------------------------------------------------------------
   Chiesto dal committente: al posto di "Rivedi il tuo carrello" scrivere "Vai
   al tuo carrello", in oro, perche' si capisca che si puo' premere e che porta
   alla pagina del carrello.

   "Rivedi il tuo carrello" descriveva quello che il cliente stava gia'
   facendo: sta guardando il carrello, in questo istante. Un titolo cliccabile
   deve dire dove porta, non dove sei.

   L'oro qui e' quello del "lusso quieto": il colore, il filo sotto al
   passaggio del mouse, e basta. Un pulsante pieno in cima a un pannello
   sarebbe una seconda azione che compete con "Procedi", che e' l'unica che
   deve gridare.
   ========================================================================== */
.moderncart-slide-out-header-title.abm-cassetto-titolo,
[class*="moderncart"] .moderncart-slide-out-header-title.abm-cassetto-titolo {
  color: var(--ast-global-color-1, #FFCE53) !important;
  text-decoration: none;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.22s ease, opacity 0.22s ease;
}

@media (hover: hover) {
  .moderncart-slide-out-header-title.abm-cassetto-titolo:hover {
    text-decoration: underline;
    text-decoration-color: rgba(255, 206, 83, 0.55);
  }
}

.moderncart-slide-out-header-title.abm-cassetto-titolo:focus-visible {
  outline: 2px solid #FFCE53;
  outline-offset: 3px;
  border-radius: 4px;
}

/* -----------------------------------------------------------------------------
   L'ATTESA DENTRO IL CASSETTO: sfocatura e rotella dorata, come dappertutto
   -----------------------------------------------------------------------------
   Il velo lo accende `js/regalo-benvenuto-cassetto.js` con blockUI; l'aspetto
   (contenuto sfocato sotto, rotella oro sopra) arriva dalle regole generali
   della sezione 18. Qui si aggiunge solo cio' che serve dentro un pannello che
   scorre: il velo deve coprire quello che si vede, non l'intera altezza del
   contenuto, altrimenti la rotella finisce fuori schermo.
   -------------------------------------------------------------------------- */
#moderncart-slide-out-modal .blockUI.blockOverlay {
  position: absolute !important;
}

/* IL VELO NOSTRO NON BLOCCA, SFOCA E BASTA.
   blockUI e' nato per impedire i clic, e qui impedirli sarebbe un rimedio
   peggiore del male: chi preme il piu' due volte di fila deve poterlo fare.
   Con `pointer-events: none` resta solo cio' per cui lo usiamo - la sfocatura
   che copre l'assestamento del pannello - e i comandi sotto restano vivi.
   Il segno `.abm-velo` lo mette il nostro JavaScript: gli eventuali veli di
   altri, che bloccano per ragioni loro, non vengono toccati. */
#moderncart-slide-out-modal .blockUI.abm-velo,
#moderncart-slide-out-modal .blockUI.abm-velo * {
  pointer-events: none !important;
}

#moderncart-slide-out-modal .blockUI.blockMsg,
#moderncart-slide-out-modal .blockUI.blockElement {
  position: absolute !important;
  top: 40% !important;
}

/* ============================================================================
   45. IL PULSANTE PER PAGARE NON STA DENTRO UNA ZONA CHE SCORRE (28 ago 2026)
   ----------------------------------------------------------------------------
   IL CASO. Un cliente con un iPhone, tre articoli nel carrello, non trovava il
   pulsante per proseguire. Nella sua schermata si vedono il riquadro del regalo
   di benvenuto, lo sconto, il totale, il risparmio, e poi la pagina finisce.

   COSA C'ERA DI SBAGLIATO, e non era che mancasse lo scorrimento. Le due zone
   c'erano gia': la lista degli articoli scorreva, e il piede scorreva a sua
   volta dentro un `max-height: 48vh`. **Il pulsante stava in fondo alla
   seconda.** Per arrivarci bisognava capire che dentro il piede si poteva
   scorrere ancora, dentro un cassetto che gia' scorreva. Nessuno lo capisce, e
   chi non lo capisce non compra.

   Un secondo scorrimento non e' una soluzione, e' il difetto: **il gesto che
   porta al pagamento non puo' dipendere da uno scorrimento che il cliente deve
   indovinare.**

   LE TRE COSE, in ordine di importanza:

   1. IL PULSANTE SI APPICCICA IN FONDO. `position: sticky` dentro il piede:
      il resto scorre sotto di lui, ma lui e' sempre li'. Da qui in poi non
      esiste piu' un'altezza di schermo, una misura di carattere o un numero di
      righe che possa spingerlo fuori. E' l'unica correzione che vale per tutti
      i telefoni invece che per quello che abbiamo visto.

   2. L'ALTEZZA VERA, NON QUELLA TEORICA. `100vh` su iPhone conta anche la
      barra del browser, che sullo schermo non c'e': il cassetto risulta piu'
      alto della finestra e la parte bassa esce. `100dvh` misura quello che si
      vede davvero. Si scrivono tutte e due, in quest'ordine: chi non conosce
      la seconda usa la prima e sta come prima.

   3. LO SPAZIO SICURO IN BASSO. Sotto la barra di casa dell'iPhone finiva un
      pezzo di pulsante. `env(safe-area-inset-bottom)` lo tiene sopra.

   PERCHE' IL COLPEVOLE SEMBRAVA IL RIQUADRO DEL REGALO. Occupa circa duecento
   pixel su un piede che ne ha meno di quattrocento, quindi il difetto si vede
   con lui e non senza. Ma il riquadro e' l'occasione, non la causa: **con un
   carrello di sei articoli, o con il testo ingrandito dalle impostazioni del
   telefono, sarebbe successo lo stesso senza.** Il riquadro si stringe (v.
   regalo-benvenuto.css), ma la correzione che chiude il caso e' la 1.
   ========================================================================== */

@media (max-width: 767px) {

  /* --- 2. L'altezza vera del telefono ------------------------------------ */
  .moderncart-panel,
  #moderncart-slide-out,
  .moderncart-slide-out {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
  }

  /* Il piede puo' respirare un po' di piu' adesso che il pulsante non
     dipende piu' da quanto e' alto. */
  .moderncart-slide-out-footer {
    max-height: 58vh;
    padding-bottom: 0 !important;
  }

  /* --- 1. Il pulsante appiccicato in fondo ------------------------------- */
  .moderncart-slide-out-footer .wc-proceed-to-checkout,
  .moderncart-slide-out-footer > a.checkout-button,
  .moderncart-slide-out-footer > .checkout-button {
    position: -webkit-sticky !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 6 !important;
    margin: 0 !important;
    /* Il fondo pieno serve: senza, il contenuto che scorre si vedrebbe
       passare sotto il pulsante. */
    background: #0a0a0a !important;
    padding: 10px 0 calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    /* Un'ombra appena accennata dice che sotto c'e' altro da scorrere. */
    box-shadow: 0 -12px 16px -10px rgba(0, 0, 0, 0.95) !important;
  }

  /* Il pulsante dentro: alto abbastanza da prendersi col pollice. I 48px
     sono la misura minima di un bersaglio tattile, non un'opinione. */
  .moderncart-slide-out-footer a.checkout-button,
  .moderncart-slide-out-footer .wc-proceed-to-checkout a.checkout-button {
    display: block !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 15px 18px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
}