/*
 * Desktop mega menu: JS controls visibility/position via `.is-intent-active`.
 * All positional styles that the theme applies via `:hover` are mirrored here
 * so that moving off the top-level item does not cause the active mega menu
 * to jump/reposition.
 * `!important` is required because the theme's own `:hover` rules use `!important`.
 */

@media only screen and (min-width: 64rem) {

  /* Hide every mega menu by default. */
  .b-main-header__nav--item-shop .e-mega-menu,
  .b-main-header__nav--item-shop:hover .e-mega-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    max-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    display: block !important;
  }

  /* Show only the active mega menu — mirrors the base :hover rule. */
  .b-main-header__nav--item-shop.is-intent-active .e-mega-menu,
  .b-main-header__nav--item-shop.is-intent-active:hover .e-mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: calc(100vh - 185px) !important;
    overflow: visible !important;
    pointer-events: auto !important;
    display: block !important;
    scrollbar-width: thin !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 115px !important;
  }

  /* Fixed header mirrors `.fixed :hover` overrides. */
  .fixed .b-main-header__nav--item-shop.is-intent-active .e-mega-menu {
    max-height: calc(100vh - 100px) !important;
    top: 66px !important;
    margin-top: 0 !important;
  }
}

/* Mirrors the theme's medium-desktop :hover positioning. */
@media only screen and (min-width: 63.9375rem) and (max-width: 1450px) {
  .b-main-header__nav--item-shop.is-intent-active .e-mega-menu,
  .b-main-header__nav--item-shop.is-intent-active:hover .e-mega-menu {
    position: absolute !important;
    left: 24px !important;
    width: 96% !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
}