/* =====================================================================
   components.css  —  reusable UI pieces
   Grouped by component. Order-builder-specific pieces are at the bottom.
   ===================================================================== */

/* --- Panels (the translucent "card" surface) -------------------------- */
.panel { background: var(--panel-fill); border-radius: var(--radius-lg); padding: 26px; margin-bottom: var(--space-3); }
@media (min-width: 760px) { .panel { padding: 36px; } }
.panel--dark { background: var(--color-ink); color: #fff; }
.panel--dark p { color: #F3E7D2; }

.panel-label { font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--color-ink-2); margin: 0 0 18px; }

/* --- Text helpers ----------------------------------------------------- */
.lead { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px,2.7vw,24px); color: var(--color-ink); line-height: 1.5; }
.display { font-family: var(--font-serif); font-weight: 600; font-size: clamp(30px,6vw,54px); line-height: 1.07; letter-spacing: -.02em; margin: 0 0 var(--space-4); font-variation-settings: 'SOFT' 30, 'WONK' 1; }
.h3 { font-size: clamp(19px,3vw,24px); margin: var(--space-5) 0 var(--space-1); }
.h3:first-child { margin-top: 0; }
.body { font-size: 15.5px; color: var(--color-ink-2); }
.note { font-family: var(--font-serif); font-size: 13.5px; font-style: italic; color: var(--color-ink-2); }
.fine-print { font-family: var(--font-serif); font-size: 11.5px; font-style: italic; color: var(--color-ink-2); line-height: 1.5; padding-top: var(--space-4); }

/* --- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--color-ink); color: var(--color-bg);
  font-weight: 700; font-size: 15.5px; text-decoration: none;
  padding: 16px 30px; border: 0; border-radius: var(--radius-pill);
  margin: 12px 14px 6px 0; transition: transform .2s ease, box-shadow .2s ease, background .2s;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -16px rgba(58,42,28,.65); }
.btn:active { transform: translateY(0); }
.btn__arrow { width: 18px; height: 18px; transition: transform .2s; }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--soft { background: var(--tint); color: var(--color-ink); }
.btn--soft:hover { background: rgba(58,42,28,.15); }
.btn--block { display: flex; width: 100%; justify-content: center; margin-right: 0; }

/* --- Icon tile (used in feature grids) -------------------------------- */
.icon { width: 46px; height: 46px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--color-ink); flex: 0 0 auto;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, color .3s; }
.icon svg { width: 24px; height: 24px; }

/* --- Feature grid ----------------------------------------------------- */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
.feature { display: flex; gap: 15px; align-items: flex-start; background: rgba(58,42,28,.045); border-radius: var(--radius); padding: 20px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.feature:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(58,42,28,.6); background: rgba(255,246,221,.7); }
.feature:hover .icon { background: var(--color-ink); color: var(--color-bg); transform: rotate(-6deg) scale(1.06); }
.feature h4 { margin: 0 0 4px; font-size: 18px; }
.feature p { font-size: 14px; margin: 0; }

/* --- List row (icon + heading + text, hover-nudge) -------------------- */
.list-row { display: flex; gap: 15px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--hairline); transition: padding-left .2s; }
.list-row:last-child { border-bottom: 0; }
.list-row:hover { padding-left: 6px; }
.list-row:hover .icon { background: var(--color-ink); color: var(--color-bg); }
.list-row h4 { margin: 0 0 2px; font-size: 18px; }
.list-row p { font-size: 14px; margin: 0; color: var(--color-ink-2); }

/* --- Stat row (label left / value right) ------------------------------ */
.stat-row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hairline); font-size: 15.5px; }
.stat-row:last-child { border-bottom: 0; }
.stat-row b { font-family: var(--font-mono); white-space: nowrap; font-weight: 700; }

/* --- Flavor list ------------------------------------------------------ */
.flavor { display: flex; align-items: center; font-size: 16px; font-weight: 600; padding: 11px 0; border-bottom: 1px solid var(--hairline); transition: padding-left .2s; }
.flavor:last-child { border-bottom: 0; }
.flavor:hover { padding-left: 6px; }
.flavor__dot { width: 14px; height: 14px; border-radius: 50%; margin-right: 13px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); }
.flavor__tag { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-2); }

