/* ============================================================================
   store.css — Collection page styles for OSUPhoenix storefront
   ============================================================================

   This stylesheet extends /styles.css with styles specific to the
   Fourthwall storefront. It relies on all the CSS custom properties
   (design tokens) already defined in styles.css — never redefine those here.

   TABLE OF CONTENTS
   ─────────────────
   1.  Breadcrumb
   2.  Collection hero
   3.  Hero readout panel
   4.  Products grid
   5.  Product card
   6.  Product card — image area
   7.  Product card — body (text + controls)
   8.  Product card — variant selector
   9.  Product card — buy button
   10. Product card — loading skeleton
   11. State messages (error / empty)
   12. Responsive breakpoints

   Design vocabulary: matches the rest of the site — dark surfaces,
   corner brackets, JetBrains Mono eyebrows and data readouts,
   Rajdhani for display headlines, red for primary actions.
   ============================================================================ */


/* ============================================================================
   1. BREADCRUMB
   ============================================================================
   Small navigation trail at the top of the hero:
   "Home / Store / Collection Name"
   Uses the mono font for the technical/readout feel.
   ============================================================================ */

.store-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.breadcrumb-link {
  color: var(--silver-dim);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.breadcrumb-link:hover {
  color: var(--red);
}

.breadcrumb-sep {
  color: var(--text-dim);
}

.breadcrumb-current {
  /* The current page — slightly brighter than the links */
  color: var(--silver);
}


/* ============================================================================
   2. COLLECTION HERO
   ============================================================================
   Full-width section containing the collection title, description,
   and the PRODUCTS readout panel. Uses a subtle red left-border accent
   to anchor the section visually (same pattern as section dividers elsewhere).
   ============================================================================ */

.collection-hero {
  padding: var(--space-16) 0 var(--space-12);
  border-bottom: 1px solid var(--border-subtle);
}

/* Constrain hero content to match the product grid width */
.collection-hero .container {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* Inner layout: text on the left, readout panel on the right */
.collection-hero-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

/* The text block (eyebrow + title + description) */
.collection-hero-text {
  flex: 1;
  max-width: 65ch;
}

/* section-eyebrow is already defined in styles.css.
   We just position it above the title. */
#collection-eyebrow {
  margin-bottom: var(--space-3);
}

.collection-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.05;
  margin: 0 0 var(--space-4);
}

.collection-desc {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
  max-width: 55ch;
}


/* ============================================================================
   3. HERO READOUT PANEL
   ============================================================================
   The "PRODUCTS / 04" dashboard card on the right side of the hero.
   Matches the readout cards on the homepage — same corner brackets,
   same mono font, same sizing logic.
   ============================================================================ */

.collection-readout {
  /* Don't let this grow — it should be a fixed-size widget */
  flex-shrink: 0;
}

.readout-panel {
  position: relative;
  padding: var(--space-6) var(--space-8);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  text-align: center;
  min-width: 120px;
}

/* The corner bracket elements inherit from .corner in styles.css.
   They turn red on hover of the whole readout panel — same as the
   homepage readouts. */
.readout-panel:hover .corner {
  background: var(--red);
}

.readout-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin: 0 0 var(--space-2);
}

.readout-value {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  /* Tabular nums so the number doesn't shift width as it updates */
  font-variant-numeric: tabular-nums;
  /* Subtle red glow when the count is loaded — store.js adds .is-loaded */
  transition: color var(--duration-normal) var(--ease-out);
}

.readout-panel.is-loaded .readout-value {
  color: var(--red-bright);
}


/* ============================================================================
   4. PRODUCTS GRID
   ============================================================================
   CSS Grid layout for product cards. 3 columns on desktop, 2 on tablet,
   1 on mobile. Uses auto-fill with a minimum size so it adapts fluidly.
   ============================================================================ */

.collection-grid-section {
  padding: var(--space-12) 0 var(--space-16);
}

.product-grid {
  display: grid;
  /*
    auto-fill: fill as many columns as fit.
    minmax(280px, 1fr): each column is at least 280px wide, grows to fill space.
    This gives us 3 columns at ~960px+, 2 at ~580px+, 1 below that.
    max-width: 980px keeps cards from stretching too wide on large monitors —
    consistent with the other section grids on the page.
  */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================================
   5. PRODUCT CARD — shell
   ============================================================================
   The outer card container. Uses the same design vocabulary as other
   cards on the site — dark surface, subtle border, corner brackets,
   lift on hover.
   ============================================================================ */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  /*
    overflow: hidden clips the image to the card boundary.
    But the corner brackets (.corner) use position: absolute and need to
    sit ON the border. We handle this by placing them inside the card.
  */
  overflow: hidden;

  /* Smooth lift + border-color transition on hover */
  transition:
    border-color var(--duration-normal) var(--ease-out),
    transform   var(--duration-fast)   var(--ease-out);
}

.product-card:hover {
  border-color: var(--border-red);
  transform: translateY(-3px);
}

/* Corner brackets turn red on hover — inherited from styles.css .corner */
.product-card:hover .corner {
  background: var(--red);
}


/* ============================================================================
   6. PRODUCT CARD — image area
   ============================================================================
   Fixed-aspect-ratio image container. The ratio is set with aspect-ratio
   so cards stay the same height regardless of image dimensions.
   Includes a placeholder state for products without images.
   ============================================================================ */

.product-img-wrap {
  position: relative;
  width: 100%;
  /*
    3:4 ratio (portrait) — matches the Fourthwall panel image dimensions.
    FW product images are designed as tall portrait cards, so we match that
    here. If you ever use a different collection with square images, change
    this to 1 / 1.
  */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-elevated);
  /* Subtle border between image and card body */
  border-bottom: 1px solid var(--border-subtle);
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Zoom in slightly on hover for an editorial feel */
  transition: transform var(--duration-slow) var(--ease-out);
}

.product-card:hover .product-img {
  transform: scale(1.04);
}

/* Placeholder shown when the product has no image */
.product-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  /* Subtle dot-grid pattern — matches the "technical" feel */
  background-image: radial-gradient(var(--border-subtle) 1px, transparent 1px);
  background-size: 20px 20px;
}

.product-img-placeholder-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--text-dim);
}


/* ============================================================================
   7. PRODUCT CARD — body (text + controls)
   ============================================================================
   The lower portion of the card. flex-direction: column + flex: 1 on
   the body means the card always fills its grid cell, and the buy button
   is always pushed to the bottom regardless of content length.
   ============================================================================ */

.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;          /* grow to fill the card height */
  padding: var(--space-5);
  gap: var(--space-3);
}

