/* =====================================================================
   FUIX — MOBILE HEADER COMPACT + FIX SOTTOMENU OFF-CANVAS
   Modifica: custom.css — produzione (public_html)
   ===================================================================== */

/* --- FIX BUG: sottomenu off-canvas non si apriva ---
   Il CSS max-height:0 qui sotto blocca jQuery slideDown() nel menu
   off-canvas. Questo override ripristina il comportamento nativo JS
   per il contesto off-canvas, lasciando intatta la regola inline.    */
@media (max-width: 991px) {
  .off-canvas-nav-megamenu .leo-top-menu .dropdown-menu.level1,
  .off-canvas-nav-megamenu .dropdown-menu.level1 {
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
  }
}


/* --- MOBILE HEADER FINALE v2
   Struttura reale:
     ApRow > ApColumn:1 col-sp-10 (hamburger) — col-xs-12 = 100% stacking
     ApRow > ApColumn:2 col-sp-12 (search+cart+account) — col-xs-12 = 100% stacking
   Soluzione: Col2 in flow normale, Col1 (hamburger) position:absolute sopra di essa
   Logo: header-nav position:absolute centrato
   Badge: contenuto dentro il viewport                                               */

@media (max-width: 991px) {

  /* ── Struttura ── */
  #header .header-container { position: relative !important; background: #fff !important; }
  #header .header-banner    { display: none !important; }
  #header .bottomnav        { display: none !important; }

  /* ── Logo: absolute centrato sui 52px ── */
  #header .header-nav {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 52px !important; z-index: 1 !important;
    pointer-events: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; margin: 0 !important;
  }
  #header .topnav,
  #header .topnav .container, #header .topnav .inner,
  #header .topnav .ApRow,    #header .topnav .ApColumn {
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; margin: 0 !important; width: auto !important;
  }
  #header .topnav a   { pointer-events: auto !important; display: flex !important; }
  #header .topnav img.logo { max-height: 50px !important; width: auto !important; display: block !important; }

  /* ── header-top ── */
  #header .header-top { padding: 0 !important; background: #fff !important; }
  #header .header-top .container { padding: 0 !important; max-width: 100% !important; }
  #header .header-top .inner     { padding: 0 !important; }

  /* ── ApRow: flex row — Bootstrap col-xs-12 overridden con max-width ── */
  #header .header-top .ApRow {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important; /* col1 rimane 52px, hamburger allineato a logo/icone */
    position: relative !important;
    background: #fff !important;
    border-bottom: none !important;
    margin: 0 !important; padding: 0 !important;
    min-height: 52px !important;
  }

  /* ── Col 1 (hamburger): larghezza fissa, sovrascrive Bootstrap col-xs-12 ── */
  #header .header-top .ApRow .ApColumn:nth-child(1) {
    flex: 0 0 52px !important;
    max-width: 52px !important;      /* override Bootstrap max-width:100% */
    width: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    position: static !important;    /* NON absolute: lascia funzionare il menu off-canvas */
    z-index: 2 !important;
    overflow: visible !important;
  }
  #header .header-top .ApMegamenu {
    display: flex !important; align-items: center !important;
    width: 52px !important; min-height: 52px !important;
    padding: 0 !important; margin: 0 !important; overflow: visible !important;
  }
  #header .header-top .navbar-header { margin: 0 !important; display: flex !important; }
  #header .header-top .navbar-toggler {
    width: 52px !important; height: 52px !important;
    padding: 0 !important; margin: 0 !important;
    border: none !important; background: transparent !important;
    display: flex !important;
    justify-content: center !important; align-items: center !important;
    cursor: pointer !important;
    font-size: 24px !important; color: #111 !important;
    line-height: 1 !important;
  }
  /* L'hamburger usa ☰ (testo), non span.icon-bar */
  .off-canvas-active .navbar-header .navbar-toggler {
    background: transparent !important;
    color: #111 !important;
  }
  /* leo-top-menu: nascosta solo quando Bootstrap NON ha ancora aggiunto .in */
  #header .header-top .leo-top-menu.collapse:not(.in) {
    display: none !important;
  }

/* === FUIX MOBILE OFFCANVAS MENU FINAL FIX === */
/* Il menu riceve .collapse.in da Bootstrap ma veniva nascosto dalla regola
   sopra (troppo generica). Questo blocco sovrascrive con forza massima. */
@media (max-width: 991px) {
  #header .header-top .leo-top-menu.megamenu-off-canvas.collapse.in,
  #header .header-top .leo-top-menu.megamenu-off-canvas.in,
  #header .header-top .leo-megamenu.cavas_menu.active .leo-top-menu.megamenu-off-canvas,
  body #header .header-top .leo-top-menu.megamenu-off-canvas.collapse.in {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #header .header-top .leo-megamenu.cavas_menu.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99999 !important;
  }
}

  /* ── Col 2 (icone+search): cresce, position:relative per account/cart abs ── */
  #header .header-top .ApRow .ApColumn:nth-child(2) {
    flex: 1 1 auto !important;
    max-width: calc(100% - 52px) !important;  /* override Bootstrap max-width:100% */
    width: auto !important;
    min-height: 52px !important;
    padding: 52px 0 0 0 !important;           /* riserva 52px in cima per account/cart abs */
    position: relative !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    overflow: visible !important;
  }

  /* Account: abs top-right di col 2, allineato con hamburger (stessa height) */
  #header .header-top .ApRow .ApColumn:nth-child(2) #leo_block_top {
    position: absolute !important;
    top: 0 !important; right: 52px !important;
    width: 46px !important; height: 52px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    margin: 0 !important; padding: 0 !important; float: none !important;
    z-index: 3 !important; pointer-events: auto !important;
  }
  #header .header-top #leo_block_top .popup-title {
    width: 46px !important; height: 52px !important; padding: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: #111 !important; font-size: 20px !important;
  }

  /* Carrello: abs, stesso top:0 e height:52px → allineamento garantito */
  #header .header-top .ApRow .ApColumn:nth-child(2) #_desktop_cart {
    position: absolute !important;
    top: 0 !important; right: 4px !important;
    width: 48px !important; height: 52px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    margin: 0 !important; padding: 0 !important; float: none !important; z-index: 3 !important;
    pointer-events: auto !important;
  }
  #header .header-top #_desktop_cart .blockcart,
  #header .header-top #_desktop_cart .cart-preview {
    width: 48px !important; height: 52px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; position: static !important;
  }
  #header .header-top #_desktop_cart .blockcart .header {
    width: 48px !important; height: 52px !important;
    padding: 0 !important; position: relative !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  #header .header-top #_desktop_cart .blockcart .header a,
  #header .header-top #_desktop_cart .blockcart .header i {
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: #111 !important; font-size: 20px !important; text-decoration: none !important;
  }
  /* Badge: in alto a destra del .header (position:relative) */
  #header .header-top #_desktop_cart .cart-products-count {
    position: absolute !important;
    top: 5px !important; right: 3px !important;
    background: #111 !important; color: #fff !important;
    font-size: 9px !important; font-weight: 700 !important;
    min-width: 15px !important; height: 15px !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 2px !important; line-height: 1 !important;
    margin: 0 !important; vertical-align: unset !important;
    pointer-events: none !important; z-index: 3 !important;
  }

  /* Search: pointer-events riabilitati per l'input */
  #header .header-top .ApRow .ApColumn:nth-child(2) #leo_search_block_top {
    pointer-events: auto !important;
    width: calc(100% + 52px) !important;   /* +52px = larghezza col1, estende da x=0 */
    margin-left: -52px !important;          /* shift a sinistra per coprire area col1 */
    display: flex !important; align-items: center !important;
    height: 44px !important; padding: 6px 12px !important;
    background: transparent !important; border-top: none !important; border: none !important;
    box-sizing: border-box !important;
  }
  #header .header-top #leo_search_block_top .title_block,
  #header .header-top #leo_search_block_top .list-cate-wrapper,
  #header .header-top #leo_search_block_top .ac_results,
  #header .header-top #leo_search_block_top .leoproductsearch-loading { display: none !important; }
  #header .header-top #leo_search_block_top form#leosearchtopbox {
    width: 100% !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important;
  }
  #header .header-top #leo_search_block_top .block_content {
    width: 100% !important; display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
  }
  #header .header-top #leo_search_block_top .leoproductsearch-result {
    flex: 1 1 auto !important; display: flex !important; align-items: center !important; min-width: 0 !important;
  }
  #header .header-top #leo_search_block_top input.search_query {
    flex: 1 1 auto !important; width: 100% !important; height: 32px !important;
    border: 1px solid #ddd !important; border-right: none !important; border-radius: 3px 0 0 3px !important;
    padding: 0 10px !important; font-size: 13px !important; background: #fff !important; color: #333 !important;
    outline: none !important; box-shadow: none !important; box-sizing: border-box !important;
  }
  #header .header-top #leo_search_block_top input.search_query::placeholder { color: #bbb !important; }
  #header .header-top #leo_search_block_top #leo_search_top_button {
    flex: 0 0 auto !important; height: 32px !important; width: 42px !important; padding: 0 !important;
    background: #202b31 !important; border: none !important; border-radius: 0 3px 3px 0 !important; color: #fff !important;
    display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important;
  }
  #header .header-top #leo_search_block_top #leo_search_top_button i { font-size: 17px !important; line-height: 1 !important; }

  /* Social: solo footer */
  #header .header-top .ApRow .ApColumn:nth-child(2) .block-social { display: none !important; }

}

/* --- MOBILE MEGAMENU COMPLETO + FULL WIDTH ADATTIVO + BORDI ARROTONDATI + NESSUNA RIGA GIALLO --- */
@media (max-width: 991px) {

  /* Menu principale verticale:
     overflow:visible per non tagliare i dropdown figli */
  .leo-top-menu .navbar-nav.megamenu.horizontal {
    display: flex !important;
    flex-direction: column !important;
    text-align: left;
    gap: 0;
    background-color: #222222 !important;
    width: 100% !important;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    overflow: visible !important;   /* FIX: era hidden, tagliava i dropdown */
  }

  /* Voci principali allineate */
  .leo-top-menu .navbar-nav.megamenu.horizontal > .nav-item {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* Link principali */
  .leo-top-menu .navbar-nav.megamenu.horizontal > .nav-item > .nav-link {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px !important;
    font-size: 16px;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    width: 100%;
    box-sizing: border-box;
    background: none !important;
  }

  /* Rimuove pseudo-elementi ::before e ::after */
  .leo-top-menu .navbar-nav.megamenu.horizontal > .nav-item > .nav-link::before,
  .leo-top-menu .navbar-nav.megamenu.horizontal > .nav-item > .nav-link::after {
    content: none !important;
    border: none !important;
    background: none !important;
  }

  /* Caret (+) per aprire sottocategorie */
  .leo-top-menu .navbar-nav.megamenu.horizontal > .nav-item.parent > .nav-link .caret {
    display: inline-block;
    transition: transform 0.4s ease;
    border-top-color: #ffffff !important;
    cursor: pointer;
  }

  /* Dropdown chiuso (stato di default) */
  .leo-top-menu .dropdown-menu.level1 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    padding: 0 15px !important;
    background-color: #222222 !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 0 0 10px 10px;
    transition: max-height 0.4s ease, padding 0.4s ease;
  }

  /* Dropdown aperto — supporta sia .open che .open-sub (entrambe usate dal tema) */
  .leo-top-menu .nav-item.parent.open > .dropdown-menu.level1,
  .leo-top-menu .nav-item.parent.open-sub > .dropdown-menu.level1,
  .leo-top-menu .nav-item.open > .dropdown-menu.level1,
  .leo-top-menu .nav-item.open-sub > .dropdown-menu.level1 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 10px 15px !important;
    background-color: #555555 !important;
    position: relative !important;
  }

  /* Link sottocategorie */
  .leo-top-menu .dropdown-menu.level1 .nav-item > .nav-link {
    padding: 8px 0;
    font-size: 15px;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* Caret ruotato quando aperto — supporta sia .open che .open-sub */
  .leo-top-menu .nav-item.parent.open > .nav-link .caret,
  .leo-top-menu .nav-item.parent.open-sub > .nav-link .caret,
  .leo-top-menu .nav-item.open > .nav-link .caret,
  .leo-top-menu .nav-item.open-sub > .nav-link .caret {
    transform: rotate(90deg);
  }
}
/* Fuix.com - Spazia meglio ricerca e carrello nell'header (desktop + mobile) */

/* Blocco header destro: search, cart, user ecc. */
#header .header_right, 
#header .top-nav, 
#search_block_top, 
.shopping_cart, 
.cart_block,
#header .right-nav,
#header .user-info,
#header .blockcart {
    margin-left: 15px !important;   /* aumenta spazio a sinistra tra elementi */
    margin-right: 10px !important;  /* spazio a destra se serve */
}

/* Specifico: separa SEARCH dal CARRELLO */
#search_block_top,
.search-widget,
#header .search-widget,
.blocksearch,
.search_block_top {
    margin-right: 25px !important;  /* <-- chiave: spazio tra search e cart – prova 30px o 35px se vuoi di più */
    padding-right: 15px !important;
}

/* Icona carrello / blocco cart */
.shopping_cart,
.cart_block,
.blockcart_preview,
#header .cart-block {
    margin-left: 20px !important;   /* sposta carrello più a destra */
    padding-left: 10px !important;
}

/* Su mobile: evita che si sovrappongano o diventino troppo stretti */
@media (max-width: 991px) {  /* tablet/mobile landscape */
    #search_block_top,
    .search-widget {
        margin-right: 18px !important;  /* un po' meno su mobile per non spingere troppo */
    }
    
    .shopping_cart,
    .cart_block {
        margin-left: 15px !important;
    }
    
    /* Se la ricerca diventa icona solo (lente), rendila più cliccabile */
    .search-widget .search-icon,
    #search-icon {
        font-size: 22px !important;     /* lente più grande */
        padding: 10px !important;
    }
}

/* Extra: se hai account/wishlist prima del cart, spaziali tutti */
#header .user-info,
#wishlist_block,
.compare-form,
#header .links a {
    margin: 0 12px !important;  /* spazio uniforme tra icone utente */
}
/* Layout prezzi: più ordinato */
/* ===================================================================
   FUIX — PRODUCT CARD PRICES (listing, ricerca, homepage)
   Layout:
     1. Prezzo finale  → grande, bold, nero  (hero)
     2. Prezzo originale → piccolo, grigio, sbarrato
     3. Badge sconto   → chip arancione compatto (solo se sconto)

   FORMATTAZIONE ORIGINALE (backup per eventuale ripristino):
     .product-price-and-shipping            → flex-col, align:center, gap:2px
     .regular-price                         → #8a8a8a, line-through, 14px, w:400
     .price                                 → #111, 26px, w:900
     .discount-amount / .discount-percentage → #d71920 (rosso), 13px, w:700
   =================================================================== */

.product-price-and-shipping {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding: 2px 0 !important;
}

/* FUIX — Homepage (carousel "New Arrivals" ecc.): prezzo centrato
   2026-06-22 — su body#index il default è flex-start (sinistra); qui
   lo riportiamo a centrato come nelle card listing/categoria.
   Valido a tutte le larghezze (non solo mobile, dove era già gestito). */
body#index .product-miniature .product-price-and-shipping,
body#index .ajax_block_product .product-price-and-shipping {
  align-items: center !important;
  text-align: center !important;
}

/* 1. PREZZO FINALE — hero */
.product-price-and-shipping .price {
  order: 1 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #111 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.2px !important;
}
/* Annulla il rosso del tema quando c'è sconto */
.thumbnail-container .product-price-and-shipping .regular-price + span.price {
  color: #111 !important;
}

/* 2. PREZZO ORIGINALE — sbarrato discreto */
.product-price-and-shipping .regular-price {
  order: 2 !important;
  color: #aaa !important;
  text-decoration: line-through !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  opacity: 1 !important;
}

/* 3. BADGE SCONTO — chip arancione: sostituisce il testo rosso */
.product-price-and-shipping .discount-amount,
.product-price-and-shipping .discount-percentage {
  order: 3 !important;
  display: inline-block !important;
  background: #f28c28 !important;   /* arancione brand FUIX */
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  padding: 2px 6px 2px 5px !important;
  border-radius: 2px !important;
  border: none !important;
  margin: 4px 0 0 0 !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}

/* Tasse incluse più piccolo */
.product-prices .tax-shipping-delivery-label,
.product-prices .tax-label,
.product-prices .tax-info {
  font-size: 9px !important;
  color: #888 !important;
  font-weight: 400 !important;
  display: block;
  margin-top: 4px;
}

/* Bottone add to cart più deciso */
.btn-primary,
button.add-to-cart {
  font-weight: 700 !important;
  letter-spacing: 0.5px;
}

/* Riduce spazio tra varianti e bottone */
.product-variants,
.product-add-to-cart,
.product-actions {
  margin-bottom: 15px !important;
}

/* Tab descrizione attivo più visibile */
.nav-tabs .nav-link.active {
  border-bottom: 2px solid #f28c28 !important;
  font-weight: 600;
}

/* --- Tabs prodotto: colonna sinistra + box contenuto a destra --- */

/* Contenitore generale tabs */
.product-tabs,
.tabs,
.product-information {
  margin-top: 25px;
}

/* Menu tabs (sinistra) */
.nav-tabs {
  border: 1px solid #eee !important;
  border-right: 0 !important;
  background: #fafafa;
}

/* Singole voci tab */
.nav-tabs .nav-link {
  border: 0 !important;
  border-left: 3px solid transparent !important;
  padding: 14px 18px !important;
  margin: 0 !important;
  color: #333 !important;
  font-weight: 500;
  background: transparent !important;
}

/* Hover */
.nav-tabs .nav-link:hover {
  background: #fff !important;
}

/* Tab attivo: evidenza forte */
.nav-tabs .nav-link.active {
  background: #fff !important;
  border-left-color: #f28c28 !important;   /* arancione brand */
  font-weight: 700 !important;
}

/* BOX contenuto a destra */
.tab-content,
.product-description,
#product-details,
#product-comments,
.product-tabs-content {
  border: 1px solid #eee !important;
  background: #fff !important;
  padding: 20px 22px !important;
  min-height: 140px;
}

/* (opzionale) separazione visiva tra colonna tabs e contenuto */
.nav-tabs {
  box-shadow: none;
}


.tab-content .card,
.tab-content .box,
.tab-content .product-description,
.tab-content .data-sheet {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Rimuove box interno in dettagli prodotto */
#product-details,
.product-features,
.product-reference,
.product-manufacturer,
.product-availability,
.product-data {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}


.product-features dt {
  font-weight: 600;
  color: #222;
}

.product-features dd {
  color: #666;
}

.product-features dl {
  border-bottom: 1px solid #f0f0f0;
  padding: 10px 0;
}

.fuix-badge-saldi{
  position:absolute;
  top:10px;
  left:10px;
  z-index:30;
  padding:5px 10px;
  background:#111;
  color:#fff;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  border-radius:2px;
  border-left:3px solid #d71920;
}

/* Quando è selezionata una taglia non disponibile (testo della select) */
#product .product-variants select.is-unavailable-selected{
  border-color: rgba(216,0,0,0.35) !important;
}


/* Tentativo sbarrato (dipende dal browser) */
#group_1 option[data-fuix-unavail="1"] {
  text-decoration: line-through;
  opacity: .55;
}


#group_2 li.fuix-unavailable,
#group_2 li.fuix-unavailable * {
  cursor: pointer;
}

/* Nasconde SOLO finché la matrix non è pronta */
body.fuix-matrix-loading #group_2,
body.fuix-matrix-loading #group_1 {
  visibility: hidden;
}

/* Fallback: se per qualunque motivo JS non parte, dopo un po' NON restare nascosto */
body.fuix-matrix-loading.fuix-matrix-timeout #group_2,
body.fuix-matrix-loading.fuix-matrix-timeout #group_1 {
  visibility: visible;
}


/* Quando pronto */
body.fuix-matrix-ready #group_1,
body.fuix-matrix-ready #group_2 {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .12s ease;
}

/* Copertina prodotto: sempre responsive già al primo paint */
.product-cover img,
.product-detail .product-cover img,
#product .product-cover img {
  width: 100%;
  height: auto;
  display: block;
}

/* Evita che il wrapper esploda prima che slick calcoli le altezze */
.product-cover,
.product-detail .product-cover {
  max-width: 100%;
  overflow: hidden;
}


/* AGGIUNTA DA CONTROLLARE!!!!!!!!!!!! */
/* PRODUCT PAGE - Size/Variant select look */
#product .product-variants select.form-control,
#product .product-variants select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  height: 50px;              
  padding: 10px 44px 10px 14px; /* spazio per la freccia */
  border-radius: 0px;
  border: 1px solid #d8d8d8;
  background: #fff;

  font-size: 14px;
  line-height: 1.2;
  color: #111;
  box-shadow: none;
  cursor: pointer;
}

/* freccia custom (SVG inline) */
#product .product-variants select.form-control,
#product .product-variants select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
}

/* focus coerente (non “blu windows”) */
#product .product-variants select:focus {
  outline: none;
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(17,17,17,.12);
}

/* hover */
#product .product-variants select:hover {
  border-color: #bdbdbd;
}

/* disabled (se succede) */
#product .product-variants select:disabled {
  opacity: .6;
  cursor: not-allowed;
  background-color: #f6f6f6;
}


@media (max-width: 767px) {
  #product .list-images-mobile,
  #product .list-images-mobile .slick-list,
  #product .list-images-mobile .slick-track,
  #product .list-images-mobile .slick-slide {
    height: auto !important;
  }

  #product .list-images-mobile .slick-slide {
    overflow: hidden !important;
  }

  #product .list-images-mobile .slick-slide img,
  #product .list-images-mobile img.js-thumb,
  #product .list-images-mobile img.thumb {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: unset !important;
  }
}


.product-miniature .thumbnail-container{
  position: relative;
}

.product-miniature .product-image{
  overflow: hidden;
}

.product-miniature .product-image,
.product_list .product-miniature .product-image,
.products .product-miniature .product-image{
  position: relative;
  overflow: hidden;
}

.fuix-product-prices{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  margin-bottom:8px;
}

.fuix-product-price-topline{
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1;
}

.fuix-product-price-topline .regular-price{
  color:#8a8a8a !important;
  text-decoration:line-through !important;
  font-size:18px;
  font-weight:400 !important;
}

.fuix-product-price-topline .discount-amount,
.fuix-product-price-topline .discount-percentage{
  color:#d71920 !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  font-size:14px;
  font-weight:700 !important;
}

.fuix-product-price-main .current-price{
  color:#111 !important;
  font-size:42px;
  font-weight:900 !important;
  line-height:1;
}

/* ===== FUIX - PRODUCT PAGE PRICES elegante ===== */
.product-detail .product-prices{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:4px !important;
}

.product-detail .product-prices .product-discount{
  margin:0 !important;
  line-height:1 !important;
}

.product-detail .product-prices .product-discount .regular-price{
  color:#8a8a8a !important;
  text-decoration:line-through !important;
  font-size:18px !important;
  font-weight:400 !important;
  opacity:1 !important;
}

.product-detail .product-prices .product-price{
  margin:0 !important;
}

.product-detail .product-prices .product-price .current-price{
  display:flex !important;
  align-items:baseline !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  line-height:1 !important;
}

.product-detail .product-prices .current-price-value{
  color:#111 !important;
  font-size:42px !important;
  font-weight:900 !important;
  line-height:1 !important;
}

.product-detail .product-prices .discount.discount-amount,
.product-detail .product-prices .discount.discount-percentage{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#d71920 !important;
  padding:0 !important;
  margin:0 !important;
  font-size:14px !important;
  font-weight:700 !important;
  text-transform:none !important;
}

.fuix-trust-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 6px;
}

@media (max-width: 768px) {
  .fuix-trust-box {
    column-gap: 10px;
  }
}

.fuix-trust-item {
  font-size: 13px;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
}


.fuix-trust-item::before {
  content: "";
  margin-right: 6px;
  font-size: 12px;
  color: #222;
  line-height: 1.35;
  flex: 0 0 auto;
}

.fuix-reviews-empty {
  font-size: 13px;
  color: #888;
  margin-top: 5px;
}
/* =====================================================================
   FUIX — FOOTER: LOGO CENTRATO + SOCIAL ICONS
   ===================================================================== */

/* --- Logo centrato nel footer (tutte le larghezze) --- */
.footer-center img.logo,
.footer-container img.logo {
  display: block !important;
  margin: 0 auto !important;
  max-height: 60px !important;
  width: auto !important;
}
.footer-center .ApColumn a:first-of-type,
.footer-container .ApColumn a:first-of-type {
  display: block;
  text-align: center;
}

