/* ============================================================================
   BioverLabs Research — editorial design system
   Paper ground · Oswald heads + Inter body + Space Grotesk labels · stamp blue
   ========================================================================== */
:root{
  --paper:#FBFBF9; --paper-2:#F3F2ED; --paper-3:#ECEAE3;
  --ink:#141719; --ink-soft:#3C4247; --meta:#5B6167;
  --hair:#DAD8D0; --hair-2:#C9C6BC;
  --stamp:#1078E8; --stamp-deep:#0B5BC0; --stamp-soft:#EAF3FD; --navy:#061A2B; --heading:#0B2A4A; --cyan:#18B6D9; --soft-blue:#F4FAFC; --hair-blue:#CFE0F3; --verified:#0F7A52; --verified-soft:#E4F2EB; --alert:#9A2B1E; --alert-soft:#F7E6E2;
  --head:"Oswald","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Space Grotesk","Inter",ui-monospace,monospace;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,h5,h6{font-family:var(--head);font-weight:600;letter-spacing:normal}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
::selection{background:var(--stamp);color:#fff}
h1,h2,h3,.row .nm,.coa-table .cmp,.cart-drawer__title,.cart-summary__title,.card__name{color:var(--heading)}
.d,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 20px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:16px;top:16px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:200;font-family:var(--mono);font-size:12px}
.muted{color:var(--meta)}
.rule{border:0;border-top:1px solid var(--hair)}
.rule--ink{border-top:2px solid var(--ink)}
[hidden]{display:none!important}

/* ---- labels / eyebrows -------------------------------------------------- */
.lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--meta)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--stamp)}

/* ---- RUO ribbon ---------------------------------------------------------- */
.ruo{background:var(--navy);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:7px 12px}
@media(max-width:640px){.ruo{font-size:9.5px;letter-spacing:.05em}}

/* ---- ticker -------------------------------------------------------------- */
.ticker{border-bottom:1px solid var(--hair);overflow:hidden;background:var(--paper-2)}
.ticker__track{display:flex;white-space:nowrap;width:max-content;animation:tick 34s linear infinite;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--ink-soft);text-transform:uppercase}
.ticker__item{padding:9px 26px;border-right:1px solid var(--hair)}
@keyframes tick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ---- header -------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,251,249,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px;gap:32px}
.bar__lead{display:flex;align-items:center;gap:8px;min-width:0}
.brand{display:inline-flex;align-items:center;white-space:nowrap}
.brand__logo{height:26px;width:auto;display:block}
.brand__logo--foot{height:24px}
@media(max-width:640px){.brand__logo{height:22px}}
.brand span{color:var(--stamp)}
.brand em{font-style:normal;color:var(--stamp)}
nav.main{display:flex;gap:28px;align-items:baseline;font-family:var(--body);font-weight:500;font-size:14px}
nav.main a{color:var(--ink-soft);padding-bottom:2px;border-bottom:1.5px solid transparent}
nav.main a:hover,nav.main a.on{color:var(--ink);border-color:var(--stamp)}
.hact{display:flex;gap:18px;align-items:center;font-family:var(--mono);font-size:12.5px}
.hact a{white-space:nowrap}
.hact .cart{color:var(--stamp)}
.hact .acct.is-authed::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--verified);margin-right:7px;vertical-align:middle}
.pay{display:inline-flex;align-items:center;gap:5px}
.pay img{display:block;width:38px;height:24px;border-radius:4px;border:1px solid var(--hair);
  background:#fff;object-fit:contain}
@media(max-width:560px){.hact{gap:11px}.pay{gap:3px}.pay img{width:27px;height:17px;border-radius:3px}}
/* The wordmark gets a hamburger to its left at every width; the bars fold into
   an X when the panel is open. */
.menu-btn{display:block;position:relative;width:38px;height:38px;flex:none;margin-left:-9px;
  border:0;background:none;padding:0;cursor:pointer;border-radius:12px;transition:background .2s}
.menu-btn:hover{background:var(--stamp-soft)}
.menu-btn:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}
.menu-btn i{position:absolute;left:50%;top:50%;width:19px;height:2px;margin:-1px 0 0 -9.5px;border-radius:2px;
  background:var(--heading);transition:background .18s}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:var(--heading);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.menu-btn i::before{top:-6px}
.menu-btn i::after{top:6px}
.menu-btn[aria-expanded="true"] i{background:transparent}
.menu-btn[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:820px){nav.main{display:none}.hact .acct{display:none}
  .bar{gap:10px}.bar__lead{margin-right:auto}}
.navpanel{display:none;border-bottom:1px solid var(--hair-blue);background:#fff;
  box-shadow:0 24px 44px -34px rgba(11,42,74,.7)}
.navpanel.is-open{display:block;animation:navpanel-in .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes navpanel-in{from{opacity:0;transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.navpanel.is-open{animation:none}}
.navpanel__list a{display:block;padding:14px 0;border-bottom:1px solid var(--hair-blue);
  font-family:var(--body);font-weight:500;font-size:15px}
.navpanel__list a:last-child{border-bottom:0}

/* The bar keeps its links on desktop, so the panel earns its place with what
   the bar cannot hold: the catalog split by research area, and the promises. */
.megamenu{display:none}
@media(min-width:821px){
  .navpanel__list{display:none}
  .megamenu{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:34px;padding:30px 0 34px}
}
.megamenu h4{font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stamp);margin-bottom:14px}
.megamenu__col a{display:block;padding:7px 0;font-family:var(--body);font-size:15px;color:var(--heading);
  transition:color .18s,transform .18s}
.megamenu__col a:hover{color:var(--stamp);transform:translateX(3px)}
.megamenu__areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 20px}
.megamenu__areas a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.megamenu__areas a:hover{transform:none;border-bottom-color:var(--hair-blue)}
.megamenu__areas i{font-family:var(--mono);font-style:normal;font-size:11.5px;color:var(--meta)}
.megamenu__areas a:hover i{color:var(--stamp)}
.megamenu__all{display:inline-block;margin-top:16px;font-family:var(--body);font-weight:600;font-size:13.5px;
  color:var(--stamp);border-bottom:1px solid rgba(16,120,232,.4);transition:border-color .18s}
.megamenu__all:hover{border-bottom-color:var(--stamp)}
.megamenu__card{border:1px solid var(--hair-blue);border-radius:18px;padding:18px 20px 20px;
  background:linear-gradient(180deg,#FFFFFF,var(--soft-blue))}
.megamenu__k{font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stamp)}
.megamenu__card p{font-family:var(--body);font-size:13.5px;color:var(--ink-soft);margin-top:9px;line-height:1.5}
.megamenu__card ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:7px;
  font-family:var(--body);font-size:12.5px;color:var(--ink-soft)}
.megamenu__card li{display:flex;align-items:flex-start;gap:8px}
.megamenu__card li::before{content:"✓";flex:none;display:grid;place-items:center;width:16px;height:16px;
  border-radius:50%;background:var(--verified-soft);color:var(--verified);font-size:9px;font-weight:700}
.megamenu__cta{display:inline-flex;align-items:center;justify-content:center;margin-top:15px;
  border-radius:999px;background:var(--stamp);color:#fff;padding:10px 18px;
  font-family:var(--body);font-weight:600;font-size:13px;
  box-shadow:0 12px 24px -14px rgba(16,120,232,.9);transition:background .2s}
.megamenu__cta:hover{background:var(--stamp-deep)}
/* Between 821 and 1100 four columns leave the area labels three lines tall, so
   the areas run in one column and the card takes a row of its own. */
@media(min-width:821px) and (max-width:1100px){
  .megamenu{grid-template-columns:1.2fr 1fr 1fr;gap:22px 28px;padding:26px 0 30px}
  .megamenu__areas{grid-template-columns:minmax(0,1fr)}
  .megamenu__card{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;padding:16px 20px}
  .megamenu__card p{flex:1;min-width:220px;margin-top:0}
  .megamenu__card ul{flex-direction:row;flex-wrap:wrap;gap:6px 18px;margin-top:0}
  .megamenu__cta{margin-top:0}
}

