/* Black Ice Peptides — site stylesheet */

  :root{
    --ink:#05080a;
    --ink-2:#080e11;
    --panel:rgba(18,31,36,0.55);
    --panel-solid:#0b1418;
    --frost:#5ff5ff;
    --frost-deep:#22c8e0;
    --ice:#eaf7fa;
    --steel:#7c929c;
    --steel-dim:#4d616a;
    --line:rgba(95,245,255,0.14);
    --line-soft:rgba(95,245,255,0.07);
    --danger:#ffb4a2;
    --display:"Space Grotesk",sans-serif;
    --body:"Inter",sans-serif;
    --mono:"JetBrains Mono",monospace;
    --maxw:1360px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;overflow-x:hidden}
  body{
    background:var(--ink);
    color:var(--ice);
    font-family:var(--body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* frozen atmosphere: layered radial glaze + faint hex frost grid */
  body::before{
    content:"";
    position:fixed;inset:0;z-index:-2;
    background:
      radial-gradient(900px 600px at 78% -8%, rgba(42,167,196,0.20), transparent 60%),
      radial-gradient(700px 700px at 8% 10%, rgba(95,245,255,0.07), transparent 55%),
      linear-gradient(180deg,#060b0e 0%,#05080a 40%,#04070a 100%);
  }
  body::after{
    content:"";
    position:fixed;inset:0;z-index:-1;opacity:.5;
    background-image:
      linear-gradient(var(--line-soft) 1px,transparent 1px),
      linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(circle at 50% 20%, #000 0%, transparent 75%);
            mask-image:radial-gradient(circle at 50% 20%, #000 0%, transparent 75%);
  }

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  @media (min-width:1800px){
    :root{--maxw:1520px}
  }
  @media (min-width:2100px){
    :root{--maxw:1640px}
  }
  a{color:inherit;text-decoration:none}

  /* ---------- research banner ---------- */
  .research-bar{
    background:linear-gradient(90deg,rgba(42,167,196,.16),rgba(95,245,255,.06));
    border-bottom:1px solid var(--line);
    font-family:var(--mono);
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--frost);
    text-align:center;padding:8px 16px;
  }
  .research-bar b{color:var(--ice);font-weight:700}

  /* ---------- wholesale nav badge (subtle upsell in primary nav) ---------- */
  .nav-secondary nav.links > a.nav-link-wholesale{
    position:relative;
    color:var(--frost)!important;
  }
  .nav-secondary nav.links > a.nav-link-wholesale::after{
    content:'B2B';
    display:inline-block;margin-left:8px;
    font-family:var(--mono);font-size:9px;letter-spacing:.12em;font-weight:700;
    color:#0b1418;background:var(--frost);
    padding:2px 6px;border-radius:3px;vertical-align:2px;
  }

  /* ---------- footer email capture (insider list) ---------- */
  .foot-signup{
    display:grid;grid-template-columns:1.1fr .9fr;gap:38px;align-items:center;
    margin:56px 0 42px;padding:34px 32px;
    background:linear-gradient(135deg, rgba(95,245,255,.05) 0%, rgba(10,14,18,.4) 100%);
    border:1px solid var(--line-soft);border-radius:6px;
  }
  @media (max-width:820px){ .foot-signup{grid-template-columns:1fr;gap:22px;padding:26px 20px} }
  .foot-signup-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--frost);margin-bottom:10px}
  .foot-signup-heading{font-family:var(--display,inherit);font-size:22px;line-height:1.2;color:var(--ice);margin:0 0 8px;font-weight:600;letter-spacing:-.005em}
  .foot-signup-sub{font-family:var(--body,inherit);font-size:13.5px;color:var(--steel-dim);margin:0;line-height:1.5}
  .foot-signup-form{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;position:relative}
  .foot-signup-input{
    flex:1 1 220px;min-width:0;
    font-family:var(--mono);font-size:13.5px;color:var(--ice);
    background:rgba(11,20,24,.7);border:1px solid var(--line);border-radius:4px;
    padding:12px 14px;outline:none;transition:border-color .18s, box-shadow .18s;
  }
  .foot-signup-input:focus{border-color:var(--frost);box-shadow:0 0 0 3px rgba(95,245,255,.12)}
  .foot-signup-btn{
    font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
    color:#0b1418;background:var(--frost);border:0;border-radius:4px;
    padding:12px 20px;cursor:pointer;white-space:nowrap;
    transition:opacity .18s, transform .12s;
  }
  .foot-signup-btn:hover{opacity:.9}
  .foot-signup-btn:active{transform:translateY(1px)}
  .foot-signup-msg{width:100%;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--frost);min-height:14px;padding-top:2px}
  .foot-signup-msg.is-error{color:#ff8a8a}

  /* ---------- announcement ticker (rotating trust badges) ---------- */
  .announce-ticker{
    position:relative;
    background:linear-gradient(90deg,rgba(42,167,196,.16),rgba(95,245,255,.06));
    border-bottom:1px solid var(--line);
    font-family:var(--mono);
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--frost);
    text-align:center;
    height:32px;
    overflow:hidden;
    contain:layout paint;
  }
  .announce-ticker-track{
    position:relative;
    width:100%;height:100%;
  }
  .announce-ticker-slide{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    padding:0 16px;
    line-height:1;
    opacity:0;
    transform:translateY(6px);
    transition:opacity .35s cubic-bezier(.22,.61,.36,1), transform .35s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;
    white-space:nowrap;
    will-change:opacity, transform;
  }
  /* Fade OUT faster than the incoming fades in — prevents visible stack during
     the transition window (the exact issue that showed up in the static screenshot). */
  .announce-ticker-slide.is-exit{ transition:opacity .18s ease-out, transform .18s ease-out; }
  .announce-ticker-slide.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .announce-ticker-slide.is-enter{ opacity:0; transform:translateY(6px); }
  .announce-ticker-slide.is-exit{ opacity:0; transform:translateY(-6px); }
  .announce-ticker-slide b{color:var(--ice);font-weight:700}
  .announce-ticker-slide::before{
    content:'';
    display:inline-block;width:6px;height:6px;
    border-radius:50%;
    background:var(--ice);
    box-shadow:0 0 8px rgba(95,245,255,.7);
    margin-right:12px;
    flex:none;
    animation:announcePulse 2.4s ease-in-out infinite;
  }
  @keyframes announcePulse{
    0%,100%{opacity:.55;transform:scale(1)}
    50%{opacity:1;transform:scale(1.35)}
  }
  @media (max-width:640px){
    .announce-ticker{ height:44px; font-size:10px; letter-spacing:.10em; }
    .announce-ticker-slide{ padding:4px 10px; white-space:normal; line-height:1.3; text-align:center; }
    .announce-ticker-slide::before{ width:5px;height:5px; margin-right:8px; align-self:center; }
  }
  @media (prefers-reduced-motion:reduce){
    .announce-ticker-slide{ transition:opacity .01s; transform:none !important; }
    .announce-ticker-slide::before{ animation:none; }
  }

  /* ---------- nav ---------- */
  header.nav{
    position:sticky;top:0;z-index:50;
    backdrop-filter:blur(16px) saturate(120%);
    -webkit-backdrop-filter:blur(16px) saturate(120%);
    background:rgba(5,8,10,0.6);
    border-bottom:1px solid var(--line-soft);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:60px;gap:24px;position:relative;z-index:5}
  .nav-secondary{position:relative;z-index:1}
  .nav-secondary{display:flex;align-items:center;justify-content:center;min-height:56px;gap:28px;border-top:1px solid rgba(95,245,255,.08);flex-wrap:nowrap;padding:10px 0}
  .nav-secondary nav.links{flex:0 1 auto;overflow:visible;gap:32px;flex-wrap:nowrap;justify-content:center;align-items:center}
  .nav-secondary nav.links > a,.nav-secondary nav.links > .nav-more > .nav-more-btn{font-size:13px;letter-spacing:.06em;padding:6px 0;position:relative}
  /* Active-page indicator: subtle cyan underline */
  .nav-drawer-social{display:none}
  .nav-secondary nav.links > a[aria-current="page"],
  .nav-secondary nav.links > a.is-active{color:var(--frost)}
  .nav-secondary nav.links > a[aria-current="page"]::after,
  .nav-secondary nav.links > a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--frost);border-radius:2px}
  @media(max-width:1200px) and (min-width:821px){
    .nav-secondary{gap:20px}
    .nav-secondary nav.links{gap:22px}
    .nav-secondary nav.links > a,.nav-secondary nav.links > .nav-more > .nav-more-btn{font-size:12.5px}
  }
  .nav-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
  /* Top-row search bar (sits before the language switcher) — widened for prominence */
  .nav-search--top{position:relative;display:flex;align-items:center;gap:10px;background:rgba(10,14,18,.6);border:1px solid var(--line-soft);border-radius:999px;padding:8px 16px;transition:border-color .2s, background .2s, box-shadow .2s;flex-shrink:0}
  .nav-search--top:hover{border-color:rgba(95,245,255,.35)}
  .nav-search--top:focus-within{border-color:var(--frost);background:rgba(10,14,18,.85);box-shadow:0 0 0 3px rgba(95,245,255,.12)}
  .nav-search--top .nav-search-icon,
  .nav-search.nav-search--top .nav-search-icon{position:static;left:auto;top:auto;width:16px;height:16px;color:var(--ice);opacity:.75;flex:none;transform:none;margin:0}
  /* Neutralize legacy .nav-search input.nav-search-input styles so the pill is a single unified control */
  .nav-search--top .nav-search-input,
  .nav-search.nav-search--top input.nav-search-input,
  .nav-search--top:hover input.nav-search-input,
  .nav-search--top input.nav-search-input:hover,
  .nav-search--top input.nav-search-input:focus{
    background:transparent;border:0;outline:0;box-shadow:none;
    height:auto;border-radius:0;
    color:var(--ice);font-family:inherit;font-size:13.5px;letter-spacing:0;
    padding:0;width:320px;
    transition:none;
  }
  .nav-search--top .nav-search-input::placeholder{color:rgba(200,215,225,.5)}
  .nav-search--top .nav-search-menu{position:absolute;top:calc(100% + 8px);right:0;left:auto;min-width:320px;max-width:400px;z-index:2500;background:#05080a}
  @media(max-width:1280px){.nav-search--top .nav-search-input{width:240px}}
  @media(max-width:1050px){.nav-search--top .nav-search-input{width:180px}}
  @media(max-width:820px){.nav-search.nav-search--top{display:none}}

  /* ---------- "More" dropdown ---------- */
  .nav-more{position:relative;display:inline-flex;align-items:center}
  .nav-more-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;padding:6px 0;color:var(--ice);cursor:pointer;font-family:inherit;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;transition:color .2s;font-weight:inherit}
  .nav-more-btn:hover,.nav-more-btn:focus-visible{color:var(--frost);outline:none}
  .nav-more-caret{width:11px;height:11px;color:currentColor;transition:transform .2s}
  .nav-more.is-open .nav-more-btn,.nav-more-btn.is-active{color:var(--frost)}
  .nav-more-btn.is-active{position:relative}
  .nav-more-btn.is-active::after{content:"";position:absolute;left:0;right:16px;bottom:-3px;height:2px;background:var(--frost);border-radius:2px}
  .nav-more.is-open .nav-more-caret{transform:rotate(180deg)}
  .nav-more-menu{position:absolute;top:calc(100% + 12px);right:0;left:auto;
    display:none;grid-template-columns:repeat(3,minmax(140px,auto));gap:20px 34px;
    background:#05080a;border:1px solid rgba(95,245,255,.22);border-radius:10px;padding:20px 24px;
    box-shadow:0 20px 48px rgba(0,0,0,.55);z-index:65}
  .nav-more.is-open .nav-more-menu{display:grid}
  .nav-more-col{display:flex;flex-direction:column;gap:6px;min-width:0}
  .nav-more-heading{font-family:var(--mono,'JetBrains Mono',monospace);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--frost,#5ff5ff);margin-bottom:6px;font-weight:600}
  .nav-more-menu a{display:block;padding:6px 0;font-size:13.5px;letter-spacing:.02em;color:#f4faff;text-transform:none;font-weight:500;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
  .nav-more-menu a:hover{color:var(--frost);border-bottom-color:rgba(95,245,255,.35)}
  /* Desktop: More dropdown is visible (Contact is also promoted to Row 1) */
  /* Mobile: hide the promoted Contact link (Contact still appears via the flattened More menu inside the burger drawer) */
  @media(max-width:820px){
    .nav-link-contact{display:none}
    .nav-more > .nav-more-btn{display:none}
    .nav-more{display:block;position:static;width:100%}
    .nav-more-menu{display:grid;position:static;transform:none;padding:0;background:transparent;border:0;box-shadow:none;min-width:0;grid-template-columns:1fr;gap:0}
    .nav-more-heading{display:none}
    .nav-more-menu a{padding:12px 4px;font-family:var(--mono,'JetBrains Mono',monospace);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--frost);border-bottom:1px solid rgba(95,245,255,.08)}
    .nav-more-menu a:last-child{border-bottom:0}
    /* Mobile: nav row is horizontally scrollable — anchor to the LEFT so Catalog
       is the first visible item (was center-justified, which pushed the first
       links off-screen for anyone who hadn't scrolled). */
    .nav-secondary{justify-content:flex-start;padding-left:16px;padding-right:16px;-webkit-overflow-scrolling:touch;scroll-padding-left:16px}
    .nav-secondary nav.links{justify-content:flex-start;padding-right:16px}
  }
  .brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;letter-spacing:.02em;flex-shrink:0;white-space:nowrap}
  .brand .mark{width:30px;height:30px;flex:none}
  .brand .name{font-size:19px;white-space:nowrap}
  .brand .name span{color:var(--frost);white-space:nowrap}
  nav.links{display:flex;gap:26px;align-items:center;white-space:nowrap;flex-wrap:nowrap;overflow:visible}
  nav.links a{
    font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ice);
    transition:color .2s;position:relative;padding:4px 0;white-space:nowrap;
  }
  nav.links a:hover{color:var(--frost)}
  @media (max-width:1200px){
    nav.links{gap:20px}
    nav.links a{font-size:11.5px;letter-spacing:.04em}
  }
  @media (max-width:960px){
    nav.links{gap:14px}
    nav.links a{font-size:11px}
  }
  .nav-cta{
    font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink);background:var(--frost);
    padding:10px 18px;border-radius:2px;font-weight:700;
    transition:transform .2s, box-shadow .2s;
    box-shadow:0 0 0 1px rgba(95,245,255,.4), 0 8px 30px -12px rgba(95,245,255,.6);
  }
  .nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(95,245,255,.7),0 12px 34px -12px rgba(95,245,255,.8)}
  .burger{display:none;background:none;border:1px solid var(--line);color:var(--ice);width:42px;height:38px;border-radius:2px;font-size:18px;cursor:pointer}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:96px 0 70px;overflow:hidden}
  .hero .wrap{position:relative;z-index:2}
  /* OD-grey tactical flag backdrop — fills the entire hero, behind the molecule SVG */
  .hero-flag-bg{
    position:absolute; inset:0;
    background: #05080a url('/assets/hero/od-flag-bg.jpg') center/cover no-repeat;
    z-index:0;
    opacity:.55;
    filter: contrast(1.05) saturate(0.9);
    pointer-events:none;
    animation: flagBreath 22s ease-in-out infinite;
  }
  .hero-flag-bg::after{
    /* Vignette + dark gradient over the flag so molecules + copy stay readable */
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.85) 100%),
      linear-gradient(180deg, rgba(5,8,10,.15) 0%, rgba(5,8,10,.55) 100%);
    pointer-events:none;
  }
  @keyframes flagBreath {
    0%,100% { transform: scale(1)      translateX(0); }
    50%     { transform: scale(1.035)  translateX(-6px); }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-flag-bg{ animation: none; }
  }
  .hero-visual{
    position:absolute;top:0;right:0;bottom:0;
    width:50%;max-width:840px;
    pointer-events:none;z-index:1;
    opacity:.85;
  }
  .hero-visual svg{width:100%;height:100%;display:block}
  /* 3D vial hero — layered above the SVG. Progressive enhancement. */
  .hero-3d{
    position:absolute; inset:0;
    width:100%; height:100%;
    display:block;
    z-index:2;
    pointer-events:none;
    background:transparent;
  }
  @media (max-width:820px){
    /* On mobile the hero-visual is smaller and the vial gets cramped. Hide it there;
       the SVG chains remain as the mobile background. */
    .hero-3d{ display:none; }
  }
  .hero-visual .chain-group{
    transform-origin:center;
    animation:heroDrift 6s ease-in-out infinite alternate;
  }
  .hero-visual .chain-group.chain-b{
    animation:heroDriftB 7.5s ease-in-out infinite alternate;
    animation-delay:-2s;
  }
  /* Per-node stagger: individual amino-acid nodes wobble independently
     inside the drifting chain group. Each nth circle picks up its own
     phase so the chain never feels like a rigid body. */
  .hero-visual .chain-group circle{
    transform-box:fill-box;
    transform-origin:center;
    animation:heroNodeWobble 3.4s ease-in-out infinite alternate;
  }
  .hero-visual .chain-group circle:nth-child(1){ animation-delay:-0.0s;  animation-duration:3.2s }
  .hero-visual .chain-group circle:nth-child(2){ animation-delay:-0.4s;  animation-duration:3.6s }
  .hero-visual .chain-group circle:nth-child(3){ animation-delay:-0.8s;  animation-duration:3.0s }
  .hero-visual .chain-group circle:nth-child(4){ animation-delay:-1.2s;  animation-duration:3.8s }
  .hero-visual .chain-group circle:nth-child(5){ animation-delay:-1.6s;  animation-duration:3.3s }
  .hero-visual .chain-group circle:nth-child(6){ animation-delay:-2.0s;  animation-duration:3.7s }
  .hero-visual .chain-group circle:nth-child(7){ animation-delay:-2.4s;  animation-duration:3.1s }
  .hero-visual .chain-group circle:nth-child(8){ animation-delay:-2.8s;  animation-duration:3.9s }
  .hero-visual .chain-group circle:nth-child(9){ animation-delay:-3.2s;  animation-duration:3.4s }
  .hero-visual .chain-group circle:nth-child(10){animation-delay:-0.6s;  animation-duration:3.5s }
  .hero-visual .chain-group circle:nth-child(11){animation-delay:-1.4s;  animation-duration:3.6s }
  .hero-visual .chain-group circle:nth-child(12){animation-delay:-2.6s;  animation-duration:3.2s }
  .hero-visual .particles-group{
    animation:heroParticles 7s ease-in-out infinite alternate;
  }
  .hero-visual .glow-nodes{
    animation:heroPulse 3s ease-in-out infinite;
    transform-origin:center;
  }
  @keyframes heroDrift{
    0%   { transform:translate(0,0) rotate(0deg); }
    50%  { transform:translate(-10px,7px) rotate(-0.5deg); }
    100% { transform:translate(7px,-5px) rotate(0.4deg); }
  }
  @keyframes heroDriftB{
    0%   { transform:translate(0,0) rotate(0deg); }
    50%  { transform:translate(7px,-7px) rotate(0.5deg); }
    100% { transform:translate(-5px,10px) rotate(-0.4deg); }
  }
  @keyframes heroNodeWobble{
    0%   { transform:translate(0,0) scale(1); }
    50%  { transform:translate(2.5px,-2px) scale(1.06); }
    100% { transform:translate(-2px,2.5px) scale(0.96); }
  }
  @keyframes heroParticles{
    0%   { transform:translate(0,0); opacity:0.35; }
    50%  { transform:translate(8px,-12px); opacity:0.65; }
    100% { transform:translate(-6px,8px) ; opacity:0.30; }
  }
  @keyframes heroPulse{
    0%,100% { opacity:0.35; }
    50%     { opacity:0.75; }
  }
  @media (prefers-reduced-motion:reduce){
    .hero-visual .chain-group,
    .hero-visual .chain-group.chain-b,
    .hero-visual .chain-group circle,
    .hero-visual .particles-group,
    .hero-visual .glow-nodes{animation:none}
  }
  .hero-visual::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg, var(--ink) 0%, rgba(5,8,10,0.6) 25%, rgba(5,8,10,0.15) 60%, rgba(5,8,10,0) 100%);
    pointer-events:none;
  }
  @media (max-width:1100px){
    .hero-visual{width:44%;opacity:.55}
  }
  @media (max-width:820px){
    .hero-visual{display:none}
  }
  .usa-badge{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    width:max-content;max-width:100%;
    padding:14px 22px;border-radius:14px;
    background:linear-gradient(180deg,rgba(20,32,44,.85),rgba(12,20,30,.85));
    border:1px solid rgba(95,245,255,.32);
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 4px 18px rgba(0,0,0,.4);
    color:var(--frost);
    font-family:var(--mono);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    text-align:center;
    margin-bottom:24px;
  }
  .usa-badge .usa-flag{
    flex:none;display:block;width:44px !important;height:auto;border-radius:2px;
    box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.55);
  }
  .usa-badge-text{
    font-size:12px;line-height:1.45;
    display:block;
  }
  @media (max-width:640px){
    .usa-badge{padding:12px 18px;gap:8px;border-radius:12px}
    .usa-badge .usa-flag{width:40px !important}
    .usa-badge-text{font-size:10.5px;letter-spacing:.1em}
  }
  .eyebrow{
    font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
    color:var(--frost);display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
  }
  .eyebrow::before{content:"";width:34px;height:1px;background:var(--frost);display:inline-block}
  .hero h1{
    font-family:var(--display);font-weight:700;
    font-size:clamp(42px,7.4vw,92px);line-height:.98;letter-spacing:-.02em;
    max-width:15ch;
  }
  .hero h1 .frost{
    background:linear-gradient(180deg,#ffffff 0%,var(--frost) 55%,var(--frost-deep) 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .hero p.lede{
    margin-top:26px;max-width:52ch;color:var(--steel);font-size:18px;
  }
  .hero-actions{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap}
  .btn{
    font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
    padding:15px 26px;border-radius:2px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:10px;
  }
  .btn-primary{background:var(--frost);color:var(--ink);border:1px solid var(--frost);
    box-shadow:0 10px 40px -14px rgba(95,245,255,.7)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 46px -14px rgba(95,245,255,.9)}
  .btn-ghost{background:transparent;color:var(--ice);border:1px solid var(--line)}
  .btn-ghost:hover{border-color:var(--frost);color:var(--frost)}

  /* hero readout strip */
  .readout{
    margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);
    border:1px solid var(--line);border-radius:4px;overflow:hidden;
    background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
  .readout div{padding:22px 24px;border-right:1px solid var(--line-soft)}
  .readout div:last-child{border-right:none}
  .readout .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin-bottom:8px}
  .readout .v{font-family:var(--display);font-size:30px;font-weight:600}
  .readout .v small{font-size:14px;color:var(--frost);font-weight:500}

  /* ---------- section shell ---------- */
  section{padding:88px 0}
  .sec-head{margin-bottom:48px}
  .sec-tag{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--frost);margin-bottom:16px}
  .sec-head h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.4vw,50px);letter-spacing:-.02em;line-height:1.05}
  .sec-head p{color:var(--steel);max-width:56ch;margin-top:16px;font-size:17px}

  /* ---------- catalog ---------- */
  .filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px;align-items:center}
  .chip{
    font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ice);
    border:1px solid rgba(95,245,255,.22);
    background:linear-gradient(180deg,rgba(20,32,44,.85),rgba(12,20,30,.85));
    padding:11px 20px;border-radius:100px;cursor:pointer;
    box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 2px 8px rgba(0,0,0,.35);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
    position:relative;
  }
  .chip:hover{
    color:var(--frost);
    border-color:rgba(95,245,255,.55);
    transform:translateY(-1px);
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 6px 18px rgba(95,245,255,.15), 0 0 0 1px rgba(95,245,255,.15);
  }
  .chip.active{
    color:#04121a;
    background:linear-gradient(180deg,#c8f3f8,#5ff5ff);
    border-color:rgba(200,243,248,.9);
    box-shadow:0 0 0 1px rgba(95,245,255,.35), 0 8px 24px rgba(95,245,255,.32), 0 1px 0 rgba(255,255,255,.5) inset;
    font-weight:600;
  }
  .chip.active:hover{transform:translateY(-1px);color:#04121a}
  .chip:focus-visible{outline:2px solid var(--frost);outline-offset:3px}

  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .card{
    position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;
    background:var(--panel);backdrop-filter:blur(14px) saturate(115%);-webkit-backdrop-filter:blur(14px) saturate(115%);
    display:flex;flex-direction:column;transition:transform .25s, border-color .25s, box-shadow .25s;
  }
  .card::before{ /* frost highlight sweep */
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 38%);
  }
  .card:hover{transform:translateY(-4px);border-color:rgba(95,245,255,.4);box-shadow:0 26px 60px -30px rgba(42,167,196,.7)}
  .card .label-top{
    display:flex;justify-content:space-between;align-items:center;
    padding:15px 18px;border-bottom:1px dashed var(--line);
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--steel);
  }
  .card .label-top .lot{color:var(--frost);font-weight:800;font-size:16px;letter-spacing:.05em;text-shadow:0 0 14px rgba(95,245,255,.45)}
  .card .label-top .size{color:var(--ice);font-weight:700;font-size:15px;letter-spacing:.03em}
  .card .body{padding:22px 20px 20px;display:flex;flex-direction:column;flex:1}
  .video-block{margin-top:18px}
  .video-block .vlabel{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dim);margin-bottom:9px;display:flex;align-items:center;gap:8px}
  .video-block .vlabel::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--frost);box-shadow:0 0 8px var(--frost);flex:none}
  .video-block video{width:100%;display:block;border-radius:8px;border:1px solid var(--line);background:#000;max-height:340px;object-fit:cover}
  .video-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;padding:11px 14px;border:1px solid rgba(95,245,255,.35);border-radius:8px;background:rgba(95,245,255,.06);color:var(--frost,#5ff5ff);font-family:var(--mono,'JetBrains Mono',monospace);font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;text-align:center;transition:background .15s ease,border-color .15s ease,color .15s ease}
  .video-cta:hover{background:rgba(95,245,255,.14);border-color:rgba(95,245,255,.6);color:#fff}
  .card-cta-row{display:flex;gap:8px;margin-top:16px}
  .card-cta-row .video-cta{flex:1 1 0;margin-top:0;padding:11px 8px;font-size:10.5px;letter-spacing:.08em;min-width:0}
  .video-cta.secondary{background:transparent;border-color:rgba(95,245,255,.22);color:rgba(232,246,248,.85)}
  .video-cta.secondary:hover{background:rgba(95,245,255,.08);border-color:rgba(95,245,255,.45);color:#fff}
  /* Prominent Dosage → pill — solid cyan, matches the Add-to-cart visual weight. */
  .video-cta.strong{background:rgba(95,245,255,.16);border-color:rgba(95,245,255,.7);color:#eafdff;font-weight:600;box-shadow:inset 0 0 0 1px rgba(95,245,255,.14),0 0 22px -12px rgba(95,245,255,.6)}
  .video-cta.strong:hover{background:rgba(95,245,255,.28);border-color:#5ff5ff;color:#fff;box-shadow:inset 0 0 0 1px rgba(95,245,255,.35),0 0 26px -8px rgba(95,245,255,.75)}

  /* Typical dose block on catalog cards — sits between .spec and .foot */
  .card-dose{margin-top:14px;padding:12px 14px;border:1px solid rgba(95,245,255,.18);border-radius:8px;background:linear-gradient(180deg,rgba(95,245,255,.05),rgba(95,245,255,.015))}
  .card-dose-eyebrow{font-family:var(--mono,'JetBrains Mono',monospace);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--frost,#5ff5ff);margin-bottom:6px}
  .card-dose-body{font-family:var(--body,'Inter',system-ui,sans-serif);font-size:13px;line-height:1.4;color:#e7f5f8}
  .card-dose-amt{font-weight:600;color:#f4fbfc}
  .card-dose-freq{color:#b3c7cd}
  .card-dose-link{display:inline-block;margin-top:6px;font-family:var(--mono,'JetBrains Mono',monospace);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--frost,#5ff5ff);text-decoration:none;border-bottom:1px dashed rgba(95,245,255,.35);padding-bottom:1px}
  .card-dose-link:hover{color:#fff;border-bottom-color:#5ff5ff}
  @media (max-width:420px){.card-cta-row{flex-direction:column;gap:6px}.card-cta-row .video-cta{flex:0 0 auto}}
  .card h3{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.01em}
  .card .cat{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--frost-deep);margin-top:6px}
  .card .benefit{
    color:#e9f9fb;font-size:15px;line-height:1.5;margin-top:14px;
    font-weight:500;letter-spacing:.005em;
  }
  .card .desc{color:var(--steel);font-size:13px;margin-top:10px;line-height:1.5;font-style:italic}
  .card .desc .desc-label{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--cyan);
    font-style:normal;margin-right:2px;
  }
  .spec{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:18px;font-family:var(--mono);font-size:11px}
  .spec .sk{color:var(--steel-dim);letter-spacing:.08em;text-transform:uppercase;display:block}
  .spec .sv{color:var(--ice);letter-spacing:.04em}
  .spec .sv.ok{color:var(--frost)}
  .purity{margin-top:18px}
  .purity .bar{height:5px;border-radius:100px;background:rgba(95,245,255,.12);overflow:hidden}
  .purity .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--frost-deep),var(--frost));border-radius:100px}
  .card-footer-stack{margin-top:auto;display:flex;flex-direction:column}
  .card-footer-stack .video-cta{margin-top:16px}
  .card-footer-stack .card-cta-row{margin-top:16px}
  .card-footer-stack .card-cta-row .video-cta{margin-top:0}
  .card .foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}
  .card .price{font-family:var(--display);font-size:20px;font-weight:600}
  .card .price small{color:var(--steel);font-size:12px;font-family:var(--mono);font-weight:400}
  .card-media{padding:0;background:linear-gradient(180deg,#0a0f14 0%,#050809 100%);border-bottom:1px solid var(--line-soft);position:relative;overflow:hidden;aspect-ratio:1/1}
  .card-media.oos img{filter:grayscale(.55) brightness(.55)}
  .oos-ribbon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-18deg);background:linear-gradient(90deg,#c8102e 0%,#9a0b22 100%);color:#fff;font-family:var(--mono,'JetBrains Mono',monospace);font-weight:800;font-size:20px;letter-spacing:.24em;text-align:center;padding:10px 40px;width:130%;box-shadow:0 8px 32px rgba(0,0,0,.55),inset 0 -2px 0 rgba(0,0,0,.25);border-top:2px solid #ff5468;border-bottom:2px solid #ff5468;text-shadow:0 2px 6px rgba(0,0,0,.5);pointer-events:none;z-index:5;text-transform:uppercase}
  .add.disabled,.add:disabled{background:#2a2f36 !important;color:#7d8590 !important;cursor:not-allowed !important;border-color:#3a3f46 !important;opacity:.85}
  .add.disabled:hover,.add:disabled:hover{background:#2a2f36 !important;transform:none !important}
  .card-media a{display:block;width:100%;height:100%}
  .card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .card-media a:hover img{transform:scale(1.04)}
  .card-media svg{display:block;width:100%;height:auto;border-radius:10px}
  /* Strike-through was-price: full-white digits with a thin red slash that
     doesn't obscure the number. text-decoration-skip-ink:none forces the line
     to run behind ALL characters (not skip around descenders), so it reads as
     one clean slash. Position the slash slightly higher than default so it
     doesn't cut through the middle of dollar-sign glyphs. */
  .was{
    color:#ffffff;
    text-decoration:line-through;
    text-decoration-color:#ff6a6a;
    text-decoration-thickness:1.5px;
    text-decoration-skip-ink:none;
    -webkit-text-decoration-color:#ff6a6a;
    -webkit-text-decoration-thickness:1.5px;
    text-underline-offset:0;
    font-family:var(--mono);font-size:15px;font-weight:700;
    margin-right:10px;
    letter-spacing:.02em;
    opacity:.95;
  }
  /* On product-detail page, bump larger to match the big price */
  .pdp-price .was, .pdp-price s{
    color:#ffffff;
    text-decoration:line-through;
    text-decoration-color:#ff6a6a;
    text-decoration-thickness:2px;
    text-decoration-skip-ink:none;
    -webkit-text-decoration-color:#ff6a6a;
    -webkit-text-decoration-thickness:2px;
    font-size:20px;font-weight:700;
    margin-right:14px;
    opacity:.95;
  }

  /* ---------- product card review stars ---------- */
  .card .card-rating{display:flex;align-items:center;gap:8px;margin:4px 0 10px;font-family:var(--mono);font-size:12px;letter-spacing:.03em}
  .card .card-rating--new{color:var(--steel-dim);opacity:.72}
  .bi-stars{position:relative;display:inline-block;font-size:14px;line-height:1;letter-spacing:1px}
  .bi-stars-bg{color:rgba(200,215,225,.22)}
  .bi-stars-fg{position:absolute;left:0;top:0;overflow:hidden;color:#5ff5ff;white-space:nowrap;text-shadow:0 0 6px rgba(95,245,255,.4)}
  .card-rating-num{color:var(--ice);font-weight:600}
  .card-rating-count{color:var(--steel-dim)}
  .card-rating-new{font-size:11px;letter-spacing:.06em;text-transform:uppercase}

  /* Save-N% pill on product-detail page price */
  .pdp-price .pdp-save-pill{
    display:inline-block;margin-left:12px;vertical-align:middle;
    font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
    color:#0b1418;background:var(--frost,#5ff5ff);
    padding:5px 10px;border-radius:999px;line-height:1;
  }
  /* Save-N% pill next to catalog-card price for stacks (matches stacks.html .stack-save) */
  .card .price .card-save-pill{
    display:inline-block;margin-left:10px;vertical-align:middle;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
    color:var(--frost,#e6ecf1);
    border:1px solid rgba(95,245,255,.35);
    background:rgba(95,245,255,.06);
    padding:4px 8px;border-radius:999px;
    line-height:1;
  }
  .variant-wrap{display:flex;align-items:center;gap:12px;margin-top:16px}
  .variant-wrap .sk{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel-dim);white-space:nowrap}
  .variant{
    flex:1;font-family:var(--mono);font-size:13px;color:var(--ice);
    background:rgba(11,20,24,.7);border:1px solid var(--line);border-radius:3px;
    padding:9px 30px 9px 12px;cursor:pointer;appearance:none;-webkit-appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--frost) 50%),linear-gradient(135deg,var(--frost) 50%,transparent 50%);
    background-position:calc(100% - 16px) 55%, calc(100% - 11px) 55%;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  }
  .variant:focus{outline:none;border-color:var(--frost)}
  .variant option{background:#0b1418;color:var(--ice)}
  .pager{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:48px}
  .pg{
    font-family:var(--mono);font-size:13px;color:var(--steel);
    background:transparent;border:1px solid var(--line);border-radius:3px;
    min-width:40px;height:40px;padding:0 13px;cursor:pointer;transition:all .18s;
  }
  .pg:hover:not(:disabled){color:var(--frost);border-color:var(--frost)}
  .pg.active{background:var(--frost);color:var(--ink);border-color:var(--frost);font-weight:700}
  .pg:disabled{opacity:.35;cursor:not-allowed}
  .add{
    font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
    background:transparent;color:var(--frost);border:1px solid var(--frost);
    padding:9px 16px;border-radius:2px;cursor:pointer;transition:all .18s;
  }
  .add:hover{background:var(--frost);color:var(--ink)}

  /* ---------- quality / process ---------- */
  .split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .steps{display:flex;flex-direction:column;gap:2px}
  .step{
    display:grid;grid-template-columns:auto 1fr;gap:22px;padding:24px 0;border-top:1px solid var(--line-soft);
  }
  .step:last-child{border-bottom:1px solid var(--line-soft)}
  .step .num{font-family:var(--mono);font-size:13px;color:var(--frost);letter-spacing:.1em;padding-top:3px}
  .step h4{font-family:var(--display);font-size:19px;font-weight:600;margin-bottom:6px}
  .step p{color:var(--steel);font-size:14.5px}
  .coa-card{
    border:1px solid var(--line);border-radius:8px;padding:30px;
    background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:relative;overflow:hidden;
  }
  .coa-card .stamp{
    position:absolute;top:20px;right:22px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
    color:var(--frost);border:1px solid var(--frost);border-radius:100px;padding:6px 12px;text-transform:uppercase;
  }
  .coa-card .doc-title{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
  .coa-card .doc-h{font-family:var(--display);font-size:26px;font-weight:600;margin:8px 0 24px}
  .coa-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:13px}
  .coa-row span:first-child{color:var(--steel)}
  .coa-row span:last-child{color:var(--ice)}
  .coa-row .pass{color:var(--frost)}
  .coa-graph{display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:22px}
  .coa-graph i{flex:1;background:linear-gradient(180deg,var(--frost),var(--frost-deep));border-radius:2px 2px 0 0;opacity:.55}
  .coa-graph i.peak{opacity:1;box-shadow:0 0 18px rgba(95,245,255,.6)}

  /* ---------- feature strip ---------- */
  .feat{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .feat .f{border:1px solid var(--line-soft);border-radius:6px;padding:26px 22px;background:rgba(11,20,24,.4)}
  .feat .f .ico{width:34px;height:34px;color:var(--frost);margin-bottom:16px}
  .feat .f h4{font-family:var(--display);font-size:17px;font-weight:600;margin-bottom:8px}
  .feat .f p{color:var(--steel);font-size:14px}

  /* ---------- faq ---------- */
  .faq{max-width:820px;margin:0 auto}
  .qa{border-bottom:1px solid var(--line-soft)}
  .qa button{
    width:100%;text-align:left;background:none;border:none;color:var(--ice);cursor:pointer;
    font-family:var(--display);font-size:19px;font-weight:500;padding:24px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;
  }
  .qa button .plus{color:var(--frost);font-family:var(--mono);font-size:22px;transition:transform .25s;flex:none}
  .qa.open button .plus{transform:rotate(45deg)}
  .qa .ans{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .qa .ans p{color:var(--steel);padding:0 0 24px;font-size:15.5px;max-width:70ch}

  /* ---------- cta band ---------- */
  .band{
    border:1px solid var(--line);border-radius:12px;padding:60px 48px;text-align:center;position:relative;overflow:hidden;
    background:
      radial-gradient(600px 300px at 50% -40%, rgba(95,245,255,.18), transparent 70%),
      var(--panel);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  }
  .band h2{font-family:var(--display);font-size:clamp(28px,4vw,44px);font-weight:600;letter-spacing:-.02em}
  .band p{color:var(--steel);max-width:52ch;margin:16px auto 0}
  .band .hero-actions{justify-content:center}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line-soft);padding:64px 0 40px;margin-top:40px}
  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
  .foot-grid h5{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-bottom:18px}
  .foot-grid a{display:block;color:var(--steel);font-size:14px;padding:6px 0;transition:color .18s}
  .foot-grid a:hover{color:var(--frost)}
  .foot-brand p{color:var(--steel);font-size:14px;max-width:34ch;margin-top:16px}
  .foot-social{margin-top:18px}
  .foot-social-link{display:inline-flex !important;align-items:center;gap:8px;padding:8px 12px !important;border:1px solid rgba(255,255,255,.10);border-radius:6px;color:var(--steel);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:color .18s,border-color .18s,background .18s}
  .foot-social-link:hover{color:var(--frost);border-color:rgba(95,245,255,.35);background:rgba(95,245,255,.04)}
  .foot-social-link--ig span{background:radial-gradient(circle at 25% 100%, #F9CE34 0%, #EE2A7B 40%, #8134AF 75%, #515BD4 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .foot-social-link--ig:hover{border-color:rgba(238,42,123,.45);background:rgba(238,42,123,.06)}
  .foot-social-link--x span{color:#e8f6f8}
  .foot-social-link--x svg{color:#e8f6f8}
  .foot-social-link--x:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.04);color:#ffffff}
  .foot-social-link--x:hover svg{color:#ffffff}
  .foot-social-link svg{flex-shrink:0}
  .disclaimer{
    margin-top:48px;padding:22px 24px;border:1px solid var(--line-soft);border-radius:6px;
    background:rgba(255,180,162,.04);
    font-size:12.5px;color:var(--steel);line-height:1.7;
  }
  .disclaimer b{color:var(--danger);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;font-size:11px}
  .legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:34px;font-family:var(--mono);font-size:11px;color:var(--steel-dim);letter-spacing:.06em}

  /* reveal animation */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  @media (max-width:960px){
    .readout{grid-template-columns:repeat(2,1fr)}
    .readout div:nth-child(2){border-right:none}
    .grid{grid-template-columns:repeat(2,1fr)}
    .split{grid-template-columns:1fr;gap:38px}
    .feat{grid-template-columns:repeat(2,1fr)}
    .foot-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:640px){
    nav.links{display:none}
    /* Show the primary link strip on mobile as a horizontal scroll rail.
       The burger still opens the full drawer (with More → Learn/Support/Company). */
    .nav-secondary{
      display:flex;
      min-height:44px;
      padding:6px 0;
      gap:0;
      border-top:1px solid rgba(95,245,255,.08);
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .nav-secondary::-webkit-scrollbar{display:none}
    .nav-secondary .nav-drawer-social{display:none}
    .nav-secondary nav.links.nav-links--primary{
      display:flex !important;
      flex-wrap:nowrap;
      gap:22px;
      padding:0 16px;
      white-space:nowrap;
    }
    .nav-secondary nav.links.nav-links--primary > a{
      font-size:12px;
      letter-spacing:.08em;
      padding:6px 0;
      flex:0 0 auto;
    }
    /* Show the More chip inline in the mobile horizontal strip. The button
       stays inside the scroll rail; the menu panel is positioned relative to
       the header so it isn't clipped by the overflow container. */
    header.nav:not(.is-mobile-open) .nav-secondary nav.links.nav-links--primary > .nav-more{
      display:inline-flex;
      position:static;
      width:auto;
      flex:0 0 auto;
    }
    header.nav:not(.is-mobile-open) .nav-secondary nav.links.nav-links--primary > .nav-more > .nav-more-btn{
      display:inline-flex;
      align-items:center;
      gap:4px;
      font-size:12px;
      letter-spacing:.08em;
      padding:6px 0;
      color:var(--ice);
      background:transparent;
      border:0;
      text-transform:uppercase;
    }
    /* Keep the menu closed by default in the inline strip — only show it when
       .is-open is set. This overrides the always-visible mobile default. */
    header.nav:not(.is-mobile-open) .nav-secondary nav.links.nav-links--primary > .nav-more:not(.is-open) > .nav-more-menu{
      display:none;
    }
    /* When open on mobile, anchor the menu panel to the header (which is
       position:sticky) via position:absolute. This escapes the horizontal
       overflow clipping of .nav-secondary and gives us a full-width panel
       spanning the header. */
    header.nav:not(.is-mobile-open) .nav-secondary .nav-more.is-open .nav-more-menu,
    body > .nav-more-menu{
      display:grid;
      position:fixed;
      left:12px;
      right:12px;
      top:149px;
      width:auto;
      transform:none;
      grid-template-columns:1fr 1fr 1fr;
      gap:14px 16px;
      padding:16px;
      background:#0a1018;
      border:1px solid rgba(95,245,255,.14);
      border-radius:12px;
      box-shadow:0 24px 60px rgba(0,0,0,.65);
      z-index:2000;
      max-height:calc(100vh - 170px);
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
    }
    body > .nav-more-menu .nav-more-heading{
      display:block;
      font-family:var(--mono,'JetBrains Mono',monospace);
      font-size:10px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--steel-dim,#8a97a5);
      margin-bottom:4px;
    }
    body > .nav-more-menu a{
      display:block;
      padding:8px 0;
      color:var(--ice-fg,#e6f4f6);
      text-decoration:none;
      font-size:14px;
      border-bottom:1px solid rgba(95,245,255,.08);
    }
    body > .nav-more-menu a:last-child{border-bottom:0}
    header.nav:not(.is-mobile-open) .nav-secondary .nav-more.is-open .nav-more-menu .nav-more-heading{
      display:block;
      font-family:var(--mono,'JetBrains Mono',monospace);
      font-size:10px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--steel-dim,#8a97a5);
      margin-bottom:4px;
    }
    header.nav:not(.is-mobile-open) .nav-secondary .nav-more.is-open .nav-more-menu a{
      display:block;
      padding:8px 0;
      font-family:inherit;
      font-size:12px;
      letter-spacing:.05em;
      text-transform:none;
      color:var(--ice);
      border-bottom:1px solid rgba(95,245,255,.08);
    }
    header.nav:not(.is-mobile-open) .nav-secondary .nav-more.is-open .nav-more-menu a:last-child{border-bottom:0}
    .burger{display:inline-flex;align-items:center;justify-content:center}
    .readout{grid-template-columns:1fr 1fr}
    .grid{grid-template-columns:1fr}
    .feat{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
    .band{padding:44px 24px}
    section{padding:64px 0}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .reveal{opacity:1;transform:none}
  }

/* ============================================================
   ADDITIONS — cart, drawer, age-gate, forms, sub-page layout
   ============================================================ */

/* ---------- Language switcher (label + EN / IT / ES / PT pills) ---------- */
.lang-switcher{
  display:inline-flex;align-items:center;gap:6px;
  margin-right:8px;
  flex-shrink:0;
}
.lang-label{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--ice,#a8d4dd);
  white-space:nowrap;
}
.lang-pills{
  display:inline-flex;align-items:center;gap:2px;
  padding:2px;
  border:1px solid var(--line);border-radius:3px;
  background:rgba(255,255,255,0.04);
  flex-shrink:0;
}
.lang-pill{
  background:transparent;border:0;color:var(--frost,#e6ecf1);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;font-weight:700;
  padding:4px 7px 3px;border-radius:2px;cursor:pointer;
  transition:color .15s ease, background .15s ease;
  min-width:28px;text-align:center;
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;line-height:1;
}
.lang-pill .lp-code{display:block;line-height:1}
.lang-pill .lp-flag{display:block;width:16px;height:9.6px;border-radius:1px;box-shadow:0 0 0 1px rgba(255,255,255,.15);opacity:.85}
.lang-pill:hover{color:var(--ice);background:rgba(102,229,255,0.10)}
.lang-pill:hover .lp-flag{opacity:1}
.lang-pill.is-active{
  color:var(--ink);background:var(--frost);
  box-shadow:0 0 10px rgba(102,229,255,0.35);
}
.lang-pill.is-active .lp-flag{opacity:1;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
/* Hide the "Language" label on narrow viewports so the mobile nav row stays clean. */
@media (max-width:820px){
  .lang-label{display:none}
  .lang-switcher{gap:4px;margin-right:6px}
  .lang-pills{padding:2px}
  .lang-pill{font-size:10px;padding:3px 5px 2px;min-width:22px}
  .lang-pill .lp-flag{width:14px;height:8.4px}
}
/* Compact the nav for phones so the whole top row fits under 400px. */
@media (max-width:640px){
  .nav-inner{gap:6px}
  .nav-actions{gap:4px}
  .wrap.nav-inner{padding-left:14px;padding-right:14px}
  .brand{gap:8px}
  .brand .mark{width:26px;height:26px}
  .brand .name{font-size:14px;letter-spacing:0}
  /* Match "PEPTIDES" weight to "BLACK ICE" for consistent branding on mobile. */
  .brand .name span{display:inline;font-weight:700}
  /* Compact cart button: hide the "Cart" label, show an icon instead. */
  .nav-cart{padding:0;width:38px;height:36px;justify-content:center;position:relative}
  .nav-cart span[data-i18n="nav.cart"]{display:none}
  /* Draw a cart icon via CSS mask so it inherits currentColor. */
  .nav-cart::before{
    content:'';
    width:18px;height:18px;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  /* When count > 0, show it as a floating badge in the top-right corner of the icon. */
  .nav-cart .count{position:absolute;top:-4px;right:-4px;margin:0;min-width:16px;height:16px;padding:0 4px;border-radius:8px;font-size:9.5px;line-height:16px;text-align:center;background:var(--frost);color:var(--ink);font-weight:700}
  /* Shrink all top-row action buttons uniformly. */
  .nav-cart{width:34px;height:34px}
  .mobile-search-btn{width:34px;height:34px}
  .mobile-search-btn svg{width:14px;height:14px}
  .burger{width:34px;height:34px}
  .lang-switcher{gap:2px;margin-right:2px}
  .lang-pill{font-size:9.5px;padding:3px 4px 2px;min-width:20px}
}
/* Very narrow phones (≤340px): drop the search icon — search is still available via the burger menu. iPhone 375px and up keeps the search icon visible. */
@media (max-width:380px){
  .brand .name{font-size:13px}
  .brand .mark{width:24px;height:24px}
  .wrap.nav-inner{padding-left:12px;padding-right:12px}
}
@media (max-width:340px){
  .mobile-search-btn{display:none !important}
}
@media (max-width:420px){
  .lang-pill{font-size:9.5px;padding:2px 4px 1px;min-width:20px}
  .lang-pill .lp-flag{width:12px;height:7.2px}
  .lang-pills{gap:1px}
}

/* ---------- Nav-actions: horizontally center the language+cart group over the search bar ---------- */
/* JS (in partials.js) measures the .nav-search bar and sets --nav-actions-shift so the */
/* .nav-actions group's horizontal center matches the search bar's horizontal center. */
.nav-inner{position:relative}
.nav-actions{margin-left:auto;transform:translateX(var(--nav-actions-shift, 0px))}

/* ---------- Language dropdown (single button + native-name menu) ---------- */
.lang-dropdown{position:relative;display:inline-flex;align-items:stretch}
.lang-dd-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,0.04);color:var(--frost,#e6ecf1);
  border:1px solid var(--line);border-radius:2px;
  height:36px;padding:0 12px;box-sizing:border-box;cursor:pointer;
  font-family:var(--mono,'JetBrains Mono',monospace);font-size:12px;letter-spacing:.06em;font-weight:700;text-transform:uppercase;
  line-height:1;transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.lang-dd-btn:hover{color:var(--ice);background:rgba(102,229,255,0.10);border-color:rgba(102,229,255,0.35)}
.lang-dd-btn:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.lang-dd-globe{width:14px;height:14px;opacity:.85;flex:0 0 auto}
.lang-dd-code{display:inline-block;min-width:18px;text-align:center}
.lang-dd-caret{width:10px;height:10px;opacity:.7;transition:transform .18s ease;flex:0 0 auto}
.lang-dropdown.is-open .lang-dd-caret{transform:rotate(180deg)}
.lang-dropdown.is-open .lang-dd-btn{color:var(--ice);border-color:rgba(102,229,255,0.5);background:rgba(102,229,255,0.10)}

.lang-dd-menu{
  position:absolute;top:calc(100% + 6px);right:0;
  min-width:172px;
  background:#0a0e12;border:1px solid rgba(102,229,255,0.22);border-radius:6px;
  box-shadow:0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  padding:4px;
  display:none;
  z-index:70;
}
.lang-dropdown.is-open .lang-dd-menu{display:block}
.lang-dd-item{
  display:flex;align-items:center;gap:10px;width:100%;
  background:transparent;border:0;color:var(--frost,#e6ecf1);
  padding:8px 10px;border-radius:4px;cursor:pointer;text-align:left;
  font-family:var(--font-sans,'Satoshi',sans-serif);font-size:13px;font-weight:500;letter-spacing:.005em;
  transition:background .12s ease, color .12s ease;
}
.lang-dd-item:hover{background:rgba(102,229,255,0.10);color:var(--ice)}
.lang-dd-item[aria-pressed="true"]{background:rgba(102,229,255,0.14);color:var(--ice)}
.lang-dd-item .lp-code{font-family:var(--mono,'JetBrains Mono',monospace);font-size:10.5px;letter-spacing:.1em;font-weight:700;color:var(--steel-dim,#8a97a5);min-width:24px}
.lang-dd-item[aria-pressed="true"] .lp-code{color:var(--ice)}
.lang-dd-item .lp-native{flex:1}

@media (max-width:820px){
  .lang-dd-btn{height:36px;padding:0 10px;font-size:11px;gap:5px}
  .lang-dd-globe{width:13px;height:13px}
  .lang-dd-caret{width:9px;height:9px}
}
@media (max-width:420px){
  .lang-dd-btn{height:36px;padding:0 8px;font-size:10.5px;gap:4px}
  .lang-dd-menu{min-width:158px;right:auto;left:0}
}

/* ---------- Mobile search icon button (in top nav row) ----------
   Hidden on desktop; shown on mobile only. Tapping it toggles
   `.is-mobile-search-open` on <header.nav> which reveals just the search
   field as a compact bar under the top row (without opening the full menu). */
.mobile-search-btn{display:none}
@media (max-width:640px){
  .mobile-search-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;padding:0;
    background:transparent;border:1px solid var(--line);border-radius:2px;
    color:var(--ice);cursor:pointer;flex-shrink:0;
  }
  .mobile-search-btn:hover,.mobile-search-btn:focus-visible{
    border-color:var(--frost);color:var(--frost);
  }
  .mobile-search-btn svg{width:16px;height:16px}
  header.nav.is-mobile-search-open .mobile-search-btn{
    border-color:var(--frost);color:var(--frost);
    background:rgba(102,229,255,0.08);
  }

  /* Compact search-only drawer: reveal the top-row nav-search as a full-width
     bar BELOW the entire header (top row + STACKS FOR HIM/VETS/RESEARCH strip).
     .nav-actions has transform: translateX(...) which turns it into a
     containing block for ANY positioned descendant (including position:fixed),
     so we must neutralize the transform here or the drawer inherits its
     narrow ~150px width. Once transform is 'none', position:fixed anchors
     the drawer to the viewport and left:16 / right:16 span full-width. */
  header.nav.is-mobile-search-open .nav-actions{transform:none}
  header.nav.is-mobile-search-open .nav-search.nav-search--top{
    /* Announce ticker 44px + nav-inner 60px + nav-secondary 44px + border 1px = 149px header stack. */
    display:flex;position:fixed;left:16px;right:16px;top:155px;z-index:75;
    width:auto;margin:0;
    padding:8px 12px;border-radius:10px;
    background:#05080a;border:1px solid rgba(95,245,255,.28);
    box-shadow:0 12px 32px rgba(0,0,0,.55);
  }
  /* Override legacy .nav-search input rules that set display:none, absolute positioning, and 0-width on mobile. */
  header.nav.is-mobile-search-open .nav-search--top .nav-search-input,
  header.nav.is-mobile-search-open .nav-search.nav-search--top input.nav-search-input{
    display:block;
    position:static;
    width:100%;
    height:auto;
    padding:6px 10px 6px 10px;
    top:auto;right:auto;left:auto;
    background:transparent;
    border:0;
    color:var(--ice);
    font-family:var(--body);font-size:16px;letter-spacing:normal;
    z-index:auto;
    pointer-events:auto;
  }
  header.nav.is-mobile-search-open .nav-search--top .nav-search-input::placeholder{opacity:.6;color:rgba(200,215,225,.6)}
  header.nav.is-mobile-search-open .nav-search--top .nav-search-icon{display:inline-flex;position:static;top:auto;left:auto;transform:none;width:16px;height:16px;margin-right:6px}
  header.nav.is-mobile-search-open .nav-search--top .nav-search-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;max-width:none;display:block;z-index:76}
}

/* ---------- Mobile burger menu (nav-secondary as drawer) ----------
   On mobile the nav-secondary row (search + link list) is hidden by default.
   Tapping the burger toggles `.is-mobile-open` on <header.nav> which reveals
   nav-secondary as a stacked drawer directly under the top row.
   The search field expands full-width, and the link list is a vertical column. */
@media (max-width:640px){
  header.nav.is-mobile-open .nav-secondary{
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:14px;
    height:auto;
    padding:14px 24px 18px;
    background:#05080a;
    border-top:1px solid rgba(95,245,255,.14);
    border-bottom:1px solid rgba(95,245,255,.14);
  }
  header.nav.is-mobile-open nav.links{
    display:flex !important;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:2px;
    padding:0;
    white-space:normal;
    overflow:visible;
  }
  /* Restore the More dropdown in the drawer state (it's hidden in the horizontal strip). */
  header.nav.is-mobile-open .nav-secondary nav.links.nav-links--primary > .nav-more{display:block}
  /* Kill the horizontal-scroll settings when the drawer is open. */
  header.nav.is-mobile-open .nav-secondary{overflow:visible}
  header.nav.is-mobile-open nav.links a{
    padding:12px 4px;
    font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--frost);
    border-bottom:1px solid rgba(95,245,255,.08);
  }
  header.nav.is-mobile-open nav.links a:last-child{border-bottom:0}
  /* Social chips at the bottom of the mobile drawer (mirrors the footer row) */
  header.nav.is-mobile-open .nav-drawer-social{
    display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;
    padding:14px 0 2px;
    border-top:1px solid rgba(95,245,255,.08);
  }
  /* (Search field no longer lives in the mobile burger drawer — it uses the dedicated mobile search icon in the top row.) */
  /* Burger stays visible but marks its open state. */
  header.nav.is-mobile-open .burger{
    border-color:var(--frost);color:var(--frost);
    background:rgba(102,229,255,0.08);
  }
}

/* nav cart badge */
.nav-cart{
  position:relative;background:transparent;border:1px solid var(--line);color:var(--ice);
  height:36px;padding:0 14px;box-sizing:border-box;border-radius:2px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;transition:border-color .2s, color .2s;
  display:inline-flex;align-items:center;gap:8px;
}
.nav-signin{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--steel);text-decoration:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 12px;margin-right:10px;
  transition:color .2s;
}
.nav-signin:hover{color:var(--frost)}
.nav-signin svg{opacity:.85}
@media (max-width:820px){
  .nav-signin{padding:9px 8px;margin-right:6px}
  .nav-signin .label{display:none}
}
.nav-cart{
  transition:border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
.nav-cart:hover{
  border-color:var(--frost);color:var(--frost);
  background:rgba(102,229,255,0.08);
  box-shadow:0 0 0 1px rgba(102,229,255,0.25), 0 0 18px rgba(102,229,255,0.35), 0 0 34px rgba(102,229,255,0.18);
}
.nav-cart .count{
  background:var(--frost);color:var(--ink);border-radius:999px;font-size:10px;font-weight:800;
  min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
}
.nav-cart .count:empty,.nav-cart .count[data-n="0"]{display:none}

/* nav search */
.nav-search{position:relative;display:flex;align-items:center;margin-left:0;margin-right:0;flex-shrink:0}
.nav-search .nav-search-icon{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;color:var(--ice);pointer-events:none;
}
.nav-search input.nav-search-input{
  width:170px;height:34px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.28);border-radius:2px;
  color:var(--ice);
  padding:0 10px 0 30px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;
  outline:none;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, width .18s ease;
}
.nav-search input.nav-search-input::placeholder{color:var(--ice);opacity:.75;text-transform:none;letter-spacing:0}
.nav-search:hover input.nav-search-input,
.nav-search input.nav-search-input:hover{
  border-color:var(--frost);
  background:rgba(102,229,255,0.08);
  box-shadow:0 0 0 1px rgba(102,229,255,0.25), 0 0 18px rgba(102,229,255,0.35), 0 0 34px rgba(102,229,255,0.18);
}
.nav-search:hover .nav-search-icon{color:var(--frost)}
.nav-search input.nav-search-input:focus{
  border-color:var(--frost);background:rgba(102,229,255,0.08);
  box-shadow:0 0 0 2px rgba(102,229,255,0.25), 0 0 22px rgba(102,229,255,0.45), 0 0 42px rgba(102,229,255,0.22);
  width:220px;
}
.nav-search .nav-search-toggle{display:none}
@media (max-width:1280px){
  .nav-search input.nav-search-input{width:140px}
  .nav-search input.nav-search-input:focus{width:180px}
  .nav-search{margin-left:10px;margin-right:10px}
}
@media (max-width:1100px){
  .nav-search input.nav-search-input{width:0;padding-left:30px;padding-right:0;border-color:transparent;background:transparent}
  .nav-search input.nav-search-input::placeholder{opacity:0}
  .nav-search:hover input.nav-search-input,
  .nav-search input.nav-search-input:focus{
    width:190px;padding-left:30px;padding-right:10px;
    border-color:var(--frost);background:rgba(102,229,255,0.08);
  }
}
@media (max-width:820px){
  .nav-search input.nav-search-input{display:none;position:absolute;right:0;top:44px;height:38px;width:min(78vw,320px);background:#05080a;z-index:70}
  .nav-search.open input.nav-search-input{display:block}
  .nav-search.open .nav-search-icon{left:12px;top:calc(50% + 22px);z-index:71}
  .nav-search .nav-search-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;
    background:transparent;border:1px solid var(--line);border-radius:2px;
    color:var(--ice);cursor:pointer;padding:0;
  }
  .nav-search .nav-search-toggle:hover{border-color:var(--frost);color:var(--frost)}
  .nav-search .nav-search-toggle svg{width:14px;height:14px}
  /* hide the pre-open inline icon when input is hidden */
  .nav-search .nav-search-icon{display:none}
  .nav-search.open .nav-search-icon{display:block}
}

/* ---------- Search autocomplete dropdown ---------- */
.nav-search-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  width:min(440px, 92vw);
  background:#05080a !important;
  border:1px solid rgba(95,245,255,.22);
  border-radius:4px;
  box-shadow:0 22px 60px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(95,245,255,.05) inset;
  z-index:2500;
  max-height:min(70vh, 560px);
  overflow-y:auto;
  padding:6px 0;
  animation:nsdIn .16s ease-out;
}
@keyframes nsdIn{ from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
.nsd-section{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--frost);opacity:.75;
  padding:12px 16px 6px;
  border-top:1px solid rgba(95,245,255,.08);
}
.nsd-section:first-child{border-top:none;padding-top:10px}
.nsd-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  color:var(--ice);text-decoration:none;
  transition:background .12s;
  border-left:2px solid transparent;
}
.nsd-item:hover, .nsd-item.is-active{
  background:rgba(95,245,255,.07);
  border-left-color:var(--frost);
}
.nsd-item .nsd-thumb{
  width:36px;height:36px;flex:none;
  border-radius:3px;object-fit:cover;
  background:#0a1013;border:1px solid rgba(95,245,255,.15);
}
.nsd-item .nsd-thumb-blank{background:#0a1013}
.nsd-item .nsd-icon{
  width:36px;height:36px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:3px;background:#0a1013;
  border:1px solid rgba(95,245,255,.15);
  color:var(--frost);
}
.nsd-item .nsd-icon svg{width:16px;height:16px}
.nsd-item .nsd-body{flex:1;min-width:0}
.nsd-item .nsd-name{
  font-family:var(--body);font-size:14px;font-weight:600;
  color:#e9f9fb;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nsd-item .nsd-desc{
  font-size:12px;color:var(--steel);
  line-height:1.35;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nsd-item .nsd-tag{
  flex:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--frost);
  padding:4px 8px;border:1px solid rgba(95,245,255,.28);border-radius:2px;
  background:rgba(95,245,255,.05);
  white-space:nowrap;
}
.nsd-item mark{
  background:transparent;color:var(--frost);font-weight:700;
}
.nsd-empty{
  padding:22px 18px;text-align:center;
}
.nsd-empty-title{
  font-family:var(--body);font-size:14px;color:#e9f9fb;font-weight:500;
}
.nsd-empty-hint{
  margin-top:6px;font-size:12.5px;color:var(--steel);
}
.nsd-empty-hint a{color:var(--frost);border-bottom:1px solid rgba(95,245,255,.35)}

/* Mobile: full-width sheet below the sticky header.
   The sticky header is ~71px tall; the mobile search input opens *below* the
   header at ~top:130 with 38px height, so its bottom edge is ~168.
   Pin the dropdown a comfortable margin below that so it never overlaps the input. */
@media (max-width:820px){
  .nav-search-menu{
    position:fixed;top:178px;left:12px;right:12px;
    width:auto;max-width:none;
    max-height:calc(100vh - 200px);
    z-index:65;
  }
}

/* cart drawer */
.drawer-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
  z-index:200;opacity:0;pointer-events:none;transition:opacity .25s;
}
.drawer-mask.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);
  background:linear-gradient(180deg,#080f13,#05080a);
  border-left:1px solid var(--line);z-index:201;transform:translateX(100%);
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.drawer-h{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--line-soft);
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.02em;
}
.drawer-h .close{background:none;border:1px solid var(--line);color:var(--ice);width:34px;height:34px;border-radius:2px;cursor:pointer;font-size:16px}
.drawer-body{flex:1;overflow:auto;padding:12px 20px}
.drawer-body .empty{color:var(--steel);text-align:center;padding:40px 10px;font-size:14px}
.d-item{display:grid;grid-template-columns:1fr auto;gap:6px 14px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.d-item .n{font-family:var(--display);font-weight:600;font-size:14px;color:var(--ice)}
.d-item .m{font-family:var(--mono);font-size:11px;color:var(--steel);letter-spacing:.04em}
.d-item .qty{display:inline-flex;align-items:center;gap:6px;margin-top:4px}
.d-item .qty button{background:transparent;border:1px solid var(--line);color:var(--ice);width:24px;height:24px;border-radius:2px;cursor:pointer;font-family:var(--mono);font-size:14px;line-height:1}
.d-item .qty button:hover{border-color:var(--frost)}
.d-item .qty span{font-family:var(--mono);font-size:12px;color:var(--ice);min-width:20px;text-align:center}
.d-item .p{font-family:var(--mono);font-weight:700;color:var(--frost);text-align:right}
.d-item .rm{background:none;border:none;color:var(--steel-dim);font-size:11px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;font-family:var(--mono);text-align:right;padding-top:4px}
.d-item .rm:hover{color:var(--danger)}
.drawer-f{padding:16px 20px;border-top:1px solid var(--line-soft);background:rgba(8,14,17,0.7)}
.drawer-f .tot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;color:var(--steel);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.drawer-f .tot b{color:var(--ice);font-size:16px;font-family:var(--display)}

/* buttons */
.btn-block{display:block;width:100%;text-align:center}

/* toast */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  background:rgba(11,20,24,.96);border:1px solid var(--line);color:var(--ice);
  padding:12px 20px;border-radius:2px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  z-index:300;opacity:0;pointer-events:none;transition:opacity .2s, transform .25s;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.8);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast b{color:var(--frost)}

/* age-gate */
.gate-mask{
  position:fixed;inset:0;z-index:500;background:radial-gradient(1200px 800px at 50% 0%, rgba(42,167,196,.12), transparent 60%), rgba(4,7,10,.94);
  backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;
}
.gate{
  max-width:520px;width:100%;background:linear-gradient(180deg,#0b1418,#070f12);
  border:1px solid var(--line);padding:36px;border-radius:4px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(95,245,255,.06) inset;
}
.gate .eyebrow{margin-bottom:14px}
.gate h2{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.15;letter-spacing:-.01em;margin-bottom:14px}
.gate p{color:var(--steel);font-size:14.5px;margin-bottom:12px}
.gate ul{color:var(--steel);font-size:13.5px;margin:14px 0 22px 18px;line-height:1.9}
.gate ul li::marker{color:var(--frost-deep)}
.gate .checks{margin:20px 0 24px}
.gate label{display:flex;align-items:flex-start;gap:10px;padding:8px 0;color:var(--ice);font-size:13.5px;cursor:pointer}
.gate label input{margin-top:3px;accent-color:var(--frost)}
.gate-actions{display:flex;gap:12px;flex-wrap:wrap}
.gate .btn-primary{flex:1;min-width:180px}
.gate .btn-ghost{flex:1;min-width:120px}

/* sub-page layout */
.page-hero{padding:70px 0 40px}
.page-hero .eyebrow{margin-bottom:22px}
.page-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(36px,5.5vw,64px);line-height:1.02;letter-spacing:-.02em;max-width:20ch}
.page-hero .lede{color:var(--steel);font-size:17px;margin-top:22px;max-width:60ch}

.prose{max-width:760px;margin:0 auto;padding:20px 0 60px}
.prose h2{font-family:var(--display);font-weight:600;font-size:26px;margin:38px 0 14px;letter-spacing:-.01em;color:var(--ice)}
.prose h3{font-family:var(--display);font-weight:600;font-size:19px;margin:28px 0 10px;color:var(--frost)}
.prose p, .prose li{color:#c9dbe1;font-size:15.5px;line-height:1.75;margin:0 0 14px}
.prose ul, .prose ol{padding-left:20px;margin-bottom:16px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--frost-deep)}
.prose a{color:var(--frost);border-bottom:1px solid rgba(95,245,255,.3)}
.prose a:hover{border-bottom-color:var(--frost)}
.prose strong{color:var(--ice)}
.prose .meta{font-family:var(--mono);font-size:11px;color:var(--steel-dim);letter-spacing:.14em;text-transform:uppercase;margin-bottom:26px}

/* form */
.form-card{
  max-width:640px;margin:0 auto;background:linear-gradient(180deg,#0a1215,#070e11);
  border:1px solid var(--line);padding:36px;border-radius:4px;
}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-bottom:8px}
.field input, .field textarea, .field select{
  width:100%;padding:12px 14px;background:rgba(5,8,10,.6);border:1px solid var(--line);
  color:var(--ice);font-family:var(--body);font-size:14.5px;border-radius:2px;transition:border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus{outline:none;border-color:var(--frost)}
.field textarea{min-height:120px;resize:vertical;font-family:var(--body)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.checkbox-field{display:flex;align-items:flex-start;gap:10px;color:#c9dbe1;font-size:13.5px;line-height:1.6;margin:16px 0 20px}
.checkbox-field input{margin-top:3px;accent-color:var(--frost)}
.form-msg{padding:14px;border-radius:2px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;margin-top:14px;display:none}
.form-msg.ok{background:rgba(95,245,255,.08);border:1px solid rgba(95,245,255,.3);color:var(--frost);display:block}
.form-msg.err{background:rgba(255,180,162,.06);border:1px solid rgba(255,180,162,.3);color:var(--danger);display:block}

/* product detail page */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:40px 0 60px}
@media(max-width:900px){.pdp{grid-template-columns:1fr;gap:30px}}
.pdp-media{background:linear-gradient(180deg,#0a1215,#060c0f);border:1px solid var(--line);padding:24px;border-radius:4px}

/* --- Certificates & lab data (COA) --- */
.pdp-media-col{display:flex;flex-direction:column}
.pdp-coa{margin-top:36px;padding-top:28px;border-top:1px solid var(--line-soft);scroll-margin-top:100px}
@media(max-width:900px){.pdp-media-col{display:contents}.pdp-media-col .pdp-coa{order:2;margin-top:0}.pdp-media-col .pdp-media{order:0}.pdp > div:not(.pdp-media-col){order:1}}
.pdp-coa .coa-eyebrow{font-family:var(--mono);font-size:11px;color:var(--frost);letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.pdp-coa .coa-heading{font-family:var(--display);font-size:20px;color:#f4fbfc;margin:0 0 8px;font-weight:700;letter-spacing:-.01em}
.pdp-coa .coa-intro{color:var(--steel);font-size:14px;line-height:1.65;margin:0 0 16px}
.pdp-coa .coa-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;background:linear-gradient(180deg,rgba(95,245,255,.03),rgba(95,245,255,0));border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px;margin:0 0 18px}
.pdp-coa .coa-meta > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.pdp-coa .coa-meta .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--frost)}
.pdp-coa .coa-meta .v{font-size:14px;color:#e9f9fb;font-weight:500;word-break:break-word}
.pdp-coa .coa-meta .v.mono{font-family:var(--mono);font-size:12px}
.pdp-coa .coa-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:14px;margin:0 0 16px}
@media (min-width:721px){
  .pdp-coa .coa-thumbs[data-count="4"]{grid-template-columns:repeat(4,1fr)}
  .pdp-coa .coa-thumbs[data-count="3"]{grid-template-columns:repeat(3,1fr)}
  .pdp-coa .coa-thumbs[data-count="2"]{grid-template-columns:repeat(2,1fr)}
}
.pdp-coa .coa-thumb{display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(95,245,255,.03),rgba(95,245,255,0));border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease}
.pdp-coa .coa-thumb:hover{transform:translateY(-2px);border-color:rgba(95,245,255,.35);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.pdp-coa .coa-thumb-img{aspect-ratio:8.5 / 11;background:#f7fafc center/cover no-repeat;border-bottom:1px solid var(--line-soft)}

/* New markup: images live inside .coa-thumb-media (constrained to letter aspect ratio) */
.pdp-coa .coa-thumb-media{
  display:block;position:relative;width:100%;aspect-ratio:8.5 / 11;
  background:#f7fafc;border-bottom:1px solid var(--line-soft);overflow:hidden
}
.pdp-coa .coa-thumb-media img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:top center
}
.pdp-coa .coa-thumb-fallback{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:14px;box-sizing:border-box;color:var(--steel);
  background:linear-gradient(180deg,rgba(95,245,255,.03),rgba(95,245,255,0))
}
.pdp-coa .coa-thumb-fallback .pdf-icon{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  padding:6px 12px;background:rgba(95,245,255,.08);color:var(--cyan);
  border:1px solid rgba(95,245,255,.35);border-radius:4px
}
.pdp-coa .coa-thumb-fallback .coa-thumb-label{
  font-family:var(--body);font-size:12px;color:var(--frost);text-align:center;line-height:1.35
}

/* Body (title + desc under the media) */
.pdp-coa .coa-thumb-body{
  padding:10px 12px;display:flex;flex-direction:column;gap:2px
}
.pdp-coa .coa-thumb-title{
  font-family:var(--display);font-size:13.5px;font-weight:600;color:#e9f9fb;line-height:1.3
}
.pdp-coa .coa-thumb-desc{
  font-family:var(--mono);font-size:10.5px;color:var(--steel);letter-spacing:.02em;line-height:1.5
}

.pdp-coa .coa-thumb-meta{padding:10px 12px}
.pdp-coa .coa-thumb-title{font-family:var(--display);font-size:13.5px;font-weight:600;color:#e9f9fb;line-height:1.3;margin-bottom:4px}
.pdp-coa .coa-thumb-hint{font-family:var(--mono);font-size:10px;color:var(--frost);letter-spacing:.12em;text-transform:uppercase}
.pdp-coa .coa-disclaimer{font-family:var(--mono);font-size:10.5px;color:var(--steel-dim);line-height:1.6;letter-spacing:.02em;margin:14px 0 0;padding:12px 14px;border:1px dashed rgba(95,245,255,.14);border-radius:8px}
@media(max-width:900px){
  .pdp-coa .coa-thumbs{grid-template-columns:repeat(2,1fr);gap:10px}
  .pdp-coa .coa-thumb-title{font-size:12.5px}
}
@media(max-width:420px){
  .pdp-coa .coa-thumbs{grid-template-columns:1fr 1fr;gap:8px}
}

/* ============================================================
   Sister-ladder cross-sell (For Her stack range)
   Beauty <-> Menopause Essentials, etc.
   Accent color is set inline via --xsell-accent per card.
   ============================================================ */
.pdp-xsell{margin:32px 0 8px;padding:22px 22px 20px;border:1px solid var(--line-soft);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));position:relative;overflow:hidden}
.pdp-xsell::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--xsell-accent,#5ff5ff);opacity:.55}
.pdp-xsell .xsell-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--xsell-accent,#5ff5ff);margin:0 0 8px}
.pdp-xsell .xsell-headline{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.15;letter-spacing:-.01em;color:#f4fbfc;margin:0 0 16px}
.pdp-xsell .xsell-card{display:grid;grid-template-columns:120px 1fr;gap:16px;text-decoration:none;color:inherit;border:1px solid var(--line-soft);border-radius:12px;padding:14px;background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,0));transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease}
.pdp-xsell .xsell-card:hover{border-color:var(--xsell-accent,#5ff5ff);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.pdp-xsell .xsell-media{width:120px;height:120px;border-radius:8px;background:#0b1013 center/cover no-repeat;border:1px solid var(--line-soft);flex-shrink:0}
.pdp-xsell .xsell-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.pdp-xsell .xsell-tier{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--xsell-accent,#5ff5ff)}
.pdp-xsell .xsell-name{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.15;color:#f4fbfc;margin:0}
.pdp-xsell .xsell-bridge{color:var(--steel);font-size:13.5px;line-height:1.55;margin:4px 0 8px}
.pdp-xsell .xsell-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:6px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.pdp-xsell .xsell-price-row{display:flex;align-items:baseline;gap:8px}
.pdp-xsell .xsell-price{font-family:var(--display);font-weight:700;font-size:18px;color:#f4fbfc}
.pdp-xsell .xsell-was{font-family:var(--mono);font-size:11px;color:var(--steel-dim);text-decoration:line-through}
.pdp-xsell .xsell-cta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--xsell-accent,#5ff5ff);white-space:nowrap}
@media(max-width:520px){
  .pdp-xsell{padding:18px 16px 16px}
  .pdp-xsell .xsell-card{grid-template-columns:88px 1fr;gap:12px;padding:12px}
  .pdp-xsell .xsell-media{width:88px;height:88px}
  .pdp-xsell .xsell-name{font-size:17px}
  .pdp-xsell .xsell-headline{font-size:19px}
}

/* Mobile-only caption under the product image (visible when the PDP stacks single-column). */
.pdp-mobile-caption{display:none}
@media(max-width:900px){
  .pdp-mobile-caption{display:block;margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
  .pdp-mobile-caption .cat{font-family:var(--mono);font-size:11px;color:var(--frost);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
  .pdp-mobile-caption .pdp-mobile-name{font-family:var(--display);font-weight:700;font-size:clamp(24px,6vw,32px);line-height:1.1;letter-spacing:-.015em;color:#f4fbfc;margin:0 0 10px}
  .pdp-mobile-caption .pdp-mobile-desc{color:var(--steel);font-size:15px;line-height:1.6;margin:0}
  .pdp-mobile-caption .pdp-mobile-benefit{color:#e9f9fb;font-size:15px;line-height:1.6;margin:10px 0 0;font-weight:500}
}
.pdp h1{font-family:var(--display);font-weight:700;font-size:clamp(32px,4vw,48px);line-height:1.05;letter-spacing:-.02em;margin:8px 0 6px}
.pdp .cat{font-family:var(--mono);font-size:11px;color:var(--frost);letter-spacing:.14em;text-transform:uppercase}
.pdp .lede{color:var(--steel);font-size:16px;margin:18px 0 22px;line-height:1.7}
.pdp .pdp-benefit{color:#e9f9fb;font-size:17px;line-height:1.6;margin:18px 0 8px;font-weight:500}
.pdp .pdp-desc{color:var(--steel);font-size:13.5px;line-height:1.65;margin:0 0 22px;font-style:italic}
.pdp .pdp-desc .desc-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);font-style:normal;margin-right:3px}
.pdp-price{font-family:var(--display);font-weight:700;font-size:32px;color:var(--ice);margin-bottom:6px}
.pdp-price s{color:#ffffff;font-weight:700;font-size:20px;margin-right:14px;text-decoration:line-through;text-decoration-color:#ff6a6a;text-decoration-thickness:2px;text-decoration-skip-ink:none;-webkit-text-decoration-color:#ff6a6a;-webkit-text-decoration-thickness:2px;opacity:.95}
.pdp-specs{margin-top:24px;border-top:1px solid var(--line-soft);padding-top:18px}
.pdp-specs .row{display:grid;grid-template-columns:170px 1fr;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.pdp-specs .row span:first-child{font-family:var(--mono);color:var(--steel);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding-top:3px}
.pdp-specs .row span:last-child{color:var(--ice)}
.pdp-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

/* ---- Quantity bundle picker (STOCK UP & SAVE) ---- */
.pdp-bundle{margin-top:22px}
.pdp-bundle-head{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--frost);margin-bottom:10px;font-weight:700}
.pdp-bundle-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media (max-width:900px){.pdp-bundle-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}
@media (max-width:520px){.pdp-bundle-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}}
.pdp-bundle-tier{position:relative;background:transparent;border:1px solid var(--line-soft);border-radius:12px;padding:14px 8px 12px;text-align:center;cursor:pointer;transition:border-color .15s ease, background .15s ease, transform .1s ease;color:var(--ice);font-family:inherit}
.pdp-bundle-tier:hover{border-color:var(--frost);background:rgba(95,245,255,.04)}
.pdp-bundle-tier.is-selected{border-color:var(--frost);background:rgba(95,245,255,.08);box-shadow:0 0 0 1px var(--frost) inset}
.pdp-bundle-tier.is-best{border-color:rgba(95,245,255,.5)}
.pdp-bundle-tier.is-best.is-selected{border-color:#5ff5ff;background:rgba(95,245,255,.12);box-shadow:0 0 0 2px #5ff5ff inset, 0 0 24px rgba(95,245,255,.15)}
.pdp-bundle-qty{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ice);margin-top:4px;text-transform:uppercase;letter-spacing:.04em}
.pdp-bundle-total{font-family:var(--display);font-weight:700;font-size:20px;color:var(--ice);margin-top:6px;line-height:1.1}
.pdp-bundle-per{font-family:var(--mono);font-size:10px;color:var(--steel);letter-spacing:.06em;margin-top:4px}
.pdp-bundle-save{font-family:var(--mono);font-size:10px;color:#5ff5ff;letter-spacing:.06em;margin-top:6px;font-weight:600;min-height:14px}
.pdp-bundle-badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.12em;background:var(--steel-dim);color:var(--void,#05080a);padding:3px 8px;border-radius:4px;white-space:nowrap;text-transform:uppercase}
.pdp-bundle-badge-best{background:#5ff5ff;color:#05080a;box-shadow:0 0 16px rgba(95,245,255,.4)}
@media (max-width:520px){
  .pdp-bundle-tier{padding:14px 6px 12px}
  .pdp-bundle-total{font-size:17px}
  .pdp-bundle-qty{font-size:13px}
  .pdp-bundle-per,.pdp-bundle-save{font-size:9px}
  .pdp-bundle-badge{font-size:8px;padding:2px 6px}
}
/* ---------- PDP shipping ETA ---------- */
.pdp-eta{margin:20px 0 4px;padding:14px 16px;border:1px solid var(--line);border-radius:4px;background:linear-gradient(180deg,rgba(42,167,196,.06),rgba(95,245,255,.02));font-family:var(--mono);font-size:12px;color:var(--frost);letter-spacing:.02em;line-height:1.55}
.pdp-eta-status{display:flex;align-items:center;gap:10px}
.pdp-eta-dot{width:8px;height:8px;border-radius:50%;background:var(--steel);flex:none;box-shadow:0 0 6px rgba(124,146,156,.4)}
.pdp-eta-dot-live{background:#22c55e;box-shadow:0 0 10px rgba(34,197,94,.7);animation:etaPulse 1.6s ease-in-out infinite}
@keyframes etaPulse{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
.pdp-eta-line{color:var(--frost)}
.pdp-eta-line b{color:var(--ice);font-weight:700}
.pdp-eta-count{font-variant-numeric:tabular-nums;letter-spacing:.04em;background:rgba(95,245,255,.09);padding:1px 6px;border-radius:2px;border:1px solid rgba(95,245,255,.18)}
.pdp-eta-status-live{padding:10px 14px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.28);border-radius:6px}
.pdp-eta-status-live .pdp-eta-line{color:var(--ice);font-size:13.5px}
.pdp-eta-status-live .pdp-eta-count{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.5);color:#7effb3;font-weight:800;padding:2px 8px;font-size:14px}
.pdp-eta-count-warn{background:rgba(255,201,58,.15) !important;border-color:rgba(255,201,58,.55) !important;color:#ffc93a !important}
.pdp-eta-count-critical{background:rgba(255,79,79,.16) !important;border-color:rgba(255,79,79,.6) !important;color:#ff8f8f !important;animation:etaPulse 1s ease-in-out infinite}
.pdp-eta-arrival{margin-top:8px;color:var(--steel);letter-spacing:.03em}
.pdp-eta-arrival b{color:var(--frost);font-weight:600}
.pdp-eta-carrier{color:var(--steel-dim);text-transform:uppercase;letter-spacing:.1em;font-size:10px;margin-left:4px}
.pdp-eta-disc{margin-top:6px;color:var(--steel-dim);font-size:10px;letter-spacing:.04em;line-height:1.4}
@media (max-width:640px){
  .pdp-eta{padding:12px 14px;font-size:11px}
  .pdp-eta-carrier{display:block;margin-left:0;margin-top:2px}
  .pdp-eta-disc{font-size:9.5px}
}

/* ---------- PDP sticky mobile Add to cart bar ---------- */
.pdp-sticky-bar{display:none}
@media (max-width:640px){
  .pdp-sticky-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;transform:translateY(110%);transition:transform .28s cubic-bezier(.32,.72,.35,1);pointer-events:none;background:rgba(6,10,12,.94);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-top:1px solid rgba(95,245,255,.28);box-shadow:0 -12px 28px rgba(0,0,0,.55),0 -1px 0 rgba(95,245,255,.08) inset;padding-bottom:env(safe-area-inset-bottom,0)}
  .pdp-sticky-bar.is-visible{transform:translateY(0);pointer-events:auto}
  .pdp-sticky-inner{display:flex;align-items:center;gap:12px;padding:10px 14px}
  .pdp-sticky-info{flex:1;min-width:0}
  .pdp-sticky-name{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--steel);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
  .pdp-sticky-price{font-family:var(--mono);font-size:14px;color:var(--ice);letter-spacing:.02em;margin-top:2px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
  .pdp-sticky-price b{color:var(--frost);font-weight:700;font-size:16px}
  .pdp-sticky-was{color:var(--steel-dim);font-size:12px;text-decoration:line-through}
  .pdp-sticky-qty{color:var(--steel);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
  .pdp-sticky-btn{flex:none;padding:12px 16px;font-size:13px;letter-spacing:.06em;white-space:nowrap;box-shadow:0 0 20px rgba(95,245,255,.35)}
}
@media (prefers-reduced-motion:reduce){
  .pdp-sticky-bar{transition:none}
}

.pdp-back{font-family:var(--mono);font-size:12px;color:var(--steel);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;display:inline-block}
.pdp-back:hover{color:var(--frost)}

/* ---------- BLACKICE20 promo banner (PDP) ---------- */
.pdp-promo-banner{
  background:linear-gradient(90deg, rgba(102,229,255,0.10) 0%, rgba(95,245,255,0.06) 50%, rgba(102,229,255,0.10) 100%);
  border-top:1px solid rgba(102,229,255,0.28);
  border-bottom:1px solid rgba(102,229,255,0.28);
  color:var(--ice);
}
.pdp-promo-inner{
  display:flex;align-items:center;gap:14px;
  padding:12px 24px;
  position:relative;
}
.pdp-promo-badge{
  flex:0 0 auto;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;
  padding:5px 10px;
  background:var(--frost);color:#02060a;
  border-radius:2px;
}
.pdp-promo-copy{
  flex:1 1 auto;
  font-family:var(--mono);font-size:13px;letter-spacing:.02em;
  color:var(--ice);
  line-height:1.45;
}
.pdp-promo-copy strong{color:var(--frost);font-weight:700;letter-spacing:.06em}
.pdp-promo-sub{
  display:block;
  margin-top:2px;
  font-size:11px;letter-spacing:.05em;
  color:var(--steel);
  text-transform:uppercase;
}
.pdp-promo-close{
  flex:0 0 auto;
  background:transparent;border:1px solid rgba(102,229,255,0.25);
  color:var(--steel);
  width:28px;height:28px;
  border-radius:2px;
  font-size:16px;line-height:1;
  cursor:pointer;
  transition:border-color .2s, color .2s;
}
.pdp-promo-close:hover{border-color:var(--frost);color:var(--frost)}
/* Catalog variant — framed card (rounded, inset) instead of full-bleed strip. */
.pdp-promo-banner--catalog{
  border:1px solid rgba(102,229,255,0.28);
  border-radius:4px;
  margin-bottom:28px;
}

/* Hero variant — framed card that sits above the Veteran Owned USA badge. */
.pdp-promo-banner--hero{
  border:1px solid rgba(102,229,255,0.32);
  border-radius:4px;
  margin-bottom:24px;
  max-width:820px;
}

/* Official Launch Promotion eyebrow (hero variant). */
.pdp-promo-eyebrow{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--frost);
  margin-bottom:4px;
  text-shadow:0 0 12px rgba(102,229,255,0.55);
}

/* Glow effect for framed variants. */
.pdp-promo-banner--glow{
  border-color:rgba(102,229,255,0.6);
  box-shadow:
    0 0 0 1px rgba(102,229,255,0.6),
    0 0 32px rgba(102,229,255,0.55),
    0 0 80px rgba(102,229,255,0.32),
    0 0 140px rgba(102,229,255,0.18),
    inset 0 0 32px rgba(102,229,255,0.12);
  animation:biPromoGlow 2.6s ease-in-out infinite;
}
@keyframes biPromoGlow{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(102,229,255,0.5),
      0 0 26px rgba(102,229,255,0.42),
      0 0 64px rgba(102,229,255,0.22),
      0 0 120px rgba(102,229,255,0.12),
      inset 0 0 26px rgba(102,229,255,0.09);
  }
  50%{
    box-shadow:
      0 0 0 1.5px rgba(102,229,255,0.85),
      0 0 44px rgba(102,229,255,0.70),
      0 0 100px rgba(102,229,255,0.42),
      0 0 180px rgba(102,229,255,0.24),
      inset 0 0 40px rgba(102,229,255,0.18);
  }
}
@media (prefers-reduced-motion:reduce){
  .pdp-promo-banner--glow{animation:none}
}
@media (max-width:640px){
  .pdp-promo-inner{padding:10px 16px;gap:10px}
  .pdp-promo-badge{font-size:10px;padding:4px 8px}
  .pdp-promo-copy{font-size:12px}
  .pdp-promo-sub{font-size:10px}
  .pdp-promo-close{width:26px;height:26px}
  .pdp-promo-banner--catalog{margin-bottom:20px}
  .pdp-promo-banner--hero{margin-bottom:18px;max-width:none}
  .pdp-promo-eyebrow{font-size:9px;letter-spacing:.2em;margin-bottom:3px}
}

/* COA lookup */
.coa-lookup{max-width:640px;margin:0 auto;background:linear-gradient(180deg,#0a1215,#070e11);border:1px solid var(--line);padding:32px;border-radius:4px}
.coa-lookup .row{display:flex;gap:10px}
.coa-lookup input{flex:1}
.coa-lookup .hint{font-family:var(--mono);font-size:11px;color:var(--steel-dim);letter-spacing:.06em;margin-top:12px}
.coa-lookup .samples{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.coa-lookup .samples b{color:var(--steel);font-family:var(--mono);font-size:11px;letter-spacing:.08em;margin-right:8px;align-self:center;text-transform:uppercase}
.coa-lookup .samples button{background:rgba(95,245,255,.06);border:1px solid var(--line);color:var(--ice);padding:6px 12px;border-radius:2px;font-family:var(--mono);font-size:11px;cursor:pointer;letter-spacing:.06em}
.coa-lookup .samples button:hover{border-color:var(--frost);color:var(--frost)}

/* cart / checkout page */
.cart-page{display:grid;grid-template-columns:1fr 380px;gap:36px;padding:20px 0 60px}
@media(max-width:900px){.cart-page{grid-template-columns:1fr}}
@media(max-width:640px){.cart-page{gap:20px;grid-template-columns:minmax(0,1fr) !important}.cart-side{padding:18px !important;position:static !important;min-width:0}.cart-lines{padding:8px 14px !important;min-width:0}.cart-side .row{font-size:11px;padding:7px 0}.cart-side .row.total b{font-size:18px}}
.cart-lines{background:linear-gradient(180deg,#0a1215,#070e11);border:1px solid var(--line);border-radius:4px;padding:8px 22px}
.cart-line{display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.cart-line:last-child{border-bottom:none}
.cart-line .n{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ice)}
.cart-line .m{font-family:var(--mono);font-size:11px;color:var(--steel);margin-top:3px;letter-spacing:.04em}
.cart-line .qty{display:inline-flex;gap:6px;align-items:center}
.cart-line .qty button{background:transparent;border:1px solid var(--line);color:var(--ice);width:26px;height:26px;border-radius:2px;cursor:pointer}
.cart-line .qty span{font-family:var(--mono);min-width:22px;text-align:center;color:var(--ice)}
.cart-line .p{font-family:var(--mono);font-weight:700;color:var(--frost);min-width:80px;text-align:right}
.cart-line .rm{background:none;border:none;color:var(--steel-dim);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.cart-line .rm:hover{color:var(--danger)}
.cart-side{background:linear-gradient(180deg,#0a1215,#070e11);border:1px solid var(--line);border-radius:4px;padding:24px;align-self:start;position:sticky;top:90px}
.cart-side h3{font-family:var(--display);font-weight:600;font-size:18px;margin-bottom:16px}
.cart-side .row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--steel);letter-spacing:.06em;text-transform:uppercase;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.cart-side .row.total{border-bottom:none;padding-top:14px;margin-top:6px;border-top:1px solid var(--frost);color:var(--ice)}
.cart-side .row.total b{font-family:var(--display);font-size:20px}
.cart-side .btn-primary{margin-top:16px;width:100%;text-align:center}
.cart-side .note{font-family:var(--mono);font-size:10px;color:var(--steel-dim);letter-spacing:.04em;line-height:1.6;margin-top:14px;text-transform:none}

.empty-cart{text-align:center;padding:80px 20px;color:var(--steel)}
.empty-cart h2{font-family:var(--display);font-weight:600;font-size:26px;color:var(--ice);margin-bottom:12px}
.empty-cart p{margin-bottom:24px}

/* =========================================================================
   Verified customer reviews — appended 2026-08-03
   ========================================================================= */

/* Star primitives — precise fractional fill via bg/fg layering */
.bi-stars{display:inline-flex;align-items:center;gap:2px;line-height:1}
.bi-star{position:relative;display:inline-block;line-height:1}
.bi-star-bg{color:rgba(180,192,204,.28)}
.bi-star-fg{position:absolute;left:0;top:0;overflow:hidden;color:#ffc93a;text-shadow:0 0 8px rgba(255,201,58,.35)}
.bi-star-bg, .bi-star-fg{display:inline-block;line-height:1;font-family:inherit}

/* Star chip on catalog cards (compact) */
.bi-card-rating{
  display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--frost);
  margin:4px 0 2px
}
.bi-card-rating-txt{color:var(--steel);white-space:nowrap}

/* Site-wide aggregate badge (header) */
.bi-site-rating{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--frost);
  padding:5px 10px;border:1px solid rgba(255,201,58,.24);border-radius:20px;
  background:rgba(255,201,58,.05)
}
.bsr-txt{color:var(--ice);white-space:nowrap}

/* PDP reviews section */
.pdp-reviews{margin:48px 0 24px;padding:34px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.pdp-reviews .reviews-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:8px
}
.pdp-reviews .reviews-heading{
  font-family:var(--display);font-weight:600;font-size:22px;color:var(--ice);
  margin:0 0 22px;letter-spacing:-.01em
}

/* Empty state */
.pdp-reviews--empty .reviews-empty-copy{color:var(--frost);font-size:14.5px;line-height:1.6;max-width:560px;margin:0 0 12px}
.pdp-reviews--empty .reviews-empty-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--cyan);
  padding:8px 12px;border:1px solid rgba(95,245,255,.24);border-radius:4px;
  display:inline-block;background:rgba(95,245,255,.04)
}

/* Summary block (avg + distribution) */
.reviews-summary{
  display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;
  padding:22px 24px;background:rgba(10,14,18,.5);border:1px solid var(--line-soft);
  border-radius:10px;margin-bottom:22px
}
.rs-agg{text-align:center;min-width:120px}
.rs-avg{font-family:var(--display);font-weight:700;font-size:38px;color:var(--ice);line-height:1;margin-bottom:6px}
.rs-stars{margin:0 auto 4px}
.rs-count{font-family:var(--mono);font-size:10.5px;color:var(--steel);letter-spacing:.05em;text-transform:uppercase}

.rs-dist{display:flex;flex-direction:column;gap:6px}
.dist-row{display:grid;grid-template-columns:32px 1fr 32px;align-items:center;gap:10px;font-family:var(--mono);font-size:11px}
.dist-lbl{color:var(--frost);text-align:right}
.dist-bar-wrap{background:rgba(180,192,204,.12);height:8px;border-radius:4px;overflow:hidden}
.dist-bar{display:block;height:100%;background:linear-gradient(90deg,#ffc93a,#ffa500);border-radius:4px;transition:width .25s ease}
.dist-ct{color:var(--steel);text-align:left}

/* Filter buttons */
.reviews-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.rf-btn{
  background:rgba(10,14,18,.5);border:1px solid var(--line-soft);border-radius:20px;
  padding:6px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--frost);
  cursor:pointer;transition:all .15s
}
.rf-btn:hover{border-color:rgba(95,245,255,.4);color:var(--ice)}
.rf-btn.active{background:rgba(95,245,255,.1);border-color:rgba(95,245,255,.55);color:var(--cyan)}

/* Review cards grid */
.reviews-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){ .reviews-grid{grid-template-columns:1fr} .reviews-summary{grid-template-columns:1fr;gap:20px;padding:20px} }

.rc-card{
  padding:18px 20px;background:rgba(10,14,18,.55);border:1px solid var(--line-soft);
  border-radius:10px;display:flex;flex-direction:column;gap:8px
}
.rc-head{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;margin-bottom:6px}
.rc-av{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,rgba(95,245,255,.24),rgba(95,245,255,.08));
  border:1px solid rgba(95,245,255,.32);color:var(--ice);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.04em
}
.rc-who{min-width:0}
.rc-name{
  font-family:var(--body);font-weight:600;font-size:13.5px;color:var(--ice);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap
}
.rc-verified{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cyan);padding:2px 6px;border:1px solid rgba(95,245,255,.32);border-radius:3px;
  background:rgba(95,245,255,.06);white-space:nowrap
}
.rc-meta{font-family:var(--mono);font-size:10.5px;color:var(--steel);letter-spacing:.03em;margin-top:2px}
.rc-loc{color:var(--frost)}
.rc-stars{align-self:start;padding-top:2px}
.rc-title{font-family:var(--body);font-weight:600;font-size:14.5px;color:var(--ice);margin:2px 0 4px;letter-spacing:-.005em}
.rc-body{font-family:var(--body);font-size:13.5px;line-height:1.55;color:var(--frost);margin:0}

.reviews-fine{
  font-family:var(--mono);font-size:10.5px;color:var(--steel-dim);letter-spacing:.03em;
  line-height:1.6;margin-top:18px;text-transform:none
}

/* PDP inline rating (next to H1) */
.pdp-inline-rating{display:flex;align-items:center;gap:8px;margin:6px 0 12px;min-height:0}
.pdp-inline-rating:empty{display:none}
.pdp-inline-rating-txt{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--frost);
  text-decoration:none;border-bottom:1px dotted rgba(180,192,204,.28);padding-bottom:1px
}
.pdp-inline-rating-txt:hover{color:var(--cyan);border-bottom-color:rgba(95,245,255,.42)}

/* ---- Back-in-stock waitlist (OOS PDPs) ---- */
.pdp-waitlist{
  margin-top:22px;padding:22px;background:rgba(255,79,79,.04);
  border:1px solid rgba(255,143,143,.35);border-radius:12px
}
.pdp-waitlist-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.pdp-waitlist-dot{
  width:8px;height:8px;border-radius:50%;background:#ff8f8f;
  box-shadow:0 0 0 4px rgba(255,143,143,.18);
  animation:woosPulse 1.6s ease-in-out infinite
}
@keyframes woosPulse{0%,100%{opacity:.75}50%{opacity:1}}
.pdp-waitlist-title{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#ff8f8f;font-weight:700
}
.pdp-waitlist-copy{
  font-family:var(--body);font-size:13.5px;line-height:1.55;color:var(--frost);
  margin:0 0 14px;max-width:520px
}
.pdp-waitlist-form{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.pdp-waitlist-input{
  flex:1 1 240px;min-width:0;padding:12px 14px;
  background:rgba(10,14,18,.7);border:1px solid var(--line-soft);border-radius:6px;
  color:var(--ice);font-family:var(--body);font-size:14px;box-sizing:border-box
}
.pdp-waitlist-input:focus{
  outline:none;border-color:rgba(95,245,255,.5);background:rgba(10,14,18,.9)
}
.pdp-waitlist-input::placeholder{color:var(--steel-dim)}
.pdp-waitlist-btn{flex:0 0 auto;white-space:nowrap;padding-left:22px;padding-right:22px}
.pdp-waitlist-hp{position:absolute;left:-9999px;height:0;width:0;overflow:hidden}
.pdp-waitlist-msg{
  margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;
  min-height:0;line-height:1.5
}
.pdp-waitlist-msg.ok{color:#7effb3}
.pdp-waitlist-msg.err{color:#ff8f8f}

/* Catalog card sold-out overlay */
.card.is-oos{position:relative}
.card.is-oos .media{opacity:.4;filter:grayscale(60%)}
.card.is-oos::after{
  content:"SOLD OUT";position:absolute;top:14px;right:14px;z-index:3;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;
  padding:5px 10px;background:rgba(255,79,79,.14);color:#ff8f8f;
  border:1px solid rgba(255,143,143,.5);border-radius:3px;text-transform:uppercase
}

/* ---- Cart free-shipping progress bar + free BAC gift ---- */
.cart-progress{margin:-2px 0 18px;padding:14px 16px;background:rgba(10,14,18,.55);border:1px solid var(--line-soft);border-radius:8px}
.cart-progress-track{
  position:relative;height:8px;background:rgba(180,192,204,.12);border-radius:4px;
  overflow:visible
}
.cart-progress-fill{
  display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,rgba(95,245,255,.55),rgba(95,245,255,.95));
  box-shadow:0 0 12px rgba(95,245,255,.35);
  transition:width .35s ease
}
.cart-progress-marker{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;
  background:rgba(10,14,18,.9);border:1px solid var(--line-soft);
  color:var(--frost);display:flex;align-items:center;justify-content:center
}
.cart-progress[data-full="1"] .cart-progress-marker{
  border-color:var(--frost);color:var(--cyan);background:rgba(95,245,255,.12)
}
.cart-progress-label{
  margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--frost);text-align:center
}
.cart-progress-label b{color:var(--ice);font-weight:700}
.cart-progress-label .cpl-ok{color:#7effb3;font-weight:600}

/* Free BAC gift line */
.cart-line-free{
  background:rgba(95,245,255,.04);
  border:1px dashed rgba(95,245,255,.28) !important;
  border-radius:8px;padding-left:14px;padding-right:14px
}
.free-tag{
  display:inline-block;margin-left:8px;padding:2px 7px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;font-weight:700;
  color:var(--cyan);background:rgba(95,245,255,.12);
  border:1px solid rgba(95,245,255,.4);border-radius:3px;text-transform:uppercase
}
.free-strike{color:var(--steel-dim);font-size:12px;margin-right:6px}
.free-price{color:var(--cyan);font-weight:700}
.free-qty{
  font-family:var(--mono);font-size:10.5px;color:var(--steel);letter-spacing:.04em;
  padding:6px 10px;text-transform:uppercase
}
.rm-locked{
  color:var(--cyan);font-weight:700;padding:6px 10px;
  font-size:16px;line-height:1;background:none;border:none
}

/* ---- COA tabs + tested-for panel ---- */
.coa-tested-for{
  margin:14px 0 18px;padding:16px 20px;background:rgba(10,14,18,.5);
  border:1px solid var(--line-soft);border-radius:8px
}
.coa-tested-for .ctf-head{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:10px;font-weight:700
}
.coa-tested-for ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
@media (max-width:640px){.coa-tested-for ul{grid-template-columns:1fr}}
.coa-tested-for li{
  font-family:var(--body);font-size:13.5px;line-height:1.4;color:var(--frost);
  display:flex;align-items:center;gap:8px
}
.ctf-ok{color:#7effb3;font-weight:800;font-size:13px}

.coa-tabs{
  display:flex;gap:6px;margin:16px 0 12px;flex-wrap:wrap;
  border-bottom:1px solid var(--line-soft);padding-bottom:2px
}
.coa-tab{
  background:transparent;border:1px solid var(--line-soft);border-bottom:none;border-radius:6px 6px 0 0;
  padding:8px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--frost);
  cursor:pointer;transition:all .12s;position:relative;top:1px;font-weight:600
}
.coa-tab:hover{color:var(--ice);border-color:var(--frost)}
.coa-tab.is-active{
  color:var(--cyan);background:rgba(95,245,255,.06);
  border-color:rgba(95,245,255,.55);border-bottom:1px solid rgba(95,245,255,.06)
}
.coa-tab-ct{
  display:inline-block;margin-left:6px;padding:1px 6px;
  background:rgba(180,192,204,.15);border-radius:10px;font-size:10.5px;color:var(--steel)
}
.coa-tab.is-active .coa-tab-ct{background:rgba(95,245,255,.18);color:var(--cyan)}

.coa-panel{display:none}
.coa-panel.is-active{display:block}
.coa-panel-hint{
  font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--steel);
  margin:0 0 12px;line-height:1.55
}

/* ---- Cart cross-sell ---- */
.cart-xsell{margin:48px 0 20px;padding:32px 0 8px;border-top:1px solid var(--line-soft)}
.xsell-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:6px
}
.xsell-heading{
  font-family:var(--display);font-weight:600;font-size:22px;color:var(--ice);
  margin:0 0 22px;letter-spacing:-.01em
}
.xsell-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:820px){.xsell-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.xsell-grid{grid-template-columns:1fr}}
.xsell-card{
  display:flex;flex-direction:column;
  background:rgba(10,14,18,.55);border:1px solid var(--line-soft);
  border-radius:10px;overflow:hidden;transition:border-color .15s
}
.xsell-card:hover{border-color:var(--frost)}
.xsell-media{
  display:block;aspect-ratio:1/1;background:rgba(10,14,18,.35);
  overflow:hidden;position:relative
}
.xsell-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.xsell-card:hover .xsell-media img{transform:scale(1.03)}
.xsell-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.xsell-cat{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan)
}
.xsell-name{
  font-family:var(--body);font-weight:600;font-size:14.5px;color:var(--ice);
  text-decoration:none;line-height:1.3
}
.xsell-name:hover{color:var(--cyan)}
.xsell-price{
  font-family:var(--display);font-weight:700;font-size:16px;color:var(--ice);
  margin:4px 0 12px
}
.xsell-btn{align-self:flex-start;padding:7px 14px;font-size:11.5px}
.btn-sm{padding:7px 12px;font-size:11.5px}

/* ---- PDP breadcrumbs ---- */
.pdp-breadcrumbs{margin:0 0 14px}
.pdp-breadcrumbs ol{
  list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase
}
.pdp-breadcrumbs li{display:inline-flex;align-items:center}
.pdp-breadcrumbs li a{color:var(--steel);text-decoration:none;transition:color .12s}
.pdp-breadcrumbs li a:hover{color:var(--cyan)}
.pdp-breadcrumbs li[aria-current="page"] span{color:var(--frost);font-weight:600}
.pdp-breadcrumbs .crumb-sep{color:var(--steel-dim);padding:0 0px}
@media (max-width:640px){
  .pdp-breadcrumbs ol{font-size:10.5px;gap:6px}
}

/* ---- Order tracking page ---- */
.track-wrap{max-width:720px;margin:0 auto}
.track-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.track-heading{font-family:var(--display);font-weight:600;font-size:32px;color:var(--ice);margin:0 0 12px}
.track-lede{color:var(--frost);font-size:15px;line-height:1.55;margin:0 0 28px;max-width:560px}
.track-form{
  display:grid;gap:14px;padding:22px 24px;background:rgba(10,14,18,.5);
  border:1px solid var(--line-soft);border-radius:10px;margin-bottom:26px
}
.track-field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--frost);margin-bottom:5px}
.track-field input{
  width:100%;padding:11px 13px;background:rgba(10,14,18,.7);border:1px solid var(--line-soft);
  border-radius:5px;color:var(--ice);font-family:var(--body);font-size:14.5px;box-sizing:border-box
}
.track-field input:focus{outline:none;border-color:rgba(95,245,255,.5);background:rgba(10,14,18,.9)}
.track-msg{margin-top:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;min-height:0}
.track-msg.err{color:#ff8f8f}
.track-msg.ok{color:#7effb3}

.tr-card{padding:24px 26px;background:rgba(10,14,18,.55);border:1px solid var(--line-soft);border-radius:10px}
.tr-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.tr-order-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--steel);text-transform:uppercase}
.tr-order-id{font-family:var(--mono);font-size:16px;color:var(--ice);font-weight:700;letter-spacing:.04em}
.tr-status-pill{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;font-weight:700;text-transform:uppercase;
  padding:6px 14px;border-radius:20px;border:1px solid;white-space:nowrap
}
.sp-pending  {color:#ffc93a;background:rgba(255,201,58,.08);border-color:rgba(255,201,58,.45)}
.sp-paid     {color:#5ff5ff;background:rgba(95,245,255,.08);border-color:rgba(95,245,255,.5)}
.sp-shipped  {color:#7effb3;background:rgba(126,255,179,.08);border-color:rgba(126,255,179,.5)}
.sp-delivered{color:#7effb3;background:rgba(126,255,179,.15);border-color:rgba(126,255,179,.7);font-weight:800}
.sp-cancelled{color:#ff8f8f;background:rgba(255,143,143,.08);border-color:rgba(255,143,143,.5)}

.tr-carrier{margin-bottom:10px;padding:12px 14px;background:rgba(95,245,255,.04);border:1px solid rgba(95,245,255,.28);border-radius:6px}
.tr-carrier-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--cyan);text-transform:uppercase;margin-bottom:4px}
.tr-carrier-val{font-family:var(--body);font-size:14px;color:var(--ice);font-weight:600}
.tr-carrier-val a{color:var(--cyan);text-decoration:none;border-bottom:1px dotted rgba(95,245,255,.4)}
.tr-carrier-val a:hover{border-bottom-color:var(--cyan)}
.tr-tracking{font-family:var(--mono);color:var(--frost)}

.tr-eta{
  margin-bottom:18px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--frost)
}
.tr-eta-lbl{color:var(--steel);margin-right:8px}
.tr-eta b{color:var(--ice);font-weight:700}

.tr-timeline{
  position:relative;margin:22px 0 0;padding-left:8px
}
.tr-step{
  display:grid;grid-template-columns:20px 1fr;gap:12px;padding:10px 0;position:relative
}
.tr-step:not(:last-child)::before{
  content:"";position:absolute;left:9px;top:22px;bottom:-10px;width:2px;
  background:rgba(180,192,204,.15)
}
.tr-step-dot{
  width:18px;height:18px;border-radius:50%;
  background:rgba(10,14,18,.9);border:2px solid var(--line-soft);
  margin-top:3px;transition:all .2s
}
.tr-step-done .tr-step-dot{background:#7effb3;border-color:#7effb3;box-shadow:0 0 12px rgba(126,255,179,.35)}
.tr-step-done:not(:last-child)::before{background:rgba(126,255,179,.4)}
.tr-step-active .tr-step-dot{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 0 4px rgba(95,245,255,.18);animation:trPulse 1.6s ease-in-out infinite}
@keyframes trPulse{0%,100%{opacity:.9}50%{opacity:1;box-shadow:0 0 0 7px rgba(95,245,255,.08)}}
.tr-step-pending .tr-step-dot{background:rgba(10,14,18,.6);border-color:var(--line-soft)}
.tr-step-cancelled .tr-step-dot{background:#ff8f8f;border-color:#ff8f8f}

.tr-step-body{padding-top:2px}
.tr-step-label{font-family:var(--body);font-size:14px;color:var(--ice);font-weight:600}
.tr-step-pending .tr-step-label{color:var(--steel)}
.tr-step-time{font-family:var(--mono);font-size:11px;color:var(--steel);letter-spacing:.02em;margin-top:2px}

.tr-items{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.tr-items-head{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--steel);text-transform:uppercase;margin-bottom:10px}
.tr-item{display:flex;justify-content:space-between;padding:6px 0;font-family:var(--body);font-size:13.5px;color:var(--frost)}
.tr-item-qty{font-family:var(--mono);color:var(--steel)}

.tr-note{margin-top:16px;padding:12px 14px;background:rgba(255,201,58,.05);border:1px solid rgba(255,201,58,.28);border-radius:6px;font-family:var(--body);font-size:13.5px;color:var(--frost);line-height:1.55}

.track-help{margin-top:36px;padding:22px 24px;background:rgba(10,14,18,.35);border:1px dashed var(--line-soft);border-radius:10px}
.track-help h3{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ice);margin:0 0 12px}
.track-help ul{margin:0;padding-left:20px;color:var(--frost);font-size:13.5px;line-height:1.7}
.track-help code{font-family:var(--mono);font-size:12px;background:rgba(95,245,255,.06);padding:1px 6px;border-radius:3px;color:var(--cyan)}

/* ---- Save-my-cart (abandoned cart recovery) ---- */
.save-cart{
  margin-top:22px;padding:16px 18px;background:rgba(10,14,18,.55);
  border:1px dashed var(--line-soft);border-radius:8px
}
.save-cart-head{margin-bottom:6px}
.save-cart-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--cyan);text-transform:uppercase}
.save-cart-title{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ice);margin-top:2px}
.save-cart-copy{
  font-family:var(--body);font-size:12.5px;line-height:1.5;color:var(--frost);
  margin:6px 0 12px
}
.save-cart-copy b{color:var(--ice);font-weight:700}
.save-cart-form{display:flex;gap:6px;flex-wrap:wrap}
.save-cart-input{
  flex:1 1 160px;min-width:0;padding:8px 10px;
  background:rgba(10,14,18,.7);border:1px solid var(--line-soft);border-radius:5px;
  color:var(--ice);font-family:var(--body);font-size:12.5px;box-sizing:border-box
}
.save-cart-input:focus{outline:none;border-color:rgba(95,245,255,.5)}
.save-cart-btn{flex:0 0 auto;white-space:nowrap;padding:8px 14px !important;font-size:11px !important}
.save-cart-hp{position:absolute;left:-9999px;height:0;width:0;overflow:hidden}
.save-cart-msg{
  margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;line-height:1.5;min-height:0
}
.save-cart-msg.ok{color:#7effb3}
.save-cart-msg.err{color:#ff8f8f}

.save-cart-restored{
  margin-top:14px;padding:10px 14px;
  background:rgba(126,255,179,.06);border:1px solid rgba(126,255,179,.35);border-radius:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#7effb3
}

/* ---- PDP Strength Selector (pills) ---- */
.pdp-strength{
  margin:20px 0 18px;padding:16px 18px;
  background:linear-gradient(180deg,rgba(95,245,255,.045),rgba(95,245,255,.015));
  border:1px solid rgba(95,245,255,.28);border-radius:10px;
  position:relative
}
.pdp-strength::before{
  content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:2px;
  background:linear-gradient(90deg,rgba(95,245,255,.65),rgba(95,245,255,.15));
  border-radius:10px 10px 0 0
}
.pdp-strength-label{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);font-weight:700;margin-bottom:10px
}
.pdp-strength-pills{
  display:flex;flex-wrap:wrap;gap:8px
}
.pdp-strength-pill{
  flex:1 1 auto;min-width:80px;
  padding:12px 18px;background:rgba(10,14,18,.6);
  border:1.5px solid var(--line-soft);border-radius:8px;
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.005em;
  color:var(--ice);cursor:pointer;transition:all .12s ease;
  text-align:center
}
.pdp-strength-pill:hover{
  border-color:rgba(95,245,255,.5);background:rgba(95,245,255,.04);
  transform:translateY(-1px)
}
.pdp-strength-pill.is-active{
  border-color:var(--cyan);background:rgba(95,245,255,.12);
  color:var(--cyan);
  box-shadow:0 0 0 1px var(--cyan) inset, 0 0 18px rgba(95,245,255,.18)
}
.pdp-strength-pill:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px
}

/* PDP image-shown caption */
.pdp-image-note{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--steel);
  text-align:center;margin:10px 0 18px;padding:0 12px;line-height:1.5
}
.pdp-image-note b{color:var(--frost);font-weight:700}