/* =========================================================
   LARGHEZZA MASSIMA SITO: 2000px (header + container + megamenu)
   ========================================================= */
@media (min-width: 1290px) {
    .container {
        width: 100% !important;
        max-width: 2000px !important;
    }
    .leo-megamenu .navbar-nav > li.aligned-fullwidth.menu-fullwidth .dropdown-menu-inner {
        max-width: 2000px !important;
    }
}

/* Container Elementor (sezioni boxed: header + tutte le sezioni del builder) */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 2000px !important;
}

/* Eccezione: la topbar (sezione 607c6f8 col carosello) va a piena viewport,
   oltre il limite di 2000px del resto del sito */
.elementor-section.elementor-element-607c6f8 > .elementor-container {
    max-width: 100% !important;
    width: 100% !important;
}
.elementor-section.elementor-element-607c6f8 .elementor-element-4959bb8 > .elementor-element-populated,
.elementor-section.elementor-element-607c6f8 .elementor-element-4959bb8 > .elementor-column-wrap > .elementor-widget-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Font 12px per tutto il testo del carosello in topbar */
.elementor-section.elementor-element-607c6f8 .elementor-element-4959bb8,
.elementor-section.elementor-element-607c6f8 .elementor-element-4959bb8 .item,
.elementor-section.elementor-element-607c6f8 .elementor-element-4959bb8 .item-title,
.elementor-section.elementor-element-607c6f8 .elementor-element-4959bb8 .item-sub-title,
.elementor-section.elementor-element-607c6f8 .elementor-element-4959bb8 .item-description,
.elementor-section.elementor-element-607c6f8 .elementor-element-4959bb8 .block-carousel-container,
.elementor-section.elementor-element-607c6f8 .elementor-element-4959bb8 p,
.elementor-section.elementor-element-607c6f8 .elementor-element-4959bb8 a,
.elementor-section.elementor-element-607c6f8 .elementor-element-4959bb8 span {
    font-size: 12px !important;
    line-height: 1.4 !important;
}
/* Il messaggio non va mai a capo: il numero di slide visibili (custom.js) lascia
   a ogni messaggio almeno ~320px, altrimenti tra 1026 e 1500px il testo si spezzava
   su due righe ("...TUTTI I / PRODOTTI") e la barra diventava piu' alta. */
.elementor-section.elementor-element-607c6f8 .elementor-element-4959bb8 .item-description {
    white-space: nowrap;
}

/* =========================================================
   HEADER SU SFONDO BIANCO
   La sezione Elementor 612d6bf (logo | search | col-info) prende il
   background dal CSS generato a runtime dal builder LeoElements
   (.elementor-2 .elementor-element.elementor-element-612d6bf { background-color:#2b2b2b }),
   quindi va sovrascritta qui con !important.
   ========================================================= */
.elementor-element.elementor-element-612d6bf:not(.elementor-motion-effects-element-type-background),
.elementor-element.elementor-element-612d6bf > .elementor-motion-effects-container > .elementor-motion-effects-layer,
#header .header-top .elementor-element-612d6bf {
    background-color: #fff !important;
    background-image: none !important;
}
/* Linea di separazione: sul bianco serve un confine, prima lo dava il grigio */
.elementor-element.elementor-element-612d6bf {
    border-bottom: 1px solid #dcdde3;
}

/* Icone account/wishlist/carrello: erano bianche sul grigio, ora scure sul bianco */
.col-info>div i {
    color: #2b2b2b !important;
    font-size: 32px !important;
}
/* Testi della colonna info (label account, ecc.), escluso il badge del
   contatore carrello/wishlist che resta bianco sul pallino rosso */
#header .col-info,
#header .col-info a:not(.btn),
#header .col-info span:not(.cart-products-count):not(.ap-total-wishlist) {
    color: #2b2b2b !important;
}

/* =========================================================
   CARD PRODOTTO UNIFORMI (lista categoria + caroselli)
   - immagine forzata a aspect-ratio 1:1 con object-fit:contain
     => proporzioni dell'immagine mantenute, niente stretch
   - card di pari altezza tramite flex column
   ========================================================= */
.product_list .row,
.products .row,
.elementor-LeoProductCarousel-wrapper .row {
    align-items: stretch;
}

.product_list .ajax_block_product,
.products .ajax_block_product,
.product_list .js-product,
.products .js-product {
    display: flex;
}

.product_list .product-miniature,
.products .product-miniature,
.product_list article.product-miniature,
.products article.product-miniature {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.product_list .product-miniature .thumbnail-container,
.products .product-miniature .thumbnail-container {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Box immagine: quadrato fisso 1:1 */
.product_list .product-miniature .thumbnail-container .product-image,
.products .product-miniature .thumbnail-container .product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    flex: 0 0 auto;
    background: #fff;
}

.product_list .product-miniature .thumbnail-container .product-image .thumbnail.product-thumbnail,
.product_list .product-miniature .thumbnail-container .product-image picture,
.products .product-miniature .thumbnail-container .product-image .thumbnail.product-thumbnail,
.products .product-miniature .thumbnail-container .product-image picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Immagine: riempie il box mantenendo le proporzioni */
.product_list .product-miniature .thumbnail-container .product-image img,
.product_list .product-miniature .thumbnail-container .product-image .img-fluid,
.products .product-miniature .thumbnail-container .product-image img,
.products .product-miniature .thumbnail-container .product-image .img-fluid {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #fff;
}

/* Meta sotto (titolo, prezzo, ecc.) occupa lo spazio restante => card uguali */
.product_list .product-miniature .thumbnail-container .product-meta,
.product_list .product-miniature .thumbnail-container .product-description,
.products .product-miniature .thumbnail-container .product-meta,
.products .product-miniature .thumbnail-container .product-description {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* === Scheda prodotto: immagine cover responsive senza stretch ===
   elevateZoom wrappa #zoom_product in .zoomWrapper con width/height fissi
   inline e mette l'<img> a position:absolute. Se la viewport cambia,
   wrapper e immagine restano inchiodati e l'immagine si stira.
   La fix qui:
   1) sblocca l'img da position:absolute → torna nel flusso normale
   2) max-width:100% + height:auto sull'img → mantiene aspect-ratio
   3) wrapper a max-width:100% e height:auto → segue l'immagine */
