@media (max-width: 767.98px) {
    .desktop-cat-drawer,
    .desktop-cat-drawer-backdrop {
        display: none !important;
    }
}

/* Desktop categories mega menu */
.desktop-cat-drawer,
.desktop-cat-drawer-backdrop {
    display: none !important;
}

@media (min-width: 768px) {
    .modern-store-header .modern-main-header {
        position: relative;
        overflow: visible;
    }

    .desktop-category-mega-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: 1045;
        width: min(1380px, calc(100% - 40px));
        padding-top: 8px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, -10px);
        transform-origin: top center;
        transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.24s ease;
    }

    .desktop-category-mega-menu.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

    .desktop-category-mega-menu-shell {
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--web-primary) 18%, #dfe8e2);
        border-radius: 0 0 16px 16px;
        background: #fff;
        box-shadow: 0 18px 42px rgba(18, 32, 25, 0.16);
    }

    .desktop-category-mega-menu-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px 18px;
        padding: 24px 28px 20px;
    }

    .desktop-category-mega-menu-item {
        display: flex;
        align-items: center;
        gap: 13px;
        min-width: 0;
        min-height: 72px;
        padding: 9px 10px;
        border-radius: 12px;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .desktop-category-mega-menu-item:hover {
        background: color-mix(in srgb, var(--web-primary) 7%, #fff);
        transform: translateY(-1px);
    }

    .desktop-category-mega-menu-icon {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--web-primary) 17%, #e6eee9);
        border-radius: 12px;
        background: color-mix(in srgb, var(--web-primary) 5%, #fff);
        text-decoration: none;
    }

    .desktop-category-mega-menu-icon img {
        width: 100%;
        height: 100%;
        padding: 0;
        object-fit: cover;
    }

    .desktop-category-mega-menu-content {
        min-width: 0;
        flex: 1;
    }

    .desktop-category-mega-menu-title {
        display: block;
        overflow: hidden;
        color: #17211b !important;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.45;
        text-decoration: none !important;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: color 0.2s ease;
    }

    .desktop-category-mega-menu-title:hover {
        color: var(--web-primary) !important;
    }

    .desktop-category-mega-menu-children {
        min-height: 20px;
        margin-top: 3px;
        overflow: hidden;
        color: #7a847e;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.55;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .desktop-category-mega-menu-children a {
        color: inherit !important;
        text-decoration: none !important;
        transition: color 0.2s ease;
    }

    .desktop-category-mega-menu-children a:hover {
        color: var(--web-primary) !important;
    }

    .desktop-category-mega-menu-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 58px;
        padding: 10px 24px;
        border-top: 1px solid #e8efea;
        background: #fbfdfb;
    }

    .desktop-category-mega-menu-all-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--web-primary) !important;
        font-size: 14px;
        font-weight: 800;
        text-decoration: none !important;
        transition: gap 0.2s ease, color 0.2s ease;
    }

    .desktop-category-mega-menu-all-link:hover {
        gap: 12px;
        color: color-mix(in srgb, var(--web-primary) 82%, #122019) !important;
    }

    .desktop-category-mega-menu-all-link svg {
        width: 18px;
        height: 18px;
    }

    html[dir="rtl"] .desktop-category-mega-menu-all-link svg,
    .desktop-category-mega-menu[dir="rtl"] .desktop-category-mega-menu-all-link svg {
        transform: scaleX(-1);
    }

    .modern-store-header .category-menu-toggle-btn.is-open {
        color: var(--web-primary) !important;
        border-color: color-mix(in srgb, var(--web-primary) 36%, #dce8e0);
        background: color-mix(in srgb, var(--web-primary) 5%, #fff) !important;
    }
}

@media (min-width: 1200px) {
    .desktop-category-mega-menu-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .desktop-category-mega-menu {
        display: none !important;
    }
}

/* Desktop brands mega menu */
@media (min-width: 768px) {
    .desktop-brand-mega-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: 1045;
        width: min(1380px, calc(100% - 40px));
        padding-top: 8px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, -10px);
        transform-origin: top center;
        transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.24s ease;
    }

    .desktop-brand-mega-menu.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

    .desktop-brand-mega-menu-shell {
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--web-primary) 18%, #dfe8e2);
        border-radius: 0 0 16px 16px;
        background: #fff;
        box-shadow: 0 18px 42px rgba(18, 32, 25, 0.16);
    }

    .desktop-brand-mega-menu-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px 20px;
        padding: 24px 28px 20px;
    }

    .desktop-brand-mega-menu-item {
        display: flex;
        align-items: center;
        gap: 13px;
        min-width: 0;
        min-height: 70px;
        padding: 9px 10px;
        border-radius: 12px;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .desktop-brand-mega-menu-item:hover {
        background: color-mix(in srgb, var(--web-primary) 7%, #fff);
        transform: translateY(-1px);
    }

    .desktop-brand-mega-menu-image {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--web-primary) 17%, #e6eee9);
        border-radius: 12px;
        background: color-mix(in srgb, var(--web-primary) 5%, #fff);
        text-decoration: none;
    }

    .desktop-brand-mega-menu-image img {
        width: 100%;
        height: 100%;
        padding: 0;
        object-fit: cover;
    }

    .desktop-brand-mega-menu-content {
        min-width: 0;
        flex: 1;
    }

    .desktop-brand-mega-menu-title {
        display: block;
        overflow: hidden;
        color: #17211b !important;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.45;
        text-decoration: none !important;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: color 0.2s ease;
    }

    .desktop-brand-mega-menu-title:hover {
        color: var(--web-primary) !important;
    }

    .desktop-brand-mega-menu-count {
        display: block;
        margin-top: 3px;
        color: #8a948e;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.45;
    }

    .desktop-brand-mega-menu-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 58px;
        padding: 10px 24px;
        border-top: 1px solid #e8efea;
        background: #fbfdfb;
    }

    .desktop-brand-mega-menu-all-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--web-primary) !important;
        font-size: 14px;
        font-weight: 800;
        text-decoration: none !important;
        transition: gap 0.2s ease, color 0.2s ease;
    }

    .desktop-brand-mega-menu-all-link:hover {
        gap: 12px;
        color: color-mix(in srgb, var(--web-primary) 82%, #122019) !important;
    }

    .desktop-brand-mega-menu-all-link svg {
        width: 18px;
        height: 18px;
    }

    html[dir="rtl"] .desktop-brand-mega-menu-all-link svg,
    .desktop-brand-mega-menu[dir="rtl"] .desktop-brand-mega-menu-all-link svg {
        transform: scaleX(-1);
    }

    .modern-store-header .desktop-brand-menu-toggle-btn.is-open {
        color: var(--web-primary) !important;
        background: color-mix(in srgb, var(--web-primary) 5%, #fff) !important;
    }
}

@media (min-width: 992px) {
    .desktop-brand-mega-menu-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .desktop-brand-mega-menu-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .desktop-brand-mega-menu {
        display: none !important;
    }
}

@media (min-width: 768px) {
    body.desktop-cat-drawer-open {
        overflow: hidden;
    }

    .desktop-cat-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(18, 32, 25, 0.48);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0.28s ease;
    }

    .desktop-cat-drawer-backdrop.show {
        opacity: 1;
        visibility: visible;
    }

    /* LTR default: dock left, hide off-screen to the left */
    .desktop-cat-drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        width: min(390px, 92vw);
        max-width: 390px;
        z-index: 1050;
        transform: translateX(-110%);
        visibility: hidden;
        transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.34s;
        pointer-events: none;
    }

    /* RTL: dock right, hide off-screen to the right */
    html[dir="rtl"] .desktop-cat-drawer,
    .desktop-cat-drawer[dir="rtl"] {
        left: auto;
        right: 0;
        transform: translateX(110%);
    }

    /* .show always wins over dir hide transforms */
    .desktop-cat-drawer.show,
    html[dir="ltr"] .desktop-cat-drawer.show,
    html[dir="rtl"] .desktop-cat-drawer.show,
    .desktop-cat-drawer[dir="ltr"].show,
    .desktop-cat-drawer[dir="rtl"].show {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .desktop-cat-drawer-shell {
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #fff;
        box-shadow: 0 0 40px rgba(18, 32, 25, 0.18);
    }

    .desktop-cat-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 64px;
        padding: 14px 16px;
        background: linear-gradient(135deg, #122019 0%, #1b4d31 100%);
        color: #fff;
        flex-shrink: 0;
    }

    .desktop-cat-drawer-head-main {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .desktop-cat-drawer-head-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.12);
        flex-shrink: 0;
    }

    .desktop-cat-drawer-head-icon svg {
        width: 20px;
        height: 20px;
        color: #fff;
    }

    .desktop-cat-drawer-title {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        line-height: 1.3;
        color: #fff;
    }

    .desktop-cat-drawer-close {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.2s ease;
        flex-shrink: 0;
    }

    .desktop-cat-drawer-close:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .desktop-cat-drawer-close svg {
        width: 18px;
        height: 18px;
    }

    .desktop-cat-drawer-body {
        flex: 1;
        overflow: hidden;
        background: #fff;
    }

    .desktop-cat-drawer-track {
        position: relative;
        height: 100%;
        overflow: hidden;
    }

    .desktop-cat-drawer-level {
        position: absolute;
        inset: 0;
        overflow-y: auto;
        background: #fff;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
        scrollbar-width: thin;
    }

    html[dir="rtl"] .desktop-cat-drawer-level,
    .desktop-cat-drawer[dir="rtl"] .desktop-cat-drawer-level {
        transform: translateX(-100%);
    }

    .desktop-cat-drawer-level.is-active,
    html[dir="ltr"] .desktop-cat-drawer-level.is-active,
    html[dir="rtl"] .desktop-cat-drawer-level.is-active,
    .desktop-cat-drawer[dir="ltr"] .desktop-cat-drawer-level.is-active,
    .desktop-cat-drawer[dir="rtl"] .desktop-cat-drawer-level.is-active {
        transform: translateX(0) !important;
        pointer-events: auto;
        z-index: 2;
    }

    .desktop-cat-drawer-level.is-prev,
    html[dir="ltr"] .desktop-cat-drawer-level.is-prev {
        transform: translateX(-24%);
        z-index: 1;
    }

    html[dir="rtl"] .desktop-cat-drawer-level.is-prev,
    .desktop-cat-drawer[dir="rtl"] .desktop-cat-drawer-level.is-prev {
        transform: translateX(24%);
        z-index: 1;
    }

    .desktop-cat-drawer-list,
    .desktop-cat-drawer-sublist,
    .desktop-cat-drawer-childlist {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .desktop-cat-drawer-item {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 62px;
        padding: 10px 16px;
        border: 0;
        background: transparent;
        text-decoration: none;
        color: #1a1f2c;
        cursor: pointer;
        transition: background-color 0.2s ease;
        text-align: start;
    }

    .desktop-cat-drawer-item:hover,
    .desktop-cat-drawer-item:focus {
        background: color-mix(in srgb, var(--web-primary) 7%, #fff);
        outline: none;
    }

    .desktop-cat-drawer-list > li + li .desktop-cat-drawer-item {
        border-top: 1px solid #edf2ef;
    }

    .desktop-cat-drawer-item-thumb,
    .desktop-cat-drawer-subhead-thumb {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        overflow: hidden;
        background: #f4f8f5;
        border: 1px solid color-mix(in srgb, var(--web-primary) 12%, #e8edef);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .desktop-cat-drawer-item-thumb img,
    .desktop-cat-drawer-subhead-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .desktop-cat-drawer-item-name {
        flex: 1;
        min-width: 0;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.35;
    }

    .desktop-cat-drawer-item-chevron {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--web-primary);
    }

    .desktop-cat-drawer-item-chevron svg {
        width: 16px;
        height: 16px;
    }

    html[dir="rtl"] .desktop-cat-drawer-item-chevron svg,
    html[dir="rtl"] .desktop-cat-drawer-back-icon svg,
    .desktop-cat-drawer[dir="rtl"] .desktop-cat-drawer-item-chevron svg,
    .desktop-cat-drawer[dir="rtl"] .desktop-cat-drawer-back-icon svg {
        transform: scaleX(-1);
    }

    .desktop-cat-drawer-footer {
        padding: 14px 16px 18px;
        border-top: 1px solid #edf2ef;
        background: #f8fbf9;
    }

    .desktop-cat-drawer-view-all {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        border-radius: 12px;
        background: var(--web-primary);
        color: #fff !important;
        font-size: 14px;
        font-weight: 800;
        text-decoration: none !important;
        transition: opacity 0.2s ease;
    }

    .desktop-cat-drawer-view-all:hover {
        opacity: 0.92;
        color: #fff !important;
    }

    .desktop-cat-drawer-back {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 48px;
        padding: 10px 16px;
        border: 0;
        border-bottom: 1px solid #edf2ef;
        background: #f8fbf9;
        color: var(--web-primary);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        text-align: start;
    }

    .desktop-cat-drawer-back-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .desktop-cat-drawer-back-icon svg {
        width: 16px;
        height: 16px;
    }

    .desktop-cat-drawer-subhead {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        border-bottom: 1px solid #edf2ef;
    }

    .desktop-cat-drawer-subhead-label {
        margin: 0 0 2px;
        font-size: 12px;
        font-weight: 600;
        color: #6f7884;
    }

    .desktop-cat-drawer-subhead-title {
        margin: 0;
        font-size: 17px;
        font-weight: 800;
        color: #1a1f2c;
        line-height: 1.3;
    }

    .desktop-cat-drawer-parent-link {
        display: block;
        margin: 12px 16px 0;
        padding: 10px 12px;
        border-radius: 10px;
        background: color-mix(in srgb, var(--web-primary) 8%, #fff);
        color: var(--web-primary) !important;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none !important;
    }

    .desktop-cat-drawer-sublist {
        padding: 8px 0 18px;
    }

    .desktop-cat-drawer-subgroup + .desktop-cat-drawer-subgroup {
        border-top: 8px solid #f4f7f5;
    }

    .desktop-cat-drawer-subtitle {
        display: block;
        padding: 12px 16px 6px;
        color: #1a1f2c !important;
        font-size: 15px;
        font-weight: 800;
        text-decoration: none !important;
    }

    .desktop-cat-drawer-subtitle:hover {
        color: var(--web-primary) !important;
    }

    .desktop-cat-drawer-childlist {
        padding: 0 16px 10px;
    }

    .desktop-cat-drawer-childlist a {
        display: block;
        padding: 7px 0;
        color: #6f7884 !important;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none !important;
        transition: color 0.2s ease, padding-inline-start 0.2s ease;
    }

    .desktop-cat-drawer-childlist a:hover {
        color: var(--web-primary) !important;
        padding-inline-start: 4px;
    }
}