/* Phone-only drawer surface and layered navigation. */
@media (max-width: 767px) {
    body .mobile-nav.wd-side-hidden,
    body.home .mobile-nav.wd-side-hidden {
        --kajo-mobile-glass: rgba(255, 255, 255, .28);
        --kajo-mobile-glass-strong: rgba(255, 255, 255, .22);
        top: var(--kajo-admin-bar-offset) !important;
        inset-inline: 0 !important;
        width: 100vw !important;
        height: calc(100dvh - var(--kajo-admin-bar-offset)) !important;
        max-height: calc(100dvh - var(--kajo-admin-bar-offset)) !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: var(--kajo-mobile-glass) !important;
        box-shadow: 12px 0 32px rgba(6, 21, 37, .12) !important;
        backdrop-filter: blur(22px) saturate(135%) !important;
        -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
        transform: translate3d(-100%, 0, 0) !important;
        transition: transform .42s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .42s !important;
        visibility: hidden !important;
        z-index: 2000 !important;
    }

    body.kajo-mobile-menu-open .mobile-nav.wd-side-hidden {
        transform: translate3d(0, 0, 0) !important;
        transition: transform .42s cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s !important;
        visibility: visible !important;
    }

    body.kajo-mobile-menu-open .wd-close-side {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    body .mobile-nav .wd-heading,
    body.home .mobile-nav .wd-heading {
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr) 54px !important;
        min-height: 78px !important;
        height: 78px !important;
        padding: 0 22px !important;
        border-bottom: 1px solid rgba(6, 21, 37, .12) !important;
        background: var(--kajo-mobile-glass-strong) !important;
        backdrop-filter: blur(22px) saturate(135%) !important;
        -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
    }

    body .mobile-nav .kajo-mobile-menu-brand { display: contents !important; }
    body .mobile-nav .kajo-mobile-menu-brand img { grid-column: 1 !important; justify-self: start !important; width: 54px !important; height: 54px !important; object-fit: contain !important; }
    body .mobile-nav .kajo-mobile-menu-brand span { grid-column: 2 !important; justify-self: center !important; color: #061525 !important; font-family: "Montserrat", "Inter", Arial, sans-serif !important; font-size: 19px !important; font-weight: 650 !important; line-height: 1 !important; }
    body .mobile-nav .close-side-widget { grid-column: 3 !important; justify-self: end !important; }
    body .mobile-nav .close-side-widget a { display: grid !important; width: 42px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(6, 21, 37, .14) !important; border-radius: 50% !important; background: rgba(255, 255, 255, .36) !important; color: #061525 !important; place-items: center !important; line-height: 1 !important; }
    body .mobile-nav .close-side-widget .wd-action-icon { position: relative !important; display: block !important; width: 16px !important; height: 16px !important; margin: 0 !important; line-height: 1 !important; }
    body .mobile-nav .close-side-widget .wd-action-icon::before,
    body .mobile-nav .close-side-widget .wd-action-icon::after { top: 50% !important; left: 0 !important; width: 16px !important; margin: 0 !important; }

    body .mobile-nav .kajo-mobile-menu-back { display: none !important; grid-column: 1 !important; width: 42px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(6, 21, 37, .14) !important; border-radius: 50% !important; background: rgba(255, 255, 255, .36) !important; color: #061525 !important; place-items: center !important; }
    body .mobile-nav .kajo-mobile-menu-back span { box-sizing: border-box !important; display: block !important; position: relative !important; left: 1px !important; width: 11px !important; height: 11px !important; border-bottom: 2px solid currentColor !important; border-left: 2px solid currentColor !important; transform: rotate(45deg) !important; }
    body .mobile-nav.kajo-mobile-menu-level-active .kajo-mobile-menu-brand img { display: none !important; }
    body .mobile-nav.kajo-mobile-menu-level-active .kajo-mobile-menu-back { display: grid !important; }
    body .mobile-nav.kajo-mobile-menu-level-active .wd-nav-mobile > li { border-bottom-color: transparent !important; }
    body .mobile-nav.kajo-mobile-menu-level-active .wd-nav-mobile > li > a,
    body .mobile-nav.kajo-mobile-menu-level-active .wd-nav-mobile > li > .kajo-mobile-submenu-toggle { opacity: 0 !important; pointer-events: none !important; }

    body .mobile-nav .wd-nav-mobile,
    body.home .mobile-nav .wd-nav-mobile {
        position: relative !important;
        min-height: calc(100% - 78px) !important;
        padding: 10px 26px 32px !important;
        overflow: hidden !important;
        background: transparent !important;
    }

    body .mobile-nav .wd-nav-opener,
    body.home .mobile-nav .wd-nav-opener,
    body .mobile-nav .wd-drilldown-back,
    body.home .mobile-nav .wd-drilldown-back { display: none !important; }

    body .mobile-nav .wd-nav-mobile > li { min-height: 64px !important; border-bottom: 1px solid rgba(6, 21, 37, .12) !important; }
    body .mobile-nav .wd-nav-mobile > li.menu-item-has-children,
    body.home .mobile-nav .wd-nav-mobile > li.menu-item-has-children,
    body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu li.menu-item-has-children,
    body.home .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu li.menu-item-has-children { position: static !important; display: flex !important; align-items: center !important; }
    body .mobile-nav .wd-nav-mobile > li > a { display: flex !important; flex: 1 1 0 !important; min-width: 0 !important; min-height: 64px !important; align-items: center !important; padding: 0 !important; border: 0 !important; color: #061525 !important; font-size: 15px !important; font-weight: 600 !important; text-transform: uppercase !important; box-shadow: none !important; }
    body .mobile-nav .wd-nav-mobile .current-menu-item > a,
    body .mobile-nav .wd-nav-mobile .current-menu-ancestor > a { color: #d97832 !important; }

    body .mobile-nav .kajo-mobile-submenu-toggle { display: grid !important; flex: 0 0 46px !important; width: 46px !important; height: 64px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #526948 !important; place-items: center !important; }
    body .mobile-nav .kajo-mobile-submenu-toggle::before { content: "\203A" !important; display: block !important; font-family: Arial, sans-serif !important; font-size: 27px !important; font-weight: 400 !important; line-height: 1 !important; transition: color .2s ease !important; }
    body .mobile-nav .kajo-mobile-submenu-toggle:hover::before,
    body .mobile-nav .kajo-mobile-submenu-toggle:focus-visible::before { color: #d97832 !important; transform: none !important; }

    body .mobile-nav .wd-nav.wd-layout-drilldown .kajo-mobile-panel-submenu,
    body.home .mobile-nav .wd-nav.wd-layout-drilldown .kajo-mobile-panel-submenu {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 26px 32px !important;
        overflow-y: auto !important;
        border: 0 !important;
        /* Neutral glass lets the page beneath provide the colour and depth. */
        background: var(--kajo-mobile-glass) !important;
        backdrop-filter: blur(22px) saturate(135%) !important;
        -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translate3d(104%, 0, 0) !important;
        visibility: hidden !important;
        z-index: 10 !important;
        transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, visibility 0s linear .4s !important;
    }
    body .mobile-nav .wd-nav.wd-layout-drilldown .kajo-mobile-panel-submenu.kajo-mobile-submenu-visible,
    body.home .mobile-nav .wd-nav.wd-layout-drilldown .kajo-mobile-panel-submenu.kajo-mobile-submenu-visible {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) !important;
        visibility: visible !important;
        transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, visibility 0s linear 0s !important;
    }

    /* Only Shop uses a full-screen panel. Its child categories expand inline. */
    body .mobile-nav .wd-nav.wd-layout-drilldown .kajo-mobile-inline-submenu,
    body.home .mobile-nav .wd-nav.wd-layout-drilldown .kajo-mobile-inline-submenu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        /* Logical: the nested list indents from the side the row starts on.
           Stated physically as `0 0 8px 18px`, the indent stayed on the left
           in Arabic, so the rows ran flush to the right screen edge and the
           category icon and its olive disc were clipped against it. */
        padding-block: 0 8px !important;
        padding-inline: 18px 0 !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        opacity: 1 !important;
        pointer-events: none !important;
        transform: none !important;
        visibility: visible !important;
    }

    /* Woodmart gives nested account/category lists a white menu surface.
       Keep nested content transparent so the drawer's glass remains continuous. */
    body .mobile-nav .wd-nav-mobile .wd-sub-menu:not(.kajo-mobile-panel-submenu),
    body .mobile-nav .wd-nav-mobile .sub-sub-menu:not(.kajo-mobile-panel-submenu),
    body.home .mobile-nav .wd-nav-mobile .wd-sub-menu:not(.kajo-mobile-panel-submenu),
    body.home .mobile-nav .wd-nav-mobile .sub-sub-menu:not(.kajo-mobile-panel-submenu),
    body .mobile-nav .wd-nav-mobile .wd-sub-menu:not(.kajo-mobile-panel-submenu) > li,
    body .mobile-nav .wd-nav-mobile .sub-sub-menu:not(.kajo-mobile-panel-submenu) > li,
    body.home .mobile-nav .wd-nav-mobile .wd-sub-menu:not(.kajo-mobile-panel-submenu) > li,
    body.home .mobile-nav .wd-nav-mobile .sub-sub-menu:not(.kajo-mobile-panel-submenu) > li {
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    body .mobile-nav .wd-nav.wd-layout-drilldown .kajo-mobile-inline-submenu.kajo-mobile-submenu-visible,
    body.home .mobile-nav .wd-nav.wd-layout-drilldown .kajo-mobile-inline-submenu.kajo-mobile-submenu-visible {
        display: block !important;
        pointer-events: auto !important;
        animation: kajo-mobile-submenu-expand .28s cubic-bezier(.22, 1, .36, 1) both;
    }
    body .mobile-nav .kajo-mobile-inline-submenu > li,
    body.home .mobile-nav .kajo-mobile-inline-submenu > li { min-height: 46px !important; }
    body .mobile-nav .kajo-mobile-inline-submenu > li > a,
    body.home .mobile-nav .kajo-mobile-inline-submenu > li > a { min-height: 46px !important; font-size: 13px !important; font-weight: 500 !important; }
    body .mobile-nav .kajo-mobile-submenu-toggle[aria-expanded="true"]::before,
    body.home .mobile-nav .kajo-mobile-submenu-toggle[aria-expanded="true"]::before { transform: rotate(90deg) !important; color: #d97832 !important; }
    @keyframes kajo-mobile-submenu-expand { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

    /* A child panel must cover its still-rendered parent panel. */
    body .mobile-nav .wd-nav.wd-layout-drilldown .kajo-mobile-submenu-visible .kajo-mobile-submenu-visible,
    body.home .mobile-nav .wd-nav.wd-layout-drilldown .kajo-mobile-submenu-visible .kajo-mobile-submenu-visible { z-index: 20 !important; }
    body .mobile-nav .wd-nav.wd-layout-drilldown .kajo-mobile-submenu-visible .kajo-mobile-submenu-visible .kajo-mobile-submenu-visible,
    body.home .mobile-nav .wd-nav.wd-layout-drilldown .kajo-mobile-submenu-visible .kajo-mobile-submenu-visible .kajo-mobile-submenu-visible { z-index: 30 !important; }
    body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu > li,
    body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu > li,
    body.home .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu > li,
    body.home .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu > li { min-height: 54px !important; border: 0 !important; }
    body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu > li > a,
    body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu > li > a,
    body.home .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu > li > a,
    body.home .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu > li > a { display: flex !important; min-height: 54px !important; align-items: center !important; padding: 0 !important; border: 0 !important; color: #061525 !important; font-size: 14px !important; font-weight: 550 !important; text-transform: uppercase !important; box-shadow: none !important; }
    body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu li.menu-item-has-children,
    body.home .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu li.menu-item-has-children { position: static !important; display: flex !important; align-items: center !important; }
    body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu .kajo-mobile-submenu-toggle,
    body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu .kajo-mobile-submenu-toggle,
    body.home .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu .kajo-mobile-submenu-toggle,
    body.home .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu .kajo-mobile-submenu-toggle { height: 54px !important; }

    /* Mobile header: use the full header width without making the bar taller. */
    body .whb-general-header-inner,
    body.home .whb-general-header-inner {
        padding-inline: 6px !important;
    }

    /* Woodmart adds this margin to non-home sticky rows after page load. It
       creates the apparent gap above the archive header. */
    body .whb-general-header,
    body.home .whb-general-header {
        margin: 0 !important;
    }

    body .whb-general-header .whb-mobile-left,
    body.home .whb-general-header .whb-mobile-left {
        inset-inline-start: 0 !important;
        width: 38px !important;
    }

    body .whb-general-header .whb-mobile-right,
    body.home .whb-general-header .whb-mobile-right {
        inset-inline-end: 6px !important;
        gap: 4px !important;
    }

    body .whb-general-header .wd-header-mobile-nav > a,
    body.home .whb-general-header .wd-header-mobile-nav > a {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding-top: 0 !important;
    }

    body .whb-general-header .wd-header-mobile-nav .wd-tools-icon,
    body.home .whb-general-header .wd-header-mobile-nav .wd-tools-icon {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        font-size: 20px !important;
    }

    body .whb-general-header .whb-mobile-center,
    body.home .whb-general-header .whb-mobile-center {
        width: 66px !important;
        height: var(--kajo-mobile-header-h) !important;
    }

    body .whb-general-header .whb-mobile-center .wd-logo,
    body.home .whb-general-header .whb-mobile-center .wd-logo {
        display: grid !important;
        position: absolute !important;
        left: 50% !important;
        width: 62px !important;
        height: var(--kajo-mobile-header-h) !important;
        place-items: center !important;
        transform: translateX(-50%) !important;
    }

    body .whb-general-header .whb-mobile-center .wd-logo img,
    body.home .whb-general-header .whb-mobile-center .wd-logo img {
        width: 52px !important;
        max-width: 52px !important;
        height: 58px !important;
        max-height: 58px !important;
        margin: 0 !important;
        object-fit: contain !important;
        transform: scale(1.18) !important;
        transform-origin: center !important;
    }
}


/* ---------------------------------------------------------------------------
   RTL: the row's own indent
   The anchor inside each category row carries a physical left margin, which in
   Arabic indented it away from the left gutter while leaving nothing between
   the icon and the right screen edge. Stated inline-wise it follows the row's
   start side in both languages: unchanged in English, mirrored in Arabic.
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
    body .mobile-nav .wd-nav-mobile a.woodmart-nav-link {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-inline-start: 20px !important;
    }
}