/* css/pp-2026.css — Purity Peptides 2026 makeover layer.
   Additive cascade layer that sits above the legacy inline <style> (wrapped in
   @layer legacy in index.html). No !important anywhere. Revert = delete this
   file + js/pp-2026.js, unwrap the two @layer legacy lines, drop the <link>s.
   Generated 2026-09-04. */
@layer legacy, pp2026;

@layer pp2026 {

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  --pp-bg:#05090C;  --pp-bg-raise:#0A1116;  --pp-surface:#0E1720;  --pp-surface-2:#131E28;
  --pp-line:rgba(255,255,255,.08);  --pp-line-hi:rgba(94,214,200,.22);
  --pp-text:#EAF1F4;  --pp-text-2:#A7B8C2;  --pp-text-3:#748A98; /* text-3 lifted from #6F8593 so it clears 4.5:1 on --pp-surface-2 */
  --pp-teal:#5ED6C8;  --pp-teal-dim:#3FA79B;  --pp-teal-ink:#04231F;
  --pp-gold:#D8B261;  --pp-ok:#56D993;  --pp-warn:#E8B44A;  --pp-danger:#FF6B6B;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1.0625rem;
  --fs-lg:clamp(1.25rem,2.5vw,1.5rem); --fs-xl:clamp(1.75rem,4vw,2.5rem);
  --fs-display:clamp(2.5rem,7vw,4.5rem);

  --dur-1:120ms; --dur-2:180ms; --dur-3:260ms;
  --ease:cubic-bezier(.22,1,.36,1);

  --e-1:0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03);
  --e-2:0 4px 16px -4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  --e-3:0 16px 48px -12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);

  /* semantic z scale (legacy overlays live at 1300–3000; header stays under them) */
  --z-header:800; --z-sheet:1250; --z-toast:2200;

  --pp-sans:var(--sans,'Manrope',sans-serif);
  --pp-display:var(--display,'Bebas Neue',sans-serif);
  --pp-mono:var(--mono,'IBM Plex Mono',monospace);

  /* Legacy variables re-pointed at the token system so the 1,364 legacy lines inherit it. */
  --bg:var(--pp-bg); --bg2:var(--pp-surface); --bg3:var(--pp-surface-2);
  --teal:var(--pp-teal); --teal-d:var(--pp-teal-dim);
  --gold:var(--pp-gold);
  --text:var(--pp-text); --muted:var(--pp-text-2); --muted2:var(--pp-text-3);
  --border:var(--pp-line); --border-h:var(--pp-line-hi); --border2:var(--pp-line);
  --danger:var(--pp-danger);
}

/* ==========================================================================
   2. GLOBAL CRAFT RULES
   ========================================================================== */
:where(a,button,input,select,textarea,summary,[tabindex],[role="button"]):focus-visible{
  outline:2px solid var(--pp-teal); outline-offset:2px; border-radius:var(--r-sm);
}
::selection{background:rgba(94,214,200,.28); color:var(--pp-text);}
body{background:var(--pp-bg); color:var(--pp-text); -webkit-font-smoothing:antialiased;}
h1,h2,h3{text-wrap:balance;}

/* Fail-visible reveal system. Visible by default; hidden state only when JS is
   present, motion is allowed, and the 1200ms failsafe has not settled yet. */
.pp-reveal{opacity:1; transform:none;}
@media (prefers-reduced-motion:no-preference){
  html.pp-js:not(.pp-settled) .pp-reveal:not(.pp-in){opacity:0; transform:translateY(12px);}
  html.pp-js .pp-reveal{transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);}
  html.pp-js .pp-reveal.pp-in{transition-delay:var(--pp-stagger,0ms);}
}

/* Legacy full-bleed decorations: calmer, never above content */
.lab-grid{opacity:.14;}

/* ==========================================================================
   3. ANNOUNCEMENT STRIP + HEADER
   ========================================================================== */
.promo-strip{
  position:static; z-index:auto;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 0;
  padding:7px var(--sp-3); line-height:1.5; white-space:normal; overflow:visible;
  background:var(--pp-bg-raise); border-bottom:1px solid var(--pp-line);
  font-family:var(--pp-mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pp-teal);
}
.promo-strip > span{color:var(--pp-text-3); opacity:1; margin:0 var(--sp-3);}
.promo-strip .pp-tk-item{display:inline-block; padding:0 var(--sp-2); white-space:nowrap;}
@media (max-width:760px){
  .promo-strip{font-size:.6875rem; letter-spacing:.1em; padding:6px var(--sp-2);}
  .promo-strip > span{display:none;}
  .promo-strip .pp-tk-item{padding:0 6px;}
}

/* --- Sticky header (built by js/pp-2026.js; legacy fixed pills stay as the no-JS fallback) --- */
.pp-header{
  position:sticky; top:0; z-index:var(--z-header);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--sp-4);
  padding:var(--sp-2) var(--sp-5); min-height:60px;
  background:color-mix(in srgb, var(--pp-bg) 78%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.pp-header::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--pp-line); opacity:0; transition:opacity var(--dur-2) var(--ease);}
.pp-header.is-scrolled::after{opacity:1;}

.pp-header .atelier-mark{
  position:static; top:auto; left:auto; z-index:auto;
  padding:var(--sp-1) var(--sp-2) var(--sp-1) 0; gap:var(--sp-3);
  background:transparent; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  transition:none; min-height:44px;
}
.pp-header .atelier-mark:hover{transform:none; box-shadow:none; border-color:transparent;}
.pp-header .atelier-mark-img{width:36px; height:36px; filter:none;}
.pp-header .atelier-mark-text{white-space:nowrap;}
.pp-header .atelier-mark-text .brand{font-size:var(--fs-sm); letter-spacing:.14em;}
@media (max-width:1100px){ .pp-header .atelier-mark-text .tag{display:none;} }
@media (max-width:960px){ .pp-header .atelier-mark-text{display:none;} }
.pp-header .atelier-mark-text .tag{font-size:.625rem; letter-spacing:.2em; color:var(--pp-text-3); margin-top:4px;}

