/* ==========================================================================
   Elementor Mega Menu Pro – megamenu.css
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Variabili CSS
   ------------------------------------------------------------------------- */
:root {
    --emm-z-header    : 9999;
    --emm-z-panel     : 9998;
    --emm-z-overlay   : 9997;
    --emm-easing      : cubic-bezier(0.22, 1, 0.36, 1);
    --emm-duration    : 380ms;
    --emm-header-h    : 80px;
    --emm-panel-slide : 18px;  /* offset verticale per animazione slide */
}

/* -------------------------------------------------------------------------
   2. Wrapper
   ------------------------------------------------------------------------- */
.emm-wrapper {
    position: relative;
}

/* -------------------------------------------------------------------------
   3. Header
   ------------------------------------------------------------------------- */
.emm-header {
    position   : relative;
    width      : 100%;
    height     : var(--emm-header-h);
    z-index    : var(--emm-z-header);
    /* Apertura: transizione normale */
    transition : background var(--emm-duration) var(--emm-easing),
                 box-shadow var(--emm-duration) var(--emm-easing);
}

/* Sticky */
.emm-header--sticky {
    position : fixed;
    top      : 0;
    left     : 0;
    right    : 0;
}

/* Trasparente */
.emm-header--transparent {
    background : transparent;
}

/* Solido di default */
.emm-header--solid {
    background : #fff;
    box-shadow : 0 2px 12px rgba(0,0,0,.1);
}

/* Stato: scrolled */
.emm-header.is-scrolled {
    background : #fff;
    box-shadow : 0 2px 20px rgba(0,0,0,.12);
}

/*
 * Mega aperto: sfondo bianco, nessuna ombra (il pannello la gestisce).
 * Quando mega-open viene RIMOSSO (chiusura), la transition sull'header
 * fa tornare lo sfondo trasparente fluidamente.
 */
.emm-header.mega-open {
    background : #fff;
    box-shadow : none;
}

/* Logo e link: transition sync con il pannello */
.emm-logo,
.emm-nav > .emm-item > .emm-link,
.emm-nav-right a,
.emm-logo-link--text {
    transition-duration: calc(var(--emm-duration) * 0.8);
    transition-timing-function: var(--emm-easing);
}

/* -------------------------------------------------------------------------
   4. Header inner  –  logo | nav principale | nav destra
   ------------------------------------------------------------------------- */
.emm-header__inner {
    display     : grid;
    /* logo fisso | nav principale flessibile | nav destra fisso */
    grid-template-columns : auto 1fr auto;
    align-items : center;
    height      : 100%;
    max-width   : 1440px;
    margin      : 0 auto;
    padding     : 0 20px;
    gap         : 0;
}

/* Su mobile diventa: logo | spacer | burger */
@media (max-width: 1250px) {
    .emm-header__inner {
        grid-template-columns : auto 1fr auto;
        padding               : 0 20px;
    }
}

/* -------------------------------------------------------------------------
   5. Logo
   ------------------------------------------------------------------------- */
.emm-logo-link {
    display         : flex;
    align-items     : center;
    text-decoration : none;
    flex-shrink     : 0;
}

.emm-logo {
    display    : block;
    width      : 140px;
    height     : auto;
    transition : opacity var(--emm-duration) var(--emm-easing),
                 transform var(--emm-duration) var(--emm-easing);
}

/* Default: mostra logo chiaro, nascondi scuro */
.emm-logo--light {
    opacity  : 1;
    position : relative;
}
.emm-logo--dark {
    opacity  : 0;
    position : absolute;
    top      : 0;
    left     : 0;
    pointer-events: none;
}

.emm-header__logo {
    position : relative;
}

/* Quando scrolled / mega-open: swap logo */
.emm-header.is-scrolled .emm-logo--light,
.emm-header.mega-open   .emm-logo--light {
    opacity : 0;
}
.emm-header.is-scrolled .emm-logo--dark,
.emm-header.mega-open   .emm-logo--dark {
    opacity        : 1;
    pointer-events : auto;
}

/* Logo text fallback */
.emm-logo-link--text {
    font-size      : 22px;
    font-weight    : 700;
    color          : #fff;
    text-decoration: none;
    transition     : color var(--emm-duration) var(--emm-easing);
}
.emm-header.is-scrolled .emm-logo-link--text,
.emm-header.mega-open   .emm-logo-link--text {
    color : #111;
}

/* -------------------------------------------------------------------------
   6. Nav – struttura
   ------------------------------------------------------------------------- */
.emm-nav-wrap {
    display         : flex;
    justify-content : flex-start;   /* nav principale parte dal logo */
    padding-left    : 35px;
}

.emm-nav {
    display     : flex;
    align-items : center;
    list-style  : none;
    margin      : 0;
    padding     : 0;
    height      : var(--emm-header-h);
}

.emm-item {
    position    : relative;
    list-style  : none;
    height      : 100%;
    display     : flex;
    align-items : center;
}

