/* 1) Click-through overlay that dims the page */
.rr-mega-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.36); /* tweak to taste */
    opacity: 0;
    pointer-events: none;         /* <-- allow clicks to pass through */
    transition: opacity .2s ease;
    z-index: 40;                  /* below the menus, above everything else */
}

/* 2) Ensure mega menus render ABOVE the overlay so they are not dimmed */
.mega-menu-wrap,
.mega-menu-wrap .mega-sub-menu {
    position: relative;
    z-index: 60;                  /* above the overlay */
}

/* 3) Show the overlay while any mega item is "on" (hover or opened) */
/* Max Mega Menu adds .mega-toggle-on to the <li> and toggles aria-expanded=true on the <a> */
:root:has(#mega-menu-product-menu li.mega-toggle-on),
:root:has(#mega-menu-product-menu a[aria-expanded="true"]),
:root:has(#mega-menu-max_mega_menu_2 li.mega-toggle-on),
:root:has(#mega-menu-max_mega_menu_2 a[aria-expanded="true"]) {
    /* this block exists just to allow the :has() triggers; the style is below */
}

:root:has(#mega-menu-product-menu li.mega-toggle-on) .rr-mega-menu-overlay,
:root:has(#mega-menu-product-menu a[aria-expanded="true"]) .rr-mega-menu-overlay,
:root:has(#mega-menu-max_mega_menu_2 li.mega-toggle-on) .rr-mega-menu-overlay,
:root:has(#mega-menu-max_mega_menu_2 a[aria-expanded="true"]) .rr-mega-menu-overlay {
    opacity: 1;
}