/* ==========================================================================
   VARIABILI DI TEMA (Override specifico tenant)
   ========================================================================== */
:root {
    --vweb-font-main: 'GOTHICBI-font', sans-serif;

    /* ======================================================================
       1. TAVOLOZZA DEI COLORI NATIVI (Primitive Tokens - Non usarli direttamente nel CSS)
       ====================================================================== */
    --vweb-palette-cream: #F8F5F0; /* Crema chiara per cassetto/drawer mobile */
    --vweb-palette-taupe: #7A6B5F; /* Talpa per testi link sottomenu mobile */
    --vweb-palette-border-beige: #d4c8b8; /* Bordo beige voci menu principale mobile */
    --vweb-palette-border-beige-l: #e3dbce; /* Bordo beige chiaro voci sottomenu mobile */
    --vweb-palette-overlay-soft: rgba(0,0,0,0.03); /* Velo scuro tenue per sfondi sottomenu */
    /* ======================================================================
       2. RUOLI SEMANTICI (Semantic Tokens - Rettificati sull'uso reale nel CSS)
       ====================================================================== */
    /* --- Header */
    --vweb-bg-header: var(--vweb-palette-gold); /* Sfondo barra header in vista mobile */
    /* --- Header / Drawer mobile --- */
    --vweb-bg-header-mobile: var(--vweb-palette-gold); /* Sfondo barra header in vista mobile */
    --vweb-bg-drawer-mobile: var(--vweb-palette-gold); /* Sfondo del cassetto di navigazione mobile (#vwebNavCell) */
    --vweb-bg-submenu-mobile: var(--vweb-palette-overlay-soft); /* Sfondo dei sottomenu aperti nel cassetto mobile */
    --vweb-text-submenu-mobile: var(--vweb-palette-taupe); /* Testo dei link di secondo livello nel menu mobile */
    --vweb-border-menu-mobile: var(--vweb-palette-border-beige); /* Linea divisoria tra le voci principali del menu mobile */
    --vweb-border-submenu-mobile: var(--vweb-palette-border-beige-l); /* Linea divisoria tra le voci dei sottomenu mobile */
    /* --- Pulsanti e-commerce --- */
    /*--vweb-bg-btn-primary:            var(--vweb-palette-gold); /* Sfondo pulsanti primari (Aggiungi al carrello, Cerca, ecc.) */
    --vweb-text-btn-primary: var(--vweb-palette-white); /* Testo dei pulsanti primari */
    /*--vweb-bg-btn-secondary:          var(--vweb-palette-white); /* Sfondo pulsanti secondari (annulla/chiudi) */
    --vweb-text-btn-secondary: var(--vweb-palette-gold); /* Testo dei pulsanti secondari */
}


/* ==========================================================================
BONIFICA COMPONENTI INTERNI (Pulsanti E-commerce e Tab Dettaglio) 
========================================================================== */
/* 1. PULSANTI PRIMARI (Es: Aggiungi al carrello, Cerca, ecc.) */
.btn-primary,
.catalog-single .buttons .btn,
.shopping-cart .cart-sidebar .cart-totals .btn,
/*.cart-dropdown .footer .btn,*/
.btn-black,
a.btn-black,
.label-as-btn-style,
#vweb-global-alert .vweb-alert-btn {
    /*background-color: var(--vweb-bg-btn-primary) !important; /* Il colore oro/beige dell'ispezione */
    /*background-color: var(--vweb-color-primary) !important; /* Il colore oro/beige dell'ispezione */
    color: var(--vweb-text-btn-primary) !important; /* Testo bianco */
    font-family: var(--vweb-font-main) !important;
    font-weight: 400 !important; /* Normal come da inspect */
    text-transform: uppercase !important;
    /*border-radius: 0px !important; /* SPIGOLI VIVI: Annulla qualsiasi arrotondamento */
    /*-webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;*/
    text-decoration: none !important;
    transition: none !important; /* Rimuove la transizione per un comportamento immediato */
    box-shadow: none !important;
}

    /* BLOCCO NEUTRALIZZAZIONE HOVER PRIMARI: Forza lo stato attivo a rimanere identico */
    .btn-primary:hover, /*.btn-primary:focus,*/ .btn-primary:active,
    .catalog-single .buttons .btn:hover, .catalog-single .buttons .btn:focus,
    .shopping-cart .cart-sidebar .cart-totals .btn:hover, .shopping-cart .cart-sidebar .cart-totals .btn:focus,
    /*.cart-dropdown .footer .btn:hover, .cart-dropdown .footer .btn:focus,*/
    .btn-black:hover, .btn-black:focus,
    a.btn-black:hover, a.btn-black:focus,
    .label-as-btn-style:hover,
    #vweb-global-alert .vweb-alert-btn:hover {
        /*background-color: var(--vweb-bg-btn-primary) !important; /* Resta rigorosamente dello stesso colore */
        /*background-color: var(--vweb-color-primary) !important; /* Resta rigorosamente dello stesso colore */
        color: var(--vweb-text-btn-secondary) !important;
        /* INSERITO: Usa un'ombra interna al posto del bordo. Non rompe il layout! */
        box-shadow: inset 0 0 0 1px var(--vweb-color-primary) !important;
        /*text-decoration: none !important;
        box-shadow: none !important;*/
    }