/* --- Social icons nel footer: colorati, grandi, centrati --- */
.footer-center .block-social,
.footer-container .block-social {
  text-align: center !important;
  padding: 18px 0 10px !important;
}
.footer-center .block-social ul,
.footer-container .block-social ul {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer-center .block-social li,
.footer-container .block-social li {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: #333 !important;
  color: #fff !important;
  transition: transform 0.2s ease, background 0.2s ease;
}
.footer-center .block-social li:hover,
.footer-container .block-social li:hover {
  transform: scale(1.1);
}
.footer-center .block-social li::before,
.footer-container .block-social li::before {
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
/* Colori brand */
.footer-center .block-social li.facebook,
.footer-container .block-social li.facebook {
  background: #1877F2 !important;
}
.footer-center .block-social li.facebook:hover,
.footer-container .block-social li.facebook:hover {
  background: #0d65d9 !important;
}
.footer-center .block-social li.instagram,
.footer-container .block-social li.instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}
.footer-center .block-social li.instagram:hover,
.footer-container .block-social li.instagram:hover {
  opacity: 0.85;
}

/* =====================================================================
   FUIX — PRODUCT PAGE MOBILE (max-width: 767px)
   Selettori verificati:
     Titolo:   .product-detail-name  (h1, theme: 24px bold uppercase)
     Prezzo:   .product-prices .current-price-value (custom: 42px → ridotto)
     Sconto:   .product-price .discount.discount-amount/percentage
     Fly cart: .leo-fly-cart.solo.type-fixed (leofeature, position:fixed bottom-left)
   Desktop: non toccato (media query mobile-only)
   ===================================================================== */

@media (max-width: 767px) {

  /* ── 1. TITOLO PRODOTTO ── più compatto, meno pesante */
  .page-product .product-detail-name {
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    margin: 10px 0 8px !important;
  }

  /* ── 2. BRAND/MANUFACTURER ── più prominente */
  .page-product .product-manufacturer {
    margin-bottom: 4px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #333 !important;
  }

  /* ── 3. SOCIAL SHARING + RECENSIONE ── non invadono prima del prezzo */
  .page-product .social-sharing {
    margin: 6px 0 4px !important;
  }
  .page-product .social-sharing span,
  .page-product .social-sharing ul { font-size: 12px !important; }
  .page-product .social-sharing li { width: 26px !important; height: 26px !important; line-height: 26px !important; }
  .page-product .product-reviews-block,
  .page-product #product-comments-list-header { margin: 4px 0 !important; font-size: 12px !important; }

  /* ── 4. PREZZO PRODOTTO ── ridotto da 42px a 32px */
  .page-product .product-detail .product-prices .current-price-value,
  .page-product .product-prices .current-price-value {
    font-size: 40px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }

  /* ── 5. PREZZO SBARRATO (old price) ── */
  .page-product .product-prices .product-discount .regular-price {
    font-size: 14px !important;
    color: #aaa !important;
  }

  /* ── 6. BADGE SCONTO ── chip arancione (come listing), elimina rosso "Salvare..." */
  .page-product .product-price .discount.discount-amount,
  .page-product .product-price .discount.discount-percentage,
  .page-product .current-price .discount {
    display: inline-block !important;
    background: #f28c28 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    padding: 3px 7px !important;
    border-radius: 2px !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 0 0 8px !important;
    vertical-align: middle !important;
    color: #fff !important;   /* annulla #d71920 dal custom.css */
  }

  /* ── 7. SPAZIATURA BLOCCO PREZZI ── */
  .page-product .product-prices {
    margin: 6px 0 10px !important;
  }

  /* ── 8. FLY CART ── nascosto su product page mobile (fase 1 CSS)
     Il pulsante "Aggiungi al carrello" è già visibile nella parte alta;
     il fly cart causa sovrapposizioni. */
  body.page-product .leo-fly-cart {
    display: none !important;
  }

}

/* tablet 768–991: solo fix titolo e prezzo, fly cart nascosto */
@media (min-width: 768px) and (max-width: 991px) {
  .page-product .product-detail-name {
    font-size: 22px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }
  .page-product .product-prices .current-price-value {
    font-size: 34px !important;
  }
  body.page-product .leo-fly-cart {
    display: none !important;
  }
}

/* =====================================================================
   FUIX — PRODUCT PAGE TABS: VERTICALI SU MOBILE
   Selettori reali verificati da tab.tpl:
     .product-tabs.tabs > ul.nav.nav-tabs > li.nav-item > a.nav-link
   Il tema usa display:inline-block sui .nav-item → wrapping su mobile.
   Fix: flex-column su <768px. Desktop invariato.
   ===================================================================== */
@media (max-width: 767px) {

  /* Contenitore tab: colonna verticale */
  .product-tabs.tabs .nav-tabs {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    border: 1px solid #eee !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    background: #fff !important;
  }

  /* Ogni tab: blocco full-width */
  .product-tabs.tabs .nav-tabs .nav-item {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid #eee !important;
  }

  /* Link tab: padding generoso, testo a sinistra */
  .product-tabs.tabs .nav-tabs .nav-link {
    display: block !important;
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-align: left !important;
    margin: 0 !important;
    color: #555 !important;
    background: #fff !important;
    border: none !important;
    border-left: 4px solid transparent !important;
    letter-spacing: 0.5px !important;
  }

  /* Rimuovi il bordo animato inferiore del tema (sostituito da border-left) */
  .product-tabs.tabs .nav-tabs .nav-link::before {
    display: none !important;
  }

  /* Tab attivo: evidenziato con bordo arancio a sinistra */
  .product-tabs.tabs .nav-tabs .nav-link.active,
  .product-tabs.tabs .nav-tabs .nav-link.active:focus,
  .product-tabs.tabs .nav-tabs .nav-link.active:hover {
    color: #eb7025 !important;
    background: #fafafa !important;
    border-left: 4px solid #eb7025 !important;
    font-weight: 700 !important;
  }

  /* Hover */
  .product-tabs.tabs .nav-tabs .nav-link:hover {
    background: #f9f9f9 !important;
    color: #eb7025 !important;
    border-left-color: rgba(235,112,37,0.4) !important;
  }

  /* Contenuto tab: bordo continuo sotto i tab */
  .product-tabs.tabs .tab-content {
    border: 1px solid #eee !important;
    border-top: none !important;
    padding: 16px !important;
  }
}

/* =====================================================================
   FUIX — PRODUCT PAGE MOBILE: VARIANTI / ACQUISTO
   Selettori reali verificati da console:
     .product-variants.js-product-variants
     .clearfix.product-variants-item
     .control-label
     select.form-control.form-control-select
     .product-quantity.clearfix
     .bootstrap-touchspin
     .p-cartwapper
     .btn.btn-primary.add-to-cart
   Solo mobile (max-width: 767px). Desktop invariato.
   JS/template non toccati.
   ===================================================================== */
@media (max-width: 767px) {

  /* Contenitore varianti */
  .product-variants {
    margin-top: 22px !important;
    margin-bottom: 18px !important;
  }

  /* Ogni riga variante: block full-width, label sopra */
  .product-variants .product-variants-item {
    display: block !important;
    width: 100% !important;
    margin: 0 0 22px 0 !important;
    padding: 0 !important;
  }

  /* Label (COLORE / TAGLIA / QUANTITÀ): sopra al campo */
  .product-variants .product-variants-item .control-label,
  .product-quantity .control-label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: #666 !important;
  }

  /* Pallini colore: riga orizzontale compatta */
  .product-variants .product-variants-item ul {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Select taglia: full-width, testo centrato come il dropdown quantità */
  .product-variants .product-variants-item select.form-control-select {
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    padding: 0 16px !important;
    font-size: 18px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Blocco quantità: block full-width */
  .product-quantity {
    display: block !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  /* Spinner quantità: larghezza fissa compatta (input numerico legacy) */
  .product-quantity .qty,
  .product-quantity .bootstrap-touchspin {
    width: 150px !important;
    max-width: 150px !important;
  }

  /* Input quantità (legacy input numerico) */
  .product-quantity input.input-group.form-control,
  .product-quantity input#quantity_wanted {
    height: 52px !important;
    font-size: 18px !important;
    text-align: center !important;
  }

  /* Dropdown quantità: specchio esatto delle regole ≤991px del SIZE select */
  .product-quantity select.fuix-qty-select,
  .qty select#quantity_wanted.fuix-qty-select {
    height: 52px !important;
    padding: 0 16px !important;
    font-size: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  /* Contenitore .qty: full-width su tablet/mobile */
  .product-add-to-cart .product-quantity .qty:has(select.fuix-qty-select),
  .product-quantity .qty:has(select.fuix-qty-select) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  /* Wrapper carrello + ADD TO CART: full-width */
  .product-quantity .p-cartwapper,
  .product-quantity .add {
    width: 100% !important;
    margin-top: 22px !important;
  }

  /* Pulsante ADD TO CART: full-width, alto e visibile */
  .product-quantity .add-to-cart,
  .product-quantity button.add-to-cart,
  .p-cartwapper .add button.add-to-cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 360px !important;
    height: 58px !important;
    padding: 0 24px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
  }
}

/* =====================================================================
   FUIX — PRODUCT PAGE MOBILE: VARIANTI/ACQUISTO — RIFINITURA v2
   Corregge: spazio eccessivo, pallini flottanti, quantity centrata.
   Sovrascrive per cascata il blocco precedente (stesso specificità,
   posizione successiva nel file → vince con !important uguale).
   ===================================================================== */
@media (max-width: 767px) {

  /* Meno spazio sopra COLOR */
  .product-variants {
    margin-top: 14px !important;
    margin-bottom: 12px !important;
  }

  /* Meno spazio tra ogni variante */
  .product-variants .product-variants-item {
    margin-bottom: 18px !important;
  }

  /* Label: sinistra, più compatta */
  .product-variants .product-variants-item .control-label,
  .product-quantity .control-label {
    margin-bottom: 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: #555 !important;
    text-align: left !important;
  }

  /* Pallini colore: allineati a sinistra, gap ridotto */
  .product-variants .product-variants-item ul {
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  /* Ombra pallini: rimossa di default */
  .product-variants .product-variants-item .color,
  .product-variants .product-variants-item .input-color + span,
  .product-variants .product-variants-item label {
    box-shadow: none !important;
  }

  /* Ombra leggera solo sul pallino selezionato */
  .product-variants .product-variants-item input:checked + span,
  .product-variants .product-variants-item input:checked + .color,
  .product-variants .product-variants-item input:checked ~ span {
    box-shadow: 0 4px 14px rgba(0,0,0,.18) !important;
  }

  /* Select taglia: altezza ridotta, testo centrato */
  .product-variants .product-variants-item select.form-control-select {
    height: 50px !important;
    font-size: 17px !important;
    text-align: center !important;
  }

  /* Quantità: meno spazio sopra */
  .product-quantity {
    margin-top: 6px !important;
  }

  /* Spinner quantità: allineato a sinistra */
  .product-quantity .qty,
  .product-quantity .bootstrap-touchspin {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Input quantità: allineato a sinistra */
  .product-quantity input.input-group.form-control,
  .product-quantity input#quantity_wanted {
    text-align: left !important;
  }

  /* Dropdown quantità: specchio esatto delle regole ≤767px del SIZE select */
  .product-quantity select.fuix-qty-select,
  .qty select#quantity_wanted.fuix-qty-select {
    height: 50px !important;
    font-size: 17px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  .product-add-to-cart .product-quantity .qty:has(select.fuix-qty-select),
  .product-quantity .qty:has(select.fuix-qty-select) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Wrapper ADD TO CART: meno spazio sopra */
  .product-quantity .p-cartwapper,
  .product-quantity .add {
    margin-top: 18px !important;
  }

  /* ADD TO CART: full-width */
  .product-quantity .add-to-cart,
  .product-quantity button.add-to-cart,
  .p-cartwapper .add button.add-to-cart {
    max-width: 100% !important;
    width: 100% !important;
    height: 56px !important;
  }
}

/* =====================================================================
   FUIX — PRODUCT PAGE MOBILE: SWATCH COLORE — BORDO VISIBILITÀ
   Selettori verificati: .input-color (hidden) + span.color (visibile)
   Problema: cerchi bianchi/chiari invisibili su sfondo bianco.
   Fix: bordo grigio leggero su tutti i cerchi; bordo bianco + outline
        su quello selezionato per distinguerlo.
   ===================================================================== */
@media (max-width: 767px) {

  /* Bordo grigio leggero su tutti i cerchi (anche bianchi visibili) */
  .product-variants .product-variants-item .color,
  .product-variants .product-variants-item .input-color + span,
  .product-variants .product-variants-item label .color {
    border: 1px solid #d8d8d8 !important;
    box-sizing: border-box !important;
  }

  /* Cerchio selezionato: bordo bianco interno + outline grigio + ombra */
  .product-variants .product-variants-item input.input-color:checked + span,
  .product-variants .product-variants-item input.input-color:checked + .color,
  .product-variants .product-variants-item .input-color:checked + span {
    border: 2px solid #ffffff !important;
    outline: 2px solid #d0d0d0 !important;
    outline-offset: 0 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.18) !important;
  }
}

/* =====================================================================
   FUIX — FLY CART SCROLL-BASED su PAGINA PRODOTTO MOBILE
   Selettore: .leo-fly-cart (leofeature, position:fixed bottom:20px left:20px)

   Strategia CSS-first (no flash):
   - override display:none dal blocco "PRODUCT PAGE MOBILE"
   - nascosto di default via :not(.fuix-floating-cart-visible)
   - visibile solo quando JS aggiunge .fuix-floating-cart-visible (scroll >600px)
   - transizione smooth opacity+transform
   - desktop (>767px): JS rimuove la classe, CSS non si applica (media query)
   ===================================================================== */

/* Revoca display:none su mobile product page (stessa specificità, vince per posizione) */
@media (max-width: 767px) {
  body.page-product .leo-fly-cart {
    display: block !important;
  }
  /* Nascosto di default: prima che JS aggiunga la classe visible */
  body.page-product .leo-fly-cart:not(.fuix-floating-cart-visible) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(20px) !important;
    transition: none !important;
  }
  /* Visibile dopo scroll (JS aggiunge questa classe) */
  body.page-product .leo-fly-cart.fuix-floating-cart-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease !important;
  }
}

/* Tablet 768–991: stessa logica */
@media (min-width: 768px) and (max-width: 991px) {
  body.page-product .leo-fly-cart {
    display: block !important;
  }
  body.page-product .leo-fly-cart:not(.fuix-floating-cart-visible) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(20px) !important;
    transition: none !important;
  }
  body.page-product .leo-fly-cart.fuix-floating-cart-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease !important;
  }
}

/* =====================================================================
   FUIX — LISTING MOBILE: GRIGLIA 2 COLONNE + DOTS + CONFRONTO
   2026-06-05 — aggiunto in custom_v2.css (bypassa Cloudflare cache su custom.css)
   =================================================================== */

/* ---------------------------------------------------------------
   1. GRIGLIA 2 COLONNE — search/category mobile
   Contenitore: .product_list.grid.plist-center > .row
   Template attivo: plist2507348733.tpl (plist-center, active=1 in shop DB)
--------------------------------------------------------------- */
@media (max-width: 767px) {

  body#search  .product_list.grid > .row,
  body#category .product_list.grid > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 10px !important;
    align-items: stretch !important;
  }

  body#search  .product_list.grid > .row > .ajax_block_product,
  body#category .product_list.grid > .row > .ajax_block_product {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    clear: none !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body#search  .ajax_block_product.first-in-line,
  body#search  .ajax_block_product.last-in-line,
  body#search  .ajax_block_product.last-line,
  body#search  .ajax_block_product.first-item-of-mobile-line,
  body#search  .ajax_block_product.last-item-of-mobile-line,
  body#category .ajax_block_product.first-in-line,
  body#category .ajax_block_product.last-in-line,
  body#category .ajax_block_product.last-line,
  body#category .ajax_block_product.first-item-of-mobile-line,
  body#category .ajax_block_product.last-item-of-mobile-line {
    clear: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body#search  .ajax_block_product > .js-product,
  body#category .ajax_block_product > .js-product {
    width: 100% !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body#search  article.product-miniature,
  body#category article.product-miniature,
  body#search  .product-miniature .thumbnail-container,
  body#category .product-miniature .thumbnail-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  /* Immagine: aspect-ratio 1:1 — plist-center usa .product-image (no thumbnail-top) */
  body#search  .product_list.plist-center .product-miniature .product-image,
  body#category .product_list.plist-center .product-miniature .product-image,
  body#search  .product-miniature .product-image.thumbnail-top,
  body#category .product-miniature .product-image.thumbnail-top {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  body#search  .product_list.plist-center .product-miniature .product-image img,
  body#category .product_list.plist-center .product-miniature .product-image img,
  body#search  .product-miniature .product-image.thumbnail-top img,
  body#category .product-miniature .product-image.thumbnail-top img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* product-list-images-mobile: spazio fisso 28px per i dots (anche senza) */
  body#search  .ajax_block_product .product-list-images-mobile,
  body#category .ajax_block_product .product-list-images-mobile {
    padding-bottom: 28px !important;
    box-sizing: content-box !important;
  }

  body#search  .product-miniature .product-meta,
  body#category .product-miniature .product-meta,
  body#search  .product-miniature .product-description,
  body#category .product-miniature .product-description {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }

  body#search  .product-miniature .product-title,
  body#category .product-miniature .product-title {
    min-height: 40px !important;
    margin-bottom: 6px !important;
  }

  body#search  .product-miniature .product-price-and-shipping,
  body#category .product-miniature .product-price-and-shipping {
    min-height: 66px !important;
  }

  body#search  .product-miniature .product-description-short,
  body#category .product-miniature .product-description-short {
    display: none !important;
  }

}

/* ---------------------------------------------------------------
   2. DOTS SLICK: 1 sola riga, max 5 pallini, altezza fissa 27px
   Problema: ogni li = 30px, card = ~169px → 6 li non ci stanno → 2 righe
   Fix: flex nowrap + li 8px + nth-child(n+6) hidden
   Selettore con .slick-slider (classe iniettata da Slick JS = alta specificità)
--------------------------------------------------------------- */
@media (max-width: 767px) {

  body#search  .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-slider .slick-dots,
  body#category .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-slider .slick-dots,
  body#search  .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-initialized.slick-dotted .slick-dots,
  body#category .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-initialized.slick-dotted .slick-dots {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    list-style: none !important;
    bottom: 4px !important;
    position: absolute !important;
  }

  body#search  .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-slider .slick-dots li,
  body#category .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-slider .slick-dots li,
  body#search  .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-initialized.slick-dotted .slick-dots li,
  body#category .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-initialized.slick-dotted .slick-dots li {
    display: block !important;
    flex: 0 0 8px !important;
    width: 8px !important;
    min-width: 8px !important;
    max-width: 8px !important;
    height: 8px !important;
    min-height: 8px !important;
    max-height: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    line-height: 1 !important;
  }

  body#search  .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-slider .slick-dots li:nth-child(n+6),
  body#category .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-slider .slick-dots li:nth-child(n+6),
  body#search  .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-initialized.slick-dotted .slick-dots li:nth-child(n+6),
  body#category .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-initialized.slick-dotted .slick-dots li:nth-child(n+6) {
    display: none !important;
  }

  body#search  .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-slider .slick-dots li button,
  body#category .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-slider .slick-dots li button {
    width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    line-height: 8px !important;
  }

  body#search  .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-slider .slick-dots li button:before,
  body#category .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-slider .slick-dots li button:before {
    width: 8px !important;
    height: 8px !important;
    font-size: 8px !important;
    line-height: 8px !important;
    top: 0 !important;
    left: 0 !important;
  }

}

/* ---------------------------------------------------------------
   3. CONFRONTO: nascosto su mobile listing
   Template plist-center: .pro-btn > .compare > a.leo-compare-button
   Template standard:     .functional-buttons > .compare
--------------------------------------------------------------- */
@media (max-width: 767px) {

  body#search  .ajax_block_product .compare,
  body#category .ajax_block_product .compare,
  body#search  .ajax_block_product .leo-compare-button,
  body#category .ajax_block_product .leo-compare-button {
    display: none !important;
  }

  /* pro-btn: carrello flex-grow + wishlist 40px fisso */
  body#search  .ajax_block_product .pro-btn,
  body#category .ajax_block_product .pro-btn {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  body#search  .ajax_block_product .pro-btn > div,
  body#category .ajax_block_product .pro-btn > div {
    float: none !important;
    margin: 0 0 0 1px !important;
  }

  body#search  .ajax_block_product .pro-btn .button-container,
  body#category .ajax_block_product .pro-btn .button-container {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  body#search  .ajax_block_product .pro-btn .leo-wishlist-button-dropdown,
  body#category .ajax_block_product .pro-btn .leo-wishlist-button-dropdown {
    flex: 0 0 40px !important;
    width: 40px !important;
  }

}

/* =====================================================================
   FUIX — FOOTER MOBILE: SOCIAL + LOGO + SPAZIATURA COMPATTA
   2026-06-05
   DOM reale:
     #footer.footer-container.js-footer
       div.footer-top > div.inner > div.block-social   ← ps_socialfollow (footerBefore)
       div.footer-center > div.inner
         div.row.h2-boxfooter  > ApColumn > a > img.logo.img-fluid
         div.row.box-ftinfo
           .nqt-copyright  /  .nqt_address  /  .nqt_info
           ApColumn:3 > div.block-social (duplicata — nascosta su mobile)
         div.links  (Negozio / Link utili)
         .block_newsletter / h3.title_block (Newsletter)
       div.footer-bottom
   =================================================================== */

/* ---------------------------------------------------------------
   MOBILE ONLY — tutto scoped a max-width:767px
--------------------------------------------------------------- */
@media (max-width: 767px) {

  /* 1. Contenitore footer: riduce padding top */
  #footer.footer-container {
    padding-top: 0 !important;
  }

  /* 2. SOCIAL BLOCK in footer-top: centrato, icone circolari sobrie
        <ul> > <li class="facebook"> > <a> > <span>Facebook</span>
        Il testo viene nascosto via font-size:0; le icone via ::before con FA */
  #footer .footer-top {
    padding: 18px 0 4px !important;
    background: transparent !important;
  }

  #footer .footer-top .inner {
    padding: 0 !important;
  }

  #footer .footer-top .block-social {
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #footer .footer-top .block-social ul {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  #footer .footer-top .block-social li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Link: cerchio sobrio con hover arancione */
  #footer .footer-top .block-social a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,.18) !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 0 !important;         /* nasconde il testo span */
    transition: color .2s, border-color .2s !important;
  }

  #footer .footer-top .block-social a:hover {
    color: #eb7025 !important;
    border-color: #eb7025 !important;
  }

  /* Testo span: nascosto */
  #footer .footer-top .block-social a span {
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Icone FontAwesome via ::before */
  #footer .footer-top .block-social li.facebook a::before {
    content: "\f09a" !important;
    font-family: "FontAwesome", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: block !important;
    font-style: normal !important;
  }

  #footer .footer-top .block-social li.instagram a::before {
    content: "\f16d" !important;
    font-family: "FontAwesome", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: block !important;
    font-style: normal !important;
  }

  /* 3. SOCIAL duplicata in footer-center (AppAgeBuilder col 3): nascosta su mobile
        Evita la doppia visualizzazione */
  #footer .footer-center .block-social {
    display: none !important;
  }

  /* 4. LOGO FUIX: più piccolo e ben centrato */
  #footer .footer-center .h2-boxfooter img.logo,
  #footer .footer-center .h2-boxfooter .logo.img-fluid {
    max-width: 110px !important;
    width: 110px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 10px auto !important;
  }

  #footer .footer-center .h2-boxfooter {
    padding: 14px 0 10px !important;
    text-align: center !important;
  }

  /* 5. box-ftinfo: testi più compatti */
  #footer .footer-center .box-ftinfo {
    padding-top: 0 !important;
    padding-bottom: 8px !important;
  }

  #footer .footer-center .nqt-copyright,
  #footer .footer-center .nqt_address,
  #footer .footer-center .nqt_info {
    margin-bottom: 8px !important;
  }

  #footer .footer-center .nqt-copyright p,
  #footer .footer-center .nqt_address p,
  #footer .footer-center .nqt_info p {
    margin-bottom: 4px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* 6. Links (Negozio / Link utili): riduce spaziatura */
  #footer .footer-center .links {
    margin-bottom: 16px !important;
  }

  #footer .footer-center .links .title {
    padding: 8px 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
  }

  #footer .footer-center .links ul.collapse {
    margin-bottom: 6px !important;
  }

  #footer .footer-center .links ul li a {
    padding: 4px 0 !important;
    font-size: 13px !important;
  }

  /* 7. Newsletter: riduce distanza superiore */
  #footer .footer-center .block_newsletter,
  #footer .footer-center #block-newsletter {
    margin-top: 12px !important;
    padding-top: 0 !important;
  }

  #footer .footer-center h3.title_block,
  #footer .footer-center .block_newsletter h3 {
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }

  /* 8. Footer-bottom: compatto */
  #footer .footer-bottom {
    padding: 12px 0 !important;
  }

}

/* =====================================================================
   FUIX — CORREZIONE DOPPIA ICONA SOCIAL FOOTER (2026-06-05)
   CAUSA: il precedente CSS aggiungeva icone via a::before, ma theme.css
   le aggiunge già via li::before → due icone sovrapposte.
   FIX: si usa solo li::before (theme.css) per l'icona, e <a> diventa
   un overlay trasparente cliccabile (position:absolute che copre li).
   Applica sia a footer-top sia a footer-center/container.
   =================================================================== */

/* ---------------------------------------------------------------
   STEP 1 — Azzera il::before su <a> per entrambi i contesti
   (annulla il CSS aggiunto per errore in precedenza)
--------------------------------------------------------------- */
#footer .block-social li a::before,
#footer .footer-top .block-social li a::before,
#footer .footer-center .block-social li a::before,
#footer .footer-top .block-social li.facebook a::before,
#footer .footer-top .block-social li.instagram a::before {
  content: none !important;
  display: none !important;
}

/* ---------------------------------------------------------------
   STEP 2 — li come cerchio: brand colors + dimensione uniforme
   (vale globalmente, desktop e mobile, per tutti i footer .block-social)
--------------------------------------------------------------- */

/* footer-top: li diventa cerchio con brand colors */
#footer .footer-top .block-social li {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
  /* font-size/line-height per l'icona ::before da theme.css */
  font-size: 18px !important;
  line-height: 1 !important;
}

#footer .footer-top .block-social li::before {
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  pointer-events: none !important;
  position: relative !important;
  z-index: 0 !important;
}

#footer .footer-top .block-social li.facebook  { background: #1877F2 !important; }
#footer .footer-top .block-social li.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; }
#footer .footer-top .block-social li:hover     { transform: scale(1.08) !important; opacity: 0.9 !important; }

/* footer-center/.footer-container: già ha li circle da regole sopra, assicura position:relative */
#footer .footer-center .block-social li,
#footer .footer-container .block-social li {
  position: relative !important;
}

/* ---------------------------------------------------------------
   STEP 3 — <a> come overlay cliccabile trasparente sopra l'icona
   Annulla display:none da theme.css + copre l'intero cerchio li.
   Nessuna icona extra, nessun testo visibile.
--------------------------------------------------------------- */
#footer .block-social li a,
#footer .footer-top .block-social li a,
#footer .footer-center .block-social li a,
#footer .footer-container .block-social li a {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;          /* top:0 right:0 bottom:0 left:0 */
  z-index: 1 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  font-size: 0 !important;
  border-radius: 50% !important;
  text-decoration: none !important;
}

#footer .block-social li a span,
#footer .footer-top .block-social li a span,
#footer .footer-center .block-social li a span {
  display: none !important;
}

/* ---------------------------------------------------------------
   STEP 4 — Layout lista: flex centrato sia in footer-top che footer-center
--------------------------------------------------------------- */
#footer .footer-top .block-social ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

#footer .footer-top .block-social li {
  list-style: none !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------
   STEP 5 — footer-top wrapper: padding sobrio (mobile + desktop)
--------------------------------------------------------------- */
#footer .footer-top .block-social {
  text-align: center !important;
  padding: 16px 0 12px !important;
}

/* =====================================================================
   FUIX — FOOTER MOBILE: RIDUZIONE SPAZIO BIANCO FINALE (2026-06-06)
   Selettori che causano spazio eccessivo (da appagebuilder/views/css/styles.css):
   - .footer-container .h2-boxfooter → padding: 50px 0 (globale, nessun override mobile)
   - .box-copyright                  → padding: 35px 0 + margin-top: 30px (<1199px)
   - .footer-container               → padding-top: 30px (<575px), no padding-bottom
   Desktop invariato (tutto dentro @media max-width:767px).
   =================================================================== */
@media (max-width: 767px) {

  /* Logo row: da 50px padding a 18px */
  .footer-container .h2-boxfooter {
    padding: 18px 0 !important;
  }

  /* Riga copyright/pagamenti: da 35px+30px a 16px */
  .footer-container .box-copyright {
    padding: 16px 0 !important;
    margin-top: 0 !important;
  }

  /* footer-container: rimuove padding-bottom residuo */
  .footer-container {
    padding-bottom: 24px !important;
  }

  /* footer-bottom (div vuoto dopo footer-center): altezza minima */
  .footer-container .footer-bottom,
  #footer .footer-bottom {
    padding: 0 !important;
    min-height: 0 !important;
  }

  /* Immagine loghi pagamento: non trascina spazio extra sotto */
  .footer-container .box-copyright .ApImage,
  .footer-container .box-copyright img {
    margin-bottom: 0 !important;
    display: block !important;
  }

}

