/* ==========================================================================
   6ixmerchandise — announcement bar, C1 centred-logo header, mega nav,
   mobile drawer.  Source: FRONTEND_ARCHITECTURE §3.1-§3.4, §3.6 plus the
   Shopify theme's own s6m-header-c1.css / 6m-design.css / _header-menu.liquid.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ANNOUNCEMENT MARQUEE (§3.1)
   The Shopify select label says "Black on white" but the rendered CSS is ink
   background / white text with red stars — the LIVE render wins (§How-to-read
   rule 2). Confirmed against screenshots/home-1440.png.
   -------------------------------------------------------------------------- */

.s6m-announce {
  background: var(--6m-ink);
  color: #fff;
  overflow: hidden;
  padding: 9px 0;
  font-family: var(--6m-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  z-index: 60;
}

.s6m-announce__track {
  display: flex;
  gap: 30px;
  white-space: nowrap;
  width: max-content;
  animation: s6m-marquee-scroll 28s linear infinite;
}

.s6m-announce__track > * {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
}

.s6m-announce .star { color: var(--6m-signal); }

@keyframes s6m-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}

@media (prefers-reduced-motion: reduce) {
  .s6m-announce__track { animation: none; transform: none; }
}

/* --------------------------------------------------------------------------
   2. HEADER SHELL (§3.2)
   sticky / top:-1px (deliberate: lets an IntersectionObserver detect "stuck")
   60px mobile / 68px desktop. Height is fixed on the row so the header can
   never shift while the logo decodes.
   -------------------------------------------------------------------------- */

.s6m-header {
  position: sticky;
  top: -1px;
  z-index: var(--layer-sticky);
  background: var(--6m-bg);
  /* Hairline as an inset shadow, not a border: §1.3 pins the header box to
     exactly 60px / 68px and a 1px border would make it 61/69, which then leaks
     into the runtime --header-height the sticky filter bar and the fixed mega
     panel are positioned against. */
  box-shadow: inset 0 -1px 0 var(--6m-line-2);
  /* Horizon set `contain: layout style` here, which trapped position:fixed
     descendants and broke the mega panel. Never reintroduce containment. */
  contain: none;
}

.s6m-header__row {
  max-width: var(--narrow-page-width);
  margin-inline: auto;
  padding-inline: var(--6m-gutter);
}

@media (min-width: 768px) {
  .s6m-header__row { padding-inline: var(--6m-gutter-d); }
}

.s6m-header__columns {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  height: 60px;
}

@media (min-width: 768px) {
  .s6m-header__columns { height: 68px; }
}

/* Logo -------------------------------------------------------------------- */

.s6m-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.header-logo__image {
  display: block;
  width: 59px;
  height: 32px;
  /* Optical fix (§1.10): the CN-Tower spire tops the wordmark, so the type
     block's centre sits 20.3% below the image's geometric centre. */
  transform: translateY(-20.3%);
}

@media (min-width: 768px) {
  .header-logo__image { width: 81px; height: 44px; }
}

/* Actions ----------------------------------------------------------------- */

.s6m-header__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.s6m-header__action { color: var(--6m-ink); text-decoration: none; }

.cart-bubble {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--6m-signal);
  color: #fff;
  font-family: var(--6m-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  display: none;
}

.cart-bubble.is-filled { display: block; }

/* Currency / locale (§3.2) ------------------------------------------------- */

.s6m-header__locale {
  position: relative;
  display: none;            /* hidden below 750px, exactly as the live header */
  flex: 0 0 auto;
}

@media (min-width: 750px) {
  .s6m-header__locale { display: block; }
}

.s6m-header__locale-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--6m-sans);
  font-size: 0.875rem;
  color: var(--6m-ink);
}

.s6m-header__locale-caret { transition: transform 0.15s ease-in-out; }
.s6m-header__locale-button[aria-expanded="true"] .s6m-header__locale-caret { transform: rotate(180deg); }

.s6m-header__locale-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;                 /* C1 flips the dropdown left-bound */
  right: auto;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--6m-line);
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.15);
  padding: 14px 16px;
  z-index: var(--layer-header-menu);
}

.s6m-header__locale-panel[hidden] { display: none; }

.s6m-header__locale-list { list-style: none; margin: 10px 0 0; padding: 0; }

.s6m-header__locale-option {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  font-family: var(--6m-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--6m-ink);
}

.s6m-header__locale-option.is-selected { font-weight: 700; color: var(--6m-signal); }
.s6m-header__locale-option:hover { color: var(--6m-signal); }

/* Search panel fallback ---------------------------------------------------- */