/* -------------------------------------------------------------------------
   7. Link di primo livello
   ------------------------------------------------------------------------- */
.emm-link {
    display         : flex;
    align-items     : center;
    gap             : 6px;
    padding         : 0 20px;
    height          : 100%;
    text-decoration : none;
    font-size       : 15px;
    font-weight     : 500;
    letter-spacing  : 0.01em;
    color           : #fff;
    transition      : color var(--emm-duration) var(--emm-easing);
    white-space     : nowrap;
    position        : relative;
}

/* Link su header scrolled / mega open */
.emm-header.is-scrolled .emm-nav > .emm-item > .emm-link,
.emm-header.mega-open   .emm-nav > .emm-item > .emm-link {
    color : #111;
}

.emm-link:hover,
.emm-item.is-open > .emm-link {
    color : #0070f3;
}

/* Indicatore sotto (linea hover) */
/*.emm-link--depth-0::after {
    content    : '';
    position   : absolute;
    bottom     : 14px;
    left       : 20px;
    right      : 20px;
    height     : 2px;
    background : currentColor;
    transform  : scaleX(0);
    transform-origin: center;
    transition : transform 300ms var(--emm-easing);
}
.emm-link--depth-0:hover::after,
.emm-item.is-open > .emm-link--depth-0::after {
    transform : scaleX(1);
}*/

/* -------------------------------------------------------------------------
   8. Arrow (chevron)
   ------------------------------------------------------------------------- */
.emm-link__arrow {
    display    : inline-flex;
    align-items: center;
    width      : 12px;
    height     : 12px;
    transition : transform var(--emm-duration) var(--emm-easing);
}
.emm-link__arrow::before {
    content     : '';
    display     : block;
    width       : 7px;
    height      : 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform   : rotate(45deg) translateY(-2px);
    transition  : transform var(--emm-duration) var(--emm-easing),
                  border-color var(--emm-duration) var(--emm-easing);
}

.emm-item.is-open > .emm-link .emm-link__arrow {
    transform : rotate(180deg);
}

.emm-item.emm-item--has-children:hover  > .emm-link .emm-link__arrow {
    transform : rotate(180deg);
}

/* -------------------------------------------------------------------------
   9. Pannello Mega Menu
   ------------------------------------------------------------------------- */
.emm-panel {
    position       : fixed;
    top            : 77px;
    left           : 0;
    right          : 0;
    background     : #fff;
    z-index        : var(--emm-z-panel);
    overflow       : hidden;
    will-change    : opacity, transform;

    /* Stato chiuso – SOLO opacity + transform, niente visibility delay */
    pointer-events : none;
    opacity        : 0;
    transform      : translateY(calc(-1 * var(--emm-panel-slide)));
    transition     : opacity   var(--emm-duration) var(--emm-easing),
                     transform var(--emm-duration) var(--emm-easing);
}

/* Aperto */
.emm-item.is-open > .emm-panel {
    opacity        : 1;
    transform      : translateY(0);
    pointer-events : auto;
    /* stessa transition – nessun override necessario */
}

/* Varianti animazione */
[data-animation="fade"] .emm-panel {
    transform : translateY(0);
}

[data-animation="slide-down"] .emm-panel {
    opacity   : 1;
    transform : translateY(-100%);
}
[data-animation="slide-down"] .emm-item.is-open > .emm-panel {
    transform : translateY(0);
}

/* Full-width (default) */
.emm-panel--full-width {
    left  : 0;
    right : 0;
}


/* Contained centrato rispetto alla voce padre */
.emm-item--mega {
    position: relative; /* fondamentale */
}

.emm-panel--contained {
    position       : absolute;   /* non più fixed */
    top            : calc(100% - 13px); /* sotto la voce */
    left           : 50%;
    width          : 800px; /* o max-width se preferisci */
    max-width      : 90vw;
    transform      : translateX(-50%) translateY(calc(-1 * var(--emm-panel-slide)));
    transform-origin: top center;
    box-shadow     : 0 8px 32px rgba(0, 0, 0, .13);
}
.emm-item.is-open > .emm-panel--contained {
    transform : translateX(-50%) translateY(0);
}

/* Separatore visivo in cima al pannello */
/* Mega */
.emm-item--mega::after {
    content: '';
    position: absolute;
    bottom: 9px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 18px;
    height: 14px;
    background: url("/wp-content/uploads/2025/05/arrow-menu-top.svg") no-repeat center;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
    transition: 
        opacity .0s cubic-bezier(0,0,0,0),
        transform .0s cubic-bezier(0,0,0,0);
}


.emm-item--mega.is-open::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Dropdown */
.emm-dropdown::after {
    content: '';
    position: absolute;
    top: -12px;
    left: 32px;
    width: 15px;
    height: 15px;
    background: url("/wp-content/uploads/2025/05/arrow-menu-top.svg") no-repeat center;
    background-size: contain;
    pointer-events: none;
}