.pp-header .atelier-pill{
  position:static; top:auto; right:auto; z-index:auto;
  justify-self:center; gap:var(--sp-1); padding:0; border:0; background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;
}
.pp-header .atelier-pill .sep{display:none;}
.pp-header .atelier-pill a{
  display:inline-flex; align-items:center; min-height:40px; padding:0 var(--sp-3);
  border-radius:var(--r-pill); font-size:var(--fs-xs); letter-spacing:.14em; color:var(--pp-text-2);
  transition:color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.pp-header .atelier-pill a:hover{color:var(--pp-text); background:rgba(255,255,255,.05);}
.pp-header .atelier-pill a[aria-current="page"]{color:var(--pp-teal);}

.pp-header-right{display:flex; align-items:center; gap:var(--sp-2); justify-self:end;}
.pp-header .cart-btn{
  display:inline-flex; align-items:center; gap:var(--sp-2); min-height:44px; padding:0 var(--sp-3) 0 var(--sp-4);
  background:transparent; border:1px solid var(--pp-line-hi); border-radius:var(--r-pill);
  color:var(--pp-text); font-family:var(--pp-mono); font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.pp-header .cart-btn:hover{background:rgba(94,214,200,.08); border-color:var(--pp-teal);}
.pp-header #cartCount{
  display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px;
  border-radius:var(--r-pill); background:var(--pp-teal); color:var(--pp-teal-ink);
  font-size:.6875rem; font-weight:700; letter-spacing:0; line-height:1;
  transition:transform var(--dur-2) var(--ease);
}
.pp-header #cartCount.pp-bump{transform:scale(1.18);}

.pp-burger{
  display:none; width:44px; height:44px; padding:0; border:1px solid var(--pp-line); border-radius:var(--r-sm);
  background:transparent; color:var(--pp-text); cursor:pointer; place-items:center;
  transition:border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.pp-burger:hover{border-color:var(--pp-line-hi); background:rgba(255,255,255,.04);}
.pp-burger svg{width:20px; height:20px; display:block;}
.pp-burger .ic-close{display:none;}
.pp-burger[aria-expanded="true"] .ic-open{display:none;}
.pp-burger[aria-expanded="true"] .ic-close{display:block;}

@media (max-width:760px){
  .pp-header{grid-template-columns:auto 1fr auto; padding:var(--sp-2) var(--sp-3); min-height:56px;}
  .pp-header .atelier-pill{display:none;}
  .pp-header .atelier-mark-text{display:none;}
  .pp-burger{display:grid;}
  .pp-header .cart-btn{padding:0 var(--sp-2) 0 var(--sp-3);}
}

/* --- Mobile navigation sheet --- */
.pp-sheet-backdrop{
  position:fixed; inset:0; z-index:calc(var(--z-sheet) - 1);
  background:rgba(2,5,8,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity var(--dur-3) var(--ease);
}
.pp-sheet{
  position:fixed; top:0; right:0; bottom:0; z-index:var(--z-sheet);
  width:min(320px, 86vw); padding:var(--sp-4) var(--sp-4) var(--sp-6);
  background:var(--pp-bg-raise); border-left:1px solid var(--pp-line); box-shadow:var(--e-3);
  display:flex; flex-direction:column; gap:var(--sp-2);
  transform:translateX(100%); visibility:hidden;
  transition:transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
  overflow-y:auto;
}
html.pp-sheet-open .pp-sheet{transform:none; visibility:visible; transition:transform var(--dur-3) var(--ease), visibility 0s;}
html.pp-sheet-open .pp-sheet-backdrop{opacity:1; pointer-events:auto;}
.pp-sheet-head{display:flex; align-items:center; justify-content:space-between; min-height:44px; margin-bottom:var(--sp-2);}
.pp-sheet-title{font-family:var(--pp-mono); font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--pp-text-3);}
.pp-sheet-close{width:44px; height:44px; border:1px solid var(--pp-line); border-radius:var(--r-sm); background:transparent; color:var(--pp-text); font-size:1.25rem; cursor:pointer;}
.pp-sheet ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-1);}
.pp-sheet-link{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; width:100%; min-height:48px; padding:var(--sp-2) var(--sp-3);
  border:0; border-radius:var(--r-sm); background:transparent; color:var(--pp-text); text-align:left; text-decoration:none;
  font-family:var(--pp-sans); font-size:var(--fs-md); font-weight:600; cursor:pointer;
  transition:background-color var(--dur-2) var(--ease);
}
.pp-sheet-link:hover{background:rgba(255,255,255,.05);}
.pp-sheet-link small{font-family:var(--pp-mono); font-size:var(--fs-xs); color:var(--pp-text-3); letter-spacing:.08em;}
.pp-sheet-link.is-reco{border:1px solid rgba(216,178,97,.35);}
.pp-sheet-link.is-reco small{color:var(--pp-gold);}
.pp-sheet-foot{margin-top:auto; padding-top:var(--sp-4); border-top:1px solid var(--pp-line); font-family:var(--pp-mono); font-size:var(--fs-xs); color:var(--pp-text-3); letter-spacing:.08em; line-height:1.6;}

/* ==========================================================================
   4. HERO — compressed router, vial as the object
   ========================================================================== */
.atelier-hero{
  position:relative; min-height:0; height:auto; overflow:hidden; cursor:default; z-index:2;
  background:
    radial-gradient(60% 80% at 78% 40%, rgba(94,214,200,.10) 0%, transparent 60%),
    linear-gradient(180deg,#050A0E 0%,#08141B 60%,var(--pp-bg) 100%);
}
.atelier-hero::before{background-size:56px 56px; opacity:.8;}
/* The vial. Pure CSS so it never depends on WebGL or JS and never shifts layout. */
.atelier-hero::after{
  content:''; position:absolute; z-index:2; pointer-events:none;
  right:clamp(16px,7vw,120px); top:50%; width:clamp(200px,24vw,340px); height:min(88%,520px);
  inset-inline-start:auto; border:0; border-radius:0;
  -webkit-mask:none; mask:none;
  background:url(../labels/vials/RT10.png) center/contain no-repeat;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.65)) drop-shadow(0 0 40px rgba(94,214,200,.18));
  transform:translate3d(0, calc(-50% + var(--pp-par,0px)), 0) rotate(var(--pp-tilt,0deg));
  will-change:transform;
}
#atelier3d{opacity:.85;}
.atelier-vignette{
  background:
    radial-gradient(ellipse 60% 70% at 30% 50%, rgba(5,9,12,.55) 0%, transparent 70%),
    linear-gradient(180deg, rgba(5,9,12,.5) 0%, transparent 30%, transparent 70%, var(--pp-bg) 100%);
}
.atelier-hero-center{
  position:relative; inset:auto; z-index:6; user-select:auto;
  display:grid; grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"logo name" "sub sub" "paths paths" "talk talk";
  column-gap:var(--sp-4); row-gap:0; align-items:center; align-content:center; justify-items:start;
  max-width:1280px; margin:0 auto;
  padding:clamp(var(--sp-5),4vh,var(--sp-7)) clamp(var(--sp-4),4vw,var(--sp-7));
  padding-right:clamp(240px,30vw,440px);
  min-height:0;
}
.hero-logo-wrap{grid-area:logo; width:64px; height:64px; filter:drop-shadow(0 0 1px rgba(94,214,200,.5)) drop-shadow(0 10px 24px rgba(0,0,0,.6)); transition:transform var(--dur-3) var(--ease);}
.hero-logo-wrap:hover{transform:translateY(-2px);}
.hero-brand-name{
  grid-area:name; margin:0; font-size:clamp(2.4rem,5vw,4.25rem); line-height:.9; letter-spacing:.08em;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.hero-brand-sub{
  grid-area:sub; display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin:var(--sp-4) 0 0; font-size:var(--fs-xs); letter-spacing:.12em; text-shadow:none; color:var(--pp-text);
}
.hero-brand-sub .dot{display:none;}
.hero-brand-sub .pp-pill{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:7px 12px; border:1px solid var(--pp-line-hi); border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--pp-bg) 55%, transparent); box-shadow:var(--e-1);
}
.hero-brand-sub .pp-pill::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--pp-teal); box-shadow:0 0 8px rgba(94,214,200,.7);}

/* No-JS / script-missing fallback: the legacy header stays fixed, so keep the hero clear of it and show the proof-strip dots */
html:not(.pp-js) .atelier-hero-center{padding-top:128px;}
html:not(.pp-js) .hero-brand-sub .dot{display:inline; margin:0 var(--sp-2); color:var(--pp-teal);}
@media (max-width:760px){ html:not(.pp-js) .atelier-hero-center{padding-top:104px;} }

/* Three-path router: kept, compressed to dense rows */
.path-choices{
  grid-area:paths; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-3);
  width:100%; max-width:none; margin:var(--sp-5) 0 0;
}
.path-choice{
  position:relative; width:auto; min-height:0; padding:var(--sp-3) var(--sp-4);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"num title go" "num sub go";
  column-gap:var(--sp-3); row-gap:2px; align-items:center; text-align:left;
  background:color-mix(in srgb, var(--pp-surface) 82%, transparent); border:1px solid var(--pp-line); border-radius:var(--r-md);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--e-1); overflow:visible;
  transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.path-choice::before{display:none;}