/* --- Numbered steps --------------------------------------------------- */
.steps { }
.step { display: flex; gap: 16px; padding: 14px 0; align-items: flex-start; }
.step__num { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--color-ink); color: var(--color-bg);
  font-family: var(--font-serif); font-weight: 600; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.step__body { font-size: 15.5px; color: var(--color-ink-2); padding-top: 8px; }
.step__body b { color: var(--color-ink); }

/* --- Link rows (index "explore" list) --------------------------------- */
.link-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 0;
  border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--color-ink); transition: padding-left .2s; }
.link-row:last-child { border-bottom: 0; }
.link-row:hover { padding-left: 8px; }
.link-row__title { font-family: var(--font-serif); font-weight: 600; font-size: 19px; display: block; }
.link-row__sub { font-size: 13px; font-style: italic; color: var(--color-ink-2); }
.link-row__arrow { width: 22px; height: 22px; color: var(--color-ink-2); flex: 0 0 auto; transition: transform .2s; }
.link-row:hover .link-row__arrow { transform: translateX(5px); color: var(--color-ink); }

/* --- Accordion (FAQ) -------------------------------------------------- */
.accordion__item { border-bottom: 1px solid var(--hairline); }
.accordion__item:first-child { border-top: 1px solid var(--hairline); }
.accordion__trigger {
  width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(17px,2.4vw,21px); color: var(--color-ink);
  padding: 22px 44px 22px 0; position: relative; line-height: 1.3;
}
.accordion__trigger:hover { color: #000; }
.accordion__icon { position: absolute; right: 2px; top: 26px; width: 22px; height: 22px; color: var(--color-ink-2); transition: transform .3s; }
.accordion__item.is-open .accordion__icon { transform: rotate(45deg); color: var(--color-ink); }
.accordion__panel { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.2,.8,.2,1); }
.accordion__panel p { font-size: 15px; padding: 0 44px 22px 0; margin: 0; color: var(--color-ink-2); }

/* --- Forms ------------------------------------------------------------ */
.field { margin-bottom: var(--space-3); }
.label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--color-ink-2); margin-bottom: 8px; }
.input, .select, .textarea {
  width: 100%; padding: 15px 16px; border: 0; border-radius: var(--radius-sm);
  background: var(--tint); font-family: var(--font-sans); font-size: 17px; color: var(--color-ink); outline: none;
  transition: box-shadow .2s;
}
.input:focus, .select:focus, .textarea:focus { box-shadow: inset 0 0 0 2px var(--color-ink); }
.textarea { min-height: 96px; resize: vertical; }
.select { appearance: none; }

/* --- Quote / reviews -------------------------------------------------- */
.stars { color: var(--color-ink); font-size: 18px; letter-spacing: 3px; }
.quote { font-family: var(--font-serif); font-size: clamp(18px,2.6vw,23px); font-style: italic; color: var(--color-ink); margin: 8px 0 4px; line-height: 1.45; }
.byline { font-size: 13px; font-weight: 600; color: var(--color-ink-2); margin-bottom: var(--space-5); }

/* --- Referral code display ------------------------------------------- */
.code { font-family: var(--font-mono); font-size: clamp(32px,8vw,48px); font-weight: 700; letter-spacing: .05em; margin: 14px 0 4px; color: var(--color-ink); }

/* --- Comparison table (compare.html) --------------------------------- */
.compare__row { display: grid; grid-template-columns: 1.15fr .9fr .9fr; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--hairline); align-items: center; }
.compare__row:last-child { border-bottom: 0; }
.compare__row span { font-size: 13.5px; color: var(--color-ink-2); }
.compare__row i { font-style: normal; font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; }
.compare__head b { font-family: var(--font-serif); font-weight: 600; font-size: clamp(16px,3vw,20px); }

/* --- Bulk-shop link --------------------------------------------------- */
.shop-link { display: inline-flex; align-items: center; gap: 8px; background: var(--color-ink); color: var(--color-bg);
  font-weight: 700; font-size: 13.5px; text-decoration: none; padding: 12px 22px; border-radius: var(--radius-pill);
  margin-top: 14px; transition: transform .2s, box-shadow .2s; }
.shop-link:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(58,42,28,.65); }
.shop-link svg { width: 16px; height: 16px; }

