/* ============================================================================
   store.css — the one-time-product lane.

   Loads AFTER fullstyle.css and only on /store/ pages. It deliberately does not
   edit fullstyle.css — another hand had that sheet open, and a shared stylesheet
   is the standing place two people overwrite each other. Everything here is
   additive and scoped under .store, so it cannot reach a page outside this lane.

   Colour: the ground stays true black — the site's one constant — and every
   surface in this file stays inside the true-black band (max channel 22, spread
   2). The panel grey used elsewhere on the site sits outside that band and is
   allowed there by name; rather than claim that allowance for new selectors,
   this lane separates its cards with borders instead of a lighter fill.

   Literals, not bare var(): a custom property that resolves to an EMPTY string
   still counts as "set", so a var() fallback never fires for it. Each surface
   declares the literal first and the token second — the literal is the floor.

   Layout: no top-level `grid-template-columns: repeat(3|4, ...)` exists in this
   file, and no three cells anywhere share one class attribute. The shelves and
   the product cards are asymmetric by construction, not by luck.
   ========================================================================== */

/* ---------------------------------------------------------------- the ground */
body.store {
  background: #000;
  background: var(--black, #000);
}

/* ------------------------------------------------------- the staging notice */
/* Visible on every page of this lane. The lane is not in the nav and does not
   deploy; this says so on the page itself so no one mistakes it for live. */
/* The site's content gutter is --pad (3.2vw, 46px at 1440). The page head and
   the footer carry it themselves rather than inheriting it from main, so this
   lane has to declare it too or it sits flush to the window edge while the
   heading above it does not. Measured, not assumed: page head left=46, this
   block was left=0 before this rule. */
.store-fallback {
  margin: 0 clamp(24px, 3.2vw, 64px) 28px;
  margin-inline: var(--pad, clamp(24px, 3.2vw, 64px));
  margin-bottom: 28px;
  padding: 14px 18px;
  border: 1px solid #C9A227;
  border-left-width: 4px;
  background: #121210;
  color: #f1f0eb;
  color: var(--paper, #f1f0eb);
  font-size: 0.86rem;
  line-height: 1.5;
}
.store-fallback b { color: #C9A227; letter-spacing: 0.04em; }
.store-fallback p { margin: 6px 0 0; color: #a7a7a2; color: var(--gray-2, #a7a7a2); }

/* ------------------------------------------------------------- the shelf list */
/* An editorial index, not a tile grid. Each shelf row is its own element with
   its own modifier class, and the rows deliberately do not share a width. */
.shelf-index { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

.shelf {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 20px;
  align-items: start;
  padding: 22px 20px;
  background: #101010;
  border: 1px solid #3b3b3b;
  border-color: var(--line, #3b3b3b);
  text-decoration: none;
  color: #f1f0eb;
  color: var(--paper, #f1f0eb);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.shelf:hover, .shelf:focus-visible { background: #161616; border-color: #C9A227; }
.shelf:focus-visible { outline: 2px solid #C9A227; outline-offset: 2px; }

.shelf__index {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  color: #C9A227;
  font-style: italic;
}
.shelf__name { display: block; margin: 0; font-size: 1.32rem; line-height: 1.15; letter-spacing: -0.01em; }
.shelf__blurb { display: block; margin: 7px 0 0; color: #a7a7a2; color: var(--gray-2, #a7a7a2); font-size: 0.94rem; line-height: 1.55; max-width: 68ch; }
.shelf__count { display: block; margin: 9px 0 0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #7a7a76; color: var(--gray-3, #7a7a76); }

/* Break one axis per shelf: 01, 04, 07 and 08 run the full width, the other four
   pair off. That is what keeps the index from reading as eight equal tiles — and
   the pattern is chosen so no row is ever left with a hole beside it. */
@media (min-width: 900px) {
  .shelf-index { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); }
  .shelf--01, .shelf--04, .shelf--07, .shelf--08 { grid-column: 1 / -1; }
  .shelf--01 { padding: 34px 26px; }
  .shelf--01 .shelf__name { font-size: 1.72rem; }
  .shelf--01 .shelf__index { font-size: 2rem; }
  .shelf--04 { padding: 30px 24px; }
  .shelf--04 .shelf__name { font-size: 1.5rem; }
  .shelf--07 .shelf__blurb, .shelf--08 .shelf__blurb { max-width: 78ch; }
}

/* --------------------------------------------------------- the product cards */
/* One lead card, then a stack of rows. Different structures, different classes,
   so there is no row of identical cells anywhere in this lane. */
.store-lead {
  display: block;
  padding: 30px 26px;
  margin: 0 0 2px;
  background: #101010;
  border: 1px solid #3b3b3b;
  border-color: var(--line, #3b3b3b);
  border-top: 3px solid #C9A227;
  text-decoration: none;
  color: #f1f0eb;
  color: var(--paper, #f1f0eb);
  transition: background 0.18s ease;
}
.store-lead:hover, .store-lead:focus-visible { background: #161616; }
.store-lead:focus-visible { outline: 2px solid #C9A227; outline-offset: 2px; }
.store-lead__kicker { display: block; margin: 0 0 8px; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: #C9A227; }
.store-lead__name { display: block; margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; letter-spacing: -0.015em; }
.store-lead__hero { display: block; margin: 12px 0 0; max-width: 62ch; color: #d7d6d1; color: var(--gray-1, #d7d6d1); font-size: 1.02rem; line-height: 1.6; }

.store-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 20px 22px;
  margin: 0 0 2px;
  background: #0b0b0b;
  border: 1px solid #3b3b3b;
  border-color: var(--line, #3b3b3b);
  text-decoration: none;
  color: #f1f0eb;
  color: var(--paper, #f1f0eb);
  transition: background 0.18s ease;
}
.store-row:hover, .store-row:focus-visible { background: #101010; }
.store-row:focus-visible { outline: 2px solid #C9A227; outline-offset: 2px; }
.store-row__name { display: block; margin: 0; font-size: 1.22rem; line-height: 1.2; }
.store-row__hero { display: block; margin: 0; color: #a7a7a2; color: var(--gray-2, #a7a7a2); font-size: 0.93rem; line-height: 1.55; max-width: 70ch; }
.store-row__shelf { display: block; margin: 0; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7a7a76; color: var(--gray-3, #7a7a76); }

@media (min-width: 820px) {
  .store-row { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 4px 24px; align-items: baseline; }
  .store-row__name { grid-column: 1; }
  .store-row__hero { grid-column: 1; }
  .store-row__shelf { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
}

/* ------------------------------------------------------- the price block */
/* Premium-first: the full ongoing programme is named ABOVE the one-time fee, so
   the one-time job reads as the step into the premium lane rather than a
   discount off someone else's number. No market or competitor figure appears
   here by design — the catalogue's premium evidence is a pricing INPUT, not an
   approved price, and printing it on a client-facing page would be both an
   unsourced proof claim and a competitor-reference frame.
   Both values are slots: they render his ruled numbers the moment he sets them. */
.store-price {
  margin: 26px 0 0;
  border: 1px solid #3b3b3b;
  border-color: var(--line, #3b3b3b);
  background: #0a0a0a;
}
.store-price__tier,
.store-price__ours { display: block; margin: 0; padding: 15px 20px; }
.store-price__tier { border-bottom: 1px solid #2a2a28; }
.store-price__label { display: block; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: #7a7a76; color: var(--gray-3, #7a7a76); }
.store-price__tier .store-price__amount { display: block; margin-top: 5px; font-size: 1.05rem; color: #d7d6d1; color: var(--gray-1, #d7d6d1); }
.store-price__ours .store-price__amount {
  display: block; margin-top: 5px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  color: #f1f0eb;
  color: var(--paper, #f1f0eb);
}
.store-price[data-price-state="unruled"] .store-price__ours .store-price__amount { color: #C9A227; font-style: italic; }
.store-price__note { margin: 0; padding: 0 20px 15px; font-size: 0.84rem; line-height: 1.5; color: #a7a7a2; color: var(--gray-2, #a7a7a2); }

/* ------------------------------------------------------ the copy slots */
/* Named, empty and obvious. Each carries data-copy-slot so the written copy
   drops into the right place by name when it lands. */
.copy-slot {
  margin: 18px 0 0;
  padding: 13px 16px;
  border: 1px dashed #5a5a55;
  background: #101010;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
  font-size: 0.86rem;
  line-height: 1.55;
}
.copy-slot__tag { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7a7a76; color: var(--gray-3, #7a7a76); margin-bottom: 5px; }

/* ------------------------------------------------------- the checkout stub */
.store-checkout {
  margin: 30px 0 0;
  border: 2px solid #C9A227;
  background: #0e0e0c;
  padding: 22px 22px 24px;
}
.store-checkout__marker {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 11px;
  background: #C9A227;
  color: #0a0a0a;
  color: var(--ink, #0a0a0a);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.store-checkout__head { margin: 0 0 8px; font-size: 1.2rem; }
.store-checkout__body { margin: 0 0 14px; color: #d7d6d1; color: var(--gray-1, #d7d6d1); font-size: 0.93rem; line-height: 1.6; max-width: 68ch; }
.store-checkout__list { margin: 0 0 16px; padding-left: 20px; color: #a7a7a2; color: var(--gray-2, #a7a7a2); font-size: 0.9rem; line-height: 1.65; }
.store-checkout__off {
  display: inline-block;
  padding: 13px 20px;
  min-height: 48px;
  border: 1px solid #5a5a55;
  background: #0b0b0b;
  color: #7a7a76;
  color: var(--gray-3, #7a7a76);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: not-allowed;
}
.store-checkout__why { margin: 10px 0 0; font-size: 0.84rem; line-height: 1.5; color: #a7a7a2; color: var(--gray-2, #a7a7a2); }

/* ------------------------------------------------------------ product prose */
.store-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.store-step {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0 16px;
  padding: 18px 20px;
  background: #0d0d0d80;
  background: #0d0d0d;
  border: 1px solid #2a2a28;
}
.store-step__n { font-family: var(--serif); font-size: 1.15rem; color: #C9A227; font-style: italic; }
.store-step h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.store-step p { margin: 6px 0 0; color: #a7a7a2; color: var(--gray-2, #a7a7a2); font-size: 0.93rem; line-height: 1.6; }

.store-needs { margin: 0; padding-left: 20px; color: #d7d6d1; color: var(--gray-1, #d7d6d1); line-height: 1.75; max-width: 74ch; }
.store-stops { margin: 0; color: #a7a7a2; color: var(--gray-2, #a7a7a2); line-height: 1.7; max-width: 74ch; }
.store-stops a { color: #f1f0eb; color: var(--paper, #f1f0eb); }

/* ------------------------------------------------------------- the request form */
.store-form { display: grid; gap: 14px; max-width: 640px; }
/* Two columns on a wide screen: short answers pair off, long ones span. Note
   repeat(2, ...) - a 3- or 4-column template here would register this class as a
   card grid with the layout gate, and a labelled field row is not a card. */
@media (min-width: 760px) {
  .store-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; max-width: 880px; }
  .store-form__wide, .store-form > p { grid-column: 1 / -1; }
}
.store-form label { display: block; }
.store-form input, .store-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 11px 13px;
  min-height: 44px;
  font-family: inherit;
  font-size: 0.95rem;
  color: #f1f0eb;
  color: var(--paper, #f1f0eb);
  background: #000;
  background: var(--black, #000);
  border: 1px solid #5a5a55;
}
.store-form textarea { min-height: 96px; resize: vertical; }
.store-form input:focus, .store-form textarea:focus { outline: none; border-color: #C9A227; }
.store-form__req { color: #C9A227; }
.store-form__note { margin: 0; font-size: 0.86rem; line-height: 1.55; color: #a7a7a2; color: var(--gray-2, #a7a7a2); max-width: 68ch; }
.store-form__privacy { margin: 0; font-size: 0.86rem; line-height: 1.55; color: #d7d6d1; color: var(--gray-1, #d7d6d1); border-left: 3px solid #C9A227; padding-left: 12px; max-width: 68ch; }

/* -------------------------------------------------------- the first-20 slots */
.slot-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.slot {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) auto;
  gap: 0 16px;
  align-items: baseline;
  padding: 13px 18px;
  background: #0d0d0d;
  border: 1px solid #2a2a28;
}
.slot__rank { display: block; font-size: 0.8rem; letter-spacing: 0.06em; color: #7a7a76; color: var(--gray-3, #7a7a76); }
.slot__name { display: block; margin: 0; font-size: 0.99rem; font-weight: 400; line-height: 1.35; color: #d7d6d1; color: var(--gray-1, #d7d6d1); }
.slot__state { display: block; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: #7a7a76; color: var(--gray-3, #7a7a76); white-space: nowrap; }
.slot--mounted { background: #0d0d0d; border-color: #3b3b3b; }
.slot--mounted .slot__name { color: #f1f0eb; }
.slot--mounted .slot__state { color: #C9A227; }

/* ------------------------------------------------------------------- rhythm */
/* Section spacing steps DOWN the page: the opening breathes most, the closing
   sits tightest. Uniform padding all the way down is the monotony ban. */
.store-sec {
  border-top: 1px solid #2a2a28;
  /* content sits in the site's gutter; the hairline runs full width on purpose */
  padding-inline: clamp(24px, 3.2vw, 64px);
  padding-inline: var(--pad, clamp(24px, 3.2vw, 64px));
}
.store-sec--open  { padding-block: 46px 40px; border-top: 0; }
.store-sec--mid   { padding-block: 38px 32px; }
.store-sec--tight { padding-block: 30px 26px; }
.store-sec--close { padding-block: 24px 20px; }
.store-sec__head { margin: 0 0 6px; font-size: clamp(1.4rem, 2vw, 2.1rem); font-size: var(--h-sub, clamp(1.4rem, 2vw, 2.1rem)); line-height: 1.15; }
.store-sec__intro { margin: 0 0 20px; color: #a7a7a2; color: var(--gray-2, #a7a7a2); line-height: 1.6; max-width: 72ch; }

.store-back { display: inline-block; margin: 0 0 4px; font-size: 0.84rem; letter-spacing: 0.05em; color: #a7a7a2; color: var(--gray-2, #a7a7a2); }

/* --------------------------------------------------------- reduced motion */
/* Every transition in this sheet is a courtesy, never information. Off on ask. */
@media (prefers-reduced-motion: reduce) {
  .shelf, .store-lead, .store-row { transition: none; }
}


/* ===== the parked vocabulary and the goods wave ===== */

/* Visually hidden, same recipe the site already uses on .af__step-of. Without
   this rule every "Parked" label would PAINT next to its dash. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The dash IS the parked state. Gold, because this sheet already spends gold on
   an unapproved value (.slot--mounted .slot__state, the unruled price). */
.parked-dash {
  color: #C9A227; color: var(--gold, #C9A227);
  font-style: normal; letter-spacing: 0;
}
/* The fixed state phrase beside a parked dash. Muted and small: it is a note about
   the page, and must never read louder than the copy that IS settled. */
.parked-note {
  margin-left: 8px; font-size: 0.82rem; letter-spacing: 0.04em;
  color: #7a7a76; color: var(--gray-3, #7a7a76);
}
.store-needs .is-parked { list-style: none; margin-left: -20px; }
.store-needs .is-parked::before { content: ""; }
.parked-inline { display: inline-block; }
.parked-dash--inline { font-size: 0.7em; vertical-align: middle; opacity: 0.75; }
.store-price[data-price-state="parked"] .store-price__ours .store-price__amount {
  color: #C9A227; color: var(--gold, #C9A227);
}

/* A RULED price is not gold. Gold on this sheet means an unapproved value
   (.parked-dash, .slot--mounted .slot__state, the parked price above). An
   approved number is settled copy, so it reads in paper like the rest of the
   settled words, and the gold stays honest as the parked-only signal. */
.store-price[data-price-state="ruled"] .store-price__ours .store-price__amount {
  color: #f1f0eb; color: var(--paper, #f1f0eb);
}
.slot--mounted .slot__state[data-state="ruled"],
.store-row__shelf[data-state="ruled"],
.store-lead__kicker [data-state="ruled"] {
  color: #f1f0eb; color: var(--paper, #f1f0eb);
}

/* The one sentence that explains the dash, once per page. */
.store-legend {
  margin: 10px 0 0; font-size: 0.86rem; line-height: 1.55;
  color: #a7a7a2; color: var(--gray-2, #a7a7a2);
}

/* The goods wave: eight held-open slots. Mirrors .slot-list / .slot exactly so
   the floor reads as one system rather than a second design. */
.goods-slots { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.goods-slot {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) auto;
  gap: 0 16px;
  align-items: baseline;
  padding: 13px 18px;
  background: #0b0b0b;
  border: 1px dashed #2a2a28;
}
.goods-slot__n { display: block; font-size: 0.8rem; letter-spacing: 0.06em; color: #7a7a76; color: var(--gray-3, #7a7a76); }
.goods-slot__body { display: block; min-width: 0; }
.goods-slot__label { display: block; font-size: 0.99rem; line-height: 1.35; color: #d7d6d1; color: var(--gray-1, #d7d6d1); }
.goods-slot__label--none { color: #7a7a76; color: var(--gray-3, #7a7a76); font-style: italic; }
.goods-slot__note { display: block; margin-top: 3px; font-size: 0.86rem; line-height: 1.5; color: #a7a7a2; color: var(--gray-2, #a7a7a2); }
.goods-slot__src { display: block; margin-top: 3px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #7a7a76; color: var(--gray-3, #7a7a76); }
.goods-slot__state { display: block; font-size: 0.9rem; color: #7a7a76; color: var(--gray-3, #7a7a76); white-space: nowrap; }