/* ==========================================================================
   vweb-standard.css - Layout Componenti Template Standard (VegaWeb)
   ========================================================================== */

.page-content {
    padding-top: 0px;
}

.page-content-25 {
    padding-top: 0px;
}

@media only screen and (max-width: 1200px) {
    .page-content {
        padding-top: 0px;
    }
}

/* Sgancia e nasconde il bottone su Desktop tramite ID assoluto */
#vwebClearCartMobile {
    display: none !important;
}

/* ==========================================================================
   COMPONENTE: HEADER CONTENITORE E MENU (Safe Mode)
   ========================================================================== */

/* --- 1. MODIFICA STICKY SUL TUO CODICE ORIGINALE --- */
.vweb-header-main {
    background-color: var(--vweb-bg-body) !important;
    height: 95px !important;
    position: sticky !important; /* Modificato da relative a sticky */
    top: 0 !important; /* Aggiunto per lo sticky */
    z-index: 1050 !important; /* Alzato leggermente per sicurezza */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

    /* --- 2. FIX ANTI-SCOMPARSA JS --- */
    .vweb-header-main header {
        position: relative !important;
        transform: none !important;
        top: 0 !important;
}

@media (min-width: 992px) {
    .vweb-header-main {
        height: 90px !important;
    }
}

.vweb-header-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    margin: 0 auto;
    width: 100%;
    max-width: 1600px;
    padding: 0 50px;
    box-sizing: border-box;
}

/* --------------------------------------------- */
/* --- CELLA 1: LOGO & HAMBURGER --- */
.vweb-logo-cell {
    display: flex;
    align-items: center;
    flex: 0 0 110px;
    height: 100%;
    margin-top: 5px;
}

.vweb-logo-link {
    display: block;
    line-height: 0;
}

.vweb-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}

.vweb-hamburger__line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--vweb-text-main);
    border-radius: 2px;
}

/* --------------------------------------------- */
/* --- CELLA 2: NAVIGAZIONE CATEGORIE DESKTOP --- */
.vweb-nav-cell {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* --- BLOCCO STRUTTURALE PRINCIPALE MENU --- */
.vweb-menu-desktop {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap !important;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    align-items: center;
}

    .vweb-menu-desktop > li {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

        .vweb-menu-desktop > li > a {
            color: var(--vweb-text-secondary) !important;
            font-size: 20px !important;
            font-weight: 500;
            line-height: 2.2 !important;
            text-decoration: none;
            height: 100%;
            padding: 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            transition: all 0.2s;
        }

        .vweb-menu-desktop > li:hover > a {
            background-color: var(--vweb-color-primary) !important;
            color: var(--vweb-bg-body) !important;
        }

    /* --- TENDINE DESKTOP LIVELLO 2 E 3 --- */
    .vweb-menu-desktop li ul.no-mobile {
        position: absolute;
        top: 40px;
        left: 0;
        background-color: var(--vweb-color-primary) !important;
        min-width: 220px;
        padding: 0;
        margin: 0;
        list-style: none;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        display: none;
        flex-direction: column;
        z-index: 2000;
        border-radius: 4px !important; /* Uniforma la curvatura a quella dei bottoni L1 */
    }

    .vweb-menu-desktop li:hover > ul.no-mobile {
        display: flex;
    }

    .vweb-menu-desktop li ul.no-mobile li {
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        margin-bottom: 0 !important;
    }

        .vweb-menu-desktop li ul.no-mobile li a {
            color: var(--vweb-bg-body) !important;
            font-size: 18px;
            padding: 12px 20px;
            display: block;
            text-decoration: none;
            text-align: left;
        }

        .vweb-menu-desktop li ul.no-mobile li:hover > a {
            background-color: var(--vweb-color-secondary) !important; 
            border-radius: 4px !important; /* Uniforma la curvatura a quella dei bottoni L1 */
        }

        .vweb-menu-desktop li ul.no-mobile li ul.no-mobile {
            top: 0;
            left: 100%;
        }

    /* --- BLOCCO PROTEZIONE --- */
    .vweb-menu-desktop,
    .vweb-menu-desktop ul,
    .vweb-menu-desktop li {
        line-height: normal !important;
        font-weight: normal !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

        .vweb-menu-desktop > li,
        .vweb-menu-desktop ul.no-mobile li,
        .vweb-menu-desktop ul.no-mobile li ul.no-mobile li {
            margin-bottom: 0 !important;
        }

/* ==========================================================================
   3. ISOLAMENTO FIX DESKTOP (Invisibile al Mobile)
   ========================================================================== */
@media (min-width: 1200px) {
    /* Sistema esplosione altezza bottone */
    .vweb-menu-desktop > li > a {
        height: auto !important;
        padding: 8px 15px !important;
        border-radius: 4px !important;
        line-height: normal !important;
    }

    /* Riattacca la tendina Livello 2 al bottone */
    .vweb-menu-desktop li ul.no-mobile {
        top: 40px !important;
    }

        /* Crea il perno per il Livello 3 */
        .vweb-menu-desktop li ul.no-mobile li {
            position: relative !important;
        }

            /* Sistema l'allineamento Livello 3 */
            .vweb-menu-desktop li ul.no-mobile li ul.no-mobile {
                top: 0 !important;
                left: 100% !important;
            }
}

/* --------------------------------------------- */

/* --- CELLA 3: AZIONI ED E-COMMERCE DESKTOP --- */
.vweb-actions-cell {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 auto;
    padding-left: 10px;
}

.vweb-btn-contact {
    background-color: var(--vweb-color-primary) !important; 
    color: var(--vweb-bg-body) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    text-decoration: none !important; /* Rimuove sottolineatura di partenza */
    text-transform: uppercase !important;
    display: inline-block !important; /* Garantisce il corretto calcolo del padding */
    transition: background-color 0.2s ease !important;
    margin-right: 30px;
}

    .vweb-btn-contact:hover,
    .vweb-btn-contact:focus,
    .vweb-btn-contact:active {
        background-color: var(--vweb-color-secondary) !important; /* Cambia sfondo in blu scuro */
        color: var(--vweb-bg-body) !important; /* Mantiene il testo bianco */
        text-decoration: none !important; /* ELIMINA CHIRURGICAMENTE LA SOTTOLINEATURA */
    }

.vweb-action-icon {
    display: block;
    cursor: pointer;
}

.vweb-action-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* --- RESPONSIVE OVERLAY INDIPENDENTE MOBILE --- */
@media (max-width: 1199px) {
    .vweb-hamburger {
        display: flex;
    }

    .vweb-logo-link {
        position: relative;
        top: 0;
        margin-left: 15px;
    }

    .vweb-logo-img {
        width: 100px;
    }

    .vweb-actions-cell .vweb-desktop-only {
        display: none !important;
    }

    .vweb-nav-cell {
        display: none;
        position: fixed;
        left: 0;
        top: 90px !important; /* Puntamento corretto sotto l'header mobile da 95px */
        width: 100vw;
        height: calc(100vh - 90px) !important;
        background-color: var(--vweb-bg-body);
        overflow-y: auto;
        z-index: 99999;
        flex-direction: column;
        justify-content: flex-start;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        -webkit-overflow-scrolling: touch;
    }

        .vweb-nav-cell.expanded {
            display: flex;
        }

    .vweb-menu-desktop {
        flex-direction: column;
        width: 100%;
        height: auto;
    }

        .vweb-menu-desktop > li {
            width: 100%;
            flex-direction: column;
            align-items: stretch;
            border-bottom: 1px solid var(--vweb-bg-surface);
            height: auto;
        }

            .vweb-menu-desktop > li > a {
                justify-content: flex-start;
                padding: 12px 20px;
                height: auto;
                font-weight: 700;
            }

        /* FIX MOBILE: Impedisce l'interferenza degli stati hover desktop */
        .vweb-menu-desktop li:hover > ul.no-mobile {
            display: none;
        }

        .vweb-menu-desktop li ul.no-mobile {
            position: relative !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            box-shadow: none !important;
            background-color: #FAFAFA !important;
            display: none;
        }

        .vweb-menu-desktop li.vweb-open > ul.no-mobile {
            display: block !important;
        }

        /* Livello 2 Mobile */
        .vweb-menu-desktop li ul.no-mobile li a {
            padding-left: 40px !important;
            color: var(--vweb-color-secondary) !important;
            background-color: transparent !important;
        }

        /* Testo Bianco su sfondo Blu quando la categoria è attiva/aperta */
        .vweb-menu-desktop li ul.no-mobile li:hover > a,
        .vweb-menu-desktop li ul.no-mobile li.vweb-open > a {
            background-color: var(--vweb-color-secondary) !important;
            color: var(--vweb-bg-body) !important;
        }

        /* Livello 3 Mobile (Stacco Grigio) */
        .vweb-menu-desktop li ul.no-mobile li ul.no-mobile {
            background-color: var(--vweb-bg-tab-inactive) !important;
        }

            .vweb-menu-desktop li ul.no-mobile li ul.no-mobile li a {
                padding-left: 60px !important;
                color: var(--vweb-text-main) !important;
                background-color: transparent !important;
                font-size: 14px !important;
            }

            .vweb-menu-desktop li ul.no-mobile li ul.no-mobile li:hover > a {
                color: var(--vweb-color-primary) !important;
                background-color: transparent !important;
            }


    /* Ripristina il bottone solo in vista Mobile */
    #vwebClearCartMobile {
        display: inline-flex !important; /* Nota: usa 'flex' o 'block' se deve occupare tutta la larghezza della sidebar mobile */
    }
}

/* ==========================================================================
   ARCHITETTURA REATTIVA FLUIDA - WEYOU DESKTOP MASTER (ACCESSIBILITÀ 2025)
   ========================================================================== */

/* 1. SU SCHERMI GRANDI (> 1450px): Fissiamo il font a 20px per la massima eleganza */
@media (min-width: 1451px) {
    .vweb-menu-desktop > li > a,
    .vweb-menu-desktop li ul.no-mobile li a {
        font-size: 20px !important; /* Modifica font menu */
    }
}

/* 2. COMPORTAMENTO FLUIDO E GESTIONE STRUTTURALE (Scatta ora da 1200px in sù) */
@media (min-width: 1200px) {

    .vweb-header-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        /* FIX: Recuperiamo spazio vitale dai bordi laterali estremi dello schermo 
        padding: 0 clamp(10px, 2vw, 30px) !important;*/
    }

    /* COLONNA LOGO */
    .vweb-col-logo {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
    }

    .vweb-logo-img {
        width: clamp(100px, 8vw, 125px) !important;
        height: auto !important;
    }

    /* COLONNA NAVIGAZIONE */
    .vweb-col-nav {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        justify-content: center !important;
        padding: 0 10px !important; /* Leggermente ridotto per dare respiro */
    }

    .vweb-menu-desktop {
        justify-content: center !important;
        /* Il gap si azzera del tutto in emergenza */
        gap: clamp(0px, 0.2vw, 15px) !important;
    }

        /* SCALATURA ACCESSIBILE E LIMITATA: Voci 1° Livello E 2° Livello */
        .vweb-menu-desktop > li > a,
        .vweb-menu-desktop li ul.no-mobile li a {
            font-size: clamp(14px, 1.2vw, 20px) !important; /* Modifica font menu */
            /* FIX CRITICO: Il padding laterale scende a soli 3px prima del break mobile */
            padding: 12px clamp(3px, 0.8vw, 13px) !important;
            white-space: nowrap !important;
            letter-spacing: 0 !important;
        }

    /* COLONNA AZIONI */
    .vweb-col-actions {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        /* FIX: Spaziatura ampia ed equidistante tra le icone (Omino, Lente, Carrello) */
        gap: 28px !important;
    }

    .vweb-btn-contact {
        font-size: clamp(13px, 1vw, 15px) !important;
        /* FIX: Stringiamo il bottone lo avviciniamo al lucchetto */
        padding: 8px clamp(10px, 1vw, 20px) !important;
        margin-right: clamp(8px, 1.2vw, 25px) !important;
        white-space: nowrap !important;
    }

    /* SCALATURA TENDINA (LIVELLO 2 E 3) */
    .vweb-menu-desktop li ul.no-mobile {
        min-width: clamp(190px, 15vw, 220px) !important;
        top: 100% !important;
        margin-top: 0 !important;
    }
}

/* ==========================================================================
   AREA PERSONALE - TENDINA SOTTO L'OMINO LOGGATO (DESKTOP)
   ========================================================================== */
.vweb-user-dropdown-wrapper .vweb-user-dropdown-menu {
    display: none;
    position: absolute !important;
    top: 45px !important;
    right: -10px !important;
    left: auto !important;
    background-color: var(--vweb-bg-body) !important;
    min-width: 260px !important;
    padding: 0 !important; /* Rimosso il padding globale per fare le righe piene */
    margin: 0 !important;
    border: 1px solid var(--vweb-border-muted) !important;
    border-top: 3px solid var(--vweb-color-primary) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    z-index: 99999 !important;
    list-style: none !important;
    border-radius: 0 0 6px 6px !important;
}

    /* IL PONTE INVISIBILE (Previene la scomparsa al passaggio del mouse) */
    .vweb-user-dropdown-wrapper .vweb-user-dropdown-menu::before {
        content: "";
        position: absolute;
        top: -20px;
        left: 0;
        right: 0;
        height: 20px;
        background: transparent;
        z-index: 1;
    }

.vweb-user-dropdown-wrapper:hover .vweb-user-dropdown-menu,
.vweb-user-dropdown-wrapper:focus-within .vweb-user-dropdown-menu {
    display: block !important;
}

.vweb-user-dropdown-wrapper .vweb-user-dropdown-menu > li {
    display: block !important;
    width: 100% !important;
    /* Riga separatrice solida e pulita, non più dashed */
    border-bottom: 1px solid var(--vweb-border-box-light) !important;
    margin-bottom: 0px !important;
}

    .vweb-user-dropdown-wrapper .vweb-user-dropdown-menu > li:last-child {
        border-bottom: none !important;
    }

    .vweb-user-dropdown-wrapper .vweb-user-dropdown-menu > li > a {
        display: block !important;
        /* Più respiro: 16px sopra/sotto e 25px ai lati  */
        padding: 12px 22px !important;
        color: var(--vweb-text-main) !important;
        font-family: var(--vweb-font-main), sans-serif !important;
        font-size: 15px !important; /* Font un pelo più grande */
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }

        .vweb-user-dropdown-wrapper .vweb-user-dropdown-menu > li > a:hover,
        .vweb-user-dropdown-wrapper .vweb-user-dropdown-menu > li > a:focus {
            background-color: var(--vweb-bg-interaction) !important;
            color: var(--vweb-color-primary) !important;
            /* Micro-animazione identica al mobile */
            padding-left: 30px !important;
            outline: none !important;
        }

/* Nasconde le voci clonate per il mobile quando siamo su desktop */
@media (min-width: 1200px) {
    .vweb-mobile-only {
        display: none !important;
    }
}

/* ==========================================================================
   COMPONENTE: FOOTER
   ========================================================================== */
.vweb-footer {
    background-color: var(--vweb-bg-body) !important; /* Forza lo sfondo bianco alto */
    width: 100%;
    clear: both;
    display: block;
}

    .vweb-footer .footer-top {
        background-color: var(--vweb-bg-body) !important;
        padding: 60px 0 40px 0;
        border-top: 1px solid var(--vweb-border-muted);
        display: block;
    }

.vweb-footer__title {
    color: var(--vweb-color-secondary) !important;
    font-size: 14px;
    font-weight: 700;
    display: block;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.vweb-footer__link {
    color: var(--vweb-text-main) !important;
    font-size: 13px;
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
}

    .vweb-footer__link:hover {
        color: var(--vweb-color-primary) !important;
        text-decoration: underline;
    }

.vweb-footer__motto {
    color: var(--vweb-color-secondary) !important;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 20px;
}

    .vweb-footer__motto span {
        color: var(--vweb-color-primary) !important;
    }

/* Fascia Bassa  */
.vweb-footer-bottom-bar {
    background-color: var(--vweb-color-secondary) !important;
    padding: 25px 0;
    display: block;
    width: 100%;
}

.vweb-footer-bottom-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box;
    width: 100%;
}

.vweb-footer-bottom-left {
    display: flex;
    align-items: center;
}

.vweb-footer-bottom-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 40px;
    padding-left:50px;
}

.vweb-footer-text {
    display: flex;
    flex-direction: column;
    color: var(--vweb-bg-body) !important;
    font-size: 16px !important; /* Dimensione Font a 16px richiesta da specifica */
    line-height: 1.5;
    text-align: left;
}

    .vweb-footer-text div {
        color: var(--vweb-bg-body) !important;
    }

.vweb-footer-social {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px;
    align-items: center;
}

@media (max-width: 991px) {
    .vweb-footer-bottom-row {
        flex-direction: column !important;
        gap: 20px;
    }

    .vweb-footer-bottom-right {
        flex-direction: column !important;
        gap: 15px;
        text-align: center;
    }

    .vweb-footer-text {
        text-align: center;
    }
}

/* ==========================================================================
   PAGINA DI CORTESIA / MANUTENZIONE (Error.cshtml)  
   ========================================================================== */

/* --- 1. RIMOZIONE SEZIONE FOOTER TOP (CONDIZIONAMENTO NEGATIVO) --- */
/* Identifica la pagina di errore dall'assenza della struttura e-commerce standard */
body:not(:has(.vweb-header-main)) .vweb-footer .footer-top,
body:not(:has(.page-content)) .vweb-footer .footer-top {
    display: none !important; /* Forza la rimozione dal flusso di rendering visivo */
}


/* ==========================================================================
   MIGRATED FROM STYLES.CSS
   ========================================================================== */
.gallery-container {
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
}

.text-customer-color {
    color: var(--vweb-text-secondary) !important;
}

.alert-danger {
    background-color: var(--vweb-bg-body);
    border-color: var(--vweb-bg-body);
    color: var(--vweb-color-danger);
}

    .alert-danger hr {
        border-top-color: var(--vweb-color-danger);
    }

    .alert-danger .alert-link {
        color: var(--vweb-color-danger);
    }

.text-danger {
    color: var(--vweb-color-danger) !important;
    font-weight: 400 !important;
}


.text-success {
    color: var(--vweb-color-success-text) !important;
    font-weight: 400 !important;
}

label {
    display: inline-block;
    margin-bottom: 12px;
    font-weight: 300 !important;
    color: var(--vweb-text-main) !important;
}