/* Ombra in fondo al pannello */
.emm-panel::after {
    content    : '';
    position   : absolute;
    bottom     : 0;
    left       : 0;
    right      : 0;
    height     : 4px;
    background : linear-gradient(to bottom, rgba(0,0,0,.05), transparent);
}

.emm-panel__inner {
    max-width : 1440px;
    margin    : 0 auto;
    padding   : 40px;
}

/* -------------------------------------------------------------------------
   10. Template Elementor dentro il pannello
   ------------------------------------------------------------------------- */
.emm-panel__template {
    width : 100%;
}

/* Reset Elementor dentro il pannello */
.emm-panel .elementor-section-wrap,
.emm-panel .elementor-section {
    margin-bottom : 0 !important;
}

/* -------------------------------------------------------------------------
   11. Loader (lazy loading template)
   ------------------------------------------------------------------------- */
.emm-panel__loader {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 6px;
    padding         : 40px;
}
.emm-panel__loader span {
    width            : 8px;
    height           : 8px;
    border-radius    : 50%;
    background       : #ccc;
    animation        : emm-pulse 1.2s ease-in-out infinite;
}
.emm-panel__loader span:nth-child(2) { animation-delay: 0.2s; }
.emm-panel__loader span:nth-child(3) { animation-delay: 0.4s; }

@keyframes emm-pulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: .4; }
    40%           { transform: scale(1);   opacity: 1;  }
}

/* -------------------------------------------------------------------------
   12. Overlay
   ------------------------------------------------------------------------- */
/*.emm-overlay {
    position       : fixed;
    inset          : 0;
    top            : var(--emm-header-h);
    background     : rgba(0, 0, 0, 0.25);
    z-index        : var(--emm-z-overlay);
    opacity        : 0;
    pointer-events : none;
    transition     : opacity var(--emm-duration) var(--emm-easing);
    backdrop-filter: blur(2px);
}
.emm-overlay.is-visible {
    opacity        : 1;
    pointer-events : auto;
}*/


/* -------------------------------------------------------------------------
   13. Dropdown classico (no mega)
   Il dropdown si apre sotto la voce padre con sfondo bianco proprio.
   L'header NON cambia background — rimane trasparente (o scrolled).
   ------------------------------------------------------------------------- */
.emm-dropdown {
    position       : absolute;
    /* Si stacca dal basso dell'header, non aderisce ad esso */
    top            : calc(100% - 15px);
    left           : 0;
    min-width      : 190px;
    background     : #fff;
    box-shadow     : 0 8px 32px rgba(0,0,0,.13);
    list-style     : none;
    margin         : 0;
    padding        : 8px 0;
    /* Z-index sotto il mega panel ma sopra il contenuto */
    z-index        : calc(var(--emm-z-panel) - 1);

    /* Stato chiuso */
    opacity        : 0;
    transform      : translateY(6px);
    pointer-events : none;
    transition     : opacity   240ms var(--emm-easing),
                     transform 240ms var(--emm-easing);
}



/* Aperto via CSS hover O via JS keyboard (.is-open) */
.emm-item:not(.emm-item--mega):hover > .emm-dropdown,
.emm-item:not(.emm-item--mega).is-open > .emm-dropdown {
    opacity        : 1;
    transform      : translateY(0);
    pointer-events : auto;
}

/* Voci del dropdown */
.emm-dropdown .emm-link {
    display      : flex;
    height       : auto;
    padding      : 11px 22px;
    color        : #222;
    font-size    : 14px;
    font-weight  : 400;
    letter-spacing: 0;
    white-space  : nowrap;
    border-bottom: 1px solid transparent;
}
/*.emm-dropdown .emm-link:hover {
    color      : #0070f3;
    background : #f7f9ff;
}*/
/* Nessuna linea decorativa sui link di secondo livello */
.emm-dropdown .emm-link::after { display: none !important; }

/* Dropdown annidato (terzo livello) */
.emm-dropdown .emm-dropdown {
    top  : 0;
    left : 100%;
    border-radius: 0 4px 4px 4px;
}

