/* ============================================================
   SHOP MEGA MENU  (inc/shop-menu.php, assets/js/shop-menu.js)
   Hovering Shop in the desktop header, or pressing the arrow beside it,
   drops a floating card, centred under the header, with every category and
   its compounds; the page behind dims. Both hang off the sticky header.
   Link rules carry four classes to outrank the header's `.site-nav a`
   colours, including the white-on-banner header on the homepage.
   ============================================================ */
.site-nav .menu-item-has-shop-menu { display: flex; align-items: center; gap: 0.125rem; }

.shop-menu__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: 0 -6px 0 0; padding: 0; border: 0; border-radius: 6px;
  background: none; color: rgb(var(--color-foreground-rgb) / 0.72); cursor: pointer;
  transition: color 160ms ease;
}
.shop-menu__toggle svg { width: 12px; height: 12px; transition: transform 180ms ease; }
.shop-menu__toggle:hover { color: var(--color-foreground); }
.shop-menu__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.menu-item-has-shop-menu.is-open .shop-menu__toggle svg { transform: rotate(180deg); }
.site-nav .menu-item-has-shop-menu.is-open > a { color: var(--color-foreground); }
.site-header--overlay:not(.is-scrolled) .shop-menu__toggle { color: rgb(255 255 255 / 0.88); }

/* ---- Card ---- */
.site-header .shop-menu__panel {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 2;
  display: flex; flex-direction: column;
  width: min(65rem, calc(100vw - 3rem)); max-height: calc(100vh - 7rem);
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.06); border-radius: 20px; overflow: hidden;
  background: var(--color-background); color: var(--color-foreground);
  box-shadow: 0 30px 80px rgb(23 41 83 / 0.18);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
.site-header .menu-item-has-shop-menu.is-open .shop-menu__panel {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 0s;
}
/* The page below the header dims while the card is open. */
.site-header::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; z-index: 1; height: 100vh;
  background: rgb(10 10 10 / 0.18); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity 160ms ease, visibility 0s linear 160ms;
}
.site-header.is-mega-open::after { opacity: 1; visibility: visible; transition: opacity 160ms ease, visibility 0s linear 0s; }
.shop-menu__inner { padding-inline: 2.5rem; }
/* On a short window the list scrolls inside the card; the footer stays put. */
.shop-menu__panel > .shop-menu__inner { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.shop-menu__groups { columns: 4; column-gap: 2.5rem; padding-block: 2.25rem 0.625rem; }
.shop-menu__group { break-inside: avoid; padding-block-end: 1.5rem; }

.site-header .site-nav .shop-menu__panel .shop-menu__heading {
  display: inline-block; margin: 0 0 0.625rem;
  font-family: var(--font-body--family); font-size: 0.9375rem; font-weight: 500; line-height: 1.3;
  color: var(--color-foreground); text-decoration: none;
}
.site-header .site-nav .shop-menu__panel a.shop-menu__heading:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-nav .shop-menu__list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.site-header .site-nav .shop-menu__panel a.shop-menu__link {
  display: inline-block; padding-block: 0.25rem;
  font-family: var(--font-body--family); font-size: 0.9375rem; font-weight: 400; line-height: 1.35;
  color: rgb(var(--color-foreground-rgb) / 0.6); text-decoration: none;
}
.site-header .site-nav .shop-menu__panel a.shop-menu__link:hover { color: var(--color-foreground); }

.shop-menu__foot { flex: none; background: rgb(250 250 250); border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.07); }
.shop-menu__foot-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; min-height: 3.5rem; }
/* Testing badge: plain text, not a link. */
.shop-menu__note {
  margin: 0; font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; line-height: 1.3;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.55);
}
.site-header .site-nav .shop-menu__panel a.shop-menu__all {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body--family); font-size: 0.875rem; font-weight: 500; color: var(--color-foreground); text-decoration: none;
}
.site-header .site-nav .shop-menu__panel a.shop-menu__all:hover { text-decoration: underline; text-underline-offset: 4px; }
.shop-menu__arrow { width: 13px; height: 13px; transition: transform 160ms ease; }
.shop-menu__all:hover .shop-menu__arrow { transform: translateX(3px); }
.site-header .site-nav .shop-menu__panel a:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 3px; border-radius: 3px; }

/* ---- Header while the panel is open: solid, even over the homepage banner ---- */
.site-header.is-mega-open { background: rgb(247 247 247 / 0.98); }
.site-header--overlay.is-mega-open:not(.is-scrolled) { background: rgb(247 247 247 / 0.98); color: var(--color-foreground); }
.site-header--overlay.is-mega-open:not(.is-scrolled) .site-header__logo--default { opacity: 1; }
.site-header--overlay.is-mega-open:not(.is-scrolled) .site-header__logo--inverse { opacity: 0; }
.site-header--overlay.is-mega-open:not(.is-scrolled) .site-nav > ul > li > a { color: rgb(var(--color-foreground-rgb) / 0.72); }
.site-header--overlay.is-mega-open:not(.is-scrolled) .site-nav > ul > li > a:hover,
.site-header--overlay.is-mega-open:not(.is-scrolled) .site-nav > ul > .menu-item-has-shop-menu.is-open > a { color: var(--color-foreground); }
.site-header--overlay.is-mega-open:not(.is-scrolled) .shop-menu__toggle { color: var(--color-foreground); }
.site-header--overlay.is-mega-open:not(.is-scrolled) .site-header__actions a,
.site-header--overlay.is-mega-open:not(.is-scrolled) .site-header__toggle { color: var(--color-foreground); }
.site-header--overlay.is-mega-open:not(.is-scrolled) .site-header__cart-count { background: var(--color-foreground); color: var(--color-background); }

@media (max-width: 1199px) {
  .shop-menu__groups { columns: 3; column-gap: 2rem; }
}

/* The header nav, and with it this menu, is desktop-only. */
@media (max-width: 989px) {
  .shop-menu__toggle, .site-header .shop-menu__panel, .site-header::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .shop-menu__panel,
  .site-header .menu-item-has-shop-menu.is-open .shop-menu__panel { transform: translate(-50%, 0); transition: none; }
  .site-header::after { transition: none; }
  .shop-menu__toggle svg, .shop-menu__arrow { transition: none; }
}