/* --- FDA disclaimer --------------------------------------------------- */
.disclaimer { font-family: var(--font-serif); font-size: 11.5px; font-style: italic; color: var(--color-ink-2); line-height: 1.5; padding-top: var(--space-4); }

/* --- How-to-drink dosing card ---------------------------------------- */
/* Solid cream on the yellow page + a full ink ring, so it reads as the one
   block on the page you are meant to actually read. Calm, not a warning. */
.dose-card {
  background: var(--color-cream); border-radius: var(--radius-lg);
  padding: 22px; margin-bottom: var(--space-3);
  box-shadow: inset 0 0 0 2px var(--color-ink);
}
.dose-card__label { font-size: 10.5px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--color-ink); margin: 0 0 14px; }
.dose-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 9px; margin: 0 0 16px; padding: 0; list-style: none; }
.dose-figs li { background: var(--tint); border-radius: var(--radius-sm);
  padding: 13px 7px 11px; text-align: center; }
.dose-figs b { display: block; font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(16px, 4.4vw, 20px); line-height: 1.15; color: var(--color-ink); }
.dose-figs span { display: block; margin-top: 5px; font-size: 12px; line-height: 1.3;
  color: var(--color-ink-2); }
.dose-card p { font-size: 15.5px; line-height: 1.55; color: var(--color-ink); margin: 0 0 10px; }
.dose-card p:last-child { margin-bottom: 0; }
.dose-card__max b { font-weight: 800; }
.dose-card__check { padding-top: 13px; border-top: 1px solid var(--hairline);
  font-size: 13.5px !important; color: var(--color-ink-2) !important; line-height: 1.5; }
.dose-card__check a { color: var(--color-ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; }
/* above-the-fold strip — the four quantities before anything else */
.dose-strip { background: var(--color-cream); border-radius: var(--radius);
  box-shadow: inset 0 0 0 2px var(--color-ink); padding: 12px 15px; margin: 0 0 var(--space-3); }
.dose-strip__line { margin: 0; font-size: 15px; line-height: 1.45; color: var(--color-ink); }
.dose-strip__line b { font-weight: 800; }
.dose-strip__sub { margin: 5px 0 0; font-size: 12px; line-height: 1.38; color: var(--color-ink-2); }
.dose-strip__sub a { color: var(--color-ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; }
/* compact variant — used next to the order total */
.dose-note { background: var(--tint); border-radius: var(--radius-sm);
  padding: 13px 15px; margin: 0 0 14px; font-size: 13.5px; line-height: 1.5;
  color: var(--color-ink); }
.dose-note b { font-weight: 700; }

/* --- Scroll-reveal animation (added by js/reveal.js) ------------------ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* --- Back-to-top button (added by js/back-to-top.js) ------------------ */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: var(--color-ink); color: var(--color-bg);
  display: grid; place-items: center; opacity: 0; visibility: hidden;
  transform: translateY(10px); transition: opacity .25s, transform .25s, visibility .25s;
  box-shadow: 0 10px 24px -12px rgba(58,42,28,.7);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 22px; height: 22px; }

/* =====================================================================
   ORDER BUILDER (order.html) — pieces used only by the order tool
   ===================================================================== */

/* Payment segmented control */
.segmented { display: flex; gap: 8px; }
.segmented button { flex: 1; padding: 13px 6px; border: 0; border-radius: var(--radius-pill);
  background: var(--tint); color: var(--color-ink-2); font-family: var(--font-sans); font-size: 14.5px; font-weight: 700;
  transition: background .2s, color .2s; }
.segmented button.is-on { background: var(--color-ink); color: var(--color-bg); }

/* Single lemon-upgrade toggle */
.lemon-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; background: var(--tint);
  border-radius: var(--radius-sm); padding: 13px 15px; margin: 0 0 var(--space-3); font-size: 14px; font-weight: 700;
  transition: background .2s; }
.lemon-toggle:hover { background: rgba(58,42,28,.11); }
.lemon-toggle b { margin-left: auto; white-space: nowrap; }
.order input[type=checkbox] { width: 21px; height: 21px; accent-color: var(--color-ink); flex: 0 0 auto; cursor: pointer; }

