/*rzm:s37*/
:root {
    --rmm-main-panel-width: 280px;
    --rmm-submenu-panel-width: 920px;
    --rmm-primary-color: #764ba2;
    --rmm-primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --rmm-primary-light: rgba(118, 75, 162, 0.08);
    --rmm-primary-lighter: rgba(118, 75, 162, 0.04);
    --rmm-hover-bg-color: #f8f9fc;
    --rmm-text-color: #1e293b;
    --rmm-text-secondary: #64748b;
    --rmm-icon-size: 40px;
    --rmm-border-radius: 16px;
    --rmm-animation-speed: 280ms;
    --rmm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --rmm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --rmm-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.02);
    --rmm-shadow-glow: 0 8px 32px rgba(118, 75, 162, 0.25);
}

.mega-menu-category-count {
    display: none !important;
}

.rozhika-mega-menu-item {
    position: relative;
    list-style: none;
}

.rozhika-mega-menu-wrapper {
    position: relative;
    direction: rtl;
    font-family: var(--font-family, IRANYekan, sans-serif);
}

.mega-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: var(--rmm-primary-gradient);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    box-shadow: var(--rmm-shadow-glow);
    position: relative;
    overflow: hidden;
}

.mega-menu-trigger::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    opacity: 0;
}

/*
 * RZK 2026-09-24: hover lift + sheen are for REAL POINTERS ONLY.
 *
 * On touch, :hover sticks after a tap (there is no pointer-leave event), so the
 * trigger animated up 2px and then stayed raised. `.mega-menu-trigger.active`
 * below resets the transform while the menu is OPEN, which is exactly why the
 * stuck position only became visible after the menu was closed again.
 *
 * Gating on (hover: hover) and (pointer: fine) removes the effect on touch
 * entirely, so no state is left behind. Desktop behaviour is unchanged. The
 * `.active` open-state styling below is deliberately left alone - it is a real
 * state, not a pointer affordance, and it still provides tap feedback.
 */
@media (hover: hover) and (pointer: fine) {
    .mega-menu-trigger:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 40px rgba(118, 75, 162, 0.35);
    }

    .mega-menu-trigger:hover::before {
        opacity: 1;
    }
}

.mega-menu-trigger.active {
    transform: translateY(0);
    box-shadow: 0 4px 20px rgba(118, 75, 162, 0.3);
}

.mega-menu-trigger.active .mega-menu-chevron {
    transform: rotate(180deg);
}

.mega-menu-icon {
    width: 22px;
    height: 22px;
    color: #fff;
    flex-shrink: 0;
}

.mega-menu-trigger-text {
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

@media screen and (max-width: 849px) {
    .mega-menu-trigger-text {
        font-size: clamp(14px, 3vw, 16px);
    }
}

.mega-menu-chevron {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

.mega-menu-container {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    display: flex;
    flex-direction: row-reverse;
    background: #ffffff;
    border-radius: var(--rmm-border-radius);
    box-shadow: var(--rmm-shadow-lg);
    overflow: hidden;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    pointer-events: none;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.mega-menu-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.mega-menu-main-categories {
    width: var(--rmm-main-panel-width);
    background: linear-gradient(180deg, #f8f9fc 0%, #f1f3f9 100%);
    border-left: 1px solid rgba(0, 0, 0, 0.04);
    padding: 8px 0;
    overflow-y: auto;
    max-height: 560px;
    order: 2;
    flex-shrink: 0;
}

.mega-menu-main-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-menu-main-item {
    margin: 0;
    padding: 0 4px;
    list-style: none;
}

.mega-menu-main-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 6px;
    color: var(--rmm-text-color);
    text-decoration: none;
    font-size: 12px;;
    font-weight: 500;
    position: relative;
    border-radius: 6px;
    margin: 1px 0;
}

.mega-menu-main-link::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 0;
    background: var(--rmm-primary-gradient);
    border-radius: 0 3px 3px 0;
}

.mega-menu-main-link:hover,
.mega-menu-main-item.active .mega-menu-main-link {
    background: #ffffff;
    color: var(--rmm-primary-color);
    box-shadow: var(--rmm-shadow-sm);
}

.mega-menu-main-link:hover::before,
.mega-menu-main-item.active .mega-menu-main-link::before {
    transform: translateY(-50%) scaleY(1);
    height: 18px;
}

.mega-menu-category-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 5px;
}

.mega-menu-main-link:hover .mega-menu-category-icon,
.mega-menu-main-item.active .mega-menu-main-link .mega-menu-category-icon {
    transform: scale(1.08);
}

.mega-menu-icon-placeholder {
    color: var(--rmm-text-secondary);
}

.mega-menu-main-link:hover .mega-menu-icon-placeholder,
.mega-menu-main-item.active .mega-menu-main-link .mega-menu-icon-placeholder {
    color: var(--rmm-primary-color);
}

.mega-menu-category-name {
    flex: 1;
    min-width: 0;
    text-align: right;
    line-height: 1.3;
    white-space: nowrap;
}

.mega-menu-arrow {
    width: 14px;
    height: 14px;
    min-width: 14px;
    color: var(--rmm-text-secondary);
    flex-shrink: 0;
    opacity: 0.5;
}

.mega-menu-main-link:hover .mega-menu-arrow,
.mega-menu-main-item.active .mega-menu-main-link .mega-menu-arrow {
    color: var(--rmm-primary-color);
    opacity: 1;
    transform: translateX(-3px);
}

.mega-menu-subcategories {
    position: relative;
    width: var(--rmm-submenu-panel-width);
    min-height: 320px;
    order: 1;
    background: #ffffff;
}

.mega-menu-subcategory-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 20px 28px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 560px;
    opacity: 0;
    visibility: hidden;
    display: none;
}

