/* ==========================================================================
   Apex Fitness and Nutrition
   Concept: THIS SITE IS THE LABEL.

   v10 — coaching removed at the client's request; this is now strictly a
   products business (topical copper peptide cosmetics + dietary supplements).
   The old concept, "this site is the weekly check-in", died with the coaching,
   so it was replaced rather than having sections deleted out of it.

   The label is the real artifact of a supplement brand: the side of the bottle
   that says what is actually in it. Leading with it is both the design idea and
   the honest commercial position. The hero device is a specimen label that
   fills itself in line by line, with the unformulated values left visibly
   blank — the blanks are the brief for the manufacturer.

   All motion is pure CSS with fill-mode:both, so the finished frame IS the
   resting state. Nothing can be stranded by a timer that never fires.
   ========================================================================== */

:root{
  --red:#d81409;           /* logo red, darkened just enough to pass AA on paper */
  --red-bright:#f20801;    /* the sampled logo value — only on ink fields */
  --red-deep:#8d0b05;
  --ink:#15110f;
  --ink-dim:#5f5651;
  --paper:#f2efec;         /* warm, not clinical white */
  --paper-2:#e8e2dc;
  --paper-3:#ddd5cd;
  --rule:#cfc6bd;

  /* shop.css and admin were written against these names — keep them working. */
  --ground:#f2efec;
  --ground-2:#e8e2dc;

  /* Big Shoulders Display: on none of the 30 shipped sites. Oswald, Cormorant,
     Anton and Sora are over-used; Archivo collided with First Response Painting. */
  --display:'Big Shoulders Display','Haettenschweiler',Impact,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --pad:clamp(1.25rem,5vw,4.5rem);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
/* A class setting display (e.g. .btn{display:inline-block}) otherwise beats
   the UA's [hidden]{display:none} — author origin always wins over UA origin
   regardless of specificity, so any hidden .btn/.pill/etc still rendered. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.62; overflow-x:hidden;
  /* Ruled ground: the page is the sheet the label is printed on. */
  background-image:repeating-linear-gradient(
    to bottom, transparent 0 31px, rgba(21,17,15,.042) 31px 32px);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.hero-h,.sec-h,.btn,.nav-cta,.card h3,.lb-name,.r-name{
  font-family:var(--display);
  font-variation-settings:'wght' 800;
  text-transform:uppercase; letter-spacing:.005em; line-height:.94;
}

/* ---------- scroll progress: a red rule that fills as you read ---------- */
.progress{
  position:fixed; inset:0 0 auto 0; height:3px; background:var(--red);
  transform:scaleX(0); transform-origin:0 50%; z-index:60;
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .progress{animation:fill-bar linear both;animation-timeline:scroll(root)}
  }
}
@keyframes fill-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- nav ---------- */
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem var(--pad); border-bottom:1px solid var(--rule);
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(10px);
}
.nav-mark img{width:clamp(108px,17vw,150px);height:auto}
.nav-links{display:flex; align-items:center; gap:clamp(.7rem,2.4vw,1.8rem)}
/* `.nav-links a` outranks `.nav-cta` and eats its padding — scope around it. */
.nav-links a:not(.nav-cta){
  font-size:.8rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-dim); text-decoration:none; white-space:nowrap;
}
.nav-links a:not(.nav-cta):hover{color:var(--red)}
.nav-cta{
  font-size:.79rem; padding:.62rem 1.15rem; background:var(--red); color:#fff;
  text-decoration:none; font-variation-settings:'wght' 700;
  clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%);
}
.nav-cta:hover{background:var(--ink);color:#fff}
/* PHONE NAV — the links were once display:none with nothing replacing them, so
   /products could not be reached from a phone at all. They now drop to a second
   row under the wordmark. No JS: a disclosure menu would need a script. */
@media (max-width:620px){
  .nav{flex-wrap:wrap; padding-bottom:0; row-gap:0}
  .nav-links{
    width:100%; order:3; justify-content:space-between; gap:.35rem;
    border-top:1px solid var(--rule); margin-top:.6rem;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a:not(.nav-cta){
    display:block; padding:1rem 0; font-size:.73rem; letter-spacing:.05em;
  }
  .nav-cta{align-self:center; margin:.3rem 0; padding:0 1.15rem;
           min-height:44px; display:inline-flex; align-items:center}
}

/* ---------- hero: type left, the device right ---------- */
.hero{
  padding:clamp(2.2rem,6vw,4.2rem) var(--pad) clamp(2.5rem,7vw,5rem);
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.7rem,5vw,3.6rem); align-items:center;
}
.hero-type{min-width:0}
@media (max-width:900px){ .hero{grid-template-columns:1fr; gap:2rem} }

.kicker{
  font-family:var(--mono); font-size:.71rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink-dim); margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.6rem;
}
.dot{width:7px;height:7px;background:var(--red);border-radius:50%;flex:0 0 auto;
     animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.78)}}
