/* ==========================================================================
   COMMERCE — /deck/, /gifts/, /wholesale/
   --------------------------------------------------------------------------
   Owns only the conversion surface. Shared primitives (.wrap .section .btn
   .card .card-grid .pill .stat .field .input .notice …) live in
   components.css and are consumed, never redefined here.

   Every color, type size and space value below resolves to a token from
   tokens.css. The handful of local custom properties declared in the next
   block are layout-only constants (grid column floors, art sizing) that have
   no token equivalent; they are centralised here rather than sprinkled
   through the rules.
   ========================================================================== */

.page-deck,
.page-gifts,
.page-wholesale {
  --cx-col-min: 16rem;   /* grid column floor for auto-fit card grids */
  --cx-col-wide: 20rem;  /* grid column floor for text-heavy grids    */
  --cx-art-max: 21rem;   /* max width of the CSS deck rendering       */
  --cx-hairline: 1px;    /* rule weight                               */
}

/* ==========================================================================
   1. DECK RENDERING — pure CSS + inline SVG. No image files exist.
   ========================================================================== */

.buy-deckart {
  display: grid;
  place-items: center;
  padding: var(--s-6) 0;
}

.buy-deckart__stack {
  position: relative;
  width: min(100%, var(--cx-art-max));
  aspect-ratio: var(--card-ratio);
  isolation: isolate;
}

.buy-deckart__card {
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  background: var(--c-surface);
  border: var(--cx-hairline) solid var(--c-border);
  box-shadow: var(--shadow-2);
  transform-origin: 50% 90%;
}

.buy-deckart__card--c { transform: rotate(-9deg) translateX(-4%); z-index: 1; }
.buy-deckart__card--b { transform: rotate(-4deg) translateX(-1%); z-index: 2; }
.buy-deckart__card--a {
  z-index: 3;
  box-shadow: var(--shadow-lift);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--s-3);
  gap: var(--s-2);
}

/* The back design: a lattice of card indices, drawn, not photographed. */
.buy-deckart__back {
  border-radius: var(--r-sm);
  border: var(--cx-hairline) solid color-mix(in srgb, var(--c-accent) 45%, transparent);
  background-color: color-mix(in srgb, var(--c-accent) 7%, var(--c-surface));
  background-image:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--c-accent) 22%, transparent) 0 var(--cx-hairline),
      transparent var(--cx-hairline) var(--s-3)),
    repeating-linear-gradient(-45deg,
      color-mix(in srgb, var(--c-accent) 22%, transparent) 0 var(--cx-hairline),
      transparent var(--cx-hairline) var(--s-3));
  display: grid;
  place-items: center;
}

.buy-deckart__emblem {
  width: 44%;
  max-width: 100%;
  height: auto;
  color: var(--c-accent);
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  border-radius: var(--r-pill);
  padding: var(--s-2);
}

.buy-deckart__index {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  letter-spacing: var(--ls-index);
  color: var(--c-accent);
  line-height: var(--lh-tight);
}

.buy-deckart__index--end {
  justify-self: end;
  transform: rotate(180deg);
}

.buy-deckart__caption {
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--c-text-faint);
  text-align: center;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* ==========================================================================
   2. PRODUCT HERO
   ========================================================================== */

.buy-hero {
  display: grid;
  gap: var(--s-7);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .buy-hero { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); }
  .buy-hero__art { order: 2; }
}

.buy-hero__copy > * + * { margin-top: var(--s-4); }

.buy-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
}

.buy-price__amount {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
}

.buy-price__unit {
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}

/* Availability state. Reads as "reserve", never as "in stock". */
.buy-avail {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  border: var(--cx-hairline) solid color-mix(in srgb, var(--c-egg) 55%, var(--c-border));
  background: color-mix(in srgb, var(--c-egg) 12%, var(--c-bg));
  color: var(--c-text);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: var(--ls-normal);
}

