/*** START NEGATIVE SPACE MEGA MENU (variant new only) ***/
html[data-nav-variant='new'] header {
  .megamenu-wrapper {
    nav[data-megamenu] {
      display: block;
      visibility: hidden;
      opacity: 0;
      /* Tucked under the header pill; closed state pulls up so open animates down. */
      top: calc(100% - 0.75rem);
      transform: translateY(-0.75rem);
      /* Sit behind the header pill (z-[-1]) so the header overlaps the menu. */
      z-index: -2;
    }
  }

  /* Active trigger: hover, focus, sticky open state, or hovering the open panel */
  .megamenu-wrapper:hover,
  .megamenu-wrapper:focus-within,
  .megamenu-wrapper.mega-menu--open,
  &:has(nav[data-megamenu]:hover) .megamenu-wrapper:has(nav[data-megamenu]:hover) {
    a[data-megamenu],
    button[data-megamenu] {
      hr {
        width: 100%;
      }

      /* Invisible bridge from trigger to dropdown for diagonal cursor paths */
      &::after {
        content: '';
        position: absolute;
        left: -1rem;
        right: -1rem;
        top: 90%;
        bottom: -4rem;
      }

      svg.header-nav-chevron {
        --tw-rotate: 90deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
          skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
      }
    }
  }

  /* Open panel: hover, focus, sticky open state, or direct panel hover */
  .megamenu-wrapper:hover nav[data-megamenu],
  .megamenu-wrapper:focus-within nav[data-megamenu],
  .megamenu-wrapper.mega-menu--open nav[data-megamenu],
  nav[data-megamenu]:hover {
    opacity: 1 !important;
    pointer-events: all !important;
    /* Tuck up behind the header's rounded bottom edge (matches rounded-xl). */
    top: calc(100% - 0.75rem) !important;
    transform: translateY(0) !important; /* slides down from tucked closed position */
    visibility: visible;
    /* Stay behind the header pill (z-[-1]) so the header stays on top. */
    z-index: -2 !important;

    /* Invisible hit area above the panel for diagonal entry from nav links */
    &::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: -3rem;
      height: 3rem;
    }
  }

  &:has(.megamenu-wrapper:hover) .header-pill-bg,
  &:has(.megamenu-wrapper:focus-within) .header-pill-bg,
  &:has(.megamenu-wrapper.mega-menu--open) .header-pill-bg,
  &:has(nav[data-megamenu]:hover) .header-pill-bg {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: none;
  }

  &.is-skin--false {
    .megamenu-wrapper:hover,
    .megamenu-wrapper:focus-within,
    .megamenu-wrapper.mega-menu--open,
    &:has(nav[data-megamenu]:hover) .megamenu-wrapper:has(nav[data-megamenu]:hover) {
      a[data-megamenu],
      button[data-megamenu] {
        --tw-text-opacity: 1;
        color: rgba(var(--irestore-red), var(--tw-text-opacity));
      }

      button[data-megamenu='before-after'] {
        color: #1e1e1e;
      }
    }
  }

  &.is-skin--true {
    .megamenu-wrapper:hover,
    .megamenu-wrapper:focus-within,
    .megamenu-wrapper.mega-menu--open,
    &:has(nav[data-megamenu]:hover) .megamenu-wrapper:has(nav[data-megamenu]:hover) {
      a[data-megamenu],
      button[data-megamenu] {
        --tw-text-opacity: 1;
        color: rgba(var(--irestore-purple), var(--tw-text-opacity));

        hr {
          --tw-bg-opacity: 1;
          background-color: rgba(var(--irestore-purple), var(--tw-bg-opacity));
        }
      }

      button[data-megamenu='before-after'] {
        color: #1e1e1e;

        hr {
          background-color: #1e1e1e;
        }
      }
    }
  }

  &.header-theme--body {
    .megamenu-wrapper:hover,
    .megamenu-wrapper:focus-within,
    .megamenu-wrapper.mega-menu--open,
    &:has(nav[data-megamenu]:hover) .megamenu-wrapper:has(nav[data-megamenu]:hover) {
      button[data-megamenu='before-after'] {
        color: #fff;

        hr {
          background-color: #fff;
        }
      }
    }
  }
}

/* Keyboard dismissal (Esc): force the open panel closed even while its trigger
   still holds focus, so Tab moves straight to the next menu opener instead of
   back through the panel. ArrowDown re-opens it (see header.js). Declared after
   the open rules so it wins on source order at equal specificity. */
html[data-nav-variant='new'] header .megamenu-wrapper.mega-menu--dismissed nav[data-megamenu] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html[data-nav-variant='new'] header .megamenu-wrapper.mega-menu--dismissed a[data-megamenu] svg.header-nav-chevron,
html[data-nav-variant='new'] header .megamenu-wrapper.mega-menu--dismissed button[data-megamenu] svg.header-nav-chevron {
  --tw-rotate: 0deg;
  transform: none;
}