@media (prefers-reduced-motion:reduce){ .dot{animation:none} }

.hero-h{ margin:0; font-size:clamp(2.7rem,8.2vw,5.3rem); line-height:.88; }
.hero-h span{display:block}
.hero-h em{font-style:normal;color:var(--red)}
.hero-sub{
  margin:clamp(1.2rem,3vw,1.8rem) 0 0; max-width:46ch;
  color:var(--ink-dim); font-size:clamp(.99rem,.95rem + .3vw,1.1rem);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}

/* Headline lines rise once. fill:both means the END frame is the resting
   state, so if it never visibly plays the text is simply there. */
@media (prefers-reduced-motion:no-preference){
  .hero-h span{animation:rise .75s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0s)}
}
/* TRANSFORM ONLY — never opacity. `animation-delay` + `fill-mode:both` applies
   the FROM frame backwards during the delay, so an opacity:0 start leaves the
   element invisible until the animation runs. Measured at 320px: six .lb-row
   elements still at opacity:0 2.5s after readyState:complete, because a
   throttled/unpainted tab does not advance the animation. Same failure as the
   JS reveal bug, in a different costume. Animating position only means the
   resting state is visible by definition and nothing can be stranded. */
@keyframes rise{from{transform:translateY(.4em)}to{transform:none}}

/* ---------- THE DEVICE: the specimen label ---------- */
.label{
  background:#fff; border:1px solid var(--rule); position:relative;
  box-shadow:14px 14px 0 -1px var(--paper-2);
  font-family:var(--mono); min-width:0;
}
@media (prefers-reduced-motion:no-preference){
  .label{animation:card-in .7s cubic-bezier(.2,.7,.3,1) .2s both}
}
@keyframes card-in{from{transform:translateY(18px)}to{transform:none}}

/* The red band is the one on the drawn bottles, so the hero object and the
   product artwork are recognisably the same packaging. */
.lb-band{
  background:var(--red); color:#fff; display:flex; align-items:baseline;
  justify-content:space-between; gap:.8rem;
  padding:.5rem clamp(1.05rem,2.5vw,1.45rem);
}
.lb-brand{font-family:var(--display);font-variation-settings:'wght' 800;
          text-transform:uppercase;font-size:1.05rem;letter-spacing:.08em;line-height:1}
.lb-spec{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;opacity:.9;
         white-space:nowrap}

.lb-head{padding:clamp(1.05rem,2.5vw,1.45rem) clamp(1.05rem,2.5vw,1.45rem) .5rem;
         border-bottom:2px solid var(--ink)}
.lb-name{font-size:1.5rem;margin:0}
.lb-inci{margin:.3rem 0 .55rem;font-size:.72rem;color:var(--ink-dim);letter-spacing:.04em}

