/* ==========================================================================
   CLEARFORM PEPTIDE SCIENCES — design system  (v4 "blue / green / white")
   --------------------------------------------------------------------------
   One coherent colour system built on the group logo: deep blue #014B82 →
   emerald #1E9E6A → aqua #03C2D6, over white and pale blue.

     BLUE   carries trust and structure — headings, links, chrome, buttons.
     GREEN  carries verification and approval — checkmarks, approved states,
            "verified" proof points. It is a signal, never decoration.
     AQUA   is the bright note at the end of the gradient, used on dark
            grounds and as the tail of the signature gradient.

   The page is never a flat white sheet: the ground is pale blue (--paper),
   white is reserved for lifted panels and alternating bands, and depth comes
   from blue-cast shadows rather than grey ones.

   Type is Manrope (display + text) with IBM Plex Mono for micro-labels only.
   assets/css/theme.css loads after this file and holds only the small
   contrast / motion guarantees that must win the cascade — the system lives
   here.
   ========================================================================== */

:root{
  /* ---------- brand anchors (sampled from the group logo) ---------- */
  --brand-deep:#014B82;
  --brand-blue:#0E6BA8;
  --brand-aqua:#03C2D6;
  --brand-green:#1E9E6A;
  --brand-mint:#A8F6D1;

  /* ---------- structural blues ---------- */
  --navy-deep:#04223C;      /* footer / topbar ground */
  --navy:#063A66;           /* headings — 11.6:1 on white */
  --navy-2:#0A5288;
  --blue:#0E6BA8;           /* 5.7:1 on white — safe for links */
  --blue-bright:#3FA5E0;
  --blue-pale:#CFE4F4;
  --blue-tint:#E6F2FA;
  --steel:#6B8CA8;
  --sky:#3E8DC5;

  /* ---------- greens: verification, approval, health ---------- */
  --green-ink:#0F7A50;      /* 5.4:1 on white — green text on light */
  --green:#1E9E6A;          /* 3.4:1 — icons, rules, large marks only */
  --green-glow:#7CE8B4;     /* green on dark grounds */
  --green-soft:#E4F6EC;
  --green-line:#BCE6D0;

  /* ---------- aqua: the bright note ---------- */
  --aqua:#03C2D6;
  --aqua-bright:#4FD8E6;    /* aqua on dark grounds — 9.5:1 on navy-deep */
  --aqua-soft:#E2F5F9;

  /* ---------- grounds ---------- */
  --white:#FFFFFF;
  --card:#FFFFFF;
  --paper:#F2F8FC;          /* the page ground — pale blue, never white */
  --paper-2:#E9F2F8;
  --paper-3:#DEEBF4;

  /* ---------- lines ---------- */
  --line:#D7E5F0;
  --line-soft:#E7F0F7;
  --line-strong:#BFD5E6;

  /* ---------- ink ---------- */
  --ink:#142E46;            /* 13.9:1 on white */
  --ink-soft:#46607A;       /* 6.1:1 on --paper */
  --ink-faint:#506B85;      /* 4.9:1 on --paper-2 — still real content */
  --white-soft:rgba(255,255,255,.82);

  /* ---------- the signature gradient, and its working variants ----------
     --grad-signature is the full logo run and is only ever used as a rule,
     edge or field — nothing sits on top of it.
     --grad-cta carries white text, so every stop clears 5.2:1 with white.
     --grad-band / --grad-card are the dark grounds; all stops clear 7:1. */
  --grad-signature:linear-gradient(100deg,#014B82 0%,#0E6BA8 30%,#1E9E6A 66%,#03C2D6 100%);
  --grad-cta:linear-gradient(103deg,#01467B 0%,#0E6BA8 52%,#0C7A6B 100%);
  --grad-cta-hover:linear-gradient(103deg,#02538F 0%,#1178BC 46%,#0C806F 100%);
  --grad-band:linear-gradient(104deg,#04223C 0%,#063A66 38%,#0A5E85 74%,#0C7A6B 106%);
  --grad-card:linear-gradient(142deg,#063A66 0%,#0A5688 56%,#0C7A6B 116%);
  --grad-wash:linear-gradient(122deg,#F5FAFD 0%,#E9F3F8 50%,#E7F5EF 100%);
  --grad-tint:linear-gradient(150deg,#FFFFFF 0%,#F3F9FC 58%,#EDF6F3 100%);
  --grad-mint:linear-gradient(140deg,#E6F2FA 0%,#E2F3F1 60%,#DFF4E7 100%);

  /* ---------- legacy aliases — inline styles and older rules read these --- */
  --teal:#0E6BA8;
  --teal-bright:#4FD8E6;
  --teal-soft:#E6F2FA;

  /* ---------- geometry ---------- */
  --radius:20px;
  --radius-sm:14px;
  --radius-xs:10px;

  /* ---------- depth: blue-cast, offset + blur, never a flat halo ---------- */
  --shadow-xs:0 1px 2px rgba(4,34,60,.05),0 3px 10px -5px rgba(6,58,102,.16);
  --shadow:0 1px 2px rgba(4,34,60,.04),0 8px 20px -10px rgba(6,58,102,.20),0 24px 46px -28px rgba(1,75,130,.28);
  --shadow-hover:0 2px 4px rgba(4,34,60,.06),0 16px 32px -14px rgba(6,58,102,.26),0 40px 68px -34px rgba(1,75,130,.36);
  --shadow-dark:0 18px 40px -18px rgba(2,24,44,.45),0 44px 80px -40px rgba(1,75,130,.45);

  /* ---------- rhythm + motion ---------- */
  --sp-section:clamp(76px,8vw,124px);
  --ease:cubic-bezier(.16,1,.3,1);

  --font-display:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
/* clip, not hidden: `clip` does not create a scroll container, so the sticky
   nav keeps working while a stray wide child can never scroll the page. */
html{scroll-behavior:smooth;background:var(--paper);overflow-x:clip}
body{
  font-family:var(--font-sans);color:var(--ink);line-height:1.65;font-size:16px;
  letter-spacing:-.003em;
  background-color:var(--paper);
  background-image:
    radial-gradient(940px 640px at 92% 2%,rgba(3,194,214,.10),transparent 62%),
    radial-gradient(820px 620px at 2% 98%,rgba(30,158,106,.075),transparent 60%);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:rgba(14,107,168,.16);color:var(--navy)}

/* One visible focus ring everywhere, re-lit on dark grounds. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--brand-blue);outline-offset:3px}
.topbar :focus-visible,.hero :focus-visible,.page-hero :focus-visible,
.cta-band :focus-visible,footer :focus-visible,.aud-card:first-child :focus-visible{
  outline-color:var(--aqua-bright)}

/* ==========================================================================
   LAYOUT + BANDS
   The page ground is pale blue. White is a band, not the default.
   ========================================================================== */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
section{padding:var(--sp-section) 0;position:relative}

/* white band, hairline-ruled */
.stats,.proc,.aud{background:var(--card)}
.proc{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.aud{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}

/* Tinted blue→mint wash band (homepage catalog invitation).
   Set two-column so the headline and the offer share the band instead of
   leaving half of it empty — the widest, emptiest stretch on the old page. */
#catalog{
  background:var(--grad-wash);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line);
  overflow:hidden}
#catalog::after{
  content:"";position:absolute;right:-160px;top:-140px;width:520px;height:520px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(3,194,214,.16),rgba(30,158,106,.06) 46%,transparent 70%)}
#catalog>.wrap{position:relative;z-index:1;
  display:grid;grid-template-columns:1.02fr .98fr;column-gap:72px;align-content:start}
#catalog .eyebrow{grid-column:1/-1;grid-row:1}
#catalog .sec-title{grid-column:1;grid-row:2/span 2;margin-bottom:0;max-width:14ch;
  font-size:clamp(2rem,3.9vw,3.05rem)}
#catalog .sec-lead{grid-column:2;grid-row:2;padding-top:9px;max-width:44ch;align-self:start}
#catalog>.wrap>div{grid-column:2;grid-row:3;align-self:start}

/* ==========================================================================
   TYPE
   ========================================================================== */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.14;
  letter-spacing:-.022em;color:var(--navy);text-wrap:balance}
h1{font-size:clamp(2.2rem,5.2vw,3.7rem);letter-spacing:-.032em;line-height:1.05}
.sec-title{font-size:clamp(1.9rem,3.8vw,2.85rem);letter-spacing:-.028em;line-height:1.1;
  margin-bottom:18px;max-width:20ch}
.sec-lead{font-size:1.075rem;line-height:1.72;color:var(--ink-soft);max-width:62ch}

/* Micro-label. Mono is reserved for labels, codes and measurements. */
.eyebrow{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--blue);font-weight:500;
  display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
.eyebrow::before{content:"";width:30px;height:2px;border-radius:2px;flex:none;
  background:var(--grad-signature);background-size:180% 100%}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border-radius:999px;font-weight:700;font-size:.93rem;
  letter-spacing:-.005em;white-space:nowrap;position:relative;isolation:isolate;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
             background-color .25s ease,border-color .25s ease,color .25s ease}
.btn-primary{
  background-image:var(--grad-cta);background-color:var(--brand-deep);color:#fff;
  box-shadow:0 1px 2px rgba(4,34,60,.10),0 10px 22px -10px rgba(1,75,130,.55)}
.btn-primary::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;
  background-image:var(--grad-cta-hover);transition:opacity .3s ease}
.btn-primary:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(4,34,60,.12),0 18px 34px -12px rgba(1,75,130,.62)}
.btn-primary:hover::after{opacity:1}
.btn-navy{background:var(--card);color:var(--navy);
  border:1.5px solid var(--line-strong);box-shadow:var(--shadow-xs)}
.btn-navy:hover{border-color:var(--brand-blue);color:var(--brand-blue);
  transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-ghost{color:#fff;border:1.5px solid rgba(255,255,255,.42);
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;transform:translateY(-2px)}
/* a faded gradient reads as a rendering fault, not as "off" — go flat */
.btn[disabled]{background-image:none;background-color:var(--paper-2);color:var(--ink-faint);
  border:1.5px solid var(--line);box-shadow:none;pointer-events:none}
.btn[disabled]::after{display:none}
.nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:#fff}

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.topbar{background:linear-gradient(96deg,#04223C 0%,#063A66 44%,#0A5E85 78%,#0C7A6B 104%);
  color:rgba(255,255,255,.80);position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--grad-signature);opacity:.72}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;
  padding-top:10px;padding-bottom:10px;gap:16px}
.tb-note{display:inline-flex;align-items:center;gap:10px;font-size:.76rem;font-weight:600;
  letter-spacing:.01em;color:rgba(255,255,255,.78)}