.path-choice:hover{transform:translateY(-2px); border-color:var(--pp-line-hi); background:color-mix(in srgb, var(--pp-surface) 92%, transparent); box-shadow:var(--e-2);}
.path-choice:active{transform:translateY(0);}
.pc-num{grid-area:num; font-size:var(--fs-xs); letter-spacing:.18em; opacity:1; color:var(--pp-text-3); align-self:start; padding-top:3px;}
.pc-title{grid-area:title; font-size:clamp(1.15rem,1.6vw,1.45rem); line-height:1; letter-spacing:.04em;}
.pc-sub{grid-area:sub; font-size:var(--fs-sm); color:var(--pp-text-2); line-height:1.35;}
.pc-go{grid-area:go; margin:0; padding:0; font-size:var(--fs-xs); letter-spacing:.14em; color:var(--pp-teal); gap:6px; transition:gap var(--dur-2) var(--ease);}
.path-choice:hover .pc-go{gap:10px;}
.pc-eyebrow{
  position:absolute; top:-10px; right:var(--sp-3); margin:0; padding:3px 8px;
  background:var(--pp-bg-raise); border:1px solid rgba(216,178,97,.45); border-radius:var(--r-pill);
  font-size:.625rem; letter-spacing:.14em; color:var(--pp-gold);
}
.path-choice.recommended{border-color:rgba(216,178,97,.45); box-shadow:var(--e-1); background:color-mix(in srgb, var(--pp-surface) 82%, transparent);}
.path-choice.recommended .pc-go{color:var(--pp-text);}
.hero-talk-link{
  grid-area:talk; margin:var(--sp-4) 0 0; padding:var(--sp-2) 0; min-height:44px;
  font-size:var(--fs-xs); letter-spacing:.1em; color:var(--pp-text-2); text-shadow:none;
}
.hero-talk-link:hover{color:var(--pp-teal);}

@media (max-width:900px){
  .atelier-hero-center{padding-right:clamp(150px,26vw,240px);}
  .atelier-hero::after{width:clamp(150px,22vw,240px); right:clamp(8px,3vw,32px);}
  .path-choices{grid-template-columns:1fr; gap:var(--sp-2); margin-top:var(--sp-4);}
}
@media (max-width:760px){
  .atelier-hero-center{
    grid-template-columns:auto minmax(0,1fr);
    padding:var(--sp-5) var(--sp-4) var(--sp-4); padding-right:var(--sp-4);
    justify-content:start; column-gap:var(--sp-3);
  }
  .hero-logo-wrap{width:48px; height:48px;}
  .hero-brand-name{font-size:clamp(2rem,9.5vw,2.6rem); letter-spacing:.06em; margin:0; max-width:calc(100% - 96px);}
  .hero-brand-sub{margin-top:var(--sp-3); gap:6px; max-width:calc(100% - 104px);}
  .hero-brand-sub .pp-pill{padding:6px 9px; font-size:.6875rem; letter-spacing:.08em;}
  .atelier-hero::after{
    width:128px; height:220px; right:-8px; top:var(--sp-3); transform:translate3d(0, var(--pp-par,0px), 0) rotate(var(--pp-tilt,0deg));
    opacity:.95; filter:drop-shadow(0 18px 24px rgba(0,0,0,.6));
  }
  .path-choices{margin-top:var(--sp-4); gap:var(--sp-2);}
  .path-choice{padding:0 var(--sp-3); min-height:50px; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"num title go"; border-radius:var(--r-sm); -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--pp-surface);}
  .pc-num{padding:0; font-size:.6875rem; letter-spacing:.12em;}
  .pc-title{font-size:1.25rem;}
  .pc-sub{display:none;}
  .pc-go{font-size:0; gap:0;}
  .pc-go::after{content:'→'; font-size:var(--fs-md); line-height:1;}
  .pc-eyebrow{top:-9px; font-size:.5625rem; padding:2px 7px;}
  .hero-talk-link{margin-top:var(--sp-2); min-height:40px; font-size:.6875rem;}
}
@media (max-width:380px){
  .hero-brand-name{font-size:2rem;}
  .path-choice{min-height:46px;}
}

/* Hero entrance choreography — CSS-only, `backwards` fill so a skipped animation leaves everything visible. */
@media (prefers-reduced-motion:no-preference){
  @keyframes ppUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
  @keyframes ppVial{from{opacity:0; transform:translate3d(24px,calc(-50% + 12px),0);} to{opacity:1;}}
  html:not(.pp-settled) .hero-logo-wrap{animation:ppUp .55s var(--ease) backwards;}
  html:not(.pp-settled) .hero-brand-name{animation:ppUp .55s var(--ease) .06s backwards;}
  html:not(.pp-settled) .hero-brand-sub{animation:ppUp .55s var(--ease) .14s backwards;}
  html:not(.pp-settled) .path-choice{animation:ppUp .55s var(--ease) backwards;}
  html:not(.pp-settled) .path-choice:nth-child(1){animation-delay:.2s;}
  html:not(.pp-settled) .path-choice:nth-child(2){animation-delay:.27s;}
  html:not(.pp-settled) .path-choice:nth-child(3){animation-delay:.34s;}
  html:not(.pp-settled) .hero-talk-link{animation:ppUp .55s var(--ease) .42s backwards;}
  @media (min-width:761px){ html:not(.pp-settled) .atelier-hero::after{animation:ppVial .9s var(--ease) .1s backwards;} }
}

/* ==========================================================================
   5. CATALOG — inline on the homepage, directly under the hero
   ========================================================================== */
#view-catalog, #view-catalog.open{
  position:static; inset:auto; z-index:auto; display:block; opacity:1; transform:none; transition:none;
  overflow:visible; background:transparent;
}
#view-catalog::before{display:none;}
#view-catalog .view-bar{
  position:static; top:auto; z-index:auto; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border:0;
  max-width:1280px; margin:0 auto; padding:var(--sp-6) clamp(var(--sp-4),4vw,var(--sp-7)) 0; gap:var(--sp-3);
}
#view-catalog .view-back{display:none;}
#view-catalog .view-title{font-size:var(--fs-xl); letter-spacing:.04em; line-height:1;}
#view-catalog .view-meta{display:none;} /* re-homed in the toolbar by JS; hidden here if JS did not run… */
html:not(.pp-js) #view-catalog .view-meta{display:block;} /* …unless JS did not run, then it stays visible here */
#view-catalog .view-scroll{max-width:1280px; margin:0 auto; padding:var(--sp-4) clamp(var(--sp-4),4vw,var(--sp-7)) var(--sp-8);}

.kit-banner{
  margin:0 0 var(--sp-3); padding:var(--sp-3) var(--sp-4); gap:var(--sp-3);
  background:var(--pp-surface); border:1px solid rgba(216,178,97,.28); border-radius:var(--r-md); box-shadow:var(--e-1);
}
.kb-tag{font-size:.625rem; letter-spacing:.16em; padding:5px 10px; background:rgba(216,178,97,.12); border-color:rgba(216,178,97,.3);}
.kb-text{font-size:var(--fs-sm); color:var(--pp-text-2); line-height:1.5;}
.newbie-strip{
  margin:0 0 var(--sp-4); padding:var(--sp-2) var(--sp-3); gap:var(--sp-2) var(--sp-3);
  background:transparent; border:1px solid var(--pp-line); border-radius:var(--r-sm);
  font-size:var(--fs-xs); letter-spacing:.06em; color:var(--pp-text-3);
}
.newbie-strip .ns-cta{color:var(--pp-teal); min-height:28px; display:inline-flex; align-items:center;}

