/* Mobile side drawers — work in/out of .header_wrap; backdrop must not block taps */
@media only screen and (max-width: 991px) {
    .ahlmall-mobile-nav-overlay {
        pointer-events: none !important;
        z-index: 100040 !important;
    }

    #navbarSidetoggle.mobile_side_menu,
    .header_wrap #navbarSidetoggle.mobile_side_menu,
    body > #navbarSidetoggle.mobile_side_menu {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 270px !important;
        max-width: min(270px, 88vw) !important;
        display: block !important;
        height: auto !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        z-index: 100050 !important;
        pointer-events: auto !important;
        transition: left 0.3s ease-in-out, right 0.3s ease-in-out !important;
    }

    #navCatContent,
    body > #navCatContent {
        z-index: 100050 !important;
        pointer-events: auto !important;
    }

    /* Bootstrap .navbar centers children — align category list from the top */
    #navCatContent.navbar,
    #navCatContent.navbar.collapse,
    #navCatContent.navbar.collapse.show,
    #navCatContentCheckout.navbar,
    #navCatContentCheckout.navbar.collapse.show {
        display: block !important;
        align-items: flex-start !important;
        align-content: flex-start !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #navCatContent > ul,
    #navCatContentCheckout > ul {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 14px 24px !important;
        min-height: 0 !important;
    }

    #navCatContent > ul > li > a,
    #navCatContentCheckout > ul > li > a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding: 12px 14px !important;
        border-radius: 8px !important;
        background-color: transparent !important;
        box-shadow: none !important;
        transition: background-color 0.2s ease, color 0.2s ease !important;
    }

    html.ahlmall-dark-mode #navCatContent > ul > li > a,
    html.ahlmall-dark-mode #navCatContent > ul > li > a span,
    html.ahlmall-dark-mode #navCatContentCheckout > ul > li > a,
    html.ahlmall-dark-mode #navCatContentCheckout > ul > li > a span {
        color: var(--ahlmall-dm-text, #e8eaed) !important;
        background-color: transparent !important;
    }

    /* No sticky highlight after tap — only keyboard focus ring when needed */
    #navCatContent > ul > li > a:focus:not(:focus-visible),
    #navCatContentCheckout > ul > li > a:focus:not(:focus-visible),
    #navCatContent > ul > li > a:active:not(.active),
    #navCatContentCheckout > ul > li > a:active:not(.active) {
        background-color: transparent !important;
        color: inherit !important;
    }

    /* Expanded sub-category group (selected) */
    #navCatContent > ul > li.dropdown.show > a.dropdown-toggler,
    #navCatContentCheckout > ul > li.dropdown.show > a.dropdown-toggler {
        background-color: rgba(253, 106, 0, 0.14) !important;
        color: var(--color-1st, #fd6a00) !important;
    }

    /* Current page category, if marked active in markup */
    #navCatContent > ul > li > a.active,
    #navCatContent > ul > li > a[aria-current="page"],
    #navCatContentCheckout > ul > li > a.active,
    #navCatContentCheckout > ul > li > a[aria-current="page"] {
        background-color: rgba(253, 106, 0, 0.14) !important;
        color: var(--color-1st, #fd6a00) !important;
    }

    /* Hover — real mouse only (not sticky on touch) */
    @media (hover: hover) and (pointer: fine) {
        #navCatContent > ul > li > a:hover,
        #navCatContentCheckout > ul > li > a:hover {
            background-color: rgba(255, 255, 255, 0.12) !important;
            color: var(--color-1st, #fd6a00) !important;
        }

        html.ahlmall-dark-mode #navCatContent > ul > li > a:hover,
        html.ahlmall-dark-mode #navCatContent > ul > li > a:hover span,
        html.ahlmall-dark-mode #navCatContentCheckout > ul > li > a:hover,
        html.ahlmall-dark-mode #navCatContentCheckout > ul > li > a:hover span {
            background-color: rgba(253, 106, 0, 0.18) !important;
            color: var(--color-1st, #fd6a00) !important;
        }

        #navCatContent ul li .dropdown-menu .nav-link:hover,
        #navCatContent ul li .dropdown-menu .dropdown-item:hover {
            background-color: rgba(255, 255, 255, 0.1) !important;
            color: var(--color-1st, #fd6a00) !important;
        }

        html.ahlmall-dark-mode #navCatContent ul li .dropdown-menu .nav-link:hover,
        html.ahlmall-dark-mode #navCatContent ul li .dropdown-menu .dropdown-item:hover {
            background-color: rgba(253, 106, 0, 0.14) !important;
            color: var(--color-1st, #fd6a00) !important;
        }
    }

    #navCatContent ul li .dropdown-menu .nav-link,
    #navCatContent ul li .dropdown-menu .dropdown-item {
        border-radius: 6px !important;
        background-color: transparent !important;
        transition: background-color 0.2s ease, color 0.2s ease !important;
    }

    #navCatContent ul li .dropdown-menu:not(.show) {
        display: none !important;
    }

    #navCatContent.show,
    #navbarSidetoggle.mobile_side_menu.show,
    .header_wrap #navbarSidetoggle.mobile_side_menu.show,
    body > #navbarSidetoggle.show {
        pointer-events: auto !important;
    }

    #navCatContent.show a,
    #navCatContent.show .dropdown-menu a,
    #navbarSidetoggle.show .navbar-nav a {
        pointer-events: auto !important;
        cursor: pointer;
        touch-action: manipulation;
    }

    /* LTR — main menu from right, categories from left */
    html[dir="ltr"] #navbarSidetoggle.mobile_side_menu,
    html:not([dir="rtl"]) #navbarSidetoggle.mobile_side_menu {
        right: -280px !important;
        left: auto !important;
    }

    html[dir="ltr"] #navbarSidetoggle.mobile_side_menu.show,
    html:not([dir="rtl"]) #navbarSidetoggle.mobile_side_menu.show {
        right: 0 !important;
        left: auto !important;
    }

    html[dir="ltr"] #navCatContent:not(.show),
    html:not([dir="rtl"]) #navCatContent:not(.show) {
        left: -280px !important;
        right: auto !important;
    }

    html[dir="ltr"] #navCatContent.show,
    html:not([dir="rtl"]) #navCatContent.show {
        left: 0 !important;
        right: auto !important;
    }

    /* RTL — main menu from left, categories from right (matches rtl-style.scss) */
    html[dir="rtl"] #navbarSidetoggle.mobile_side_menu {
        left: -280px !important;
        right: auto !important;
    }

    html[dir="rtl"] #navbarSidetoggle.mobile_side_menu.show {
        left: 0 !important;
        right: auto !important;
    }

    html[dir="rtl"] #navCatContent:not(.show) {
        right: -280px !important;
        left: auto !important;
    }

    html[dir="rtl"] #navCatContent.show {
        right: 0 !important;
        left: auto !important;
    }

    body.ahlmall-mobile-nav-open .header_wrap {
        z-index: 100060 !important;
    }

    body.ahlmall-mobile-nav-open .ahlmall-pdp-mobile-bar {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.ahlmall-mobile-nav-open .ai-assistant-root {
        pointer-events: none !important;
        opacity: 0.35;
    }

    #navbarSidetoggle.mobile_side_menu.show .navbar-nav {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 52px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px !important;
    }

    #navbarSidetoggle.mobile_side_menu.show .ahlmall-mobile-nav-link {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        padding: 12px 14px !important;
        line-height: 1.35;
    }

    #navbarSidetoggle.mobile_side_menu.show .ahlmall-mobile-nav-label {
        flex: 1 1 auto;
        text-align: start;
        min-width: 0;
    }

    #navbarSidetoggle.mobile_side_menu.show .ahlmall-mobile-nav-icon {
        flex: 0 0 auto;
        width: 1.25rem;
        text-align: center;
        font-size: 1.1rem;
        opacity: 0.92;
    }

    #navbarSidetoggle.mobile_side_menu.show .ahlmall-mobile-nav-group-start > .ahlmall-mobile-nav-link {
        margin-top: 6px;
        padding-top: 14px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    #navbarSidetoggle.mobile_side_menu.show .ahlmall-mobile-nav-group-end > .ahlmall-mobile-nav-link {
        margin-top: 4px;
        padding-top: 14px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.78) !important;
    }

    #navbarSidetoggle.mobile_side_menu.show .ahlmall-mobile-nav-logout > .ahlmall-mobile-nav-link:hover {
        color: var(--color-1st, #fd6a00) !important;
    }
}