/* =====================================================================
   FUIX — FOOTER MOBILE: FIX DEFINITIVO SPAZIO FINALE (2026-06-06)
   Diagnosi precisa:
   - Le regole precedenti puntavano a .h2-boxfooter ma il DOM usa .box-footer
   - L'ultimo .row.ApRow in fondo a footer-center è vuoto → inutile
   - .footer-bottom è vuoto → inutile
   - .box-footer .logo { margin-bottom:35px } non era stato toccato
   - .box-footer .ApRawHtml { margin-bottom:30px } non era stato toccato
   Strategia: azzera tutto il padding/margin finale, nascondi elementi vuoti,
   lascia solo 24px di padding-bottom sul footer-container.
   =================================================================== */
@media (max-width: 767px) {

  /* 1. Ultima riga vuota in footer-center: nascosta (no contenuto, no scopo) */
  #footer .footer-center .inner > .row.ApRow:last-child,
  #footer .footer-center .inner > .ApRow:last-child:empty,
  #footer .footer-center .inner > .row:last-child:not(.box-copyright):not(.box-footer):not(.box-ftinfo) {
    display: none !important;
  }

  /* 2. footer-bottom: nascosto su mobile (regola globale in fondo al file) */

  /* 3. box-copyright: azzera il padding-bottom */
  #footer .footer-center .box-copyright {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 4. Immagine loghi pagamento: no spazio sotto */
  #footer .footer-center .box-copyright .ApImage,
  #footer .footer-center .box-copyright img {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    display: block !important;
  }

  /* 5. footer-center inner/container: no padding bottom */
  #footer .footer-center,
  #footer .footer-center .container,
  #footer .footer-center .inner {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 6. Footer-container: unico padding-bottom = 24px */
  #footer.footer-container {
    padding-bottom: 24px !important;
  }

  /* 7. Riduce margini interni .box-footer su mobile (class corretta, NON h2-boxfooter) */
  #footer .footer-center .box-footer .logo,
  .footer-container .box-footer .logo {
    margin-bottom: 16px !important;
  }

  #footer .footer-center .box-footer .ApRawHtml,
  .footer-container .box-footer .ApRawHtml {
    margin-bottom: 12px !important;
  }

}

/* =====================================================================
   FUIX — FOOTER MOBILE: FIX CAUSA PRECISA SPAZIO SOTTO LOGHI PAGAMENTO
   2026-06-06 — diagnosi definitiva

   CAUSA REALE:
   /modules/appagebuilder/views/css/styles.css (CF cached Sep 2025) contiene:
     .block { margin-bottom: 20px; clear: both !important; }
   
   Il div.block.ApImage che wrappa l'immagine SADADA.png (loghi pagamento)
   dentro .box-copyright eredita margin-bottom: 20px.
   Questo è lo spazio bianco sotto i loghi pagamento.
   
   Nessuna regola precedente targetava .block dentro box-copyright.
   =================================================================== */
@media (max-width: 767px) {

  /* Rimuove margin-bottom: 20px dal .block.ApImage dentro box-copyright */
  #footer .box-copyright .block,
  #footer .box-copyright .ApImage,
  #footer .box-copyright .block.ApImage {
    margin-bottom: 0 !important;
    clear: none !important;
  }

  /* Assicura anche che l'<a> e l'<img> non abbiano spazio extra */
  #footer .box-copyright .ApImage a {
    display: block !important;
    line-height: 0 !important;
    font-size: 0 !important;
  }

  #footer .box-copyright .ApImage img {
    display: block !important;
    margin-bottom: 0 !important;
    margin-top: 8px !important;
  }

}

/* =====================================================================
   FUIX — FOOTER MOBILE: SPAZIO SICUREZZA SOTTO LOGHI PAGAMENTO (2026-06-06)
   I pulsanti flottanti (carrello basso-sx + torna-su basso-dx) coprivano
   i loghi pagamento con spacePaymentToDocumentEnd = 24px.
   Aggiunge 80px sotto box-copyright per distanziarli dai pulsanti flottanti.
   Solo mobile, desktop invariato.
   =================================================================== */
@media (max-width: 767px) {

  #footer .row.box-copyright.ApRow,
  #footer .row.box-copyright.ApRow.has-bg.bg-boxed {
    padding-bottom: 80px !important;
  }

}

/* =====================================================================
   FUIX — HOME MOBILE: CATEGORIE IN GRIGLIA 2 COLONNE (2026-06-06)
   
   Contesto: il widget ApCategoryImage genera una <ul class="level0"> per
   ogni categoria. Sul desktop ogni ul è float:left width:33.33% (3 per riga).
   Sul mobile il tema imposta width:100% (1 per riga, colonne enormi).
   
   Fix: su mobile width:50% + float:left → 2 categorie per riga.
   Nessuna opzione backend disponibile, solo CSS.
   Desktop invariato (regola dentro max-width:767px).
   =================================================================== */
@media (max-width: 767px) {

  /* Ogni ul categoria: da 100% a 50% → 2 per riga */
  .widget-category_image .block_content > ul {
    width: 50% !important;
    float: left !important;
    padding: 0 5px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* block_content: clearfix per i float */
  .widget-category_image .block_content {
    overflow: hidden !important;
  }

  /* Immagine: piena larghezza con aspect-ratio quadrato */
  .widget-category_image .block_content > ul img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Testo categoria: dimensione leggibile */
  .widget-category_image .block_content .wr-text,
  .widget-category_image .block_content .cat_name,
  .widget-category_image .block_content > ul span:not(.cover-img):not(.cate_content) {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

}

/* =====================================================================
   FUIX — HEADER MOBILE: HAMBURGER PIÙ PROPORZIONATO (2026-06-06)
   Selettore reale già in custom_v2.css: #header .header-top .navbar-toggler
   Valore precedente: font-size: 24px. Portato a 27px per bilanciarlo
   visivamente con logo FUIX centrale e icone account/carrello.
   Il bottone usa &#9776; come testo, non span.icon-bar.
   =================================================================== */
@media (max-width: 991px) {
  #header .header-top .navbar-toggler {
    font-size: 40px !important;
  }
}

/* =====================================================================
   FUIX — HOME MOBILE: SEZIONE BRAND / PRODOTTI ORIGINALI PIÙ COMPATTA
   2026-06-06
   
   Struttura DOM reale:
     row.ApRow > col-sp-12.ApColumn
       .block.ApRawHtml > div[style="height:60px;"]   ← spacer x2
       .block.ApRawHtml > h2[style="margin:25px auto"] ← "100 brand"
       .block.ApManuFacturersCarousel h4.title_block   ← "Brand"
       .block.ApManuFacturersCarousel .owl-carousel     ← loghi
       section.athena-hero                              ← "Prodotti orig."
   
   Scope: .page-home + max-width:767px → desktop invariato.
   =================================================================== */
@media (max-width: 767px) {

  /* 1. Spacer divs con height:60px → ridotti a 20px */
  .page-home .block.ApRawHtml div[style*="height:60px"] {
    height: 20px !important;
  }

  /* 2. H2 "Più di 100 brand trattati" — override inline margin:25px */
  .page-home .block.ApRawHtml h2 {
    margin-top: 10px !important;
    margin-bottom: 12px !important;
    font-size: 1.5rem !important;
    padding: 0.7rem 1rem !important;
  }

  /* 3. Blocco Brand carousel: riduci margini */
  .page-home .ApManuFacturersCarousel,
  .page-home .block.manufacturers_block.ApManuFacturersCarousel {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .page-home .ApManuFacturersCarousel h4.title_block {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }

  .page-home .ApManuFacturersCarousel .block_content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 4. Box "Prodotti originali e garantiti" */
  .page-home .athena-hero {
    margin-top: 10px !important;
    margin-bottom: 16px !important;
    padding: 22px 20px !important;
  }

  .page-home .athena-hero h1 {
    font-size: 1.6rem !important;
    margin-bottom: 10px !important;
  }

  .page-home .athena-hero p.lead {
    font-size: 0.95rem !important;
    margin-bottom: 10px !important;
  }

}

/* =====================================================================
   FUIX — HOME MOBILE: CATEGORIE CARD STYLE (aggiornamento grafico 2026-06-06)
   
   Template reale: ApCategoryImage.tpl
   Struttura: ul.level0 > li.cate_X > a > span.cate_content
                                              ├── span.cover-img > img
                                              └── span.cat_name "Scarpe"
   
   Testo: span.cat_name (NON .wr-text — classe assente nel template reale)
   Layout: CSS Grid 2 colonne (sostituisce il float 50% precedente)
   Stile: titolo overlay in alto a sinistra con badge bianco semitrasparente.
   Scelta: overlay (le immagini categorie hanno spazio in alto e il testo
   non oscura il soggetto principale in basso/centro).
   Desktop: invariato (tutto dentro @media max-width:767px).
   =================================================================== */
@media (max-width: 767px) {

  /* ── Layout: CSS Grid 2 colonne (override del float 50% precedente) ── */
  .page-home .widget-category_image .block_content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 12px !important;
    margin: 18px 0 24px !important;
    overflow: visible !important;  /* rimuove clearfix del float */
  }

  .page-home .widget-category_image .block_content > ul {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* ── Card: bordi arrotondati, ombra leggera ── */
  .page-home .widget-category_image .block_content > ul > li,
  .page-home .widget-category_image .block_content > ul li:first-child {
    overflow: hidden !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.10) !important;
    background: #f4f4f4 !important;
    display: block !important;
  }

  /* ── Link: rimuove decorazioni, cliccabile su tutto il box ── */
  .page-home .widget-category_image .block_content a {
    display: block !important;
    text-decoration: none !important;
  }

  /* ── cate_content: wrapper relativo per l'overlay ── */
  .page-home .widget-category_image .cate_content {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  /* ── Immagine: aspect-ratio quadrato, riempie il box ── */
  .page-home .widget-category_image .cover-img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #eee !important;
  }

  .page-home .widget-category_image .cover-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform .28s ease !important;
  }

  .page-home .widget-category_image .cate_content:hover .cover-img img,
  .page-home .widget-category_image .cate_content:active .cover-img img {
    transform: scale(1.04) !important;
  }

  /* ── Gradiente in alto: leggero schiarimento per leggibilità testo ── */
  .page-home .widget-category_image .cover-img::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 55% !important;
    background: linear-gradient(
      180deg,
      rgba(255,255,255,.65) 0%,
      rgba(255,255,255,0)   100%
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* ── Testo categoria: badge overlay top-left ── */
  .page-home .widget-category_image .cat_name {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 2 !important;
    display: inline-block !important;
    padding: 4px 9px !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.82) !important;
    color: #111 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .2px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.08) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    max-width: calc(100% - 20px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

}

/* =====================================================================
   FUIX — HOME MOBILE: CATEGORIE — NOME SOTTO LA CARD, NIENTE "SHOW ALL"
   2026-06-06
   
   Soluzione CSS-only (nessuna modifica template):
   - .cate_content diventa flex-column: immagine sopra, .cat_name sotto
   - .cat_name: da position:absolute (overlay) a static (etichetta sotto)
   - .cover-img: bordi arrotondati solo in alto
   - .view_all.btn: nascosto (aggiunto da JS quando categorie > limit)
   
   Template: .cat_name contiene il nome reale della categoria.
   L'<a> wrappa sia immagine che etichetta → tutto il box è cliccabile.
   Desktop invariato (max-width:767px).
   =================================================================== */
@media (max-width: 767px) {

  /* 1. cate_content: flex column → immagine sopra, nome sotto */
  .page-home .widget-category_image .cate_content {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.09) !important;
    position: relative !important;
  }

  /* 2. Immagine: quadrata, in cima, bordi arrotondati solo sopra */
  .page-home .widget-category_image .cover-img {
    flex: 0 0 auto !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 10px 10px 0 0 !important;
    background: #f0f0f0 !important;
  }

  /* rimuove il gradient overlay (non più necessario con testo sotto) */
  .page-home .widget-category_image .cover-img::after {
    display: none !important;
  }

  /* 3. cat_name: da overlay (position:absolute) a etichetta sotto */
  .page-home .widget-category_image .cat_name {
    position: static !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 8px 10px 10px !important;
    color: #111 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: .2px !important;
    border-radius: 0 0 10px 10px !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* 4. Nascondi "View all" / "Show All" aggiunto da JS */
  .page-home .widget-category_image .view_all,
  .page-home .widget-category_image a.view_all,
  .page-home .widget-category_image .btn.view_all,
  .page-home .widget-category_image a[href].btn-primary.view_all {
    display: none !important;
  }

  /* Nascondi anche il wrapper view_all se visibile */
  .page-home .widget-category_image .view_all_wapper {
    display: none !important;
  }

}

/* =====================================================================
   FUIX — HOME MOBILE: CATEGORIE — FIX DEFINITIVO (2026-06-06)
   
   Struttura DOM reale (template themes/at_athena/modules/appagebuilder/...):
   <li class="cate_685">
     <a href="/scarpe">
       <span class="cate_content">
         <span class="cover-img"><img/></span>
         <span class="wr-text">          ← testo dentro card = da nascondere
           <span class="cate-name">Scarpe</span>
         </span>
       </span>
     </a>
     <a class="cate-show-all" href="/scarpe">Scarpe</a>  ← testo ora = nome categoria
   </li>
   
   Fix template: testo di cate-show-all = {$category.name} (non più "Show All")
   Fix CSS mobile: nascondi .wr-text dentro card, stile elegante su .cate-show-all
   =================================================================== */
@media (max-width: 767px) {

  /* Nasconde il testo dentro la card (.wr-text con .cate-name) */
  .page-home .widget-category_image .wr-text {
    display: none !important;
  }

  /* Stile del nome categoria sotto la card */
  .page-home .widget-category_image .cate-show-all {
    display: block !important;
    margin-top: 7px !important;
    padding: 0 2px !important;
    color: #111 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: .1px !important;
    text-decoration: none !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .page-home .widget-category_image .cate-show-all:hover {
    color: #eb7025 !important;
  }

  /* Rimuove eventuale "+" da ::before/::after */
  .page-home .widget-category_image .cate-show-all::before,
  .page-home .widget-category_image .cate-show-all::after {
    content: none !important;
    display: none !important;
  }

}

/* =====================================================================
   FUIX — GRIGLIA PRODOTTI MOBILE: FIX GLOBALE TUTTE LE PAGINE LISTING
   2026-06-06
   
   Body ID reali:
   - body#manufacturer  ← brand/produttore (es. Under Armour)
   - body#search        ← ricerca
   - body#category      ← categoria
   - body#best-sales    ← più venduti
   - body#prices-drop   ← offerte
   - body#new-products  ← novità
   
   Selettore: body:not(#index):not(#product)
   → copre TUTTI i listing tranne home e pagina prodotto.
   
   Nota: sulla pagina brand il compare ha classe "ap-btn-compare dropdown-item"
   (diversa da "compare"/"leo-compare-button" usata su search/category).
   Uso [class*="compare"] per coprire tutte le varianti.
   
   Desktop invariato (tutto dentro @media max-width:767px).
   =================================================================== */
@media (max-width: 767px) {

  /* ── 1. GRIGLIA 2 COLONNE — tutte le pagine listing ── */
  body:not(#index):not(#product) .product_list.grid > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 10px !important;
    align-items: stretch !important;
  }

  body:not(#index):not(#product) .product_list.grid > .row > .ajax_block_product {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    clear: none !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Classi legacy first-in-line / last-in-line */
  body:not(#index):not(#product) .ajax_block_product.first-in-line,
  body:not(#index):not(#product) .ajax_block_product.last-in-line,
  body:not(#index):not(#product) .ajax_block_product.last-line,
  body:not(#index):not(#product) .ajax_block_product.first-item-of-mobile-line,
  body:not(#index):not(#product) .ajax_block_product.last-item-of-mobile-line {
    clear: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Inner .js-product wrapper (doppio col-sp-6) */
  body:not(#index):not(#product) .ajax_block_product > .js-product {
    width: 100% !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── 2. CARD FLEX COLUMN — altezza uniforme ── */
  body:not(#index):not(#product) article.product-miniature,
  body:not(#index):not(#product) .product-miniature .thumbnail-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important; /* ← necessario per wishlist position:absolute */
  }

  /* ── 3. IMMAGINE: aspect-ratio uniforme ── */
  body:not(#index):not(#product) .product_list.plist-center .product-miniature .product-image,
  body:not(#index):not(#product) .product-miniature .product-image.thumbnail-top {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  body:not(#index):not(#product) .product_list.plist-center .product-miniature .product-image img,
  body:not(#index):not(#product) .product-miniature .product-image.thumbnail-top img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* ── 4. PRODUCT-LIST-IMAGES-MOBILE: spazio dots ── */
  body:not(#index):not(#product) .ajax_block_product .product-list-images-mobile {
    padding-bottom: 28px !important;
    box-sizing: content-box !important;
  }

  /* ── 5. DOTS: 1 riga, max 5 pallini ── */
  body:not(#index):not(#product) .product_list.plist-center .ajax_block_product
      .product-list-images-mobile.slick-slider .slick-dots,
  body:not(#index):not(#product) .product_list.plist-center .ajax_block_product
      .product-list-images-mobile.slick-initialized.slick-dotted .slick-dots {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 27px !important;
    max-height: 27px !important;
    overflow: hidden !important;
    bottom: 4px !important;
    padding: 0 !important; margin: 0 !important;
    list-style: none !important;
  }

  body:not(#index):not(#product) .product_list.plist-center .ajax_block_product
      .product-list-images-mobile.slick-slider .slick-dots li {
    display: block !important; flex: 0 0 8px !important;
    width: 8px !important; height: 8px !important;
    margin: 0 !important; padding: 0 !important; float: none !important;
  }

  body:not(#index):not(#product) .product_list.plist-center .ajax_block_product
      .product-list-images-mobile.slick-slider .slick-dots li:nth-child(n+6) {
    display: none !important;
  }

  /* ── 6. META/DESCRIZIONE ── */
  body:not(#index):not(#product) .product-miniature .product-meta,
  body:not(#index):not(#product) .product-miniature .product-description {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }

  body:not(#index):not(#product) .product-miniature .product-title {
    min-height: 40px !important;
    margin-bottom: 6px !important;
  }

  body:not(#index):not(#product) .product-miniature .product-price-and-shipping {
    min-height: 66px !important;
  }

  body:not(#index):not(#product) .product-miniature .product-description-short {
    display: none !important;
  }

  /* ── 7. CONFRONTO: nascosto su TUTTE le pagine listing ── */
  /* Copre: div.compare, a.leo-compare-button, .ap-btn-compare e qualsiasi
     elemento con "compare" nel nome classe dentro il product-miniature */
  body:not(#index):not(#product) .ajax_block_product .compare,
  body:not(#index):not(#product) .ajax_block_product .leo-compare-button,
  body:not(#index):not(#product) .ajax_block_product [class*="compare"],
  body:not(#index):not(#product) .product-miniature .compare,
  body:not(#index):not(#product) .product-miniature .leo-compare-button,
  body:not(#index):not(#product) .product-miniature [class*="compare"] {
    display: none !important;
  }

  /* ── 8. PRO-BTN: ridistribuisce carrello + wishlist ── */
  body:not(#index):not(#product) .ajax_block_product .pro-btn,
  body:not(#index):not(#product) .product-miniature .pro-btn {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  body:not(#index):not(#product) .ajax_block_product .pro-btn > div,
  body:not(#index):not(#product) .product-miniature .pro-btn > div {
    float: none !important;
    margin: 0 0 0 1px !important;
  }

  body:not(#index):not(#product) .ajax_block_product .pro-btn .button-container,
  body:not(#index):not(#product) .product-miniature .pro-btn .button-container {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  body:not(#index):not(#product) .ajax_block_product .pro-btn .leo-wishlist-button-dropdown,
  body:not(#index):not(#product) .product-miniature .pro-btn .leo-wishlist-button-dropdown {
    flex: 0 0 40px !important;
    width: 40px !important;
  }

  /* functional-buttons (template standard product.tpl) */
  body:not(#index):not(#product) .ajax_block_product .functional-buttons,
  body:not(#index):not(#product) .product-miniature .functional-buttons {
    display: flex !important;
  }

  body:not(#index):not(#product) .ajax_block_product .functional-buttons > div:not(.compare):not(.quickview),
  body:not(#index):not(#product) .product-miniature .functional-buttons > div:not(.compare):not(.quickview) {
    flex: 1 1 auto !important;
  }

}

/* =====================================================================
   FUIX — SOTTOCATEGORIE COMPATTE SU MOBILE (body#category)
   2026-06-06

   DOM reale (/it/685-scarpe e simili):
     #subcategories
       .row.subcategories-list
         .subcategory-block.col-sp-12  ← 15 blocchi, ognuno full-width mobile
           .subcategory-image          ← img categoria
           .subcategory-meta
             h5 > a.subcategory-name   ← solo questo link serve su mobile
             .subcategory-description.cat_desc ← testo lungo → NASCOSTO

   Problema: col-sp-12 = 1 per riga, immagine + descrizione → scrollata enorme.
   Soluzione CSS puro:
     - CSS Grid 2 colonne sui blocchi
     - Nasconde immagine e descrizione
     - Chip stile compatto sul link
     - Desktop invariato (tutto dentro max-width:767px)

   NON toccato: header, footer, homepage, pagina prodotto, griglia prodotti.
   =================================================================== */
@media (max-width: 767px) {

  /* ── 1. Container: margine compatto ── */
  body#category #subcategories {
    margin: 14px 0 18px !important;
    padding: 0 10px !important;
  }

  /* ── 2. Label sezione ── */
  body#category #subcategories::before {
    content: "Categorie" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #888 !important;
    margin-bottom: 10px !important;
  }

  /* ── 3. Row → CSS Grid 2 colonne (override Bootstrap .row + col-sp-12) ── */
  body#category #subcategories .row.subcategories-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    /* reset .row negative margins Bootstrap */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── 4. Ogni blocco: reset float/width Bootstrap (col-sp-12 = 100%) ── */
  body#category #subcategories .subcategory-block {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    clear: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── 5. Immagine: nascosta su mobile ── */
  body#category #subcategories .subcategory-image {
    display: none !important;
  }

  /* ── 6. Descrizione: nascosta su mobile ── */
  body#category #subcategories .subcategory-description,
  body#category #subcategories .cat_desc {
    display: none !important;
  }

  /* ── 7. Meta: reset margini ── */
  body#category #subcategories .subcategory-meta {
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
  }

  /* ── 8. h5: reset tipografia (eredita font-size del tema) ── */
  body#category #subcategories .subcategory-meta h5 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1 !important;
  }

  /* ── 9. Link chip: compatto, cliccabile, centrato ── */
  body#category #subcategories a.subcategory-name {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    width: 100% !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    background: #f5f5f5 !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 8px !important;
    color: #111 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    transition: background 0.15s ease !important;
  }

  body#category #subcategories a.subcategory-name:hover,
  body#category #subcategories a.subcategory-name:active {
    background: #ebebeb !important;
    color: #000 !important;
  }

  /* ── FUIX: "Mostra tutte" — nasconde voci extra su mobile ──
     Le voci dalla 9a in poi ricevono .fuix-extra-subcat dal template.
     Di default nascoste; mostrate quando il container ha .fuix-expanded. */
  body#category #subcategories .fuix-extra-subcat {
    display: none !important;
  }

  body#category #subcategories.fuix-expanded .fuix-extra-subcat {
    display: flex !important;
  }

  /* ── Bottone "Mostra tutte le categorie" ── */
  body#category .fuix-show-subcats {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 16px !important;
    padding: 11px 16px !important;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    color: #111 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    letter-spacing: 0.2px !important;
    transition: background 0.15s ease !important;
  }

  body#category .fuix-show-subcats:hover {
    background: #f5f5f5 !important;
  }

  /* Quando expanded: bottone "Mostra meno" leggermente diverso */
  body#category #subcategories.fuix-expanded + .fuix-show-subcats,
  body#category #subcategories.fuix-expanded ~ .fuix-show-subcats {
    color: #555 !important;
    font-weight: 600 !important;
  }

}

/* Desktop: bottone "Mostra tutte" sempre nascosto (non serve) */
@media (min-width: 768px) {
  .fuix-show-subcats {
    display: none !important;
  }
}

/* =====================================================================
   FUIX — CATEGORIA MOBILE: SPAZIATURA COMPATTA PARTE ALTA v2
   2026-06-06 — selettori reali verificati da console su /it/685-scarpe

   DOM reale:
     section#main
       #js-product-list-header
         .block-category.card.card-block   ← .card-block ha padding:1.25rem (20px)
           h1.h1
           .block-category-inner            ← wrapper desc+banner
             #category-description.text-muted > p
             .category-cover > picture > img
       #subcategories.fuix-subcategories-wrap
         .row.subcategories-list
           .subcategory-block[.fuix-extra-subcat]
             .subcategory-meta > h5 > a.subcategory-name
         button.fuix-show-subcats
       #js-product-list-top.products-selection

   Fix principale: .card-block ha padding:1.25rem globale (20px × 4 lati)
   → override su padding top/bottom riducono lo spazio intorno a titolo/desc/banner.
   Desktop: invariato (tutto dentro max-width:767px).
   =================================================================== */
@media (max-width: 767px) {

  /* ── 1. Card block-category: elimina padding .card-block (1.25rem = 20px) ──
     .block-category ha ENTRAMBE le classi .card e .card-block → stessa specificità.
     Forziamo padding ridotto su tutti i lati. */
  body#category .block-category.card.card-block {
    padding: 6px 12px 0 12px !important;
    margin-bottom: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* ── 2. Titolo h1: margini ridotti ── */
  body#category .block-category h1.h1 {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
  }

  /* ── 3. .block-category-inner: zero margini, padding minimo ── */
  body#category .block-category-inner {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ── 4. Descrizione categoria: compatta ── */
  body#category #category-description {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
  }

  body#category #category-description p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #555 !important;
  }

  /* ── 5. Banner (category-cover): margini ridotti ── */
  body#category .category-cover {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }

  body#category .category-cover img {
    display: block !important;
    width: 100% !important;
    border-radius: 6px !important;
  }

  /* ── 6. Sezione sottocategorie: margini ridotti ── */
  body#category #subcategories.fuix-subcategories-wrap {
    margin-top: 8px !important;
    margin-bottom: 10px !important;
    padding: 0 12px !important;
  }

  /* ── 7. Label "Categorie" (::before): spazio ridotto ── */
  body#category #subcategories.fuix-subcategories-wrap::before {
    margin-bottom: 7px !important;
  }

  /* ── 8. Griglia sottocategorie: gap ridotto ── */
  body#category #subcategories .row.subcategories-list {
    gap: 6px !important;
  }

  /* ── 9. Chip sottocategoria: più compatti ── */
  body#category #subcategories a.subcategory-name {
    min-height: 40px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  /* ── 10. Bottone "Mostra tutte": spazio ridotto ── */
  body#category button.fuix-show-subcats {
    margin-top: 6px !important;
    margin-bottom: 8px !important;
    padding: 9px 12px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }

  /* ── 11. Barra filtri/ordinamento: nessun margine superiore eccessivo ── */
  body#category #js-product-list-top.products-selection {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body#category #js-product-list-top .sort-by-row {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

}

/* =====================================================================
   FUIX — CATEGORIA MOBILE: SPAZIO SOPRA H1 — FIX LEFT-COLUMN
   2026-06-06 — diagnosi da DOM reale /it/685-scarpe

   PROBLEMA TROVATO:
   Il #left-column.sidebar ha col-xs-12 → si renderizza PRIMA di #content-wrapper
   nella stacking order mobile Bootstrap. Contiene:
     - .block-categories: lista 15 sottocategorie (NON ha hidden-sm-down!)
       → crea uno spazio enorme sopra "SCARPE" su mobile
     - #search_filters_wrapper.hidden-sm-down → già nascosto

   Il pulsante filtro mobile (#search_filter_toggler) è in #js-product-list-top,
   fuori da #left-column → nascondere #left-column è sicuro su mobile.

   Contiene anche un .row.ApRow vuota tra #left-column e #content-wrapper
   → resettata con margin/padding 0.

   Desktop: invariato (tutto dentro max-width:767px).
   =================================================================== */
@media (max-width: 767px) {

  /* ── MAIN FIX: nascondi l'intera sidebar su mobile per body#category ──
     .block-categories e i suoi 15 link occupano tutto lo schermo prima di h1.
     La navigazione categoria è già mostrata nei chip .subcategory-name sotto. */
  /* FUIX FIX: nasconde solo .block-categories (lista cat), NON tutto #left-column.
     Se nascondiamo #left-column intero, il Filter (theme.js) non può mostrare
     #search_filters_wrapper (dentro #left-column) → pagina bianca al click Filter. */
  body#category #left-column .block-categories {
    display: none !important;
  }

  body#category #left-column {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ── Reset margin/padding sul content-wrapper e #main ── */
  body#category #content-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body#category section#main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* ── Reset del .row che wrappa left-column + content-wrapper ── */
  body#category #wrapper .container > .row {
    margin-top: 0 !important;
  }

  /* ── Titolo categoria centrato su mobile ── */
  body#category h1 {
    text-align: center !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.8px !important;
  }

  /* ── Titolo "CATEGORIE" centrato (è lo ::before su #subcategories) ── */
  body#category #subcategories.fuix-subcategories-wrap::before {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }

  /* ── Rimozione linea grigia sopra "SCARPE" ──
     La linea può provenire da più sorgenti; le copriamo tutte in modo sicuro
     (scoped a body#category @media mobile).
     Candidati:
       - .card { border: 1px solid rgba(0,0,0,.125) } dal tema Bootstrap
       - box-shadow residuo sul .card
       - border-top su .block-category-inner o #js-product-list-header
       - background-color diverso dal body che crea una "riga" visiva
       - border-bottom su elementi dell'ApRow precedente */
  body#category .block-category,
  body#category .block-category.card,
  body#category .block-category.card-block,
  body#category .block-category.card.card-block,
  body#category #js-product-list-header,
  body#category .block-category-inner,
  body#category section#main {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* Background esplicito sul card = evita che diff bg crei effetto "linea" */
  body#category .block-category.card,
  body#category .block-category.card.card-block {
    background-color: transparent !important;
  }

}

/* =====================================================================
   FUIX — RIMOZIONE LINEA GRIGIA SOPRA TITOLO CATEGORIA (MOBILE)
   2026-06-06

   Elemento responsabile: non identificabile con certezza da server-side.
   Candidati coperti da questo blocco:

   A) aside#notifications (tra header e #wrapper):
      Potrebbe avere border-bottom/box-shadow/background visibile.
      → Azzeramento bordi e padding.

   B) .row.ApRow vuota all'interno di <header> (ultima riga prima di </header>):
      Su mobile, col-sp-12 potrebbe prendere altezza da padding Bootstrap
      o da min-height implicita dell'AppAgeBuilder.
      → height/padding zero, border none, display:none in incognito.

   C) section#wrapper border-top / padding-top:
      #wrapper ha padding: 9px lato (x/y = 0 mobile) ma potrebbe
      avere border da qualche CSS non trovato nell'analisi.
      → Azzeramento border-top.

   D) .container dentro #wrapper:
      Bootstrap .container può avere border da CSS terzo.
      → Azzeramento border-top.

   Tutti i selettori sono scoped a body#category + max-width:767px.
   Desktop invariato.
   =================================================================== */
@media (max-width: 767px) {

  /* A: aside#notifications — rimuove ogni bordo/sfondo visibile */
  body#category aside#notifications {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  body#category aside#notifications .notifications-container {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* B: ApRow vuota all'interno dell'header (ultimo child prima di </header>) */
  body#category header .row.ApRow:last-of-type {
    display: none !important;
  }

  /* C+D: section#wrapper e .container dentro — rimuove border-top */
  body#category section#wrapper,
  body#category #wrapper > .container {
    border-top: none !important;
    box-shadow: none !important;
  }

  /* E: .row Bootstrap che wrappa #left-column + #content-wrapper — rimuove separatori */
  body#category #wrapper .container > .row {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* F: ApRow vuota tra #left-column e #content-wrapper */
  body#category #wrapper .container .row.ApRow {
    display: none !important;
  }

}

/* FUIX — search fix: il blocco ridondante è stato rimosso.
   Il fix reale è nella riga ~206 del blocco header mobile (background: transparent, border: none). */

/* =====================================================================
   FUIX — UNIFORMA COLORI BOTTONI MOBILE (#202b31)
   2026-06-06

   3 bottoni da allineare allo stesso colore antracite #202b31:
   1. Search submit button — già aggiornato in riga ~231 (background: #202b31)
   2. Filter button — button#search_filter_toggler.btn.btn-outline (attuale: #333b48)
   3. Add to cart nelle card listing — .btn-primary.add-to-cart (attuale: #222)

   Selettori reali da DOM /it/685-scarpe:
   - Filter: <button id="search_filter_toggler" class="btn btn-outline js-search-toggler">
   - Add to cart: <button class="btn btn-primary btn-product add-to-cart leo-bt-cart ...">
     dentro .pro-btn .button-container.cart > form

   Scopo: body#category @media max-width:767px.
   Desktop invariato.
   =================================================================== */
@media (max-width: 767px) {

  /* ── Filter button ── */
  body#category #search_filter_toggler,
  body#category button.js-search-toggler {
    background: #202b31 !important;
    background-color: #202b31 !important;
    border-color: #202b31 !important;
    color: #fff !important;
  }

  body#category #search_filter_toggler:hover,
  body#category button.js-search-toggler:hover {
    background: #2e3f48 !important;
    border-color: #2e3f48 !important;
    color: #fff !important;
  }

  /* ── Add to cart nelle card listing (NON pagina prodotto) ── */
  body#category .add-to-cart,
  body#category .leo-bt-cart {
    background: #202b31 !important;
    background-color: #202b31 !important;
    border-color: #202b31 !important;
    color: #fff !important;
  }

  body#category .add-to-cart:hover,
  body#category .leo-bt-cart:hover {
    background: #2e3f48 !important;
    border-color: #2e3f48 !important;
    color: #fff !important;
  }

}