.buy-avail__dot {
  width: var(--s-2);
  height: var(--s-2);
  border-radius: var(--r-pill);
  background: var(--c-egg);
  flex: none;
}

.buy-hero__note {
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  max-width: var(--measure);
}

/* ==========================================================================
   3. TIER LADDER
   ========================================================================== */

/* Two cards, and explicitly two columns rather than auto-fit — with an even
   count auto-fit is harmless, but this grid has had three and four cards in it
   before and will again, and auto-fit stretches whatever is left on the last
   row to double width. Explicit counts never do that. */
.buy-tiers {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  align-items: stretch;
  margin-top: var(--s-6);
}
@media (min-width: 46rem) {
  .buy-tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* flag, name, lede, price, shipping, delivered, points, button. The cards
       opt into these rows with subgrid below, so the price on one card sits on
       exactly the same line as the price on the other even when a lede wraps
       to two lines on one and one line on the other. */
    grid-template-rows: repeat(8, auto);
  }
}

.buy-tier {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--s-6);
  /* see the subgrid rule after this block */
  background: var(--c-surface);
  border: var(--cx-hairline) solid var(--c-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}

/* The signed edition: its own band, not a fifth grid column. */
.buy-tier--wide {
  margin-top: var(--s-4);
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  border-color: color-mix(in srgb, var(--c-egg) 55%, var(--c-border));
  background: color-mix(in srgb, var(--c-egg) 6%, var(--c-surface));
}

@media (min-width: 48rem) {
  .buy-tier--wide { grid-template-columns: 18rem 1fr; gap: var(--s-7); align-items: start; }
}

.buy-tier--wide .buy-tier__flag { color: var(--c-egg); }

.buy-tier--wide .form-inline .btn { flex: 0 0 auto; }

.buy-tier--wide .buy-tier__list {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--cx-col-min), 100%), 1fr));
  display: grid;
}

/* Row-align the two cards against each other. Both have the same eight
   children in the same order, so subgrid makes every row share a baseline.
   A browser without subgrid ignores this and keeps the flex column, which is
   what the cards did before — a graceful loss, not a broken layout. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 46rem) {
    .buy-tier {
      display: grid;
      grid-row: span 8;
      grid-template-rows: subgrid;
    }
  }
}

.buy-tier--featured {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-2);
  /* A tint rather than a fill, so the card lifts off the panel without
     becoming a second surface color to maintain in two themes. */
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--c-accent) 7%, transparent),
      transparent 40%),
    var(--c-surface);
}

/* Both cards carry one, so the accent is reserved for the card that has
   something to shout about; the other names the tier and stays quiet. */
.buy-tier__flag {
  align-self: flex-start;
  font-size: var(--t-xs);
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--c-text-muted);
  font-weight: 700;
}

.buy-tier--featured .buy-tier__flag { color: var(--c-accent); }

.buy-tier__name {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  margin: 0;
}

.buy-tier__lede {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  line-height: var(--lh-body);
}

/* The delivered total, which is the number a reader is actually deciding on.
   Baseline-aligned with its unit so "$26.90 delivered" reads as one phrase
   rather than a figure with a caption under it. */
.buy-tier__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
}

.buy-tier__figure {
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.buy-tier__unit {
  font-size: var(--t-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  /* --c-text-faint measured 4.46:1 against the card here, just under AA, and
     this is small uppercase text so none of the large-text exemptions apply. */
  color: var(--c-text-muted);
}

.buy-tier__breakdown {
  margin: var(--s-3) 0 0;
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}

/* The shipping: the one thing that genuinely differs between the two cards, so
   it gets a band of its own rather than another gray line. The deck price above
   is deliberately the same number on both — it is the same deck. */
.buy-tier__ship {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  margin: var(--s-5) 0 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--c-bg-sunk);
  border: var(--cx-hairline) solid var(--c-border);
}

.buy-tier--featured .buy-tier__ship {
  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--c-accent) 35%, transparent);
}