.form-control {
    display: block;
    width: 100%;
    height: 46px;
    padding: 6px 12px;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.42857143;
    color: var(--vweb-text-tertiary);
    background-color: var(--vweb-bg-body);
    background-image: none;
    border: 1px solid var(--vweb-border-light);
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

    .form-control::-moz-placeholder {
        color: var(--vweb-text-placeholder);
    }

    .form-control:-ms-input-placeholder {
        color: var(--vweb-text-placeholder);
    }

    .form-control::-webkit-input-placeholder {
        color: var(--vweb-text-placeholder);
    }

/* ======================================================================
   POPOVER (Tooltip per Multipli/Minimi)
   ====================================================================== */

/* 1. Contenitore principale */
.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: 276px;
    background-color: var(--vweb-bg-body); /* Sfondo candido */
    border: 1px solid var(--vweb-border-light); /* Bordo grigio standard */
    border-radius: 2px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); /* Ombra leggera e moderna */
    /* Tipografia base */
    font-family: inherit;
    text-align: center; /* Centra il testo di default */
    color: var(--vweb-text-main);
}

    /* 2. Rimuove il riquadro del titolo vuoto in alto */
    .popover-title,
    .popover .popover-title {
        display: none !important;
    }

    /* 3. Contenitore del testo (Respiro e Allineamento) */
    .popover .popover-content {
        padding: 4px 1px !important; /* Dà il giusto margine interno per far respirare il testo */
        text-align: center !important; /* Forza il testo al centro */
        color: var(--vweb-text-muted) !important; /* Usa il grigio per testi dinamici */
        border: none !important;
        background: transparent !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    /* 4. Freccia Direzionale */
    .popover.top {
        margin-top: -8px !important;
    }

    /* Disintegriamo la freccia nativa di Bootstrap (così il suo Javascript non può più romperla) */
    .popover .arrow {
        display: none !important;
    }

    /*  Ne disegniamo una nostra, pura e intoccabile */
    .popover.top::before,
    .popover.top::after {
        content: "" !important;
        position: absolute !important;
        display: block !important;
        width: 0 !important;
        height: 0 !important;
        border-color: transparent !important;
        border-style: solid !important;
        left: 50% !important;
        margin-left: -8px !important; /* Serve a centrare la freccia */
    }

    /* Triangolo esterno (il bordo grigio) */
    .popover.top::before {
        border-width: 8px !important;
        border-bottom-width: 0 !important;
        border-top-color: var(--vweb-border-light) !important;
        bottom: -9px !important; /* Sporge fuori dal riquadro */
    }

    /* Triangolo interno (lo sfondo bianco che "buca" il bordo) */
    .popover.top::after {
        border-width: 8px !important;
        border-bottom-width: 0 !important;
        border-top-color: var(--vweb-bg-body) !important;
        bottom: -8px !important; /* Sta 1px più in alto per far vedere il bordino grigio */
    }

/* ==========================================================================
   RIPRISTINO CHIRURGICO STILI MODALI (Fix Contrasto, Spazi e Bottoni)
   ========================================================================== */
.vweb-modal .modal-content {
    background-color: var(--vweb-bg-body) !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    padding: 30px !important;
    border: none !important;
}

/* Titolo Login */
.vweb-modal .modal-header h2 {
    color: var(--vweb-color-secondary) !important;
    font-family: var(--vweb-font-main) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 0 0 20px 0 !important;
}

.vweb-modal .modal-header {
    border-bottom: 1px solid var(--vweb-border-muted) !important;
    padding: 0 0 15px 0 !important;
}

/* Label dei campi Form (E-mail, Password) */
.vweb-modal .form-group label {
    display: block !important;
    color: var(--vweb-text-main) !important; 
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
}

/* Input Text Box */
.vweb-modal .form-control {
    color: var(--vweb-color-secondary) !important;
    border: 1px solid var(--vweb-border-light) !important;
    background-color: var(--vweb-bg-body) !important;
    height: 46px !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
}

    .vweb-modal .form-control:focus {
        border-color: var(--vweb-color-primary) !important;
        box-shadow: 0 0 5px rgba(255, 119, 39, 0.4) !important;
    }

/* Separazione dei link "Primo Accesso" e "Password Dimenticata" */
.vweb-modal .vweb-help-link {
    color: var(--vweb-color-secondary) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-top: 10px !important;
    margin-right: 15px !important; /* Crea lo stacco tra i due link */
    font-weight: 400 !important;
    transition: color 0.2s ease;
}

    .vweb-modal .vweb-help-link:hover {
        color: var(--vweb-color-primary) !important;
        text-decoration: underline !important;
    }

/* TRASFORMAZIONE BOTTONE LOGIN */
.vweb-modal button.vweb-btn-submit {
    background-color: var(--vweb-color-primary) !important;
    color: var(--vweb-bg-body) !important;
    font-family: var(--vweb-font-main) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin-top: 20px !important;
    display: inline-block !important;
    transition: background-color 0.2s ease !important;
}

    .vweb-modal button.vweb-btn-submit:hover {
        background-color: var(--vweb-color-secondary) !important; /* Hover vira al Blu */
    }

/* ==========================================================================
   BONIFICA COMPONENTI INTERNI (Pulsanti E-commerce e Tab Dettaglio)
   ========================================================================== */

.btn-primary,
.catalog-single .buttons .btn,
.shopping-cart .cart-sidebar .cart-totals .btn,
.cart-dropdown .footer .btn,
.btn-black,
a.btn-black {
    background-color: var(--vweb-color-primary) !important; 
    color: var(--vweb-bg-body) !important; /* Testo Bianco */
    font-family: var(--vweb-font-main) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 14px !important; /* Dimensione testo leggermente più piccola come richiesto */
    border: none !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
}

    .btn-primary:hover,
    .catalog-single .buttons .btn:hover,
    .shopping-cart .cart-sidebar .cart-totals .btn:hover,
    .cart-dropdown .footer .btn:hover,
    .btn-black:hover,
    a.btn-black:hover,
    .btn-black:focus,
    a.btn-black:focus { /* <--- AGGANCIO CHIRURGICO STATO HOVER */
        background-color: var(--vweb-color-secondary) !important;
        color: var(--vweb-bg-body) !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

/* ==========================================================================
   PULSANTE SECONDARIO  (.btn-secondary)
   ========================================================================== */
.shopping-cart .cart-totals .btn-secondary,
a.btn-secondary {
    background-color: transparent !important; /* Sfondo svuotato */
    color: var(--vweb-color-primary) !important;
    border: 1px solid var(--vweb-color-primary) !important;
    font-family: var(--vweb-font-main) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 13px !important; /* Stessa dimensione del primario per coerenza */
    border-radius: 4px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease-in-out !important;
}

    /* Stato Hover ed Focus */
    .shopping-cart .cart-totals .btn-secondary:hover,
    a.btn-secondary:hover,
    .shopping-cart .cart-totals .btn-secondary:focus,
    a.btn-secondary:focus {
        background-color: var(--vweb-color-primary) !important;
        color: var(--vweb-bg-body) !important;
        border-color: var(--vweb-color-primary) !important;
        text-decoration: none !important;
        box-shadow: 0 4px 8px rgba(255, 119, 39, 0.2) !important; /* Leggera ombra morbida */
    }

/* ==========================================================================
       FORZATURA COLORE ICONE AL PASSAGGIO DEL MOUSE
       ========================================================================== */
.btn-primary:hover i,
.catalog-single .buttons .btn:hover i,
.shopping-cart .cart-sidebar .cart-totals .btn:hover i,
.cart-dropdown .footer .btn:hover i,
.btn-black:hover i,
a.btn-black:hover i,
.btn-black:focus i,
a.btn-black:focus i {
    /* Usiamo "inherit" in modo che l'icona copi ESATTAMENTE 
           il colore del testo che il bottone assume in hover (var(--vweb-bg-body)) */
    color: inherit !important;
}

/* ==========================================================================
   BOTTONE DI ERRORE
   ========================================================================== */
.btn-error {
    background-color: var(--vweb-color-primary) !important;
    color: var(--vweb-bg-body) !important;
    font-family: var(--vweb-font-main) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important; /* Forza il maiuscolo istituzionale */
    font-size: 13px !important; /* Allineato alla dimensione dei bottoni e-commerce del sito */
    padding: 12px 35px !important; /* Spessore e larghezza standard Weyou per il touch-target */
    border: none !important;
    border-radius: 4px !important; /* Curvatura geometrica del master */
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s ease !important;
}

    .btn-error:hover,
    .btn-error:focus,
    .btn-error:active {
        background-color: var(--vweb-color-secondary) !important;
        color: var(--vweb-bg-body) !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

.btn2.disabled,
.btn2[disabled],
fieldset[disabled] .btn2 {
    cursor: not-allowed;
    pointer-events: none;
    color: var(--vweb-bg-body) !important;
    background-color: var(--vweb-color-secondary) !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-bg-body) !important;
    border: none !important;
}

.nav-item button.nav-link,
.tabs-widget .nav-tabs li a {
    background-color: var(--vweb-bg-body) !important;
    color: var(--vweb-text-main) !important;
    border: none !important;
}

/* ==========================================================================
   INTEGRAZIONE COMPONENTE SEARCH FORM (LIMO MIGRATION)
   ========================================================================== */
.vweb-header-main .search-form {
    position: absolute !important;
    width: 100% !important;
    left: 0 !important;
    background-color: var(--vweb-bg-body) !important; /* Forza lo sfondo bianco pulito */
    z-index: 1010 !important; /* Superiore alla header-row (1000) */
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    height: 95px !important; /* Default mobile */
    display: flex !important;
    align-items: center !important;
}

@media (min-width: 992px) {
    .vweb-header-main .search-form {
        height: 90px !important; /* Uguale all'header desktop */
    }
}

/* Gestione degli stati nativi dello script Limo (open/closed) */
.vweb-header-main .search-form.closed {
    opacity: 0 !important;
    top: -120px !important;
    pointer-events: none !important;
    visibility: hidden !important; /* <--- INIEZIONE: Nasconde gli elementi alla tastiera */
}

.vweb-header-main .search-form.open {
    opacity: 1 !important;
    top: 0 !important;
    pointer-events: auto !important;
    visibility: visible !important; /* <--- INIEZIONE: Riattiva la tastiera quando si apre */
}

/* Allineamento elementi interni al form */
.vweb-header-main .search-form .container {
    max-width: 1170px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    position: relative !important;
}

.vweb-header-main .search-form .form-group {
    margin-bottom: 0 !important;
    position: relative !important;
    width: 100% !important;
    padding-right: 40px !important; /* Spazio per la X di chiusura */
}

/* Input di testo della ricerca */
.vweb-header-main .search-form .form-control {
    width: 100% !important;
    height: 46px !important;
    border: 1px solid var(--vweb-border-light) !important;
    background-color: var(--vweb-bg-body) !important;
    color: var(--vweb-color-secondary) !important;
    border-radius: 4px !important;
    padding: 6px 45px 6px 15px !important; /* Spazio per la lente a destra */
    font-size: 16px !important;
}

/* Pulsante Lente d'ingrandimento dentro l'input */
.vweb-header-main .search-form button[type="submit"] {
    position: absolute !important;
    right: 50px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: var(--vweb-text-main) !important;
    font-size: 18px !important;
    cursor: pointer !important;
    padding: 0 !important;
    height: auto !important;
    width: auto !important;
}

    .vweb-header-main .search-form button[type="submit"]:hover {
        color: var(--vweb-color-primary) !important;
    }

/* Forza la responsività e il ripristino del click sul pulsante di chiusura */
.vweb-header-main .search-form .close-search {
    position: absolute !important;
    right: 15px !important; /* Distanza standard dal bordo destro del container */
    top: 50% !important;
    transform: translateY(-50%) !important; /* Centratura verticale matematica perfetta */
    font-size: 20px !important; /* Dimensione dell'icona proporzionata ed elegante */
    color: var(--vweb-text-main) !important;
    cursor: pointer !important;
    z-index: 999999 !important;
    width: 40px !important; /* Area di click comoda ma discreta */
    height: 40px !important; /* Area di click comoda ma discreta */
    display: flex !important;
    align-items: center !important; /* Centra l'icona "X" dentro il suo box */
    justify-content: center !important; /* Centra l'icona "X" dentro il suo box */
    background: transparent !important; /* Rimosso il micro-sfondo di test */
    pointer-events: auto !important;
    transition: color 0.2s ease-in-out !important;
}

    .vweb-header-main .search-form .close-search i,
    .vweb-header-main .search-form .close-search .icon-delete {
        pointer-events: none !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Effetto Hover elegante al passaggio del mouse */
    .vweb-header-main .search-form .close-search:hover {
        color: var(--vweb-color-primary) !important;
    }


/* ==========================================================================
   HEADER: ICONE, TOOLBAR E CARRELLO (VERSIONE VETTORIALE CENTRALIZZATA)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. STILI CONDIVISI ICONE HEADER (Lente, Omino, Carrello)
   -------------------------------------------------------------------------- */
.vweb-header-icon,
.vweb-user-icon,
#vwebCartWrapper .toolbar .cart-btn > a.btn::before {
    font-size: 32px !important;
    color: var(--vweb-text-main) !important;
    transition: color 0.2s ease !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-color-primary) !important;
}


/* --------------------------------------------------------------------------
   2. PROFILO UTENTE (Omino e Badge Spunta)
   -------------------------------------------------------------------------- */
.vweb-user-icon {
    display: block !important;
    line-height: 1 !important;
}

/* Stato Loggato: l'omino rimane del colore primario */
.vweb-user-icon--logged-in {
    color: var(--vweb-color-primary) !important;
    font-weight: bold !important;
}

/* Badge con la Spunta (Utente Loggato) */
.vweb-user-badge {
    position: absolute !important;
    bottom: -2px !important;
    right: -4px !important;
    background-color: var(--vweb-color-primary) !important;
    color: var(--vweb-bg-body) !important;
    width: 14px !important;
    height: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 2px solid var(--vweb-bg-body) !important;
    font-size: 9px !important;
    box-sizing: content-box !important;
}


/* --------------------------------------------------------------------------
   3. TOOLBAR CARRELLO (Struttura Base e Allineamenti)
   -------------------------------------------------------------------------- */
/* Disinnesco posizionamenti assoluti nativi di Limo */
#vwebCartWrapper,
#vwebCartWrapper #header-cart,
#vwebCartWrapper .toolbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    float: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
}

    /* Esclude interferenze di padding nativo */
    #vwebCartWrapper .p-t-10 {
        padding-top: 0 !important;
    }

    #vwebCartWrapper .toolbar .cart-btn,
    #vwebCartWrapper .toolbar .cart-btn > a.btn {
        background: transparent !important;
        border: none !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    #vwebCartWrapper .toolbar .cart-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        top: 2px !important;
    }

        #vwebCartWrapper .toolbar .cart-btn > a.btn {
            display: block !important;
        }


            /* --------------------------------------------------------------------------
   4. CARRELLO: INIEZIONE ICONA E COUNTER NUMERICO
   -------------------------------------------------------------------------- */
            #vwebCartWrapper .toolbar .cart-btn > a.btn::before {
                content: "\f07a" !important;
                font-family: "FontAwesome" !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 100% !important;
                height: 100% !important;
                background: transparent !important;
            }

    /* Pallino del Counter Numerico */
            #vwebCartWrapper .toolbar .cart-btn > a.btn span.h-20 {
                display: flex !important;
                visibility: visible !important;
                opacity: 1 !important;
                position: absolute !important;
                top: -6px !important;
                right: -10px !important;
                background-color: var(--vweb-color-primary) !important;
                color: var(--vweb-bg-body) !important;
                font-family: var(--vweb-font-main), sans-serif !important;
                font-size: 11px !important;
                font-weight: 700 !important;
                border-radius: 50% !important;
                width: 20px !important;
                height: 20px !important;
                min-width: 20px !important;
                min-height: 20px !important;
                align-items: center !important;
                justify-content: center !important;
                line-height: 1 !important;
                box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
                z-index: 99 !important;
                text-indent: 0 !important;
            }

/* --------------------------------------------------------------------------
   5. FINE-TUNING OTTICO LENTE DI RICERCA
   -------------------------------------------------------------------------- */
.vweb-search-icon {
    /* Il trucco di snellimento applicato SOLO alla lente */
    -webkit-text-stroke: 1px var(--vweb-bg-body) !important;
}

    /* ==========================================================================
   CONFIGURAZIONE TENDINA POPUP (CART DROPDOWN)
   ========================================================================== */
/* 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 {
        position: absolute !important;
        top: 45px !important;
        right: -10px !important;
        left: auto !important;
        width: 500px !important;
        background-color: var(--vweb-bg-body) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
        border: 1px solid var(--vweb-border-muted) !important;
        border-radius: 6px !important;
        padding: 20px !important;
        z-index: 999999 !important;
    max-height: calc(100vh - 160px) !important; /* 160px = spazio per header + margine */
    overflow: visible !important; /* rispetta gli angoli arrotondati */
    }

/* Forza l'apertura all'hover del mouse su Desktop */
@media (min-width: 992px) {
    #vwebCartWrapper .toolbar .cart-btn:hover .cart-dropdown {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !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-bg-scrollbar-track);
    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;
    }
}

