.ubermenu-skin-clean-white {
    font-size: 16px !important;
}

.ubermenu-skin-clean-white .ubermenu-item-level-0 > .ubermenu-target {
    font-weight: 400;
}

.ubermenu-skin-clean-white .ubermenu-submenu, .ubermenu-skin-clean-white .ubermenu-submenu  > .ubermenu-target {
    color: var(--pix-body-default) !important;
    font-weight: 400;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}


.ubermenu-target-title {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
}


/* MEGA MENU - Crop automatico immagine */
    /* 1. Il contenitore padre (il link A) */
    .ubermenu .ubermenu-target-with-image {
        /* Rimuoviamo l'altezza fissa e l'overflow hidden da qui, 
        altrimenti il testo fuori dai 120px sparisce */
        height: auto !important; 
        
        display: flex !important;       
        flex-direction: column !important; /* Mantiene l'immagine sopra e il testo sotto */
    }

    /* 2. Gestione dell'immagine (RAGGIUNGE I 120PX E RAGGRUPPA IL CROP) */
    .ubermenu img.ubermenu-image {
        width: 100% !important;         
        height: 120px !important;        /* L'altezza fissa va QUI: taglia l'immagine a 120px */
        
        object-fit: cover !important;    /* Esegue il crop perfetto senza distorcere */
        object-position: center; 
        
        flex-shrink: 0 !important;      
        
        /* Applichiamo l'overflow hidden direttamente sull'immagine per sicurezza,
        anche se object-fit: cover lo gestisce già nativamente */
        overflow: hidden !important; 
    }


        /* SOTTO MENU - BRANDS */
        .ubermenu-item-378  img.ubermenu-image  {
            height: 40px !important; 
            object-fit: contain !important; /* Mantiene l'immagine intera senza tagliarla */
            object-position: bottom !important; /* Centra l'immagine */
        }


            .ubermenu .ubermenu-item-378 .brands_loghi .ubermenu-target-with-image  .ubermenu-target-title {
                display: none !important;

            }

            .ubermenu-item-378 .brands_nomi img.ubermenu-image {
                display:none !important;
            }


        /* SOTTO MENU - SERVIZI */
        .ubermenu-item-object-servizi > ul > li:last-child img.ubermenu-image {
            height: 300px !important;   
        }

    /* 3. Etichetta sotto l'immagine: attaccata al suo logo, distante dalla riga successiva (prossimità) */
    .ubermenu .ubermenu-target-with-image .ubermenu-target-title {
        display: block !important;
        margin-top: 0; 
        margin-bottom: 20px;
    }



    /* Assicura che la voce di menu occupi l'altezza necessaria */
    #menu-item-935870 {
        display: flex;
    }

    /* Trasforma il link in un contenitore flex verticale */
    #menu-item-935870 > a.ubermenu-target {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 100%;
    }

    /* Spinge l'immagine verso il basso */
    #menu-item-935870 .ubermenu-image {
        margin-top: auto !important;
        display: block;
    }

/* Etichetta a sinistra di ogni mega menu (Brand, Chi siamo, Store, Servizi, Ambienti): stesso grigio #999 in tutti. Brand e Chi siamo non vengono colorati dallo skin UberMenu, quindi serve questa regola esplicita */ .ubermenu-submenu > .ubermenu-item.ubermenu-item-type-post_type_archive > .ubermenu-target > .ubermenu-target-text { color: #999 !important; }
/* / MEGA MENU - Crop automatico immagine */












.menu_brands_links a.ubermenu-target span.ubermenu-target-title {
    line-height: 1 !important;
    margin: 0 !important;

}

/* MENU TEAM */
#menu-item-4826 {

}

    /* Gestione dello spazio orizzontale tra le 4 colonne */ 
    #menu-item-4826 .ubermenu-autocolumn:first-child a.ubermenu-target {
        margin-left: 20px;
    }

    /* Ultima colonna (destra): forza il margine destro a 20px */
    #menu-item-4826 .ubermenu-autocolumn:last-child a.ubermenu-target {
        margin-right: 20px;
    }

    /* Nome e cognome su due righe: width min-content va a capo a ogni spazio. Il nome scende sotto il volto */
    #menu-item-4826 .ubermenu-target-title {
        position: absolute;
        top: 77.9%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 3;
        color: #fff;
        font-weight: 700;
        font-size: 1.1rem;
        width: min-content;
        word-break: normal;
        overflow-wrap: normal;

    }
    #menu-item-4826 a.ubermenu-target {
        position: relative;
        padding: 0;
        margin: 10px 10px 0 10px;
    }

        #menu-item-4826 a.ubermenu-target::before {
            background-color: var(--e-global-color-pixPrimaryColor);
            --background-overlay: '';
            content: "";
            position: absolute;
            top: 0;
            left:0;
            width: 100%;   
            height: 100%;
            z-index: 2; 
            opacity: 0.3;
        }


    #menu-item-4826 img {
        z-index: 1;
        margin: 0;
    }

/* MENU TEAM */
.ubermenu-submenu-id-3389 {

}
    .ubermenu-submenu-id-3389 .ubermenu-column-1-3 {
        width:25% !important;
        
    }

/* MODALE PER MENU */
    /* 1. Creiamo lo strato d'ombra (Overlay) a tutto schermo */
    body::after {
        content: "";
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        pointer-events: none;
    }

    /* 2. Mostriamo lo sfondo nero quando un elemento di UberMenu è attivo/aperto */
    body:has(.ubermenu-active)::after,
    body:has(.ubermenu-item-active)::after {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body:has(.ubermenu-active),
    body:has(.ubermenu-item-active) {
        overflow: hidden !important;
        height: 100% !important;
    }

    html:has(.ubermenu-active),
    html:has(.ubermenu-item-active) {
        overflow: hidden !important;
    }

    /* 3. Assicuriamoci che l'Header e UberMenu stiano sopra lo sfondo nero */
    header, 
    .site-header,
    .pix-header {
        position: relative;
        z-index: 999999999  !important;
    }
/* / MODALE PER MENU */