.cat-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3);}
.cat-search{
  flex:1 1 240px; max-width:none; min-height:44px; padding:0 var(--sp-4); gap:var(--sp-2);
  background:var(--pp-surface); border:1px solid var(--pp-line); border-radius:var(--r-pill); box-shadow:var(--e-1);
  transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.cat-search:focus-within{border-color:var(--pp-teal); box-shadow:0 0 0 3px rgba(94,214,200,.15);}
.cat-search .cs-icon{color:var(--pp-text-3); font-size:1rem;}
.cat-search input{flex:1; min-width:0; background:transparent; border:0; outline:none; color:var(--pp-text); font-family:var(--pp-sans); font-size:var(--fs-base); min-height:42px;}
.cat-search input::placeholder{color:var(--pp-text-3);}
.cat-search input:focus-visible{outline:none;}
.pp-guide-pill{
  display:inline-flex; align-items:center; gap:var(--sp-2); min-height:44px; padding:0 var(--sp-4);
  border:1px solid rgba(216,178,97,.4); border-radius:var(--r-pill); background:transparent;
  color:var(--pp-text); font-family:var(--pp-mono); font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  cursor:pointer; transition:background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.pp-guide-pill:hover{background:rgba(216,178,97,.08); border-color:var(--pp-gold);}
.cat-toolbar #catCount{display:block; margin-left:auto; font-family:var(--pp-mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--pp-text-3); white-space:nowrap;}
@media (max-width:600px){
  .cat-toolbar #catCount{margin-left:0; width:100%; order:3;}
  .pp-guide-pill{flex:1 1 auto; justify-content:center;}
  #view-catalog .view-bar{padding-top:var(--sp-5);}
  .kit-banner{padding:var(--sp-2) var(--sp-3); gap:var(--sp-2); margin-bottom:var(--sp-2);}
  .kb-tag{font-size:.5625rem; padding:4px 8px;}
  .kb-text{font-size:var(--fs-xs); line-height:1.45;}
  /* Wrap, never scroll: a nowrap strip cut the "Talk to Jordan" CTA in half at 375px. */
  .newbie-strip{flex-wrap:wrap; row-gap:4px; overflow-x:visible; margin-bottom:var(--sp-3); padding:var(--sp-2) var(--sp-3);}
  .newbie-strip .ns-text,.newbie-strip .ns-cta{white-space:nowrap;}
}

.cat-tabs-wrap{margin:0 0 var(--sp-4); -webkit-mask:linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent); mask:linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent);}
.cat-tabs-wrap::after{display:none;}
.cat-tabs{gap:var(--sp-2); padding:var(--sp-1) 28px var(--sp-1) 20px; margin:0 -20px; flex-wrap:nowrap;}
.cat-tab{
  flex-shrink:0; min-height:40px; padding:0 var(--sp-4); border:1px solid var(--pp-line); border-radius:var(--r-pill);
  background:var(--pp-surface); color:var(--pp-text-2); font-family:var(--pp-mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em;
  transition:color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.cat-tab:hover{color:var(--pp-text); border-color:var(--pp-line-hi);}
.cat-tab.active{background:var(--pp-teal); color:var(--pp-teal-ink); border-color:var(--pp-teal);}
.cat-tabs.searching .cat-tab.active{background:var(--pp-surface); color:var(--pp-text-3); border-color:var(--pp-line);}
@media (pointer:coarse){ .cat-tab{min-height:44px;} }

.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--sp-4);}
@media (max-width:599px){ .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3);} }

/* ==========================================================================
   6. PRODUCT CARD — the card sells
   ========================================================================== */
.cc{
  display:flex; flex-direction:column; gap:var(--sp-2); min-width:0;
  padding:var(--sp-3); background:var(--pp-surface); border:1px solid var(--pp-line); border-radius:var(--r-md); box-shadow:var(--e-1);
  transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.cc:hover{transform:translateY(-2px); border-color:var(--pp-line-hi); box-shadow:var(--e-2);}
.cc:active{transform:none;}
.cc:focus-visible{outline:2px solid var(--pp-teal); outline-offset:2px; border-color:var(--pp-line);}
.cc-badges{gap:var(--sp-1); min-height:20px; margin:0;}
.cc-badge{font-family:var(--pp-mono); font-size:.625rem; letter-spacing:.08em; padding:3px 7px; border-radius:var(--r-sm); font-weight:700; border:1px solid var(--pp-line); background:transparent; color:var(--pp-text-2);}
.cc-badge.rank{background:rgba(216,178,97,.12); color:var(--pp-gold); border-color:rgba(216,178,97,.3);}
.cc-badge.stock{background:rgba(94,214,200,.1); color:var(--pp-teal); border-color:var(--pp-line-hi);}
.cc-badge.restock{color:var(--pp-warn); border-color:rgba(232,180,74,.3);}
.cc-badge.manu,.cc-badge.coa{color:var(--pp-text-2);}
.cc-photo{
  aspect-ratio:5/4; margin:0; padding:var(--sp-3); border-radius:var(--r-sm); display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(70% 60% at 50% 30%, rgba(94,214,200,.09) 0%, transparent 70%), var(--pp-bg-raise);
}
.cc-photo img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 14px rgba(0,0,0,.55)); transition:transform var(--dur-3) var(--ease);}
.cc:hover .cc-photo img{transform:scale(1.03);}
.cc-cat{font-family:var(--pp-mono); font-size:.625rem; letter-spacing:.14em; color:var(--pp-text-3); margin:var(--sp-1) 0 0;}
.cc-name{font-family:var(--pp-display); font-size:1.4rem; line-height:1; letter-spacing:.03em; margin:0; color:var(--pp-text);}
.cc-what{
  font-family:var(--pp-sans); font-size:var(--fs-sm); line-height:1.45; color:var(--pp-text-2); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cc-what .gloss{border-bottom-color:var(--pp-line-hi);}
.cc-price{margin:var(--sp-1) 0 0; display:flex; flex-direction:column; gap:2px; color:var(--pp-text); font-family:var(--pp-mono); font-size:var(--fs-base); line-height:1.3;}
.cc-price .from{display:inline; font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--pp-text-3); margin-right:2px;}
.cc-price .cc-price-main{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 6px;}
.cc-price .cc-price-kit{font-size:1.375rem; font-weight:700; letter-spacing:-.01em; color:var(--pp-text);}
.cc-price .cc-price-unit{font-size:var(--fs-xs); color:var(--pp-text-2); letter-spacing:.02em;}
.cc-price .cc-price-pv{font-size:var(--fs-xs); color:var(--pp-text-3); letter-spacing:.02em;}
.cc-price .single, .cc-price .cc-price-single{display:block; margin:0; font-size:var(--fs-xs); font-weight:400; color:var(--pp-text-2); letter-spacing:.02em;}
.cc-price .cc-save{
  display:inline-flex; align-items:center; align-self:flex-start; margin-top:4px; padding:3px 7px; border-radius:var(--r-sm);
  font-size:.625rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pp-gold); background:rgba(216,178,97,.12); border:1px solid rgba(216,178,97,.3);
}
.cc-meta{margin-top:auto; padding-top:var(--sp-2); border-top:1px solid var(--pp-line); font-family:var(--pp-mono); font-size:.6875rem; color:var(--pp-text-3); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); flex-wrap:wrap;}
.cc-stock.ok{color:var(--pp-text-2);}
.cc-stock.ok::before{background:var(--pp-ok); box-shadow:0 0 0 2px rgba(86,217,147,.18);}
.cc-stock.wait::before{background:var(--pp-warn); box-shadow:0 0 0 2px rgba(232,180,74,.18);}
.cc-coa{display:inline-flex; align-items:center; gap:4px; color:var(--pp-text-2); white-space:nowrap;}
.cc-coa::before{content:'✓'; color:var(--pp-teal); font-weight:700;}
.cc-sizes{color:var(--pp-text-3);}
.cc-add{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2); width:100%; min-height:40px; margin-top:var(--sp-1);
  border:1px solid var(--pp-line-hi); border-radius:var(--r-sm); background:rgba(94,214,200,.08); color:var(--pp-teal);
  font-family:var(--pp-mono); font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  transition:background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.cc-add:hover{background:var(--pp-teal); color:var(--pp-teal-ink); border-color:var(--pp-teal);}
.cc-add:active{background:var(--pp-teal-dim); border-color:var(--pp-teal-dim);}
@media (pointer:coarse){ .cc-add{min-height:44px;} }
@media (max-width:599px){
  .cc{padding:var(--sp-2); gap:6px; border-radius:var(--r-sm);}
  .cc-name{font-size:1.2rem;}
  .cc-price .cc-price-kit{font-size:1.2rem;}
  .cc-add{font-size:.6875rem; letter-spacing:.06em;}
  .cc-meta{font-size:.625rem;}
  .cc-sizes{display:none;}
}

/* ==========================================================================
   7. PRODUCT DRAWER — the drawer explains
   ========================================================================== */