/* Griglia Tabella Fissa e Pulita */
#vwebCartWrapper .toolbar .cart-dropdown table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

    /* ==========================================================================
   CONFIGURAZIONE POPUP - GRIGLIA TABELLA PURA E SENZA RIDONDANZE
   ========================================================================== */

    /* 1. STILE MACRO RIGHE */
    /* Intestazioni generali (Titoli: Items, Quantity, Price) */
    #vwebCartWrapper .toolbar .cart-dropdown table th {
        padding: 0 5px 15px 5px !important;
        color: var(--vweb-text-main) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-bottom: 1px solid var(--vweb-border-muted) !important;
    }

    /* Celle valori generali (I dati dei prodotti) */
    #vwebCartWrapper .toolbar .cart-dropdown table td {
        padding: 15px 5px !important;
        color: var(--vweb-text-main) !important;
        font-size: 14px !important;
        vertical-align: middle !important;
        border-bottom: 1px dashed var(--vweb-border-subtle) !important;
    }

    /* Rimuove la linea tratteggiata dall'ultimo prodotto in lista */
    #vwebCartWrapper .toolbar .cart-dropdown table tr:last-child td {
        border-collapse: collapse !important;
        border-bottom: none !important;
    }


    /* 2. ALLINEAMENTO E LARGHEZZA COLONNE (Accorpati th e td per evitare doppioni) */
    /* Colonna 1: Descrizione prodotto */
    #vwebCartWrapper .toolbar .cart-dropdown table th:nth-child(1),
    #vwebCartWrapper .toolbar .cart-dropdown table td:nth-child(1) {
        width: 50% !important;
        text-align: left !important;
    }

    /* Colonna 2: Quantità */
    #vwebCartWrapper .toolbar .cart-dropdown table th:nth-child(2),
    #vwebCartWrapper .toolbar .cart-dropdown table td:nth-child(2) {
        width: 15% !important;
        text-align: center !important;
    }

    /* Colonna 3: TH INTESTAZIONE "PRICE" - Allineata al CENTRO */
    #vwebCartWrapper .toolbar .cart-dropdown table th:nth-child(3) {
        width: 25% !important;
        text-align: right !important; /* Forza la parola PRICE al centro */
        padding-right: 20px !important; /* Resetta i vecchi spazi di battuta */
        direction: ltr !important; /* Ripristina la direzione di lettura standard */
    }

    /* Colonna 3: TD VALORI PREZZO (Es: 682.50 €) - Bloccati a DESTRA */
    #vwebCartWrapper .toolbar .cart-dropdown table td:nth-child(3) {
        width: 25% !important;
        text-align: right !important; /* Spinge i prezzi dei prodotti a destra */
        padding-right: 0px !important; /* Mantiene lo stacco di sicurezza dal bordo del cestino */
        direction: rtl !important; /* Evita i conflitti di ereditarietà con Limo */
        color: var(--vweb-color-primary) !important; /* Ripristinata variabile core */
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    /* Colore specifico per evidenziare il prezzo arancione solo nelle righe dei prodotti */
    #vwebCartWrapper .toolbar .cart-dropdown table td:nth-child(3) {
        color: var(--vweb-color-primary) !important; /* Ripristinata variabile core */
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    /* Colonna 4: Pulsante cancella (Cestino) */
    #vwebCartWrapper .toolbar .cart-dropdown table th:nth-child(4),
    #vwebCartWrapper .toolbar .cart-dropdown table td:nth-child(4) {
        width: 10% !important;
        text-align: center !important;
    }

    #vwebCartWrapper .toolbar .cart-dropdown table td button.header-delete-item {
        display: inline-block !important;
        cursor: pointer !important;
    }

    #vwebCartWrapper .toolbar .cart-dropdown table td.price {
        display: table-cell !important; /* Comportamento nativo della tabella */
        text-align: right !important; /* Allinea i prezzi a destra a piombo */
        vertical-align: middle !important; /* Centra perfettamente in verticale rispetto a quantità e testo */
        white-space: nowrap !important; /* Impedisce qualsiasi a-capo strano */
        padding-right: 15px !important; /* Distanza di sicurezza dal cestino di riga */
        color: var(--vweb-text-main) !important; /* Colore grigio scuro standard */
        padding-top: 24px !important;
    }

/* Fascia Grigia Inferiore */
#vwebCartWrapper .toolbar .cart-dropdown .footer {
    background: var(--vweb-bg-light) !important;
    border-top: 1px solid var(--vweb-border-muted) !important;
    padding: 15px 20px !important;
    margin-top: 5px !important;
    width: calc(100% + 40px) !important;
    margin-left: -20px !important;
    margin-bottom: -20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    border-radius: 0 0 6px 6px !important;
}

    #vwebCartWrapper .toolbar .cart-dropdown .footer .buttons {
        display: inline-flex !important;
        gap: 10px !important;
    }

    #vwebCartWrapper .toolbar .cart-dropdown .footer .total {
        color: var(--vweb-color-primary) !important; /* Ripristinata variabile core */
        font-size: 18px !important;
        font-weight: 900 !important;
        text-align: right !important;
        margin-left: auto !important;
        padding-right: 50px !important;
        white-space: nowrap !important;
    }

@media (max-width: 1199px) {
    #vwebCartWrapper .toolbar .cart-btn:hover .cart-dropdown {
        display: none !important;
    }
}

/* ==========================================================================
   LOGIN-PARTIAL NEL MENU CATEGORIE
   ========================================================================== */

/* 1. Assicura che la voce padre (My Account / Come in) faccia da perno per la tendina */
.vweb-menu-desktop > li {
    position: relative !important;
}

/* 2. Sgancia la tendina del Login e la nasconde di default */
.vweb-menu-desktop ul.z-i-100 {
    display: none !important; /* Nasconde la lista rotta */
    position: absolute !important; /* La sgancia dal flusso del menu principale */
    top: 100% !important; /* La fa partire esattamente sotto la barra */
    right: 0 !important; /* La allinea a destra per non sbordare dallo schermo */
    left: auto !important;
    background-color: var(--vweb-bg-body) !important;
    min-width: 250px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    border: 1px solid var(--vweb-border-muted) !important;
    border-top: 3px solid var(--vweb-color-primary) !important; /* Riga istituzionale arancione in alto */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    z-index: 99999 !important;
}

/* 3. Mostra la tendina solo quando si passa il mouse su "My account" o "Come in" */
.vweb-menu-desktop > li:hover > ul.z-i-100 {
    display: block !important;
}

/* 4. Format pulito delle singole voci della tendina (Client Data, Ordini, ecc.) */
.vweb-menu-desktop ul.z-i-100 > li {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px dashed var(--vweb-border-subtle) !important;
    margin: 0 !important;
    padding: 0 !important;
}

    /* Togli la riga tratteggiata dall'ultimo elemento */
    .vweb-menu-desktop ul.z-i-100 > li:last-child {
        border-bottom: none !important;
    }

    /* 5. Stile dei testi dei link nell'area personale */
    .vweb-menu-desktop ul.z-i-100 > li > a {
        display: block !important;
        padding: 12px 20px !important;
        color: var(--vweb-text-main) !important;
        font-family: var(--vweb-font-main), sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        text-transform: none !important; /* Annulla il maiuscolo forzato del menu categorie */
        text-decoration: none !important;
        text-align: left !important;
        transition: all 0.2s ease !important;
    }

        /* 6. Effetto Hover elegante sulle voci del profilo */
        .vweb-menu-desktop ul.z-i-100 > li > a:hover {
            background-color: var(--vweb-bg-light) !important;
            color: var(--vweb-color-primary) !important;
            padding-left: 25px !important; /* Micro-animazione di scorrimento verso destra */
        }

        /* 7. Colora di arancione le piccole icone (Mail, Login, Omino) presenti nella tendina */
        .vweb-menu-desktop ul.z-i-100 > li > a i {
            color: var(--vweb-color-primary) !important;
            margin-right: 10px !important;
        }

/* ==========================================================================
   FIX MOBILE: ADATTAMENTO TENDINA LOGIN/ACCOUNT PER SMARTPHONE E TABLET
   ========================================================================== */
@media (max-width: 1199px) {
    /* 1. Riporta la tendina nel normale flusso verticale (niente posizionamenti assoluti che sballano lo schermo) */
    .vweb-menu-desktop ul.z-i-100 {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        box-shadow: none !important;
        border: none !important;
        border-top: 1px solid var(--vweb-border-muted) !important;
        border-bottom: 1px solid var(--vweb-border-muted) !important;
        background-color: var(--vweb-bg-light) !important; /* Sfondo leggermente grigio per staccarlo dalle categorie principali */
        width: 100% !important;
        min-width: 100% !important;
        padding: 0 !important;
        /* Nascondiamo di default e lasciamo che sia il tap/click nativo a gestirlo */
        display: none !important;
    }

    /* 2. Su mobile, mostra la tendina quando il genitore riceve lo stato .open, .active o viene cliccato */
    .vweb-menu-desktop > li.open > ul.z-i-100,
    .vweb-menu-desktop > li.active > ul.z-i-100,
    .vweb-menu-desktop > li:focus-within > ul.z-i-100,
    .vweb-menu-desktop > li:hover > ul.z-i-100 {
        display: block !important;
    }

    /* 3. Aumenta l'area di tocco per le dita (Padding più ampio) */
    .vweb-menu-desktop ul.z-i-100 > li > a {
        padding: 15px 20px !important;
        font-size: 16px !important;
        border-bottom: 1px solid var(--vweb-border-box-light) !important;
    }

        /* 4. Annulla l'animazione di scorrimento laterale che su touch screen non ha senso */
        .vweb-menu-desktop ul.z-i-100 > li > a:hover,
        .vweb-menu-desktop ul.z-i-100 > li > a:active {
            padding-left: 20px !important;
            background-color: var(--vweb-bg-interaction) !important; /* Semplice feedback visivo al tocco */
        }
}

/* ==========================================================================
   CENTRATURA E OTTIMIZZAZIONE SPAZI BOTTONI AZIONE NEI FORM (EDIT / CANCEL)
   ========================================================================== */
.row .form-group.block {
    display: flex !important;
    justify-content: center !important; /* Spinge i bottoni esattamente al centro della riga */
    gap: 20px !important; /* Aumentato leggermente lo stacco tra i due bottoni */
    width: 100% !important;
    margin-top: 35px !important; /* FIX: Crea un perfetto spazio di respiro tra i campi di input e i bottoni */
    margin-bottom: 20px !important; /* Distanzia i bottoni dal footer della pagina */
}

    /* Rallinea i bottoni sui form resettando i float nativi di Bootstrap e ottimizza il padding interno */
    .row .form-group.block .btn.btn-black {
        float: none !important;
        margin: 0 !important;
        padding: 12px 35px !important; /* FIX: Rende i bottoni più alti e larghi, molto più importanti e cliccabili */
    }

/* ==========================================================================
   VEGAWEB: UNIFORMITÀ BOTTONE DETTAGLIO ORDINE (LABEL-AS-BTN-STYLE)
   ========================================================================== */

/* 1. Stato Normale: Converte il bottone fango nel bottone arancione VegaWeb */
.label-as-btn-style,
a.label-as-btn-style {
    display: inline-block !important;
    background-color: var(--vweb-color-primary) !important;
    color: var(--vweb-bg-body) !important; /* Testo Bianco */
    font-family: var(--vweb-font-main) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 13px !important; /* Compatto come gli altri */
    padding: 12px 35px !important; /* Spessore elegante */
    border: none !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
    margin-top: 15px !important; /* Crea lo stacco corretto dai dati sopra */
    cursor: pointer !important;
}

    /* 2. Stato Hover / Rollover: Forza il viraggio sul blu istituzionale */
    .label-as-btn-style:hover,
    a.label-as-btn-style:hover,
    .label-as-btn-style:focus,
    a.label-as-btn-style:focus {
        background-color: var(--vweb-color-secondary) !important;
        color: var(--vweb-bg-body) !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

/* ==========================================================================
   VEGAWEB: RECONVERSIONE BRAND E SPAZIATURA BREADCRUMB
   ========================================================================== */
.breadcrumb {
    width: 100% !important;
    max-width: 1170px !important;
    margin: 20px auto 0 auto !important; /* FIX: Spazio dal top impostato a 20px (Modificabile) */
    padding: 5px 15px 0 15px !important;
    background: none !important;
    text-align: right !important;
}

    /* Colore del testo della pagina corrente (non cliccabile) */
    .breadcrumb > li {
        font-size: 1.1em !important;
        color: var(--vweb-color-primary) !important; /* Grigio scuro istituzionale */
        font-family: var(--vweb-font-main), sans-serif !important;
    }

        /* Colore dei link cliccabili (Home > Categoria...) */
        .breadcrumb > li a {
            color: var(--vweb-color-primary) !important; /* Arancio VegaWeb per i link attivi */
            text-decoration: none !important;
            transition: color 0.2s ease !important;
        }

            /* Effetto Hover sui link del percorso: vira al blu scuro ufficiale */
            .breadcrumb > li a:hover {
                color: var(--vweb-color-secondary) !important;
                text-decoration: underline !important; /* Sottolineatura elegante solo al passaggio mouse */
            }

        /* Colore del separatore (la barra "/" o il carattere ">" tra le voci) */
        .breadcrumb > li + li:before {
            color: var(--vweb-color-primary) !important; /* Uniformato al grigio di testo */
            padding: 0 8px !important;
        }


/* Ottimizzazione Mobile per schermi sotto i 768px */
@media only screen and (max-width: 768px) {
    .breadcrumb {
        text-align: center !important; /* Centra il percorso su smartphone */
        margin-top: 15px !important; /* Riduce leggermente lo spazio su mobile */
    }
}

/* ==========================================================================
   VEGAWEB: CONFIGURAZIONE BILANCIATA E STATI ATTIVI MENU LATERALE (.SHOP-FILTERS)
   ========================================================================== */

.shop-filters {
    font-size: 14px !important;
    font-family: 'Lato', sans-serif !important;
}

    .shop-filters ul.list-unstyled {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 1. Categorie Principali (Primo Livello) */
    .shop-filters > .list-unstyled > li {
        margin-bottom: 5px !important; /* Distanza equilibrata tra macro-blocchi */
    }

        .shop-filters > .list-unstyled > li > a {
            display: inline-block !important;
            padding: 5px 0 !important; /* Spaziatura intermedia ideale */
            font-size: 15px !important;
            font-weight: 700 !important;
            color: var(--vweb-text-main) !important;
            text-decoration: none !important;
            transition: color 0.2s ease !important;
        }

            /* Hover Categorie Principali -> Arancio We You */
            .shop-filters > .list-unstyled > li > a:hover {
                color: var(--vweb-color-primary) !important;
            }

    /* Icona freccetta arancione coerente con il brand */
    .shop-filters .span-tree-style i.triangle-color {
        color: var(--vweb-color-primary) !important;
        font-size: 14px !important;
        margin-left: 5px !important;
    }

    /* 2. Sottomenu / Sottocategorie (Secondo Livello) */
    .shop-filters .list-unstyled .list-unstyled {
        padding-left: 12px !important;
        border-left: 1px solid var(--vweb-border-muted) !important; /* Linea di accoppiamento pulita */
        margin-top: 3px !important;
        margin-bottom: 6px !important;
    }

        .shop-filters .list-unstyled .list-unstyled > li {
            margin-bottom: 2px !important;
        }

            .shop-filters .list-unstyled .list-unstyled > li > a {
                display: block !important;
                padding: 4px 0 !important; /* Spaziatura intermedia per le sottovoci */
                font-size: 13px !important;
                font-weight: 400 !important; /* Più leggero per gerarchia visiva */
                color: var(--vweb-text-main) !important;
                text-decoration: none !important;
                transition: all 0.2s ease !important;
            }

                /* Hover Sottovoci -> Blu Scuro Istituzionale */
                .shop-filters .list-unstyled .list-unstyled > li > a:hover {
                    color: var(--vweb-color-secondary) !important;
                    font-weight: 700 !important;
                    padding-left: 3px !important;
                }

                /* 3. FIX STATO ATTIVO: Evidenzia la sottovoce corrente (es. Classiche) in asse con il Breadcrumb */
                .shop-filters .list-unstyled .list-unstyled > li > a[href*="categoryId=110"],
                .shop-filters .list-unstyled .list-unstyled > li.active > a,
                .shop-filters .list-unstyled .list-unstyled > li > a.current {
                    color: var(--vweb-color-secondary) !important;
                    font-weight: 700 !important;
                }


/* ==========================================================================
   VEGAWEB: ICONE CARRELLO CON VARIABILE COLORE ISTITUZIONALE
   ========================================================================== */

/* 1. Icona Conferma/Aggiorna (La spunta) - Usando la variabile colore del brand */
button.button-update-cart i.icon-check {
    color: var(--vweb-text-main) !important; /* Richiama la variabile grigia del menu */
    font-size: 1.2em !important; /* Dimensione intermedia bilanciata */
    display: inline-block !important;
}

/* 2. Icona Elimina (La croce) - Uniformata con la stessa variabile */
button.cart-detail-delete i.icon-delete {
    color: var(--vweb-text-main) !important; /* Stessa identica variabile per pulizia visiva */
    font-size: 1.2em !important; /* Speculare alla spunta */
    display: inline-block !important;
}

/* 3. Mantenimento stile trasparente originale (Niente rollover) */
button.button-update-cart:hover,
button.button-update-cart:focus,
button.cart-detail-delete:hover,
button.cart-detail-delete:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}


/* ==========================================================================
   VEGAWEB: WIDGET CONTESTUALE PUNTO VENDITA IN SIDEBAR (RIFINITURA FINE)
   ========================================================================== */
.vweb-salepoint-sidebar-card {
    background-color: var(--vweb-bg-surface) !important;
    border: 1px solid var(--vweb-color-border) !important;
    border-left: 4px solid var(--vweb-color-primary) !important;
    padding: 8px 15px !important;
    margin-bottom: 20px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important; /* FIX: Allinea verticalmente icona e testo al centro */
    justify-content: flex-start !important;
    gap: 12px !important;
}

    .vweb-salepoint-sidebar-card i {
        color: var(--vweb-color-primary) !important;
        font-size: 18px !important; /* FIX: Iconcina leggermente più grande e visibile */
        display: inline-block !important;
        line-height: 1 !important;
    }

    /* Stila il testo incrementando la leggibilità */
    .vweb-salepoint-sidebar-card span,
    .vweb-salepoint-sidebar-card span * {
        font-family: 'Lato', sans-serif !important;
        font-size: 16px !important; /* FIX: Font ingrandito per renderlo più leggibile */
        color: var(--vweb-text-muted) !important;
        font-weight: bold !important;
        line-height: 1.2 !important; /* Bilancia l'altezza del testo rispetto all'icona */
    }

/* --------------------------------------------------------------------------
   BILANCIAMENTO MENU CENTRALE NEL CARRELLO (FIX FLUIDO)
   -------------------------------------------------------------------------- */
/* Quando la cella dei bottoni viene esclusa nel carrello, bilanciamo lo spazio */
header:not(:has(.vweb-actions-cell)) #vwebNavCell {
    /* Simuliamo l'ingombro elastico della colonna mancante per mantenere il centro */
    margin-right: clamp(20px, 15vw, 250px) !important;
    padding-left: 0 !important;
}

@media (min-width: 992px) {
    header:not(:has(.vweb-actions-cell)) #vwebNavCell {
    /* Repulsione magnetica di sicurezza: il menu non toccherà MAI il logo */
        margin-left: clamp(0px, 4vw, 50px) !important;
    }
}