/* Category / type label — same eyebrow style as elsewhere */
.product-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin: 0;
}

/* Product name headline */
.product-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

/* Short description (stripped of HTML, truncated in JS) */
.product-desc {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
  flex: 1;    /* push price + variant + button to the bottom */
}

/* Price display row — horizontal label + value layout */
.product-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  /* Left accent bar — same treatment as rec-warning / rec-meta in styles.css */
  border-left: 2px solid var(--border-red);
}

.product-price-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--silver-dim);
  margin: 0;
  text-transform: uppercase;
}

/* The actual price figure — treated like a readout value */
.product-price {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  /*
    Smooth transition so the price updates visibly when the user
    selects a different variant.
  */
  transition: color var(--duration-fast) var(--ease-out);
}

/* When JS changes the price (variant switch), briefly highlight it */
.product-price.is-updating {
  color: var(--red-bright);
}


/* ============================================================================
   8. PRODUCT CARD — variant selector
   ============================================================================
   Custom-styled <select> for size/color/option variants.
   The native select is hidden behind a styled wrapper so we control
   the appearance while the browser still handles the dropdown.
   ============================================================================ */

.product-variant-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.product-variant-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--silver-dim);
  text-transform: uppercase;
}

/* Wrapper provides position context for the custom arrow */
.product-select-wrap {
  position: relative;
}

.product-variant-select {
  width: 100%;
  appearance: none;       /* remove native arrow */
  -webkit-appearance: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.product-variant-select:focus {
  outline: none;
  border-color: var(--red);
}

.product-variant-select:hover {
  border-color: var(--border-strong);
}

/* The custom ▾ arrow, positioned inside the wrapper */
.product-select-arrow {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--silver-dim);
  font-size: 10px;
  pointer-events: none;   /* clicks pass through to the select */
}


/* ============================================================================
   9. PRODUCT CARD — buy button
   ============================================================================
   Uses the .btn.btn--red class from styles.css as a base, then adds
   store-specific states: loading (spinner) and success.
   The button stays at the bottom of the card due to .product-body's
   flex layout (description has flex: 1 which pushes everything below it down).
   ============================================================================ */

.product-buy-btn {
  /* btn + btn--red are defined in styles.css.
     We extend with layout + state styles here. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: auto;       /* extra insurance to stick to the bottom */
  padding: var(--space-3) var(--space-4);

  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  background: var(--red);
  color: var(--bg-primary);
  border: 1px solid var(--red);

  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.product-buy-btn:hover {
  background: var(--red-bright);
  border-color: var(--red-bright);
}

/* Loading state — set by JS while checkout redirect is being prepared */
.product-buy-btn.is-loading {
  opacity: 0.6;
  cursor: wait;
  /* Replace text with a pulsing ellipsis via the pseudo-element */
  pointer-events: none;
}

.product-buy-btn.is-loading span:first-child::after {
  content: '…';
  animation: ellipsis-pulse 1.2s infinite;
}

@keyframes ellipsis-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Disabled state (no variant available) */
.product-buy-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--bg-elevated);
  border-color: var(--border-default);
  color: var(--text-muted);
}

/* The → arrow inside the button */
.product-buy-btn .cta-arrow {
  transition: transform var(--duration-fast) var(--ease-out);
}

.product-buy-btn:hover .cta-arrow {
  transform: translateX(4px);
}


/* ============================================================================
   10. PRODUCT CARD — loading skeleton
   ============================================================================
   Four skeleton cards are shown in the grid while the API call is in
   flight. They use a shimmer animation (gradient that sweeps left to right)
   to signal activity without any text.
   ============================================================================ */

.product-skeleton {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);

  /* Aspect ratio matches a typical product card (image + body area) */
  min-height: 380px;

  /* Shimmer: a wide gradient positioned off-screen left, animated right */
  background-image: linear-gradient(
    90deg,
    var(--bg-surface)          0%,
    var(--bg-elevated)        40%,
    var(--bg-surface)         80%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}


/* ============================================================================
   11. STATE MESSAGES (error / empty)
   ============================================================================
   Centered message panels with corner brackets, shown when the API
   call fails or the collection is empty. Styled to feel like a
   system status panel — matching the site's "control room" vocabulary.
   ============================================================================ */

.collection-state {
  position: relative;
  padding: var(--space-12) var(--space-8);
  text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  max-width: 480px;
  margin: 0 auto;
}

.collection-state--error {
  border-color: var(--border-red);
}

.collection-state--error:hover .corner {
  background: var(--red);
}

.state-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--silver-dim);
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}

.collection-state--error .state-eyebrow {
  color: var(--red);
}

.state-message {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-body);
  margin: 0 0 var(--space-6);
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

/* RETRY button — uses the outline variant */
.btn--outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.btn--outline:hover {
  border-color: var(--red);
  color: var(--red);
}


/* ============================================================================
   12. BACKGROUND DECORATION
   ============================================================================
   The page background is plain --bg-primary by default, which reads as
   an empty void behind the product grid. These elements add depth without
   competing with the products:

     .store-bg-canvas     — the full-page wrapper that holds both layers
     .store-bg-grid       — subtle dot-grid or line-grid drawn in CSS
     .store-bg-streaks    — diagonal light-leak streaks, red-tinted
     .store-bg-image      — optional large decorative image (e.g. a logo
                            render, mascot, or scene) positioned behind the grid

   All three are positioned fixed so they stay put during scroll, giving
   the page a sense of depth. z-index: 0, everything else is z-index: 1+.
   ============================================================================ */

/*
  The canvas sits behind everything on the page.
  pointer-events: none means it never intercepts clicks.
*/
.store-bg-canvas {
  position: fixed;
  inset: 0;                 /* shorthand for top/right/bottom/left: 0 */
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Push all page content above the background canvas */
.store-bg-canvas ~ * {
  position: relative;
  z-index: 1;
}

/*
  The dot grid: a repeating radial-gradient creates small dots.
  Very low opacity so it reads as texture, not a pattern.
  The 28px size gives an even grid without looking like graph paper.
*/
.store-bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(200, 200, 200, 0.07) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
}

/*
  Light-streak accents: three diagonal bars using a conic-gradient.
  They sit in the top-right quadrant so they don't overpower the
  left-aligned hero text. Color is a very faint red tint.
*/
.store-bg-streaks {
  position: absolute;
  inset: 0;

  /* Streak 1 — widest, most transparent */
  background:
    linear-gradient(
      125deg,
      transparent 35%,
      rgba(230, 57, 70, 0.04) 45%,
      transparent 55%
    ),
    linear-gradient(
      118deg,
      transparent 45%,
      rgba(230, 57, 70, 0.06) 52%,
      transparent 60%
    ),
    linear-gradient(
      110deg,
      transparent 55%,
      rgba(230, 57, 70, 0.03) 62%,
      transparent 70%
    );
}