.s6m-search-panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: #fff;
  border-bottom: 1px solid var(--6m-line);
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.15);
  z-index: var(--layer-header-menu);
}

.s6m-search-panel[hidden] { display: none; }

.s6m-search-panel__form {
  max-width: var(--narrow-page-width);
  margin-inline: auto;
  padding: 14px var(--6m-gutter);
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (min-width: 768px) {
  .s6m-search-panel__form { padding-inline: var(--6m-gutter-d); }
}

.s6m-search-panel__input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--6m-line);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--6m-sans);
  font-size: 14px;
}

/* Burger ------------------------------------------------------------------- */

.s6m-header__burger { flex: 0 0 auto; margin-left: -8px; }

@media (min-width: 1024px) {
  .s6m-header__burger { display: none; }
}

/* --------------------------------------------------------------------------
   3. PRIMARY NAV (§3.4 panel mechanics)
   -------------------------------------------------------------------------- */

.s6m-mega { display: none; }

.s6m-mega__list {
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
}

.s6m-mega__item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.s6m-mega__link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  font-family: var(--6m-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--6m-ink);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color 0.15s ease;
}

.s6m-mega__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: calc(50% - 1.2em);
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.18s ease;
}

.s6m-mega__item:hover .s6m-mega__link::after,
.s6m-mega__link.is-active::after { transform: scaleX(1); }

/* Hovering the nav dims the other links. */
.s6m-mega:hover .s6m-mega__link { color: rgb(10 10 10 / 0.45); }
.s6m-mega:hover .s6m-mega__item:hover .s6m-mega__link { color: var(--6m-ink); }

/* Invisible hover bridge so the pointer can cross the gap to the panel. */
.s6m-mega__item--has-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 18px;
  pointer-events: none;
}

.s6m-mega__item--has-panel:hover::after { pointer-events: auto; }

/* Panels ------------------------------------------------------------------- */

.s6m-mega__panel {
  position: absolute;
  top: 100%;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #0a0a0a;
  color: #fff;
  border-top: 1px solid rgb(255 255 255 / 0.06);
  box-shadow: 0 24px 48px -22px rgb(0 0 0 / 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: var(--layer-header-menu);
  transition: opacity 0.18s ease 0.08s, visibility 0s linear 0.26s,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}

.s6m-mega__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40px;
  height: 40px;
}

.s6m-mega__panel-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 48px 36px;
}

.s6m-mega__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.s6m-mega__eyebrow {
  font-family: var(--6m-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.45);
  display: block;
}

.s6m-mega__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 28px;
}

.s6m-mega__sublink {
  display: block;
  padding: 7px 0;
  font-size: 13px;
  color: rgb(255 255 255 / 0.78);
  text-decoration: none;
  transition: color 0.15s ease;
}

.s6m-mega__sublink:hover { color: var(--6m-signal); }

.s6m-mega__shopall {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--6m-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgb(255 255 255 / 0.4);
}

.s6m-mega__shopall:hover { color: var(--6m-signal); border-bottom-color: var(--6m-signal); }

.s6m-mega__empty { color: rgb(255 255 255 / 0.6); font-size: 13px; }

/* Category panel (NBA / Football / Anime, §3.4) ----------------------------- */

.s6m-mega__cat {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
}