.mega-menu-subcategory-panel.active {
    opacity: 1;
    visibility: visible;
    display: block;
}

.mega-menu-subcategory-grid {
    column-count: 3;
    column-gap: 24px;
}

.mega-menu-subcategory-item {
    padding: 0;
    margin: 0 0 12px 0;
    display: block;
    width: 100%;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.mega-menu-subcategory-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--rmm-text-color);
    text-decoration: none;
    padding: 6px 10px 6px 8px;
    margin: 0 0 4px 0;
    border-radius: 8px;
    line-height: 1.3;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.mega-menu-subcategory-link::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: var(--rmm-primary-gradient);
    border-radius: 999px;
    flex-shrink: 0;
}

.mega-menu-subcategory-link:hover {
    color: var(--rmm-primary-color);
    background: var(--rmm-primary-lighter);
}

.mega-menu-subcategory-link:hover::before {
    height: 20px;
    box-shadow: 0 0 10px rgba(118, 75, 162, 0.35);
}

.mega-menu-subcategory-link > span {
    white-space: nowrap;
    min-width: 0;
}

.mega-menu-subcategory-icon.rmm-svg-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    flex-shrink: 0;
    margin-left: 2px !important;
    color: currentColor;
}

.mega-menu-subcategory-sub-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-menu-subcategory-sub-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-menu-subcategory-sub-link {
    display: block;
    padding: 5px 14px 5px 8px;
    margin: 0;
    font-size: 11px;
    font-weight: 400;
    color: var(--rmm-text-secondary);
    text-decoration: none;
    border-radius: 6px;
    line-height: 1.4;
    position: relative;
    white-space: nowrap;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.mega-menu-subcategory-sub-link::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    background: var(--rmm-primary-color);
    border-radius: 50%;
    opacity: 0;
}

.mega-menu-subcategory-sub-link:hover {
    color: var(--rmm-primary-color);
    background: var(--rmm-primary-lighter);
}

