/* =====================================================================
   BRAND OVERRIDES — Derby City Labs

   Loads LAST, after components.css. Everything here is a deliberate
   departure from the shared template, kept in one file so the template
   underneath stays close to upstream and still merges cleanly.

   No color is named in this file. Anything that needed one got a token
   in tokens.css instead.
   ===================================================================== */

/* -- Brand lockup --------------------------------------------------------
   The approved artwork carries the wordmark inside the image, so the
   template's separate text wordmark is gone. Height is fixed and width is
   auto, so a re-export at a different pixel size cannot shift the header.

   Both variants ship and CSS picks one, rather than swapping src in JS —
   a JS swap flashes the wrong logo on first paint.                       */
.brandmark__logo {
  height: 42px;
  width: auto;
  display: block;
}
.brandmark__logo--light { display: none; }

[data-theme="dark"] .brandmark__logo--dark  { display: none; }
[data-theme="dark"] .brandmark__logo--light { display: block; }

.footer-brand__logo {
  height: 56px;
  margin-bottom: 18px;
}

@media (max-width: 720px) {
  .brandmark__logo { height: 34px; }
}

/* -- Micro-labels in mono ------------------------------------------------
   Eyebrows, stat captions and card tags are instrument output, not prose.
   Setting them in mono is the single change that does most of the work in
   making specifications read as measured rather than marketed.           */
.eyebrow,
.stat__l,
.card__tag,
.cart-note,
.footer-notice__label {
  font-family: var(--font-mono);
  font-weight: 400;
}

.eyebrow {
  font-size: var(--fs-label);
  letter-spacing: var(--track-eyebrow);
}

.stat__l {
  font-size: 10px;
  letter-spacing: .12em;
}

/* Numerals want the display face — they are the proof on the page. */
.stat__n {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 30px;
  letter-spacing: -.01em;
}

/* -- Media on paper ------------------------------------------------------
   The template's hero cluster is three cut-out vials floating on a dark
   ground, with a shadow to match. This brand runs one photograph on warm
   paper, so it needs a radius and a warm, shallow shadow instead.        */
.hero__product,
.split__media img,
.pcard__media img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  filter: none;
  box-shadow: var(--shadow-media);
}

.hero__product--2 {
  width: 100%;
  animation: none;          /* a single photograph should not bob */
}

.hero__stage {
  padding: 0 0 4% 2%;
}

/* The stage glow was built to lift cut-outs off a black ground. On paper
   it muddies the ivory, so it goes. */
.hero__stage::before { display: none; }

/* -- Panels --------------------------------------------------------------
   Soft depth rather than hard borders: on ivory a 1px line at every edge
   reads as a wireframe.                                                   */
.card,
.faq-item {
  box-shadow: var(--shadow-card);
}

.split__media img {
  width: 100%;
}

/* -- Headings ------------------------------------------------------------
   The accented full stop is set in the display face at heading size, so
   it needs no weight of its own. */
.dot {
  font-style: normal;
  color: var(--accent-text);
}


/* Dark surfaces inside the light theme rebind the text copper. A band, a
   panel or a photo bleed is dark whatever the theme is set to, so copper
   text on it needs the light copper, not the deep one. Rebinding the token
   here means every `color: var(--accent-text)` rule is correct on both
   grounds without being written twice. */
.band,
.panel,
.bleed,
.coabar,
.topbar,
.seq,
.site-footer--dark { --accent-text: var(--accent-on-dark); }

/* -- Buttons -------------------------------------------------------------
   Pill buttons suit the softer shape language. */
.btn {
  border-radius: 999px;
  font-family: var(--font);
  letter-spacing: var(--track-btn);
}

.cart-btn,
.icon-btn {
  border-radius: 999px;
}

/* =====================================================================
   PRODUCT PAGES
   Classes used by the pages build.py generates. The shared template has
   no PDP, so these live here rather than in components.css.
   ===================================================================== */

.crumbs {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 34px;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent-text); }
.crumbs span { margin: 0 8px; color: var(--text-faint); }

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

/* One rule, not two. The earlier version was `position: sticky` — a sticky
   element nested inside the sticky gallery, which detaches from the flex
   flow on scroll and lands on top of the thumbnails. The gallery column is
   the only thing that sticks. */
.pdp__media {
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  display: block;
}
.pdp__media img {
  width: 100%;
  max-width: none;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

/* =====================================================================
   PRODUCT PAGE — conversion surface
   ===================================================================== */

.section--tight { padding-top: 26px; }

/* -- Certificate bar ------------------------------------------------------
   Trust before price. In this category documentation IS the product
   difference, so it sits above the fold rather than in a tab.            */
.coabar { background: var(--band); color: var(--band-body); }
.coabar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 0; flex-wrap: wrap;
}
.coabar__l {
  color: var(--band-ink); font-family: var(--font-mono);
  font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase;
}
.coabar__s { font-size: var(--fs-small); }

/* -- Gallery --------------------------------------------------------------
   The gallery is sticky, so it MUST fit the viewport. A 3/4 image in a wide
   column is taller than the screen, which breaks sticky and drops the main
   image straight on top of the thumbnails. Constraining the whole column to
   the viewport and letting the media flex is what keeps them apart. */
