/* ============================================================================
   WCAG 2.2 AA/AAA GLOBAL STYLES
   ============================================================================ */

/* ----------------------------------------------------------------------------
   FOCUS VISIBILE UNIVERSALE
   ---------------------------------------------------------------------------- */
*:focus,
*:focus-visible,
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus {
    outline: 3px solid #0066FF !important;
    outline-offset: 2px !important;
}

/* ----------------------------------------------------------------------------
   SKIP LINK
   ---------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000000;
    color: #FFFFFF;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100000;
    font-size: 14px;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #0066FF;
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   SCREEN READER ONLY
   ---------------------------------------------------------------------------- */

/* Overlay rimosso - non necessario */

/* ----------------------------------------------------------------------------
   SCREEN READER ONLY
   ---------------------------------------------------------------------------- */
.sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ----------------------------------------------------------------------------
   CONTRASTO MINIMO WCAG AA
   ---------------------------------------------------------------------------- */
body {
    color: #333333;
    background: #FFFFFF;
}

/* ----------------------------------------------------------------------------
   TOUCH TARGET MINIMI (WCAG 2.5.5)
   
   NOTA: La regola generica per min-height/min-width 44px è stata RIMOSSA
   perché rompeva il layout di molti elementi (paginazione, bottoni piccoli, etc.)
   
   WCAG 2.5.5 può essere soddisfatto in altri modi:
   - Padding intorno agli elementi piccoli per aumentare l'area cliccabile
   - Dimensioni adeguate degli elementi principali (bottoni primari)
   - Design responsive che tiene conto dell'accessibilità
   
   Non serve forzare 44px genericamente su tutti gli elementi interattivi.
   ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ----------------------------------------------------------------------------
   CAROSELLI - FOCUS CONTAINER REGION (WCAG 2.4.3)
   WCAG: Il container region con tabindex="0" deve avere un focus visibile ma non invasivo
   ---------------------------------------------------------------------------- */
/* WCAG: Focus per container region dei caroselli - visibile ma discreto */
.wcag-products-mode[role="region"]:focus,
.wcag-products-mode[role="region"]:focus-visible,
.wcag-blog-mode[role="region"]:focus,
.wcag-blog-mode[role="region"]:focus-visible,
.wcag-gallery-mode[role="region"]:focus,
.wcag-gallery-mode[role="region"]:focus-visible,
.wcag-slider-mode[role="region"]:focus,
.wcag-slider-mode[role="region"]:focus-visible,
.wcag-product-categories-mode[role="region"]:focus,
.wcag-product-categories-mode[role="region"]:focus-visible {
    outline: 2px dashed #0066FF !important;
    outline-offset: 3px !important;
}

/* ----------------------------------------------------------------------------
   LIGHTBOX MAGNIFIC POPUP - BOTTONI SEMPRE VISIBILI
   WCAG: Solo visibilità su mobile, dimensioni originali del tema
   ---------------------------------------------------------------------------- */
.mfp-close,
.mfp-arrow {
    background-color: rgba(0, 0, 0, 1) !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
}