/* ==========================================================================
   PULSANTE SECONDARIO  (.btn-secondary)
   ========================================================================== */
.shopping-cart .cart-totals .btn-secondary,
a.btn-secondary,
#vweb-global-alert .vweb-btn-cancel {
    /*background-color: var(--vweb-bg-btn-secondary) !important; /* Sfondo chiaro neutro dall'inspect */
    background-color: var(--vweb-color-secondary) !important;
    color: var(--vweb-text-btn-secondary) !important; /* Testo marrone scuro dall'inspect */
    /*border: none !important; /* Rimosso il bordo per uniformare lo stile piatto */
    font-family: var(--vweb-font-main) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    /*border-radius: 0px !important; /* SPIGOLI VIVI */
    /*-webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;*/
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: none !important;
    box-shadow: none !important;
}

    /* BLOCCO NEUTRALIZZAZIONE HOVER SECONDARI */
    .shopping-cart .cart-totals .btn-secondary:hover, .shopping-cart .cart-totals .btn-secondary:focus,
    a.btn-secondary:hover, a.btn-secondary:focus
    #vweb-global-alert .vweb-btn-cancel:hover,
    #vweb-global-alert .vweb-btn-cancel:focus {
        /*background-color: var(--vweb-bg-btn-secondary) !important; /* Nessuna variazione cromatica al passaggio */
        background-color: var(--vweb-color-secondary) !important;
        color: var(--vweb-text-btn-secondary) !important;
        border: 0.5px solid var(--vweb-color-primary) !important;
        /*border: none !important;*/
        text-decoration: none !important;
        box-shadow: none !important;
    }

.vweb-btn-cancel,
.vweb-btn-cancel:hover {
    /*background-color: var(--vweb-bg-btn-primary) !important;*/
    background-color: var(--vweb-color-primary) !important;
    color: var(--vweb-text-btn-primary) !important;
    font-family: var(--vweb-font-main) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    border: none !important;
    /*border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;*/
    text-decoration: none !important;
    transition: none !important;
    box-shadow: none !important;
}

.catalog-single .buttons .qnt-count .incr-btn {
    background: var(--vweb-bg-surface);
}

.catalog-single .buttons .qnt-count .incr-btn:hover {
    background: var(--vweb-color-secondary);
}

.vweb-header-main {
    background-color: var(--vweb-bg-header) !important;
}    

/* --- RESPONSIVE  MOBILE --- */
@media (max-width: 1199px) {
 
    .vweb-logo-img {
        width: auto !important;
        height: 80px;
    }

    .vweb-actions-cell{
        padding-right: 5px;
    }

    /* Livello 2 Mobile */
    .vweb-menu-desktop li ul.no-mobile li a {
        color: var(--vweb-color-secondary) !important;
        background-color: var(--vweb-bg-header) !important;
    }
}

/* ==========================================================================
   FIX MOBILE: ADATTAMENTO TENDINA LOGIN/ACCOUNT PER SMARTPHONE E TABLET
   ========================================================================== */
@media (max-width: 1199px) {
    .vweb-menu-desktop ul.z-i-100 {
        background-color: var(--vweb-bg-header) !important;
    }
        .vweb-menu-desktop ul.z-i-100 > li > a {
            color: var(--vweb-color-secondary) !important;
        }
}