/* Flavor cards + steppers */
.flavor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.flavor-card { background: var(--tint); border-radius: var(--radius); padding: 14px 14px 12px; transition: background .18s ease; }
.flavor-card:hover { background: rgba(58,42,28,.11); }
.flavor-card--out { opacity: .58; }
.flavor-card--out:hover { background: var(--tint); }
.flavor-card__soldout { margin-top: 10px; text-align: center; font-size: 11.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-2);
  background: var(--tint); border-radius: var(--radius-sm); padding: 12px 8px; }
.flavor-card__top { display: flex; align-items: center; gap: 9px; min-height: 40px; }
.flavor-card__name { font-size: 14px; font-weight: 700; line-height: 1.25; }
.stepper { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.stepper button { width: 42px; height: 42px; border-radius: 50%; border: 0; font-family: var(--font-serif); font-size: 22px; line-height: 1; transition: filter .15s; }
.stepper button:hover { filter: brightness(1.07); }
.stepper__minus { background: rgba(58,42,28,.12); color: var(--color-ink); }
.stepper__plus  { background: var(--color-ink); color: var(--color-bg); }
.stepper__input { flex: 1; min-width: 0; height: 42px; text-align: center; border: 0; border-radius: var(--radius-sm);
  background: transparent; font-family: var(--font-serif); font-size: 19px; font-weight: 700; color: var(--color-ink); outline: none; }

/* Receipt / ticket (kept opaque — it is the screenshot the customer sends) */
.receipt { background: var(--color-cream); border-radius: 20px; padding: 22px 20px;
  border-top: 4px solid var(--color-ink); border-bottom: 4px solid var(--color-ink); }
.receipt__head { display: flex; align-items: center; gap: 10px; }
.receipt__head svg { width: 38px; height: 38px; flex: 0 0 auto; }
.receipt__brand { font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1; }
.receipt__date { font-size: 11.5px; color: var(--color-ink-2); margin-left: auto; font-family: var(--font-mono); }
.receipt__name { font-size: 15px; margin-top: 12px; }
.receipt__rule { border-top: 1px dashed rgba(58,42,28,.35); margin: 13px 0; }
.receipt__group { font-family: var(--font-serif); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--color-ink-2); margin: 4px 0 5px; }
.receipt__line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0; font-size: 14px; }
.receipt__line > span:last-child { font-family: var(--font-mono); font-weight: 700; flex: 0 0 auto; }
.receipt__dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; }
.receipt__note { font-size: 12.5px; font-style: italic; color: var(--color-ink-2); padding: 2px 0 4px; }
.receipt__save { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--color-green); padding-top: 4px; }
.receipt__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 9px; padding-top: 11px; border-top: 2px solid var(--color-ink); font-size: 17px; font-weight: 700; }
.receipt__total > span:last-child { font-family: var(--font-mono); font-size: 22px; color: var(--color-red); }
.receipt__meta { font-size: 13px; margin-top: 8px; }
.receipt__instr { margin-top: 14px; padding: 14px 15px; background: rgba(224,49,46,.1); border-radius: var(--radius-sm); font-size: 14px; text-align: center; color: #a3261f; line-height: 1.5; }
.receipt__instr b { font-size: 17px; color: var(--color-ink); white-space: nowrap; }
.receipt__instr--warn { background: rgba(58,42,28,.08); color: var(--color-ink-2); }
.receipt__step { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(163,38,31,.22); }
.receipt__barcode { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(58,42,28,.35); text-align: center; }
.receipt__barcode svg { display: block; margin: 0 auto; }
.receipt__ono { font-size: 13px; font-weight: 700; font-family: var(--font-mono); letter-spacing: .04em; margin-top: 7px; text-align: center; }
.receipt-empty { font-size: 14px; font-style: italic; color: var(--color-ink-2); padding: 4px 0; }

/* Order-tool inline info toggles */
.order details { padding: 0 0 14px; }
.order summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 700; }
.order summary::-webkit-details-marker { display: none; }

/* =====================================================================
   FLAVOR POPULARITY (stats.html / admin.html) — percentage bars
   ===================================================================== */
