/* =========================================================
   DZ MOBILE MENU STACKING FIX V4.1.7
   Fixes Aster mobile menu appearing behind page content
   BEFORE the first scroll.
   ========================================================= */

@media (max-width: 1199.98px) {
    /*
     * Root cause:
     * the mobile .aside already has a large internal z-index, but it lives
     * inside .header / .header-main. Before scroll that parent stacking
     * context can sit below homepage/product content. After scroll the sticky
     * state raises the header, which is why the menu suddenly appears in front.
     *
     * Raise the WHOLE mobile header from first paint. 1045 keeps it:
     * - above normal page sections and the mobile app bar (1040),
     * - below Bootstrap modal layers (normally 1050/1055+).
     */
    .header {
        position: relative !important;
        z-index: 1045 !important;
        overflow: visible !important;
        isolation: isolate !important;
    }

    /*
     * Do not change header-main positioning, transform or sticky classes.
     * The existing mobile sticky behavior remains fully native.
     */
    .header .header-main,
    .header .header-main.love-sticky {
        z-index: 5 !important;
        overflow: visible !important;
        isolation: auto !important;
    }

    .header .header-main > .container {
        overflow: visible !important;
    }

    /*
     * Keep the actual drawer above its overlay.
     * Reinforce fixed viewport positioning without touching the slide animation.
     */
    .header .header-main .aside {
        position: fixed !important;
        z-index: 30 !important;
        top: 0 !important;
        bottom: 0 !important;
        inset-block-start: 0 !important;
        inset-block-end: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
    }

    .header .header-main .aside.active {
        z-index: 30 !important;
    }

    /*
     * Existing custom.css gives this overlay z-index:9999.
     * Inside the raised header context we only need it behind the drawer.
     */
    .header .header-main .aside + .aside-overlay {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 20 !important;
    }

    .header .header-main .aside.active + .aside-overlay {
        z-index: 20 !important;
    }

    /*
     * Mobile instant-search inside the drawer must remain above menu links.
     */
    .header .header-main .aside .search-result-box,
    .header .header-main .aside .search-card.search-result-box {
        z-index: 40 !important;
    }

    /*
     * Keep the menu button itself clickable before/after sticky activation.
     */
    .header .header-main .menu-btn {
        position: relative;
        z-index: 6;
    }
}

[theme="dark"] .header .header-main .aside {
    background: var(--dz-header-bg, #141414);
}