/* live/verified signal → green */
.tb-note::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--green-glow);animation:tb-pulse 2.8s ease-out infinite}
@keyframes tb-pulse{
  0%{box-shadow:0 0 0 0 rgba(124,232,180,.5)}
  70%{box-shadow:0 0 0 7px rgba(124,232,180,0)}
  100%{box-shadow:0 0 0 0 rgba(124,232,180,0)}}
.tb-links{display:flex;align-items:center;gap:16px;min-width:0}
.tb-links a{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.9);
  font-size:.8rem;font-weight:600;transition:color .2s;min-width:0}
.tb-links a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-links a:hover{color:var(--aqua-bright)}
.tb-links svg{width:13px;height:13px;color:var(--aqua-bright);flex:none}
.tb-sep{width:1px;height:13px;background:rgba(255,255,255,.2)}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{position:sticky;top:0;z-index:60;
  background:rgba(246,251,253,.86);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line);
  transition:box-shadow .35s var(--ease),background-color .35s ease}
.nav.scrolled{background:rgba(248,252,254,.94);
  box-shadow:0 1px 0 var(--line),0 14px 34px -22px rgba(6,58,102,.42)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:16px;color:var(--navy)}
/* No radius: the round clip was there for the old circular medallion. The
   mark is a hexagon now, so clipping it to a circle would shave its points. */
.brand-mark{width:38px;height:38px;flex:none}
/* One line, not two. Stacking forced an 8-letter word to span a 9-letter one,
   which only worked by over-tracking it or blowing it up until it competed
   with the wordmark. Inline sidesteps the whole problem: CLEARFORM leads,
   SCIENCES follows in the same small mono the section eyebrows use. */
.brand-name{font-family:var(--font-display);font-weight:800;font-size:1.12rem;
  letter-spacing:.01em;line-height:1.05;white-space:nowrap}
/* The sub-line is tracked out until its letters span the same measure as
   CLEARFORM above it. The negative right margin cancels the trailing space
   letter-spacing leaves after the final glyph — without it the word sits a
   whole space short of the word above and the lockup reads as misaligned.
   Retuned when the line went from "PEPTIDE SCIENCES" to "SCIENCES": a
   shorter word needs more tracking to cover the same width. */
.brand-name small{font-family:var(--font-mono);font-weight:500;font-size:.72rem;
  letter-spacing:.2em;margin-left:.62em;margin-right:-.2em;
  color:var(--blue);text-transform:uppercase;position:relative;top:-1px}
.nav-links{display:flex;align-items:center;gap:24px;margin-left:auto;padding-left:26px}
.nav-links>a{white-space:nowrap}
.nav-links a{font-size:.92rem;font-weight:600;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--navy)}
/* active page gets the signature underline, not just a colour change */
.nav-links>a:not(.btn){position:relative;padding-bottom:3px}
.nav-links>a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  border-radius:2px;background:var(--grad-signature);background-size:200% 100%;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links>a.active::after,.nav-links>a:not(.btn):hover::after{transform:scaleX(1)}
.nav-cta{margin-left:6px;padding:12px 24px;font-size:.88rem}
.nav-cart{position:relative;display:inline-flex;align-items:center;color:var(--navy);padding:2px;
  transition:color .2s}
.nav-cart:hover{color:var(--blue)}
.nav-cart svg{width:22px;height:22px}
.cart-count{position:absolute;top:-7px;right:-10px;background-image:var(--grad-cta);
  background-color:var(--brand-blue);color:#fff;font-size:.62rem;font-weight:800;
  min-width:18px;height:18px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;padding:0 5px;box-shadow:0 3px 8px -2px rgba(1,75,130,.5)}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:6px;
  min-width:44px;min-height:44px;justify-content:center;align-items:center;margin-right:-10px}
.nav-burger span{width:22px;height:2px;background:var(--navy);border-radius:2px;transition:.3s}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0}
body.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* the cart / burger cluster sits in its own div right after .nav-links */
.nav-links + div{margin-left:20px}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:90vh;min-height:90svh;display:flex;align-items:center;
  color:#fff;overflow:hidden;background:var(--navy-deep)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Deep blue base for legibility, aqua light from the upper right, a green
   note at the lower left — the logo gradient, read as light. */
.hero-veil{position:absolute;inset:0;
  background:
    radial-gradient(1100px 760px at 88% 6%,rgba(3,194,214,.30),transparent 58%),
    radial-gradient(900px 700px at 4% 96%,rgba(30,158,106,.24),transparent 60%),
    linear-gradient(104deg,rgba(4,34,60,.94) 0%,rgba(5,42,74,.86) 44%,rgba(6,58,90,.80) 76%,rgba(8,70,80,.78) 100%),
    linear-gradient(180deg,rgba(4,34,60,.55) 0%,transparent 34%,rgba(4,34,60,.72) 100%)}
.hero-in{position:relative;z-index:2;padding-top:132px;padding-bottom:152px}
.hero .eyebrow{color:var(--aqua-bright);margin-bottom:22px}
.hero .eyebrow::before{background:var(--grad-signature);background-position:100% 0;
  background-size:220% 100%;width:34px}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.3rem);max-width:830px;margin-bottom:24px;color:#fff;
  letter-spacing:-.034em;line-height:1.02;
  text-shadow:0 2px 30px rgba(2,20,38,.35)}
.hero h1 em,.hero h1 i{font-style:normal;color:var(--aqua-bright)}
.hero-sub{font-size:1.12rem;line-height:1.68;color:var(--white-soft);max-width:56ch;margin-bottom:36px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:46px}
.hero-chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.14em;padding:8px 15px;
  border:1px solid rgba(255,255,255,.26);border-radius:999px;color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* proof strip — verification claims, so the marks are green */
.hero-strip{position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:rgba(4,26,46,.78);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.12)}
.hero-strip::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad-signature);opacity:.85}
.hero-strip .wrap{display:flex;justify-content:space-between;gap:20px;
  padding-top:18px;padding-bottom:18px;flex-wrap:wrap}
.hero-strip span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.13em;
  color:rgba(255,255,255,.86);display:flex;align-items:center;gap:9px}
.hero-strip svg{width:15px;height:15px;color:var(--green-glow);flex:none}

/* ==========================================================================
   STATS  — white band, ruled columns, signature rule at the hero seam
   ========================================================================== */
.stats{border-bottom:1px solid var(--line);padding:0;position:relative}
.stats::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad-signature)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  padding-top:52px;padding-bottom:52px}
.stat{text-align:center;padding:4px 22px;border-left:1px solid var(--line-soft)}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(1.8rem,3.1vw,2.5rem);
  font-weight:800;color:var(--navy);letter-spacing:-.035em;line-height:1.05}
.stat b i{font-style:normal;color:var(--blue);font-size:.6em;letter-spacing:-.01em}
.stat span{display:block;margin-top:10px;font-family:var(--font-mono);font-size:.65rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);line-height:1.65;
  max-width:23ch;margin-inline:auto;text-wrap:balance}

/* ==========================================================================
   CATALOG CARDS
   ========================================================================== */
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:52px}
.cat-grid>*{min-width:0}
.p-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s ease;
  position:relative;overflow:hidden}
.p-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad-signature);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.p-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:var(--line-strong)}
.p-card:hover::before{transform:scaleX(1)}
/* Vial photography: a soft daylight box — white at the top, pale blue at the
   edges, a mint float underneath so the glass has something to sit on. */
/* The vial was shown 150px tall, which squeezed the label to about 33px wide
   — narrow enough that the fine print could not resolve at any source
   resolution. Larger art is the only thing that makes it readable. */
.p-fig{height:216px;display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;border-radius:var(--radius-sm);position:relative;overflow:hidden;
  background:
    radial-gradient(120% 88% at 50% 12%,#FFFFFF 0%,#F4FAFD 46%,#E6F1F8 100%);
  box-shadow:inset 0 0 0 1px rgba(14,107,168,.07)}
.p-fig::after{content:"";position:absolute;left:50%;bottom:16px;width:62%;height:16px;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(30,158,106,.20),rgba(14,107,168,.10) 55%,transparent 78%)}
.p-fig img{height:190px;width:auto;position:relative;z-index:1;
  transition:transform .5s var(--ease);
  filter:drop-shadow(0 14px 18px rgba(6,58,102,.24))}
.p-card:hover .p-fig img{transform:translateY(-7px) scale(1.04)}
.p-tag{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin-bottom:7px}
/* Names run one line to four; letting the name absorb the slack keeps the
   dose picker, price and button aligned across a row. */
.p-card h3{font-size:1.06rem;color:var(--navy);margin-bottom:6px;letter-spacing:-.018em;
  min-height:2.5em;display:flex;align-items:flex-end;flex:1 0 auto}
.p-desc{font-size:.85rem;color:#4E6A82;margin-bottom:14px;flex:1}
.p-row{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.p-price{font-family:var(--font-display);font-weight:800;color:var(--navy);font-size:1.08rem;
  letter-spacing:-.02em}
.p-price small{display:block;font-family:var(--font-sans);font-weight:500;font-size:.66rem;
  color:var(--ink-faint);letter-spacing:0;margin-top:3px}
.p-variant{width:100%;font-family:inherit;font-size:.8rem;padding:10px 13px;
  border:1.5px solid var(--line);border-radius:var(--radius-xs);background-color:var(--paper);
  color:var(--ink);-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23506B85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;
  padding-right:34px;transition:border-color .2s,background-color .2s}
.p-variant:hover{border-color:var(--line-strong)}
.p-variant:focus{outline:none;border-color:var(--blue);background-color:#fff}
.btn-add{width:100%;padding:12px 16px;font-size:.82rem;border-radius:999px;font-weight:700;
  color:#fff;background-color:var(--navy);background-image:var(--grad-cta);
  box-shadow:0 6px 16px -8px rgba(1,75,130,.55);
  transition:background-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease),color .2s}
.btn-add:hover{background-image:var(--grad-cta-hover);transform:translateY(-2px);
  box-shadow:0 12px 24px -10px rgba(1,75,130,.6)}
/* added → confirmation is green */
.btn-add.added{background-image:none;background-color:var(--green-ink);transform:none}
.btn-add:disabled,.btn-add.is-locked{background-image:none;background-color:var(--paper-2);
  color:var(--ink-faint);box-shadow:none;border:1.5px solid var(--line);cursor:not-allowed}
.btn-add:disabled:hover,.btn-add.is-locked:hover{background-color:var(--paper-2);transform:none;
  box-shadow:none}

/* catalog sections (shop.html) */
.cat-h{font-family:var(--font-display);font-size:clamp(1.35rem,2.6vw,1.9rem);color:var(--navy);
  margin:8px 0 6px;font-weight:800;letter-spacing:-.026em}
.cat-h+.cat-grid{margin-top:26px}
.cat-sub{font-size:.92rem;color:#4E6A82;margin-bottom:4px}
#catalog-root .cat-grid+.cat-h{margin-top:72px;padding-top:52px;
  border-top:1px solid var(--line)}

/* ==========================================================================
   AUDIENCE CARDS — colour-blocked: one deep, one tinted, one white
   ========================================================================== */
.aud-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:52px}
.aud-grid>*{min-width:0}
.aud-card{position:relative;overflow:hidden;border-radius:var(--radius);
  padding:36px 30px 32px;display:flex;flex-direction:column;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
/* The signature rule is permanent on the three audience tiles — with only
   three of them it reads as the system, not as noise. */
.aud-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:var(--grad-signature)}
.aud-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.aud-card h3{font-size:1.22rem;margin-bottom:12px;letter-spacing:-.024em}
.aud-card p{font-size:.92rem;line-height:1.7;color:var(--ink-soft);flex:1;margin-bottom:22px}
.aud-ico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;margin-bottom:22px;flex:none}
.aud-ico svg{width:23px;height:23px}
.aud-link{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:6px;
  border-top:1px solid var(--line);padding-top:18px;margin-top:auto;
  transition:color .2s,gap .3s var(--ease)}