.mega-menu-subcategory-sub-link:hover::before {
    width: 5px;
    height: 5px;
    opacity: 1;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.mega-menu-main-categories::-webkit-scrollbar-track,
.mega-menu-subcategory-panel::-webkit-scrollbar-track {
    background: transparent;
}

body.admin-bar .mega-menu-container {
    z-index: 999;
}

.mega-menu-overlay {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .mega-menu-trigger,
    .mega-menu-container,
    .mega-menu-main-link,
    .mega-menu-subcategory-link,
    .mega-menu-subcategory-sub-link,
    .mega-menu-subcategory-panel,
    .mega-menu-overlay {
    }
}

@media screen and (max-width: 1100px) {
    .mega-menu-main-link::before {
        content: none !important;
        display: none !important;
    }
}

@media screen and (min-width: 1101px) {
    .mega-menu-container {
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 25px 80px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.02);
        overflow: hidden;
    }

    .mega-menu-main-categories {
        background: linear-gradient(180deg, #fafbfd 0%, #f4f6fa 100%);
        border-left: 1px solid rgba(0, 0, 0, 0.03);
        padding: 10px 0;
    }

    .mega-menu-main-item {
        padding: 0 4px;
    }

    .mega-menu-main-link {
        padding: 8px 6px;
        margin: 1px 0;
        border-radius: 6px;
        font-size: 12px;;
        gap: 6px;
    }

    .mega-menu-main-link:hover,
    .mega-menu-main-item.active .mega-menu-main-link {
        background: #ffffff;
        color: var(--rmm-primary-color);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .mega-menu-main-link:hover::before,
    .mega-menu-main-item.active .mega-menu-main-link::before {
        border-radius: 0 3px 3px 0;
    }

    .mega-menu-subcategories {
        background: #ffffff;
    }

    .mega-menu-subcategory-panel {
        padding: 24px 32px;
        max-height: 580px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .mega-menu-subcategory-grid {
        column-count: 3;
        column-gap: 28px;
    }

    .mega-menu-subcategory-item {
        padding: 0;
        margin: 0 0 14px 0;
        display: block;
        width: 100%;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
    }

    .mega-menu-subcategory-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 700;
        color: var(--rmm-text-color);
        padding: 6px 10px 6px 12px;
        margin: 0 0 4px 0;
        border-radius: 8px;
        line-height: 1.3;
        letter-spacing: -0.01em;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mega-menu-subcategory-link:hover {
        background: var(--rmm-primary-lighter);
        color: var(--rmm-primary-color);
    }

    .mega-menu-subcategory-link::before {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 16px;
        background: var(--rmm-primary-gradient);
        border-radius: 999px;
    }

    .mega-menu-subcategory-link:hover {
        background: transparent;
        color: var(--rmm-primary-color);
    }

    .mega-menu-subcategory-sub-list {
        margin: 0;
        padding: 0;
        list-style: none;
        column-count: 1;
        column-gap: 0;
    }

    .mega-menu-subcategory-sub-item {
        margin: 0;
        padding: 0;
        list-style: none;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
    }

    .mega-menu-subcategory-sub-link {
        display: block;
        padding: 5px 14px 5px 12px;
        margin: 0;
        font-size: 11px;
        color: var(--rmm-text-secondary);
        border-radius: 6px;
        line-height: 1.4;
        white-space: nowrap;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mega-menu-subcategory-sub-link:hover {
        background: var(--rmm-primary-lighter);
        color: var(--rmm-primary-color);
    }
}

@media screen and (min-width: 1280px) {
    :root {
        --rmm-main-panel-width: 300px;
        --rmm-submenu-panel-width: 1000px;
    }
    
    .mega-menu-subcategory-grid {
        column-gap: 32px;
    }
    
    .mega-menu-subcategory-panel {
        padding: 28px 40px;
    }
    
    .mega-menu-main-link {
        font-size: 12px;
        padding: 8px 8px;
        gap: 8px;
    }
    
    .mega-menu-category-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
    
    .mega-menu-subcategory-link {
        font-size: 12.5px;
        gap: 5px;
    }
    
    .mega-menu-subcategory-sub-link {
        font-size: 11.5px;
    }
}

@media screen and (min-width: 1440px) {
    :root {
        --rmm-main-panel-width: 320px;
        --rmm-submenu-panel-width: 1100px;
    }
    
    .mega-menu-main-link {
        font-size: 12.5px;
    }
    
    .mega-menu-category-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }
    
    .mega-menu-subcategory-link {
        font-size: 13px;
    }
    
    .mega-menu-subcategory-sub-link {
        font-size: 12px;
    }
}

.mega-menu-category-icon.rmm-svg-icon {
    color: currentColor;
}

.mega-menu-main-link .mega-menu-category-icon.rmm-svg-icon {
    color: var(--rmm-text-color, #1e293b);
}

.mega-menu-main-link:hover .mega-menu-category-icon.rmm-svg-icon,
.mega-menu-main-item.active .mega-menu-main-link .mega-menu-category-icon.rmm-svg-icon {
    color: var(--rmm-primary-color, #764ba2);
    transform: scale(1.08);
}

.mega-menu-subcategory-link:hover .mega-menu-subcategory-icon.rmm-svg-icon {
    color: var(--rmm-primary-color, #764ba2);
}

.rozhika-mega-menu-wrapper .rmm-header-row {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 1.2vw, 16px);
}

.rmm-header-links {
    /*
     * The row's spacing lives in custom properties so that a narrow-viewport rule
     * can retune it by REDEFINING these values, instead of trying to out-specify
     * the `!important` padding below (which exists to beat Flatsome's own button
     * styling). A declaration that reads a variable picks up the new value without
     * anybody having to win a specificity fight.
     */
    --rmm-hl-gap: clamp(6px, 1vw, 14px);
    --rmm-hl-pad-y: clamp(6px, 0.8vw, 9px);
    --rmm-hl-pad-x: clamp(8px, 1vw, 12px);
    --rmm-hl-icon-gap: 6px;
    --rmm-hl-font: clamp(12px, 2vw, 14px);
    --rmm-hl-icon-size: 18px;

    display: flex;
    align-items: center;
    gap: var(--rmm-hl-gap);
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.rmm-header-links::-webkit-scrollbar {
    display: none;
}

.rmm-header-link {
    display: inline-flex;
    align-items: center;
    gap: var(--rmm-hl-icon-gap, 6px);
    padding: var(--rmm-hl-pad-y, 8px) var(--rmm-hl-pad-x, 12px);
    border-radius: 999px;
    text-decoration: none;
    line-height: 1;
    font-size: var(--rmm-hl-font, clamp(12px, 2vw, 14px));;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.95;
    color: inherit;
}

button.rmm-header-link {
    background: transparent;
    border: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.rmm-header-links button.rmm-header-link {
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    padding: var(--rmm-hl-pad-y, 8px) var(--rmm-hl-pad-x, 12px) !important;
    line-height: 1 !important;
    font-size: var(--rmm-hl-font, clamp(12px, 2vw, 14px)) !important;;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--rmm-hl-icon-gap, 6px) !important;
    opacity: 0.95 !important;
}

button.rmm-header-link:focus {
    outline: none;
}

button.rmm-header-link:focus-visible {
    outline: 2px solid rgba(155, 81, 224, 0.6);
    outline-offset: 2px;
}

.rmm-header-link:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
}

.rmm-header-link-icon {
    width: var(--rmm-hl-icon-size, 18px);
    height: var(--rmm-hl-icon-size, 18px);
    min-width: var(--rmm-hl-icon-size, 18px);
    min-height: var(--rmm-hl-icon-size, 18px);
    flex-shrink: 0;
    color: currentColor;
}

.rmm-header-link:hover .rmm-header-link-icon {
    transform: scale(1.1);
}

#wide-nav.nav-dark .rmm-header-link {
    color: rgba(255, 255, 255, 0.92);
}

#wide-nav.nav-dark .rmm-header-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
}

@media screen and (max-width: 849px) {
    .rozhika-mega-menu-wrapper .rmm-header-links {
        display: none !important;
    }

    #wide-nav .header-bottom-nav.nav-center.mobile-nav {
        justify-content: flex-start !important;
    }

    #wide-nav .rmm-header-links-item {
        display: flex;
        align-items: center;
        min-width: 0;
        flex: 1 1 auto;
    }

    #wide-nav .rmm-header-links--wide-nav {
        width: 100%;
        justify-content: flex-start;
        direction: rtl;
    }

    /*
     * CROWDED ROWS ON A NARROW PHONE
     *
     * Three items fit comfortably at every width, so nothing below applies to them.
     * A fourth item is a different matter: at its full size the row measures ~340px,
     * which overflows a 320px phone. And it cannot scroll to reveal the overflow
     * either - the row sets `overflow-x: auto`, but Flatsome's
     * `.flex-col.show-for-medium` ancestor keeps `min-width: auto`, so the whole
     * chain is pinned to its min-content width and the row overflows the header
     * instead of scrolling inside it. The extra item then sits at a negative x and is
     * simply unreachable.
     *
     * Unlocking that chain with `min-width: 0` would be the general fix, but that
     * column also carries the mobile search UI, whose sizing is deliberately owned by
     * rozhika-live-search-ui/assets/mobile-header-search.css - changing its flex basis
     * from here is how the two would start fighting again.
     *
     * So instead the row's OWN metrics scale down with the viewport, and only when a
     * fourth (or fifth) item actually exists. Every value is a clamp keyed on vw, so
     * the row shrinks continuously rather than snapping at a breakpoint, and every one
     * is read through a custom property, so nothing here has to out-specify the
     * `!important` declarations above.
     *
     * Budget at 320px with four items: text ~166px + padding 41px + icons 56px +
     * icon gaps 14px + row gaps 11px = ~288px, inside the ~300px the row actually
     * gets. Browsers without :has() keep today's behaviour.
     */
    #wide-nav .rmm-header-links--wide-nav:has(> :nth-child(4)) {
        --rmm-hl-gap: clamp(2px, 1.1vw, 6px);
        --rmm-hl-pad-x: clamp(3px, 1.6vw, 8px);
        --rmm-hl-pad-y: clamp(5px, 1.4vw, 9px);
        --rmm-hl-icon-gap: clamp(3px, 1.1vw, 6px);
        --rmm-hl-font: clamp(12px, 2.9vw, 13px);
        --rmm-hl-icon-size: clamp(14px, 4.4vw, 18px);
    }

    /*
     * Five or more. There is no arrangement that keeps five full-size pills on a
     * 320px screen, so this trades a little more size for staying reachable. Past
     * this the row is simply too crowded to be useful - keep four or fewer visible on
     * phones and use the mega menu for the rest.
     */
    #wide-nav .rmm-header-links--wide-nav:has(> :nth-child(5)) {
        --rmm-hl-gap: clamp(1px, 0.7vw, 4px);
        --rmm-hl-pad-x: clamp(2px, 1.1vw, 6px);
        --rmm-hl-icon-gap: clamp(2px, 0.8vw, 5px);
        --rmm-hl-font: 12px;
        --rmm-hl-icon-size: clamp(13px, 3.8vw, 16px);
    }

    /* ==========================================================================
       MOBILE HEADER SEARCH -- moved out of this file on purpose.

       The open/closed styling now lives in a single owner:
           rozhika-live-search-ui/assets/mobile-header-search.css

       It used to be split across this file, Code Snippets snippet #10 and
       premium-product-enhancer, all three fighting with !important over the same
       element. Two of the selectors that lived here were also the site's single
       largest INP cost, because they hung a descendant selector off a state class
       on <body>:

           body.search-is-open ... > li:not(.header-search-form)   (keyed on tag `li`)
           body.search-is-open ... .has-icon *                     (universal descendant)

       Chrome keys style invalidation on the rightmost compound, so toggling the
       body class recalculated style for every <li> in the document. Measured on a
       mobile profile at 4x CPU throttle that cost 56-94 ms of forced style+layout
       per tap; the replacement, which scopes state to the search <li> itself,
       measures 0.0 ms.

       Do NOT add `body.search-is-open` styling back here or anywhere else. That
       class survives only as a JS-readable marker for premium-product-enhancer
       and mega-menu-mobile.js.
       ========================================================================== */
}

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

/* === Sub-subcategory sprite icons (added 2026-06-11) === */
.mega-menu-subcategory-sub-link.has-rmm-icon {
    display: flex;
    align-items: center;
    gap: 6px;
    --rmm-ss-icon: 17px;
}

.mega-menu-subcategory-sub-icon.rmm-svg-icon {
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.85;
}

.mega-menu-subcategory-sub-link.has-rmm-icon .mega-menu-subcategory-sub-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mega-menu-subcategory-sub-link.has-rmm-icon::before {
    display: none;
}

.mega-menu-subcategory-sub-link:hover .mega-menu-subcategory-sub-icon.rmm-svg-icon {
    color: var(--rmm-primary-color, #9b51e0);
    opacity: 1;
}