/* =========================================================
   DZ AJAX INSTANT SEARCH LAYER FIX V4.1.6
   Keeps instant-search results above navbar + homepage.
   ========================================================= */

@media (min-width: 1200px) {
    /*
     * V4.1.5 had:
     *   header-middle = z-index 2
     *   header-main   = z-index 3
     *
     * The AJAX result box lives inside header-middle, so it could never
     * paint above the navbar's parent stacking context.
     *
     * Put the search row ABOVE the navbar while keeping both inside the
     * same sticky wrapper.
     */
    .dz-sticky-main-header .header-middle {
        position: relative !important;
        z-index: 20 !important;
        overflow: visible !important;
    }

    .dz-sticky-main-header .header-main {
        position: relative !important;
        z-index: 10 !important;
        overflow: visible !important;
    }

    .dz-sticky-main-header .header-middle > .container,
    .dz-sticky-main-header .header-middle > .container > .d-flex,
    .dz-sticky-main-header .header-middle .search-box {
        overflow: visible !important;
    }

    .dz-sticky-main-header .header-middle .search-box {
        position: relative !important;
        z-index: 30 !important;
    }

    /*
     * Desktop AJAX instant-search box.
     * Use selectors from the existing header:
     * .search-card.search-result-box
     */
    .dz-sticky-main-header .header-middle .search-card.search-result-box,
    .dz-sticky-main-header .header-middle .search-result-box,
    .dz-sticky-main-header .header-middle .search-card.__inline-13.search-result-box {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1500 !important;
        background: #fff !important;
        border: 1px solid var(--dz-header-border, #e5e7eb) !important;
        border-radius: 12px !important;
        box-shadow: 0 18px 42px rgba(15, 23, 42, .16) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-height: min(62vh, 520px) !important;
        pointer-events: auto !important;
    }

    /*
     * Keep the navbar menus high enough for normal use, but still below
     * the active instant-search panel.
     */
    .dz-sticky-main-header .header-main .dropdown-menu,
    .dz-sticky-main-header .header-main .dropdown-menu.show,
    .dz-sticky-main-header .header-main .dropdown--menu,
    .dz-sticky-main-header .header-main .dropdown--menu .sub-menu,
    .dz-sticky-main-header .header-main .main-menu .sub-menu,
    .dz-sticky-main-header .header-main .main-menu .megamenu {
        z-index: 1200 !important;
    }
}

[theme="dark"] .dz-sticky-main-header .header-middle .search-card.search-result-box,
[theme="dark"] .dz-sticky-main-header .header-middle .search-result-box {
    background: var(--dz-header-bg, #141414) !important;
    border-color: var(--dz-header-border, #2a2f37) !important;
}