.aud-link:hover{color:var(--navy);gap:11px}
/* 1 — deep gradient */
.aud-card:first-child{background-image:var(--grad-card);border-color:transparent;color:#fff;
  box-shadow:var(--shadow-dark)}
.aud-card:first-child::after{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(79,216,230,.24),transparent 66%)}
.aud-card:first-child>*{position:relative;z-index:1}
.aud-card:first-child h3{color:#fff}
.aud-card:first-child p{color:rgba(255,255,255,.84)}
.aud-card:first-child .aud-ico{background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.aud-card:first-child .aud-ico svg{color:var(--aqua-bright)}
.aud-card:first-child .aud-link{color:var(--aqua-bright);border-color:rgba(255,255,255,.22)}
.aud-card:first-child .aud-link:hover{color:#fff}
/* 2 — pale blue tint */
.aud-card:nth-child(2){background-image:var(--grad-mint);background-color:var(--paper-2)}
.aud-card:nth-child(2) .aud-ico{background:rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px rgba(14,107,168,.14)}
.aud-card:nth-child(2) .aud-ico svg{color:var(--blue)}
/* 3 — white, green mark */
.aud-card:nth-child(3) .aud-ico{background:var(--green-soft);
  box-shadow:inset 0 0 0 1px var(--green-line)}
.aud-card:nth-child(3) .aud-ico svg{color:var(--green-ink)}

/* ==========================================================================
   VALUE GRID — spec rows: mark left, copy right
   ========================================================================== */
.val-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:52px}
.val-grid>*{min-width:0}
.val{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:18px;row-gap:7px;
  align-content:start;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:26px 26px 28px;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.val::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad-signature);opacity:.75;transition:opacity .4s ease}
.val:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.val:hover::before{opacity:1}
.val-ico{grid-column:1;grid-row:1/span 2;width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(148deg,#E7F2FA 0%,#E2F3F0 60%,#DEF4E8 100%);
  box-shadow:inset 0 0 0 1px rgba(14,107,168,.12)}
.val-ico svg{width:22px;height:22px;color:var(--brand-deep)}
.val h3{grid-column:2;grid-row:1;font-size:1.02rem;letter-spacing:-.02em;align-self:center}
.val p{grid-column:2;grid-row:2;font-size:.89rem;line-height:1.68;color:var(--ink-soft)}
/* the one filled tile (about.html) has no mark */
.val--fill{grid-template-columns:minmax(0,1fr);background-image:var(--grad-card);
  background-color:var(--navy);border-color:transparent;color:#fff;padding:30px 28px;
  box-shadow:var(--shadow-dark);align-content:center;row-gap:10px}
.val--fill::before{display:none}
.val--fill:hover{transform:translateY(-4px);box-shadow:var(--shadow-dark);border-color:transparent}
.val--fill h3,.val--fill p{grid-column:1;grid-row:auto}
.val--fill h3{color:#fff;font-size:1.14rem}
.val--fill p{color:rgba(255,255,255,.84)}

/* ==========================================================================
   PROCESS — the signature gradient runs across the three steps
   ========================================================================== */
.proc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:52px;
  counter-reset:step}
.proc-grid>*{min-width:0}
.step{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:34px 28px 30px;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.step::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background-image:var(--grad-signature);background-size:300% 100%}
.step:nth-child(1)::after{background-position:0% 0}
.step:nth-child(2)::after{background-position:50% 0}
.step:nth-child(3)::after{background-position:100% 0}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.2em;color:var(--blue);font-weight:600;display:block;
  margin-bottom:14px}
.step h3{font-size:1.06rem;margin-bottom:9px;letter-spacing:-.02em}
.step p{font-size:.89rem;line-height:1.68;color:var(--ink-soft)}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{background-image:var(--grad-band);background-color:var(--navy-deep);
  border-radius:var(--radius);padding:66px 58px;color:#fff;display:flex;align-items:center;
  justify-content:space-between;gap:36px;flex-wrap:wrap;position:relative;overflow:hidden;
  box-shadow:var(--shadow-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--shadow-dark)}
.cta-band::after{content:"";position:absolute;right:-100px;top:-110px;width:380px;height:380px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(3,194,214,.30),rgba(30,158,106,.10) 50%,transparent 72%)}
.cta-band h2{font-size:clamp(1.6rem,2.9vw,2.2rem);margin-bottom:12px;color:#fff;
  letter-spacing:-.028em;max-width:22ch}
.cta-band p{color:var(--white-soft);max-width:52ch;font-size:1rem;line-height:1.68}
.cta-band>div,.cta-band>a{position:relative;z-index:2}
/* on a dark band the primary button inverts — white, not gradient-on-gradient */
.cta-band .btn-primary{background-image:none;background-color:#fff;color:var(--navy);
  box-shadow:0 10px 26px -12px rgba(2,20,38,.7)}
.cta-band .btn-primary::after{display:none}
.cta-band .btn-primary:hover{background-color:var(--brand-mint);color:#053B2A;
  box-shadow:0 18px 34px -14px rgba(2,20,38,.75)}

/* ==========================================================================
   PAGE HERO (subpages)
   ========================================================================== */
.page-hero{background-image:var(--grad-band);background-color:var(--navy-deep);color:#fff;
  padding:120px 0 86px;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 520px at 92% 0%,rgba(3,194,214,.24),transparent 62%),
    radial-gradient(700px 520px at 0% 110%,rgba(30,158,106,.20),transparent 60%)}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--grad-signature)}
.page-hero>.wrap{position:relative;z-index:2}
.page-hero .eyebrow{color:var(--aqua-bright)}
.page-hero .eyebrow::before{background:var(--grad-signature);background-position:100% 0;
  background-size:220% 100%}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:18ch;margin-bottom:18px;color:#fff}
.page-hero p{color:var(--white-soft);max-width:60ch;font-size:1.075rem;line-height:1.7}
.page-hero.compact{padding:92px 0 62px}

/* ==========================================================================
   SPLIT + CHECK LIST
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split>*{min-width:0}
.split-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-hover);
  position:relative}
.split-media img{width:100%}
.check-list{margin-top:26px;display:grid;gap:14px}
.check-list li{display:flex;gap:13px;font-size:.94rem;line-height:1.65;color:var(--ink-soft)}
/* verified → green */
.check-list svg{width:20px;height:20px;color:var(--green-ink);flex:none;margin-top:3px}
.check-list b{color:var(--navy);font-weight:700}

/* ==========================================================================
   SEGMENTS (who we serve)
   ========================================================================== */
.seg{display:grid;grid-template-columns:88px minmax(0,1fr);gap:28px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
  position:relative;overflow:hidden}
.seg>*{min-width:0}
.seg+.seg{margin-top:20px}
.seg:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--line-strong)}
.seg-ico{width:66px;height:66px;border-radius:18px;background-image:var(--grad-card);
  background-color:var(--navy);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 22px -12px rgba(1,75,130,.7)}
.seg-ico svg{width:30px;height:30px;color:var(--aqua-bright)}
.seg h3{font-size:1.16rem;margin-bottom:7px;letter-spacing:-.022em}
.seg p{font-size:.91rem;line-height:1.7;color:var(--ink-soft)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{max-width:840px;margin:52px auto 0}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow-xs);
  transition:box-shadow .35s var(--ease),border-color .3s}
.faq-item:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.faq-item.open{border-color:var(--blue-pale);box-shadow:var(--shadow)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;
  text-align:left;padding:22px 26px;font-family:var(--font-display);font-weight:700;
  font-size:1.02rem;color:var(--navy);letter-spacing:-.018em}
.faq-q .fx{width:28px;height:28px;flex:none;border-radius:50%;background:var(--blue-tint);
  color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:600;
  transition:transform .35s var(--ease),background .3s,color .3s}
.faq-item.open .fx{transform:rotate(45deg);background-image:var(--grad-cta);
  background-color:var(--blue);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-a p{padding:0 26px 24px;font-size:.93rem;line-height:1.72;color:var(--ink-soft)}

/* ==========================================================================
   CONTACT / FORMS
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:32px;align-items:start}
.contact-grid>*{min-width:0}
.info-card{background-image:var(--grad-card);background-color:var(--navy);color:#fff;
  border-radius:var(--radius);padding:40px 34px;box-shadow:var(--shadow-dark);
  position:relative;overflow:hidden}
/* the contact form is roughly twice as tall as the details panel — pin it so
   the phone number stays in view instead of scrolling away above a void */
.contact-grid>.info-card{position:sticky;top:104px}
.info-card::after{content:"";position:absolute;right:-90px;bottom:-110px;width:300px;height:300px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(3,194,214,.24),transparent 68%)}
.info-card>*{position:relative;z-index:1}
.info-card h3{font-size:1.28rem;margin-bottom:22px;color:#fff}
.info-row{display:flex;gap:14px;padding:15px 0;border-top:1px solid rgba(255,255,255,.16);
  font-size:.9rem;position:relative;z-index:1}
.info-row:first-of-type{border-top:0}
.info-row svg{width:20px;height:20px;color:var(--aqua-bright);flex:none;margin-top:2px}
.info-row b{display:block;font-size:.68rem;font-family:var(--font-mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--aqua-bright);margin-bottom:4px;font-weight:500}
.info-row a{color:#fff}
.info-row a:hover{color:var(--brand-mint)}

.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:40px 36px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.form-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad-signature)}
.form-card h3{color:var(--navy);font-size:1.28rem;margin-bottom:6px;letter-spacing:-.024em}
.form-card .form-note{font-size:.87rem;color:#4E6A82;margin-bottom:26px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;min-width:0}
.f-grid>*{min-width:0}
.f-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.f-field.full{grid-column:1/-1}
.f-field label{font-family:var(--font-mono);font-size:.64rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#4E6A82}
/* `:not([type=checkbox]):not([type=radio])` is load-bearing. This block is
   written for text fields, but a bare `.f-field input` also catches every
   checkbox and radio in a field — stripping `appearance` from a checkbox
   removes the tick along with the native box, so it renders as an empty
   white rounded rectangle that looks EXACTLY the same checked and
   unchecked. The state toggled fine; there was simply nothing to see.
   It cost the "signature required" box on checkout and the close-at-zero
   box in admin. */
.f-field input:not([type=checkbox]):not([type=radio]),
.f-field select,.f-field textarea{
  font-family:inherit;font-size:.95rem;padding:13px 15px;border:1.5px solid var(--line);
  border-radius:var(--radius-xs);background-color:var(--white);color:var(--ink);
  width:100%;max-width:100%;min-width:0;
  transition:border-color .2s,box-shadow .2s,background-color .2s;
  -webkit-appearance:none;appearance:none}

/* Native rendering, brand colour. `accent-color` tints the browser's own
   tick, which means there is no custom-drawn state that can go missing. */
.f-field input[type=checkbox],.f-field input[type=radio]{
  appearance:auto;-webkit-appearance:auto;
  width:18px;height:18px;min-width:18px;flex:none;
  padding:0;margin:0;border:0;border-radius:0;background:none;
  accent-color:var(--blue);cursor:pointer}
.f-field input::placeholder,.f-field textarea::placeholder{color:#7A90A6}
.f-field input:hover,.f-field select:hover,.f-field textarea:hover{border-color:var(--line-strong)}
.f-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23506B85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:14px;
  padding-right:42px}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,107,168,.14)}