/* =====================================================================
   FUIX — LOAD MORE MOBILE: STILE BOTTONE + NASCONDE PAGINAZIONE
   2026-06-07

   Bottone "Mostra altri N prodotti" aggiunto da custom_v2.js.
   Paginazione classica rimane nel DOM (fallback SEO/accessibilità)
   ma è nascosta visivamente su mobile → solo il bottone è visibile.
   Desktop: paginazione normale, bottone nascosto.
   =================================================================== */

/* ── Bottone Load More: solo mobile ── */
@media (max-width: 767px) {

  .fuix-load-more-btn {
    display: block !important;
    width: calc(100% - 24px) !important;
    margin: 6px 12px 24px !important;
    padding: 14px 16px !important;
    background: #202b31 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    cursor: pointer !important;
    letter-spacing: 0.2px !important;
    box-sizing: border-box !important;
    transition: background 0.15s ease !important;
  }

  .fuix-load-more-btn:hover,
  .fuix-load-more-btn:active {
    background: #2e3f48 !important;
  }

  .fuix-load-more-btn:disabled {
    opacity: 0.65 !important;
    cursor: wait !important;
  }

  /* ── Paginazione: nascosta su mobile listing, rimane nel DOM per SEO ── */
  body#category   #js-product-list .pagination,
  body#search     #js-product-list .pagination,
  body#manufacturer #js-product-list .pagination,
  body#prices-drop  #js-product-list .pagination,
  body#new-products #js-product-list .pagination,
  body#best-sales   #js-product-list .pagination {
    display: none !important;
  }

}

/* ── Desktop: bottone non deve mai comparire ── */
@media (min-width: 768px) {
  .fuix-load-more-btn {
    display: none !important;
  }
}

/* =====================================================================
   FUIX — NASCONDI ADDITIONAL DESCRIPTION CATEGORIA SU MOBILE
   2026-06-07

   DOM reale (/it/684-abbigliamento e simili):
     #js-product-list-footer
       .card
         .card-block.category-additional-description  ← testo dopo prodotti
           <p>Abbigliamento per tutti i giorni...</p>

   Questa è la "additional description" della categoria, renderizzata
   DOPO la lista prodotti (in #js-product-list-footer).
   Su mobile appare dopo il bottone "Mostra altri 12 prodotti" e prima
   del footer — posizione fuori contesto graficamente.

   Selettore usato: .category-additional-description
   → sicuro: classe specifica solo per questo blocco,
     NON colpisce la descrizione in alto (#category-description.text-muted).

   Desktop: invariato.
   =================================================================== */
@media (max-width: 767px) {

  body#category .category-additional-description,
  body#category #js-product-list-footer .card,
  body#category #js-product-list-footer .card-block {
    display: none !important;
  }

  /* Azzera anche il container #js-product-list-footer per non lasciare spazio */
  body#category #js-product-list-footer {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

}

/* =====================================================================
   FUIX — CENTRATURA TITOLO E PREZZI NELLE CARD LISTING MOBILE
   2026-06-07

   DOM reale (verificato su /it/685-scarpe):
     article.product-miniature
       .product-meta
         .product-description
           h4.h3.product-title               ← titolo
           .product-price-and-shipping
             span.regular-price              ← prezzo barrato
             span.discount-amount.discount-product  ← badge sconto
             span.price                      ← prezzo corrente

   Selettore: body:not(#index):not(#product) — copre TUTTE le listing:
   category, manufacturer, search, prices-drop, new-products, best-sales.
   Esclude home (#index) e pagina prodotto (#product).
   Desktop: invariato (tutto dentro max-width:767px).
   =================================================================== */
@media (max-width: 767px) {

  /* ── Titolo: centrato (era già tendenzialmente centrato, rinforzo) ── */
  body:not(#index):not(#product) .product-miniature .product-title {
    text-align: center !important;
  }

  /* ── Blocco prezzi: flex colonna centrata ──
     Mantiene l'ordine DOM esistente (regular-price → discount → price).
     align-items:center centra ogni span orizzontalmente. */
  body:not(#index):not(#product) .product-miniature .product-price-and-shipping {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* ── Prezzo corrente ── */
  body:not(#index):not(#product) .product-miniature .price {
    text-align: center !important;
    width: 100% !important;
  }

  /* ── Prezzo barrato ── */
  body:not(#index):not(#product) .product-miniature .regular-price {
    text-align: center !important;
    width: 100% !important;
  }

  /* ── Badge sconto: inline-flex centrato ── */
  body:not(#index):not(#product) .product-miniature .discount-amount,
  body:not(#index):not(#product) .product-miniature .discount-percentage,
  body:not(#index):not(#product) .product-miniature .discount-product {
    display: inline-flex !important;
    align-self: center !important;
    text-align: center !important;
  }

}

/* =====================================================================
   FUIX — "SCEGLI OPZIONI" NELLE CARD LISTING
   2026-06-07

   Per prodotti con varianti ($product.main_variants non vuoto),
   il template plist2507348733.tpl ora mostra un link invece del form.
   Il link ha classe .add-to-cart (eredita #202b31 già impostato) +
   .fuix-choose-options per targeting specifico se necessario.

   CSS: garantisce stile coerente con il bottone add-to-cart standard.
   =================================================================== */
a.fuix-choose-options {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.3px !important;
  color: #fff !important;
  background: #202b31 !important;
  border-color: #202b31 !important;
}

a.fuix-choose-options:hover,
a.fuix-choose-options:active {
  background: #2e3f48 !important;
  border-color: #2e3f48 !important;
  color: #fff !important;
  text-decoration: none !important;
}

a.fuix-choose-options .leo-bt-cart-content {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* =====================================================================
   FUIX — LISTING MOBILE: CARD PULITA + WISHLIST OVERLAY + UX MIGLIORATA
   2026-06-07

   Selettori reali verificati da DOM:
   - Card: article.product-miniature > .thumbnail-container (position:relative già impostato)
   - Bottone cart: .pro-btn > .button-container.cart > a.fuix-choose-options
   - Wishlist: .pro-btn > .wishlist > a.leo-wishlist-button.btn-product.btn-primary.btn
   - Wishlist text: .leo-wishlist-bt-content > .name-btn-product
   - Sort bar: #js-product-list-top > .row > .col-md-9 > .row.sort-by-row
   - Sort dropdown: .products-sort-order.dropdown (col-xs-8)
   - Sort button: .btn-unstyle.select-title
   - Filter: .filter-button > button#search_filter_toggler
   - Showing: .col-sm-12.text-sm-center.showing
   - Manufacturer sidebar: #left-column con .block-categories
   - Manufacturer h1: body#manufacturer h1
   - Manufacturer desc: #manufacturer-short_description, #manufacturer-description

   NON toccati: desktop, home, pagina prodotto, footer, header.
   =================================================================== */

@media (max-width: 767px) {

/* ── FIX 1: Rimuove bottone cart/scegli-opzioni dalle card listing ──
   La .button-container.cart contiene il bottone "ADD TO CART" / "SCEGLI OPZIONI".
   Nascondendola, la card resta pulita: immagine → titolo → prezzo.
   La .pro-btn viene collassata a 0 per non lasciare spazio residuo.
   overflow:visible mantiene la wishlist (posizionata assoluta) visibile. */
body:not(#index):not(#product) .product-miniature .button-container.cart {
  display: none !important;
}

body:not(#index):not(#product) .product-miniature .pro-btn {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  border: none !important;
  background: transparent !important;
  /* override eventuali display:flex dal blocco precedente */
  flex-wrap: nowrap !important;
}

/* ── FIX 2 (v2): Wishlist overlay — .fuix-wishlist-overlay ──
   La wishlist è ora spostata nel TEMPLATE direttamente dentro .thumbnail-container,
   fuori da .pro-btn, tra .product-image e .product-meta.
   .fuix-wishlist-overlay → position:absolute top-right dentro .product-image
   (che ha position:relative). Non occupa spazio verticale nella card.
   NOTA: il tema ha ".thumbnail-container .btn-product i { display: none; }"
   che nasconde l'icona cuore — sovrascritta esplicitamente qui sotto. */
body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  z-index: 25 !important;
  width: 28px !important;
  height: 28px !important;
  pointer-events: auto !important;
}

/* Nasconde eventuali .wishlist residui nel .pro-btn (per sicurezza) */
body:not(#index):not(#product) .product-miniature .pro-btn .wishlist {
  display: none !important;
}

/* Cerchio bianco con ombra */
body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .wishlist {
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button,
body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay button.leo-wishlist-button {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #202b31 !important;
  border: none !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.14) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  min-width: 0 !important;
  flex: none !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button:hover,
body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay button.leo-wishlist-button:hover {
  background: rgba(255,255,255,1) !important;
}

/* OVERRIDE CRITICO: il tema nasconde .btn-product i con display:none.
   Forza display dell'icona cuore nell'overlay. */
body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-wishlist-bt-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
}

body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-wishlist-bt-content i,
body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .ti-heart,
body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .icon-wishlist {
  display: inline-block !important;  /* override .thumbnail-container .btn-product i { display:none } */
  font-size: 14px !important;
  color: #202b31 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Cuore rosso quando prodotto è già in wishlist */
body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-wishlist-button.added .leo-wishlist-bt-content i {
  color: #e53935 !important;
}

/* Testo "Lista dei desideri": nascosto */
body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .name-btn-product {
  display: none !important;
}

/* Dropdown wishlist multipla: nascosta nell'overlay */
body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-list-wishlist {
  display: none !important;
}

/* Loading spinner wishlist: mantiene stile */
body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-wishlist-bt-loading {
  position: absolute !important;
  display: none !important;
}

/* ── FIX 3: Manufacturer mobile — spazio sopra titolo ──
   CAUSA PRINCIPALE: AppPageBuilder inserisce una .row.ApRow vuota
   tra #left-column e #content-wrapper. Questa riga, anche se "vuota",
   occupa spazio verticale perché .sidebar > div ha padding:30px a ≤1199px.
   Fix identico a body#category (riga ~3206 del file). */

/* Nasconde solo .block-categories, NON #left-column intero:
   il Filter mostra #search_filters_wrapper (dentro #left-column). */
body#manufacturer #left-column .block-categories {
  display: none !important;
}

/* Collassa #left-column (stacks sopra content-wrapper su mobile Bootstrap).
   overflow: visible (NON hidden) → consente a #search_filters_wrapper di
   emergere dal contenitore height:0 quando JS rimuove .hidden-sm-down.
   Stesso approccio usato su body#module-leoproductsearch-productsearch. */
body#manufacturer #left-column {
  min-height: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* CHIAVE: nasconde la .row.ApRow vuota di AppPageBuilder
   (stesso fix già applicato su body#category alla riga ~3206) */
body#manufacturer #wrapper .row.ApRow,
body#manufacturer #wrapper .container .row.ApRow {
  display: none !important;
}

/* Rimuove eventuali bordi/box-shadow sul .row principale */
body#manufacturer #wrapper > .row,
body#manufacturer #wrapper .container > .row {
  margin-top: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body#manufacturer #content-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body#manufacturer section#main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Azzera padding extra su container/section#products */
body#manufacturer section#products {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body#manufacturer #wrapper > .container,
body#manufacturer #wrapper .container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ── FIX 4: Manufacturer h1 + descrizione brand compatti ── */
body#manufacturer h1 {
  text-align: center !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  margin-top: 4px !important;
  margin-bottom: 6px !important;
  padding-top: 0 !important;
}

body#manufacturer #manufacturer-short_description {
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  padding-top: 0 !important;
  color: #555 !important;
}

body#manufacturer #manufacturer-description {
  display: none !important; /* nascosta su mobile — troppo testo */
}

/* ── FIX 5: Nasconde "Mostrando 1-12 di..." su mobile listing ──
   Selettore reale: .col-sm-12.hidden-md-up.text-sm-center.showing
   Classe più sicura e specifica: .showing dentro products-selection */
body#category    #js-product-list-top .showing,
body#manufacturer #js-product-list-top .showing,
body#search      #js-product-list-top .showing,
body#prices-drop #js-product-list-top .showing,
body#new-products #js-product-list-top .showing,
body#best-sales  #js-product-list-top .showing {
  display: none !important;
}

/* ── FIX 6: Sort + Filter full width su mobile ──
   Struttura DOM:
     .products-selection > .row
       .col-md-9 (full width su mobile, no col-xs-*)
         .sort-by-row
           .products-sort-order.dropdown (col-xs-8 = 66%)
           .filter-button (col-xs-4 = 33%)
   Fix: forza sort e filter a 50% + 50% con flex. */
body#category    #js-product-list-top .sort-by-row,
body#manufacturer #js-product-list-top .sort-by-row,
body#search      #js-product-list-top .sort-by-row,
body#prices-drop #js-product-list-top .sort-by-row,
body#new-products #js-product-list-top .sort-by-row,
body#best-sales  #js-product-list-top .sort-by-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 8px !important;
  padding: 4px 0 !important;
  /* Reset Bootstrap .row negative margins — senza reset, con col padding:0 il
     sort-bar si sposta a x=-15 e termina a x=375 invece di x=0→390 */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Sort dropdown: occupa metà riga */
body#category    #js-product-list-top .products-sort-order,
body#manufacturer #js-product-list-top .products-sort-order,
body#search      #js-product-list-top .products-sort-order,
body#prices-drop #js-product-list-top .products-sort-order,
body#new-products #js-product-list-top .products-sort-order,
body#best-sales  #js-product-list-top .products-sort-order {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Bottone "Rilevanza": full width del suo container */
body#category    #js-product-list-top .products-sort-order .select-title,
body#manufacturer #js-product-list-top .products-sort-order .select-title,
body#search      #js-product-list-top .products-sort-order .select-title,
body#prices-drop #js-product-list-top .products-sort-order .select-title,
body#new-products #js-product-list-top .products-sort-order .select-title,
body#best-sales  #js-product-list-top .products-sort-order .select-title {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 38px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  border-radius: 6px !important;
  background: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111 !important;
  box-sizing: border-box !important;
}

/* Filter-button container: occupa l'altra metà riga */
body#category    #js-product-list-top .filter-button,
body#manufacturer #js-product-list-top .filter-button,
body#search      #js-product-list-top .filter-button,
body#prices-drop #js-product-list-top .filter-button,
body#new-products #js-product-list-top .filter-button,
body#best-sales  #js-product-list-top .filter-button {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
}

/* Bottone Filter: full width del suo container */
body#category    #search_filter_toggler,
body#manufacturer #search_filter_toggler,
body#search      #search_filter_toggler,
body#prices-drop #search_filter_toggler,
body#new-products #search_filter_toggler,
body#best-sales  #search_filter_toggler {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 38px !important;
  background: #202b31 !important;
  border-color: #202b31 !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

/* Bottone FILTER iniettato via JS quando il nativo non è presente in DOM
   (ps_facetedsearch non ha facet per quella categoria) */
body#category    #fuix-injected-filter,
body#manufacturer #fuix-injected-filter,
body#search      #fuix-injected-filter,
body#prices-drop #fuix-injected-filter,
body#new-products #fuix-injected-filter,
body#best-sales  #fuix-injected-filter,
body#supplier    #fuix-injected-filter {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 80px !important;
  height: 38px !important;
  background: #202b31 !important;
  border-color: #202b31 !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  margin-left: 8px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
}

}

/* =====================================================================
   FUIX — PAGINA RICERCA MOBILE (body#module-leoproductsearch-productsearch)
   2026-06-06

   La pagina ricerca è gestita dal modulo leoproductsearch (url_rewrite=search).
   body.page_name = "module-leoproductsearch-productsearch"
   Layout: layout-left-column → stessi problemi di spaziatura di manufacturer.

   Fix:
   1. .ApRow vuota (AppPageBuilder) nascosta — causa principale spazio sopra
   2. #left-column collassato
   3. h1.page-heading compatto e centrato
   4. Blocco suggestion/search-in-category nascosto su mobile
   5. Pagination nascosta (il load-more JS è già aggiornato)
   6. "Mostrando..." nascosto
   7. Sort/filter compatibili con category/manufacturer

   body#search è il fallback standard PS — stesso fix h1/spacing.
   Desktop: invariato (tutto dentro max-width:767px).
   ===================================================================== */

@media (max-width: 767px) {

  /* ── Shorthand alias per leeprodutcsearch body ── */
  /* Nota: body#module-leoproductsearch-productsearch è l'id reale */

  /* ── 1. ApRow vuota — stessa causa di manufacturer ── */
  body#module-leoproductsearch-productsearch #wrapper .row.ApRow,
  body#module-leoproductsearch-productsearch #wrapper .container .row.ApRow {
    display: none !important;
  }

  body#module-leoproductsearch-productsearch #wrapper > .row,
  body#module-leoproductsearch-productsearch #wrapper .container > .row {
    margin-top: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* ── 2. Left-column collassato ── */
  body#module-leoproductsearch-productsearch #left-column .block-categories {
    display: none !important;
  }

  body#module-leoproductsearch-productsearch #left-column {
    min-height: 0 !important;
    height: 0 !important;
    /* visible: panel filtri può emergere al click di .js-search-toggler */
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body#module-leoproductsearch-productsearch #content-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body#module-leoproductsearch-productsearch #main,
  body#module-leoproductsearch-productsearch section#main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body#module-leoproductsearch-productsearch #wrapper > .container,
  body#module-leoproductsearch-productsearch #wrapper .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* ── 3. H1 titolo ricerca compatto e centrato ── */
  body#module-leoproductsearch-productsearch h1.page-heading,
  body#search h1,
  body#search #js-product-list-header {
    text-align: center !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* ── 4. Nascondi blocco suggestion + search-in-category ── */
  body#module-leoproductsearch-productsearch .head-leosearch-product,
  body#module-leoproductsearch-productsearch .search-in-suggest,
  body#module-leoproductsearch-productsearch .search-in-cat,
  body#search .head-leosearch-product,
  body#search .search-in-suggest,
  body#search .search-in-cat {
    display: none !important;
  }

  /* ── 5. Pagination nascosta (load-more JS usa #fuix-load-more) ── */
  body#module-leoproductsearch-productsearch #js-product-list .pagination,
  body#module-leoproductsearch-productsearch .pagination {
    display: none !important;
  }

  /* ── 6. "Mostrando 1-12 di..." nascosto ── */
  body#module-leoproductsearch-productsearch #js-product-list-top .showing,
  body#module-leoproductsearch-productsearch .showing {
    display: none !important;
  }

  /* ── 7. Sort + Filter row ─────────────────────────────────────────
     Il JS inietta #fuix-injected-filter come sibling diretto di
     .products-sort-order dentro .sort-by-row.
     .sort-by-row diventa flex container → i due elementi si dividono
     lo spazio al 50% / 50%.
     ─────────────────────────────────────────────────────────────── */

  /* Sort-by-row: flex container per Rilevanza + FILTER */
  body#module-leoproductsearch-productsearch .sort-by-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 4px 0 !important;
  }

  /* Nasconde "Sort by:" (hidden-sm-down già lo fa, ma per sicurezza) */
  body#module-leoproductsearch-productsearch .sort-by-row .sort-by {
    display: none !important;
  }

  /* Rilevanza dropdown: flex 1 = 50% */
  body#module-leoproductsearch-productsearch .sort-by-row .products-sort-order {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Bottone Rilevanza: altezza e stile */
  body#module-leoproductsearch-productsearch .sort-by-row .products-sort-order .select-title,
  body#module-leoproductsearch-productsearch .sort-by-row .products-sort-order .btn-unstyle.select-title {
    width: 100% !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 10px !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    border-radius: 6px !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #111 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  /* Bottone FILTER iniettato (quando nativo non esiste):
     flex 1 = 50%, stesso stile di category */
  body#module-leoproductsearch-productsearch #fuix-injected-filter {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #202b31 !important;
    border: 1px solid #202b31 !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Wrapper .filter-button (DOM nativo: div > button#search_filter_toggler):
     diventa flex item al 50%, il bottone figlio occupa tutta l'area */
  body#module-leoproductsearch-productsearch .sort-by-row .filter-button {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: stretch !important;
  }

  /* Bottone nativo #search_filter_toggler dentro .filter-button */
  body#module-leoproductsearch-productsearch .sort-by-row .filter-button #search_filter_toggler,
  body#module-leoproductsearch-productsearch #search_filter_toggler.js-search-toggler {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #202b31 !important;
    border: 1px solid #202b31 !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  /* Outer row e col-md-9 che wrappano sort-by-row: reset Bootstrap */
  body#module-leoproductsearch-productsearch #js-product-list-top .col-md-9,
  body#module-leoproductsearch-productsearch #js-product-list-top .col-lg-6:last-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Container #js-product-list-top: padding orizzontale leggero */
  body#module-leoproductsearch-productsearch #js-product-list-top {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-top: 12px !important;
    margin-bottom: 14px !important;
  }

  /* ── 8. Griglia prodotti 2 colonne (same as body#search/category) ── */
  body#module-leoproductsearch-productsearch .product_list.grid > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 10px !important;
    align-items: stretch !important;
  }

  body#module-leoproductsearch-productsearch .product_list.grid > .row > .ajax_block_product {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    clear: none !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body#module-leoproductsearch-productsearch .ajax_block_product.first-in-line,
  body#module-leoproductsearch-productsearch .ajax_block_product.last-in-line,
  body#module-leoproductsearch-productsearch .ajax_block_product.last-line,
  body#module-leoproductsearch-productsearch .ajax_block_product.first-item-of-mobile-line,
  body#module-leoproductsearch-productsearch .ajax_block_product.last-item-of-mobile-line {
    width: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
  }

  /* ── 9. Bottoni sotto card nascosti: cart, scegli-opzioni, compare, pro-btn ──
     Su mobile listing ricerca vogliamo: immagine + wishlist overlay + titolo + prezzo.
     L'intera striscia .pro-btn (carrello + wishlist strip + compare) è nascosta.
     La wishlist è visibile tramite .fuix-wishlist-overlay sull'immagine. */
  body#module-leoproductsearch-productsearch .product-miniature .pro-btn,
  body#module-leoproductsearch-productsearch .ajax_block_product .pro-btn,
  body#module-leoproductsearch-productsearch .product-miniature .button-container,
  body#module-leoproductsearch-productsearch .ajax_block_product .button-container,
  body#module-leoproductsearch-productsearch .product-miniature .add-to-cart,
  body#module-leoproductsearch-productsearch .product-miniature .leo-bt-cart,
  body#module-leoproductsearch-productsearch .product-miniature .functional-buttons {
    display: none !important;
  }

  /* ── 10. Compare nascosto ── */
  body#module-leoproductsearch-productsearch .ajax_block_product .compare,
  body#module-leoproductsearch-productsearch .product-miniature .leo-compare-button,
  body#module-leoproductsearch-productsearch .product-miniature [class*="compare"]:not(.product-price-and-shipping):not(.product-description-short) {
    display: none !important;
  }

  /* ── 12. Nasconde "Mostrando..." su body#search (standard PS fallback) ── */
  body#search #js-product-list-top .showing {
    display: none !important;
  }

  /* ── 13. Pagination su body#search ── */
  body#search #js-product-list .pagination {
    display: none !important;
  }

}