/* Nascosto su mobile – il tap non deve mostrarlo via :hover CSS */
@media (max-width: 1250px) {
    .emm-dropdown {
        display : none !important;
    }

    /* ACCORDION: il dropdown si apre espandibile sotto la voce padre */
    .emm-wrapper:not([data-mobile-style="slide-panel"]) .emm-dropdown {
        display        : block !important;
        position       : static !important;
        opacity        : 1 !important;
        transform      : none !important;
        box-shadow     : none !important;
        border         : none !important;
        border-radius  : 0 !important;
        background     : #f8f8f8 !important;
        padding        : 0 !important;
        max-height     : 0;
        overflow       : hidden;
        pointer-events : none;
        transition     : max-height var(--emm-duration) var(--emm-easing) !important;
    }
    .emm-wrapper:not([data-mobile-style="slide-panel"]) .emm-dropdown::before {
        display : none !important;
    }
    .emm-wrapper:not([data-mobile-style="slide-panel"]) .emm-item.is-open > .emm-dropdown {
        max-height     : 600px;
        pointer-events : auto;
    }
    .emm-wrapper:not([data-mobile-style="slide-panel"]) .emm-dropdown .emm-link {
        padding      : 13px 36px !important;
        font-size    : 14px !important;
        color        : #444 !important;
        border-bottom: 1px solid #efefef !important;
    }
    .emm-wrapper:not([data-mobile-style="slide-panel"]) .emm-dropdown .emm-link:hover {
        color      : #0070f3 !important;
        background : #f0f0f0 !important;
    }

    /* SLIDE PANEL: dropdown sempre nascosto — il contenuto è nel pannello slide */
    .emm-wrapper[data-mobile-style="slide-panel"] .emm-dropdown {
        display : none !important;
    }
}



/* -------------------------------------------------------------------------
   14. Nav Destra (utility: lingua, store, ecc.)
   ------------------------------------------------------------------------- */
.emm-header__right {
    display     : flex;
    align-items : center;
    justify-content: flex-end;
}

.emm-nav-right-wrap {
    display : flex;
    align-items: center;
}

.emm-nav-right {
    display     : flex;
    align-items : center;
    list-style  : none;
    margin      : 0;
    padding     : 0;
    gap         : 4px;
}

.emm-nav-right li {
    list-style : none;
}

.emm-nav-right a {
    display         : flex;
    align-items     : center;
    padding         : 6px 14px;
    font-size       : 13px;
    font-weight     : 500;
    letter-spacing  : 0.06em;
    text-transform  : uppercase;
    text-decoration : none;
    color           : #fff;
    white-space     : nowrap;
    transition      : color var(--emm-duration) var(--emm-easing);
    border-radius   : 2px;
}

/* Colore su header scrolled / mega aperto */
.emm-header.is-scrolled .emm-nav-right a,
.emm-header.mega-open   .emm-nav-right a {
    color : #111;
}

.emm-nav-right a:hover {
    color : #0070f3;
}

/* ── Ultima voce come bottone (opzionale) ── */
.emm-header--last-btn .emm-nav-right li:last-child a {
    border        : 1px solid currentColor;
    padding       : 6px 18px;
    border-radius : 2px;
}
.emm-header--last-btn .emm-nav-right li:last-child a:hover {
    background : #111;
    color      : #fff;
    border-color: #111;
}
.emm-header.is-scrolled.emm-header--last-btn .emm-nav-right li:last-child a:hover,
.emm-header.mega-open.emm-header--last-btn   .emm-nav-right li:last-child a:hover {
    background : #111;
    color      : #fff;
}

/* -------------------------------------------------------------------------
   15. Burger (mobile)
   ------------------------------------------------------------------------- */
.emm-burger {
    display         : none;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    gap             : 5px;
    width           : 40px;
    height          : 40px;
    background      : transparent !important;
    border          : none;
    cursor          : pointer;
    padding         : 0;
    grid-column     : 3;
}
.emm-burger span {
    display          : block;
    width            : 24px;
    height           : 2px;
    background       : #fff;
    border-radius    : 2px;
    transition       : transform 300ms var(--emm-easing),
                       opacity   300ms var(--emm-easing),
                       background 300ms var(--emm-easing);
}
.emm-header.is-scrolled .emm-burger span,
.emm-header.mega-open   .emm-burger span {
    background : #111 !important;
}
/* Burger → X */
.emm-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.emm-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.emm-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   15. MOBILE – Base (comune a entrambe le modalità)
   ========================================================================= */
@media (max-width: 1250px) {

    .emm-burger        { display: flex; }
    .emm-header__right { display: none; }

    /* Nav off-canvas – posizione comune */
    .emm-header__nav {
        position       : fixed;
        top            : var(--emm-header-h);
        left           : 0;
        right          : 0;
        bottom         : 0;
        background     : #fff;
        z-index        : var(--emm-z-panel);
        overflow       : hidden;
        padding        : 0;
        display        : flex;
        flex-direction : column;
        /* stato chiuso: nascosto ma in DOM */
        pointer-events : none;
    }

    /* Nav lista */
    .emm-nav-wrap {
        flex       : 1;
        overflow-y : auto;
        padding    : 12px 10px 24px;
        position   : relative;
        transition : transform var(--emm-duration) var(--emm-easing);
	    width: 100%;
    }
    .emm-nav {
        flex-direction : column;
        align-items    : stretch;
        height         : auto;
		width: 100%;
		margin-top: 20px;
    }
    .emm-item {
        height         : auto;
        flex-direction : column;
        align-items    : stretch;
		padding-bottom : 20px;
    }
    .emm-link {
        color           : #111 !important;
        padding         : 15px 24px;
        height          : auto;
        justify-content : space-between;
    }
    .emm-link--depth-0::after { display: none; }

    /* Arrow mobile: sempre visibile e punta a destra */
    .emm-link__arrow {
        opacity   : 1 !important;
        transform : rotate(-90deg) !important;
    }

    /* Pannello desktop su mobile:
       NON usiamo display:none per non bloccare il clone JS.
       Lo nascondiamo con max-height + overflow. */
    .emm-panel {
        position       : relative;
        top            : auto; left: auto; right: auto;
        opacity        : 1;
        transform      : none !important;
        pointer-events : none;
        max-height     : 0;
        overflow       : hidden;
        transition     : max-height var(--emm-duration) var(--emm-easing);
        will-change    : max-height;
        background     : transparent;
        box-shadow     : none;
    }
    .emm-panel::before,
    .emm-panel::after { display: none; }
    .emm-panel__inner { padding: 0 24px 16px; }
}