.drawer-backdrop{background:rgba(2,5,8,.7); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:opacity var(--dur-3) var(--ease);}
.drawer{
  display:flex; flex-direction:column; gap:var(--sp-3);
  background:var(--pp-bg-raise); border:0; border-top:1px solid var(--pp-line); border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:var(--sp-3) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom,0px)); max-height:92dvh; box-shadow:var(--e-3);
  transition:transform var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
}
.drawer.open{transition:transform var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease), visibility 0s;}
.drawer-handle{order:-2; width:40px; height:4px; margin:0 auto var(--sp-1); background:var(--pp-line); border-radius:var(--r-pill);}
.drawer-close{top:var(--sp-3); right:var(--sp-3); width:40px; height:40px; border-radius:var(--r-sm); background:transparent; border:1px solid var(--pp-line); color:var(--pp-text-2);}
.drawer-close:hover{background:rgba(255,255,255,.06); color:var(--pp-text);}
@media (pointer:coarse){ .drawer-close{width:44px; height:44px;} }
@media (min-width:720px){
  .drawer{
    left:auto; right:0; top:0; bottom:0; width:min(480px,100%); max-width:480px; max-height:none; border-radius:0;
    border:0; border-left:1px solid var(--pp-line); padding:var(--sp-5) var(--sp-5) var(--sp-6);
    transform:translateX(100%); opacity:1;
  }
  .drawer.open{transform:none;}
  .drawer-handle{display:none;}
}
/* Content order: photo → name → category → what → sizes → format → price + per-vial math → add → COA → research → stock */
.drw-photo{order:-1; aspect-ratio:auto; width:96px; height:96px; max-width:none; margin:0 0 var(--sp-1); padding:var(--sp-2); border-radius:var(--r-sm); background:radial-gradient(70% 60% at 50% 30%, rgba(94,214,200,.1) 0%, transparent 70%), var(--pp-surface);}
.drw-name{order:1; text-align:left; margin:0; font-size:var(--fs-xl); line-height:.95; letter-spacing:.03em; padding-right:52px;}
.drw-cat{order:2; text-align:left; margin:0; font-size:var(--fs-xs); letter-spacing:.14em; color:var(--pp-text-3);}
.drw-desc{order:3; text-align:left; margin:0; padding:0; font-size:var(--fs-base); line-height:1.6; color:var(--pp-text-2);}
.drw-desc + .drw-section-label{order:4;}
.drw-sizes{order:5; margin:0; gap:var(--sp-2);}
.drw-sizes + .drw-section-label{order:6;}
.drw-toggle{order:7; margin:0; gap:var(--sp-2);}
.drw-price{order:8; margin:var(--sp-2) 0 0; text-align:left; font-size:1.75rem; font-weight:700; color:var(--pp-text); letter-spacing:-.01em; line-height:1;}
.drw-price > span{color:var(--pp-text-2); font-size:var(--fs-sm); font-weight:500;}
.drw-price-sub{display:none;} /* duplicates the size grid; bare "kit" wording is retired */
.drw-deal{order:10; margin:0; padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm); color:var(--pp-gold); background:rgba(216,178,97,.07); border:1px solid rgba(216,178,97,.24); border-radius:var(--r-sm);}
.drw-deal strong{color:var(--pp-gold);}
.drw-cta{order:11; min-height:48px; padding:0 var(--sp-4); border-radius:var(--r-sm); background:var(--pp-teal); color:var(--pp-teal-ink); font-size:var(--fs-sm); letter-spacing:.12em; box-shadow:var(--e-2); transition:filter var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);}
.drw-cta:hover{filter:brightness(1.06); transform:translateY(-1px);}
.drw-coa{
  order:12; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--sp-3);
  margin:var(--sp-2) 0 0; padding:var(--sp-3) var(--sp-4); text-align:left;
  border:1px solid var(--pp-line-hi); border-radius:var(--r-md); background:var(--pp-surface); box-shadow:var(--e-1);
  font-family:var(--pp-mono); font-size:var(--fs-sm); letter-spacing:.02em; color:var(--pp-text); text-decoration:none;
  transition:border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.drw-coa::before{content:'COA'; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--r-sm); background:rgba(94,214,200,.12); color:var(--pp-teal); font-weight:700; font-size:var(--fs-xs); letter-spacing:.1em;}
.drw-coa::after{content:'Open ↗'; font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--pp-teal);}
.drw-coa:hover{border-color:var(--pp-teal); background:var(--pp-surface-2); color:var(--pp-text);}
.drw-research{
  order:13; display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:0 var(--sp-3);
  border:1px solid var(--pp-line); border-radius:var(--r-sm); color:var(--pp-text-2); text-decoration:none;
  font-family:var(--pp-mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
  transition:color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.drw-research:hover{color:var(--pp-teal); border-color:var(--pp-line-hi);}
.drw-pills{order:14; justify-content:flex-start; margin:0; gap:var(--sp-2);}
.drw-pill{font-size:.6875rem; letter-spacing:.1em; padding:6px 10px; background:transparent; color:var(--pp-text-2); border:1px solid var(--pp-line);}
.drw-pill::before{content:''; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--pp-ok); vertical-align:middle;}
.drw-pill-coa{display:none;} /* the spec-badge COA block above carries this */
.drw-section-label{margin:var(--sp-2) 0 0; font-size:.6875rem; letter-spacing:.14em; color:var(--pp-text-3);}
.drw-size{background:var(--pp-surface); border:1px solid var(--pp-line); border-radius:var(--r-sm); padding:var(--sp-2); min-height:60px; transition:border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);}
.drw-size:hover{border-color:var(--pp-line-hi);}
.drw-size.selected{background:rgba(94,214,200,.1); border-color:var(--pp-teal); box-shadow:0 0 0 1px var(--pp-teal) inset;}
.drw-size-mg{font-size:var(--fs-sm); color:var(--pp-text);}
.drw-size-price{font-size:var(--fs-xs); color:var(--pp-text-2);}
.drw-size.selected .drw-size-price{color:var(--pp-teal);}
.drw-size-single{font-size:.6875rem; color:var(--pp-text-3);}
.drw-toggle-btn{min-height:44px; background:var(--pp-surface); border:1px solid var(--pp-line); border-radius:var(--r-sm); color:var(--pp-text-2); font-size:var(--fs-xs); letter-spacing:.08em; transition:border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);}
.drw-toggle-btn.active{background:rgba(94,214,200,.1); color:var(--pp-teal); border-color:var(--pp-teal);}
.drw-toggle-btn:disabled{opacity:.4;}

/* ==========================================================================
   8. CART DRAWER + CHECKOUT — restyle only, IDs and handlers untouched
   ========================================================================== */
