/*rzm:s38*/
/* 
 * PREMIUM MOBILE MEGA MENU - GRID NAVIGATION DESIGN
 * Professional grid layout with smooth navigation for 768px and below
 * Features: Grid main categories, expandable subcategories, back button
 * 
 * IMPORTANT: This file ONLY affects screens 768px and below
 * Desktop (769px+) is completely unaffected
 */

/* ========================================
   DESKTOP PROTECTION - DO NOT TOUCH ABOVE 1100px
   ======================================== */
@media screen and (min-width: 1101px) {
    .mega-menu-mobile-header,
    .mega-menu-back-btn,
    .mega-menu-mobile-content {
        display: none !important;
    }
}

/* ========================================
   FIX: Move trigger to wide-nav for tablet (850px-1100px)
   JavaScript MOVES (not clones) trigger to wide-nav
   Show MOBILE style menu but WITHOUT mobile header
   ======================================== */
@media screen and (min-width: 850px) and (max-width: 1100px) {
    /* Show wide-nav */
    #wide-nav,
    #wide-nav.header-bottom,
    .header-bottom.wide-nav {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Show trigger in wide-nav */
    #wide-nav .rozhika-mega-menu-item,
    #wide-nav .rozhika-mega-menu-wrapper,
    #wide-nav .mega-menu-trigger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #wide-nav .rozhika-mega-menu-item {
        display: block !important;
    }
    
    #wide-nav .rozhika-mega-menu-wrapper {
        display: block !important;
    }
    
    /* HIDE mobile header only - keep full screen style */
    .mega-menu-mobile-header {
        display: none !important;
    }
    
    /* Hide header-inner when menu is open */
    /* State scoped to #header, not <body>: a class change on <body> costs a
       full-viewport re-raster (~56 ms measured on a mobile profile at 4x CPU),
       whereas the same toggle on #header costs 0.8-1.4 ms. */
    #header.rzk-mm-open .header-inner,
    #header.rzk-mm-open .header-main,
    #header.rzk-mm-open #masthead {
        display: none !important;
    }
    
    /* Keep wide-nav visible when menu is open */
    #header.rzk-mm-open #wide-nav {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99998 !important;
    }
}

@media screen and (max-width: 849px) {
    /* `> li.account-item` keyed Chrome's invalidation set on the TAG `li`, so one
       class change recalculated style for every <li> in the document (94-169 of
       them). Dropping the tag makes it class-keyed and touches only these three. */
    #header.rzk-mm-open #masthead .mobile-nav.nav.nav-right > .account-item,
    #header.rzk-mm-open #masthead .mobile-nav.nav.nav-right > .cart-item,
    #header.rzk-mm-open #masthead .mobile-nav.nav.nav-right > .header-divider {
        display: none !important;
    }
}

/* ========================================
   TRIGGER STYLES - KEEP AT 768px
   ======================================== */
@media screen and (max-width: 768px) {
    /* ========================================
       MOBILE TRIGGER BUTTON - COMPACT & CLEAN - 34x34px to match search icon
       ======================================== */
    .mega-menu-trigger {
        padding: 5px !important;
        gap: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        display: flex !important;
    }
    
    /* HIGHEST PRIORITY - Override theme for Rozhika trigger button */
    .menu-item.rozhika-mega-menu-item .mega-menu-trigger,
    .rozhika-mega-menu-wrapper .mega-menu-trigger,
    li.menu-item.rozhika-mega-menu-item .rozhika-mega-menu-wrapper .mega-menu-trigger {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        padding: 5px !important;
    }
    
    .mega-menu-trigger:active {
        transform: scale(0.95);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }
    
    .mega-menu-trigger-text {
        display: none !important;
    }
    
    .mega-menu-trigger .mega-menu-icon {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
    }
    
    /* HIGHEST PRIORITY - Icon size inside trigger */
    .menu-item.rozhika-mega-menu-item .mega-menu-trigger .mega-menu-icon,
    .rozhika-mega-menu-wrapper .mega-menu-trigger .mega-menu-icon {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }
    
    .mega-menu-trigger .mega-menu-chevron {
        display: none !important;
    }
}

/* ========================================
   MOBILE CONTENT - 1100px AND BELOW
   ======================================== */
