/* ==========================================================================
   Evo Aminoz design system v2 (2026-10-29). Rules: DESIGN.md. Loaded after evo.css.
   Peptira's measured system translated to Evo's black brand.
   ========================================================================== */

/* Hyphen only: Plus Jakarta's hyphen glyph is wide and reads as an em dash, so U+002D alone comes from a system face. */
@font-face{font-family:'EvoHyphen';src:local('Helvetica Neue'),local('Helvetica'),local('Arial');unicode-range:U+2D;font-weight:100 900}

/* ---------- 1. Tokens ---------- */
:root{
  --font:'EvoHyphen','Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --head:var(--font);--body:var(--font);--mono:var(--font);
  --bg:#000;--studio:#020408;--surface:#0b0c0f;--surface-2:#121419;--surface-3:#181b21;
  --line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.16);
  --text:#fff;--ink-2:#c9cfdb;--muted:#8b93a7;--faint:#5d6578;
  --blue:#0068ff;--blue-deep:#0055d4;--blue-soft:rgba(0,104,255,.14);--blue-line:rgba(0,104,255,.55);
  --success:#3ccf91;--success-soft:rgba(60,207,145,.12);--warn:#f0a44b;--warn-soft:rgba(240,164,75,.12);
  --r-sm:12px;--r:16px;--r-md:16px;--r-lg:22px;--r-xl:28px;
  --t:.15s cubic-bezier(.4,0,.2,1);--ease-store:cubic-bezier(.2,.8,.2,1);
  --wrap:1280px;--pad:24px;
}

/* ---------- 2. Base ---------- */
body{font-family:var(--body);letter-spacing:-.006em;color:var(--muted);background:var(--bg)}
h1,h2,h3,h4,h5{font-family:var(--head);font-weight:800;letter-spacing:-.03em}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tabular,.amount,.woocommerce-Price-amount{font-variant-numeric:tabular-nums}

.v2-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin:0 0 12px}
.v2-h{font-size:clamp(30px,3.6vw,46px);line-height:1.05;letter-spacing:-.03em;color:var(--text);margin:0}
.v2-h .hl{color:var(--blue)}
.v2-sub{font-size:17px;line-height:1.6;color:var(--muted);margin:12px 0 0;max-width:62ch}
.v2-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px}
.v2-sechead > div{min-width:0}
.v2-link{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:700;font-size:15px;white-space:nowrap;transition:color var(--t)}
.v2-link svg{transition:transform var(--t)}
.v2-link:hover{color:var(--blue)}
.v2-link:hover svg{transform:translateX(2px)}
.section{padding:88px 0}
@media (max-width:768px){.section{padding:60px 0}.v2-sechead{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:26px}}

/* ---------- 3. Buttons ---------- */
.btn{font-family:var(--font);font-weight:700;font-size:15px;letter-spacing:-.01em;text-transform:none;line-height:1;
  min-height:48px;padding:0 26px;border-radius:999px;box-shadow:none;filter:none;transform:none;
  transition:background-color var(--t),color var(--t),border-color var(--t)}