.cart-overlay{background:rgba(2,5,8,.62); transition:opacity var(--dur-3) var(--ease), visibility var(--dur-3);}
.cart-drawer{width:min(440px,100vw); background:var(--pp-bg-raise); border-left:1px solid var(--pp-line); box-shadow:var(--e-3); transition:transform var(--dur-3) var(--ease);}
.cart-head{padding:var(--sp-4) var(--sp-5) var(--sp-3); border-bottom:1px solid var(--pp-line); align-items:center;}
.cart-eyebrow{font-size:.625rem; letter-spacing:.2em; color:var(--pp-text-3); margin-bottom:4px;}
.cart-title{font-size:var(--fs-xl); letter-spacing:.03em;}
.cart-close{width:44px; height:44px; border-radius:var(--r-sm); border:1px solid var(--pp-line); background:transparent; color:var(--pp-text-2); transition:border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);}
.cart-close:hover{transform:none; border-color:var(--pp-line-hi); color:var(--pp-text);}
.cart-items{padding:var(--sp-4) var(--sp-5); gap:var(--sp-3);}
.cart-item{gap:var(--sp-3); padding:var(--sp-3); border:1px solid var(--pp-line); border-radius:var(--r-md); background:var(--pp-surface);}
.ci-thumb{width:56px; height:56px; border-radius:var(--r-sm); background:var(--pp-bg-raise); border:1px solid var(--pp-line);}
.ci-name{font-size:1.15rem;}
.ci-meta{font-size:.6875rem; color:var(--pp-text-3); letter-spacing:.06em;}
.ci-qty{gap:var(--sp-2); margin-top:var(--sp-2);}
.ci-qty button{width:32px; height:32px; border-radius:var(--r-sm); border:1px solid var(--pp-line); color:var(--pp-text); font-size:1rem; transition:border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);}
.ci-qty button:hover{border-color:var(--pp-teal); color:var(--pp-teal);}
.ci-qty .q{font-size:var(--fs-sm); min-width:24px;}
.ci-qty .ci-remove{width:auto; height:32px; padding:0 var(--sp-2); font-size:.625rem; color:var(--pp-text-3); border-color:transparent;}
.ci-qty .ci-remove:hover{color:var(--pp-danger); border-color:transparent;}
.ci-price{font-size:1.25rem; color:var(--pp-text);}
.cart-empty{font-size:var(--fs-base); color:var(--pp-text-2);}
.cart-empty .ce-ico{color:var(--pp-text-3);}
.cart-foot{padding:var(--sp-4) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--pp-line); background:var(--pp-bg-raise);}
.cart-line{font-size:var(--fs-base); color:var(--pp-text-2); margin-bottom:6px;}
.cart-line.muted{font-size:var(--fs-sm); color:var(--pp-text-3);}
.cart-line .pos{color:var(--pp-gold); font-weight:600;}
.cart-total{margin:var(--sp-3) 0 var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--pp-line);}
.cart-total .lbl{font-size:var(--fs-xs); letter-spacing:.14em; color:var(--pp-text-2);}
.cart-total .amt{font-size:2rem; color:var(--pp-text);}
.cart-checkout{min-height:48px; padding:0 var(--sp-4); border-radius:var(--r-sm); background:var(--pp-teal); color:var(--pp-teal-ink); font-size:var(--fs-base); letter-spacing:.06em; box-shadow:var(--e-2); transition:filter var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);}
.cart-checkout:hover{filter:brightness(1.06); transform:translateY(-1px); box-shadow:var(--e-2);}
.cart-clear{margin-top:var(--sp-2); min-height:40px; border:1px solid var(--pp-line); border-radius:var(--r-sm); color:var(--pp-text-3); font-size:.6875rem;}
.cart-clear:hover{border-color:var(--pp-line); color:var(--pp-danger);}
.cart-note{font-size:var(--fs-xs); color:var(--pp-text-3); letter-spacing:0; margin-top:var(--sp-3);}
.cart-reminder{border-left:1px solid var(--pp-line-hi); border-radius:var(--r-md); background:var(--pp-bg-raise); box-shadow:var(--e-3);}

/* info overlay (hosts checkout, COA library, policies) */
.info-overlay{background:rgba(2,5,8,.72); transition:opacity var(--dur-3) var(--ease);}
.info-panel{background:var(--pp-bg-raise); border:1px solid var(--pp-line); border-radius:var(--r-lg); box-shadow:var(--e-3); transition:transform var(--dur-3) var(--ease);}
.info-panel::before{display:none;}
.info-close{width:44px; height:44px; border-radius:var(--r-sm); border:1px solid var(--pp-line); background:var(--pp-bg-raise); color:var(--pp-text-2);}
.info-close:hover{transform:none; border-color:var(--pp-line-hi); color:var(--pp-text);}
.info-content{padding:var(--sp-6) var(--sp-6) var(--sp-7);}
@media (max-width:560px){ .info-panel{border-radius:0; border:0;} .info-content{padding:var(--sp-7) var(--sp-4) var(--sp-6);} }
.info-eyebrow{font-size:.6875rem; letter-spacing:.2em; color:var(--pp-text-3);}
.info-content p{font-size:var(--fs-base); color:var(--pp-text-2); max-width:72ch;}
.info-content h4{color:var(--pp-text); font-size:var(--fs-xs); letter-spacing:.14em;}
.coa-row{background:var(--pp-surface); border:1px solid var(--pp-line); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4);}
.coa-row .cr-meta{color:var(--pp-text-3); font-size:var(--fs-xs);}
.coa-row a{background:var(--pp-teal); color:var(--pp-teal-ink); border-radius:var(--r-sm); min-height:36px; display:inline-flex; align-items:center; font-size:var(--fs-xs);}
.coa-row a:hover{transform:none; filter:brightness(1.06);}

/* checkout HUD = step indicator */
.ck-hud{padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-5); border:1px solid var(--pp-line); border-radius:var(--r-md); background:var(--pp-surface); gap:var(--sp-3); flex-wrap:wrap;}
.ck-hud .ck-meter{flex:1 1 160px; min-width:120px;}
@media (max-width:560px){
  .ck-hud{gap:var(--sp-2) var(--sp-3); padding:var(--sp-3);}
  .ck-hud .ck-meter{flex-basis:100%; order:4; margin-top:2px;}
  .ck-hud .ck-step{margin-right:auto;}
}
.ck-meter{height:6px; background:rgba(255,255,255,.06);}
.ck-fill{background:var(--pp-teal); box-shadow:none; transition:width var(--dur-3) var(--ease);}
.ck-step{font-size:var(--fs-xs); letter-spacing:.14em; color:var(--pp-text);}
.ck-total{font-size:var(--fs-base); color:var(--pp-text);}
.ck-mute{opacity:.7; min-width:32px; min-height:32px;}
.co-sec-label{font-size:var(--fs-xs); letter-spacing:.16em; color:var(--pp-text); margin:var(--sp-5) 0 var(--sp-3);}
.co-form{gap:var(--sp-3);}
.co-group{gap:6px;}
.co-group label{font-size:var(--fs-xs); letter-spacing:.08em; color:var(--pp-text-2);}
.co-group label .req{color:var(--pp-danger);}
.co-group label .co-opt{color:var(--pp-text-3);}
.co-group input, .co-group select{
  min-height:44px; padding:0 var(--sp-3); background:var(--pp-surface); border:1px solid var(--pp-line); border-radius:var(--r-sm);
  color:var(--pp-text); font-size:var(--fs-base); transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.co-group input::placeholder{color:var(--pp-text-3);}
.co-group input:focus, .co-group select:focus{outline:none; border-color:var(--pp-teal); box-shadow:0 0 0 3px rgba(94,214,200,.15);}
.co-group.invalid input, .co-group.invalid select{border-color:var(--pp-danger); box-shadow:0 0 0 3px rgba(255,107,107,.15);}
.co-ac{background:var(--pp-bg-raise); border:1px solid var(--pp-line-hi); border-radius:var(--r-sm); box-shadow:var(--e-3);}
.co-ac-item{font-size:var(--fs-sm); border-bottom:1px solid var(--pp-line); min-height:44px; align-items:center;}
.co-ac-item .sub{color:var(--pp-text-3);}
.co-disc{background:var(--pp-surface); border:1px solid var(--pp-line); border-radius:var(--r-sm);}
.co-disc:focus-within{border-color:var(--pp-teal); box-shadow:0 0 0 3px rgba(94,214,200,.15);}
.co-disc input{min-height:44px; padding:0 var(--sp-3); font-size:var(--fs-sm); color:var(--pp-text);}
.co-disc input::placeholder{color:var(--pp-text-3);}
.co-disc button{min-height:44px; padding:0 var(--sp-4); border-left:1px solid var(--pp-line); background:rgba(94,214,200,.1); color:var(--pp-teal); font-size:var(--fs-xs);}
.co-mini-summary{margin:var(--sp-3) 0 var(--sp-4);}
.co-summary{background:var(--pp-surface); border:1px solid var(--pp-line); border-radius:var(--r-md); padding:var(--sp-4);}
.co-sumline{font-size:var(--fs-base); color:var(--pp-text-2); padding:5px 0;}
.co-sumline.disc{color:var(--pp-gold); font-weight:600;}
.co-sumline.fee{color:var(--pp-warn);}
.co-sumline.total{margin-top:var(--sp-2); padding-top:var(--sp-3); border-top:1px solid var(--pp-line); color:var(--pp-text);}
.co-sumline.total .amt{font-size:2rem; color:var(--pp-text);}
.co-place{min-height:48px; padding:0 var(--sp-4); margin-top:var(--sp-4); border-radius:var(--r-sm); background:var(--pp-teal); color:var(--pp-teal-ink); font-size:var(--fs-base); letter-spacing:.06em; box-shadow:var(--e-2); transition:filter var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);}
.co-place:hover{filter:brightness(1.06); transform:translateY(-1px); box-shadow:var(--e-2);}
.co-place:disabled{opacity:.55;}
.co-legal{font-size:var(--fs-xs); color:var(--pp-text-2); letter-spacing:0; line-height:1.6;}
.co-back-btn{min-height:40px; padding:0 var(--sp-3); border:1px solid var(--pp-line); border-radius:var(--r-sm); color:var(--pp-text-2); font-size:var(--fs-xs); letter-spacing:.06em;}
.co-back-btn:hover{border-color:var(--pp-line-hi); color:var(--pp-text);}
.p3-switch{font-size:var(--fs-xs); color:var(--pp-text-2); margin:0 0 var(--sp-3);}
.p3-switch strong{color:var(--pp-gold);}
.co-addr{font-size:var(--fs-sm); color:var(--pp-text); background:var(--pp-surface); border:1px solid var(--pp-line-hi); border-radius:var(--r-sm); padding:var(--sp-3);}
.co-recap{border:1px solid var(--pp-line); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4);}
.co-recap .rl{font-size:var(--fs-sm); color:var(--pp-text-2);}
.co-aff{background:rgba(216,178,97,.06); border:1px solid rgba(216,178,97,.24); border-radius:var(--r-md);}