/* ─── Thumbnail / immagini / meta / prezzo per pagina ricerca LeoSearch ─── */
@media (max-width: 767px) {

  body#module-leoproductsearch-productsearch article.product-miniature,
  body#module-leoproductsearch-productsearch .product-miniature .thumbnail-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  body#module-leoproductsearch-productsearch .product_list.plist-center .product-miniature .product-image,
  body#module-leoproductsearch-productsearch .product-miniature .product-image.thumbnail-top {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  body#module-leoproductsearch-productsearch .product_list.plist-center .product-miniature .product-image img,
  body#module-leoproductsearch-productsearch .product-miniature .product-image.thumbnail-top img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body#module-leoproductsearch-productsearch .ajax_block_product .product-list-images-mobile {
    padding-bottom: 28px !important;
    box-sizing: content-box !important;
  }

  body#module-leoproductsearch-productsearch .product-miniature .product-meta,
  body#module-leoproductsearch-productsearch .product-miniature .product-description {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }

  body#module-leoproductsearch-productsearch .product-miniature .product-title {
    text-align: center !important;
    min-height: 40px !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  body#module-leoproductsearch-productsearch .product-miniature .product-price-and-shipping {
    text-align: center !important;
    min-height: 66px !important;
  }

  body#module-leoproductsearch-productsearch .product-miniature .product-description-short {
    display: none !important;
  }

  /* Sort-by row su body#search standard */
  body#search #js-product-list-top .sort-by-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
  }

}

/* =====================================================================
   FUIX — FIX GRAFICA MOBILE RICERCA (v2 patch 20260607b)
   Correzioni post-PHP-patch:
   - sort text overflow
   - wishlist overlay leoproductsearch (rinforza sopra regole globali)
   - add-to-cart card nascosto
   ===================================================================== */

@media (max-width: 767px) {

  /* Sort button: testo troncato con ellipsis (se il JS non lo accorcia) */
  body#module-leoproductsearch-productsearch .products-sort-order .select-title span:not(.material-icons):not(.fa) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: calc(100% - 24px) !important;
    display: inline-block !important;
  }

  /* Titolo h1 compatto — rinforza regola esistente */
  body#module-leoproductsearch-productsearch h1,
  body#module-leoproductsearch-productsearch .page-heading {
    font-size: 17px !important;
    line-height: 1.2 !important;
    margin: 6px 0 10px !important;
    padding: 0 8px !important;
    text-align: center !important;
  }

  /* Span contatore risultati dentro h1: riduci ulteriormente */
  body#module-leoproductsearch-productsearch h1 .heading-counter,
  body#module-leoproductsearch-productsearch .heading-counter {
    font-size: 13px !important;
    font-weight: 400 !important;
    display: block !important;
    opacity: 0.7 !important;
  }

  /* Wishlist overlay — rinforzo specifico per leoproductsearch */
  body#module-leoproductsearch-productsearch .product-miniature .fuix-wishlist-overlay {
    display: block !important;
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    z-index: 30 !important;
    width: 28px !important;
    height: 28px !important;
    pointer-events: auto !important;
  }

  body#module-leoproductsearch-productsearch .product-miniature .fuix-wishlist-overlay .wishlist {
    display: flex !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body#module-leoproductsearch-productsearch .product-miniature .fuix-wishlist-overlay .leo-wishlist-bt-content i,
  body#module-leoproductsearch-productsearch .product-miniature .fuix-wishlist-overlay .ti-heart,
  body#module-leoproductsearch-productsearch .product-miniature .fuix-wishlist-overlay .icon-wishlist {
    font-size: 13px !important;
    color: #202b31 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
  }

}

/* =====================================================================
   FUIX — HEADER DESKTOP WHITE v3 (min-width: 992px)
   Struttura DOM reale:
     #header > .header-container
       .header-nav > .topnav > col-xl-12 > img.logo        ← RIGA 1 LOGO
       .header-top > .container > .inner
         > .ApRow[style="background:#000000"]              ← RIGA 2 MENU+ALTRI
             ApColumn col-xl-9  → menu (ApMegamenu)
             ApColumn col-xl-3  → search + cart + account + social

   FIX CHIAVE v3:
   - Bootstrap col-xl-9/col-xl-3 limitano lo spazio (75%/25%)
   - Col-xl-3 = solo ~285px su 1366px → non basta per search+cart+account
   - Soluzione: override COMPLETO delle larghezze Bootstrap con flex puro
     Col menu  → flex:1 1 auto  (prende tutto lo spazio rimanente)
     Col right → flex:0 0 360px (larghezza fissa = search 210px + icons + gaps)
   NON tocca mobile (max-width: 991px).
   ===================================================================== */

@media (min-width: 992px) {

  /* ── 0. CONTAINER E GAPS ─────────────────────────────────────────── */
  #header,
  #header .header-container {
    background: #fff !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    box-shadow: none !important;
  }

  #wrapper,
  #main-content-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ── 1. RIGA LOGO ────────────────────────────────────────────────── */
  /* Struttura reale (fullwidth_hook=null, nessun .container):
       .header-nav > .topnav > .inner > [AppageBuilder logo output]
     L'ApRow del menu ha padding: 0 16px → SCARPE inizia a 16px da sinistra.
     Per allineamento: .topnav .inner usa padding: 0 16px → logo allineato con SCARPE.
     Col2 usa right: 16px → search/cart/login allineati con OUTDOOR.          */
  #header .header-nav {
    background: #fff !important;
    position: relative !important;
    min-height: 72px !important;
    padding: 0 !important;
    overflow: visible !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
  }

  #header .topnav {
    padding: 0 !important;
    background: transparent !important;
    width: 100% !important;
    height: 72px !important;
  }

  /* .inner contiene il logo: padding 16px = uguale al menu ApRow → allineamento */
  #header .topnav .inner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 16px !important;
    height: 72px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* ApRow e ApColumn dentro topnav: flex-start, no centering, no padding extra */
  #header .topnav .ApRow,
  #header .topnav .ApColumn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
  }

  /* Logo: allineato a sinistra, dimensione uniforme */
  #header .header-nav img.logo,
  #header .topnav img.logo {
    max-height: 50px !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important;
  }

  /* ── 2. RIGA MENU: sfondo bianco, sovrascrive inline #000 ─────────
     .ApRow ha style="background:#000000" inline → !important
     position:relative → ancora per .ApColumn:nth-child(2) absolute  */
  #header .header-top {
    background: #fff !important;
    padding: 0 !important;
  }

  #header .header-top .ApRow,
  #header .header-top .ApRow.has-bg,
  #header .header-top .ApRow.bg-boxed {
    background: #fff !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 46px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
    position: relative !important;
  }

  /* ── 3. COL MENU: occupa 100% della riga (col right è fuori dal flusso) */
  #header .header-top .ApRow .ApColumn:nth-child(1) {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;      /* override Bootstrap */
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  /* ── 4. COL RIGHT: spostata nella riga logo con position:absolute ──
     top: -72px = sale nella header-nav (min-height: 72px)
     right: 0 = bordo destro del menu (OUTDOOR) */
  #header .header-top .ApRow .ApColumn:nth-child(2) {
    position: absolute !important;
    top: -72px !important;
    right: 0 !important;
    height: 72px !important;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    background: transparent !important;
    overflow: visible !important;
    z-index: 10 !important;
  }

  /* ── 5. MENU: flex row, no wrap, voci dark ───────────────────────
     Il menu usa .leo-top-menu > ul.navbar-nav.megamenu.horizontal  */
  #header .header-top .ApMegamenu,
  #header .header-top .leo-megamenu {
    background: transparent !important;
    width: 100% !important;
  }

  #header .header-top .leo-top-menu {
    background: transparent !important;
    width: 100% !important;
  }

  /* ul.navbar-nav.megamenu.horizontal: riga orizzontale */
  #header .header-top .leo-top-menu .navbar-nav.megamenu.horizontal {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
  }

  /* Ogni nav-item: no shrink, no wrap */
  #header .header-top .leo-top-menu .navbar-nav.megamenu.horizontal > .nav-item {
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* Link voci menu: ora menu ha 100% larghezza (col right è in posizione assoluta)
     Font 15.5px pad 13px → buona leggibilità senza overflow su 1366px          */
  #header .header-top .leo-top-menu .navbar-nav.megamenu.horizontal > .nav-item > .nav-link {
    display: flex !important;
    align-items: center !important;
    color: #050505 !important;
    padding: 13px 13px !important;
    font-size: 15.5px !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
    background: transparent !important;
    border-bottom: 2px solid transparent !important;
    text-decoration: none !important;
    transition: color 0.15s, border-color 0.15s !important;
  }

  /* Hover: sottolineatura arancio */
  #header .header-top .leo-top-menu .navbar-nav.megamenu.horizontal > .nav-item > .nav-link:hover {
    color: #202b31 !important;
    border-bottom-color: #f28c28 !important;
    opacity: 1 !important;
    background: transparent !important;
  }

  /* Voce attiva */
  #header .header-top .leo-top-menu .navbar-nav.megamenu.horizontal > .nav-item.active > .nav-link {
    color: #202b31 !important;
    border-bottom-color: #f28c28 !important;
    opacity: 1 !important;
  }

  /* Caret dropdown */
  #header .header-top .leo-top-menu .navbar-nav.megamenu.horizontal > .nav-item.parent > .nav-link .caret,
  #header .header-top .leo-top-menu b.caret {
    border-top-color: #1a1a1a !important;
  }

  /* ── 6. SOCIAL ICONS — nascosti nell'header desktop ─────────────── */
  #header .block-social {
    display: none !important;
  }

  /* ── 7. SEARCH BAR ─────────────────────────────────────────────────
     Width 255px: input(213) + button(42) = 255px
     Con gap:12px e account(36)+cart(36) = ~351px totale col right  */
  #header .header-top #leo_search_block_top {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 255px !important;
    width: 255px !important;
    min-width: 200px !important;
    max-width: 255px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  #header .header-top #leo_search_block_top .title_block,
  #header .header-top #leo_search_block_top .list-cate-wrapper,
  #header .header-top #leo_search_block_top .ac_results,
  #header .header-top #leo_search_block_top .leoproductsearch-loading {
    display: none !important;
  }

  #header .header-top #leo_search_block_top form#leosearchtopbox {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header .header-top #leo_search_block_top .block_content {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  #header .header-top #leo_search_block_top .leoproductsearch-result {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Input: bordo chiaro, bg leggermente grigio */
  #header .header-top #leo_search_block_top input.search_query {
    flex: 1 1 auto !important;
    height: 36px !important;
    border: 1px solid #ddd !important;
    border-right: none !important;
    border-radius: 4px 0 0 4px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    background: #fafafa !important;
    color: #222 !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, background 0.2s !important;
  }

  #header .header-top #leo_search_block_top input.search_query::placeholder {
    color: #aaa !important;
  }

  #header .header-top #leo_search_block_top input.search_query:focus {
    background: #fff !important;
    border-color: #bbb !important;
  }

  /* Bottone search: antracite */
  #header .header-top #leo_search_block_top #leo_search_top_button {
    flex: 0 0 42px !important;
    height: 36px !important;
    width: 42px !important;
    padding: 0 !important;
    background: #202b31 !important;
    border: 1px solid #202b31 !important;
    border-left: none !important;
    border-radius: 0 4px 4px 0 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
  }

  #header .header-top #leo_search_block_top #leo_search_top_button:hover {
    background: #333 !important;
    border-color: #333 !important;
  }

  #header .header-top #leo_search_block_top #leo_search_top_button i {
    font-size: 16px !important;
    color: #fff !important;
    line-height: 1 !important;
  }

  /* ── 8. ACCOUNT (#leo_block_top) ──────────────────────────────────── */
  #header .header-top #leo_block_top {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header .header-top #leo_block_top .popup-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    color: #202b31 !important;
    font-size: 20px !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    transition: background 0.15s !important;
  }

  #header .header-top #leo_block_top .popup-title:hover {
    background: rgba(0,0,0,.06) !important;
  }

  /* ── 9. CART (#_desktop_cart) ─────────────────────────────────────── */
  #header .header-top #_desktop_cart {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header .header-top #_desktop_cart .blockcart,
  #header .header-top #_desktop_cart .cart-preview {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    position: relative !important;
    background: transparent !important;
  }

  #header .header-top #_desktop_cart .blockcart .header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    position: relative !important;
  }

  #header .header-top #_desktop_cart .blockcart .header a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #202b31 !important;
    font-size: 20px !important;
    text-decoration: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    transition: background 0.15s !important;
  }

  #header .header-top #_desktop_cart .blockcart .header a:hover {
    background: rgba(0,0,0,.06) !important;
  }

  #header .header-top #_desktop_cart .blockcart .header i {
    color: #202b31 !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Badge quantità */
  #header .header-top #_desktop_cart .cart-products-count {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    background: #e53935 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    min-width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 2px !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }

}

/* =====================================================================
   FUIX — DROPDOWN MENU DESKTOP (min-width: 992px)
   Stile elegante per i dropdown delle categorie principali.
   Struttura: .nav-item.parent.dropdown > .dropdown-menu.level1
                > .dropdown-menu-inner > .row > .mega-col > ul > li
   NON tocca mobile.
   ===================================================================== */

@media (min-width: 992px) {

  /* ── Dropdown container ────────────────────────────────────────────── */
  #header .header-top .leo-top-menu .dropdown-menu.level1 {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.09) !important;
    border-top: 2px solid #f28c28 !important;   /* bordo superiore arancio */
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
    padding: 6px 0 8px !important;
    min-width: 180px !important;
    margin-top: 0 !important;
    z-index: 9999 !important;
  }

  /* ── Inner: rimuove eventuali sfondi del tema ─────────────────────── */
  #header .header-top .leo-top-menu .dropdown-menu-inner {
    background: transparent !important;
    padding: 0 !important;
  }

  #header .header-top .leo-top-menu .dropdown-menu.level1 .row {
    margin: 0 !important;
  }

  #header .header-top .leo-top-menu .dropdown-menu.level1 .mega-col {
    padding: 0 !important;
  }

  #header .header-top .leo-top-menu .dropdown-menu.level1 ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── Singola voce sottomenu ────────────────────────────────────────── */
  #header .header-top .leo-top-menu .dropdown-menu.level1 .nav-item {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.04) !important;
  }

  #header .header-top .leo-top-menu .dropdown-menu.level1 .nav-item:last-child {
    border-bottom: none !important;
  }

  #header .header-top .leo-top-menu .dropdown-menu.level1 .nav-item .nav-link {
    display: block !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111 !important;
    letter-spacing: 0.05px !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: color 0.12s, background 0.12s, padding-left 0.12s !important;
    border-bottom: none !important;  /* override regola menu-link generale */
  }

  /* Hover: leggero spostamento e colore arancio */
  #header .header-top .leo-top-menu .dropdown-menu.level1 .nav-item .nav-link:hover {
    color: #f28c28 !important;
    background: #f7f7f7 !important;
    padding-left: 24px !important;
    opacity: 1 !important;
    border-bottom: none !important;
  }

  /* ── Span menu-title dentro il dropdown ───────────────────────────── */
  #header .header-top .leo-top-menu .dropdown-menu.level1 .menu-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: none !important;   /* NO uppercase nelle sotto-voci */
    letter-spacing: 0.05px !important;
    line-height: 1.3 !important;
  }

  /* ── Trigger voce principale: hover apre dropdown ─────────────────── */
  #header .header-top .leo-top-menu .nav-item.parent.dropdown:hover > .dropdown-menu.level1 {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* ── Caret accanto alla voce principale ───────────────────────────── */
  #header .header-top .leo-top-menu .nav-item.parent.dropdown > .nav-link .caret {
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 4px solid #1a1a1a !important;
    margin-left: 4px !important;
    vertical-align: middle !important;
  }

}

/* =====================================================================
   FUIX — DESKTOP FIX v1 (min-width: 992px) — 2026-06-08
   
   Correzioni grafiche desktop:
   1. Header: allineamento coerente su home + listing/category/brand/search
   2. Card prodotto: compare rimosso, wishlist a bottom-right, SCEGLI pieno
   3. Prezzi: centrati su listing desktop
   
   DOM reale verificato dal live (curl):
   
   HEADER:
   - Homepage:  header-top > .container > .inner > ApRow.has-bg
   - Listing:   header-top > .inner > ApRow.has-bg     ← manca .container
   → Gap: 15px (container padding) + logo row indent = shift visibile a sinistra
   → Fix: aggiunge padding-left: 15px al .inner diretto di .header-top
   
   CARD (ApPageBuilder template, plist-center):
     .thumbnail-container
       .product-image                         ← solo "product-image" (no thumbnail-top)
       .fuix-wishlist-overlay > .wishlist     ← overlay position:absolute
       .product-meta > .pro-info
         .pro-btn
           .button-container.cart             ← "Scegli opzioni" attuale: calc(100%-82px)
           .compare > a.leo-compare-button    ← DA NASCONDERE
   
   PROBLEMA SPAZIO BIANCO: .button-container ha width:calc(100%-82px) dal tema
   (pensato per 2 bottoni: wishlist+compare). Wishlist spostata in overlay,
   ma width non aggiornata → 82px di vuoto a destra dopo lo spazio compare.
   Fix: width: 100% su button-container desktop (compare nascosto).
   
   WISHLIST DESKTOP: spostata a bottom:0; right:0 allineata con pro-btn.
   Button styled come btn-product del tema (background #2a363b, 40×40px).
   ===================================================================== */

