/* ═══════════════════════════════════════════════════════════════════════════
   FootyUp Shop — /shop storefront grid + /shop/:slug product page + the merch
   bits of the kitbag/checkout. Token-only (var(--ink/--bone/--accent/…)) so
   both themes work untouched. Sharp corners, hairline borders, no shadows —
   the house editorial rules.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Storefront intro (page-template pattern) ── */
.shop-intro {
  padding: 96px var(--pad-x) 48px;
  display: flex; flex-direction: column; gap: 20px;
}
.shop-intro .eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim);
}
.shop-intro h1 {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%;
  font-size: clamp(48px, 8vw, 120px); line-height: 0.9; letter-spacing: -0.035em;
  text-transform: uppercase; color: var(--bone); margin: 0;
}
.shop-intro h1 .italic { font-style: italic; color: var(--accent); font-weight: 800; }
.shop-intro .lede {
  max-width: 460px; font-family: 'Manrope', sans-serif; font-size: 15px;
  line-height: 1.65; color: var(--bone-dim);
}

/* ── Grid ── */
.shop-grid {
  /* margin (not padding) — the bone-faint background must hug the cards as
     hairlines only, never paint the page gutters / bottom spacing as a slab. */
  margin: 0 var(--pad-x) 64px;
  /* auto-fit collapses unused tracks: a 2-product catalogue fills the full
     width with 2 half-screen cards instead of leaving empty bone-faint cells. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px;
  background: var(--bone-faint); border: 1px solid var(--bone-faint);
}
.shop-grid--empty {
  display: block; background: transparent; border: 1px solid var(--bone-faint);
  margin: 0 var(--pad-x) 64px; padding: 56px 24px; text-align: center;
}
.shop-grid--empty p { font-family: 'Manrope', sans-serif; font-size: 14px; color: var(--bone-dim); }

.shop-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--ink); padding: 20px;
  transition: background 0.2s ease;
}
.shop-card:hover { background: var(--surface-hover, rgba(244,241,235,0.04)); }
.shop-card.is-out { opacity: 0.55; }
/* 5/4 matches the uploaded product mockups (1402×1122); contain — never crop —
   so a photo of any ratio shows whole, the box only sets the row rhythm. */
.shop-card-media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
.shop-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shop-img--empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-faint, rgba(244,241,235,0.03));
  border: 1px solid var(--bone-faint);
}
.shop-img--empty span {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%;
  font-size: clamp(48px, 6vw, 96px); letter-spacing: -0.04em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px var(--bone-faint); user-select: none;
}
.shop-card:hover .shop-img--empty span { -webkit-text-stroke-color: var(--accent); }
.shop-badge {
  position: absolute; top: 10px; left: 10px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--ink); color: var(--bone); border: 1px solid var(--bone-faint);
  padding: 5px 9px;
}
.shop-card-info { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; }
.shop-card-cat {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-dim);
}
.shop-card-name {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 125%;
  font-size: 18px; letter-spacing: -0.01em; text-transform: uppercase; color: var(--bone);
}
.shop-card-price { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--accent); }

/* ── "How it works" strip ── */
.shop-note { padding: 16px var(--pad-x) 96px; display: flex; flex-direction: column; gap: 28px; }
.shop-note .eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim);
}
.shop-note-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bone-faint); border: 1px solid var(--bone-faint); }
.shop-note-item { background: var(--ink); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.shop-note-item .n {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%;
  font-size: 34px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--accent);
}
.shop-note-item b {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone);
}
.shop-note-item p { font-family: 'Manrope', sans-serif; font-size: 13px; line-height: 1.6; color: var(--bone-dim); margin: 0; }

/* ── Product page ── */
.pdp {
  padding: 72px var(--pad-x) 96px;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px;
  align-items: start;
}
.pdp-media { position: sticky; top: calc(var(--header-h, 73px) + 24px); }
.pdp-hero { aspect-ratio: 5 / 4; border: 1px solid var(--bone-faint); }
.pdp-thumbs { display: flex; gap: 8px; margin-top: 8px; }
.pdp-thumb {
  width: 80px; height: 64px; padding: 0; cursor: pointer;
  border: 1px solid var(--bone-faint); background: transparent; overflow: hidden;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb.on { border-color: var(--accent); }

.pdp-info { display: flex; flex-direction: column; gap: 22px; }
.pdp-info .eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim);
}
.pdp-info h1 {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%;
  font-size: clamp(36px, 4.6vw, 64px); line-height: 0.92; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--bone); margin: 0;
}
.pdp-info h1 .italic { font-style: italic; color: var(--accent); font-weight: 800; }
.pdp-price { font-family: 'JetBrains Mono', monospace; font-size: 22px; color: var(--bone); }
.pdp-desc { font-family: 'Manrope', sans-serif; font-size: 14px; line-height: 1.7; color: var(--bone-dim); margin: 0; max-width: 440px; }