/*
  Decorative image slot: place a large PNG/WebP here (a logo render,
  mascot, character, Blender scene, etc.) and it'll sit quietly in the
  background. The user replaces the background-image URL.

  Positioned to the right so it doesn't obscure the hero text.
  mix-blend-mode: luminosity integrates it with the dark background so
  it reads as atmosphere rather than a pasted image.
*/
.store-bg-image {
  position: absolute;
  /* Right-aligned, vertically centered-ish */
  right: -5%;
  top: 5%;
  width: 55%;
  max-width: 780px;
  aspect-ratio: 1 / 1;

  /* Replace the URL below with your actual image path */
  background-image: url('/store/bg-decoration.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* Blend into the dark background */
  opacity: 0.12;
  mix-blend-mode: luminosity;

  /*
    If you don't have a decoration image yet, comment out background-image
    and uncomment this to see a placeholder outline:
    outline: 1px dashed rgba(230,57,70,0.3);
  */
}


/* ============================================================================
   13. MEMBER-ONLY PRODUCT BADGE
   ============================================================================
   When a product is flagged as member-only in COLLECTION_CONFIG.memberOnly[],
   store.js adds the .product-badge--member element to the card's image area
   and the .is-member-only class to the card itself.

   Visual treatment:
     - A pill badge in the top-left of the image reads "MEMBERS ONLY"
     - The buy button is replaced with a "JOIN TO ACCESS" link
     - A subtle red top-border accents the card

   The goal is to clearly communicate gate status without making the
   product feel broken or hidden — it should look premium, not broken.
   ============================================================================ */

/* Badge — inline in card body, sits between description and price row.
   Rendered by store.js just before the price row so it reads clearly
   without competing with the product image. */
.product-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.product-badge--member {
  background: var(--red);
  color: var(--bg-primary);
  /* Small star icon prefix — pure CSS, no image needed */
}

.product-badge--member::before {
  content: '★';
  font-size: 9px;
}

/*
  The card itself gets a top accent border and a slightly warmer
  surface tint to visually differentiate it from free products.
*/
.product-card.is-member-only {
  border-top: 2px solid var(--red);
}

/*
  The image on member-only cards gets a very faint red wash overlay
  so the badge reads cleanly against any image color.
*/
.product-card.is-member-only .product-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(230, 57, 70, 0.18) 0%,
    transparent 40%
  );
  pointer-events: none;
}

/*
  The buy button on member-only cards becomes a "JOIN TO ACCESS" CTA.
  store.js replaces the button with a styled anchor link.
*/
.product-join-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: auto;
  padding: var(--space-3) var(--space-4);

  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;

  /* Inverted from the buy button — outline style */
  background: transparent;
  color: var(--red);
  border: 1px solid var(--border-red);

  transition: all var(--duration-fast) var(--ease-out);
}

.product-join-btn:hover {
  background: var(--red-tint);
  border-color: var(--red);
}

.product-join-btn .cta-arrow {
  transition: transform var(--duration-fast) var(--ease-out);
}

.product-join-btn:hover .cta-arrow {
  transform: translateX(4px);
}


/* ============================================================================
   14. MEMBERSHIP UPSELL BANNER
   ============================================================================
   A horizontal banner rendered between the hero and the product grid
   (or below the grid — configurable in store.js) when the collection
   has member-only products. It nudges shoppers toward the membership
   tier rather than leaving them confused about locked items.

   Design: full-width panel with corner brackets, red left accent bar,
   short pitch text on the left, CTA on the right. Same vocabulary as
   the connect-cards on the homepage.
   ============================================================================ */

.membership-upsell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-10);   /* space before the product grid */

  background: var(--bg-surface);
  border: 1px solid var(--border-red);
  /* Left accent bar — thicker than a normal border, red */
  border-left: 3px solid var(--red);
}

.membership-upsell:hover .corner {
  background: var(--red);
}

/* Left side: star icon + pitch text */
.upsell-body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex: 1;
}

/* The ★ star icon block */
.upsell-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red-tint);
  border: 1px solid var(--border-red);
  font-size: var(--text-xl);
  color: var(--red);
  /* CSS-only star — no image needed */
  line-height: 1;
}

.upsell-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.upsell-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}

.upsell-headline {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.upsell-desc {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
  max-width: 55ch;
}

/* Right side: CTA button */
.upsell-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--red);
  color: var(--bg-primary);
  border: 1px solid var(--red);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.upsell-cta:hover {
  background: var(--red-bright);
  border-color: var(--red-bright);
}

.upsell-cta .cta-arrow {
  transition: transform var(--duration-fast) var(--ease-out);
}

.upsell-cta:hover .cta-arrow {
  transform: translateX(4px);
}

/* Responsive: stack vertically on tablet */
@media (max-width: 768px) {
  .membership-upsell {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-5);
  }

  .upsell-cta {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================================
   15. RESPONSIVE BREAKPOINTS
   ============================================================================
   The grid itself is already responsive via auto-fill + minmax.
   These breakpoints handle the hero layout and panel sizing.
   ============================================================================ */

/* Tablet — stack the hero text + readout vertically */
@media (max-width: 768px) {
  .collection-hero {
    padding: var(--space-10) 0 var(--space-8);
  }

  .collection-hero-inner {
    flex-direction: column;
    gap: var(--space-6);
  }

  /* On mobile the readout panel goes above the text, full width */
  .collection-readout {
    order: -1;
    width: 100%;
  }

  .readout-panel {
    /* Wider on mobile — acts as a banner stat */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    text-align: left;
  }

  .readout-value {
    /* Smaller on mobile to fit the horizontal layout */
    font-size: var(--text-2xl);
  }
}

/* Small mobile — tighten spacing */
@media (max-width: 480px) {
  .collection-grid-section {
    padding: var(--space-8) 0 var(--space-12);
  }

  .product-body {
    padding: var(--space-4);
  }
}


/* ============================================================================
   STORE LANDING PAGE
   ============================================================================
   Styles for /store/index.html — the store hub page.
   All values use the site design tokens from styles.css.

   TABLE OF CONTENTS
   ─────────────────
   L1.  Landing hero
   L2.  Section divider (logo + fading rule)
   L3.  Featured tools (3-up manual grid)
   L4.  Badge system (member / free / beta / early-access)
   L5.  Collection nav grid (browse-by-category cards)
   L6.  Free carousel (horizontal scroll + arrows)
   L7.  Membership tiers
   ============================================================================ */


/* ── L1. LANDING HERO ────────────────────────────────────────────────────────
   Full-width hero with:
     - Red radial glow emanating from the top centre
     - Red-tinted dot grid overlay
     - Ghost logo watermarks on left and right
     - Staggered fade-up animation on all text elements
     - Stats bar at the bottom
   ─────────────────────────────────────────────────────────────────────────── */

.store-hero {
  position: relative;
  padding: var(--space-24) var(--space-6) var(--space-20);
  text-align: center;
  overflow: hidden;
}

/* Red radial glow — sits behind everything */
.store-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 500px;
  background: radial-gradient(ellipse at top, rgba(230, 57, 70, 0.13) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* Red-tinted dot grid */
.store-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(230, 57, 70, 0.08) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* Ghost logo watermarks — left and right edges */
.store-hero__logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 340px;
  height: 340px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}

.store-hero__logo--left  { left: -60px; }
.store-hero__logo--right { right: -60px; }

.store-hero__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Hero content — above all decorative layers */
.store-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 740px;
  margin: 0 auto;
}