.stat-bar { padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.stat-bar:last-child { border-bottom: 0; }
.stat-bar__head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.stat-bar__dot { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); flex: 0 0 auto; }
.stat-bar__name { font-weight: 700; font-size: 15.5px; }
.stat-bar__badge { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  background: var(--color-ink); color: var(--color-bg); padding: 3px 9px; border-radius: var(--radius-pill); }
.stat-bar__pct { margin-left: auto; font-family: var(--font-mono); font-weight: 800; font-size: 16px; }
.stat-bar__track { height: 12px; background: var(--tint); border-radius: var(--radius-pill); overflow: hidden; }
.stat-bar__fill { height: 100%; border-radius: var(--radius-pill); width: 0; transition: width .8s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { .stat-bar__fill { transition: none; } }

.gift-stat { text-align: center; padding: 10px 0; }
.gift-stat__big { font-family: var(--font-serif); font-weight: 600; font-size: clamp(52px, 13vw, 88px); line-height: 1; color: var(--color-ink); }
.gift-stat__label { font-size: 15px; color: var(--color-ink-2); margin-top: 10px; }
.stats-empty { font-style: italic; color: var(--color-ink-2); }

/* =====================================================================
   ORDER BUILDER — per-flavor "regular" + "lemon-y" counters
   Each in-stock flavor card stacks a label + full-width stepper per kind.
   ===================================================================== */
.flavor-card__note { font-size: 11px; font-style: italic; color: var(--color-ink-2); margin-top: 3px; }
.qty-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.qty-row__label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; margin-bottom: 9px; }
.qty-row__label em { font-style: normal; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--color-ink-2); margin-left: auto; }
.qty-row--lem .qty-row__label { color: #8a7208; }   /* subtle lemon tint */
.qty-row .stepper { margin-top: 0; }

/* =====================================================================
   SITE-WIDE ENHANCEMENTS — scroll progress bar + toasts (ui-enhance.js)
   ===================================================================== */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300;
  background: var(--color-ink); box-shadow: 0 0 10px rgba(58,42,28,.4); transition: width .1s linear; }

.toast-wrap { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 320;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
  width: max-content; max-width: 92vw; }
.toast { background: var(--color-ink); color: var(--color-bg); font-weight: 700; font-size: 14px;
  text-align: center; padding: 12px 18px; border-radius: var(--radius-pill);
  box-shadow: 0 12px 30px -10px rgba(58,42,28,.6);
  opacity: 0; transform: translateY(10px); transition: opacity .28s ease, transform .28s ease; }
.toast.is-in { opacity: 1; transform: none; }
.toast--good { background: var(--color-green); }
.toast--warn { background: var(--color-red); }

@media print { .scroll-progress, .toast-wrap { display: none !important; } }

/* --- Merch: stickers, wristbands, bottles ----------------------------
   One column under ~560px so the ladder rows and the size steppers get
   full width. The steppers are the existing 42px circles — nothing new to
   learn, and already sized for a thumb. */
.merch-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .merch-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } }

.merch-card { background: var(--tint); border-radius: var(--radius); padding: 16px 16px 14px; }
.merch-card__top { display: flex; align-items: baseline; gap: 10px; }
.merch-card__name { font-family: var(--font-serif); font-size: 19px; font-weight: 700; line-height: 1.15; }
.merch-card__price { margin-left: auto; flex: 0 0 auto; text-align: right;
  font-family: var(--font-mono); font-size: 17px; font-weight: 700; }
.merch-card__price em { display: block; font-family: var(--font-sans); font-style: normal;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-2); }
.merch-card__blurb { font-size: 13.5px; line-height: 1.5; color: var(--color-ink-2); margin: 7px 0 0; }

/* The ladder, as pack prices — the graspable form. */
.merch-ladder { list-style: none; margin: 12px 0 0; padding: 0;
  border-radius: var(--radius-sm); overflow: hidden; background: rgba(255,246,221,.5); }
.merch-ladder li { display: flex; align-items: baseline; gap: 8px; padding: 7px 12px; font-size: 14px; }
.merch-ladder li + li { border-top: 1px solid var(--hairline); }
.merch-ladder li b { flex: 0 0 46px; font-family: var(--font-mono); font-weight: 700; }
.merch-ladder li span { flex: 1; font-family: var(--font-mono); font-weight: 700; }
.merch-ladder li i { flex: 0 0 auto; font-style: normal; font-size: 12.5px; color: var(--color-ink-2); }
.merch-ladder__head { background: rgba(58,42,28,.08); }
.merch-ladder__head b, .merch-ladder__head span, .merch-ladder__head i {
  font-family: var(--font-sans) !important; font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-2); }