/* Search field theming (colors, focus ring, font-metric padding) now lives in
   the Solid components — see apps/layers-search/search-ui-theme.ts. */

[data-site-header].site-header--body nav[data-mobile-menu] a[href='/account/login'],
[data-site-header].site-header--body nav[data-mobile-menu] a[href='/cart'] {
  color: #fff;
}

[data-site-header].site-header--body nav[data-mobile-menu] path[fill='#1E1E1E'] {
  fill: #fff;
}

[data-site-header].site-header--body nav[data-mobile-menu] circle[fill='#1E1E1E'] {
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 1.5px;
}

/* Match main mobile drawer: Tailwind `black` = #1E1E1E (not pure #000) */
[data-site-header].site-header--body nav[data-mobile-menu] [data-mobile-slide-panel] {
  background-color: #1e1e1e !important;
  color: #fff !important;
  border-left: none !important;
}

[data-site-header].site-header--body nav[data-mobile-menu] svg.text-black {
  color: #fff !important;
}

/* Lock page scroll while the mobile drawer is open (Safari-safe).
   iOS Safari ignores `overflow: hidden` on the scroll root, so the body must
   be taken out of flow with `position: fixed`; header.js stores/restores the
   scroll offset to keep the page visually in place. */
html.mobile-menu-open,
body.mobile-menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.mobile-menu-open {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}

.header__mobile-backdrop:not(.pointer-events-none) {
  touch-action: none;
}

/**** END NEGATIVE SPACE MEGA MENU ****/

/* Classic mega menu stacking (variant old — matches main) */
html[data-nav-variant='old'] header {
  .megamenu-wrapper {
    nav[data-megamenu] {
      display: block;
      visibility: hidden;
      opacity: 0;
      z-index: 9;
    }
  }

  .megamenu-wrapper:hover,
  .megamenu-wrapper:focus-within {
    a[data-megamenu],
    button[data-megamenu] {
      hr {
        width: 100%;
      }

      &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 90%;
        bottom: -30px;
      }

      svg {
        --tw-rotate: 90deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
          skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
      }
    }

    nav[data-megamenu] {
      opacity: 1 !important;
      pointer-events: all !important;
      transform: unset !important;
      visibility: visible;
      z-index: 11;
    }

    nav[data-megamenu-small] {
      transform: translateX(-50%) !important;
    }
  }

  &.is-skin--false {
    .megamenu-wrapper:hover,
    .megamenu-wrapper:focus-within {
      a[data-megamenu] {
        --tw-text-opacity: 1;
        color: rgba(var(--irestore-red), var(--tw-text-opacity));
      }
    }
  }

  &.is-skin--true {
    .megamenu-wrapper:hover,
    .megamenu-wrapper:focus-within {
      a[data-megamenu] {
        --tw-text-opacity: 1;
        color: rgba(var(--irestore-purple), var(--tw-text-opacity));
      }
    }
  }
}

/* A/B nav variant visibility — hide entire section wrappers, not just inner content */
html[data-nav-variant='old'] .shopify-section:has([data-nav-variant-root='new']),
html[data-nav-variant='old'] [data-nav-variant-root='new'],
html[data-nav-variant='old'] .nav-variant--new,
html:not([data-nav-variant]) .shopify-section:has([data-nav-variant-root='new']),
html:not([data-nav-variant]) [data-nav-variant-root='new'],
html:not([data-nav-variant]) .nav-variant--new {
  display: none !important;
}

html[data-nav-variant='new'] .shopify-section:has([data-nav-variant-root='old']),
html[data-nav-variant='new'] [data-nav-variant-root='old'],
html[data-nav-variant='new'] .nav-variant--old {
  display: none !important;
}

html[data-nav-variant='new'] .site-header-section {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 50 !important;
  transform: none !important;
}

html[data-nav-variant='new'] .mobile-menu-open .site-header-section {
  z-index: 10000 !important;
}

html[data-nav-variant='new'] ns-hybrid-cart {
  z-index: 10050;
}

html[data-nav-variant='old'] ns-hybrid-cart {
  z-index: 5678;
}

html[data-nav-variant='old'] #pdp-mobile-cta {
  z-index: 50;
}

@media (min-width: 640px) {
  html[data-nav-variant='new'] .site-header-section {
    margin-top: var(--announcement-bar-height, 0px);
  }
}

@media (max-width: 639px) {
  html[data-nav-variant='new'] .site-header-section {
    top: 0 !important;
    margin-top: 0 !important;
    transition-property: opacity !important;
  }
}

html[data-nav-variant='new'] #site-header-spacer {
  min-height: calc(var(--announcement-bar-height, 0px) + 57px);
}

/* PDP sticky bar covers the full header stack (announcement + nav) like the old nav. */
@media (min-width: 768px) {
  html[data-nav-variant='new'] #pdp-sticky-nav-overlay {
    top: 0 !important;
    z-index: 60;
  }
}

@keyframes header-live-ping {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(2.1);
    opacity: 0.5;
  }
}