.buy-tier__ship-lead {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  line-height: 1;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.buy-tier--featured .buy-tier__ship-lead {
  color: color-mix(in srgb, var(--c-accent) 65%, var(--c-text));
}

.buy-tier__ship-rest {
  font-size: var(--t-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.buy-tier__save {
  font-size: var(--t-sm);
  font-weight: 600;
  /* The accent alone measured 4.28:1 on the tinted band in light mode — green
     on a green wash. Pulling it toward the text color darkens it in light and
     lightens it in dark, so one declaration clears AA in both. */
  color: color-mix(in srgb, var(--c-accent) 65%, var(--c-text));
}

.buy-tier__per {
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}

.buy-tier__body {
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  line-height: var(--lh-body);
  margin: 0;
}

.buy-tier__list {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0 0;
  display: grid;
  gap: var(--s-2);
  /* Pack the rows at the top. The subgrid row is as tall as the longest list,
     so without this the shorter card's three items share out the extra height
     and sit further apart than the other card's four — which reads as a
     different kind of list rather than the same list, one item shorter. */
  align-content: start;
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}

.buy-tier__list li {
  padding-left: var(--s-5);
  position: relative;
}

.buy-tier__list li::before {
  content: "\2666";
  position: absolute;
  left: 0;
  color: var(--c-accent);
}

.buy-tier__foot {
  margin-top: auto;
  padding-top: var(--s-6);
  display: grid;
  gap: var(--s-3);
  justify-items: start;
}

.buy-tier__foot .form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
}

.buy-tier__foot .input {
  width: var(--s-9);
  flex: none;
  text-align: center;
}

.buy-tier__foot .form-inline .btn { flex: 1 1 auto; }

.buy-tier__foot .form-inline[hidden] { display: none; }

/* ==========================================================================
   4. INTEREST LIST (localStorage stub — never a cart, never an order)
   ========================================================================== */

.buy-interest {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: var(--cx-hairline) dashed var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-bg-sunk);
}

.buy-interest__title {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  margin: 0 0 var(--s-3);
}

.buy-interest__list {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.buy-interest__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  justify-content: space-between;
  padding-bottom: var(--s-2);
  border-bottom: var(--cx-hairline) solid var(--c-border);
  font-size: var(--t-sm);
  color: var(--c-text);
}

.buy-interest__meta { color: var(--c-text-muted); }

.buy-badge {
  display: inline-block;
  min-width: var(--s-5);
  padding: 0 var(--s-2);
  margin-left: var(--s-2);
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-accent-text);
  font-size: var(--t-xs);
  font-weight: 700;
  text-align: center;
  line-height: var(--s-5);
}

.buy-badge[hidden] { display: none; }

/* ==========================================================================
   5. RESERVE / CAPTURE FORMS
   ========================================================================== */

.buy-reserve {
  padding: var(--s-6);
  border-radius: var(--r-card);
  border: var(--cx-hairline) solid var(--c-border);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  max-width: var(--wrap-narrow);
}

.cx-form > * + * { margin-top: var(--s-4); }

.cx-form__status {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-sm);
  border: var(--cx-hairline) solid var(--c-riffle);
  background: color-mix(in srgb, var(--c-riffle) 14%, var(--c-bg));
  color: var(--c-text);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}

.cx-form__status--error {
  border-color: var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 12%, var(--c-bg));
}

.cx-form__status[hidden] { display: none; }

.cx-stub {
  font-size: var(--t-xs);
  color: var(--c-text-faint);
  line-height: var(--lh-body);
  margin-top: var(--s-3);
}

/* Was --c-accent, which is the brand green: this override made every invalid
   field in a cx-form green again, undoing the rule in components.css. */
.cx-form .input[aria-invalid="true"] { border-color: var(--c-danger); }

/* ==========================================================================
   6. SPECS + "WHY IT COSTS WHAT IT COSTS"
   ========================================================================== */

.buy-specs {
  display: grid;
  gap: 0;
  margin: var(--s-5) 0 0;
  border-top: var(--cx-hairline) solid var(--c-border);
}