.product-cover .zoomWrapper,
.product-cover .zoomContainer,
.images-container .zoomWrapper,
.images-container .zoomContainer {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    position: relative !important;
    overflow: visible !important;
}
.product-cover img,
.product-cover #zoom_product,
.product-cover .js-qv-product-cover,
.images-container #zoom_product,
.images-container .js-qv-product-cover {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* === Slider iView: background in cover e centrato verticalmente
   (il JS di iView imposta inline background-size:100% senza position,
    quindi servono !important per sovrascrivere lo stile inline) === */
.iviewSlider,
.iview .iviewSlider {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border-radius: 20px;
    overflow: hidden;
}
/* Arrotonda anche il contenitore esterno per evitare angoli "tagliati" da bordi/ombre */
.iview {
    border-radius: 20px;
    overflow: hidden;
}

/* Badge contatore carrello/wishlist: testo sempre bianco (desktop + mobile) */
#_desktop_cart .cart-products-count,
.wislish-button .ap-total-wishlist {
    color: #fff !important;
}

/* Card prodotto: bordo netto a spigoli vivi al posto dell'alone sfumato dell'ombra diffusa.
   L'ombra torna, contenuta, solo al passaggio del mouse. */
.thumbnail-container {
    box-shadow: none !important;
    border: 1px solid #e8e8ee !important;
    border-radius: 0 !important;
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.thumbnail-container:hover {
    border-color: #dcdde3 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.block_newsletter form .btn {
    color: white !important;
}

.product-quantity {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-top: 1rem;
}

.product-quantity > div {
    margin-right: 0 !important; /* Gestito dal gap */
}

.product-quantity .add {
    flex: 1;
}

.product-add-to-cart .add-to-cart {
    color: white !important;
    background-color: #ba0d0d;
    background-image: linear-gradient(180deg, #ca0e0e 0%, #ba0d0d 100%);
    border: none;
    padding: 12px 25px;
    border-radius: 50px;
    transition: all 0.3s ease;
    width: 100%;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(186, 13, 13, 0.2);
    display: block;
}

.product-add-to-cart .add-to-cart:hover {
    background-color: #d60f0f;
    background-image: linear-gradient(180deg, #e61010 0%, #d60f0f 100%);
    color: white !important;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(186, 13, 13, 0.4);
    transform: translateY(-1px);
}

/* === Pulsanti CTA in carrello + checkout + ordine: stesso stile di Add to cart ===
   Coprono: "Procedi al pagamento", "Continua", "Conferma", "Salva", ecc. */
body#cart .btn-primary,
body#checkout .btn-primary,
body.page-cart .btn-primary,
body.page-order .btn-primary,
body.page-order-confirmation .btn-primary,
.cart-detailed-actions .btn-primary,
.cart-detailed-actions a.btn,
.cart-detailed-actions button.btn,
.cart-grid-body .btn-primary,
.cart-grid-right .btn-primary,
.checkout-process .btn-primary,
#checkout-personal-information-step .btn-primary,
#checkout-addresses-step .btn-primary,
#checkout-delivery-step .btn-primary,
#checkout-payment-step .btn-primary,
#payment-confirmation .btn-primary {
    color: white !important;
    background-color: #ba0d0d !important;
    background-image: linear-gradient(180deg, #ca0e0e 0%, #ba0d0d 100%) !important;
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 50px !important;
    transition: all 0.3s ease;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(186, 13, 13, 0.2);
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

/* Solo nei "blocchi azione" il pulsante prende tutta la larghezza */
.cart-detailed-actions .btn-primary,
.cart-detailed-actions a.btn,
.cart-detailed-actions button.btn,
#payment-confirmation .btn-primary {
    width: 100%;
}

body#cart .btn-primary:hover,
body#checkout .btn-primary:hover,
body.page-cart .btn-primary:hover,
body.page-order .btn-primary:hover,
body.page-order-confirmation .btn-primary:hover,
.cart-detailed-actions .btn-primary:hover,
.cart-detailed-actions a.btn:hover,
.cart-detailed-actions button.btn:hover:not(.disabled):not([disabled]),
.cart-grid-body .btn-primary:hover,
.cart-grid-right .btn-primary:hover,
.checkout-process .btn-primary:hover,
#checkout-personal-information-step .btn-primary:hover,
#checkout-addresses-step .btn-primary:hover,
#checkout-delivery-step .btn-primary:hover,
#checkout-payment-step .btn-primary:hover,
#payment-confirmation .btn-primary:hover {
    background-color: #d60f0f !important;
    background-image: linear-gradient(180deg, #e61010 0%, #d60f0f 100%) !important;
    color: white !important;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(186, 13, 13, 0.4);
    transform: translateY(-1px);
}

body#cart .btn-primary.disabled,
body#checkout .btn-primary.disabled,
body#cart button.btn-primary[disabled],
body#checkout button.btn-primary[disabled],
.cart-detailed-actions .btn-primary.disabled,
.cart-detailed-actions button.btn.disabled,
.cart-detailed-actions button[disabled],
.checkout-process .btn-primary.disabled,
.checkout-process button.btn-primary[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

/* === Codice sconto (carrello + checkout) ===
   Il campo resta sempre aperto (niente link "Hai un codice promozionale?" ne' "Chiudi").
   Il pulsante e' grigio chiaro finche' il campo e' vuoto e diventa blu brand appena c'e' un codice,
   cosi' non compete con il rosso di "Procedi con il checkout" / "Continua".
   Nel checkout posizione e layout del blocco sono in checkout/_partials/cart-summary.tpl. */
body:is(#cart, #checkout) .block-promo .display-promo,
body:is(#cart, #checkout) .block-promo .cancel-promo {
    display: none !important;
}
body:is(#cart, #checkout) .block-promo #promo-code {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
}
body#cart .block-promo .promo-code {
    padding: 12px 20px 8px;
    background: transparent;
}
body:is(#cart, #checkout) .block-promo .promo-code form {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0;
}
body:is(#cart, #checkout) .block-promo .promo-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 44px;
    padding: 0 18px;
    text-indent: 0;
    border: 1.5px solid #cfd3e6;
    border-radius: 50px;
    background: #fff;
    color: #1f2340;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body:is(#cart, #checkout) .block-promo .promo-input::placeholder {
    color: #7a809b;
}
body:is(#cart, #checkout) .block-promo .promo-input:focus {
    outline: none;
    border-color: #313f90;
    box-shadow: 0 0 0 3px rgba(49, 63, 144, 0.15);
}
/* Pulsante: grigio (campo vuoto) */
body:is(#cart, #checkout) .block-promo .promo-code .btn-primary {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 44px;
    margin: 0;
    padding: 0 22px !important;
    font-size: 13px;
    background-color: #efefef !important;
    background-image: none !important;
    color: #9a9a9a !important;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
body:is(#cart, #checkout) .block-promo .promo-code .btn-primary:hover,
body:is(#cart, #checkout) .block-promo .promo-code .btn-primary:focus {
    background-color: #e4e4e4 !important;
    background-image: none !important;
    color: #7f7f7f !important;
    box-shadow: none;
    transform: none;
}
/* Pulsante: blu quando c'e' un codice */
body:is(#cart, #checkout) .block-promo .promo-input:not(:placeholder-shown) + .btn-primary {
    background-color: #313f90 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(49, 63, 144, 0.22);
}
body:is(#cart, #checkout) .block-promo .promo-input:not(:placeholder-shown) + .btn-primary:hover,
body:is(#cart, #checkout) .block-promo .promo-input:not(:placeholder-shown) + .btn-primary:focus {
    background-color: #263173 !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(49, 63, 144, 0.34);
}
/* Schermi stretti: campo e pulsante uno sotto l'altro, altrimenti il segnaposto viene tagliato */
@media (max-width: 420px) {
    body:is(#cart, #checkout) .block-promo .promo-code form {
        flex-direction: column;
    }
    body:is(#cart, #checkout) .block-promo .promo-input {
        flex: 0 0 auto;
    }
    body:is(#cart, #checkout) .block-promo .promo-code .btn-primary {
        width: 100%;
    }
}
/* "Risparmi totali" e' pensato per il checkout: nel carrello resta nascosto */
body#cart .mt-savings {
    display: none;
}

/* === Modale "Prodotto aggiunto al carrello" === */
#blockcart-modal .cart-content-btn .btn-primary,
#blockcart-modal a.btn-primary {
    color: white !important;
    background-color: #ba0d0d !important;
    background-image: linear-gradient(180deg, #ca0e0e 0%, #ba0d0d 100%) !important;
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(186, 13, 13, 0.2);
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#blockcart-modal .cart-content-btn .btn-primary:hover,
#blockcart-modal a.btn-primary:hover {
    background-color: #d60f0f !important;
    background-image: linear-gradient(180deg, #e61010 0%, #d60f0f 100%) !important;
    color: white !important;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(186, 13, 13, 0.4);
    transform: translateY(-1px);
}

/* "Continua acquisti" = stesso form pillola ma versione ghost/outline rossa,
   così resta visivamente legata alla CTA principale senza rubargli enfasi */
#blockcart-modal .cart-content-btn .btn-secondary {
    color: #ba0d0d !important;
    background-color: #fff !important;
    background-image: none !important;
    border: 2px solid #ba0d0d !important;
    padding: 10px 25px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-decoration: none;
}
#blockcart-modal .cart-content-btn .btn-secondary:hover {
    color: #fff !important;
    background-color: #ba0d0d !important;
    border-color: #ba0d0d !important;
    transform: translateY(-1px);
}

/* Layout dei due pulsanti nella modale: in linea, ben spaziati */
#blockcart-modal .cart-content-btn {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}
#blockcart-modal .cart-content-btn .btn {
    flex: 1 1 auto;
    min-width: 0;
}

/* =========================================================
   MOBILE HEADER LAYOUT - Mondial Toys (Aosom-style)
   Struttura DOM (Elementor + LeoElements):
     .header-top > .inner > .elementor > .elementor-inner
       > .elementor-section-wrap
         > section[612d6bf]  (logo | search | col-info)
             - .elementor-element-523d21b  => LOGO
             - .elementor-element-3538050  => SEARCH (#leo_search_block_top)
             - .elementor-element-ada6b2f.col-info => account/heart/cart
         > section[8e10ef8].header-menu (menu | outlet)
             - .elementor-element-899cb32.col-menu => .navbar-toggler
             - .elementor-element-c4f0f03.elementor-hidden-phone => outlet
   Target mobile:
     Row 1: [HAMBURGER+Menu] [LOGO]            [HEART PERSON CART]
     Row 2: [---------------- SEARCH BAR ----------------]
   Il logo e' l'unico elemento comprimibile (colonna 1fr, immagine con
   max-width:100%): a qualsiasi larghezza le icone restano su una riga.
   ========================================================= */
@media (max-width: 991px) {

    #header {
        background: #fff !important;
        /* lato minimo dell'area di tocco di hamburger e icone */
        --mt-hit: 44px;
    }
    #header .header-banner,
    #header .header-nav .topnav,
    #header .header-nav .bottomnav {
        display: none !important;
    }

    /* === FLATTEN ELEMENTOR LAYERS so columns become direct grid items === */
    #header .header-top > .inner,
    #header .header-top .elementor,
    #header .header-top .elementor-inner,
    #header .header-top .elementor-section-wrap,
    #header .header-top > .inner .elementor-top-section,
    #header .header-top > .inner .elementor-top-section > .elementor-container,
    #header .header-top > .inner .elementor-top-section .elementor-row {
        display: contents !important;
    }

    /* === GRID a 3 colonne + riga topbar full-width + riga search full-width
       Colonne: menu (auto) | logo (1fr, si restringe per primo) | info (auto) === */
    #header .header-top {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "topbar topbar topbar"
            "menu   logo   info"
            "search search search";
        align-items: center;
        column-gap: 10px;
        row-gap: 10px;
        padding: 0 12px 10px 12px;
        background: #fff;
        border-bottom: 1px solid #dcdde3;
    }

    /* Hide outlet/phone column */
    #header .header-top .elementor-element-c4f0f03,
    #header .header-top .elementor-hidden-phone {
        display: none !important;
    }

    /* === TOPBAR (sezione 607c6f8 > colonna 4959bb8): full-bleed in cima === */
    #header .header-top .elementor-element-4959bb8 {
        grid-area: topbar;
        box-sizing: border-box;
        width: auto !important;
        max-width: none !important;
        margin: 0 -12px !important; /* compensa il padding orizzontale del grid */
        padding: 8px 12px !important;
        background: #ba0d0d !important;
        color: #fff !important;
        text-align: center;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    /* Reset wrapper interni della topbar */
    #header .header-top .elementor-element-4959bb8 > .elementor-element-populated,
    #header .header-top .elementor-element-4959bb8 > .elementor-column-wrap,
    #header .header-top .elementor-element-4959bb8 .elementor-widget-wrap,
    #header .header-top .elementor-element-4959bb8 .elementor-widget,
    #header .header-top .elementor-element-4959bb8 .elementor-widget-container,
    #header .header-top .elementor-element-4959bb8 .elementor-text-editor {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        color: #fff !important;
    }
    #header .header-top .elementor-element-4959bb8 p {
        margin: 0 !important;
        padding: 0 !important;
        color: #fff !important;
        font-size: 13px;
        line-height: 1.4;
        text-align: center;
    }

    /* === GRID AREAS: mappatura colonne === */

    /* col-menu (hamburger) */
    #header .header-top .col-menu,
    #header .header-top .elementor-element-899cb32 {
        grid-area: menu;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* logo: a sinistra accanto all'hamburger; min-width:0 gli permette di restringersi */
    #header .header-top .elementor-element-523d21b {
        grid-area: logo;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        min-width: 0;
        width: auto !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* search */
    #header .header-top .elementor-element-3538050,
    #header .header-top .elementor-element-3538050.elementor-column {
        grid-area: search;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Forza i wrapper interni del column-search a riempire la riga: Elementor <=767px
       imposta width:auto sul widget, che in flex-row collassa al content-width */
    #header .header-top .elementor-element-3538050 > .elementor-element-populated,
    #header .header-top .elementor-element-3538050 > .elementor-column-wrap,
    #header .header-top .elementor-element-3538050 .elementor-widget-wrap,
    #header .header-top .elementor-element-3538050 .elementor-widget-wrap > .elementor-element,
    #header .header-top .elementor-element-3538050 .elementor-widget,
    #header .header-top .elementor-element-3538050 .elementor-widget-container {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* col-info (icons): il margine negativo a destra pareggia il "vuoto" interno all'area
       di tocco dell'ultima icona, cosi' l'icona resta allineata al bordo della barra di
       ricerca e l'area di tocco sconfina nel padding (11px < 12px di padding laterale) */
    #header .header-top .col-info,
    #header .header-top .elementor-element-ada6b2f {
        grid-area: info;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 calc((var(--mt-hit) - 22px) / -2) 0 0 !important;
    }

    /* === INNER ELEMENTOR WRAPPERS dentro le colonne === */
    #header .header-top .col-info > .elementor-column-wrap,
    #header .header-top .col-info > .elementor-column-wrap > .elementor-widget-wrap,
    #header .header-top .col-menu > .elementor-column-wrap,
    #header .header-top .col-menu > .elementor-column-wrap > .elementor-widget-wrap,
    #header .header-top .elementor-element-523d21b > .elementor-column-wrap,
    #header .header-top .elementor-element-523d21b > .elementor-column-wrap > .elementor-widget-wrap,
    #header .header-top .elementor-element-3538050 > .elementor-column-wrap,
    #header .header-top .elementor-element-3538050 > .elementor-column-wrap > .elementor-widget-wrap {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        min-height: 0 !important;
    }

    /* col-info: icone sempre su una riga (Elementor imposta flex-wrap:wrap sul
       widget-wrap: senza nowrap, in poco spazio le icone si impilano). La distanza
       tra le icone la danno le aree di tocco (--mt-hit), non un gap. */
    #header .header-top .col-info > .elementor-column-wrap > .elementor-widget-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
    }
    #header .header-top .col-info .elementor-widget,
    #header .header-top .col-info .elementor-widget-container {
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }
    #header .header-top .col-info .elementor-widget {
        flex: 0 0 auto;
    }

    /* logo: nessun wrapper deve impedirgli di restringersi, e su una sola riga */
    #header .header-top .elementor-element-523d21b > .elementor-column-wrap,
    #header .header-top .elementor-element-523d21b .elementor-widget-wrap,
    #header .header-top .elementor-element-523d21b .elementor-widget,
    #header .header-top .elementor-element-523d21b .elementor-widget-container {
        min-width: 0;
        max-width: 100%;
    }
    #header .header-top .elementor-element-523d21b .elementor-widget-wrap {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }

    /* Reorder icone: HEART (1), ACCOUNT (2), CART (3) */
    #header .header-top .col-info .elementor-element-41612ed { order: 1; } /* wishlist */
    #header .header-top .col-info .elementor-element-3ca161c { order: 2; } /* account */
    #header .header-top .col-info .elementor-element-13eb5da { order: 3; } /* cart */

    /* === LOGO ===
       Altezza massima 42px; se la colonna e' piu' stretta l'immagine si riduce
       mantenendo le proporzioni (max-width:100% + height:auto). */
    #header .header-top .elementor-element-523d21b .elementor-widget-container > a {
        display: block;
        max-width: 100%;
    }
    #header .header-top .elementor-element-523d21b img.logo,
    #header .header-top .elementor-element-523d21b a > img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 42px;
        /* proporzioni note prima del caricamento (poi vale quella reale del file) */
        aspect-ratio: auto 3940 / 581;
    }

    /* === HAMBURGER + label "Menu" === */
    #header .header-top .ApMegamenu,
    #header .header-top .leo-megamenu,
    #header .header-top .navbar-header {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        width: auto !important;
        float: none !important;
        border: 0 !important;
    }

    #header .navbar-toggler.hidden-lg-up,
    #header .navbar-header .navbar-toggler,
    #header .header-top .header-menu .col-menu .navbar-header button.navbar-toggler {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #2b2b2b !important;
        font-size: 0 !important;
        line-height: 1 !important;
        width: var(--mt-hit) !important;
        height: auto !important;
        min-width: var(--mt-hit);
        min-height: var(--mt-hit);
        flex-shrink: 0;
        text-align: center !important;
        gap: 4px;
        overflow: visible;
    }
    /* Hamburger disegnato via CSS per essere indipendente dal font */
    #header .navbar-toggler::before {
        content: "";
        display: block;
        width: 22px;
        height: 2px;
        background: #2b2b2b;
        box-shadow: 0 7px 0 #2b2b2b, 0 14px 0 #2b2b2b;
        margin: 0 0 16px 0;
        flex: 0 0 auto;
    }
    #header .navbar-toggler::after {
        content: "Menu";
        display: block;
        font-size: 11px;
        font-weight: 500;
        line-height: 1;
        color: #2b2b2b;
        font-family: inherit;
        flex: 0 0 auto;
    }

    /* === ICONE col-info === */
    #header .col-info .wislish-button,
    #header .col-info .userinfo-selector,
    #header .col-info #_desktop_cart,
    #header .col-info #_desktop_cart .blockcart,
    #header .col-info #_desktop_cart .blockcart .header {
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        line-height: 1;
    }

    /* Area di tocco di almeno --mt-hit x --mt-hit: l'icona resta 22px al centro */
    #header .col-info .wislish-button a,
    #header .col-info .userinfo-selector > a.popup-title,
    #header .col-info #_desktop_cart .blockcart .header > a,
    #header .col-info #_desktop_cart .blockcart .header {
        box-sizing: border-box;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: var(--mt-hit);
        min-height: var(--mt-hit);
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1;
        color: #2b2b2b !important;
    }
    /* il modulo mette l'account in float: in colonna flex non serve e falsa l'altezza */
    #header .col-info .userinfo-selector {
        float: none !important;
        display: block;
    }

    /* Icona */
    #header .col-info i,
    #header .col-info .fa,
    #header .col-info .far,
    #header .col-info .fal,
    #header .col-info .fas {
        color: #2b2b2b !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }

    /* Nasconde "Account" testuale accanto all'icona utente */
    #header .col-info .userinfo-selector > a.popup-title > span {
        display: none !important;
    }

    /* Badge contatore carrello: cerchio perfetto, testo bianco.
       Posizione = angolo in alto a destra dell'icona (22px al centro dell'area di tocco) */
    #header .col-info .cart-products-count,
    #header .col-info #_desktop_cart .cart-products-count {
        position: absolute;
        top: calc((var(--mt-hit) - 22px) / 2 - 6px);
        right: calc((var(--mt-hit) - 22px) / 2 - 8px);
        box-sizing: border-box !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        padding: 0 !important;
        background: #ba0d0d !important;
        color: #fff !important;
        border-radius: 50% !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-align: center !important;
        vertical-align: baseline !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden;
    }
    /* Nasconde badge se carrello vuoto */
    #header .col-info #_desktop_cart .blockcart.inactive .cart-products-count {
        display: none !important;
    }

    /* Mantiene il dropdown account funzionante: lo posiziona sotto l'icona */
    #header .col-info .userinfo-selector .popup-content {
        right: 0 !important;
        left: auto !important;
        top: 100% !important;
    }
    /* la freccia del dropdown punta al centro dell'icona account */
    #header .col-info .userinfo-selector .account-menu::before {
        right: calc(var(--mt-hit) / 2 - 5px);
    }
    /* mini carrello: e' posizionato con right:0 sul contenitore dell'icona, che con il
       margine negativo di .col-info arriva al bordo dello schermo. Il right riporta
       il bordo del pannello sul padding laterale (12px) come prima. */
    #header .col-info #_desktop_cart .leo-dropdown-cart.defaultcart {
        right: calc((var(--mt-hit) - 22px) / 2);
    }

    /* === SEARCH BAR full-width === */
    #header #leo_search_block_top {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        width: 100%;
    }
    #header #leo_search_block_top .title_block {
        display: none !important;
    }
    /* Forza display:block e annulla position:absolute che il modulo applica <=767px */
    #header #leo_search_block_top form,
    #header #leo_search_block_top.active form {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        min-width: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        /* bordo grigio: su header bianco la barra bianca non si distinguerebbe */
        border: 1px solid #dcdde3 !important;
        border-radius: 4px !important;
        background: #fff !important;
    }
    /* overflow visibile: con overflow:hidden il pannello dei suggerimenti
       (.ac_results, posizionato in assoluto sotto il campo) veniva tagliato e su
       mobile/tablet non compariva mai. Gli angoli arrotondati li danno input e pulsante. */
    #header #leo_search_block_top .leoproductsearch-content {
        position: relative;
        display: flex !important;
        align-items: stretch;
        background: #fff;
        border-radius: 4px;
        overflow: visible;
        padding: 0;
        width: 100%;
    }
    #header #leo_search_block_top .leoproductsearch-result {
        flex: 1;
        position: relative;
    }
    #header #leo_search_block_top input.search_query,
    #header #leo_search_block_top input[type="text"] {
        width: 100% !important;
        height: 42px !important;
        background: #fff !important;
        border: 0 !important;
        padding: 0 14px !important;
        /* 16px: sotto questa soglia Safari iOS ingrandisce la pagina al focus */
        font-size: 16px !important;
        color: #333 !important;
        box-shadow: none !important;
        outline: none !important;
        border-radius: 3px 0 0 3px !important;
    }
    #header #leo_search_block_top input.search_query::placeholder {
        color: #999;
        font-style: normal;
    }
    #header #leo_search_block_top #leo_search_top_button,
    #header #leo_search_block_top button[type="submit"] {
        flex: 0 0 44px;
        width: 44px;
        height: 42px;
        background: #fff !important;
        border: 0 !important;
        color: #333 !important;
        padding: 0 !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 0 3px 3px 0 !important;
    }
    #header #leo_search_block_top #leo_search_top_button i,
    #header #leo_search_block_top button .material-icons {
        color: #333 !important;
        font-size: 22px !important;
        margin: 0 !important;
    }
    /* il campo ha outline:none: il focus si vede dal bordo */
    #header #leo_search_block_top form:focus-within {
        border-color: #313f90 !important;
        box-shadow: 0 0 0 3px rgba(49, 63, 144, 0.15) !important;
    }
}

/* Telefoni stretti (<400px): aree di tocco un po' piu' piccole per lasciare
   spazio al logo. Con 40px per hamburger e icone il logo resta >=120px anche a 320px. */
@media (max-width: 399px) {
    #header {
        --mt-hit: 40px;
    }
    #header .header-top {
        column-gap: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }
    #header .header-top .elementor-element-4959bb8 {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
}

/* Piccoli aggiustamenti su schermi medi (tablet portrait) */
@media (min-width: 576px) and (max-width: 991px) {
    #header .header-top .elementor-element-523d21b img.logo {
        max-height: 48px;
    }
    #header .col-info i {
        font-size: 24px !important;
    }
}

/* =========================================================
   MENU A SCOMPARSA (hamburger, <= 991px)
   Il tema colora le voci con il grigio-viola del testo (contrasto ~3:1 su
   bianco, sotto il minimo di 4.5:1) e chiude il pannello con una riga alta 18px:
   qui testo scuro e area di tocco da 44px per il pulsante di chiusura.
   ========================================================= */