/* ==========================================================================
   VEGAWEB: CONFIGURAZIONE GLOBALE BREADCRUMB UNIFICATO A SINISTRA
   ========================================================================== */
.breadcrumb {
    width: 100% !important;
    max-width: 1170px !important;
    margin: 20px auto 10px auto !important; /* Spazio dal top bilanciato per tutto il sito */
    padding: 5px 15px !important;
    background: none !important;
    text-align: left !important; /* UNIFORMATO: Sempre a sinistra ovunque */
    display: block !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
}

    /* Stile del testo e della pagina corrente (non cliccabile) */
    .breadcrumb > li,
    .breadcrumb > li.active,
    .breadcrumb > li label {
        font-size: 13px !important;
        color: var(--vweb-color-primary) !important;
        font-family: 'Lato', sans-serif !important;
        font-weight: bold !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

        /* Colore dei link cliccabili (Home > Categoria...) */
        .breadcrumb > li a {
            color: var(--vweb-color-primary) !important;
            text-decoration: none !important;
            font-weight: 500 !important;
            transition: color 0.2s ease !important;
        }

            /* Effetto Hover sui link del percorso: vira al blu scuro ufficiale */
            .breadcrumb > li a:hover {
                color: var(--vweb-color-secondary) !important;
                text-decoration: underline !important; /* Sottolineatura elegante al passaggio mouse */
            }

        /* Colore del separatore (la barra "/" o il carattere ">" tra le voci) */
        .breadcrumb > li + li:before {
            color: var(--vweb-color-primary) !important;
            padding: 0 4px !important;
        }

/* Ottimizzazione Mobile per schermi sotto i 768px */
@media only screen and (max-width: 768px) {
    .breadcrumb {
        text-align: center !important; /* Centra il percorso solo su smartphone per via dello spazio ridotto */
        margin-top: 15px !important;
    }
}

/* ==========================================================================
   VEGAWEB: CARRELLO + TOTALI in CartDetail.cshtml
   ========================================================================== */

/* GESTIONE MACRO-COLONNE (Prodotti + Sidebar Totali) */
@media (min-width: 768px) {
    .vweb-cart-wrapper-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        width: 100% !important;
    }

        .vweb-cart-wrapper-row > .col-lg-8.col-md-8 {
            flex: 0 0 66.666667% !important;
            max-width: 66.666667% !important;
            padding-right: 40px !important; /* Stacco tra i prodotti e la sidebar */
            box-sizing: border-box !important;
        }

        .vweb-cart-wrapper-row > .col-lg-4.col-md-4 {
            flex: 0 0 33.333333% !important;
            max-width: 33.333333% !important;
            box-sizing: border-box !important;
        }
}

/* ------------------------------------------------------------------------- 
   1. FORMATTAZIONE DELLA SINGOLA RIGA PRODOTTO 
   ------------------------------------------------------------------------- */

/* La riga prodotto: Su Desktop tutto in linea, su Mobile a cascata */
.vweb-cart-row {
    display: flex !important;
    align-items: flex-start !important; /* FIX ICONA: Ancora l'immagine in alto allineata al titolo */
    justify-content: flex-start !important;
    padding: 20px 0 !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
}

/* 1. IMMAGINE (Fissa) */
.vweb-cart-image {
    width: 80px !important;
    flex: 0 0 80px !important;
    margin-top: 3px !important;
}

    .vweb-cart-image img {
        width: 100%;
        height: auto;
    }

/* ------------------------------------------------------------------------- 
   2. INFORMAZIONI (Titolo, Badge, UDM) - DESKTOP 
   ------------------------------------------------------------------------- */
.vweb-cart-info {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important; /* Colonna 1: Testi (flessibile) | Colonna 2: Controlli (bloccata a dx) */
    grid-template-rows: auto auto auto !important; /* Righe per Titolo, UDM e Badges */
    column-gap: 20px !important;
    text-align: left !important;
}

/* Testi bloccati nella Colonna Sinistra */
.vweb-cart-title {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    font-size: 15px;
    font-weight: bold;
    color: var(--vweb-text-main) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.vweb-cart-uom {
    grid-column: 1 / 2 !important;
    grid-row: 2 / 3 !important;
    font-size: 13px;
    color: var(--vweb-text-main);
    font-weight: 600;
    margin-top: 5px !important;
}

.vweb-cart-badges {
    grid-column: 1 / 2 !important;
    grid-row: 3 / 4 !important;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px !important;
}

.vweb-badge {
    font-size: 11px;
    background-color: var(--vweb-bg-scrollbar-track);
    padding: 3px 8px;
    border-radius: 3px;
    color: var(--vweb-text-secondary);
    white-space: nowrap !important;
}

/* -------------------------------------------------------------------------
   3. CONTROLLI INCOLONNATI A DESTRA CartDetail.cshtml (+/-, Prezzo, Cestino)
   ------------------------------------------------------------------------- */
.vweb-cart-controls-wrapper {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 4 !important; /* Occupano tutta l'altezza dello spazio per potersi centrare */
    align-self: center !important; /* Centratura verticale perfetta rispetto ai testi a fianco */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 25px !important;
    margin: 0 !important;
}

/* Il contenitore non ha più bordi propri, fa solo da impalcatura */
.vweb-cart-qty {
    display: flex !important;
    align-items: center !important;
    border: none !important; /* RIMOSSO: il bordo esterno che univa tutto */
    border-radius: 0 !important;
    overflow: visible !important; /* RIMOSSO: l'overflow hidden */
    height: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

    /* 1. Stile dei bottoni <button> (Identici ai tag <a> della vetrina) */
    .vweb-cart-qty button.incr-btn-style {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 34px !important;
        padding: 0 !important;
        background-color: var(--vweb-bg-interaction) !important; /* Sfondo grigio */
        border: 1px solid var(--vweb-border-box-light) !important; /* Bordo completo individuale */
        color: var(--vweb-text-secondary) !important;
        font-weight: bold !important;
        font-size: 16px !important;
        cursor: pointer !important;
        transition: background 0.2s !important;
        border-radius: 0 !important; /* Nessun arrotondamento, perfettamente squadrati */
    }

        /* Hover dei bottoni */
        .vweb-cart-qty button.incr-btn-style:hover {
            background-color: var(--vweb-bg-cancel-hover) !important;
            color: var(--vweb-text-muted) !important;
        }

    /* Sovrascriviamo le vecchie regole dei divisori che rompevano il layout */
    .vweb-cart-qty button.button-dec-update-cart,
        .vweb-cart-qty button.button-inc-update-cart {
        border-right: 1px solid var(--vweb-border-box-light) !important;
        border-left: 1px solid var(--vweb-border-box-light) !important;
        }

    /* 2. Stile dell'Input centrale */
    .vweb-cart-qty input.vweb-qty-input {
        margin: 0 4px !important; /* CHIRURGICO: Ricrea lo spazietto bianco tra input e bottoni */
    text-align: center !important;
        width: 50px !important;
        height: 34px !important; /* Stessa identica altezza dei bottoni */
        border: 1px solid var(--vweb-border-box-light) !important; /* Bordo individuale */
        background-color: var(--vweb-bg-body) !important;
    padding: 0 !important;
        border-radius: 0 !important;
    box-shadow: none !important;
}

/* Prezzo e Cestino (Accoppiati vicini) */
.vweb-cart-price-action {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    justify-content: flex-end !important;
    flex: 0 0 108px !important; /* Blocca lo spazio per allineare a piombo le virgole e gli Euro */
}

.vweb-cart-price {
    font-weight: bold;
    font-size: 16px;
    color: var(--vweb-text-muted);
    white-space: nowrap !important;
    text-align: right !important;
    flex: 1 !important;
}

.vweb-cart-delete {
    background: transparent !important;
    border: none !important;
    color: var(--vweb-text-secondary) !important;
    font-size: 20px !important;
    cursor: pointer !important;
    padding: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease-in-out !important;
}

    .vweb-cart-delete:hover {
        color: var(--vweb-color-primary) !important;
        transform: scale(1.15) !important;
    }

/* ---------------------------------------------------
   MOBILE relativa a CARRELLO + TOTALI in CartDetail.cshtml
   --------------------------------------------------- */
@media (max-width: 767px) {
    .vweb-cart-wrapper-row {
        display: block !important;
    }

        .vweb-cart-wrapper-row > .col-lg-8.col-md-8 {
            padding-right: 0 !important;
            width: 100% !important;
        }

        .vweb-cart-wrapper-row > .col-lg-4.col-md-4 {
            width: 100% !important;
            margin-top: 30px !important;
        }

    .vweb-cart-row {
        flex-wrap: wrap !important;
        gap: 15px !important;
        padding: 20px 15px !important; /* Stacca foto e cestino dai bordi dello schermo */
    }

    .vweb-cart-image {
        width: 70px !important;
        flex: 0 0 70px !important;
    }

    /* Su Mobile sganciamo la griglia rigida e torniamo in cascata naturale */
    .vweb-cart-info {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 calc(100% - 90px) !important;
    }

    .vweb-cart-title, .vweb-cart-uom, .vweb-cart-badges {
        grid-column: auto !important;
        grid-row: auto !important;
        margin-top: 0 !important;
    }

    .vweb-cart-badges {
        margin-top: 5px !important;
    }

    /* Controlli ancorati sulla riga in basso: Quantità a sx, Prezzo a dx */
    .vweb-cart-controls-wrapper {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        margin-top: 15px !important;
        padding-top: 15px !important;
        border-top: 1px dashed var(--vweb-border-box-light) !important;
        justify-content: space-between !important;
    }

    .vweb-cart-qty {
        margin: 0 !important;
    }

    .vweb-cart-price-action {
        flex: 0 0 auto !important;
    }
}

/* ==========================================================================
   VEGAWEB: STILI DELLA MODALE DI ALERT PERSONALIZZATA
   ========================================================================== */
.vweb-alert-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.55) !important;
    z-index: 999999 !important;
    display: flex !important;
    /* MODIFICHE PER LO SPOSTAMENTO IN ALTO: */
    align-items: flex-start !important; /* Invece di 'center', allinea tutto verso l'alto */
    padding-top: 15vh !important; /* Spinge la modale in basso del 15% dell'altezza dello schermo */

    justify-content: center !important;
    font-family: 'Lato', sans-serif !important;
    backdrop-filter: blur(2px) !important;
}

.vweb-alert-modal {
    background: var(--vweb-bg-body) !important;
    padding: 30px !important;
    border-radius: 12px !important;
    max-width: 420px !important;
    width: 90% !important;
    text-align: center !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25) !important;
    animation: vwebPopIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.vweb-alert-icon {
    width: 50px !important;
    height: 50px !important;
    border: 3px solid var(--vweb-color-primary) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 15px auto !important;
    color: var(--vweb-color-primary) !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

.vweb-alert-message {
    font-size: 15px !important;
    color: var(--vweb-text-muted) !important;
    margin-bottom: 25px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}

.vweb-alert-btn {
    background-color: var(--vweb-color-primary) !important;
    color: var(--vweb-bg-body) !important;
    border: none !important;
    padding: 10px 35px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    min-width: 110px !important;
    box-shadow: 0 4px 10px rgba(255,107,0,0.25) !important;
    outline: none !important;
}

    .vweb-alert-btn:hover {
        background-color: var(--vweb-color-secondary) !important;
        box-shadow: 0 4px 10px rgba(26,48,80,0.25) !important;
    }

/* Bottone Annulla specifico per le domande di conferma */
.vweb-btn-cancel {
    background-color: var(--vweb-bg-scrollbar-track) !important;
    color: var(--vweb-text-secondary) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

    .vweb-btn-cancel:hover {
        background-color: var(--vweb-bg-cancel-hover) !important;
        color: var(--vweb-text-muted) !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    }

/* L'animazione adesso è al sicuro nel file CSS */
@keyframes vwebPopIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   FIX OVERLAY GLOBALE: MODALI IN PRIMO PIANO SU HEADER STICKY
   ========================================================================== */

/* 1. Eleva lo sfondo scuro (Backdrop) sopra l'header (che è a 1050) */
.modal-backdrop,
.modal-backdrop.in,
.modal-backdrop.show {
    z-index: 1060 !important;
}

/* 2. Eleva la finestra modale vera e propria sopra il suo sfondo scuro */
.modal,
.vweb-modal,
.vweb-alert-overlay {
    z-index: 1070 !important;
}

/* ==========================================================================
   VEGAWEB: SMART BANNER & MODALE COOKIE POLICY
   ========================================================================== */

.vweb-cookie-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999995 !important;
    background-color: color-mix(in srgb, var(--vweb-color-secondary) 40%, transparent) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    opacity: 0;
    animation: vwebCookieFadeIn 0.3s ease forwards !important;
}

.vweb-cookie-card {
    background: var(--vweb-bg-body) !important;
    width: 100% !important;
    max-width: 800px !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
    padding: 30px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    transform: scale(0.95);
    animation: vwebCookiePopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

.vweb-cookie-title {
    color: var(--vweb-color-secondary) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 0 0 15px 0 !important;
    text-align: center !important;
    border-bottom: 1px solid var(--vweb-border-subtle) !important;
    padding-bottom: 15px !important;
}

.vweb-cookie-text-container {
    background: var(--vweb-bg-surface) !important;
    border: 1px solid var(--vweb-border-box-light) !important;
    border-radius: 6px !important;
    padding: 20px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    color: var(--vweb-text-main) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
}

.vweb-cookie-link-bar {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    padding: 15px 0 !important;
    border-top: 1px solid var(--vweb-border-subtle) !important;
    border-bottom: 1px solid var(--vweb-border-subtle) !important;
    margin-bottom: 10px !important;
}

    .vweb-cookie-link-bar a {
        color: var(--vweb-color-secondary) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
    }

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

/* Stili specifici per i box a comparsa interni (Tabs e Categorie) */
.vweb-cookie-box {
    background: var(--vweb-bg-body) !important;
    border: 1px solid var(--vweb-border-box-light) !important;
    border-radius: 6px !important;
    padding: 15px !important;
    margin-bottom: 10px !important;
    transition: border-color 0.2s ease !important;
}

    .vweb-cookie-box:hover {
        border-color: var(--vweb-border-light) !important;
    }

.vweb-cookie-collapse-btn {
    width: 100% !important;
    background: none !important;
    border: none !important;
    text-align: left !important;
    padding: 0 !important;
    outline: none !important;
}

.vweb-cookie-actions {
    display: flex !important;
    gap: 15px !important;
    justify-content: center !important;
    margin-top: 10px !important;
}

/* Scrollbar stilizzata per i box di testo */
.vweb-cookie-text-container::-webkit-scrollbar {
    width: 6px;
}

.vweb-cookie-text-container::-webkit-scrollbar-track {
    background: var(--vweb-bg-scrollbar-track);
    border-radius: 10px;
}

.vweb-cookie-text-container::-webkit-scrollbar-thumb {
    background: var(--vweb-border-light);
    border-radius: 10px;
}

@keyframes vwebCookieFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes vwebCookiePopIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ==========================================================================
   VEGAWEB: PRIVACY & LEGAL PAGES - LOOK FULL PAGE
   ========================================================================== */

.vweb-legal-fluid-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 40px !important;
    box-sizing: border-box !important;
    background-color: var(--vweb-bg-body) !important;
}

    /* Centratura e respiro del titolo principale */
    .vweb-legal-fluid-container h3.cs-heading {
        color: var(--vweb-color-secondary) !important;
        font-size: 28px !important;
        margin-bottom: 30px !important;
        letter-spacing: 0.5px !important;
    }

/* Box contenitore del testo dal CRM */
.vweb-legal-content-wrapper {
    background: var(--vweb-bg-body) !important;
    border-radius: 12px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

    /* Override e modernizzazione della Textarea per testi non-HTML */
    .vweb-legal-content-wrapper textarea.form-control,
    .vweb-legal-content-wrapper .privacy-html-text {
        display: block !important;
        width: 100% !important;
        min-height: 70vh !important;
        background-color: var(--vweb-bg-surface) !important; /* Il box beige */
        color: var(--vweb-text-dark-contrast) !important; /* Forza il testo in Nero Pieno */
        border: 1px solid var(--vweb-border-box-light) !important;
        border-radius: 8px !important;
        padding: 25px !important;
        font-size: 15px !important;
        line-height: 1.7 !important;
        resize: none !important;
        outline: none !important;
        overflow-y: auto !important; /* Gestione pulita delle barre di scorrimento */
        box-sizing: border-box !important;
    }

        /* Autofocus e focus soft sulla Textarea */
        .vweb-legal-content-wrapper textarea.form-control:focus {
            border-color: var(--vweb-border-light) !important;
            box-shadow: none !important;
        }

    /* Spaziature per i testi HTML nativi (Garantisce il distacco dai bordi laterali) */
    .vweb-legal-content-wrapper .privacy-html-text {
        display: block !important;
        width: 100% !important;
        min-height: 70vh !important;
        background-color: var(--vweb-bg-surface) !important;
        color: var(--vweb-text-dark-contrast) !important;
        border: 1px solid var(--vweb-border-box-light) !important;
        border-radius: 8px !important;
        padding: 25px 35px !important; /* <--- MODIFICA: 25px sopra/sotto e 35px destra/sinistra per staccare il testo dal bordo */
        font-size: 15px !important;
        line-height: 1.7 !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

        /* Blindiamo i tag interni all'HTML in nero */
        .vweb-legal-content-wrapper .privacy-html-text p,
        .vweb-legal-content-wrapper .privacy-html-text span,
        .vweb-legal-content-wrapper .privacy-html-text li {
            color: var(--vweb-text-dark-contrast) !important;
        }

/* ==========================================================================
   TAB DETTAGLIO PRODOTTO (#singleproductTab)
   ========================================================================== */

/* Contenitore principale delle Tab */
#singleproductTab.nav-tabs {
    border-bottom: 2px solid var(--vweb-border-muted) !important;
    display: flex !important;
    flex-wrap: nowrap !important; /* Impedisce di andare a capo */
    overflow-x: auto !important; /* Abilita lo scroll orizzontale se le tab sono tante */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important; /* Scroll fluido su iOS */
    scrollbar-width: none !important; /* Nasconde la barra di scorrimento su Firefox */
    gap: 5px !important;
    padding-bottom: 0 !important;
    margin-bottom: 25px !important;
}

    /* Nasconde la barra di scorrimento su Chrome/Safari/Edge */
    #singleproductTab.nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    /* Comportamento dei singoli elementi (LI) */
    #singleproductTab.nav-tabs > li {
        float: none !important;
        margin-bottom: -2px !important; /* Tira giù la tab per sovrapporsi al bordo inferiore */
    }

        /* Stile dei Link (Area Cliccabile) */
        #singleproductTab.nav-tabs > li > a {
            display: block !important;
            padding: 12px 20px !important; /* Area di tocco ampia e comoda */
            font-size: 15px !important;
            font-weight: 600 !important;
            color: var(--vweb-text-secondary) !important; /* Grigio elegante per le tab inattive */
            background: transparent !important;
            border: none !important;
            border-bottom: 2px solid transparent !important;
            border-radius: 0 !important;
            white-space: nowrap !important; /* Il testo della tab non va mai a capo */
            transition: all 0.3s ease !important;
        }

            /* Hover sulle tab inattive */
            #singleproductTab.nav-tabs > li > a:hover {
                color: var(--vweb-color-primary) !important;
                background: var(--vweb-bg-interaction) !important;
                border-bottom: 2px solid var(--vweb-border-box-light) !important;
            }

            /* STATO ATTIVO (La tab selezionata) */
            /* Copre sia la sintassi Bootstrap 3 (li.active > a) che Bootstrap 4/5 (a.active) */
            #singleproductTab.nav-tabs > li.active > a,
            #singleproductTab.nav-tabs > li > a.active,
            #singleproductTab.nav-tabs > li.active > a:hover,
            #singleproductTab.nav-tabs > li.active > a:focus {
                color: var(--vweb-color-primary) !important;
                background: transparent !important;
                border: none !important;
                border-bottom: 2px solid var(--vweb-color-primary) !important; /* Sottolineatura marcata */
            }