@media screen and (max-width: 1100px) {
    /* ========================================
       MOBILE CONTAINER - FULL SCREEN OVERLAY
       ======================================== */
    .mega-menu-container {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        background: #f8f9fa !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        z-index: 99999 !important;
        transform: translateY(100%) !important;
        box-shadow: none !important;
    }
    
    .mega-menu-container.active {
        transform: translateY(0) !important;
    }
    
    /* ========================================
       MOBILE HEADER - WITH BACK BUTTON AND SEARCH
       ======================================== */
    .mega-menu-mobile-header {
        display: flex !important;
        flex-direction: column;
        background: linear-gradient(135deg, var(--rmm-primary-color, #9b51e0) 0%, #8b3fc8 100%);
        border-bottom: none;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 4px 20px rgba(155, 81, 224, 0.25),
                    0 2px 8px rgba(0, 0, 0, 0.1),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
    }
    
    .mega-menu-mobile-header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px 14px 20px;
        min-height: 68px;
    }
    
    .mega-menu-mobile-header-content {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
    }
    
    .mega-menu-mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }
    
    .mega-menu-back-btn {
        background: rgba(255, 255, 255, 0.25);
        border: none;
        padding: 10px;
        cursor: pointer;
        color: #fff;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        -webkit-tap-highlight-color: transparent;
        backdrop-filter: blur(10px);
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        opacity: 0;
        transform: translateX(-10px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    
    .mega-menu-back-btn.visible {
        display: flex !important;
        opacity: 1;
        transform: translateX(0);
    }
    
    .mega-menu-back-btn:active {
        background: rgba(255, 255, 255, 0.4);
        transform: scale(0.9) translateX(0);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15),
                    inset 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .mega-menu-back-btn svg {
        width: 20px;
        height: 20px;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    }
    
    .mega-menu-back-btn:active svg {
        transform: translateX(-2px);
    }
    
    .mega-menu-mobile-title {
        font-size: 19px;
        font-weight: 800;
        color: #fff;
        letter-spacing: -0.03em;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        flex: 1;
    }
    
    .mega-menu-mobile-title.changing {
        opacity: 0;
        transform: translateY(-5px);
    }
    
    .mega-menu-close-btn {
        background: rgba(255, 255, 255, 0.25);
        border: none;
        padding: 10px;
        cursor: pointer;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        -webkit-tap-highlight-color: transparent;
        backdrop-filter: blur(10px);
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    
    .mega-menu-close-btn:active {
        background: rgba(255, 255, 255, 0.4);
        transform: scale(0.9);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15),
                    inset 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .mega-menu-close-btn svg {
        width: 20px;
        height: 20px;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    }
    
    /* View All Button */
    .mega-menu-view-all-btn {
        background: rgba(255, 255, 255, 0.25);
        border: none;
        padding: 10px 16px;
        cursor: pointer;
        color: #fff;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        -webkit-tap-highlight-color: transparent;
        backdrop-filter: blur(10px);
        height: 44px;
        flex-shrink: 0;
        opacity: 0;
        transform: scale(0.9);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
        letter-spacing: -0.02em;
    }
    
    .mega-menu-view-all-btn.visible {
        display: flex !important;
        opacity: 1;
        transform: scale(1);
    }
    
    .mega-menu-view-all-btn:active {
        background: rgba(255, 255, 255, 0.4);
        transform: scale(0.95);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15),
                    inset 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* ========================================
       SEARCH CONTAINER - PREMIUM DESIGN
       ======================================== */
    .mega-menu-search-container {
        padding: 0 20px 16px 20px;
        background: transparent;
    }
    
    .mega-menu-search-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 14px;
        padding: 0 14px;
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
        border: 1.5px solid rgba(255, 255, 255, 0.2);
    }
    
    .mega-menu-search-wrapper:focus-within {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3),
                    0 0 0 3px rgba(255, 255, 255, 0.1);
    }
    
    .mega-menu-search-icon {
        color: rgba(255, 255, 255, 0.9);
        flex-shrink: 0;
        margin-left: 10px;
        width: 18px;
        height: 18px;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    }
    
    .mega-menu-search-input {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        padding: 13px 8px;
        font-size: 14px;
        font-weight: 500;
        color: #1e293b;
        direction: rtl;
        text-align: right;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
    }
    
    .mega-menu-search-input::placeholder {
        color: #64748b;
        font-weight: 500;
    }
    
    .mega-menu-search-input:focus::placeholder {
        color: #94a3b8;
    }

    /* ========================================
       GLOBAL SEARCH RESULTS - PREMIUM DISPLAY
       ======================================== */
    .mega-menu-search-results {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, #f1f3f5 0%, #f8f9fa 100%);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        z-index: 50;
        padding: 0;
    }
    
    .mega-menu-search-results-wrapper {
        padding: 24px 20px;
    }
    
    .search-results-header {
        margin-bottom: 28px;
        text-align: center;
        padding-bottom: 20px;
        border-bottom: 2px solid rgba(155, 81, 224, 0.1);
    }
    
    .search-results-title {
        font-size: 18px;
        font-weight: 800;
        color: #1a1a1a;
        margin: 0 0 8px 0;
        letter-spacing: -0.03em;
        line-height: 1.3;
    }
    
    .search-results-title span {
        color: var(--rmm-primary-color, #9b51e0);
        font-weight: 900;
    }
    
    .search-results-count {
        font-size: 13px;
        color: #6b7280;
        font-weight: 600;
        margin: 0;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        padding: 6px 16px;
        border-radius: 20px;
        display: inline-block;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }
    
    .search-results-section {
        margin-bottom: 28px;
    }
    
    .search-section-title {
        font-size: 14px;
        font-weight: 700;
        color: #374151;
        margin: 0 0 14px 0;
        align-items: center;
        gap: 10px;
        padding: 0 4px;
        letter-spacing: -0.01em;
    }
    
    .section-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        color: var(--rmm-primary-color, #9b51e0);
        stroke: var(--rmm-primary-color, #9b51e0);
        fill: var(--rmm-primary-color, #9b51e0);
        filter: drop-shadow(0 2px 4px rgba(155, 81, 224, 0.2));
        margin-bottom: -5px;
    }
    
    /* Main Category Results - Grid Cards */
    .search-results-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    
    .search-result-card {
        background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
        border-radius: 18px;
        padding: 24px 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        color: #1a1a1a;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08),
                    0 1px 4px rgba(0, 0, 0, 0.04),
                    inset 0 1px 0 rgba(255, 255, 255, 0.9);
        border: 2px solid rgba(155, 81, 224, 0.08);
        position: relative;
        overflow: hidden;
        min-height: 130px;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }
    
    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.92) translateY(10px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }
    
    .search-result-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at center, var(--rmm-primary-color, #9b51e0), transparent);
        opacity: 0;
    }
    
    .search-result-card:active {
        transform: scale(0.96);
        box-shadow: 0 8px 24px rgba(155, 81, 224, 0.25),
                    0 2px 8px rgba(155, 81, 224, 0.15),
                    inset 0 1px 0 rgba(255, 255, 255, 0.9);
        border-color: var(--rmm-primary-color, #9b51e0);
    }
    
    .search-result-card:active::before {
        opacity: 0.05;
    }
    
    .result-icon-wrapper {
        width: 52px;
        height: 52px;
        background: linear-gradient(135deg, rgba(155, 81, 224, 0.1) 0%, rgba(139, 63, 200, 0.1) 100%);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(155, 81, 224, 0.15);
    }
    
    .result-icon-wrapper svg {
        color: var(--rmm-primary-color, #9b51e0);
        width: 26px;
        height: 26px;
    }
    
    /* HIGHEST PRIORITY - Override theme for search result images in Rozhika Mega Menu */
    .menu-item.rozhika-mega-menu-item .result-icon-wrapper img,
    .rozhika-mega-menu-wrapper .result-icon-wrapper img,
    .mega-menu-search-results .result-icon-wrapper img {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        object-fit: contain !important;
        border-radius: 8px !important;
    }
    
    .search-result-card:active .result-icon-wrapper {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(155, 81, 224, 0.3);
    }
    
    .search-result-card .result-name {
        font-size: 14px;
        font-weight: 700;
        text-align: center;
        line-height: 1.4;
        color: #1a1a1a;
    }
    
    .search-result-card .result-arrow {
        position: absolute;
        bottom: 16px;
        left: 16px;
        color: var(--rmm-primary-color, #9b51e0);
        opacity: 0;
    }
    
    .search-result-card:active .result-arrow {
        opacity: 1;
        transform: translateX(-3px);
    }
    
    /* Sub and Sub-Sub Results - List Format */
    .search-results-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .search-result-item {
        background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
        border-radius: 16px;
        padding: 18px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        text-decoration: none;
        color: #1a1a1a;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06),
                    0 1px 4px rgba(0, 0, 0, 0.04),
                    inset 0 1px 0 rgba(255, 255, 255, 0.9);
        border: 2px solid rgba(155, 81, 224, 0.06);
        -webkit-tap-highlight-color: transparent;
        position: relative;
        overflow: hidden;
    }
    
    @keyframes fadeInSlide {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    .search-result-item::before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(to bottom, var(--rmm-primary-color, #9b51e0), rgba(155, 81, 224, 0.5));
        opacity: 0;
    }
    
    .search-result-item:active {
        transform: translateX(-6px);
        box-shadow: 0 6px 20px rgba(155, 81, 224, 0.2),
                    0 2px 8px rgba(155, 81, 224, 0.12),
                    inset 0 1px 0 rgba(255, 255, 255, 0.9);
        border-color: var(--rmm-primary-color, #9b51e0);
        background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    }
    
    .search-result-item:active::before {
        opacity: 1;
    }
    
    .result-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
        text-align: right;
    }
    
    .search-result-item .result-name {
        font-size: 15px;
        font-weight: 700;
        color: #1a1a1a;
        line-height: 1.4;
        letter-spacing: -0.01em;
    }
    
    .search-result-item:active .result-name {
        color: var(--rmm-primary-color, #9b51e0);
    }
    
    .result-breadcrumb {
        font-size: 12px;
        color: #9ca3af;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;
        direction: rtl;
    }
    
    .search-result-item .result-arrow {
        color: #d1d5db;
        flex-shrink: 0;
    }
    
    .search-result-item:active .result-arrow {
        color: var(--rmm-primary-color, #9b51e0);
        transform: translateX(-4px);
    }
    
    /* Premium No Results SVG State */
    .mega-menu-search-no-results {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        text-align: center;
        width: 100%;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .mega-menu-search-no-results.premium-empty-state svg {
        width: 160px;
        height: 160px;
        margin-bottom: 24px;
    }
    
    @keyframes floatAnimation {
        0%, 100% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-10px);
        }
    }
    
    /* -----------------------------------------------------------------------
     * Never animate inside an SVG sprite definition.
     *
     * These classes sit inside <symbol>, which is a template and is never
     * painted; only its <use> instances are. Chrome still ticks the animation,
     * and because the keyframes move SVG geometry each tick forces a style
     * recalculation plus layout - 121 of each per 2 seconds on /shop/, forever,
     * for artwork nobody can see. Restricting the exception to `symbol`
     * descendants keeps a genuinely visible empty state animating, because a
     * <use> instance is cloned into a shadow tree with no <symbol> ancestor.
     * ----------------------------------------------------------------------- */
    symbol .empty-bg-circle,
    symbol .empty-sad-line {
    }

    
    .empty-circle-1 {
    }
    
    .empty-circle-2 {
    }
    
    .empty-circle-3 {
    }
    
    @keyframes pulseCircle {
        0%, 100% {
            opacity: 0.1;
            transform: scale(1);
        }
        50% {
            opacity: 0.15;
            transform: scale(1.05);
        }
    }
    
    .empty-sad-line {
        transform-origin: center;
    }
    
    @keyframes sadFace {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(2px);
        }
    }
    
    .mega-menu-search-no-results p {
        font-size: 19px;
        font-weight: 800;
        color: #1a1a1a;
        margin: 0 0 10px 0;
        letter-spacing: -0.03em;
    }
    
    .mega-menu-search-no-results span {
        font-size: 14px;
        color: #9ca3af;
        font-weight: 500;
        margin: 0;
    }
    
    /* ========================================
       MOBILE CONTENT AREA - PREMIUM BACKGROUND
       ======================================== */
    .mega-menu-mobile-content {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        background: linear-gradient(to bottom, #f1f3f5 0%, #f8f9fa 100%);
        position: relative;
    }
    
    /* Disable clicks during transition to prevent rapid/accidental clicks */
    .mega-menu-mobile-content.transitioning {
        pointer-events: none;
        user-select: none;
    }
    
    .mega-menu-mobile-content.transitioning * {
        pointer-events: none !important;
        cursor: default !important;
    }
    
    /* Subtle pattern overlay */
    .mega-menu-mobile-content::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 200px;
        background: linear-gradient(to bottom, 
            rgba(155, 81, 224, 0.03) 0%, 
            transparent 100%);
        pointer-events: none;
        z-index: 0;
    }
    
    /* ========================================
       MAIN CATEGORIES - GRID LAYOUT
       ======================================== */
    .mega-menu-main-categories {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        background: #f8f9fa !important;
        border: none !important;
        padding: 20px 16px !important;
        overflow: visible !important;
        box-shadow: none !important;
        order: unset !important;
        display: block !important;
        opacity: 1;
        transform: translateX(0);
    }
    
    .mega-menu-main-categories.fade-out {
        opacity: 0 !important;
        transform: translateX(-20px) !important;
    }
    
    .mega-menu-main-categories.hidden {
        display: none !important;
    }
    
    .mega-menu-main-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    
    /* ========================================
       CATEGORY CARD DESIGN - BEAUTIFUL GRID ITEMS
       ======================================== */
    .mega-menu-main-item {
        display: block !important;
        margin: 0 !important;
        background: #fff !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 
                    0 1px 3px rgba(0, 0, 0, 0.04) !important;
        border: 2px solid transparent !important;
    }
    
    .mega-menu-main-item:active {
        transform: translateY(-2px) scale(0.98);
        box-shadow: 0 8px 20px rgba(155, 81, 224, 0.2), 
                    0 2px 6px rgba(0, 0, 0, 0.1) !important;
        border-color: var(--rmm-primary-color, #9b51e0) !important;
    }
    
    .mega-menu-main-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 24px 16px !important;
        gap: 12px !important;
        background: #fff !important;
        color: #1f2937 !important;
        text-align: center !important;
        border: none !important;
        border-radius: 0 !important;
        min-height: 140px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        text-decoration: none !important;
        position: relative;
        overflow: hidden;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    
    /* Prevent link navigation on mobile for categories with children */
    .mega-menu-main-item.has-children .mega-menu-main-link {
        pointer-events: auto !important;
        touch-action: manipulation;
    }
    
    .mega-menu-main-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at center, rgba(155, 81, 224, 0.08) 0%, transparent 70%);
        opacity: 0;
    }
    
    .mega-menu-main-link:active::before {
        opacity: 1;
    }
    
    .mega-menu-main-link:active {
        background: linear-gradient(135deg, #fafbfc 0%, #f5f6f7 100%) !important;
    }
    
    /* Icon styling */
    .mega-menu-category-icon,
    .mega-menu-icon-placeholder {
        width: 52px !important;
        height: 52px !important;
        margin: 0 !important;
        order: 0;
        flex-shrink: 0;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
    }
    
    .mega-menu-main-link:active .mega-menu-category-icon,
    .mega-menu-main-link:active .mega-menu-icon-placeholder {
        transform: scale(1.08);
        filter: drop-shadow(0 4px 10px rgba(155, 81, 224, 0.3));
    }
    
    /* HIGHEST PRIORITY - Override theme icon sizes for Rozhika Mega Menu ONLY */
    /* This targets icons specifically within .menu-item.rozhika-mega-menu-item */
    .menu-item.rozhika-mega-menu-item .mega-menu-category-icon,
    .menu-item.rozhika-mega-menu-item .mega-menu-icon-placeholder,
    .menu-item.rozhika-mega-menu-item .rozhika-mega-menu-wrapper .mega-menu-category-icon,
    .menu-item.rozhika-mega-menu-item .rozhika-mega-menu-wrapper .mega-menu-icon-placeholder,
    li.menu-item.rozhika-mega-menu-item .mega-menu-main-link .mega-menu-category-icon,
    li.menu-item.rozhika-mega-menu-item .mega-menu-main-link .mega-menu-icon-placeholder {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
    }
    
    /* Category name */
    .mega-menu-category-name {
        flex: unset !important;
        text-align: center !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        order: 1;
        line-height: 1.4;
        color: #1f2937;
        letter-spacing: -0.01em;
    }
    
    /* Count badge */
    .mega-menu-category-count {
        font-size: 12px !important;;
        color: #9ca3af !important;
        background: #f3f4f6;
        padding: 3px 10px;
        border-radius: 12px;
        font-weight: 500;
        order: 2;
        margin-top: 4px;
    }
    
    /* Hide arrow on main grid */
    .mega-menu-arrow {
        display: none !important;
    }
    
    /* ========================================
       SUBCATEGORIES - FULL SCREEN VIEW WITH GRID
       ======================================== */
    .mega-menu-subcategories {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: 100% !important;
        background: linear-gradient(to bottom, #f1f3f5 0%, #f8f9fa 100%) !important;
        border: none !important;
        padding: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: none !important;
        order: unset !important;
        display: none !important;
        opacity: 0;
        transform: translateX(30px);
        -webkit-overflow-scrolling: touch;
    }
    
    /* Subtle gradient overlay at top */
    .mega-menu-subcategories::before {
        content: '';
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(to bottom, 
            rgba(155, 81, 224, 0.04) 0%, 
            transparent 100%);
        pointer-events: none;
        z-index: 1;
        display: block;
        margin-bottom: -100px;
    }
    
    .mega-menu-subcategories.visible {
        display: block !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
    
    .mega-menu-subcategory-panel {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        padding: 24px 20px !important;
        background: transparent !important;
        border: none !important;
        overflow: visible !important;
        opacity: 0 !important;
        visibility: hidden !important;
        display: none !important;
        transform: translateY(15px) scale(0.98);
    }
    
    .mega-menu-subcategory-panel.active {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1);
    }
    
    /* Premium Grid Layout for Sub-Categories */
    .mega-menu-subcategory-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 0 !important;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* ========================================
       SUBCATEGORY CONTAINER - PREMIUM NESTED LAYOUT
       ======================================== */
    /* The card lives on the <li> for EVERY subcategory, whether or not it has
       children. It used to be applied only to items with a sub-list, and leaf
       items got a completely different card (column layout) on the <a> instead —
       which made a leaf look nothing like its siblings in the same subtree. */
    .mega-menu-subcategory-item {
        margin: 0 !important;
        padding: 0 !important;
        background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
        border-radius: 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 
                    0 1px 3px rgba(0, 0, 0, 0.04),
                    inset 0 1px 0 rgba(255, 255, 255, 0.9);
        border: 2px solid rgba(155, 81, 224, 0.08) !important;
        overflow: hidden;
    }
    
    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.92) translateY(10px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }
    
    /* Set animation delays for staggered effect - MORE ITEMS */
    .mega-menu-subcategory-item:nth-child(1) { --item-index: 1; }
    .mega-menu-subcategory-item:nth-child(2) { --item-index: 2; }
    .mega-menu-subcategory-item:nth-child(3) { --item-index: 3; }
    .mega-menu-subcategory-item:nth-child(4) { --item-index: 4; }
    .mega-menu-subcategory-item:nth-child(5) { --item-index: 5; }
    .mega-menu-subcategory-item:nth-child(6) { --item-index: 6; }
    .mega-menu-subcategory-item:nth-child(7) { --item-index: 7; }
    .mega-menu-subcategory-item:nth-child(8) { --item-index: 8; }
    .mega-menu-subcategory-item:nth-child(9) { --item-index: 9; }
    .mega-menu-subcategory-item:nth-child(10) { --item-index: 10; }
    .mega-menu-subcategory-item:nth-child(11) { --item-index: 11; }
    .mega-menu-subcategory-item:nth-child(12) { --item-index: 12; }
    .mega-menu-subcategory-item:nth-child(13) { --item-index: 13; }
    .mega-menu-subcategory-item:nth-child(14) { --item-index: 14; }
    .mega-menu-subcategory-item:nth-child(15) { --item-index: 15; }
    .mega-menu-subcategory-item:nth-child(16) { --item-index: 16; }
    .mega-menu-subcategory-item:nth-child(17) { --item-index: 17; }
    .mega-menu-subcategory-item:nth-child(18) { --item-index: 18; }
    .mega-menu-subcategory-item:nth-child(19) { --item-index: 19; }
    .mega-menu-subcategory-item:nth-child(20) { --item-index: 20; }
    
    /* ========================================
       SUBCATEGORY LINKS - HIERARCHICAL DESIGN
       ======================================== */
    
    /* All subcategory links base style.
       Layout is deterministic (flex-start + a fixed gap) rather than
       space-between. With space-between the label was centred in whatever space
       was left, so every row started its text at a different x depending on how
       long the label was (measured: 232px-256px of jitter between siblings) and a
       row with no chevron threw its label all the way to the far edge. Now the
       icon, the label and the chevron each sit at a fixed position, so every row
       in a subtree lines up whether or not it has children. */
    .mega-menu-subcategory-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 20px 20px !important;
        margin: 0 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #1a1a1a !important;
        background: transparent !important;
        border: none !important;
        border-radius: 20px 20px 0 0 !important;
        -webkit-tap-highlight-color: transparent;
        min-height: auto !important;
        box-shadow: none !important;
        text-decoration: none !important;
        text-align: right !important;
        position: relative;
        line-height: 1.6;
        border-bottom: 2px solid rgba(155, 81, 224, 0.1) !important;
    }
    
    /* The label absorbs the free space; the chevron is pushed to the far end. */
    .mega-menu-subcategory-link > span:not(.mega-menu-category-count) {
        flex: 1 1 auto;
        min-width: 0;
    }
    
    /* Expand/Collapse Icon - Premium Design */
    .mega-menu-expand-icon {
        background: rgba(155, 81, 224, 0.1);
        border: none;
        border-radius: 10px;
        padding: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
        margin-inline-start: auto;
        position: relative;
        overflow: hidden;
    }
    
    .mega-menu-expand-icon::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at center, var(--rmm-primary-color, #9b51e0), transparent);
        opacity: 0;
    }
    
    .mega-menu-expand-icon svg {
        width: 20px;
        height: 20px;
        color: var(--rmm-primary-color, #9b51e0);
        position: relative;
        z-index: 1;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
        will-change: transform;
    }
    
    .mega-menu-expand-icon.expanded svg {
        transform: rotate(-180deg);
    }
    
    .mega-menu-expand-icon:active {
        transform: scale(0.9);
        background: rgba(155, 81, 224, 0.2);
    }
    
    .mega-menu-expand-icon:active::before {
        opacity: 0.3;
    }
    
    /* Same box metrics for every subcategory row — expandable or leaf — so that
       siblings inside one subtree are pixel-identical. (This used to be scoped to
       :has(.mega-menu-expand-icon), so leaves got different padding/height.) */
    .mega-menu-subcategory-link {
        padding-left: 16px !important;
        min-height: 80px !important;
        cursor: pointer;
        user-select: none;
    }
    
    /* Leaf subcategory (no sub-list). It is the SAME row as its siblings; the
       only difference is that it must not draw the divider / squared bottom
       corners that exist purely to join a row to the sub-list beneath it.
       Everything else — layout, padding, height, card — is shared above. */
    .mega-menu-subcategory-item:not(:has(.mega-menu-subcategory-sub-list)) .mega-menu-subcategory-link {
        border-bottom: none !important;
        border-radius: 20px !important;
    }
    
    /* Count badges */
    .mega-menu-subcategory-link .mega-menu-category-count {
        margin: 0 !important;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        padding: 6px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
        color: #6b7280;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    /* Sub-subcategories - Collapsible with smooth CSS animation */
    .mega-menu-subcategory-sub-list {
        display: block !important;
        background: linear-gradient(to bottom, rgba(155, 81, 224, 0.02) 0%, transparent 100%) !important;
        padding: 0 16px !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 0 20px 20px !important;
        list-style: none !important;
        position: relative;
        max-height: 2000px;
        opacity: 1;
        overflow: hidden;
        transform: translateY(0);
    }
    
    .mega-menu-subcategory-sub-list.expanded {
        max-height: 2000px;
        opacity: 1;
        padding: 16px 16px 20px 16px !important;
        transform: translateY(0);
    }
    
    .mega-menu-subcategory-sub-list.collapsed {
        max-height: 0 !important;
        opacity: 0 !important;
        padding: 0 16px !important;
        overflow: hidden;
        transform: translateY(-10px);
    }
    
    /* Smooth animation for sub-items appearing */
    .mega-menu-subcategory-sub-list.expanded .mega-menu-subcategory-sub-item {
    }
    
    @keyframes slideInFade {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Visual separator line */
    .mega-menu-subcategory-sub-list::before {
        content: '';
        position: absolute;
        top: 0;
        left: 20px;
        right: 20px;
        height: 1px;
        background: linear-gradient(to left, 
            transparent 0%,
            rgba(155, 81, 224, 0.15) 20%,
            rgba(155, 81, 224, 0.15) 80%,
            transparent 100%);
    }
    
    .mega-menu-subcategory-sub-item {
        list-style: none !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
    }
    
    .mega-menu-subcategory-sub-item:last-child {
        margin-bottom: 0 !important;
    }
    
    .mega-menu-subcategory-sub-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 15px 18px 15px 20px !important;
        margin: 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #4b5563 !important;
        background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%) !important;
        border-radius: 14px !important;
        -webkit-tap-highlight-color: transparent;
        min-height: auto !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06),
                    0 1px 3px rgba(0, 0, 0, 0.04),
                    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
        text-decoration: none !important;
        border: 2px solid rgba(155, 81, 224, 0.06) !important;
        text-align: right;
        line-height: 1.5;
        position: relative;
    }
    
    /* Premium tree line indicator */
    .mega-menu-subcategory-sub-link::before {
        content: '';
        position: absolute;
        right: -12px;
        top: 22px;
        bottom: 0;
        width: 3px;
        background: linear-gradient(to bottom, 
            var(--rmm-primary-color, #9b51e0) 0%, 
            rgba(155, 81, 224, 0.3) 100%);
        border-radius: 3px;
        opacity: 0.4;
    }
    
    .mega-menu-subcategory-sub-link:active {
        background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
        color: var(--rmm-primary-color, #9b51e0) !important;
        border-color: var(--rmm-primary-color, #9b51e0) !important;
        transform: translateX(-4px);
        box-shadow: 0 6px 16px rgba(155, 81, 224, 0.25),
                    0 2px 6px rgba(155, 81, 224, 0.15),
                    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    }
    
    .mega-menu-subcategory-sub-link:active::before {
        opacity: 1;
        width: 4px;
        background: linear-gradient(to bottom, 
            var(--rmm-primary-color, #9b51e0) 0%, 
            #7c3aac 100%);
        box-shadow: 0 0 8px rgba(155, 81, 224, 0.4);
    }
    
    .mega-menu-subcategory-sub-link .mega-menu-category-count {
        background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
        color: #6b7280;
        padding: 5px 11px;
        border-radius: 10px;
        font-size: 11px;
        font-weight: 600;
        margin: 0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    
    .mega-menu-subcategory-sub-link:active .mega-menu-category-count {
        background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%) !important;
        color: var(--rmm-primary-color, #9b51e0) !important;
        box-shadow: 0 2px 6px rgba(155, 81, 224, 0.2);
        transform: scale(1.05);
    }
    
    /* Search Hidden Items */
    .mega-menu-main-item.search-hidden,
    .mega-menu-subcategory-item.search-hidden,
    .mega-menu-subcategory-sub-item.search-hidden {
        display: none !important;
    }
    
    /* ========================================
       BODY SCROLL LOCK
       ======================================== */
    /* Scroll lock removed from CSS.
       It used to be `body { overflow:hidden; position:fixed; width:100%;
       height:100% }` with JS writing `top: -scrollY` and restoring the position
       with window.scrollTo() on close. Taking <body> out of normal flow relayouts
       the entire document on open and again on close, and the manual restore is
       what made the page jump. mega-menu-mobile.js now sets `overflow:hidden` as
       an inline style on <html> (see rzkLockScroll), which stops scrolling without
       moving anything and lets the browser keep the scroll position. */
    
    /* ========================================
       HIDE OLD ELEMENTS
       ======================================== */
    .mega-menu-close-mobile {
        display: none !important;
    }
}

/* ========================================
   TABLET LANDSCAPE (768px exactly)
   ======================================== */
@media screen and (max-width: 768px) and (min-width: 600px) {
    .mega-menu-main-list {
        gap: 20px !important;
    }
    
    .mega-menu-main-link {
        min-height: 150px !important;
        padding: 28px 18px !important;
    }
    
    .mega-menu-category-icon,
    .mega-menu-icon-placeholder {
        width: 56px !important;
        height: 56px !important;
    }
    
    .mega-menu-category-name {
        font-size: 15px !important;
    }
}

/* ========================================
   SMALL MOBILE OPTIMIZATION (480px)
   ======================================== */
@media screen and (max-width: 480px) {
    .mega-menu-mobile-header-top {
        padding: 16px 18px 12px 18px;
        min-height: 64px;
    }
    
    .mega-menu-mobile-title {
        font-size: 17px;
    }
    
    .mega-menu-back-btn,
    .mega-menu-close-btn {
        width: 40px;
        height: 40px;
        padding: 8px;
    }
    
    .mega-menu-view-all-btn {
        font-size: 12px;
        padding: 8px 12px;
        height: 40px;
    }
    
    .mega-menu-search-container {
        padding: 0 18px 14px 18px;
    }
    
    .mega-menu-search-input {
        font-size: 13px;
        padding: 12px 8px;
    }
    
    .mega-menu-search-icon {
        width: 16px;
        height: 16px;
    }
    
    .mega-menu-expand-icon {
        width: 32px;
        height: 32px;
        padding: 5px;
    }
    
    .mega-menu-expand-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .mega-menu-main-categories {
        padding: 16px 14px !important;
    }
    
    .mega-menu-main-list {
        gap: 14px !important;
    }
    
    .mega-menu-main-link {
        padding: 20px 14px !important;
        min-height: 130px !important;
        font-size: 13px !important;
    }
    
    .mega-menu-category-icon,
    .mega-menu-icon-placeholder {
        width: 48px !important;
        height: 48px !important;
    }
    
    .mega-menu-category-name {
        font-size: 13px !important;
    }
    
    .mega-menu-subcategory-panel {
        padding: 20px 14px !important;
    }
    
    .mega-menu-subcategory-grid {
        gap: 14px !important;
    }
    
    .mega-menu-subcategory-link {
        font-size: 14px !important;
        padding: 18px 16px !important;
        min-height: 80px !important;
        border-radius: 18px !important;
    }
    
    .mega-menu-subcategory-sub-link {
        font-size: 13px !important;
        padding: 12px 14px 12px 45px !important;
    }
}

/* ========================================
   EXTRA SMALL MOBILE (360px and below)
   ======================================== */
@media screen and (max-width: 360px) {
    .mega-menu-main-list {
        gap: 12px !important;
    }
    
    .mega-menu-main-link {
        padding: 18px 12px !important;
        min-height: 120px !important;
        gap: 10px !important;
    }
    
    .mega-menu-category-icon,
    .mega-menu-icon-placeholder {
        width: 44px !important;
        height: 44px !important;
    }
    
    .mega-menu-category-name {
        font-size: 12px !important;
    }
    
    .mega-menu-category-count {
        font-size: 12px !important;;
        padding: 2px 8px;
    }
    
    .mega-menu-view-all-btn {
        font-size: 12px;;
        padding: 6px 10px;
        height: 36px;
    }
    
    .mega-menu-mobile-header-actions {
        gap: 6px;
    }
    
    .mega-menu-search-container {
        padding: 0 14px 12px 14px;
    }
    
    .mega-menu-search-wrapper {
        padding: 0 12px;
    }
    
    .mega-menu-search-input {
        font-size: 12px;
        padding: 11px 6px;
    }
    
    .mega-menu-search-icon {
        width: 15px;
        height: 15px;
        margin-left: 8px;
    }
    
    .mega-menu-search-clear {
        width: 28px;
        height: 28px;
        padding: 5px;
    }
    
    .mega-menu-expand-icon {
        width: 30px;
        height: 30px;
        padding: 4px;
        margin-right: 6px;
    }
    
    .mega-menu-expand-icon svg {
        width: 16px;
        height: 16px;
    }
    
    .mega-menu-search-no-results {
        padding: 40px 20px;
    }
    
    .mega-menu-search-no-results svg {
        width: 52px;
        height: 52px;
        margin-bottom: 16px;
    }
    
    .mega-menu-search-no-results p {
        font-size: 16px;
    }
    
    .mega-menu-search-no-results span {
        font-size: 13px;
    }
    
    .mega-menu-search-no-results.premium-empty-state svg {
        width: 140px;
        height: 140px;
    }
    
    .search-results-wrapper {
        padding: 20px 14px;
    }
    
    .search-results-header {
        margin-bottom: 24px;
        padding-bottom: 16px;
    }
    
    .search-results-title {
        font-size: 16px;
    }
    
    .search-results-count {
        font-size: 12px;
        padding: 5px 14px;
    }
    
    .search-results-grid {
        gap: 12px;
    }
    
    .search-result-card {
        padding: 20px 16px;
        min-height: 120px;
        border-radius: 16px;
    }
    
    .result-icon-wrapper {
        width: 48px;
        height: 48px;
    }
    
    .result-icon-wrapper svg {
        width: 24px;
        height: 24px;
    }
    
    .search-result-card .result-name {
        font-size: 13px;
    }
    
    .search-results-list {
        gap: 8px;
    }
    
    .search-result-item {
        padding: 16px 18px;
    }
    
    .search-result-item .result-name {
        font-size: 14px;
    }
    
    .result-breadcrumb {
        font-size: 12px;;
    }
    
    .search-section-title {
        font-size: 13px;
    }
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .mega-menu-container {
        height: 100vh !important;
    }
    
    .mega-menu-mobile-header {
        padding: 12px 20px;
        min-height: 56px;
    }
    
    .mega-menu-main-categories {
        padding: 16px !important;
    }
    
    .mega-menu-main-link {
        min-height: 120px !important;
    }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATION
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    .mega-menu-main-link:hover,
    .mega-menu-subcategory-link:hover,
    .mega-menu-subcategory-sub-link:hover {
        background: #fff !important;
        transform: none !important;
    }
}

/* ========================================
   SMOOTH SCROLLING FOR WEBKIT
   ======================================== */
@media screen and (max-width: 1100px) {
    .mega-menu-mobile-content,
    .mega-menu-subcategories {
        scroll-behavior: smooth;
    }
    
    .mega-menu-mobile-content::-webkit-scrollbar,
    .mega-menu-subcategories::-webkit-scrollbar {
        width: 0px;
        background: transparent;
    }
}

/* ========================================
   MOBILE DARK MODE COMPATIBILITY
   ======================================== */
@media screen and (max-width: 1100px) {

    /* Subcategory icons in mobile */
    
}

.mega-menu-mobile-content,
.mega-menu-container,
.mega-menu-subcategory-panel,
.mega-menu-subcategories {
    content-visibility: auto;
    contain-intrinsic-size: 520px 900px;
}

/* === Sub-subcategory sprite icons (added 2026-06-11) === */
@media screen and (max-width: 1100px) {
    .mega-menu-subcategory-sub-link.has-rmm-icon {
        justify-content: flex-start !important;
        gap: 10px;
        --rmm-ss-icon: 22px;
    }
    
    .mega-menu-subcategory-sub-link .mega-menu-subcategory-sub-icon.rmm-svg-icon {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        flex-shrink: 0;
        color: var(--rmm-primary-color, #9b51e0) !important;
        opacity: 0.9;
    }
    
    .mega-menu-subcategory-sub-link.has-rmm-icon .mega-menu-subcategory-sub-name {
        flex: 1 1 auto;
        min-width: 0;
        text-align: right;
    }
}