@media (max-width: 991px) {
    .off-canvas-nav-megamenu .navbar-nav > li > a {
        color: #2b2b2b;
        font-weight: 600;
    }
    .off-canvas-nav-megamenu .off-canvas-button-megamenu {
        margin: 8px 8px 0 20px;
    }
    .off-canvas-nav-megamenu .off-canvas-button-megamenu .off-canvas-nav:before {
        display: inline-block;
        width: 44px;
        height: 44px;
        padding: 0;
        line-height: 44px;
        text-align: center;
        font-size: 24px;
    }
}

/* Focus da tastiera visibile sui comandi dell'header (solo :focus-visible, il
   mouse e il tocco non lo mostrano) */
#header a:focus-visible,
#header button:focus-visible,
.off-canvas-nav-megamenu a:focus-visible {
    outline: 2px solid #313f90;
    outline-offset: 2px;
}

/* =========================================================
   HEADER DESKTOP (>= 992px)
   Elementor divide la riga logo | ricerca | icone in colonne 15% / 69% / 15%
   e tra 768 e 1024px le impila (100% / 33% / 33%): a 992-1024px il logo
   riempiva l'intera riga, a ~1090px le icone andavano a capo e fino a 1400px
   il logo restava minuscolo (15% della riga). Qui la riga resta sempre su una
   linea: logo e icone prendono la larghezza del contenuto, la ricerca lo spazio
   restante (con un massimo). Anche il menu (pillola categorie + voci) resta su
   un'unica riga.
   ========================================================= */
@media (min-width: 992px) {

    #header {
        /* voci del menu: dimensione e distanza scalano con la larghezza tra 992 e
           ~1200px in modo che le 6 voci stiano sempre su una riga (100vw comprende
           la barra di scorrimento: i coefficienti tengono conto dei suoi ~15px) */
        --mt-nav-font: clamp(13.25px, calc(13.25px + (100vw - 992px) * 0.01355), 16px);
        --mt-nav-gap: clamp(18px, calc(18px + (100vw - 992px) * 0.0484), 30px);
    }

    /* --- Riga 1: logo | ricerca | account, preferiti, carrello --- */
    #header .header-top .elementor-element-612d6bf > .elementor-container > .elementor-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        column-gap: clamp(16px, 2.2vw, 40px);
        /* a destra 20px: il badge del carrello sporge di 10px oltre l'icona */
        padding: 0 20px 0 10px;
    }
    #header .header-top .elementor-element-523d21b,
    #header .header-top .elementor-element-3538050,
    #header .header-top .elementor-element-ada6b2f {
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
    }
    #header .header-top .elementor-element-523d21b > .elementor-column-wrap,
    #header .header-top .elementor-element-3538050 > .elementor-column-wrap,
    #header .header-top .elementor-element-ada6b2f > .elementor-column-wrap {
        padding: 0 !important;
    }

    /* logo: altezza fissa, larghezza in proporzione (il file e' 3940x581) */
    #header .header-top .elementor-element-523d21b {
        flex: 0 0 auto;
    }
    #header .header-top .elementor-element-523d21b .elementor-widget-wrap {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    #header .header-top .elementor-element-523d21b .elementor-widget-container {
        padding: 0 !important;
    }
    #header .header-top .elementor-element-523d21b img.logo {
        display: block;
        width: auto;
        max-width: none;
        height: 38px;
        /* riserva la larghezza prima che il logo (600KB) sia scaricato: senza,
           la colonna e' larga 0 e la ricerca "salta" quando l'immagine arriva */
        aspect-ratio: auto 3940 / 581;
    }

    /* ricerca: occupa lo spazio libero fino a 960px, poi resta centrata */
    #header .header-top .elementor-element-3538050 {
        flex: 1 1 0%;
        max-width: 960px;
        margin: 0 auto !important;
    }
    #header .header-top .elementor-element-3538050 .elementor-widget-wrap {
        padding: 0 !important;
    }
    #header .header-top .elementor-element-3538050 .elementor-widget,
    #header .header-top .elementor-element-3538050 .elementor-widget-container {
        width: 100% !important;
        padding: 0 !important;
    }

    /* icone: sempre affiancate; la distanza e' il gap (prima era il padding-left di ogni widget) */
    #header .header-top .elementor-element-ada6b2f {
        flex: 0 0 auto;
    }
    #header .header-top .elementor-element-ada6b2f .elementor-widget-wrap {
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
        column-gap: 20px;
    }
    #header .header-top .elementor-element-ada6b2f .elementor-widget-container {
        padding: 0 !important;
    }

    /* --- Riga 2: pillola categorie + voci di menu affiancate --- */
    /* Elementor porta il padding della riga a 10px tra 768 e 1024px */
    #header .header-top .elementor-element-8e10ef8 {
        padding: 2px 0 !important;
    }
    #header .header-top .col-menu .elementor-widget-wrap {
        flex-wrap: nowrap !important;
    }
    #header .header-top .col-menu .elementor-widget-wrap > .elementor-widget-LeoBootstrapmenu:first-child {
        flex: 0 0 auto;
        margin-right: 16px;
    }
    #header .header-top .col-menu .elementor-widget-wrap > .elementor-widget-LeoBootstrapmenu:last-child {
        flex: 1 1 0%;
        min-width: 0;
    }
    /* pillola compatta (solo icona) finche' lo spazio e' poco */
    #header .leo-verticalmenu .title_block {
        width: 44px;
        padding: 13px 0;
        justify-content: center;
    }
    #header .header-top .col-menu .leo-megamenu ul.megamenu.horizontal {
        flex-wrap: nowrap;
        column-gap: var(--mt-nav-gap);
        font-size: var(--mt-nav-font);
    }
    #header .header-top .col-menu .leo-megamenu ul.megamenu.horizontal > li,
    #header .header-top .col-menu .leo-megamenu ul.megamenu.horizontal > li + .nav-item {
        flex: 0 0 auto;
        margin-left: 0;
    }
    #header .header-top .col-menu .leo-megamenu ul.megamenu.horizontal > li > a {
        font-size: inherit;
        white-space: nowrap;
    }
}

/* Da 1280px c'e' spazio per logo piu' grande, pillola con larghezza originale e
   menu a dimensione piena (16px, distanza 30px; 45px sopra i 1440px come nel tema) */
@media (min-width: 1280px) {
    #header {
        --mt-nav-font: 16px;
        --mt-nav-gap: 30px;
    }
    #header .header-top .elementor-element-523d21b img.logo {
        height: 44px;
    }
    #header .header-top .col-menu .elementor-widget-wrap > .elementor-widget-LeoBootstrapmenu:first-child {
        margin-right: 30px;
    }
    #header .leo-verticalmenu .title_block {
        width: auto;
        padding: 13px 30px;
    }
}
@media (min-width: 1441px) {
    #header {
        --mt-nav-gap: 45px;
    }
}

/* Tablet in orizzontale (layout desktop ma con il tocco): 16px anche nel campo di
   ricerca, altrimenti Safari iOS ingrandisce la pagina quando lo si seleziona */
@media (min-width: 992px) and (hover: none) and (pointer: coarse) {
    #header #leo_search_block_top input.search_query,
    #header #leo_search_block_top input[type="text"] {
        font-size: 16px !important;
    }
}

/* Allinea il border-radius della search bar desktop a quello mobile (4px) */
#header #leo_search_block_top form,
#leo_search_block_top form {
    border-radius: 4px !important;
}
#leo_search_block_top form input[type="text"] {
    border-radius: 4px !important;
}

/* =========================================================
   SELETTORE VARIANTI A MINIATURE (scheda prodotto)
   Il markup arriva da catalog/_partials/product-variants.tpl: quando almeno
   un attributo del gruppo ha immagini di combinazione, la <ul> riceve
   .variant-thumbnails e ogni <span class="color"> porta la miniatura come
   background-image (.variant-thumb). Gli attributi senza immagini restano
   quadratini di colore, quindi qui vengono dimensionati tutti allo stesso modo.
   ========================================================= */
.product-variants > .product-variants-item ul.variant-thumbnails {
    gap: 10px;
}
.product-variants > .product-variants-item ul.variant-thumbnails li {
    margin-right: 0;
}
.product-variants > .product-variants-item ul.variant-thumbnails .color,
.product-variants > .product-variants-item ul.variant-thumbnails .input-color {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
}
.product-variants > .product-variants-item ul.variant-thumbnails .color {
    border: 1px solid #dcdde3;
    border-radius: 4px;
    background-color: #fff;
}
.product-variants > .product-variants-item ul.variant-thumbnails .color.variant-thumb {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
/* Stato selezionato/hover: bordo rosso brand, box-sizing evita lo scatto di 1px */
.product-variants > .product-variants-item ul.variant-thumbnails .input-color:checked + span,
.product-variants > .product-variants-item ul.variant-thumbnails .input-color:hover + span {
    border: 2px solid #ba0d0d;
}

/* =========================================================
   VARIANTI COLORE NELLE CARD PRODOTTO (lista + caroselli)
   DOM: .thumbnail-container > .product-meta > .p-name >
        h3 | .leo-list-product-reviews | .highlighted-informations >
        .variant-links | .product-price-and-shipping | .category-default
   Il tema mette .variant-links in position:absolute e i pallini a
   display:block, quindi finivano impilati in verticale sovrapposti alla
   card. Qui rientrano nel flusso, in riga, subito sotto il prezzo.
   Correzione in CSS e non nel .tpl perche' i template plist* sono generati
   dal builder LeoElements e verrebbero rigenerati al primo salvataggio.
   ========================================================= */
.product-miniature .thumbnail-container .product-meta .p-name {
    display: flex;
    flex-direction: column;
}
/* L'ordine lo decide il template (titolo, categoria, varianti, riga finale):
   qui si azzerano eventuali riordini precedenti. */
.product-miniature .thumbnail-container .product-meta > *,
.product-miniature .thumbnail-container .product-meta .p-name > * {
    order: 0;
}

/* Dall'absolute al flusso, pallini in riga */
.product-miniature .thumbnail-container .variant-links {
    position: static !important;
    top: auto;
    right: auto;
    left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px 0;
    padding-top: 0;
}
/* 32px = i 15px del tema +110% */
.product-miniature .thumbnail-container .variant-links .color {
    margin: 0;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
}
.product-miniature .thumbnail-container .highlighted-informations.no-variants {
    display: none;
}

/* == MT vertical menu width fix BEGIN == */
/* Il pannello del menu verticale ereditava width:100% di un contenitore largo
   ~75px (colonna Elementor dell'hamburger) => voci illeggibili. Larghezza fissa
   a tutte le risoluzioni (non solo mobile). */
.leo-verticalmenu { position: relative !important; }
.leo-verticalmenu > .block_content,
.leo-verticalmenu .box-content.block_content {
  width: 300px !important;
  max-width: 88vw !important;
  left: 0 !important;
  right: auto !important;
}
.leo-verticalmenu div.verticalmenu .navbar-nav,
.leo-verticalmenu ul.megamenu.vertical { width: 100% !important; min-width: 0 !important; }
.leo-verticalmenu .menu-title,
.leo-verticalmenu div.verticalmenu .navbar-nav > li > a {
  white-space: normal !important; word-break: normal !important;
}
/* Spazio tra il pulsante hamburger e le voci del menu orizzontale: i due
   widget LeoBootstrapmenu stanno nella stessa colonna (.col-menu) e il
   widget-wrap in flex li affianca senza distanza. Il primo widget e' il
   menu verticale. */
@media (min-width: 992px) {
  #header .col-menu .elementor-widget-wrap > .elementor-widget-LeoBootstrapmenu:first-child {
    margin-right: 30px;
  }
}
/* == MT vertical menu width fix END == */

/* == MT unify mobile menu BEGIN == */
/* Da mobile un solo hamburger: nascondo il menu verticale delle categorie e
   mostro le sue voci (iniettate via JS) dentro l'hamburger orizzontale. */
@media (max-width: 991px) {
  .leo-verticalmenu { display: none !important; }
}
/* le voci categoria iniettate restano SOLO su mobile: sul desktop i due menu
   restano separati come prima */
@media (min-width: 992px) {
  .mt-mobile-cat-item { display: none !important; }
}
.leo-megamenu .mt-cat-heading > .nav-link {
  text-transform: uppercase; font-size: 12px; font-weight: 700; opacity: .55;
  pointer-events: none; cursor: default;
}

/* Checkout mobile: loghi corrieri più piccoli */
@media (max-width: 767px) {
    #checkout .delivery-option .carrier-logo {
        margin-bottom: 4px;
    }
    #checkout .delivery-option .carrier-logo img {
        width: auto;
        max-width: 110px;
        max-height: 60px;
        object-fit: contain;
    }
}

/* =====================================================================
   Mini carrello nell'header (dropdown del modulo leofeature)
   Layout a griglia: immagine | nome + attributi + quantità | prezzo
   ===================================================================== */
#header .leo-dropdown-cart.defaultcart {
    width: 380px;
    max-width: calc(100vw - 24px);
}
#header .leo-dropdown-cart .leo-dropdown-cart-content {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    text-align: left;
}
#header .leo-dropdown-cart .leo-dropdown-cart-content::before,
#header .leo-dropdown-cart .leo-dropdown-cart-content::after {
    display: none;
}

/* Lista prodotti: scorre se i prodotti sono tanti */
#header .leo-dropdown-cart .leo-dropdown-list-item-warpper {
    max-height: min(420px, 55vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}
#header .leo-dropdown-cart .leo-dropdown-list-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Riga prodotto */
#header .leo-dropdown-cart .leo-dropdown-cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas:
        "img name   name"
        "img attrs  attrs"
        "img qty    price";
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    width: auto !important;
    height: auto !important;
    margin: 0;
    padding: 14px 14px 14px 16px;
    background: #fff;
    border-bottom: 1px solid #efefef;
}
#header .leo-dropdown-cart .leo-dropdown-cart-item.last {
    border-bottom: 0;
}
#header .leo-dropdown-cart .leo-dropdown-cart-item::before,
#header .leo-dropdown-cart .leo-dropdown-cart-item::after {
    display: none;
}
#header .leo-dropdown-cart .leo-dropdown-cart-item.high-light {
    background: #fff7f7;
}

#header .leo-dropdown-cart .leo-cart-item-img {
    grid-area: img;
    align-self: start;
    float: none;
    width: 72px;
    margin: 0;
}
#header .leo-dropdown-cart .leo-cart-item-img a {
    display: block;
}
#header .leo-dropdown-cart .leo-cart-item-img img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
}

/* Il contenitore info "sparisce" e i suoi figli entrano nella griglia */
#header .leo-dropdown-cart .leo-cart-item-info {
    display: contents;
}
#header .leo-dropdown-cart .leo-cart-item-info .product-name {
    grid-area: name;
    align-self: start;
    min-width: 0;
    margin: 0;
    padding-right: 30px;
    text-align: left;
}
#header .leo-dropdown-cart .leo-cart-item-info .product-name a {
    display: block;
    padding: 0;
    background: none;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #222;
    text-decoration: none;
}
#header .leo-dropdown-cart .leo-cart-item-info .product-name a:hover {
    color: #ba0d0d;
}

