/* ===========================================================================
   Merch shop — additions only.
   Builds on the brand tokens in assets/styles.css :root and the product-card
   patterns in academy/academy.css. Do not hardcode a colour that :root has.
   =========================================================================== */

/* ── Mockup banner ────────────────────────────────────────────────────────
   Loud on purpose. These products do not exist, and the single worst outcome
   here is someone mistaking this page for a real shop — a client showing it
   to a customer, or a future edit quietly wiring up checkout for a cap nobody
   can actually ship. It should be impossible to look at this page and think
   it is live. */
.mockup-banner {
  background: repeating-linear-gradient(
    135deg,
    rgba(198, 164, 88, .16) 0 14px,
    rgba(198, 164, 88, .07) 14px 28px
  );
  border: 1px solid var(--gold);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  margin: calc(var(--sp-6) * -1) auto var(--sp-7);
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-2);
}
.mockup-banner .tag {
  background: var(--gold);
  color: var(--green-deepest);
  border-color: var(--gold);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}
.mockup-banner p {
  margin: var(--sp-2) 0 0;
  font-size: .92rem;
  color: var(--ink-soft);
  max-width: 68ch;
}
.mockup-banner strong { color: var(--cream); }

/* ── Product grid ─────────────────────────────────────────────────────────── */
.shop-grid { align-items: stretch; }

.merch {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* The illustration panel. Flat line art rather than a photo: there are no
   product photos, and a stock image of someone else's cap would be a lie
   about a product that does not exist. */
.merch-art {
  background:
    radial-gradient(circle at 50% 38%, rgba(198,164,88,.13), transparent 62%),
    linear-gradient(150deg, var(--green-deepest), var(--green-mid));
  border-bottom: 3px solid var(--gold);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  position: relative;
}
.merch-art svg {
  width: 56%;
  height: auto;
  max-height: 70%;
  overflow: visible;
}
/* Shapes inherit these, so the whole set restyles from one place. */
.merch-art svg [data-fill]   { fill: rgba(248,242,227,.10); }
.merch-art svg [data-stroke] {
  fill: none;
  stroke: var(--gold-soft);
  stroke-width: 3.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.merch-art svg [data-accent] {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.merch-badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  background: rgba(14, 28, 20, .72);
  border: 1px solid rgba(232, 205, 143, .3);
  border-radius: 99px;
  padding: .25rem .6rem;
}

.merch-body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-3);
}
/* This site is dark throughout — .card is translucent glass over a dark
   background, and .bg-ivory / .bg-cream are near-transparent tints, not light
   panels. Text here must be cream/ink, never the dark greens, or it vanishes
   into the card. */
.merch-body h3 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.2;
}
/* Pushes price and button to the bottom so cards in a row line up however
   long the description runs. */
.merch-body p { margin: 0; flex: 1; font-size: .92rem; color: var(--ink-soft); }

.merch-price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold-bright);
  line-height: 1;
}
.merch-price .placeholder-note {
  display: block;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: .35rem;
}

/* ── Size selector ───────────────────────────────────────────────────────── */
.merch-size {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: .8rem;
  color: var(--ink-faint);
}
.merch-size select {
  flex: 1;
  font: inherit;
  font-size: .84rem;
  padding: .5rem .6rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--glass-bg-strong);
  color: var(--ink);
}
.merch-size select:disabled {
  color: var(--ink-faint);
  cursor: not-allowed;
  opacity: .75;
}
/* The dropdown list itself is painted by the OS, not the page, so its options
   need an explicit dark background or they render as black-on-white. */
.merch-size select option {
  background: var(--green-deep);
  color: var(--ink);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* A dead button must not look clickable. On a mockup that is the difference
   between "coming soon" and "this site is broken". */
.buy:disabled,
.buy:disabled:hover {
  background: var(--glass-bg-strong);
  border: 1px solid var(--border-soft);
  color: var(--ink-faint);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

@media (max-width: 900px) {
  .mockup-banner { margin-top: var(--sp-5); }
}