.lb-row{
  display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:baseline;
  padding:.55rem clamp(1.05rem,2.5vw,1.45rem);
  border-bottom:1px solid var(--paper-3);
}
.lb-row>*{min-width:0}
.lb-k{color:var(--ink-dim);letter-spacing:.1em;text-transform:uppercase;font-size:.66rem}
.lb-v{font-size:.84rem;color:var(--ink);font-weight:600;text-align:right;
      overflow-wrap:anywhere}
/* Unformulated values read as a blank to be filled, not as a spec. */
.lb-v.need{
  color:var(--ink-dim); font-weight:400; font-style:italic;
  text-decoration:underline; text-decoration-style:dotted;
  text-underline-offset:3px;
}

/* Each line lands in turn — reading the label is the sequence. */
@media (prefers-reduced-motion:no-preference){
  .lb-row{animation:land .5s ease both;animation-delay:var(--d,0s)}
}
@keyframes land{from{transform:translateX(-10px)}to{transform:none}}

.lb-warn{
  margin:.85rem clamp(1.05rem,2.5vw,1.45rem) 0;
  background:var(--paper); border-left:3px solid var(--red);
  padding:.6rem .85rem; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink);
}
@media (prefers-reduced-motion:no-preference){
  .lb-warn{animation:stamp .5s cubic-bezier(.2,1.4,.4,1) 1.02s both}
}
@keyframes stamp{from{transform:scale(.94) rotate(-.6deg)}to{transform:none}}

.lb-note{
  font-size:.62rem; color:var(--ink-dim); line-height:1.55; letter-spacing:.03em;
  margin:0; padding:.7rem clamp(1.05rem,2.5vw,1.45rem) clamp(1.05rem,2.5vw,1.45rem);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:.9rem 1.6rem; background:var(--red); color:#fff;
  text-decoration:none; border:0; cursor:pointer; font-size:.85rem;
  font-variation-settings:'wght' 700;
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.btn:hover,.btn:focus-visible{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--ink);color:var(--paper)}

/* ---------- section furniture ---------- */
.sec-h{ margin:0 0 .5rem; font-size:clamp(1.55rem,4.4vw,2.6rem); }
.sec-sub{ margin:0 0 clamp(1.6rem,4vw,2.5rem); color:var(--ink-dim); max-width:52ch; }

/* ---------- the range (homepage preview of the live catalogue) ---------- */
.range-wrap{ padding:clamp(2.6rem,7vw,5.2rem) var(--pad); border-top:1px solid var(--rule);
             background:var(--paper-2); }