/* ---- buttons ------------------------------------------------------------- */
.btn,.btn--primary,.btn--ghost{font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:.01em;padding:13px 22px;border:1.5px solid var(--ink);cursor:pointer;background:none;color:var(--ink);transition:background .15s,color .15s,border-color .15s;display:inline-block;text-align:center;line-height:1.2;white-space:nowrap}
.btn:hover,.btn--ghost:hover{background:var(--heading);border-color:var(--heading);color:#fff}
.btn.p,.btn--primary{background:var(--stamp);border-color:var(--stamp);color:var(--paper)}
.btn.p:hover,.btn--primary:hover{background:var(--stamp-deep);border-color:var(--stamp-deep)}
.btn.sm,.btn--sm{padding:9px 14px;font-size:12px}
.btn.block{display:block;width:100%}
.btn:disabled{opacity:.55;cursor:default}
.btn.is-added{background:var(--verified);border-color:var(--verified);color:#fff}
.link{color:var(--stamp);border-bottom:1px solid var(--stamp)}
.link:hover{color:var(--ink);border-color:var(--ink)}
.cta-row{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}

/* ---- hero ---------------------------------------------------------------- */
.hero{padding:64px 0 56px;display:grid;grid-template-columns:184px 1fr;gap:44px}
@media(max-width:820px){.hero{grid-template-columns:minmax(0,1fr);gap:22px;padding:44px 0 36px}}
.hero-meta{border-top:2px solid var(--stamp);padding-top:12px}
.hero-meta dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--meta);margin-top:14px}
.hero-meta dt:first-child{margin-top:0}
.hero-meta dd{font-family:var(--mono);font-size:13px;margin-top:2px}
@media(max-width:820px){.hero-meta{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.hero-meta dt{margin-top:12px}.hero-meta dt:first-child{margin-top:12px}}
.hero h1{font-family:var(--head);font-size:clamp(38px,6vw,66px);line-height:1.02;font-weight:600;letter-spacing:normal;max-width:15ch}
.hero .lede{font-size:20px;color:var(--ink-soft);max-width:56ch;margin-top:22px;line-height:1.5}
.avg{margin-top:32px;display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.avg .big{font-family:var(--mono);font-size:clamp(52px,8vw,90px);line-height:.82;font-weight:500;color:var(--stamp);letter-spacing:-.03em}
.avg .cap{font-family:var(--mono);font-size:12px;color:var(--meta);max-width:26ch;line-height:1.4;padding-bottom:6px}


/* ---- hero shot (image + real text overlay, anchored under the baked logo) -- */
.hero-shot{position:relative;max-width:1671px;margin:0 auto;background:var(--soft-blue);overflow:hidden}
@media(min-width:1500px){.hero-shot{margin-top:-65px}}
.hero-shot__stage{position:relative;display:block}
.hero-shot__vials{position:absolute;right:3%;top:max(78px,12.5%);width:40%;height:auto;animation:vials-slide 2.3s cubic-bezier(.14,.72,.16,1) .35s both;will-change:transform;-webkit-mask-image:linear-gradient(to bottom,#000 66%,rgba(0,0,0,0) 80%);mask-image:linear-gradient(to bottom,#000 66%,rgba(0,0,0,0) 80%)}
@keyframes vials-slide{from{transform:translateX(112%);opacity:0}8%{opacity:1}to{transform:translateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-shot__vials{animation:none}}
.hero-shot__img{width:100%;height:auto;display:block;margin-top:-7.883%;margin-bottom:-5.631%}
.hero-shot__copy{position:absolute;left:12.3%;top:28.4%;right:6%;z-index:2}
.hero-shot__title{font-family:var(--mono);font-weight:500;font-size:clamp(13px,1.52vw,25px);line-height:2.05;letter-spacing:.17em;text-transform:uppercase;color:var(--stamp-deep)}
.hero-shot__sub{font-family:var(--body);font-size:clamp(11px,1.02vw,17px);line-height:1.5;color:var(--meta);margin-top:1.1em;margin-bottom:2.6em}
.hero-shot__cta{font-family:var(--body);font-weight:600;font-size:clamp(10.5px,1.1vw,15px);letter-spacing:.15em;text-transform:uppercase;color:#fff;background:var(--stamp);border-radius:999px;padding:clamp(13px,1.55vw,23px) clamp(20px,2.9vw,44px);display:inline-flex;align-items:center;gap:1.1em;box-shadow:0 8px 22px rgba(16,120,232,.3);transition:background .18s,box-shadow .18s,transform .18s}
.hero-shot__cta span{transition:transform .2s}
.hero-shot__cta:hover{background:var(--stamp-deep);color:#fff;box-shadow:0 10px 26px rgba(11,91,192,.36);transform:translateY(-1px)}
.hero-shot__cta:hover span{transform:translateX(4px)}
/* narrow overlays: drop the hairline so the bigger button clears the photo */
@media(min-width:521px) and (max-width:780px){
  .hero-shot__vials{width:31%;right:2%;top:max(76px,14%)}
  .hero-shot__sub{margin-top:.9em;margin-bottom:1.6em}
}
/* phones: the photo is zoomed (stage 760px wide => scale .4548) so the bench
   line lands at y360; the copy is centred in the left half and the vials
   slide in from the right onto the bench. The wordmark that used to be baked
   into hero-bench.jpg was removed from the photo. */
@media(max-width:520px){
  .hero-shot{max-width:none;overflow:hidden;height:411px}
  .hero-shot__stage{width:760px;margin-left:-70px}
  .hero-shot__img{width:100%;height:auto;margin-top:-2.253%}
  .hero-shot__copy{left:20px;top:100px;right:auto;width:56%;max-width:210px;z-index:3}
  .hero-shot__title{font-size:15px;line-height:1.7;letter-spacing:.11em}
  .hero-shot__sub{font-size:12.5px;line-height:1.5;margin-top:10px;max-width:none}
  .hero-shot__sub br{display:none}
  .hero-shot__cta{margin-top:16px;font-size:10px;letter-spacing:.12em;gap:.7em;padding:12px 18px;box-shadow:0 6px 16px rgba(16,120,232,.28)}
  /* stands on the bench line, slides in from off the right edge */
  .hero-shot__vials{display:block;width:168px;top:205px;right:6px;
    -webkit-mask-image:linear-gradient(to bottom,#000 88%,rgba(0,0,0,0) 99%);
    mask-image:linear-gradient(to bottom,#000 88%,rgba(0,0,0,0) 99%)}
}
.hero__h{font-family:var(--head);font-size:clamp(30px,4.6vw,50px);line-height:1.04;font-weight:600;letter-spacing:normal;max-width:16ch}

/* ---- section head -------------------------------------------------------- */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;padding:56px 0 8px;gap:20px;flex-wrap:wrap}
/* the hero already ends on a wide band of its own ground, so the first
   head under it does not need the full section gap */
.hero-shot + .wrap .sec-head{padding-top:10px}
@media(max-width:640px){.hero-shot + .wrap .sec-head{padding-top:10px}}
.sec-head h2{font-family:var(--head);font-weight:600;font-size:30px;letter-spacing:normal}
.sec-head .note{font-family:var(--mono);font-size:12px;color:var(--meta)}
.sec-head .note a{color:var(--stamp)}
#catalog-head{align-items:center}
.shelf-nav{display:flex;align-items:center;gap:10px}
.shelf-arrow{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(16,120,232,.42);background:#fff;color:var(--stamp);
  font-size:16px;line-height:1;cursor:pointer;display:inline-grid;place-items:center;
  transition:background .18s,color .18s,border-color .18s,transform .18s,opacity .18s}
.shelf-arrow:hover:not(:disabled){background:var(--stamp);border-color:var(--stamp);color:#fff;transform:translateY(-1px)}
.shelf-arrow:disabled{opacity:.32;cursor:default}
.btn-catalog{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--stamp);white-space:nowrap;text-align:center;
  border:1.5px solid rgba(16,120,232,.42);border-radius:999px;padding:10.5px 20.5px;margin-left:6px;
  transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s}
.btn-catalog:hover{background:var(--stamp);border-color:var(--stamp);color:#fff;transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(11,91,192,.34)}

/* ---- featured shelf ------------------------------------------------------ */
/* A horizontal shelf: the vials stand on a ledge, the card for each sits below.
   Hovering a slot takes its vial down off the ledge toward the Buy Now. The
   strip scrolls and snaps; arrows page it, the right edge fades until the end. */
.shelf-wrap{position:relative}
.shelf-wrap::after{content:"";position:absolute;top:0;bottom:0;right:0;width:72px;pointer-events:none;
  background:linear-gradient(90deg,rgba(251,251,249,0),var(--paper));transition:opacity .3s}
.shelf-wrap:has(.shelf.is-end)::after{opacity:0}
.shelf{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(200px,21vw,232px);gap:18px;
  overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scroll-padding-left:4px;
  padding:16px 4px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shelf::-webkit-scrollbar{display:none}
.shelf__item{position:relative;scroll-snap-align:start;display:flex;flex-direction:column}
/* the ledge: each slot draws its own segment, run into the gap so they join */
.shelf__stage{position:relative;display:block;height:150px;border-radius:14px 14px 0 0;
  background:radial-gradient(60% 55% at 50% 100%,rgba(16,120,232,.10),rgba(16,120,232,0) 72%)}
.shelf__stage::after{content:"";position:absolute;left:0;right:-18px;bottom:-2px;height:2px;background:var(--stamp);opacity:.55;
  box-shadow:0 10px 16px -10px rgba(11,42,74,.45)}
.shelf__item:last-child .shelf__stage::after{right:0}
.shelf__stage img{position:absolute;left:50%;bottom:6px;width:112px;height:112px;object-fit:contain;object-position:center bottom;
  mix-blend-mode:darken;transform-origin:50% 100%;
  transform:translateX(-50%) scale(var(--fit,1.3));
  transition:transform .65s cubic-bezier(.18,.9,.24,1.06)}
.shelf__info{flex:1;display:flex;flex-direction:column;margin-top:14px;padding:16px 16px 16px;border-radius:0 0 18px 18px;
  border:1px solid var(--hair-blue);border-top:0;background:linear-gradient(180deg,#FFFFFF,#F6FAFE);
  transition:border-color .3s,box-shadow .3s}
.shelf__name{font-family:var(--head);font-size:21px;font-weight:600;line-height:1.1;color:var(--heading)}
.shelf__name a{color:inherit}
.shelf__dose{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--meta);margin-top:5px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shelf__pur{display:inline-flex;align-items:baseline;gap:5px;margin-top:10px;font-family:var(--mono);font-size:14px;font-weight:500;color:var(--verified)}
.shelf__pur small{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta);font-weight:400}
.shelf__pur--na{font-size:11px;color:var(--meta);font-weight:400}
.shelf__buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px}
.shelf__price{font-family:var(--mono);font-size:17px;color:var(--heading);line-height:1}
.shelf__price small{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta);margin-top:4px}
.btn-buy{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--stamp);border:0;border-radius:999px;padding:12px 22px;cursor:pointer;white-space:nowrap;
  box-shadow:0 6px 16px rgba(16,120,232,.26);transition:background .18s,box-shadow .18s,transform .18s}
.btn-buy:hover{background:var(--stamp-deep);box-shadow:0 8px 20px rgba(11,91,192,.34);transform:translateY(-1px)}
.btn-buy.is-added{background:var(--verified);box-shadow:0 6px 16px rgba(15,122,82,.28)}
.shelf .btn-buy{padding:11px 16px;font-size:11px}
/* the take-down: only where a pointer can hover; touch just swipes the shelf */
@media(hover:hover) and (pointer:fine){
  .shelf__item:hover .shelf__stage img{transform:translateX(-50%) translateY(18px) scale(calc(var(--fit,1.3) * 1.07))}
  .shelf__item:hover .shelf__info{border-color:rgba(16,120,232,.45);box-shadow:0 22px 40px -28px rgba(16,120,232,.9)}
  .shelf__item:hover .btn-buy{transform:translateY(-2px);box-shadow:0 10px 22px rgba(11,91,192,.34)}
}
@media(max-width:640px){
  .shelf{grid-auto-columns:clamp(176px,60vw,208px);gap:14px;padding-top:20px}
  .shelf__stage{height:130px}.shelf__stage img{width:96px;height:96px}.shelf__stage::after{right:-14px}
  .shelf-arrow{display:none}
  .btn-buy{padding:10px 16px;font-size:10.5px}
  .btn-catalog{padding:8.5px 14.5px;font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){.shelf__stage img,.shelf__info,.btn-buy{transition:none}}

/* ---- datasheet closing banner -------------------------------------------- */
/* Navy band in the site's family -- blueprint grid, cold glow -- with the
   cut-out vial standing in the light. The vial is a real alpha cut-out, so it
   sits on the dark ground without the white box a photo would bring. */
.pban{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;margin:8px 0 64px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:28px;align-items:center;
  padding:44px 44px 44px 48px;
  background:linear-gradient(150deg,#1A4380 0%,#143560 48%,#0C2340 100%);
  box-shadow:0 30px 60px -34px rgba(11,42,74,.9)}
.pban::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.42;
  background-image:linear-gradient(rgba(120,180,255,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,180,255,.09) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 92% at 8% 0%,#000,transparent 76%);
          mask-image:radial-gradient(120% 92% at 8% 0%,#000,transparent 76%)}
/* the glow the vial stands in */
.pban::after{content:"";position:absolute;z-index:-1;top:50%;right:6%;width:340px;height:340px;transform:translateY(-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(24,182,217,.34),transparent 70%)}
.pban__eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.pban__title{font-family:var(--head);font-size:clamp(26px,2.9vw,36px);font-weight:600;line-height:1.1;color:#fff;margin-top:12px}
.pban__list{list-style:none;display:grid;gap:14px;margin-top:24px;max-width:52ch}
.pban__list li{display:grid;grid-template-columns:20px 1fr;gap:0 12px;align-items:start}
.pban__list li::before{content:"";grid-row:1/3;width:20px;height:20px;margin-top:2px;border-radius:50%;
  background:rgba(94,231,196,.14);border:1px solid rgba(94,231,196,.5);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235EE7C4' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat}
.pban__list b{font-family:var(--body);font-weight:600;font-size:14.5px;color:#fff}
.pban__list span{font-size:13.5px;line-height:1.5;color:rgba(220,235,250,.72);margin-top:2px}
.pban__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.pban .btn-live--ghost{color:#DCEBFA;background:transparent;border-color:rgba(150,200,255,.42)}
.pban .btn-live--ghost:hover,.pban .btn-live--ghost:focus-visible{color:#fff;border-color:var(--stamp)}
.pban__art{position:relative;justify-self:center}
.pban__art img{display:block;width:100%;max-width:360px;height:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));
  transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pban:hover .pban__art img{transform:translateY(-8px)}
@media(max-width:820px){
  .pban{grid-template-columns:minmax(0,1fr);padding:32px 26px 30px;gap:18px;text-align:left}
  .pban__art{order:-1;justify-self:stretch}
  .pban__art img{max-width:340px;margin:0 auto}
  .pban::after{right:auto;left:50%;top:18%;width:300px;height:300px;transform:translate(-50%,-50%)}
  .pban__cta .btn-live{flex:1;justify-content:center;min-width:180px}
}
@media(prefers-reduced-motion:reduce){.pban__art img{transition:none}}

/* ---- press-to-lift on touch ---------------------------------------------- */
/* Holding a card to swipe raises the vial inside its frame, the way something
   behind a window slides up: the frame is fixed and clips, only the glass
   moves. Touch only -- a pointer already has the hover gesture. */
@media(hover:none){
  .lrow,.shelf__stage{-webkit-tap-highlight-color:transparent}
  .lrow__th,.shelf__stage{overflow:hidden}
  .lrow__th img,.shelf__stage img{transition:transform .3s cubic-bezier(.2,.85,.3,1)}
  .lrow:active .lrow__th img{transform:translateY(-12px) scale(var(--s,1))}
  /* the shelf vial carries its fit scale and its own centring, so the lift is
     composed onto them rather than replacing the transform */
  .shelf__item:active .shelf__stage img{transform:translateX(-50%) translateY(-12px) scale(var(--fit,1.3))}
  .lrow:active .lrow__th,.shelf__item:active .shelf__stage{transform:none}
}
@media(hover:none) and (prefers-reduced-motion:reduce){
  .lrow__th img,.shelf__stage img{transition:none}
}

/* ---- proof band ---------------------------------------------------------- */
/* Proof band: four evidence tiles that assemble as the band scrolls in --
   the purity ring fills to the real mean, the seal draws itself, the lot
   stack lands sheet by sheet, and the figures count up from zero. */
.proof{position:relative;isolation:isolate;overflow:hidden;background:var(--soft-blue);
  border-top:1px solid var(--hair-blue);border-bottom:1px solid var(--hair-blue);margin-top:64px}
.proof::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(16,120,232,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(16,120,232,.08) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(110% 80% at 100% 0%,#000,transparent 75%);mask-image:radial-gradient(110% 80% at 100% 0%,#000,transparent 75%)}
.proof::after{content:"";position:absolute;z-index:-1;left:-10%;bottom:-40%;width:50%;height:120%;pointer-events:none;
  background:radial-gradient(50% 45% at 50% 50%,rgba(24,182,217,.16),transparent 70%)}
/* straight off the register band: no paper strip, and the pale hairline
   would only draw a light line across the navy */
.ledger + .proof{margin-top:0;border-top:0}
.proof__inner{padding-top:60px;padding-bottom:64px}
.proof__eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--stamp)}
.proof h2{font-family:var(--head);font-weight:600;font-size:clamp(28px,3.4vw,38px);letter-spacing:normal;max-width:20ch;color:var(--heading);margin-top:10px}
.proof .sub{font-size:17px;color:var(--ink-soft);margin-top:10px;max-width:56ch}
.proof__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
@media(max-width:900px){.proof__stats{grid-template-columns:1fr 1fr}}
@media(max-width:620px){
  .proof__inner{padding-top:44px;padding-bottom:46px}
  .proof__eyebrow{font-size:10px;letter-spacing:.18em}
  .proof h2{font-size:27px;line-height:1.08;max-width:15ch;margin-top:9px}
  .proof .sub{font-size:15px;line-height:1.55;margin-top:10px}
}

.ptile{position:relative;border-radius:20px;padding:22px 22px 20px;border:1px solid var(--hair-blue);
  background:linear-gradient(180deg,#FFFFFF,#F6FAFE);box-shadow:0 1px 2px rgba(11,42,74,.04),0 18px 40px -32px rgba(16,120,232,.7);
  opacity:0;transform:translateY(18px);
  transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;
  transition-delay:calc(var(--i) * 110ms),calc(var(--i) * 110ms),0s,0s}
.proof.is-in .ptile{opacity:1;transform:none}
.ptile:hover{border-color:rgba(16,120,232,.42);box-shadow:0 26px 48px -28px rgba(16,120,232,.85);transform:translateY(-4px)}
.ptile .v{font-family:var(--mono);font-size:clamp(28px,2.6vw,34px);font-weight:500;letter-spacing:-.02em;color:var(--stamp);
  margin-top:16px;font-variant-numeric:tabular-nums}
.ptile .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--meta);margin-top:8px;line-height:1.45}
.ptile__dev{height:56px;display:flex;align-items:center}

/* purity ring: the arc sweeps to the real mean once the band is in view */
@property --p{syntax:"<number>";inherits:false;initial-value:0}
.pring{--p:0;position:relative;width:52px;height:52px;border-radius:50%;
  background:conic-gradient(var(--stamp) calc(var(--p) * 1%),rgba(16,120,232,.12) 0);
  transition:--p 1.6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 110ms + 250ms)}
.pring span{position:absolute;inset:7px;border-radius:50%;background:#fff}
.pring::after{content:"";position:absolute;inset:16px;border-radius:50%;background:var(--stamp);opacity:0;transform:scale(.4);
  transition:opacity .4s 1.5s,transform .5s 1.5s cubic-bezier(.2,.8,.2,1)}
.proof.is-in .pring{--p:var(--pct,0)}
.proof.is-in .pring::after{opacity:1;transform:scale(1)}

/* lot stack: three sheets land one after another */
.pstack{position:relative;width:56px;height:44px}
.pstack i{position:absolute;left:0;right:0;height:11px;border-radius:4px;border:1px solid rgba(16,120,232,.4);
  background:linear-gradient(90deg,rgba(16,120,232,.18),rgba(24,182,217,.22));
  opacity:0;transform:translateY(-10px)}
.pstack i:nth-child(1){bottom:0;width:100%}
.pstack i:nth-child(2){bottom:14px;width:88%;left:6%}
.pstack i:nth-child(3){bottom:28px;width:76%;left:12%}
.proof.is-in .pstack i{opacity:1;transform:none;transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.proof.is-in .pstack i:nth-child(1){transition-delay:.35s}
.proof.is-in .pstack i:nth-child(2){transition-delay:.55s}
.proof.is-in .pstack i:nth-child(3){transition-delay:.75s}

/* seal: ring then tick, drawn as strokes */
.pseal{width:52px;height:52px;fill:none;stroke:var(--verified);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pseal circle{stroke-dasharray:130;stroke-dashoffset:130}
.pseal path{stroke-dasharray:34;stroke-dashoffset:34;stroke-width:3.2}
.proof.is-in .pseal circle{stroke-dashoffset:0;transition:stroke-dashoffset 1s .5s cubic-bezier(.2,.8,.2,1)}
.proof.is-in .pseal path{stroke-dashoffset:0;transition:stroke-dashoffset .5s 1.3s cubic-bezier(.2,.8,.2,1)}

/* method: two stations joined by a line that draws between them */
.pmeth{display:flex;align-items:center;gap:0}
.pmeth b{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--stamp-deep);
  border:1px solid rgba(16,120,232,.4);border-radius:999px;padding:6px 10px;background:#fff}
.pmeth i{width:28px;height:2px;background:linear-gradient(90deg,var(--stamp),var(--cyan));transform:scaleX(0);transform-origin:left}
.proof.is-in .pmeth i{transform:scaleX(1);transition:transform .6s .8s cubic-bezier(.2,.8,.2,1)}

/* On a phone four equal tiles ran 214px tall each in columns too narrow for
   their devices. The headline figure and the method each take a full-width
   row, laid out sideways; the two short counts share the row between them. */
@media(max-width:620px){
  .proof__stats{grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
  .ptile{padding:15px 15px 14px;border-radius:18px}
  .ptile__dev{height:40px}
  .ptile .v{font-size:25px;margin-top:10px;line-height:1}
  .ptile .k{font-size:9.5px;letter-spacing:.06em;margin-top:7px;line-height:1.5}

  .ptile:nth-child(1),.ptile:nth-child(4){grid-column:1/-1;display:grid;align-items:center;column-gap:16px;
    padding:16px 18px}
  .ptile:nth-child(1) .k br,.ptile:nth-child(4) .k br{display:none}
  .ptile:nth-child(1) .v,.ptile:nth-child(4) .v{margin-top:0;align-self:end}
  .ptile:nth-child(1) .k,.ptile:nth-child(4) .k{margin-top:5px;align-self:start}

  /* purity leads: the ring on the left, the figure beside it */
  .ptile:nth-child(1){grid-template-columns:auto 1fr;grid-template-areas:"dev v" "dev k"}
  .ptile:nth-child(1) .ptile__dev{grid-area:dev;height:auto}
  .ptile:nth-child(1) .v{grid-area:v;font-size:32px}
  .ptile:nth-child(1) .k{grid-area:k}
  .pring{width:58px;height:58px}
  .pring span{inset:8px}
  .pring::after{inset:18px}

  /* method closes: the figure first, its two stations on the right */
  .ptile:nth-child(4){grid-template-columns:1fr auto;grid-template-areas:"v dev" "k dev"}
  .ptile:nth-child(4) .ptile__dev{grid-area:dev;height:auto}
  .ptile:nth-child(4) .v{grid-area:v;font-size:24px}
  .ptile:nth-child(4) .k{grid-area:k}
  .pmeth{flex-direction:column;align-items:center}
  .pmeth b{font-size:9.5px;padding:5px 10px}
  .pmeth i{width:2px;height:12px;background:linear-gradient(180deg,var(--stamp),var(--cyan));
    transform:scaleY(0);transform-origin:top}
  .proof.is-in .pmeth i{transform:scaleY(1)}

  /* the pair keeps its devices small enough for a half column */
  .pstack{width:44px;height:34px}
  .pstack i{height:8px}
  .pstack i:nth-child(2){bottom:11px}
  .pstack i:nth-child(3){bottom:22px}
  .pseal{width:38px;height:38px}
}

@media(prefers-reduced-motion:reduce){
  .ptile{opacity:1;transform:none;transition:none}
  .pring{transition:none}.pring::after{transition:none}
  .pstack i,.pseal circle,.pseal path,.pmeth i{transition:none}
}

/* ---- living buttons ---------------------------------------------------- */
.btn-live{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:11px;
  font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap;
  padding:16px 30px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  background:linear-gradient(135deg,#2A8CF5 0%,var(--stamp) 45%,#0B5BC0 100%);
  box-shadow:0 12px 26px -12px rgba(16,120,232,.85),inset 0 1px 0 rgba(255,255,255,.28);
  transform:translate(var(--tx,0px),var(--ty,0px));
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .4s,color .35s,border-color .35s}
/* sheen: a light band sweeps behind the label on hover */
.btn-live::before{content:"";position:absolute;z-index:-1;top:-70%;bottom:-70%;left:0;width:42%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));
  transform:translateX(-180%) skewX(-18deg);transition:transform .9s cubic-bezier(.3,.75,.25,1)}
.btn-live:hover::before,.btn-live:focus-visible::before{transform:translateX(340%) skewX(-18deg)}
.btn-live:hover{box-shadow:0 20px 40px -14px rgba(16,120,232,.95),inset 0 1px 0 rgba(255,255,255,.34)}
.btn-live:active{transform:translate(var(--tx,0px),var(--ty,0px)) scale(.97)}
.btn-live:focus-visible{outline:2px solid var(--stamp);outline-offset:3px}
.btn-live span{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn-live:hover span{transform:translateX(5px)}
/* ghost: azure floods out from wherever the cursor entered */
.btn-live--ghost{color:var(--heading);background:rgba(255,255,255,.72);border-color:rgba(16,120,232,.4);
  box-shadow:0 8px 20px -14px rgba(11,42,74,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-live--ghost::after{content:"";position:absolute;z-index:-1;left:var(--mx,50%);top:var(--my,50%);width:0;height:0;
  border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,#2A8CF5 0%,var(--stamp) 60%,#0B5BC0 100%);
  transition:width .6s cubic-bezier(.2,.8,.2,1),height .6s cubic-bezier(.2,.8,.2,1)}
.btn-live--ghost:hover,.btn-live--ghost:focus-visible{color:#fff;border-color:var(--stamp);box-shadow:0 18px 34px -16px rgba(16,120,232,.8)}
.btn-live--ghost:hover::after,.btn-live--ghost:focus-visible::after{width:320%;height:700%}
@media(prefers-reduced-motion:reduce){
  .btn-live,.btn-live span,.btn-live::before,.btn-live--ghost::after{transition:none}
  .btn-live{transform:none}
}

/* ---- assay band (full-bleed lab photo) --------------------------------- */
.assay{position:relative;overflow:hidden;isolation:isolate;background:#0B1E31;margin-top:8px}
.assay__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:66% 50%;
  transform:scale(1.16);transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
.assay.is-in .assay__img{transform:scale(1)}
.assay__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,#F5F9FD 0%,rgba(245,249,253,.97) 24%,rgba(245,249,253,.86) 36%,rgba(245,249,253,.35) 50%,rgba(245,249,253,0) 62%),
             linear-gradient(0deg,rgba(11,30,49,.18),rgba(11,30,49,0) 40%)}
/* one slow light pass over the photo when the band enters view */
.assay__scan{position:absolute;top:0;bottom:0;left:0;width:26%;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(190,225,255,.55),rgba(255,255,255,0))}
.assay.is-in .assay__scan{animation:assay-scan 2.6s .35s cubic-bezier(.4,0,.2,1) 1 both}
@keyframes assay-scan{0%{opacity:0;transform:translateX(80%) skewX(-12deg)}18%{opacity:.9}100%{opacity:0;transform:translateX(420%) skewX(-12deg)}}

.assay__inner{position:relative;z-index:3;min-height:clamp(560px,60vw,900px);display:flex;align-items:center;padding:70px 32px}
.assay__card{max-width:29rem}
.assay__card .eyebrow{display:block;margin-bottom:14px}
.assay__title{font-family:var(--head);font-size:clamp(30px,3.6vw,46px);font-weight:600;letter-spacing:normal;line-height:1.05;color:var(--heading)}
.assay__lead{font-size:18px;color:var(--ink-soft);margin-top:16px;line-height:1.55}
.assay__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* annotation pins over the photo */
.assay__pin{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--heading);white-space:nowrap;
  background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(16,120,232,.28);border-radius:999px;padding:9px 16px 9px 12px;
  box-shadow:0 14px 30px -18px rgba(11,42,74,.8);
  opacity:0;transform:translate(0,calc(var(--pin-shift,0px) + 10px));transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.assay.is-in .assay__pin{opacity:1;transform:none}
.assay__pin i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--stamp);flex:none}
.assay__pin i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--stamp);
  animation:pin-pulse 2.4s ease-out infinite}
@keyframes pin-pulse{0%{opacity:.7;transform:scale(.6)}70%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
/* left/top come from home.js, which maps a point in the photo through the
   object-fit:cover crop, so each pin keeps pointing at what it annotates */
.assay__pin{left:var(--pin-l,60%);top:var(--pin-t,20%)}
.assay.is-in .assay__pin{transform:translate(0,var(--pin-shift,0))}
.assay__pin--a{--pin-shift:0;transition-delay:.5s}
.assay__pin--b{--pin-shift:-135%;transition-delay:.75s}
.assay__pin--b i{background:var(--verified)}
.assay__pin--b i::after{border-color:var(--verified)}
@media(max-width:900px){
  .assay{background:none}
  .assay__img{position:relative;height:clamp(240px,42vw,330px);transform:none;object-position:64% 50%}
  .assay__veil,.assay__scan,.assay__pin{display:none}
  .assay__inner{min-height:0;padding:30px 32px 8px}
  .assay__card{max-width:none}
}
@media(max-width:640px){
  .assay__inner{padding:26px 20px 6px}
  .assay__lead{font-size:16px}
  .assay__cta{gap:10px}
  .btn-live{width:100%;justify-content:center;padding:15px 22px}
}
@media(prefers-reduced-motion:reduce){
  .assay__img{transform:none;transition:none}
  .assay.is-in .assay__scan{animation:none}
  .assay__pin{opacity:1;transform:none;transition:none}
  .assay__pin i::after{animation:none}
}

/* ---- FAQ ----------------------------------------------------------------- */
.faq{padding:56px 0}
.faq h2{font-family:var(--head);font-weight:600;font-size:30px;letter-spacing:normal;margin-bottom:8px}
.faq__list{border-top:2px solid var(--ink);margin-top:24px}
details.q{border-bottom:1px solid var(--hair)}
details.q summary{list-style:none;cursor:pointer;padding:20px 4px;font-size:19px;font-weight:500;display:flex;justify-content:space-between;gap:20px;align-items:baseline}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";font-family:var(--mono);color:var(--stamp);font-size:20px;flex:none}
details.q[open] summary::after{content:"–"}
details.q .a{padding:0 4px 22px;font-size:16px;color:var(--ink-soft);max-width:72ch;line-height:1.55}
details.q .a a{color:var(--stamp);border-bottom:1px solid var(--stamp)}

/* ---- contact ------------------------------------------------------------ */
.contact--page{padding:24px 0 60px}
.contact__inner{display:grid;grid-template-columns:1fr 470px;gap:48px;align-items:start}
@media(max-width:900px){.contact--page{padding:16px 0 44px}.contact__inner{grid-template-columns:minmax(0,1fr);gap:26px}}
.contact__intro .crumb{padding-top:0;margin-bottom:22px}
.contact__intro .eyebrow{display:block;margin-bottom:12px}
.contact__title{font-family:var(--head);font-size:clamp(32px,4.4vw,50px);font-weight:600;letter-spacing:normal;line-height:1.04;color:var(--heading)}
.contact__lead{font-size:17.5px;color:var(--ink-soft);margin-top:15px;max-width:46ch;line-height:1.6}
.contact__cards{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:12px;max-width:430px}
.contact__card{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;
  border:1px solid var(--hair-blue);border-radius:16px;background:rgba(255,255,255,.72);backdrop-filter:blur(6px);
  padding:15px 18px;transition:border-color .25s,transform .25s,box-shadow .25s}
.contact__card:hover{border-color:rgba(16,120,232,.42);transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(16,120,232,.9)}
.contact__card-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--stamp)}
.contact__card-v{font-family:var(--mono);font-size:12.5px;color:var(--heading);line-height:1.5}
a.contact__card-v{color:var(--stamp)}
a.contact__card-v:hover{color:var(--stamp-deep);text-decoration:underline}
@media(max-width:560px){.contact__card{grid-template-columns:minmax(0,1fr);gap:5px}}

.contact__panel{border-radius:26px;border:1px solid var(--hair-blue);padding:30px 32px 26px;
  background:linear-gradient(180deg,#FFFFFF,#F6FAFE);box-shadow:0 28px 58px -42px rgba(16,120,232,.9)}
@media(max-width:560px){.contact__panel{padding:22px 18px 20px;border-radius:20px}}
.cform .field:first-child{margin-top:0}
.field__select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231078E8' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.field__area{resize:vertical;min-height:118px;line-height:1.6}
.cform__trap{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.cform__submit{width:100%;justify-content:center;margin-top:22px;font-size:12px}
.cform__submit:disabled{background:var(--hair-2);box-shadow:none;cursor:default;transform:none}
.cform__note{font-family:var(--mono);font-size:10.5px;line-height:1.55;color:var(--meta);margin-top:16px;text-align:center}
.cform__done{text-align:center;padding:24px 0 10px}
.cform__done-ic{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;color:#fff;
  background:linear-gradient(135deg,#25A87A,var(--verified));box-shadow:0 16px 30px -14px rgba(15,122,82,.9);margin-bottom:18px}
.cform__done h3{font-family:var(--head);font-size:26px;font-weight:600;letter-spacing:normal;color:var(--heading)}
.cform__done p{color:var(--ink-soft);margin:12px 0 22px;line-height:1.6}
.cform__done strong{color:var(--heading)}


/* ---- contact bubble + modal -------------------------------------------- */
.cfab{position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  background:radial-gradient(125% 125% at 32% 24%,#5C9DFF 0%,#2F7BE8 45%,#0B5BC0 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),0 14px 30px -10px rgba(11,42,74,.6),0 0 0 0 rgba(16,120,232,.5);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s}
.cfab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(16,120,232,.5);
  animation:cfab-ring 3.2s ease-out infinite;pointer-events:none}
@keyframes cfab-ring{0%{opacity:.7;transform:scale(1)}70%{opacity:0;transform:scale(1.45)}100%{opacity:0}}
.cfab:hover{transform:translateY(-3px) scale(1.05);box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 20px 38px -12px rgba(11,42,74,.7)}
.cfab:active{transform:translateY(-1px) scale(.98)}
.cfab:focus-visible{outline:3px solid rgba(16,120,232,.5);outline-offset:3px}
.cfab__tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;
  width:max-content;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:var(--heading);border-radius:999px;padding:8px 14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.cfab:hover .cfab__tip{opacity:1;transform:translateY(-50%) translateX(0)}
@media(max-width:640px){.cfab{right:14px;bottom:14px;width:52px;height:52px}.cfab__tip{display:none}}
.to-top{bottom:88px}
@media(max-width:640px){.to-top{bottom:76px;right:16px}}

.cmodal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;transition:opacity .25s}
.cmodal.is-open{opacity:1}
.cmodal__backdrop{position:absolute;inset:0;background:rgba(11,30,49,.55);backdrop-filter:blur(3px)}
.cmodal__dialog{position:relative;width:min(500px,100%);max-height:88vh;overflow-y:auto;border-radius:26px;padding:34px 34px 28px;
  background:radial-gradient(80% 100% at 88% 0%,rgba(16,120,232,.1),rgba(16,120,232,0) 58%),linear-gradient(180deg,#FFFFFF,#F5F9FE);
  border:1px solid var(--hair-blue);box-shadow:0 40px 80px -30px rgba(11,30,49,.7);
  transform:translateY(16px) scale(.98);transition:transform .35s cubic-bezier(.2,.8,.2,1);
  scrollbar-width:thin;scrollbar-color:rgba(16,120,232,.3) transparent}
.cmodal.is-open .cmodal__dialog{transform:none}
.cmodal__dialog::-webkit-scrollbar{width:6px}
.cmodal__dialog::-webkit-scrollbar-thumb{background:rgba(16,120,232,.3);border-radius:99px}
@media(max-width:560px){.cmodal{padding:14px}.cmodal__dialog{padding:26px 20px 22px;border-radius:20px;max-height:92vh}}
.cmodal__close{position:absolute;top:16px;right:16px;width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;
  color:var(--meta);background:rgba(16,120,232,.07);display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.cmodal__close:hover{background:var(--stamp);color:#fff}
.cmodal__dialog .eyebrow{display:block;margin-bottom:10px}
.cmodal__title{font-family:var(--head);font-size:clamp(26px,3.4vw,32px);font-weight:600;letter-spacing:normal;line-height:1.05;color:var(--heading)}
.cmodal__sub{font-size:15.5px;color:var(--ink-soft);margin-top:11px;line-height:1.55}
.cmodal .cform{margin-top:20px}

/* ---- final CTA ----------------------------------------------------------- */
/* closing CTA: the register's navy, ending on a hard edge -- the footer's
   near-black meets it as a plain step in colour, no fade between them. */
.final{position:relative;isolation:isolate;overflow:hidden;margin-top:64px;padding:66px 0 70px;
  background:
    radial-gradient(30% 46% at 18% 42%,rgba(24,182,217,.18),transparent 70%),
    linear-gradient(168deg,#1A4380 0%,#143560 52%,#0E2747 100%)}
.final::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(120,180,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,180,255,.07) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 78%)}
/* the footer's own top margin would have shown a strip of paper between the
   two dark blocks; the band is meant to run straight into it */
main:has(.final) + .site-footer{margin-top:0}
.final h2{font-family:var(--head);font-weight:600;font-size:clamp(30px,5vw,48px);letter-spacing:normal;line-height:1.03;max-width:16ch;color:#fff}
.final p{font-size:19px;color:rgba(220,235,250,.82);margin-top:16px;max-width:54ch}
.final .cta-row{margin-top:28px}
/* the ghost pill is drawn for paper: on the band it needs a light outline */
.final .btn-live--ghost{color:#DCEBFA;background:transparent;border-color:rgba(150,200,255,.4)}
.final .btn-live--ghost:hover,.final .btn-live--ghost:focus-visible{color:#fff;border-color:var(--stamp)}

/* ---- footer (black, mirroring the BioverLabsResearchProject treatment) ---- */
.site-footer{--f-ink:rgba(233,242,250,.72);--f-dim:rgba(233,242,250,.48);--f-hair:rgba(255,255,255,.13);
  background:#041320;color:var(--f-ink);margin-top:80px;padding:64px 0 40px}
.fgrid{display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr 1fr;gap:32px 26px;padding-bottom:44px;border-bottom:1px solid var(--f-hair)}
@media(max-width:1040px){.fgrid{grid-template-columns:1fr 1fr 1fr}.fgrid>:first-child{grid-column:1/-1}}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.site-footer .brand{margin-bottom:16px}
.site-footer .brand__logo--foot{height:24px}
.site-footer p{font-size:14px;color:var(--f-ink);max-width:34ch;line-height:1.55}
.site-footer .fmeta{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--f-dim);text-transform:uppercase;margin-top:16px;display:flex;gap:16px;flex-wrap:wrap}
.site-footer h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:16px;font-weight:600}
.site-footer li{list-style:none;margin-bottom:10px;font-size:14px}
.site-footer li a{color:var(--f-ink);display:inline-block;transition:color .22s,transform .22s}
.site-footer li a:hover{color:#fff;transform:translateX(3px)}
.fnotice{font-family:var(--mono);font-size:11.5px;color:var(--f-dim);margin-top:36px;max-width:70ch;line-height:1.55}
.fbot{display:flex;justify-content:space-between;margin-top:22px;padding-top:22px;border-top:1px solid var(--f-hair);font-family:var(--mono);font-size:11px;color:var(--f-dim);flex-wrap:wrap;gap:10px}
.fbot .fl{display:flex;gap:20px;flex-wrap:wrap}
.fbot .fl a{transition:color .22s}
.fbot .fl a:hover{color:var(--cyan)}
.site-footer ::selection{background:var(--cyan);color:#041320}

/* ---- generic page head --------------------------------------------------- */
.crumb{font-family:var(--mono);font-size:12px;color:var(--meta);padding-top:28px;display:flex;gap:10px;flex-wrap:wrap}
.crumb a:hover{color:var(--ink)}
.crumb [aria-current]{color:var(--ink)}
.page-head{padding:44px 0 24px}
.page-head h1{font-family:var(--head);font-size:clamp(34px,5vw,54px);font-weight:600;letter-spacing:normal;line-height:1.02}
.page-head p{font-size:19px;color:var(--ink-soft);max-width:60ch;margin-top:16px}
.page-head .meta{font-family:var(--mono);font-size:12px;color:var(--meta);margin-top:12px}
.page-head--tight{padding:36px 0 16px}
@media(max-width:640px){
  .page-head{padding:24px 0 16px}
  .page-head--tight{padding:20px 0 12px}
  .page-head h1{font-size:32px}
  .page-head p{font-size:15.5px;line-height:1.5;margin-top:10px}
  .page-head .meta{margin-top:9px}
}

/* ---- shop (premium blue) ----------------------------------------------- */

.shop{display:grid;grid-template-columns:238px 1fr;gap:34px;padding:26px 0 40px;align-items:start}
@media(max-width:900px){.shop{grid-template-columns:minmax(0,1fr);gap:18px}}

/* filters: soft panel + chips */
.filters{position:sticky;top:84px;
  border:1px solid var(--hair-blue);border-radius:20px;background:linear-gradient(180deg,#F8FBFE,#F1F6FD);padding:8px 20px 20px}
@media(max-width:900px){.filters{position:static}}
.filters__group{padding:14px 0;border-bottom:1px solid var(--hair-blue)}
.filters__group:last-of-type{border-bottom:0}
.filters__legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--stamp);margin-bottom:9px}
/* Options read as a list -- a ring or a box before each label -- on the panel's
   blue ground. The input stays real and covers its row for the hit area. */
#catFilters{display:flex;flex-direction:column;gap:2px}
.filters .opt{position:relative;display:flex;align-items:center;gap:12px;padding:8px 2px;cursor:pointer;
  font-family:var(--body);font-size:15px;color:var(--heading);border-radius:10px;transition:color .18s}
.filters .opt:hover{color:var(--stamp)}
.filters .opt input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.filters .opt::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:#fff;
  border:1.5px solid rgba(16,120,232,.42);box-shadow:inset 0 0 0 0 var(--stamp);
  transition:border-color .18s,box-shadow .18s,background .18s}
.filters .opt:hover::before{border-color:var(--stamp)}
.filters .opt:has(input:checked)::before{border-color:var(--stamp);box-shadow:inset 0 0 0 5.5px var(--stamp)}
.filters .opt:has(input:checked){color:var(--heading);font-weight:500}
/* the checkbox draws a square with a tick instead of a ring */
.filters .opt:has(input[type=checkbox])::before{border-radius:6px}
.filters .opt:has(input[type=checkbox]:checked)::before{background:var(--stamp);box-shadow:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat}
.filters .opt:has(input:focus-visible)::before{outline:2px solid var(--stamp);outline-offset:2px}
.filters .opt .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--meta)}
.filters .opt:has(input:checked) .cnt{color:var(--stamp)}
.filters input[type=range]{width:100%;accent-color:var(--stamp);margin:8px 0 6px}
.filters .out{font-family:var(--body);font-size:15px;color:var(--ink-soft);margin-top:4px}
.filters .out b{color:var(--stamp);font-weight:600}
/* one full-width soft pill, the panel's blue in place of the reference grey */
.filters .clear{display:block;width:100%;margin-top:6px;padding:14px 18px;border:1px solid rgba(16,120,232,.18);
  border-radius:999px;background:var(--stamp-soft);color:var(--stamp-deep);cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:14.5px;text-align:center;
  transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
.filters .clear:hover{background:var(--stamp);border-color:var(--stamp);color:#fff;transform:translateY(-1px);
  box-shadow:0 10px 22px -10px rgba(16,120,232,.7)}
.filters__toggle{display:none}
@media(max-width:900px){
  .filters{padding:0 16px}
  .filters__toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
    font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
    padding:9px 0;color:var(--heading);background:none;border:0}
  .filters__toggle::after{content:"+";float:none;display:grid;place-items:center;width:20px;height:20px;flex:none;
    border-radius:50%;background:var(--stamp-soft);color:var(--stamp);font-size:14px;line-height:1;transition:background .2s,color .2s}
  .filters__toggle[aria-expanded="true"]::after{content:"–";background:var(--stamp);color:#fff}
  .filters__body{display:none;padding-bottom:12px}
  .filters__body.is-open{display:block}
}

/* toolbar: pill search + pill sort */
.toolbar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-bottom:4px}
.search{display:flex;align-items:center;gap:2px;border:1px solid var(--hair-blue);border-radius:999px;
  background:linear-gradient(180deg,#FFFFFF,#FBFDFF);max-width:560px;flex:1;min-width:230px;padding-left:6px;
  box-shadow:0 1px 2px rgba(11,42,74,.04),0 10px 26px -20px rgba(16,120,232,.75);
  transition:box-shadow .22s,border-color .22s}
.search:focus-within{border-color:var(--stamp);box-shadow:0 0 0 4px rgba(16,120,232,.14),0 14px 30px -20px rgba(16,120,232,.9)}
.search::before{content:"";width:34px;height:34px;flex:none;margin-right:6px;border-radius:50%;background-color:var(--stamp-soft);
  background-size:16px;transition:background-color .22s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat}
.search input{flex:1;border:0;background:none;padding:13px 4px 13px 0;font-family:var(--body);font-size:14.5px;color:var(--ink);min-width:0}
.search input:focus{outline:none}
.search:focus-within::before{background-color:rgba(16,120,232,.18)}
.search input::placeholder{color:var(--meta);text-overflow:ellipsis}
.search .lbl{font-family:var(--body);font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,#2A8CF5,var(--stamp) 60%,#0B5BC0);border-radius:999px;padding:10px 18px;margin:5px;white-space:nowrap;
  box-shadow:0 6px 14px -6px rgba(16,120,232,.85)}
.sortwrap{font-family:var(--mono);font-size:11.5px;color:var(--meta);display:flex;align-items:center;gap:8px;max-width:100%;min-width:0}
.sortwrap select{min-width:0;max-width:100%;text-overflow:ellipsis}
.sortwrap select{font-family:var(--mono);font-size:12.5px;padding:10px 34px 10px 16px;border:1px solid var(--hair-blue);border-radius:999px;background:#fff;color:var(--heading);
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231078E8' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.sortwrap select:focus{outline:none;border-color:var(--stamp);box-shadow:0 0 0 4px rgba(16,120,232,.14)}
.resultbar{font-family:var(--mono);font-size:11px;color:var(--meta);padding:14px 4px 12px;letter-spacing:.08em;text-transform:uppercase}

/* cards: a plain lift on hover -- nothing rotates or rescales the photo */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{gap:12px}}
.card{position:relative;height:100%;min-width:0}
.card__inner{position:relative;height:100%;min-width:0;display:flex;flex-direction:column;border-radius:22px;border:1px solid var(--hair-blue);padding:16px 16px 18px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F7FAFE 100%);
  box-shadow:0 1px 2px rgba(11,42,74,.05),0 14px 34px -22px rgba(16,120,232,.35);
  transform:translateY(var(--lift,0px));
  transition:transform .65s cubic-bezier(.2,.8,.2,1),box-shadow .65s cubic-bezier(.2,.8,.2,1),border-color .35s}
.card:hover .card__inner{--lift:-6px;border-color:rgba(16,120,232,.42);
  box-shadow:0 34px 60px -26px rgba(16,120,232,.55),0 4px 10px rgba(11,42,74,.06),inset 0 0 0 1px rgba(255,255,255,.7)}
/* the studio photos ship on a near-white ground: `darken` takes min() per
   channel, so that ground collapses exactly onto the panel and no cut-out is
   needed - the glass keeps its real shoulder and nothing is eaten away */
.card__media{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(62% 56% at 50% 60%,rgba(16,120,232,.10),rgba(16,120,232,0) 74%),linear-gradient(180deg,#FCFDFF 0%,#F1F6FD 100%)}
.card__media img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;mix-blend-mode:darken;
  transform:scale(var(--fit,1.5))}
/* On a pointer device the vial rests small in its square and is pulled up to
   full size by the hover -- a springy ease so it reads as a tug, not a zoom.
   Touch keeps the full-size resting state above: no hover means no way back up. */
@media(hover:hover) and (pointer:fine){
  .card__media img{transform:scale(calc(var(--fit,1.5) * .72));
    transition:transform .7s cubic-bezier(.18,.9,.24,1.06)}
  .card:hover .card__media img{transform:translateY(-2%) scale(var(--fit,1.5))}
}
.card__tag{position:absolute;top:12px;left:12px;z-index:2;pointer-events:none;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--stamp);
  background:rgba(255,255,255,.85);backdrop-filter:blur(6px);border:1px solid rgba(16,120,232,.18);border-radius:999px;padding:5px 10px}
/* second action under Buy Now, same pill size, quieter */
.card__coa{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:10px;padding:12px 14px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--verified);
  background:var(--verified-soft);border:1px solid rgba(15,122,82,.24);
  transition:background .25s,border-color .25s,color .25s,transform .25s}
.card__coa::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verified);flex:none}
a.card__coa:hover{background:var(--verified);border-color:var(--verified);color:#fff;transform:translateY(-1px)}
a.card__coa:hover::before{background:#fff}
.card__coa-lot{overflow:hidden;text-overflow:ellipsis}
.card__coa.na{color:var(--meta);background:rgba(255,255,255,.62);border-color:var(--hair-blue)}
.card__coa.na::before{background:var(--hair-2)}
.card__link{position:absolute;inset:0;z-index:2;border-radius:22px}
.card__body{padding:16px 4px 0;min-width:0;display:flex;flex-direction:column;flex:1}
.card__name{font-family:var(--head);font-size:21px;font-weight:600;letter-spacing:normal;line-height:1.15;color:var(--heading);
  min-height:2.3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__dose{font-family:var(--mono);font-size:11px;color:var(--meta);margin-top:5px;line-height:1.3;
  min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;gap:10px}
.card__price{font-family:var(--mono);font-size:19px;color:var(--heading);letter-spacing:-.01em}
.card__price small{display:block;font-size:10px;color:var(--meta);letter-spacing:.06em;text-transform:uppercase;margin-top:1px}
.card .btn-buy{position:relative;z-index:3;font-size:11px;padding:11px 16px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.card .btn-buy span{transition:transform .25s}
.card .btn-buy:hover span{transform:translateX(3px)}
.card .btn-buy.is-added{background:var(--verified);box-shadow:0 8px 18px -8px rgba(15,122,82,.6)}
.card .btn-buy:disabled{background:var(--hair-2);color:#fff;box-shadow:none;cursor:default;transform:none}
.card__out{font-family:var(--mono);font-size:11px;color:var(--alert)}
@media(max-width:560px){
  .search input{font-size:14px}
  .search .lbl{font-size:10.5px;padding:9px 13px}
  .search::before{width:30px;height:30px;background-size:14px}
  .card__inner{padding:10px 10px 14px;border-radius:18px}
  .card__body{padding:12px 2px 0}
  .card__dose{font-size:10px}
  .card__foot{flex-direction:column;align-items:stretch;gap:10px}
  .card__price{font-size:17px}
  .card .btn-buy{justify-content:center}
  .card__tag{font-size:8.5px;padding:4px 8px;top:8px;left:8px}
  .card__coa{font-size:8.5px;padding:10px 10px;letter-spacing:.07em;gap:6px;margin-top:8px}
  .card__coa-lot{display:none}
  .card__name{font-size:16px}
  .card__link{border-radius:18px}
}
@media(prefers-reduced-motion:reduce){
  .card,.card__inner,.card__media img{transition:none}
  .card:hover .card__inner{--lift:0px;--sc:1}
}
.empty{padding:40px 12px;font-family:var(--mono);font-size:14px;color:var(--meta)}

/* ---- product datasheet (premium) --------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
[data-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

.pdp-wrap{max-width:1180px;margin:0 auto}
/* Gallery left, identity and purchase right, so the price and Add to cart are
   beside the photograph rather than under it -- both above the fold. */
.pdp-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:32px;align-items:start}
.pdp-top__side{position:sticky;top:88px}
@media(max-width:960px){.pdp-top{grid-template-columns:minmax(0,1fr);gap:22px}.pdp-top__side{position:static}}
.psec__title{font-family:var(--head);font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:normal;color:var(--heading);margin-bottom:18px}

/* header */
.phead{padding:4px 0 12px;max-width:70ch}
.phead__title{font-family:var(--head);font-size:clamp(30px,3.6vw,42px);font-weight:600;letter-spacing:normal;line-height:1.02;color:var(--heading);margin-top:10px;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.phead__dose{font-family:var(--mono);font-size:.38em;font-weight:400;letter-spacing:.04em;color:#fff;background:var(--stamp);
  border-radius:999px;padding:.42em .9em;transform:translateY(-.25em)}
.phead__cas{font-family:var(--mono);font-size:12px;color:var(--meta);margin-top:10px;letter-spacing:.02em}
.pdp-top__media .phead__lead{font-size:16px;color:var(--ink-soft);margin-top:20px;line-height:1.6;max-width:66ch}
/* The breadcrumb is gone; the product name takes its place at the top. On
   desktop that is already where the heading sits, beside the photo. On a phone
   the two columns dissolve into the grid so the heading can be ordered first,
   ahead of the gallery, without a second h1. */
.pdp-top{margin-top:28px}
@media(max-width:960px){
  .pdp-top{margin-top:18px}
  .pdp-top__media,.pdp-top__side{display:contents}
  .pdp-top .phead{order:-1;padding-top:0;padding-bottom:0}
  .pdp-top__media .phead__lead{margin-top:0}
}

/* gallery */
.pgal{margin-bottom:26px}
.pgal__stage{position:relative;aspect-ratio:1/1;border-radius:26px;overflow:hidden;border:1px solid var(--hair-blue);
  background:radial-gradient(58% 62% at 50% 58%,rgba(16,120,232,.13),rgba(16,120,232,0) 72%),linear-gradient(180deg,#FCFDFF 0%,#EEF4FD 100%);
  box-shadow:0 30px 60px -40px rgba(16,120,232,.75);cursor:grab;touch-action:pan-y}
.pgal__stage:active{cursor:grabbing}
.pgal__img{position:absolute;inset:0;margin:auto;width:100%;height:100%;object-fit:contain;mix-blend-mode:darken;
  opacity:0;transform:translate(var(--mx,0px),var(--my,0px)) scale(calc(var(--fit,1.35) * .97));
  transition:opacity .55s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.pgal__img.is-active{opacity:1;transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--fit,1.35))}
.pgal__thumbs{display:flex;gap:12px;margin-top:14px}
.pgal__thumb{width:72px;height:72px;border-radius:16px;overflow:hidden;padding:0;flex:none;cursor:pointer;
  border:1px solid var(--hair-blue);background:linear-gradient(180deg,#FCFDFF,#EEF4FD);
  transition:border-color .3s,box-shadow .3s,transform .3s}
.pgal__thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:darken;transform:scale(1.2)}
.pgal__thumb:hover{transform:translateY(-2px);border-color:rgba(16,120,232,.5)}
.pgal__thumb.is-active{border-color:var(--stamp);box-shadow:0 0 0 2px rgba(16,120,232,.28),0 10px 20px -12px rgba(16,120,232,.8)}
@media(max-width:560px){.pgal__thumb{width:68px;height:68px;border-radius:12px}.pgal__stage{border-radius:20px;aspect-ratio:4/3}}

/* price panel */
.pbuy{container-type:inline-size;border-radius:26px;border:1px solid var(--hair-blue);padding:22px 24px 20px;margin-bottom:34px;
  background:radial-gradient(80% 120% at 90% 0%,rgba(16,120,232,.10),rgba(16,120,232,0) 60%),linear-gradient(180deg,#FFFFFF,#F4F8FE);
  box-shadow:0 24px 50px -38px rgba(16,120,232,.8)}
.pbuy__head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--hair-blue)}
.pbuy__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pbuy__now{font-family:var(--body);font-variant-numeric:tabular-nums lining-nums;font-size:clamp(31px,3.3vw,40px);font-weight:600;letter-spacing:-.022em;color:var(--heading);line-height:1}
.pbuy__price s{font-family:var(--body);font-variant-numeric:tabular-nums;font-size:16px;font-weight:500;color:var(--meta)}
.pbuy__price em{font-family:var(--body);font-weight:600;font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:var(--verified);border-radius:999px;padding:5px 11px}
.pbuy__price.is-bump .pbuy__now{animation:price-bump .45s cubic-bezier(.2,.8,.2,1)}
.ptier.is-bump .ptier__pr{animation:price-bump .45s cubic-bezier(.2,.8,.2,1)}
@keyframes price-bump{0%{transform:translateY(6px) scale(.97);opacity:.45}100%{transform:none;opacity:1}}
.pbuy__unit{font-family:var(--body);font-size:13.5px;color:var(--meta);margin-top:8px}
.pbuy__stock{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:500;font-size:13px;color:var(--verified);
  background:var(--verified-soft);border:1px solid rgba(15,122,82,.22);border-radius:999px;padding:9px 15px}
.pbuy__stock i{width:8px;height:8px;border-radius:50%;background:var(--verified);position:relative}
.pbuy__stock i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--verified);animation:pin-pulse 2.4s ease-out infinite}
.pbuy__stock.is-out{color:var(--alert);background:var(--alert-soft);border-color:rgba(154,43,30,.24)}
.pbuy__stock.is-out i,.pbuy__stock.is-out i::after{background:var(--alert);border-color:var(--alert);animation:none}
.pbuy__tierhead{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--stamp);margin:14px 0 8px}
.ptiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
@media(max-width:640px){.ptiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ptier{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:10px 9px;border-radius:16px;cursor:pointer;text-align:left;
  border:1px solid var(--hair-blue);background:#fff;transition:border-color .25s,box-shadow .25s,transform .25s,background .25s}
.ptier:hover{transform:translateY(-2px);border-color:rgba(16,120,232,.5);box-shadow:0 10px 22px -14px rgba(16,120,232,.9)}
.ptier__lbl{font-family:var(--body);font-weight:500;font-size:11.5px;color:var(--meta)}
.ptier__pr{font-family:var(--body);font-variant-numeric:tabular-nums lining-nums;font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:clip;color:var(--heading)}
.ptier__off{font-family:var(--body);font-weight:500;font-size:11px;color:var(--verified)}
.ptier.is-active{background:linear-gradient(135deg,#2A8CF5,var(--stamp) 60%,#0B5BC0);border-color:var(--stamp);
  box-shadow:0 14px 28px -16px rgba(16,120,232,1)}
.ptier.is-active .ptier__lbl,.ptier.is-active .ptier__pr,.ptier.is-active .ptier__off{color:#fff}
.pbuy__actions{display:flex;gap:10px;align-items:stretch;margin-top:14px;flex-wrap:wrap}
.pqty{display:inline-flex;align-items:center;border:1px solid var(--hair-blue);border-radius:999px;background:#fff;font-family:var(--body);font-variant-numeric:tabular-nums;overflow:hidden}
.pqty button{width:44px;align-self:stretch;border:0;background:none;font-size:18px;color:var(--heading);cursor:pointer;transition:background .2s,color .2s}
.pqty button:hover{background:var(--stamp);color:#fff}
.pqty span{width:44px;text-align:center;font-size:15px;font-weight:600;color:var(--heading)}
.pbuy__add{flex:1;justify-content:center;min-width:190px;padding-left:20px;padding-right:20px;letter-spacing:.1em}
.pbuy__buy{flex:1 1 100%;justify-content:center}
.pbuy__buy:disabled{opacity:.5;cursor:default}
.pbuy__coa{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;margin-top:10px;padding:11px 18px;
  border:1.5px solid rgba(15,122,82,.32);border-radius:18px;background:var(--verified-soft);color:var(--verified);cursor:pointer;
  font-family:var(--body);transition:background .2s,border-color .2s,transform .2s}
.pbuy__coa-main{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.pbuy__coa small{font-size:11.5px;font-weight:500;opacity:.8;overflow-wrap:anywhere;text-align:center}
.pbuy__coa:hover{background:#d6ecdf;border-color:var(--verified);transform:translateY(-1px)}
.pbuy__add.is-added{background:linear-gradient(135deg,#25A87A,var(--verified));box-shadow:0 16px 30px -14px rgba(15,122,82,.9)}
.pbuy__add:disabled{background:var(--hair-2);box-shadow:none;cursor:default;transform:none}
.pbuy__total{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:13.5px;color:var(--stamp);margin-top:14px;min-height:1.2em}
.pbuy__checks{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;padding-top:16px;border-top:1px solid var(--hair-blue);
  font-family:var(--body);font-size:13px;color:var(--meta)}
.pbuy__checks li::before{content:"✓";color:var(--verified);margin-right:8px}
@media(max-width:640px){.pbuy{padding:20px 18px 18px;border-radius:20px}.pbuy__actions{flex-direction:column}.pqty{align-self:flex-start}.pbuy__add{width:100%}.pbuy__actions .btn-live{width:100%;justify-content:center}}

/* reviews wall */
.prev{margin-bottom:34px}
.prev__trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  border-top:2px solid var(--stamp);padding:22px 4px 24px}
.prev__score{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px}
.prev__num{font-family:var(--head);font-size:clamp(38px,5vw,54px);line-height:1;font-weight:600;letter-spacing:normal;color:var(--stamp)}
.prev__sub{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--meta)}
.prev__pills{display:flex;flex-wrap:wrap;gap:10px}
.prev__pill{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--hair-blue);background:rgba(255,255,255,.75);
  font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);transition:border-color .25s,transform .25s}
.prev__pill:hover{border-color:rgba(16,120,232,.45);transform:translateY(-2px)}
.prev__pill i{width:7px;height:7px;border-radius:50%;background:var(--stamp)}
.prev__pill strong{color:var(--heading);font-weight:600}

.vrev__stars{font-size:14px;letter-spacing:.12em;white-space:nowrap}
.vrev__on{color:#E2A33C}
.vrev__off{color:var(--hair-2)}

.prev__wall{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;height:560px;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 11%,#000 89%,transparent);
          mask-image:linear-gradient(transparent,#000 11%,#000 89%,transparent)}
.prev__wall[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.prev__wall[data-cols="1"]{grid-template-columns:minmax(0,1fr);height:500px}
.prev__col{overflow:hidden}
.prev__track{display:flex;flex-direction:column;gap:16px;animation:prev-roll var(--rev-dur,32s) linear infinite;will-change:transform}
/* the track carries the set twice, so -50% lands on an identical frame */
@keyframes prev-roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.prev__col:hover .prev__track,.prev__col:focus-within .prev__track{animation-play-state:paused}

.vrev{border:1px solid var(--hair-blue);border-radius:20px;padding:18px 20px 16px;
  background:linear-gradient(180deg,#FFFFFF,#F7FBFF);transition:border-color .3s,box-shadow .3s}
.vrev:hover{border-color:rgba(16,120,232,.4);box-shadow:0 22px 40px -30px rgba(16,120,232,.9)}
.vrev__text{margin:11px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
.vrev__photo{display:block;width:100%;margin-top:14px;border-radius:14px;border:1px solid var(--hair-blue)}
.vrev__by{display:flex;align-items:center;gap:11px;margin-top:15px;padding-top:13px;border-top:1px solid var(--hair-blue)}
.vrev__ava{position:relative;flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;overflow:hidden;
  background:var(--stamp-soft);color:var(--stamp-deep);font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}
/* the photo sits over the monogram, which shows through if it fails to load */
.vrev__ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.vrev__name{display:block;font-size:15px;color:var(--heading)}
.vrev__badge{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--verified)}

.prev__note{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--meta)}
.prev__ruo{margin-top:12px;padding:16px 18px;border-radius:16px;background:var(--stamp-soft);border-left:3px solid var(--stamp);
  font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--ink-soft)}
@media(max-width:640px){.vrev{padding:16px 16px 14px;border-radius:16px}.vrev__text{font-size:14.5px}}
@media(prefers-reduced-motion:reduce){
  .prev__track{animation:none}
  .prev__wall{height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
  /* without the roll the doubled set would just repeat itself */
  .vrev--dup{display:none}
}

/* ---- lot register -------------------------------------------------------- */
/* The certificates used to reuse the Featured rows, so the two sections read
   as one. This one is its own dark band: a lab register on blueprint ground. */
.ledger{position:relative;isolation:isolate;overflow:hidden;margin-top:64px;
  background:linear-gradient(168deg,#1A4380 0%,#143560 52%,#0E2747 100%)}
/* blueprint grid + a cold glow behind the purity column */
.ledger::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(120,180,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,180,255,.07) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 78%)}
.ledger::after{content:"";position:absolute;z-index:-1;top:-28%;right:-6%;width:52%;height:150%;pointer-events:none;
  background:radial-gradient(50% 42% at 50% 50%,rgba(24,182,217,.22),transparent 70%)}
.ledger__inner{padding-top:58px;padding-bottom:62px}

.ledger__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ledger__title{font-family:var(--head);font-size:clamp(28px,3.4vw,38px);font-weight:600;color:#fff}
.ledger__all{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:600;font-size:12.5px;
  color:#DCEBFA;border:1px solid rgba(150,200,255,.34);border-radius:999px;padding:10px 20px;
  transition:background .25s,border-color .25s,color .25s,transform .25s}
.ledger__all:hover{background:var(--stamp);border-color:var(--stamp);color:#fff;transform:translateY(-2px)}

/* the register grid, shared by the column labels and every row */
.ledger__cols,.lrow{display:grid;grid-template-columns:34px 52px 1.6fr 1.1fr .7fr .8fr auto;gap:18px;align-items:center}
.ledger__cols{padding:26px 14px 10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(190,215,240,.5);border-bottom:1px solid rgba(150,200,255,.18)}
.ledger__cols span:nth-child(1){grid-column:3}
.ledger__cols span:nth-child(2){grid-column:4}
.ledger__cols span:nth-child(3){grid-column:5}
.ledger__cols span:nth-child(4){grid-column:6}

.lrow{position:relative;padding:17px 14px;color:#EAF2FB;border-bottom:1px solid rgba(150,200,255,.13);
  opacity:0;transform:translateY(12px);
  transition:opacity .55s,transform .55s cubic-bezier(.2,.8,.2,1),background .3s;
  transition-delay:calc(var(--i) * 80ms)}
.ledger.is-in .lrow{opacity:1;transform:none}
.lrow:last-child{border-bottom:0}
/* an accent bar wipes in from the left instead of a flat hover fill */
.lrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--cyan);
  transform:scaleY(0);transform-origin:bottom;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lrow:hover{background:rgba(120,180,255,.07)}
.lrow:hover::before{transform:scaleY(1);transform-origin:top}
.lrow:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}

.lrow__n{font-family:var(--mono);font-size:11px;color:rgba(24,182,217,.75);letter-spacing:.06em}
.lrow__th{width:52px;height:52px;border-radius:12px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(180deg,#FFFFFF,#EAF2FB);border:1px solid rgba(150,200,255,.28);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lrow__th img{width:100%;height:100%;object-fit:cover}
.lrow:hover .lrow__th{transform:translateY(-2px) scale(1.06)}
.lrow__nm{font-family:var(--head);font-size:19px;font-weight:600;color:#fff;line-height:1.2;min-width:0}
.lrow__dose{font:inherit;color:inherit}
.lrow__nm small,.lrow__lab small{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.05em;color:rgba(190,215,240,.62);margin-top:5px}
.lrow__lab{font-size:13.5px;color:rgba(220,235,250,.9);min-width:0}
.lrow__pur{font-family:var(--mono);font-size:19px;font-weight:500;color:#5EE7C4;letter-spacing:-.01em}
.lrow__st{display:inline-flex;justify-self:start;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:#5EE7C4;
  border:1px solid rgba(94,231,196,.32);border-radius:999px;padding:6px 12px;background:rgba(94,231,196,.09);white-space:nowrap}
.lrow__st i{width:6px;height:6px;border-radius:50%;background:#5EE7C4;box-shadow:0 0 0 0 rgba(94,231,196,.6);animation:lrow-pulse 2.6s ease-out infinite}
@keyframes lrow-pulse{0%{box-shadow:0 0 0 0 rgba(94,231,196,.55)}70%{box-shadow:0 0 0 7px rgba(94,231,196,0)}100%{box-shadow:0 0 0 0 rgba(94,231,196,0)}}
.lrow__go{font-family:var(--body);font-weight:600;font-size:12.5px;color:#9CC9F5;white-space:nowrap}
.lrow__go em{font-style:normal;display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.lrow:hover .lrow__go{color:#fff}
.lrow:hover .lrow__go em{transform:translateX(5px)}

.ledger__track{display:none}
@media(max-width:900px){
  .ledger{--gut:32px}
  .ledger__cols{display:none}
  /* the strip bleeds to the screen edges but snaps to the wrap's gutter, so the
     first card lines up with the title and the next one peeks in on the right */
  .ledger__rows{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,300px);gap:14px;
    margin:22px calc(var(--gut) * -1) 0;padding:4px var(--gut) 6px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ledger__rows::-webkit-scrollbar{display:none}

  .lrow{scroll-snap-align:start;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:row dense;gap:0 14px;align-items:start;
    padding:10px 10px 12px;border:1px solid rgba(150,200,255,.22);border-radius:22px;
    background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
    box-shadow:0 22px 40px -30px rgba(0,0,0,.8)}
  .lrow::before,.lrow__n{display:none}
  .lrow:hover{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05))}
  .lrow:hover .lrow__th{transform:none}

  /* a lit specimen stage: the whole vial, on light, standing on its shadow */
  .lrow__th{grid-column:1/-1;position:relative;display:block;width:100%;height:auto;aspect-ratio:1/.78;
    border:0;border-radius:16px;margin-bottom:14px;overflow:hidden;
    background:radial-gradient(62% 58% at 50% 40%,#FFFFFF 0%,#F3F8FD 52%,#D9E7F6 100%);
    box-shadow:inset 0 -34px 46px -34px rgba(16,60,120,.32)}
  .lrow__th::after{content:"";position:absolute;left:30%;right:30%;bottom:7%;height:12px;border-radius:50%;
    background:radial-gradient(closest-side,rgba(11,42,74,.3),rgba(11,42,74,0))}
  .lrow__th img{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;object-fit:contain;
    mix-blend-mode:darken;--s:var(--fit,1.35);transform:scale(var(--s));
    transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .lrow:hover .lrow__th img{transform:scale(calc(var(--s) * 1.05))}

  /* verified rides on the stage, where the eye already is */
  .lrow__st{position:absolute;top:20px;left:20px;z-index:2;margin:0;padding:5px 10px;font-size:9.5px;
    color:var(--verified);background:rgba(255,255,255,.92);border-color:rgba(15,122,82,.22);
    box-shadow:0 6px 14px -8px rgba(11,42,74,.5)}
  .lrow__st i{background:var(--verified)}

  .lrow__nm{grid-column:1/-1;padding:0 6px;font-size:22px;line-height:1.1}
  .lrow__dose{display:inline-block;position:relative;top:-3px;margin-left:4px;padding:3px 8px;border-radius:999px;
    font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
    color:#CFE6FF;background:rgba(120,180,255,.14);border:1px solid rgba(150,200,255,.26)}
  .lrow__nm small{margin-top:7px;font-size:11px;letter-spacing:.04em}

  /* two labelled readouts side by side, instead of four loose lines */
  .lrow__pur,.lrow__lab{margin:14px 6px 0;padding-top:12px;border-top:1px solid rgba(150,200,255,.16)}
  .lrow__pur::before,.lrow__lab::before{display:block;margin-bottom:6px;
    font-family:var(--body);font-weight:600;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(190,215,240,.58)}
  .lrow__pur{grid-column:1;font-size:24px;line-height:1}
  .lrow__pur::before{content:"Pureza HPLC";letter-spacing:.14em}
  .lrow__lab{grid-column:2;font-size:13px;line-height:1.3;color:#EAF2FB}
  .lrow__lab::before{content:"Laboratório"}
  .lrow__lab small{margin-top:4px;font-size:10.5px}

  .lrow__go{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-top:16px;
    padding:12px 16px;border-radius:999px;border:1px solid rgba(150,200,255,.26);background:rgba(255,255,255,.07);
    font-size:13px;color:#fff;transition:background .25s,border-color .25s}
  .lrow:hover .lrow__go{background:var(--stamp);border-color:var(--stamp)}

  .ledger__track{display:block;position:relative;height:3px;margin-top:18px;border-radius:99px;
    background:rgba(150,200,255,.16);overflow:hidden}
  .ledger__track span{position:absolute;top:0;bottom:0;left:0;width:var(--w,30%);border-radius:99px;
    background:linear-gradient(90deg,var(--cyan),#5EE7C4);transform:translateX(var(--x,0%));
    transition:width .2s}
  .ledger__track.is-idle{display:none}
}
@media(max-width:640px){.ledger{--gut:20px}}
@media(max-width:560px){
  .ledger__inner{padding-top:44px;padding-bottom:40px}
  .ledger__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap}
  .ledger__title{font-size:26px;line-height:1.05}
  .ledger__all{flex:none;padding:9px 15px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .lrow{opacity:1;transform:none;transition:background .3s}
  .lrow__st i{animation:none}
}

/* ---- policies hub -------------------------------------------------------- */
.pol{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:34px}
@media(max-width:820px){.pol{grid-template-columns:minmax(0,1fr)}}
.pol__card{position:relative;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--hair-blue);border-radius:24px;padding:28px 30px 26px;color:inherit;
  background:linear-gradient(180deg,#FFFFFF,#F6FAFE);
  box-shadow:0 1px 2px rgba(11,42,74,.05),0 18px 40px -30px rgba(16,120,232,.6);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s}
.pol__card:hover{transform:translateY(-5px);border-color:rgba(16,120,232,.42);
  box-shadow:0 30px 56px -30px rgba(16,120,232,.75)}
/* a blue rule wipes across the top edge on hover */
.pol__card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--stamp);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.pol__card:hover::before{transform:scaleX(1)}
.pol__card:focus-visible{outline:2px solid var(--stamp);outline-offset:3px}
.pol__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--stamp)}
.pol__t{font-family:var(--head);font-size:clamp(23px,2.5vw,29px);font-weight:600;color:var(--heading);margin-top:11px}
.pol__d{font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin-top:12px}
.pol__m{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--meta);margin-top:18px}
.pol__go{font-family:var(--body);font-weight:600;font-size:13px;color:var(--stamp);margin-top:16px}
.pol__go em{font-style:normal;display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.pol__card:hover .pol__go em{transform:translateX(5px)}

.pol__ruo{margin:26px 0 60px;padding:30px 32px;border-radius:24px;
  background:var(--stamp-soft);border-left:3px solid var(--stamp)}
.pol__ruo h2{font-family:var(--head);font-size:21px;font-weight:600;color:var(--heading)}
.pol__ruo p{font-size:15px;line-height:1.65;color:var(--ink-soft);margin-top:11px;max-width:78ch}
.pol__links{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
@media(max-width:560px){
  .pol__card{padding:24px 22px 22px;border-radius:20px}
  .pol__ruo{padding:24px 22px;border-radius:20px}
  .pol__links .btn-live{width:100%;justify-content:center}
}

/* ---- COA library cover sheet --------------------------------------------- */
/* The archive gets the same document ground as the legal pages -- graph paper,
   a bound spine -- but its own device: the purity range drawn as a real meter. */
.coalib{position:relative;isolation:isolate;overflow:hidden;margin-top:20px;
  border-radius:26px;border:1px solid var(--hair-blue);padding:34px 40px 36px 46px;
  background:
    linear-gradient(180deg,var(--stamp),var(--cyan)) left / 5px 100% no-repeat,
    radial-gradient(64% 86% at 90% 6%,rgba(16,120,232,.15),rgba(16,120,232,0) 62%),
    radial-gradient(42% 70% at 4% 100%,rgba(24,182,217,.12),rgba(24,182,217,0) 62%),
    linear-gradient(135deg,#F8FBFE 0%,#EEF5FD 55%,#E4EEFB 100%)}
.coalib::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(16,120,232,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(16,120,232,.09) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(118deg,transparent 30%,#000 100%);
          mask-image:linear-gradient(118deg,transparent 30%,#000 100%)}
/* concentric rings, like a seal pressed off the corner */
.coalib::after{content:"";position:absolute;z-index:-1;top:-70px;right:-70px;width:270px;height:270px;
  border-radius:50%;pointer-events:none;opacity:.42;
  background:repeating-radial-gradient(circle,rgba(16,120,232,.5) 0 1.5px,transparent 1.5px 13px)}
@media(max-width:640px){.coalib{border-radius:20px;padding:20px 18px 22px 22px}
  .coalib::after{width:150px;height:150px;top:-46px;right:-46px}}

.coalib .crumb{padding-top:0;margin-bottom:20px}
.coalib__eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--stamp)}
.coalib__title{font-family:var(--head);font-size:clamp(34px,5vw,54px);font-weight:600;line-height:1.02;color:var(--heading);margin-top:11px}
.coalib__lead{font-size:17.5px;color:var(--ink-soft);max-width:64ch;margin-top:14px;line-height:1.6}

.coalib__stats{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:14px;margin-top:28px}
@media(max-width:820px){.coalib__stats{grid-template-columns:minmax(0,1fr)}}
.cstat{display:flex;flex-direction:column;border-radius:18px;padding:18px 20px 16px;
  border:1px solid var(--hair-blue);background:rgba(255,255,255,.82);backdrop-filter:blur(6px);
  transition:border-color .3s,transform .3s,box-shadow .3s}
.cstat:hover{border-color:rgba(16,120,232,.42);transform:translateY(-3px);
  box-shadow:0 20px 38px -26px rgba(16,120,232,.9)}
.cstat__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.cstat__v{font-family:var(--head);font-weight:600;font-size:clamp(30px,3.4vw,40px);line-height:1;color:var(--stamp);margin-top:9px}
.cstat__s{font-family:var(--mono);font-size:11px;color:var(--meta);margin-top:auto;padding-top:10px}

/* the observed spread, drawn between 98% and 100% */
.cstat__meter{position:relative;height:6px;border-radius:99px;margin-top:14px;
  background:linear-gradient(90deg,rgba(16,120,232,.10),rgba(24,182,217,.16))}
.cstat__meter span{position:absolute;top:0;bottom:0;border-radius:99px;
  left:calc(var(--from,0) * 1%);right:calc(100% - var(--to,100) * 1%);
  background:linear-gradient(90deg,var(--stamp),var(--cyan));
  box-shadow:0 0 0 1px rgba(255,255,255,.6);
  transform:scaleX(0);transform-origin:left;animation:cstat-fill 1.1s .25s cubic-bezier(.2,.8,.2,1) both}
@keyframes cstat-fill{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.cstat__meter span{animation:none;transform:none}}

.coalib__search{margin-top:26px;max-width:none;background:rgba(255,255,255,.92);
  box-shadow:0 12px 30px -22px rgba(16,120,232,.9)}

/* Stacked as three cards the stats alone ran 400px on a phone, pushing the
   certificates a screen and a half down. Below 640 they fold into one panel
   where each stat is a row: label left, value right, detail underneath. */
@media(max-width:640px){
  .coalib .crumb{margin-bottom:14px}
  .coalib__title{font-size:32px;margin-top:8px}
  .coalib__lead{font-size:15px;line-height:1.5;margin-top:10px}
  .coalib__search{margin-top:14px}
  .coalib__stats{margin-top:16px;display:block;gap:0;border:1px solid var(--hair-blue);border-radius:16px;overflow:hidden;
    background:rgba(255,255,255,.86)}
  .cstat{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:10px;
    border:0;border-bottom:1px solid var(--hair-blue);border-radius:0;background:none;backdrop-filter:none;
    padding:11px 14px}
  .cstat:last-child{border-bottom:0}
  .cstat:hover{transform:none;box-shadow:none;border-color:var(--hair-blue)}
  .cstat__k{flex:1;min-width:0;font-size:9px;letter-spacing:.13em}
  .cstat__v{font-size:23px;margin-top:0;margin-left:auto}
  .cstat__s{flex-basis:100%;margin-top:0;padding-top:2px;font-size:10.5px}
  .cstat__meter{flex-basis:100%;order:3;height:5px;margin-top:7px}
  .cstat--wide .cstat__s{order:4}
}

/* related */
.prel{padding-bottom:40px}
.prel__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.prel__grid{grid-template-columns:repeat(2,1fr)}}
.prel__card{display:flex;flex-direction:column;border-radius:20px;border:1px solid var(--hair-blue);padding:12px 12px 14px;min-width:0;
  background:linear-gradient(180deg,#FFFFFF,#F7FAFE);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.prel__card:hover{transform:translateY(-6px);border-color:rgba(16,120,232,.42);box-shadow:0 24px 44px -26px rgba(16,120,232,.85)}
.prel__media{display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  background:radial-gradient(60% 56% at 50% 60%,rgba(16,120,232,.10),rgba(16,120,232,0) 74%),linear-gradient(180deg,#FCFDFF,#F1F6FD)}
.prel__media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:darken;transform:scale(var(--fit,1.4));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.prel__name{font-size:17px;font-weight:500;color:var(--heading);margin-top:12px;line-height:1.2}
.prel__meta{font-family:var(--mono);font-size:10.5px;color:var(--meta);margin-top:4px}
.prel__foot{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:10px}
.prel__foot b{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--heading)}
.prel__foot em{font-family:var(--mono);font-style:normal;font-size:10px;color:var(--verified)}
.prel__foot em.na{color:var(--meta)}

.product-missing{padding:80px 0;text-align:center}
.product-missing h1{font-family:var(--head);font-size:40px;font-weight:600;letter-spacing:normal;color:var(--heading)}
.product-missing p{margin:12px 0 24px}

/* ---- COA library --------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--body);font-weight:600;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--verified);background:var(--verified-soft);
  border:1px solid rgba(15,122,82,.2);border-radius:999px;padding:4px 10px;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;background:var(--verified);border-radius:50%;flex:none}
.badge--pass{color:var(--verified)}
.dl{color:var(--stamp);cursor:pointer;border-bottom:1px solid transparent;white-space:nowrap;background:none;border-top:0;border-left:0;border-right:0;padding:0;font:inherit}
.dl:hover{border-bottom-color:var(--stamp)}

/* ---- COA library: one card per published lot ------------------------------ */
/* A certificate is evidence about a product, so the card leads with the vial
   and a purity stamp, states the compound, then lays the document out as
   labelled fields with the chromatogram as its own thumbnail. */
.coagrid{display:grid;gap:16px;margin-top:20px}
.coacard{display:grid;grid-template-columns:186px minmax(0,1fr) 232px;gap:24px;align-items:center;
  border:1px solid var(--hair-blue);border-radius:22px;padding:18px;
  background:linear-gradient(180deg,#FFFFFF,#FBFDFF);
  box-shadow:0 1px 2px rgba(11,42,74,.04),0 26px 52px -44px rgba(11,42,74,.6);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.coacard:hover{transform:translateY(-3px);border-color:rgba(16,120,232,.4);
  box-shadow:0 1px 2px rgba(11,42,74,.04),0 34px 60px -40px rgba(16,120,232,.75)}

/* the vial, on the library's own blue graph paper */
.coacard__stage{position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;
  background:
    linear-gradient(rgba(16,120,232,.09) 1px,transparent 1px) 0 0/100% 22px,
    linear-gradient(90deg,rgba(16,120,232,.09) 1px,transparent 1px) 0 0/22px 100%,
    radial-gradient(64% 58% at 50% 58%,rgba(16,120,232,.12),rgba(16,120,232,0) 72%),
    linear-gradient(180deg,#FCFDFF,#EDF4FD)}
.coacard__shot{position:absolute;inset:0;display:block}
.coacard__shot img{width:100%;height:100%;object-fit:contain;mix-blend-mode:darken;
  transform:scale(var(--fit,1.4));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.coacard:hover .coacard__shot img{transform:scale(calc(var(--fit,1.4) * 1.06))}
/* a stamp, the way a lab marks a passing sheet */
.coacard__seal{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;gap:1px;
  width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.94);
  border:1.5px solid rgba(15,122,82,.34);box-shadow:0 10px 22px -14px rgba(15,122,82,.8);
  transform:rotate(-7deg)}
.coacard__seal b{font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--verified);
  font-variant-numeric:tabular-nums lining-nums}
.coacard__seal i{font-family:var(--body);font-style:normal;font-weight:600;font-size:8px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--verified);opacity:.78}

.coacard__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.coacard__name{font-family:var(--head);font-size:23px;font-weight:600;letter-spacing:normal;line-height:1.1}
.coacard__name a{color:inherit;text-decoration:none;transition:color .18s}
.coacard__name a:hover{color:var(--stamp)}
.coacard__dose{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--stamp-deep);background:var(--stamp-soft);border-radius:999px;padding:4px 10px}
.coacard__syn{font-family:var(--body);font-size:13.5px;color:var(--meta);margin-top:6px}
/* the seal cannot carry the number on a 104px stage -- a chip does it there */
.coacard__pur{display:none;font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--verified);background:var(--verified-soft);
  border:1px solid rgba(15,122,82,.2);border-radius:999px;padding:4px 10px;white-space:nowrap;
  font-variant-numeric:tabular-nums lining-nums}

.coacard__specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:14px;
  border:1px solid var(--hair-blue);border-radius:14px;overflow:hidden;background:var(--hair-blue)}
.coacard__specs>div{background:#fff;padding:9px 13px;min-width:0}
.coacard__specs dt{font-family:var(--body);font-weight:600;font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--stamp)}
.coacard__specs dd{font-family:var(--body);font-size:14px;color:var(--heading);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coacard__specs dd.is-lot{font-family:var(--mono);font-weight:600;letter-spacing:.04em}

.coacard__acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.coabtn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--hair-blue);border-radius:999px;
  background:#fff;color:var(--heading);cursor:pointer;padding:10px 18px;
  font-family:var(--body);font-weight:600;font-size:13.5px;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s}
.coabtn:hover{border-color:var(--stamp);color:var(--stamp)}
.coabtn--p{background:var(--stamp);border-color:var(--stamp);color:#fff;
  box-shadow:0 12px 24px -14px rgba(16,120,232,.9)}
.coabtn--p:hover{background:var(--stamp-deep);border-color:var(--stamp-deep);color:#fff;transform:translateY(-1px)}

/* the trace itself, not a link that says there is one */
.coacard__chroma{display:block;width:100%;border:1px solid var(--hair-blue);border-radius:16px;overflow:hidden;
  background:#fff;padding:0;cursor:pointer;text-align:left;
  transition:border-color .25s,box-shadow .25s,transform .25s}
.coacard__chroma:hover{border-color:var(--stamp);transform:translateY(-2px);
  box-shadow:0 18px 34px -22px rgba(16,120,232,.85)}
.coacard__chroma img{display:block;width:100%;height:118px;object-fit:cover;object-position:center 42%;
  background:var(--soft-blue)}
.coacard__chroma-l{display:flex;flex-direction:column;gap:2px;padding:9px 13px;border-top:1px solid var(--hair-blue);
  font-family:var(--body);font-weight:600;font-size:12.5px;color:var(--heading)}
.coacard__chroma-l i{font-family:var(--mono);font-style:normal;font-weight:400;font-size:10.5px;
  letter-spacing:.06em;color:var(--meta)}

@media(max-width:820px){
  .coacard{grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start}
  .coacard__chroma{grid-column:1/-1}
  .coacard__chroma img{height:140px}
}
/* On a phone the body's parts become grid items of their own, so the specs and
   the actions run the full width instead of squeezing beside the vial. */
@media(max-width:560px){
  .coacard{grid-template-columns:104px minmax(0,1fr);gap:12px 14px;padding:14px;border-radius:18px;align-items:start}
  .coacard__body{display:contents}
  .coacard__top{grid-column:2;grid-row:1}
  .coacard__specs,.coacard__acts,.coacard__chroma{grid-column:1/-1;margin-top:0}
  .coacard__stage{border-radius:14px;grid-row:1}
  .coacard__seal{display:none}
  .coacard__pur{display:inline-flex}
  .coacard__name{font-size:19px}
  .coacard__specs dd{font-size:13.5px;white-space:normal;overflow:visible}
  .coacard__acts .coabtn{flex:1}
  .coacard__chroma img{height:120px}
}

.coa-note{font-family:var(--mono);font-size:11.5px;color:var(--meta);margin-top:24px;max-width:70ch;line-height:1.5}

/* COA lightbox (coa-viewer.js) */
.coa-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .2s}
.coa-modal.is-open{opacity:1}
.coa-modal__backdrop{position:absolute;inset:0;background:rgba(20,23,25,.6)}
.coa-modal__panel{position:relative;background:var(--paper);border:1.5px solid var(--ink);width:min(1000px,100%);height:min(88vh,900px);display:flex;flex-direction:column}
.coa-modal--img .coa-modal__panel{height:auto;max-height:88vh}
.coa-modal__head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:12px}
.coa-modal__tools{display:flex;gap:16px;align-items:center}
.coa-modal__newtab{color:var(--stamp);border-bottom:1px solid var(--stamp)}
.coa-modal__close{border:0;background:none;cursor:pointer;display:inline-flex}
.coa-modal__body{flex:1;min-height:0;overflow:auto;background:var(--paper-2)}
.coa-modal__frame{width:100%;height:100%;border:0}
.coa-modal__img{max-width:100%;max-height:80vh;margin:0 auto;object-fit:contain}
body.is-locked,body.cart-drawer-lock{overflow:hidden}

/* ---- cart drawer (cart-store.js) ----------------------------------------- */
.cart-drawer{position:fixed;inset:0;z-index:110;pointer-events:none}
.cart-drawer__backdrop{position:absolute;inset:0;background:rgba(20,23,25,.5);opacity:0;transition:opacity .25s}
.cart-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:#fff;border-left:1px solid var(--hair-blue);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.cart-drawer.is-open{pointer-events:auto}
.cart-drawer.is-open .cart-drawer__backdrop{opacity:1}
.cart-drawer.is-open .cart-drawer__panel{transform:none}
.cart-drawer__head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;
  border-bottom:1px solid var(--hair-blue);background:linear-gradient(180deg,#F8FBFE,#F1F6FD)}
.cart-drawer__title{font-family:var(--head);font-size:22px;font-weight:600;letter-spacing:normal}
.cart-drawer__close{border:0;background:none;cursor:pointer;display:inline-flex}
.cart-drawer__scroll{flex:1;overflow:auto;padding:6px 22px}
.cart-drawer__foot{padding:18px 22px 22px;border-top:1px solid var(--hair-blue);background:linear-gradient(180deg,#FFFFFF,var(--soft-blue))}
.cart-drawer__ship{font-family:var(--body);font-size:13px;color:var(--ink-soft);margin-bottom:14px}
.cd-ship__msg--ok{color:var(--verified)}
.cd-ship__bar{height:6px;border-radius:999px;background:#E1EBF7;margin-top:9px;overflow:hidden}
.cd-ship__bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--stamp));
  transition:width .55s cubic-bezier(.2,.7,.2,1)}
.cart-drawer__totrow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px;
  font-family:var(--body);font-size:14px;font-weight:600;color:var(--heading);font-variant-numeric:tabular-nums lining-nums}
.cart-drawer__checkout{display:block;text-align:center;font-family:var(--body);font-weight:600;font-size:14.5px;padding:14px;
  border-radius:999px;background:var(--stamp);color:#fff;border:1px solid var(--stamp);
  box-shadow:0 12px 24px -14px rgba(16,120,232,.9);transition:background .2s,border-color .2s}
.cart-drawer__checkout:hover{background:var(--stamp-deep);border-color:var(--stamp-deep)}
.cart-drawer__viewcart{display:block;text-align:center;font-family:var(--body);font-size:13px;color:var(--stamp);margin-top:12px}
.cart-drawer__empty{padding:60px 0;text-align:center;font-family:var(--body);font-size:14px;color:var(--meta)}
.cart-drawer__empty-ic{display:none}
.cart-drawer__shop{display:inline-block;margin-top:16px;color:var(--stamp);border-bottom:1px solid var(--stamp)}
.cd-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--hair-blue);align-items:start}
.cd-item__media{width:64px;height:64px;border-radius:14px;border:1px solid var(--hair-blue);overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF,var(--soft-blue))}
.cd-item__media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:darken;transform:scale(var(--fit,1.4))}
.cd-item__name{font-family:var(--head);font-size:17px;font-weight:600;letter-spacing:normal;line-height:1.15;color:var(--heading)}
.cd-item__meta{font-family:var(--body);font-size:12.5px;color:var(--meta);margin-top:4px}
.cd-item__row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:10px}
.cd-qty{display:inline-flex;align-items:center;border:1px solid var(--hair-blue);border-radius:999px;background:#fff;overflow:hidden;
  font-family:var(--body);font-size:13px;font-variant-numeric:tabular-nums lining-nums}
.cd-qty button{width:30px;height:32px;border:0;background:none;color:var(--heading);cursor:pointer;transition:background .18s,color .18s}
.cd-qty button:hover{background:var(--stamp);color:#fff}
.cd-qty span{width:32px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;color:var(--heading)}
.cd-item__line{font-family:var(--body);font-weight:700;font-size:14px;color:var(--heading);font-variant-numeric:tabular-nums lining-nums}
.cd-item__remove{border:0;background:none;cursor:pointer;color:var(--meta);padding:4px}
.cd-item__remove:hover{color:var(--alert)}

/* ---- cart page ----------------------------------------------------------- */
.cart-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start;padding-bottom:56px}
@media(max-width:1160px){.cart-grid{grid-template-columns:minmax(0,1fr) 320px;gap:24px}
  .cart-item,.cart-list__head{gap:16px;padding-left:18px;padding-right:18px}}
@media(max-width:980px){.cart-grid{grid-template-columns:minmax(0,1fr);gap:28px}}

/* The order reads as one card with real columns: the head labels them, so the
   stepper and the line total sit under a heading instead of floating free. */
.cart-list{border:1px solid var(--hair-blue);border-radius:22px;background:#fff;overflow:hidden;
  box-shadow:0 1px 2px rgba(11,42,74,.04),0 26px 50px -42px rgba(11,42,74,.55)}
.cart-list__head{display:grid;grid-template-columns:92px minmax(0,1fr) 112px 96px;gap:18px;align-items:center;
  padding:13px 22px;background:linear-gradient(180deg,#F8FBFE,#F1F6FD);border-bottom:1px solid var(--hair-blue);
  font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stamp)}
.cart-list__head span:first-child{grid-column:1/3}
.cart-list__head span:nth-child(2){text-align:center}
.cart-list__head span:last-child{text-align:right}

.cart-item{display:grid;grid-template-columns:92px minmax(0,1fr) 112px 96px;gap:18px;align-items:center;
  padding:18px 22px;border-bottom:1px solid var(--hair-blue);transition:background .2s}
.cart-item:last-child{border-bottom:0}
.cart-item:hover{background:#FCFDFF}
.cart-item__media{width:92px;height:92px;border-radius:16px;border:1px solid var(--hair-blue);overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF,var(--soft-blue));display:block}
.cart-item__media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:darken;
  transform:scale(var(--fit,1.4));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.cart-item:hover .cart-item__media img{transform:scale(calc(var(--fit,1.4) * 1.07))}
.cart-item__name{font-family:var(--head);font-size:19px;font-weight:600;letter-spacing:normal;line-height:1.15}
.cart-item__name a{color:inherit;text-decoration:none;transition:color .18s}
.cart-item__name a:hover{color:var(--stamp)}
.cart-item__meta{font-family:var(--body);font-size:13px;color:var(--meta);margin-top:4px}
.cart-item__unit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;
  font-family:var(--body);font-size:13.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums lining-nums}
.cart-item__save{font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--verified);background:var(--verified-soft);border:1px solid rgba(15,122,82,.2);border-radius:999px;padding:3px 9px;margin:0}
.cart-item__remove{display:inline-flex;align-items:center;gap:5px;border:0;background:none;cursor:pointer;padding:0;margin-top:10px;
  font-family:var(--body);font-size:12.5px;color:var(--meta);transition:color .18s}
.cart-item__remove::before{content:"×";font-size:15px;line-height:1}
.cart-item__remove:hover{color:var(--alert)}
.cart-item__qty{display:flex;justify-content:center}
.cart-item__line{text-align:right;font-family:var(--body);font-weight:700;font-size:18px;color:var(--heading);
  font-variant-numeric:tabular-nums lining-nums}

/* stepper: the product page's pill, sized for a list row */
.qty{display:inline-flex;align-items:center;border:1px solid var(--hair-blue);border-radius:999px;background:#fff;overflow:hidden}
.qty button{width:32px;height:38px;border:0;background:none;font-size:17px;line-height:1;color:var(--heading);cursor:pointer;
  transition:background .18s,color .18s}
.qty button:hover{background:var(--stamp);color:#fff}
.qty input{width:34px;height:38px;padding:0;border:0;background:none;text-align:center;
  font-family:var(--body);font-weight:600;font-size:15px;color:var(--heading);font-variant-numeric:tabular-nums lining-nums}
.qty input:focus{outline:none;background:var(--stamp-soft)}

@media(max-width:620px){
  .cart-list__head{display:none}
  .cart-item{grid-template-columns:72px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:4px 14px;padding:16px;align-items:start}
  .cart-item__media{width:72px;height:72px;border-radius:14px;grid-row:1}
  .cart-item__info{grid-column:2/4;grid-row:1}
  .cart-item__qty{grid-column:2;grid-row:2;justify-content:flex-start;margin-top:12px}
  .cart-item__line{grid-column:3;grid-row:2;align-self:center;margin-top:12px;font-size:17px}
}

.cart-upsell{margin-top:16px;padding:15px 20px;border:1px solid var(--hair-blue);border-radius:16px;
  background:linear-gradient(180deg,#F8FBFE,#F1F6FD);font-family:var(--body);font-size:13.5px;color:var(--ink-soft)}
.cart-upsell b{color:var(--stamp-deep);font-weight:700;font-variant-numeric:tabular-nums lining-nums}
.cart-upsell__bar{height:6px;border-radius:999px;background:#E1EBF7;margin-top:10px;overflow:hidden}
.cart-upsell__bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--stamp));
  transition:width .55s cubic-bezier(.2,.7,.2,1)}
.cart-upsell.is-unlocked{border-color:rgba(15,122,82,.26);background:linear-gradient(180deg,#F7FCF9,var(--verified-soft))}
.cart-upsell.is-unlocked .cart-upsell__msg{color:var(--verified);font-weight:600}
.cart-upsell.is-unlocked .cart-upsell__bar span{background:var(--verified)}

.cart-summary{border:1px solid var(--hair-blue);border-radius:22px;padding:22px;position:sticky;top:88px;background:#fff;
  box-shadow:0 1px 2px rgba(11,42,74,.04),0 26px 50px -42px rgba(11,42,74,.55)}
@media(max-width:980px){.cart-summary{position:static}}
.cart-summary__title{font-family:var(--head);font-size:20px;font-weight:600;letter-spacing:normal;
  padding-bottom:14px;border-bottom:1px solid var(--hair-blue);margin-bottom:16px}
.cart-coupon{display:flex;align-items:center;border:1px solid var(--hair-blue);border-radius:999px;background:#fff;
  padding-left:16px;margin-bottom:18px;transition:border-color .2s,box-shadow .2s}
.cart-coupon:focus-within{border-color:var(--stamp);box-shadow:0 0 0 4px rgba(16,120,232,.14)}
.cart-coupon__input{flex:1;border:0;background:none;padding:11px 8px 11px 0;font-family:var(--body);font-size:14px;color:var(--ink);min-width:0}
.cart-coupon__input:focus{outline:none}
.cart-coupon__apply{border:0;border-radius:999px;background:var(--stamp-soft);color:var(--stamp-deep);cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;padding:9px 16px;margin:4px;
  transition:background .2s,color .2s}
.cart-coupon__apply:hover{background:var(--stamp);color:#fff}
.cart-coupon.is-applied{justify-content:space-between;align-items:center;padding:10px 12px 10px 16px;
  font-family:var(--body);font-size:13px;color:var(--verified);border-color:rgba(15,122,82,.3);background:var(--verified-soft)}
.cart-coupon.is-applied button{border:0;background:none;font-family:var(--body);font-size:12.5px;color:var(--meta);cursor:pointer}
.cart-coupon.is-applied button:hover{color:var(--alert)}

.summary{border-top:0}
.summary__row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0;
  border-bottom:1px solid var(--hair-blue);font-family:var(--body);font-size:14px;color:var(--ink-soft);
  font-variant-numeric:tabular-nums lining-nums}
.summary__row:first-child{padding-top:0}
.summary__row b{font-weight:600;color:var(--heading)}
.summary__row--save b{color:var(--verified)}
.summary__row--total{margin-top:14px;padding:14px 18px;border-bottom:0;border-radius:14px;
  background:linear-gradient(135deg,var(--soft-blue),var(--stamp-soft));color:var(--heading);font-weight:600;font-size:14.5px}
.summary__row--total b{font-size:25px;font-weight:700;color:var(--heading);line-height:1}
.summary__free{color:var(--verified);font-weight:600}
.summary__calc{color:var(--meta);font-weight:500;font-size:.92em}
.cart-checkout{width:100%;margin-top:16px;border-radius:999px;padding:15px 22px;font-size:14.5px;
  box-shadow:0 12px 26px -14px rgba(16,120,232,.9)}
.cart-assurance{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px;
  font-family:var(--body);font-size:12px;color:var(--meta)}
.cart-assurance .pay img{width:32px;height:20px}
.cart-assurance__checks{list-style:none;margin-top:16px;padding-top:14px;border-top:1px solid var(--hair-blue);
  font-family:var(--body);font-size:12.5px;color:var(--ink-soft);display:flex;flex-direction:column;gap:9px}
.cart-assurance__checks li{display:flex;align-items:flex-start;gap:9px}
.cart-assurance__checks li::before{content:"✓";flex:none;display:grid;place-items:center;width:17px;height:17px;margin:0;
  border-radius:50%;background:var(--verified-soft);color:var(--verified);font-size:10px;font-weight:700}

.cart-empty{border:1px solid var(--hair-blue);border-radius:22px;background:linear-gradient(180deg,#FFFFFF,var(--soft-blue));
  padding:64px 28px 68px;text-align:center;margin-bottom:56px}
.cart-empty__icon{display:none}
.cart-empty__title{font-family:var(--head);font-size:30px;font-weight:600;letter-spacing:normal}
.cart-empty__text{color:var(--ink-soft);margin:12px auto 24px;max-width:44ch}
.cart-empty .btn{border-radius:999px;padding:14px 28px;box-shadow:0 12px 26px -14px rgba(16,120,232,.9)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12.5px;padding:12px 18px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:130}
.toast.is-show{opacity:1;transform:translate(-50%,0)}
.toast--err{background:var(--alert)}
.toast--ok{background:var(--verified)}

/* ---- order status -------------------------------------------------------- */
.order-status{border-top:2px solid var(--ink);padding:40px 0 28px}
.order-status__icon{display:inline-flex;color:var(--verified);margin-bottom:12px}
.order-status--neutral .order-status__icon{color:var(--meta)}
.order-status__title{font-family:var(--head);font-size:clamp(30px,4vw,44px);font-weight:600;letter-spacing:normal;line-height:1.05}
.order-status__text{font-size:18px;color:var(--ink-soft);margin-top:12px;max-width:60ch}
.order-status__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.order-card{border:1.5px solid var(--ink);padding:26px;margin:16px 0 40px}
.order-card__head{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--hair)}
.order-card__label{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--meta);margin-right:8px}
.order-card__ref{font-family:var(--mono);font-size:18px;font-weight:500}
.order-card__date{font-family:var(--mono);font-size:12px;color:var(--meta);margin-left:auto}
.order-track{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);margin:24px 0 8px;position:relative}
.order-track::before{content:"";position:absolute;left:10%;right:10%;top:6px;height:1px;background:var(--hair-2)}
.order-track__step{text-align:center;position:relative;font-family:var(--mono);font-size:11px;color:var(--meta)}
.order-track__dot{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;border:1.5px solid var(--hair-2);background:var(--paper);color:#fff;margin-bottom:8px}
.order-track__step.is-done .order-track__dot{background:var(--verified);border-color:var(--verified)}
.order-track__step.is-active .order-track__dot{border-color:var(--stamp);box-shadow:inset 0 0 0 2px var(--paper);background:var(--stamp)}
.order-track__step.is-done,.order-track__step.is-active{color:var(--ink)}
.order-track__label{display:block}
.order-items{border-top:2px solid var(--ink);margin-top:20px}
.order-item{display:grid;grid-template-columns:56px 1fr auto auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hair)}
@media(max-width:560px){.order-item{grid-template-columns:48px 1fr auto}.order-item__qty{display:none}}
.order-item__media{width:56px;height:56px;border:1px solid var(--hair);background:var(--paper-2);overflow:hidden;display:block}
.order-item__media img{width:100%;height:100%;object-fit:cover}
.order-item__name{display:block;font-size:18px;font-weight:500;line-height:1.15}
.order-item__meta{display:block;font-family:var(--mono);font-size:11px;color:var(--meta);margin-top:3px}
.order-item__qty{font-family:var(--mono);font-size:12px;color:var(--meta)}
.order-item__line{font-family:var(--mono);font-size:15px}
.order-totals{margin-top:6px}
.order-total-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;padding:10px 0;border-bottom:1px solid var(--hair);color:var(--ink-soft)}
.order-total-row b{font-weight:500;color:var(--ink)}
.order-total-row--save b{color:var(--verified)}
.order-total-row--total{border-bottom:2px solid var(--ink);color:var(--ink)}
.order-total-row--total b{font-size:20px}
.order-support{font-family:var(--mono);font-size:11.5px;color:var(--meta);margin-top:20px;line-height:1.5}
.order-support a{color:var(--stamp);border-bottom:1px solid var(--stamp)}

/* ---- auth (premium) ---------------------------------------------------- */
.auth{padding:32px 0 64px}
.auth__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:stretch;max-width:940px;margin:0 auto}
@media(max-width:860px){.auth__grid{grid-template-columns:minmax(0,1fr);max-width:520px}.auth__side{display:none}}
/* Create account runs the full width: the form sits hard against the left and
   the photograph takes every pixel of what is left, with no gap between them.
   The panel drops the page padding so the image can reach the viewport edge. */
.auth--split{padding:0}
.auth__grid--split{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:0;max-width:none;
  align-items:stretch;min-height:calc(100vh - 64px)}
.auth__grid--split .auth__card{border:0;border-radius:0;box-shadow:none;
  display:flex;flex-direction:column;justify-content:center;padding:56px clamp(28px,4vw,64px)}
.auth__shot{position:relative;overflow:hidden;background:var(--soft-blue)}
.auth__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:16% 50%}
/* the photograph is near-white, so the copy needs its own ground; the veil
   starts below the wordmark and deepens towards the foot */
.auth__shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,42,74,0) 26%,rgba(11,42,74,.62) 52%,rgba(11,58,110,.9) 100%)}
.auth__shot-copy{position:absolute;z-index:1;left:0;right:0;top:34%;padding:0 clamp(28px,3.4vw,56px)}
.auth__shot-lead{font-size:clamp(24px,2.4vw,32px);line-height:1.2;letter-spacing:-.01em;color:#fff;max-width:18ch}
.auth__shot-list{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:14px;
  font-family:var(--mono);font-size:12.5px;line-height:1.5;color:rgba(233,242,250,.9);max-width:34ch}
.auth__shot-list li{display:flex;gap:12px}
.auth__shot-list li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);flex:none;margin-top:5px}
/* stacked, the photograph becomes a band above the form rather than a column */
@media(max-width:1000px){
  .auth__grid--split{grid-template-columns:minmax(0,1fr);min-height:0}
  .auth__grid--split .auth__card{padding:36px clamp(20px,5vw,40px) 40px;order:2}
  .auth__shot{order:1;height:clamp(230px,44vw,320px)}
  .auth__shot-copy{top:auto;bottom:20px;padding:0 clamp(20px,5vw,40px)}
  .auth__shot-lead{font-size:20px}.auth__shot-list{display:none}
}
.auth__card{position:relative;border-radius:26px;border:1px solid var(--hair-blue);padding:38px 38px 32px;
  background:radial-gradient(80% 110% at 88% 0%,rgba(16,120,232,.09),rgba(16,120,232,0) 58%),linear-gradient(180deg,#FFFFFF,#F5F9FE);
  box-shadow:0 26px 56px -40px rgba(16,120,232,.85)}
@media(max-width:560px){.auth__card{padding:26px 20px 24px;border-radius:20px}}
.auth__mark{display:none}
.auth__card .eyebrow{display:block;margin-bottom:10px}
.auth__title{font-family:var(--head);font-size:clamp(28px,3.4vw,38px);font-weight:600;letter-spacing:normal;line-height:1.05;color:var(--heading)}
.auth__sub{color:var(--ink-soft);margin-top:9px;font-size:16px}
.auth__form{margin-top:24px}
.field{margin-top:16px}
.field__label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--stamp);margin-bottom:7px}
.field__input{width:100%;border:1px solid var(--hair-blue);border-radius:14px;background:#fff;padding:14px 16px;
  font-family:var(--mono);font-size:13.5px;color:var(--heading);transition:border-color .2s,box-shadow .2s}
.field__input::placeholder{color:var(--meta)}
.field__input:focus{outline:none;border-color:var(--stamp);box-shadow:0 0 0 4px rgba(16,120,232,.14)}
.field.is-invalid .field__input{border-color:var(--alert);box-shadow:0 0 0 4px rgba(154,43,30,.1)}
.field__pass{position:relative}
.field__pass .field__input{padding-right:48px}
.field__toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;color:var(--meta);padding:8px;display:inline-flex;border-radius:50%;transition:color .2s,background .2s}
.field__toggle:hover{color:var(--stamp);background:var(--stamp-soft)}
.field__err{display:none;font-family:var(--mono);font-size:11.5px;color:var(--alert);margin-top:7px}
.field__err.is-show{display:block}
.field__hint{font-family:var(--mono);font-size:10.5px;color:var(--meta);margin-top:7px}
.field--check{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-soft);margin-top:20px;line-height:1.5}
.field--check input{margin-top:4px;accent-color:var(--stamp);width:16px;height:16px;flex:none}
.field--check a{color:var(--stamp);border-bottom:1px solid rgba(16,120,232,.4)}
.field--check a:hover{border-color:var(--stamp)}
.auth__submit{width:100%;justify-content:center;margin-top:24px;font-size:12px}
.auth__submit:disabled{background:var(--hair-2);box-shadow:none;cursor:default;transform:none}
.auth__alt{margin-top:22px;font-family:var(--mono);font-size:12px;color:var(--meta);text-align:center}
.auth__alt a{color:var(--stamp);border-bottom:1px solid rgba(16,120,232,.4)}
.auth__alt a:hover{border-color:var(--stamp)}
.auth__success{text-align:center;padding:14px 0}
.auth__success-ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  color:#fff;background:linear-gradient(135deg,#25A87A,var(--verified));box-shadow:0 14px 28px -14px rgba(15,122,82,.9);margin-bottom:16px}
.auth__success h2{font-family:var(--head);font-size:28px;font-weight:600;letter-spacing:normal;color:var(--heading)}
.auth__success p{color:var(--ink-soft);margin:12px 0 22px}
/* assurance rail */
.auth__side{border-radius:26px;padding:32px 28px;color:#fff;display:flex;flex-direction:column;
  background:radial-gradient(70% 60% at 80% 10%,rgba(42,140,245,.55),rgba(42,140,245,0) 60%),linear-gradient(160deg,#0B2A4A 0%,#0B5BC0 60%,#1078E8 100%);
  box-shadow:0 26px 56px -34px rgba(11,42,74,.9)}
.auth__side-logo{height:22px;width:auto;margin-bottom:26px}
.auth__side-lead{font-size:22px;line-height:1.25;letter-spacing:-.01em;color:#fff}
.auth__side-list{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px;
  font-family:var(--mono);font-size:11.5px;line-height:1.5;color:rgba(233,242,250,.86)}
.auth__side-list li{display:flex;gap:10px}
.auth__side-list li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none;margin-top:5px}
.auth__side-note{margin-top:auto;padding-top:26px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(233,242,250,.5)}

/* ---- account panel (premium) ------------------------------------------- */
.panel{padding:8px 0 60px}
.panel__head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-radius:24px;border:1px solid var(--hair-blue);padding:26px 30px;
  background:radial-gradient(70% 110% at 88% 0%,rgba(16,120,232,.12),rgba(16,120,232,0) 60%),linear-gradient(180deg,#FFFFFF,#F3F8FE)}
.panel__title{font-family:var(--head);font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:normal;line-height:1.05;color:var(--heading)}
.panel__sub{font-family:var(--mono);font-size:12.5px;color:var(--stamp);margin-top:7px}
.panel__signout{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--heading);
  border:1px solid var(--hair-blue);background:#fff;border-radius:999px;padding:11px 20px;cursor:pointer;
  transition:background .22s,color .22s,border-color .22s,transform .22s}
.panel__signout:hover{background:var(--stamp);border-color:var(--stamp);color:#fff;transform:translateY(-1px)}
.panel__grid{display:grid;grid-template-columns:320px 1fr;gap:22px;margin-top:22px;align-items:start}
@media(max-width:900px){.panel__grid{grid-template-columns:minmax(0,1fr)}}
.panel__card{border-radius:22px;border:1px solid var(--hair-blue);padding:22px 24px;background:linear-gradient(180deg,#FFFFFF,#F7FAFE)}
.panel__card-title{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--stamp);font-weight:500;
  padding-bottom:12px;border-bottom:1px solid var(--hair-blue)}
.panel__details div{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--hair-blue);font-size:15px}
.panel__details div:last-child{border-bottom:0}
.panel__details dt{font-family:var(--mono);font-size:10px;color:var(--meta);text-transform:uppercase;letter-spacing:.08em;padding-top:4px}
.panel__details dd{color:var(--heading)}
.panel__empty{padding:28px 0;text-align:center}
.panel__empty p{color:var(--ink-soft);margin-bottom:18px}
.panel__order{padding:18px 0;border-bottom:1px solid var(--hair-blue)}
.panel__order:last-child{border-bottom:0}
.panel__order-top{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.panel__order-ref{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--heading)}
.panel__order-date{font-family:var(--mono);font-size:11px;margin-top:5px;color:var(--meta)}
.panel__order-items{list-style:none;margin-top:12px;font-size:15px;color:var(--ink-soft)}
.panel__order-items li{padding:5px 0}
.panel__order-items b{font-family:var(--mono);font-weight:500;color:var(--heading);margin-left:6px}
.panel__order-total{font-family:var(--mono);font-size:12px;margin-top:10px;color:var(--meta)}
.panel__order-total b{color:var(--stamp);font-weight:500;margin-left:6px;font-size:14px}

/* ---- prose / about ------------------------------------------------------- */
.prose{max-width:72ch;padding-bottom:40px}
.prose h2{position:relative;font-family:var(--head);font-size:28px;font-weight:600;letter-spacing:normal;color:var(--heading);
  margin-top:42px;padding-top:20px;border-top:2px solid var(--hair-blue)}
.prose h2::before{content:"";position:absolute;left:0;top:-2px;width:56px;height:2px;background:var(--stamp)}
.prose h3{font-size:21px;font-weight:500;margin-top:24px}
.prose p{color:var(--ink-soft);margin-top:14px;line-height:1.6}
.prose ul,.prose ol{margin:14px 0 0 22px;color:var(--ink-soft)}
.prose li{margin-bottom:6px}
.prose a{color:var(--stamp);border-bottom:1px solid rgba(16,120,232,.45);transition:border-color .2s,color .2s}
.prose a:hover{color:var(--stamp-deep);border-bottom-color:var(--stamp-deep)}
.prose strong{color:var(--ink);font-weight:600}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding-bottom:20px}
@media(max-width:820px){.about-grid{grid-template-columns:minmax(0,1fr);gap:28px}}
.about-grid .prose{padding-bottom:0}
.about-grid .prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
.about-meta{position:sticky;top:88px;border:1px solid var(--hair-blue);border-radius:20px;padding:22px 24px 24px;
  background:linear-gradient(180deg,#FFFFFF,#F5FAFE);box-shadow:0 20px 44px -34px rgba(16,120,232,.85)}
.about-meta dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stamp);
  margin-top:16px;padding-top:14px;border-top:1px solid var(--hair-blue)}
.about-meta dt:first-child{margin-top:0;padding-top:0;border-top:0}
.about-meta dd{font-family:var(--mono);font-size:13px;color:var(--heading);margin-top:4px;word-break:break-word}

/* ---- legal (premium) --------------------------------------------------- */
/* legal hero: a certified document -- graph ground, bound spine, pressed seal */
.legal-hero{position:relative;isolation:isolate;overflow:hidden;margin-top:20px;
  border-radius:26px;border:1px solid var(--hair-blue);padding:38px 44px 40px 46px;
  background:
    linear-gradient(180deg,var(--stamp),var(--cyan)) left / 5px 100% no-repeat,
    radial-gradient(70% 90% at 88% 10%,rgba(16,120,232,.16),rgba(16,120,232,0) 60%),
    radial-gradient(40% 70% at 6% 100%,rgba(24,182,217,.12),rgba(24,182,217,0) 60%),
    linear-gradient(135deg,#F8FBFE 0%,#EDF4FD 55%,#E3EDFB 100%)}
/* graph paper, fading out before it reaches the copy */
.legal-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(16,120,232,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(16,120,232,.10) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(115deg,transparent 34%,#000 100%);
          mask-image:linear-gradient(115deg,transparent 34%,#000 100%)}
/* the seal: guilloche rays under concentric rings, pressed into the top corner */
.legal-hero::after{content:"";position:absolute;z-index:-1;top:-58px;right:-58px;
  width:250px;height:250px;border-radius:50%;pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 0deg,rgba(16,120,232,.5) 0deg 3deg,transparent 3deg 6deg);
  -webkit-mask-image:radial-gradient(circle,transparent 40%,#000 41%,#000 61%,transparent 62%,
                                             transparent 70%,#000 71%,#000 73%,transparent 74%);
          mask-image:radial-gradient(circle,transparent 40%,#000 41%,#000 61%,transparent 62%,
                                             transparent 70%,#000 71%,#000 73%,transparent 74%)}
@media(max-width:640px){.legal-hero{border-radius:20px;padding:20px 18px 22px 22px}
  .legal-hero::after{width:145px;height:145px;top:-40px;right:-40px}}

.legal-hero .crumb{padding-top:0;margin-bottom:20px}
.legal-hero .eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:11px}
.legal-hero h1{font-family:var(--head);font-size:clamp(32px,4.6vw,50px);font-weight:600;letter-spacing:normal;line-height:1.02;color:var(--heading)}
.legal-hero p{font-size:17px;color:var(--ink-soft);max-width:70ch;margin-top:15px;line-height:1.6}
.legal-hero .meta{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--stamp-deep);
  background:rgba(255,255,255,.92);border:1px solid rgba(16,120,232,.28);border-radius:999px;padding:8px 16px;margin-top:22px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 20px -14px rgba(16,120,232,.9)}
.legal-hero .meta::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--stamp);flex:none;
  animation:legal-tick 2.8s ease-out infinite}
@keyframes legal-tick{0%{box-shadow:0 0 0 0 rgba(16,120,232,.5)}70%{box-shadow:0 0 0 7px rgba(16,120,232,0)}100%{box-shadow:0 0 0 0 rgba(16,120,232,0)}}
@media(prefers-reduced-motion:reduce){.legal-hero .meta::before{animation:none}}
/* the stadium shape only reads on one line; wrapped, it wants square-ish ends */
@media(max-width:640px){
  .legal-hero .crumb{margin-bottom:14px}
  .legal-hero .eyebrow{margin-bottom:8px}
  .legal-hero h1{font-size:30px}
  .legal-hero p{font-size:15px;line-height:1.5;margin-top:10px}
  .legal-hero .meta{margin-top:12px}
}
@media(max-width:560px){.legal-hero .meta{align-items:flex-start;border-radius:14px;line-height:1.5}
  .legal-hero .meta::before{margin-top:4px}}

.legal-layout{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:start;padding:30px 0 50px}
@media(max-width:900px){.legal-layout{grid-template-columns:minmax(0,1fr);gap:16px}}
.legal-toc{position:sticky;top:84px;max-height:calc(100vh - 104px);overflow-y:auto;overflow-x:hidden;
  border:1px solid var(--hair-blue);border-radius:20px;background:linear-gradient(180deg,#F8FBFE,#F1F6FD);padding:14px 16px;
  scrollbar-width:thin;scrollbar-color:rgba(16,120,232,.3) transparent}
.legal-toc::-webkit-scrollbar{width:6px}
.legal-toc::-webkit-scrollbar-track{background:transparent}
.legal-toc::-webkit-scrollbar-thumb{background:rgba(16,120,232,.3);border-radius:99px}
@media(max-width:900px){.legal-toc{position:static;max-height:none;overflow:visible}}
.legal-toc summary{list-style:none;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--stamp);
  cursor:pointer;padding:2px 0 10px;display:flex;justify-content:space-between;align-items:center}
.legal-toc summary::-webkit-details-marker{display:none}
.legal-toc__chevron{color:var(--stamp)}
.legal-toc__list{display:flex;flex-direction:column;gap:1px}
.legal-toc__link{font-family:var(--mono);font-size:11px;color:var(--ink-soft);padding:7px 10px;border-radius:9px;line-height:1.35;
  transition:background .2s,color .2s}
.legal-toc__link:hover{background:rgba(16,120,232,.08);color:var(--heading)}
.legal-toc__link.is-active{background:var(--stamp);color:#fff}

.legal-body{max-width:74ch}
.legal-section{padding:24px 0;border-bottom:1px solid var(--hair-blue);scroll-margin-top:96px}
.legal-section:first-child{padding-top:0}
.legal-section:last-child{border-bottom:0}
.legal-section__title{font-family:var(--head);font-size:23px;font-weight:600;letter-spacing:normal;line-height:1.15;color:var(--heading)}
.legal-section p{color:var(--ink-soft);margin-top:12px;font-size:16.5px;line-height:1.65}
.legal-section ul,.legal-section ol{margin:12px 0 0 20px;color:var(--ink-soft);font-size:16.5px;line-height:1.65}
.legal-section li{margin-bottom:7px}
.legal-section li::marker{color:var(--stamp)}
.legal-section a{color:var(--stamp);border-bottom:1px solid rgba(16,120,232,.4)}
.legal-section a:hover{border-color:var(--stamp)}
.legal-section strong{color:var(--heading);font-weight:600}
.legal-section h3{font-size:18px;font-weight:500;margin-top:18px;color:var(--heading)}
.legal-section address{font-style:normal;margin-top:14px;padding:16px 18px;border-radius:16px;
  background:linear-gradient(180deg,#FBFDFF,#F1F6FD);border:1px solid var(--hair-blue);
  font-family:var(--mono);font-size:12.5px;line-height:1.75;color:var(--ink-soft)}
.legal-section address strong{color:var(--heading)}
.legal-callout{margin-top:14px;padding:18px 20px;border-radius:16px;background:var(--stamp-soft);border-left:3px solid var(--stamp);
  font-size:16px;color:var(--ink-soft);line-height:1.6}
.legal-callout strong{color:var(--heading)}
.to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,#2A8CF5,var(--stamp) 60%,#0B5BC0);box-shadow:0 14px 28px -12px rgba(16,120,232,.9);
  display:inline-flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60}
.to-top.is-visible{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-3px)}

/* ---- related rows / misc ------------------------------------------------- */
.related{padding-bottom:40px}
.related .sec-head{padding-top:12px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);margin-top:28px}
@media(max-width:640px){.stat-row{grid-template-columns:minmax(0,1fr)}}
.stat-row>div{padding:20px 20px 22px;border-right:1px solid var(--hair)}
.stat-row>div:last-child{border-right:0}
@media(max-width:640px){.stat-row>div{border-right:0;border-bottom:1px solid var(--hair)}}
.stat-row .v{font-family:var(--mono);font-size:30px;font-weight:500;letter-spacing:-.02em;color:var(--stamp)}
.stat-row{border-top-color:var(--stamp)}
.stat-row .k{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--meta);margin-top:6px}
.stat-row .s{font-family:var(--mono);font-size:11px;color:var(--meta);margin-top:4px}

/* ---- researcher gate ------------------------------------------------------ */
/* A full-screen sheet over everything, on a dotted ground with cut-out vials
   drifting at different depths. The card and the exit line centre with auto
   margins so a short viewport scrolls instead of clipping the top. */
.gate{position:fixed;inset:0;z-index:1000;overflow:hidden auto;display:flex;flex-direction:column;align-items:center;padding:20px 18px;
  background:radial-gradient(circle,rgba(16,120,232,.13) 1px,transparent 1.3px) 0 0/28px 28px,linear-gradient(180deg,#F8FAFE,#EEF4FC);
  animation:gate-in .35s ease-out both}
.gate.is-leaving{animation:gate-out .4s ease-in both;pointer-events:none}
@keyframes gate-in{from{opacity:0}to{opacity:1}}
@keyframes gate-out{to{opacity:0}}
.gate__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.gate__vial{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--s) * 1px);height:auto;
  pointer-events:none;user-select:none;opacity:.88;filter:blur(calc(var(--b) * 1px));
  transform:rotate(calc(var(--r) * 1deg));animation:gate-float 7.5s ease-in-out infinite;animation-delay:calc(var(--d) * -1s)}
@keyframes gate-float{0%,100%{transform:translateY(0) rotate(calc(var(--r) * 1deg))}50%{transform:translateY(-20px) rotate(calc(var(--r) * 1deg + 3deg))}}
.gate__card{position:relative;z-index:1;width:min(100%,780px);margin-top:auto;background:#fff;border-radius:30px;padding:40px 50px 36px;
  box-shadow:0 40px 90px -40px rgba(11,42,74,.38),0 2px 6px rgba(11,42,74,.05)}
.gate__logo{display:block;height:36px;width:auto}
.gate__title{font-family:var(--body);font-weight:600;font-size:clamp(26px,3.2vw,36px);letter-spacing:-.02em;line-height:1.1;color:var(--ink);margin-top:18px}
.gate__lead{font-size:clamp(15px,1.35vw,17px);line-height:1.55;color:var(--ink-soft);margin-top:11px;max-width:64ch}
.gate__opt{position:relative;display:flex;align-items:center;gap:16px;margin-top:18px;padding:15px 20px;border:2px solid var(--hair-blue);border-radius:16px;
  background:#fff;cursor:pointer;font-size:clamp(14.5px,1.25vw,16px);line-height:1.45;color:var(--ink);transition:border-color .2s,background .2s}
.gate__opt+.gate__opt{margin-top:12px}
.gate__opt input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.gate__opt::before{content:"";flex:none;width:24px;height:24px;border-radius:6px;border:2px solid rgba(16,120,232,.5);background:#fff center / 18px no-repeat;
  transition:background-color .18s,border-color .18s}
.gate__opt:hover{border-color:rgba(16,120,232,.55)}
.gate__opt:has(input:checked){border-color:var(--stamp);background:var(--stamp-soft)}
.gate__opt:has(input:checked)::before{background-color:var(--stamp);border-color:var(--stamp);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.gate__opt:has(input:focus-visible){outline:3px solid rgba(16,120,232,.4);outline-offset:2px}
.gate__enter{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin-top:22px;padding:16px;border:0;border-radius:999px;cursor:pointer;
  background:var(--stamp);color:#fff;font-family:var(--body);font-weight:500;font-size:clamp(16px,1.5vw,19px);
  box-shadow:0 14px 30px -12px rgba(16,120,232,.7);transition:background .2s,transform .2s,box-shadow .2s,opacity .2s}
.gate__enter:hover:not(:disabled){background:var(--stamp-deep);transform:translateY(-1px)}
.gate__enter:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.gate__enter span{display:inline-block;transition:transform .25s}
.gate__enter:hover:not(:disabled) span{transform:translateX(5px)}
.gate__fine{margin-top:20px;font-size:clamp(12px,1.05vw,13.5px);line-height:1.55;color:var(--meta)}
.gate__fine a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.gate__exit{position:relative;z-index:1;margin:18px 0 auto;font-size:clamp(14px,1.2vw,16px);color:var(--ink-soft)}
.gate__exit a{font-weight:600;color:var(--ink)}
@media(max-width:640px){.gate{padding:14px}.gate__card{border-radius:22px;padding:26px 20px 22px}.gate__logo{height:30px}
  .gate__title{margin-top:14px}.gate__opt{padding:13px 15px;gap:12px;border-radius:14px}.gate__opt::before{width:22px;height:22px}
  .gate__enter{padding:15px;margin-top:18px}.gate__fine{margin-top:16px}.gate__vial{opacity:.6}}
@media(prefers-reduced-motion:reduce){.gate,.gate__vial{animation:none}}

/* ---- touch: no zoom on focus --------------------------------------------- */
/* iOS Safari zooms the whole page in when a focused control is under 16px, and
   never zooms back out. Every text control goes to 16px on a touch screen --
   it reads better there anyway. Kept last so it wins the cascade. */
@media (pointer:coarse){
  .search input,.cart-coupon__input,.qty input,.sortwrap select,
  .field__input,.field__select,.field__area{font-size:16px}
  .sortwrap select{padding:9px 34px 9px 15px}
  .qty input{width:38px}
}

/* ---- checkout ------------------------------------------------------------ */
/* One page, modelled on the bioverlabsresearch.com checkout: shipping address
   on the left, the order and the card payment stacked on the right; on a phone
   the order folds into a "Show order summary" bar above the form. */
.co{--co-text:#0a0a0a;--co-muted:#6b6b6f;--co-faint:#9a9a9f;--co-line:#e6e6e8;--co-input:#d6d6d9;--co-soft:#fafafb;--co-blue:var(--stamp);
  padding:32px 0 72px;font-family:var(--body);color:var(--co-text)}
.co-title{font-family:var(--body);font-size:32px;font-weight:600;letter-spacing:-.03em;line-height:1.15;color:var(--co-text)}
.co-back{display:inline-flex;align-items:center;gap:6px;margin:18px 0 12px;font-size:14px;color:var(--co-muted);transition:color .15s}
.co-back:hover{color:var(--co-blue)}
.co-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.co-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
@media(min-width:901px){
  .co-grid{grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:32px}
  .co-grid>.co-form{grid-area:1/1/span 2/2}
  .co-grid>.co-sum{grid-area:1/2}
  .co-grid>.co-side{grid-area:2/2}
}

.co-panel{position:relative;background:#fff;border:1px solid var(--co-line);border-radius:14px;padding:16px}
.co-panel__title{font-family:var(--body);font-size:16px;font-weight:600;letter-spacing:-.03em;line-height:1.15;color:var(--co-text);margin-bottom:12px}

.co-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.co-field{display:block;min-width:0}
.co-field--full{grid-column:1/-1}
.co-label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;line-height:1.4;color:var(--co-text)}
.co-input{display:block;width:100%;box-sizing:border-box;height:43px;margin:0;padding:8px 12px;border:1px solid var(--co-input);border-radius:10px;
  background-color:#fff;font-family:var(--body);font-size:16px;line-height:1.4;color:var(--co-text);transition:border-color .15s,box-shadow .15s}
.co-input::placeholder{color:#a3a3a8}
.co-input:focus{outline:none;border-color:var(--co-blue);box-shadow:0 0 0 3px rgba(16,120,232,.18)}
.co-input[readonly]{background-color:var(--co-soft);color:var(--co-muted)}
select.co-input{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px}
.co-input--state{text-transform:uppercase}
.co-field.is-invalid .co-input,.co-field.is-invalid select.co-input{border-color:var(--alert);box-shadow:0 0 0 3px rgba(154,43,30,.12)}
.co-field.is-filled .co-input{animation:co-filled .9s ease-out}
@keyframes co-filled{from{background-color:var(--stamp-soft)}to{background-color:#fff}}

.co-check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--co-text);cursor:pointer}
.co-check input,.co-terms input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--co-blue);cursor:pointer}
.co-acct{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.co-acct.is-open{grid-template-rows:1fr}
.co-acct>div{overflow:hidden;min-height:0}
.co-acct.is-open>div{padding-top:12px}
.co-signedin{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-bottom:14px;padding:10px 12px;
  border-radius:10px;background:var(--verified-soft);font-size:13.5px;color:var(--verified)}
.co-signout{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-weight:600;color:var(--co-muted)}
.co-signout:hover{color:var(--co-text)}

/* order summary */
.co-sum__bar{display:none}
.co-sum__panel{background:var(--co-soft);border:1px solid var(--co-line);border-radius:14px;padding:24px}
.co-sum__title{font-family:var(--body);font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.15;color:var(--co-text);margin-bottom:20px}
.co-sum__head{display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--co-line);
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--co-faint)}
.co-lines{display:flex;flex-direction:column;gap:16px;padding:16px 0;border-bottom:1px solid var(--co-line)}
.co-line{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center}
.co-line__media{position:relative;display:block;width:48px;height:48px}
.co-line__img{display:block;width:48px;height:48px;border-radius:10px;overflow:hidden;background:#fff}
.co-line__img img{display:block;width:100%;height:100%;object-fit:contain;transform:scale(var(--fit,1.3))}
.co-line__qty{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;min-width:18px;height:18px;box-sizing:border-box;padding:0 4px;
  border-radius:999px;background:var(--co-blue);color:#fff;font-size:11px;font-weight:700;line-height:1}
.co-line__name{font-size:14px;font-weight:600;line-height:1.3;color:var(--co-text)}
.co-line__price{font-size:14px;font-weight:700;color:var(--co-text);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.co-rows{padding-top:8px}
.co-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0;font-size:14px;color:var(--co-muted);
  font-variant-numeric:tabular-nums lining-nums}
.co-row b{font-weight:400}
.co-row--save b{color:var(--verified)}
.co-row__free{font-weight:600;color:var(--verified)}
.co-row__calc{font-weight:500;color:var(--co-muted)}
.co-row--total{margin-top:8px;padding:16px 0 8px;border-top:1px solid var(--co-line);font-size:20px;font-weight:700;color:var(--co-text)}
.co-row--total b{font-weight:700}
.co-coupon{display:flex;gap:8px;margin-top:20px}
.co-coupon .co-input{flex:1;min-width:0;height:49px}
.co-btn2{flex:none;height:49px;padding:0 22px;border:1px solid var(--co-line);border-radius:10px;background:#f4f4f5;cursor:pointer;
  font-family:var(--body);font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--co-text);transition:background .15s}
.co-btn2:hover{background:#eaeaec}
.co-coupon--on{align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid rgba(15,122,82,.28);border-radius:10px;
  background:var(--verified-soft);font-size:14px;color:var(--verified)}
.co-coupon__remove{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:13px;color:var(--co-muted)}
.co-coupon__remove:hover{color:var(--alert)}
.co-coupon__msg{margin-top:8px;font-size:12.5px;color:var(--alert)}
.co-coupon__msg.is-ok{color:var(--verified)}

@media(max-width:900px){
  .co-sum__bar{display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;padding:16px 18px;border:1px solid var(--co-line);border-radius:14px;
    background:#f1f1f3;cursor:pointer;text-align:left;font-family:var(--body);font-size:15px;color:var(--co-blue)}
  .co-sum__bar svg{transition:transform .2s}
  .co-sum__bartotal{margin-left:auto;font-size:15px;font-weight:700;color:var(--co-text);font-variant-numeric:tabular-nums}
  .co-sum.is-open .co-sum__bar{border-radius:14px 14px 0 0}
  .co-sum.is-open .co-sum__bar svg{transform:rotate(180deg)}
  .co-sum.is-open .co-sum__bartotal{visibility:hidden}
  .co-sum__panel{display:none;border-top:0;border-radius:0 0 14px 14px}
  .co-sum.is-open .co-sum__panel{display:block}
}

/* payment */
.co-side{display:flex;flex-direction:column;gap:20px}
.co-form{display:flex;flex-direction:column;gap:20px}
.co-hint{display:block;margin-top:6px;font-size:13px;color:var(--co-muted)}
.co-hint.is-error{color:var(--alert)}
[data-br-only][hidden],[data-addr2][hidden]{display:none}
.co-ship__list{display:flex;flex-direction:column;gap:10px}
.co-ship__empty{margin:0;font-size:14px;color:var(--co-muted)}
.co-ship__opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--co-input);border-radius:10px;cursor:pointer;
  transition:border-color .15s,background-color .15s,box-shadow .15s}
.co-ship__opt:hover{border-color:var(--co-blue)}
.co-ship__opt input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--co-blue);cursor:pointer}
.co-ship__opt:has(input:checked){border-color:var(--co-blue);background:var(--stamp-soft);box-shadow:0 0 0 3px rgba(16,120,232,.12)}
.co-ship__name{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.co-ship__name b{font-size:15px;font-weight:600;color:var(--co-text)}
.co-ship__name span{font-size:13px;color:var(--co-muted)}
.co-ship__price{font-size:15px;font-weight:600;color:var(--co-text);white-space:nowrap}
.co-ship__price s{margin-right:6px;font-weight:500;color:var(--co-faint)}
.co-ship__price .is-free{color:var(--verified)}
.co-field.is-invalid .co-ship__list,.co-ship.is-invalid .co-ship__opt{border-color:var(--alert)}
.co-pay-secure{display:flex;align-items:center;gap:6px;margin-bottom:12px;font-size:14px;color:var(--co-muted)}
.co-pay-secure svg{flex:none;color:var(--co-blue)}
.co-pay-card{border:1px solid var(--co-line);border-radius:20px;padding:16px}
.co-pay-method{display:flex;align-items:center;gap:8px}
.co-pay-method__radio{flex:none;width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:5px solid var(--co-blue);background:#fff}
.co-pay-method__name{font-size:14px;font-weight:600;line-height:1.35;color:var(--co-text)}
.co-pay-method__brands{display:flex;gap:6px;margin-left:auto}
.co-pay-method__brands img{display:block;width:44px;height:28px;box-sizing:border-box;padding:4px;border:1px solid var(--co-line);border-radius:6px;
  background:#fff;object-fit:contain;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.co-pay-hint{margin:8px 0 16px;font-size:14px;color:var(--co-muted)}
.co-pay-card .co-input{height:49px;padding-top:11px;padding-bottom:11px}
.co-input-wrap{position:relative;display:block}
.co-input-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex;color:var(--co-faint);pointer-events:none}
.co-input--ico{padding-left:42px!important;padding-right:52px!important;font-variant-numeric:tabular-nums lining-nums}
.co-brand{position:absolute;right:12px;top:50%;width:34px;height:22px;transform:translateY(-50%);pointer-events:none}
.co-brand img{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;padding:2px;border:1px solid var(--co-line);border-radius:4px;
  background:#fff;object-fit:contain;opacity:0;transform:scale(.9);transition:opacity .2s,transform .2s}
.co-brand[data-active="visa"] [data-brand-visa],.co-brand[data-active="mastercard"] [data-brand-mastercard],
.co-brand[data-active="amex"] [data-brand-amex]{opacity:1;transform:none}
.co-pay-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.co-pay-note{display:flex;align-items:flex-start;gap:6px;margin-top:12px;font-size:12px;line-height:1.55;color:var(--co-faint)}
.co-pay-note svg{flex:none;margin-top:3px;color:var(--co-blue)}

.co-terms{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5;color:var(--co-text);cursor:pointer}
.co-terms strong{font-weight:700}
.co-terms a{color:var(--co-blue)}
.co-terms a:hover{text-decoration:underline}
.co-terms.is-invalid span{color:var(--alert)}
.co-terms.is-invalid input{outline:2px solid var(--alert);outline-offset:2px}

.co-pay{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:52px;border:1px solid transparent;border-radius:10px;
  background:var(--co-blue);color:#fff;cursor:pointer;overflow:hidden;
  font-family:var(--body);font-size:16px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums;
  transition:background .25s,opacity .2s}
.co-pay:hover:not(:disabled){background:var(--stamp-deep)}
.co-pay:disabled{opacity:.5;cursor:not-allowed}
.co-pay.is-loading,.co-pay.is-success,.co-pay.is-error{opacity:1;cursor:default}
.co-pay.is-success{background:var(--verified)}
.co-pay.is-error{background:var(--alert)}
.co-pay__dots,.co-pay__check,.co-pay__x{position:absolute;inset:0;display:none;align-items:center;justify-content:center}
.co-pay.is-loading .co-pay__label,.co-pay.is-success .co-pay__label,.co-pay.is-error .co-pay__label{visibility:hidden}
.co-pay.is-loading .co-pay__dots{display:flex;gap:7px}
.co-pay.is-success .co-pay__check,.co-pay.is-error .co-pay__x{display:flex}
.co-pay__dots i{width:8px;height:8px;border-radius:50%;background:#fff;animation:co-dot 1s ease-in-out infinite}
.co-pay__dots i:nth-child(2){animation-delay:.15s}
.co-pay__dots i:nth-child(3){animation-delay:.3s}
@keyframes co-dot{0%,80%,100%{transform:scale(.5);opacity:.45}40%{transform:scale(1);opacity:1}}
.co-pay svg{width:30px;height:30px}
.co-pay.is-success circle,.co-pay.is-error circle{stroke-dasharray:146;stroke-dashoffset:146;animation:co-draw .5s ease-out forwards}
.co-pay.is-success path{stroke-dasharray:40;stroke-dashoffset:40;animation:co-draw .35s .4s ease-out forwards}
.co-pay.is-error path{stroke-dasharray:46;stroke-dashoffset:46;animation:co-draw .35s .4s ease-out forwards}
@keyframes co-draw{to{stroke-dashoffset:0}}
.co-pay-error{margin-top:-6px;font-size:13px;line-height:1.45;color:var(--alert);text-align:center}
.co-pay-lock{display:flex;align-items:flex-start;justify-content:center;gap:6px;margin-top:-6px;font-size:12px;line-height:1.55;color:var(--co-faint);text-align:center}
.co-pay-lock svg{flex:none;margin-top:3px}
@keyframes sx-spin{to{transform:rotate(360deg)}}

.co-empty{padding:48px 0 32px;text-align:center}
.co-empty__title{font-family:var(--body);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--co-text)}
.co-empty__text{margin:8px 0 22px;font-size:15px;color:var(--co-muted)}
.co-pay--link{display:inline-flex;width:auto;padding:0 28px;text-decoration:none}

@media(max-width:560px){
  .co{padding-top:24px}
  .co-title{font-size:28px}
  .co-fields{grid-template-columns:minmax(0,1fr)}
  .co-sum__panel{padding:20px 18px}
  /* a 19-digit number has to fit beside the card icon and the brand mark */
  .co-input--ico{padding-left:38px!important;padding-right:44px!important}
  .co-input-ico{left:12px}
  .co-brand{right:10px;width:28px;height:18px}
  .co-pay-method__brands img{width:40px;height:26px}
}
@media(prefers-reduced-motion:reduce){
  .co-pay__dots i{animation:none;opacity:1;transform:none}
  .co-field.is-filled .co-input{animation:none}
  .co-acct{transition:none}
}

/* ---- checkout: address type-ahead ---------------------------------------- */
/* The list hangs off the shipping panel (position:relative), so it can overflow
   the field it belongs to. */
.sac{position:absolute;z-index:40;list-style:none;margin:0;padding:6px;box-sizing:border-box;
  background:#fff;border:1px solid #D2E1F1;border-radius:12px;max-height:min(340px,60vh);overflow:auto;
  box-shadow:0 22px 44px -20px rgba(11,42,74,.45),0 2px 6px rgba(11,42,74,.06)}
.sac[hidden]{display:none}
.sac__opt{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 12px 10px 38px;border-radius:8px;cursor:pointer;
  font-family:var(--body);transition:background .12s}
.sac__opt::before{content:"";position:absolute;left:13px;top:12px;width:15px;height:15px;background:var(--meta);
  -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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 1 1 13 0C18.5 15.4 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 1 1 13 0C18.5 15.4 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E") center/contain no-repeat}
.sac__opt b{font-weight:600;font-size:14px;color:var(--heading)}
.sac__opt span{font-size:12.5px;color:var(--meta)}
.sac__opt:hover,.sac__opt.is-active{background:var(--soft-blue)}
.sac__opt.is-active::before,.sac__opt:hover::before{background:var(--stamp)}
.sac__opt.is-active b{color:var(--stamp-deep)}
.sac__status{padding:11px 12px;font-family:var(--body);font-size:13px;color:var(--meta)}
.sac__foot{margin-top:4px;padding:8px 12px 4px;border-top:1px solid #E1EBF6;font-family:var(--body);font-size:10.5px;color:var(--meta)}

/* ---- order page: awaiting and failed payments ----------------------------- */
.order-status__spin{display:block;width:32px;height:32px;margin-bottom:14px;border-radius:50%;
  border:3px solid var(--stamp-soft);border-top-color:var(--stamp);animation:sx-spin .8s linear infinite}
.order-status--declined .order-status__icon{color:var(--alert)}
@media(prefers-reduced-motion:reduce){.order-status__spin{animation-duration:2.4s}}

/* long e-mail addresses and URLs in running text wrap instead of widening the page */
main p a,main dd,main li a{overflow-wrap:anywhere}

/* the buy panel adapts to its own width (narrow beside the gallery on mid screens) */
@container (max-width:540px){
  .ptiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pbuy__actions{flex-direction:column}
  .pqty{align-self:flex-start}
  .pbuy__add,.pbuy__actions .btn-live{width:100%;justify-content:center}
}