button.emm-slide-back {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    color: #000 !important;
    font-size: 15px !important;
	position: absolute !important;
    left: 20px !important;
}

.emm-slide-back__arrow {
    vertical-align: text-top;
}

/* =========================================================================
   15a. ACCORDION – nav con fade, sottovoci espansione verticale
   ========================================================================= */

/* Nav: fade in dal basso */
@media (max-width: 1250px) {
    .emm-wrapper:not([data-mobile-style="slide-panel"]) .emm-header__nav {
        opacity   : 0;
        transform : translateY(-10px);
        transition: opacity  var(--emm-duration) var(--emm-easing),
                    transform var(--emm-duration) var(--emm-easing);
    }
    .emm-wrapper:not([data-mobile-style="slide-panel"]) .emm-header__nav.mobile-open {
        opacity        : 1;
        transform      : translateY(0);
        pointer-events : auto;
    }

    /* Pannello accordion: apre verso il basso con fade */
    .emm-wrapper:not([data-mobile-style="slide-panel"]) .emm-item.is-open > .emm-panel {
        pointer-events : auto;
        max-height     : 800px;
    }

    /* Arrow ruota verso il basso quando aperto */
    .emm-wrapper:not([data-mobile-style="slide-panel"]) .emm-item.is-open > .emm-link .emm-link__arrow {
        transform : rotate(90deg) !important;
    }
}

/* =========================================================================
   15b. SLIDE PANEL – nav da sinistra, sub-panel da destra
   ========================================================================= */

/* Nav: entra da SINISTRA verso destra */
@media (max-width: 1250px) {
    .emm-wrapper[data-mobile-style="slide-panel"] .emm-header__nav {
        transform  : translateX(-100%);
        transition : transform var(--emm-duration) var(--emm-easing);
    }
    .emm-wrapper[data-mobile-style="slide-panel"] .emm-header__nav.mobile-open {
        transform      : translateX(0);
        pointer-events : auto;
    }

    /* Pannello originale: lo teniamo in DOM (no display:none!)
       ma visivamente nascosto — il clone nel slide panel è quello che appare.
       IMPORTANTE: specificità 0,2,0 – non sovrascrive il reset del clone. */
    .emm-wrapper[data-mobile-style="slide-panel"] .emm-panel {
        max-height     : 0 !important;
        overflow       : hidden !important;
        pointer-events : none !important;
    }
}

/* Contenitore slide panels – sovrapposto al nav */
.emm-slide-container {
    display        : none;
    position       : absolute;
    inset          : 0;
    overflow       : hidden;
    pointer-events : none;
}

@media (max-width: 1250px) {
    .emm-wrapper[data-mobile-style="slide-panel"] .emm-slide-container {
        display : block;
    }
}

/* Singolo pannello slide – parte fuori schermo a DESTRA */
.emm-slide-panel {
    position       : absolute;
    inset          : 0;
    background     : #fff;
    display        : flex;
    flex-direction : column;
    overflow       : hidden;
    pointer-events : none;
    transform      : translateX(100%);
    transition     : transform var(--emm-duration) var(--emm-easing);
}

/* Attivo: entra da destra verso sinistra */
.emm-slide-panel--active {
    transform      : translateX(0);
    pointer-events : auto;
}

/* Pannello che lascia spazio al figlio: esce a sinistra */
.emm-slide-panel--exit {
    transform : translateX(-30%);
}

/* Chiusura: torna a destra */
.emm-slide-panel--closing {
    transform      : translateX(100%);
    pointer-events : none;
}

/* Header fisso del pannello slide (back + titolo) */
.emm-slide-header {
    display         : flex;
    align-items     : center;
    gap             : 30px;
    padding         : 0 20px;
    height          : 56px;
    border-bottom   : 1px solid #f0f0f0;
    flex-shrink     : 0;
    background      : #fff;
    position        : sticky;
    top             : 0;
    z-index         : 1;
	text-align: center;
}

