@import url(https://fonts.googleapis.com/css?family=Didact+Gothic:400,300,600,700&subset=latin,cyrillic);

/* ==========================================================================
   vweb-core.css - Architettura White-Label VegaWeb Core
   ========================================================================== */

/* --- Variabili di Design di Sistema --- */
:root {
    --vweb-font-main: 'Lato', sans-serif;

    /* ======================================================================
       1. TAVOLOZZA DEI COLORI NATIVI (Primitive Tokens - Non usarli direttamente nel CSS)
       ====================================================================== */
    --vweb-palette-white:           #FFFFFF; /* Base candida */
    --vweb-palette-gray-dark:       #707070; /* Grigio scuro istituzionale */
    --vweb-palette-gray-muted:      #333333; /* Antracite per testi ad alta leggibilità */
    --vweb-palette-gray-light:      #F3EDE3; /* Beige/Grigio caldo di sfondo */
    --vweb-palette-gray-hover:      #d5d5d5; /* Grigio di interazione per pulsanti neutri */
    --vweb-palette-blue-dark:       #13295A; /* Blu notte aziendale */
    --vweb-palette-orange:          #CD4D00; /* Arancione scuro */
    --vweb-palette-neutral-bg:      #F5F5F5; /* Il grigio leggero di cortesia */
    --vweb-palette-text-sec:        #555555; /* Grigio medio per etichette e dettagli */
    --vweb-palette-text-tert:       #555555; /* Grigio medio per note accessorie */
    --vweb-palette-border:          #CCCCCC; /* Grigio standard per bordi input */
    --vweb-palette-divider:         #E6E6E6; /* Grigio chiaro per linee divisorie */
    --vweb-palette-hover-bg:        #F9F9F9; /* Sfondo ultra-light per interazioni e liste */
    --vweb-palette-tab-inactive:    #EFEFEF; /* Sfondo neutro spento per tab non selezionate */
    --vweb-palette-divider-light:   #F3F3F3; /* Grigio ultra-leggero per menu */
    --vweb-palette-scrollbar-track: #F1F1F1; /* Grigio chiarissimo nativo scrollbar */
    --vweb-palette-black:           #000000; /* Nero pieno per testi ad alto contrasto */
    --vweb-palette-border-box:      #EAEAEA; /* Grigio chiaro specifico per box strutturali */
    --vweb-palette-brown-dark:      #472C27; /* Marrone scuro */
    --vweb-palette-success-bg:      #E6F4EA; /* Verde chiaro */
    --vweb-palette-success-text:    #137333; /* Verde scuro */
    --vweb-palette-danger:          #dc3545; /* Rosso*/
    --vweb-palette-amber-yellow:    #E2A012; /* Giallo ambra*/
    --vweb-palette-placeholder:     #c4c4c4; /* Giallo ambra*/
    --vweb-palette-azzurrino :          #edf2f7; /* Azzurrino */
    --vweb-palette-azzurrino-light:     #f7fafc; /* Azzurrino light */
    --vweb-palette-steel :              #4a5568; /* Acciaio brunito */
    /* colori per alert e soft badge */
    --vweb-palette-danger-soft-bg:      #FDF2F2; /* Sfondo rosso pastello */
    --vweb-palette-danger-soft-text:    #9B1C1C; /* Testo rosso scuro */
    --vweb-palette-warning-soft-bg:     #FFFBE6; /* Sfondo ambra/giallo soft */
    --vweb-palette-warning-soft-text:   #92400E; /* Testo ambra scuro */
	--vweb-palette-gold:            #C19A6B; /* Oro per i pulsanti*/
	--vweb-palette-brown:           #2b1b15; /* Marrone per testi */
    --vweb_palette-beige:           #F8F0E4; /* Beige*/
    /* ======================================================================
       2. RUOLI SEMANTICI (Semantic Tokens - Rettificati sull'uso reale nel CSS)
       ====================================================================== */
    --vweb-color-primary:       var(--vweb-palette-gold);               /* Pulsanti Master attivi (Cerca, Reset, Dettaglio, Indietro, Carrello) */
    --vweb-color-secondary:     var(--vweb-palette-white);               /* Stato HOVER e FOCUS di tutti i pulsanti principali (Colore Core scuro) */
    --vweb-text-main:           var(--vweb-palette-brown);              /* Testo delle tendine, link PDF e etichette fisse dei dati (Label col-sm-4) */
    --vweb-text-secondary:      var(--vweb-palette-brown);              /* Testi di dettaglio nel profilo utente, label secondarie e riepiloghi tecnici */
    --vweb-text-muted:          var(--vweb-palette-brown);              /* Testo dei valori dinamici delle schede (Codici, Date, Stati col-sm-8) e descrizioni */
    --vweb-text-tertiary:       var(--vweb-palette-brown);              /* Testo minore di contorno nel carrello (es. UOM/Unità di misura) e note piccole */
    --vweb-text-dark-contrast:  var(--vweb-palette-brown);              /* Forza il testo in nero pieno leggibile dentro i contenitori legali e privacy */
    --vweb-text-placeholder:    var(--vweb-palette-brown);              /* Testo placeholder per inputtext */
    --vweb-color-steel:         var(--vweb-palette-steel);
    --vweb-bg-body:             var(--vweb_palette-beige);              /* Sfondo candido di base per la pagina, per le opzioni della tendina e testo invertito */
    --vweb-bg-surface:          var(--vweb-palette-gray-light);         /* Sfondo chiaro di supporto per i grandi box della privacy e aree di holding */
    --vweb-bg-interaction:      var(--vweb-palette-neutral-bg);         /* Sfondo grigio accennato per evidenziare le voci al passaggio del mouse nella tendina */
    --vweb-bg-light:            var(--vweb-palette-hover-bg);           /* Sfondo di cortesia per sottomenu a tendina (My Account) e liste desktop */
    --vweb-bg-tab-inactive:     var(--vweb-palette-tab-inactive);       /* Sfondo grigio spento per i pulsanti delle Tab di navigazione quando non sono cliccate */
    --vweb-bg-scrollbar-track:  var(--vweb-palette-scrollbar-track);    /* Colore della pista di scorrimento (track) delle barre nei box lunghi (es. Cookie) */
    --vweb-bg-cancel-hover:     var(--vweb-palette-gray-hover);         /* Stato di HOVER per i pulsanti di annullamento/chiusura/back secondari */
    --vweb-bg-badge:            var(--vweb-palette-azzurrino);
    --vweb-bg-badge-light:      var(--vweb-palette-azzurrino-light);
    --vweb-border-light:        var(--vweb-palette-border);             /* Bordo perimetrale standard di caselle di testo, select e form di input */
    --vweb-border-muted:        var(--vweb-palette-divider);            /* Linee di divisione orizzontali nel footer e bordi leggeri divisori delle tabelle data-table */
    --vweb-border-subtle:       var(--vweb-palette-divider-light);      /* Linea tratteggiata (dashed) ultra-leggera di separazione voci nel menu desktop */
    --vweb-border-box-light:    var(--vweb-palette-border-box);         /* Bordo di contenimento esterno per i blocchi di testo legali e privacy */
    --vweb-icon-delete:         var(--vweb-palette-brown-dark);         /* Colore icona delete cart */
    --vweb-color-success-bg:    var(--vweb-palette-success-bg);
    --vweb-color-success-text:  var(--vweb-palette-success-text);
    --vweb-color-danger:        var(--vweb-palette-danger);
    --vweb-color-warning:       var(--vweb-palette-amber-yellow);
    --vweb-bg-header:           var(--vweb-palette-gold);              /* Sfondo per l'header */
    /* ruoli semantici Alert */
    --vweb-bg-alert-danger:     var(--vweb-palette-danger-soft-bg);
    --vweb-text-alert-danger:   var(--vweb-palette-danger-soft-text);
    --vweb-bg-alert-warning:    var(--vweb-palette-warning-soft-bg);
    --vweb-text-alert-warning:  var(--vweb-palette-warning-soft-text);
}

/* Applicazione globale del font */
body, html, p, span, h1, h2, h3, h4, h5, h6, input, button, select, textarea, a {
    font-family: var(--vweb-font-main) !important;
}

/* --- Reset Strutturale Globale (Migrato da Limo) --- */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

html {
    font-size: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}

body {
    margin: 0 !important;
    -webkit-font-smoothing: antialiased;
    color: var(--vweb-text-secondary);
    background-color: var(--vweb-bg-body) !important;
}

a {
    text-decoration: none;
    color: var(--vweb-text-secondary);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

    a.large {
        font-size: 1.125em;
    }

    a:hover,
    a:focus {
        outline: 0;
        text-decoration: underline;
        color: var(--vweb-text-main);
    }

    a:focus {
        text-decoration: none;
    }

/* --- Forzatura di Sicurezza Modali Bootstrap --- */
.modal {
    display: none !important;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

    .modal.in, .modal.show {
        display: block !important;
    }

.modal-open {
    overflow: hidden;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}

    .modal-backdrop.fade {
        opacity: 0;
    }

    .modal-backdrop.in {
        opacity: 0.5;
    }

/* ==========================================================================
   LISTE E UTILITY TIPOGRAFICHE GLOBALI (Migrate e Bonificate da styles.css)
   ========================================================================== */
ul, ol {
    font-family: var(--vweb-font-main);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--vweb-text-main);
    margin-top: 0;
    margin-bottom: 15px;
}

    ul li, ol li {
        margin-bottom: 8px;
    }

    ul.large, ol.large {
        font-size: 16px;
    }

.ul-style2, .ol-style2 {
    font-family: var(--vweb-font-main);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--vweb-text-main);
}

    .ul-style2 li, .ol-style2 li {
        margin-bottom: 16px;
    }

.ul-style3, .ol-style3 {
    font-family: var(--vweb-font-main);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--vweb-text-main);
}

    .ul-style3 li, .ol-style3 li {
        margin-bottom: 16px;
    }

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.gift-img {
    width: 20px !important;
    height: 20px !important;
    max-width: unset !important;
    margin: 5px !important;
}

