/* Perbaikan menu mobile — tidak tertutup header sticky */
@media (max-width: 991.98px) {
    header {
        position: relative;
        z-index: 1000;
    }

    .header-bottom {
        position: relative;
        z-index: 1002;
        overflow: visible !important;
    }

    .sticky-bar.stick {
        z-index: 1002;
    }

    .header-bottom .logo {
        position: relative;
        z-index: 1;
    }

    .menu-cart-wrap {
        position: relative;
        z-index: 1003;
    }

    .mobile-menu-area {
        position: relative;
        z-index: 1004;
    }

    .mean-container .mean-bar {
        position: relative;
        z-index: 1005;
    }

    .mean-container a.meanmenu-reveal {
        position: relative;
        z-index: 1006;
        top: -24px;
        right: 0;
    }

    /* Panel menu full-width di bawah header, tidak di belakang bar header */
    .mean-container .mean-nav {
        position: fixed;
        left: 0;
        right: 0;
        top: var(--mtsn-mobile-header-h, 78px);
        width: 100%;
        max-height: calc(100vh - var(--mtsn-mobile-header-h, 78px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1001;
        background: #fff;
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
        border-top: 1px solid #e6e6e6;
    }

    .mean-container .mean-nav ul li {
        background: #fff;
        border-top-color: #ececec;
    }

    .mean-container .mean-nav ul li a {
        background: #fff;
        font-size: 13px;
        padding: 12px 5%;
    }

    body.mtsn-mobile-nav-open {
        overflow: hidden;
    }

    /* Menu mobile instan — sebelum meanmenu/jQuery siap */
    .mtsn-early-nav-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        margin-left: auto;
        padding: 8px;
        border: 0;
        border-radius: 6px;
        background: var(--theme-primary, #006838);
        cursor: pointer;
    }

    .mtsn-early-nav-btn span {
        display: block;
        height: 2px;
        background: #fff;
        border-radius: 2px;
    }

    .mtsn-early-nav-panel {
        position: fixed;
        left: 0;
        right: 0;
        top: var(--mtsn-mobile-header-h, 78px);
        max-height: calc(100vh - var(--mtsn-mobile-header-h, 78px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1001;
        background: #fff;
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
        border-top: 1px solid #e6e6e6;
        padding: 8px 0 16px;
    }

    .mtsn-early-nav-panel ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mtsn-early-nav-panel a {
        display: block;
        padding: 12px 5%;
        color: #333;
        text-decoration: none;
        font-size: 14px;
        border-top: 1px solid #ececec;
    }

    .mtsn-early-nav-panel .submenu a {
        padding-left: 9%;
        font-size: 13px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --mtsn-mobile-header-h: 88px;
    }

    body:not(.mtsn-header-sticky) {
        --mtsn-mobile-header-h: 148px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    :root {
        --mtsn-mobile-header-h: 78px;
    }

    body:not(.mtsn-header-sticky) {
        --mtsn-mobile-header-h: 132px;
    }
}