.s6m-mega__cat-hero {
  background: linear-gradient(135deg, #161616 0%, #0a0a0a 100%);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 156px;
}

.s6m-mega__cat-title {
  font-family: var(--6m-display);
  font-size: 34px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.s6m-mega__cat-sub {
  font-family: var(--6m-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgb(255 255 255 / 0.78);
}

.s6m-mega__cat-count {
  margin-top: auto;
  font-family: var(--6m-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--6m-signal);
}

@media (min-width: 1280px) {
  .s6m-mega__cat { grid-template-columns: 280px minmax(0, 1fr); }
  .s6m-mega__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   4. C1 ROW REBUILD at >=1024px (§3.2)
   Visual order: [CAD/EN] … [nav 1-4] [LOGO] [nav 5+] … [search account cart]
   `display: contents` lets the nav <li>s become direct flex children of the row
   so `order` can interleave the logo between items 4 and 5. `role="list"` is on
   the <ul> so the list semantics survive display:contents.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .s6m-mega { display: contents; }
  .s6m-mega__list { display: contents; }

  .s6m-header__locale { order: 10; }
  .s6m-mega__item { order: 20; margin-inline: 10px; }
  .s6m-mega__item:first-child { margin-left: auto; }
  .s6m-mega__item:nth-child(n + 5) { order: 40; }
  .s6m-header__logo { order: 30; margin-inline: 28px; }

  .s6m-header__actions {
    order: 60;
    margin-left: auto;
    /* Flank balancing: CAD/EN + 4 links outweigh the right flank by ~80-90px,
       which would pull the logo right of page centre because the slack splits
       equally between the two auto margins. This invisible padding equalises
       the flanks so the logo lands on the exact page centreline. */
    padding-left: 80px;
  }

  /* The header is position:sticky z-index 8, and so is the collection filter
     bar — the panel would be occluded. Bump the header while a panel is open. */
  .s6m-header:has(.s6m-mega__item--has-panel:hover),
  .s6m-header:has(.s6m-mega__item--has-panel:focus-within) { z-index: var(--layer-temporary); }

  /* Anchor panels to the viewport, not the <li>, so wide layouts stay on screen. */
  .s6m-mega__panel {
    position: fixed;
    top: var(--header-height, 68px);
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    transform: translateY(-6px);
  }

  .s6m-mega__item--has-panel:hover > .s6m-mega__panel,
  .s6m-mega__item--has-panel:focus-within > .s6m-mega__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.18s ease, visibility 0s linear 0s,
      transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (min-width: 1280px) {
  .s6m-mega__item { margin-inline: 15px; }
  .s6m-mega__item:first-child { margin-left: auto; }
  .s6m-header__logo { margin-inline: 33px; }
  .s6m-header__actions { padding-left: 90px; }
}

/* "Track Order" only fits from 1360px; below that it lives in the drawer. */
@media (max-width: 1359px) {
  .s6m-mega__item--track { display: none; }
}

@media (min-width: 1360px) {
  .s6m-header__actions { padding-left: 0; }
  .s6m-header__locale { padding-right: 50px; }
}

/* --------------------------------------------------------------------------
   5. MOBILE CENTRED LOGO (381-1023px, §3.2)
   Below 381px the natural flex row stays: a truly centred logo collides with
   the three-icon cluster on ultra-narrow screens.
   -------------------------------------------------------------------------- */

@media (min-width: 381px) and (max-width: 1023px) {
  .s6m-header__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 2;
  }
}

/* --------------------------------------------------------------------------
   6. MOBILE DRAWER (§3.6)
   -------------------------------------------------------------------------- */

.s6m-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--layer-menu-drawer);
}

.s6m-drawer[hidden] { display: none; }

.s6m-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.s6m-drawer.is-open .s6m-drawer__scrim { opacity: 1; }

.s6m-drawer__panel {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 95vw;
  max-width: 500px;
  height: 100dvh;
  background: #fff;
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.2s ease-in-out;
}

.s6m-drawer.is-open .s6m-drawer__panel { transform: translateX(0); }

.s6m-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--6m-line);
}

.s6m-drawer__brand {
  font-family: var(--6m-display);
  font-size: 24px;
  letter-spacing: 0.05em;
}

.s6m-drawer__nav { flex: 1; overflow-y: auto; padding: 8px 0 24px; }
.s6m-drawer__list { list-style: none; margin: 0; padding: 0; }
.s6m-drawer__item { border-bottom: 1px solid var(--6m-line-2); }

.s6m-drawer__toggle,
.s6m-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  min-height: 48px;
  padding: 12px 18px;
  border: 0;
  background: none;
  font-family: var(--6m-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--6m-ink);
  text-decoration: none;
  cursor: pointer;
}

.s6m-drawer__sub { padding: 0 18px 14px; }
.s6m-drawer__sub[hidden] { display: none; }

.s6m-drawer__sublink {
  display: block;
  padding: 8px 0;
  font-size: 13px;
  color: rgb(10 10 10 / 0.82);
  text-decoration: none;
}

.s6m-drawer__sublink:hover { color: var(--6m-signal); }
.s6m-drawer__sublink--all { font-weight: 600; }

.s6m-drawer__toggle[aria-expanded="true"] .s6m-drawer__plus { transform: rotate(45deg); }
.s6m-drawer__plus { transition: transform 0.15s ease-in-out; flex: 0 0 auto; }

.s6m-drawer__foot {
  padding: 16px 18px;
  border-top: 1px solid var(--6m-line);
  font-family: var(--6m-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.s6m-drawer__mail { color: var(--6m-muted); text-decoration: none; }

body.sixm-drawer-open { overflow: hidden; }

@media (min-width: 1024px) {
  .s6m-drawer { display: none; }
}

/* --------------------------------------------------------------------------
   7. Checkout strips the storefront chrome (§2.5)
   -------------------------------------------------------------------------- */

body.sixm-minimal-chrome .s6m-mega__panel,
body.sixm-minimal-chrome .s6m-drawer,
body.sixm-minimal-chrome .s6m-tabbar { display: none !important; }