/* payment tiles: a real radio group with one obvious selected state */
.pay3d-row{gap:var(--sp-3); perspective:none; margin:0 0 var(--sp-4);}
.pay3d{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"ico name tag" "ico sub tag"; align-items:center; column-gap:var(--sp-3); row-gap:2px;
  min-height:64px; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md);
  background:var(--pp-surface); border:1px solid var(--pp-line); box-shadow:var(--e-1); color:var(--pp-text);
  animation:none; transform-style:flat; transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.pay3d::after{display:none;}
.pay3d:hover{border-color:var(--pp-line-hi); box-shadow:var(--e-2);}
.pay3d .p3-ico{grid-area:ico; width:40px; height:40px; border-radius:var(--r-sm); background:var(--pp-bg-raise); border:1px solid var(--pp-line); transform:none;}
.pay3d .p3-name{grid-area:name; transform:none; font-size:var(--fs-base); line-height:1.2;}
.pay3d .p3-sub{grid-area:sub; margin:0; line-height:1.3;}
.pay3d .p3-tag{grid-area:tag; margin:0; transform:none; font-size:.625rem; padding:3px 8px; white-space:nowrap;}
.pay3d .p3-tag.disc{background:rgba(216,178,97,.14); color:var(--pp-gold);}
.pay3d .p3-tag.fee{background:rgba(232,180,74,.14); color:var(--pp-warn);}
.pay3d .p3-sub{color:var(--pp-text-3); font-size:.6875rem;}
.pay3d.active{border-color:var(--pp-teal); background:rgba(94,214,200,.08); box-shadow:0 0 0 1px var(--pp-teal) inset, var(--e-1);}
.pay3d.active::before{
  content:'✓'; top:auto; right:var(--sp-3); transform:none; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; background:var(--pp-teal); color:var(--pp-teal-ink); font-size:.75rem; font-weight:800;
}
.pay3d.active .p3-tag{margin-right:30px;}
.pay3d.active:not(:has(.p3-tag)) .p3-name{padding-right:30px;}
.pay3d:focus-visible{outline:2px solid var(--pp-teal); outline-offset:2px;}
.pay3d:active{transform:scale(.99);}

/* confirmation */
.cs-check{background:rgba(94,214,200,.12); border:1px solid var(--pp-line-hi);}
.cs-order{border:1px solid var(--pp-line-hi); border-radius:var(--r-sm); background:var(--pp-surface); color:var(--pp-text);}
.cs-body,.cs-step{color:var(--pp-text-2); font-size:var(--fs-base);}
.cs-deliver{border:1px solid var(--pp-line); border-radius:var(--r-md); background:var(--pp-surface); color:var(--pp-text-2); font-size:var(--fs-sm);}
.cs-tg{border-radius:var(--r-sm); min-height:48px;}
.cs-tg-pay,.cs-reorder{background:var(--pp-teal); color:var(--pp-teal-ink); box-shadow:var(--e-2);}
.mc-chip{background:var(--pp-surface); border:1px solid var(--pp-line); border-radius:var(--r-sm); transition:border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);}
.mc-chip:hover{transform:none; border-color:var(--pp-line-hi);}
.mc-chip.active{border-color:var(--pp-teal); background:rgba(94,214,200,.1); box-shadow:0 0 0 1px var(--pp-teal) inset;}
.mc-detail{background:var(--pp-surface); border:1px solid var(--pp-line); border-radius:var(--r-md);}
.mc-amt .big{color:var(--pp-text);}

/* ==========================================================================
   9. TOASTS, AGE GATE, MODALS
   ========================================================================== */
.toast{
  background:var(--pp-bg-raise); border:1px solid var(--pp-line-hi); border-left-width:1px; border-radius:var(--r-md); box-shadow:var(--e-3);
  padding:var(--sp-3) var(--sp-4); transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.toast-body h4{font-size:var(--fs-sm);}
.toast-body p{font-size:var(--fs-xs); color:var(--pp-text-2);}
.age-gate{background:rgba(2,5,8,.9);}
.age-box{background:var(--pp-bg-raise); border:1px solid var(--pp-line); border-radius:var(--r-lg); box-shadow:var(--e-3);}
.age-box p{color:var(--pp-text-2); font-size:var(--fs-base);}
.age-yes{min-height:48px; border-radius:var(--r-sm); background:var(--pp-teal); color:var(--pp-teal-ink); border:0;}
.age-no{min-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-sm); border:1px solid var(--pp-line); color:var(--pp-text-2);}
.age-fine{color:var(--pp-text-3); font-size:var(--fs-xs);}
.modal{background:var(--pp-bg-raise); border:1px solid var(--pp-line); border-radius:var(--r-lg); box-shadow:var(--e-3);}

/* Picker goal tiles: product vial artwork instead of lifestyle video */
.tile .goal-tint{background:linear-gradient(to bottom, rgba(5,9,12,0) 45%, rgba(5,9,12,.85) 100%);}

/* Research view: calculator CTA as a full-width row instead of a centred island */
.calc-cta-card{
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"eyebrow btn" "title btn" "sub btn"; column-gap:var(--sp-6); row-gap:var(--sp-1); align-items:center;
  max-width:none; margin:0 0 var(--sp-6); padding:var(--sp-4) var(--sp-5); text-align:left;
  background:var(--pp-surface); border:1px solid var(--pp-line); border-radius:var(--r-md); box-shadow:var(--e-1);
}
.calc-cta-card .cta-eyebrow{grid-area:eyebrow; margin:0; font-size:.6875rem; letter-spacing:.16em; color:var(--pp-text-3);}
.calc-cta-card .cta-title{grid-area:title; margin:0; font-size:var(--fs-lg); line-height:1.1;}
.calc-cta-card .cta-sub{grid-area:sub; margin:0; font-size:var(--fs-sm); color:var(--pp-text-2); max-width:60ch;}
.calc-cta-card .cta-btn{grid-area:btn; margin:0; min-height:44px; display:inline-flex; align-items:center; padding:0 var(--sp-4); border-radius:var(--r-sm); background:var(--pp-teal); color:var(--pp-teal-ink); font-size:var(--fs-xs); letter-spacing:.12em; white-space:nowrap; box-shadow:var(--e-2);}
@media (max-width:600px){ .calc-cta-card{grid-template-columns:1fr; grid-template-areas:"eyebrow" "title" "sub" "btn"; padding:var(--sp-4);} .calc-cta-card .cta-btn{justify-content:center;} }