.buy-specs__row {
  display: grid;
  gap: var(--s-2) var(--s-5);
  grid-template-columns: 1fr;
  padding: var(--s-4) 0;
  border-bottom: var(--cx-hairline) solid var(--c-border);
}

@media (min-width: 40rem) {
  .buy-specs__row { grid-template-columns: 14rem 1fr; }
}

.buy-specs__key {
  font-size: var(--t-xs);
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin: 0;
}

.buy-specs__val {
  margin: 0;
  color: var(--c-text);
  line-height: var(--lh-body);
}

.buy-why {
  display: grid;
  gap: var(--s-5);
  /* min() guards the classic auto-fit trap: when the track minimum is wider
     than the available space the grid overflows instead of collapsing to one
     column. Below ~360px --cx-col-wide exceeds the content box. */
  grid-template-columns: repeat(auto-fit, minmax(min(var(--cx-col-wide), 100%), 1fr));
  margin-top: var(--s-6);
}

.buy-why__item {
  padding-top: var(--s-4);
  border-top: var(--s-1) solid var(--c-accent);
}

.buy-why__head {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-2);
}

.buy-why__body {
  margin: 0;
  color: var(--c-text-muted);
  line-height: var(--lh-body);
}

/* ==========================================================================
   7. FAQ
   ========================================================================== */

.cx-faq { margin-top: var(--s-5); border-top: var(--cx-hairline) solid var(--c-border); }

.cx-faq__item { border-bottom: var(--cx-hairline) solid var(--c-border); }

.cx-faq__q {
  cursor: pointer;
  padding: var(--s-4) var(--s-6) var(--s-4) 0;
  position: relative;
  font-family: var(--f-display);
  font-size: var(--t-md);
  color: var(--c-text);
  list-style: none;
}

.cx-faq__q::-webkit-details-marker { display: none; }

.cx-faq__q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: var(--s-4);
  color: var(--c-accent);
  font-family: var(--f-mono);
}

.cx-faq__item[open] .cx-faq__q::after { content: "\2212"; }

.cx-faq__q:focus-visible {
  outline: var(--s-1) solid var(--c-focus);
  outline-offset: var(--s-1);
}

.cx-faq__a {
  padding: 0 0 var(--s-5);
  color: var(--c-text-muted);
  line-height: var(--lh-body);
  max-width: var(--measure);
}

.cx-faq__a > * + * { margin-top: var(--s-3); }

/* ==========================================================================
   8. GIFTS
   ========================================================================== */

.gift-occasions {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--cx-col-min), 100%), 1fr));
  margin-top: var(--s-6);
  list-style: none;
  padding: 0;
}

.gift-occasion {
  padding: var(--s-5);
  border: var(--cx-hairline) solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-surface);
}

.gift-occasion__index {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  letter-spacing: var(--ls-index);
  color: var(--c-accent);
  display: block;
  margin-bottom: var(--s-3);
}

.gift-occasion__name {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-2);
}

.gift-occasion__body {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  line-height: var(--lh-body);
}

.gift-objections { margin-top: var(--s-6); display: grid; gap: var(--s-6); }

.gift-objection {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
  padding-top: var(--s-5);
  border-top: var(--cx-hairline) solid var(--c-border);
}

@media (min-width: 48rem) {
  .gift-objection { grid-template-columns: 18rem 1fr; gap: var(--s-6); }
}

.gift-objection__q {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  margin: 0;
  color: var(--c-text);
}

.gift-objection__a {
  margin: 0;
  color: var(--c-text-muted);
  line-height: var(--lh-body);
  max-width: var(--measure);
}

.gift-objection__a + .gift-objection__a { margin-top: var(--s-3); }

/* ==========================================================================
   9. WHOLESALE
   ========================================================================== */

.ws-audience {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--cx-col-min), 100%), 1fr));
  margin-top: var(--s-6);
  list-style: none;
  padding: 0;
}