.pdp__gallery {
  position: sticky;
  top: 96px;
  /* A DEFINITE height, not max-height. Flex children only shrink against a
     definite container height; with max-height the image keeps its
     intrinsic size and the thumbnails overflow out of the box and end up
     underneath it. */
  height: calc(100vh - 124px);
  min-height: 560px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pdp__gallery .pdp__media {
  flex: 1 1 auto;
  min-height: 0;          /* without this a flex child refuses to shrink */
  overflow: hidden;
}
.pdp__gallery .pdp__media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  aspect-ratio: auto;
}
.pdp__thumbs {
  flex: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.thumb {
  padding: 0; border: 1px solid var(--line-soft); background: var(--bg-alt);
  border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.thumb.is-on { border-color: var(--accent); }
.thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* -- Price ---------------------------------------------------------------- */
.pdp__pricerow { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.pdp__price { margin: 0; }
.pdp__unit {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim);
}

.stock {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 22px;
}
.stock__dot { width: 8px; height: 8px; border-radius: 50%; background: #3F7D52; flex: none; }
.stock__sep { opacity: .5; }

/* -- Volume tiers ---------------------------------------------------------
   The main AOV lever, and a margin fix: the supplier charges $10 shipping
   per ORDER, so a single vial carries all of it. Each tier shows the
   per-vial price so the saving is legible rather than asserted.          */
.tiers { display: grid; gap: 9px; margin-bottom: 18px; }
.tier {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tier:hover { border-color: var(--accent-line); }
.tier.is-on { border-color: var(--accent); background: var(--accent-soft); }
/* The selected tier tints its own ground with copper, which drags copper
   text on it from 5.4:1 down to 4.1:1 — under AA for the 11px saving
   figure, and that figure is the one number on this control doing the
   selling. Go a step deeper on the selected row only, rather than
   darkening every copper word on the site to satisfy one state. */
.tier.is-on .tier__save { color: var(--accent-deep); }
.tier input { position: absolute; opacity: 0; pointer-events: none; }
.tier__main { display: flex; flex-direction: column; gap: 2px; }
.tier__q { font-weight: var(--fw-bold); color: var(--text); }
.tier__ea { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-dim); }
.tier__right { display: flex; align-items: center; gap: 10px; }
.tier__tag {
  padding: 4px 10px; border-radius: 999px;
  background: var(--band); color: var(--band-ink);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .08em; text-transform: uppercase;
}
.tier__save {
  font-family: var(--font-mono); font-size: var(--fs-label);
  color: var(--accent-text); white-space: nowrap;
}

.btn--atc { display: flex; align-items: center; justify-content: center; gap: 12px; }
.btn--atc span { opacity: .75; }

/* -- Free shipping meter --------------------------------------------------- */
.shipbar { margin: 14px 0 20px; }
.shipbar__msg {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .05em; color: var(--text-dim); margin-bottom: 7px;
}
.shipbar__track { height: 3px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.shipbar__track i { display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--t-med) var(--ease); }

.trustrow {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .05em; color: var(--text-dim);
}
.trustrow li { display: flex; align-items: center; gap: 7px; }
.trustrow li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* -- Detail band ----------------------------------------------------------- */
.pdp__detail {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(26px, 4vw, 60px);
  margin-top: 68px; padding-top: 42px;
  border-top: 1px solid var(--line-soft);
  align-items: start;
}

/* =====================================================================
   CONTENT PAGES
   Policy and information pages use the same vocabulary as the homepage —
   banner, two-column body, facts panel — so they read as part of the store
   rather than as a pasted document.
   ===================================================================== */

.bleed--pagehead {
  min-height: clamp(280px, 30vw, 420px);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.bleed--pagehead h1 { font-size: clamp(34px, 4.6vw, 62px); }
.bleed--pagehead .bleed__lede { margin-bottom: 0; }

.contentgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 340px);
  gap: clamp(28px, 4vw, 68px);
  align-items: start;
}

.prose { max-width: 68ch; }
.prose p { margin-bottom: 1.15em; }
.prose > p:first-child {
  font-size: 19px;
  line-height: 1.65;
  color: var(--text);
}
.prose__h {
  font-size: 23px;
  margin: 38px 0 10px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.prose > .prose__h:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.factcard {
  position: sticky;
  top: 104px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 26px 24px;
}
.factcard__list { margin: 14px 0 22px; }
.factcard__list > div {
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.factcard__list > div:last-child { border-bottom: 0; }
.factcard__list dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.factcard__list dd {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text);
}

@media (max-width: 860px) {
  .contentgrid { grid-template-columns: 1fr; }
  .factcard { position: static; }
}

/* =====================================================================
   CATALOG
   ===================================================================== */

.cathead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: 42px;
}
.cathead p { max-width: 52ch; }

/* Hero product. Ten in a four-column grid leaves two orphans on the last
   row; promoting one to a hero leaves nine, which fills three rows. */
.feature {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3vw, 52px);
  align-items: stretch;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.feature__media { display: block; background: var(--bg-alt); overflow: hidden; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.feature__body {
  padding: clamp(24px, 3vw, 46px) clamp(24px, 3vw, 46px) clamp(24px, 3vw, 46px) 0;
  display: flex; flex-direction: column; justify-content: center;
}
.feature__body h3 { font-size: clamp(26px, 2.8vw, 38px); margin: 6px 0 12px; }
.feature__body > p { max-width: 50ch; margin-bottom: 22px; }

.feature__spec {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin: 0 0 26px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 0;
}
.feature__spec dt {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 4px;
}
.feature__spec dd {
  margin: 0; font-family: var(--font-mono); font-size: 13px;
  color: var(--text); overflow-wrap: anywhere;
}

.feature__buy { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.feature__price {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: 34px; color: var(--text); line-height: 1;
  display: flex; align-items: baseline; gap: 10px;
}
.feature__price span {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
}

.pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1040px) {
  .pgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cathead { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; }
  .feature__body { padding: clamp(22px, 4vw, 34px); }
}
@media (max-width: 560px) {
  .pgrid--3 { grid-template-columns: 1fr; }
  .feature__spec { grid-template-columns: 1fr 1fr; }
}

/* -- Two-up: proof imagery beside the handling sequence ------------------- */
.twoup {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
}
.twoup__media { margin: 0; position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.twoup__media img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }
.twoup__media figcaption {
  position: absolute; left: 16px; bottom: 16px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(35,25,15,.62); color: var(--band-ink);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .1em; text-transform: uppercase;
}

.twoup__card {
  background: var(--band);
  color: var(--band-body);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3.4vw, 48px);
  display: flex; flex-direction: column; justify-content: center;
}
.eyebrow--light { color: var(--accent-bright); }

.seq { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.seq li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.seq h3 { color: var(--band-ink); margin-bottom: 6px; }
.seq p { font-size: var(--fs-small); max-width: 46ch; }
.seq__n {
  font-family: var(--font-mono); font-size: var(--fs-label);
  color: var(--accent-bright);
  border: 1px solid var(--band-line);
  border-radius: 999px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
}

.minitiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.minitiles figure { margin: 0; position: relative; }
.minitiles img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); }
.minitiles figcaption {
  position: absolute; left: 10px; bottom: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(35,25,15,.62); color: var(--band-ink);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .08em; text-transform: uppercase;
}

@media (max-width: 860px) {
  .twoup { grid-template-columns: 1fr; }
}

/* -- Sticky add to cart -----------------------------------------------------
   Appears only once the real button has scrolled out of view, so it never
   competes with it.                                                        */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(58,40,22,.10);
  transform: translateY(105%);
  transition: transform var(--t-med) var(--ease);
}
.stickybar.is-on { transform: none; }
.stickybar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.stickybar__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.stickybar__id img { width: 42px; height: 42px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.stickybar__n { font-weight: var(--fw-bold); color: var(--text); }
.stickybar__q { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-dim); }

