/* Shared mobile header and drawer; desktop navigation keeps its existing layout. */
@media (max-width: 991.98px) {
    header.hf-header > .container,
    .hf-home header.hf-header > .container { padding: .5rem .75rem !important; }
    .hf-header > .container > .navbar-stuck-hide { display: none; }
    .hf-header .hf-header-brand { flex: 1 1 auto; min-width: 0; }
    .hf-header .hf-header-tools { flex: 0 0 auto; width: auto; }
    header.hf-header .hf-menu-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin: 0 0 0 .375rem !important; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: .55rem; color: #f5f7f9; touch-action: manipulation; }
    .hf-header .hf-menu-toggle:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
    .hf-header .hf-desktop-menu-toggle { display: none !important; }
    .hf-header .navbar-brand { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
    header.hf-header .navbar-brand > span { display: flex !important; margin: 0 !important; }
    header.hf-header .navbar-brand img { width: clamp(96px, 30vw, 125px); height: auto; }
    .hf-header .hf-header-actions { gap: 0; }
    .hf-header .hf-header-actions > .btn { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; touch-action: manipulation; }
    .hf-header .hf-header-cart { margin-left: .125rem !important; }
    .hf-header .hf-header-account { color: #fff; }
    .hf-header #searchBar input { font-size: 1rem; }
    .hf-header #stuckNav { display: block !important; }
    .hf-header a:focus-visible, .hf-header button:focus-visible { outline: 3px solid #d34a5d; outline-offset: 3px; }

    #navbarNav.hf-mobile-menu {
        --hf-menu-ink: #17232e;
        --hf-menu-muted: #596777;
        --hf-menu-line: #e2e7ea;
        --hf-menu-soft: #f3f5f6;
        width: min(360px, calc(100vw - 20px));
        background: #fff;
        color: var(--hf-menu-ink);
        border: 0;
        box-shadow: -12px 0 40px rgba(15,23,42,.18);
    }
    #navbarNav .hf-mobile-menu-header { flex: 0 0 auto; min-height: 100px; padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem 1rem !important; background: #17232e; color: #fff; }
    #navbarNav .hf-mobile-menu-logo { display: block; width: 140px; height: auto; margin-bottom: .5rem; }
    #navbarNav .offcanvas-title { color: #d2dbe1; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
    #navbarNav .btn-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0 0 0 auto; border: 1px solid rgba(255,255,255,.25); border-radius: .55rem; filter: invert(1) grayscale(100%) brightness(200%); opacity: .9; touch-action: manipulation; }
    #navbarNav .btn-close:hover { opacity: 1; }
    #navbarNav .offcanvas-body { display: flex; flex-direction: column; padding: 1rem 1.25rem max(1.25rem, env(safe-area-inset-bottom)) !important; overscroll-behavior: contain; }
    #navbarNav .offcanvas-body > .container { display: flex; flex: 1 0 auto; flex-direction: column; width: 100%; }
    #navbarNav .offcanvas-body > .container > .row { --cz-gutter-x: 0; row-gap: 1.25rem; }
    #navbarNav .hf-mobile-account { display: flex; align-items: center; gap: .75rem; min-height: 78px; margin-bottom: 1.25rem; padding: .85rem; border: 1px solid var(--hf-menu-line); border-radius: .65rem; background: var(--hf-menu-soft); color: var(--hf-menu-ink); text-decoration: none; touch-action: manipulation; }
    #navbarNav .hf-mobile-account:hover { border-color: #9daeb9; }
    .hf-mobile-account-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: .5rem; background: #17232e; color: #fff; font-size: 1.15rem; }
    .hf-mobile-account-copy { display: flex; flex: 1; flex-direction: column; gap: .2rem; min-width: 0; }
    .hf-mobile-account-copy strong { font-size: .95rem; }
    .hf-mobile-account-copy > span { color: var(--hf-menu-muted); font-size: .71rem; line-height: 1.4; }
    #navbarNav .hf-home-category-link { min-height: 52px; padding: .75rem .85rem; border: 1px solid var(--hf-menu-line) !important; border-radius: .5rem; background: #fff; color: var(--hf-menu-ink); font-size: .9rem; }
    #navbarNav .hf-home-category-link:hover, #navbarNav .hf-home-category-link:not(.collapsed) { background: var(--hf-menu-soft); }
    #navbarNav .hf-mobile-categories-block { margin-bottom: 0 !important; }
    #navbarNav .hf-mobile-categories-wrapper { max-height: none; overflow: visible; padding: .25rem 0; border: 0; border-radius: 0; background: transparent; }
    #navbarNav .hf-mobile-cat-list a { display: flex !important; align-items: center; min-height: 44px; min-width: 0; padding-block: .5rem !important; color: var(--hf-menu-ink) !important; font-size: .8rem; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; touch-action: manipulation; }
    #navbarNav .hf-mobile-cat-list .hf-cat-toggle { flex: 0 0 44px; width: 44px; height: 44px; color: var(--hf-menu-muted) !important; }
    #navbarNav .hf-mobile-cat-list a:hover, #navbarNav .hf-mobile-cat-list a:focus-visible { color: #a8273c !important; }
    #navbarNav .hififutar-nav-links-col { padding-top: 0 !important; }
    .hf-mobile-menu-label { margin: 0 0 .5rem; color: var(--hf-menu-muted); font-size: .66rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
    #navbarNav .hififutar-main-nav { gap: 0; }
    #navbarNav .hififutar-main-nav > .nav-item { margin: 0; }
    #navbarNav .hififutar-main-nav .nav-link { display: flex; align-items: center; gap: .5rem; min-height: 48px; padding: .75rem .15rem; border-bottom: 1px solid var(--hf-menu-line); color: var(--hf-menu-ink) !important; font-size: .88rem; font-weight: 650 !important; line-height: 1.4; touch-action: manipulation; }
    #navbarNav .hififutar-main-nav .nav-link::after { content: '›'; margin-left: auto; padding-left: .5rem; color: var(--hf-menu-muted); font-size: 1.2rem; }
    #navbarNav .hififutar-main-nav .nav-link:hover { color: #a8273c !important; }
    #navbarNav .hf-mobile-menu-footer { margin-top: auto; padding-top: 1.5rem; }
    .hf-mobile-help { display: flex; align-items: center; gap: .75rem; min-height: 56px; margin-bottom: 1.25rem; color: var(--hf-menu-ink); text-decoration: none; touch-action: manipulation; }
    .hf-mobile-help > i { font-size: 1.25rem; }
    .hf-mobile-help > span { display: flex; flex-direction: column; gap: .15rem; }
    .hf-mobile-help strong { font-size: .78rem; font-weight: 650; }
    .hf-mobile-help > span > span { color: var(--hf-menu-muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
    .hf-mobile-theme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; padding: .25rem; border: 1px solid var(--hf-menu-line); border-radius: .5rem; background: var(--hf-menu-soft); }
    .hf-mobile-theme button { display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 44px; padding: .3rem; border: 1px solid transparent; border-radius: .3rem; background: transparent; color: var(--hf-menu-muted); font: inherit; font-size: .7rem; touch-action: manipulation; }
    .hf-mobile-theme button[aria-pressed="true"] { border-color: var(--hf-menu-line); background: #fff; color: var(--hf-menu-ink); box-shadow: 0 1px 3px rgba(15,23,42,.07); }
    .hf-mobile-theme button:hover { color: var(--hf-menu-ink); }

    [data-bs-theme="dark"] #navbarNav.hf-mobile-menu { --hf-menu-ink: #edf1f3; --hf-menu-muted: #b2bec5; --hf-menu-line: #39444b; --hf-menu-soft: #24333e; background: #1d2932; }
    [data-bs-theme="dark"] #navbarNav .hf-home-category-link { background: #1d2932; }
    [data-bs-theme="dark"] .hf-mobile-theme button[aria-pressed="true"] { background: #17232e; }
    [data-bs-theme="dark"] #navbarNav .hififutar-main-nav .nav-link:hover,
    [data-bs-theme="dark"] #navbarNav .hf-mobile-cat-list a:hover,
    [data-bs-theme="dark"] #navbarNav .hf-mobile-cat-list a:focus-visible { color: #ffb3bd !important; }
}