/* Pulsante back */
.emm-slide-back {
    display         : flex;
    align-items     : center;
    gap             : 8px;
    background      : none;
    border          : none;
    cursor          : pointer;
    padding         : 8px 0;
    color           : #111;
    font-size       : 14px;
    font-weight     : 500;
    letter-spacing  : 0.01em;
    flex-shrink     : 0;
    -webkit-tap-highlight-color: transparent;
}
.emm-slide-back:hover { color: #0070f3; }
.emm-slide-back:focus-visible {
    outline        : 2px solid #0070f3;
    outline-offset : 2px;
    border-radius  : 2px;
}

/* Freccia back */
.emm-slide-back__arrow {
    display         : inline-flex;
    width           : 20px;
    height          : 20px;
    align-items     : center;
    justify-content : center;
    flex-shrink     : 0;
}
.emm-slide-back__arrow::before {
    content       : '';
    display       : block;
    width         : 8px;
    height        : 8px;
    border-left   : 2px solid currentColor;
    border-bottom : 2px solid currentColor;
    transform     : rotate(45deg) translateX(2px);
}

/* Titolo pannello */
.emm-slide-title {
    flex          : 1;
    font-size     : 18px;
    font-weight   : 600;
    color         : #111;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

/* Contenuto scrollabile */
.emm-slide-content {
    flex                       : 1;
    overflow-y                 : auto;
    padding                    : 8px 0 32px;
    -webkit-overflow-scrolling : touch;
}

/* ── Reset clone ──────────────────────────────────────────────────────────
   Specificità 0,3,0 → batte la regola .emm-wrapper[...] .emm-panel (0,2,0)
   Questo è il fix principale per il bug display:none sul clone.
   ───────────────────────────────────────────────────────────────────────── */
.emm-slide-content .emm-panel.emm-slide-cloned,
.emm-slide-content .emm-dropdown.emm-slide-cloned {
    all            : unset !important;
    display        : block !important;
    max-height     : none !important;
    overflow       : visible !important;
    position       : static !important;
    opacity        : 1 !important;
    transform      : none !important;
    pointer-events : auto !important;
    visibility     : visible !important;
    background     : transparent !important;
    box-shadow     : none !important;
}
.emm-slide-content .emm-panel.emm-slide-cloned .emm-panel__inner {
    padding : 8px 0 !important;
}

/* Voci <li> e <a> dentro il dropdown clonato nello slide panel */
.emm-slide-content .emm-dropdown.emm-slide-cloned li {
    list-style : none !important;
    display    : block !important;
}
.emm-slide-content .emm-dropdown.emm-slide-cloned a,
.emm-slide-content .emm-dropdown.emm-slide-cloned .emm-link {
    display         : block !important;
    padding         : 14px 24px !important;
    color           : #111 !important;
    font-size       : 15px !important;
    font-weight     : 400 !important;
    text-decoration : none !important;
    border-bottom   : 1px solid #f5f5f5 !important;
    background      : transparent !important;
    transition      : background 150ms ease, color 150ms ease !important;
    height          : auto !important;
}
.emm-slide-content .emm-dropdown.emm-slide-cloned a:hover,
.emm-slide-content .emm-dropdown.emm-slide-cloned .emm-link:hover {
    background : #f8f8f8 !important;
}

/* Voci dentro lo slide panel */
.emm-slide-content .emm-link,
.emm-slide-content a {
    display         : block;
    font-size       : 15px;
    font-weight     : 400;
    text-decoration : none;
    transition      : background 150ms ease, color 150ms ease;
}
.emm-slide-content .emm-link:hover,
.emm-slide-content a:hover {
    background : #f8f8f8;
    color      : #0070f3;
}

/* =========================================================================
   15c. MOBILE – Nav utility (destra) dentro il pannello mobile
   ========================================================================= */

/* Su desktop: nascosto (c'è già il blocco .emm-header__right) */
.emm-mobile-right {
    display : none;
}

@media (max-width: 1250px) {
    .emm-mobile-right {
        display     : block;
        border-top  : 1px solid #ebebeb;
        padding     : 8px 0 16px;
        margin-top  : 8px;
    }

    .emm-nav-right--mobile {
        flex-direction : column;
        align-items    : stretch;
        gap            : 0;
    }

    .emm-nav-right--mobile li {
        list-style : none;
    }

    /* Stile voci: come i link principali del menu mobile */
    .emm-nav-right--mobile a {
        display         : flex;
        align-items     : center;
        padding         : 13px 24px;
        color           : #111;
        font-size       : 14px;
        font-weight     : 500;
        letter-spacing  : 0.05em;
        text-transform  : uppercase;
        text-decoration : none;
        border-radius   : 0;
        transition      : background 150ms ease, color 150ms ease;
    }
    .emm-nav-right--mobile a:hover {
        background : #f5f5f5;
        color      : #0070f3;
    }

    /* Ultima voce come bottone (se abilitata) */
    .emm-header--last-btn .emm-nav-right--mobile li:last-child a {
        margin          : 8px 24px 0;
        padding         : 10px 20px;
        border          : 1px solid #111;
        border-radius   : 2px;
        justify-content : center;
        width           : auto;
    }
    .emm-header--last-btn .emm-nav-right--mobile li:last-child a:hover {
        background  : #111;
        color       : #fff;
        border-color: #111;
    }
}

/* =========================================================================
   16. Spacer (compensa header sticky)
   ========================================================================= */
.emm-spacer {
    height : var(--emm-header-h);
}

/* =========================================================================
   17. Accessibilità – focus visibile
   ========================================================================= */

/* Tutti i link e bottoni nel menu */
.emm-link:focus-visible,
.emm-nav-right a:focus-visible,
.emm-nav-right--mobile a:focus-visible {
    outline        : 2px solid #0070f3;
    outline-offset : 2px;
    border-radius  : 2px;
}

/* Focus dentro il pannello mega */
.emm-panel a:focus-visible,
.emm-panel button:focus-visible,
.emm-panel [tabindex]:focus-visible {
    outline        : 2px solid #0070f3;
    outline-offset : 2px;
    border-radius  : 2px;
}

/* Focus dentro il dropdown classico */
.emm-dropdown a:focus-visible,
.emm-dropdown .emm-link:focus-visible {
    outline        : 2px solid #0070f3;
    outline-offset : -2px;
    border-radius  : 2px;
    background     : #f0f5ff;
}

/* Focus sul burger */
.emm-burger:focus-visible {
    outline        : 2px solid #0070f3;
    outline-offset : 4px;
    border-radius  : 2px;
}

/* Focus sul back button slide panel */
.emm-slide-back:focus-visible {
    outline        : 2px solid #0070f3;
    outline-offset : 2px;
    border-radius  : 2px;
}

/* Pannello aperto: assicura che sia raggiungibile da tastiera */
.emm-panel {
    /* Il pannello stesso non è focusable, ma il suo contenuto sì */
}

/* Garantisce che pointer-events:none non blocchi il focus da tastiera */
.emm-panel:not(.emm-item.is-open > .emm-panel) * {
    /* Gli elementi nascosti non devono ricevere focus */
    pointer-events : none;
}
.emm-item.is-open > .emm-panel * {
    pointer-events : auto;
}







/* =========================================================================
   Smart Sticky – is-hidden
   Usa classe .emm-header--smart per non interferire con lo sticky normale.
   Comparsa  dall'alto → giù : 450ms morbido (cubic-bezier ease-out)
   Scomparsa dal basso → su  : 250ms deciso  (cubic-bezier ease-in)
   ========================================================================= */



/* Stato VISIBILE – transizione di comparsa (dall'alto verso il basso) */
.emm-header--sticky.emm-header--smart {
    transition : transform   850ms cubic-bezier(0.22, 1, 0.36, 1),
                 background  var(--emm-duration) var(--emm-easing),
                 box-shadow  var(--emm-duration) var(--emm-easing) !important;
}

/* Stato NASCOSTO – transizione di scomparsa (dal basso verso l'alto) */
.emm-header--sticky.emm-header--smart.is-hidden {
    transform  : translateY(-100%);
    box-shadow : none !important;
    transition : transform   350ms cubic-bezier(0.4, 0, 1, 1),
                 background  var(--emm-duration) var(--emm-easing),
                 box-shadow  var(--emm-duration) var(--emm-easing)  !important;
}
/* =========================================================================
   FULLSCREEN MENU – hamburger desktop
   Pannello che scorre da destra a sinistra a tutto schermo
   ========================================================================= */

/* ── Hamburger desktop (emm-fs-burger) ─────────────────────────────────── */
.emm-fs-burger {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    gap             : 5px;
    width           : 40px;
    height          : 40px;
    background      : transparent;
    border          : none;
    cursor          : pointer;
    padding         : 0;
    margin-left     : 12px;
    flex-shrink     : 0;
}
.emm-fs-burger span {
    display       : block;
    width         : 24px;
    height        : 2px;
    background    : #fff;
    border-radius : 2px;
    transition    : transform 300ms var(--emm-easing),
                    opacity   300ms var(--emm-easing),
                    background 300ms var(--emm-easing);
}
/* Linee scure quando header è scrolled/solid */
.emm-header.is-scrolled  .emm-fs-burger span,
.emm-header.mega-open    .emm-fs-burger span,
.emm-header--solid       .emm-fs-burger span {
    background : #111;
}
/* → X quando aperto */
.emm-fs-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.emm-fs-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.emm-fs-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.emm-fs-burger:focus-visible {
    outline        : 2px solid #0070f3;
    outline-offset : 3px;
    border-radius  : 4px;
}

/* Mobile: nascondi fs-burger (usa il burger normale) */
@media (max-width: 1250px) {
    .emm-fs-burger { display: none; }
}

/* ── Overlay fullscreen ─────────────────────────────────────────────────── */
.emm-fs-overlay {
    position   : fixed;
    inset      : 0;
    background : rgba(0, 0, 0, 0.55);
    z-index    : calc(var(--emm-z-header) + 1);
    opacity    : 0;
    pointer-events : none;
    transition : opacity 400ms var(--emm-easing);
}
.emm-fs-overlay.is-open {
    opacity        : 1;
    pointer-events : auto;
}

/* ── Pannello fullscreen ────────────────────────────────────────────────── */
.emm-fs-panel {
    position    : fixed;
    top         : 0;
    right       : 0;
    bottom      : 0;
    width       : 100%;           /* parte fuori schermo a destra */
    background  : #fff;
    z-index     : calc(var(--emm-z-header) + 2);
    transform   : translateX(100%);
    transition  : transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y  : auto;
    display     : flex;
    flex-direction : column;
}
.emm-fs-panel.is-open {
    transform : translateX(0);
}

/* ── Inner container ────────────────────────────────────────────────────── */
.emm-fs-panel__inner {
    display        : flex;
    flex-direction : column;
    min-height     : 100%;
    padding        : 40px 60px 60px;
}

/* ── Pulsante chiudi ────────────────────────────────────────────────────── */
.emm-fs-close {
    display         : flex;
    align-items     : center;
    gap             : 12px;
    background      : none;
    border          : none;
    cursor          : pointer;
    padding         : 0;
    margin-bottom   : 60px;
    align-self      : flex-end;
    color           : #111;
    font-size       : 14px;
    letter-spacing  : 0.05em;
    text-transform  : uppercase;
}
.emm-fs-close__icon {
    position : relative;
    width    : 28px;
    height   : 28px;
    flex-shrink : 0;
}
.emm-fs-close__icon::before,
.emm-fs-close__icon::after {
    content    : '';
    position   : absolute;
    top        : 50%;
    left       : 0;
    width      : 100%;
    height     : 2px;
    background : #111;
    border-radius : 2px;
}
.emm-fs-close__icon::before { transform: rotate(45deg); }
.emm-fs-close__icon::after  { transform: rotate(-45deg); }

.emm-fs-close:hover .emm-fs-close__icon::before,
.emm-fs-close:hover .emm-fs-close__icon::after {
    background : #555;
}
.emm-fs-close:focus-visible {
    outline        : 2px solid #0070f3;
    outline-offset : 4px;
    border-radius  : 4px;
}

/* ── Nav fullscreen ─────────────────────────────────────────────────────── */
.emm-fs-nav {
    list-style  : none;
    margin      : 0;
    padding     : 0;
    display     : flex;
    flex-direction : column;
    gap         : 8px;
}
.emm-fs-nav li a {
    display         : block;
    font-size       : var(--emm-fs-font-size, 40px);
    font-weight     : 400;
    line-height     : 1.2;
    color           : #111;
    text-decoration : none;
    padding         : 8px 0;
    transition      : color 200ms ease, transform 200ms ease;
    border-bottom   : 1px solid transparent;
}
.emm-fs-nav li a:hover {
    color     : #555;
    transform : translateX(6px);
}
.emm-fs-nav li a:focus-visible {
    outline        : 2px solid #0070f3;
    outline-offset : 4px;
    border-radius  : 4px;
}

/* Animazione entrata voci a cascata (stagger via JS) */
.emm-fs-nav li {
    opacity   : 0;
    transform : translateX(30px);
    transition: opacity 400ms ease, transform 400ms ease;
}
.emm-fs-panel.is-open .emm-fs-nav li {
    opacity   : 1;
    transform : translateX(0);
}
/* Stagger: ogni voce ritarda di 60ms (applicato inline da JS, fallback CSS) */
.emm-fs-panel.is-open .emm-fs-nav li:nth-child(1)  { transition-delay: 120ms; }
.emm-fs-panel.is-open .emm-fs-nav li:nth-child(2)  { transition-delay: 180ms; }
.emm-fs-panel.is-open .emm-fs-nav li:nth-child(3)  { transition-delay: 240ms; }
.emm-fs-panel.is-open .emm-fs-nav li:nth-child(4)  { transition-delay: 300ms; }
.emm-fs-panel.is-open .emm-fs-nav li:nth-child(5)  { transition-delay: 360ms; }
.emm-fs-panel.is-open .emm-fs-nav li:nth-child(6)  { transition-delay: 420ms; }
.emm-fs-panel.is-open .emm-fs-nav li:nth-child(7)  { transition-delay: 480ms; }
.emm-fs-panel.is-open .emm-fs-nav li:nth-child(8)  { transition-delay: 540ms; }
.emm-fs-panel.is-open .emm-fs-nav li:nth-child(9)  { transition-delay: 600ms; }
.emm-fs-panel.is-open .emm-fs-nav li:nth-child(10) { transition-delay: 660ms; }