.range-head,.range,.range-fallback{max-width:var(--maxw);margin-inline:auto}
.range{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
}
.r-item{
  background:var(--paper); padding:clamp(1.3rem,3vw,1.9rem); min-width:0;
  text-decoration:none; display:flex; flex-direction:column; gap:.4rem;
  transition:background .2s ease;
}
.r-item:hover,.r-item:focus-visible{background:#fff}
/* No mix-blend-mode: multiply erases the specular highlights the glass is made
   of. The SVGs are transparent already. */
.r-img{width:100%;max-width:150px;height:auto;margin:0 auto .6rem;display:block}
.r-cat{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
       text-transform:uppercase;color:var(--red);margin:0}
.r-name{margin:0;font-size:1.15rem}
.r-price{font-family:var(--mono);font-size:.8rem;color:var(--ink-dim);margin:.15rem 0 0}
/* Visible by default; the script hides it only once real cards exist. */
.range-fallback{font-family:var(--mono);font-size:.82rem;color:var(--ink-dim)}
.range-fallback a{color:var(--red)}
.empty{ border:1px dashed var(--rule); padding:clamp(1.6rem,5vw,3rem); text-align:center;
        color:var(--ink-dim); max-width:var(--maxw); margin-inline:auto; }
.empty strong{ color:var(--ink); display:block; margin-bottom:.5rem;
               font-family:var(--display); text-transform:uppercase; font-size:1.2rem; }

/* ---------- standard cards ---------- */
.programs{ padding:clamp(2.6rem,7vw,5.2rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1px;
        background:var(--rule); border:1px solid var(--rule); }
.card{ background:var(--paper); padding:clamp(1.4rem,3vw,2rem); min-width:0;
       transition:background .2s ease }
.card:hover{background:#fff}
.card-n{ font-family:var(--mono); color:var(--red); margin:0 0 .8rem; font-size:.82rem; }
.card h3{ margin:0 0 .6rem; font-size:1.2rem; }
.card p{ margin:0 0 .7rem; color:var(--ink-dim); font-size:.94rem; }

/* Unresolved content is LOUD on purpose. `.card p` is (0,1,1) and outranks a
   bare `.tbd` (0,1,0) — that bug rendered these at 1.3:1. Keep it scoped. */
p.tbd, .card p.tbd{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em;
  color:#fff3f2; background:var(--red-deep); padding:.55rem .75rem;
  border-left:3px solid var(--red); line-height:1.5;
}
p.tbd.big{font-size:.88rem;padding:.9rem 1rem}

.warn{ font-size:.89rem; color:var(--ink); border-left:3px solid var(--red);
       padding:.7rem 0 .7rem 1rem; margin:2rem 0 0; max-width:62ch; }

/* Used by /products for its footnote line. */
.sheet-note{
  font-family:var(--mono); font-size:.73rem; color:var(--ink-dim);
  margin:1.3rem 0 0; line-height:1.6;
}
.sheet-note strong{color:var(--red);font-weight:600}

/* ---------- form ---------- */
.apply{ padding:clamp(2.6rem,7vw,5.2rem) var(--pad); max-width:var(--maxw); margin:0 auto;
        border-top:1px solid var(--rule); background:var(--paper-2); }
.form{max-width:640px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.f-row>*{min-width:0}
@media (max-width:560px){ .f-row{grid-template-columns:1fr} }
.form label{
  display:block; margin-bottom:1rem; font-family:var(--mono);
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-dim);
}
.form input,.form select,.form textarea{
  display:block; width:100%; margin-top:.45rem; padding:.8rem .9rem;
  background:#fff; border:1px solid var(--rule); color:var(--ink);
  font-family:var(--body); font-size:1rem; letter-spacing:normal; text-transform:none;
  border-radius:0;
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:2px solid var(--red); outline-offset:1px; border-color:var(--red);
}
.form textarea{resize:vertical}
.form-note{font-family:var(--mono);font-size:.72rem;color:var(--ink-dim);margin:1rem 0 0;line-height:1.6}
.form-note strong{color:var(--red);font-weight:600}

/* ---------- footer: ink field, so the page closes on the brand ---------- */
.foot{ padding:clamp(2.2rem,6vw,4rem) var(--pad); display:grid; gap:1.5rem;
       background:var(--ink); color:var(--paper); }
.foot-mark{width:clamp(120px,20vw,170px)}
.foot-meta p{margin:.2rem 0;color:#a8a09b;font-size:.91rem}
.foot-meta strong{color:var(--paper)}
.foot-meta a{color:#a8a09b}
.foot-meta a:hover{color:var(--red-bright)}
.disclaimer{ margin:0; padding-top:1.3rem; border-top:1px solid #332c29;
             color:#8b8480; font-size:.77rem; line-height:1.65; max-width:70ch; }

/* ---------- reveals: pure CSS, no JS, nothing stranded by a timer ---------- */
@keyframes rv-in{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{animation:rv-in linear both;animation-timeline:view();animation-range:entry 0% entry 58%}
  }
}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:70;background:var(--red);
      color:#fff;padding:.75rem 1.1rem;text-decoration:none;font-family:var(--mono);
      font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.skip:focus{left:0}


/* ==========================================================================
   PHONE PASS — measured at 375, then re-measured. Every number below replaced
   a value the audit flagged: tap targets under 44px and 9.9px micro-type.
   State the constraint (min-height) rather than guessing at padding.
   ========================================================================== */
@media (max-width:620px){
  /* Buttons measured 42px tall. 44 is the tap-target floor. */
  .btn{padding:1.05rem 1.5rem; font-size:.85rem}
  .hero-actions{gap:.65rem}
  .hero-actions .btn{flex:1 1 auto; text-align:center}

  /* Footer links were 19px of tappable height. */
  .foot-meta p{margin:.3rem 0}
  .foot-meta a{display:inline-flex; align-items:center; min-height:44px}
  .nav-mark{display:flex; align-items:center; min-height:44px}

  /* Label micro-type: the old card bottomed out at 9.9px, unreadable. */
  .lb-note, .lb-spec{font-size:.7rem}
  .lb-k{font-size:.71rem}
  .lb-v{font-size:.88rem}
  .lb-warn{font-size:.72rem}
  .lb-inci{font-size:.76rem}
  .kicker{font-size:.72rem; letter-spacing:.12em}

  /* Whole card is the tap target, so it clears 44 on its own. */
  .r-img{max-width:130px}

  /* Form controls: 16px min stops iOS zooming the page on focus. */
  .form input,.form select,.form textarea{font-size:16px; padding:.85rem .9rem}
  .form label{font-size:.7rem}
}
@media (max-width:360px){
  .hero-h{font-size:2.35rem}
  .nav-links a:not(.nav-cta){font-size:.68rem}
  .lb-row{padding-inline:.9rem}
  .lb-head,.lb-band,.lb-note{padding-inline:.9rem}
}

/* ---------- pay by Zelle ----------
   No card rail exists, so payment is a bank transfer. The irreversibility
   warning is not decoration: Zelle has no chargeback, so a buyer who pays
   before confirmation has no recourse. */
.pay{ border:1px solid var(--rule); background:var(--paper-2);
      padding:clamp(1.2rem,3vw,1.8rem); margin-top:clamp(2rem,5vw,3rem); max-width:62ch; }
.pay-h{ font-family:var(--display); font-variation-settings:"wght" 800; text-transform:uppercase;
        font-size:clamp(1.15rem,3vw,1.5rem); margin:0 0 .4rem; }
.pay-lead{ margin:0 0 1rem; color:var(--ink-dim); font-size:.95rem; }
.pay-steps{ margin:0; padding-left:1.15rem; color:var(--ink); font-size:.95rem; }
.pay-steps li{ margin:.5rem 0; }
.pay-steps strong{ font-weight:600; }
.pay-id{ font-family:var(--mono); font-size:.88rem; overflow-wrap:anywhere; }
.pay a{ color:var(--red); overflow-wrap:anywhere; }
.pay-warn{ margin:1.1rem 0 0; padding:.7rem .9rem; background:var(--red-deep); color:#fff3f2;
           font-size:.86rem; line-height:1.5; border-left:3px solid var(--red); }
.pay-warn strong{ color:#fff; }
@media (max-width:620px){
  .pay-steps{ font-size:.92rem; }
  .pay a{ display:inline-block; min-height:44px; line-height:44px; }
}

/* ==========================================================================
   v13 — AGGRESSIVE DARK. Client asked for something harder-edged.
   Token flip plus targeted overrides, so every component follows without
   being rewritten. Deliberately NOT the old "black + hot red supplement"
   look that was rejected: the ground is a cool near-black, the red is used
   as a cutting accent rather than a fill, and the white label device is the
   one bright object on the page — the concept still leads.
   All motion is transform-only, so nothing can be stranded invisible.
   ========================================================================== */
:root{
  --paper:#0d0d10; --paper-2:#141418; --paper-3:#1d1d24; --rule:#2c2c36;
  --ink:#f5f3f1; --ink-dim:#a8a29c;
  --ground:#0d0d10; --ground-2:#141418;
  --red:#ff1a0d; --red-bright:#ff3b2e; --red-deep:#7e0a05;
}
body{
  background:var(--paper);
  /* scanline grid instead of ruled paper — same idea, harder material */
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255,255,255,.028) 31px 32px),
    repeating-linear-gradient(to right, transparent 0 119px, rgba(255,255,255,.022) 119px 120px);
}
.nav{ background:color-mix(in srgb,var(--paper) 86%,transparent); border-bottom-color:var(--rule) }
.nav-cta{ color:#fff }
.nav-cta:hover{ background:#fff; color:#0d0d10 }

/* hero: bigger, tighter, with a cut under the headline */
.hero-h{ font-size:clamp(3rem,10vw,6.6rem); line-height:.84; letter-spacing:-.005em }
.hero-h em{ color:var(--red) }
.hero-type .kicker{ color:var(--red); letter-spacing:.24em }
.hero-sub{ position:relative; padding-top:1.4rem }
.hero-sub::before{
  content:""; position:absolute; top:0; left:0; width:84px; height:5px;
  background:var(--red); clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
}

/* ticker: transform-only, so it is never hidden if the animation never runs */
.ticker{ border-block:1px solid var(--rule); background:var(--paper-2); overflow:hidden; }
.ticker-track{ display:flex; width:max-content; }
.ticker span{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim); padding:.85rem 1.5rem; white-space:nowrap;
}
.ticker span b{ color:var(--red); font-weight:400 }
@media (prefers-reduced-motion:no-preference){
  .ticker-track{ animation:ticker 38s linear infinite }
}
@keyframes ticker{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* the white label device is now the brightest thing on the page */
.label{ box-shadow:0 0 0 1px var(--rule), 22px 22px 0 -1px rgba(255,26,13,.22) }

/* product cards: lit, with a red edge on approach */
.range-wrap{ background:var(--paper-2); border-top-color:var(--rule) }
.r-item, .p{ background:var(--paper); transition:background .18s ease, box-shadow .18s ease }
.r-item:hover, .r-item:focus-visible, .p:hover{
  background:#17171c; box-shadow:inset 0 0 0 1px var(--red);
}
.r-img, .p-img{ filter:drop-shadow(0 18px 26px rgba(0,0,0,.65)) }
.card{ background:var(--paper) }
.card:hover{ background:#17171c }

/* buttons + furniture */
.btn.ghost{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule) }
.btn.ghost:hover,.btn.ghost:focus-visible{ background:var(--ink); color:#0d0d10 }
.btn:hover,.btn:focus-visible{ background:#fff; color:#0d0d10 }
.sec-h{ letter-spacing:-.005em }
.form input,.form select,.form textarea{ background:#0a0a0c; border-color:var(--rule); color:var(--ink) }
.apply{ background:var(--paper-2); border-top-color:var(--rule) }
.pay{ background:var(--paper-2); border-color:var(--rule) }
.empty{ border-color:var(--rule) }

/* footer closes on red rather than fading out */
.foot{ background:#08080a; border-top:4px solid var(--red) }
.foot-meta p{ color:#8f8a86 }
.disclaimer{ color:#7d7874; border-top-color:#1e1e25 }

/* ---------- LIGHT-CARD PIN + button contrast (v13 fixes) ----------
   The dark token flip made --ink near-white. Every component on a dark ground
   followed correctly, but the specimen label is a WHITE card that inherits the
   same token, so its name, values and warning rendered white-on-white and the
   device disappeared. Any surface that stays light must pin its own colours
   rather than inherit the theme.
   Buttons: white on #ff1a0d measured 3.88:1, under the 4.5 floor. Keep the
   bright red for accents on the dark ground, use the darker logo red (5.22:1)
   wherever white text sits on top of it. */
:root{ --red-btn:#d81409; }

.label{ color:#15110f; }
.label .lb-name,
.label .lb-v,
.label .lb-warn{ color:#15110f; }
.label .lb-k,
.label .lb-inci,
.label .lb-note{ color:#5f5651; }
.label .lb-v.need{ color:#7a716b; }
.label .lb-row{ border-bottom-color:#ddd5cd; }
.label .lb-head{ border-bottom-color:#15110f; }
.label .lb-warn{ background:#f2efec; border-left-color:var(--red-btn); }
.label .lb-band{ background:var(--red-btn); }

.btn{ background:var(--red-btn); color:#fff; }
.nav-cta{ background:var(--red-btn); color:#fff; }
.pay-warn{ background:#6d0904; color:#fff; }
.p-draft,.tbd,p.tbd,.card p.tbd{ background:#6d0904; }

/* ---------- PHOTO TILE ----------
   Product images are now photographs with white backgrounds. Knocking the white
   out would eat the clear glass with it, so they sit on a white tile instead —
   which also reads as deliberate on the dark ground. */
.p-img,.r-img{
  background:#fff; border-radius:4px; padding:6px; filter:none;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}

/* ---------- DRAWN BOTTLE LABEL ----------
   Product packaging = a blank bottle photograph with the label drawn over it in
   HTML. A product added in the admin therefore gets matching packaging with no
   image work, and the printed name always matches the record.
   Label rectangles were computed from the trim geometry of each photo, not
   eyeballed. Text is sized in cqw against the LABEL box, so it scales with the
   card at any width. */
.bot{
  position:relative; width:100%; max-width:165px; margin:0 auto .5rem;
  background:#fff; border-radius:4px; padding:6px;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.bot-img{width:100%;height:auto;display:block}
.bot-label{
  position:absolute; container-type:inline-size;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3%; text-align:center; line-height:1; overflow:hidden;
  font-family:Helvetica,Arial,sans-serif; color:#15110f;
}
/* both vials share one body, so they share one label box */
.bot--vial-blue .bot-label,
.bot--vial-black .bot-label{
  left:30.74%; top:42.88%; width:39.98%; height:31.67%; background:#fcfcfc;
}
/* the amber bottle photo already carries a white label, so no ground here */
.bot--amber .bot-label{
  left:23.27%; top:35.48%; width:60.74%; height:48.77%; background:transparent;
}
.bot-brand{font-size:20cqw; font-weight:700; color:#d81409; letter-spacing:.02em}
.bot-name{
  width:100%; padding:4% 2%; background:#d81409; color:#fff;
  font-size:17cqw; font-weight:700; white-space:nowrap; overflow:hidden;
}
.bot--amber .bot-name{background:#1d63bd}
.bot-dose{
  font-size:13cqw; font-weight:700; padding:3% 7%;
  border:1px solid #15110f; white-space:nowrap;
}
.bot--amber .bot-dose{border-color:#1d63bd}
.bot-use{font-size:6.5cqw; color:#5f5651; white-space:nowrap}
@media (max-width:520px){ .bot{max-width:135px} }

/* Out of stock: quantity 0 in the admin. NULL means "not tracked" and shows
   nothing, so an untracked product never looks unavailable by accident. */
.p-oos{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:#fff3f2; background:#6d0904;
  padding:.18rem .5rem; white-space:nowrap;
}

/* ---------- dosage picker ---------- */
.p-doses{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .1rem}
.p-dose{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.04em;
  padding:.45rem .7rem; min-height:44px; cursor:pointer;
  background:transparent; color:var(--ink-dim);
  border:1px solid var(--rule); border-radius:0;
  display:inline-flex; align-items:center;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.p-dose:hover{color:var(--ink); border-color:var(--ink-dim)}
.p-dose.on{background:var(--red-btn); border-color:var(--red-btn); color:#fff}
.p-dose:focus-visible{outline:2px solid var(--red); outline-offset:2px}

/* admin: dosage rows */
.vars{margin:0 0 1rem}
.vars-h{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
        color:var(--ink-dim);margin:0 0 .5rem}
.vars-h span{display:block;letter-spacing:normal;text-transform:none;font-size:.72rem;margin-top:.2rem}
.var-row{display:grid;grid-template-columns:1.4fr 1fr .8fr auto;gap:.5rem;margin-bottom:.5rem}
.var-row input{margin:0}
@media (max-width:620px){ .var-row{grid-template-columns:1fr 1fr;gap:.4rem} }

/* Instagram icon link in the nav */
.nav-ig{display:inline-flex; align-items:center; justify-content:center;
        color:var(--ink-dim); min-height:44px; min-width:44px; text-decoration:none}
.nav-ig:hover,.nav-ig:focus-visible{color:var(--red)}

/* The nav is sticky, so scrollIntoView / #anchor jumps land under it and clip
   the heading (checkout title was half-hidden). Reserve the nav's height. */
main[id], section[id]{ scroll-margin-top: clamp(6rem, 12vw, 7rem); }
@media (max-width:620px){ main[id], section[id]{ scroll-margin-top: 8.5rem; } }

/* select clipping: give the native arrow room so option text never truncates */
.form select{ padding-right:2.2rem; text-overflow:ellipsis; }

/* ---------- v24: more aggressive — hero ember glow ----------
   A red radial glow sits BEHIND the headline and pulses slowly, so the type
   reads as lit from within. Behind the content (z-index) and low-opacity, so
   the white headline keeps its AA contrast on the near-black ground.
   Clipped by the hero so it never causes horizontal overflow. */
.hero{ position:relative; overflow:clip; isolation:isolate; }
.hero::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-8%; top:38%; width:70%; height:70%; transform:translateY(-50%);
  background:radial-gradient(closest-side,
     rgba(255,26,13,.32), rgba(255,26,13,.12) 55%, transparent 72%);
  filter:blur(18px);
}
@media (prefers-reduced-motion:no-preference){
  .hero::before{ animation:ember 5.5s ease-in-out infinite; }
}
@keyframes ember{
  0%,100%{ opacity:.6; transform:translateY(-50%) scale(1); }
  50%{ opacity:1; transform:translateY(-50%) scale(1.08); }
}
/* punchier buttons: red edge snaps in on hover */
.btn{ position:relative; }
.btn:hover,.btn:focus-visible{ box-shadow:0 0 0 2px var(--red-bright), 0 8px 22px rgba(255,26,13,.28); }

/* ---------- hero featured product (replaced the specimen label) ---------- */
.hero-feature{
  background:var(--paper-2); border:1px solid var(--rule); position:relative;
  box-shadow:0 0 0 1px var(--rule), 22px 22px 0 -1px rgba(255,26,13,.22);
  min-width:0; padding:clamp(1.4rem,3vw,2rem); text-align:center;
}
@media (prefers-reduced-motion:no-preference){
  .hero-feature{ animation:card-in .7s cubic-bezier(.2,.7,.3,1) .2s both; }
}
.hf-inner{ display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.hf-tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em;
         text-transform:uppercase; color:var(--red); margin:0; }
.hf-loading{ font-family:var(--mono); font-size:.85rem; color:var(--ink-dim); margin:.5rem 0; }
.hf-img{ width:100%; max-width:210px; height:auto; margin:.2rem auto;
         background:#fff; border-radius:6px; padding:8px;
         box-shadow:0 12px 30px rgba(0,0,0,.55); }
.hf-name{ font-family:var(--display); font-variation-settings:'wght' 800;
          text-transform:uppercase; font-size:clamp(1.2rem,3vw,1.6rem);
          line-height:1; margin:.2rem 0 0; }
.hf-price{ font-family:var(--mono); font-size:.9rem; color:var(--ink-dim); margin:0 0 .4rem; }
.hero-feature .btn{ width:100%; text-align:center; justify-content:center; }