/* ---------------------------------------------------
   ADATTAMENTO MOBILE
   --------------------------------------------------- */
@media (max-width: 767px) {
    #singleproductTab.nav-tabs > li > a {
        padding: 16px 18px !important; /* Area di tocco ANCORA più grande su smartphone */
        font-size: 16px !important;
    }
}

/* ==========================================================================
   Forza il grassetto su tutti i prezzi del dettaglio prodotto
   ========================================================================== */
[id^="proPrice-"] {
    font-weight: 800 !important; /* Grassetto extra-strong molto marcato */
    font-size: 18px !important; /* Dimensione aumentata rispetto alle scritte piccole */
    color: var(--vweb-color-primary) !important;
    display: inline-block !important;
    margin-top: 6px !important; /* Spazio sopra per staccarlo dal codice prodotto */
    margin-bottom: 4px !important; /* Spazio sotto per staccarlo dalla dicitura "Prezzo per..." */
    transition: transform 0.2s ease !important;
}

/* ==========================================================================
   NOTIFICA DI SUCCESSO: AGGIUNTO AL CARRELLO STYLE
   ========================================================================== */
[id^="checkAddItem-"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: darkgreen !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important; /* Lo rende più professionale e meno "testo buttato lì" */
    letter-spacing: 0.5px !important;
    margin-top: 12px !important; /* Stacca la notifica dalla dicitura "Prezzo per..." */
    margin-bottom: 8px !important; /* Crea spazio armonico sopra il pulsante arancione */
    transition: all 0.2s ease !important;
}

/* ==========================================================================
   PAGINA DETTAGLIO PRODOTTO (Detail.cshtml)
   ========================================================================== */

/* --- 1. RIDUZIONE IMMAGINE (DESKTOP) --- */
@media (min-width: 768px) {
    .catalog-single .prod-gal {
        max-width: 80% !important; /* Rimpicciolisce l'immagine per renderla più elegante */
        margin: 0 auto 30px auto !important;
        border: none !important; /* Rimuove eventuali bordi fastidiosi ereditati */
    }

    .catalog-single .vweb-row {
        margin-bottom: 15px !important; /* Il respiro verticale tra le righe */
        white-space: nowrap !important; /* Impedisce alle colonne di andare a capo per colpa degli spazi */
    }

        /* Trasforma le colonne in elementi di riga allineati al centro perfetto della loro altezza */
        .catalog-single .vweb-row > div[class*="col-md-"] {
            display: inline-block !important;
            float: none !important;
            vertical-align: middle !important;
            white-space: normal !important;
        }

        /* Resetta i margini nativi che creavano i dislivelli visivi */
        .catalog-single .vweb-row h6,
        .catalog-single .vweb-row .price h6,
        .catalog-single .vweb-row .buttons {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }
}
	.catalog-single .prod-gal .ms-view {
		background: none !important;
	}
/* --- 2. RESTYLING QUADROTTI (MIN, MULTIPLI, MAX) - DESKTOP E MOBILE --- */
.catalog-single .promo-labels {
    display: flex !important;
    flex-direction: row !important; /* Forza l'affiancamento orizzontale */
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin-top: 25px !important;
    width: 100% !important; /* Prende tutto lo spazio forzando lo scivolamento in basso */
    clear: both !important; /* Distrugge i float nativi che li bloccavano a destra */
    position: static !important; /* Annulla eventuali posizionamenti assoluti del tema */
    justify-content: flex-start !important; /* Allineati a sinistra su desktop */
}

    .catalog-single .promo-labels > div {
        width: 85px !important;
        height: 85px !important;
        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid var(--vweb-border-box-light) !important;
        border-radius: 8px !important;
        background-color: var(--vweb-bg-body) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
        transition: transform 0.2s ease, border-color 0.2s ease !important;
        float: none !important; /* Annulla l'impilamento verticale errato */
    }

        .catalog-single .promo-labels > div:hover {
            transform: translateY(-2px) !important;
            border-color: var(--vweb-color-primary) !important;
        }

        .catalog-single .promo-labels > div span {
            font-size: 11px !important;
            text-align: center !important;
            line-height: 1.2 !important;
            color: var(--vweb-text-main) !important;
            font-weight: 600 !important;
        }

            .catalog-single .promo-labels > div span i {
                font-size: 22px !important;
                color: var(--vweb-text-main) !important;
                display: block !important;
                margin-bottom: 6px !important;
            }

/* --- 3. FIX BLOCCO QUANTITÀ (+ / -) ANTI-A-CAPO --- */
.catalog-single .qnt-count {
    display: flex !important;
    flex-wrap: nowrap !important; /* Impedisce tassativamente al '+' di andare a capo */
    align-items: center !important;
    width: 142px !important; /* 36px bottone + 70px input + 36px bottone */
    max-width: 100% !important;
}

    .catalog-single .qnt-count .incr-btn-style {
        width: 36px !important;
        flex: 0 0 36px !important; /* Congela la larghezza del bottone */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .catalog-single .qnt-count input {
        width: 70px !important;
        flex: 0 0 70px !important; /* Congela la larghezza dell'input */
        text-align: center !important;
        padding: 0 !important;
    }

/* ---------------------------------------------------
   4. RIVOLUZIONE STRUTTURALE MOBILE (Solo sotto 767px)
   --------------------------------------------------- */
@media (max-width: 767px) {

    /* Disintegra il posizionamento orizzontale forzato delle colonne Bootstrap "xs" */
    .catalog-single .col-xs-4,
    .catalog-single .col-xs-6,
    .catalog-single .col-xs-8,
    .catalog-single .col-xs-9,
    .catalog-single .col-xs-3 {
        width: 100% !important;
        float: none !important; /* Sgancia le colonne per farle impilare verticalmente */
        display: block !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Centratura e dimensionamento immagine prodotto su mobile */
    .catalog-single .prod-gal {
        width: 100% !important;
        max-width: 260px !important; /* Immagine centrata e perfetta per lo smartphone */
        margin: 0 auto 30px auto !important;
        border: none !important;
    }

    /* Centratura dei testi principali per eleganza su mobile */
    .catalog-single .product-title,
    .catalog-single .product-description,
    .catalog-single h2.f-s-0-875em {
        text-align: center !important;
    }

    /* =========================================================================
       1. REGOLA GLOBALE DEL PORTALE 
       Intercetta tutti i tag <h6> che si trovano dentro un contenitore con classe .price.
       Garantisce le spaziature verticali minime e la centratura dei testi su mobile.
       ========================================================================= */
    .catalog-single .price h6 {
        text-align: center !important;
        margin-top: 15px !important;
        margin-bottom: 5px !important;
    }

    .catalog-single .vweb-row {
        margin-bottom: 20px !important; /* Spaziatura ariosità tra i blocchi */
        text-align: center !important;
    }

    /* ---------------------------------------------------------------------
       FIX TOTALE & COSTO: ALLINEAMENTO ORIZZONTALE E VERTICALE PERFETTO
       --------------------------------------------------------------------- */
    .catalog-single .vweb-inline > div {
        display: inline-block !important;
        float: none !important;
        width: auto !important;
        vertical-align: middle !important;
    }

    .catalog-single .vweb-inline .price,
    .catalog-single .vweb-inline .price h6,
    .catalog-single .vweb-inline h6,
    .catalog-single .vweb-inline .my-price-style {
        display: inline-block !important;
        margin-top: 0 !important; /* Azzera il push di 15px del tema */
        margin-bottom: 0 !important;
        margin-left: 6px !important;
        margin-right: 6px !important;
        line-height: 1.2 !important; /* Pareggia l'altezza di riga dei font */
        vertical-align: middle !important; /* Forza i testi sulla stessa linea geometrica */
    }

    /* ---------------------------------------------------------------------
       FIX QUANTITÀ & UNITÀ DI MISURA: CENTRATURA E COMPATTEZZA BOTTONI
       --------------------------------------------------------------------- */
    .catalog-single .vweb-stacked > div {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    .catalog-single .vweb-stacked select {
        margin: 0 auto !important;
        display: block !important;
        max-width: 280px !important;
    }

    .catalog-single .vweb-stacked .buttons {
        text-align: center !important;
        display: block !important;
        float: none !important;
    }

    .catalog-single .vweb-stacked .qnt-count {
        display: inline-block !important;
        white-space: nowrap !important; /* Impedisce ai pulsanti + e - di andare a capo */
        margin: 0 auto !important;
        float: none !important;
    }

        .catalog-single .vweb-stacked .qnt-count > * {
            display: inline-block !important;
            float: none !important;
            vertical-align: middle !important;
        }

        .catalog-single .vweb-stacked .qnt-count input {
            margin: 0 4px !important;
            display: inline-block !important;
        }

    /* ========================================================================= */
    .catalog-single .box-add-to-cart {
        display: flex !important;
        justify-content: center !important;
    }

    .catalog-single #totalSpan {
        display: block !important;
        text-align: center !important;
        margin-top: 5px !important;
    }

    /* Allinea centralmente i quadrotti minimi/massimi */
    .catalog-single .promo-labels {
        justify-content: center !important;
    }

    /* Nasconde chirurgicamente il bottone "Indietro" enorme su mobile */
    .catalog-single #goBack {
        display: none !important;
    }
}

/* --- 5. STILE TOTALE (BOLD) --- */
.catalog-single #totalSpan {
    font-weight: 800 !important; /* Grassetto marcato */
    font-size: 18px !important; /* Leggermente più grande per gerarchia visiva */
    color: var(--vweb-text-main) !important; /* Colore istituzionale */
    display: inline-block !important;
}

/* =========================================================================
   STILE UNIVERSALE BOTTONI QUANTITÀ (Vetrina + Dettaglio)
   Agganciato ai Semantic Tokens del portale per una Visual Parity perfetta
   ========================================================================= */

/* Disegna il bottone grigio sia nella Vetrina che nel Dettaglio */
.vweb-index-qty-row .qnt-count a.incr-btn-style,
.catalog-single .qnt-count a.incr-btn-style {
    display: inline-block !important;
    width: 32px !important;
    height: 34px !important;
    line-height: 32px !important; /* Centra il + e il - in verticale */
    background-color: var(--vweb-bg-interaction) !important;
    border: 1px solid var(--vweb-border-box-light) !important;
    color: var(--vweb-text-secondary) !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 16px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    vertical-align: middle !important;
}

    /* Effetto hover universale usando i colori semantici */
    .vweb-index-qty-row .qnt-count a.incr-btn-style:hover,
    .catalog-single .qnt-count a.incr-btn-style:hover {
        background-color: var(--vweb-bg-cancel-hover) !important;
        color: var(--vweb-text-muted) !important;
    }

/* Uniforma l'input di testo tra i bottoni in entrambe le viste */
.vweb-index-qty-row .qnt-count input,
.catalog-single .qnt-count input {
    margin: 0 4px !important;
    text-align: center !important;
    display: inline-block !important;
    height: 34px !important;
    border: 1px solid var(--vweb-border-box-light) !important;
    vertical-align: middle !important;
    box-shadow: none !important; /* Rimuove ombre interne di default */
}

/* ==========================================================================
   PAGINA CONFERMA ORDINE (Step2.cshtml)  
   ========================================================================== */

/* --- 1. RIVOLUZIONE FLUSSO RESPONSIVE (MOBILE IN RE-ORDER) --- */
@media (max-width: 991px) {
    /* Trasforma il form in un flex container verticale per riallineare le colonne */
    .checkout .cart-sidebar {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

        /* Reset totale della mezza colonna sinistra per portarla a larghezza piena */
        .checkout .cart-sidebar > div.col-xs-6 {
            width: 100% !important;
            float: none !important;
            padding: 0 15px !important;
        }

        /* Reset della colonna destra (Sidebar Totali) a larghezza piena in coda */
        .checkout .cart-sidebar > div.col-lg-6 {
            width: 100% !important;
            float: none !important;
            padding: 0 15px !important;
            margin-top: 15px !important;
        }
}

/* --- 2. OTTIMIZZAZIONE TOUCH-TARGETS E INPUT FORM --- */
@media (max-width: 767px) {
    /* Rende i campi di input, selezioni e textarea pienamente touch-friendly */
    .checkout .form-control,
    .checkout .select-style select {
        height: 48px !important; /* Dimensione minima raccomandata per il tocco */
        font-size: 16px !important; /* Impedisce lo zoom automatico forzato su iOS */
    }

    .checkout textarea.form-control {
        height: auto !important;
        padding: 12px !important;
    }

    /* Ottimizzazione titoli di sezione per mobile */
    .checkout h3 {
        font-size: 20px !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
        text-align: left !important;
    }
}

/* --- 3. BONIFICA BADGE SCONTI ED ELEMENTI IN CRASH DI SPAZIO --- */
.checkout .discount-label {
    display: block !important;
    width: 100% !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
    margin-bottom: 10px !important;
    white-space: normal !important; /* Forza il testo a capo in modo pulito senza stringersi */
    box-sizing: border-box !important;
}

/* --- 4. ALLINEAMENTO TABELLA TOTALI E BOTTONI DI CONFERMA --- */
@media (max-width: 991px) {
    /* Espande la tabella dei totali per una lettura chiara e ordinata */
    .checkout table {
        width: 100% !important;
        margin-bottom: 25px !important;
    }

        .checkout table td,
        .checkout table th {
            padding: 12px 8px !important;
            font-size: 15px !important;
        }

    /* Trasforma i pulsanti di azione in blocchi imponenti e facili da cliccare */
    .checkout .btn-block {
        height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        margin-bottom: 15px !important;
        border-radius: 6px !important;
    }
}

/* ==========================================================================
   PAGINA ELENCO ORDINI E CONSEGNE (OrderList.cshtml)
   ========================================================================== */

/* --- 1. ALLINEAMENTO SIMMETRICO FILTRI (VISUALIZZAZIONE DESKTOP) --- */
/* --- 1. GEOMETRIA FILTRI SIMMETRICA ROW-ALIGN (VISUALIZZAZIONE DESKTOP) --- */
@media (min-width: 992px) {
    /* Trasforma la tabella filtri in un blocco fluido per controllare i pesi */
    .cat-tiles #singleproductTabContent table:first-of-type,
    .cat-tiles #singleproductTabContent form table {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }

    .cat-tiles #singleproductTabContent thead,
    .cat-tiles #singleproductTabContent tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Costringe le righe ad un allineamento orizzontale flessibile perfetto */
    .cat-tiles #singleproductTabContent tr {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    /* Forza l'uguaglianza geometrica al millimetro tra colonne header e colonne input */
    .cat-tiles #singleproductTabContent th,
    .cat-tiles #singleproductTabContent td {
        display: block !important;
        border: none !important;
        padding: 0 10px !important;
    }

        /* Assegnazione pesi protetti: 35% a sinistra, 35% al centro, 30% all'asse bottoni */
        .cat-tiles #singleproductTabContent th:nth-of-type(1),
        .cat-tiles #singleproductTabContent td:nth-of-type(1) {
            width: 35% !important;
        }

        .cat-tiles #singleproductTabContent th:nth-of-type(2),
        .cat-tiles #singleproductTabContent td:nth-of-type(2) {
            width: 35% !important;
        }

        .cat-tiles #singleproductTabContent th:last-of-type,
        .cat-tiles #singleproductTabContent td:last-of-type {
            width: 30% !important;
        }

        /* Affianca ordinatamente i pulsanti CERCA e RESET nell'ultima colonna */
        .cat-tiles #singleproductTabContent td:last-of-type {
            display: flex !important;
            gap: 12px !important;
            justify-content: flex-start !important;
            align-items: center !important;
        }

            .cat-tiles #singleproductTabContent td:last-of-type .btn {
                width: auto !important;
                flex: 1 !important;
                max-width: 120px !important;
            }
}

/* --- 2. INCOLONNAMENTO FILTRI E BOTTONI CERCA/RESET (VISUALIZZAZIONE MOBILE) --- */
@media (max-width: 991px) {
    /* Griglia a colonna singola per i campi di ricerca */
    .cat-tiles #singleproductTabContent form table {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .cat-tiles #singleproductTabContent form thead,
    .cat-tiles #singleproductTabContent form tbody,
    .cat-tiles #singleproductTabContent form tr {
        display: contents !important;
    }

    .cat-tiles #singleproductTabContent form th:nth-of-type(1) {
        grid-row: 1 !important;
        text-align: left !important;
        padding-top: 10px !important;
    }

    .cat-tiles #singleproductTabContent form td:nth-of-type(1) {
        grid-row: 2 !important;
        margin-bottom: 12px !important;
    }

    .cat-tiles #singleproductTabContent form th:nth-of-type(2) {
        grid-row: 3 !important;
        text-align: left !important;
    }

    .cat-tiles #singleproductTabContent form td:nth-of-type(2) {
        grid-row: 4 !important;
        margin-bottom: 16px !important;
    }

    .cat-tiles #singleproductTabContent form th:last-of-type {
        display: none !important;
    }

    /* Contenitore Cerca/Reset: Incolonnati al centro senza effetto "scala" */
    .cat-tiles #singleproductTabContent form td:last-of-type {
        grid-row: 5 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 15px 0 35px 0 !important;
        padding: 0 !important;
    }

        .cat-tiles #singleproductTabContent form td:last-of-type .btn {
            display: block !important;
            width: 100% !important;
            max-width: 280px !important;
            height: 44px !important;
            margin: 0 !important;
        }
}

