/* ============================================================
 * GeoShred Studio Store
 *   Storefront-first layout: compact buy hero, sticky buy bar,
 *   tabbed catalog with best-value bundle band.
 *   Builds on tokens.css + base.css (no homepage.css dependence
 *   beyond shared button/section primitives).
 * ============================================================ */

/* ============================================================
 * Sticky buy bar (revealed after hero scrolls past)
 * ============================================================ */
.gss-stickybar {
  position: fixed;
  /* Sits immediately below the moforte header (.mf-header is sticky/fixed
     at top:0 with height var(--mf-header-height)). z-index 1000 puts us
     above the header (which is z-index 999). */
  top: calc(var(--mf-promo-banner-height, 0px) + var(--mf-header-height, 101px));
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(8, 10, 14, 0.94);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  /* Hidden by default — opacity guarantees the bar can't bleed over the
     moforte header area while in its translated-up state. */
  opacity: 0;
  transform: translateY(-100%);
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s ease-out;
  pointer-events: none;
}
.gss-stickybar-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.gss-stickybar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.gss-stickybar-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  image-rendering: -webkit-optimize-contrast;
}
.gss-stickybar-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.15;
}
.gss-stickybar-text strong {
  color: #f1f1f1;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.gss-stickybar-meta {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}
.gss-stickybar-buy {
  flex-shrink: 0;
  padding: 9px 18px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gss-stickybar-buy .gss2-buy-price {
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.32);
  font-weight: 700;
}
@media (max-width: 640px) {
  .gss-stickybar-meta { display: none; }
  .gss-stickybar-inner { padding: 8px 16px; gap: 10px; }
  .gss-stickybar-buy { padding: 8px 14px; }
}

/* ============================================================
 * Hero fold — exactly one viewport tall (.hp2-fold pattern).
 * Internal layout uses CSS grid with object-fit:cover on the photo,
 * and flex centering on the buy panel — NO padding/margin used to
 * fake fold positions.
 * ============================================================ */
.gss-hero {
  background: var(--mf-bg-hero, #0a0c10);
  position: relative;
  overflow: hidden;
}
/* Higher-specificity grid override — homepage.css declares
   `section.hp2-fold { display: flex }` (specificity 0,1,1) which would
   otherwise win over a plain `.gss-hero` rule. Two-class selector lifts
   our specificity to 0,2,0. */
.gss-hero.hp2-fold {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}

/* Photo column — fills the column completely via cover */
.gss-hero-art {
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.gss-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.gss-hero-art::after {
  /* Soft right-edge gradient so the photo blends into the buy panel column */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 60%,
    rgba(10, 12, 16, 0.55) 90%,
    rgba(10, 12, 16, 0.92) 100%
  );
  pointer-events: none;
}
.gss-hero-art-tag {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 1;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Buy panel column — flex-centered, no fixed padding to dictate position */
.gss-hero-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 0 56px;
  min-height: 0;
  max-width: 620px;
}
.gss-hero-platform {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 107, 0, 0.5);
  padding: 5px 11px;
  border-radius: 999px;
}
.gss-hero-title {
  color: #f7f7f7;
  font-size: clamp(2.6rem, 4.6vw, 3.8rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  margin: 4px 0 0;
}
.gss-hero-title em {
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--mf-accent-orange, #ff6b00);
  letter-spacing: -0.01em;
}
.gss-hero-subhead {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  line-height: 1.45;
  margin: 0;
}

/* Stat pills row */
.gss-hero-stats {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.gss-hero-stats li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 8px 14px 8px 12px;
  min-width: 0;
}
.gss-hero-stats strong {
  color: var(--mf-accent-orange, #ff6b00);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-style: italic;
  line-height: 1;
}
.gss-hero-stats span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.gss-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}
.gss-hero-buy {
  padding: 14px 28px;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}
.gss-hero-buy .gss2-buy-price {
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.32);
  font-weight: 700;
}
.gss-hero-browse {
  padding: 13px 22px;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
}

/* Below the homepage .hp2-fold breakpoint (901px), .hp2-fold no longer pins
   the section to viewport height — content flows naturally. Switch to a
   single-column stack with the photo on top and panel below. */
@media (max-width: 900px) {
  .gss-hero {
    grid-template-columns: 1fr;
    grid-template-rows: 280px auto;
  }
  .gss-hero-photo { object-position: center 25%; }
  .gss-hero-art::after {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 50%,
      rgba(10, 12, 16, 0.55) 85%,
      rgba(10, 12, 16, 0.95) 100%
    );
  }
  .gss-hero-panel {
    padding: 28px 20px 36px;
    max-width: none;
  }
  .gss-hero-stats li { padding: 7px 12px 7px 10px; }
}