.ws-audience__item {
  padding: var(--s-5);
  border-radius: var(--r-card);
  border: var(--cx-hairline) solid var(--c-border);
  background: var(--c-surface);
}

.ws-audience__name {
  font-family: var(--f-display);
  font-size: var(--t-md);
  margin: 0 0 var(--s-2);
}

.ws-audience__body {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  line-height: var(--lh-body);
}

.ws-tablewrap {
  margin-top: var(--s-5);
  overflow-x: auto;
  border: var(--cx-hairline) solid var(--c-border);
  border-radius: var(--r-card);
  background: var(--c-surface);
}

.ws-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  min-width: 34rem;
}

.ws-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--s-4) var(--s-5);
  color: var(--c-text-muted);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  border-bottom: var(--cx-hairline) solid var(--c-border);
}

.ws-table th,
.ws-table td {
  padding: var(--s-3) var(--s-5);
  text-align: left;
  border-bottom: var(--cx-hairline) solid var(--c-border);
  color: var(--c-text);
}

.ws-table thead th {
  font-size: var(--t-xs);
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--c-text-faint);
  font-weight: 700;
}

.ws-table tbody tr:last-child th,
.ws-table tbody tr:last-child td { border-bottom: 0; }

.ws-table tbody th { font-weight: 600; }

.ws-terms {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--cx-col-min), 100%), 1fr));
  margin-top: var(--s-6);
}

.ws-term__key {
  font-size: var(--t-xs);
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin: 0 0 var(--s-2);
}

.ws-term__val {
  margin: 0;
  color: var(--c-text);
  line-height: var(--lh-body);
}

.ws-form {
  margin-top: var(--s-6);
  padding: var(--s-6);
  border-radius: var(--r-card);
  border: var(--cx-hairline) solid var(--c-border);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.ws-form__grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--cx-col-min), 100%), 1fr));
}

.ws-form__full { grid-column: 1 / -1; }

.ws-form select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right var(--s-5) center, right var(--s-4) center;
  background-size: var(--s-2) var(--s-2), var(--s-2) var(--s-2);
  background-repeat: no-repeat;
  padding-right: var(--s-7);
}

/* ==========================================================================
   10. SHARED SMALL PARTS
   ========================================================================== */

.cx-crosslink {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--cx-col-wide), 100%), 1fr));
  margin-top: var(--s-6);
}