@media (min-width: 992px) {

  /* ═══════════════════════════════════════════════════════════════════
     1. HEADER DESKTOP — ALLINEAMENTO COERENTE SU TUTTE LE PAGINE
     
     Su listing/category/brand/search manca .container dentro .header-top.
     Homepage: header-top > .container (padding:15px) > .inner > ApRow
     Listing:  header-top > .inner > ApRow  ← logo e menu sfasati di 15px
     
     Selettore: header-top > .inner (figlio DIRETTO) = solo pagine listing.
     Sul sito home .inner è dentro .container → non matchato da ">".
     max-width: 1440px replica il .container del tema (@min-width:1200px).
  ═══════════════════════════════════════════════════════════════════ */
  #header .header-top > .inner {
    max-width: 1440px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  /* ═══════════════════════════════════════════════════════════════════
     2. CARD DESKTOP — COMPARE RIMOSSO
     
     Copre: .compare (wrapper div), a.leo-compare-button,
     .ap-btn-compare (variante brand page), [class*="compare"] generico.
     :not() evita falsi positivi su price/description.
     Non toccato mobile (solo @media min-width:992px).
  ═══════════════════════════════════════════════════════════════════ */
  body:not(#index):not(#product) .product-miniature .compare,
  body:not(#index):not(#product) .ajax_block_product .compare,
  body:not(#index):not(#product) .product-miniature .leo-compare-button,
  body:not(#index):not(#product) .ajax_block_product .leo-compare-button,
  body:not(#index):not(#product) .product-miniature [class*="compare"]:not(.product-price-and-shipping):not(.product-description-short):not(.product-description),
  body:not(#index):not(#product) .ajax_block_product [class*="compare"]:not(.product-price-and-shipping):not(.product-description-short):not(.product-description) {
    display: none !important;
  }

  /* ═══════════════════════════════════════════════════════════════════
     3. BUTTON-CONTAINER ("SCEGLI OPZIONI") — LARGHEZZA PIENA
     
     Tema: .plist-center .pro-btn > div.button-container { width: calc(100%-82px) }
     82px = 2 bottoni originali (wishlist+compare) × 40px + margini.
     Con compare rimosso e wishlist nell'overlay, button-container deve
     occupare tutto lo spazio tranne 41px (il cuore a destra).
     
     Layout risultante: [SCEGLI OPZIONI ── calc(100%-41px) ──] [♡ 40px]
  ═══════════════════════════════════════════════════════════════════ */
  body:not(#index):not(#product) .plist-center .thumbnail-container .pro-btn > div.button-container,
  body:not(#index):not(#product) .plist-center .thumbnail-container .pro-btn > .button-container {
    width: calc(100% - 41px) !important;
    max-width: calc(100% - 41px) !important;
    margin: 0 !important;
    float: left !important;
  }

  /* ═══════════════════════════════════════════════════════════════════
     4. WISHLIST OVERLAY DESKTOP — SPOSTATA A BOTTOM-RIGHT (allineata pro-btn)
     
     Override della regola globale (non in media-query):
       top: 7px; right: 7px; width: 28px; height: 28px
     
     Desktop: bottom: 0; right: 0; width: 40px; height: 40px
     → Cuore visibile SEMPRE in basso a destra (non solo su hover)
     → Su hover: pro-btn [SCEGLI OPZIONI calc(100%-41px)] appare a sinistra del cuore
     → Z-index 26 > pro-btn default per garantire cliccabilità cuore
  ═══════════════════════════════════════════════════════════════════ */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay {
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 26 !important;
  }

  /* Cerchio → quadrato 40×40 (matching altezza pro-btn del tema) */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .wishlist {
    width: 40px !important;
    height: 40px !important;
    background: #2a363b !important;  /* stesso bg del btn-product tema */
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay button.leo-wishlist-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 0 !important;
    background: #2a363b !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 16px !important;
    flex: none !important;
  }

  /* Icona cuore: bianca su sfondo scuro */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-wishlist-bt-content {
    width: 40px !important;
    height: 40px !important;
  }

  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-wishlist-bt-content i,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .ti-heart,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .icon-wishlist {
    color: #fff !important;
    font-size: 16px !important;
  }

  /* Hover cuore: arancione brand (coerente con btn-product:hover) */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button:hover,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay button.leo-wishlist-button:hover {
    background: #eb7025 !important;
    color: #fff !important;
  }
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button:hover .ti-heart,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button:hover .icon-wishlist,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay button.leo-wishlist-button:hover .ti-heart {
    color: #fff !important;
  }

  /* Cuore rosso quando prodotto già in wishlist (override colore bianco) */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-wishlist-button.added .leo-wishlist-bt-content i {
    color: #e53935 !important;
  }

  /* ═══════════════════════════════════════════════════════════════════
     5. PREZZI CENTRATI SU LISTING DESKTOP
     
     Override della regola globale (non media-query) che usa align-items:flex-start.
     Centra: prezzo, prezzo barrato, badge sconto arancione.
     Non tocca mobile (regola è solo dentro min-width:992px).
  ═══════════════════════════════════════════════════════════════════ */
  body:not(#index):not(#product) .product-miniature .product-price-and-shipping,
  body:not(#index):not(#product) .ajax_block_product .product-price-and-shipping {
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
  }

}
/* ── fine FUIX DESKTOP FIX v1 ─────────────────────────────────────── */

/* =====================================================================
   FUIX — DESKTOP WISHLIST FIX v2 (min-width: 992px) — 2026-06-08
   
   PROBLEMA v1: cuore posizionato a bottom:0;right:0 del thumbnail-container
   (= fondo intera card, sotto product-meta). Non visibile/raggiungibile.
   
   CORREZIONE v2:
   - Cuore → overlay immagine TOP-RIGHT (top:12px; right:12px)
   - Cerchio bianco 36×36px con ombra leggera
   - Icona cuore antracite (#202b31)
   - button-container → 100% larghezza (cuore non occupa spazio nella riga)
   
   Layout corretto:
     [ immagine prodotto          ♡ ]  ← cuore overlay top-right
     [ varianti colore               ]
     [ titolo centrato               ]
     [ prezzo centrato               ]
     [ SCEGLI OPZIONI — 100% width   ]  ← pieno
   
   Override preciso su ogni regola della sezione DESKTOP FIX v1
   che riguarda wishlist e button-container.
   Mobile invariato (tutto dentro min-width:992px).
   ===================================================================== */

@media (min-width: 992px) {

  /* ── thumbnail-container: position:relative garantito su desktop ── */
  body:not(#index):not(#product) .product-miniature .thumbnail-container,
  body:not(#index):not(#product) .ajax_block_product  .thumbnail-container {
    position: relative !important;
    overflow: visible !important;
  }

  /* ── BUTTON-CONTAINER: larghezza 100% (cuore non è nella riga btn) ──
     Override del calc(100% - 41px) impostato in DESKTOP FIX v1.
     Compare è nascosto → solo "SCEGLI OPZIONI" rimane → occupa tutto. */
  body:not(#index):not(#product) .plist-center .thumbnail-container .pro-btn > div.button-container,
  body:not(#index):not(#product) .plist-center .thumbnail-container .pro-btn > .button-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }

  /* ── CUORE WISHLIST: overlay TOP-RIGHT sull'immagine ──
     Posizione: top:12px; right:12px (sopra l'immagine, angolo alto a destra)
     Override totale della sezione 4 di DESKTOP FIX v1 (bottom:0;right:0). */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    bottom: auto !important;        /* annulla bottom:0 di DESKTOP FIX v1 */
    left: auto !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 30 !important;
    pointer-events: auto !important;
    display: block !important;
  }

  /* Wrapper .wishlist: cerchio bianco con ombra */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .wishlist,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay .wishlist {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;   /* reset sfondo scuro di v1 */
    border-radius: 50% !important;
    box-shadow: none !important;
  }

  /* Bottone wishlist: cerchio bianco, ombra leggera, icona antracite */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay a.leo-wishlist-button,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay button.leo-wishlist-button,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay button.leo-wishlist-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 50% !important;        /* cerchio */
    background: #ffffff !important;       /* bianco */
    color: #202b31 !important;            /* antracite */
    border: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.15) !important;
    padding: 0 !important;
    font-size: 0 !important;              /* nasconde testo residuo */
    flex: none !important;
    cursor: pointer !important;
    transition: background .18s, box-shadow .18s !important;
  }

  /* Hover: sfondo leggermente grigio + ombra più marcata */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button:hover,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay a.leo-wishlist-button:hover,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay button.leo-wishlist-button:hover,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay button.leo-wishlist-button:hover {
    background: #f5f5f5 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.22) !important;
    color: #202b31 !important;
  }

  /* leo-wishlist-bt-content: contenitore icona */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-wishlist-bt-content,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay .leo-wishlist-bt-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 0 !important;            /* nasconde testo */
  }

  /* Icona cuore: antracite, 15px, visibile */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-wishlist-bt-content i,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay .leo-wishlist-bt-content i,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .ti-heart,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay .ti-heart,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .icon-wishlist,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay .icon-wishlist {
    display: inline-block !important;   /* override tema: .thumbnail-container .btn-product i { display:none } */
    font-size: 15px !important;
    color: #202b31 !important;          /* antracite */
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hover icona: rimane antracite (sfondo già cambia colore) */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button:hover .ti-heart,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button:hover .icon-wishlist,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button:hover .leo-wishlist-bt-content i {
    color: #202b31 !important;
  }

  /* Cuore rosso quando prodotto già in wishlist */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-wishlist-button.added .ti-heart,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-wishlist-button.added .icon-wishlist,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-wishlist-button.added .leo-wishlist-bt-content i {
    color: #e53935 !important;
  }

  /* Testo "Lista dei desideri": SEMPRE nascosto */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .name-btn-product,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay .name-btn-product {
    display: none !important;
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Loading spinner: nascosto (si mostra quando necessario via JS) */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-wishlist-bt-loading,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay .leo-wishlist-bt-loading {
    display: none !important;
  }

  /* Dropdown wishlist multipla: nascosta nel overlay */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-list-wishlist,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay .leo-list-wishlist {
    display: none !important;
  }

}
/* ── fine FUIX DESKTOP WISHLIST FIX v2 ───────────────────────────── */

/* =====================================================================
   FUIX — DESKTOP WISHLIST TWEAK v3 (min-width: 992px) — 2026-06-08
   
   Micro-ritocchi su v2: dimensioni più compatte, hover con arancione brand.
   Override preciso su singole proprietà; tutto il resto resta da v2.
   Mobile invariato.
   ===================================================================== */
@media (min-width: 992px) {

  /* ── Dimensione overlay: 36px → 32px ── */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay {
    width: 32px !important;
    height: 32px !important;
  }

  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .wishlist,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay .wishlist {
    width: 32px !important;
    height: 32px !important;
  }

  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay a.leo-wishlist-button,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay button.leo-wishlist-button,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay button.leo-wishlist-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.12) !important;
    transition: background .15s, color .15s, box-shadow .15s !important;
  }

  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-wishlist-bt-content,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay .leo-wishlist-bt-content {
    width: 32px !important;
    height: 32px !important;
  }

  /* ── Icona: 15px → 14px ── */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .leo-wishlist-bt-content i,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay .leo-wishlist-bt-content i,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .ti-heart,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay .ti-heart,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay .icon-wishlist,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay .icon-wishlist {
    font-size: 14px !important;
  }

  /* ── Hover: sfondo bianco puro + ombra + icona arancione brand ── */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button:hover,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay a.leo-wishlist-button:hover,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay button.leo-wishlist-button:hover,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay button.leo-wishlist-button:hover {
    background: #fff !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.18) !important;
    color: #f28c28 !important;
  }

  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button:hover .ti-heart,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay a.leo-wishlist-button:hover .ti-heart,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button:hover .icon-wishlist,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay a.leo-wishlist-button:hover .icon-wishlist,
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button:hover .leo-wishlist-bt-content i,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay a.leo-wishlist-button:hover .leo-wishlist-bt-content i {
    color: #f28c28 !important;   /* arancione brand FUIX */
  }

}
/* ── fine FUIX DESKTOP WISHLIST TWEAK v3 ─────────────────────────── */

/* =====================================================================
   FUIX — DESKTOP CARD MICRO-TWEAK v4 (min-width: 992px) — 2026-06-08

   1. Cuore wishlist: top/right 12px → 14px (più interno, card più pulita)
   2. Quickview (.quickview.hidden-md-down): nascosta su desktop listing
      Il tema la mostra su ≥992px con .hidden-md-down (Bootstrap: visibile sopra md).
      La nascondiamo su tutte le pagine listing; non tocca mobile.

   Mobile invariato. Compare invariato (nascosto da v1). Bottone invariato.
   ===================================================================== */
@media (min-width: 992px) {

  /* ── 1. Cuore wishlist: top/right 12 → 14px ── */
  body:not(#index):not(#product) .product-miniature .fuix-wishlist-overlay,
  body:not(#index):not(#product) .ajax_block_product  .fuix-wishlist-overlay {
    top: 14px !important;
    right: 14px !important;
  }

  /* ── 2. Quickview: nascosta su listing desktop ──
     Selettori reali da DOM live: .quickview.hidden-md-down > a.quick-view
     Il .hidden-md-down Bootstrap nasconde già su mobile/tablet (<992px),
     ma mostra su desktop. Forziamo display:none su listing. */
  body:not(#index):not(#product) .product-miniature .quickview,
  body:not(#index):not(#product) .ajax_block_product  .quickview,
  body:not(#index):not(#product) .product-miniature .quick-view,
  body:not(#index):not(#product) .ajax_block_product  .quick-view {
    display: none !important;
  }

}
/* ── fine FUIX DESKTOP CARD MICRO-TWEAK v4 ───────────────────────── */

/* =====================================================================
   FUIX — HOME MOBILE PRODUCT BLOCKS (body#index, max-width: 767px)
   2026-06-08

   Problema: nei product carousel della homepage (New Arrivals, etc.)
   le card mobile mostravano: compare, bottone carrello/azione, layout non
   uniforme. Questo blocco applica lo stesso stile pulito già usato nelle
   listing mobile (body#category, body#search, ecc.).

   DOM reale homepage (ApProductCarousel / ApMegaBlock):
     body#index
       .block.products_block.exclusive.appagebuilder.ApProductCarousel
         .owl-carousel > .owl-item > .ajax_block_product
           .js-product > article.product-miniature
             .thumbnail-container
               .product-image
               .fuix-wishlist-overlay   ← già presente nel markup
               .product-meta
                 .pro-btn
                   .button-container.cart  ← DA NASCONDERE
                   .compare               ← DA NASCONDERE

   Note:
   - fuix-wishlist-overlay è già nel markup (stesse regole listing)
   - desktop invariato (solo max-width: 767px)
   - non tocca body#product, footer, header
   ===================================================================== */
@media (max-width: 767px) {

  /* ── Compare: nascosto su home mobile ── */
  body#index .product-miniature .compare,
  body#index .ajax_block_product .compare,
  body#index .product-miniature .leo-compare-button,
  body#index .ajax_block_product .leo-compare-button,
  body#index .product-miniature [class*="compare"]:not(.product-price-and-shipping):not(.product-description-short),
  body#index .ajax_block_product [class*="compare"]:not(.product-price-and-shipping):not(.product-description-short) {
    display: none !important;
  }

  /* ── Pro-btn e button-container: nascosti su home mobile ──
     Il bottone "Scegli opzioni" / carrello non è utile nel carousel.
     Rimane accessibile tramite click sulla card stessa. */
  body#index .product-miniature .pro-btn,
  body#index .ajax_block_product .pro-btn,
  body#index .product-miniature .button-container,
  body#index .ajax_block_product .button-container {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── Quickview: nascosto su home mobile (come listing) ── */
  body#index .product-miniature .quickview,
  body#index .ajax_block_product .quickview,
  body#index .product-miniature .quick-view,
  body#index .ajax_block_product .quick-view {
    display: none !important;
  }

  /* ── thumbnail-container: position:relative per wishlist overlay ── */
  body#index .product-miniature .thumbnail-container,
  body#index .ajax_block_product .thumbnail-container {
    position: relative !important;
    overflow: visible !important;
  }

  /* ── Titolo prodotto: centrato ── */
  body#index .product-miniature .product-title,
  body#index .ajax_block_product .product-title,
  body#index .product-miniature .h3.product-title,
  body#index .ajax_block_product .h3.product-title {
    text-align: center !important;
  }

  /* ── Prezzi: centrati ── */
  body#index .product-miniature .product-price-and-shipping,
  body#index .ajax_block_product .product-price-and-shipping {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* ── Wishlist overlay su home mobile: stesse dimensioni delle listing ──
     Le regole globali (body:not(#index):not(#product)) NON coprono body#index.
     Qui le replichiamo esplicitamente. */
  body#index .product-miniature .fuix-wishlist-overlay,
  body#index .ajax_block_product .fuix-wishlist-overlay {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: 32px !important;
    height: 32px !important;
    z-index: 30 !important;
    pointer-events: auto !important;
    display: block !important;
  }

  body#index .product-miniature .fuix-wishlist-overlay .wishlist,
  body#index .ajax_block_product .fuix-wishlist-overlay .wishlist {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 50% !important;
    box-shadow: none !important;
  }

  body#index .product-miniature .fuix-wishlist-overlay a.leo-wishlist-button,
  body#index .ajax_block_product .fuix-wishlist-overlay a.leo-wishlist-button,
  body#index .product-miniature .fuix-wishlist-overlay button.leo-wishlist-button,
  body#index .ajax_block_product .fuix-wishlist-overlay button.leo-wishlist-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.92) !important;
    color: #202b31 !important;
    border: none !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.13) !important;
    padding: 0 !important;
    font-size: 0 !important;
    flex: none !important;
    cursor: pointer !important;
  }

  body#index .product-miniature .fuix-wishlist-overlay .leo-wishlist-bt-content,
  body#index .ajax_block_product .fuix-wishlist-overlay .leo-wishlist-bt-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 0 !important;
  }

  /* Icona cuore: antracite, 13px, visibile */
  body#index .product-miniature .fuix-wishlist-overlay .leo-wishlist-bt-content i,
  body#index .ajax_block_product .fuix-wishlist-overlay .leo-wishlist-bt-content i,
  body#index .product-miniature .fuix-wishlist-overlay .ti-heart,
  body#index .ajax_block_product .fuix-wishlist-overlay .ti-heart,
  body#index .product-miniature .fuix-wishlist-overlay .icon-wishlist,
  body#index .ajax_block_product .fuix-wishlist-overlay .icon-wishlist {
    display: inline-block !important;
    font-size: 13px !important;
    color: #202b31 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Testo "Add to Wishlist" / "Lista dei desideri": nascosto */
  body#index .product-miniature .fuix-wishlist-overlay .name-btn-product,
  body#index .ajax_block_product .fuix-wishlist-overlay .name-btn-product {
    display: none !important;
  }

  /* Cuore rosso se già in wishlist */
  body#index .product-miniature .fuix-wishlist-overlay .leo-wishlist-button.added .ti-heart,
  body#index .ajax_block_product .fuix-wishlist-overlay .leo-wishlist-button.added .ti-heart,
  body#index .product-miniature .fuix-wishlist-overlay .leo-wishlist-button.added .icon-wishlist {
    color: #e53935 !important;
  }

}
/* ── fine FUIX HOME MOBILE PRODUCT BLOCKS ──────────────────────── */

/* =====================================================================
   FUIX — NASCONDI "SCEGLI OPZIONI" DESKTOP LISTING (min-width: 992px)
   2026-06-08

   Problema: nelle card listing desktop compare il bottone "SCEGLI OPZIONI"
   (classe fuix-choose-options). Sul sito USA il testo è in italiano → brutto.
   La card è già navigabile via immagine/titolo (link diretti al prodotto).

   DOM reale (verificato live su /en/685-shoes):
     .plist-center .thumbnail-container
       .pro-btn   ← position:absolute; bottom:0; mostra su hover
         .button-container.cart
           a.btn.btn-primary.btn-product.add-to-cart.fuix-choose-options

   Soluzione:
   - Nasconde .pro-btn su TUTTE le listing desktop (body:not(#index):not(#product))
   - Annulla anche il translateY(-40px) del product-meta su hover (evita spazio vuoto)
   - Wishlist overlay (.fuix-wishlist-overlay) NON è dentro .pro-btn → rimane visibile
   - Compare già nascosto da DESKTOP FIX v1 → non toccato
   - Mobile invariato (solo min-width:992px)
   - Pagina prodotto esclusa dal selettore (:not(#product))
   - 2026-06-21: estesa a min-width:768px (prima il bottone tornava
     visibile nella fascia 768-991px, "tablet"/desktop stretto)
   ===================================================================== */
@media (min-width: 768px) {

  /* Nasconde l'intera barra azione (pro-btn) nelle card listing desktop.
     .fuix-wishlist-overlay è FUORI dal pro-btn → resta visibile come overlay. */
  body:not(#index):not(#product) .plist-center .thumbnail-container .pro-btn,
  body:not(#index):not(#product) .product-miniature .pro-btn,
  body:not(#index):not(#product) .ajax_block_product  .pro-btn {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Annulla il translateY(-40px) del product-meta su hover:
     senza il pro-btn non c'è spazio da liberare, la card resta statica. */
  body:not(#index):not(#product) .plist-center .thumbnail-container:hover .product-meta,
  body:not(#index):not(#product) .product-miniature .thumbnail-container:hover .product-meta {
    transform: translateY(0) !important;
    transition: none !important;
  }

  /* Annulla anche il box-shadow hover (pulizia visiva) */
  body:not(#index):not(#product) .plist-center .thumbnail-container:hover {
    box-shadow: none !important;
  }

}
/* ── fine FUIX NASCONDI SCEGLI OPZIONI DESKTOP ──────────────────── */

/* =====================================================================
   FUIX — HEADER DESKTOP PROPORZIONALE v1 (min-width: 992px) — 2026-06-10
   
   ROOT CAUSE:
   .topnav .inner (riga logo) → width:100% senza max-width
   .header-top .container     → Bootstrap max-width:1440px; margin:0 auto
   
   A viewport >1440px il .container si centra (es. a 1920px: offset 240px)
   mentre il logo rimane ancorato a left:16px del viewport → disallineamento.
   
   FIX:
   1. .topnav .inner — aggiunge max-width:1440px + margin:0 auto
      → logo row centrata come menu row
   2. .header-top .container — padding:0 (rimuove i 15px Bootstrap)
      → solo .ApRow padding (16px) — allineamento logo/menu coerente
   3. .ApColumn:nth-child(2) — right:16px (era 0)
      → icone simmetriche rispetto al logo (entrambi a 16px dai bordi)
   
   SCOPE: globale desktop (migliora header su tutte le pagine,
   non solo homepage). Nessun impatto mobile (dentro min-width:992px).
   ===================================================================== */
@media (min-width: 992px) {

  /* 1. LOGO ROW — allineamento con menu row */
  #header .topnav .inner {
    max-width: 1440px !important;
    margin-left:  auto !important;
    margin-right: auto !important;
    /* padding: 0 16px già definito nella regola precedente */
  }

  /* 2. MENU ROW — rimuovi padding Bootstrap .container (15px)
     → contenuto parte da 0+ApRow(16px)=16px, identico a logo row */
  #header .header-top .container {
    padding-left:  0 !important;
    padding-right: 0 !important;
    max-width: 1440px !important;
  }

  /* 3. ICONE (search/cart/login) — right:16px per simmetria con logo */
  #header .header-top .ApRow .ApColumn:nth-child(2) {
    right: 16px !important;   /* era right:0 */
  }

}
/* ── fine FUIX HEADER DESKTOP PROPORZIONALE v1 ───────────────────── */

/* =====================================================================
   FUIX — HEADER DESKTOP PROPORZIONALE v2 (min-width: 992px) — 2026-06-10

   ROOT CAUSE v2:
   v1 allineava logo e menu (Δ=0) ma confinava tutto in max-width:1440px.
   A viewport >1440px si formano margini bianchi (es. 240px a 1920px)
   → header appare isolato/stretto rispetto all'hero full-width sottostante.
   Menu items restano cluster a sinistra (flex-start su col full-width).

   FIX v2 — tre interventi:
   1. Rimuove max-width dai container (topnav + header-top) → header full-width
   2. Sostituisce padding fisso 16px con clamp(16px, 3.5vw, 64px)
      → bordo proporzionale: 64px a 1920px, 50px a 1440px, 45px a 1280px
   3. Nav-link H-padding: clamp(8px, 1.2vw, 18px)
      → voci menu si distanziano proporzionalmente a viewport largo

   PRIMA/DOPO a 1920px:
     logo_x: 256px → 64px   (header allineato con hero, non più isolato)
     icons_x: 256px da destra → 64px da destra

   PRIMA/DOPO a 1440px:
     logo_x: 16px → 50px    (leggero aumento ma più proporzionato)

   OVERRIDE: sovrascrive v1 per cascata (stesso @media, posizione successiva).
   SCOPE: desktop globale (min-width:992px), nessun impatto mobile.
   ===================================================================== */
@media (min-width: 992px) {

  /* 1a. LOGO ROW — .topnav .container full-width (override Bootstrap 1440px) */
  #header .topnav .container {
    max-width: 100% !important;
    width:     100% !important;
    padding-left:  0 !important;
    padding-right: 0 !important;
  }

  /* 1b. LOGO ROW — .inner: rimuovi max-width e margin:auto di v1, usa clamp */
  #header .topnav .inner {
    max-width:    none !important;
    margin-left:  0    !important;
    margin-right: 0    !important;
    padding-left:  clamp(16px, 3.5vw, 64px) !important;
    padding-right: clamp(16px, 3.5vw, 64px) !important;
  }

  /* 2a. MENU ROW — .container full-width (già padding:0 da v1, aggiunge width) */
  #header .header-top .container {
    max-width: 100% !important;
    width:     100% !important;
    padding-left:  0 !important;
    padding-right: 0 !important;
  }

  /* 2b. MENU ROW — ApRow: sostituisce padding 16px fisso con clamp */
  #header .header-top .ApRow,
  #header .header-top .ApRow.has-bg,
  #header .header-top .ApRow.bg-boxed {
    padding-left:  clamp(16px, 3.5vw, 64px) !important;
    padding-right: clamp(16px, 3.5vw, 64px) !important;
  }

  /* 3. ICONE — right corrisponde al padding del ApRow */
  #header .header-top .ApRow .ApColumn:nth-child(2) {
    right: clamp(16px, 3.5vw, 64px) !important;
  }

  /* 4. VOCI MENU — H-padding proporzionale al viewport */
  #header .header-top .leo-top-menu .navbar-nav.megamenu.horizontal > .nav-item > .nav-link {
    padding-left:  clamp(8px, 1.2vw, 18px) !important;
    padding-right: clamp(8px, 1.2vw, 18px) !important;
    /* padding-top/bottom (13px) invariato dalla regola principale */
  }

}
/* ── fine FUIX HEADER DESKTOP PROPORZIONALE v2 ───────────────────── */

/* =====================================================================
   FUIX — MANUFACTURER MOBILE FIX v1 (max-width: 767px) — 2026-06-10

   PROBLEMA 1 — Pannello filtri bianco al click FILTER
   ROOT CAUSE: body#manufacturer #left-column aveva overflow:hidden che
   clippava #search_filters_wrapper anche dopo rimozione .hidden-sm-down.
   FIX PARTE A (già applicato sopra): overflow:hidden → overflow:visible
   nel blocco @media(max-width:767px) esistente (riga ~3629).
   FIX PARTE B (qui): overlay mobile full-screen con position:fixed —
   indipendente dall'overflow del parent, sempre scrollabile, z-index
   sopra tutto il contenuto.

   PROBLEMA 2 — Sort/filter bar disallineata
   ROOT CAUSE: .col-lg-6.col-md-9 (wrapper sort bar) senza col-xs-*
   → Bootstrap 3 non impone width:100% su xs → larghezza variabile.
   FIX: forza width:100% + aggiunge padding orizzontale coerente con
   product grid (stessa inset di 15px Bootstrap).

   SCOPE: solo mobile (max-width:767px), solo body#manufacturer.
   NON tocca: desktop, homepage, GTM, cookie, pagine categoria/search.
   ===================================================================== */
@media (max-width: 767px) {

  /* ── PROBLEMA 1 FIX: filter panel mobile come fixed overlay ──────────
     #search_filters_wrapper parte con .hidden-sm-down (display:none).
     Quando JS rimuove quella classe, il pannello diventa visible.
     position:fixed lo rende indipendente dall'overflow del parent
     (#left-column height:0) e garantisce scrollabilità full-screen. */

  /* Pannello filtri aperto: fixed full-screen + scrollable */
  body#manufacturer #search_filters_wrapper:not(.hidden-sm-down) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 9999 !important;
    background: #fff !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Barra superiore sticky con pulsante OK e clear all */
  body#manufacturer #search_filters_wrapper:not(.hidden-sm-down) #search_filter_controls {
    position: sticky !important;
    top: 0 !important;
    background: #fff !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    border-bottom: 1px solid rgba(0,0,0,.1) !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
  }

  /* Pulsante OK: dark, rounded — coerente con pulsante FILTER */
  body#manufacturer #search_filters_wrapper:not(.hidden-sm-down) #search_filter_controls .ok {
    background: #202b31 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Clear all link nel pannello */
  body#manufacturer #search_filters_wrapper:not(.hidden-sm-down) #_mobile_search_filters_clear_all {
    font-size: 13px !important;
    color: #555 !important;
  }

  /* Contenuto filtri: padding per leggibilità */
  body#manufacturer #search_filters_wrapper:not(.hidden-sm-down) #search_filters {
    padding: 8px 16px 24px !important;
  }

  /* Titolo "Filter By" nel pannello: visibile su mobile nel contesto fixed */
  body#manufacturer #search_filters_wrapper:not(.hidden-sm-down) .h6.hidden-sm-down {
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 12px 0 4px !important;
    margin: 0 !important;
    color: #111 !important;
    text-transform: uppercase !important;
  }

  /* Facet title accordion su mobile */
  body#manufacturer #search_filters_wrapper:not(.hidden-sm-down) .facet .title.hidden-md-up {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    cursor: pointer !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
  }

  /* ── PROBLEMA 2 FIX: sort/filter bar full-width e allineata ─────────
     .col-lg-6.col-md-9 senza col-xs → Bootstrap 3 non forza width:100%
     su xs. Fix: impone esplicitamente width:100% su mobile.
     products-selection: margini verticali coerenti (come body#category). */

  /* Wrapper sort bar: full-width su mobile + padding 0 per allineamento griglia
     SPIEGAZIONE: la griglia prodotti ha .row con margin:-15px → parte da x=0.
     Questo .col-lg-6.col-md-9 ha padding:15px → il sort-bar inizierebbe a x=15.
     Rimuovere il padding porta il sort-bar a x=0, allineato ai bordi dei prodotti. */
  body#manufacturer #js-product-list-top .col-lg-6.col-md-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* products-selection: margini verticali coerenti */
  body#manufacturer #js-product-list-top.products-selection {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* sort-by-row: aggiunge padding orizzontale 15px per allineamento
     con le card prodotto (che partono a 15px dal bordo via Bootstrap col) */
  body#manufacturer #js-product-list-top .sort-by-row {
    padding-left:  0 !important;
    padding-right: 0 !important;
    /* padding left/right già garantito dalla col-lg-6 Bootstrap (0 15px)
       che non viene rimosso in questo fix */
  }

}
/* ── fine FUIX MANUFACTURER MOBILE FIX v1 ───────────────────────── */

/* =====================================================================
   FUIX — MANUFACTURER MOBILE: GRIGLIA PRODOTTI STABILE POST-AJAX v1
   2026-06-10
   -----------------------------------------------------------------------
   PROBLEMA: dopo applicazione filtro ps_facetedsearch, AJAX sostituisce
   #js-product-list. La griglia torna al layout Bootstrap col-xs-6 puro,
   senza le fix di altezza/aspect-ratio/flex già applicate a body#search
   e body#category. Risultato: immagini di altezza variabile, card
   disallineate, titoli/prezzi non allineati tra le 2 colonne.

   SOLUZIONE: replicare per body#manufacturer le stesse regole CSS che
   già stabilizzano la griglia su body#search e body#category (righe
   1440-1686 del file). Le regole CSS sopravvivono all'AJAX: ps_facetedsearch
   inietta nuovo HTML in #js-product-list ma i selettori CSS restano
   applicati (il <body id="manufacturer"> non cambia mai dopo AJAX).

   DOM REALE (confermato via curl https://fuix.com/it/brand/480-bliz):
     #js-product-list
       .products
         .product_list.grid.plist-center
           .row
             .ajax_block_product.col-xs-6  ← 2 col Bootstrap già presente
               article.product-miniature.js-product-miniature
                 .thumbnail-container
                   .product-image  ← contiene <a.thumbnail> + <img loading="lazy">
                   .product-flags
                   .quickview
                   .fuix-wishlist-overlay
                   .product-meta > .pro-info
                     .highlighted-informations (color swatches, nascosto sm-down)
                     h4.product-title
                     .product-price-and-shipping
                     .product-description-short
                     .pro-btn > .button-container + .compare + .leo-wishlist-button-dropdown

   SCOPE: solo mobile (max-width:767px), solo body#manufacturer.
   NON tocca: desktop, homepage, GTM, cookie, fix v1 del pannello filtri.
   ===================================================================== */