/* Eyebrow: — TEXT — with flanking hairlines */
.store-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin: 0 0 var(--space-5);
}

.store-hero__eyebrow::before,
.store-hero__eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--silver-dim);
  opacity: 0.6;
}

/* Headline */
.store-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 7vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 var(--space-5);
}

.store-hero__headline span { color: var(--red); }

/* Subheadline */
.store-hero__sub {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-body);
 margin: 0 auto var(--space-10); 
 
}

/* Primary CTA */
.store-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--red);
  color: var(--bg-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--red);
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.store-hero__cta:hover {
  background: var(--red-bright);
  transform: translateY(2px);
}

.store-hero__cta svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.store-hero__cta:hover svg { transform: translateX(3px); }

/* Stats bar */
.store-hero__stats {
  display: flex;
  justify-content: center;
  gap: var(--space-10);
  margin-top: var(--space-14);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.store-hero__stat { text-align: center; }

.store-hero__stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: var(--space-1);
}

/* Red dot after every stat value */
.store-hero__stat-value::after {
  content: '.';
  color: var(--red);
}

.store-hero__stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Staggered fade-up animations */
@keyframes store-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.store-hero__eyebrow  { animation: store-fade-up 0.5s ease both 0.10s; }
.store-hero__headline { animation: store-fade-up 0.5s ease both 0.20s; }
.store-hero__sub      { animation: store-fade-up 0.5s ease both 0.32s; }
.store-hero__cta      { animation: store-fade-up 0.5s ease both 0.42s; }
.store-hero__stats    { animation: store-fade-up 0.5s ease both 0.52s; }


/* ── L2. SECTION DIVIDER ─────────────────────────────────────────────────────
   A logo mark on the left with a hairline that fades right.
   Used between every major section on the landing page.
   ─────────────────────────────────────────────────────────────────────────── */

.store-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-6);
  height: 32px;
  max-width: var(--container-max);
  margin: 0 auto;
}

.store-divider__logo {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  opacity: 0.45;
}

.store-divider__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.store-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(200, 200, 200, 0.35) 0%,
    rgba(200, 200, 200, 0.12) 30%,
    transparent 70%
  );
}


/* ── L3. FEATURED TOOLS ──────────────────────────────────────────────────────
   3-column manual card grid. Cards are hand-picked highlights —
   not API-driven. The badge system communicates access at a glance.
   ─────────────────────────────────────────────────────────────────────────── */

.featured-tools {
  padding: var(--space-16) 0 var(--space-16);
}

/* Section header — centered eyebrow + headline + sub */
.section-header {
  text-align: center;
  margin-bottom: var(--space-14);
}

.section-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin: 0 0 var(--space-4);
}

.section-header__eyebrow::before,
.section-header__eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--silver-dim);
  opacity: 0.5;
}

.section-header__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.05;
  margin: 0 0 var(--space-3);
}

.section-header__title span { color: var(--red); }

.section-header__sub {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-body);
  margin: 0 auto;
  max-width: 50ch;
}

/* 3-up grid — max card width matches the collection page grid cards (~300px)
   so panels don't blow up on wide viewports. justify-content: center keeps
   the grid centered when max-width kicks in. */
.featured-grid {
  display: grid;
  /* 3 equal columns, each capped at 300px so panels match collection page size.
     justify-content: center keeps the grid visually centered when the max
     is smaller than the container. */
  grid-template-columns: repeat(3, minmax(0, 300px));
  gap: var(--space-6);
  justify-content: center;
  /* Explicit max-width ensures the grid never over-stretches on wide viewports */
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* Card shell */
.featured-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-normal) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.featured-card:hover {
  border-color: var(--border-red);
  transform: translateY(-3px);
}

.featured-card:hover .corner { background: var(--red); }

/* Card image */
.featured-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 280px;
  overflow: hidden;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
}

.featured-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.featured-card:hover .featured-card__img { transform: scale(1.04); }

/* Scrim removed — badge is now in the card body, not overlaid on the image */

/* Card body */
.featured-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
  gap: var(--space-3);
}

.featured-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.featured-card__desc {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
  flex: 1;
}

/* View button */
.featured-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-top: auto;
  background: transparent;
  border: 1px solid var(--border-red);
  color: var(--red);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out),
              color     var(--duration-fast) var(--ease-out);
}

.featured-card:hover .featured-card__btn {
  background: var(--red);
  color: var(--bg-primary);
}

