/* shop.css — /shop/ (plan 99 lane W, 2026-09-22).

   THE SITE'S OWN LOOK, NOTHING NEW. Every colour below is one already in
   style.css — #0a0806, #f2ede6, the cream at its various opacities, and
   #d97a6a for a refusal — and the typeface is the page's (Archivo Narrow,
   loaded by index.html). No brand decision is taken here: the wordmark is
   .chrome-text, the buttons are .btn-primary/.btn-ghost, the size chips are the
   waitlist's .wl-chip, and the picture frame is the suede that is already
   behind every feature block on the home page.

   The three .shop-shot blocks are PLACEHOLDERS for Red's Printful mockups
   (plan 99 R2). They are backgrounds, not photographs, on purpose — nobody
   should mistake one for a product shot. */

.shop-body { background: #0a0806; }

/* The closing "back" line on /shop/thanks/ ("Back to the shop · Your orders"):
   a next step after a purchase, not a way out of a page. The topbar's
   "Your orders" link that shared these rules went with plan 108 W1 — the
   thanks page carries the one menu now. */
.shop-back { margin-top: 26px; }
.shop-back a { color: rgba(242, 237, 230, .6); text-decoration: none; border-bottom: 1px solid rgba(242, 237, 230, .25); }
.shop-back a:hover { color: #fff; border-bottom-color: #fff; }

.shop-page {
  min-height: 100vh;
  min-height: 100lvh;
  padding: 84px clamp(18px, 5vw, 56px) 72px;
  max-width: 1100px;
  margin: 0 auto;
}

.shop-cancelled {
  margin: 0 0 24px;
  padding: 12px 14px;
  font-size: .78rem;
  letter-spacing: .04em;
  line-height: 1.5;
  color: rgba(242, 237, 230, .8);
  border-left: 2px solid rgba(242, 237, 230, .35);
  background: rgba(242, 237, 230, .04);
}
.shop-cancelled[hidden] { display: none; }

.shop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: start;
}

/* ---- the picture ------------------------------------------------------------
   Red's Printful mockups (2026-09-22). The frames keep the site's hairline and the
   dark base; the photographs fill them edge to edge. */

.shop-media { min-width: 0; }

.shop-shot {
  position: relative;
  border: 1px solid rgba(242, 237, 230, .12);
  background-color: #0a0806;
  overflow: hidden;
}
.shop-shot.is-main { aspect-ratio: 4 / 5; }
.shop-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.shop-shot.is-thumb { aspect-ratio: 1 / 1; }

.shop-shot-note {
  margin: 12px 0 0;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242, 237, 230, .4);
}

/* ---- the words -------------------------------------------------------------- */

.shop-detail { min-width: 0; }

.shop-eyebrow {
  margin: 0 0 10px;
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(242, 237, 230, .45);
}

.shop-title {
  font-size: clamp(2.1rem, 5.5vw, 3.2rem);
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 16px;
}

/* The launch price and the price that FOLLOWS it. Deliberately not a
   strikethrough and never the word "was": the $130 is what the hoodie costs
   after the drop, which is a statement about the future, not a claim about the
   past (BRAND.md 2026-09-21, the ordinary-price law). */
.shop-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin: 0 0 14px;
}
.shop-price-now {
  font-size: 1.45rem;
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f2ede6;
}
.shop-price-after {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242, 237, 230, .5);
  padding: 4px 8px;
  border: 1px solid rgba(242, 237, 230, .18);
}

.shop-blurb {
  margin: 0 0 22px;
  font-size: .95rem;
  letter-spacing: .06em;
  color: #f2ede6;
}

.shop-facts { list-style: none; margin: 0 0 26px; padding: 0; }
.shop-facts li {
  font-size: .8rem;
  line-height: 1.7;
  letter-spacing: .04em;
  color: rgba(242, 237, 230, .65);
  padding-left: 14px;
  position: relative;
}
.shop-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 5px;
  height: 1px;
  background: rgba(242, 237, 230, .4);
}

/* ---- the buy ---------------------------------------------------------------- */

.shop-form { gap: 18px; max-width: 460px; }
.shop-sizes .wl-lab { font-size: .62rem; }
.shop-ref { margin: 0; }
.shop-ref .wl-summary { padding: 10px 0; }
.shop-ref-note {
  margin: 8px 0 0;
  font-size: .72rem;
  letter-spacing: .04em;
  color: rgba(242, 237, 230, .6);
}
.shop-ref-note[data-kind="bad"] { color: #d97a6a; }
.shop-ref-note[hidden] { display: none; }

/* PLAN 100 R5 (2026-09-22): the same spot, once a referrer is set — a sentence
   and not a field, because there is no way to change one. */
.shop-ref-set {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .04em;
  color: rgba(242, 237, 230, .75);
}
.shop-ref-set[hidden] { display: none; }
.shop-ref[hidden] { display: none; }

.shop-buy { margin-top: 2px; }
/* "The shop opens soon." — the 503 state, honest and unclickable */
.shop-buy:disabled { opacity: .55; cursor: default; }
.shop-buy:disabled:hover { background: #f2ede6; }

.shop-fine {
  margin: 16px 0 0;
  font-size: .72rem;
  line-height: 1.6;
  letter-spacing: .04em;
  color: rgba(242, 237, 230, .5);
}
.shop-fine a { color: rgba(242, 237, 230, .75); text-decoration: none; border-bottom: 1px solid rgba(242, 237, 230, .3); }
.shop-fine a:hover { color: #fff; border-bottom-color: #fff; }

/* ---- /shop/thanks/ ---------------------------------------------------------- */

.shop-thanks { max-width: 560px; margin: 0 auto; }
.shop-thanks .shop-title { margin-bottom: 20px; }
.shop-order {
  border: 1px solid rgba(242, 237, 230, .12);
  padding: 18px 20px;
  margin: 0 0 22px;
}
.shop-order dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.shop-order dt {
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(242, 237, 230, .45);
  align-self: center;
}
.shop-order dd { margin: 0; font-size: .86rem; letter-spacing: .03em; color: #f2ede6; line-height: 1.5; }
.shop-ship { white-space: pre-line; }

.shop-save { border-top: 1px solid rgba(242, 237, 230, .1); padding-top: 18px; margin-top: 4px; }
.shop-save p { margin: 0 0 12px; font-size: .82rem; letter-spacing: .04em; color: rgba(242, 237, 230, .75); }
.shop-save-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- phones ----------------------------------------------------------------- */

@media (max-width: 760px) {
  .shop-grid { grid-template-columns: 1fr; }
  .shop-page { padding: 74px 18px 64px; }
  .shop-media { max-width: 420px; margin: 0 auto; }
}