/* --- 3. ALLINEAMENTO STRUTTURALE RIGIDO DEI DATI (VISUALIZZAZIONE MOBILE) --- */
@media (max-width: 991px) {

    /* Regola generale per tutte le righe standard (Tab 1 e Tab 2) */
    .cat-tiles .media-link .row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* BLINDAGGIO: Impedisce ai valori singoli di finire sotto la label */
        justify-content: flex-start !important;
        align-items: flex-start !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 6px 0 !important;
    }

        /* Isola visivamente la riga che contiene il pulsante Dettaglio */
        .cat-tiles .media-link .row.p-l-15 {
            display: block !important;
            padding: 15px 0 25px 0 !important;
        }

        /* Label di sinistra: Intestazioni fisse e incolonnate a piombo */
        .cat-tiles .media-link .row:not(.p-l-15) > label:first-child {
            flex: 0 0 145px !important; /* Spazio protetto per contenere anche "Codice contratto:" */
            max-width: 145px !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            color: var(--vweb-text-main) !important;
            text-align: left !important;
            margin: 0 !important;
            padding: 0 10px 0 0 !important;
        }

        /* Label di destra: Valori standard (Codici, Punti Vendita, Stati) */
        .cat-tiles .media-link .row:not(.p-l-15) > label:last-child {
            flex: 1 !important;
            font-size: 14px !important;
            color: var(--vweb-text-muted) !important;
            text-align: left !important;
            margin: 0 !important;
            padding: 0 !important;
            word-break: break-word !important;
        }
}

/* --- 4. CALIBRAZIONE CHIRURGICA BOTTONI INTERNI E FONDO PAGINA (MOBILE) --- */
@media (max-width: 991px) {

    /* Contenitore interno della scheda ordine (Dettaglio + eventuale PDF) */
    .cat-tiles .media-link .row.p-l-15 > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Allineati a sinistra */
        width: 100% !important;
    }

    /* DETTAGLIO ORDINE (Target esatto della Label mascherata da bottone nel DOM) */
    .cat-tiles .media-link .label-as-btn-style {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 240px !important; /* Dimensione aumentata e confortevole per il touch */
        height: 44px !important;
        padding: 0 20px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        background-color: var(--vweb-color-primary) !important;
        color: var(--vweb-bg-body) !important;
        border-radius: 4px !important;
        margin: 0 0 10px 0 !important;
        cursor: pointer !important;
    }

    /* Pulsante Download PDF (Ripulito dagli inline style) */
    .cat-tiles .media-link .download-pdf {
        display: inline-flex !important;
        padding: 0 !important;
        font-size: 14px !important;
        text-decoration: underline !important;
        color: var(--vweb-text-main) !important;
        background: transparent !important;
        border: none !important;
        text-transform: none !important;
    }

    /* BOTTONE INDIETRO A FONDO PAGINA (Centratura Assoluta Indipendente) */
    /* Target esatto del div allineato al centro generato dall'HTML */
    .cat-tiles .row.p-b-15 div[align="center"] {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 30px !important;
        margin-bottom: 20px !important;
    }

        /* Neutralizzazione offset Bootstrap e applicazione standard pulsanti */
        .cat-tiles .row.p-b-15 div[align="center"] .btn-black,
        .cat-tiles .row.p-b-15 div[align="center"] button {
            display: block !important;
            width: 100% !important;
            max-width: 280px !important; /* Standard site checkout */
            height: 44px !important;
            margin: 0 !important; /* Cancella col-md-offset-5 */
            font-size: 14px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            background-color: var(--vweb-color-primary) !important;
            color: var(--vweb-bg-body) !important;
            border-radius: 4px !important;
            border: none !important;
            float: none !important;
        }
}
                
   
/* ==========================================================================
   PAGINA DETTAGLIO ORDINE (OrderDetail.cshtml)  
   ========================================================================== */
/* --- 1. PRESERVAZIONE STRUTTURA DESKTOP (TABULAR ALIGNMENT) --- */
@media (max-width: 991px) {
    /* Abilita lo scorrimento orizzontale pulito per preservare l'allineamento desktop */
    .delivery .panel-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px !important;
        width: 100% !important;
    }

    /* Blocca la larghezza minima della tabella per evitare il collasso delle colonne */
    .delivery-details {
        width: 100% !important;
        min-width: 680px !important; /* Forza l'infrastruttura a rimanere in linea */
        border-collapse: collapse !important;
    }
}

/* --- 2. RIMOZIONE RIGHE E OTTIMIZZAZIONE FONT --- */
@media (max-width: 991px) {
    /* Elimina chirurgicamente ogni riga divisoria orizzontale o verticale tra i dati */
    .delivery-details,
    .delivery-details tr,
    .delivery-details td,
    .delivery-details th {
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        background: transparent !important;
        text-align: left !important; /* Allineamento lineare a piombo */
        padding: 6px 12px !important;
    }

        /* Calibrazione del font leggermente più piccolo del desktop per massimizzare la pulizia */
        .delivery-details td,
        .delivery-details span,
        .delivery-details div {
            font-size: 13px !important;
            color: var(--vweb-text-main) !important;
            white-space: nowrap !important; /* Impedisce testi a capo disordinati */
        }

        .delivery-details .details-heading,
        .delivery-details .orer-heading {
            font-size: 13px !important;
            font-weight: 700 !important;
            color: var(--vweb-color-secondary) !important;
        }
}

/* --- 3. FIX CRITICI BOTTONI AZIONE E CENTRATURA --- */
@media (max-width: 767px) {
    /* Incolonna i pulsanti di azione al centro del viewport mobile */
    .delivery .form-group.block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        float: none !important;
        margin-top: 30px !important;
    }

        /* Forza il testo in bianco e calibra l'area touch target dei bottoni */
        .delivery .form-group.block .btn {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            max-width: 280px !important; /* Dimensione controllata e simmetrica */
            height: 45px !important;
            margin: 0 auto !important; /* Centratura matematica perfetta del bottone Indietro e dei primari */
            float: none !important;
            color: var(--vweb-bg-body) !important; /* Ripristina la scritta in bianco pieno */
            font-size: 13px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            border-radius: 4px !important;
            box-sizing: border-box !important;
        }
}

/* --- 4. INDICATORE VISIVO DI SCORRIMENTO (USABILITÀ MOBILE) --- */
@media (max-width: 991px) {
    /* Crea un'ombra sfumata a destra del contenitore per suggerire lo scroll */
    .delivery .panel-body {
        background: linear-gradient(to right, white 30%, rgba(255,255,255,0)), linear-gradient(to right, rgba(255,255,255,0), white 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.1), rgba(0,0,0,0)), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.1), rgba(0,0,0,0)) 100% 0 !important;
        background-repeat: no-repeat !important;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100% !important;
        background-attachment: local, local, scroll, scroll !important;
    }
}

/* ==========================================================================
   PAGINA DETTAGLIO CONSEGNA PERIODICA (PeriodicDeliveryDetail.cshtml)  
   ========================================================================== */

/* --- 1. OTTIMIZZAZIONE E CENTRATURA BOTTONI AZIONE (MOBILE) --- */
@media (max-width: 767px) {
    /* Isola il contenitore dei bottoni eliminando i padding asimmetrici nativi */
    .delivery .row.p-t-25.p-l-30 {
        display: flex !important;
        flex-direction: column !important; /* Incolonna i pulsanti al centro */
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important; /* Spaziatura verticale standard touch-friendly */
        width: 100% !important;
        padding-left: 15px !important; /* Reset e bilanciamento dei margini dello schermo */
        padding-right: 15px !important;
        margin: 30px auto 10px auto !important;
        float: none !important;
        clear: both !important;
    }

        /* Calibrazione estetica dei pulsanti per mantenere l'uniformità di sistema */
        .delivery .row.p-t-25.p-l-30 .btn {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            max-width: 280px !important; /* Dimensione controllata e simmetrica ereditata */
            height: 45px !important;
            margin: 0 auto !important; /* Centratura esatta */
            float: none !important;
            color: var(--vweb-bg-body) !important; /* Forza la scritta in bianco pieno */
            font-size: 13px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            border-radius: 4px !important;
            box-sizing: border-box !important;
            border: none !important;
        }
}

/* ==========================================================================
   PAGINA DATI CLIENTE (ClientData.cshtml, BillingData.cshtml)  
   ========================================================================== */

/* --- 1. RIALLINEAMENTO ETICHETTE FORM A SINISTRA (SOLO MOBILE) --- */
@media (max-width: 767px) {
    /* Intercetta i gruppi di input anagrafici e forza l'allineamento a sinistra */
    .cat-tiles form .form-group.block1,
    .cat-tiles form .form-group.block1 label {
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        margin-bottom: 6px !important; /* Margine di sicurezza per staccare la label dall'input */
        padding-left: 2px !important;
    }

    /* Ottimizzazione del titolo principale della pagina anagrafica */
    .cat-tiles h3.cs-heading {
        font-size: 22px !important;
        text-align: center !important; /* Preserva la centratura istituzionale del titolo */
        margin-bottom: 25px !important;
    }
}

/* ==========================================================================
   PAGINA MODIFICA PUNTO VENDITA / PASSWORD (EditSalePoint.cshtml)  
   ========================================================================== */

/* --- 1. DISINTEGRAZIONE GRIGLIA XS E RIALLINEAMENTO ETICHETTE --- */
@media (max-width: 767px) {
    /* Sgancia le quattro colonne bloccate al 25% e le porta a larghezza piena */
    .cat-tiles form .col-xs-3,
    .cat-tiles form .col-xs-6 {
        width: 100% !important;
        float: none !important;
        display: block !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-bottom: 5px !important;
    }

    /* Forza l'allineamento ordinato a sinistra delle label sopra il rispettivo campo */
    .cat-tiles form .form-group.block1,
    .cat-tiles form .form-group.block1 label {
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        font-size: 15px !important; /* Dimensione font incrementata e ottimizzata su specifica */
        line-height: 1.5 !important;
        margin-bottom: 6px !important;
    }

    /* Ottimizzazione degli spazi per i testi descrittivi di testata form */
    .cat-tiles form .form-group.m-b-10,
    .cat-tiles form .form-group.m-b-10 label {
        text-align: left !important;
        font-size: 14px !important;
        padding-left: 15px !important;
    }
}

/* --- 2. PRESERVAZIONE INTEGRALE FILOSOFIA BOTTONI DESKTOP --- */
@media (max-width: 767px) {
    /* Ripristina l'assetto e l'allineamento nativo dei bottoni senza modificarne lo stile */
    .cat-tiles form .form-group.block {
        display: flex !important;
        flex-direction: row !important; /* Impedisce l'incolonnamento forzato, mantiene l'affiancamento desktop */
        justify-content: center !important; /* Centra il gruppo dei bottoni nella pagina */
        gap: 15px !important;
        width: 100% !important;
        margin-top: 25px !important;
        padding: 0 15px !important;
    }

        /* Annulla la compressione al 33% (col-xs-4) ereditata per i pulsanti */
        .cat-tiles form .form-group.block .btn {
            display: inline-block !important;
            width: auto !important; /* Ritorna alla larghezza naturale desktop */
            height: auto !important;
            padding: 12px 35px !important; /* Spessore originale standardizzato */
            font-size: 13px !important;
            float: none !important;
            border-radius: 4px !important;
        }
}

/* ==========================================================================
   PAGINA SELEZIONE MACCHINETTE / PUNTI VENDITA (SalesPoints.cshtml)  
   ========================================================================== */

/* --- 1. RIALINEAMENTO STRUTTURALE E-COMMERCE (MOBILE) --- */
@media (max-width: 767px) {
    /* Ottimizzazione del contenitore principale della scheda macchinetta */
    .media-link.shadow-box {
        display: block !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 10px 15px !important;
        margin-bottom: 30px !important;
    }

        /* Centratura isolata dell'icona/immagine del carrello della macchinetta */
        .media-link.shadow-box .col-sm-4 {
            width: 100% !important;
            float: none !important;
            display: flex !important;
            justify-content: center !important;
            margin-bottom: 15px !important;
            padding: 0 !important;
        }

        /* Disattivazione delle mezze colonne per i testi informativi */
        .media-link.shadow-box .col-sm-8 {
            width: 100% !important;
            float: none !important;
            padding: 0 !important;
        }
}

/* --- 2. FORMATTAZIONE DEL TESTO CHIAVE-VALORE LINEARE --- */
@media (max-width: 767px) {
    /* Forza la lettura nativa a sinistra per tutte le righe di specifiche */
    .media-link.shadow-box .row.form-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        text-align: left !important;
        margin-bottom: 4px !important;
        padding: 0 !important;
        width: 100% !important;
    }

        /* Annulla i posizionamenti Bootstrap sulle sotto-colonne dei dati */
        .media-link.shadow-box .row.form-group .col-sm-12,
        .media-link.shadow-box .row.form-group .col-sm-6,
        .media-link.shadow-box .row.form-group .col-sm-4,
        .media-link.shadow-box .row.form-group .col-sm-8 {
            width: auto !important;
            float: none !important;
            display: inline-block !important;
            text-align: left !important;
            padding: 0 !important;
            margin: 0 !important;
            font-size: 15px !important; /* Dimensione definita su specifica consolidata */
            line-height: 1.4 !important;
        }

        /* Calibrazione spaziatura tra etichetta bold e valore descrittivo */
        .media-link.shadow-box .row.form-group label.bold {
            min-width: 90px !important; /* Blocca l'allineamento verticale dei valori */
            margin-right: 8px !important;
        }

        /* Configurazione per la ragione sociale estesa in testa alla card */
        .media-link.shadow-box .row.form-group:first-of-type label {
            font-size: 16px !important;
            color: var(--vweb-color-secondary) !important;
            margin-bottom: 8px !important;
        }
}

/* --- 3. FIX STRUTTURALE COMPATTEZZA BOTTONI AZIONE --- */
@media (max-width: 767px) {
    /* Mantiene l'affiancamento desktop dei bottoni INFO e SELEZIONA senza espansioni */
    .media-link.shadow-box .row.form-group:last-of-type {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        margin-top: 15px !important;
    }

        /* Forza l'altezza e il testo bianco dei pulsanti inline originali */
        .media-link.shadow-box .row.form-group:last-of-type .btn2.btn-black {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: auto !important;
            min-width: 120px !important; /* Dimensione coordinata touch-friendly */
            height: 38px !important;
            padding: 0 20px !important;
            font-size: 13px !important;
            color: var(--vweb-bg-body) !important;
            background-color: var(--vweb-color-primary) !important; /* Uniforma all'arancio di sistema */
            border-radius: 4px !important;
            border: none !important;
            float: none !important;
        }
}

/* ==========================================================================
   PAGINA DETTAGLIO PUNTO VENDITA (SalePointDetail.cshtml)  
   ========================================================================== */

/* --- 1. RESET STRUTTURALE ALLINEAMENTO A SINISTRA (MOBILE) --- */
@media (max-width: 991px) {
    /* Correzione dello scope: intercetta il form dentro .cat-tiles e azzera la centratura su ogni nodo figlio */
    .cat-tiles form.space-bottom,
    .cat-tiles form.space-bottom *,
    .cat-tiles form.space-bottom .row.form-group,
    .cat-tiles form.space-bottom .row.form-group * {
        text-align: left !important; /* Abbate radicalmente il text-center ereditato dal framework */
    }

        /* Ricompone la riga di Bootstrap in un flex container orizzontale rigido */
        .cat-tiles form.space-bottom .row.form-group {
            display: flex !important;
            flex-direction: row !important; /* Costringe label e valore a rimanere affiancati */
            flex-wrap: nowrap !important;
            justify-content: flex-start !important; /* Spinge la coppia a inizio riga */
            align-items: center !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-bottom: 12px !important;
            border: none !important; /* Garantisce la totale assenza di righe divisorie */
            padding: 0 !important;
            width: 100% !important;
        }

            /* Normalizzazione metrica dei testi informativi */
            .cat-tiles form.space-bottom .row.form-group label,
            .cat-tiles form.space-bottom .row.form-group span,
            .cat-tiles form.space-bottom .row.form-group div {
                font-size: 15px !important; /* Dimensione conforme alle specifiche approvate */
                line-height: 1.4 !important;
                color: var(--vweb-text-main) !important;
                display: inline-block !important;
                margin: 0 !important;
                padding: 0 !important;
            }

                /* BLOCCHETTO DI GEOMETRIA PER LE ETICHETTE (LABEL) */
                .cat-tiles form.space-bottom .row.form-group label.bold {
                    min-width: 95px !important; /* Dimensione protetta fissa a sinistra */
                    max-width: 95px !important;
                    flex: 0 0 95px !important; /* Impedisce il collasso o la deformazione dell'etichetta */
                    font-weight: 700 !important;
                    margin-right: 10px !important;
                }

            /* Reset specifico per il titolo della ragione sociale in testa */
            .cat-tiles form.space-bottom .row.form-group:first-of-type label {
                font-size: 16px !important;
                color: var(--vweb-color-secondary) !important;
                font-weight: 700 !important;
                min-width: 100% !important;
                max-width: 100% !important;
                flex: 1 1 100% !important;
            }
}

/* --- 2. CENTRATURA E PRESERVAZIONE BOTTONE INDIETRO --- */
@media (max-width: 991px) {
    /* Isola il pulsante INDIETRO (esterno al tag form) e lo centra stabilmente nel viewport */
    .cat-tiles button.btn-primary[onclick*="SalesPoints"],
    .cat-tiles .col-sm-12 > button.btn-primary {
        display: block !important;
        margin: 35px auto 10px auto !important; /* Centratura matematica ad asse */
        width: max-content !important; /* Mantiene la larghezza desktop inline */
        min-width: 140px !important;
        height: 42px !important;
        padding: 0 35px !important;
        font-size: 13px !important;
        color: var(--vweb-bg-body) !important; /* Mantiene il testo bianco richiesto */
        font-weight: 700 !important;
        text-transform: uppercase !important;
        text-align: center !important; /* Forza esclusivamente il testo interno al bottone al centro */
        border-radius: 4px !important;
        float: none !important;
        border: none !important;
    }
}