.featured-card__btn svg {
  width: 13px;
  height: 13px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.featured-card:hover .featured-card__btn svg { transform: translateX(3px); }

/* Secondary "free version" link below main button */
.featured-card__free-note {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--green);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.featured-card__free-note:hover { opacity: 1; }

/* Section footer "view all" link */
.section-footer {
  text-align: center;
  margin-top: var(--space-12);
}

.section-view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.section-view-all:hover { color: var(--silver); }

.section-view-all svg {
  width: 13px;
  height: 13px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.section-view-all:hover svg { transform: translateX(3px); }


/* ── L4. BADGE SYSTEM ────────────────────────────────────────────────────────
   Small pill overlaid on the card image.
   Four types: member (silver), free (green), beta (red), early-access (amber).
   Used on both featured-card and carousel-card images.
   ─────────────────────────────────────────────────────────────────────────── */

.badge {
  /* Inline in card body — no longer an absolute image overlay */
  display: inline-flex;
  align-self: flex-start;   /* don't stretch full width */
  align-items: center;
  gap: 5px;
  padding: 4px var(--space-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Dot indicator before the text */
.badge::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}

/* Member-only — silver/muted */
.badge--member {
  background: rgba(200, 200, 200, 0.12);
  color: var(--silver);
  border: 1px solid rgba(200, 200, 200, 0.22);
}

/* Free — green */
.badge--free {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.25);
}

/* Beta / members-free — red */
.badge--beta {
  background: rgba(230, 57, 70, 0.14);
  color: #ff7070;
  border: 1px solid rgba(230, 57, 70, 0.28);
}

/* Early access — amber */
.badge--early {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.25);
}


/* ── L5. COLLECTION NAV GRID ─────────────────────────────────────────────────
   Browse-by-category cards. One card per major section of the store.
   Links to the appropriate collection page or hub section.
   ─────────────────────────────────────────────────────────────────────────── */

.collection-nav {
  padding: var(--space-16) 0 var(--space-16);
}

.collection-nav__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-10);
  /* Cap width so category cards don't grow enormous on wide monitors.
     980px = 3 × ~313px cards + 2 × 16px gaps. Centered via auto margins. */
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.collection-nav__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform   var(--duration-fast) var(--ease-out);
}

.collection-nav__card:hover {
  border-color: var(--border-red);
  transform: translateY(-2px);
}

.collection-nav__card:hover .corner { background: var(--red); }

.collection-nav__icon {
  font-size: var(--text-2xl);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.collection-nav__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver-dim);
}

.collection-nav__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
}

.collection-nav__desc {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-body);
}

.collection-nav__arrow {
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.1em;
}


/* ── L6. FREE CAROUSEL ───────────────────────────────────────────────────────
   Horizontal scroll container with prev/next arrow buttons.
   Cards are narrower than the featured grid — optimised for scanning.
   ─────────────────────────────────────────────────────────────────────────── */

.free-carousel-section {
  padding: var(--space-16) 0 var(--space-16);
}

/* Carousel wrapper — position context for arrows and fade edges.
   max-width + auto margins center it to match the other page sections.
   The track's side padding still clears the arrow buttons. */
.free-carousel {
  position: relative;
  margin-top: var(--space-10);
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

/* Fade edges hinting at scrollable overflow */
.free-carousel::before,
.free-carousel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 5;
}

.free-carousel::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-primary) 10%, transparent);
}

.free-carousel::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-primary) 10%, transparent);
}

/* Scroll track */
.free-carousel__track {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: var(--space-2) var(--space-12);  /* side padding clears arrows */
  cursor: grab;
}

.free-carousel__track::-webkit-scrollbar { display: none; }
.free-carousel__track.is-dragging { cursor: grabbing; }

/* Carousel card */
.carousel-card {
  position: relative;
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform   var(--duration-fast) var(--ease-out);
}

.carousel-card:hover {
  border-color: var(--border-red);
  transform: translateY(-2px);
}

.carousel-card:hover .corner { background: var(--red); }

.carousel-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
}

.carousel-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.carousel-card:hover .carousel-card__img { transform: scale(1.05); }

.carousel-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-4);
  gap: var(--space-3);
}

.carousel-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0;
}

.carousel-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: auto;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid var(--border-red);
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background var(--duration-fast) var(--ease-out),
              color     var(--duration-fast) var(--ease-out);
}

.carousel-card:hover .carousel-card__btn {
  background: var(--red);
  color: var(--bg-primary);
}

/* Arrow buttons */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--silver);
  cursor: pointer;
  padding: 0;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.carousel-arrow:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--bg-primary);
}

.carousel-arrow:disabled {
  opacity: 0.2;
  pointer-events: none;
}

.carousel-arrow svg { width: 16px; height: 16px; pointer-events: none; }
.carousel-arrow--prev { left: var(--space-2); }
.carousel-arrow--next { right: var(--space-2); }


/* ── L7. MEMBERSHIP TIERS ────────────────────────────────────────────────────
   3-column pricing card grid.
   Featured (Creator) card has a red border and lifts 8px to draw the eye.
   The "Most Popular" badge straddles the top border of the featured card.
   ─────────────────────────────────────────────────────────────────────────── */

.membership {
  padding: var(--space-16) 0 var(--space-16);
}

.membership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-14);
  /* Cap width so tier cards don't stretch too wide on large monitors.
     980px keeps each card under ~310px — readable and balanced. */
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* Base tier card */
.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  padding: var(--space-8) var(--space-7);
  transition: transform var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

.tier-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.tier-card:hover .corner { background: var(--red); }

/* Featured (Creator) tier */
.tier-card--featured {
  border-color: var(--border-red);
  transform: translateY(-8px);
}

.tier-card--featured:hover {
  transform: translateY(-12px);
  border-color: var(--red);
}

.tier-card--featured .corner { background: var(--red); }

/* "Most Popular" badge — straddles the top border */
.tier-popular-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: var(--bg-primary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px var(--space-4);
  white-space: nowrap;
}

/* Tier name */
.tier-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 10px 5px var(--space-2);
  letter-spacing: -0.01em;
}

.tier-desc {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-body);
  margin: 10px 10px var(--space-6);
}

/* Pricing block */
.tier-pricing {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  flex-wrap: wrap;
}

.tier-price-original {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: line-through;
}

.tier-price-current {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.tier-price-period {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.tier-price-annual {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--silver-dim);
  margin-bottom: var(--space-6);
}

/* Join button */
.tier-btn {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
  margin-bottom: var(--space-6);
}

.tier-btn--outline {
  background: transparent;
  border: 1px solid var(--border-red);
  color: var(--red);
}

.tier-btn--outline:hover {
  background: var(--red);
  color: var(--bg-primary);
  transform: translateY(2px);
}

.tier-btn--solid {
  background: var(--red);
  border: 1px solid var(--red);
  color: var(--bg-primary);
}

.tier-btn--solid:hover {
  background: var(--red-bright);
  border-color: var(--red-bright);
  transform: translateY(2px);
}

/* Divider above features */
.tier-divider {
  width: 100%;
  height: 1px;
  background: var(--border-subtle);
  margin-bottom: var(--space-5);
}

/* Feature list */
.tier-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tier-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-body);
}

/* Red checkmark */
.tier-features li::before {
  content: '✓';
  color: var(--red);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xs);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Highlighted feature — top perk per tier */
.tier-features li.highlight {
  color: var(--text-primary);
  font-weight: 500;
}