/* ── 1. GRIGLIA: CSS grid 2 col + reset Bootstrap columns ─────────── */
@media (max-width: 767px) {

  /* 1a. Contenitore righe: CSS grid 2 colonne (come body#category/search) */
  body#manufacturer .product_list.grid > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 10px !important;
    align-items: stretch !important;
  }

  /* 1b. Ogni cella: reset col-xs-6 Bootstrap + flex column */
  body#manufacturer .product_list.grid > .row > .ajax_block_product {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    clear: none !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 1c. Reset margini delle classi line-position iniettate da PS */
  body#manufacturer .ajax_block_product.first-in-line,
  body#manufacturer .ajax_block_product.last-in-line,
  body#manufacturer .ajax_block_product.last-line,
  body#manufacturer .ajax_block_product.first-item-of-mobile-line,
  body#manufacturer .ajax_block_product.last-item-of-mobile-line {
    clear: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 1d. .js-product wrapper interno: full-width flex column */
  body#manufacturer .ajax_block_product > .js-product {
    width: 100% !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

}

/* ── 2. CARD: flex column stabile, altezza coerente tra righe ──────── */
@media (max-width: 767px) {

  body#manufacturer article.product-miniature,
  body#manufacturer .product-miniature .thumbnail-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

}

/* ── 3. IMMAGINE: aspect-ratio 1:1 + object-fit contain ────────────── */
@media (max-width: 767px) {

  /* Area immagine: aspect-ratio 1:1 fisso — non dipende dall'altezza nativa
     dell'img. Dopo AJAX il browser ricrea le img; con aspect-ratio 1:1
     il placeholder mantiene sempre la stessa altezza. */
  body#manufacturer .product_list.plist-center .product-miniature .product-image,
  body#manufacturer .product-miniature .product-image.thumbnail-top {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  /* Immagine: riempie l'area senza distorcere */
  body#manufacturer .product_list.plist-center .product-miniature .product-image img,
  body#manufacturer .product-miniature .product-image.thumbnail-top img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

}

/* ── 4. DOTS/SLICK: altezza fissa 27px, max 5 pallini, no double-row ── */
@media (max-width: 767px) {

  /* Wrapper dots: riserva sempre 28px sotto l'immagine */
  body#manufacturer .ajax_block_product .product-list-images-mobile {
    padding-bottom: 28px !important;
    box-sizing: content-box !important;
  }

  /* Dots container: flex row, altezza fissa */
  body#manufacturer .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-slider .slick-dots,
  body#manufacturer .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-initialized.slick-dotted .slick-dots {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    list-style: none !important;
    bottom: 4px !important;
    position: absolute !important;
  }

  /* Singolo dot: 8px x 8px */
  body#manufacturer .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-slider .slick-dots li,
  body#manufacturer .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-initialized.slick-dotted .slick-dots li {
    display: block !important;
    flex: 0 0 8px !important;
    width: 8px !important;
    min-width: 8px !important;
    max-width: 8px !important;
    height: 8px !important;
    min-height: 8px !important;
    max-height: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    line-height: 1 !important;
  }

  /* Nasconde dots oltre il 5° (evita overflow altezza) */
  body#manufacturer .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-slider .slick-dots li:nth-child(n+6),
  body#manufacturer .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-initialized.slick-dotted .slick-dots li:nth-child(n+6) {
    display: none !important;
  }

  body#manufacturer .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-slider .slick-dots li button {
    width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    line-height: 8px !important;
  }

  body#manufacturer .product_list.grid.plist-center .ajax_block_product
               .product-list-images-mobile.slick-slider .slick-dots li button:before {
    width: 8px !important;
    height: 8px !important;
    font-size: 8px !important;
    line-height: 8px !important;
    top: 0 !important;
    left: 0 !important;
  }

}

/* ── 5. DESCRIZIONE: flex column, altezze coerenti titolo/prezzo ───── */
@media (max-width: 767px) {

  body#manufacturer .product-miniature .product-meta,
  body#manufacturer .product-miniature .product-description {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }

  /* Titolo: min-height fisso per allineamento verticale inter-colonna */
  body#manufacturer .product-miniature .product-title {
    min-height: 40px !important;
    margin-bottom: 6px !important;
  }

  /* Prezzo: min-height fisso (include eventuale prezzo barrato + prezzo scontato) */
  body#manufacturer .product-miniature .product-price-and-shipping {
    min-height: 66px !important;
  }

  /* Descrizione breve: nascosta su mobile (occupa spazio senza valore) */
  body#manufacturer .product-miniature .product-description-short {
    display: none !important;
  }

}

/* ── 6. PULSANTI: confronto nascosto, carrello + wishlist allineati ── */
@media (max-width: 767px) {

  /* Nascondi pulsante confronto su mobile */
  body#manufacturer .ajax_block_product .compare,
  body#manufacturer .ajax_block_product .leo-compare-button {
    display: none !important;
  }

  /* pro-btn: flex row, carrello flex-grow + wishlist 40px fisso */
  body#manufacturer .ajax_block_product .pro-btn {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  body#manufacturer .ajax_block_product .pro-btn > div {
    float: none !important;
    margin: 0 0 0 1px !important;
  }

  body#manufacturer .ajax_block_product .pro-btn .button-container {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  body#manufacturer .ajax_block_product .pro-btn .leo-wishlist-button-dropdown {
    flex: 0 0 40px !important;
    width: 40px !important;
  }

}
/* ── fine FUIX MANUFACTURER MOBILE: GRIGLIA PRODOTTI STABILE v1 ───── */

/* =====================================================================
   FUIX — FLOATING BUTTONS STACK MOBILE: no sovrapposizione
   2026-06-10
   -----------------------------------------------------------------------
   PROBLEMA: su mobile in basso a destra, due pulsanti fissi si sovrappongono:
     1. #tarteaucitronIcon.tarteaucitronIconBottomRight (cerchio giallo privacy)
        → .tarteaucitronIconBottomRight: bottom:0; right:0
        → #tarteaucitronIcon: position:fixed; z-index:2147483646
        → immagine 50×50px, padding 8px top/bottom, 10px sinistra/destra
        → altezza totale: 8+50+8 = 66px — occupa bottom:0 → bottom:66px
     2. #back-top (cerchio nero back-to-top)
        → theme.css: position:fixed; bottom:10px; right:10px; z-index:90
        → link interno: 36×36px + margin 2px = ~40px diametro
        → occupa bottom:10px → bottom:50px
   SOVRAPPOSIZIONE: entrambi occupano la fascia bottom:10–50px a destra.

   STACK STRATEGY MOBILE (destra, dal basso verso l'alto):
     • Livello 1 — bottom:0  — #tarteaucitronIcon (66px, privacy/cookie) → NON TOCCATO
     • Livello 2 — bottom:80px — #back-top (40px, torna su)
       gap = 80 - 66 = 14px tra top del cookie e bottom del back-top ✓
     • Sinistra (non interferisce): .leo-fly-cart (bottom:20px; left:20px)

   NON TOCCATO: tarteaucitron, GTM, GA4, Meta Pixel, Consent Mode, cookie.
   SCOPE: solo mobile (max-width:767px).
   ===================================================================== */
@media (max-width: 767px) {

  /* Back-to-top: spostato sopra il cookie button giallo.
     Calcolo: tarte occupa 0–66px dal basso → back-top parte da 80px (66+14gap).
     right:10px mantiene l'allineamento visivo col tema (valore originale era 10px). */
  #back-top {
    bottom: 80px !important;
    right: 10px !important;
  }

  /* Assicura che il cerchio back-to-top abbia z-index sotto il cookie overlay
     ma sopra il contenuto pagina. z-index:90 era già nel tema, manteniamo coerenza. */
  #back-top {
    z-index: 9990 !important;
  }

}
/* ── fine FUIX FLOATING BUTTONS STACK MOBILE ────────────────────── */

/* =====================================================================
   FUIX — FLOATING COOKIE ICON: nasconde dopo consenso salvato
   2026-06-10
   -----------------------------------------------------------------------
   Quando l'utente ha già espresso una scelta cookie (accetta / rifiuta /
   personalizza), il cerchio giallo Tarteaucitron su mobile è ridondante
   e si sovrappone al back-to-top.

   MECCANISMO:
   - Il JS in custom_v2.js verifica se esiste cookie "tarteaucitron" con
     almeno un valore =true o =false (consenso espresso).
   - Se sì → aggiunge la classe "fuix-cookie-choice-saved" al <body>.
   - Il CSS qui sotto usa quella classe per nascondere l'icona su mobile
     e riportare #back-top alla posizione classica (bottom:20px).
   - Tarteaucitron rimane funzionante: JS, cookie, consenso invariati.
   - L'utente può sempre riaprire le preferenze via link "Preferenze cookie"
     nel footer (chiamata: tarteaucitron.userInterface.openPanel()).

   SCOPE: solo mobile (max-width:767px).
   NON tocca: GTM, GA4, Meta Pixel, Consent Mode, Tarteaucitron JS.
   ===================================================================== */
/* Quando consenso già espresso: nascondi icona cookie su DESKTOP e MOBILE.
   La scelta è già stata fatta — il cerchio giallo è ridondante ovunque.
   L'utente può sempre riaprire le preferenze via link "Preferenze cookie"
   nel footer (sezione Negozio). */
body.fuix-cookie-choice-saved #tarteaucitronIcon {
  display: none !important;
}

@media (max-width: 767px) {

  /* Riporta back-to-top alla posizione bassa classica (non più a bottom:80px)
     ora che il cerchio giallo non c'è più */
  body.fuix-cookie-choice-saved #back-top {
    bottom: 20px !important;
    right: 10px !important;
  }

}

/* ── FUIX: footer-bottom + wrapper: nascosti globalmente ──────────────
   Il link Preferenze cookie è ora iniettato via JS nella lista "Negozio"
   (ApPageBuilder). L'elemento .fuix-cookie-pref-wrapper nel footer-bottom
   funge solo da sorgente testo localizzato per il JS — non va visualizzato. */
#footer .footer-bottom {
  display: none !important;
}
.fuix-cookie-pref-wrapper {
  display: none !important;
}

/* =====================================================================
   FUIX — FOOTER RIFINITO: DESKTOP + MOBILE
   2026-06-10
   -----------------------------------------------------------------------
   CAUSE DIAGNOSTICATE:
   A) "Preferenze cookie" colore diverso:
      color:inherit su <a> eredita da body{color:#666} invece del corretto
      a{color:#222222} del tema → link appare grigio medio anziché scuro.
   B) Negozio/Link utili disallineati su desktop:
      Browser UA default su <ul> è padding-left:40px. Non resettato nel
      contesto .ApBlockLink → i link sono indentati di 40px rispetto al
      titolo h4.title_block che ha padding-left:0.
   C) Spaziature desktop eccessive:
      ApPageBuilder styles.css imposta .block{margin-bottom:20px} e
      .footer-container{margin-top:30px} globalmente.
   ===================================================================== */

/* ── A) "Preferenze cookie": colore e stile identici agli altri link ─────
   Fonte di verità: theme.css → .footer-container .ApLink li a (display,
   padding, line-height, letter-spacing) + global a{color:#222222} (colore).
   NON usare color:inherit perché il body ha color:#666666. */
.footer-container .ApLink li a.fuix-cookie-pref-link,
.footer-container .ApLink li a.fuix-cookie-pref-link:link,
.footer-container .ApLink li a.fuix-cookie-pref-link:visited {
  display: inline-block !important;    /* .footer-container .ApLink li a */
  line-height: 20px !important;
  padding: 8px 0 !important;
  vertical-align: top !important;
  letter-spacing: 0.14px !important;
  color: #222222 !important;           /* a{color:#222222} — esplicito, non inherit */
  text-decoration: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  opacity: 1 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  width: auto !important;
  margin: 0 !important;
}
.footer-container .ApLink li a.fuix-cookie-pref-link:hover,
.footer-container .ApLink li a.fuix-cookie-pref-link:focus {
  color: #eb7025 !important;           /* a:hover in theme.css */
  text-decoration: underline !important;
  opacity: 1 !important;
}

/* Mobile: override critico — CAUSA del disallineamento su mobile:
   La regola globale ".footer-container .ApColumn a:first-of-type
   { display:block; text-align:center }" (custom.css/custom_v2.css)
   applica display:block a tutti i link dell'accordion (Privacy Policy,
   Termini ecc.). La nostra regola sopra usa display:inline-block !important
   che sovrascrive e fa restare il link sinistrizzato su mobile.
   FIX: su mobile, ripristino display:block + text-align:center. */
@media (max-width: 767px) {
  .footer-container .ApLink li a.fuix-cookie-pref-link {
    display: block !important;       /* FIX: come a:first-of-type sugli altri link */
    text-align: center !important;   /* FIX: centro come Privacy Policy / Termini */
    width: 100% !important;          /* FIX: occupa tutta la larghezza come gli altri */
    font-size: 13px !important;
    padding: 4px 0 !important;
  }
}

/* ── B) Desktop: ALLINEAMENTO DEFINITIVO — Negozio / Link utili ─────────
   =======================================================================
   CAUSE REALI:
   1. text-align non impostato → titolo e link entrambi LEFT-aligned nella
      col-xl-2 (160px). Visivamente sbilanciato per testi corti.
   2. ApPageBuilder .block h4 { padding: 0 5px 17px 0 } → 5px right
   3. ApPageBuilder .block-toggler.ApBlockLink ul li { margin-bottom:1.25rem }
   4. theme.css .footer-container .ApColumn .title_block { margin:0 0 35px }

   STRATEGIA:
   - text-align:center su ogni livello del blocco ApBlockLink (wrapper,
     .title clearfix, h4, ul, li, a) → titolo e link centrati sulla
     stessa asse verticale
   - Reset completo di tutti padding/margin dai 3 CSS sorgenti sopra
   - Newsletter resta left-aligned (colonna destra)
   - Scope: solo desktop (min-width:768px), mobile invariato
   ======================================================================= */
@media (min-width: 768px) {

  /* 1. Wrapper ApBlockLink: centra tutto il contenuto della colonna */
  #footer .footer-center .box-footer .ApBlockLink {
    text-align: center !important;
  }

  /* 2. .title.clearfix: rimuove float residui, forza centro
        (il .float-xs-right è già display:none su desktop via ApPageBuilder) */
  #footer .footer-center .box-footer .ApBlockLink .title {
    text-align: center !important;
    float: none !important;
    overflow: hidden !important;    /* mantiene clearfix behavior */
    width: 100% !important;
  }

  /* 3. h4.title_block: reset COMPLETO di tutti i padding/margin dai 3 sorgenti
        - ApPageBuilder .title_block: padding:20px 0
        - ApPageBuilder .block h4: padding:0 5px 17px 0  ← source #2 più specif.
        - theme.css .footer-container .ApColumn .title_block: margin:0 0 35px
        → Risultato desiderato: padding:0 0 16px 0, margin:0 0 16px 0, centrato */
  #footer .footer-center .box-footer .ApBlockLink h4.title_block {
    padding: 0 0 16px 0 !important;
    margin: 0 0 16px 0 !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* 4. ul.collapse: reset UA default + centra
        - Browser UA: padding-left:40px → zeroed
        - ApPageBuilder: nessuna regola su ul direttamente */
  #footer .footer-center .box-footer .ApBlockLink ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* 5. li: reset margin ApPageBuilder (1.25rem=20px) → 10px, centra
        - ApPageBuilder .block-toggler.ApBlockLink ul li: margin-bottom:1.25rem */
  #footer .footer-center .box-footer .ApBlockLink ul li {
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    list-style: none !important;
    text-align: center !important;
  }

  /* 6. a: inline-block centrato — stessa struttura di .footer-container .ApLink li a
        Nessun width fisso → si adatta al testo del link */
  #footer .footer-center .box-footer .ApBlockLink ul li a {
    display: inline-block !important;
    text-align: center !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* 7. "Preferenze cookie" iniettato: garantisce coerenza con gli altri link
        (anche se già gestito dalla regola A, qui forziamo text-align:center) */
  #footer .footer-center .box-footer .ApBlockLink ul li a.fuix-cookie-pref-link {
    text-align: center !important;
    display: inline-block !important;
    width: auto !important;
  }
}

/* ── C) Desktop: spaziature e newsletter ────────────────────────────── */
@media (min-width: 768px) {

  /* footer-container: azzera margin-top eccessivo da ApPageBuilder (30px)
     e riduce il padding-top (90px desktop / 50px ≤991px da
     appagebuilder/styles.css) che crea lo spazio bianco eccessivo sopra
     le icone social — 2026-06-22 */
  #footer.footer-container {
    margin-top: 0 !important;
    padding-top: 12px !important;
  }

  /* box-footer: padding verticale sobrio */
  #footer .footer-center .box-footer {
    padding-top: 36px !important;
    padding-bottom: 28px !important;
  }

  /* box-copyright: proporzionata */
  #footer .footer-center .box-copyright {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    margin-top: 0 !important;
  }

  /* .block {margin-bottom:20px} da ApPageBuilder: azzera in footer */
  #footer .footer-center .box-footer .block {
    margin-bottom: 0 !important;
    clear: none !important;
  }

  /* Logo: margine sotto controllato */
  #footer .footer-center .box-footer .logo,
  #footer .footer-center .box-footer img.logo {
    margin-bottom: 18px !important;
  }

  /* ApRawHtml (testo aziendale): nessun margin extra */
  #footer .footer-center .box-footer .ApRawHtml.block,
  #footer .footer-center .box-footer .block.ApRawHtml {
    margin-bottom: 0 !important;
  }

  /* Newsletter: titolo centrato sopra il riquadro di iscrizione
     (2026-06-22: prima era left-align, disallineato rispetto al box
     dell'input email sottostante) */
  #footer .footer-center .block_newsletter {
    text-align: center !important;
    padding-top: 0 !important;
  }

  #footer .footer-center .block_newsletter h3.title_block,
  #footer .footer-center .block_newsletter .title_block {
    text-align: center !important;
    padding: 0 0 14px 0 !important;
    margin: 0 0 14px 0 !important;
  }

  /* Copyright text */
  #footer .footer-center .box-copyright .nqt-copyright {
    margin-bottom: 0 !important;
  }

  #footer .footer-center .box-copyright .block.ApImage,
  #footer .footer-center .box-copyright .ApImage {
    margin-bottom: 0 !important;
  }
}

/* ── C2) Desktop: social icons — riduce distanza dal footer ─────────────
   Le icone social sono in footer-top (piena larghezza).
   .block-social ha padding:16px 0 12px (regola globale già presente).
   Su desktop, riduciamo il padding del wrapper footer-top per avvicinarle
   al footer e ridurre l'effetto "galleggiante". */
@media (min-width: 768px) {
  #footer .footer-top {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* L'ApRow vuoto in footer-top (2 col-xl-12 senza contenuto):
     ha altezza 0 per default (flex con contenuto vuoto), ma azzeriamo
     esplicitamente per sicurezza */
  #footer .footer-top .inner > .row.ApRow {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  /* Social block: padding ridotto per avvicinarsi al footer-center */
  #footer .footer-top .block-social {
    padding: 12px 0 10px !important;
  }
}

/* =====================================================================
   FUIX — FOOTER MOBILE: FIX DEFINITIVO ALLINEAMENTO + COMPACTION
   2026-06-10
   -----------------------------------------------------------------------
   ANALISI CAUSE:
   D1) "Preferenze cookie" sinistrizzato su mobile:
       CAUSA: regola globale ".ApColumn a:first-of-type { display:block;
       text-align:center }" centra gli altri link. La nostra regola A)
       usa "display:inline-block !important" che sovrascrive → sinistrizzato.
       FIX: override mobile con display:block (già fatto sopra, sezione A).

   D2) Selettori mobili ".links" non matchano il DOM:
       Il DOM usa ".block-toggler.ApLink.ApBlockLink.accordion_small_screen",
       NON ".links". Tutte le regole "#footer .footer-center .links ..."
       precedenti sono no-op. Aggiungiamo selettori corretti qui.

   D3) Footer mobile troppo alto: eccesso da ApPageBuilder e tema.

   SCOPE: solo max-width:767px. Desktop invariato.
   ===================================================================== */
@media (max-width: 767px) {

  /* ─────────────────────────────────────────────────────────────────────
     D2) ACCORDION NEGOZIO / LINK UTILI — selettori corretti (.ApBlockLink)
     ───────────────────────────────────────────────────────────────────── */

  /* Wrapper blocco accordion */
  #footer .footer-center .ApBlockLink {
    margin-bottom: 0 !important;
  }

  /* ul della lista (sia .collapse che senza classe per sicurezza) */
  #footer .footer-center .ApBlockLink ul,
  #footer .footer-center .ApBlockLink ul.collapse {
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
    list-style: none !important;
    text-align: center !important;   /* ancora: assicura centro per inline-block */
  }

  /* li: reset margin ApPageBuilder (1.25rem=20px) e centra */
  #footer .footer-center .ApBlockLink ul li {
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
    list-style: none !important;
    text-align: center !important;   /* centro per qualsiasi display figlio */
  }

  /* a normali (Privacy Policy, Termini, About Us ecc.):
     text-align:center già da ".ApColumn a:first-of-type" (display:block),
     qui rinforziamo per coerenza */
  #footer .footer-center .ApBlockLink ul li a {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    font-size: 13px !important;
    padding: 4px 0 !important;
    color: #222222 !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
  }

  /* a.fuix-cookie-pref-link: identico agli altri — già gestito sopra
     (sezione A mobile override), qui rinforziamo per specificità cascade */
  #footer .footer-center .ApBlockLink ul li a.fuix-cookie-pref-link {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    font-size: 13px !important;
    padding: 4px 0 !important;
    color: #222222 !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
  }

  /* Titolo accordion: padding controllato + font leggibile */
  #footer .footer-center .ApBlockLink .title_block {
    font-size: 15px !important;
    padding: 0 0 8px 0 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }

  /* ─────────────────────────────────────────────────────────────────────
     D3) FOOTER MOBILE COMPACTION — riduci spazio tra sezioni
     ───────────────────────────────────────────────────────────────────── */

  /* Logo: dimensione proporzionata, centrato */
  #footer .footer-center .box-footer img.logo {
    max-width: 160px !important;
    height: auto !important;
    margin: 0 auto 16px !important;
    display: block !important;
  }

  /* Testo aziendale (ApRawHtml con indirizzo/telefono/email) */
  #footer .footer-center .box-footer .ApRawHtml p,
  #footer .footer-center .box-footer .block.ApRawHtml p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
  }

  /* ApColumn: riduce margine basso */
  #footer .footer-center .box-footer > .row.ApRow > .ApColumn {
    margin-bottom: 12px !important;
  }

  /* Newsletter: riduce spazio sopra */
  #footer .footer-center .block_newsletter {
    margin-top: 8px !important;
    padding-top: 0 !important;
  }

  /* Newsletter titolo */
  #footer .footer-center .block_newsletter h3.title_block {
    font-size: 15px !important;
    margin-bottom: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Newsletter testo descrittivo */
  #footer .footer-center .block_newsletter p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }

  /* Turnstile: contenimento, non straripante */
  #footer .footer-center .block_newsletter .turnstile-wrapper {
    max-width: 100% !important;
    overflow: visible !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  #footer .footer-center .block_newsletter .cf-turnstile {
    max-width: 100% !important;
  }

  /* Loghi pagamento: dimensione proporzionata */
  #footer .footer-center .box-copyright .ApImage img {
    max-height: 28px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* Copyright riga: compact */
  #footer .footer-center .box-copyright {
    padding-top: 12px !important;
    padding-bottom: 8px !important;
    margin-top: 0 !important;
  }

  #footer .footer-center .box-copyright .nqt-copyright {
    font-size: 11px !important;
    line-height: 1.45 !important;
    margin-bottom: 8px !important;
  }

  /* ─────────────────────────────────────────────────────────────────────
     D4) PADDING-BOTTOM — spazio per floating buttons (back-top + tarte)
     ───────────────────────────────────────────────────────────────────── */

  /* Tarteaucitron ancora visibile: back-top a bottom:80px (h:40px) */
  body:not(.fuix-cookie-choice-saved) #footer.footer-container {
    padding-bottom: 110px !important;
  }

  /* Tarteaucitron nascosto (consenso espresso): back-top a bottom:20px */
  body.fuix-cookie-choice-saved #footer.footer-container {
    padding-bottom: 65px !important;
  }

}
/* ── fine FUIX FOOTER MOBILE FIX ─────────────────────────────────── */

/* =====================================================================
   FUIX — VARIANTI COLORE MOBILE: mostra pallini colore nelle card
   2026-06-10 — custom_v2_bak_20260610_162048_before_color_variants_mobile
   -----------------------------------------------------------------------
   ROOT CAUSE: product.tpl line 151
     <div class="highlighted-informations{if !$...} no-variants{/if} hidden-sm-down">
   Bootstrap theme.css: @media (max-width:767px) { .hidden-sm-down { display:none !important } }
   I pallini SONO nel DOM ma nascosti da hidden-sm-down.

   DOM verificato (nb_fresh.html):
     .product-meta > .pro-info
       └─ .highlighted-informations.hidden-sm-down        ← nascosto
            └─ .variant-links
                 ├─ <a class="color" style="background-color:#808080">
                 └─ <span class="js-count count">           ← "+N" se molti colori

   FIX: CSS-only — override display:none solo quando ha varianti (:not(.no-variants))
   SCOPE: .product-miniature → category / search / manufacturer / new / best-sales
   AJAX-safe: regola CSS persistente, sopravvive al re-render del #js-product-list
   Desktop: INVARIATO (tutto dentro @media max-width:767px)
   ===================================================================== */