.f-field textarea{resize:vertical;min-height:118px}
.form-card .btn{width:100%;margin-top:24px}
.form-legal{font-size:.74rem;color:var(--ink-faint);margin-top:16px;text-align:center;line-height:1.6}
/* label left, "forgot password?" flush right on the same baseline */
.f-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.f-label-row label{margin:0}
.f-label-row a{font-size:.73rem;font-weight:600;color:#4E6A82;text-decoration:underline;
  text-underline-offset:2px;white-space:nowrap;transition:color .2s}
.f-label-row a:hover{color:var(--blue)}

/* ==========================================================================
   AUTH PAGES
   ========================================================================== */
.auth-shell{max-width:520px;margin:0 auto}
.auth-shell.wide{max-width:860px}
.auth-shell .form-card{padding:42px 38px}
.auth-alt{text-align:center;font-size:.88rem;color:var(--ink-soft);margin-top:22px}
.auth-alt a{color:var(--blue);font-weight:700}
.auth-alt a:hover{text-decoration:underline;text-underline-offset:3px}

/* registration: account type picker */
.acct-type{margin-bottom:28px}
.at-label{font-size:.96rem;font-weight:700;color:var(--navy);margin-bottom:13px}
.at-label span{font-weight:500;color:var(--ink-faint);font-size:.85rem}
.at-opt{display:block;margin-bottom:11px;cursor:pointer}
.at-opt input{position:absolute;opacity:0;pointer-events:none}
.at-box{display:block;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:17px 19px;background:var(--white);
  transition:border-color .2s,background-color .2s,box-shadow .3s var(--ease)}
.at-opt:hover .at-box{border-color:var(--line-strong)}
.at-opt input:checked+.at-box{border-color:var(--blue);background:var(--blue-tint);
  box-shadow:0 0 0 3px rgba(14,107,168,.12)}
