/* =====================================================================
   NORTHERN STICKS: shop.css (hockey shop page only)
   Bold modern: a full-bleed video header band with a giant expanded title,
   a slim dark marquee, a sticky filter bar, big product cards on stages,
   a big-numbers strip and a bold camo band. Builds on site.css tokens and
   components; page layers stay below z 45 (grain).
   ===================================================================== */

/* ---------- 1. Header band ---------- */
.shop-hero {
  /* about 60vh: a band, not a full screen */
  min-height: max(440px, 60vh); min-height: max(440px, 60svh);
  padding-block: clamp(40px, 6vw, 88px) clamp(28px, 4vw, 56px);
  background-color: var(--bg-deep);
}
.shop-hero__media { background-color: var(--bg-deep); }
.shop-hero__media > video { object-position: 50% 42%; }
/* Desktop: the portrait loop fills the right of the band and melts into the dark on the left,
   so it isn't stretched past twice its size. The scrim from .hero still covers the text area. */
@media (min-width: 900px) {
  .shop-hero__media {
    left: auto; width: 66%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 18%, #000 42%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 18%, #000 42%);
  }
  .shop-hero__media > video { object-position: 60% 40%; }
}
.shop-hero__content { gap: clamp(12px, 1.6vw, 22px); }
.shop-hero__eyebrow { color: #F7F5EE; }
/* Phones: the loop fills the whole band, so the scrim stays at 0.66 or more through the text area
   (checked against the brightest pixels of the footage: the ceiling light and the steel tray) */
@media (max-width: 899px) {
  .shop-hero::after {
    background: linear-gradient(180deg, rgba(15, 16, 10, 0.66) 0%, rgba(15, 16, 10, 0.66) 30%, rgba(15, 16, 10, 0.74) 45%, rgba(15, 16, 10, 0.84) 62%, rgba(15, 16, 10, 0.9) 80%, rgba(15, 16, 10, 0.95) 100%);
  }
}
.shop-hero__title {
  /* about 4.95em wide at wdth 125: 287px at 375px, about 1070px at 1440px (container text width 1184px) */
  font-size: clamp(3rem, 15vw, 14rem);
  line-height: 0.8; margin-left: -0.04em;
  white-space: nowrap; overflow-wrap: normal;
  text-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}
.shop-hero__foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px 40px; margin-top: clamp(4px, 1vw, 12px);
}
.shop-hero__copy { display: grid; gap: 14px; justify-items: start; max-width: 520px; }
.shop-hero__copy .lede { color: #E9E4D2; }
/* The golf line stays a sentence (no caps) inside the pill */
.shop-hero__golf { text-transform: none; letter-spacing: 0.01em; font-size: 0.78rem; }
.shop-hero__golf .pill__dot { background: var(--ns-ice); }
.shop-hero__count { display: grid; justify-items: end; gap: 6px; text-align: right; }
.shop-hero__num {
  font-size: clamp(3.4rem, 8vw, 7.5rem); font-weight: 850; font-stretch: 62%; line-height: 0.82;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 2px #F7F5EE;
}
@supports not (-webkit-text-stroke: 1px #000) { .shop-hero__num { color: #F7F5EE; } }
.shop-hero__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #E9E4D2; }
@media (max-width: 620px) {
  .shop-hero__count { justify-items: start; text-align: left; grid-auto-flow: column; align-items: end; gap: 12px; }
  .shop-hero__num { font-size: 3rem; -webkit-text-stroke-width: 1.5px; }
}

/* ---------- 2. Marquee ---------- */
.shop-marquee { --marquee-gap: clamp(18px, 2.4vw, 36px); padding-block: clamp(12px, 1.4vw, 20px); }
.shop-marquee .marquee__item { font-size: clamp(1.25rem, 2.4vw, 2.2rem); }
.shop-marquee .marquee__sep { font-size: clamp(1.25rem, 2.4vw, 2.2rem); color: #FF671F; background: #FF671F; }

/* ---------- 3. Sticky filter bar ---------- */
.shop-body { position: relative; padding-bottom: clamp(56px, 7vw, 112px); }
.shop-bar {
  /* sits right under the header bar once it has shrunk (logo 44..64px + 16px padding + 1px line) */
  position: sticky; top: calc(clamp(44px, 4.4vw, 64px) + 17px); z-index: 30;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
  background-color: rgba(22, 24, 14, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.shop-bar__inner {
  display: grid; align-items: center; gap: 10px 14px;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr) auto;
  grid-template-areas: "search cats sort";
}
.shop-search { grid-area: search; position: relative; min-width: 0; }
.shop-search__icon {
  position: absolute; left: 16px; top: 50%; width: 18px; height: 18px;
  transform: translateY(-50%); color: var(--muted); pointer-events: none;
}
.shop-search__input { min-height: 46px; padding-left: 44px; padding-right: 44px; border-radius: var(--radius-pill); }
.shop-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.shop-search__clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; color: var(--muted); font-size: 1.3rem; line-height: 1;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.shop-search__clear:hover { color: var(--fg); background: var(--surface-2); }

/* Chips: one swipeable row, with soft fades at the edges */
.shop-cats-wrap { grid-area: cats; position: relative; min-width: 0; }
.shop-cats {
  display: flex; flex-wrap: nowrap; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* room for the focus ring (2px at a 3px offset) so the scroller doesn't clip it */
  padding: 6px 6px; margin: -6px -6px;
  scroll-padding-inline: 24px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%);
}
.shop-cats::-webkit-scrollbar { display: none; }
.shop-cats .chip { flex: none; min-height: 42px; }
.chip__n { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; opacity: 0.7; }
.chip[aria-pressed="true"] .chip__n { opacity: 0.8; }

.shop-sort { grid-area: sort; display: flex; align-items: center; gap: 10px; }
.shop-sort__label { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.shop-sort__select { width: auto; min-width: 190px; min-height: 46px; border-radius: var(--radius-pill); padding-left: 18px; }

@media (max-width: 1100px) {
  .shop-bar__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "search sort" "cats cats";
  }
}
@media (max-width: 640px) {
  .shop-bar { padding-block: 10px; }
  .shop-bar__inner { gap: 8px 8px; }
  .shop-sort__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .shop-sort__select { min-width: 0; width: 150px; font-size: 0.9rem; }
  .shop-search__input, .shop-sort__select { min-height: 44px; }
  /* chips run edge to edge on phones */
  .shop-cats { margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter); scroll-padding-inline: var(--gutter); }
}
@media (max-width: 380px) { .shop-sort__select { width: 128px; } }

/* ---------- 4. Status, grid, cards ---------- */
.shop-main { padding-top: clamp(20px, 2.6vw, 36px); }
.shop-status {
  min-height: 1.5em; margin: 0 0 clamp(16px, 2vw, 24px);
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.shop-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(14px, 1.8vw, 24px);
  grid-auto-flow: dense;
}
.shop-grid .p-card__title { font-size: clamp(1rem, 1.25vw, 1.15rem); }
/* Phones: two cards per row so the shop doesn't turn into one long column */
@media (max-width: 560px) {
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .shop-grid .p-card__title { font-size: 0.92rem; }
}
.shop-grid .p-card__media { box-shadow: 0 34px 60px -36px rgba(0, 0, 0, 0.85), 0 12px 24px -18px rgba(0, 0, 0, 0.5); }

/* Default view: the first stick gets a big 2x2 card (sticks first, the owner's lead stick) */
@media (min-width: 900px) {
  .shop-grid.has-feature > .p-card:first-child { grid-column: span 2; grid-row: span 2; }
  .shop-grid.has-feature > .p-card:first-child .p-card__media { aspect-ratio: auto; flex: 1; min-height: 0; }
  .shop-grid.has-feature > .p-card:first-child .p-card__img { width: 80%; height: 80%; }
  .shop-grid.has-feature > .p-card:first-child .p-card__title { font-size: clamp(1.4rem, 2.2vw, 2.1rem); font-weight: 800; font-stretch: 85%; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em; }
  .shop-grid.has-feature > .p-card:first-child .p-card__price { font-size: 1.25rem; }
  .shop-grid.has-feature > .p-card:first-child .p-card__add { width: 56px; height: 56px; right: 18px; top: 18px; font-size: 1.5rem; }
}
@media (max-width: 899px) {
  .shop-grid.has-feature > .p-card:first-child { grid-column: 1 / -1; }
  .shop-grid.has-feature > .p-card:first-child .p-card__media { aspect-ratio: 4 / 3; }
  .shop-grid.has-feature > .p-card:first-child .p-card__title { font-size: 1.2rem; font-weight: 800; }
}

/* Staggered entrance as cards scroll into view (shop.js adds .is-pending, then removes it).
   Works without GSAP; never applied with reduced motion. */
.shop-grid > .p-card {
  transition:
    opacity 700ms var(--ease-out) var(--in-delay, 0ms),
    transform 900ms var(--ease-out) var(--in-delay, 0ms),
    translate var(--dur) var(--ease-out);
}
.shop-grid > .p-card.is-pending { opacity: 0; transform: translateY(36px); }
@media (prefers-reduced-motion: reduce) { .shop-grid > .p-card.is-pending { opacity: 1; transform: none; } }
html.reduce-motion .shop-grid > .p-card.is-pending { opacity: 1; transform: none; }

/* ---------- 5. Empty state ---------- */
.shop-empty {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: clamp(16px, 4vw, 56px);
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--surface);
}
.shop-empty[hidden] { display: none; }
.shop-empty__mark {
  font-size: clamp(6rem, 16vw, 13rem); font-weight: 850; font-stretch: 62%; line-height: 0.8;
  color: transparent; -webkit-text-stroke: 2px #FF671F;
}
@supports not (-webkit-text-stroke: 1px #000) { .shop-empty__mark { color: #FF671F; } }
.shop-empty__copy { display: grid; gap: 14px; justify-items: start; max-width: 560px; }
.shop-empty__copy .row { margin-top: 6px; }
@media (max-width: 560px) { .shop-empty { grid-template-columns: 1fr; } .shop-empty__mark { font-size: 5.5rem; } }

/* ---------- 6. Load more ---------- */
.shop-more { display: grid; justify-items: center; gap: 18px; margin-top: clamp(40px, 5vw, 72px); }
.shop-more__progress { width: min(320px, 100%); height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.shop-more__progress > span { display: block; width: 100%; height: 100%; background: #FF671F; transform-origin: left center; transform: scaleX(var(--shop-progress, 0)); transition: transform var(--dur) var(--ease-out); }
.shop-more.is-done .shop-more__progress, .shop-more.is-empty { display: none; }
.shop-more__btn { gap: 14px; min-width: min(320px, 100%); justify-content: center; }
.shop-more__left { font-size: 0.78rem; font-weight: 600; opacity: 0.75; }
.shop-noscript { padding: 20px 0; color: var(--muted); }

/* ---------- 7. Big numbers ---------- */
.shop-facts .big-number__value { color: var(--fg); }
.shop-note { margin-top: clamp(28px, 3.6vw, 48px); color: var(--muted); }

/* ---------- 8. Camo sell band ---------- */
.shop-sell__inner {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
}
.shop-sell__copy { display: grid; gap: clamp(16px, 2vw, 24px); justify-items: start; }
.shop-sell__title { max-width: 12ch; }
.shop-sell__copy .lede { color: #E9E4D2; }
.shop-sell__steps { display: grid; gap: 12px; counter-reset: none; }
/* Each step has its own dark glass panel, so the text reads over the lighter right side of the camo */
.shop-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: baseline;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(247, 245, 238, 0.16); border-radius: var(--radius-media);
  background: rgba(22, 24, 14, 0.84);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.shop-step__n { grid-row: span 2; font-size: 0.85rem; font-weight: 600; color: #FF671F; }
.shop-step__t { font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 800; font-stretch: 85%; line-height: 1.1; text-transform: uppercase; letter-spacing: -0.005em; }
.shop-step__d { font-size: 0.92rem; color: var(--muted); }
@media (max-width: 900px) { .shop-sell__inner { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 9. Pre-launch (shop not open yet) ----------
   The build strips [data-full-only] or [data-prelaunch-only] from the HTML; on the dev
   server site.js sets html.is-prelaunch instead. These two lines repeat site.css's rule
   so the shop page is right even if that rule changes. */
html.is-prelaunch .page-shop [data-full-only] { display: none !important; }
html:not(.is-prelaunch) .page-shop [data-prelaunch-only] { display: none !important; }

/* Header count becomes a big outlined "Soon" */
.shop-hero__count--soon .shop-hero__num { -webkit-text-stroke-color: #FF671F; }
@supports not (-webkit-text-stroke: 1px #000) { .shop-hero__count--soon .shop-hero__num { color: #FF671F; } }

/* Coming-soon band in place of the grid: big title + sign-up on the left, a Blaze board on the right */
.shop-soon { position: relative; padding-block: clamp(56px, 8vw, 128px); overflow: hidden; }
.shop-soon::before {
  /* a soft Blaze glow behind the board so the band isn't flat */
  content: ""; position: absolute; right: -12%; top: 10%; width: 60%; aspect-ratio: 1;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 103, 31, 0.18), rgba(255, 103, 31, 0));
}
.shop-soon__inner {
  position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
}
.shop-soon__copy { display: grid; gap: clamp(16px, 2vw, 24px); justify-items: start; min-width: 0; }
.shop-soon__title { max-width: 13ch; }
.shop-soon__copy .lede { max-width: 52ch; }
.shop-soon__form { display: grid; gap: 12px; width: 100%; max-width: 560px; margin-top: 4px; }
.shop-soon__form .check { font-size: 0.8rem; }
.shop-soon__copy .row { margin-top: 4px; }

.shop-soon__board {
  display: grid; gap: clamp(18px, 2vw, 28px); align-content: start;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--radius-media);
  background: #FF671F; color: #1F2114;
  box-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.9);
  rotate: -1.5deg;
}
.shop-soon__kicker { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.shop-soon__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.shop-soon__list li {
  display: flex; align-items: baseline; gap: 16px;
  padding-block: 6px; border-bottom: 1px solid rgba(31, 33, 20, 0.22);
  font-size: clamp(2.2rem, 5vw, 4.6rem); font-weight: 850; font-stretch: 62%; line-height: 0.95;
  text-transform: uppercase; letter-spacing: -0.01em;
}
.shop-soon__list li:last-child { border-bottom: 0; }
.shop-soon__list .mono { flex: none; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; }
.shop-soon__note { color: #1F2114; }
.shop-soon__note .text-link { color: #1F2114; text-decoration-color: currentColor; white-space: nowrap; }
.shop-soon__note .text-link:hover { color: #1F2114; text-decoration-thickness: 2px; }
@media (max-width: 900px) {
  .shop-soon__inner { grid-template-columns: minmax(0, 1fr); }
  .shop-soon__board { rotate: none; }
}
@media (prefers-reduced-motion: reduce) { .shop-soon__board { rotate: none; } }