/* ==========================================================================
   PAGINA ELENCO INDIRIZZI DI SPEDIZIONE (AllDeliveryAddress.cshtml)  
   ========================================================================== */

/* --- 1. ACCOPPIAMENTO GEOMETRICO FILTRI DI RICERCA (GRID PAIRING) --- */
@media (max-width: 991px) {
    /* Trasforma la tabella in una griglia verticale a colonna singola */
    .d8-min-height form table {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        width: 100% !important;
        border: none !important;
    }

    /* Sgancia i contenitori intermedi passandone i figli direttamente alla griglia */
    .d8-min-height form thead,
    .d8-min-height form tbody,
    .d8-min-height form tr {
        display: contents !important;
    }

    /* Forza l'ordinamento alternato accoppiando matematicamente Label + Input */
    .d8-min-height form th:nth-of-type(1) {
        grid-row: 1 !important;
    }

    .d8-min-height form td:nth-of-type(1) {
        grid-row: 2 !important;
    }

    .d8-min-height form th:nth-of-type(2) {
        grid-row: 3 !important;
    }

    .d8-min-height form td:nth-of-type(2) {
        grid-row: 4 !important;
    }

    .d8-min-height form th:nth-of-type(3) {
        grid-row: 5 !important;
    }

    .d8-min-height form td:nth-of-type(3) {
        grid-row: 6 !important;
    }

    .d8-min-height form td:nth-of-type(4) {
        grid-row: 7 !important;
    }
    /* Cella dei bottoni */
    .d8-min-height form th:nth-of-type(4) {
        display: none !important;
    }
    /* Nasconde la cella vuota header */

    /* Formattazione e riallineamento a sinistra delle label dei filtri */
    .d8-min-height form th.text-black-table {
        text-align: left !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--vweb-text-main) !important;
        padding: 10px 0 4px 0 !important;
        margin: 0 !important;
    }

    /* Spaziatura e altezza touch per i campi di testo */
    .d8-min-height form td input.form-control {
        margin-bottom: 12px !important;
        height: 42px !important;
        width: 100% !important;
    }

    /* Allineamento orizzontale pulito per i pulsanti CERCA e RESET */
    .d8-min-height form td:last-of-type {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        margin-top: 10px !important;
        margin-bottom: 30px !important;
    }

        /* Stile coordinato per i bottoni di ricerca inline */
        .d8-min-height form td:last-of-type .btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: auto !important;
            min-width: 110px !important;
            height: 38px !important;
            padding: 0 20px !important;
            font-size: 13px !important;
            color: var(--vweb-bg-body) !important;
            background-color: var(--vweb-color-primary) !important;
            border-radius: 4px !important;
            border: none !important;
        }
}

/* --- 2. RISOLUZIONE TAGLIO TESTO E ALLINEAMENTO SCHEDE INDIRIZZO --- */
@media (max-width: 991px) {
    /* Reset dei contenitori generali per evitare troncamenti esterni */
    .d8-min-height .media-link.shadow-box,
    .d8-min-height .media-link.shadow-box .col-sm-12 {
        display: block !important;
        width: 100% !important;
        float: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 15px !important;
        text-decoration: none !important;
    }

        /* FIX CRITICO: Elimina i margini negativi di Bootstrap per ripristinare le lettere tagliate a sinistra */
        .d8-min-height .media-link.shadow-box .row.form-group {
            display: flex !important;
            flex-direction: row !important; /* Forza l'affiancamento in riga delle informazioni */
            flex-wrap: nowrap !important;
            justify-content: flex-start !important;
            align-items: flex-start !important;
            text-align: left !important;
            width: 100% !important;
            margin-left: 0 !important; /* Azzera il -15px che tagliava il testo sul bordo dello schermo */
            margin-right: 0 !important;
            margin-bottom: 6px !important;
            padding: 0 !important;
            border: none !important;
        }

            /* Reset universale dei testi per trazione e allineamento rigoroso a sinistra */
            .d8-min-height .media-link.shadow-box .row.form-group label {
                display: inline-block !important;
                width: auto !important;
                float: none !important;
                text-align: left !important;
                padding: 0 !important;
                margin: 0 !important;
                font-size: 15px !important;
                line-height: 1.4 !important;
                color: var(--vweb-text-main) !important;
            }

                /* BLOCCO AD ANCORAGGIO GEOMETRICO PER LE ETICHETTE */
                .d8-min-height .media-link.shadow-box .row.form-group label.bold {
                    min-width: 125px !important; /* Larghezza protetta calibrata per contenere "Ragione sociale:" senza tagli */
                    max-width: 125px !important;
                    flex: 0 0 125px !important; /* Impedisce la compressione o deformazione del blocco chiave */
                    font-weight: 700 !important;
                    margin-right: 10px !important;
                }
}

/* --- 3. RESPONSIVE RE-DESIGN BOTTONE MATITA E BOTTONE INDIETRO --- */
@media (max-width: 991px) {
    /* Allinea la riga della matita a sinistra azzerando i rientri ereditati */
    .d8-min-height .media-link.shadow-box .row.form-group.p-l-15 {
        display: block !important;
        text-align: left !important;
        padding-left: 0 !important;
        margin-top: 8px !important;
        margin-bottom: 30px !important; /* Spazio di stacco netto tra un indirizzo e il successivo */
    }

        /* Ripristina la matita come pulsante di tocco compatto inline */
        .d8-min-height .media-link.shadow-box .row.form-group.p-l-15 button {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 44px !important;
            height: 36px !important;
            background-color: var(--vweb-bg-tab-inactive) !important;
            border: 1px solid var(--vweb-border-light) !important;
            border-radius: 4px !important;
            cursor: pointer !important;
            float: none !important;
        }

    /* Centratura ad asse del pulsante INDIETRO a fondo pagina */
    .d8-min-height .row.p-b-15 button.btn-black {
        display: block !important;
        margin: 30px auto 10px auto !important;
        width: max-content !important;
        min-width: 140px !important;
        height: 42px !important;
        padding: 0 35px !important;
        font-size: 13px !important;
        color: var(--vweb-bg-body) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        border-radius: 4px !important;
        float: none !important;
        border: none !important;
    }
}

/* ==========================================================================
   PAGINA GESTIONE OMAGGI (Gift.cshtml) -  (VISUALIZZAZIONE DESKTOP)
   ========================================================================== */

.shopping-cart .row.item.first:not(:has(> .col-sm-8)) {
    background-color: var(--vweb-bg-body) !important;
    border-left: 1px solid var(--vweb-border-box-light) !important;
    border-right: 1px solid var(--vweb-border-box-light) !important;
    border-bottom: 1px solid var(--vweb-border-box-light) !important;
    padding: 15px 25px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Riduzione controllata e bilanciamento delle miniature prodotto */
.shopping-cart .thumb {
    flex: 0 0 90px !important;
    max-width: 90px !important;
    padding: 0 !important;
    text-align: center !important;
}

    .shopping-cart .thumb img {
        max-height: 80px !important;
        width: auto !important;
        object-fit: contain !important;
    }

/* RIPRISTINO PESI COLONNE: Libera lo spazio orizzontale per la descrizione */
.shopping-cart .row.item.first:not(:has(> .col-sm-8)) > .col-sm-6.name {
    flex: 1 !important;
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
}

/* TRAZIONE MAGNETICA: Spinge stabilmente la casella di testo quantità a destra */
.shopping-cart .qnt-count {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

/* CONFIGURAZIONE BADGE BLU: Trasforma i moltiplicatori (x1, x50) in pillole grafiche */
.shopping-cart .row.item.first:not(:has(> .col-sm-8)) > .col-sm-4.name {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--vweb-bg-body) !important;
    background-color: var(--vweb-color-secondary) !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 15px !important;
}


/* ==========================================================================
   RESTYLING TOTALI OMAGGI - STILE RE-DESIGN BANNER (VISUALIZZAZIONE DESKTOP)
   ========================================================================== */

.shopping-cart .row.item.first:has(> .col-sm-8) {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    background-color: var(--vweb-bg-light) !important;
    border-left: 4px solid var(--vweb-color-primary) !important;
    border-top: 1px solid var(--vweb-border-box-light) !important;
    border-right: 1px solid var(--vweb-border-box-light) !important;
    border-bottom: 1px solid var(--vweb-border-box-light) !important;
    padding: 12px 25px !important;
    margin-top: 40px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 4px 4px 0 0 !important;
    width: 100% !important;
}

/* Titolo in maiuscolo della sezione omaggi */
.shopping-cart .row.item.first > .col-sm-8.name {
    font-size: 16px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: var(--vweb-color-secondary) !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}

/* Ancoraggio a destra dell'etichetta Totale Omaggi in stile pulito e trasparente */
.shopping-cart .row.item.first:has(> .col-sm-8) > .col-sm-4.name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--vweb-text-main) !important;
    background: transparent !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* Iniezione dell'iconcina pacco regalo per risaltare all'occhio */
.shopping-cart .row.item.first > .col-sm-4.name::before {
    content: "🎁" !important;
    font-size: 14px !important;
}

.shopping-cart,
.wishlist {
    padding: 0px 0 50px 0;
}

/* --- 3. RIVOLUZIONE RESPONSIVE FLUSSO PRODOTTI (FIX FOTO 3 MOBILE) --- */
@media (max-width: 767px) {
    /* Adatta il banner di testata per lo schermo dello smartphone */
    .shopping-cart .row.item.first:has(> .col-sm-8) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 12px 15px !important;
    }

    /* Converti la riga di prodotto in una griglia per eliminare le sovrapposizioni */
    .shopping-cart .row.item.first:not(:has(> .col-sm-8)) {
        display: grid !important;
        grid-template-columns: 65px 1fr auto !important;
        grid-template-rows: auto auto !important;
        row-gap: 8px !important;
        column-gap: 15px !important;
        padding: 15px !important;
    }

    /* Posizionamento geometrico della miniatura */
    .shopping-cart .row.item.first .thumb {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        max-width: 65px !important;
    }

        .shopping-cart .row.item.first .thumb img {
            max-height: 60px !important;
        }

    /* Descrizione del prodotto estesa */
    .shopping-cart .row.item.first .name:not([class*="col-sm-4"]) {
        grid-column: 2 / 4 !important;
        grid-row: 1 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-align: left !important;
        padding: 0 !important;
    }

    /* Box di inserimento quantità omaggio */
    .shopping-cart .row.item.first .qnt-count {
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: 75px !important;
        padding: 0 !important;
    }

        .shopping-cart .row.item.first .qnt-count .quantity {
            height: 36px !important;
            text-align: center !important;
        }

    /* Moltiplicatore di erogazione (es: x 50, x 1) */
    .shopping-cart .row.item.first .col-sm-4.name {
        grid-column: 3 !important;
        grid-row: 2 !important;
        align-self: center !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--vweb-text-main) !important;
        background: transparent !important;
        padding: 0 !important;
        text-align: right !important;
    }
}

/* --- 4. CONFIGURAZIONE DIMENSIONALE BOTTONE DI CONFERMA --- */
.shopping-cart button[type="submit"].btn-block {
    display: block !important;
    width: max-content !important;
    min-width: 260px !important; /* Larghezza coordinata con i moduli del sito */
    height: 46px !important;
    margin: 40px auto 20px auto !important; /* Centratura matematica ad asse */
    padding: 0 35px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    background-color: var(--vweb-color-primary) !important;
    color: var(--vweb-bg-body) !important;
    border: none !important;
    float: none !important;
    clear: both !important;
}

@media (max-width: 767px) {
    .shopping-cart button[type="submit"].btn-block {
        width: 100% !important;
        max-width: 280px !important; /* Target speculare a tutta la suite mobile */
    }
}

/* ==========================================================================
   PAGINA ELENCO SOSPESI (Suspended.cshtml)
   ========================================================================== */

/* --- 1. COMPENSAZIONE DESKTOP & FIX TRONCAMENTO SIMBOLO EURO --- */
.table-suspended {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 25px !important;
}

    /* Neutralizza le classi col-sm-* improprie iniettate dentro i tag th */
    .table-suspended th {
        width: auto !important;
        float: none !important;
        display: table-cell !important;
        white-space: nowrap !important; /* Impedisce alle etichette lunghe di collassare */
        padding: 12px 14px !important;
        text-align: left !important;
        vertical-align: middle !important;
    }

    /* Forza l'allineamento orizzontale rigido e blinda il simbolo dell'Euro in linea */
    .table-suspended td {
        white-space: nowrap !important; /* OPERAZIONE CHIRURGICA: Impedisce l'andata a capo del simbolo € */
        padding: 12px 14px !important;
        vertical-align: middle !important;
        text-align: left !important;
        font-size: 14px !important;
    }


/* --- 2. ABILITAZIONE SCORRIMENTO MOBILE + EFFETTO SCROLL SHADOWS --- */
@media (max-width: 991px) {
    .table-scroll-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        margin-bottom: 20px !important;
        /* Matrice a sfumatura incrociata: mostra l'ombra solo se c'è testo nascosto a destra */
        background: linear-gradient(to right, white 30%, rgba(255,255,255,0)), linear-gradient(to right, rgba(255,255,255,0), white 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.08), rgba(0,0,0,0)), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.08), rgba(0,0,0,0)) 100% 0 !important;
        background-repeat: no-repeat !important;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100% !important;
        background-attachment: local, local, scroll, scroll !important;
    }

    /* Impedisce alla griglia tabellare di restringersi sotto la soglia di leggibilità */
    .table-suspended {
        min-width: 760px !important;
    }
}


/* --- 3. STRUTTURAZIONE ED ALLINEAMENTO BOTTONE DI CHIUSURA --- */
.cat-tiles button[onclick*="Step2"].btn-black {
    display: block !important;
    width: max-content !important;
    min-width: 220px !important;
    height: 44px !important;
    margin-top: 20px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: none !important;
}

@media (max-width: 991px) {
    /* Centratura geometrica perfetta del pulsante "Torna al carrello" su smartphone */
    .cat-tiles .col-md-12.p-b-20 {
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .cat-tiles button[onclick*="Step2"].btn-black {
        width: 100% !important;
        max-width: 280px !important; /* Uniformato allo standard di checkout del sito */
        margin: 20px auto !important;
    }
}

/* ==========================================================================
   PAGINA COURTESY IN ERROR (Courtesy.cshtml)
   ========================================================================== */
.courtesy-nav-bar {
    height: 50px;
    background-color: var(--vweb-bg-surface) !important;
}

.courtesy-label-style {
    font-size: 30px;
}

/* ==========================================================================
   PAGINA DI LOGIN (Login.cshtml) - Fix Contrasto e Leggibilità
   ========================================================================== */
.login-div .form-login {
    color: var(--vweb-text-secondary) !important; /* Testo digitato scuro */
    background-color: var(--vweb-bg-body) !important;
    border: 1px solid var(--vweb-border-light) !important; /* Bordo grigio visibile */
    border-radius: 4px !important;
}

    /* Colore dei Placeholder (Utente/Email e Password) */
    .login-div .form-login::-webkit-input-placeholder {
        color: var(--vweb-text-tertiary) !important;
        opacity: 1 !important;
    }

    .login-div .form-login::-moz-placeholder {
        color: var(--vweb-text-tertiary) !important;
        opacity: 1 !important;
    }

    .login-div .form-login:-ms-input-placeholder {
        color: var(--vweb-text-tertiary) !important;
        opacity: 1 !important;
    }

    /* Stato di Focus (quando l'utente clicca nel campo) */
    .login-div .form-login:focus {
        border-color: var(--vweb-color-primary) !important;
        box-shadow: 0 0 5px rgba(255, 119, 39, 0.4) !important; /* Alone arancione */
        outline: none !important;
    }

    .login-titolo{
        text-align: center;
    }

    .login-sottotitolo {
        text-align: center;
    }

/* ==========================================================================
   TOPTEN (ProductCardPartial.cshtml)
   ========================================================================== */

/* --- Griglia personalizzata per la Top 10 --- */
.top-ten-flex-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra i riquadri nella pagina */
    gap: 15px; /* Rende i riquadri PIÙ VICINI */
    padding-bottom: 20px;
}

    .top-ten-flex-grid .top-ten-card-wrapper {
        flex: 0 0 240px; /* Rende i riquadri PIÙ STRETTI (larghezza fissa a 240px) */
        max-width: 240px;
        width: 100%;
    }

    /* Assicura che la tile interna riempia correttamente il nuovo wrapper stretto */
    .top-ten-flex-grid .tile {
        margin-bottom: 0 !important;
        height: 100%;
        background-color: var(--vweb-bg-body) !important;
    }

/* Badge Fluttuante Top 10 */
.bestseller-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 3px 6px rgba(0,0,0,0.25);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    /* N° 1 delle Vendite */
    .bestseller-badge.rank-first {
        background-color: var(--vweb-color-primary);
        color: var(--vweb-bg-body);
    }

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

/* ==========================================================================
   VETRINA (ProductCardPartial.cshtml)
   ========================================================================== */
.catalog-grid .tile {
    width: 100%;
    max-width: 356px;
    position: relative;
    border: 1px solid #b2b2b2;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin: 16px auto 24px auto;
    text-align: left;
    background-color: var(--vweb-bg-body) !important;
}

    .catalog-grid .tile a {
        position: relative;
        display: block;
    }

        .catalog-grid .tile a .tile-overlay {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            min-height: 100%;
            z-index: 10;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
        }

        .catalog-grid .tile a:hover .tile-overlay {
            background-color: rgba(0, 0, 0, 0.2);
        }


/* ==========================================================================
   VEGAWEB: STATO CARRELLO VUOTO (EMPTY STATE IN STEP1) - FIX CENTRATURA
   ========================================================================== */