/* ── LANDING PAGE RESPONSIVE ─────────────────────────────────────────────────*/

@media (max-width: 960px) {
  .featured-grid   { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .membership-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .tier-card--featured { transform: none; }
  .tier-card--featured:hover { transform: translateY(-4px); }
  .collection-nav__grid { grid-template-columns: repeat(2, 1fr); max-width: 640px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 640px) {
  .store-hero__logo { display: none; }
  .store-hero { padding: var(--space-16) var(--space-4) var(--space-14); }
  .store-hero__stats { gap: var(--space-6); }
  .collection-nav__grid { grid-template-columns: 1fr; max-width: 360px; }
}


/* ============================================================================
   MULTI-SECTION HUB PAGE (streamerbot/index.html and similar)
   ============================================================================
   Typography and spacing that matches the homepage editorial voice:
   bracket notation, large left-aligned headlines, generous section breaks.

   TABLE OF CONTENTS
   ─────────────────
   M1.  Hub page hero (breadcrumb, title, desc)
   M2.  Sticky section nav
   M3.  Collection section shell + spacing
   M4.  Section header — homepage bracket style
   M5.  Upsell mount
   M6.  Responsive
   ============================================================================ */


/* ── M1. HUB PAGE HERO ───────────────────────────────────────────────────────*/

.store-hub-hero {
  padding: var(--space-14) 0 var(--space-10);
  border-bottom: 1px solid var(--border-subtle);
}

/* Self-contained inner wrapper — 980px centred column, same as every
   section below. Replaces .container so no cascade fights. */
.store-hub-inner {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--space-6);
}

.store-hub-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin: 0 0 var(--space-3);
}

.store-hub-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.05;
  margin: 0 0 var(--space-4);
}

.store-hub-desc {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-body);
  margin: 0;
  max-width: 60ch;
}


/* ── M2. STICKY SECTION NAV ──────────────────────────────────────────────────
   Sits just below the main site nav (~60px). Backdrop blur keeps it
   readable over any content that scrolls behind it.             */

.store-section-nav {
  position: sticky;
  top: 60px;
  z-index: 100;
  background: #0a0a0a;
  border-bottom: 1px solid var(--border-subtle);
}

.store-section-nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;  /* centre the group of links */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Match the 980px column so the nav aligns with content below */
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.store-section-nav-inner::-webkit-scrollbar { display: none; }

.section-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;  /* centre content within each link */
  gap: var(--space-2);
  flex: 1;                  /* each link takes equal share of the nav width */
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver-dim);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.section-nav-link:hover { color: var(--silver); }

.section-nav-link.is-active {
  color: var(--red);
  border-bottom-color: var(--red);
}

.section-nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0;
  border-radius: 2px;
  transition: all var(--duration-fast) var(--ease-out);
}

.section-nav-link.is-active .section-nav-count {
  background: var(--red-tint, rgba(230,57,70,0.12));
  border-color: var(--border-red);
  color: var(--red-bright, #ff5c6a);
}


/* ── M3. COLLECTION SECTION SHELL ────────────────────────────────────────────
   Each section is a full-width band. A top border rule separates them
   cleanly — heavier than a divider, lighter than a full background change.
   scroll-margin-top pushes the anchor point below the sticky nav.      */

.collection-section {
  padding: var(--space-20) 0 var(--space-16);
  border-top: 1px solid var(--border-subtle);
  /* main nav (60px) + fixed section nav (48px) + small buffer */
  scroll-margin-top: 116px;
}

.collection-section:first-of-type {
  border-top: none;
}

/* Section header: two-column — left text + right readout */
.collection-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
  /* Match the product grid width so header and grid are always in the same column */
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.collection-section-text { flex: 1; }


/* ── M4. SECTION HEADER — HOMEPAGE BRACKET STYLE ─────────────────────────────
   Matches the visual voice from the homepage:
     [ 01 / EARLY ACCESS MEMBERS ONLY ]   ← mono bracket label
     The Lab                               ← large display headline
     Descriptive body copy.                ← DM Sans, comfortable line-height

   The bracket [ ] wrapping is added via ::before / ::after on the eyebrow
   so the HTML stays clean — just a plain text string in the element.    */

.collection-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin: 0 0 var(--space-4);
}

/* Opening bracket */
.collection-section-eyebrow::before {
  content: '[';
  color: var(--red);
  font-weight: 700;
  margin-right: 2px;
}

/* Closing bracket */
.collection-section-eyebrow::after {
  content: ']';
  color: var(--red);
  font-weight: 700;
  margin-left: 2px;
}

/* Red-tinted eyebrows (Early Access, Creator) — the label itself turns red */
.collection-section-eyebrow.accent--red {
  color: var(--red);
}

/* Section title — large, left-aligned display headline */
.collection-section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  line-height: 1.05;
  margin: 0 0 var(--space-4);
}

/* Description — editorial body copy, generous line-height */
.collection-section-desc {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-body);
  margin: 0;
  max-width: 52ch;
}

/* Readout panel (TOOLS / 04 count) — right column of the header */
.collection-section-header .collection-readout {
  flex-shrink: 0;
  padding-top: var(--space-1);
}

.collection-section-header .readout-panel {
  position: relative;
  padding: var(--space-5) var(--space-7);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  text-align: center;
  min-width: 110px;
}

.collection-section-header .readout-panel:hover .corner { background: var(--red); }

.collection-section-header .readout-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin: 0 0 var(--space-2);
}

.collection-section-header .readout-value {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  font-variant-numeric: tabular-nums;
  transition: color var(--duration-normal) var(--ease-out);
}

.collection-section-header .readout-panel.is-loaded .readout-value {
  color: var(--red-bright, #ff5c6a);
}


/* ── M5. UPSELL MOUNT ────────────────────────────────────────────────────────
   Hidden container; store.js renders the banner HTML inside it
   when the section contains member-gated products.               */

.upsell-mount {
  margin-bottom: var(--space-10);
  /* Align with the section header and product grid */
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.upsell-mount[hidden] { display: none; }


/* ── M6. RESPONSIVE ──────────────────────────────────────────────────────────*/

@media (max-width: 768px) {
  .collection-section {
    padding: var(--space-14) 0 var(--space-12);
  }

  .collection-section-header {
    flex-direction: column;
    gap: var(--space-5);
  }

  /* Readout becomes a horizontal banner on mobile */
  .collection-section-header .collection-readout {
    width: 100%;
    order: -1;
  }

  .collection-section-header .readout-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: var(--space-3) var(--space-5);
  }

  .collection-section-header .readout-value {
    font-size: var(--text-2xl);
  }

  .collection-section-title {
    font-size: clamp(var(--text-2xl), 8vw, var(--text-4xl));
  }

  .store-section-nav-inner {
    padding: 0 var(--space-4);
  }
}

/* Nav number badge — small dim counter inside section nav links */
.nav-num {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-dim, rgba(255,255,255,0.25));
  letter-spacing: 0.05em;
}