@media (max-width: 860px) {
  .pdp__gallery { position: static; }
  .pdp__detail { grid-template-columns: 1fr; }
  .stickybar__n { font-size: var(--fs-small); }
}
@media (prefers-reduced-motion: reduce) {
  .stickybar, .shipbar__track i { transition: none; }
}

/* The display face carries the gate headline on its own. Uppercasing a
   display face at this size turns it into a warning notice. */
.gate__content h1 { text-transform: none; }

.pdp__info h1 { margin-bottom: 14px; }

.pdp__lede {
  color: var(--text-body);
  max-width: 54ch;
  margin-bottom: 26px;
}

.pdp__price {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 40px;
  color: var(--text);
  letter-spacing: -.02em;
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.pdp__price span {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.pdp__ship {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  margin: 14px 0 30px;
}

/* -- Specification table -------------------------------------------------
   Mono on both sides, hairline rules. A specification should read like it
   came off an instrument, not out of a brochure. */
.specs {
  margin: 0 0 26px;
  border-top: 1px solid var(--line);
}
.spec {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.spec dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.spec dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* -- Catalog cards ----------------------------------------------------- */
.pcard__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.pcard__qty {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
/* The vial photograph already carries its own paper ground and cast
   shadow, so the well is tinted to match and the image fills it edge to
   edge rather than floating in a padded box. */
.pcard__media {
  display: block;
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.pcard__media img {
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

@media (max-width: 860px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__media { position: static; }
  .spec { grid-template-columns: 1fr; gap: 4px; }
}

/* =====================================================================
   HOMEPAGE SECTIONS
   Full-bleed panels, a dark band, and soft generous radii. No color is
   named here — everything resolves through tokens.css.
   ===================================================================== */

.topbar {
  background: var(--band);
  color: var(--band-body);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
}
.topbar b { color: var(--band-ink); font-weight: 500; }
.topbar__sep { margin: 0 10px; opacity: .45; }

/* -- Buttons ------------------------------------------------------------- */
.btn--paper {
  background: var(--panel);
  color: var(--text);
  border: 1px solid transparent;
}
.btn--paper:hover { background: #fff; }
.btn--sm { padding: 9px 18px; font-size: var(--fs-label); }

.btn--text-light { color: var(--band-ink); }

/* -- Pills --------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.pill--dot::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.pill--light { background: rgba(251,246,236,.12); color: var(--band-ink); }

/* -- Full-bleed panels ---------------------------------------------------
   The image is a real <img> rather than a background-image so it can be
   lazy-loaded, priority-hinted and sized by the browser.                  */
.bleed {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  min-height: clamp(460px, 62vw, 720px);
  display: flex;
  align-items: center;
}

/* The hero carries the most copy of any panel, so it gets real breathing
   room rather than sitting tight against the header and the fold. */
.bleed--hero {
  min-height: clamp(560px, 70vw, 840px);
  padding: clamp(48px, 7vw, 104px) 0;
}
.bleed--hero .bleed__copy { max-width: 30rem; }
.bleed--hero .bleed__copy h1 { margin-bottom: 24px; }
.bleed--hero .bleed__lede { margin-bottom: 34px; }
.bleed--closing { border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: 40px; }
.bleed--panel {
  border-radius: var(--radius-lg);
  margin: 40px auto;
  max-width: calc(var(--max) + 120px);
  min-height: 0;
  padding: clamp(28px, 5vw, 76px) 0;
}

.bleed__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim. The generated scenes are warm and LIGHT, so cream copy laid
   straight onto them fails contrast — this is a legibility fix before it
   is a styling one. Weighted to the side the copy sits on so the
   photograph still reads on the other. */
.bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
              rgba(30,20,12,.82) 0%,
              rgba(30,20,12,.62) 38%,
              rgba(30,20,12,.18) 68%,
              rgba(30,20,12,.06) 100%);
}
.bleed--closing::before {
  background: linear-gradient(260deg,
              rgba(30,20,12,.82) 0%,
              rgba(30,20,12,.60) 38%,
              rgba(30,20,12,.16) 70%,
              rgba(30,20,12,.04) 100%);
}
.bleed--panel::before {
  background: linear-gradient(180deg,
              rgba(30,20,12,.55), rgba(30,20,12,.55));
}
.bleed--hero .bleed__bg,
.bleed--closing .bleed__bg { filter: saturate(1.02); }

/* .bleed is a flex container, so .bleed__in is a flex item and inherits
   min-width: auto — i.e. it refuses to shrink below its min-content and
   overflows instead. Every flex/grid item that holds prose needs this. */
.bleed__in { width: 100%; min-width: 0; }
.bleed__copy { max-width: 33rem; }
.bleed__copy--right { margin-left: auto; }
.bleed__copy h1,
.bleed__copy h2 {
  color: var(--band-ink);
  font-size: var(--fs-hero);
  margin-bottom: 20px;
  text-shadow: 0 2px 30px rgba(35,25,15,.28);
}
.bleed__lede {
  color: var(--band-ink);
  opacity: .88;
  max-width: 44ch;
  margin-bottom: 28px;
  text-shadow: 0 1px 18px rgba(35,25,15,.35);
}
.bleed__legal {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--band-ink);
  opacity: .72;
}

/* -- Centered section heads ------------------------------------------------ */
.centered { text-align: center; max-width: 60rem; margin: 0 auto 64px; }
.centered .btn--text { margin-top: 20px; display: inline-block; }
.eyebrow--centered { justify-content: center; }
.eyebrow--centered::before { display: none; }

.display-lg { font-size: clamp(32px, 4.6vw, 62px); line-height: 1.04; }

/* Let the browser even out the line lengths instead of hard-coding them. */
.balance { text-wrap: balance; }

/* Hard <br> in a display heading is set for ONE width. On a phone those
   breaks land mid-phrase and leave orphans. Neutralise every forced break
   below the tablet breakpoint and let the text balance itself; desktop
   keeps the deliberate two-line compositions.

   NOT `display: none`. In "arrives<br>with" the break IS the whitespace,
   so hiding it welds the words into "arriveswith". Worse, a welded
   heading is a single unbreakable token: "Tested.<br>Documented.<br>
   Dispatched." became one 408px word, which is what pushed the Verified
   panel 137px past a 375px viewport and had `overflow: hidden` silently
   shear the text off. Demote the break to an ordinary inline and put the
   space back with generated content. `display: contents` does NOT work
   here — Chrome still honours the break. */
@media (max-width: 680px) {
  h1 br, h2 br { display: inline; }
  h1 br::before, h2 br::before { content: " "; }
  h1, h2 { text-wrap: balance; }
}

/* -- Steps + collage ------------------------------------------------------ */
.steps {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
.steps__list { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 1px solid var(--line); }
.step { position: relative; padding-bottom: 38px; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: "";
  position: absolute;
  left: -30px; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.step__tag {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--band);
  color: var(--band-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  margin-right: 10px;
  vertical-align: middle;
}
.step h3 { display: inline; vertical-align: middle; }
.step p { margin-top: 12px; max-width: 42ch; }

.collage { display: grid; gap: 16px; }
.collage__main img { width: 100%; border-radius: var(--radius-lg); }
.collage__pair { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: center; }
.collage__pair img { width: 100%; border-radius: var(--radius); }
.collage__round { border-radius: 50% !important; aspect-ratio: 1; object-fit: cover; }

/* -- Dark band ------------------------------------------------------------ */
.band {
  background: var(--band);
  color: var(--band-body);
  border-radius: var(--radius-lg);
  margin: 40px auto;
  max-width: calc(var(--max) + 120px);
  padding: clamp(46px, 6vw, 92px) 0;
}
.band h2, .band h3 { color: var(--band-ink); }
.band__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 32px;
  align-items: start;
  margin-bottom: 54px;
}
.band__head h2 { font-size: clamp(30px, 3.8vw, 52px); }
.band__head p { max-width: 42ch; }

.catgrid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.catcard {
  background: var(--band-card);
  border: 1px solid var(--band-line);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.catcard__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.catcard p { flex: 1; font-size: var(--fs-small); }
.catcard .btn { align-self: flex-start; }
.catcard--gate { border-color: var(--accent-line); }

/* -- Why split ------------------------------------------------------------ */
.split--wide { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; }
.split__lede { max-width: 38ch; margin: 18px 0 28px; }

.whystack { display: grid; gap: 16px; }
.whystack__main img { width: 100%; border-radius: var(--radius-lg); }
.whystack__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.whystack__tiles figure { margin: 0; position: relative; }
.whystack__tiles img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.whystack__tiles figcaption {
  position: absolute;
  left: 12px; bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(35,25,15,.62);
  color: var(--band-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* -- Verified panel ------------------------------------------------------- */
.panel {
  background: rgba(35,25,15,.86);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4.4vw, 62px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 64px);
  color: var(--band-body);
}
.panel h2 { color: var(--band-ink); font-size: clamp(30px, 3.9vw, 54px); margin-bottom: 16px; }
.panel__stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: rgba(251,246,236,.07);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 26px 0 22px;
}
.panel__stat-l { color: var(--band-ink); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; }
.panel__stat-s { font-size: var(--fs-small); }
.panel__stat-n { font-family: var(--font-display); font-size: 40px; color: var(--band-ink); line-height: 1; }
.panel__stat-n span { font-family: var(--font-mono); font-size: var(--fs-label); margin-left: 8px; color: var(--band-body); }

.panel__notes { display: grid; gap: 24px; align-content: center; }
.note__h {
  color: var(--band-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.note p { font-size: var(--fs-small); max-width: 38ch; }
.note { border-left: 1px solid var(--band-line); padding-left: 18px; }

/* -- FAQ cards ------------------------------------------------------------ */
.faqlist { max-width: 54rem; margin: 0 auto; display: grid; gap: 14px; }
.faqcard {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faqcard > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  font-weight: var(--fw-bold);
  color: var(--text);
}
.faqcard > summary::-webkit-details-marker { display: none; }
.faqcard__n {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--accent-text);
  background: var(--accent-soft);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
}
.faqcard__plus {
  margin-left: auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--band);
  color: var(--band-ink);
  display: grid; place-items: center;
  flex: none;
  font-size: 17px; line-height: 1;
  transition: transform var(--t-fast) var(--ease);
}
.faqcard[open] .faqcard__plus { transform: rotate(45deg); }
.faqcard__body { padding: 0 24px 22px 68px; }
.faqcard__body p { font-size: var(--fs-small); }

/* -- Dark footer ----------------------------------------------------------
   No top radius. The closing panel above ends square, so rounding the
   footer let the paper background show through at the corners as a white
   notch. They butt together instead. */
.site-footer--dark {
  background: var(--band);
  color: var(--band-body);
  border-radius: 0;
  padding: clamp(46px, 5vw, 78px) 0 34px;
}
.bleed--closing { margin-bottom: 0; }

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 80px);
  padding-bottom: 46px;
  margin-bottom: 38px;
  border-bottom: 1px solid var(--band-line);
}
.footer-sub h2 {
  color: var(--band-ink);
  font-size: clamp(28px, 3.2vw, 44px);
  margin: 22px 0 12px;
}
.footer-sub p { max-width: 42ch; }

.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-content: start; }

/* -- Newsletter ------------------------------------------------------------ */
.subscribe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 26px;
  max-width: 34rem;
}
.subscribe input {
  background: rgba(251,246,236,.06);
  border: 1px solid var(--band-line);
  border-radius: 999px;
  padding: 14px 20px;
  color: var(--band-ink);
  font-family: var(--font);
  font-size: var(--fs-small);
  min-width: 0;
}
.subscribe input::placeholder { color: rgba(251,246,236,.42); }
.subscribe input:focus-visible {
  outline: none;
  border-color: var(--accent-on-dark);
  background: rgba(251,246,236,.1);
}
.subscribe input[aria-invalid="true"] { border-color: var(--text-error); }
.subscribe__note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: rgba(251,246,236,.5);
}
.subscribe__note.is-ok { color: var(--accent-on-dark); }
.subscribe__note.is-err { color: #E39B8F; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr; }
  .subscribe { grid-template-columns: 1fr; }
}
.site-footer--dark h4 { color: var(--band-ink); }
.site-footer--dark a { color: var(--band-body); }
.site-footer--dark a:hover { color: var(--accent-bright); }
.site-footer--dark .footer-grid { grid-template-columns: 1fr 1fr 1.6fr; gap: 40px; }
.site-footer--dark .footer-bottom {
  border-top: 1px solid var(--band-line);
  margin-top: 40px; padding-top: 22px;
}
/* components.css colors these with the paper ink (rgba(30,24,19,.42)),
   which on the dark footer measured 1.01:1 — the copyright line and the
   policy links were effectively invisible. Same trap as the RUO notice. */
.site-footer--dark .footer-bottom span,
.site-footer--dark .footer-bottom a { color: var(--band-body); }
.site-footer--dark .footer-bottom a:hover { color: var(--accent-on-dark); }

/* The accented full stop is brand punctuation; on dark it needs the
   lighter copper for the same reason the labels do. */
.band .dot, .panel .dot, .twoup__card .dot,
.site-footer--dark .dot, .bleed .dot { color: var(--accent-on-dark); }
.footer-notice--dark {
  background: rgba(251,246,236,.05);
  border: 1px solid var(--band-line);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.footer-notice--dark .footer-notice__label,
.site-footer--dark h4,
.eyebrow--light,
.seq__n,
.panel .note__h,
.catcard__tag { color: var(--accent-on-dark); }
/* components.css sets .footer-notice p to --text-faint, which is a dark ink
   meant for paper. On the dark footer that is near-invisible — and this is
   the regulatory notice, the one block on the page that must be readable. */
.footer-notice--dark p {
  font-size: var(--fs-small);
  color: var(--band-ink);
  opacity: .82;
  line-height: 1.75;
}

/* -- Responsive ----------------------------------------------------------- */
@media (max-width: 1040px) {
  .catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* minmax(0, 1fr), never a bare 1fr. A bare 1fr is minmax(AUTO, 1fr), and
     that auto minimum refuses to shrink below the column's min-content —
     so one long word inflates the whole section instead of wrapping. */
  .band__head { grid-template-columns: minmax(0, 1fr); }
  .panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .split--wide { grid-template-columns: 1fr; }
  .site-footer--dark .footer-grid { grid-template-columns: 1fr; }
  .bleed { min-height: 520px; }
  .bleed__copy--right { margin-left: 0; }
  .faqcard__body { padding-left: 24px; }
}
@media (max-width: 560px) {
  .catgrid { grid-template-columns: 1fr; }
  .whystack__tiles { grid-template-columns: 1fr 1fr; }
  .collage__pair { grid-template-columns: 1fr; }
}

/* -- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero__product { animation: none; }
  .faqcard__plus { transition: none; }
}

/* =====================================================================
   CART PAGE  (/cart/)

   The drawer is a glance; this is the review before paying. So it shows
   what the drawer omits: unit price, the tier the quantity earned, and
   what the next tier would save.

   Both columns use minmax(0, 1fr). A bare 1fr is minmax(auto, 1fr), and
   a long compound name then blows the grid past the viewport instead of
   wrapping, which is what broke the Verified panel at 375px.
   ===================================================================== */
.bleed--short { min-height: 0; }
.bleed--short .bleed__in { padding-block: clamp(46px, 7vw, 86px); }

.cartgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 28vw, 360px);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

.cartlines { min-width: 0; }

.cartline {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cartline:first-child { padding-top: 0; }
.cartline:last-child { border-bottom: 0; }

.cartline__img {
  width: 84px;
  height: 112px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.cartline__mid { min-width: 0; }
.cartline__name {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--text);
  text-decoration: none;
  margin-bottom: 4px;
}
.cartline__name:hover { color: var(--accent-text); }

.cartline__each,
.cartline__tier,
.cartline__next {
  font-size: var(--fs-micro);
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.cartline__each { color: var(--text-dim); margin-bottom: 2px; }
.cartline__tier { color: var(--accent-text); }
/* The nudge to the next tier is information, not a promotion, so it is
   set in the same register as the rest and never colored to shout. */
.cartline__next { color: var(--text-faint); }

.cartline .qty { margin-top: 12px; }

.cartline__right { text-align: right; white-space: nowrap; }
.cartline__price { font-weight: var(--fw-bold); color: var(--text); }
.cartline__price del {
  display: block;
  font-weight: 400;
  color: var(--text-faint);
  font-size: var(--fs-small);
}
.cartline__remove {
  margin-top: 8px;
  background: none;
  border: 0;
  padding: 6px 0;
  font-size: var(--fs-micro);
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  cursor: pointer;
}
.cartline__remove:hover { color: var(--text-error); }

.cartsum {
  position: sticky;
  top: 104px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 26px 24px;
}
.cartsum__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  font-size: var(--fs-small);
  color: var(--text-body);
  border-bottom: 1px solid var(--line-soft);
}
.cartsum .eyebrow + .cartsum__row { border-top: 1px solid var(--line-soft); margin-top: 14px; }
.cartsum__row--off { color: var(--accent-text); }
.cartsum__row--total {
  border-bottom: 0;
  font-size: 19px;
  font-weight: var(--fw-bold);
  color: var(--text);
}
.cartsum__note,
.cartsum__fine {
  font-size: var(--fs-micro);
  color: var(--text-faint);
  margin: 8px 0 14px;
}
.cartsum .btn--block { margin-top: 6px; }
.cartsum__back {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: var(--fs-small);
  color: var(--text-dim);
}

.cartempty { text-align: center; padding: clamp(30px, 6vw, 70px) 0; }
.cartempty h2 { margin-bottom: 10px; }
.cartempty p { color: var(--text-dim); max-width: 44ch; margin: 0 auto 26px; }

.notfound { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 860px) {
  .cartgrid { grid-template-columns: 1fr; }
  .cartsum  { position: static; }
}

@media (max-width: 480px) {
  .cartline { grid-template-columns: 64px minmax(0, 1fr); }
  .cartline__img { width: 64px; height: 86px; }
  /* The price drops under the details rather than fighting them for a
     third column that no longer fits. */
  .cartline__right { grid-column: 2; text-align: left; margin-top: 10px; }
  .cartline__remove { margin-top: 4px; }
}

/* =====================================================================
   CHECKOUT  (/checkout/)  and  CONFIRMATION  (/thank-you/)

   Reuses .cartgrid and .cartsum from the cart page, so the summary a
   customer read on /cart/ is the same object in the same place here.
   Only the form and the payment host are new.
   ===================================================================== */
.coform { min-width: 0; }

.coform__h {
  font-size: 21px;
  margin: 34px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.coform > .coform__h:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.coform__note {
  font-size: var(--fs-small);
  color: var(--text-dim);
  margin: -6px 0 16px;
}

.cfields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.cfield--wide { grid-column: 1 / -1; }

.cfield__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.cfield__input {
  width: 100%;
  padding: 12px 13px;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  /* 16px on the input itself would be larger than the label; the real
     rule that stops iOS zooming on focus is in the MOBILE section. */
}
.cfield__input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.cfield__err {
  min-height: 15px;
  margin-top: 4px;
  font-size: var(--fs-micro);
  color: var(--text-error);
}
.cfield.is-bad .cfield__input { border-color: var(--text-error); }

.copay { margin-bottom: 8px; }

/* The mock provider. Styled as an obvious test surface rather than as a
   card form, because it collects nothing and must not look like it. */
.paymock {
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 18px;
  background: var(--surface);
}
.paymock__head {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 8px;
}
.paymock__note {
  font-size: var(--fs-small);
  color: var(--text-dim);
  margin-bottom: 14px;
}
.paymock__choices { display: grid; gap: 8px; }
.paymock__choice {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  color: var(--text);
  cursor: pointer;
  /* 44px so the radio is a real tap target, not a 13px dot. */
  min-height: 44px;
}

.coform__error {
  margin: 16px 0 10px;
  font-size: var(--fs-small);
  color: var(--text-error);
}
.coform__error:empty { margin: 0; }

.coform__fine {
  margin-top: 14px;
  font-size: var(--fs-micro);
  color: var(--text-faint);
}

/* Per-line rows, shared by the checkout summary and the confirmation. */
.cosum__line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  font-size: var(--fs-small);
  color: var(--text-body);
}
.cosum__qty {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-dim);
}
.cosum__name { min-width: 0; }
.cosum__val { white-space: nowrap; }

/* ---- confirmation ---- */
.testflag {
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  padding: 14px 16px;
  margin-bottom: 26px;
  font-size: var(--fs-small);
  color: var(--text);
}

.ordercard {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 26px 24px;
  max-width: 520px;
  margin-bottom: 26px;
}
.ordercard__ref {
  font-family: var(--font-mono);
  font-size: 24px;
  letter-spacing: .04em;
  color: var(--text);
  margin: 6px 0 12px;
}
.ordercard__meta {
  font-size: var(--fs-small);
  color: var(--text-dim);
  margin-bottom: 14px;
}
.ordercard__lines {
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}

@media (max-width: 560px) {
  .cfields { grid-template-columns: 1fr; }
  /* 16px or larger stops iOS zooming the viewport on focus, which on a
     checkout form reads as the page jumping away from the customer. */
  .cfield__input { font-size: 16px; }
}

/* =====================================================================
   CART AND CHECKOUT — touch targets

   Three links here are correctly sized as TYPE and too small as TARGETS.
   Apple asks for 44px; these measured 29px, 29px and 24px tall at 375px.

   The fix is an invisible ::after centered on each, not padding, because
   each one sits in a tight column where padding would push type around:
   the remove control is stacked under a price, and the product name sits
   directly on top of the unit price.
   ===================================================================== */
@media (max-width: 720px) {
  .cartline__name,
  .cartline__remove,
  .cartsum__back { position: relative; }

  .cartline__name::after,
  .cartline__remove::after,
  .cartsum__back::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
    /* Nothing is painted; this only catches the finger. */
  }
}

