/*
 * Spazio Casa — menu P0.1
 * Correzione additiva del drawer categorie su mobile e tablet.
 * La classe sc-menu-v1 viene applicata solo su CRO-stage.
 */

.sc-menu-v1 .cbp-mobilesubmenu > .container {
    position: static;
    width: 100%;
    margin: 0;
    padding: 0;
}

.sc-menu-v1 #iqitmegamenu-accordion.cbp-spmenu {
    top: 0;
    bottom: 0;
    left: calc(-1 * min(360px, calc(100vw - 48px)));
    width: calc(100vw - 48px);
    max-width: 360px;
    height: 100vh;
    height: 100dvh;
    padding: 0 0 32px;
    box-sizing: border-box;
    background: #fff;
    border-right: 1px solid #e5e5e5;
    box-shadow: 12px 0 30px rgba(0, 0, 0, 0.18);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.sc-menu-v1 #iqitmegamenu-accordion.cbp-spmenu.cbp-spmenu-open {
    left: 0;
}

.sc-menu-v1 .cbp-spmenu-push-toright {
    left: 0 !important;
    position: relative !important;
    width: auto !important;
}

.sc-menu-v1 #cbp-spmenu-overlay.cbp-spmenu-overlay-show {
    background: rgba(0, 0, 0, 0.42);
}

.sc-menu-v1 #cbp-spmenu-overlay.cbp-spmenu-overlay-show #cbp-close-mobile {
    left: min(360px, calc(100vw - 48px));
}

/*
 * Tablet: il controllo di chiusura nativo del tema si sovrappone alla prima
 * categoria. Il drawer continua a chiudersi tramite overlay, hamburger e
 * scroll della pagina, quindi il controllo resta nel DOM ma non viene mostrato.
 */
.sc-menu-v1-tablet #cbp-close-mobile {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 1366px) {
    .sc-menu-v1 #cbp-spmenu-overlay > #cbp-close-mobile {
        display: none !important;
    }

    /*
     * mobile-search-live-v1.js aggiunge questo pulsante per chiudere la ricerca
     * a tutto schermo. Nel layout tablet la ricerca non è a tutto schermo:
     * il pulsante non ha funzione e finisce sotto il campo di ricerca.
     */
    .sc-menu-v1 .sc-clerk-mobile-close-v1 {
        display: none !important;
    }
}

/*
 * iPad/tablet da 768 px: il tema espone un terzo header legacy con hamburger
 * "MENU". Su questi viewport c'è spazio per la navigazione principale desktop,
 * che mantiene la stessa gerarchia visiva usata nel resto del sito.
 */
@media (min-width: 768px) and (max-width: 999px) {
    .sc-menu-v1 #iqitmegamenu-mobile {
        display: none !important;
    }

    .sc-menu-v1 #cbp-hrmenu {
        display: block !important;
    }
}

/*
 * La ricerca resta disponibile nella testata iniziale, ma non segue l'utente
 * nello sticky tablet: durante lo scroll rimane la sola navigazione compatta.
 */
.sc-menu-v1-tablet.sc-menu-v1-tablet-scrolled #search_block_top {
    display: none !important;
}

.sc-menu-v1-tablet.sc-menu-v1-tablet-scrolled #header_top {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/*
 * iPad/tablet: il menu desktop è progettato per hover. La classe viene
 * applicata dal JS su tablet touch in entrambe le orientazioni.
 */
.sc-menu-v1-touch-landscape #cbp-hrmenu {
    position: relative;
}

.sc-menu-v1-touch-landscape #cbp-hrmenu > ul > li > .cbp-hrsub {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 5200;
}

.sc-menu-v1-touch-landscape #cbp-hrmenu > ul > li.cbp-hropen > .cbp-hrsub {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sc-menu-v1-touch-landscape #cbp-hrmenu .cbp-hrsub-inner {
    max-height: calc(100vh - 165px);
    max-height: calc(100dvh - 165px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}