.merch-card__floor { font-family: var(--font-serif); font-size: 13px; font-style: italic;
  color: var(--color-ink-2); margin: 9px 0 0; }
.merch-card__size { font-size: 13px; line-height: 1.5; margin: 12px 0 0; padding: 10px 12px;
  border-radius: var(--radius-sm); background: rgba(255,246,221,.72); }
/* A conditional price that is currently ACTIVE says so, and looks it. The
   same green as the ladder nudge — the site's existing "this is true and
   in your favour" colour, not a new one invented for a sale. */
.merch-card__member.is-on { background: rgba(47,143,87,.13); color: #1f6b3e; }

/* Where you are, and what one more step actually buys. Both true. */
.merch-card__live { }
.merch-card__live.is-on { margin-top: 13px; padding-top: 12px; border-top: 2px solid var(--color-ink); }
.merch-card__at { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 15px; }
.merch-card__at span { font-family: var(--font-mono); font-weight: 700; font-size: 17px; }
.merch-card__each { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-ink-2); margin-top: 2px; }
.merch-card__next { margin-top: 9px; padding: 9px 11px; border-radius: var(--radius-sm);
  background: rgba(47,143,87,.13); color: #1f6b3e; font-size: 13px; line-height: 1.45; }
.merch-card__ship { font-family: var(--font-serif); font-size: 12.5px; font-style: italic;
  color: var(--color-ink-2); margin: 11px 0 0; }

/* --- Per-item image (optional) ----------------------------------------
   Only rendered for items that HAVE one. An item without an image gets no
   frame at all — a grey box saying nothing is worse than no box.

   IT SITS AT THE TOP, BLED TO THE CARD EDGES. This has been both ways and
   both were looked at, so the history is worth keeping:

     When only the wristband had a picture, top-bleed pushed that card's
     heading ~160px below the other two and it read as a different kind of
     object. Image-under-heading fixed that: every card opened with a name
     and price on the same line regardless of coverage.

     Now all three items carry one, and top-bleed is clearly better. The
     images form a single clean band across the row and the cards read as
     product listings. The headings below it stagger slightly, because
     "Sticker" is one line and "Salty Smiles Experience" is two — but
     staggered text under an aligned band of images reads as normal, where
     staggered IMAGES read as broken. Misalignment costs more on the big
     elements than the small ones.

   So: if an item is ever added WITHOUT an image, look at the row again.
   The rule that made image-under-heading right was partial coverage.

   `contain` on a white ground so a square asset in a 4:3 frame is
   letterboxed cleanly instead of cropped — the placeholders are 1:1. */
.merch-card__img { margin: -16px -16px 13px; aspect-ratio: 4 / 3; background: #fff;
  border-radius: var(--radius) var(--radius) 0 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.merch-card__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Two printed sides in one slot — the shirt. Split down the middle with a
   hairline so it reads as front-and-back rather than one wide picture, and
   so the card keeps the same image height as every other card in the row. */
.merch-card__img--two { gap: 0; }
.merch-card__img--two img { width: 50%; }
.merch-card__img--two img + img { border-left: 1px solid var(--hairline); }

/* An item that cannot be bought yet. Stated, not styled to look like a
   button — there is nothing to click. */
.merch-card__soon { margin: 13px 0 0; padding: 9px 11px; border-radius: var(--radius-sm);
  background: rgba(58,42,28,.08); color: var(--color-ink-2);
  font-size: 13px; font-weight: 600; line-height: 1.45; }

/* --- Perk block: what a membership item actually gets you --------------
   Facts and unanswered questions look DIFFERENT on purpose. A settled
   term reads as ordinary copy; an unsettled one is red and says it is
   unsettled. Nothing here quietly rounds a question into a claim. */
.perk { margin: 13px 0 0; padding: 12px 13px; border-radius: var(--radius-sm);
  background: rgba(255,246,221,.72); }
.perk__label { font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--color-ink-2); margin: 0 0 9px; }
.perk__list { list-style: none; margin: 0; padding: 0; }
.perk__list li { position: relative; padding-left: 17px; margin: 0 0 8px;
  font-size: 13.5px; line-height: 1.5; }
.perk__list li:last-child { margin-bottom: 0; }
.perk__list li::before { content: ""; position: absolute; left: 2px; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-2); }
.perk__list li.is-open { color: var(--color-red); font-weight: 600; }
.perk__list li.is-open::before { background: var(--color-red); }
.perk__open-tag { display: inline-block; font-size: 9.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; vertical-align: 1px;
  margin-right: 6px; padding: 2px 6px; border-radius: var(--radius-pill);
  background: var(--color-red); color: #fff; }
/* One row per formula the perk covers, stacked. The last row drops its rule
   so the block does not end on a line with nothing under it. */
.perk__price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.perk__price:last-of-type { margin-bottom: 10px; padding-bottom: 0; border-bottom: 0; }
/* The one savings statement. Same green the ladder nudge uses — the site's
   existing "true and in your favour" colour, not a new one invented to sell. */
.perk__covers { margin: 11px 0 0; padding: 9px 11px; border-radius: var(--radius-sm);
  background: rgba(47,143,87,.13); color: #1f6b3e; font-size: 13px; line-height: 1.45; }
.perk__price b { font-family: var(--font-mono); font-size: 21px; font-weight: 700; }
.perk__price span { font-size: 12px; color: var(--color-ink-2); line-height: 1.35; }

/* --- Homepage shelf + shipping strip --------------------------------- */
.shelf-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 620px) { .shelf-grid { grid-template-columns: repeat(3, 1fr); } }
.shelf { background: var(--tint); border-radius: var(--radius); padding: 15px 16px; }
.shelf b { font-family: var(--font-serif); font-size: 18px; font-weight: 700; }
.shelf span { float: right; font-family: var(--font-mono); font-size: 17px; font-weight: 700; }
/* The tile header, since the shelf started rendering from config and item
   names can now be long enough to wrap. A floated price on a two-line name
   lands beside the second line and sits lower than its neighbours' prices;
   a flex row keeps every price on the tile's first baseline. */
.shelf__top { display: flex; align-items: baseline; gap: 10px; }
.shelf__top b { flex: 1 1 auto; }
.shelf__top span { float: none; margin-left: auto; flex: 0 0 auto; }
.shelf p { clear: both; font-size: 13.5px; line-height: 1.55; color: var(--color-ink-2); margin: 8px 0 0; }

.ship-strip { margin-top: 12px; padding: 15px 17px; border-radius: var(--radius);
  background: rgba(255,246,221,.6); border: 2px solid var(--color-ink); }
.ship-strip__label { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-ink-2); margin: 0 0 10px; }
.ship-strip p { font-size: 14px; line-height: 1.55; margin: 0 0 8px; }
.ship-strip__fine { font-family: var(--font-serif); font-size: 13px; font-style: italic;
  color: var(--color-ink-2); margin: 0 !important; }

/* Four delivery options don't fit one row on a phone. */
.segmented--wrap { flex-wrap: wrap; }
.segmented--wrap button { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 11px 6px; line-height: 1.25; }
/* 13.5px, not the control's usual 14.5 — "ship it — rush" needs ~107px of the
   135px a half-width button gives at 390. At 14.5 it has 20px of slack, which
   is not enough to survive a longer label or a wider system font. */
.segmented--wrap button b { display: block; font-weight: 700; font-size: 13.5px; }
.segmented--wrap button em { display: block; font-style: normal; font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; opacity: .72; margin-top: 2px; }

/* --- Footer newsletter / restock signup ------------------------------ */
.footer-signup { max-width: 460px; margin: 0 auto 24px; text-align: center; }
.footer-signup__label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.footer-signup__row { display: flex; gap: 8px; }
.footer-signup__row .input { flex: 1; }
.footer-signup__row .btn { margin: 0; padding: 0 20px; }
.footer-signup__msg { margin-top: 8px; font-size: 12.5px; font-weight: 700; min-height: 1px; }
.footer-signup__msg.bad { color: var(--color-red); }
.footer-signup__done { font-weight: 700; color: var(--color-green); }