/* Full-screen views that stay overlays (picker, research) */
.view{background:var(--pp-bg); transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);}
.view-bar{background:color-mix(in srgb, var(--pp-bg) 82%, transparent); border-bottom:1px solid var(--pp-line); padding:var(--sp-3) var(--sp-5); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);}
.view-back{min-height:40px; padding:0 var(--sp-3); border:1px solid var(--pp-line); border-radius:var(--r-pill); background:transparent; color:var(--pp-text); font-size:var(--fs-xs); letter-spacing:.1em; transition:border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);}
.view-back:hover{background:transparent; color:var(--pp-teal); border-color:var(--pp-line-hi); transform:none;}
.view-title{font-size:var(--fs-lg); letter-spacing:.04em;}
.view-meta{font-size:var(--fs-xs); color:var(--pp-text-3);}
@media (pointer:coarse){ .view-back{min-height:44px;} }
@media (max-width:600px){
  .view-bar{gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); min-height:56px;}
  .view-back{padding:0 var(--sp-2); font-size:.6875rem; letter-spacing:.06em; white-space:nowrap;}
  .view-title{font-size:1.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
  .view-meta{display:none;}
  .view-scroll{padding-left:var(--sp-4); padding-right:var(--sp-4);}
}

/* ==========================================================================
   10. FOOTER — compact, three columns, compliance unmissable
   ========================================================================== */
.site-footer{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; grid-template-areas:"brand links learn" "cat links learn" "email links learn" "legal legal legal";
  grid-template-rows:auto auto 1fr auto; column-gap:var(--sp-7); row-gap:var(--sp-3); align-items:start; align-content:start; text-align:left;
  max-width:1280px; margin:0 auto; padding:var(--sp-7) clamp(var(--sp-4),4vw,var(--sp-7)) var(--sp-6);
  background:transparent; border-top:1px solid var(--pp-line);
}
.site-footer .foot-brand{grid-area:brand; display:flex; align-items:center; gap:var(--sp-3); justify-content:flex-start; margin:0;}
.site-footer .foot-brand img{width:36px; height:36px; border-radius:50%;}
.site-footer .foot-brand span{font-family:var(--pp-sans); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:var(--fs-sm);}
.site-footer .foot-catalog{grid-area:cat; margin:0; font-size:var(--fs-sm); color:var(--pp-text-2); text-decoration:none; align-self:center; min-height:32px; display:inline-flex; align-items:center;}
.site-footer .foot-catalog:hover{color:var(--pp-teal);}
.site-footer .foot-email{grid-area:email; align-self:start; display:flex; gap:var(--sp-2); margin:var(--sp-2) 0 0; max-width:360px; justify-content:flex-start;}
.site-footer .foot-email input{flex:1; min-width:0; min-height:44px; padding:0 var(--sp-3); background:var(--pp-surface); border:1px solid var(--pp-line); border-radius:var(--r-sm); color:var(--pp-text); font-family:var(--pp-sans); font-size:var(--fs-sm);}
.site-footer .foot-email input::placeholder{color:var(--pp-text-3);}
.site-footer .foot-email input:focus{outline:none; border-color:var(--pp-teal); box-shadow:0 0 0 3px rgba(94,214,200,.15);}
.site-footer .foot-email button{min-height:44px; padding:0 var(--sp-4); border:0; border-radius:var(--r-sm); background:var(--pp-teal); color:var(--pp-teal-ink); font-family:var(--pp-sans); font-weight:700; font-size:var(--fs-sm); cursor:pointer;}
.site-footer .foot-links{grid-area:links; display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin:0; justify-content:flex-start;}
.site-footer .foot-links + .foot-links{grid-area:learn; margin:0;}
.site-footer .foot-links a, .site-footer .foot-links .foot-linkbtn{
  display:inline-flex; align-items:center; min-height:36px; padding:0; margin:0; border:0; background:transparent;
  color:var(--pp-text-2); font-family:var(--pp-sans); font-size:var(--fs-sm); font-weight:500; letter-spacing:0; text-transform:none; text-decoration:none; cursor:pointer;
  transition:color var(--dur-2) var(--ease);
}
.site-footer .foot-links a:hover, .site-footer .foot-links .foot-linkbtn:hover{color:var(--pp-teal); background:transparent;}
.site-footer .foot-links > span{margin:0 0 var(--sp-1); font-size:.625rem; letter-spacing:.16em; color:var(--pp-text-3);}
.site-footer .foot-legal{
  grid-area:legal; margin:var(--sp-4) 0 0; padding:var(--sp-4) var(--sp-4);
  border:1px solid var(--pp-line-hi); border-radius:var(--r-md); background:var(--pp-surface);
  font-family:var(--pp-sans); font-size:var(--fs-sm); line-height:1.6; color:var(--pp-text); text-align:left; max-width:none;
}
@media (max-width:820px){
  .site-footer{grid-template-columns:1fr; grid-template-areas:"brand" "cat" "email" "links" "learn" "legal"; column-gap:0; row-gap:var(--sp-3); padding-top:var(--sp-6);}
  .site-footer .foot-links{margin-top:var(--sp-3);}
  .site-footer .foot-links + .foot-links{margin-top:var(--sp-2);}
}

/* ==========================================================================
   11. SUBPAGES — token layer + light normalisation (only where there is no hero SPA)
   ========================================================================== */
html:not(:has(#atelierHero)) body{font-family:var(--pp-sans); color:var(--pp-text); background:var(--pp-bg);}
html:not(:has(#atelierHero)) a{color:var(--pp-teal);}
html:not(:has(#atelierHero)) p, html:not(:has(#atelierHero)) li{max-width:72ch;}
html:not(:has(#atelierHero)) p{font-size:var(--fs-base); line-height:1.7;}
html:not(:has(#atelierHero)) h1{font-size:var(--fs-display); line-height:.95;}
html:not(:has(#atelierHero)) h2{font-size:var(--fs-xl); line-height:1.05;}
html:not(:has(#atelierHero)) h3{font-size:var(--fs-lg); line-height:1.15;}
html:not(:has(#atelierHero)) table{width:100%; border-collapse:collapse; margin:var(--sp-4) 0; font-size:var(--fs-sm); background:var(--pp-surface); border:1px solid var(--pp-line); border-radius:var(--r-md); overflow:hidden;}
html:not(:has(#atelierHero)) th, html:not(:has(#atelierHero)) td{padding:var(--sp-2) var(--sp-3); text-align:left; border-bottom:1px solid var(--pp-line); vertical-align:top;}
html:not(:has(#atelierHero)) th{font-family:var(--pp-mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--pp-text-2); background:var(--pp-bg-raise);}
html:not(:has(#atelierHero)) tr:last-child td{border-bottom:0;}
html:not(:has(#atelierHero)) code{font-family:var(--pp-mono); font-size:.9em; padding:.1em .4em; border-radius:4px; background:var(--pp-surface-2); border:1px solid var(--pp-line); color:var(--pp-text);}
html:not(:has(#atelierHero)) pre{font-family:var(--pp-mono); font-size:var(--fs-sm); line-height:1.6; padding:var(--sp-4); margin:var(--sp-4) 0; border-radius:var(--r-md); background:var(--pp-surface); border:1px solid var(--pp-line); overflow-x:auto; max-width:100%;}
html:not(:has(#atelierHero)) pre code{padding:0; border:0; background:transparent;}
html:not(:has(#atelierHero)) .promo-strip{position:fixed; top:0; left:0; right:0; z-index:600;} /* subpages lay out around a fixed strip; keep them intact */

/* ==========================================================================
   12. REDUCED MOTION — nothing non-essential moves, nothing becomes invisible
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.001ms; animation-iteration-count:1; transition-duration:.001ms; scroll-behavior:auto;}
  .pp-reveal, .hero-logo-wrap, .hero-brand-name, .hero-brand-sub, .path-choice, .hero-talk-link{opacity:1; transform:none; animation:none;}
  .atelier-hero::after{transform:translate3d(0,-50%,0);}
  .cc:hover, .path-choice:hover, .drw-cta:hover, .cart-checkout:hover, .co-place:hover, .hero-logo-wrap:hover{transform:none;}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){ .atelier-hero::after{transform:none;} }

} /* end @layer pp2026 */