/* Prezzo a destra, sulla riga della quantità */
#header .leo-dropdown-cart .leo-cart-item-info .product-price {
    grid-area: price;
    justify-self: end;
    text-align: right;
    white-space: nowrap;
}
#header .leo-dropdown-cart .leo-cart-item-info .product-discount {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 6px;
    line-height: 1.2;
}
#header .leo-dropdown-cart .leo-cart-item-info .product-discount .regular-price {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
}
#header .leo-dropdown-cart .leo-cart-item-info .product-discount .discount {
    padding: 0;
    background: none;
    font-size: 12px;
    font-weight: 700;
    color: #ba0d0d;
}
#header .leo-dropdown-cart .leo-cart-item-info .current-price .price {
    font-size: 16px;
    font-weight: 700;
    color: #222;
}
#header .leo-dropdown-cart .leo-cart-item-info .unit-price-cart {
    font-size: 11px;
    color: #888;
}

/* Attributi (es. Colore: Rosso) sempre visibili sotto il nome */
#header .leo-dropdown-cart .view-additional {
    display: none;
}
#header .leo-dropdown-cart .leo-dropdown-cart-item .leo-dropdown-additional {
    grid-area: attrs;
    position: static;
    visibility: visible;
    opacity: 1;
    z-index: auto;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    transition: none;
    font-size: 12.5px;
    line-height: 1.4;
    color: #777;
}
#header .leo-dropdown-cart .leo-dropdown-additional .view-combination,
#header .leo-dropdown-cart .leo-dropdown-additional .view-customization {
    display: none;
}
#header .leo-dropdown-cart .leo-dropdown-additional .product-line-info {
    display: inline;
    margin: 0 8px 0 0;
}
#header .leo-dropdown-cart .leo-dropdown-additional .label,
#header .leo-dropdown-cart .leo-dropdown-additional .value {
    display: inline;
    padding: 0;
    background: none;
    font-size: 12.5px;
    color: #777;
    text-align: left;
}
#header .leo-dropdown-cart .leo-dropdown-additional .customizations ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Selettore quantità: − [n] + in un unico controllo, sfondo uniforme */
#header .leo-dropdown-cart .leo-cart-item-info .product-quantity {
    grid-area: qty;
    justify-self: start;
    margin: 6px 0 0;
    font-size: 13px;
    color: #666;
}
#header .leo-dropdown-cart .leo-cart-item-info .product-quantity:has(.leo-input-product-quantity) {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 2px;
    background: #f3f4f8;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
}
#header .leo-dropdown-cart .leo-cart-item-info .product-quantity .leo-bt-product-quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #1f2340;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
#header .leo-dropdown-cart .leo-cart-item-info .product-quantity .leo-bt-product-quantity:hover {
    background: #fff;
    color: #ba0d0d;
    box-shadow: 0 1px 3px rgba(20, 24, 60, 0.12);
}
#header .leo-dropdown-cart .leo-cart-item-info .product-quantity .leo-bt-product-quantity > i {
    margin: 0;
    font-size: 18px !important;
    line-height: 1;
    color: inherit !important;
}
#header .leo-dropdown-cart .leo-cart-item-info .product-quantity .leo-input-product-quantity {
    display: block;
    float: none;
    width: 36px;
    height: 32px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 32px;
    color: #1f2340;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
#header .leo-dropdown-cart .leo-cart-item-info .product-quantity .leo-input-product-quantity::-webkit-outer-spin-button,
#header .leo-dropdown-cart .leo-cart-item-info .product-quantity .leo-input-product-quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#header .leo-dropdown-cart .leo-cart-item-info .product-quantity:has(.leo-input-product-quantity:focus) {
    box-shadow: 0 0 0 2px rgba(186, 13, 13, 0.25);
}

/* Cestino */
#header .leo-dropdown-cart .leo-remove-from-cart {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    color: #a3a3a3;
    transition: background-color 0.15s, color 0.15s;
}
#header .leo-dropdown-cart .leo-remove-from-cart .material-icons {
    font-size: 16px !important;
    line-height: 1;
    color: inherit !important;
}
#header .leo-dropdown-cart .leo-remove-from-cart:hover {
    background: #fdeeee;
    color: #ba0d0d;
}
#header .leo-dropdown-cart .leo-remove-from-cart:hover .material-icons {
    color: #ba0d0d !important;
}

/* Totali */
#header .leo-dropdown-cart .leo-dropdown-bottom {
    background: #fafafa;
    border-top: 1px solid #eee;
}
#header .leo-dropdown-cart .leo-dropdown-cart-subtotals {
    padding: 14px 16px 6px;
    border: 0;
}
#header .leo-dropdown-cart .leo-dropdown-cart-subtotals > div {
    margin: 0 0 6px;
}
#header .leo-dropdown-cart .leo-dropdown-total .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0;
}
#header .leo-dropdown-cart .leo-dropdown-total .row::before,
#header .leo-dropdown-cart .leo-dropdown-total .row::after {
    display: none;
}
#header .leo-dropdown-cart .leo-dropdown-total .row > div {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
    padding: 0;
}
#header .leo-dropdown-cart .leo-dropdown-total .label,
#header .leo-dropdown-cart .leo-dropdown-total .value {
    float: none;
    display: inline;
    padding: 0;
    background: none;
    text-align: left;
    text-transform: none;
}
#header .leo-dropdown-cart .leo-dropdown-cart-subtotals .label {
    font-size: 13.5px;
    color: #666;
}
#header .leo-dropdown-cart .leo-dropdown-cart-subtotals .value {
    font-size: 14px;
    font-weight: 600;
    color: #222;
}
#header .leo-dropdown-cart .leo-dropdown-cart-total {
    margin: 0 16px;
    padding: 10px 0 12px;
    border-top: 1px dashed #d9d9d9;
}
#header .leo-dropdown-cart .leo-dropdown-cart-total .label {
    font-size: 15px;
    font-weight: 700;
    color: #222;
}
#header .leo-dropdown-cart .leo-dropdown-cart-total .value {
    font-size: 18px;
    font-weight: 800;
    color: #ba0d0d;
}
#header .leo-dropdown-cart .leo_free_price p {
    margin: 0 16px 12px;
    padding: 8px 10px;
    background: #eef8f1;
    border-radius: 6px;
    font-size: 12.5px;
    color: #1e7a44;
}

/* Pulsanti */
#header .leo-dropdown-cart .leo-cart-dropdown-action {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px 16px 16px;
    text-align: center;
}
#header .leo-dropdown-cart .leo-cart-dropdown-action::before,
#header .leo-dropdown-cart .leo-cart-dropdown-action::after {
    display: none;
}
#header .leo-dropdown-cart .leo-cart-dropdown-action .cart-dropdow-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    transform: none !important;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
#header .leo-dropdown-cart .leo-cart-dropdown-action .cart-dropdow-viewcart {
    background: #fff !important;
    background-image: none !important;
    border: 1.5px solid #cfcfcf !important;
    color: #222 !important;
}
#header .leo-dropdown-cart .leo-cart-dropdown-action .cart-dropdow-viewcart:hover {
    border-color: #222 !important;
}
#header .leo-dropdown-cart .leo-cart-dropdown-action .cart-dropdow-checkout {
    background: #ba0d0d !important;
    background-image: linear-gradient(180deg, #ca0e0e 0%, #ba0d0d 100%) !important;
    border: 1.5px solid #ba0d0d !important;
    color: #fff !important;
}
#header .leo-dropdown-cart .leo-cart-dropdown-action .cart-dropdow-checkout:hover {
    background: #d60f0f !important;
    background-image: linear-gradient(180deg, #e61010 0%, #d60f0f 100%) !important;
    border-color: #d60f0f !important;
}

@media (max-width: 420px) {
    #header .leo-dropdown-cart .leo-dropdown-cart-item {
        grid-template-columns: 60px minmax(0, 1fr) auto;
        column-gap: 10px;
        padding: 12px 10px 12px 12px;
    }
    #header .leo-dropdown-cart .leo-cart-item-img,
    #header .leo-dropdown-cart .leo-cart-item-img img {
        width: 60px;
    }
    #header .leo-dropdown-cart .leo-cart-item-img img {
        height: 60px;
    }
    #header .leo-dropdown-cart .leo-dropdown-cart-item {
        grid-template-areas:
            "img name  name"
            "img attrs attrs"
            "img price price"
            "img qty   qty";
    }
    #header .leo-dropdown-cart .leo-cart-item-info .product-price {
        justify-self: start;
        text-align: left;
    }
    #header .leo-dropdown-cart .leo-cart-item-info .product-discount {
        justify-content: flex-start;
    }
    #header .leo-dropdown-cart .leo-cart-dropdown-action {
        grid-template-columns: 1fr;
    }
    /* Su schermi stretti il pulsante per procedere va sopra */
    #header .leo-dropdown-cart .leo-cart-dropdown-action .cart-dropdow-checkout {
        order: -1;
    }
}

/* Mini carrello: colori (battono "#header .col-info a, span { color !important }") */
#header .col-info .leo-dropdown-cart .leo-cart-item-info .product-name a {
    color: #222 !important;
}
#header .col-info .leo-dropdown-cart .leo-cart-item-info .product-name a:hover {
    color: #ba0d0d !important;
}
#header .col-info .leo-dropdown-cart .product-discount span.regular-price {
    color: #999 !important;
}
#header .col-info .leo-dropdown-cart .product-discount span.discount {
    color: #ba0d0d !important;
}
#header .col-info .leo-dropdown-cart .current-price span.price {
    color: #222 !important;
}
#header .col-info .leo-dropdown-cart .leo-dropdown-additional span.label,
#header .col-info .leo-dropdown-cart .leo-dropdown-additional span.value,
#header .col-info .leo-dropdown-cart .leo-dropdown-additional .customizations span {
    color: #777 !important;
}
#header .col-info .leo-dropdown-cart .leo-dropdown-cart-subtotals span.label {
    color: #666 !important;
}
#header .col-info .leo-dropdown-cart .leo-dropdown-cart-subtotals span.value,
#header .col-info .leo-dropdown-cart .leo-dropdown-cart-total span.label {
    color: #222 !important;
}
#header .col-info .leo-dropdown-cart .leo-dropdown-cart-total span.value {
    color: #ba0d0d !important;
}
#header .col-info .leo-dropdown-cart a.leo-remove-from-cart {
    color: #a3a3a3 !important;
}
#header .col-info .leo-dropdown-cart a.leo-remove-from-cart:hover {
    color: #ba0d0d !important;
}
#header .col-info .leo-dropdown-cart a.leo-bt-product-quantity {
    color: #333 !important;
}

/* =====================================================================
   Scheda prodotto: alert di disponibilità (#product-availability)
   ===================================================================== */
#product-availability {
    display: block;
    width: 100%;
    max-width: 520px;
    padding: 0;
    margin: 14px 0 6px;
    font-weight: 400;
}
#product-availability .alert {
    display: block;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.45;
}
#product-availability .alert-content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
#product-availability .alert-content-wrapper > div:first-child {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
#product-availability .alert .material-icons {
    font-size: 20px;
    line-height: 1.2;
}
#product-availability .alert-content-wrapper > div:last-child {
    min-width: 0;
}
#product-availability .alert-content-wrapper > div:last-child > div:first-child {
    font-weight: 700;
}
#product-availability .alert small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.9;
}
/* Disponibile */
#product-availability .alert-success {
    background-color: #eaf7ee;
    border-color: #cfe9d7;
    color: #1e7a44;
}
/* Ultimi pezzi / disponibile con riserva */
#product-availability .alert-warning {
    background-color: #fff6e5;
    border-color: #f2d9a3;
    color: #8a6100;
}
/* Non disponibile */
#product-availability .alert-danger {
    background-color: #fdecec;
    border-color: #f3c9c9;
    color: #a12c2c;
}

@media (max-width: 767px) {
    #product-availability {
        max-width: none;
        margin: 12px 0 4px;
    }
    #product-availability .alert {
        padding: 11px 13px;
        font-size: 13.5px;
    }
}

/* Scheda prodotto: spazio sopra e sotto il blocco delle tab */
body#product .product-tabs.tabs {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Card prodotto: la differenza di prezzo (es. -119,05 €) piu' piccola del prezzo */
.product-miniature .product-price-and-shipping .discount-amount,
.product-miniature .product-price-and-shipping .discount-percentage,
.product-miniature .product-price-and-shipping .discount-product {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
    vertical-align: middle;
}

/* =========================================================
   CAROSELLI PRODOTTI (home): card della stessa altezza
   Slick da' ad ogni slide l'altezza del suo contenuto, quindi card con i
   pallini colore o con lo sconto risultavano piu' alte delle altre.
   Qui la track diventa flex: tutte le slide si allungano alla piu' alta.
   ========================================================= */
.ApSlick .slick-track,
.elementor-LeoProductCarousel .slick-track {
    display: flex !important;
    align-items: stretch;
}
.ApSlick .slick-slide,
.elementor-LeoProductCarousel .slick-slide {
    height: auto !important;
    float: none;
}
.ApSlick .slick-slide.item,
.elementor-LeoProductCarousel .slick-slide.item {
    display: flex !important;
    flex-direction: column;
}
.ApSlick .slick-slide .product-miniature,
.elementor-LeoProductCarousel .slick-slide .product-miniature {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.ApSlick .slick-slide .product-miniature .thumbnail-container,
.elementor-LeoProductCarousel .slick-slide .product-miniature .thumbnail-container {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    /* flex invece di height:100%: altrimenti con i 2px di margine la card sborda
       dall area visibile del carosello e l ombra in basso viene tagliata */
    flex: 1 1 auto;
    min-height: 0;
}
/* Spazio per l ombra sotto le card (slick-list ha overflow:hidden) */
.ApSlick .slick-list,
.elementor-LeoProductCarousel .slick-list {
    padding-bottom: 5px;
}
.ApSlick .slick-slide .product-miniature .thumbnail-container .product-meta,
.elementor-LeoProductCarousel .slick-slide .product-miniature .thumbnail-container .product-meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
/* La categoria resta in fondo: le card finiscono tutte allo stesso punto */
.product-miniature .thumbnail-container .product-meta .category-default {
    margin-top: auto;
}

/* Quick view un po' piu' larga da desktop (il tema si ferma a 64rem = 1024px) */
@media (min-width: 992px) {
    .quickview .modal-dialog {
        max-width: 1180px;
    }
}

/* =========================================================
   SCHEDA PRODOTTO: immagini dentro la descrizione
   Le descrizioni importate contengono <img> con width/height fissi (o
   width:100% inline). Il tema ha solo img{max-width:100%} senza height:auto,
   quindi l altezza restava quella dell attributo -> immagini deformate; e nel
   container da 2000px venivano anche ingrandite oltre la risoluzione reale,
   risultando sgranate. Qui si ripristina il rapporto d aspetto e si blocca
   l ingrandimento alla dimensione nativa del file.
   ========================================================= */
body#product #description .product-description img,
body#product .tab-content .mt-product-tab img,
body#product .product-description-short img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
}
/* Le immagini della descrizione sono banner a se stanti: centrate nella colonna */
body#product #description .product-description img,
body#product .tab-content .mt-product-tab img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* Le tabelle larghe importate non devono sfondare la colonna */
body#product #description .product-description table,
body#product .tab-content .mt-product-tab table {
    max-width: 100%;
    height: auto !important;
}

/* =========================================================
   LISTA PRODOTTI (desktop): "Ordina per" allineato a destra
   La barra in alto usa la griglia a float (non flex): totale prodotti
   col-lg-3, selettore griglia col-lg-3 e ordinamento col-lg-6. Il selettore
   griglia non e' attivo, quindi restava un 25% vuoto a destra e l'ordinamento
   cadeva al centro. Con float:right il blocco ordinamento va a filo del bordo
   destro della lista (margin-left:auto non funziona su elementi flottati).
   ========================================================= */
@media (min-width: 992px) {
    #js-product-list-top .grid-selecting {
        float: right !important;
    }
}