.at-box b{display:block;font-size:.96rem;color:var(--navy);margin-bottom:5px}
.at-box small{display:block;font-size:.81rem;line-height:1.58;color:var(--ink-soft)}
.at-err{margin-top:10px}
.type-block{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.type-block h4{font-size:.68rem;color:var(--blue);margin-bottom:16px;font-family:var(--font-mono);
  letter-spacing:.16em;text-transform:uppercase;font-weight:500}

/* ==========================================================================
   ALERTS  — green means resolved, not decorative
   ========================================================================== */
.alert{border-radius:var(--radius-xs);padding:15px 17px;font-size:.87rem;margin-bottom:20px;
  display:flex;gap:11px;align-items:flex-start;line-height:1.55}
.alert svg{width:17px;height:17px;flex:none;margin-top:2px}
.alert-error{background:#FDECEC;color:#8E2020;border:1px solid #F3C6C6}
.alert-ok{background:var(--green-soft);color:#0B6141;border:1px solid var(--green-line)}
.alert-warn{background:#FFF6E5;color:#8A5A00;border:1px solid #F3DCAE}
.alert-info{background:var(--blue-tint);color:#2A4C6B;border:1px solid var(--blue-pale)}
.alert[hidden]{display:none}

/* ==========================================================================
   ACCOUNT DASHBOARD
   ========================================================================== */
.acct-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
.acct-grid>*{min-width:0}
.acct-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;box-shadow:var(--shadow)}
.acct-card+.acct-card{margin-top:24px}
.acct-card h3{color:var(--navy);font-size:1.16rem;margin-bottom:5px;letter-spacing:-.024em}
.acct-card .ac-sub{font-size:.83rem;color:#4E6A82;margin-bottom:22px}
.ac-sub code{font-family:var(--font-mono);font-size:.85em;background:var(--paper);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--navy)}
.acct-card form>.btn,.acct-card form button[type=submit]{margin-top:26px}
.acct-side{position:sticky;top:104px}
.acct-meta{display:grid;gap:0;color:var(--ink-faint);font-size:.72rem}
.acct-meta div{display:flex;justify-content:space-between;gap:14px;padding:12px 0;
  border-top:1px solid var(--line-soft);font-size:.86rem;color:var(--ink-soft)}
.acct-meta div:first-child{border-top:0}
.acct-meta b{color:var(--navy);font-weight:700;text-align:right}
.acct-site{color:var(--blue);font-weight:600;word-break:break-all}
.acct-site:hover{text-decoration:underline}

/* status pills — green = approved/settled, amber = waiting, red = stopped */
.status-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:6px 13px;border-radius:999px}
.status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st-pending,.st-awaiting_payment{background:#FFF6E5;color:#8A5A00}
.st-approved,.st-paid,.st-delivered{background:var(--green-soft);color:#0B6141}
.st-rejected,.st-suspended,.st-cancelled{background:#FDECEC;color:#8E2020}
.st-processing,.st-shipped{background:var(--blue-tint);color:#0B4F7D}
.st-refunded{background:var(--paper-2);color:var(--ink-soft)}

/* ==========================================================================
   ORDER TABLES
   ========================================================================== */
.ord-table{width:100%;border-collapse:collapse;font-size:.87rem}
.ord-table th{text-align:left;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:#4E6A82;font-weight:500;padding:0 12px 13px 0;
  border-bottom:1.5px solid var(--line)}
.ord-table td{padding:15px 12px 15px 0;border-bottom:1px solid var(--line-soft);
  color:var(--ink-soft);vertical-align:top}
.ord-table tr:last-child td{border-bottom:0}
.ord-table tbody tr{transition:background-color .2s}
.ord-table tbody tr:hover{background:rgba(14,107,168,.035)}
.ord-table a.ord-num{font-family:var(--font-mono);font-weight:600;color:var(--navy)}
.ord-table a.ord-num:hover{color:var(--blue)}
.ord-table td b{color:var(--navy)}
.ord-table td>b,.ord-table td>a.ord-num,.ord-table td>span{line-height:1.45}
.ord-table td small{display:block;margin-top:2px;line-height:1.4}
.ord-table .status-pill{margin-top:-2px}
.ord-empty{text-align:center;color:var(--ink-faint);padding:48px 0;font-size:.9rem}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.ord-ship{font-size:.79rem;line-height:1.5;max-width:210px}
.ord-ship b{color:var(--navy);font-weight:700}
.ord-ship span{color:var(--ink-faint)}

/* saved shipping addresses */
.addr-card{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius-sm);padding:17px 19px;
  margin-bottom:12px;background:var(--card);transition:border-color .25s,background-color .25s}
.addr-card:hover{border-color:var(--line-strong)}
.addr-card.is-default{border-color:var(--blue-pale);background:var(--blue-tint)}
.addr-main{flex:1;min-width:200px;line-height:1.55}
.addr-main b{display:block;color:var(--navy);font-size:.93rem;margin-bottom:2px}
.addr-main span{display:block;font-size:.83rem;color:var(--ink-soft)}
.addr-main .addr-phone{color:var(--ink-faint);font-size:.78rem;margin-top:3px}
/* Both of these are <span>s inside .addr-main, so they lose to the
   `.addr-main span` block rule above unless they match it for specificity —
   the "Default" badge was rendering full-width in body ink on its own fill. */
.addr-main .addr-label,.addr-label{display:inline-block;width:auto;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:#4E6A82;margin-bottom:6px;margin-right:8px}
.addr-main .addr-badge,.addr-badge{display:inline-block;width:auto;
  font-family:var(--font-mono);font-size:.55rem;letter-spacing:.12em;
  text-transform:uppercase;background-image:var(--grad-cta);background-color:var(--blue);color:#fff;
  padding:4px 9px;border-radius:999px;margin-bottom:6px}
.addr-acts{display:flex;gap:7px;flex-wrap:wrap}

/* ==========================================================================
   CART DRAWER
   ========================================================================== */
.cart-overlay{position:fixed;inset:0;background:rgba(4,26,46,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:80}
/* visibility, not just transform: the closed drawer was still in the
   accessibility tree and still reachable by keyboard from every page */
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--card);
  z-index:90;transform:translateX(105%);visibility:hidden;
  transition:transform .42s var(--ease),visibility .42s;
  display:flex;flex-direction:column;box-shadow:-30px 0 70px -24px rgba(2,24,44,.45)}
body.cart-open .cart-overlay{opacity:1;pointer-events:auto}
body.cart-open .cart-drawer{transform:translateX(0);visibility:visible}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:24px 26px;
  border-bottom:1px solid var(--line);position:relative}
.cart-head::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad-signature)}
.cart-head h3{color:var(--navy);font-size:1.12rem;letter-spacing:-.022em}
.cart-close{font-size:1.5rem;color:var(--ink-soft);line-height:1;padding:4px 8px;
  min-width:40px;min-height:40px;border-radius:999px;transition:background .2s,color .2s}
.cart-close:hover{background:var(--paper);color:var(--navy)}
.cart-items{flex:1;overflow-y:auto;padding:10px 26px}
.cart-line{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line-soft)}
.cart-line img{height:54px;width:auto;margin:0 auto}
.cart-line h4{font-size:.89rem;color:var(--navy);letter-spacing:-.015em}
.cart-line .cl-meta{font-size:.73rem;color:var(--ink-faint)}
.qty{display:inline-flex;align-items:center;gap:10px;margin-top:7px}
.qty button{width:24px;height:24px;border-radius:7px;background:var(--paper);
  border:1px solid var(--line);font-weight:700;color:var(--navy);font-size:.8rem;
  display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.qty button:hover{background:var(--blue-tint);border-color:var(--blue-pale)}
.qty span{font-size:.83rem;font-weight:700;min-width:16px;text-align:center}
.cl-price{font-weight:800;color:var(--navy);font-size:.89rem}
.cl-remove{font-size:.69rem;color:var(--ink-faint);text-decoration:underline;margin-top:6px;
  transition:color .2s}
.cl-remove:hover{color:#8E2020}
.cart-empty{text-align:center;color:var(--ink-faint);padding:60px 0;font-size:.9rem;line-height:1.7}
.cart-foot{padding:22px 26px;border-top:1px solid var(--line);background:var(--paper)}
.cart-total{display:flex;justify-content:space-between;font-weight:800;color:var(--navy);
  margin-bottom:16px;font-size:1.02rem}
.cart-foot .btn{width:100%}
.cart-foot .cf-note{font-size:.71rem;color:var(--ink-faint);text-align:center;margin-top:11px;
  line-height:1.55}

/* ==========================================================================
   CHECKOUT
   ========================================================================== */
.co-grid{display:grid;grid-template-columns:1.4fr minmax(0,1fr);gap:32px;align-items:start}
.co-grid>*{min-width:0}
.co-summary{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;box-shadow:var(--shadow);position:sticky;top:104px}
.co-summary h3{color:var(--navy);margin-bottom:16px;font-size:1.14rem;letter-spacing:-.024em}
.co-line{display:flex;justify-content:space-between;gap:12px;font-size:.89rem;padding:11px 0;
  border-bottom:1px solid var(--line-soft);color:var(--ink-soft)}
.co-line b{color:var(--navy)}
.co-line small{color:var(--ink-faint);font-size:.75rem}
.co-total{display:flex;justify-content:space-between;font-family:var(--font-display);font-weight:800;
  color:var(--navy);padding-top:16px;font-size:1.08rem;letter-spacing:-.02em}
.co-note{font-size:.75rem;color:#4E6A82;margin-top:13px;line-height:1.6}
.co-item{padding:15px 0;border-bottom:1px solid var(--line-soft)}
.co-item:last-child{border-bottom:0}
.co-item-top{display:flex;justify-content:space-between;gap:12px;font-size:.89rem;color:var(--ink-soft)}
.co-item-top b{color:var(--navy)}
.co-item-top small{color:var(--ink-faint);font-size:.75rem}
.co-margin{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.co-margin label{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:#4E6A82}
.co-margin-in{display:inline-flex;align-items:center;gap:5px}
.co-margin-in input{width:84px;font-family:inherit;font-size:.85rem;padding:7px 10px;
  border:1.5px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink)}
.co-margin-in input:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(14,107,168,.14)}
.co-margin-in span{font-size:.83rem;color:var(--ink-soft);font-weight:700}
.co-margin small{font-size:.73rem;color:var(--ink-faint)}

/* ==========================================================================
   PAYMENT METHOD CHOOSER + INSTRUCTIONS
   ========================================================================== */
.pay-methods{display:grid;gap:12px;margin-bottom:8px}
.pay-opt{position:relative;display:flex;gap:14px;align-items:flex-start;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:19px 21px;
  cursor:pointer;background:var(--white);
  transition:border-color .2s,background-color .2s,box-shadow .3s var(--ease)}
.pay-opt:hover{border-color:var(--line-strong)}
.pay-opt input{position:absolute;opacity:0;pointer-events:none}
.pay-opt .pay-dot{width:19px;height:19px;border-radius:50%;border:2px solid var(--line-strong);
  flex:none;margin-top:2px;transition:border-color .2s,box-shadow .2s}
.pay-opt input:checked~.pay-dot{border-color:var(--blue);box-shadow:inset 0 0 0 4px var(--blue)}
.pay-opt:has(input:checked){border-color:var(--blue);background:var(--blue-tint);
  box-shadow:0 0 0 3px rgba(14,107,168,.12)}
.pay-opt h4{font-size:.96rem;color:var(--navy);margin-bottom:4px;display:flex;align-items:center;
  gap:9px;flex-wrap:wrap}
.pay-opt p{font-size:.8rem;color:var(--ink-soft);line-height:1.55}
/* A payment option that exists but can't be used right now — account credit
   that doesn't cover the order. Shown rather than hidden, because a balance
   that silently disappears from the page reads as a bug. */
.pay-opt.is-disabled{opacity:.62;cursor:not-allowed;background:var(--paper-2)}
.pay-opt.is-disabled:hover{border-color:var(--line)}
.pay-opt.is-disabled .pay-dot{opacity:.5}
.pay-badge{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  background-image:var(--grad-cta);background-color:var(--navy);color:#fff;padding:4px 9px;
  border-radius:999px;font-weight:600}
.pay-badge.soft{background-image:none;background-color:var(--green-soft);color:#0B6141}

.pay-detail{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:6px 20px;margin:20px 0}
.pay-detail div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-top:1px solid var(--line);font-size:.88rem;align-items:center}
.pay-detail div:first-child{border-top:0}
.pay-detail span{color:#4E6A82;font-size:.68rem;font-family:var(--font-mono);letter-spacing:.14em;
  text-transform:uppercase}
.pay-detail b{color:var(--navy);font-weight:700;text-align:right;word-break:break-all}
.pay-ref{background-image:var(--grad-card);background-color:var(--navy);color:#fff;
  border-radius:var(--radius-sm);padding:24px;text-align:center;margin:20px 0;
  box-shadow:var(--shadow-dark)}
.pay-ref span{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--aqua-bright);margin-bottom:9px}
.pay-ref b{font-size:1.55rem;font-weight:800;letter-spacing:.02em;font-family:var(--font-mono)}
.copy-btn{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);border:1px solid var(--line-strong);background:var(--card);padding:6px 11px;
  border-radius:999px;flex:none;transition:background .2s,color .2s,border-color .2s}
.copy-btn:hover{background-image:var(--grad-cta);background-color:var(--blue);color:#fff;
  border-color:transparent}

/* ==========================================================================
   NAV AUTH — account chip + dropdown
   ========================================================================== */
.nav-auth{font-size:.92rem;font-weight:600;color:var(--ink-soft);transition:color .2s}
a.nav-auth:hover{color:var(--navy)}
.nav-acct-wrap{position:relative;display:flex;align-items:center}
.nav-acct-btn{display:inline-flex;align-items:center;gap:8px;max-width:230px;font-size:.88rem;
  font-weight:700;color:var(--navy);padding:9px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-xs);
  transition:border-color .2s,background-color .2s,box-shadow .3s var(--ease)}
.nav-acct-btn:hover{border-color:var(--blue-pale);background:var(--blue-tint)}
.nav-acct-btn .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);flex:none}
/* approved = verified = green */
body.is-approved .nav-acct-btn .dot,.cf-approved .nav-acct-ghost .dot{background:var(--green)}
.nav-acct-btn .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-acct-btn .caret{width:11px;height:11px;flex:none;color:var(--ink-faint);transition:transform .25s}
.nav-acct-wrap.open .nav-acct-btn{border-color:var(--blue-pale);background:var(--blue-tint)}
.nav-acct-wrap.open .caret{transform:rotate(180deg)}
.nav-acct-menu{position:absolute;top:calc(100% + 12px);right:0;min-width:252px;max-width:290px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-hover);padding:7px;opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .22s ease,transform .28s var(--ease),visibility .22s;z-index:70;overflow:hidden}
.nav-acct-wrap.open .nav-acct-menu{opacity:1;visibility:visible;transform:none}
.nav-acct-menu .who{padding:11px 13px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.nav-acct-menu .who b{display:block;font-size:.87rem;color:var(--navy);line-height:1.3;
  word-break:break-word}
.nav-acct-menu .who span{display:block;font-size:.73rem;color:var(--ink-faint);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-acct-menu a{display:block;padding:10px 13px;border-radius:9px;font-size:.88rem;font-weight:600;
  color:var(--ink-soft);transition:background .18s,color .18s}
.nav-acct-menu a:hover{background:var(--blue-tint);color:var(--navy)}
.nav-acct-menu a.danger{color:#8E2020;margin-top:4px;border-top:1px solid var(--line);
  border-radius:0 0 9px 9px;padding-top:12px}
.nav-acct-menu a.danger:hover{background:#FDECEC}
.nav-acct-ghost .nav-acct-btn{cursor:default}
.nav-acct-ghost .dot{background:var(--ink-faint)}
/* Painted from a localStorage hint before any JS runs, so a signed-in visitor
   never sees the logged-out nav flash past. */
.cf-auth .nav-auth-boot{display:none}
.cf-approved .nav-cta{display:none !important}

/* ==========================================================================
   ADMIN
   ========================================================================== */
.admin-tabs{display:flex;gap:9px;margin-bottom:28px;flex-wrap:wrap}
.admin-tab{font-size:.85rem;font-weight:700;padding:10px 19px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);color:var(--ink-soft);
  transition:background .25s,color .25s,border-color .25s,box-shadow .3s var(--ease)}
.admin-tab:hover{border-color:var(--line-strong);color:var(--navy)}
.admin-tab.active{background-image:var(--grad-cta);background-color:var(--navy);color:#fff;
  border-color:transparent;box-shadow:0 8px 20px -10px rgba(1,75,130,.6)}
.mini-btn{font-size:.73rem;font-weight:700;padding:8px 14px;border-radius:999px;
  background-image:var(--grad-cta);background-color:var(--navy);color:#fff;
  transition:filter .2s,transform .25s var(--ease),background-color .2s}
.mini-btn:hover{transform:translateY(-1px);background-image:var(--grad-cta-hover)}
.mini-btn.ghost{background-image:none;background-color:var(--card);color:var(--ink-soft);
  border:1px solid var(--line)}
.mini-btn.ghost:hover{background-color:var(--blue-tint);color:var(--navy);border-color:var(--blue-pale)}
.at-chip{display:inline-block;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;
  text-transform:uppercase;background:var(--blue-tint);color:#0B4F7D;padding:3px 8px;
  border-radius:999px;font-weight:600}
.adj-cell{display:inline-flex;align-items:center;gap:5px}
.adj-cell input{width:62px;font-family:inherit;font-size:.83rem;padding:7px 9px;
  border:1.5px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink)}
.adj-cell input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,107,168,.14)}
.adj-cell span{font-size:.81rem;color:var(--ink-soft);font-weight:700}
/* admin: price tier picker — saves the moment it changes, so it shows the
   saved state itself rather than sitting next to a Set button. */