.cx-crosslink__item {
  display: block;
  padding: var(--s-5);
  border-radius: var(--r-card);
  border: var(--cx-hairline) solid var(--c-border);
  background: var(--c-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.cx-crosslink__item:hover,
.cx-crosslink__item:focus-visible {
  border-color: var(--c-accent);
  transform: translateY(calc(-1 * var(--s-1)));
}

.cx-crosslink__name {
  font-family: var(--f-display);
  font-size: var(--t-md);
  margin: 0 0 var(--s-2);
}

.cx-crosslink__body {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  line-height: var(--lh-body);
}


.cx-note {
  margin-top: var(--s-5);
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  line-height: var(--lh-body);
  max-width: var(--measure);
}

/* The flat product photo and the tucked-in card back that used to sit here
   are gone: /deck/ now shows the same interactive tuck box as the homepage
   (tuckBox() in _blocks.mjs, .tuck in components.css). .buy-deckart__caption
   above is still used, as the box's "drag to turn it over" hint. */

}


/* ==========================================================================
   WHOLESALE BAND — /deck/#wholesale
   Two units, their deck counts and their per-deck price, on the dark band.
   It was a sentence at the foot of the price panel, which is the one place a
   buyer spending $1,291.68 would not look.
   ========================================================================== */

.ws-units {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  margin-block-start: var(--s-6);
}
@media (min-width: 40rem) {
  .ws-units { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}

.ws-unit {
  padding: var(--s-5);
  border: var(--cx-hairline) solid currentColor;
  border-radius: var(--r-card);
  /* On .section--dark the text color is already the inverted one, so a
     currentColor border and a transparent fill need no second set of tokens. */
  background: color-mix(in srgb, currentColor 6%, transparent);
}

/* The same cards on a light panel, where currentColor is body text and a
   hairline of it reads as a heavy outline rather than a card edge. */
.ws-units--light .ws-unit {
  border-color: var(--c-border);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}
.ws-units--light .ws-unit__price { color: var(--c-green-deep, var(--c-green)); }

.ws-unit__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
}
.ws-unit__count {
  margin: var(--s-1) 0 0;
  font-size: var(--t-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  opacity: .75;
}
.ws-unit__price {
  margin: var(--s-4) 0 0;
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  line-height: 1;
}
.ws-unit__price span {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  opacity: .75;
}
.ws-unit__total {
  margin: var(--s-2) 0 0;
  font-size: var(--t-sm);
  opacity: .75;
}


/* ==========================================================================
   WHOLESALE APPLICATION — /wholesale/apply/
   The form is hidden in the markup and revealed by wholesale.js, so a reader
   without JavaScript is shown the email route instead of a file input that
   cannot submit anywhere useful. See the note in src/js/wholesale.js.
   ========================================================================== */

.ws-apply { margin-block-start: var(--s-6); }

.ws-apply__prices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-block: var(--s-5);
  padding-block: var(--s-4);
  border-block: var(--cx-hairline) solid var(--c-border);
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}
.ws-apply__prices strong { color: var(--c-text); font-size: var(--t-base); }

.label__opt { font-weight: 400; color: var(--c-text-faint); }

/* A file input cannot be restyled across browsers without replacing it, and a
   replaced one loses the filename readout and the keyboard behavior. This
   just makes the native control sit on the same baseline as the text inputs. */
.ws-apply__file {
  padding: var(--s-3);
  line-height: var(--lh-snug);
}
.ws-apply__file::file-selector-button {
  margin-inline-end: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border: var(--cx-hairline) solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-bg-sunk);
  color: var(--c-text);
  font: inherit;
  cursor: pointer;
}

.ws-apply__status {
  margin-block: var(--s-5) 0;
  min-block-size: 1.5em;
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}
.ws-apply__status.is-ok { color: var(--c-green); }
.ws-apply__status.is-error { color: var(--c-danger); }

/* Off-screen rather than display:none: a bot reading the DOM still finds it,
   which is the entire point, while nobody sees or tabs into it. */
.ws-apply__trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ws-apply__back { margin-block-start: var(--s-7); font-size: var(--t-sm); }

/* The confirmation that replaces the form. It is not a notice box: at this
   point it IS the page, so it reads as body copy with a button under it. */
.ws-done__text {
  margin-block: var(--s-5) 0;
  font-size: var(--t-lg);
  color: var(--c-text);
}
.ws-done__actions { margin-block: var(--s-6) 0; }
.ws-done__actions[hidden] { display: none; }
.ws-done .help { margin-block-start: var(--s-5); }


/* ==========================================================================
   WHOLESALE HERO — /wholesale/
   Three facts a trade buyer scans for, in a row, between the paragraph and the
   buttons. The band they replace was a single amber status pill wedged against
   the lede with nothing above or below it.
   ========================================================================== */

.ws-hero > * + * { margin-block-start: var(--s-5); }
.ws-hero .lede { max-inline-size: var(--measure); }

.ws-hero__facts {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  margin-block: var(--s-7);
  padding-block: var(--s-6);
  border-block: var(--cx-hairline) solid var(--c-border);
}
@media (min-width: 40rem) {
  .ws-hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
}

.ws-hero__fact { margin: 0; }

.ws-hero__fact dt {
  font-size: var(--t-xs);
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.ws-hero__fact dd {
  margin: var(--s-2) 0 0;
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  line-height: var(--lh-snug);
}

.ws-hero__fact dd strong {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-xl);
  line-height: 1;
  font-weight: 400;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--s-1);
}

.ws-hero__actions { margin-block-start: var(--s-6); }