/* ==========================================================================
   OVERRIDE GLOBALE ARCHITETTURA SELECT LIST (vweb.core) - COLOR VARIABLES
   ========================================================================== */

/* --- 1. MODERNIZZAZIONE DEL CONTENITORE COMPONENTE --- */
.select-style {
    position: relative !important;
    width: 100% !important;
    background-color: var(--vweb-bg-body) !important;
    border: 1px solid var(--vweb-border-light) !important; /* Grigio chiaro neutro per il bordo box */
    border-radius: 4px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease-in-out !important;
    box-sizing: border-box !important;
}

    /* Effetto focus sul bordo stile core design aziendale */
    .select-style:focus-within {
        border-color: var(--vweb-color-primary) !important;
        /* Genera l'alone di focus usando il colore primario del brand al 10% di opacità */
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--vweb-color-primary) 10%, transparent) !important;
    }

    /* --- 2. RESTYLING ELEMENTO SELECT NATIVO --- */
    .select-style select {
        width: 100% !important;
        height: 42px !important;
        padding: 6px 35px 6px 12px !important; /* Spazio protetto a destra per la freccia custom */
        background: var(--vweb-bg-body) !important;
        border: none !important;
        outline: none !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--vweb-text-main) !important; /* Testo principale scuro */
        cursor: pointer !important;
        /* Distrugge la freccia nativa dei sistemi operativi per uniformarla */
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
    }

    /* Iniezione della freccia personalizzata */
    .select-style::after {
        content: "\f107" !important;
        font-family: "FontAwesome" !important;
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: var(--vweb-color-primary) !important;
        background-color: var(--vweb-bg-body) !important;
        font-size: 16px !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    /* --- 3. LOOK TENDINA REVISIONATO --- */
    .select-style select option {
        background-color: var(--vweb-bg-body) !important;
        color: var(--vweb-text-main) !important; 
        padding: 12px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }

        /* Stato attivo/selezionato: grigio chiarissimo di cortesia, testo sempre scuro */
        .select-style select option:hover,
        .select-style select option:focus,
        .select-style select option:active,
        .select-style select option:checked {
            background-color: var(--vweb-bg-interaction) !important; /* Grigio neutro e leggero, non disturba */
            color: var(--vweb-text-main) !important; /* Il testo rimane scuro e perfettamente leggibile */
        }

/* ==========================================================================
   GRAFICA DELLO SKIP LINK QUANDO ATTIVO
   ========================================================================== */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: fixed !important;
    top: 20px !important;
    left: 20px !important;
    z-index: 999999 !important; /* Deve stare sopra l'header sticky che è a 1050 */
    /* Design visivo ad alto contrasto */
    background-color: var(--vweb-color-primary) !important;
    color: #FFFFFF !important;
    padding: 15px 30px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   ACCESSIBILITÀ - GESTIONE FOCUS DA TASTIERA (:focus-visible)
   ========================================================================== */
/* Indicatore visivo solo per chi usa il tasto TAB */
.vweb-action-icon:focus-visible,
#hamburgerBtn:focus-visible,
#searchButton:focus-visible,
#closeSearchBtn:focus-visible,
#cookie a:focus-visible,
#cookie button:focus-visible,
#cookie input[type="checkbox"]:focus-visible,
.vweb-modal .close:focus-visible,
.vweb-mobile-utility__link:focus-visible,
.vweb-btn-contact:focus-visible,
.vweb-logo-link:focus-visible, /* <--- Illumina il Logo */
.vweb-menu-desktop a:focus-visible, /* <--- Illumina tutte le voci del Menu Categorie */
.vweb-dropdown-menu a:focus-visible, /* Illumina tutte le voci per Area Personale/MyAccount */
.vweb-footer__link:focus-visible,
.vweb-footer-social a:focus-visible,
.vweb-product-link:focus-visible,
.cart-dropdown table a:focus-visible,
.cart-dropdown .header-delete-item:focus-visible,
.cart-dropdown .footer .btn:focus-visible,
.breadcrumb a:focus-visible,
.shop-filters a:focus-visible,
.button.span-tree-style:focus-visible,
.pagination a:focus-visible,
#back-top a:focus-visible,
.btn-add-to-cart-index:focus-visible,
#newsModal .close:focus,
.incr-btn:focus-visible, /* <-- Illumina i bottoni + e - */
#goBack:focus-visible, /* <-- Illumina il bottone Indietro */
.btn-add-to-cart:focus-visible, /* <-- Illumina Aggiungi al carrello (Dettaglio) */
.nav-tabs .nav-link:focus-visible, /* <-- Illumina i tab Descrizione/Ingredienti */
#unitaMisuraSelected:focus-visible, /* <-- Illumina la tendina Unità di misura */
.vweb-cart-delete:focus-visible,
.cart-totals .btn:focus-visible, /* <--- Illumina Procedi all'ordine, Prosegui con l'acquisto e Svuota */
.vweb-cart-price:focus-visible, /* <--- Illumina il prezzo di riga quando riceve il focus */
/*  (Step2.cshtml)  */
.checkout input:focus-visible,
.checkout select:focus-visible,
.checkout textarea:focus-visible,
.checkout .select-style:focus-within,
.checkout .checkbox input:focus-visible + label,
.table-totals th:focus-visible,
.table-totals td:focus-visible {
    outline: 3px solid var(--vweb-color-primary) !important;
    outline-offset: 3px !important; /* Staccato leggermente dall'elemento */
    border-radius: 4px !important;
}

.vweb-product-link:focus-visible {
    color: var(--vweb-text-secondary) !important; /* Colore scuro predefinito */
}

/* Impedisce al focus sul prezzo di alterarne lo stile base */
.vweb-cart-price:focus {
    outline: none; /* Coperto dal focus-visible */
    text-decoration: none !important;
}

/* Gestione specifica per i link interni della modale di login */
.vweb-help-link:focus-visible {
    outline: 2px solid var(--vweb-color-primary) !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

/* Rimuove l'outline nativo dall'ancora invisibile delle
   news quando riceve il focus programmatico dallo Screen Reader. */
#newsModalAccessibilityAnchor:focus,
#newsModalAccessibilityAnchor:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   ACCESSIBILITÀ - CONTROLLO VISIVO FOCUS (FIX DOPPIO BORDO)
   ========================================================================== */

/* 1. Campi di input (Testo, Date, Note): Stile classico ed elegante, nessun doppio bordo */
.checkout .form-control:focus,
.checkout .form-control:focus-visible,
.checkout textarea:focus,
.checkout textarea:focus-visible {
    outline: none !important;
    border-color: var(--vweb-color-primary) !important;
    box-shadow: 0 0 5px rgba(255, 119, 39, 0.4) !important; /* Morbido alone stile modale Login */
}

/* 2. Tendine (Select): Focus pulito applicato al contenitore senza sdoppiamenti */
.checkout .select-style:focus-within {
    border-color: var(--vweb-color-primary) !important;
    box-shadow: 0 0 5px rgba(255, 119, 39, 0.4) !important;
    outline: none !important;
}

.checkout select:focus,
.checkout select:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* 3. La "Cornice Staccata" (Outline forte) riservata SOLO ad elementi non testuali (Tab) */
.checkout button:focus-visible,
.checkout a:focus-visible,
.checkout [tabindex="0"]:focus-visible,
.checkout .checkbox input:focus-visible + label {
    outline: 3px solid var(--vweb-color-primary) !important;
    outline-offset: 3px !important;
    border-radius: 4px !important;
}