.tier-sel{font-family:inherit;font-size:.8rem;padding:7px 9px;border:1.5px solid var(--line);
  border-radius:8px;background:var(--white);color:var(--ink);cursor:pointer}
.tier-sel:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,107,168,.14)}
.tier-sel:disabled{opacity:.55;cursor:progress}
.tier-sel.saved{border-color:var(--green-line,#7bbf9a);background:var(--green-soft,#eef8f2)}

/* admin: catalog editor */
.prod-edit{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:16px;
  overflow:hidden;background:var(--card);box-shadow:var(--shadow-xs)}
.pe-head{display:flex;align-items:center;gap:14px;padding:15px 19px;background:var(--paper);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.pe-head img{width:38px;height:38px;object-fit:contain;flex:none}
.pe-title{flex:1;min-width:150px;line-height:1.35}
.pe-title b{display:block;color:var(--navy);font-size:.95rem}
.pe-title span{font-size:.75rem;color:var(--ink-faint)}
.pe-body{padding:19px}
.pe-body textarea{font-family:inherit;font-size:.89rem;padding:11px 14px;border:1.5px solid var(--line);
  border-radius:var(--radius-xs);background:var(--white);color:var(--ink);width:100%;resize:vertical}
.pe-body textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,107,168,.14)}
.pe-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:#4E6A82;margin-bottom:13px}
.price-rows{display:grid;gap:9px;margin-bottom:12px}
.price-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.price-row span{font-size:.81rem;color:var(--ink-soft)}
.price-row .pr-cur{margin-left:8px;font-weight:700;color:var(--navy)}
.price-row input{font-family:inherit;font-size:.88rem;padding:9px 11px;border:1.5px solid var(--line);
  border-radius:9px;background:var(--white);color:var(--ink)}
.price-row input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,107,168,.14)}
.price-row .pr-qty{width:88px}
.price-row .pr-price{width:110px}
.price-row .pr-del{width:28px;height:28px;border-radius:50%;background:var(--paper);
  border:1px solid var(--line);color:var(--ink-faint);font-size:1rem;line-height:1;flex:none;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.price-row .pr-del:hover{background:#FDECEC;color:#8E2020;border-color:#F3C6C6}
.pe-actions{display:flex;gap:10px;align-items:center;margin-top:19px;padding-top:17px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.pe-actions .btn{padding:11px 21px;font-size:.85rem}
.rf-status{font-family:inherit;font-size:.86rem;padding:10px 15px;border:1.5px solid var(--line);
  border-radius:999px;background:var(--white);color:var(--ink);
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23506B85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:13px;
  padding-right:38px}
.rf-status:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,107,168,.14)}

/* admin: modal */
.modal-wrap{position:fixed;inset:0;z-index:200;background:rgba(4,26,46,.55);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.modal{background:var(--card);border-radius:var(--radius);padding:32px;max-width:600px;width:100%;
  box-shadow:0 40px 90px -30px rgba(2,24,44,.55);max-height:90vh;overflow-y:auto}
.modal h3{color:var(--navy);font-size:1.18rem;margin-bottom:22px;letter-spacing:-.024em}
.modal input[type=file]{font-size:.83rem;padding:11px;background:var(--paper);
  border:1.5px dashed var(--line-strong);border-radius:var(--radius-xs);width:100%}

/* admin: revenue tiles — the gradient edge is the repeated motif */
.rev-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:26px 0 8px}
.rev-tiles>*{min-width:0}
.rev-tile{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:19px 21px;position:relative;overflow:hidden;box-shadow:var(--shadow-xs)}
/* the tile's health reads on the top edge, matching every other panel rule
   in the system rather than hanging a coloured tab off the left */
.rev-tile::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--line-strong)}
.rev-tile.good::before{background:linear-gradient(90deg,var(--brand-blue),var(--brand-green))}
.rev-tile.warn::before{background:#E0A030}
.rev-tile.bad::before{background:#C0504A}
.rev-tile span{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:#4E6A82;margin-bottom:9px}
.rev-tile b{display:block;font-family:var(--font-display);font-size:1.55rem;font-weight:800;
  color:var(--navy);letter-spacing:-.035em;line-height:1.1}
.rev-tile small{display:block;font-size:.73rem;color:var(--ink-faint);margin-top:5px}
.rev-h{color:var(--navy);font-size:.98rem;margin:34px 0 12px;padding-top:26px;
  border-top:1px solid var(--line)}
.acct-card .rev-tiles{grid-template-columns:repeat(3,minmax(0,1fr));margin:18px 0 0}
/* Outstanding / Pending / Paid to you / Lifetime — four, not the credit
   card's three, so it needs its own track count. An id is used because
   .acct-card .rev-tiles above would otherwise win, and every narrower
   breakpoint below has to restate it for the same reason. */
.acct-card #payout-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}

/* staff controls on the order detail page */
.staff-card{background:var(--card);border:1px solid var(--blue-pale);border-radius:var(--radius);
  padding:28px 30px;box-shadow:var(--shadow);margin-bottom:22px;position:relative;overflow:hidden}
.staff-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad-signature)}
.staff-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:19px}
.staff-head h3{color:var(--navy);font-size:1.08rem;letter-spacing:-.024em}
.staff-tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:#4E6A82}
.staff-actions{display:flex;gap:10px;flex-wrap:wrap}
.staff-actions .btn{padding:12px 21px;font-size:.86rem}
.staff-note{font-size:.77rem;color:#4E6A82;margin-top:15px;line-height:1.55}
.staff-card .f-field{margin-bottom:18px}

/* ==========================================================================
   PARENT COMPANY BAND
   The Runex mark is a glossy blue→green gradient X on transparency, so it
   must stay on a light ground. It sits on a white disc to read as a mark.
   ========================================================================== */
.parent{padding-top:0}
.parent-band{display:grid;grid-template-columns:auto minmax(0,1fr);gap:46px;align-items:center;
  background:linear-gradient(126deg,#FFFFFF 0%,#F1F8FC 44%,#E9F5F0 100%);
  border:1px solid rgba(14,107,168,.16);border-radius:var(--radius);
  padding:52px 56px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.parent-band::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#014B82,#1E9E6A 55%,#03C2D6)}
.parent-band::after{content:"";position:absolute;right:-80px;top:-90px;width:340px;height:340px;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(3,194,214,.16),rgba(30,158,106,.06) 48%,transparent 72%)}
.parent-mark{position:relative;z-index:1;width:134px;height:134px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(14,107,168,.14);
  box-shadow:0 2px 4px rgba(4,34,60,.05),0 18px 36px -18px rgba(1,75,130,.4)}
.parent-mark img{width:92px;height:92px}
.parent-body{position:relative;z-index:1}
.parent-body .eyebrow{color:var(--blue)}
.parent-body .eyebrow::before{background:var(--grad-signature)}
.parent-band h2{color:var(--navy);font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:14px;
  letter-spacing:-.026em;max-width:24ch}
.parent-band p{color:var(--ink-soft);max-width:62ch;margin-bottom:28px;font-size:.95rem;line-height:1.72}
.parent-btn{border:1.5px solid rgba(14,107,168,.4);color:#0B4F7D;background:#fff;
  box-shadow:var(--shadow-xs)}
.parent-btn:hover{background-image:var(--grad-cta);background-color:var(--brand-blue);color:#fff;
  border-color:transparent;transform:translateY(-2px);box-shadow:var(--shadow)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{background:var(--navy-deep);color:rgba(255,255,255,.76);padding:88px 0 0;margin-top:0;
  position:relative;overflow:hidden}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad-signature)}
footer::after{content:"";position:absolute;left:-160px;top:-120px;width:560px;height:460px;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(14,107,168,.22),transparent 68%)}
footer .wrap{position:relative;z-index:1}
/* keep a real gap when the preceding section zeroes its bottom padding */
section[style*="padding-bottom:0"]>.wrap>.cta-band{margin-bottom:clamp(56px,7vw,96px)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:52px}
.foot-grid>*{min-width:0}
.foot-brand .brand{color:#fff;margin-bottom:18px}
.foot-brand .brand-name small{color:var(--aqua-bright)}
.foot-brand p{font-size:.86rem;max-width:300px;line-height:1.72;color:rgba(255,255,255,.74)}
footer h3,footer h4{color:#fff}
footer h4{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--aqua-bright);margin-bottom:20px;font-weight:500}
.foot-links li{margin-bottom:11px}
.foot-links a{font-size:.89rem;color:rgba(255,255,255,.74);transition:color .2s}
.foot-links a:hover{color:#fff}
/* sales@clearformpeptidesciences.com is one unbreakable token and the contact
   column is the narrowest — let it break rather than push the grid wide */
.foot-contact li{display:flex;gap:11px;margin-bottom:13px;font-size:.87rem;
  min-width:0;overflow-wrap:anywhere}
.foot-contact svg{width:17px;height:17px;color:var(--aqua-bright);flex:none;margin-top:3px}
.foot-contact a,.foot-contact span{color:rgba(255,255,255,.74)}
.foot-contact a:hover{color:#fff}
.foot-compliance{font-size:.73rem;color:rgba(255,255,255,.54);
  border-top:1px solid rgba(255,255,255,.12);padding:22px 0;line-height:1.78}
/* the parent mark needs a light disc to read on the dark footer */
.foot-cobrand{display:flex;align-items:center;gap:12px;padding:22px 0 6px;
  border-top:1px solid rgba(255,255,255,.12);margin-top:8px}
.foot-cobrand img{flex:none;background:#fff;border-radius:50%;padding:5px;
  box-sizing:content-box;box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}
.foot-cobrand span{font-size:.79rem;color:rgba(255,255,255,.66);letter-spacing:.02em}
.foot-cobrand b{color:rgba(255,255,255,.9);font-weight:700}
.foot-legal{border-top:1px solid rgba(255,255,255,.12);padding:22px 0;font-size:.73rem;
  color:rgba(255,255,255,.5)}
.foot-legal .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ==========================================================================
   UTILITY + MOTION
   ========================================================================== */
/* Several component rules set display, which outranks the [hidden]
   attribute's display:none — make the attribute win everywhere. */
[hidden]{display:none !important}
.spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:cf-spin .7s linear infinite}
@keyframes cf-spin{to{transform:rotate(360deg)}}

/* one authored entrance, driven by .in from main.js */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* the top bar runs out of room for the note plus the full email address
   well before the nav does */
@media(max-width:1120px){
  .topbar .wrap{justify-content:flex-end}
  .tb-note{display:none}
}

@media(max-width:1150px) and (min-width:861px){
  .nav-links{gap:16px;padding-left:16px}
  .nav-links>a{font-size:.85rem}
  .nav-acct-btn{max-width:150px;font-size:.82rem;padding:7px 11px}
  .nav-cta{padding:11px 18px;font-size:.85rem}
}

@media(max-width:980px){
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aud-grid,.val-grid,.proc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr;gap:40px}
  .contact-grid,.co-grid{grid-template-columns:1fr}
  /* relative, never static: .info-card's decorative glow is positioned off its
     own right edge, so dropping the containing block sends it 90px past the
     viewport */
  .co-summary,.contact-grid>.info-card{position:relative;top:auto}
  #catalog>.wrap{grid-template-columns:minmax(0,1fr);column-gap:0}
  #catalog .eyebrow,#catalog .sec-title,#catalog .sec-lead,#catalog>.wrap>div{
    grid-column:1;grid-row:auto}
  #catalog .sec-title{max-width:18ch;margin-bottom:18px}
  #catalog .sec-lead{padding-top:0}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:18px 18px}
  .stat:nth-child(odd){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .cta-band{padding:52px 40px}
  .parent-band{padding:44px 40px;gap:36px}
  .form-card,.auth-shell .form-card{padding:34px 30px}
}

@media(max-width:900px){
  .acct-grid{grid-template-columns:1fr}
  .acct-side{position:relative;top:auto}
  .rev-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acct-card #payout-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The horizontal nav runs out of room around 860px, so it collapses to the
   burger there. */
/* The desktop nav carries six links plus Sign In, a CTA and the cart. It
   stops fitting around 1100px and was wrapping into two rows while the
   burger stayed hidden, so the menu now takes over at the width it
   actually runs out of room. */
@media(max-width:1120px){
  /* absolute against the sticky .nav, so the panel meets the bar's lower edge
     at any scroll position — a fixed panel would need to know the top bar's
     height and only worked here by accident of the nav's backdrop-filter */
  .nav-links{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:flex-start;padding:26px 28px;gap:20px;border-bottom:1px solid var(--line);
    max-height:calc(100svh - 120px);overflow-y:auto;
    transform:translateY(calc(-100% - 140px));visibility:hidden;
    transition:transform .4s var(--ease),visibility .4s;z-index:55;padding-left:28px;
    box-shadow:0 30px 56px -22px rgba(4,34,60,.3)}
  body.menu-open .nav-links{transform:none;visibility:visible}
  .nav-burger{display:flex}
  .nav-cta{display:none}
  .nav-links>a{font-size:.98rem}
  .nav-links>a:not(.btn)::after{display:none}
  .nav-links + div{margin-left:0}
  /* inside the burger panel there is room to lay the account links out flat —
     a floating dropdown inside a fixed panel just clips */
  .nav-acct-wrap{width:100%;display:block}
  .nav-acct-btn{display:none}
  .nav-acct-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 0 0;margin-top:4px;
    min-width:0;max-width:none}
  .nav-acct-menu a{padding:10px 0}
  .nav-acct-menu a:hover{background:transparent}
  .nav-acct-menu a.danger{border-radius:0;padding-left:0}
}

@media(max-width:720px){
  :root{--sp-section:64px}
  .wrap{padding:0 20px}
  .topbar .tb-note{display:none}
  .tb-links{width:100%;justify-content:center}
  .tb-links .tb-mail span{display:none}

  .hero{flex-direction:column;align-items:stretch;min-height:auto}
  .hero-in{margin:auto 0;padding-top:84px;padding-bottom:52px}
  .hero .eyebrow{font-size:.6rem;letter-spacing:.18em;margin-bottom:14px}
  .hero h1{font-size:clamp(1.95rem,8.4vw,2.6rem);margin-bottom:16px;max-width:none}
  .hero-sub{font-size:1rem;margin-bottom:28px}
  .hero-ctas{gap:10px;margin-bottom:30px}
  .hero-ctas .btn{padding:13px 22px;font-size:.9rem}
  .hero-chips{gap:8px}
  .chip{font-size:.57rem;padding:6px 11px;letter-spacing:.09em}
  .hero-strip{position:static;background:rgba(4,26,46,.94)}
  .hero-strip .wrap{justify-content:flex-start;flex-direction:column;align-items:flex-start;
    gap:11px;padding-top:18px;padding-bottom:18px}
  .hero-strip span{font-size:.63rem}

  .stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:38px;padding-bottom:38px}
  .stat{padding:14px 10px}
  .stat b{font-size:1.6rem}
  .stat span{font-size:.6rem;letter-spacing:.1em}

  .sec-title{max-width:none}
  .aud-grid,.val-grid,.proc-grid,.cat-grid{grid-template-columns:minmax(0,1fr)}
  .cat-grid,.aud-grid,.val-grid,.proc-grid{margin-top:36px}
  .val{padding:24px 22px 26px}
  .cta-band{padding:44px 28px;gap:26px}
  .cta-band .btn{width:100%}
  .parent-band{grid-template-columns:minmax(0,1fr);gap:26px;padding:40px 26px;text-align:center}
  .parent-mark{margin:0 auto;width:118px;height:118px}
  .parent-mark img{width:82px;height:82px}
  .parent-body .eyebrow{justify-content:center}
  .parent-band h2,.parent-band p{max-width:none}
  .seg{grid-template-columns:minmax(0,1fr);gap:18px;padding:28px 24px}
  .split-media{border-radius:var(--radius-sm)}
  .f-grid{grid-template-columns:1fr}
  .f-field input,.f-field select,.f-field textarea{font-size:16px}
  .auth-shell .form-card{padding:30px 22px}
  .form-card{padding:30px 22px}
  .acct-card{padding:26px 22px}
  .co-summary{padding:26px 22px}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .faq-q{padding:20px 20px;font-size:.97rem}
  .faq-a p{padding:0 20px 22px}
  .pay-detail b{text-align:left}
  .pay-detail div{flex-direction:column;align-items:flex-start;gap:5px}
  .copy-btn{min-height:32px;padding:7px 12px}
  .qty button{width:30px;height:30px;font-size:.95rem}
  .mini-btn{min-height:34px;display:inline-flex;align-items:center;justify-content:center}
  .staff-card{padding:24px 20px}
  .staff-actions{flex-direction:column}
  .staff-actions .btn{width:100%}
  .pe-actions{flex-direction:column;align-items:stretch}
  .pe-actions .btn,.pe-actions .mini-btn{width:100%;justify-content:center}
  .modal{padding:24px}
  .addr-card{flex-direction:column}
  .addr-acts{width:100%}
  .ord-ship{max-width:none}
  .acct-card .rev-tiles,
  .acct-card #payout-tiles{grid-template-columns:1fr}
  #catalog-root .cat-grid+.cat-h{margin-top:52px;padding-top:38px}
}