/* ============================================================
 * Price chip rendered inside Buy buttons
 * ============================================================ */
.gss2-buy-price {
  margin-left: 6px;
  font-weight: 600;
  opacity: 0.92;
}
.gss2-buy-price:empty { display: none; }

/* ============================================================
 * Catalog section
 * ============================================================ */
.gss2-catalog-section {
  background: var(--mf-bg-alt, #0d1117);
  /* Flush with hero fold — the sticky tab strip becomes the catalog header.
     No padding-top tuning to fake fold rhythm. */
  padding-top: 0;
  padding-bottom: 80px;
}

/* ----- Tab bar (sticky once user scrolls into catalog) ----- */
.gss-tabbar {
  position: sticky;
  /* Sits immediately below the sticky buy bar (~56px tall) which itself
     sits below the moforte header. */
  top: calc(var(--mf-promo-banner-height, 0px) + var(--mf-header-height, 101px) + 56px);
  z-index: 20;
  background: rgba(13, 17, 23, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 0 12px;
  margin: 0 -24px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: center;
}
.gss2-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #11161e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.gss2-tab {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.62);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gss2-tab:hover { color: #f1f1f1; }
.gss2-tab-active {
  background: rgba(255, 107, 0, 0.18);
  color: var(--mf-accent-orange, #ff6b00);
}
.gss2-tab:focus-visible {
  outline: 2px solid var(--mf-accent-orange, #ff6b00);
  outline-offset: 2px;
}
.gss-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.gss2-tab-active .gss-tab-count {
  background: rgba(255, 107, 0, 0.22);
  color: var(--mf-accent-orange, #ff6b00);
}

/* ----- Best Value band (visible only on All tab) — when its fold-anchor is
   active, the band fills the viewport-below-chrome so the SWAM heading
   doesn't bleed in at the bottom of the Best Value snap. Content is
   vertically centered so the bundles sit punchily mid-screen. */
.gss-best-value {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: transparent;
  border: 0;
  padding: 0;
}
/* Inside the store's tab system, Best Value is gated on the "All" tab. */
.gss2-catalog-section .gss-best-value { display: none; }
.gss2-catalog-section[data-active-tab="all"] .gss-best-value {
  display: flex;
  justify-content: center;
  /* viewport minus the sticky chrome (header + buy bar + tabbar) — matches
     --fold-snap-offset, so Best Value fills exactly the visible region
     between the sticky chrome and the viewport bottom. */
  min-height: calc(100vh - 226px);
}

.gss-best-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.gss-best-eyebrow {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mf-accent-orange, #ff6b00);
  padding: 0;
  background: transparent;
}
.gss-best-headline {
  color: #f1f1f1;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.gss-best-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gss-best-row {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  transition: transform 0.18s;
}
.gss-best-thumb {
  display: block;
  width: 320px;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
}
.gss-best-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Cancel base.css .youtube-thumbnail-wrapper sizing — we have explicit dims.
   Also re-enable the play overlay (homepage.css disables it inside .homepage,
   but we want it on the store page bundle/best-value thumbs). */
.gss-best-thumb.youtube-thumbnail-wrapper {
  width: 320px;
  padding-bottom: 0;
}
.gss-best-thumb.youtube-thumbnail-wrapper::after,
.gss2-bundle-thumb.youtube-thumbnail-wrapper::after,
.gss2-card-thumb.youtube-thumbnail-wrapper::after { content: ''; }
.gss-best-textlink {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gss-best-row:hover { transform: translateX(2px); }
.gss-best-name {
  color: #f1f1f1;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  display: block;
  margin-bottom: 6px;
}
.gss-best-detail {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  display: block;
}
.gss-best-detail em {
  color: var(--mf-accent-orange, #ff6b00);
  font-style: normal;
  font-weight: 700;
}
.gss-best-buy {
  justify-self: end;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f1f1f1;
  border: 1px solid rgba(255, 107, 0, 0.55);
  background: rgba(255, 107, 0, 0.08);
  padding: 14px 28px;
  border-radius: 6px;
  white-space: nowrap;
  /* Pairs with .hp2-instruments-cta min-width on the homepage so Browse All
     and Buy buttons render at the same width and their left edges line up.
     Harmless on the store page where this button stands alone in its grid. */
  min-width: 220px;
  text-align: center;
}
.gss-best-row:hover .gss-best-buy {
  background: var(--mf-accent-orange, #ff6b00);
  color: #fff;
  border-color: var(--mf-accent-orange, #ff6b00);
}
@media (max-width: 760px) {
  .gss-best-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .gss-best-thumb { width: 100%; height: auto; aspect-ratio: 16/9; }
  .gss-best-buy { justify-self: start; margin-top: 6px; }
}

/* ----- Panel show/hide -----
   When a single tab is active, that panel must be at least viewport-tall so
   short tabs (e.g. Bundles) don't collapse the catalog and leave the footer
   floating in dead space. The All tab has all three panels stacked, which
   is naturally tall — no min-height needed there. */
.gss2-panel { display: none; margin-top: 24px; }
.gss2-catalog-section[data-active-tab="all"] .gss2-panel,
.gss2-catalog-section[data-active-tab="swam"] [data-panel="swam"],
.gss2-catalog-section[data-active-tab="naada"] [data-panel="naada"],
.gss2-catalog-section[data-active-tab="bundles"] [data-panel="bundles"] {
  display: block;
}
.gss2-catalog-section[data-active-tab="all"] .gss2-panel + .gss2-panel { margin-top: 44px; }

/* Single-tab panels: structural floor of one fold (header + sticky bar +
   tabs already account for ~157px, so subtract that from the fold so the
   panel content area is exactly the visible region below sticky elements). */
.gss2-catalog-section[data-active-tab="swam"] [data-panel="swam"],
.gss2-catalog-section[data-active-tab="naada"] [data-panel="naada"],
.gss2-catalog-section[data-active-tab="bundles"] [data-panel="bundles"] {
  min-height: calc(var(--hp2-below-header) - 157px);
}

.gss2-panel-heading {
  color: #f1f1f1;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 6px;
}
.gss2-panel-blurb {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 720px;
  margin: 0 0 22px;
}

/* ----- Card grid: flex-wrap so the trailing partial row centers (avoids
   the lone SWAM Trombone / 2 trailing Naada cards leaving 3-4 dead grid
   cells next to them). Square thumbs (1/1) keep SWAM + Naada artwork aligned. */
.gss2-card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.gss2-card { flex: 0 0 calc((100% - 12px * 4) / 5); max-width: calc((100% - 12px * 4) / 5); }
@media (max-width: 1100px) { .gss2-card { flex-basis: calc((100% - 12px * 3) / 4); max-width: calc((100% - 12px * 3) / 4); } }
@media (max-width: 820px)  { .gss2-card { flex-basis: calc((100% - 12px * 2) / 3); max-width: calc((100% - 12px * 2) / 3); } }
@media (max-width: 540px)  { .gss2-card { flex-basis: calc((100% - 12px) / 2);     max-width: calc((100% - 12px) / 2); } }

.gss2-card {
  background: #10141b;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
}

/* Clear the gss-stickybar (~60px) and gss-tabbar (~70px) when deep-linked
 * from the homepage so the anchored row/card sits below both. */
.gss-best-row[id^="product-"],
.gss2-bundle-row[id^="product-"],
.gss2-card[id^="product-"] { scroll-margin-top: 240px; }
.gss2-card:hover {
  border-color: rgba(255, 107, 0, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}
.gss2-card-thumb {
  aspect-ratio: 1 / 1;
  background: #0a0d12;
  overflow: hidden;
  display: block;
}
/* Cancel base.css .youtube-thumbnail-wrapper sizing — aspect-ratio handles it */
.gss2-card-thumb.youtube-thumbnail-wrapper { padding-bottom: 0; }
.gss2-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* product art is square 1024×1024, fills cleanly */
  display: block;
  transition: transform 0.45s ease;
}
.gss2-card:hover .gss2-card-thumb img { transform: scale(1.04); }
.gss2-card-body {
  padding: 12px 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;     /* fill the card so margin-top:auto on BUY can push it down */
}
.gss2-card-name {
  color: #f1f1f1;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.gss2-card-type {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.gss2-card-buy {
  margin-top: auto;   /* anchor to card bottom so all BUY buttons align in a row */
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.gss2-card-buy:hover {
  background: rgba(255, 107, 0, 0.14);
  border-color: rgba(255, 107, 0, 0.55);
  color: var(--mf-accent-orange, #ff6b00);
}

/* ----- Bundle list (horizontal rows) ----- */
.gss2-bundle-list { display: flex; flex-direction: column; gap: 12px; }
.gss2-bundle-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  background: #10141b;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 14px;
  align-items: center;
  transition: border-color 0.22s;
}
.gss2-bundle-row:hover { border-color: rgba(255, 107, 0, 0.3); }
.gss2-bundle-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: #0a0e15;
}
.gss2-bundle-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Cancel base.css .youtube-thumbnail-wrapper sizing — aspect-ratio handles it */
.gss2-bundle-thumb.youtube-thumbnail-wrapper { padding-bottom: 0; }
.gss2-bundle-body { display: flex; flex-direction: column; gap: 6px; }
.gss2-bundle-name {
  color: #f1f1f1;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.gss2-bundle-body p {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}
.gss2-bundle-body .gss2-card-buy { align-self: flex-start; margin-top: 4px; padding: 8px 16px; }
@media (max-width: 720px) {
  .gss2-bundle-row { grid-template-columns: 1fr; }
  .gss2-bundle-thumb { aspect-ratio: 16 / 7; }
}

/* ----- Pricing note (footer of catalog, replaces closing CTA) ----- */
.gss-pricing-note {
  margin: 40px auto 0;
  max-width: 720px;
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.74rem;
  line-height: 1.55;
}

/* ============================================================
 * Misc cleanup
 * ============================================================ */
body.gss2-store hr { display: none; }

/* fold-snap.js: snap targets must clear the moforte header (101 px), the
 * sticky buy bar (60 px sitting at top: var(--mf-header-height)) and the
 * sticky tabbar (69 px sitting at top: calc(var(--mf-header-height) + 56)).
 * 101 + 56 + 69 = 226. Promo banner height is added by fold-snap.js itself
 * — `calc()` inside a custom property doesn't resolve when read via
 * getComputedStyle().getPropertyValue() (parseFloat sees the literal
 * string "calc(...)" and returns NaN), which silently breaks the snap.
 *
 * Scope to body.gss2-store — this stylesheet is also imported by the
 * homepage (which loads its own gss components but has neither the
 * sticky buy bar nor the tabbar), and a global :root assignment was
 * pushing homepage snap targets 102 px too high, clamping the last few
 * anchors past maxScroll. */
body.gss2-store { --fold-snap-offset: 226px; }