/* =========================================================
   POPUP LOGIN / REGISTRAZIONE (modulo Leo Quick Login)
   DOM: .leo-quicklogin-modal > .modal-dialog > .modal-content >
        .modal-header (solo la X) | .modal-body > .leo-quicklogin-form >
        .leo-form.leo-login-form | .leo-form.leo-register-form
   Il modulo non stila nulla: il pulsante ereditava un .btn-primary
   bianco su bianco e risultava invisibile. Qui la popup prende
   spaziature, campi e pulsante coerenti col resto del sito.
   ========================================================= */
.leo-quicklogin-modal .modal-dialog {
    max-width: 520px;
}
.leo-quicklogin-modal .modal-content {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.leo-quicklogin-modal .modal-header {
    border-bottom: 0;
    padding: 12px 16px 0;
    min-height: 0;
}
.leo-quicklogin-modal .modal-header .close {
    opacity: 1;
    font-size: 28px;
    line-height: 1;
    color: #8a8a8a;
    text-shadow: none;
    background: transparent;
    border: 0;
    padding: 4px 8px;
    cursor: pointer;
}
.leo-quicklogin-modal .modal-header .close:hover {
    color: #2b2b2b;
}
.leo-quicklogin-modal .modal-body {
    padding: 0 32px 28px;
}
/* Footer vuoto nel template: toglie la riga grigia sotto al form */
.leo-quicklogin-modal .modal-footer {
    display: none;
}

/* Titolo del form */
.leo-quicklogin-modal .leo-login-title,
.leo-quicklogin-modal .leo-register-title,
.leo-quicklogin-modal .leo-resetpass-form .h3 {
    font-size: 22px;
    font-weight: 700;
    color: #2b2b2b;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ebebeb;
}

/* Campi */
.leo-quicklogin-modal .lql-form-content .form-group {
    margin-bottom: 14px;
}
.leo-quicklogin-modal .lql-form-content .form-control {
    height: auto;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #dcdde3;
    border-radius: 6px;
    background: #fff;
    color: #2b2b2b;
    font-size: 15px;
    box-shadow: none;
}
.leo-quicklogin-modal .lql-form-content .form-control::placeholder {
    color: #9a9a9a;
}
.leo-quicklogin-modal .lql-form-content .form-control:focus {
    border-color: #ba0d0d;
    box-shadow: 0 0 0 3px rgba(186, 13, 13, 0.12);
    outline: none;
}
/* Occhio "mostra password": allineato dentro al campo */
.leo-quicklogin-modal .lql-form-content-element {
    position: relative;
}
.leo-quicklogin-modal .lql-form-content-element > .fa-eye,
.leo-quicklogin-modal .lql-form-content-element > .fa-eye-slash {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #9a9a9a;
    cursor: pointer;
}

/* Layout "both": il modulo mette login e registrazione in due col-sm-6.
   Dentro una popup da 520px starebbero strette: qui vanno una sotto l'altra. */
.leo-quicklogin-modal .leo-form.col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
.leo-quicklogin-modal .leo-login-form.leo-form-active + .leo-register-form.leo-form-active {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #ebebeb;
}

/* Sig. / Sig.ra e checkbox: etichette allineate al controllo */
.leo-quicklogin-modal .form-control-valign {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 4px;
}
.leo-quicklogin-modal .lql-form-content .form-control-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 500;
    color: #2b2b2b;
    cursor: pointer;
}
.leo-quicklogin-modal .lql-form-content .form-control-label input[type="checkbox"] {
    margin: 0;
    flex: 0 0 auto;
}
/* Il pallino del tema (.custom-radio) porta gia' un margine suo: con il gap
   del label diventerebbe doppio */
.leo-quicklogin-modal .lql-form-content .form-control-label .custom-radio {
    margin: 0;
    flex: 0 0 auto;
}
.leo-quicklogin-modal .leo-form-chk + .form-group {
    margin-bottom: 20px;
}

/* Pulsante principale: stesso stile di "Aggiungi al carrello" */
.leo-quicklogin-modal .lql-form-bt.btn,
.leo-quicklogin-modal .lql-form-bt.btn-primary {
    width: 100%;
    display: block;
    padding: 14px 25px;
    border: none;
    border-radius: 50px;
    background-color: #ba0d0d;
    background-image: linear-gradient(180deg, #ca0e0e 0%, #ba0d0d 100%);
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(186, 13, 13, 0.2);
    transition: all 0.3s ease;
}
.leo-quicklogin-modal .lql-form-bt.btn:hover,
.leo-quicklogin-modal .lql-form-bt.btn:focus {
    background-color: #d60f0f;
    background-image: linear-gradient(180deg, #e61010 0%, #d60f0f 100%);
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(186, 13, 13, 0.4);
    transform: translateY(-1px);
}
/* Il template mette il bottone in un .text-right: a piena larghezza non serve */
.leo-quicklogin-modal .lql-form-content .form-group.text-right {
    text-align: center;
    margin-top: 20px;
}

/* Link "Password dimenticata" */
.leo-quicklogin-modal .leoquicklogin-forgotpass {
    color: #1a3fc4;
    font-size: 14px;
}

/* Riga finale: "Hai gia' un account? Entra invece / Resetta la password" */
.leo-quicklogin-modal .lql-callregister,
.leo-quicklogin-modal .lql-calllogin {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid #ebebeb;
    text-align: center;
    font-size: 14px;
    color: #666;
}
.leo-quicklogin-modal .lql-calllogin > div {
    margin-bottom: 4px;
}
.leo-quicklogin-modal .lql-callregister-action,
.leo-quicklogin-modal .lql-calllogin-action {
    color: #1a3fc4;
    font-weight: 600;
    text-decoration: underline;
}

/* Messaggi di errore/conferma del modulo */
.leo-quicklogin-modal .lql-form-mesg.has-danger,
.leo-quicklogin-modal .lql-form-mesg.has-success {
    border-radius: 6px;
    font-size: 14px;
}

@media (max-width: 575px) {
    .leo-quicklogin-modal .modal-body {
        padding: 0 18px 22px;
    }
}

/* =========================================================
   TITOLO PRODOTTO COMPLETO NELLE CARD
   theme.css taglia il titolo a una riga con -webkit-line-clamp:1 +
   text-overflow:ellipsis (regole .thumbnail-container .product-title a e
   .leo-plist-style-3 ...). Qui il titolo va a capo e si vede per intero.
   Le regole del tema non si toccano: custom.css viene caricato dopo.
   ========================================================= */
.thumbnail-container .product-title a,
.leo-plist-style-3 .thumbnail-container .product-title a,
.product-miniature .product-title a {
    display: block !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: horizontal;
}

/* =========================================================
   CARD PRODOTTO: NUOVO ORDINE + CTA CARRELLO
   Markup da plist1833498166.tpl (categorie + caroselli):
     .p-name > h3.product-title
             > .highlighted-informations     (pallini colore)
             > .mt-card-actions > .product-price-and-shipping + .mt-card-cart
   La riga finale resta incollata in basso anche quando il titolo e'
   corto, cosi' prezzo e pulsante sono allineati tra card vicine.
   ========================================================= */
.product-miniature .thumbnail-container .product-meta .p-name {
    flex: 1 1 auto;
    padding-bottom: 2px;
}
/* Il tema lascia 30px sotto: con la riga di prezzo e carrello bastano 18 */
.leo-plist-style-3 .thumbnail-container .product-meta {
    padding-bottom: 18px;
}

/* Riga finale: prezzo a sinistra, carrello a destra */
.product-miniature .thumbnail-container .mt-card-actions {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    /* flex-end: il pulsante resta alla stessa quota anche se il prezzo
       di listino barrato manca (riga piu' bassa) */
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}
.product-miniature .thumbnail-container .mt-card-actions .product-price-and-shipping {
    margin: 0;
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
}
.product-miniature .thumbnail-container .mt-card-cart {
    flex: 0 0 auto;
}
/* Il pulsante del carrello ajax arriva dentro .button-container.cart > form */
.product-miniature .thumbnail-container .mt-card-cart .button-container.cart,
.product-miniature .thumbnail-container .mt-card-cart form {
    display: block;
    margin: 0;
    padding: 0;
    position: static;
    opacity: 1;
    visibility: visible;
}
/* Alcuni stili di lista nascondono l'etichetta del pulsante */
.product-miniature .thumbnail-container .mt-card-cart .name-btn-product {
    display: inline;
}
.product-miniature .thumbnail-container .mt-card-cart .btn.add-to-cart,
.product-miniature .thumbnail-container .mt-card-cart .leo-bt-cart,
.product-miniature .thumbnail-container .mt-card-cart .mt-add-to-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 9px 16px;
    border: none;
    border-radius: 50px;
    background-color: #ba0d0d;
    background-image: linear-gradient(180deg, #ca0e0e 0%, #ba0d0d 100%);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}
.product-miniature .thumbnail-container .mt-card-cart .btn.add-to-cart:hover,
.product-miniature .thumbnail-container .mt-card-cart .leo-bt-cart:hover,
.product-miniature .thumbnail-container .mt-card-cart .mt-add-to-cart:hover {
    background-color: #d60f0f;
    background-image: linear-gradient(180deg, #e61010 0%, #d60f0f 100%);
    box-shadow: 0 4px 12px rgba(186, 13, 13, 0.3);
}
.product-miniature .thumbnail-container .mt-card-cart .material-icons {
    font-size: 18px;
    line-height: 1;
}
/* Prodotto non disponibile: pulsante spento e non cliccabile */
.product-miniature .thumbnail-container .mt-card-cart .mt-add-to-cart.disabled,
.product-miniature .thumbnail-container .mt-card-cart .btn.add-to-cart.disabled {
    background: #d8d9de;
    background-image: none;
    color: #7c7f8a !important;
    box-shadow: none;
    pointer-events: none;
}

/* ---------------------------------------------------------
   ADATTAMENTO ALLA LARGHEZZA REALE DELLA CARD
   .product-meta e' un container: le regole scattano in base allo spazio
   che la card ha davvero (2 colonne su telefono, 3 su desktop stretto),
   non in base alla viewport.
   --------------------------------------------------------- */
.product-miniature .thumbnail-container .product-meta {
    container-type: inline-size;
    container-name: mtmeta;
}
/* Sotto i ~300px prezzo + pulsante con testo non ci stanno: il pulsante
   diventa un cerchio con la sola icona (44px = area minima per il tocco),
   e il prezzo di listino barrato va sopra il prezzo scontato. */
@container mtmeta (max-width: 300px) {
    .product-miniature .thumbnail-container .mt-card-actions {
        gap: 8px;
    }
    .product-miniature .thumbnail-container .mt-card-actions .product-price-and-shipping {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .product-miniature .thumbnail-container .mt-card-actions .product-price-and-shipping .regular-price {
        order: -1;
        margin: 0;
        font-size: 12px;
        line-height: 1.2;
    }
    .product-miniature .thumbnail-container .mt-card-actions .product-price-and-shipping .price {
        margin: 0;
        font-size: 17px;
        line-height: 1.3;
    }
    .product-miniature .thumbnail-container .mt-card-cart .name-btn-product,
    .product-miniature .thumbnail-container .mt-card-cart .mt-add-to-cart-label {
        display: none !important;
    }
    /* Cerchio perfetto: stessa larghezza e altezza, niente padding del tema
       (.leo-plist-style .cart .add-to-cart ha padding 10px 15px) */
    .product-miniature .thumbnail-container .mt-card-cart .btn.add-to-cart,
    .product-miniature .thumbnail-container .mt-card-cart .leo-bt-cart,
    .product-miniature .thumbnail-container .mt-card-cart .mt-add-to-cart {
        box-sizing: border-box !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        gap: 0;
        line-height: 1 !important;
    }
}

/* ---------------------------------------------------------
   TELEFONO (card a 2 colonne, ~230px)
   --------------------------------------------------------- */
@media (max-width: 767px) {
    .leo-plist-style-3 .thumbnail-container .product-meta,
    .product-miniature .thumbnail-container .product-meta {
        padding: 10px 12px 14px;
    }
    .product-miniature .thumbnail-container .product-title a {
        font-size: 13px;
        line-height: 1.35;
    }
    .product-miniature .thumbnail-container .mt-card-actions {
        padding-top: 10px;
    }
    /* Pulsanti wishlist/confronta sopra l'immagine: piu' piccoli e vicini
       al bordo, altrimenti coprono il prodotto. Il tocco resta sopra i 34px. */
    .leo-plist-style-3 .thumbnail-container .functional-buttons {
        top: 6px;
        right: 6px;
    }
    .leo-plist-style-3 .thumbnail-container .functional-buttons .quick-view,
    .leo-plist-style-3 .thumbnail-container .functional-buttons .btn-product {
        width: 34px;
        height: 34px;
        line-height: 34px;
        margin-bottom: 4px;
    }
    .leo-plist-style-3 .thumbnail-container .functional-buttons .quick-view i,
    .leo-plist-style-3 .thumbnail-container .functional-buttons .btn-product i {
        font-size: 18px;
        line-height: 34px;
    }
    /* Flag sconto piu' compatto */
    .product-miniature .thumbnail-container .product-flags {
        top: 6px;
        left: 6px;
    }
    .product-miniature .thumbnail-container .product-flags li {
        font-size: 11px;
        line-height: 1.4;
        padding: 2px 6px;
    }
}

/* Flag sconto/non disponibile sempre visibili nelle card: il tema li nasconde
   all'hover (.leo-plist-style-3 .thumbnail-container:hover .product-flags)
   per far posto ai pulsanti wishlist/confronta/anteprima. */
.product-miniature .thumbnail-container:hover .product-flags,
.leo-plist-style-3 .thumbnail-container:hover .product-flags {
    opacity: 1 !important;
    visibility: visible !important;
}

/* =========================================================
   PALLINI COLORE ANCHE SU TELEFONO
   Il template porta .hidden-sm-down su .highlighted-informations, quindi
   sotto i 768px i colori sparivano. Restano nascosti solo i prodotti
   senza varianti (.no-variants, regola gia' sopra).
   ========================================================= */
.product-miniature .thumbnail-container .highlighted-informations.hidden-sm-down:not(.no-variants) {
    display: block !important;
}
@media (max-width: 767px) {
    /* 28px: 6 colori stanno su una riga nella card a 2 colonne (~210px utili) */
    .product-miniature .thumbnail-container .variant-links {
        gap: 6px;
        margin: 8px 0 0;
    }
    .product-miniature .thumbnail-container .variant-links .color {
        width: 28px;
        height: 28px;
    }
}

/* =========================================================
   ICONE CENTRATE NEI PULSANTI TONDI DELLA CARD
   Le icone sono disegnate dal ::before (FontAwesome), ma dentro <i> c'e'
   anche il carattere Material Icons (&#xE87D; ecc.): occupa spazio e spinge
   il disegno a sinistra del cerchio. Con font-size:0 sull'<i> il carattere
   non pesa piu', il glifo del ::before ha la sua dimensione e sta al centro.
   ========================================================= */
.product-miniature .thumbnail-container .functional-buttons .btn-product,
.product-miniature .thumbnail-container .functional-buttons .quick-view,
.product-miniature .thumbnail-container .mt-card-cart .btn.add-to-cart,
.product-miniature .thumbnail-container .mt-card-cart .leo-bt-cart {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.product-miniature .thumbnail-container .functional-buttons .leo-wishlist-bt-content,
.product-miniature .thumbnail-container .functional-buttons .leo-compare-bt-content,
.product-miniature .thumbnail-container .functional-buttons .leo-quickview-bt-content,
.product-miniature .thumbnail-container .mt-card-cart .leo-bt-cart-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
}
.product-miniature .thumbnail-container .functional-buttons .btn-product i,
.product-miniature .thumbnail-container .functional-buttons .quick-view i,
.product-miniature .thumbnail-container .mt-card-cart .icon-btn-product,
.product-miniature .thumbnail-container .mt-card-cart .material-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 0 !important;
    line-height: 1 !important;
    vertical-align: middle;
}
.product-miniature .thumbnail-container .functional-buttons .btn-product i::before,
.product-miniature .thumbnail-container .functional-buttons .quick-view i::before,
.product-miniature .thumbnail-container .mt-card-cart .icon-btn-product::before {
    font-size: 18px;
    line-height: 1;
    display: block;
}
.product-miniature .thumbnail-container .mt-card-cart .icon-btn-product::before {
    font-size: 20px;
}
/* Il pulsante largo (desktop) tiene icona e testo affiancati */
.product-miniature .thumbnail-container .mt-card-cart .leo-bt-cart-content {
    width: auto;
    gap: 6px;
}
.product-miniature .thumbnail-container .mt-card-cart .icon-btn-product {
    width: auto;
}
@container mtmeta (max-width: 300px) {
    .product-miniature .thumbnail-container .mt-card-cart .leo-bt-cart-content {
        width: 100%;
        gap: 0;
    }
}
/* Fallback senza modulo carrello: l'<i> porta il glifo Material come testo */
.product-miniature .thumbnail-container .mt-card-cart .mt-add-to-cart .material-icons {
    font-size: 20px !important;
    width: auto;
}

/* Flag sconto (percentuale e importo): rosso brand al posto dell'arancio del
   tema (--sale-badge-background). Vale per card, schede prodotto e caroselli. */
.product-flags .product-flag.discount,
.product-flags li.product-flag.discount {
    background-color: #ba0d0d !important;
    border-color: #ba0d0d !important;
    color: #fff !important;
}

/* =========================================================
   BARRA STRUMENTI LISTA PRODOTTI (conteggio + ordinamento + filtri)
   DOM (catalog/_partials/products-top.tpl + sort-orders.tpl):
     #js-product-list-top.products-selection > .row >
       .total-products | .grid-selecting > .sort-by-row >
           .sort-by (label) + .products-sort-order.dropdown >
              button.select-title + .dropdown-menu > a.select-list
           + .filter-button (solo < 768px)
       | .showing (solo < 768px: "Visualizzati 1-18 di N articoli")
   Prima: testo e select staccati agli estremi, select a tutta larghezza
   con freccia lontana dal testo, nessun aiuto visivo sulla voce scelta.
   Ora: una barra unica bianca, conteggio a sinistra, ordinamento a destra,
   tendina dimensionata sul contenuto.
   ========================================================= */
#js-product-list-top.products-selection {
    margin: 0 0 20px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #e8e8ee;
    border-bottom: 1px solid #e8e8ee;
}
#js-product-list-top.products-selection > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 0;
}
/* Il clearfix di Bootstrap (.row::before/::after, display:table) in una riga flex
   diventa un elemento a se': con space-between spingeva "Ordina per" al centro. */
#js-product-list-top.products-selection > .row::before,
#js-product-list-top.products-selection > .row::after {
    display: none;
}
#js-product-list-top.products-selection > .row > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    float: none;
}