@media (max-width: 767px) {

  /* 1. Mostra il wrapper quando ha varianti
        :not(.no-variants) esclue le card senza varianti (div vuoto)
        Specificità alta per battere hidden-sm-down !important */
  .product-miniature .highlighted-informations:not(.no-variants) {
    display: block !important;
    min-height: 0 !important;    /* override theme.css min-height:40px su .variant-links parent */
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* 2. .variant-links: flex row centrato, una riga
        Annulla min-height:40px da theme.css .thumbnail-container .variant-links */
  .product-miniature .highlighted-informations .variant-links {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    padding: 0 !important;
    margin: 5px auto 3px !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* 3. Pallini (a.color / a.texture): forza dimensione 12px e forma circolare
        .color globale ha width/height:16px — riduco a 12px per griglia 2-col mobile
        border-radius:50% era solo in .plist-center; lo ripeto qui per sicurezza */
  .product-miniature .highlighted-informations .variant-links a.color,
  .product-miniature .highlighted-informations .variant-links a.texture {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    vertical-align: middle !important;
    text-decoration: none !important;
  }

  /* 4. "+N more" span: discreto, in linea con i pallini */
  .product-miniature .highlighted-informations .variant-links .js-count.count {
    font-size: 10px !important;
    line-height: 12px !important;
    color: #888888 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

}
/* ── fine FUIX VARIANTI COLORE MOBILE ───────────────────────────── */

/* =====================================================================
   FUIX — FIX CSS: .list-images-mobile visibile su tutta la fascia mobile
   2026-06-10
   -----------------------------------------------------------------------
   PROBLEMA:
   theme.css:    .list-images-mobile { display: none }        → globale
   styles.css:   @media (max-width: 576px) { display: block } → solo ≤576px

   Se il phone ha viewport > 576px (es. 600-767px, tablet stretto, ecc.)
   e PHP isMobile()=true → template renderizza .list-images-mobile
   → ma .list-images-mobile è display:none → immagine vuota.

   Il tema usa 767px come breakpoint mobile ovunque. Allineamento al 767px.
   SCOPE: solo #product per non interferire con listing (che usa
   .product-list-images-mobile diverso da .list-images-mobile).
   Desktop (≥768px): invariato — il template non renderizza .list-images-mobile
   su desktop (isMobile=false), quindi questa regola è no-op.
   ===================================================================== */
@media (max-width: 767px) {

  /* Mostra il mobile slider su tutta la fascia mobile 320-767px
     (styles.css lo mostra solo ≤576px — troppo stretto) */
  #product .list-images-mobile {
    display: block !important;
  }

  /* Assicura che le immagini dentro il slider siano visibili
     anche SENZA Slick (caso: 1 sola immagine, Slick non inizializzato) */
  #product .list-images-mobile > div,
  #product .list-images-mobile > div picture {
    display: block !important;
    width: 100% !important;
  }

  #product .list-images-mobile > div > picture > img,
  #product .list-images-mobile img.js-qv-product-cover,
  #product .list-images-mobile img.img-fluid {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

}
/* ── fine FUIX FIX CSS .list-images-mobile ──────────────────────── */

/* ── SEZIONE G — Homepage desktop: nascondi "SCEGLI OPZIONI" + compare ──────
   Contesto: il profilo ApPageBuilder plist2507348733.tpl usa .pro-btn con:
     1) a.fuix-choose-options  → bottone "Scegli opzioni" (prodotti con varianti)
     2) .compare               → icona compare/refresh
   La wishlist è già in .fuix-wishlist-overlay (fuori da .pro-btn) → rimane visibile.
   Fix: solo desktop (min-width 768px), solo homepage (body#index).
   Non tocca: categoria, listing, search, pagina prodotto, mobile.
   FUIX 2026-06-10
 ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {

  /* Nasconde il link "Scegli opzioni" (classe FUIX univoca, solo plist2507348733) */
  body#index .product-miniature a.fuix-choose-options {
    display: none !important;
  }

  /* Nasconde il container .button-container.cart quando wrappa fuix-choose-options
     (via :has() — supportato Chrome 105+, FF 121+, Safari 15.4+).
     Elimina padding/spazio residuo del wrapper vuoto. */
  body#index .product-miniature .button-container.cart:has(> a.fuix-choose-options) {
    display: none !important;
  }

  /* Nasconde il bottone compare (icona refresh) nella homepage.
     Classe .compare generata da {hook h='displayLeoCompareButton'}.
     Sicuro: scope body#index → non tocca categoria/listing. */
  body#index .product-miniature .compare {
    display: none !important;
  }

}
/* ── fine SEZIONE G ─────────────────────────────────────────────────────── */

/* ── FUIX QTY SELECT ────────────────────────────────────────────────────── */
/*
 * Valori ricavati VERBATIM da custom.css regola:
 *   #product .product-variants select.form-control (spec 1,2,1)
 * che è quella che definisce il SIZE select sul desktop.
 * Le versioni precedenti usavano valori di theme.css (.form-control-select)
 * che invece vengono sovrascritta dalla regola custom.css ad alta specificità.
 */
.product-quantity select#quantity_wanted.fuix-qty-select,
.qty select#quantity_wanted.fuix-qty-select,
select.fuix-qty-select {
  /* Aspetto: identico a SIZE select (da custom.css) */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  height: 50px !important;
  padding: 10px 44px 10px 14px !important;
  border-radius: 0px !important;
  border: 1px solid #d8d8d8 !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: #111 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  /* Layout */
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* focus: identico a SIZE select */
.product-quantity select#quantity_wanted.fuix-qty-select:focus,
.qty select#quantity_wanted.fuix-qty-select:focus,
select.fuix-qty-select:focus {
  outline: none !important;
  border-color: #111 !important;
  box-shadow: 0 0 0 3px rgba(17,17,17,.12) !important;
}

/* hover: identico a SIZE select */
.product-quantity select#quantity_wanted.fuix-qty-select:hover,
.qty select#quantity_wanted.fuix-qty-select:hover,
select.fuix-qty-select:hover {
  border-color: #bdbdbd !important;
}

/* Contenitore .qty: non limitare larghezza a 100px (valore theme.css) */
.product-add-to-cart .product-quantity .qty:has(select.fuix-qty-select),
.product-quantity .qty:has(select.fuix-qty-select) {
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}

/* Nasconde i residui TouchSpin se non rimossi via JS */
.qty .bootstrap-touchspin-up,
.qty .bootstrap-touchspin-down,
.qty .touchspin-up,
.qty .touchspin-down {
  display: none !important;
}
/* ── fine FUIX QTY SELECT ───────────────────────────────────────────────── */

/* ── FUIX QTY SELECT — LAYOUT DESKTOP ───────────────────────────────────── */
/*
 * Posizione: margin-left: 80px ripristina il posizionamento del tema (label float
 * left + .qty rientrato) identico alla riga SIZE.
 *
 * Larghezza: il SIZE select è un flex-child auto-sized al contenuto (nessuna width
 * esplicita in CSS) → si restringe al testo dell'opzione selezionata ("9", "10"…).
 * L'originale tema aveva .qty { width: 100px } per un input numerico; usiamo lo
 * stesso valore per il dropdown QUANTITY così i due controlli hanno la stessa
 * larghezza visiva.
 * width/min-width/max-width e flex sono impostati sia su .qty sia sul select per
 * vincere qualsiasi regola !important precedente (in particolare width:100% base).
 *
 * Mobile (≤991px): il blocco @media (max-width:767px) sovrascrive tutto a
 * full-width, margin-left:0 — invariato.
 * 2026-06-22: estesa a min-width:768px (prima il layout "tablet" 768-991px
 * tornava a label-sopra-campo full-width, diverso dal desktop).
 */
@media (min-width: 768px) {
  /*
   * .qty: display:block (ripristino comportamento tema originale).
   * Con float label a sinistra, un block con margin-left:80px parte a x=80px
   * dal container left — esattamente dove parte il SIZE select nel suo flex row.
   */
  .product-add-to-cart .product-quantity .qty:has(select.fuix-qty-select),
  .product-quantity .qty:has(select.fuix-qty-select) {
    display: block !important;
    margin-left: 80px !important;
    margin-bottom: 20px !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }

  /* QUANTITY select: 130px — "One Size" (65px testo + 58px padding) entra senza taglio */
  .product-add-to-cart .product-quantity select#quantity_wanted.fuix-qty-select,
  .product-quantity select#quantity_wanted.fuix-qty-select,
  select#quantity_wanted.fuix-qty-select {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    box-sizing: border-box !important;
  }

  /*
   * SIZE select: stessa larghezza 130px.
   * Forziamo entrambi a 130px → identici visivamente.
   * I selettori coprono sia #group_1 (taglia) sia eventuali #group_2+ (altri attr).
   */
  #product .product-variants select.form-control,
  #product .product-variants select {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    box-sizing: border-box !important;
  }
}

/* =====================================================================
   FUIX — PRODUCT PAGE DESKTOP: gerarchia grafica + typography
   Solo desktop (min-width: 992px). Mobile invariato.
   Causa font classico/pesante: theme.css imposta font-family "Eina03-600"
   su tutti gli heading (h1-h6) → .product-detail-name eredita Eina03-600.
   Fix: override font-family a Poppins/sans-serif sul titolo prodotto.
   ===================================================================== */
@media (min-width: 992px) {

  /* ── 1. MANUFACTURER / BRAND ── discreto, cliccabile */
  .page-product .product-manufacturer {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #444 !important;
    margin-bottom: 6px !important;
    font-family: 'Poppins', sans-serif !important;
  }
  .page-product .product-manufacturer a,
  .page-product .product-manufacturer [itemprop="brand"] {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: #444 !important;
    text-decoration: none !important;
  }
  .page-product .product-manufacturer a:hover,
  .page-product .product-manufacturer [itemprop="brand"]:hover {
    color: #111 !important;
    text-decoration: underline !important;
  }

  /* ── 2. TITOLO PRODOTTO ── Poppins sans-serif, moderno, 28px */
  .page-product .product-detail-name {
    font-family: 'Poppins', sans-serif !important;  /* override Eina03-600 */
    font-size: 28px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    margin: 6px 0 12px !important;
    /* text-transform: uppercase del tema: mantenuto */
  }

  /* ── 3. PREZZO ── invariato: 42px weight-900 già nel range target */

  /* ── 4. DESCRIPTION SHORT ── leggibile, colore secondario */
  .page-product #product-description-short,
  .page-product .product-description-short {
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: #555 !important;
    margin-bottom: 14px !important;
    font-family: 'Poppins', sans-serif !important;
  }

}

/* font-family Poppins anche mobile (solo titolo, senza toccare dimensioni) */
@media (max-width: 991px) {
  .page-product .product-detail-name {
    font-family: 'Poppins', sans-serif !important;
  }
}

/* Listing mobile — normalizzazione post-filtro AJAX (fix 2026-06-14k).
   height:100% propaga l'altezza reale di .product-image (aspect-ratio:1/1)
   lungo la chain → <a> ha sempre altezza reale, link cliccabile anche prima
   che lazyOwl carichi l'immagine. img usa height:auto (dimensionamento naturale). */
@media (max-width: 991px) {
  body .product-list-images-mobile.fuix-mobile-single-image-ready {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }
  body .product-list-images-mobile.fuix-mobile-single-image-ready > div:first-child {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  body .product-list-images-mobile.fuix-mobile-single-image-ready > div:first-child > a {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    overflow: hidden !important;
  }
  body .product-list-images-mobile.fuix-mobile-single-image-ready img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ── FUIX: normalizzazione immagini mobile dopo filtro/load-more AJAX (v y) ── */
/* Copre: leoproductsearch, categoria, produttore, search */
@media (max-width: 767px) {
  body#module-leoproductsearch-productsearch .product-list-images-mobile.fuix-leosearch-single-image-ready,
  body#category .product-list-images-mobile.fuix-leosearch-single-image-ready,
  body#manufacturer .product-list-images-mobile.fuix-leosearch-single-image-ready,
  body#search .product-list-images-mobile.fuix-leosearch-single-image-ready {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 180px !important;
    overflow: visible !important;
    position: relative !important;
    padding-bottom: 0 !important;
  }
  body#module-leoproductsearch-productsearch .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-list,
  body#module-leoproductsearch-productsearch .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-track,
  body#module-leoproductsearch-productsearch .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-slide,
  body#module-leoproductsearch-productsearch .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-dots,
  body#module-leoproductsearch-productsearch .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-arrow,
  body#module-leoproductsearch-productsearch .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-prev,
  body#module-leoproductsearch-productsearch .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-next,
  body#category .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-list,
  body#category .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-track,
  body#category .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-slide,
  body#category .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-dots,
  body#category .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-arrow,
  body#category .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-arrows,
  body#category .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-prev,
  body#category .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-next,
  body#manufacturer .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-list,
  body#manufacturer .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-track,
  body#manufacturer .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-slide,
  body#manufacturer .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-dots,
  body#manufacturer .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-arrow,
  body#manufacturer .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-arrows,
  body#manufacturer .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-prev,
  body#manufacturer .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-next,
  body#search .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-list,
  body#search .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-track,
  body#search .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-slide,
  body#search .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-dots,
  body#search .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-arrow,
  body#search .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-arrows,
  body#search .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-prev,
  body#search .product-list-images-mobile.fuix-leosearch-single-image-ready .slick-next {
    all: unset !important;
    display: none !important;
  }
  body#module-leoproductsearch-productsearch .product-list-images-mobile.fuix-leosearch-single-image-ready a.thumbnail.product-thumbnail,
  body#module-leoproductsearch-productsearch .product-list-images-mobile.fuix-leosearch-single-image-ready a.product-thumbnail,
  body#category .product-list-images-mobile.fuix-leosearch-single-image-ready a.thumbnail.product-thumbnail,
  body#category .product-list-images-mobile.fuix-leosearch-single-image-ready a.product-thumbnail,
  body#manufacturer .product-list-images-mobile.fuix-leosearch-single-image-ready a.thumbnail.product-thumbnail,
  body#manufacturer .product-list-images-mobile.fuix-leosearch-single-image-ready a.product-thumbnail,
  body#search .product-list-images-mobile.fuix-leosearch-single-image-ready a.thumbnail.product-thumbnail,
  body#search .product-list-images-mobile.fuix-leosearch-single-image-ready a.product-thumbnail {
    display: flex !important;
    width: 100% !important;
    min-height: 180px !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    overflow: hidden !important;
  }
  body#module-leoproductsearch-productsearch .product-list-images-mobile.fuix-leosearch-single-image-ready img,
  body#category .product-list-images-mobile.fuix-leosearch-single-image-ready img,
  body#manufacturer .product-list-images-mobile.fuix-leosearch-single-image-ready img,
  body#search .product-list-images-mobile.fuix-leosearch-single-image-ready img {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}
/* ── fine PRODUCT PAGE DESKTOP: gerarchia grafica + typography ───────────── */

/* ── FUIX: brand + titolo card prodotto (2026-06-15af) ─────────────────── */

/* Base (desktop + mobile): brand/titolo/prezzo */
.product-miniature .fuix-product-brand {
  display: block !important;
  color: #111 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  text-align: center !important;
  margin: 6px 0 2px 0 !important;
}

.product-miniature .fuix-product-title {
  margin: 0 auto 6px auto !important;
  padding: 0 6px !important;
  min-height: auto !important;
  max-height: calc(1.25em * 3) !important;
}

.product-miniature .fuix-product-title a {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  color: #111 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

.product-miniature .product-price-and-shipping {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  text-align: center !important;
}

.product-miniature .price {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

/* Mobile: layout compatto */
@media (max-width: 767px) {
  /* Spazio inter-card */
  .products .ajax_block_product,
  .product_list .ajax_block_product,
  .ajax_block_product {
    margin-bottom: 9px !important;
    padding-bottom: 0 !important;
  }

  .product-miniature {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Contenitore immagine */
  .product-miniature .thumbnail-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Area testo */
  .product-miniature .product-description {
    padding-top: 4px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* highlighted-informations (varianti desktop) — azzerato su mobile */
  .product-miniature .highlighted-informations {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Pallini colore */
  .product-miniature .fuix-product-color-dots {
    margin-top: 3px !important;
    margin-bottom: 4px !important;
  }

  /* Brand */
  .product-miniature .fuix-product-brand {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.12 !important;
    margin: 2px 0 2px 0 !important;
  }

  /* Titolo */
  .product-miniature .fuix-product-title {
    min-height: 0 !important;
    max-height: calc(1.18em * 3) !important;
    margin: 0 auto 5px auto !important;
    padding: 0 4px !important;
  }

  .product-miniature .fuix-product-title a {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.18 !important;
  }

  /* Prezzo */
  .product-miniature .product-price-and-shipping {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.05 !important;
  }

  .product-miniature .price {
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
  }

  /* Prezzo barrato */
  .product-miniature .regular-price {
    font-size: 12px !important;
    line-height: 1.05 !important;
    margin-top: 1px !important;
  }

  /* Badge sconto */
  .product-miniature .discount-percentage,
  .product-miniature .discount-amount,
  .product-miniature .discount {
    font-size: 11.5px !important;
    line-height: 1.05 !important;
    margin-top: 2px !important;
    padding: 2px 5px !important;
  }
}

/* Desktop: proporzioni più bilanciate */
@media (min-width: 768px) {
  .product-miniature .price {
    font-size: 19px !important;
    font-weight: 700 !important;
  }

  .product-miniature .fuix-product-brand {
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  .product-miniature .fuix-product-title a {
    font-size: 13px !important;
    font-weight: 500 !important;
  }
}

/* ── FUIX: banner homepage responsive su mobile (2026-06-15ah) ──────────── */
/*
 * Il gruppo leoslideshow (34/42) usa iview.js che scala .iviewSlider a 1920px
 * con CSS transform. Senza overflow:hidden sul .ApSlideShow (no .box-padding800)
 * il layout 1920px rompe il mobile: l'immagine risulta tagliata lateralmente.
 * Fix: forziamo il container ad aspect-ratio 16:9 con overflow:hidden, e
 * resettiamo il transform di iview.js con width/height 100%.
 */
@media (max-width: 767px) {
  .box-slide .ApSlideShow,
  .box-slide.responsive .ApSlideShow {
    position: relative !important;
    overflow: hidden !important;
  }

  /* bannercontainer: absolute riempie il ApSlideShow al 100% */
  .box-slide .ApSlideShow .bannercontainer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* .iview: box con aspect ratio 1920:1080 (56.25%), sovrascrive height inline */
  .box-slide .ApSlideShow .iview {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* 1080/1920 = 16:9 */
  }

  /* .iviewSlider: riempie .iview, rimuove transform di iview.js */
  .box-slide .ApSlideShow .iviewSlider {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    -webkit-transform: none !important;
    background-size: 100% auto !important;
    background-position: left top !important;
  }

  /* Wrapper ApSlideShow deve avere altezza uguale a .iview */
  .box-slide .ApSlideShow {
    padding-bottom: 56.25% !important;
    height: 0 !important;
  }
}

/* ── FUIX: nascondi slick-dots immagini prodotto su homepage (2026-06-15ai) ───
   I dots di .product-list-images-mobile sono indicatori del carousel immagini
   nella card prodotto. Su body#index non vengono nascosti dalle regole esistenti
   (che usano body:not(#index)). I pallini colore/varianti sono in .variant-links
   e non vengono toccati da questo selettore.
   ─────────────────────────────────────────────────────────────────────────────── */
body#index .product-list-images-mobile .slick-dots,
body#index .product-list-images-mobile.slick-slider .slick-dots,
body#index .product-list-images-mobile.slick-initialized.slick-dotted .slick-dots {
  display: none !important;
}
/* rimuovi il padding-bottom riservato ai dots su homepage */
body#index .ajax_block_product .product-list-images-mobile {
  padding-bottom: 0 !important;
}

/* =====================================================================
   FUIX — Homepage category image grid (2026-06-15)

   Causa: styles.css tema imposta width:33.33% su ogni ul dentro
   .widget-category_image .block_content > ul → 3 categorie per riga + 1 sotto.

   Desktop (≥992px): 4 colonne (25%)
   Tablet (768-991px): 2 colonne (50%)
   Mobile (<768px): già gestito con CSS Grid 2 colonne — non toccato.
   ===================================================================== */
@media (min-width: 992px) {
  body#index .widget-category_image .block_content > ul,
  .page-home .widget-category_image .block_content > ul {
    width: 25% !important;
    max-width: 25% !important;
    float: left !important;
    box-sizing: border-box !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  body#index .widget-category_image .block_content > ul,
  .page-home .widget-category_image .block_content > ul {
    width: 50% !important;
    max-width: 50% !important;
    float: left !important;
    box-sizing: border-box !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
/* ── fine Homepage category image grid ──────────────────────────────────── */

/* =====================================================================
   FUIX — RIMOZIONE BOTTONE COMPARE/CONFRONTA SU LISTING PRODOTTI
   2026-06-21
   Rimosso a livello di template in:
     themes/at_athena/templates/catalog/_partials/miniatures/product.tpl
   (hook displayLeoCompareButton eliminato dalla card prodotto condivisa da
   categoria, produttore, ricerca — normale e AJAX/ps_facetedsearch).

   Questo blocco CSS è una rete di sicurezza globale: nasconde qualsiasi
   residuo di compare (es. card prodotto homepage/cross-selling che usano
   ancora l'hook in altri template) ed espande il CTA principale a tutta
   larghezza quando il compare non c'è più.
   Esclude home (#index) e pagina prodotto (#product), già gestite a parte.
   ===================================================================== */
body:not(#index):not(#product) .ajax_block_product .compare,
body:not(#index):not(#product) .ajax_block_product .leo-compare-button,
body:not(#index):not(#product) .ajax_block_product [class*="compare"],
body:not(#index):not(#product) .product-miniature .compare,
body:not(#index):not(#product) .product-miniature .leo-compare-button,
body:not(#index):not(#product) .product-miniature [class*="compare"] {
  display: none !important;
}

/* 2026-06-21 (update): bottone "SCEGLI OPZIONI"/"AGGIUNGI AL CARRELLO" rimosso
   del tutto dalla card listing — non solo allargato. La card mostra solo
   immagine, brand, titolo e prezzo; click sull'immagine/titolo porta al
   prodotto, dove resta il bottone vero per acquistare/scegliere opzioni. */
body:not(#index):not(#product) .product-miniature .functional-buttons {
  display: none !important;
}

/* Prezzo centrato nella card (era allineato a sinistra) */
body:not(#index):not(#product) .product-miniature .product-price-and-shipping {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
/* 2026-06-23 — su mobile i prezzi (barrato/sconto/scontato) erano in riga
   (display:block sopra rendeva inline gli span figli) rischiando overflow
   con prezzi a 3+ cifre. Li impiliamo: barrato, poi sconto, poi prezzo finale. */
body:not(#index):not(#product) .product-miniature .product-price-and-shipping .regular-price {
  order: 1 !important;
}
body:not(#index):not(#product) .product-miniature .product-price-and-shipping .discount-amount,
body:not(#index):not(#product) .product-miniature .product-price-and-shipping .discount-percentage,
body:not(#index):not(#product) .product-miniature .product-price-and-shipping .discount-product {
  order: 2 !important;
}
body:not(#index):not(#product) .product-miniature .product-price-and-shipping .price {
  order: 3 !important;
}
/* ── fine FUIX rimozione compare / CTA listing ───────────────────────── */

/* =====================================================================
   FUIX — SOTTOCATEGORIE COMPATTE SU DESKTOP (body#category)
   2026-06-21

   Riusa lo stesso markup di subcategories.tpl già usato su mobile:
     #subcategories
       .row.subcategories-list
         .subcategory-block
           .subcategory-image            ← nascosta (come mobile)
           .subcategory-meta
             h5 > a.subcategory-name     ← diventa la "card"/bottone
             .subcategory-description.cat_desc ← nascosta (resta nel DOM per SEO)

   Mobile (max-width:767px) NON è toccato: tutte le regole qui sono dentro
   @media (min-width:768px), quindi valide da tablet/desktop-stretto in su
   (2026-06-21: estesa anche alla fascia 768-991px, prima fuori scope).

   Toggle "Mostra tutte le categorie (N)" / "Mostra meno": gestito da JS
   in custom.js, che aggiunge dinamicamente il bottone e la classe
   .fuix-subcat-desktop-collapsed — invisibile/inerte sotto i 768px.
   ===================================================================== */
@media (min-width: 768px) {

  /* Titolo sezione "CATEGORIE" sopra la griglia */
  body#category #subcategories {
    margin: 28px 0 26px 0 !important;
    text-align: left !important;
  }

  body#category #subcategories::before {
    content: "Categorie" !important;
    display: block !important;
    margin: 0 0 16px 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #888 !important;
  }

  /* Griglia compatta: override Bootstrap .row + col-xl-4/col-lg-4
     Base 2 colonne (768-991px, stretta); 4 colonne da 992px in su (vedi sotto). */
  body#category #subcategories .row.subcategories-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body#category #subcategories .subcategory-block {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Niente immagini sottocategoria */
  body#category #subcategories .subcategory-image {
    display: none !important;
  }

  /* Niente descrizioni lunghe (restano nel DOM per SEO, solo nascoste) */
  body#category #subcategories .subcategory-description,
  body#category #subcategories .cat_desc {
    display: none !important;
  }

  body#category #subcategories .subcategory-meta {
    margin: 0 !important;
    padding: 0 !important;
  }

  body#category #subcategories .subcategory-meta h5 {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Card/bottone sottocategoria */
  body#category #subcategories a.subcategory-name {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 54px !important;
    width: 100% !important;
    padding: 12px 18px !important;
    box-sizing: border-box !important;
    border: 1px solid #dedede !important;
    border-radius: 12px !important;
    background: #f8f8f8 !important;
    color: #000 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
  }

  body#category #subcategories a.subcategory-name:hover {
    background: #fff !important;
    border-color: #111 !important;
    color: #000 !important;
  }

  /* Stato collassato: mostra solo le prime 8 (impostato via JS) */
  body#category #subcategories.fuix-subcat-desktop-collapsed .subcategory-block:nth-child(n+9) {
    display: none !important;
  }

  /* Bottone "Mostra tutte le categorie (N)" / "Mostra meno", creato via JS */
  body#category .fuix-subcat-desktop-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    margin-top: 14px !important;
    padding: 11px 26px !important;
    border: 1px solid #dedede !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }

  body#category .fuix-subcat-desktop-toggle:hover {
    border-color: #111 !important;
  }

}

/* Da 992px in su: griglia a 4 colonne (sopra i 768px era 2 colonne) */
@media (min-width: 992px) {
  body#category #subcategories .row.subcategories-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Sicurezza: il bottone toggle non deve mai apparire sotto i 768px (mobile vero),
   indipendentemente dal JS che lo inserisce nel DOM */
@media (max-width: 767.98px) {
  body#category .fuix-subcat-desktop-toggle {
    display: none !important;
  }
}

/* FUIX — NASCONDE IL FILTRO "CATEGORIE" NELLA SIDEBAR DA TABLET/DESKTOP (body#category)
   2026-06-21 — ridondante con il nuovo blocco "Categorie" compatto sopra i prodotti.
   data-type="category" è l'identificatore interno stabile di ps_facetedsearch
   (Filters/Block.php), non dipende dalla lingua/etichetta del facet. */
@media (min-width: 768px) {
  body#category #search_filters section.facet[data-type="category"] {
    display: none !important;
  }
}

/* FUIX — TRADUZIONE SCRITTA "CATEGORIE" (::before) IN BASE A html[lang]
   2026-06-21 — default IT già impostato sopra ("Categorie"); qui le altre lingue del sito. */
@media (min-width: 768px) {
  html[lang^="en"] body#category #subcategories::before { content: "Categories" !important; }
  html[lang^="de"] body#category #subcategories::before { content: "Kategorien" !important; }
  html[lang^="es"] body#category #subcategories::before { content: "Categorías" !important; }
  html[lang^="fr"] body#category #subcategories::before { content: "Catégories" !important; }
}

/* =====================================================================
   FUIX — FIX HANDLE SLIDER PREZZO SOPRA MENU MOBILE/TABLET
   2026-06-22

   Bug: i due handle bianchi (#search_filters .ui-slider-handle) dello
   slider prezzo non hanno z-index esplicito → il browser crea per loro
   uno stacking context locale che, in alcuni layout (fascia tablet
   768-991px), li fa apparire sopra il menu hamburger full-screen
   (z-index molto più alto, es. 9999+), restando visibili in
   sovraimpressione anche col menu aperto.
   Fix: forziamo uno z-index basso e coerente, così gli handle restano
   sempre sotto qualsiasi overlay/menu del tema. Non altera l'aspetto
   né l'interazione dello slider (resta sopra la propria track). */
#search_filters .ui-slider-handle {
  z-index: 1 !important;
}
/* ── fine FUIX fix handle slider prezzo ──────────────────────────────── */