/* css/pp-v8.snap.css: Purity Peptides v8 "shelf" refresh (homepage preview).
   Loaded after css/pp-2026.css by index.html. Everything lives in
   @layer v8, which beats both `legacy` and `pp2026` without !important. */
@layer legacy, pp2026, v8;

@layer v8 {

/* ==========================================================================
   1. TOKENS: same ground and teal, new type system
   ========================================================================== */
:root{
  --sans:'Sofia Sans',system-ui,sans-serif;
  --display:'Sofia Sans Condensed','Sofia Sans',sans-serif;
  --mono:'Sofia Sans Semi Condensed','Sofia Sans',sans-serif;   /* legacy "mono" labels become a tight UI sans */
  --pp-sans:var(--sans); --pp-display:var(--display); --pp-mono:var(--mono);

  --v8-ink:#EEF4F6;
  --v8-ink-2:#A9BAC3;
  --v8-ink-3:#7D929E;          /* 4.9:1 on --pp-bg */
  --v8-glass:rgba(214,236,240,.16);
  --v8-light:rgba(226,242,246,.11);
  --v8-hall:#F0A35B;           /* Halloween ticket only */
  --v8-ease:cubic-bezier(.16,1,.3,1);
  --v8-gutter:clamp(16px,4vw,56px);
  --v8-max:1320px;
}

html{font-family:var(--sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{font-family:var(--sans); font-feature-settings:"kern" 1;}
::selection{background:rgba(94,214,200,.28); color:#fff;}
html{scrollbar-color:#24343F var(--pp-bg);}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:var(--pp-bg);}
::-webkit-scrollbar-thumb{background:#22323C; border-radius:10px; border:2px solid var(--pp-bg);}
::-webkit-scrollbar-thumb:hover{background:#2E4350;}
:focus-visible{outline:2px solid var(--pp-teal); outline-offset:3px;}
input, textarea{caret-color:var(--pp-teal);}

/* Bebas Neue was caps-only, so every legacy display heading rendered in capitals
   whatever its source text. Keep that behaviour for the legacy surfaces. */
:is(.acct-name,.age-box h2,.alt-info .name,.alt-price,.alt-rank .ar-rank,.calc-cta-card .cta-title,.cart-title,
    .cart-total .amt,.ci-name,.ci-price,.co-aff-badge,.co-sumline.total .amt,.coa-row .cr-name,.cs-title,
    .drw-name,.fk-card .fk-l,.foot-brand span,.hero-shop-btn,.info-content h3,.info-title,.mc-amt .big,
    .mc-chip-tk,.modal-title,.pc-title,.picker-title,.pk-fork h2,.pk-ignite .ig-word,.pk-next-opt .no-t,
    .pk-next-title,.pk-opt .pk-ol,.pk-q-title,.pk-rv-name,.prod-hero .pname,.rd-name,.rs-card-name,
    .rs-libtitle,.sc-value,.tile-name,.view-title,.wk-left .wk-title,.wk-stat .wk-num,[style*="var(--display)"]){
  text-transform:uppercase; font-weight:800; letter-spacing:.01em;
}

/* Every price on the site sits in tabular figures */
:is(.cc-price,.drw-price,.ci-price,.cart-total,.co-sumline,.alt-price,.mc-amt,.v8-price,.v8-pv){font-variant-numeric:tabular-nums lining-nums;}

/* ==========================================================================
   2. ANNOUNCEMENT STRIP + HEADER
   ========================================================================== */
.promo-strip{
  font-family:var(--mono); font-size:.8125rem; font-weight:600; letter-spacing:.04em; text-transform:none;
  color:var(--v8-ink-2); padding:8px var(--sp-3);
}
.promo-strip > span{color:var(--v8-ink-3);}
html.pp-halloween .promo-strip.is-sale{color:var(--v8-hall);}

.pp-header{padding-inline:var(--v8-gutter);}
.pp-header .atelier-mark-text .brand{font-family:var(--display); font-size:1.125rem; font-weight:800; letter-spacing:.06em;}
.pp-header .atelier-mark-text .tag{font-family:var(--mono); font-size:.75rem; letter-spacing:.02em; text-transform:none; color:var(--v8-ink-3);}
.pp-header .atelier-pill a{font-family:var(--sans); font-size:.9375rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--v8-ink-2);}
.pp-header .atelier-pill a:hover{color:var(--v8-ink); background:rgba(255,255,255,.05);}
.pp-header .cart-btn{font-family:var(--sans); font-size:.9375rem; font-weight:700; letter-spacing:0; text-transform:none;}
.pp-header #cartCount{font-family:var(--sans); font-size:.75rem;}
.pp-sheet-link{font-family:var(--sans);}
.pp-sheet-link small, .pp-sheet-title, .pp-sheet-foot{font-family:var(--mono); letter-spacing:.02em; text-transform:none;}

/* ==========================================================================
   3. HERO: the shelf
   ========================================================================== */
.v8-hero{
  position:relative; z-index:2; overflow:hidden;
  padding:clamp(28px,5vh,64px) 0 clamp(28px,4vh,48px);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(120,170,185,.10) 0%, transparent 70%),
    linear-gradient(180deg, #060D12 0%, var(--pp-bg) 100%);
  isolation:isolate;
}

.v8-hero-head{
  max-width:var(--v8-max); margin:0 auto; padding:0 var(--v8-gutter);
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-6);
}
.v8-hero-copy{max-width:44rem;}
.v8-title{
  margin:0; font-family:var(--display); font-weight:800; text-transform:none;
  font-size:clamp(2.6rem,5.4vw,4.5rem); line-height:.92; letter-spacing:-.015em; color:var(--v8-ink);
  text-wrap:balance;
}
.v8-title-2{color:var(--v8-ink-2); font-weight:600;}
.v8-lede{
  margin:var(--sp-4) 0 0; max-width:38rem;
  font-family:var(--sans); font-size:clamp(1rem,1.3vw,1.1875rem); line-height:1.5; color:var(--v8-ink-2); text-wrap:pretty;
}
.v8-lede .gloss{white-space:nowrap; color:var(--v8-ink); border-bottom:1px dotted rgba(94,214,200,.5);}

/* Sale ticket: a perforated stub, not a banner */
.v8-sale{
  position:relative; flex:0 0 auto; display:grid; gap:2px; text-align:left; cursor:pointer;
  padding:14px 20px 14px 22px; min-width:15rem;
  color:var(--v8-ink); background:#1A120C;
  border:1px solid rgba(240,163,91,.35); border-radius:10px;
  -webkit-mask:radial-gradient(circle 7px at 0 50%, transparent 98%, #000) , radial-gradient(circle 7px at 100% 50%, transparent 98%, #000);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  transition:transform .3s var(--v8-ease), border-color .3s var(--v8-ease), background-color .3s var(--v8-ease);
}
.v8-sale[hidden]{display:none;}
.v8-sale:hover{transform:translateY(-2px); border-color:rgba(240,163,91,.7); background:#22170E;}
.v8-sale-k{font-family:var(--mono); font-size:.8125rem; font-weight:700; letter-spacing:.02em; color:var(--v8-hall);}
.v8-sale-v{font-family:var(--display); font-size:1.75rem; font-weight:800; line-height:1; letter-spacing:-.01em;}
.v8-sale-v b{color:var(--v8-hall); font-weight:900;}
.v8-sale-d{font-family:var(--mono); font-size:.8125rem; color:#C9B49F; font-variant-numeric:tabular-nums;}

/* --- the shelf --- */
.v8-shelf-wrap{position:relative; max-width:var(--v8-max); margin:clamp(16px,3vh,36px) auto 0; padding:0 var(--v8-gutter);}
.v8-shelf{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 clamp(8px,1.5vw,24px);
  position:relative; z-index:2;
}
.v8-vial{position:relative; display:flex; flex-direction:column; align-items:center; min-width:0;}

.v8-vial-hit{
  position:relative; display:block; width:100%; padding:0; border:0; background:none; cursor:pointer;
  height:clamp(170px,17vw,236px);
}
/* overhead spotlight cone + floor pool, drawn per vial */
.v8-vial-hit::before{
  content:''; position:absolute; z-index:0; left:50%; bottom:0; width:120%; height:115%;
  transform:translateX(-50%);
  background:
    radial-gradient(40% 18% at 50% 96%, var(--v8-light) 0%, transparent 100%),
    conic-gradient(from 180deg at 50% -6%, transparent 0deg 164deg, rgba(220,240,245,.045) 172deg 188deg, transparent 196deg 360deg);
  opacity:.75; transition:opacity .5s var(--v8-ease);
  pointer-events:none;
}
.v8-vial-hit img{
  position:absolute; z-index:1; left:50%; bottom:-5%; height:110%; width:auto; max-width:none;
  transform:translateX(-50%);
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.55));
  transition:transform .55s var(--v8-ease), filter .55s var(--v8-ease);
}
.v8-vial-hit:focus-visible{outline:none;}
.v8-vial-hit:focus-visible img{filter:drop-shadow(0 0 0 var(--pp-teal)) drop-shadow(0 18px 18px rgba(0,0,0,.55));}

/* the glass board the vials stand on */
.v8-shelf-board{
  position:relative; z-index:1; height:22px; margin-top:-1px;
  background:
    linear-gradient(180deg, rgba(220,240,245,.22) 0, rgba(220,240,245,.22) 1px, rgba(150,190,200,.07) 1px, rgba(12,24,31,.4) 100%);
  border-radius:0 0 3px 3px;
  box-shadow:0 22px 40px -10px rgba(0,0,0,.8);
}
.v8-shelf-wrap > .v8-shelf-board{position:absolute; left:var(--v8-gutter); right:var(--v8-gutter); top:clamp(170px,17vw,236px);}
.v8-shelf-board::after{
  content:''; position:absolute; left:0; right:0; top:100%; height:60px;
  background:linear-gradient(180deg, rgba(150,190,200,.05), transparent);
}

/* price tag under each vial */
.v8-tag{
  position:relative; z-index:2; width:100%; max-width:15rem;
  margin-top:calc(22px + var(--sp-3)); padding:0 4px;
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"rank rank" "name name" "dose dose" "price add" "pv add";
  column-gap:var(--sp-2); align-items:end;
}
.v8-rank{grid-area:rank; margin-bottom:2px; font-family:var(--mono); font-size:.8125rem; font-weight:700; letter-spacing:.01em; color:var(--pp-gold); white-space:nowrap;}
.v8-name{grid-area:name; font-family:var(--display); font-size:clamp(1.15rem,1.55vw,1.5rem); font-weight:800; line-height:1.05; color:var(--v8-ink); letter-spacing:-.005em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.v8-dose{grid-area:dose; font-family:var(--mono); font-size:.8125rem; color:var(--v8-ink-3); margin-top:2px;}
.v8-price{grid-area:price; margin-top:var(--sp-2); font-family:var(--display); font-size:clamp(1.6rem,2.3vw,2.125rem); font-weight:700; line-height:1; color:var(--v8-ink); letter-spacing:-.02em;}
.v8-price small{font-family:var(--mono); font-size:.75rem; font-weight:600; color:var(--v8-ink-3); letter-spacing:0; margin-left:4px;}
.v8-pv{grid-area:pv; font-family:var(--mono); font-size:.8125rem; color:var(--v8-ink-2); margin-top:3px;}
.v8-add{
  grid-area:add; align-self:end; display:inline-grid; place-items:center;
  width:44px; height:44px; padding:0; border-radius:50%;
  border:1px solid rgba(94,214,200,.35); background:rgba(94,214,200,.06); color:var(--pp-teal); cursor:pointer;
  transition:background-color .2s var(--v8-ease), color .2s var(--v8-ease), border-color .2s var(--v8-ease), transform .2s var(--v8-ease);
}
.v8-add svg{width:18px; height:18px;}
.v8-add:hover{background:var(--pp-teal); color:var(--pp-teal-ink); border-color:var(--pp-teal);}
.v8-add:active{transform:scale(.94);}
.v8-add.is-added{background:var(--pp-teal); color:var(--pp-teal-ink); border-color:var(--pp-teal);}

/* signature interaction: lift one, dim the rest */
@media (hover:hover){
  .v8-vial-hit:hover img, .v8-vial:focus-within .v8-vial-hit img{transform:translate(-50%,-10px);}
  .v8-vial-hit:hover::before, .v8-vial:focus-within .v8-vial-hit::before{opacity:1.6;}
  .v8-shelf:has(.v8-vial-hit:hover) .v8-vial:not(:has(.v8-vial-hit:hover)) img{filter:brightness(.55) drop-shadow(0 18px 18px rgba(0,0,0,.55));}
  .v8-shelf:has(.v8-vial-hit:hover) .v8-vial:not(:has(.v8-vial-hit:hover)) .v8-vial-hit::before{opacity:.35;}
}

/* routes under the shelf */
.v8-routes{
  max-width:var(--v8-max); margin:clamp(24px,4vh,44px) auto 0; padding:0 var(--v8-gutter);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3);
}
.v8-route.path-choice, .v8-route{
  all:unset; box-sizing:border-box; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 20px; border-radius:999px;
  font-family:var(--sans); font-size:1rem; font-weight:700; letter-spacing:0; color:var(--v8-ink);
  border:1px solid rgba(255,255,255,.14); background:transparent;
  transition:background-color .2s var(--v8-ease), border-color .2s var(--v8-ease), color .2s var(--v8-ease);
}
.v8-route:hover{border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.04);}
.v8-route:focus-visible{outline:2px solid var(--pp-teal); outline-offset:3px;}
.v8-route-main.path-choice{background:var(--pp-teal); border-color:var(--pp-teal); color:var(--pp-teal-ink);}
.v8-route-main.path-choice:hover{background:#79E2D6; border-color:#79E2D6;}
.v8-count{font-variant-numeric:tabular-nums;}

.v8-route-coa svg{width:18px; height:18px; color:var(--pp-teal);}
.v8-coa-n{color:var(--v8-ink-3); font-weight:600; font-variant-numeric:tabular-nums;}
.v8-routes-2{display:inline-flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4); margin-left:var(--sp-3);}
.v8-link.path-choice{
  all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; min-height:48px; padding:0 2px;
  font-family:var(--sans); font-size:1rem; font-weight:600; color:var(--v8-ink-2);
  text-decoration:underline; text-decoration-color:rgba(169,186,195,.35); text-underline-offset:5px; text-decoration-thickness:1px;
  transition:color .2s var(--v8-ease), text-decoration-color .2s var(--v8-ease);
}
.v8-link.path-choice:hover{color:var(--v8-ink); text-decoration-color:var(--pp-teal);}
.v8-link.path-choice:focus-visible{outline:2px solid var(--pp-teal); outline-offset:3px; border-radius:4px;}

.v8-facts{
  width:calc(100% - 2 * var(--v8-gutter)); max-width:calc(var(--v8-max) - 2 * var(--v8-gutter)); margin:clamp(20px,3vh,32px) auto 0; padding:var(--sp-4) 0 0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.07); box-sizing:border-box;
}
.v8-facts > div{margin:0; min-width:0;}
.v8-facts dt{font-family:var(--mono); font-size:.8125rem; font-weight:700; color:var(--v8-ink); margin:0 0 2px;}
.v8-facts dd{margin:0; font-family:var(--sans); font-size:.9375rem; line-height:1.45; color:var(--v8-ink-2);}
.v8-facts a, .v8-inline{all:unset; cursor:pointer; color:var(--v8-ink); text-decoration:underline; text-decoration-color:rgba(94,214,200,.45); text-underline-offset:3px;}
.v8-facts a:hover, .v8-inline:hover{color:var(--pp-teal);}
.v8-facts a:focus-visible, .v8-inline:focus-visible{outline:2px solid var(--pp-teal); outline-offset:2px; border-radius:3px;}

.v8-coa{grid-column:1 / -1; display:inline-flex; align-items:center; gap:5px; margin-top:var(--sp-2); font-family:var(--mono); font-size:.8125rem; color:var(--v8-ink-2);}
.v8-coa svg{width:14px; height:14px; color:var(--pp-teal); flex:none;}

/* first paint: the lights come on left to right; vials are visible from frame one */
@media (prefers-reduced-motion:no-preference){
  @keyframes v8Lamp{from{opacity:0;} to{opacity:.75;}}
  @keyframes v8Rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
  html:not(.pp-settled) .v8-vial-hit::before{animation:v8Lamp .9s var(--v8-ease) backwards;}
  html:not(.pp-settled) .v8-vial:nth-child(2) .v8-vial-hit::before{animation-delay:.08s;}
  html:not(.pp-settled) .v8-vial:nth-child(3) .v8-vial-hit::before{animation-delay:.16s;}
  html:not(.pp-settled) .v8-vial:nth-child(4) .v8-vial-hit::before{animation-delay:.24s;}
  html:not(.pp-settled) .v8-vial:nth-child(5) .v8-vial-hit::before{animation-delay:.32s;}
  html:not(.pp-settled) .v8-tag{animation:v8Rise .6s var(--v8-ease) .2s backwards;}
}

/* --- hero responsive --- */
@media (max-width:1100px){
  .v8-hero-head{flex-direction:column; align-items:flex-start; gap:var(--sp-5);}
}
@media (max-width:760px){
  .v8-hero{padding-top:var(--sp-5);}
  .v8-title{font-size:clamp(2.4rem,11vw,3.2rem);}
  .v8-title-2{display:block;}
  .v8-lede{font-size:1rem;}
  .v8-sale{width:100%; min-width:0;}
  .v8-shelf-wrap{margin-top:var(--sp-5);}
  /* 2x2, everything visible: no sideways swipe hiding products */
  .v8-shelf{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-5) var(--sp-3);}
  .v8-vial:nth-child(n+5){display:none;}
  .v8-vial-hit{height:168px;}
  .v8-vial-hit::after{content:''; position:absolute; z-index:2; left:4%; right:4%; bottom:0; height:1px; background:linear-gradient(90deg, transparent, rgba(220,240,245,.3), transparent);}
  .v8-shelf-wrap > .v8-shelf-board{display:none;}
  .v8-tag{margin-top:var(--sp-3);}
  .v8-name{font-size:1.2rem;}
  .v8-dose{font-size:.75rem;}
  .v8-price{font-size:1.6rem;}
  .v8-pv{font-size:.75rem; white-space:nowrap;}
  .v8-add{width:44px; height:44px;}
  .v8-routes{gap:var(--sp-2);}
  .v8-route-main.path-choice, .v8-route-coa{flex:1 1 100%; justify-content:center;}
  .v8-routes-2{flex-basis:100%; justify-content:center; margin:0;}
  .v8-facts{grid-template-columns:1fr; gap:var(--sp-3);}
}

/* ==========================================================================
   4. CATALOG: one header row, quieter toolbar
   ========================================================================== */
#view-catalog .view-bar{max-width:var(--v8-max); padding:clamp(48px,8vh,96px) var(--v8-gutter) 0; align-items:baseline;}
#view-catalog .view-title{font-family:var(--display); font-size:clamp(2.2rem,4.4vw,3.5rem); font-weight:800; text-transform:none; letter-spacing:-.015em;}
#view-catalog .view-scroll{max-width:var(--v8-max); padding:var(--sp-3) var(--v8-gutter) var(--sp-9);}

.kit-banner{
  display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;
  margin:0 0 var(--sp-5); padding:0; background:none; border:0; box-shadow:none;
}
.kit-banner .kb-tag{display:none;}
.kit-banner .kb-text{font-family:var(--sans); font-size:1.0625rem; line-height:1.5; color:var(--v8-ink-2); max-width:60rem;}
.kit-banner .kb-text strong{color:var(--v8-ink); font-weight:700;}
.newbie-strip{display:none;}   /* the hero routes and the toolbar pill already carry both links */

.cat-toolbar{gap:var(--sp-3); margin-bottom:var(--sp-4);}
.cat-search{background:#0B141A; border-color:rgba(255,255,255,.1); box-shadow:none; min-height:52px; border-radius:14px; padding:0 var(--sp-4);}
.cat-search input{font-family:var(--sans); font-size:1rem; min-height:50px;}
.cat-search .cs-icon{font-size:0; width:18px; height:18px; background:currentColor; color:var(--v8-ink-3);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;}
.pp-guide-pill{font-family:var(--sans); font-size:.9375rem; font-weight:700; letter-spacing:0; text-transform:none; min-height:52px; border-radius:14px; border-color:rgba(216,178,97,.35); padding:0 var(--sp-5);}
.cat-toolbar #catCount{font-family:var(--mono); font-size:.875rem; letter-spacing:0; text-transform:none; color:var(--v8-ink-3);}

.cat-tabs-wrap{-webkit-mask:none; mask:none;}
.cat-tabs{margin:0; padding:2px 0;}
@media (min-width:761px){ .cat-tabs{flex-wrap:wrap; overflow:visible;} }
.cat-tab{text-transform:none; font-family:var(--sans); font-size:.9375rem; font-weight:600; letter-spacing:0; min-height:42px; padding:0 18px; background:transparent; border-color:rgba(255,255,255,.1); color:var(--v8-ink-2);}
.cat-tab.active{background:var(--v8-ink); border-color:var(--v8-ink); color:#071016;}
.cat-tabs.searching .cat-tab.active{background:transparent; color:var(--v8-ink-3); border-color:rgba(255,255,255,.1);}

.cat-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--sp-6) var(--sp-4);}

/* ==========================================================================
   5. PRODUCT CARD: the vial on its own plinth, price as type
   ========================================================================== */
.cc{
  position:relative; gap:0; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none;
}
.cc:hover{transform:none; box-shadow:none;}
.cc:focus-visible{outline:2px solid var(--pp-teal); outline-offset:6px; border-radius:16px;}
.cc-photo{
  position:relative; aspect-ratio:1/1; padding:0; border-radius:16px; overflow:hidden;
  background:
    radial-gradient(50% 12% at 50% 88%, rgba(226,242,246,.10) 0%, transparent 100%),
    radial-gradient(70% 70% at 50% 20%, rgba(120,170,185,.10) 0%, transparent 70%),
    #0B151B;
  border:1px solid rgba(255,255,255,.06);
  transition:border-color .3s var(--v8-ease), background-color .3s var(--v8-ease);
}
.cc-photo::after{content:''; position:absolute; left:12%; right:12%; bottom:12%; height:1px; background:linear-gradient(90deg, transparent, rgba(220,240,245,.18), transparent);}
.cc-photo img{position:relative; z-index:1; width:100%; height:100%; object-fit:contain; padding:7% 0 4%; box-sizing:border-box; filter:drop-shadow(0 14px 14px rgba(0,0,0,.55)); transition:transform .5s var(--v8-ease);}
.cc:hover .cc-photo{border-color:rgba(255,255,255,.14);}
.cc:hover .cc-photo img{transform:translateY(-6px);}

.cc-badges{position:absolute; z-index:3; top:12px; left:12px; min-height:0;}
.cc-badge{font-family:var(--mono); font-size:.75rem; font-weight:700; letter-spacing:.01em; text-transform:none; padding:3px 8px; border-radius:6px;}
.cc-badge.rank{background:rgba(216,178,97,.14); color:var(--pp-gold); border-color:rgba(216,178,97,.28);}

.cc-cat{margin:var(--sp-4) 0 0; font-family:var(--mono); font-size:.8125rem; font-weight:600; letter-spacing:.01em; text-transform:none; color:var(--v8-ink-3);}
.cc-name{margin:2px 0 0; font-family:var(--display); font-size:1.625rem; font-weight:800; line-height:1.02; letter-spacing:-.01em; text-transform:none;}
.cc-what{margin-top:var(--sp-2); font-family:var(--sans); font-size:.9375rem; color:var(--v8-ink-2);}
.cc-price{margin-top:var(--sp-3); font-family:var(--mono); gap:3px;}
.cc-price .cc-price-main{gap:0 8px;}
.cc-price .from{font-family:var(--mono); font-size:.8125rem; letter-spacing:0; text-transform:none; color:var(--v8-ink-3); margin-right:0;}
.cc-price .cc-price-kit{font-family:var(--display); font-size:2rem; font-weight:700; letter-spacing:-.02em; line-height:1;}
.cc-price .cc-price-unit, .cc-price .cc-price-pv, .cc-price .single, .cc-price .cc-price-single{font-family:var(--mono); font-size:.875rem; letter-spacing:0; color:var(--v8-ink-2);}
.cc-price .cc-price-pv{color:var(--v8-ink-3);}
.cc-price .cc-save{
  font-family:var(--mono); font-size:.8125rem; font-weight:700; letter-spacing:0; text-transform:none;
  padding:0; margin-top:2px; background:none; border:0; color:var(--pp-gold);
}
.cc-meta{display:none;}
.cc-coa-line{display:inline-flex; align-items:center; gap:5px; margin-top:var(--sp-2); font-family:var(--mono); font-size:.8125rem; color:var(--v8-ink-2);}
.cc-coa-line svg{width:14px; height:14px; color:var(--pp-teal);}
.cc-add{
  margin-top:var(--sp-3); min-height:48px; border-radius:12px;
  font-family:var(--sans); font-size:.9375rem; font-weight:700; letter-spacing:0; text-transform:none;
  background:transparent; border:1px solid rgba(94,214,200,.35); color:var(--pp-teal);
}
.cc-add:hover{background:var(--pp-teal); color:var(--pp-teal-ink); border-color:var(--pp-teal);}

@media (max-width:599px){
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-5) var(--sp-3);}
  .cc{padding:0;}
  .cc-photo{border-radius:12px;}
  .cc-badges{top:8px; left:8px;}
  .cc-name{font-size:1.3rem;}
  .cc-what{display:none;}
  .cc-price .cc-price-kit{font-size:1.5rem;}
  .cc-price .cc-price-unit, .cc-price .cc-price-pv, .cc-price .single, .cc-price .cc-price-single{font-size:.8125rem;}
  .cc-add{font-size:.875rem; min-height:44px;}
}

/* ==========================================================================
   6. FOOTER + overlays: carry the new type
   ========================================================================== */
.site-footer{font-family:var(--sans);}
.age-box h2{font-family:var(--display);}
.view-title{font-family:var(--display);}

/* ==========================================================================
   6b. CARD TRIM, ALL WIDTHS (2026-10-13, Jordan: "info is overwhelming")
   A card answers: what is it, what does it cost, per vial, is it tested, add it.
   Category (the tabs say it), blurb, singles price, savings % and size count
   live in the product sheet, one tap away.
   ========================================================================== */
.cc-cat, .cc-what, .cc-price .from, .cc-price .cc-price-single, .cc-price .single, .cc-price .cc-save{display:none;}
.cc-name{margin-top:var(--sp-4); min-height:0; height:auto;}
.cc-price{margin-top:4px;}
.cc-price .cc-price-main{row-gap:2px;}
.cc-price .cc-price-kit{flex-basis:100%;}
.cc-price .cc-price-unit{color:var(--v8-ink-2);}
.cc-coa-line:empty{display:none;}
.cc-size{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  min-height:32px; margin:0 8px 0 0; padding:3px 26px 3px 10px; border-radius:8px;
  border:1px solid rgba(255,255,255,.2); color:var(--v8-ink); font-family:var(--sans); font-size:.875rem; font-weight:700;
  background:#0B151B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9BAC3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/12px;
  transition:border-color .2s var(--v8-ease);
}
.cc-size:hover{border-color:rgba(94,214,200,.55);}
.cc-size:focus-visible{outline:2px solid var(--pp-teal); outline-offset:2px;}
.cc-size option{background:#0B151B; color:var(--v8-ink);}
@media (pointer:coarse){ .cc-size{min-height:40px; font-size:1rem;} }

/* ==========================================================================
   7. PHONE DECLUTTER (2026-10-13): one fact per line, nothing said twice
   ========================================================================== */
@media (max-width:760px){
  /* hero: the top strip already carries the sale; the ticket shrinks to one tappable line */
  .v8-hero{padding-top:var(--sp-4);}
  .v8-lede{margin-top:var(--sp-3);}
  .v8-lede-more{display:none;}
  .v8-hero-head{gap:var(--sp-4);}
  .v8-sale{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-2); padding:10px 16px; border-radius:10px;}
  .v8-sale[hidden]{display:none;}
  .v8-sale-k{font-size:.8125rem;}
  .v8-sale-v{font-size:1.125rem; white-space:nowrap;}
  .v8-sale-d{display:none;}
  .v8-sale::after{content:'→'; color:var(--v8-hall); font-weight:700;}

  /* shelf tags: name, price, per-vial, add. rank/$/mg/COA live on the product page and grid */
  .v8-rank, .v8-coa, .v8-mg{display:none;}
  html.pp-halloween .promo-strip.is-sale{display:none;}   /* the hero ticket says the same thing */
  .v8-tag{grid-template-areas:"name name" "dose dose" "price add" "pv add";}
  .v8-dose{font-size:.75rem;}

  /* facts: shipping + contact only; policies are in the footer */
  .v8-fact-policy{display:none;}
  .v8-facts{gap:var(--sp-2); padding-top:var(--sp-3);}
  .v8-facts dd{font-size:.875rem;}

  /* catalog head: no second "guide me" pill, no product count */
  #view-catalog .view-bar{padding-top:var(--sp-7);}
  .pp-guide-pill, .cat-toolbar #catCount{display:none;}
  .kit-banner{margin-bottom:var(--sp-4);}
  .kit-banner .kb-text{font-size:.9375rem;}

  /* cards: name, price, per-vial, add. Category/singles/savings/COA stay in the product sheet */
  .cc-cat, .cc-price .cc-price-single, .cc-price .single, .cc-price .cc-save, .cc-coa-line{display:none;}
  .cc-name{margin-top:var(--sp-3);}
  .cc-price{margin-top:var(--sp-1);}
  .cc-price .cc-price-main{row-gap:2px;}
  .cc-price .from{display:none;}
  .cc-price .cc-price-kit{flex-basis:100%;}
  .cc-price .cc-price-unit, .cc-price .cc-price-pv{font-size:.75rem;}
  .cc-add{margin-top:var(--sp-2);}
}

} /* @layer v8 */