#cart-detail:not(:has(.vweb-cart-qty)):not(:has(.vweb-cart-row)) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 45vh !important;
    padding: 40px 15px !important;
    width: 100% !important;
    float: none !important;
}

    /* 1. ABBATTIMENTO FLOAT E MARGINI SU TUTTI GLI ELEMENTI INTERNI GENERATI DA BOOTSTRAP */
    #cart-detail:not(:has(.vweb-cart-qty)):not(:has(.vweb-cart-row)) * {
        float: none !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* 2. FORZATURA CONTENITORI DIV INTERNI */
    #cart-detail:not(:has(.vweb-cart-qty)):not(:has(.vweb-cart-row)) div,
    #cart-detail:not(:has(.vweb-cart-qty)):not(:has(.vweb-cart-row)) [class*="col-"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !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-color-secondary) !important;
        font-size: clamp(22px, 3vw, 28px) !important;
        font-weight: 400 !important; /* Peso normale */
        margin-bottom: 20px !important;
        display: block !important;
        width: 100% !important;
    }

    /* 4. TESTO "Nessun articolo nel carrello" - PERFETTAMENTE CENTRATO */
    #cart-detail:not(:has(.vweb-cart-qty)):not(:has(.vweb-cart-row)) p,
    #cart-detail:not(:has(.vweb-cart-qty)):not(:has(.vweb-cart-row)) span {
        color: var(--vweb-text-muted) !important;
        font-size: 16px !important;
        margin-bottom: 30px !important;
        display: block !important;
        width: 100% !important;
    }

    /* 5. BOTTONE "VAI AL CATALOGO" - CENTRATO E ACCESSISBILE */
    #cart-detail:not(:has(.vweb-cart-qty)):not(:has(.vweb-cart-row)) .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 260px !important;
        max-width: 280px !important;
        height: 52px !important;
        padding: 0 30px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        background-color: var(--vweb-color-primary) !important;
        color: var(--vweb-bg-body) !important;
        border-radius: 4px !important;
        border: none !important;
        text-decoration: none !important;
    }

/* ==========================================================================
   VEGAWEB: CHECKOUT CART LOGIN (CartLogin.cshtml)
   ========================================================================== */
.vweb-cart-login-row {
    margin-top: 30px !important;
    margin-bottom: 40px !important;
}

/* Card di contenitore centrata */
.vweb-cart-login-card {
    background: var(--vweb-bg-body) !important;
    padding: 35px 30px !important;
    border-radius: 8px !important;
    border: 1px solid var(--vweb-border-box-light) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
    margin: 0 auto !important;
}

/* Titolo di testa */
.vweb-cart-login-title {
    color: var(--vweb-color-secondary) !important;
    font-size: clamp(20px, 2.5vw, 24px) !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    line-height: 1.3 !important;
}

/* Form e Label */
.vweb-cart-login-card .form-group {
    margin-bottom: 20px !important;
    text-align: left !important;
}

    .vweb-cart-login-card .form-group label {
        display: block !important;
        color: var(--vweb-text-main) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        margin-bottom: 8px !important;
        letter-spacing: 0.5px !important;
    }

/* Input di testo e password */
.vweb-cart-login-card .form-control {
    width: 100% !important;
    height: 48px !important; /* Touch-target ottimizzato WCAG */
    border: 1px solid var(--vweb-border-light) !important;
    background-color: var(--vweb-bg-body) !important;
    color: var(--vweb-color-secondary) !important;
    border-radius: 4px !important;
    padding: 6px 15px !important;
    font-size: 15px !important;
}

    .vweb-cart-login-card .form-control:focus {
        border-color: var(--vweb-color-primary) !important;
        box-shadow: 0 0 5px rgba(255, 119, 39, 0.4) !important;
        outline: none !important;
    }

/* Contenitore dei Link sotto la password */
.vweb-login-links-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 12px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.vweb-cart-login-card .vweb-help-link {
    color: var(--vweb-color-secondary) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

    .vweb-cart-login-card .vweb-help-link:hover {
        color: var(--vweb-color-primary) !important;
        text-decoration: underline !important;
    }

/* Bottone di Invio */
.vweb-cart-login-card .vweb-btn-submit {
    width: 100% !important;
    height: 50px !important;
    margin-top: 25px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background-color: var(--vweb-color-primary) !important;
    color: var(--vweb-bg-body) !important;
    border: none !important;
    border-radius: 4px !important;
    transition: background-color 0.2s ease !important;
}

    .vweb-cart-login-card .vweb-btn-submit:hover {
        background-color: var(--vweb-color-secondary) !important;
    }

/* Responsive per schermi piccoli */
@media (max-width: 767px) {
    .vweb-cart-login-card {
        padding: 25px 18px !important;
    }
}

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

    .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-secondary);
    }

    .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-color-secondary);
        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;
    }



/* ==========================================================================
   PRODUCT CARD: TITOLO PRODOTTO
   ========================================================================== */
.vweb-product-card-title {
    display: block !important; /* Fondamentale affinché le regole di altezza funzionino sul tag <a> */
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    font-size: 13px !important;
    line-height: 1.3 !important; /* Bilancia l'interlinea per ospitare esattamente due righe di testo */
    overflow: hidden !important; /* Taglia via il testo in eccesso se supera i 40px di altezza */
    color: var(--vweb-text-main) !important;
    transition: color 0.2s ease !important;
}

    /* Hover: richiama il colore primario del brand */
    .vweb-product-card-title:hover,
    .vweb-product-card-title:focus {
        color: var(--vweb-color-primary) !important;
        text-decoration: none !important;
    }

.catalog-grid .tile .footer {
    padding: 24px 6px 12px 6px;
    background: #fff;
    position: relative;
    text-align: center;
    -webkit-border-radius: 0 0 0px 0px;
    -moz-border-radius: 0 0 0px 0px;
    border-radius: 0 0 0px 0px;
}

/* ==========================================================================
   CAROSELLO "ULTIMI VISTI" (Frecce Vettoriali e Accessibilità)
   ========================================================================== */

/* Contenitore cliccabile della freccia */
.vweb-carousel-arrow {
    cursor: pointer;
    width: 60px;
    height: 130px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

/* Formattazione dell'icona FontAwesome */
.vweb-carousel-icon {
    font-size: 30px !important; /* Molto visibile e leggibile */
    color: var(--vweb-text-main);
    transition: color 0.2s ease, transform 0.2s ease !important;
}

/* Effetti Hover & Focus */
.vweb-carousel-arrow:hover .vweb-carousel-icon,
.vweb-carousel-arrow:focus .vweb-carousel-icon {
    color: var(--vweb-color-primary);
}

/* UX Animazione: Spostamento intuitivo nella direzione del click */
#lastSeenLeftArrow:hover .vweb-carousel-icon,
#lastSeenLeftArrow:focus .vweb-carousel-icon {
    transform: translateX(-4px);
}

#lastSeenRightArrow:hover .vweb-carousel-icon,
#lastSeenRightArrow:focus .vweb-carousel-icon {
    transform: translateX(4px);
}

/* Supporto per la navigazione da tastiera (Focus visibile) */
.vweb-carousel-arrow:focus {
    outline: 2px dashed var(--vweb-color-primary);
    outline-offset: 4px;
    border-radius: 4px;
}

/* ==========================================================================
   CHECKOUT: COLONNA DESTRA (CARD RIEPILOGO ORDINE)
   ========================================================================== */

.vweb-summary-card {
    background: var(--vweb-bg-body) !important;
        border: 1px solid var(--vweb-border-muted) !important;
    border-radius: 8px !important;
    padding: 24px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.vweb-doc-type-badge {
        background-color: var(--vweb-bg-badge) !important;
        color: var(--vweb-color-steel) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    margin-bottom: 15px !important;
    display: inline-block !important;
}

.vweb-summary-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--vweb-text-main) !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--vweb-color-primary) !important;
}

/* Tabella e Font Accessibili (14px base / 12px dettagli) */
.vweb-summary-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.vweb-summary-item-row td {
    padding: 10px 0 !important;
        border-bottom: 1px dashed var(--vweb-border-box-light) !important;
    vertical-align: middle !important;
}

.vweb-item-info {
    display: flex !important;
    flex-direction: column !important;
    padding-right: 10px !important;
}

.vweb-item-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--vweb-text-main) !important;
    line-height: 1.3 !important;
}

.vweb-item-qty {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--vweb-text-tertiary) !important;
    margin-top: 2px !important;
}

.vweb-item-price,
.vweb-summary-breakdown-row td {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--vweb-text-main) !important;
}

.vweb-item-price {
    text-align: right !important;
    white-space: nowrap !important;
}

.vweb-item-badge-col {
    text-align: center !important;
    width: 32px !important;
}

.vweb-badge-gift,
.vweb-badge-promo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    font-size: 12px !important;
}

.vweb-badge-gift {
    background-color: var(--vweb-bg-badge) !important;
        color: var(--vweb-color-primary) !important;
}

.vweb-badge-promo {
        background-color: var(--vweb-bg-badge) !important;
    color: var(--vweb-color-primary) !important;
}

.vweb-summary-divider-row td {
    height: 16px !important;
    border-bottom: 1px solid var(--vweb-border-light) !important;
}

.vweb-summary-breakdown-row td {
    padding: 8px 0 !important;
}

.vweb-breakdown-label {
    font-weight: 500 !important;
}

.vweb-breakdown-value {
    text-align: right !important;
    white-space: nowrap !important;
}

/* Hero Total Box */
.vweb-summary-hero-total {
        background-color: var(--vweb-bg-badge-light) !important;
        border: 1px solid var(--vweb-border-muted) !important;
    border-radius: 6px !important;
    padding: 14px 16px !important;
    margin-top: 16px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.hero-total-label {
        font-size: 14px !important;
        font-weight: 800 !important;
    color: var(--vweb-text-main) !important;
    text-transform: uppercase !important;
}

.hero-total-amount {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--vweb-color-primary) !important;
}

/* Coupon Box & Actions */
.vweb-coupon-box {
    background-color: var(--vweb-bg-body) !important;
    border: 1px solid var(--vweb-border-light) !important;
    padding: 14px !important;
    border-radius: 6px !important;
    margin-bottom: 20px !important;
}

.vweb-coupon-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--vweb-main-text) !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.vweb-coupon-input {
    height: 40px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.vweb-coupon-btn {
    height: 40px !important;
    padding: 0 16px !important;
    margin-left: 8px !important;
    border-radius: 4px !important;
    flex: 0 0 auto !important;
}

.vweb-summary-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.vweb-btn-confirm {
    height: 46px !important;
    font-size: 14px !important;
}

/* Bottone Prosegui Acquisto (Inverted High-Contrast) */
.vweb-summary-actions .vweb-btn-secondary {
        background: var(--vweb-bg-body) !important;
    color: var(--vweb-text-main) !important;
    border: 2px solid var(--vweb-text-main) !important;
    border-radius: 4px !important;
    height: 44px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

    .vweb-summary-actions .vweb-btn-secondary:hover,
    .vweb-summary-actions .vweb-btn-secondary:focus {
        background-color: var(--vweb-text-main) !important;
            color: var(--vweb-bg-body) !important;
        border-color: var(--vweb-text-main) !important;
        text-decoration: none !important;
    }

/* ==========================================================================
   ALERT E SCONTI MODERNI (MAPPATI SU VARIABILI vweb-core)
   ========================================================================== */

/* Alert Pendenze (Rosso Soft Compatto Allineato a Sinistra) */
.vweb-alert-soft-danger {
    background-color: var(--vweb-bg-alert-danger) !important;
    border-left: 4px solid var(--vweb-color-danger) !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    margin-bottom: 20px !important;
}

/* Alert Warning (Giallo/Ambra Soft) */
.vweb-alert-soft-warning {
    background-color: var(--vweb-bg-alert-warning) !important;
    border-left: 4px solid var(--vweb-color-warning) !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    margin-bottom: 20px !important;
}

.vweb-alert-content {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    text-align: left !important;
}

.vweb-alert-icon {
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.vweb-alert-soft-danger .vweb-alert-icon {
    color: var(--vweb-color-danger) !important;
}

.vweb-alert-soft-warning .vweb-alert-icon {
    color: var(--vweb-color-warning) !important;
}

.vweb-alert-text-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.vweb-alert-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--vweb-text-alert-danger) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.vweb-alert-warning-text {
    font-size: 13px !important;
    color: var(--vweb-text-alert-warning) !important;
    margin: 0 !important;
    display: block !important;
}

.vweb-alert-link {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--vweb-color-secondary) !important;
    text-decoration: underline !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 2px !important;
}

/* Sconti (Pillole Mappate) */
.vweb-discounts-wrapper {
    background-color: var(--vweb-bg-badge-light) !important;
    border: 1px solid var(--vweb-bg-badge) !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    margin-bottom: 16px !important;
}

.vweb-discounts-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--vweb-color-steel) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.vweb-discounts-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.vweb-discount-pill {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

    .vweb-discount-pill.red {
        background-color: var(--vweb-bg-alert-danger) !important;
        color: var(--vweb-text-alert-danger) !important;
    }

    .vweb-discount-pill.yellow {
        background-color: var(--vweb-bg-alert-warning) !important;
        color: var(--vweb-text-alert-warning) !important;
    }

    .vweb-discount-pill.green {
        background-color: var(--vweb-color-success-bg) !important;
        color: var(--vweb-color-success-text) !important;
    }

/* ==========================================================================
   PAGINA: SELEZIONA MACCHINA (SelectMachine.cshtml)
   ========================================================================== */

/* Intestazione */
.vweb-machine-h1 {
    border: none;
    margin-bottom: 5px;
}

/* Card principale della singola macchina */
.vweb-machine-article {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 25px;
}

/* Immagine della macchina */
.vweb-machine-img {
    max-height: 180px;
    margin: 0 auto;
}

/* Titolo/Nome della macchina */
.vweb-machine-h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--vweb-text-main);
    margin-top: 0;
    margin-bottom: 10px;
}

/* Etichetta "Codice:" */
.vweb-machine-code-lbl {
    color: var(--vweb-color-steel);
    font-size: 13px;
}

/* Valore del codice */
.vweb-machine-code-val {
    font-weight: 600;
}

/* Box grigio che contiene le opzioni di acquisto/comodato */
.vweb-machine-options-box {
    background: var(--vweb-bg-badge-light);
    padding: 15px;
    border-radius: 6px;
    border: 1px solid var(--vweb-bg-badge);
}

/* Testo piccolo per la cauzione */
.vweb-machine-deposit {
    font-size: 12px;
    margin-left: 5px;
}

/* Icone del carrello o comodato */
.vweb-machine-icon {
    color: var(--vweb-color-primary);
    margin-right: 8px;
}

/* Bottone per selezionare la macchina */
.vweb-machine-btn {
    min-width: 150px;
    font-weight: bold;
}

/* ==========================================================================
   PAGINA: TERMINI E CONDIZIONI (TermsAndCondition.cshtml)
   ========================================================================== */

/* Box scrollabile che contiene il testo legale */
.vweb-terms-box {
    background-color: var(--vweb-bg-badge-light, #f9f9f9);
    border: 1px solid #ddd;
    border-radius: 8px;
    max-height: 45vh;
    overflow-y: auto;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.vweb-terms-content {
    line-height: 1.6;
    font-size: 14px;
    color: #333;
    text-align: justify;
}

/* Contenitore della checkbox (Allineato a SINISTRA come richiesto) */
.vweb-terms-checkbox-wrapper {
    display: flex;
    justify-content: flex-start; /* Allinea a sinistra invece di centrare */
    padding: 0; /* Tolto il padding per allinearlo perfettamente al box sopra */
}

.vweb-terms-label {
    font-size: 16px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    margin: 0; /* Rimuove margini di default indesiderati */
}

/* Checkbox nativa FORZATA alla visualizzazione (Bypassa i nascondimenti del tema) */
.vweb-terms-input {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    flex-shrink: 0;
    position: relative !important;
    top: 2px;
    opacity: 1 !important; /* Forza la visibilità */
    appearance: checkbox !important; /* Forza lo stile di default del browser */
    -webkit-appearance: checkbox !important;
    pointer-events: auto !important;
}

.vweb-terms-text {
    line-height: 1.4;
}

.vweb-terms-btn-wrapper {
    display: flex;
    justify-content: center;
}

.vweb-terms-btn {
    min-width: 200px;
    height: 50px;
    font-weight: bold;
    font-size: 15px;
}

/* ==========================================================================
   CARRELLO: ALERT E BOTTONI SOFT-GATE (CartDetail.cshtml)
   ========================================================================== */

/* Box avviso "Aggiungi prodotti" */
.vweb-cart-alert-warning {
    background-color: var(--vweb-bg-alert-warning);
    color: var(--vweb-text-alert-warning);
    border: 1px solid var(--vweb-color-warning);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.vweb-cart-alert-icon {
    font-size: 16px;
    margin-right: 5px;
    vertical-align: middle;
}

.vweb-cart-alert-text {
    vertical-align: middle;
}

/* Bottone di Checkout Disabilitato (Accessibile WCAG AAA) */
.vweb-cart-btn-disabled {
    background-color: var(--vweb-bg-tab-inactive) !important;
    border-color: var(--vweb-border-light) !important;
    color: var(--vweb-text-muted) !important; /* Passa da #555 a #333 per superare il test Lighthouse */
    cursor: not-allowed !important;
    pointer-events: none !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Distanziatore per il nuovo bottone guida */
.vweb-cart-guide-btn {
    margin-top: 15px;
}

.vweb-cart-guide-icon {
    margin-right: 8px;
    font-size: 16px;
}

/* ==========================================================================
   ACCESSIBILITÀ - APERTURA TENDINE CON LA TASTIERA (:focus-within)
   ========================================================================== */
/* Si attiva su QUALSIASI elemento della pagina che contenga la nostra classe dropdown parziale */
li:focus-within > .vweb-dropdown-menu,
.vweb-menu-desktop li:focus-within > ul.no-mobile,
#vwebCartWrapper .toolbar .cart-btn:focus-within .cart-dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. Tendina Carrello: si apre quando il focus arriva sul bottone del carrello */
@media (min-width: 992px) {
    #vwebCartWrapper .toolbar .cart-btn:focus-within .cart-dropdown {
            display: flex !important;
            flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

    /* 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;
        }
    }

	/* ==========================================================================
   ACCESSIBILITÀ & DESIGN - STATO COUPON ATTIVO (CON VARIABILI)
   ========================================================================== */
.checkout #couponCode[readonly] {
    background-color: var(--vweb-color-success-bg) !important;
    color: var(--vweb-color-success-text) !important;
    border-color: var(--vweb-color-success-text) !important;
    font-weight: bold;
}