/* Conteggio prodotti */
#js-product-list-top .total-products {
    padding: 0;
}
#js-product-list-top .total-products p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #6b6f7d;
}

/* Ordinamento: etichetta + tendina sulla stessa riga */
#js-product-list-top .grid-selecting {
    margin: 0 0 0 auto;
}
#js-product-list-top .sort-by-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
}
#js-product-list-top .sort-by-row > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    padding: 0;
    float: none;
}
#js-product-list-top .sort-by {
    text-align: left;
    white-space: nowrap;
    font-size: 14px;
    color: #6b6f7d;
}
#js-product-list-top .products-sort-order {
    position: relative;
    min-width: 260px;
    padding: 0;
}
#js-product-list-top .products-sort-order .select-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #dcdde3;
    border-radius: 4px;
    color: #2b2b2b;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#js-product-list-top .products-sort-order .select-title:hover {
    border-color: #b9bbc6;
}
#js-product-list-top .products-sort-order .select-title:focus,
#js-product-list-top .products-sort-order.open .select-title {
    border-color: #ba0d0d;
    box-shadow: 0 0 0 3px rgba(186, 13, 13, 0.12);
    outline: none;
}
#js-product-list-top .products-sort-order .select-title .material-icons {
    float: none;
    flex: 0 0 auto;
    color: #6b6f7d;
    font-size: 22px;
    transition: transform 0.2s ease;
}
#js-product-list-top .products-sort-order.open .select-title .material-icons {
    transform: rotate(180deg);
}

/* Tendina: larga quanto serve alle voci piu' lunghe, non 90% del campo */
#js-product-list-top .products-sort-order .dropdown-menu {
    left: auto;
    right: 0;
    width: max-content;
    min-width: 100%;
    max-width: min(360px, 92vw);
    margin: 6px 0 0;
    padding: 6px 0;
    background: #fff;
    border: 1px solid #e8e8ee;
    border-radius: 4px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    z-index: 60;
}
#js-product-list-top .products-sort-order .select-list {
    position: relative;
    display: block;
    padding: 11px 40px 11px 16px;
    color: #2b2b2b;
    font-size: 14px;
    line-height: 1.35;
    white-space: normal;
}
#js-product-list-top .products-sort-order .select-list:hover,
#js-product-list-top .products-sort-order .select-list:focus {
    background: #f6f7fa;
    color: #ba0d0d;
    text-decoration: none;
}
/* Voce attiva: rossa, in grassetto, con spunta a destra */
#js-product-list-top .products-sort-order .select-list.current {
    color: #ba0d0d;
    font-weight: 700;
}
#js-product-list-top .products-sort-order .select-list.current::after {
    content: "\2713";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-weight: 700;
}

/* Tablet (768-991px): il tema nasconde il conteggio sotto i 992px e il
   "Visualizzati..." parte solo dai 768 in giu': in mezzo non si vedeva nulla */
@media (min-width: 768px) and (max-width: 991px) {
    #js-product-list-top .total-products {
        display: block !important;
    }
}

/* Telefono: conteggio in alto, sotto ordinamento e filtri su un'unica riga */
@media (max-width: 767px) {
    #js-product-list-top.products-selection {
        padding: 12px;
        margin-bottom: 14px;
    }
    #js-product-list-top.products-selection > .row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    #js-product-list-top .showing {
        order: -1;
        width: 100%;
        padding: 0;
        text-align: left;
        font-size: 13px;
        color: #6b6f7d;
    }
    #js-product-list-top.products-selection > .row > .grid-selecting {
        width: 100%;
    }
    #js-product-list-top .sort-by-row {
        gap: 8px;
    }
    #js-product-list-top .sort-by-row > .products-sort-order {
        flex: 1 1 auto;
        min-width: 0;
    }
    #js-product-list-top .products-sort-order .select-title {
        height: 44px;
    }
    #js-product-list-top .products-sort-order .dropdown-menu {
        left: 0;
        right: auto;
        max-width: 92vw;
    }
    /* Pulsante Filtra: stessa altezza e stile del select, con icona */
    #js-product-list-top .filter-button {
        flex: 0 0 auto;
    }
    #js-product-list-top .filter-button .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 16px;
        background: #fff;
        border: 1px solid #dcdde3;
        border-radius: 4px;
        color: #2b2b2b;
        font-size: 14px;
        font-weight: 700;
        text-transform: none;
        box-shadow: none;
    }
    #js-product-list-top .filter-button .btn::before {
        content: "\f1de";
        font-family: "FontAwesome";
        font-size: 15px;
        font-weight: normal;
        color: #ba0d0d;
    }
}

/* =========================================================
   ALBERATURA CATEGORIE ("Catalogo prodotti", colonna sinistra)
   Markup: themes/.../ps_categorytree/.../ps_categorytree.tpl
     .block-categories > ul.category-top-menu > li > ul.category-sub-menu >
        li[data-depth=0] > a + .collapse-icons(+/-) + .collapse >
           ul.category-sub-menu > li[data-depth=1] > a.category-sub-link
     li.is-in-path = ramo aperto, li.is-current = categoria visitata
   Livello 0: pallino vuoto a sinistra, "+" a destra.
   Livello 1: linee ad albero (verticale + tacca, la corrente chiude ad L).
   ========================================================= */
.block-categories .block_content {
    padding: 4px 0;
}
.block-categories .category-top-menu,
.block-categories .category-sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.block-categories .category-top-menu > li {
    list-style: none;
}
.block-categories .category-sub-menu li {
    position: relative;
    padding: 0;
    list-style: none;
}

/* ---- livello 0 ---- */
.block-categories .category-sub-menu li[data-depth="0"] > a {
    display: block;
    width: auto;
    margin: 0;
    padding: 7px 40px 7px 22px;
    font-size: 15px;
    line-height: 22px;
    color: #444;
    text-transform: none;
}
/* pallino vuoto (sostituisce la lineetta hover del tema) */
.block-categories .category-sub-menu li[data-depth="0"] > a::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 2px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    box-sizing: border-box;
    border: 1px solid #b5b5b5;
    border-radius: 50%;
    background: transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.block-categories .category-sub-menu li[data-depth="0"] > a:hover {
    padding-left: 22px;
    color: #ba0d0d;
    font-weight: 400;
}
.block-categories .category-sub-menu li[data-depth="0"] > a:hover::before,
.block-categories .category-sub-menu li[data-depth="0"].is-in-path > a::before {
    width: 8px;
    border-color: #ba0d0d;
}
.block-categories .category-sub-menu li[data-depth="0"].is-current > a {
    font-weight: 700;
    color: #2b2b2b;
}
.block-categories .category-sub-menu li[data-depth="0"].is-current > a::before {
    background: #ba0d0d;
    border-color: #ba0d0d;
}

/* "+" / "-" a destra, centrato sulla riga del livello 0 (riga alta 36px) */
.block-categories .collapse-icons {
    position: absolute;
    top: 3px;
    right: 0;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.block-categories .collapse-icons .add,
.block-categories .collapse-icons .remove {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    text-align: center;
    color: #555;
}
.block-categories .collapse-icons:hover .add,
.block-categories .collapse-icons:hover .remove {
    color: #ba0d0d;
}

/* ---- livello 1: linee ad albero ---- */
.block-categories .category-sub-menu li[data-depth="0"] ul.category-sub-menu {
    margin: 0 0 6px 2px;
    padding: 0;
}
.block-categories .category-sub-menu li[data-depth="1"] {
    padding: 0 0 0 30px;
}
/* linea verticale (si ferma a meta' sull'ultima voce: forma di L) */
.block-categories .category-sub-menu li[data-depth="1"]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 8px;
    width: 1px;
    background: #cfd0d6;
}
.block-categories .category-sub-menu li[data-depth="1"]:last-child::before {
    bottom: 50%;
}
/* tacca orizzontale verso il testo */
.block-categories .category-sub-menu li[data-depth="1"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 8px;
    width: 14px;
    height: 1px;
    background: #cfd0d6;
}
.block-categories .category-sub-menu li[data-depth="1"] > a {
    display: block;
    width: auto;
    margin: 0;
    padding: 6px 0;
    font-size: 14px;
    line-height: 22px;
    color: #555;
    transition: color 0.2s ease;
}
/* niente lineetta hover del tema sui figli: qui c'e' l'albero */
.block-categories .category-sub-menu li[data-depth="1"] > a::before {
    display: none;
}
.block-categories .category-sub-menu li[data-depth="1"] > a:hover {
    padding-left: 0;
    color: #ba0d0d;
    font-weight: 400;
}
.block-categories .category-sub-menu li[data-depth="1"].is-current > a {
    font-weight: 700;
    color: #2b2b2b;
}

/* =========================================================
   PAGINAZIONE (fondo lista prodotti)
   DOM (_partials/pagination.tpl):
     nav.pagination > #pagination_summary.col-md-4
                    + .col-md-6.offset-md-2 > ul.page-list > li > a
   (li.current = pagina attiva; a.previous / a.next con etichetta + icona)
   Stessa barra della testata elenco: bianca con bordo sottile, riepilogo
   a sinistra, numeri a destra come pulsanti quadrati, pagina attiva rossa.
   ========================================================= */
nav.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 24px 0 0;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #e8e8ee;
}
nav.pagination > [class*="col-"] {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}
nav.pagination #pagination_summary {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #6b6f7d;
}
nav.pagination .page-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
nav.pagination .page-list::before,
nav.pagination .page-list::after {
    display: none;
}
nav.pagination .page-list li {
    display: flex;
    margin: 0;
}
nav.pagination .page-list li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #dcdde3;
    border-radius: 4px;
    color: #2b2b2b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
nav.pagination .page-list li a:hover,
nav.pagination .page-list li a:focus {
    background: #f6f7fa;
    border-color: #ba0d0d;
    border-radius: 4px;
    color: #ba0d0d;
    text-decoration: none;
}
/* Il tema mette letter-spacing:.125rem sui numeri (selettore con :not): serve pari peso */
nav.pagination .page-list li a:not(.previous):not(.next) {
    letter-spacing: 0;
}
/* Pagina attiva */
nav.pagination .page-list li.current a,
nav.pagination .page-list li.current a:hover {
    background: #ba0d0d;
    border-color: #ba0d0d;
    border-radius: 4px;
    color: #fff;
    cursor: default;
}
/* "..." tra i numeri */
nav.pagination .page-list li span.spacer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 24px;
    height: 40px;
    padding: 0;
    border-radius: 0;
    color: #6b6f7d;
}
/* Precedente / Successivo: etichetta maiuscola + freccia (il tema li teneva a font-size 0) */
nav.pagination .page-list li a.previous,
nav.pagination .page-list li a.next {
    gap: 2px;
    padding: 0 12px;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
nav.pagination .page-list li a.previous .material-icons,
nav.pagination .page-list li a.next .material-icons {
    font-size: 20px;
    line-height: 1;
}
/* la pagina corrente ha anch'essa .disabled: si escludono i suoi li */
nav.pagination .page-list li:not(.current) a.disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* Telefono: il riepilogo e' gia' in cima all'elenco, qui restano solo i numeri
   centrati; Precedente/Successivo diventano solo freccia. */
@media (max-width: 767px) {
    nav.pagination {
        justify-content: center;
        padding: 10px 8px;
    }
    nav.pagination #pagination_summary {
        display: none;
    }
    nav.pagination .page-list {
        justify-content: center;
        gap: 4px;
    }
    nav.pagination .page-list li a {
        min-width: 38px;
        height: 38px;
        padding: 0 6px;
    }
    nav.pagination .page-list li a.previous,
    nav.pagination .page-list li a.next {
        font-size: 0;
        padding: 0 6px;
        min-width: 38px;
    }
}

/* =========================================================
   BLOCCO "DI TENDENZA" (colonna sinistra) - LISTA COMPATTA
   Widget LeoProductCarousel di Elementor (post 24, elemento 2c5ab0f) che
   riusa la card grande delle liste. Qui diventa un riquadro con titolo e
   righe: foto piccola + nome + prezzo, separate da una linea tratteggiata.
   Tutto e' limitato a .elementor-element-2c5ab0f: gli altri caroselli non
   cambiano. Il template e' quello delle card (plist1833498166.tpl), quindi
   pulsanti, colori e flag si nascondono da CSS.
   Foto a sinistra come nel riferimento; per averla a destra basta
   cambiare "row" in "row-reverse" in .thumbnail-container qui sotto.
   ========================================================= */
/* Riquadro e titolo identici a "Catalogo prodotti" (.sidebar .block del tema):
   stessi padding, bordo, raggio, margine, font, colore e filetto sotto il titolo.
   Vale anche per "Prodotti speciali" (widget de91ed3, stesso carosello ma con
   le card grandi: qui cambia solo il contenitore). */