/* =====================================================================
   LEGAL DRAFTS

   The banner is loud on purpose. These pages read as finished documents,
   which is exactly the risk: an unreviewed policy that looks settled is
   more dangerous than an obvious stub, because nobody thinks to check it.
   ===================================================================== */
.draftbanner {
  grid-column: 1 / -1;
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  padding: 16px 18px;
  margin-bottom: 26px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text);
}

.assumptions {
  margin: 4px 0 1.15em 1.1em;
  padding: 0;
  list-style: disc;
}
.assumptions li {
  margin-bottom: 8px;
  color: var(--text-body);
  font-size: var(--fs-small);
  line-height: 1.6;
}

/* The banner sits inside .contentgrid beside the facts panel, so on wide
   screens it must span both columns rather than sitting in the first. */
@media (min-width: 861px) {
  .contentgrid > .draftbanner { grid-column: 1 / -1; }
}

/* =====================================================================
   AWAITING LOT VERIFICATION

   A material whose current PepBoss lot has not been attested against a
   laboratory report stays listed and is not orderable.

   Styled as a statement, not an error. "We will not sell you this until
   the lot is verified" is the brand promise working, and the convention
   in this category is a clear unavailable state with a SPECIFIC reason
   rather than "out of stock", which here would also be untrue.
   ===================================================================== */