.btn:hover,.btn:active{transform:none;filter:none}
.btn-lg{min-height:54px;padding:0 30px;font-size:16px}
.btn-blue{background:var(--blue);color:#fff;box-shadow:none}
.btn-blue:hover{background:var(--blue-deep);box-shadow:none}
.btn-white{background:#fff;color:#05070b;box-shadow:none}
.btn-white:hover{background:#e6eaf2;box-shadow:none}
.btn-ghost{background:transparent;color:#fff;border:1px solid var(--line-strong);box-shadow:none}
.btn-ghost:hover{background:#fff;color:#05070b;border-color:#fff}
.btn svg{flex:0 0 auto}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}

/* ---------- 4. Badges ---------- */
.v2-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:700;
  letter-spacing:0;white-space:nowrap;border:1px solid transparent;font-variant-numeric:tabular-nums}
.v2-badge svg{width:13px;height:13px}
.v2-badge--purity{color:var(--success);background:var(--success-soft);border-color:rgba(60,207,145,.28)}
.v2-badge--offer{color:#fff;background:var(--blue);border-color:var(--blue)}
.v2-badge--soft{color:#cfe0ff;background:var(--blue-soft);border-color:rgba(0,104,255,.35)}
.v2-badge--out{color:var(--muted);background:var(--surface-2);border-color:var(--line-strong)}
.v2-badge--save{color:var(--success);background:var(--success-soft);border-color:rgba(60,207,145,.28);height:22px;font-size:12px;padding:0 8px}
/* COA status label (Currently shipping / Coming soon). Hairline + ~10% same-hue fill, no glow. */
.coa-status{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font:700 11.5px/1 var(--font);letter-spacing:0;white-space:nowrap;border:1px solid transparent}
.coa-status--shipping{color:var(--success);background:var(--success-soft);border-color:rgba(60,207,145,.28)}
.coa-status--soon{color:#cfe0ff;background:var(--blue-soft);border-color:rgba(0,104,255,.35)}
.coa-lb-cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}

/* ---------- 5. Announcement bar: calmer, smaller, slower ---------- */
/* Announcement bar: the live blue bar is kept as is (owner, round 4); only the font moves to the v2 family. */
.anno-item{font-family:var(--font)}

/* ---------- 6. Header and nav ---------- */
.site-header{background:#000;border-bottom:1px solid var(--line)}
.header-row{height:72px;max-width:var(--wrap);padding:0 var(--pad)}
.search input{height:44px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-family:var(--font);font-size:14.5px;
  transition:border-color var(--t),background-color var(--t)}
.search input:hover{border-color:var(--line-strong)}
.search input:focus{border-color:var(--blue-line);background:var(--surface-3);outline:0}
.main-nav a{font-family:var(--font);font-weight:600;font-size:15px;letter-spacing:-.01em;text-transform:none;color:var(--ink-2);transition:color var(--t)}
/* Desktop-only nav styles. Below 1200px the base theme (evo.css) owns the mobile accordion menu, so these must not leak into it. */
@media (min-width:1200px){
.main-nav > ul{gap:30px}
.main-nav a::before{bottom:-8px;height:2px;border-radius:2px;transform-origin:center;transition:transform .2s var(--ease-store)}
.main-nav .sub{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:8px;min-width:280px;
  box-shadow:0 24px 64px -20px rgba(0,0,0,.8)}
}
.main-nav .sub a{display:flex;flex-direction:column;gap:2px;padding:11px 14px;border-radius:12px;font-size:15px;color:#fff;text-transform:none;letter-spacing:-.01em}
.main-nav .sub a::before{display:none}
.main-nav .sub a small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.main-nav .sub a:hover{background:var(--surface-2)}
.icon-btn{border-radius:999px;transition:background-color var(--t),color var(--t)}
.icon-btn:hover{background:var(--surface-2)}
.cart-count{background:var(--blue);color:#fff;font-weight:700;font-size:10.5px}

/* ---------- 7. Breadcrumbs ---------- */
.breadcrumb{padding:28px 0 4px;font-size:14px;font-weight:600;color:var(--text);display:flex;flex-wrap:wrap;align-items:center;gap:0}
.breadcrumb a{color:var(--muted);transition:color var(--t)}
.breadcrumb a::after{display:none}
.breadcrumb a:hover{color:#fff}
.breadcrumb .sep{display:inline-block;margin:0 10px;opacity:1;color:var(--faint);font-size:0;width:12px;height:12px;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.breadcrumb a{font-weight:500}

/* ---------- 8. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */
/* Hero */
.v2-hero{position:relative;padding:72px 0 64px;overflow:hidden}
.v2-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 78% 40%,rgba(0,104,255,.16),transparent 70%)}
.v2-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:48px;align-items:center}
.v2-hero-title{font-size:clamp(38px,4.4vw,62px);line-height:.98;letter-spacing:-.035em;text-transform:uppercase;color:#fff;margin:0}
.v2-hero-title .hl{color:var(--blue)}
.v2-hero-sub{font-size:18px;line-height:1.6;color:var(--ink-2);margin:22px 0 0;max-width:54ch}
.v2-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.v2-hero-media{position:relative;margin:0;justify-self:end;width:min(100%,400px);aspect-ratio:9/16;border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);border:1px solid var(--line-strong)}
.v2-hero-media{background-size:cover;background-position:center}
.v2-hero-video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer;opacity:0;transition:opacity .4s var(--ease-store)}
.v2-hero-video.is-playing{opacity:1}
.v2-sound{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 12px;
  border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.62);color:#fff;font:600 13px/1 var(--font);
  transition:background-color var(--t),border-color var(--t)}
.v2-sound:hover{background:rgba(0,0,0,.82);border-color:rgba(255,255,255,.32)}
.v2-sound .ic-on{display:none}
.v2-sound[aria-pressed=true] .ic-on{display:block}
.v2-sound[aria-pressed=true] .ic-off{display:none}
.v2-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:999px;border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center}
.v2-play[hidden]{display:none}
@media (max-width:900px){
  .v2-hero{padding:40px 0 48px}
  .v2-hero-grid{grid-template-columns:1fr;gap:36px}
  .v2-hero-media{justify-self:center;width:min(100%,340px)}
  .v2-hero-sub{font-size:16.5px}
  .v2-hero-cta .btn{flex:1 1 220px}
}

/* Trust strip */
.v2-trust-wrap{padding:0 0 8px}
.v2-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.v2-trust li{display:flex;align-items:center;gap:14px;padding:22px 24px;border-left:1px solid var(--line);min-width:0}
.v2-trust li:first-child{border-left:0}
.v2-trust-ic{flex:0 0 auto;width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line-strong);color:#fff}
.v2-trust b{display:block;color:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em}
.v2-trust small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
@media (max-width:1024px){.v2-trust{grid-template-columns:repeat(2,minmax(0,1fr))}.v2-trust li:nth-child(3){border-left:0}.v2-trust li:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:560px){.v2-trust{grid-template-columns:1fr}.v2-trust li{border-left:0;padding:16px 18px}.v2-trust li+li{border-top:1px solid var(--line)}}

/* Category cards */
.v2-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.v2-cat{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;
  transition:border-color var(--t),transform var(--t)}
.v2-cat:hover{border-color:var(--blue-line);transform:translateY(-2px)}
.v2-cat-media{position:relative;display:block;aspect-ratio:4/3.3;overflow:hidden;
  background:linear-gradient(180deg,#0d0f14,#07080b)}
.v2-cat-media::after{content:"";position:absolute;left:12%;right:12%;bottom:12%;height:10px;border-radius:50%;background:rgba(0,0,0,.6);filter:blur(8px)}
.v2-cat-v{position:absolute;bottom:13%;height:62%;width:auto;z-index:1;transition:transform .35s var(--ease-store)}
.v2-cat-v1{left:50%;height:70%;transform:translateX(-50%);z-index:2}
.v2-cat-v0{left:18%}
.v2-cat-v2{right:18%}
.v2-cat:hover .v2-cat-v1{transform:translate(-50%,-6px)}
.v2-cat:hover .v2-cat-v0,.v2-cat:hover .v2-cat-v2{transform:translateY(-3px)}
.v2-cat-body{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 20px;border-top:1px solid var(--line)}
.v2-cat-body b{display:block;color:#fff;font-size:17px;font-weight:800;letter-spacing:-.02em}
.v2-cat-body small{display:block;color:var(--muted);font-size:13.5px;margin-top:3px}
.v2-cat-go{flex:0 0 auto;width:36px;height:36px;border-radius:999px;border:1px solid var(--line-strong);display:grid;place-items:center;color:#fff;
  transition:background-color var(--t),border-color var(--t),color var(--t)}
.v2-cat:hover .v2-cat-go{background:#fff;border-color:#fff;color:#000}
@media (max-width:1024px){.v2-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.v2-cats{grid-template-columns:1fr}}

/* Best sellers tiles */
.v2-best{padding-top:24px}
.v2-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.v2-tile{display:flex;flex-direction:column;min-width:0}
.v2-tile-media{position:relative;display:grid;place-items:center;aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,#0e1015,#08090c);
  transition:border-color var(--t)}
.v2-tile-media img{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;height:76%;width:auto;max-width:none;transition:transform .35s var(--ease-store)}
.v2-tile:hover .v2-tile-media{border-color:var(--line-strong)}
.v2-tile:hover .v2-tile-media img{transform:translateY(-4px)}
.v2-tile-flag{position:absolute;top:12px;left:12px}
.v2-tile-body{text-align:center;padding:16px 8px 0}
.v2-tile-name{display:block;color:#fff;font-weight:800;font-size:16px;letter-spacing:-.01em;text-transform:uppercase}
.v2-tile-name span{color:var(--muted);font-weight:700}
.v2-tile-price{margin:6px 0 0;color:var(--ink-2);font-weight:600;font-size:15px}
.v2-tile-price .amount{color:#fff}
.v2-tile-cta{display:inline-block;margin-top:10px;background:none;border:0;padding:6px 4px;font:800 13.5px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);cursor:pointer;transition:color var(--t)}
.v2-tile-cta:hover{color:#fff}
.v2-tile-cta.is-off{color:var(--faint);cursor:default}
.v2-tile-cta.is-busy{opacity:.5;pointer-events:none}
.v2-tile-cta.is-done{color:var(--success)}
@media (max-width:1024px){.v2-tiles{grid-template-columns:repeat(4,minmax(220px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;
  margin:0 calc(var(--pad) * -1);padding-left:var(--pad);padding-right:var(--pad);scrollbar-width:none}
  .v2-tiles::-webkit-scrollbar{display:none}.v2-tile{scroll-snap-align:start}}
@media (max-width:560px){.v2-tiles{grid-template-columns:repeat(4,72%)}}

/* Build-a-Pack band */
.v2-band-wrap{padding:24px 0 8px}
.v2-band{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-xl);padding:44px 48px;
  background:var(--surface);transition:border-color var(--t)}
.v2-band:hover{border-color:var(--blue-line)}
.v2-band-copy{display:flex;flex-direction:column;align-items:flex-start}
.v2-band-copy .v2-eyebrow{margin-bottom:10px}
.v2-band-title{display:block;color:#fff;font-weight:800;font-size:clamp(28px,3.2vw,40px);line-height:1.05;letter-spacing:-.03em}
.v2-band-sub{display:block;color:var(--ink-2);font-size:16px;margin:12px 0 24px;max-width:44ch}
.v2-band-vials{display:flex;justify-content:center;align-items:flex-end;gap:2%;height:230px}
.v2-band-vials img{height:78%;width:auto;transition:transform .35s var(--ease-store)}
.v2-band-vials img:nth-child(3){height:94%}
.v2-band-vials img:nth-child(2),.v2-band-vials img:nth-child(4){height:86%}
.v2-band:hover .v2-band-vials img:nth-child(3){transform:translateY(-6px)}
@media (max-width:900px){.v2-band{grid-template-columns:1fr;padding:32px 24px}.v2-band-vials{height:170px;order:-1}}

/* Order to door steps (Peptira's 6s loop, translated) */
.v2-steps-h{text-align:center;margin-bottom:48px}
.v2-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.v2-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.v2-step-track{position:absolute;top:26px;left:50%;width:calc(100% + 16px);height:2px;background:rgba(0,104,255,.22);z-index:0}
.v2-step-dot{position:absolute;top:-2px;left:0;width:6px;height:6px;border-radius:999px;background:var(--blue);opacity:0}
.v2-step-dot::before{content:"";position:absolute;top:2px;right:3px;width:40px;height:2px;border-radius:2px;background:linear-gradient(to left,var(--blue),transparent)}
.v2-step-circle{position:relative;z-index:1;width:54px;height:54px;border-radius:999px;display:grid;place-items:center;border:2px solid var(--blue);background:#000;color:var(--blue)}
.v2-step-text{display:flex;flex-direction:column;align-items:center;margin-top:16px}
.v2-step-n{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.v2-step-text b{color:#fff;font-size:17px;font-weight:800;letter-spacing:-.02em;margin-top:6px}
.v2-step-text small{color:var(--muted);font-size:14px;line-height:1.45;margin-top:4px;max-width:22ch}
.v2-steps.is-on .v2-step-circle[data-step="1"]{animation:v2-fill-1 6s linear infinite both}
.v2-steps.is-on .v2-step-circle[data-step="2"]{animation:v2-fill-2 6s linear infinite both}
.v2-steps.is-on .v2-step-circle[data-step="3"]{animation:v2-fill-3 6s linear infinite both}
.v2-steps.is-on .v2-step-circle[data-step="4"]{animation:v2-fill-4 6s linear infinite both}
.v2-steps.is-on .v2-step-dot[data-seg="1"]{animation:v2-dot-1 6s linear infinite both}
.v2-steps.is-on .v2-step-dot[data-seg="2"]{animation:v2-dot-2 6s linear infinite both}
.v2-steps.is-on .v2-step-dot[data-seg="3"]{animation:v2-dot-3 6s linear infinite both}
@keyframes v2-fill-1{0%,1.67%{background:#000;color:var(--blue)}4.17%,84.17%{background:var(--blue);color:#fff}84.33%,to{background:#000;color:var(--blue)}}
@keyframes v2-fill-2{0%,20.83%{background:#000;color:var(--blue)}23.33%,84.17%{background:var(--blue);color:#fff}84.33%,to{background:#000;color:var(--blue)}}
@keyframes v2-fill-3{0%,41.67%{background:#000;color:var(--blue)}44.17%,84.17%{background:var(--blue);color:#fff}84.33%,to{background:#000;color:var(--blue)}}
@keyframes v2-fill-4{0%,62.5%{background:#000;color:var(--blue)}65%,84.17%{background:var(--blue);color:#fff;box-shadow:0 0 0 6px rgba(0,104,255,.18)}84.33%,to{background:#000;color:var(--blue);box-shadow:none}}
@keyframes v2-dot-1{0%,4%{opacity:0;left:0}4.17%{opacity:1;left:0;animation-timing-function:cubic-bezier(.45,0,.55,1)}20.67%{opacity:1;left:100%}20.83%,to{opacity:0;left:100%}}
@keyframes v2-dot-2{0%,23.17%{opacity:0;left:0}23.33%{opacity:1;left:0;animation-timing-function:cubic-bezier(.45,0,.55,1)}41.5%{opacity:1;left:100%}41.67%,to{opacity:0;left:100%}}
@keyframes v2-dot-3{0%,44%{opacity:0;left:0}44.17%{opacity:1;left:0;animation-timing-function:cubic-bezier(.45,0,.55,1)}62.33%{opacity:1;left:100%}62.5%,to{opacity:0;left:100%}}
@media (max-width:768px){
  .v2-steps{grid-template-columns:1fr;gap:0;max-width:420px;margin:0 auto}
  .v2-step{flex-direction:row;align-items:flex-start;text-align:left;gap:16px;padding:12px 0}
  .v2-step-track{top:40px;left:26px;width:2px;height:100%}
  .v2-step-dot{display:none}
  .v2-step-circle{width:52px;height:52px;flex:0 0 auto}
  .v2-step-text{align-items:flex-start;margin-top:4px}
  .v2-step-text small{max-width:none}
}

/* Lab reports proof */
.v2-proof{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;border:1px solid var(--line);
  border-radius:var(--r-xl);background:var(--surface);padding:48px;overflow:hidden}
.v2-proof-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:28px}
.v2-pp img{display:block;height:58px;width:auto;border-radius:10px}
.v2-proof-docs{position:relative;height:320px}
.v2-doc{position:absolute;width:56%;aspect-ratio:8.5/11;border-radius:10px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.2);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);transition:transform .4s var(--ease-store)}
.v2-doc img{width:100%;height:100%;object-fit:cover;object-position:top}
.v2-doc0{left:4%;top:12%;transform:rotate(-6deg)}
.v2-doc1{left:24%;top:4%;transform:rotate(1deg);z-index:2}
.v2-doc2{left:44%;top:14%;transform:rotate(7deg)}
.v2-proof:hover .v2-doc1{transform:translateY(-6px) rotate(1deg)}
@media (max-width:900px){.v2-proof{grid-template-columns:1fr;padding:32px 24px;gap:28px}.v2-proof-docs{height:240px;order:-1}}

/* FAQ */
.v2-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.v2-faq{display:flex;flex-direction:column;gap:10px}
.v2-faq .faq-item,.faq-list .faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);transition:border-color var(--t)}
.faq-list .faq-item:hover{border-color:var(--line-strong)}
.faq-list .faq-item.open{border-color:var(--blue-line)}
.faq-list .faq-q{background:transparent;color:#fff;font:700 16px/1.4 var(--font);letter-spacing:-.01em;padding:20px 22px;text-align:left}
.faq-list .faq-a{background:transparent;color:var(--ink-2)}
.faq-list .faq-a > .inner{padding:0 22px;font-size:15px;line-height:1.65}
.faq-list .faq-item.open .faq-a > .inner{padding:0 22px 20px}
.faq-list .faq-a p{color:var(--ink-2)}
.v2-plus{position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:999px;border:1px solid var(--line-strong);transition:transform .2s var(--ease-store),border-color var(--t)}
.v2-plus::before,.v2-plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.8px;border-radius:2px;background:#fff;transform:translate(-50%,-50%)}
.v2-plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s var(--ease-store)}
.faq-item.open .v2-plus{border-color:var(--blue);background:var(--blue)}
.faq-item.open .v2-plus::after{transform:translate(-50%,-50%) rotate(0)}
@media (max-width:900px){.v2-faq-grid{grid-template-columns:1fr;gap:28px}}

/* Reveal on scroll */
.v2-reveal{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease-store),transform .6s var(--ease-store)}
.v2-reveal.is-in{opacity:1;transform:none}
/* Band with the generated five-vial scene (assets/img/v2/pack-band.webp, vials on the right). */
.v2-band--img{background:#000 var(--band-img) right center/auto 100% no-repeat;min-height:340px}
.v2-band--img::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 34%,rgba(0,0,0,.55) 52%,rgba(0,0,0,0) 70%);pointer-events:none}
.v2-band--img .v2-band-copy{position:relative;z-index:1}
.v2-band--img .v2-band-vials{display:none}
@media (max-width:900px){.v2-band--img{background-size:cover;background-position:70% center;padding-top:200px}
  .v2-band--img::before{background:linear-gradient(0deg,#000 46%,rgba(0,0,0,.4) 70%,rgba(0,0,0,0) 100%)}}
@media (max-width:900px){
  .v2-band--img{background-size:165% auto;background-position:96% 0;padding-top:calc(48vw + 12px)}
  .v2-band--img::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 34vw,#000 52vw)}
}

/* ==========================================================================
   Critique round 1 fixes (2026-10-29)
   ========================================================================== */
/* Contrast: --faint was used as readable text (3.4:1). Raised to ~5:1. Small blue text uses --blue-text (~6:1). */
:root{--faint:#7d8599;--blue-text:#3d8bff}
.v2-eyebrow,.v2-step-n,.v2-link:hover,.bap-hero .pagehero-kick{color:var(--blue-text)}
.v2-h .hl,.v2-hero-title .hl{color:var(--blue-text)}
/* Visible focus everywhere, including old components that set navy or none. */
.faq-q:focus-visible,.coa-thumb:focus-visible,.pcard .pthumb:focus-visible,.auth-tab:focus-visible{outline:2px solid var(--blue-text)!important;outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue-text)!important;outline-offset:1px}
.bap-pop-card:focus{outline:none}
/* Popup close button above the image */
.bap-pop-x{z-index:3}
/* Normal case on tiles (DESIGN.md: caps only for eyebrows and the hero title) */
.v2-tile-name{text-transform:none;letter-spacing:-.01em}
.v2-tile-cta{text-transform:none;letter-spacing:0;font-size:14.5px;font-weight:700}
/* Hero: less dead space above the copy */
.v2-hero{padding-top:44px}
.v2-hero-grid{align-items:center}
/* Hero video pause control */
.v2-pause{position:absolute;right:14px;bottom:62px;width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.62);color:#fff;display:grid;place-items:center;transition:background-color var(--t),border-color var(--t)}
.v2-pause:hover{background:rgba(0,0,0,.82);border-color:rgba(255,255,255,.32)}
.v2-pause .ic-play{display:none}
.v2-pause[aria-pressed=true] .ic-play{display:block}
.v2-pause[aria-pressed=true] .ic-pause{display:none}
/* Tiles are a real list now */
ul.v2-tiles{list-style:none;margin:0;padding:0}
/* Product page: the November pack price line */
.v2-pdp-pack{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 0;padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid rgba(0,104,255,.35);background:var(--blue-soft);color:#fff;font-size:14.5px;transition:border-color var(--t)}
.v2-pdp-pack:hover{border-color:var(--blue-line)}
.v2-pdp-pack b{font-weight:800}
.v2-pdp-pack span:last-child{color:var(--blue-text);font-weight:700;white-space:nowrap}
.pc-coa--soon{color:var(--muted);font-size:13px}
.v2-cat-media--scene{background-color:#000;background-size:auto 112%;background-position:78% 50%;background-repeat:no-repeat;transition:background-position .4s var(--ease-store)}
.v2-cat:hover .v2-cat-media--scene{background-position:78% 46%}
.v2-cat-media--docs{background:#07080b}
.v2-cat-doc{position:absolute;width:44%;top:14%;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.2);background:#fff;transition:transform .35s var(--ease-store)}
.v2-cat-doc0{left:16%;transform:rotate(-6deg)}
.v2-cat-doc1{left:40%;top:10%;transform:rotate(5deg)}
.v2-cat:hover .v2-cat-doc1{transform:rotate(5deg) translateY(-6px)}

/* ==========================================================================
   Round 2 (2026-10-29): Hamza's review. Rules: DESIGN.md "Rules added 2026-10-29".
   ========================================================================== */
/* Category cards: all media 4:3 so the five-vial crop (assets/img/v2/pack-cat.webp, 4:3) fits exactly. */
.v2-cat-media{aspect-ratio:4/3}
.v2-cat-media--scene{background:#000}
.v2-cat-scene{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.v2-cat-doc{width:46%;top:12%;border-radius:8px}
.v2-cat-doc0{left:12%}
.v2-cat-doc1{left:42%;top:8%}
/* November Build-a-Pack band: neutral hairline card, no blue border or glow. */
.v2-band:hover{border-color:var(--line-strong)}
.v2-band--img{background-color:var(--surface)}
.v2-band--img::before{background:linear-gradient(90deg,var(--surface) 34%,rgba(11,12,15,.55) 52%,rgba(11,12,15,0) 70%)}
@media (max-width:900px){.v2-band--img::before{background:linear-gradient(180deg,rgba(11,12,15,0) 0,rgba(11,12,15,0) 34vw,var(--surface) 52vw)}}
/* Lab reports band: the PeptidePrices badge on its own (no frame, no caption). */
.v2-pp{display:block;width:min(100%,360px);margin-top:28px}
.v2-pp img{display:block;width:100%;height:auto;border-radius:10px}
.v2-proof-cta{margin-top:28px}
.v2-doc{width:52%}
.v2-doc img{object-position:top center}

/* Hero (round 2, owner screenshots 45 and 46): no visible pause button, one clean sound control, icon buttons. */
.v2-pause{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap;opacity:0}
.v2-pause:focus-visible{width:44px;height:44px;clip:auto;clip-path:none;overflow:visible;opacity:1;right:16px;bottom:72px;border:1px solid rgba(255,255,255,.18);outline:2px solid var(--blue-text);outline-offset:2px}
.v2-sound{right:16px;bottom:16px;width:44px;height:44px;padding:0;gap:0;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.62)}
.v2-sound svg{width:18px;height:18px;display:block}
.v2-sound .ic-on{display:none}
.v2-sound[aria-pressed=true] .ic-on{display:block}
.v2-hero-cta .btn{gap:10px}
.v2-hero-cta .btn svg:last-child:not(:first-child){transition:transform var(--t)}
.v2-hero-cta .btn:hover svg:last-child:not(:first-child){transform:translateX(2px)}
@media (prefers-reduced-motion:reduce){.v2-hero-cta .btn svg{transition:none}}
/* Hero copy: one-line sentence and one-line button labels at every width. */
.v2-hero-sub{max-width:none}
.v2-hero-cta .btn{white-space:nowrap}
@media (max-width:900px){.v2-hero-cta .btn{flex:0 1 auto}}
@media (max-width:560px){
  .v2-hero-cta{flex-direction:column;align-items:stretch;gap:12px}
  .v2-hero-cta .btn{flex:0 0 auto;width:100%;justify-content:center}
  .v2-hero-sub{font-size:16px}
}

/* ==========================================================================
   Round 3 (2026-10-29): best sellers carousel + categories 2x2 on phones.
   ========================================================================== */
.v2-carousel{position:relative;--gap:16px;--per:4}
.v2-carousel .v2-tiles{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;margin:0;padding:0 0 8px}
.v2-carousel .v2-tiles::-webkit-scrollbar{display:none}
.v2-carousel .v2-tile{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));scroll-snap-align:start}
.v2-car-btn{position:absolute;top:var(--car-mid,160px);z-index:3;width:48px;height:48px;margin-top:-24px;border-radius:999px;
  display:grid;place-items:center;padding:0;cursor:pointer;background:var(--surface-2);border:1px solid var(--line-strong);color:#fff;
  transition:background var(--t),border-color var(--t),color var(--t),opacity var(--t)}
.v2-car-prev{left:-64px}.v2-car-next{right:-64px}
.v2-car-btn:hover:not(:disabled){background:#fff;border-color:#fff;color:#000}
.v2-car-btn:focus-visible{outline:2px solid var(--blue-text);outline-offset:3px}
.v2-car-btn:disabled{opacity:.3;cursor:default}
.v2-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:28px}
.v2-dots:empty{display:none}
.v2-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.22);cursor:pointer;transition:width var(--t),background var(--t);position:relative}
.v2-dot::after{content:"";position:absolute;inset:-8px -4px}
.v2-dot:hover{background:rgba(255,255,255,.5)}
.v2-dot[aria-current="true"]{width:24px;background:#fff}
.v2-dot:focus-visible{outline:2px solid var(--blue-text);outline-offset:3px}
@media (max-width:1360px){.v2-car-prev{left:-18px}.v2-car-next{right:-18px}}
@media (max-width:1024px){.v2-carousel{--per:3}}
@media (max-width:768px){
  .v2-car-btn{width:40px;height:40px;margin-top:-20px}
  .v2-car-prev{left:4px}.v2-car-next{right:4px}
}
@media (max-width:560px){
  .v2-carousel{--per:2;--gap:12px}
  .v2-tile-name{font-size:14.5px}.v2-tile-body{padding:12px 2px 0}
}
@media (prefers-reduced-motion:reduce){.v2-carousel .v2-tiles{scroll-behavior:auto}.v2-dot{transition:none}}
/* Safe guard: nothing may widen the page sideways (clip, not hidden, so sticky keeps working). */
html,body{overflow-x:clip}
/* Research categories: 2x2 on phones, square image area, compact body. */
@media (max-width:560px){
  .v2-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .v2-cat-media{aspect-ratio:1/1}
  .v2-cat-body{padding:12px 12px 14px;gap:8px;align-items:flex-start}
  .v2-cat-body b{font-size:15px}
  .v2-cat-body small{font-size:12.5px;line-height:1.35}
  .v2-cat-go{width:28px;height:28px}
  .v2-cat-go svg{width:13px;height:13px}
}
/* Hero headline: exactly two lines, each on one line at every width. */
.v2-hero-title{white-space:nowrap}
@media (max-width:560px){.v2-hero-title{font-size:8.2vw}}

/* ==========================================================================
   Round 4 (2026-10-29)
   ========================================================================== */
/* November band: split card. Copy left, full five-vial image right, flush to the card edges. The image's own left edge
   and (on phones) bottom edge fade into the card colour so no seam shows. Card colour = --studio, the render background. */
.v2-band--img{background:var(--studio);padding:0;gap:0;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:stretch}
.v2-band--img::before{display:none}
.v2-band--img .v2-band-copy{position:relative;z-index:1;justify-content:center;padding:44px 0 44px 48px}
.v2-band-art{display:block;width:100%;height:100%;min-height:340px;object-fit:cover;object-position:100% 50%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%);mask-image:linear-gradient(to right,transparent 0,#000 12%)}
@media (max-width:900px){
  .v2-band--img{grid-template-columns:minmax(0,1fr);padding:0}
  .v2-band-art{order:-1;height:auto;min-height:0;aspect-ratio:16/10;
    -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
  .v2-band--img .v2-band-copy{padding:8px 24px 32px}
}
@media (max-width:560px){.v2-band-art{aspect-ratio:5/4}}
/* Lab reports band on phones and tablets: documents fit inside their own box, so they can never overlap the heading. */
@media (max-width:900px){
  .v2-proof-docs{height:284px}
  .v2-doc{width:176px}
  .v2-doc0{left:calc(50% - 148px);top:24px}
  .v2-doc1{left:calc(50% - 88px);top:8px}
  .v2-doc2{left:calc(50% - 28px);top:24px}
}
/* Mobile menu spacing (owner, round 4): tighter rows than the base 18px padding. */
@media (max-width:1199.98px){
  .main-nav > ul > li > a{padding-top:13px;padding-bottom:13px}
  .main-nav a::before{bottom:4px}
  .main-nav .has-sub > a::after{line-height:1}
}
/* Discord strip (sale and permanent join variant): v2 font, quiet hover. */
.dsale-title,.dsale-timer-val{font-family:var(--font)}
.dsale-join{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;margin-left:12px;padding:6px 14px;border:1px solid var(--line-strong);border-radius:999px;font-weight:700;font-size:13px;color:var(--text);transition:background-color 150ms cubic-bezier(.4,0,.2,1),color 150ms cubic-bezier(.4,0,.2,1),border-color 150ms cubic-bezier(.4,0,.2,1)}
.dsale:hover .dsale-join,.dsale:focus-visible .dsale-join{background:#fff;color:#05070b;border-color:#fff}
@media (max-width:768px){.dsale-join{margin-left:0}}
@media (prefers-reduced-motion:reduce){.dsale-join{transition:none}}

/* rw-a11y skin for Evo (owner, round 4: "still showing the old outdated accessibility pop up").
   CSS only, the shared mu-plugin widget is untouched. Same approach as rankwyre.com's skin, re-tokened to this
   DESIGN.md: --surface panel, hairlines, neutral icon chips with WHITE icons, blue only on the ON switch and focus.
   The "html body" prefix outranks the widget's injected <style>. */
html body .rw-a11y-ui{font-family:var(--font)}
html body .rw-a11y-fab,html body .rw-a11y-fab.rw-a11y-ondark{width:48px;height:48px;border-radius:14px;border:1px solid var(--line-strong);background:var(--surface-2);color:#fff;box-shadow:none;transition:border-color 150ms cubic-bezier(.4,0,.2,1)}
html body .rw-a11y-fab:hover,html body .rw-a11y-fab.rw-a11y-ondark:hover{background:var(--surface-2);border-color:rgba(255,255,255,.32)}
html body .rw-a11y-fab svg{width:22px;height:22px}
html body .rw-a11y-panel{width:min(392px,calc(100vw - 24px));border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);color:var(--text);box-shadow:0 24px 64px -20px rgba(0,0,0,.85)}
html body .rw-a11y-panel::backdrop{background:rgba(0,0,0,.6)}
html body .rw-a11y-head{padding:16px 16px 14px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
html body .rw-a11y-head h2{display:flex;align-items:center;gap:12px;font:800 17px/1.2 var(--font);letter-spacing:-.02em;color:var(--text)}
html body .rw-a11y-x{width:36px;height:36px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--ink-2)}
html body .rw-a11y-x:hover{color:#fff;border-color:rgba(255,255,255,.32);background:transparent}
html body .rw-a11y-scroll{padding:8px;background:var(--surface);max-height:calc(min(640px,100vh - 32px) - 140px)}
html body .rw-a11y-step,html body .rw-a11y-row label{display:flex;align-items:center;gap:12px;padding:11px 10px;border:1px solid transparent;border-radius:12px}
html body .rw-a11y-step{border-bottom:0;margin-bottom:2px;background:var(--surface-2)}
html body .rw-a11y-row{border-bottom:0;margin-top:2px}
html body .rw-a11y-row label:hover{background:rgba(255,255,255,.03)}
html body .rw-a11y-row:has(input:checked) label{background:rgba(255,255,255,.04);border-color:var(--line-strong)}
html body .rw-a11y-head h2::before,html body .rw-a11y-step .lbl::before,html body .rw-a11y-row label::before{content:"";flex:none;width:32px;height:32px;border-radius:10px;
  background:var(--rwi) center/18px 18px no-repeat,var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
html body .rw-a11y-step .lbl{display:flex;align-items:center;gap:12px;font:600 14px/1.3 var(--font);color:var(--text)}
html body .rw-a11y-row .txt{flex:1}
html body .rw-a11y-row .t{font:600 14px/1.3 var(--font);color:var(--text)}
html body .rw-a11y-row .d{font:400 12.5px/1.4 var(--font);color:var(--muted);margin-top:2px}
html body .rw-a11y-step button{width:34px;height:34px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:#fff;font:600 17px/1 var(--font);box-shadow:none}
html body .rw-a11y-step button:hover:not(:disabled){border-color:rgba(255,255,255,.32);background:transparent}
html body .rw-a11y-step button:disabled{opacity:.4}
html body .rw-a11y-step output{min-width:48px;font:700 13px/1 var(--font);color:var(--text);font-variant-numeric:tabular-nums}
html body .rw-a11y-box{order:3;position:relative;width:40px;height:24px;margin:0;border-radius:99px;border:0;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong);transition:background-color 150ms cubic-bezier(.4,0,.2,1)}
html body .rw-a11y-box svg{display:none}
html body .rw-a11y-box::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform 150ms cubic-bezier(.4,0,.2,1),background-color 150ms cubic-bezier(.4,0,.2,1)}
html body .rw-a11y-row input:checked ~ .rw-a11y-box{background:var(--blue);box-shadow:none}
html body .rw-a11y-row input:checked ~ .rw-a11y-box::after{transform:translateX(16px);background:#fff}
html body .rw-a11y-foot{padding:12px 16px 14px;border-top:1px solid var(--line);background:var(--surface)}
html body .rw-a11y-foot button{height:40px;padding:0 18px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:#fff;font:700 14px/1 var(--font);box-shadow:none;transition:background-color 150ms cubic-bezier(.4,0,.2,1),color 150ms cubic-bezier(.4,0,.2,1)}
html body .rw-a11y-foot button:hover{background:#fff;color:#05070b;border-color:#fff}
html body .rw-a11y-fab:focus-visible,html body .rw-a11y-x:focus-visible,html body .rw-a11y-step button:focus-visible,html body .rw-a11y-foot button:focus-visible,
html body .rw-a11y-row input:focus-visible ~ .rw-a11y-box{outline:2px solid var(--blue);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html body .rw-a11y-fab,html body .rw-a11y-box,html body .rw-a11y-box::after,html body .rw-a11y-foot button{transition:none}}
html body .rw-a11y-head h2{--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.2' r='1.9' fill='white' stroke='none'/%3E%3Cpath d='M4.6 8.2c2.4.9 4.9 1.4 7.4 1.4s5-.5 7.4-1.4M12 9.6v4.6M12 14.2 9.2 21M12 14.2 14.8 21'/%3E%3C/svg%3E")}
html body .rw-a11y-step{--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V4h16v3M9 20h6M12 4v16'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="motion"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 15V9M14 15V9'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="contrast"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='white'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="underline"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4v6a6 6 0 0 0 12 0V4M4 20h16'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="readable"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 12 4l8 16M7.5 13h9'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="spacing"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12H3M7 8l-4 4 4 4M17 8l4 4-4 4'/%3E%3C/svg%3E")}
html body .rw-a11y-row:has([data-key="focus"]){--rwi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8V5a2 2 0 0 1 2-2h3M16 3h3a2 2 0 0 1 2 2v3M21 16v3a2 2 0 0 1-2 2h-3M8 21H5a2 2 0 0 1-2-2v-3'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}

/* Best seller tiles use the shop card buttons (owner, 2026-11-01). Same look as .pcard.pc in evo-v2-shop.css. */
.v2-tile-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.v2-tile-btns > :only-child{grid-column:1 / -1}
.v2-tile-btns .pc-view,.v2-tile-btns .pc-coa{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border-radius:999px;font:700 14px/1 var(--font);white-space:nowrap;text-decoration:none;transition:background-color var(--t),border-color var(--t),color var(--t)}
.v2-tile-btns .pc-view{background:#fff;color:#05070b;border:1px solid #fff}
.v2-tile-btns .pc-view:hover{background:#e6eaf2;border-color:#e6eaf2}
.v2-tile-btns .pc-coa{background:transparent;color:var(--text);border:1px solid var(--line-strong)}
.v2-tile-btns .pc-coa:hover{border-color:rgba(255,255,255,.32)}
@media (max-width:600px){.v2-tile-btns{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.v2-tile-btns .pc-view,.v2-tile-btns .pc-coa{transition:none}}
.v2-tile-from{font-size:13px;font-weight:500;color:var(--muted)}

/* Hero bundle card (2026-11-02, replaced the BOGO video). 4:5 studio shot, sale copy in the dark top third. */
.v2-hero-media.v2-hero-offer{aspect-ratio:4/5;display:block;background:var(--studio);text-decoration:none;color:var(--text);border:1px solid var(--line);transition:border-color var(--t)}
a.v2-hero-offer:hover{border-color:var(--line-strong)}
.v2-hero-offer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.v2-hero-offer-copy{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:30px 24px 0}
.v2-hero-offer-eyebrow{font:700 12px/1.2 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--blue-text)}
.v2-hero-offer-title{font:800 clamp(26px,2.4vw,32px)/1.05 var(--font);letter-spacing:-.03em;color:#fff}
.v2-hero-offer-sub{font-size:13.5px;line-height:1.4;color:var(--ink-2);max-width:30ch}
.v2-hero-offer-go{display:inline-flex;align-items:center;gap:8px;margin-top:10px;min-height:40px;padding:0 18px;border-radius:999px;background:#fff;color:#05070b;font:700 14px/1 var(--font);transition:background-color var(--t)}
a.v2-hero-offer:hover .v2-hero-offer-go{background:#e6eaf2}
a.v2-hero-offer:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media (max-width:560px){.v2-hero-offer-copy{padding-top:22px}.v2-hero-offer-title{font-size:26px}}