.section-nav-link.is-active .nav-num {
  color: var(--red);
}


/* ============================================================================
   CART & MODAL (cart.js)
   ============================================================================
   Styles for the cart drawer, product modal, and floating cart button.
   All values use site design tokens from styles.css.

   TABLE OF CONTENTS
   ─────────────────
   C1.  Shared overlay
   C2.  Cart FAB (floating action button)
   C3.  Cart drawer
   C4.  Cart line items
   C5.  Cart footer (subtotal + checkout)
   C6.  Cart empty state
   C7.  Product modal shell
   C8.  Modal image gallery
   C9.  Modal product detail
   C10. Responsive
   ============================================================================ */


/* ── C1. SHARED OVERLAY ──────────────────────────────────────────────────────
   Dark backdrop behind both the cart drawer and the product modal.
   Fades in/out. Clicking it closes whichever panel is open.          */

.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal, 250ms) ease;
}

.cart-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}


/* ── C2. CART FAB ─────────────────────────────────────────────────────────────
   Fixed floating button, bottom-right. Shows item count badge.
   Pulses briefly when an item is added.                               */

.cart-fab {
  position: fixed;
  bottom: var(--space-8, 32px);
  right: var(--space-8, 32px);
  z-index: 910;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--duration-fast) var(--ease-out),
              transform  var(--duration-fast) var(--ease-out);
}

.cart-fab:hover {
  background: var(--red-bright, #ff5c6a);
}

/* Pulse when item added */
.cart-fab.is-added {
  animation: fab-pulse 0.6s ease;
}

@keyframes fab-pulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.cart-fab svg {
  width: 22px;
  height: 22px;
  color: var(--bg-primary);
  pointer-events: none;
}

/* Item count badge */
.cart-fab__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--bg-primary);
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--red);
  pointer-events: none;
}


/* ── C3. CART DRAWER ─────────────────────────────────────────────────────────
   Fixed panel, slides in from the right.
   Divided into header (fixed), scrollable body, and footer (fixed).  */

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  width: 420px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Drawer header */
.cart-drawer__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.cart-drawer__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Item count next to the title */
.cart-drawer__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--red-tint, rgba(230,57,70,0.12));
  border: 1px solid var(--border-red);
  color: var(--red);
  font-size: 10px;
  font-weight: 700;
  border-radius: 2px;
}

.cart-drawer__close {
  background: none;
  border: none;
  color: var(--silver-dim);
  font-size: var(--text-lg);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
  transition: color var(--duration-fast) var(--ease-out);
}

.cart-drawer__close:hover { color: var(--red); }

/* Scrollable middle section */
.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}


/* ── C4. CART LINE ITEMS ─────────────────────────────────────────────────────*/

.cart-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.cart-item:last-child { border-bottom: none; }

/* Product thumbnail */
.cart-item__img {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
}

.cart-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item__no-img {
  width: 100%;
  height: 100%;
  background: var(--bg-elevated);
}

/* Text info */
.cart-item__info {
  flex: 1;
  min-width: 0;
}

.cart-item__name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item__variant {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--silver-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}

/* Quantity controls */
.cart-item__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cart-qty-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--silver);
  font-size: var(--text-base);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  line-height: 1;
  padding: 0;
}

.cart-qty-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

.cart-qty-num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  min-width: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Price and remove — right column */
.cart-item__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  flex-shrink: 0;
}

.cart-item__price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.cart-item__remove {
  background: none;
  border: none;
  color: var(--text-dim, rgba(255,255,255,0.25));
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color var(--duration-fast) var(--ease-out);
}

.cart-item__remove:hover { color: var(--red); }


/* ── C5. CART FOOTER ─────────────────────────────────────────────────────────*/

.cart-drawer__footer {
  flex-shrink: 0;
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cart-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-total-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--silver-dim);
}

.cart-total-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.cart-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  background: var(--red);
  border: 1px solid var(--red);
  color: var(--bg-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.cart-checkout-btn:hover { background: var(--red-bright, #ff5c6a); }

.cart-checkout-btn .cta-arrow {
  transition: transform var(--duration-fast) var(--ease-out);
}

.cart-checkout-btn:hover .cta-arrow { transform: translateX(4px); }

.cart-note {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted, rgba(255,255,255,0.35));
  text-align: center;
  text-transform: uppercase;
  margin: 0;
}


/* ── C6. CART EMPTY STATE ────────────────────────────────────────────────────*/

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-6);
  flex: 1;
}

.cart-empty__icon {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--border-default);
  margin: 0 0 var(--space-4);
  line-height: 1;
}

.cart-empty__headline {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}

.cart-empty__sub {
  font-size: var(--text-sm);
  color: var(--text-body);
  margin: 0;
}


/* ── C7. PRODUCT MODAL SHELL ─────────────────────────────────────────────────
   Centered dialog overlaying the page. Slides up into view.
   Inner layout: image gallery left, product detail right.            */

.store-modal {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-normal, 250ms) ease;
}

.store-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.store-modal__close {
  /* Anchored to the top-right corner of .store-modal__inner (position:relative),
     not the full-viewport .store-modal wrapper — keeps it visually connected
     to the panel so it's easy to find. */
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 10;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--silver-dim);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.store-modal__close:hover {
  color: var(--red);
  border-color: var(--border-red);
}

/* The white card panel */
.store-modal__inner {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  overflow: hidden;
  animation: modal-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes modal-slide-up {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}


/* ── C8. MODAL IMAGE GALLERY ─────────────────────────────────────────────────*/

.store-modal__gallery {
  display: flex;
  flex-direction: column;
  /* Fixed 40% width — enough for a tall portrait image without dominating */
  width: 40%;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-subtle);
  /* Clamp gallery height so the modal never gets taller than the image */
  max-height: 90vh;
  overflow: hidden;
}

.store-modal__main-img-wrap {
  /* Let the 3/4 ratio drive the height — don't use flex:1 here as it
     overrides the ratio on short viewports */
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  flex-shrink: 0;
}

.store-modal__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--duration-fast) var(--ease-out);
}

/* Thumbnail strip at the bottom of the gallery */
.store-modal__thumbs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
}

