/*
 * Mega Menu v1.
 *
 * Presentation only: WordPress' native Primary Menu hierarchy remains the
 * source of content, ordering, current-item classes, links, and mobile depth.
 * The reserved .mws-menu-item--mega class is meaningful only for top-level
 * items in the standard horizontal desktop Primary Menu.
 */

@media (min-width: 768px) {
  /* Top-level Mega roots stay static so their panel can use the centred header
   * inner as a stable viewport anchor without inheriting the label width. */
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega {
    position: static;
  }

  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu {
    inset-block-start: 100%;
    inset-inline: auto;
    left: 50%;
    width: var(--mws-mega-menu-panel-width, min(var(--mws-container), calc(100vw - (var(--mws-content-side-padding) * 2))));
    min-width: 0;
    max-width: calc(100vw - (var(--mws-content-side-padding) * 2));
    transform: translateX(-50%);
    max-height: min(68vh, 680px);
    padding: var(--mws-mega-menu-panel-padding, 24px);
    overflow-y: auto;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    column-gap: var(--mws-mega-menu-column-gap, 20px);
    row-gap: var(--mws-mega-menu-row-gap, 20px);
    border: 1px solid var(--mws-mega-menu-border, var(--mws-color-border));
    border-radius: var(--mws-mega-menu-panel-radius, var(--mws-radius-md));
    background: var(--mws-mega-menu-bg, var(--mws-color-surface));
    color: var(--mws-mega-menu-text, var(--mws-header-link));
    text-align: start;
  }

  /* Hover/focus remain no-JS fallbacks. Once navigation JS is ready,
   * mws-submenu-open is the single visibility owner so stale focus cannot
   * resurrect a Mega panel that the disclosure state machine has closed. */
  html:not(.mws-submenus-ready) .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega:hover > .sub-menu,
  html:not(.mws-submenus-ready) .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega:focus-within > .sub-menu,
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega.mws-submenu-open > .sub-menu {
    display: grid;
  }

  html.mws-submenus-ready .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega:not(.mws-submenu-open) > .sub-menu {
    display: none;
  }

  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > li {
    position: static;
    display: block;
    width: auto;
    min-width: 0;
    align-self: start;
  }

  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > li > a {
    position: relative;
    isolation: isolate;
    display: flex;
    width: 100%;
    min-height: 40px;
    padding: var(--mws-mega-menu-item-padding, 10px);
    overflow: hidden;
    border-radius: var(--mws-radius-sm);
    background: var(--mws-mega-menu-item-bg, var(--mws-mega-menu-bg, var(--mws-color-surface)));
    color: var(--mws-mega-menu-text, var(--mws-header-link));
    font-family: var(--mws-mega-menu-font-family, var(--mws-font-menu));
    font-size: var(--mws-mega-menu-font-size, var(--mws-font-size-menu));
    font-weight: var(--mws-mega-menu-font-weight, var(--mws-font-weight-menu));
    text-transform: var(--mws-mega-menu-text-transform, var(--mws-menu-text-transform));
  }

  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > li:not(.menu-item-has-children) > a {
    justify-content: var(--mws-mega-menu-item-alignment, center);
    text-align: var(--mws-mega-menu-item-alignment, center);
  }

  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > li.menu-item-has-children > a {
    color: var(--mws-mega-menu-text, var(--mws-header-link));
    justify-content: var(--mws-mega-menu-item-alignment, center);
    text-align: var(--mws-mega-menu-item-alignment, center);
    font-weight: var(--mws-mega-menu-font-weight, var(--mws-font-weight-menu));
  }


  /* Optional WooCommerce category imagery is presentation-only and only added
   * to direct children of Mega roots. Missing category thumbnails remain text. */
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > li.mws-mega-menu-item--has-image > a {
    flex-direction: column;
    align-items: var(--mws-mega-menu-item-alignment, center);
    gap: 8px;
    text-align: var(--mws-mega-menu-item-alignment, center);
  }

  /* A true overlay sits above the complete direct tile, including category
   * image pixels, while the label is promoted above it so text stays crisp. */
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > li > a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: var(--mws-mega-menu-hover-overlay, var(--mws-mega-menu-hover-overlay-default, color-mix(in srgb, var(--mws-color-primary) 7%, transparent)));
    opacity: 0;
    transition: opacity var(--mws-product-card-hover-transition, 180ms) ease;
  }

  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > li > a:hover,
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > li > a:focus-visible,
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > .current-menu-item > a,
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > .current_page_item > a,
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > .current-menu-ancestor > a,
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > .current_page_ancestor > a {
    color: var(--mws-mega-menu-hover-text, var(--mws-header-link-hover));
  }

  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > li > a:hover::before,
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > li > a:focus-visible::before,
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > .current-menu-item > a::before,
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > .current_page_item > a::before,
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > .current-menu-ancestor > a::before,
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu > .current_page_ancestor > a::before {
    opacity: var(--mws-mega-menu-hover-overlay-opacity, 100%);
  }

  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega .mws-mega-menu__media {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: var(--mws-mega-menu-item-alignment, center);
    width: var(--mws-mega-menu-image-size, 120px);
    max-width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--mws-native-media-radius, var(--mws-radius-md));
  }

  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega .mws-mega-menu__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
  }

  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega .mws-mega-menu__label {
    position: relative;
    z-index: 2;
    display: block;
    min-width: 0;
  }

  /* Descendant lists become visible stacks inside their automatic column.
   * They are no longer positioned as side flyouts in standard desktop mode. */
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu .sub-menu {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: var(--mws-mega-menu-group-link-gap, 8px) 0 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: var(--mws-mega-menu-item-alignment, center);
  }

  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu .sub-menu > li {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu .sub-menu a {
    width: 100%;
    max-width: 100%;
    min-height: var(--mws-mega-menu-nested-link-min-height, 32px);
    padding: var(--mws-mega-menu-nested-link-padding-block, 5px) var(--mws-mega-menu-nested-link-padding-inline, 8px);
    justify-content: var(--mws-mega-menu-item-alignment, center);
    border-radius: var(--mws-radius-sm);
    font-family: var(--mws-mega-menu-font-family, var(--mws-font-menu));
    font-size: var(--mws-mega-menu-nested-font-size, max(.84rem, calc(var(--mws-font-size-menu) * .88)));
    color: var(--mws-mega-menu-text, var(--mws-header-link));
    font-weight: var(--mws-mega-menu-font-weight, var(--mws-font-weight-menu));
    line-height: 1.35;
    text-transform: var(--mws-mega-menu-text-transform, var(--mws-menu-text-transform));
    text-align: inherit;
  }


  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu .sub-menu a:hover,
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu .sub-menu a:focus-visible,
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu .sub-menu > .current-menu-item > a,
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu .sub-menu > .current_page_item > a,
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu .sub-menu > .current-menu-ancestor > a,
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu .sub-menu > .current_page_ancestor > a {
    color: var(--mws-mega-menu-hover-text, var(--mws-header-link-hover));
    background: color-mix(in srgb, var(--mws-mega-menu-nested-hover-surface, var(--mws-mega-menu-hover-overlay, var(--mws-color-primary))) var(--mws-mega-menu-hover-overlay-opacity, 100%), transparent);
  }

  /* Generic desktop submenu JS does not create descendant toggles inside a
   * mega panel, but keep this defensive rule for cached/third-party markup. */
  .mws-primary-nav .mws-primary-menu > .mws-menu-item--mega > .sub-menu .mws-submenu-toggle {
    display: none;
  }
}