.mfp-close:hover,
.mfp-close:focus,
.mfp-arrow:hover,
.mfp-arrow:focus {
    background-color: rgba(0, 0, 0, 1) !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------------------------
   LIGHTBOX MAGNIFIC POPUP - RESPONSIVE (MOBILE E TABLET)
   WCAG: Solo visibilità e z-index su mobile, NON modificare dimensioni
   ---------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* WCAG: Tablet e mobile - solo visibilità e z-index, dimensioni originali */
    .mfp-arrow {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        z-index: 10005 !important; /* WCAG: Z-index alto per essere sopra le immagini */
        pointer-events: auto !important;
        background-color: rgba(0, 0, 0, 1) !important;
    }
    
    .mfp-arrow::before {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .mfp-arrow i {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ----------------------------------------------------------------------------
   SLIDER FLICKITY - FRECCE PROPORZIONATE, STILE LIGHTBOX, INSIDE/OUTSIDE
   WCAG: Frecce con background piccolo, icona grande, adattate a inside/outside
   ---------------------------------------------------------------------------- */
.flickity-prev-next-button,
.slider .flickity-prev-next-button,
.slider-show-nav .flickity-prev-next-button,
.row-slider .flickity-prev-next-button {
    /* WCAG: Forza sempre frecce visibili, accessibili e FISSE */
    opacity: 1 !important;
    display: block !important;
    pointer-events: auto !important;
    visibility: visible !important;
    
    /* WCAG: Posizionamento centrato verticalmente */
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    margin: 0 !important;
    
    /* WCAG: Background piccolo, compatto */
    background-color: rgba(0, 0, 0, 1) !important;
    background: rgba(0, 0, 0, 1) !important;
    color: #FFFFFF !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    
    /* WCAG: RIMUOVI tutti gli effetti hover e transizioni */
    transition: none !important;
}

/* WCAG: Icona GRANDE dentro background piccolo - MOLTO VISIBILE */
.flickity-prev-next-button svg {
    pointer-events: none !important;
    width: 36px !important;
    height: 36px !important;
    display: block !important;
    visibility: visible !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
    margin: auto !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.flickity-prev-next-button svg path,
.flickity-prev-next-button svg .arrow,
.flickity-prev-next-button .arrow {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    stroke-width: 3 !important;
    color: #FFFFFF !important;
}

/* WCAG: Forza colore bianco su tutti gli elementi interni */
.flickity-prev-next-button * {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* WCAG: Posizionamento INSIDE - dentro il carousel con % */
.slider-nav-inside .flickity-prev-next-button.previous,
.slider-nav-inside .row-slider .flickity-prev-next-button.previous {
    left: 2% !important;
    right: auto !important;
}

.slider-nav-inside .flickity-prev-next-button.next,
.slider-nav-inside .row-slider .flickity-prev-next-button.next {
    right: 2% !important;
    left: auto !important;
}

/* WCAG: Posizionamento OUTSIDE - fuori dal carousel con % */
.slider-nav-outside .flickity-prev-next-button.previous,
.slider-nav-outside .row-slider .flickity-prev-next-button.previous {
    left: -6% !important;
    right: auto !important;
}

.slider-nav-outside .flickity-prev-next-button.next,
.slider-nav-outside .row-slider .flickity-prev-next-button.next {
    right: -6% !important;
    left: auto !important;
}

/* WCAG: Default (senza classe) - OUTSIDE con % */
.flickity-prev-next-button.previous {
    left: -6% !important;
    right: auto !important;
}

.flickity-prev-next-button.next {
    right: -6% !important;
    left: auto !important;
}

/* WCAG: SOVRASCRIVI regole tema che applicano hover - frecce sempre fisse */
.flickity-prev-next-button:hover,
.flickity-prev-next-button:active,
.slider:hover .flickity-prev-next-button,
.slider:hover .flickity-prev-next-button:hover,
.slider-show-nav .flickity-prev-next-button,
.slider-show-nav .flickity-prev-next-button:hover,
.slider:hover .slider-show-nav .flickity-prev-next-button {
    background-color: rgba(0, 0, 0, 1) !important;
    background: rgba(0, 0, 0, 1) !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
    visibility: visible !important;
    display: block !important;
}

/* WCAG: SOVRASCRIVI regole tema per transform - mantieni translateY per centrare verticalmente */
.slider:hover .flickity-prev-next-button,
.slider-show-nav .flickity-prev-next-button,
.slider:hover .slider-show-nav .flickity-prev-next-button {
    transform: translateY(-50%) !important;
}

/* WCAG: Focus visibile - outline blu come lightbox, SENZA hover */
.flickity-prev-next-button:focus,
.flickity-prev-next-button:focus-visible,
.flickity-prev-next-button:focus-within {
    outline: 3px solid #0066FF !important;
    outline-offset: 2px !important;
    background-color: rgba(0, 0, 0, 1) !important;
    background: rgba(0, 0, 0, 1) !important;
    opacity: 1 !important;
    z-index: 11 !important;
    transform: translateY(-50%) !important;
}

/* WCAG: Focus anche quando è button nativo */
.flickity-prev-next-button button:focus,
.flickity-prev-next-button button:focus-visible,
.flickity-prev-next-button button:focus-within {
    outline: 3px solid #0066FF !important;
    outline-offset: 2px !important;
}

/* ----------------------------------------------------------------------------
   SLIDER FLICKITY - FRECCE MOBILE E TABLET
   WCAG: Su mobile/tablet le frecce devono essere SEMPRE visibili e accessibili
   Posizionate sopra le immagini con bordo laterale
   ---------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* WCAG: Su tablet e mobile, forza sempre frecce INSIDE sopra le immagini */
    .flickity-prev-next-button.previous,
    .slider-nav-outside .flickity-prev-next-button.previous,
    .row-slider .flickity-prev-next-button.previous {
        left: 10px !important; /* Bordo sinistro */
        right: auto !important;
        z-index: 12 !important; /* Sopra le immagini */
    }
    
    .flickity-prev-next-button.next,
    .slider-nav-outside .flickity-prev-next-button.next,
    .row-slider .flickity-prev-next-button.next {
        right: 10px !important; /* Bordo destro */
        left: auto !important;
        z-index: 12 !important; /* Sopra le immagini */
    }
    
    /* WCAG: Assicura che le frecce siano sempre visibili su mobile/tablet */
    .flickity-prev-next-button {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        pointer-events: auto !important;
    }
    
    /* WCAG: Rimuovi padding extra su mobile/tablet (non serve spazio per frecce esterne) */
    .flickity-enabled.slider-nav-outside .flickity-viewport,
    .slider-nav-outside .flickity-viewport {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* WCAG: Mobile specifico (smartphone) - frecce più piccole ma sempre visibili */
@media (max-width: 768px) {
    .flickity-prev-next-button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    .flickity-prev-next-button svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* WCAG: Frecce più vicine ai bordi su mobile */
    .flickity-prev-next-button.previous {
        left: 8px !important;
    }
    
    .flickity-prev-next-button.next {
        right: 8px !important;
    }
}

/* WCAG: Tablet specifico (iPad) - frecce ben visibili */
@media (min-width: 769px) and (max-width: 1024px) {
    .flickity-prev-next-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    .flickity-prev-next-button svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* WCAG: Frecce con più spazio dai bordi su tablet */
    .flickity-prev-next-button.previous {
        left: 15px !important;
    }
    
    .flickity-prev-next-button.next {
        right: 15px !important;
    }
}

/* WCAG: Container region - assicura spazio per frecce esterne */
.flickity-enabled[role="region"],
.row-slider[role="region"],
.slider[role="region"],
.flickity-enabled {
    /* Il container region non deve essere focusabile (corretto secondo WCAG) */
    outline: none !important;
    /* WCAG: Assicura che il container sia sempre identificabile */
    position: relative !important;
}

/* WCAG: NON aggiungere padding ai wrapper - interferisce con groupCells e crea spazio bianco */
.slider-nav-outside.row-slider,
.slider-nav-outside.slider,
.slider-nav-outside,
.slider-nav-inside.row-slider,
.slider-nav-inside.slider,
.slider-nav-inside {
    /* NON toccare - Flickity e tema gestiscono già tutto */
}

/* WCAG: Frecce disabilitate */
.flickity-prev-next-button:disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* ----------------------------------------------------------------------------
   SLIDER FLICKITY - BULLET/PAGE DOTS WCAG COMPLIANT
   WCAG: Bullet SOTTO, niente sfondo, palline NERE come frecce
   ---------------------------------------------------------------------------- */
.flickity-page-dots {
    /* WCAG: Posizionamento SOTTO - rimuovi qualsiasi posizionamento sopra */
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 5 !important;
    /* WCAG: NESSUN sfondo - pulito come richiesto */
    background-color: transparent !important;
    background: none !important;
    padding: 10px 0 !important;
    margin-top: 15px !important;
    display: block !important;
}

.flickity-page-dots .dot {
    /* Dimensioni originali dot visibile */
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    /* WCAG: Palline NERE come frecce - più discrete */
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(0, 0, 0, 0.5) !important;
    margin: 0 5px !important;
    cursor: pointer !important;
    opacity: 1 !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    /* WCAG: Padding ridotto per area cliccabile più piccola (10px + 4px padding x 2 = 18px) */
    padding: 4px !important;
    box-sizing: content-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* WCAG: Bullet attivo/selezionato - più grande e più visibile */
.flickity-page-dots .dot.is-selected {
    background-color: rgba(0, 0, 0, 1) !important;
    border-color: rgba(0, 0, 0, 1) !important;
    /* Dimensioni originali quando selezionato */
    width: 14px !important;
    height: 14px !important;
    opacity: 1 !important;
    transform: scale(1.2) !important;
    /* WCAG: Padding ridotto per area più piccola (14px + 3px padding x 2 = 20px) */
    padding: 3px !important;
    box-sizing: content-box !important;
}

/* WCAG: Focus bullet - outline blu */
.flickity-page-dots .dot:focus,
.flickity-page-dots .dot:focus-visible {
    outline: 3px solid #0066FF !important;
    outline-offset: 2px !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    border-color: rgba(0, 0, 0, 1) !important;
}

/* WCAG: Hover bullet - leggermente più scuro (senza movimento) */
.flickity-page-dots .dot:hover {
    background-color: rgba(0, 0, 0, 0.6) !important;
    transform: none !important;
}

/* ----------------------------------------------------------------------------
   SLIDER FLICKITY - CONTROLLO AUTO SLIDE (PLAY/PAUSE TOGGLE)
   WCAG: Posizionato sotto la freccia destra - responsive
   IMPORTANTE: Funziona sia per slider (.wcag-slider-mode) che per gallery (.wcag-gallery-mode) con autoplay
   ---------------------------------------------------------------------------- */
/* WCAG: Container play/pause - SLIDER E GALLERY */
.wcag-slider-mode .wcag-slider-controls,
.wcag-gallery-mode .wcag-slider-controls,
.wcag-products-mode .wcag-slider-controls,
.flickity-enabled .wcag-slider-controls {
    position: absolute !important;
    top: calc(50% + 35px) !important; /* Sotto la freccia destra (freccia è 40px + margine) */
    right: -6% !important; /* Stesso allineamento della freccia destra */
    z-index: 11 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    bottom: auto !important; /* Rimuovi bottom che potrebbe essere impostato inline */
}

/* WCAG: Se freccia è inside, adatta posizione - SLIDER, GALLERY E PRODOTTI */
.wcag-slider-mode .flickity-prev-next-button.is-inside ~ .wcag-slider-controls,
.wcag-slider-mode .flickity-prev-next-button.next.is-inside ~ .wcag-slider-controls,
.wcag-slider-mode.is-inside .wcag-slider-controls,
.wcag-gallery-mode .flickity-prev-next-button.is-inside ~ .wcag-slider-controls,
.wcag-gallery-mode .flickity-prev-next-button.next.is-inside ~ .wcag-slider-controls,
.wcag-gallery-mode.is-inside .wcag-slider-controls,
.wcag-products-mode .flickity-prev-next-button.is-inside ~ .wcag-slider-controls,
.wcag-products-mode .flickity-prev-next-button.next.is-inside ~ .wcag-slider-controls,
.wcag-products-mode.is-inside .wcag-slider-controls,
.flickity-enabled.is-inside .wcag-slider-controls {
    right: 2% !important;
}

/* WCAG: Su mobile, sposta più vicino - SLIDER, GALLERY E PRODOTTI */
@media (max-width: 768px) {
    .wcag-slider-mode .wcag-slider-controls,
    .wcag-gallery-mode .wcag-slider-controls,
    .wcag-products-mode .wcag-slider-controls,
    .flickity-enabled .wcag-slider-controls {
        right: -4% !important;
    }
    .wcag-slider-mode.is-inside .wcag-slider-controls,
    .wcag-gallery-mode.is-inside .wcag-slider-controls,
    .wcag-products-mode.is-inside .wcag-slider-controls,
    .flickity-enabled.is-inside .wcag-slider-controls {
        right: 1% !important;
    }
}

/* WCAG: Pulsante play/pause - SLIDER, GALLERY E PRODOTTI */
.wcag-slider-mode .wcag-slider-controls button,
.wcag-gallery-mode .wcag-slider-controls button,
.wcag-products-mode .wcag-slider-controls button,
.flickity-enabled .wcag-slider-controls button {
    background-color: rgba(0, 0, 0, 1) !important;
    color: #FFFFFF !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    cursor: pointer !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    padding: 0 !important;
    transition: none !important;
}

.wcag-slider-mode .wcag-slider-controls button:focus,
.wcag-slider-mode .wcag-slider-controls button:focus-visible,
.wcag-gallery-mode .wcag-slider-controls button:focus,
.wcag-gallery-mode .wcag-slider-controls button:focus-visible,
.wcag-products-mode .wcag-slider-controls button:focus,
.wcag-products-mode .wcag-slider-controls button:focus-visible,
.flickity-enabled .wcag-slider-controls button:focus,
.flickity-enabled .wcag-slider-controls button:focus-visible {
    outline: 3px solid #0066FF !important;
    outline-offset: 2px !important;
    background-color: rgba(0, 0, 0, 1) !important;
}

.wcag-slider-mode .wcag-slider-controls button:hover,
.wcag-gallery-mode .wcag-slider-controls button:hover,
.wcag-products-mode .wcag-slider-controls button:hover,
.flickity-enabled .wcag-slider-controls button:hover {
    background-color: rgba(0, 0, 0, 1) !important;
    opacity: 1 !important;
}

.wcag-slider-mode .wcag-slider-controls button svg,
.wcag-gallery-mode .wcag-slider-controls button svg,
.wcag-products-mode .wcag-slider-controls button svg,
.flickity-enabled .wcag-slider-controls button svg {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
}

/* ----------------------------------------------------------------------------
   FLICKITY VIEWPORT - RIMUOVI TABINDEX
   ---------------------------------------------------------------------------- */
.flickity-viewport {
    outline: none !important;
}

.flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: grabbing;
}

/* ----------------------------------------------------------------------------
   FLICKITY - LINK NELLE SLIDE VISIBILI ACCESSIBILI AL FOCUS
   WCAG: I link nelle slide visibili devono essere focusabili e accessibili
   IMPORTANTE: Applicare SOLO agli slider (.wcag-slider-mode), NON alle gallery (.wcag-gallery-mode)
   ---------------------------------------------------------------------------- */
/* WCAG: SOLO SLIDER - NON toccare gallery */
.wcag-slider-mode .is-selected,
.wcag-slider-mode .is-selected .col-inner,
.wcag-slider-mode .is-selected .img-inner {
    pointer-events: auto !important;
    position: relative !important;
}

/* WCAG: Link nelle slide visibili - accessibili con TAB - SOLO SLIDER */
.wcag-slider-mode .is-selected a,
.wcag-slider-mode .is-selected .col-inner a,
.wcag-slider-mode .is-selected .img-inner a {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
    outline: none !important; /* Il focus sarà gestito dal CSS globale WCAG */
    visibility: visible !important;
    opacity: 1 !important;
}

/* WCAG: Focus visibile per i link nelle slide - PSEUDO-ELEMENTO OVERLAY - SOLO SLIDER */
.wcag-slider-mode .is-selected a:focus,
.wcag-slider-mode .is-selected a:focus-visible,
.wcag-slider-mode .is-selected .col-inner a:focus,
.wcag-slider-mode .is-selected .col-inner a:focus-visible,
.wcag-slider-mode .is-selected .img-inner a:focus,
.wcag-slider-mode .is-selected .img-inner a:focus-visible {
    outline: none !important;
    position: relative !important;
    z-index: 11 !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* WCAG: Pseudo-elemento ::before per creare border overlay - SOLO SLIDER */
.wcag-slider-mode .is-selected a:focus::before,
.wcag-slider-mode .is-selected a:focus-visible::before,
.wcag-slider-mode .is-selected .col-inner a:focus::before,
.wcag-slider-mode .is-selected .col-inner a:focus-visible::before,
.wcag-slider-mode .is-selected .img-inner a:focus::before,
.wcag-slider-mode .is-selected .img-inner a:focus-visible::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border: 3px solid #0066FF !important;
    border-radius: 0 !important;
    pointer-events: none !important; /* Permette click attraverso */
    z-index: 999 !important; /* Sopra tutto */
    box-sizing: border-box !important;
}

/* ----------------------------------------------------------------------------
   BANNER - Link banner non deve interferire con posizionamento banner-layer
   WCAG: Il link banner avvolge tutto il content per renderlo cliccabile
   ma NON deve interferire con il posizionamento assoluto dei banner-layer
   ---------------------------------------------------------------------------- */
/* WCAG: Il link banner deve essere trasparente per il layout */
.banner-layers .banner-link.fill {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* WCAG: I banner-layer mantengano il loro posizionamento assoluto anche dentro il link */
.banner-layers .banner-link.fill .banner-layer {
    /* Mantiene position: absolute e tutte le classi di posizionamento (x50, y50, ecc.) */
    position: absolute !important;
}

/* ----------------------------------------------------------------------------
   ACCORDION - SPACING ICONA/TITOLO QUANDO APERTO
   WCAG: Quando l'accordion è aperto, l'icona ruotata si avvicina troppo al titolo
   Aggiungiamo margin-right all'icona quando è attivo per aumentare lo spazio
   ---------------------------------------------------------------------------- */
.accordion-title.active .toggle,
.accordion-item.active .accordion-title .toggle {
    margin-right: 10px !important;
}

/* WCAG: Spacing anche quando l'icona ruota (transizione) */
.accordion-title .toggle {
    display: inline-block !important;
    transition: transform 0.3s ease, margin-right 0.3s ease, left 0.3s ease !important;
}

.accordion-title.active .toggle,
.accordion-item.active .accordion-title .toggle {
    margin-right: 12px !important;
    left: -18px !important;
}

/* ----------------------------------------------------------------------------
   IMAGE BOX - FOCUS VISIBILE SUI LINK IMMAGINI
   WCAG: I link che avvolgono immagini devono avere focus visibile e accessibile
   ---------------------------------------------------------------------------- */
/* WCAG: Assicura che il container non tagli il focus */
.box-image {
    position: relative !important;
    overflow: visible !important; /* IMPORTANTE: permette al focus di essere visibile */
}

/* WCAG: Assicura che il link sia accessibile con TAB e visibile */
/* ESCLUDI blog posts - gestiti separatamente */
.box-image > a:not(.box-blog-post .box-image a) {
    display: block !important;
    position: relative !important;
    outline: none !important; /* Il focus sarà gestito dal pseudo-elemento */
    z-index: 1 !important;
}

/* WCAG: Focus visibile - usa pseudo-elemento per essere sempre visibile */
.box-image > a:focus,
.box-image > a:focus-visible {
    outline: none !important;
}

/* WCAG: Pseudo-elemento per border overlay - sempre visibile anche con overflow hidden */
.box-image > a:focus::before,
.box-image > a:focus-visible::before {
    content: '' !important;
    position: absolute !important;
    top: -3px !important;
    left: -3px !important;
    right: -3px !important;
    bottom: -3px !important;
    border: 3px solid #0066FF !important;
    border-radius: 0 !important;
    pointer-events: none !important;
    z-index: 10000 !important; /* SOPRA TUTTO - molto alto */
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* WCAG: Se c'è un div interno, assicura che non blocchi il focus */
.box-image > a > div {
    position: relative !important;
    z-index: 1 !important;
}

/* WCAG: Forza overflow visible anche sui parent che potrebbero tagliare il focus */
/* ESCLUDI blog posts - gestiti separatamente */
.box.has-hover:not(.box-blog-post) .box-image {
    overflow: visible !important;
}

/* WCAG: Focus visibile per caroselli - outline semplice */
.flickity-enabled a:focus,
.flickity-enabled a:focus-visible {
    outline: 3px solid #0066FF !important;
    outline-offset: 2px !important;
}


/* WCAG: Fallback per altri box-image (non caroselli) - mantieni box-shadow */
.box-image > a:focus,
.box-image > a:focus-visible {
    box-shadow: 0 0 0 3px #0066FF !important;
}


/* WCAG: Assicura che .flickity-viewport mantenga sempre overflow: hidden per nascondere slide nascoste */
.flickity-viewport {
    overflow: hidden !important;
}

/* ----------------------------------------------------------------------------
   UX GALLERY - PADDING TOP PER FOCUS BORDO SUPERIORE
   WCAG: Aggiungi padding-top al viewport per mostrare il focus outline sopra
   ---------------------------------------------------------------------------- */
/* WCAG: Padding-top per gallery carousel - permette di vedere il focus outline superiore */
/* Usa percentuale (1.5%) per adattarsi meglio a diverse dimensioni del viewport */
.wcag-gallery-mode .flickity-viewport {
    padding-top: 1.5% !important;
}

/* ----------------------------------------------------------------------------
   UX PRODUCTS CAROUSEL - PADDING TOP PER FOCUS BORDO SUPERIORE
   WCAG: Aggiungi padding-top al viewport per mostrare il focus outline sopra
   ---------------------------------------------------------------------------- */
/* WCAG: Padding-top per products carousel - permette di vedere il focus outline superiore */
.wcag-products-mode .flickity-viewport {
    padding-top: 1.5% !important;
}

/* ----------------------------------------------------------------------------
   UX BLOG POSTS CAROUSEL - PADDING TOP PER FOCUS BORDO SUPERIORE
   WCAG: Aggiungi padding-top al viewport per mostrare il focus outline sopra
   ---------------------------------------------------------------------------- */
/* WCAG: Padding-top per blog carousel - permette di vedere il focus outline superiore */
.wcag-blog-mode .flickity-viewport {
    padding-top: 1.5% !important;
}

/* ----------------------------------------------------------------------------
   UX PRODUCT CATEGORIES CAROUSEL - PADDING TOP PER FOCUS BORDO SUPERIORE
   WCAG: Aggiungi padding-top al viewport per mostrare il focus outline sopra
   ---------------------------------------------------------------------------- */
/* WCAG: Padding-top per product categories carousel - permette di vedere il focus outline superiore */
.wcag-product-categories-mode .flickity-viewport {
    padding-top: 1.5% !important;
}

/* ----------------------------------------------------------------------------
   UX PRODUCT CATEGORIES CAROUSEL - FOCUS BORDO ATTACCATO ALLA CARD
   WCAG: Rimuovi spazio bianco tra focus outline e card categoria
   ---------------------------------------------------------------------------- */
/* WCAG: Rimuovi spazio bianco tra focus outline e card categoria prodotto (come per prodotti/blog) */
.wcag-product-categories-mode .product-category .col-inner > a:focus,
.wcag-product-categories-mode .product-category .col-inner > a:focus-visible {
    outline: 3px solid #0066FF !important;
    outline-offset: 0 !important;
}

/* ----------------------------------------------------------------------------
   SLIDER NAV REVEAL - RIMUOVI BOX-SHADOW
   WCAG: Rimuovi box-shadow dalle frecce per un aspetto più pulito
   ---------------------------------------------------------------------------- */
.slider-nav-reveal .flickity-prev-next-button,
.slider-nav-reveal .flickity-prev-next-button:hover {
    box-shadow: none !important;
}

/* WCAG: Posizionamento frecce per slider-nav-reveal */
.slider-nav-reveal .flickity-prev-next-button.next {
    right: 5px !important;
}

.slider-nav-reveal .flickity-prev-next-button.previous {
    left: 5px !important;
}

/* ----------------------------------------------------------------------------
   PRODUCTS CAROUSEL - SINGLE LINK WRAPPER
   WCAG: Link unico sulla card prodotto per accessibilità
   ---------------------------------------------------------------------------- */
/* WCAG: Link wrapper per card prodotto - un solo focus per tutta la card */
.product-card-link.wcag-single-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.product-card-link.wcag-single-link:focus,
.product-card-link.wcag-single-link:focus-visible {
	outline: 3px solid #0066FF !important;
	outline-offset: 2px !important;
}

/* Nascondi link interni quando c'è il wrapper link */
.product-card-link.wcag-single-link .box-image a,
.product-card-link.wcag-single-link .box-text a {
	pointer-events: none !important;
	text-decoration: none;
}

.wcag-products-mode .product-small.box .wcag-product-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    text-decoration: none;
}

/* WCAG: Rimuovi spazio bianco tra focus outline e card prodotto (come per gallery) */
.wcag-products-mode .product-small.box .wcag-product-card-link:focus,
.wcag-products-mode .product-small.box .wcag-product-card-link:focus-visible {
    outline: 3px solid #0066FF !important;
    outline-offset: 0 !important;
}

/* ----------------------------------------------------------------------------
   BLOG POSTS - SINGLE LINK WRAPPER (TUTTI I LAYOUT)
   WCAG: Link unico sulla card blog post per accessibilità - funziona per slider, row, grid, ecc.
   ---------------------------------------------------------------------------- */
/* WCAG: Card blog post deve essere position relative per link absolute */
.box-blog-post {
    position: relative !important;
}

/* WCAG: Link wrapper che copre tutta la card blog post - TUTTI i layout */
.box-blog-post .wcag-blog-card-link {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
    text-decoration: none !important;
}

/* WCAG: Rimuovi spazio bianco tra focus outline e card blog (come per prodotti) */
.box-blog-post .wcag-blog-card-link:focus,
.box-blog-post .wcag-blog-card-link:focus-visible {
    outline: 3px solid #0066FF !important;
    outline-offset: 0 !important;
}

/* WCAG: Assicura che elementi decorativi/interattivi (badge, overlay) siano sopra il link */
.box-blog-post .badge {
    position: relative !important;
    z-index: 3 !important;
}

.box-blog-post .box-text {
    position: relative !important;
    z-index: 2 !important;
}

/* WCAG: Assicura che elementi interattivi (add to cart, quick view) siano sopra il link */
.wcag-products-mode .product-small.box .image-tools,
.wcag-products-mode .product-small.box .overlay-tools,
.wcag-products-mode .product-small.box .add-to-cart-button,
.wcag-products-mode .product-small.box .quick-view,
.wcag-products-mode .product-small.box button,
.wcag-products-mode .product-small.box .button {
    position: relative;
    z-index: 2;
}

/* ----------------------------------------------------------------------------
   BLOG POSTS - FOCUS VISIBILE SUI LINK IMMAGINI
   WCAG: I link delle immagini nei blog posts devono avere focus visibile
   NOTA: MINIMO CSS per non rompere il layout
   ---------------------------------------------------------------------------- */
/* WCAG: Focus visibile - SOLUZIONE DEFINITIVA */
.box-blog-post .box-image {
    position: relative !important;
}

/* WCAG: Quando il link ha focus, mostra overflow per far vedere il border */
.box-blog-post .box-image:has(a:focus),
.box-blog-post .box-image:has(a:focus-visible),
.box-blog-post .box-image:has(a.plain:focus),
.box-blog-post .box-image:has(a.plain:focus-visible) {
    overflow: visible !important;
}

.box-blog-post .box-image .image-cover:has(a:focus),
.box-blog-post .box-image .image-cover:has(a:focus-visible),
.box-blog-post .box-image .image-cover:has(a.plain:focus),
.box-blog-post .box-image .image-cover:has(a.plain:focus-visible) {
    overflow: visible !important;
}

/* WCAG: Fallback per browser senza :has() - usa classe JS */
.box-blog-post .box-image.wcag-link-focused,
.box-blog-post .box-image .image-cover.wcag-link-focused {
    overflow: visible !important;
}

/* WCAG: Forza position: absolute sul link quando ha focus - copre tutta l'area di .image-cover */
/* IMPORTANTE: Il link deve coprire tutta l'area dell'immagine per evitare schiacciamento */
.box-blog-post .box-image .image-cover {
    position: relative !important;
}

.box-blog-post.box-blog-post .box-image.box-image a.plain:focus,
.box-blog-post.box-blog-post .box-image.box-image a.plain:focus-visible,
.box-blog-post .box-image a:focus,
.box-blog-post .box-image a:focus-visible,
.box-blog-post .box-image a.plain:focus,
.box-blog-post .box-image a.plain:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    z-index: 1 !important;
}

/* WCAG: Pseudo-elemento per il focus border - ALTA SPECIFICITÀ */
.box-blog-post .box-image a:focus::before,
.box-blog-post .box-image a:focus-visible::before,
.box-blog-post .box-image a.plain:focus::before,
.box-blog-post .box-image a.plain:focus-visible::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: -3px !important;
    left: -3px !important;
    right: -3px !important;
    bottom: -3px !important;
    border: 3px solid #0066FF !important;
    pointer-events: none !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
}

/* ----------------------------------------------------------------------------
   ICON BOX / FEATURED BOX - FOCUS VISIBILE SUI LINK
   WCAG: I link che avvolgono icon box devono avere focus visibile e accessibile
   ---------------------------------------------------------------------------- */
/* WCAG: Link che avvolge icon-box - focus visibile */
.icon-box:focus-within a.plain,
a.plain:has(.icon-box):focus,
a.plain:has(.icon-box):focus-visible {
    outline: 3px solid #0066FF !important;
    outline-offset: 2px !important;
}

/* WCAG: Pseudo-elemento per border overlay quando il link ha focus */
a.plain:has(.icon-box):focus::before,
a.plain:has(.icon-box):focus-visible::before {
    content: '' !important;
    position: absolute !important;
    top: -3px !important;
    left: -3px !important;
    right: -3px !important;
    bottom: -3px !important;
    border: 3px solid #0066FF !important;
    pointer-events: none !important;
    z-index: 10000 !important;
    box-sizing: border-box !important;
}

/* WCAG: Fallback per browser senza supporto :has() - usa classe JavaScript */
a.plain.icon-box-link-focused {
    position: relative !important;
}

a.plain.icon-box-link-focused:focus,
a.plain.icon-box-link-focused:focus-visible {
    outline: 3px solid #0066FF !important;
    outline-offset: 2px !important;
}

a.plain.icon-box-link-focused:focus::before,
a.plain.icon-box-link-focused:focus-visible::before {
    content: '' !important;
    position: absolute !important;
    top: -3px !important;
    left: -3px !important;
    right: -3px !important;
    bottom: -3px !important;
    border: 3px solid #0066FF !important;
    pointer-events: none !important;
    z-index: 10000 !important;
    box-sizing: border-box !important;
}

/* ----------------------------------------------------------------------------
   UX IMAGE MODULE - FOCUS BORDO ATTACCATO ALL'IMMAGINE
   WCAG: Il focus deve essere attaccato all'immagine senza spazio bianco
   ---------------------------------------------------------------------------- */
/* WCAG: Focus bordo attaccato per modulo ux_image - rimuovi outline-offset */
.img.has-hover a:focus,
.img.has-hover a:focus-visible {
    outline: 3px solid #0066FF !important;
    outline-offset: 0 !important;
}

/* ----------------------------------------------------------------------------
   UX GALLERY MODULE - FOCUS BORDO ATTACCATO ALL'IMMAGINE
   WCAG: Il focus deve essere attaccato all'immagine senza spazio bianco
   ---------------------------------------------------------------------------- */
/* WCAG: Focus bordo attaccato per modulo ux_gallery - rimuovi outline-offset */
/* Il link avvolge tutto il gallery-box, quindi targetizziamo il link dentro gallery-col */
.gallery-col .col-inner > a:focus,
.gallery-col .col-inner > a:focus-visible,
.gallery-col a:has(.gallery-box):focus,
.gallery-col a:has(.gallery-box):focus-visible {
    outline: 3px solid #0066FF !important;
    outline-offset: 0 !important;
}

/* ----------------------------------------------------------------------------
   MENU DROPDOWN - NAVIGAZIONE DA TASTIERA COME APPLE
   WCAG: Comportamento come Apple - hover apre dropdown, tastiera apre solo con ENTER/SPACE
   ---------------------------------------------------------------------------- */
/* WCAG: Forza visibilità del dropdown quando è aperto (via click/ENTER/SPACE, NON al focus) */
.header-nav-main .has-dropdown.is-active .nav-dropdown,
.header-nav-main .has-dropdown.is-active .sub-menu,
.header-nav .has-dropdown.is-active .nav-dropdown,
.header-nav .has-dropdown.is-active .sub-menu,
.nav-dropdown.nav-open,
.sub-menu.nav-open,
/* WCAG: Classi aggiuntive per navigazione da tastiera (quando aperto con ENTER/SPACE) */
.header-nav-main .has-dropdown.wcag-keyboard-focus .nav-dropdown,
.header-nav-main .has-dropdown.wcag-keyboard-focus .sub-menu,
.header-nav .has-dropdown.wcag-keyboard-focus .nav-dropdown,
.header-nav .has-dropdown.wcag-keyboard-focus .sub-menu,
.nav-dropdown.wcag-keyboard-open,
.sub-menu.wcag-keyboard-open,
/* WCAG: Attributo data per forzare visibilità quando si naviga con tastiera */
.nav-dropdown[data-wcag-open="true"],
.sub-menu[data-wcag-open="true"],
.header-nav-main .has-dropdown.wcag-keyboard-focus .nav-dropdown[data-wcag-open="true"],
.header-nav-main .has-dropdown.wcag-keyboard-focus .sub-menu[data-wcag-open="true"],
/* WCAG: Selettori più specifici per sovrascrivere Flatsome */
body .header-nav-main li.has-dropdown.wcag-keyboard-focus .nav-dropdown,
body .header-nav-main li.has-dropdown.wcag-keyboard-focus .sub-menu,
body #wrapper .header-nav-main li.has-dropdown.wcag-keyboard-focus .nav-dropdown,
body #wrapper .header-nav-main li.has-dropdown.wcag-keyboard-focus .sub-menu,
body .nav-dropdown[data-wcag-open="true"],
body .sub-menu[data-wcag-open="true"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
}

/* WCAG: Assicura che i link nel dropdown siano accessibili quando è aperto */
.header-nav-main .has-dropdown.is-active .nav-dropdown a,
.header-nav-main .has-dropdown.is-active .sub-menu a,
.nav-dropdown.nav-open a,
.sub-menu.nav-open a,
/* WCAG: Link accessibili quando si naviga con la tastiera */
.header-nav-main .has-dropdown.wcag-keyboard-focus .nav-dropdown a,
.header-nav-main .has-dropdown.wcag-keyboard-focus .sub-menu a,
.nav-dropdown.wcag-keyboard-open a,
.sub-menu.wcag-keyboard-open a,
.nav-dropdown[data-wcag-open="true"] a,
.sub-menu[data-wcag-open="true"] a {
    /* Rimuovi tabindex="-1" se presente via CSS non è possibile, ma assicura che siano cliccabili */
    pointer-events: auto !important;
}

/* ----------------------------------------------------------------------------
   MENU DROPDOWN - PULSANTE SEPARATO COME APPLE
   WCAG: Pulsante separato per aprire dropdown (focusabile, non dentro il link)
   ---------------------------------------------------------------------------- */
/* WCAG: Il pulsante deve essere inline e sembrare parte del link */
.header-nav-main .has-dropdown > a,
.header-nav .has-dropdown > a {
    display: inline-flex !important;
    align-items: center !important;
}

/* WCAG: Stile per pulsante separato che apre dropdown - integrato visivamente come icona */
.wcag-menu-dropdown-toggle {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-left: 6px !important;
    cursor: pointer !important;
    display: inline-block !important;
    vertical-align: middle !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
}

.wcag-menu-dropdown-toggle i {
    font-size: 10px !important;
    line-height: 1 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* WCAG: Focus visibile sul pulsante */
.wcag-menu-dropdown-toggle:focus,
.wcag-menu-dropdown-toggle:focus-visible {
    outline: 3px solid #0066FF !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
    background-color: rgba(0, 102, 255, 0.1) !important;
}

/* ----------------------------------------------------------------------------
   PRODUCT LIGHTBOX - WCAG COMPLIANT
   WCAG: Lightbox accessibile per immagini prodotto
   ---------------------------------------------------------------------------- */
/* WCAG: Lightbox container */
.wcag-product-lightbox {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	margin: auto;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
}

.wcag-lightbox-header {
	position: relative;
	padding: 15px 20px;
	border-bottom: 1px solid #e0e0e0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.wcag-lightbox-close {
	position: relative;
	width: 40px;
	height: 40px;
	border: 2px solid #333;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
}

.wcag-lightbox-close:hover,
.wcag-lightbox-close:focus {
	background: #333;
	color: #fff;
	outline: 3px solid #0066FF;
	outline-offset: 2px;
}

.wcag-lightbox-content {
	position: relative;
	padding: 20px;
	text-align: center;
}

.wcag-lightbox-gallery {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
}

.wcag-lightbox-slide {
	display: none;
	width: 100%;
}

.wcag-lightbox-slide.active {
	display: block;
}

.wcag-lightbox-image {
	max-width: 100%;
	max-height: 70vh;
	height: auto;
	display: block;
	margin: 0 auto;
}

.wcag-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	border: 2px solid #333;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	z-index: 10;
}

.wcag-lightbox-prev {
	left: 20px;
}

.wcag-lightbox-next {
	right: 20px;
}

.wcag-lightbox-nav:hover,
.wcag-lightbox-nav:focus {
	background: #333;
	color: #fff;
	outline: 3px solid #0066FF;
	outline-offset: 2px;
}

.wcag-lightbox-nav:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

.wcag-lightbox-counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	padding: 8px 16px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
}

/* ----------------------------------------------------------------------------
   PHOTOSWIPE LIGHTBOX - WCAG ENHANCEMENTS
   WCAG: Miglioramenti accessibilità per PhotoSwipe
   ---------------------------------------------------------------------------- */
/* WCAG: Focus visibile sui pulsanti PhotoSwipe */
.pswp__button:focus,
.pswp__button:focus-visible {
	outline: 3px solid #0066FF !important;
	outline-offset: 2px !important;
}

/* WCAG: Screen reader text per PhotoSwipe */
.pswp__announcement {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* WCAG: Contatore accessibile */
.pswp__counter[aria-live] {
	font-weight: 600;
}

/* WCAG: Quando si fa hover sul pulsante, considera come hover sul menu item */
.has-dropdown:hover .wcag-menu-dropdown-toggle,
.has-dropdown .wcag-menu-dropdown-toggle:hover {
    pointer-events: auto !important;
}

/* WCAG: Assicura che quando si fa hover, il dropdown rimanga visibile SOLO durante l'hover */
/* NON mantenere aperto quando si esce - Flatsome gestisce la chiusura */
.has-dropdown:hover .nav-dropdown,
.has-dropdown:hover .sub-menu,
.has-dropdown .wcag-menu-dropdown-toggle:hover ~ .nav-dropdown,
.has-dropdown .wcag-menu-dropdown-toggle:hover ~ .sub-menu,
.has-dropdown.current-dropdown .nav-dropdown,
.has-dropdown.current-dropdown .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
}

/* WCAG: wcag-hover-active SOLO durante hover attivo - NON mantenere aperto */
.has-dropdown.wcag-hover-active:hover .nav-dropdown,
.has-dropdown.wcag-hover-active:hover .sub-menu {
    display: grid lanes !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* WCAG: Mega menu full-width - estende per tutta la larghezza del viewport (come BMW) */
/* Forza full-width in TUTTI i casi: hover, focus, click */
/* FORZA STESSA POSIZIONE E ALTEZZA per hover e focus */
/* FORZA POSIZIONAMENTO RISPETTO AL VIEWPORT, NON AL PARENT */
/* IMPORTANTE: Nessuna transizione su position/top/left/right per evitare vibrazione */
.header-nav-main .has-dropdown .nav-dropdown,
.header-nav .has-dropdown .nav-dropdown,
.header-nav-main .has-dropdown .sub-menu,
.header-nav .has-dropdown .sub-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 100vw !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    /* FORZA STESSA POSIZIONE TOP per hover e focus - calcolata via JS */
    margin-top: 0 !important;
    z-index: 9999 !important;
    /* Rimuovi bordi */
    border: none !important;
    /* Preveni sfarfallii durante scroll/sticky */
    will-change: auto !important;
    backface-visibility: hidden !important;
    /* WCAG: Transizioni SOLO su opacity/visibility - NO su position/top/left/right per evitare vibrazione */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out !important;
    /* IMPORTANTE: NO transform durante chiusura per evitare movimento */
    transform: none !important;
}

/* WCAG: Rimuovi bordi dal sub menu */
.header-nav-main .has-dropdown .nav-dropdown,
.header-nav .has-dropdown .nav-dropdown,
.header-nav-main .has-dropdown .sub-menu,
.header-nav .has-dropdown .sub-menu,
.nav-dropdown,
.sub-menu {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* WCAG: Quando header è sticky, mantieni posizionamento corretto e stabile */
.header-wrapper.stuck .header-nav-main .has-dropdown .nav-dropdown,
.header-wrapper.stuck .header-nav .has-dropdown .nav-dropdown,
.header-wrapper.stuck .header-nav-main .has-dropdown .sub-menu,
.header-wrapper.stuck .header-nav .has-dropdown .sub-menu {
    /* La posizione top viene ricalcolata via JS quando header diventa sticky */
    transition: none !important;
    /* Preveni sfarfallii e lampeggiamenti durante hover quando sticky */
    will-change: auto !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important; /* Forza hardware acceleration */
}

/* WCAG: Quando il menu è aperto e l'header è sticky, blocca qualsiasi animazione che causa lampeggiamento */
.header-wrapper.stuck .has-dropdown.current-dropdown .nav-dropdown,
.header-wrapper.stuck .has-dropdown.current-dropdown .sub-menu,
.header-wrapper.stuck .has-dropdown.is-active .nav-dropdown,
.header-wrapper.stuck .has-dropdown.is-active .sub-menu,
.header-wrapper.stuck .has-dropdown.wcag-keyboard-focus .nav-dropdown,
.header-wrapper.stuck .has-dropdown.wcag-keyboard-focus .sub-menu {
    /* Forza posizione stabile - nessuna transizione durante hover */
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out !important;
    transform: translateY(0) translateZ(0) !important;
    position: fixed !important;
    /* Preveni qualsiasi movimento o ricalcolo durante hover */
    pointer-events: auto !important;
}

/* WCAG: Wrapper interno per centrare il contenuto */
.wcag-mega-menu-inner {
    max-width: var(--flatsome-container-width, 1080px);
    margin: 0 auto;
    width: 100%;
}

/* WCAG: Assicura che il mega menu funzioni con hover, focus e click */
/* FORZA STESSA POSIZIONE per hover e focus - NO SPOSTAMENTI */
/* WCAG: Transizioni smooth quando menu si apre (come Audi) */
.header-nav-main .has-dropdown:hover .nav-dropdown,
.header-nav-main .has-dropdown:hover .sub-menu,
.header-nav .has-dropdown:hover .nav-dropdown,
.header-nav .has-dropdown:hover .sub-menu,
.header-nav-main .has-dropdown.wcag-keyboard-focus .nav-dropdown,
.header-nav-main .has-dropdown.wcag-keyboard-focus .sub-menu,
.header-nav .has-dropdown.wcag-keyboard-focus .nav-dropdown,
.header-nav .has-dropdown.wcag-keyboard-focus .sub-menu,
.header-nav-main .has-dropdown.is-active .nav-dropdown,
.header-nav-main .has-dropdown.is-active .sub-menu,
.header-nav .has-dropdown.is-active .nav-dropdown,
.header-nav .has-dropdown.is-active .sub-menu,
.header-nav-main .has-dropdown.current-dropdown .nav-dropdown,
.header-nav-main .has-dropdown.current-dropdown .sub-menu,
.header-nav .has-dropdown.current-dropdown .nav-dropdown,
.header-nav .has-dropdown.current-dropdown .sub-menu,
.nav-dropdown.nav-open,
.sub-menu.nav-open,
.nav-dropdown.wcag-keyboard-open,
.sub-menu.wcag-keyboard-open,
.nav-dropdown[data-wcag-open="true"],
.sub-menu[data-wcag-open="true"] {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 100vw !important;
    /* FORZA STESSA POSIZIONE TOP - NO SPOSTAMENTI */
    top: var(--wcag-menu-top-position, 100%) !important; /* Usa variabile CSS per top */
    /* margin-top gestito dalla regola successiva per menu aperto */
    /* Rimuovi qualsiasi offset che potrebbe spostare il menu */
    inset: auto 0 auto 0 !important;
    /* WCAG: Transizioni smooth per apertura armoniosa - SOLO opacity/visibility */
    opacity: 1 !important;
    visibility: visible !important;
    /* IMPORTANTE: NO transform per evitare vibrazione - posizione già calcolata via JS */
    transform: none !important;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out !important;
}

/* WCAG: Focus outline centrato e corretto */
.header-nav-main .has-dropdown.wcag-keyboard-focus .nav-dropdown:focus,
.header-nav-main .has-dropdown.wcag-keyboard-focus .nav-dropdown:focus-visible,
.header-nav .has-dropdown.wcag-keyboard-focus .nav-dropdown:focus,
.header-nav .has-dropdown.wcag-keyboard-focus .nav-dropdown:focus-visible {
    outline: 3px solid #0066FF !important;
    outline-offset: 0 !important;
}

/* WCAG: Stile per menu aperto (focus, click, hover) */
.header-nav-main .has-dropdown:hover .nav-dropdown,
.header-nav-main .has-dropdown:hover .sub-menu,
.header-nav .has-dropdown:hover .nav-dropdown,
.header-nav .has-dropdown:hover .sub-menu,
.sub-menu.nav-dropdown.nav-open,
.nav-dropdown.nav-open,
.sub-menu.nav-open,
.nav-dropdown.wcag-keyboard-open,
.sub-menu.wcag-keyboard-open,
.sub-menu.nav-dropdown.nav-open.wcag-keyboard-open,
.header-nav-main .has-dropdown.current-dropdown .nav-dropdown,
.header-nav-main .has-dropdown.current-dropdown .sub-menu,
.header-nav .has-dropdown.current-dropdown .nav-dropdown,
.header-nav .has-dropdown.current-dropdown .sub-menu,
.header-nav-main .has-dropdown.is-active .nav-dropdown,
.header-nav-main .has-dropdown.is-active .sub-menu,
.header-nav .has-dropdown.is-active .nav-dropdown,
.header-nav .has-dropdown.is-active .sub-menu,
.header-nav-main .has-dropdown.wcag-keyboard-focus .nav-dropdown,
.header-nav-main .has-dropdown.wcag-keyboard-focus .sub-menu,
.header-nav .has-dropdown.wcag-keyboard-focus .nav-dropdown,
.header-nav .has-dropdown.wcag-keyboard-focus .sub-menu,
.nav-dropdown[data-wcag-open="true"],
.sub-menu[data-wcag-open="true"] {
    background: #fff !important;
    margin-top: 15px !important;
}