.pdp-lbl {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-dim);
}
.pdp-sizes { display: flex; flex-direction: column; gap: 10px; }
.pdp-size-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-size {
  min-width: 52px; min-height: 40px; padding: 10px 14px; cursor: pointer;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: transparent; color: var(--bone); border: 1px solid var(--bone-faint);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pdp-size:hover:not(:disabled) { border-color: var(--bone); }
.pdp-size.on { border-color: var(--accent); color: var(--accent); }
.pdp-size.out, .pdp-size:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

.pdp-buy { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
.pdp-qty { display: flex; align-items: center; gap: 14px; }
.pdp-qty .qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--bone-faint); }
.pdp-qty .qty-stepper button {
  width: 40px; height: 40px; background: transparent; border: 0; cursor: pointer;
  color: var(--bone); font-size: 16px; font-family: 'JetBrains Mono', monospace;
}
.pdp-qty .qty-stepper button:hover:not(:disabled) { color: var(--accent); }
.pdp-qty .qty-stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.pdp-qty .qty-stepper .n {
  min-width: 34px; text-align: center; font-family: 'JetBrains Mono', monospace;
  font-size: 14px; color: var(--bone);
}
.pdp-low { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.pdp-add { align-self: flex-start; }

.pdp-out { border: 1px solid var(--bone-faint); padding: 18px 20px; }
.pdp-out b {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
.pdp-out p { font-family: 'Manrope', sans-serif; font-size: 13px; line-height: 1.6; color: var(--bone-dim); margin: 6px 0 0; }

.pdp-pickup { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--bone-faint); padding-top: 18px; }
.pdp-pickup p { font-family: 'Manrope', sans-serif; font-size: 13px; line-height: 1.6; color: var(--bone-dim); margin: 0; max-width: 420px; }

.pdp-guide { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--bone-faint); padding-top: 18px; }
.pdp-guide-rows { display: flex; flex-direction: column; }
.pdp-guide-row {
  display: flex; gap: 18px; padding: 8px 0; border-bottom: 1px solid var(--bone-faint);
  font-family: 'Manrope', sans-serif; font-size: 13px; color: var(--bone-dim);
}
.pdp-guide-row b { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--bone); min-width: 44px; }

.pdp-back {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--bone-dim); display: inline-block; padding: 12px 0;
  align-self: flex-start;
}
.pdp-back:hover { color: var(--accent); }

/* ── Kitbag merch line ── */
.fu-cart-merch { display: flex; gap: 12px; align-items: flex-start; }
.fu-cart-thumb {
  width: 60px; height: 48px; flex: none; object-fit: cover;
  border: 1px solid var(--bone-faint);
}
.fu-cart-thumb--empty {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%;
  font-size: 16px; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px var(--bone-faint);
  background: var(--surface-faint, rgba(244,241,235,0.03));
}
/* Mixed game + merch bag renders two stacked pay buttons — both solid accent,
   so without a gap they fuse into one slab. 8px of ink keeps the split legible. */
.fu-cart-foot .pay-btn + .pay-btn { margin-top: 8px; }

/* ── Checkout: pickup selector ── */
.checkout-pickup { margin-bottom: 36px; }
.checkout-pickup .fu-combo { max-width: 440px; margin-top: 14px; }
.checkout-soldout { margin-bottom: 20px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .pdp { grid-template-columns: 1fr; gap: 36px; }
  .pdp-media { position: static; }
  /* Single-column PDP: the placeholder hero is near-full-width, so the
     grid-card monogram clamp leaves the mark lost in a huge box — scale it
     with the viewport here only (photo heroes are unaffected). */
  .pdp-hero.shop-img--empty span { font-size: clamp(64px, 14vw, 140px); }
}
@media (max-width: 640px) {
  .shop-intro { padding-top: 64px; }
  .shop-grid { grid-template-columns: 1fr 1fr; }
  .shop-card { padding: 12px; }
  .shop-card-name { font-size: 14px; }
  .shop-note-grid { grid-template-columns: 1fr; }
  .pdp { padding-top: 48px; }
}