@media(max-width:520px){
  .rev-tiles{grid-template-columns:1fr}
}

/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
}

/* ---------- kits of ten ---------- */
.p-kit{display:block;font-size:.74rem;font-weight:700;color:var(--blue,#0E6BA8);margin-top:3px;letter-spacing:-.005em}
.cl-kit{font-size:.72rem;color:var(--ink-faint);margin-top:2px}

/* ---------- catalog gate ----------
   Shown on /shop to anyone who isn't a verified account. The catalog is for
   licensed facilities and credentialed providers, so the public page carries
   the route in rather than a browsable product grid. */
.cat-gate{max-width:660px;margin:0 auto;text-align:center;padding:44px 30px 50px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.cat-gate h2{font-size:clamp(1.4rem,3vw,2rem);color:var(--navy);margin:6px 0 16px;
  letter-spacing:-.015em}
.cat-gate-lead{font-size:.95rem;line-height:1.75;color:var(--ink-2);max-width:520px;
  margin:0 auto 26px}
.cat-gate-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cat-gate-note{margin-top:26px;font-size:.82rem;line-height:1.7;color:var(--ink-faint)}
.cat-gate-note a{color:var(--teal);font-weight:700}
@media(max-width:560px){.cat-gate{padding:32px 20px 38px}.cat-gate-ctas .btn{width:100%}}

/* ============================================================
   PRODUCT DETAIL
   The grid shows the vial at 190px, where the label's fine print cannot
   physically resolve. This is where it can be read: a double-resolution
   copy, loaded only when asked for, with the same dose selector and add
   button as the card behind it.
   ============================================================ */
.p-fig{border:0;padding:0;width:100%;cursor:zoom-in;font:inherit}
.p-zoom{position:absolute;right:12px;bottom:12px;width:32px;height:32px;z-index:2;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.86);color:var(--navy);
  box-shadow:0 2px 10px rgba(11,46,79,.18);
  opacity:0;transform:translateY(4px);transition:.25s var(--ease)}
.p-zoom svg{width:16px;height:16px}
.p-card:hover .p-zoom,.p-fig:focus-visible .p-zoom{opacity:1;transform:none}

.pv-back{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:24px;
  background:rgba(6,28,50,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pv{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:34px;align-items:center;width:min(900px,100%);max-height:90vh;overflow:auto;
  background:#fff;border-radius:var(--radius);padding:38px 40px;
  box-shadow:0 30px 80px rgba(6,28,50,.34)}
.pv-x{position:absolute;top:12px;right:16px;background:none;border:0;cursor:pointer;
  font-size:1.9rem;line-height:1;color:var(--ink-faint);padding:4px 8px}
.pv-x:hover{color:var(--navy)}
.pv-fig{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 88% at 50% 12%,#FFFFFF 0%,#F4FAFD 46%,#E6F1F8 100%);
  border-radius:var(--radius-sm);padding:22px}
.pv-fig img{height:min(60vh,460px);width:auto;
  filter:drop-shadow(0 16px 22px rgba(6,58,102,.26))}
.pv-tag{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:8px}
.pv h3{font-size:clamp(1.25rem,2.4vw,1.7rem);color:var(--navy);letter-spacing:-.015em;
  margin-bottom:8px}
.pv-spec{font-size:.9rem;color:var(--ink-2);line-height:1.65;margin-bottom:22px}
.pv-buy{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pv-buy .p-variant{width:100%}
.pv-buy .btn-add{width:100%}
.pv-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.78rem;line-height:1.7;color:var(--ink-faint)}

@media(max-width:760px){
  .pv{grid-template-columns:1fr;gap:20px;padding:30px 22px}
  .pv-fig img{height:min(40vh,300px)}
}

/* Single-vial purchase sits under the kit button as the quieter option:
   kits are the normal wholesale line, one vial is for a trial or a top-up.
   Outlined rather than filled so the primary action stays obvious. */
.btn-add-vial{width:100%;margin-top:8px;padding:10px 16px;font-size:.78rem;
  border-radius:999px;font-weight:700;cursor:pointer;
  color:var(--navy);background:transparent;border:1px solid var(--line-strong,var(--line));
  transition:border-color .2s,color .2s,background .2s}
.btn-add-vial:hover{border-color:var(--blue);color:var(--blue);background:var(--paper)}
.btn-add-vial[hidden]{display:none}
.btn-add-vial.added{border-color:var(--green);color:var(--green)}
.pv-buy .btn-add-vial{width:100%}

/* --------------------------------------------------------------------------
   PRODUCT GUIDE — the catalog card button, and the sheet inside the dialog.

   The dialog is centred and vertically constrained for a buy panel. A cheat
   sheet is several hundred words, so the grid stops centring and starts
   top-aligning once a sheet is present, or the sheet pushes the artwork
   off both ends of the viewport.
   -------------------------------------------------------------------------- */
.btn-guide{width:100%;margin-top:8px;padding:10px 16px;font-size:.78rem;
  border-radius:999px;font-weight:700;cursor:pointer;
  color:var(--blue);background:var(--blue-tint);border:1px solid transparent;
  transition:border-color .2s,color .2s,background .2s}
.btn-guide:hover{border-color:var(--blue-pale);background:#DCEBF7}
.pv-buy .btn-guide{width:100%}

/* The buy panel is two columns; the sheet is a third row spanning both, so
   the artwork keeps its own column instead of being stranded beside 600
   words of body copy. */
.pv{align-items:start}
.pv-guide[hidden]{display:none}
.pv-guide{grid-column:1 / -1;margin-top:4px;scroll-margin-top:12px}
.pvg-body{columns:2;column-gap:26px}
.pvg-body>*{break-inside:avoid}
@media(max-width:760px){ .pvg-body{columns:1} }
.pvg{border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--paper);
  overflow:hidden}
.pvg>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;cursor:pointer;list-style:none;
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue)}
.pvg>summary::-webkit-details-marker{display:none}
.pvg-flag{flex:none;font-size:.55rem;letter-spacing:.08em;padding:4px 8px;border-radius:6px}
.pvg-flag.is-label{background:var(--green-soft);color:var(--green-ink)}
.pvg-flag.is-none{background:#fff;color:var(--steel);border:1px solid var(--line)}
.pvg-body{padding:0 16px 16px;border-top:1px solid var(--line)}
.pvg-what{margin-top:14px;font-size:.85rem;line-height:1.62;color:var(--navy);font-weight:600}
.pvg-body dl{margin-top:12px;display:grid;gap:9px}
.pvg-row dt{font-family:var(--font-mono);font-size:.57rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);margin-bottom:3px}
.pvg-row dd{font-size:.815rem;line-height:1.62;color:var(--ink-soft)}
.pvg-dose{margin-top:14px;padding:12px 14px;border-radius:8px;border-left:3px solid;background:#fff}
.pvg-dose.is-label{border-color:var(--green);background:var(--green-soft)}
.pvg-dose.is-none{border-color:var(--steel)}
.pvg-dose b{display:block;font-family:var(--font-mono);font-size:.57rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
.pvg-dose.is-label b{color:var(--green-ink)}
.pvg-dose.is-none b{color:var(--steel)}
.pvg-dose p{font-size:.815rem;line-height:1.62;color:var(--ink-soft)}
.pvg-more{display:inline-block;margin-top:14px;font-size:.78rem;font-weight:700;color:var(--blue)}

/* ---------- checkout: signature checkbox ----------
   A checkbox that reads as a checkbox. Unchecked is the default and it
   means no signature required — the note says so, because an empty box
   with no caption is an ambiguity the carrier pays for. */
.co-check{display:flex;align-items:center;gap:11px;cursor:pointer;
  font-size:.95rem;font-weight:600;color:var(--navy);padding:2px 0}
.co-check input{width:19px;height:19px;flex:none;accent-color:var(--brand-blue);cursor:pointer;margin:0}
.co-check-note{display:block;margin-top:6px;font-size:.8rem;color:var(--ink-faint);line-height:1.6}

/* ---------- catalog search ----------
   Sits above "Most requested" and filters the cards already rendered. The
   headings and grids it hides stay flat siblings of each other, because
   `.cat-h+.cat-grid` and `.cat-grid+.cat-h` do the spacing between them. */
.cat-search{position:relative;display:flex;align-items:center;margin:0 0 6px}
.cat-search-i{position:absolute;left:16px;width:18px;height:18px;color:#5E7C96;pointer-events:none}
#cat-q{width:100%;font-family:inherit;font-size:.95rem;color:var(--ink);
  padding:15px 46px 15px 46px;border:1.5px solid var(--line);border-radius:var(--radius-xs);
  background:var(--paper);-webkit-appearance:none;appearance:none;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
#cat-q::placeholder{color:#6C8AA4}
#cat-q:focus{outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(14,107,168,.14)}
/* Safari paints its own round × inside type=search; ours is the visible one. */
#cat-q::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
#cat-q-clear{position:absolute;right:10px;width:30px;height:30px;border:0;cursor:pointer;
  background:none;color:#5E7C96;font-size:1.4rem;line-height:1;border-radius:50%}
#cat-q-clear:hover{background:var(--blue-tint);color:var(--navy)}
.cat-count{font-size:.85rem;color:#4E6A82;margin:0 0 2px}
.cat-none{font-size:.95rem;color:#4E6A82;margin:34px 0 0;padding:26px 0;
  border-top:1px solid var(--line)}
.cat-none a{color:var(--blue);font-weight:600}
/* When the section above has been filtered away, the divider that `.cat-grid
   + .cat-h` draws would sit over nothing. */
#catalog-root .cat-h.is-alone{margin-top:8px;padding-top:0;border-top:0}

/* ---------- what the account is discounted from ---------- */
.p-was{font-family:var(--font-display);font-weight:700;font-size:.9rem;
  color:#7A93A8;text-decoration:line-through;text-decoration-thickness:1.5px;
  margin-right:5px;letter-spacing:-.01em}
.p-save{display:block;font-family:var(--font-sans);font-size:.72rem;font-weight:700;
  color:#0B7A55;letter-spacing:-.005em;margin-top:4px}

/* SRP is guidance about THEIR resale price, so it must read quieter than the
   number the account actually pays. With no rule of its own it inherited
   .p-price — display face, 800, 1.08rem — and rendered larger than the price
   itself, wrapping onto two lines and making the retail figure the loudest
   thing on the card. */
.p-srp{display:block;font-family:var(--font-sans);font-size:.72rem;font-weight:600;
  color:var(--ink-faint);letter-spacing:0;margin-top:3px;line-height:1.45}

/* SWP sits between the two: it is what this account sells at, so it reads a
   step stronger than SRP (which is the clinic's own retail) but still clearly
   below the price the account pays. Same size as SRP — only the colour ranks
   them, so neither can out-shout the figure at the top of the card. */
/* The dose printed as text, for lines where each product has exactly one of
   them. It replaces the picker rather than sitting beside it, so it has to
   carry the same weight the picker did — and unlike a <select> it wraps,
   which is the whole point: the blends run to 60+ characters. */
.p-dose{margin:0 0 2px;font-family:var(--font-sans);font-size:.86rem;font-weight:600;
  line-height:1.4;color:var(--ink,#0F2A43);letter-spacing:-.005em}

.p-swp{display:block;font-family:var(--font-sans);font-size:.72rem;font-weight:600;
  color:var(--ink-soft,#55708A);letter-spacing:0;margin-top:3px;line-height:1.45}


/* ---- acting as another account (staff) ----
   Deliberately loud and at the very top of the document: this state changes
   whose money is spent, so it must survive being ignored. */
#cf-acting-bar{
  position:sticky; top:0; z-index:9999; display:flex; flex-wrap:wrap; gap:10px 16px;
  align-items:center; justify-content:center; padding:10px 18px;
  background:#8A3A12; color:#FFF4EC; font-family:var(--font-sans);
  font-size:.86rem; font-weight:600; line-height:1.35; text-align:center;
  box-shadow:0 2px 0 rgba(0,0,0,.18)}
#cf-acting-bar b{color:#FFD9BE}
#cf-acting-bar strong{color:#FFD9BE; text-decoration:underline}
#cf-acting-bar button{
  border:1px solid rgba(255,244,236,.55); background:transparent; color:#FFF4EC;
  font:inherit; font-weight:600; padding:5px 12px; border-radius:999px; cursor:pointer}
#cf-acting-bar button:hover{background:rgba(255,244,236,.14)}
#cf-acting-bar button:focus-visible{outline:2px solid #FFF4EC; outline-offset:2px}
/* Quiet mode — the switch that stops a live customer collecting mail from a
   staff test order. It has to read as ARMED at a glance, so the label goes
   bright when it is on rather than being a checkbox you have to look twice at. */
#cf-acting-bar .cf-quiet{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:4px 11px; border-radius:999px; border:1px solid rgba(255,244,236,.4);
  font-weight:600; white-space:nowrap}
#cf-acting-bar .cf-quiet:hover{background:rgba(255,244,236,.12)}
#cf-acting-bar .cf-quiet input{
  width:14px; height:14px; margin:0; accent-color:#FFD9BE; cursor:pointer}
#cf-acting-bar .cf-quiet:has(input:checked){
  background:#FFD9BE; color:#5A2408; border-color:#FFD9BE}
#cf-acting-bar .cf-quiet:focus-within{outline:2px solid #FFF4EC; outline-offset:2px}


/* Admin account row actions. Wraps rather than running off the table, and the
   gap keeps the buttons from touching once they do. */
.acct-actions{display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:flex-end}

/* ---------- checkout: delivery speed ----------
   Michael asked for the customer to choose her own service. The prices come
   from the server per option, so the row has to carry a number, not just a
   name — a picker that says "2-Day" without saying what 2-Day costs makes
   the customer press it to find out. */
.co-ship-h{font-family:var(--font-display);font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-faint);margin:22px 0 10px}
.ship-opt{display:flex;align-items:center;gap:11px;padding:11px 13px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--radius-xs);margin-bottom:8px;
  background:var(--white);transition:border-color .18s var(--ease),background .18s var(--ease)}
.ship-opt:hover{border-color:var(--blue-pale)}
.ship-opt.on,.ship-opt:has(input:checked){border-color:var(--blue);background:var(--blue-tint)}
.ship-opt input{position:absolute;opacity:0;pointer-events:none}
.ship-dot{flex:0 0 16px;width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--steel);position:relative}
.ship-opt:has(input:checked) .ship-dot{border-color:var(--blue)}
.ship-opt:has(input:checked) .ship-dot::after{content:"";position:absolute;inset:3px;
  border-radius:50%;background:var(--blue)}
.ship-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.ship-body b{font-size:.9rem;color:var(--navy)}
.ship-body small{font-size:.72rem;color:var(--ink-faint)}
.ship-price{flex:0 0 auto;font-family:var(--font-display);font-size:.9rem;color:var(--navy)}
@media (max-width:420px){
  .ship-opt{padding:10px 11px;gap:9px}
  .ship-body small{font-size:.68rem}
}