.pcard__pending {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: center;
  margin-bottom: 8px;
}

.pending {
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.pending__head {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 7px;
}
.pending p {
  font-size: var(--fs-small);
  color: var(--text-body);
  margin: 0;
  line-height: 1.6;
}

.stickybar__pending {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

/* =====================================================================
   MOBILE
   Phone-width corrections, measured at 375x812 and 390x844. Desktop is
   the easy case here: the layouts were composed at 1440 and every one of
   these faults is a desktop assumption that stops holding when the
   column narrows. Three rules this block enforces:

     1. No interactive target smaller than 44px in either dimension.
        44px is the bottom of Apple's and Google's published guidance and
        it is roughly the pad of an adult thumb. A 12px link is not a
        small target, it is a miss.
     2. No prose laid over the weak end of a scrim. A gradient weighted
        to one side works when the copy occupies that side. Full-bleed
        phone copy crosses the whole frame.
     3. Nothing in the first viewport that is not doing work. Phone
        viewports are ~810px tall; 40px of dead padding is 5% of it.
   ===================================================================== */

@media (max-width: 860px) {

  /* The bleed scrims are weighted HORIZONTALLY because on desktop the copy
     sits in the left (or right) 45% of the frame and the photograph keeps
     the other half. On a phone the copy runs the full width, so its far
     end crossed onto the bright, effectively unscrimmed side — measured at
     1.9:1 against cream text, which is unreadable.

     Re-weight vertically instead. That is side-agnostic, and it matches
     how the hero is recomposed below: picture at the top, copy at the
     foot, gradient doing the handover. */
  .bleed::before,
  .bleed--closing::before,
  .bleed--hero::before {
    background: linear-gradient(180deg,
                rgba(30,20,12,.14)  0%,
                rgba(30,20,12,.34) 38%,
                rgba(30,20,12,.72) 66%,
                rgba(30,20,12,.90) 100%);
  }

  .bleed--hero .bleed__copy { max-width: none; }
}

@media (max-width: 600px) {

  /* -- Hero, recomposed for portrait -------------------------------------
     The hero photograph is a 3:2 flat-lay: empty copper on the left, the
     branded vial on the right. Desktop crops the middle and lays the copy
     on the empty half, which is exactly what it was generated for.

     A phone cannot do that. Any 375px-wide window on a 3:2 image is a
     narrow vertical slice, and there is no position for that slice giving
     BOTH a calm area for four lines of copy AND the whole vial — they are
     the same pixels. Stretching the hero taller only makes it worse: at
     86svh `cover` magnifies the source 2.8x, so the label ends up set
     behind the headline, competing with it.

     So stop overlapping them. Photograph first at 4:3, copy beneath on the
     solid band. At 4:3 the crop is wide enough to hold nearly the whole
     flat-lay, so the branded vial is fully in frame for the first time on
     a phone, and the copy sits on a flat color where contrast is a
     constant rather than something to be measured per image. */
  .bleed--hero {
    display: block;
    min-height: 0;
    padding: 0;
    background: var(--band);
  }
  .bleed--hero::before { display: none; }     /* no scrim over a photo that
                                                 nothing is written on */
  .bleed--hero .bleed__bg {
    position: static;
    /* Back to auto from -2. As an absolute backdrop it sat behind the
       section; now it IS content, and a negative z-index would put it
       behind the band color we just painted. */
    z-index: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: 72% center;
  }
  .bleed--hero .bleed__in {
    padding-top: 34px;
    padding-bottom: 42px;
  }
  .bleed--hero .bleed__copy h1 { text-shadow: none; }
}

@media (max-width: 600px) {

  /* -- Header ------------------------------------------------------------
     The Researcher Access pill wrapped to three lines and took 40% of the
     bar, squeezing the logo. The same action sits in the drawer, in the
     hero, and on every catalog card, so the header is the one place it
     can be dropped without losing the route. */
  .site-header .header-actions .btn { display: none; }
  .site-header__inner { gap: 14px; }

  /* -- Tap targets -------------------------------------------------------
     Sizes below are hit areas, not visual changes: the negative margins
     and the transparent ::after let the target grow without moving
     anything on the page. */
  .cart-btn,
  .icon-btn,
  .burger { min-width: 44px; min-height: 44px; }

  .brandmark { padding: 4px 0; }

  /* A text button is an underlined phrase ~15px tall. Extending its own
     padding would push the underline off the text, so grow an invisible
     hit box around it instead. */
  .btn--text { position: relative; }
  .btn--text::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* Inline footer and breadcrumb links sit in a flowing line separated by
     middots, so they cannot become blocks. Pad and pull back instead. */
  .footer-bottom a,
  .crumbs a {
    display: inline-block;
    padding: 14px 4px;
    margin: -14px 0;
  }
  .footer-col a { padding: 13px 0; }   /* 44px exactly is 43.98 after
                                          sub-pixel rounding — clear it */

  /* btn--sm is a desktop density, not a phone one. A pill that reads as
     small still has to be catchable. */
  .btn,
  .btn--sm { min-height: 44px; }

  /* The quantity stepper is 28px square — a desktop density sitting right
     next to Add to Cart, where a mis-tap either does nothing or silently
     changes the order quantity. */
  .qty button { width: 44px; height: 44px; font-size: 16px; }
  .qty span { min-width: 32px; font-size: 13px; }

  /* Cart drawer. Remove is destructive and was a 19px-tall word; the
     recommendation quick-add was 32px. Both get a real hit box — Remove
     keeps its size and grows an invisible one so the line does not
     reflow. */
  .line__remove { position: relative; }
  .line__remove::after {
    content: "";
    position: absolute;
    left: -8px; right: -8px; top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
  .rec__add { width: 44px; height: 44px; }

  /* -- Catalog cards ---------------------------------------------------
     The card title was a 12px anchor and the meta, quantity and price
     rows were dead space, which on a phone is most of the card. Stretch
     the title link over the whole card so the card IS the target, and
     lift Add to Cart back above it so it still takes its own tap. */
  .pcard { position: relative; }
  .pcard__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .pcard .btn,
  .pcard button { position: relative; z-index: 2; }
}