.elementor-element-2c5ab0f .elementor-LeoProductCarousel-wrapper,
.elementor-element-de91ed3 .elementor-LeoProductCarousel-wrapper {
    margin-bottom: 30px;
    padding: 25px 30px;
    background: var(--block-background, transparent);
    border: 1px solid #DCDDE3;
    border-radius: 10px;
}
.elementor-element-2c5ab0f .title_block,
.elementor-element-de91ed3 .title_block {
    position: relative;
    margin: 0 0 20px;
    padding: 0 0 13px;
    background: var(--block-heading-bg, transparent);
    border: 0;
    border-bottom: 2px solid #DCDDE3;
    border-radius: 0;
    color: var(--block-heading-color, #313F90) !important;
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none !important;
}
/* Segmento blu sotto il titolo, come nel blocco categorie */
.elementor-element-2c5ab0f .title_block::before,
.elementor-element-de91ed3 .title_block::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 45px;
    height: 2px;
    background-color: #313F90;
}

/* Lo slider non deve tagliare o impaginare: tutte le righe una sotto l'altra */
.elementor-element-2c5ab0f .elementor-LeoProductCarousel {
    padding: 0;
    margin: 0;
}
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-list {
    height: auto !important;
    overflow: visible;
    padding: 0;
    margin: 0;
}
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-track {
    display: block !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
}
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide.item {
    display: block !important;
    float: none;
    width: auto !important;
    height: auto;
}
.elementor-element-2c5ab0f .slick-arrow,
.elementor-element-2c5ab0f .slick-dots {
    display: none !important;
}

/* Riga: foto + testi */
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature {
    display: block;
    height: auto;
}
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .thumbnail-container {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    height: auto;
    padding: 16px 0;
    background: transparent;
    border: 0 !important;
    border-bottom: 1px dashed #cfd0d6 !important;
    box-shadow: none !important;
    overflow: visible;
}
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature:last-child .thumbnail-container {
    border-bottom: 0 !important;
}
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature:first-child .thumbnail-container {
    padding-top: 0;
}
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature:last-child .thumbnail-container {
    padding-bottom: 0;
}
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .thumbnail-container:hover {
    box-shadow: none !important;
}
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .thumbnail-container .product-image {
    flex: 0 0 96px;
    width: 96px;
    background: transparent;
}
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .thumbnail-container .product-meta {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    display: block;
}
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .thumbnail-container .product-meta .p-name {
    padding: 0;
}

/* Cio' che qui non serve */
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .thumbnail-container .product-flags,
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .thumbnail-container .functional-buttons,
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .thumbnail-container .highlighted-informations,
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .thumbnail-container .highlighted-informations.hidden-sm-down:not(.no-variants),
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .thumbnail-container .mt-card-cart,
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .thumbnail-container .leo-list-product-reviews {
    display: none !important;
}

/* Titolo: completo, in grassetto */
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .product-title {
    margin: 0 0 6px;
}
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .product-title a {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: #2b2b2b;
}
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .product-title a:hover {
    color: #ba0d0d;
}

/* Prezzo rosso in grassetto, poi il prezzo di listino barrato */
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .mt-card-actions {
    padding-top: 0;
    margin-top: 0;
}
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .mt-card-actions .product-price-and-shipping {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
}
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .mt-card-actions .product-price-and-shipping .price {
    order: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #ba0d0d;
}
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide .product-miniature .mt-card-actions .product-price-and-shipping .regular-price {
    order: 2;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #6b6f7d;
    text-decoration: line-through;
}

/* "Prodotti speciali": card grandi dentro il riquadro, distanziate tra loro
   (prima si toccavano sul bordo) e senza sporgere dal padding. */
.elementor-element-de91ed3 .elementor-LeoProductCarousel {
    margin: 0;
    padding: 0;
}
.elementor-element-de91ed3 .elementor-LeoProductCarousel .slick-slide .product-miniature + .product-miniature,
.elementor-element-de91ed3 .elementor-LeoProductCarousel .slick-slide + .slick-slide {
    margin-top: 20px;
}

/* Le slide di Elementor portano un padding laterale (gap colonne): dentro il
   riquadro faceva rientrare card e righe di 15px rispetto al titolo. */
.elementor-element-de91ed3 .elementor-LeoProductCarousel .slick-slide.item,
.elementor-element-2c5ab0f .elementor-LeoProductCarousel .slick-slide.item {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Prezzo scontato: stesso blu dei prezzi normali. Il tema lo colora come il
   prezzo di listino (--product-regular-price-color, grigio) con
   ".regular-price + span.price"; qui torna al colore standard del prezzo.
   Senza !important: il blocco "Di Tendenza" ha il suo prezzo rosso, piu' specifico. */
.product-miniature .thumbnail-container .product-price-and-shipping .regular-price + span.price {
    color: var(--product-price-color, #313F90);
}

/* =========================================================
   BLOCCO "MARCHI" (colonna sinistra) - GRIGLIA A 2 COLONNE
   Widget LeoManufacturersCarousel di Elementor (elemento 9fffd92):
     .manufacturers_block > .block_content > .slick-row >
       .slick-manufacturers > .slick-slide > .item > .manufacturer-container >
         .left-block > .manufacturer-image-container > a >
            p.name-manufacturer + img
   Il carosello a 1 elemento mostrava il nome sopra a ogni logo, uno per riga.
   Ora: solo i loghi (il nome resta in title/alt per accessibilita'), in una
   griglia a 2 colonne dentro il riquadro standard dei blocchi laterali.
   Il riquadro e il titolo sono quelli del tema (.sidebar .block).
   ========================================================= */
/* Senza JS le slide sono figlie dirette di .slick-manufacturers; con slick attivo
   (rows) la traccia contiene UNA slide esterna [data-slick-index] che a sua volta
   racchiude tutte le altre (div > .slick-slide): la griglia va sul contenitore
   che ha davvero le tessere come figlie, non sulla traccia. */
.elementor-element-9fffd92 .manufacturers_block .slick-manufacturers:not(.slick-initialized),
.elementor-element-9fffd92 .manufacturers_block .slick-manufacturers .slick-slide[data-slick-index] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: auto !important;
    height: auto !important;
}
.elementor-element-9fffd92 .manufacturers_block .slick-manufacturers .slick-track {
    display: block !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
}
/* il clearfix di slick diventerebbe una cella vuota della griglia */
.elementor-element-9fffd92 .manufacturers_block .slick-manufacturers .slick-track::before,
.elementor-element-9fffd92 .manufacturers_block .slick-manufacturers .slick-track::after {
    display: none !important;
}
.elementor-element-9fffd92 .manufacturers_block .slick-manufacturers .slick-list {
    height: auto !important;
    overflow: visible;
    margin: 0;
    padding: 0;
}
.elementor-element-9fffd92 .manufacturers_block .slick-manufacturers .slick-slide:not([data-slick-index]) {
    display: block !important;
    float: none;
    width: auto !important;
    height: auto;
    margin: 0;
    padding: 0 !important;
}
/* Il tema/Elementor danno padding laterale alle slide: le tessere restavano
   rientrate rispetto al titolo. */
.elementor-element-9fffd92 .manufacturers_block .slick-manufacturers .slick-slide[data-slick-index],
.elementor-element-9fffd92 .manufacturers_block .slick-manufacturers .slick-slide .item {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.elementor-element-9fffd92 .manufacturers_block .slick-arrow,
.elementor-element-9fffd92 .manufacturers_block .slick-dots {
    display: none !important;
}
/* niente nome sopra il logo */
.elementor-element-9fffd92 .manufacturers_block .name-manufacturer {
    display: none;
}
/* tessera del logo: quadrata-ish, bordo sottile, logo centrato e mai tagliato */
.elementor-element-9fffd92 .manufacturers_block .manufacturer-container,
.elementor-element-9fffd92 .manufacturers_block .left-block,
.elementor-element-9fffd92 .manufacturers_block .manufacturer-image-container {
    margin: 0;
    padding: 0;
    width: 100%;
    float: none;
}
.elementor-element-9fffd92 .manufacturers_block .manufacturer-image-container a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    aspect-ratio: 4 / 3;
    padding: 10px;
    background: #fff;
    border: 1px solid #e8e8ee;
    transition: border-color 0.2s ease;
}
.elementor-element-9fffd92 .manufacturers_block .manufacturer-image-container a:hover {
    border-color: #313F90;
}
.elementor-element-9fffd92 .manufacturers_block .manufacturer-image-container img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* =========================================================
   PAGINA CATEGORIA DA TELEFONO: PRIMA I PRODOTTI, POI LA COLONNA SINISTRA
   Nel DOM #left-column (catalogo, filtri, marchi...) precede #content-wrapper
   nella stessa .row, quindi sotto i 768px (colonne a tutta larghezza) finiva
   sopra ai prodotti. La riga diventa flex e l'ordine si inverte solo li'.
   Da 768px in su restano affiancate come prima.
   ========================================================= */
@media (max-width: 767px) {
    body#category #wrapper > .container > .row {
        display: flex;
        flex-wrap: wrap;
    }
    /* il clearfix di Bootstrap (display:table) sarebbe un elemento della riga flex */
    body#category #wrapper > .container > .row::before,
    body#category #wrapper > .container > .row::after {
        display: none;
    }
    body#category #wrapper > .container > .row > #content-wrapper {
        order: 1;
    }
    body#category #wrapper > .container > .row > #left-column {
        order: 2;
    }
}

/* =========================================================
   VISTA RAPIDA PRODOTTO (modale .quickview)
   Markup: catalog/_partials/quickview.tpl
     .modal-header(X) | .modal-body > .row > [immagine | titolo, prezzo,
     descrizione breve, varianti, quantita' + carrello] | .modal-footer
     (video, marca, riferimento, disponibilita')
   ZOOM: il modulo Leo Gallery applica jquery.magnify alla cover: una lente
   tonda da 200px (.magnify-lens) segue il mouse e ingrandisce l'immagine.
   Nella vista rapida non serve e disturba: si nasconde la lente e la cover
   non e' piu' cliccabile (il click apriva la lightbox sopra la modale).
   ========================================================= */
.quickview .magnify > .magnify-lens,
.quickview .product-cover .layer,
.quickview .product-cover .tracker,
body.modal-open .tracker,
body.modal-open .magnifier,
body.modal-open .cursorshade,
body.modal-open .statusdiv {
    display: none !important;
    pointer-events: none !important;
}
.quickview .product-cover {
    position: relative;
    background: #fff;
    border: 1px solid #e8e8ee;
}
.quickview .product-cover .magnify {
    display: block;
    width: 100%;
}
.quickview .product-cover img,
.quickview .product-cover .js-qv-product-cover {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 0 !important;
    cursor: default;
    pointer-events: none;
}

/* Contenitore */
.quickview .modal-content {
    border: 0;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
.quickview .modal-header {
    padding: 12px 16px 0;
    min-height: 0;
    border-bottom: 0;
}
.quickview .modal-header .close {
    padding: 4px 10px;
    background: transparent;
    border: 0;
    color: #8a8a8a;
    font-size: 28px;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
    cursor: pointer;
}
.quickview .modal-header .close:hover {
    color: #2b2b2b;
}
.quickview .modal-body {
    padding: 4px 32px 28px;
}

/* Titolo e prezzo */
.quickview .modal-body h1.h1 {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.5px;
    color: var(--block-heading-color, #313F90);
}
.quickview .product-prices {
    margin: 0 0 16px;
}
.quickview .product-prices .product-price,
.quickview .product-prices .current-price,
.quickview .product-prices .current-price-value {
    color: var(--product-price-color, #313F90);
}
.quickview .product-prices .current-price-value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
}
.quickview .product-prices .regular-price {
    margin-right: 8px;
    font-size: 16px;
    color: #6b6f7d;
    text-decoration: line-through;
}
.quickview .product-prices .discount-percentage,
.quickview .product-prices .discount-amount {
    display: inline-block;
    padding: 2px 8px;
    background: #ba0d0d;
    border-radius: 3px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}
.quickview .tax-shipping-delivery-label {
    margin-top: 6px;
    font-size: 13px;
    color: #6b6f7d;
}

/* Descrizione breve: leggibile e mai piu' alta della finestra */
.quickview #product-description-short {
    max-height: 200px;
    margin: 0 0 18px;
    padding-right: 6px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.55;
    color: #555;
}
.quickview #product-description-short ul {
    margin: 0;
    padding-left: 18px;
}
.quickview #product-description-short li {
    margin-bottom: 4px;
}

/* Varianti a miniatura: nella modale bastano 64px */
.quickview .product-variants > .product-variants-item ul.variant-thumbnails {
    gap: 8px;
}
.quickview .product-variants > .product-variants-item ul.variant-thumbnails .color,
.quickview .product-variants > .product-variants-item ul.variant-thumbnails .input-color {
    width: 64px;
    height: 64px;
}
.quickview .product-variants .control-label,
.quickview .product-add-to-cart .control-label {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #6b6f7d;
}

/* Quantita' + carrello + wishlist: stessa altezza */
.quickview .product-quantity {
    align-items: stretch;
    margin-top: 0;
}
.quickview .product-quantity .add-to-cart {
    height: 48px;
    padding-top: 0;
    padding-bottom: 0;
}
.quickview .product-quantity .wishlist .btn-product {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* Piede: marca, riferimento, disponibilita' - etichetta a sinistra e valore
   subito accanto (le righe hanno stili inline, da qui il !important) */
.quickview .modal-footer {
    display: block;
    padding: 12px 32px 20px;
    background: #fafafd;
    border-top: 1px solid #e8e8ee;
    text-align: left;
}
.quickview .product-additional-info [style*="display:flex"] {
    align-items: center;
    gap: 4px 16px !important;
    padding: 9px 0 !important;
}
.quickview .product-additional-info [style*="display:flex"] > strong {
    flex: 0 0 140px !important;
    max-width: 140px !important;
    text-align: left !important;
    font-size: 13px;
    color: #2b2b2b !important;
}
.quickview .product-additional-info [style*="display:flex"] > span {
    flex: 1 1 auto !important;
    text-align: left !important;
    color: #555 !important;
}

@media (max-width: 767px) {
    .quickview .modal-body {
        padding: 4px 16px 20px;
    }
    .quickview .modal-footer {
        padding: 8px 16px 16px;
    }
    .quickview .modal-body h1.h1 {
        font-size: 20px;
    }
    .quickview .product-prices .current-price-value {
        font-size: 26px;
    }
}

/* Home: banner Barbie / Fisher-Price a tutta larghezza della colonna */
.elementor-element-1b862be .elementor-widget-image .elementor-widget-container,
.elementor-element-1b862be .elementor-widget-image .elementor-image,
.elementor-element-1b862be .elementor-widget-image .elementor-image > a,
.elementor-element-1b862be .elementor-widget-image .elementor-image figure,
.elementor-element-1b862be .elementor-widget-image .elementor-image figure > a {
    display: block;
    width: 100%;
}
.elementor-element-1b862be .elementor-widget-image .elementor-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}


/* =========================================================
   HOME: pulsanti del widget button (Leo Elements)
   - di base: pill bianca (banner con foto/sfondo scuro: "Acquista ora")
   - se il pulsante e' l'unico widget della colonna (es. "Visualizza altro"
     accanto al titolo del carosello): pill con bordo blu
   Stili inline generati per elemento => !important
   ========================================================= */