/* --- RESPONSIVE  DESKTOP --- */
@media (min-width: 1200px) {
    .vweb-logo-img {
        /* Minimo 260px, cresce del 18% rispetto allo schermo, si ferma a 360px */
        width: clamp(260px, 18vw, 360px) !important;
        height: auto !important;
        max-height: 90px !important; /* Questo per evitare che sbordi dai 90px dell'header */
    }
}
 
/* --- CELLA 1: LOGO & HAMBURGER --- */
.vweb-logo-cell {
    display: flex;
    align-items: center;
    flex: 0 0 230px;
    height: 100%;
    margin-top: 5px;
}
 
.vweb-header-row {
    padding: 0 10px;
}

    /* ==========================================================================
   Men�
   ========================================================================== */
    .vweb-menu-desktop li ul.no-mobile li:hover > a {
        color: var(--vweb-color-primary) !important;
    }

    /* ==========================================================================
   LOGIN
   ========================================================================== */
    /*Titolo login*/
    .vweb-modal .modal-header h2 {
        color: var(--vweb-main-text) !important;
    }

    .vweb-modal .vweb-help-link {
        color: var(--vweb-main-text) !important;
    }
    /* --------------------------------------------------------------------------
   1. STILI CONDIVISI ICONE HEADER (Lente, Omino, Carrello)
   -------------------------------------------------------------------------- */
    .vweb-header-icon,
    .vweb-user-icon,
    #vwebCartWrapper .toolbar .cart-btn > a.btn::before {
        color: var(--vweb-text-main) !important;
    }

    /* Effetto Hover Globale: l'icona si colora del colore primario */
    .vweb-action-icon:hover .vweb-header-icon,
    .vweb-action-icon:focus .vweb-header-icon,
    .vweb-action-icon:hover .vweb-user-icon,
    .vweb-action-icon:focus .vweb-user-icon,
    #vwebCartWrapper .toolbar .cart-btn > a.btn:hover::before,
    #vwebCartWrapper .toolbar .cart-btn > a.btn:focus::before {
        color: var(--vweb-text-main) !important;
    }

    /* Pallino Arancione del Counter Numerico */
    #vwebCartWrapper .toolbar .cart-btn > a.btn span.h-20 {
        background-color: var(--vweb-bg-body) !important;
        color: var(--vweb-color-primary) !important;
    }

    .vweb-user-badge {
        color: var(--vweb-text-main) !important;
        border: 2px solid var(--vweb-text-main) !important;
    }

    .vweb-search-icon {
        /* Il trucco di snellimento applicato SOLO alla lente */
        -webkit-text-stroke: 1.5px var(--vweb-palette-gold) !important;
    }

    /* Input di testo della ricerca */
    .vweb-header-main .search-form .form-control {
        color: var(--vweb-text-main) !important;
    }
    /* ==========================================================================
   COMPONENTE: FOOTER (RESTYLING LYOVEL MINIMAL)
   ========================================================================== */
    .vweb-footer {
        background-color: var(--vweb-color-primary) !important;
        width: 100%;
        display: block;
        padding: 10px 15px 20px 15px !important;
    }

    .vweb-footer-lyovel-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px; /* Distanza  tra il logo e la riga dei link */
    }

    /* --- LOGO --- */
    .vweb-footer-logo img {
        width: 100%;
        max-width: 320px; /* Regola questa misura in base alle dimensioni reali del tuo SVG */
        height: auto;
        filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.08)); /* Leggerissima ombra per staccarlo dallo sfondo */
    }

    /* --- NAVIGAZIONE ORIZZONTALE --- */
    .vweb-footer-nav {
        display: flex;
        flex-direction: row; /* Affianca i link orizzontalmente */
        align-items: center;
        justify-content: center;
        flex-wrap: wrap; /* Se lo schermo � troppo stretto, vanno a capo da soli */
        gap: 45px; /* Distanza orizzontale tra i vari link (Negozio - Contatto - Piani) */
    }

    .vweb-footer-nav__link {
        color: var(--vweb-text-main) !important; /* Testo in bianco puro */
        font-family: var(--vweb-font-main), sans-serif !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        padding: 5px; /* Area di tocco migliorata per il touch */
    }

        /* Effetto interazione */
        .vweb-footer-nav__link:hover,
        .vweb-footer-nav__link:focus-visible {
            color: var(--vweb-color-secondary) !important; /* Vira sul colore secondario del brand */
            transform: translateY(-2px); /* Leggero movimento verso l'alto */
        }

    /* ==========================================================================
   FOOTER: ADATTAMENTO MOBILE
   ========================================================================== */
    @media (max-width: 767px) {
        .vweb-footer {
            padding: 50px 15px !important;
        }

        .vweb-footer-logo img {
            max-width: 240px; /* Rimpicciolisce il logo su smartphone */
        }

        /* Incolonna i link al centro dello schermo sui cellulari */
        .vweb-footer-nav {
            flex-direction: column !important;
            gap: 25px !important;
        }
    }

    /* N� 2, 3... delle Vendite */
    .bestseller-badge.rank-other {
        background-color: var(--vweb-color-primary);
        color: var(--vweb-bg-body);
    }

    .catalog-grid .tile img {
        display: block;
        margin-top: 10px;
        -webkit-border-radius: 0px 0px 0 0;
        -moz-border-radius: 0px 0px 0 0;
        border-radius: 0px 0px 0 0;
    }

    /* Eliminato bordo immagine in Dettaglio prodotto */
    .ms-slide .ms-slide-bgcont,
    .ms-slide .ms-slide-bgvideocont {
        border: none;
        position: absolute;
        overflow: hidden;
        width: 100%;
    }

    /* ==========================================================================
   REPORT CARDS (Segnalazioni)
   ========================================================================== */

    .report-card {
        display: block;
        background: var(--vweb-bg-body);
        border: 1px solid var(--vweb-border-light);
        border-radius: 8px;
        padding: 30px 15px;
        text-align: center;
        text-decoration: none !important;
        color: var(--vweb-text-main);
        transition: all 0.3s ease;
        height: 100%;
        cursor: pointer;
    }

        .report-card:hover,
        .report-card:focus {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            transform: translateY(-3px);
            border-color: var(--vweb-color-primary);
            color: var(--vweb-text-main);
        }

        .report-card .icon-container {
            margin-top: 20px;
            margin-bottom: 20px;
            min-height: 50px;
        }

        /* Colori delle icone mappati sulle variabili di sistema */
        .report-card .icon-failure {
            color: var(--vweb-color-primary);
        }

        .report-card .icon-complaint {
            color: var(--vweb-color-warning);
        }

        .report-card .icon-commercial {
            color: var(--vweb-color-primary);
        }

        .report-card .icon-other {
            color: var(--vweb-palette-text-sec);
        }

        .report-card .icon-refill {
            color: var(--vweb-color-success-text);
        }

        .report-card .card-title {
            color: var(--vweb-text-main);
            margin-bottom: 0;
        }

        /* Regola per l'immagine statica originale qualora venisse de-commentata */
        .report-card .legacy-img {
            margin: 0 auto;
            border-radius: 4px;
            margin-bottom: 15px;
        }
    /* ==========================================================================
   Cookies
   ========================================================================== */
    .vweb-cookie-title {
        color: var(--vweb-text-main) !important;
    }

    .vweb-cookie-link-bar a {
        color: var(--vweb-text-main) !important;
        font-size: 16px !important;
    }

        .vweb-cookie-link-bar a:hover {
            color: var(--vweb-text-main) !important;
        }

    /* ==========================================================================
   TAB SELEZIONE DESCRIZIONE/ALLERGENI
   ========================================================================== */
    .nav-tabs-justified > .active > a,
    .nav-tabs-justified > .active > a:hover,
    .nav-tabs-justified > .active > a:focus,
    .nav-item.active button.nav-link,
    .tabs-widget .nav-tabs li.active a {
        background-color: var(--vweb-color-secondary) !important;
        color: var(--vweb-text-main) !important;
        border: 1px solid var(--vweb-border-light) !important;
        font-weight: 500 !important;
    }

    .nav-item button.nav-link,
    .tabs-widget .nav-tabs li a {
        background-color: var(--vweb-bg-body) !important;
        color: var(--vweb-color-primary) !important;
        border: none !important;
    }
    /* ==========================================================================
   TOPTEN (ProductCardPartial.cshtml)
   ========================================================================== */
    /* --- Griglia personalizzata per la Top 10 --- */
    /* Assicura che la tile interna riempia correttamente il nuovo wrapper stretto */
    .top-ten-flex-grid .tile {
        background-color: var(--vweb-color-secondary) !important;
        border-radius: 10px !important;
        overflow: hidden !important; /*forza gli elementi contenuti nel tile ad adottare l'arrotondamento definito per il tile*/
    }
    /* ==========================================================================
   Vetrina prodotti(ProductCardPartial.cshtml)
   ========================================================================== */
    .catalog-grid .tile {
        background-color: var(--vweb-color-secondary) !important;
        border-radius: 10px !important;
        overflow: hidden !important; /*forza gli elementi contenuti nel tile ad adottare l'arrotondamento definito per il tile*/
    }
    /* --- Etichetta "Prezzo per" (Resource.PriceFor): visibile di default, nascosta in francese --- */
    /*html[lang="it"] .ft-priceUM-desc .ft-priceFor-label,*/
    html[lang="fr"] .ft-priceUM-desc .ft-priceFor-label {
        display: none;
    }

    /* ==========================================================================
   CARRELLO
   ========================================================================== */
    /*----------------------------------------------------------------------------*/
    /* Tendina scorrevole con footer sempre visibile, per permettere la visualizzazione di tutti iprodotti nel carrello, anche quando sono molti*/
    /* Limita l'altezza della tendina all'altezza dello schermo */
    #vwebCartWrapper .toolbar .cart-dropdown {
        max-height: calc(100vh - 160px) !important; /* 160px = spazio per header + margine */
        overflow: visible !important; /* rispetta gli angoli arrotondati */
    }

    /* L'apertura in hover diventa una colonna flex (desktop) */
    @media (min-width: 992px) {
        #vwebCartWrapper .toolbar .cart-btn:hover .cart-dropdown {
            display: flex !important;
            flex-direction: column !important;
        }
    }

    /* Solo la lista prodotti scorre */
    #vwebCartWrapper .toolbar .cart-dropdown .body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important; /* non trascina la pagina sottostante */
        padding-top: 0 !important; /* Il padding superiore non deve stare sul contenitore che scorre */
    }

    /* Il footer (Cassa / Svuota / Totale) resta ancorato in basso */
    #vwebCartWrapper .toolbar .cart-dropdown .footer {
        flex: 0 0 auto !important;
    }

    /* Intestazioni colonne bloccate in alto durante lo scorrimento */
    #vwebCartWrapper .toolbar .cart-dropdown table th {
        position: sticky !important;
        top: 0 !important;
        background-color: var(--vweb-bg-body) !important;
        z-index: 2 !important;
        padding-top: 24px !important; /* recupera lo spazio tolto al contenitore */
        box-shadow: 0 1px 0 var(--vweb-border-muted) !important; /* linea di stacco */
    }

    /* Barra di scorrimento discreta, in tinta col tema */
    #vwebCartWrapper .toolbar .cart-dropdown .body::-webkit-scrollbar {
        width: 8px;
    }
    /*
#vwebCartWrapper .toolbar .cart-dropdown .body::-webkit-scrollbar-thumb {
    background-color: var(--vweb-color-primary);
    border-radius: 4px;
}*/
    /*----------------------------------------------------------------------------*/

    /* Nasconde la tendina su schermi piccoli*/
    @media (max-width: 991px) {
        #vwebCartWrapper .toolbar .cart-dropdown,
        #vwebCartWrapper .toolbar .cart-btn:hover .cart-dropdown,
        .toolbar .cart-btn:hover .cart-dropdown {
            display: none !important;
        }
    }

/* 3. TITOLO "Carrello della spesa" - NO BOLD, CENTRATO */
#cart-detail:not(:has(.vweb-cart-qty)):not(:has(.vweb-cart-row)) h2,
#cart-detail:not(:has(.vweb-cart-qty)):not(:has(.vweb-cart-row)) h3 {
    color: var(--vweb-text-main) !important;
}

/* Iniezione della freccia personalizzata */
.select-style::after {
    color: var(--vweb-text-main) !important;
}

label {
    font-weight: 400 !important;
}