.store-modal__thumbs::-webkit-scrollbar { display: none; }

.store-modal__thumb {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 2px solid var(--border-subtle);
  background: none;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.store-modal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-modal__thumb.is-active,
.store-modal__thumb:hover {
  border-color: var(--red);
}


/* ── C9. MODAL PRODUCT DETAIL ────────────────────────────────────────────────*/

.store-modal__detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  /* Generous padding so text never butts against panel edges.
     Extra top padding makes space for the close button. */
  padding: var(--space-10) var(--space-8) var(--space-8);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

.store-modal__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.1;
}

.store-modal__price {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border-left: 2px solid var(--border-red);
}

/* Full HTML description from FW — rendered as-is */
.store-modal__desc {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-body);
}

.store-modal__desc p  { margin: 0 0 var(--space-3); }
.store-modal__desc ul,
.store-modal__desc ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.store-modal__desc li { margin-bottom: var(--space-1); }
.store-modal__desc a  { color: var(--red); }

/* ADD TO CART inside the modal — same button class, full width */
.store-modal__add-btn {
  width: 100%;
  margin-top: auto;
  justify-content: center;
}


/* ── C10. RESPONSIVE ─────────────────────────────────────────────────────────*/

/* Modal goes single-column on tablet */
@media (max-width: 720px) {
  .store-modal__inner {
    flex-direction: column;
    max-height: 92vh;
  }

  .store-modal__gallery {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .store-modal__main-img-wrap {
    aspect-ratio: 16 / 9;
  }
}

/* Drawer full-width on mobile */
@media (max-width: 480px) {
  .cart-drawer {
    width: 100vw;
  }

  .cart-fab {
    bottom: var(--space-5);
    right: var(--space-5);
  }
}


/* ── MODAL MEMBER GATE ───────────────────────────────────────────────────────
   Shown in the modal detail panel instead of ADD TO CART when the product
   is member-only. Has two CTAs: Sign In (for existing members) and Join.
   Corner brackets frame it as a "locked" system panel.               */

.modal-member-gate {
  position: relative;
  padding: var(--space-7) var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border-red);
  border-left: 3px solid var(--red);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: auto;
}

.modal-gate__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}

.modal-gate__desc {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}

.modal-gate__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Sign In button uses the standard product-buy-btn (red, full width) */
.modal-gate__actions .product-buy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--bg-primary);
  border: 1px solid var(--red);
  transition: background var(--duration-fast) var(--ease-out);
}

.modal-gate__actions .product-buy-btn:hover {
  background: var(--red-bright, #ff5c6a);
}

/* Secondary "Not a member?" link below */
.modal-gate__join {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-dim);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.modal-gate__join:hover { color: var(--silver); }


/* ── SECTION NAV CART BUTTON ──────────────────────────────────────────────────
   Sits at the right end of the sticky section nav bar, separated from the
   section links by margin-left: auto (pushes it to the far right).
   Matches the nav's mono/uppercase style but uses the red accent to signal
   it's an action rather than a navigation link.                         */

.section-nav-cart {
  /* Push to the far right of the flex container */
  margin-left: auto;
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);

  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver-dim);

  background: transparent;
  border: 1px solid var(--border-default);
  cursor: pointer;
  white-space: nowrap;

  /* Separate it visually from the section links */
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-5);
  margin-left: auto;

  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.section-nav-cart:hover,
.section-nav-cart.has-items {
  color: var(--red);
  border-color: var(--border-red);
}

.section-nav-cart svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Item count badge inside the button */
.section-nav-cart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 2px;
  color: var(--text-muted);
  transition: all var(--duration-fast) var(--ease-out);
}

/* Badge turns red when items are in the cart */
.section-nav-cart.has-items .section-nav-cart__count {
  background: var(--red-tint, rgba(230,57,70,0.12));
  border-color: var(--border-red);
  color: var(--red-bright, #ff5c6a);
}

/* Inline sign-in link inside the member gate description */
.modal-gate__signin-link {
  color: var(--red);
  text-decoration: none;
  font-weight: 700;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.modal-gate__signin-link:hover { opacity: 0.8; }

/* Cart drawer inline message — shown when FW rejects an item */
.cart-msg {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  border-left: 3px solid var(--border-default);
  background: var(--bg-elevated);
  animation: cart-msg-in 0.25s ease both;
}

@keyframes cart-msg-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cart-msg--member {
  border-left-color: var(--red);
  color: var(--silver);
}

/* Cart message clickable link */
.cart-msg__link {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
}
.cart-msg__link:hover { text-decoration: underline; }

/* Modal member checkout hint */
.modal-gate__hint {
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
  margin: calc(var(--space-2) * -1) 0 0;
}

/* ── SITE NAV ELEVATION ──────────────────────────────────────────────────────
   The main site nav is mounted into #nav-mount by main.js. Product cards
   create stacking contexts via transform on hover that can paint above it.
   Force the nav mount and its children to always sit above store content.
   z-index 850 = above cards, below cart drawer (950) and modal (960).   */

#nav-mount {
  position: relative;
  z-index: 850;
}

#nav-mount > * {
  z-index: 850;
}


/* ── MODAL VARIANT UI — COLOR SWATCHES + SIZE BUTTONS ───────────────────────
   Replaces the plain <select> in the product modal with visual selectors.
   Color swatches are filled circles. Size buttons are square mono-font chips.
   Both have active/unavailable states.                                      */

.modal-variant-ui {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.modal-variant-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Label row: "COLOR  Maroon" — label muted, selected value bright */
.modal-variant-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.modal-variant-value {
  color: var(--text-primary);
  letter-spacing: 0.05em;
}

/* ── Color swatches ─────────────────────────────────────────────────────── */
.modal-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.modal-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

.modal-swatch:hover {
  transform: scale(1.15);
}

/* Active state: red ring with a small gap */
.modal-swatch.is-active {
  border-color: var(--red);
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ── Size buttons ───────────────────────────────────────────────────────── */
.modal-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.modal-size-btn {
  min-width: 44px;
  height: 36px;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.modal-size-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.modal-size-btn.is-active {
  background: var(--red);
  border-color: var(--red);
  color: var(--bg-primary);
}

/* Unavailable — strikethrough via a diagonal line using a gradient */
.modal-size-btn.is-unavailable,
.modal-size-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
  color: var(--text-muted);
  position: relative;
  overflow: hidden;
}

.modal-size-btn.is-unavailable::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    var(--border-default) calc(50% - 0.5px),
    var(--border-default) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  pointer-events: none;
}