body#index .elementor-widget-button a.elementor-button {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 10px 22px !important;
    border: 2px solid #fff !important;
    border-radius: 50px !important;
    background-color: #fff !important;
    color: #313f90 !important;
    fill: #313f90 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
}
body#index .elementor-widget-button a.elementor-button::after {
    content: "\2192";
    font-size: 15px;
    line-height: 1;
    transition: transform 0.2s ease;
}
body#index .elementor-widget-button a.elementor-button:hover {
    background-color: #ba0d0d !important;
    border-color: #ba0d0d !important;
    color: #fff !important;
    fill: #fff !important;
}
body#index .elementor-widget-button a.elementor-button:hover::after {
    transform: translateX(3px);
}

/* Banner: titolo in alto, pulsante in basso a sinistra */
body#index .elementor-widget-wrap:has(.elementor-widget-button):has(.elementor-widget-heading, .elementor-widget-text-editor) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    align-content: stretch;
    height: 100%;
}
body#index .elementor-widget-wrap:has(.elementor-widget-button):has(.elementor-widget-heading, .elementor-widget-text-editor) > .elementor-widget-button {
    margin-top: auto;
    width: auto;
    padding-top: 16px;
}

/* "Visualizza altro": bordo blu su fondo chiaro */
body#index .elementor-widget-wrap:not(:has(.elementor-widget:not(.elementor-widget-button))) .elementor-widget-button a.elementor-button {
    background-color: transparent !important;
    border-color: #313f90 !important;
    box-shadow: none;
}
body#index .elementor-widget-wrap:not(:has(.elementor-widget:not(.elementor-widget-button))) .elementor-widget-button a.elementor-button:hover {
    background-color: #313f90 !important;
    border-color: #313f90 !important;
}

/* =========================================================
   PAGINA CONTATTI (body#contact)
   Markup: modules/contactform/.../contactform.tpl dentro
   #content-wrapper > #main > #content.page-content.card
     aside.mt-contact-info | section.contact-form > form >
        .form-fields (.form-group.row > label.col-md-3 + .col-md-6) + .form-footer
   Prima: colonna sinistra vuota, etichette a sinistra su 3 colonne, campi grigi
   di larghezze diverse, pulsante Invia bianco su bianco (invisibile).
   Ora: una scheda a due colonne (contatti diretti | modulo), campi a tutta
   larghezza con etichetta sopra, stati di focus chiari, Invia rosso.
   ========================================================= */
body#contact #left-column {
    display: none;
}
body#contact #content-wrapper {
    float: none;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    flex: 0 0 100%;
}
body#contact #content.page-content {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 40px;
    padding: 32px;
    background: #fff;
    border: 1px solid #DCDDE3;
    border-radius: 10px;
    box-shadow: none;
}

/* ---- colonna contatti diretti ---- */
.mt-contact-info {
    align-self: start;
    padding: 24px;
    background: #f6f7fa;
    border-radius: 8px;
}
.mt-contact-info-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: var(--block-heading-color, #313F90);
}
.mt-contact-info-lead {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.55;
    color: #555;
}
.mt-contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mt-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid #e3e4ea;
}
.mt-contact-list li:first-child {
    border-top: 0;
    padding-top: 0;
}
.mt-contact-list .material-icons {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #DCDDE3;
    color: #ba0d0d;
    font-size: 20px;
    text-align: center;
}
.mt-contact-list .mt-contact-label {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #6b6f7d;
}
.mt-contact-list a,
.mt-contact-list address {
    margin: 0;
    font-size: 15px;
    font-style: normal;
    line-height: 1.45;
    color: #2b2b2b;
    word-break: break-word;
}
.mt-contact-list a:hover {
    color: #ba0d0d;
}

/* ---- modulo ---- */
body#contact .contact-form .form-group.row {
    display: block;
    margin: 0 0 18px;
}
body#contact .contact-form .form-group.row > [class*="col-"] {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding: 0;
}
body#contact .contact-form h3 {
    position: relative;
    margin: 0 0 4px;
    padding-bottom: 13px;
    border-bottom: 2px solid #DCDDE3;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.2;
    text-transform: none;
    color: var(--block-heading-color, #313F90);
}
body#contact .contact-form h3::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 45px;
    height: 2px;
    background: #313F90;
}
body#contact .contact-form .form-control-label {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: #2b2b2b;
}
body#contact .contact-form .form-control,
body#contact .contact-form .form-control-select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #dcdde3;
    border-radius: 4px;
    box-shadow: none;
    color: #2b2b2b;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body#contact .contact-form textarea.form-control {
    height: auto;
    min-height: 160px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}
body#contact .contact-form .form-control::placeholder {
    color: #9a9a9a;
}
body#contact .contact-form .form-control:hover {
    border-color: #b9bbc6;
}
body#contact .contact-form .form-control:focus {
    border-color: #ba0d0d;
    box-shadow: 0 0 0 3px rgba(186, 13, 13, 0.12);
    outline: none;
}
/* "opzionale" accanto all'etichetta di riferimento ordine / allegato */
body#contact .contact-form .form-control-comment {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #6b6f7d;
}
/* Allegato: il plugin filestyle crea un gruppo campo + pulsante rosso */
body#contact .contact-form .bootstrap-filestyle {
    display: flex;
    width: 100%;
}
body#contact .contact-form .bootstrap-filestyle .form-control {
    flex: 1 1 auto;
    border-radius: 4px 0 0 4px;
    background: #f6f7fa;
}
body#contact .contact-form .bootstrap-filestyle .group-span-filestyle {
    display: flex;
    flex: 0 0 auto;
    width: auto;
}
body#contact .contact-form .bootstrap-filestyle .btn {
    height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 0 4px 4px 0;
    background: #ba0d0d;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
body#contact .contact-form .bootstrap-filestyle .btn:hover {
    background: #d60f0f;
}
/* Invia: rosso come i pulsanti carrello, a destra */
body#contact .contact-form .form-footer {
    margin-top: 6px;
    text-align: right;
}
body#contact .contact-form .form-footer .btn.btn-primary {
    min-width: 180px;
    height: 48px;
    padding: 0 32px;
    border: 0;
    border-radius: 50px;
    background-color: #ba0d0d;
    background-image: linear-gradient(180deg, #ca0e0e 0%, #ba0d0d 100%);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(186, 13, 13, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}
body#contact .contact-form .form-footer .btn.btn-primary:hover {
    background-color: #d60f0f;
    background-image: linear-gradient(180deg, #e61010 0%, #d60f0f 100%);
    box-shadow: 0 6px 20px rgba(186, 13, 13, 0.4);
    transform: translateY(-1px);
}
/* Messaggio di esito (invio riuscito / errore) sopra il modulo */
body#contact .contact-form .alert {
    margin-bottom: 20px;
    border-radius: 4px;
}

/* Tablet e telefono: una colonna, prima il modulo poi i contatti diretti
   sarebbe piu' lungo da raggiungere: i contatti restano in alto ma compatti. */
@media (max-width: 991px) {
    body#contact #content.page-content {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 20px;
    }
}
@media (max-width: 575px) {
    body#contact #content.page-content {
        padding: 16px;
    }
    .mt-contact-info {
        padding: 18px;
    }
    body#contact .contact-form .form-footer .btn.btn-primary {
        width: 100%;
    }
}

/* Menu "Oggetto": lo sfondo bianco dei campi cancellava la freccia del tema;
   si ridisegna una freccia leggera a destra. */
body#contact .contact-form select.form-control {
    padding-right: 40px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236b6f7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-size: 14px 8px;
    -webkit-appearance: none;
    appearance: none;
}

/* =========================================================
   HOME - HERO: SLIDER A SINISTRA + DUE BANNER A DESTRA
   Elementor: sezione afff95b > colonna 9e5bd3a (70%, slider e71da9a) +
   colonna fae9a70 (29,3%: banner e6e9f9f "Esclusiva Mondial Toys" con
   pulsante + banner a30cb21/banner-3 "MonTravel").
   Il problema: i due banner hanno altezze fisse (padding e min-height) e la
   colonna sinistra ha 25px di margine sotto lo slider: l'altezza della riga
   la decideva chi era piu' alto e il fondo dei banner non coincideva col
   fondo dello slider (scalino). Aggiungere o togliere contenuto ai banner
   (es. il pulsante) lo faceva ricomparire.
   Regola: l'altezza la decide SOLO lo slider. La colonna destra non conta
   per l'altezza della riga (e' posizionata sopra la colonna) e divide lo
   spazio in due banner uguali con 20px in mezzo: il fondo coincide sempre.
   Sotto i 1025px le colonne sono impilate: nessuna regola.
   ========================================================= */
@media (min-width: 1025px) {
    /* niente margine sotto lo slider: la colonna e' alta quanto lo slider */
    .elementor-element-afff95b .elementor-element-9e5bd3a .elementor-widget:not(:last-child) {
        margin-bottom: 0;
    }
    .elementor-element-afff95b .elementor-element-fae9a70 {
        position: relative;
    }
    .elementor-element-afff95b .elementor-element-fae9a70 > .elementor-column-wrap {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .elementor-element-afff95b .elementor-element-fae9a70 > .elementor-column-wrap > .elementor-widget-wrap {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: stretch;
        gap: 20px;
        height: 100%;
        padding: 0;
    }
    .elementor-element-afff95b .elementor-element-fae9a70 .elementor-inner-section {
        display: flex;
        flex: 1 1 0;
        min-height: 0;
        margin: 0 !important;
        padding: 0 !important;
    }
    .elementor-element-afff95b .elementor-element-fae9a70 .elementor-inner-section > .elementor-container {
        flex: 1 1 auto;
        min-height: 0;
    }
    /* il contenuto dei banner non fissa piu' l'altezza */
    .elementor-element-afff95b .elementor-element-1fb884e {
        min-height: 0 !important;
    }
    .elementor-element-afff95b .elementor-element-fc8e45c > .elementor-element-populated {
        padding-bottom: 30px !important;
    }
}

/* =========================================================
   CAROSELLI HOME (sezioni Elementor con classe .arrow-right-2)
   "Offerte del giorno" e caroselli simili: titolo a sinistra, "Visualizza
   altro" a destra, poi il carosello prodotti.
   Prima: le frecce stavano in alto a destra SOPRA la prima riga di card
   (top:0, right:0/50px) e il pulsante aveva 110px di padding a destra per
   lasciare loro spazio, quindi finiva 110px prima dell'ultima card.
   Ora: frecce ai due lati del carosello, centrate in verticale; il pulsante
   torna a filo con il bordo destro dell'ultima card.
   ========================================================= */

/* "Visualizza altro": nessun padding a destra nell'ultima colonna della
   riga titolo (era di 110px, per fare spazio alle frecce) */
.arrow-right-2 .elementor-inner-section > .elementor-container > .elementor-row > .elementor-column:last-child > .elementor-element-populated {
    padding-right: 0 !important;
}

/* Frecce: cerchi bianchi ai lati, a meta' altezza */
.arrow-right-2 .elementor-LeoProductCarousel.slick-slider .slick-prev,
.arrow-right-2 .elementor-LeoProductCarousel.slick-slider .slick-next {
    top: 50% !important;
    bottom: auto !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    margin: 0;
    background: #fff !important;
    border: 1px solid #DCDDE3;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    transform: translateY(-50%) !important;
    z-index: 20;
    float: none;
}
.arrow-right-2 .elementor-LeoProductCarousel.slick-slider .slick-prev {
    left: 8px !important;
    right: auto !important;
}
.arrow-right-2 .elementor-LeoProductCarousel.slick-slider .slick-next {
    right: 8px !important;
    left: auto !important;
}
.arrow-right-2 .elementor-LeoProductCarousel.slick-slider .slick-prev:before,
.arrow-right-2 .elementor-LeoProductCarousel.slick-slider .slick-next:before {
    width: 100%;
    line-height: 42px !important;
    float: none;
}
/* Le frecce sporgono a cavallo del bordo delle card solo se fuori dal
   contenitore c'e' spazio: il sito e' largo al massimo 2000px, quindi serve
   uno schermo da almeno ~2080px (a 1800px la freccia sinistra uscirebbe dallo schermo) */
@media (min-width: 2080px) {
    .arrow-right-2 .elementor-LeoProductCarousel.slick-slider .slick-prev {
        left: -22px !important;
    }
    .arrow-right-2 .elementor-LeoProductCarousel.slick-slider .slick-next {
        right: -22px !important;
    }
}
/* Prima/ultima pagina: la freccia non attiva si attenua */
.arrow-right-2 .elementor-LeoProductCarousel.slick-slider .slick-arrow.slick-disabled {
    opacity: 0.35;
    pointer-events: none;
}
@media (max-width: 767px) {
    .arrow-right-2 .elementor-LeoProductCarousel.slick-slider .slick-prev,
    .arrow-right-2 .elementor-LeoProductCarousel.slick-slider .slick-next {
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
    }
    .arrow-right-2 .elementor-LeoProductCarousel.slick-slider .slick-prev:before,
    .arrow-right-2 .elementor-LeoProductCarousel.slick-slider .slick-next:before {
        line-height: 34px !important;
    }
}

/* =========================================================
   HOME - HERO: PULSANTE DEL BANNER "MONTRAVEL" (widget 9baf786)
   Nei banner della colonna destra dell'hero (fae9a70) il pulsante "Acquista
   ora" deve essere uguale in tutti e due: pill bianca, in basso a sinistra.
   Il banner MonTravel non ha titolo (il testo e' nell'immagine), quindi il
   pulsante e' l'unico widget della colonna e le regole di "HOME: pulsanti
   del widget button" lo trattavano come "Visualizza altro": bordo blu,
   trasparente, e in alto invece che in basso.
   Le regole sono legate alla colonna dei banner, non alla classe del widget:
   valgono per qualsiasi pulsante aggiunto in futuro a quei banner.
   ========================================================= */
body#index .elementor-element-afff95b .elementor-element-fae9a70 .elementor-inner-column .elementor-widget-wrap .elementor-widget-button a.elementor-button {
    background-color: #fff !important;
    border-color: #fff !important;
    color: #313f90 !important;
    fill: #313f90 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
body#index .elementor-element-afff95b .elementor-element-fae9a70 .elementor-inner-column .elementor-widget-wrap .elementor-widget-button a.elementor-button:hover {
    background-color: #ba0d0d !important;
    border-color: #ba0d0d !important;
    color: #fff !important;
    fill: #fff !important;
}

/* Pulsante in basso a sinistra, titolo (se c'e') in alto */
body#index .elementor-element-afff95b .elementor-element-fae9a70 .elementor-inner-column > .elementor-column-wrap > .elementor-widget-wrap:has(.elementor-widget-button) {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-content: stretch;
    height: 100%;
}
body#index .elementor-element-afff95b .elementor-element-fae9a70 .elementor-inner-column > .elementor-column-wrap > .elementor-widget-wrap > .elementor-widget-button {
    width: auto;
    margin-top: auto;
    padding-top: 16px;
}
/* stessa distanza dal bordo in basso nei due banner (30px): quello MonTravel
   ne aveva 85 per un vecchio elemento che non c'e' piu' */
body#index .elementor-element-afff95b .elementor-element-fae9a70 .elementor-element-1fb884e > .elementor-element-populated {
    padding: 30px 30px 30px 40px !important;
}

/* =========================================================
   HEADER BANNER (striscia Klarna "Paga dopo con Klarna" sopra la topbar)
   Il badge Klarna ha il suo sfondo beige solo nella larghezza del contenitore:
   ai lati restava il bianco del tema. La striscia intera (.header-banner) prende
   lo stesso beige, cosi' e' a tutta larghezza senza bordi chiari ai lati.
   Da mobile (<=991px) la striscia e' nascosta dalle regole dell'header mobile.
   ========================================================= */
#header .header-banner,
#header .header-banner > .container,
#header .header-banner .inner {
    background-color: #f0eeeb !important;
}