/* BP: navy and white, lot-first. IBM Plex Sans for words, IBM Plex Mono for lab data (lots, keys, values). No serif, no italics. The loader and the page-transition rules live in each page's (they must be known before the first paint). */ /* IBM Plex, served from this site (latin set, SIL OFL 1.1: /assets/fonts/OFL.txt). One variable file for the sans; the mono uses its 500 file for 400 and 500, and its 600 file for 600 and 700, so only two mono files load. */ @font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/plex-sans-var.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plex-mono-500.woff2) format("woff2");font-weight:300 500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plex-mono-600.woff2) format("woff2");font-weight:600 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{ --navy:#0E2646;--navy-2:#1A3A66;--ink:#0B1A2F;--steel:#566274;--paper:#F5F7FA;--white:#FFFFFF; --mist:#E4E8EB;--line:#D9DFE7;--tint:#EDF1F6;--ok:#1F7A52;--ok-bg:#E6F4ED;--ok-line:#C2E3D2;--warn:#9A5B00;--warn-bg:#FBF1DE; --studio:#DCDCDD; --g:clamp(18px,5vw,72px);--max:1200px;--hh:72px; --eo:cubic-bezier(.16,1,.3,1);--es:cubic-bezier(.45,0,.55,1); --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; /* Data (lots, figures, prices) in the same sans with even-width numbers; the typewriter mono only for report keys (owner, 29 Sep 2026) */ --mono:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --code:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace; } *{box-sizing:border-box} html{background:var(--navy);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 16px)} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} @supports (overflow:clip){html,body{overflow-x:clip}} h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0} ul,ol{padding:0;list-style:none} a{color:inherit;text-decoration:none} button,input,textarea{font:inherit;color:inherit} button{background:none;border:0;padding:0;cursor:pointer} img{display:block;max-width:100%;height:auto} em,i{font-style:normal} :focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:6px} [hidden]{display:none!important} .wrap{width:100%;max-width:calc(var(--max) + 2 * var(--g));margin:0 auto;padding-inline:var(--g)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--navy);color:#fff;padding:10px 16px;border-radius:999px}.skip:focus{top:12px} /* Type */ .eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)} .h1{font-weight:600;font-size:clamp(38px,5vw,66px);line-height:1.04;letter-spacing:-.028em;color:var(--ink);text-wrap:balance} .h1 .amt{color:var(--steel);font-weight:500} .h2{font-weight:600;font-size:clamp(28px,3.2vw,42px);line-height:1.1;letter-spacing:-.022em;text-wrap:balance} .h3{font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.25} .lede{font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--steel);max-width:46ch} .mono{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums} .muted{color:var(--steel)} .small{font-size:14.5px} .ruo{font-size:13.5px;color:var(--steel);display:flex;align-items:center;gap:8px} .ruo::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--navy);flex:none} .tc{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 6px;padding:2px 10px;border-radius:10px;background:var(--warn-bg);color:var(--warn);font-size:13px;font-weight:600;max-width:100%} .tc::before{flex:none;white-space:nowrap;content:"To confirm";font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.85} /* Buttons and links */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;background:var(--navy);color:var(--white);font-weight:600;font-size:16px;white-space:nowrap;transition:background .25s,transform .2s var(--es);box-shadow:0 10px 24px -14px rgba(14,38,70,.6)} .btn:hover{background:var(--navy-2)} .btn:active{transform:scale(.97)} .btn-sm{height:40px;padding:0 18px;font-size:15px;box-shadow:none} .btn-line{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)} .btn-line:hover{background:rgba(14,38,70,.06)} .tlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--navy);border-bottom:1.5px solid currentColor;padding-bottom:1px} .tlink::after{content:"\2192";transition:transform .3s var(--es)} .tlink:hover::after{transform:translateX(3px)} /* Links that leave the site (the lab's own pages) point up and out */ .tlink.ext::after{content:"\2197"}.tlink.ext:hover::after{transform:translate(2px,-2px)} /* Header */ .hdr{position:sticky;top:0;z-index:40;view-transition-name:bp-header;background:rgba(245,247,250,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);transition:box-shadow .3s} .hdr.scrolled{box-shadow:0 1px 0 rgba(14,38,70,.08)} .hdr .wrap{height:var(--hh);display:flex;align-items:center;justify-content:space-between;gap:20px} .logo{display:inline-flex;align-items:center;color:var(--navy)} .logo svg{height:44px;width:auto} /* "by NEWTECH" beside the BP mark (the NEWTECH logo from the owner) */ .brandline{display:flex;align-items:center;gap:12px} .by{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--steel);white-space:nowrap} .by img{height:40px;width:auto} .nav{display:flex;align-items:center;gap:2px} .nav a:not(.btn){padding:9px 14px;border-radius:999px;font-size:15.5px;font-weight:500;color:var(--ink);transition:background .2s} .nav a:not(.btn):hover{background:rgba(14,38,70,.07)} .nav a[aria-current="page"]:not(.btn){color:var(--navy);font-weight:600;box-shadow:inset 0 -2px 0 var(--navy);border-radius:0} .nav .btn{margin-left:10px} .burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:6px} .burger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:1px;transition:transform .3s var(--es)} .menu-open .burger span:first-child{transform:translateY(4px) rotate(45deg)} .menu-open .burger span:last-child{transform:translateY(-4px) rotate(-45deg)} .mnav{position:fixed;inset:var(--hh) 0 0 0;z-index:39;background:var(--paper);padding:24px var(--g) 40px;display:flex;flex-direction:column;gap:6px;animation:mfade .3s var(--eo) both} .mnav a:not(.btn){font-size:28px;font-weight:600;letter-spacing:-.02em;padding:10px 0;border-bottom:1px solid var(--line)} .mnav .btn{margin-top:20px} @keyframes mfade{from{opacity:0;transform:translateY(-8px)}} /* Sections */ .sec{padding-block:clamp(72px,8.5vw,120px)} .sec-head{display:grid;gap:14px;margin-bottom:clamp(28px,3.6vw,48px);max-width:680px;justify-items:start} .band{background:var(--white)} .navyband{background:var(--navy);color:#DDE5EF} .navyband .h2{color:#fff}.navyband .lede{color:#B9C6D6}.navyband .eyebrow{color:#9FB3CC} /* Hero with the two floating vials (motion identical to the approved demo) */ .hero{position:relative;min-height:calc(100vh - var(--hh));min-height:calc(100svh - var(--hh));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);padding-block:24px 56px} .hero-copy{display:grid;gap:22px;justify-items:start;max-width:580px} .stage{position:relative;height:min(76vh,720px);width:100%;max-width:660px;justify-self:end;touch-action:pan-y} .stage .glow{position:absolute;inset:6% 2% 10% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(189,207,232,.55),rgba(233,239,247,.35) 55%,rgba(245,247,250,0));pointer-events:none} .v{position:absolute;will-change:transform} .v-front{left:10%;bottom:10%;height:74%;z-index:3} .v-back{right:6%;top:4%;height:58%;z-index:2} /* Idle float: up and down with a small side sway, the two vials out of step */ .v .fl{height:100%;animation:float-a 6.2s ease-in-out infinite} .v-back .fl{animation:float-b 7.4s ease-in-out -3.2s infinite} .v img{height:100%;width:auto;max-width:none;transform-origin:50% 60%;filter:drop-shadow(0 30px 28px rgba(14,38,70,.18))} .v-front img{transform:rotate(-12deg)} .v-back img{transform:rotate(15deg);filter:drop-shadow(0 24px 24px rgba(14,38,70,.14)) brightness(.98)} @keyframes float-a{0%,100%{transform:translate3d(0,0,0) rotate(0)}30%{transform:translate3d(4px,-17px,0) rotate(2.2deg)}55%{transform:translate3d(1px,-26px,0) rotate(2.9deg)}80%{transform:translate3d(-4px,-10px,0) rotate(.6deg)}} @keyframes float-b{0%,100%{transform:translate3d(0,0,0) rotate(0)}30%{transform:translate3d(-3px,-12px,0) rotate(-2.2deg)}55%{transform:translate3d(0,-20px,0) rotate(-3deg)}80%{transform:translate3d(3px,-8px,0) rotate(-.8deg)}} .shadow{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(14,38,70,.26),rgba(14,38,70,0));pointer-events:none} .sh-front{left:12%;bottom:3%;width:40%;height:7%;animation:shadow-a 6.2s ease-in-out infinite} .sh-back{right:6%;bottom:15%;width:28%;height:5%;opacity:.7;animation:shadow-b 7.4s ease-in-out -3.2s infinite} @keyframes shadow-a{0%,100%{transform:scale(1);opacity:1}55%{transform:scale(.82);opacity:.66}} @keyframes shadow-b{0%,100%{transform:scale(1);opacity:.7}55%{transform:scale(.85);opacity:.48}} .chip{position:absolute;z-index:4;display:grid;gap:2px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 12px 30px -14px rgba(14,38,70,.35),inset 0 0 0 1px rgba(255,255,255,.8);font-size:13px;line-height:1.3;color:var(--steel);transition:transform .3s var(--es),box-shadow .3s} .chip b{font-size:14px;font-weight:600;color:var(--ink)} .chip .mono{color:var(--navy);font-weight:600} .chip:hover{transform:translateY(-2px)} .chip-front{left:-2%;top:30%} .chip-back{right:0;top:58%} /* Entrance after the loader */ .js .hero-copy>*{opacity:0;transform:translateY(22px);transition:opacity .9s var(--eo),transform .9s var(--eo)} /* Vials and the headline are painted at once (the intro covers them), so they count for LCP; they only move in */ .js .v{transition:translate 1.4s var(--eo),rotate 1.4s var(--eo)} .js .hero-copy>.h1{opacity:1} .js .v-front{translate:0 90px;rotate:-6deg} .js .v-back{translate:0 120px;rotate:8deg} .js .chip,.js .shadow{opacity:0;transition:opacity .8s var(--es) 1s} .bp-ready .hero-copy>*{opacity:1;transform:none} .bp-ready .hero-copy>:nth-child(2){transition-delay:.08s}.bp-ready .hero-copy>:nth-child(3){transition-delay:.16s} .bp-ready .hero-copy>:nth-child(4){transition-delay:.24s}.bp-ready .hero-copy>:nth-child(5){transition-delay:.32s}.bp-ready .hero-copy>:nth-child(6){transition-delay:.4s} .bp-ready .v{translate:0 0;rotate:0deg} .bp-ready .v-back{transition-delay:.18s} .bp-ready .chip{opacity:1}.bp-ready .shadow{opacity:1}.bp-ready .sh-back{opacity:.7} /* Lot box in the hero */ .lookup{width:100%;max-width:520px;display:grid;gap:10px} .lookup form{display:flex;gap:8px;padding:6px;border-radius:999px;background:var(--white);box-shadow:0 14px 40px -24px rgba(14,38,70,.45),inset 0 0 0 1px var(--line)} .lookup input{flex:1;min-width:0;height:48px;border:0;outline:0;background:transparent;padding:0 18px;font-family:var(--mono);font-size:17px;letter-spacing:.05em;text-transform:uppercase} .lookup input::placeholder{font-family:var(--sans);letter-spacing:0;text-transform:none;color:#8A96A6} .lookup form:focus-within{box-shadow:0 14px 40px -24px rgba(14,38,70,.45),inset 0 0 0 2px var(--navy)} .lookup .btn{height:48px} .lookup .hint{font-size:13.5px;color:var(--steel);padding-left:18px} .lk-list{display:grid;gap:8px} .lk-result{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:16px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);animation:lkin .4s var(--eo) both;transition:box-shadow .2s} .lk-result:hover{box-shadow:inset 0 0 0 1.5px var(--navy)} .lk-result b{font-size:15.5px;font-weight:600} .lk-result .mono{font-size:13.5px;color:var(--steel)} .lk-result .pv{font-family:var(--mono);font-weight:600;color:var(--navy)} @keyframes lkin{from{opacity:0;transform:translateY(8px)}} .flag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--warn)} .flag::before{content:"!";display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--warn);color:#fff;font-size:11px} /* Product grid: renders on one studio grey */ .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px} .pcard{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;border-radius:18px;background:var(--white);overflow:hidden;box-shadow:0 1px 0 rgba(14,38,70,.05),0 16px 40px -30px rgba(14,38,70,.45);transition:transform .35s var(--eo),box-shadow .35s} .pcard:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(14,38,70,.05),0 26px 50px -30px rgba(14,38,70,.55)} .pm{aspect-ratio:4/5;overflow:hidden;background:var(--studio)} .pm img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--eo)} .pcard:hover .pm img{transform:scale(1.035)} /* The owner's product cards (vial + panel), shown whole on white, like a shop catalogue */ .has-card .pm{aspect-ratio:6/5;background:#fff} .has-card .pm img{object-fit:contain} .pg{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)} .pb{display:grid;gap:5px;padding:14px 16px 16px;align-content:start} .pn{font-size:17.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2} /* The cards of one row line up part by part: picture, group, name, lot line and boxes start at the same height in every card, however long a name or a lot runs (owner, 29 Sep 2026). Each card takes five rows of the grid and shares them with its neighbours. */ @supports (grid-template-rows:subgrid){ .pcard{grid-row:span 5;grid-template-rows:subgrid;row-gap:0} .pb{grid-row:span 4;grid-template-rows:subgrid} } .pp{font-size:15px;font-weight:600;color:var(--ink)} .more{margin-top:26px} /* Group filters: shown only when the script runs (without it every card stays listed) */ .filters{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 18px} html:not(.js) .filters{display:none} .fchip{height:38px;padding:0 16px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font-size:14.5px;font-weight:500;color:var(--ink);white-space:nowrap;transition:background .2s,box-shadow .2s,color .2s} .fchip:hover{box-shadow:inset 0 0 0 1.5px var(--navy)} .fchip[aria-pressed="true"]{background:var(--navy);color:var(--white);box-shadow:none} .count:empty{display:none} /* COA library: one data card per lot */ .coa-top{padding-bottom:clamp(56px,7vw,96px)} .search{display:flex;align-items:center;gap:10px;max-width:560px;height:56px;padding:0 20px;border-radius:999px;background:var(--white);box-shadow:0 14px 40px -26px rgba(14,38,70,.45),inset 0 0 0 1px var(--line);scroll-margin-top:calc(var(--hh) + 24px)} .search:focus-within{box-shadow:0 14px 40px -26px rgba(14,38,70,.45),inset 0 0 0 2px var(--navy)} .search svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--steel);stroke-width:1.8;stroke-linecap:round} .search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:16.5px} .search input::placeholder{color:#8A96A6} .count{margin:14px 0 22px 4px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)} .s-note{margin:-8px 0 22px;padding:14px 18px;border-radius:16px;background:var(--warn-bg);color:#5C3A00;font-size:15.5px;max-width:720px} .s-note b{color:var(--warn)} .cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} .coa{position:relative;display:grid;gap:12px;align-content:start;padding:18px;border-radius:20px;background:var(--white);box-shadow:0 1px 0 rgba(14,38,70,.05),0 16px 40px -30px rgba(14,38,70,.45),inset 0 0 0 1px #E6EAF0;transition:transform .35s var(--eo),box-shadow .35s} .cgrid .coa:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(14,38,70,.05),0 24px 50px -30px rgba(14,38,70,.55),inset 0 0 0 1px #D5DCE6} .coa.show,.pcard.show{animation:lkin .35s var(--eo) both} .ch{display:flex;align-items:center;gap:12px} .ch img{width:40px;height:50px;border-radius:8px;object-fit:cover;background:var(--studio);flex:none} .thumb-none{width:40px;height:50px;border-radius:8px;background:var(--tint);box-shadow:inset 0 0 0 1px var(--line);flex:none} .ch>div{flex:1;min-width:0} .cn{font-size:16.5px;font-weight:600;line-height:1.25} .cgrid .cn a::after{content:"";position:absolute;inset:0;border-radius:20px} .cl{font-size:12px;letter-spacing:.06em;color:var(--steel);margin-top:2px} .cf{display:grid;gap:2px} .cf b{font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)} .cf b small{font-size:20px;font-weight:600;letter-spacing:0;margin-left:2px} .cf span{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--steel)} .cf.na b{font-size:24px;font-weight:500;color:#7A8594;letter-spacing:-.01em} .lm{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 12px;border-radius:12px;background:var(--tint)} .lm div{display:grid;min-width:0} .lm span{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--steel)} .lm b{font-size:14.5px;font-weight:600;white-space:nowrap} .lm i{color:#8A96A6;font-size:14px} .lm .dl{margin-left:auto;padding:3px 9px;border-radius:999px;background:var(--white);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--navy);white-space:nowrap} .lm .dl.nd{color:#7A8594;font-weight:500} .lm.na b{color:#7A8594;font-weight:500} .ct{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ct>div{padding:8px 10px;border-radius:12px;box-shadow:inset 0 0 0 1px #E1E6ED;min-width:0} .ct dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--steel)} .ct dd{font-size:14px;font-weight:600;line-height:1.3;margin-top:2px} .ct .ok{background:var(--ok-bg);box-shadow:inset 0 0 0 1px var(--ok-line)} .ct .ok dt{color:var(--ok)} .ct .ok dd::after{content:" \2713";color:var(--ok)} .ct .val dd{font-family:var(--mono);font-weight:500;font-size:13.5px} .ct .no{box-shadow:inset 0 0 0 1.5px #E1E6ED;background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(14,38,70,.035) 7px 14px)} .ct .no dd{color:#7A8594;font-weight:500} .ct .part{background:var(--warn-bg);box-shadow:none} .ct .part dt,.ct .part dd{color:var(--warn)} .cfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:10px;border-top:1px solid var(--mist);font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel)} .cfoot .go{color:var(--navy);font-weight:600;display:inline-flex;gap:6px;align-items:center} .cfoot .go::after{content:"\2192";transition:transform .3s var(--es)} .coa:hover .cfoot .go::after{transform:translateX(3px)} .coa.wide .cfoot .go{display:none} /* Products with no lab report yet: their own section after the tested lots, one quiet row per product in the library */ .later{margin-top:clamp(40px,5vw,64px);display:grid;gap:16px} .later-h{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)} .later-h::after{content:"";flex:1;height:1px;background:var(--line)} .later .cgrid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px} .coa.none{padding:12px 16px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)} .cgrid .coa.none:hover{box-shadow:inset 0 0 0 1.5px var(--navy)} .coa.none .ch::after{content:"\2192";color:var(--navy);font-weight:600;transition:transform .3s var(--es)} .coa.none:hover .ch::after{transform:translateX(3px)} /* An earlier content result of the same lot (a retest keeps the first one on show) */ .lm-e{font-size:13px;line-height:1.45;color:var(--steel);padding:0 4px} .lm-e .mono{color:var(--ink)} .rtag{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--tint);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);vertical-align:3px} /* Home: the COA library next to three real report pages */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center} .split .sec-head{margin-bottom:0} .rfan{position:relative;height:clamp(340px,34vw,460px)} .rf{position:absolute;top:50%;left:50%;width:min(52%,250px);transform-origin:50% 90%;transition:transform .7s var(--eo),box-shadow .5s;border-radius:10px;overflow:hidden;box-shadow:0 30px 50px -30px rgba(14,38,70,.55),0 0 0 1px rgba(14,38,70,.06)} .rf img{width:100%;height:auto} .rf0{transform:translate(-50%,-50%) translateX(-42%) rotate(-9deg);z-index:1} .rf1{transform:translate(-50%,-52%);z-index:3} .rf2{transform:translate(-50%,-50%) translateX(42%) rotate(9deg);z-index:2} .rfan:hover .rf0{transform:translate(-50%,-50%) translateX(-58%) rotate(-12deg)} .rfan:hover .rf2{transform:translate(-50%,-50%) translateX(58%) rotate(12deg)} .rfan .rf:hover{box-shadow:0 36px 60px -30px rgba(14,38,70,.7),0 0 0 1.5px var(--navy)} /* The five tests explained: three and two per row on wide screens, both rows full */ .reads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} @media (min-width:901px){.reads.n5{grid-template-columns:repeat(6,minmax(0,1fr))}.reads.n5 .read{grid-column:span 2}.reads.n5 .read:nth-child(n+4){grid-column:span 3}} @media (min-width:601px) and (max-width:900px){.reads.n5 .read:last-child{grid-column:1/-1}} .read{display:grid;gap:8px;align-content:start;padding:22px;border-radius:20px;background:var(--tint)} .band .read{background:var(--paper)} .ic{width:28px;height:28px;fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .read .k{font-size:12px;color:var(--navy);letter-spacing:.04em;margin-top:6px} .read p:last-child{font-size:15.5px;color:var(--steel);line-height:1.55} /* Steps */ .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s} .steps li{counter-increment:s;padding:22px;border-radius:20px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} .steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--mono);font-size:13px;color:#9FB3CC;margin-bottom:10px} .steps li p{color:#DDE5EF} .vlinks{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px 28px}.navyband .tlink{color:#fff} /* Tables (price list) */ .tbl{border-radius:18px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);overflow:auto} table{width:100%;border-collapse:collapse;font-size:15.5px} th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} thead th{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--steel);background:var(--paper)} tbody tr:last-child td{border-bottom:0} td .mono,td.mono{white-space:nowrap} .na{color:#7A8594} /* Product and COA pages */ .phead{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(36px,5vw,72px)} .pimg{border-radius:24px;overflow:hidden;background:var(--studio);box-shadow:0 30px 60px -40px rgba(14,38,70,.5)} .pimg.card{background:#fff} /* Product pictures to swipe through: card, what comes with every purchase, the vial, the pen add-on */ .gal{display:grid;gap:12px;min-width:0} .gal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;border-radius:24px;background:#fff;box-shadow:0 30px 60px -40px rgba(14,38,70,.5);scrollbar-width:none} .gal-track::-webkit-scrollbar{display:none} .gal-track:focus-visible{outline:2px solid var(--navy);outline-offset:3px} .gal-slide{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-rows:auto 1fr} .gal-slide img{width:100%;height:auto;aspect-ratio:6/5;object-fit:contain;background:#fff} .gal-slide.studio img{background:var(--studio)} .gal-slide figcaption{padding:10px 16px;font-size:13px;color:var(--steel);border-top:1px solid var(--mist)} .gal-slide figcaption a{color:var(--navy);text-decoration:underline;text-underline-offset:3px} .gal-nav{display:flex;align-items:center;justify-content:center;gap:14px} html:not(.js) .gal-nav{display:none} .gal-dots{display:flex;gap:6px} .gal-dot{width:8px;height:8px;border-radius:4px;background:#C9D0DA;transition:width .25s var(--es),background .25s} .gal-dot[aria-current="true"]{width:22px;background:var(--navy)} .gal-prev,.gal-next{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--navy);font-size:17px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s} .gal-prev:hover,.gal-next:hover{box-shadow:inset 0 0 0 1.5px var(--navy)} .gal-prev[disabled],.gal-next[disabled]{opacity:.35;cursor:default} .pimg img{width:100%;height:auto} .pimg figcaption,.phead .photo figcaption{padding:10px 16px;font-size:13px;color:var(--steel);background:var(--white)} .pimg figcaption a,.phead .photo figcaption a{color:var(--navy);text-decoration:underline;text-underline-offset:3px} .phead .photo{border-radius:24px;overflow:hidden;background:#E9EAEB;box-shadow:0 30px 60px -40px rgba(14,38,70,.5)} .phead .photo img{width:100%;height:auto} .lothead{align-items:start} .pinfo{display:grid;gap:16px;justify-items:start} .pinfo .coa{width:100%;max-width:560px} .lotline{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .lotline .mono{font-size:19px;color:var(--navy);font-weight:600} .split-coa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center} .split-coa .sec-head{margin-bottom:0} .note{padding:14px 18px;border-radius:16px;background:var(--warn-bg);color:#5C3A00;font-size:15.5px;line-height:1.5} .note b{color:var(--warn)} .reports{display:grid;gap:14px} .report{display:grid;grid-template-columns:128px minmax(0,1fr);gap:20px;padding:18px;border-radius:20px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line)} .band .report{background:var(--paper);box-shadow:none} .rthumb{align-self:start;border-radius:8px;overflow:hidden;box-shadow:0 14px 30px -20px rgba(14,38,70,.5),0 0 0 1px rgba(14,38,70,.08);transition:transform .4s var(--eo)} .rthumb:hover{transform:translateY(-3px) rotate(-1deg)} .rbody{display:grid;gap:12px;align-content:start;min-width:0} .rhead{display:flex;gap:12px;align-items:flex-start} .rhead .ic{flex:none;margin-top:1px} .report .res{display:flex;gap:10px 26px;flex-wrap:wrap} .report .res div{display:grid} .report .res span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)} .report .res b{font-family:var(--mono);font-size:18px;font-weight:600} .report .cm{font-size:15px;color:var(--steel);border-left:3px solid var(--mist);padding-left:12px} .report .ids{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:13.5px;color:var(--steel)} .report .ids .mono{color:var(--ink);font-family:var(--code)} .rlinks{display:flex;flex-wrap:wrap;gap:8px 24px} .missing{padding:18px 22px;border-radius:20px;border:1.5px dashed var(--line);color:var(--steel);font-size:15.5px;margin-top:14px} .crumbs{font-size:14px;color:var(--steel);display:flex;gap:8px;flex-wrap:wrap;padding-top:18px} .crumbs a{text-decoration:underline;text-underline-offset:3px} /* Text pages and FAQ */ .prose{max-width:720px;display:grid;gap:16px} .prose h2{font-size:26px;font-weight:600;letter-spacing:-.018em;margin-top:18px} .prose p,.prose li{color:#2B3A4F} .prose ul{list-style:disc;padding-left:22px;display:grid;gap:6px} .prose a:not(.tlink){color:var(--navy);text-decoration:underline;text-underline-offset:3px} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-size:18px;font-weight:600} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--mono);font-size:22px;color:var(--navy);transition:transform .3s var(--es)} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{padding:0 0 20px;color:var(--steel);max-width:64ch} /* Footer */ .foot{background:var(--navy);color:#C9D3E0;padding-block:56px calc(40px + env(safe-area-inset-bottom))} .foot .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:24px 48px;align-items:start} .foot .logo{color:#fff}.foot .logo svg{height:44px} .foot nav{display:flex;gap:10px 22px;flex-wrap:wrap;font-weight:500} .foot nav a:hover{color:#fff} .foot p{font-size:14px;line-height:1.6} .foot address{font-style:normal;font-size:14px;line-height:1.6;margin-top:10px} .foot address a{text-decoration:underline;text-underline-offset:2px}.foot address a:hover{color:#fff} .foot .replay{font-size:13px;color:#9FB0C6;text-decoration:underline} /* WhatsApp button in the corner of every page (only when the number is set in data/site.json) */ .wa{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:10px;color:var(--ink);text-decoration:none;transform-origin:100% 100%;transition:transform .25s var(--es),opacity .25s} .wa-card{display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;background:var(--white);box-shadow:0 16px 34px -14px rgba(14,38,70,.45),inset 0 0 0 1px var(--line);transition:transform .25s var(--es)} .wa-av{position:relative;flex:none;width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--line)} .wa-av img{display:block;width:100%;height:100%;border-radius:50%} .wa-dot{position:absolute;right:0;bottom:1px;width:12px;height:12px;border-radius:50%;background:#25D366;box-shadow:0 0 0 2px var(--white)} .wa-tx{display:grid;gap:1px;line-height:1.2} .wa-tx b{font-size:14px;font-weight:700;letter-spacing:.05em;color:var(--ink)} .wa-tx small{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:#12813f} .wa-tx small i{width:7px;height:7px;border-radius:50%;background:#25D366;animation:wa-pulse 2s ease-out infinite} @keyframes wa-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%,100%{box-shadow:0 0 0 7px rgba(37,211,102,0)}} .wa-ic{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 16px 30px -12px rgba(18,129,63,.65);transition:transform .25s var(--es)} .wa-ic svg{width:29px;height:29px;fill:currentColor} .wa:hover .wa-card{transform:translateY(-2px)} .wa:hover .wa-ic{transform:scale(1.06)} .wa.wait{opacity:0;transform:scale(.6);pointer-events:none} .menu-open .wa{display:none} @media(max-width:600px){.wa{gap:6px}.wa-card{gap:7px;padding:3px 10px 3px 3px}.wa-av{width:34px;height:34px}.wa-dot{width:9px;height:9px}.wa-tx b{font-size:12px}.wa-tx small{font-size:10.5px;gap:5px}.wa-tx small i{width:6px;height:6px}.wa-ic{width:48px;height:48px}.wa-ic svg{width:25px;height:25px}} @media(prefers-reduced-motion:reduce){.wa-tx small i{animation:none}} /* Reveals (cards arrive one after another through --d) */ .js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--eo),transform .9s var(--eo);transition-delay:var(--d,0s)} .js .rv.in{opacity:1;transform:none} /* If js/site.js never runs, the head script adds .rv-fail after 4 s so nothing stays hidden */ .rv-fail .rv,.rv-fail .hero-copy>*,.rv-fail .v,.rv-fail .chip,.rv-fail .shadow{opacity:1!important;transform:none!important;translate:none!important;rotate:none!important} /* Tablet and phone */ @media (max-width:900px){.reads{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:900px){ :root{--hh:64px} .logo svg{height:38px} .brandline{gap:9px}.by{gap:5px;font-size:11.5px}.by img{height:34px} .nav a:not(.btn){display:none}.nav .btn{display:none}.burger{display:flex} .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:16px;padding-bottom:40px;gap:14px} .lookup{min-width:0} .hero-copy{display:contents} .hero-copy>.eyebrow{order:1}.hero-copy>.h1{order:2}.stage{order:3}.hero-copy>.lede{order:4}.hero-copy>.lookup{order:5}.hero-copy>.actions{order:6}.hero-copy>.ruo{order:7} .stage{height:min(34svh,360px);max-width:460px;justify-self:center} .v-front{left:18%;height:80%}.v-back{right:16%;height:62%}.sh-front{left:20%}.sh-back{right:16%} .chip{display:none} .phead,.split,.split-coa{grid-template-columns:1fr} .pimg,.phead .photo{max-width:420px} /* COA page on a phone: the lot's numbers first, the lab's photo after them */ .lothead .photo{order:2;max-width:340px} .rfan{height:320px} .steps{grid-template-columns:1fr} .foot .wrap{grid-template-columns:1fr} table.stack thead{display:none} table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%} table.stack tr{padding:12px 16px;border-bottom:1px solid var(--line)} table.stack td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:16px;text-align:right} table.stack td.mono,table.stack td .mono{white-space:normal} table.stack td::before{content:attr(data-label);color:var(--steel);font-weight:600;font-size:14px} table.stack td:first-child{font-size:17px;font-weight:600;padding-bottom:6px} table.stack td:first-child::before{content:none} } @media (max-width:600px){ body{font-size:16.5px} .reads{grid-template-columns:1fr}.lookup .btn{padding:0 18px} /* Phones: two compact product cards per row, every card visible without swiping */ .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .pcard{border-radius:14px} .pb{padding:10px 12px 12px;gap:4px} .pn{font-size:15.5px} .flag{font-size:11.5px} /* COA cards: one per row, dense */ .cgrid{grid-template-columns:1fr;gap:12px} .coa{padding:14px;gap:10px;border-radius:16px} .cf b{font-size:36px}.cf b small{font-size:17px} .lm{padding:8px 10px;gap:8px}.lm b{font-size:13.5px} .ct dd{font-size:13px}.ct .val dd{font-size:12.5px} .search{height:52px} .filters{gap:6px;margin:18px 0 14px} .fchip{height:34px;padding:0 12px;font-size:13.5px} .report{grid-template-columns:84px minmax(0,1fr);gap:14px;padding:14px} .report .res b{font-size:16px} .rfan{height:280px} } @media (prefers-reduced-motion:reduce){ .v .fl,.shadow{animation:none} .js .hero-copy>*,.js .v,.js .chip,.js .shadow,.js .rv{transition:opacity .3s;transform:none;translate:none;rotate:none} .pcard,.pcard:hover,.coa,.coa:hover,.rf,.rthumb{transition:none} } .order-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px} /* Product card data: "5 mg ยท Lot BP-482", then soft rounded boxes for what the lab measured and the price */ .pmeta{font-size:13.5px;color:var(--steel);font-variant-numeric:tabular-nums} .pmeta span{white-space:nowrap} .pcs{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:6px} .pc.pc-stat{display:inline-grid;gap:1px;padding:6px 11px;line-height:1.2} .pc-stat small{font-size:.86em;font-weight:500;opacity:.85} .pc-ask{color:var(--steel);box-shadow:inset 0 0 0 1px var(--line)} .pc{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 5px;max-width:100%;padding:5px 11px;border-radius:10px;font-size:13px;line-height:1.35;font-variant-numeric:tabular-nums;white-space:nowrap} .pc b{font-weight:600} .pc-lab{background:var(--ok-bg);color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok-line)} .pc-price{background:var(--navy);color:#fff;font-weight:600} .pc-none{background:var(--paper);color:#7A8594;box-shadow:inset 0 0 0 1px var(--line)} .lotline .pc{font-size:14px} .pbox{display:inline-flex;align-items:baseline;gap:8px;padding:10px 16px;border-radius:14px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;color:var(--steel)} .pbox b{font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--navy);font-variant-numeric:tabular-nums} /* Ordering: three steps, the kit pictures with their lists, and small cards */ .osteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding-bottom:clamp(56px,7vw,96px)} .osteps li{display:grid;gap:8px;align-content:start;padding:22px;border-radius:20px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line)} .osteps li p{color:var(--steel);font-size:15.5px} .osteps li a{color:var(--navy);text-decoration:underline;text-underline-offset:3px} .onum{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-weight:600;font-size:15px} .kit-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center} .kit-split .sec-head{margin-bottom:0} .kit-img{margin:0;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -40px rgba(14,38,70,.5)} .kit-img img{width:100%;height:auto} .kit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;width:100%} .kit li{display:flex;align-items:center;gap:10px;font-size:15.5px} .kit li::before{content:"\2713";display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--ok-bg);color:var(--ok);font-size:12px;font-weight:700} .ogrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .ocard{display:grid;gap:6px;align-content:start;padding:20px;border-radius:18px;background:var(--paper)} .ocard p{color:var(--steel);font-size:15px} .ocard .btn{justify-self:start;margin-top:6px} /* About: three cards and the contact band */ .agrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-bottom:clamp(56px,7vw,96px)} .acard{display:grid;gap:10px;align-content:start;padding:24px;border-radius:20px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line)} .acard p{color:var(--steel);font-size:15.5px} .acard-logo{height:40px;width:auto} @media (max-width:900px){ .agrid{grid-template-columns:1fr} .osteps{grid-template-columns:repeat(2,minmax(0,1fr))} .kit-split{grid-template-columns:1fr} .kit-img{max-width:460px} .ogrid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:600px){ /* Phones: steps as compact rows, the good-to-know notes two per row */ .osteps{grid-template-columns:1fr;gap:10px} .osteps li{grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:4px;padding:16px 18px} .onum{grid-row:span 2;width:30px;height:30px;font-size:14px} .ogrid{gap:10px} .ocard{padding:14px 16px}.ocard p{font-size:14px} .kit{grid-template-columns:1fr} .pc{font-size:12px;padding:4px 9px} .pc-two{width:min-content} .pbox b{font-size:20px} } /* Order (owner, 29 Sep 2026): the bag in the header, Add to order on product pages, and the checkout that ends in WhatsApp */ .hdr-r{display:flex;align-items:center;gap:6px} .cartlink{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--navy);transition:background .2s} .cartlink:hover,.cartlink[aria-current="page"]{background:rgba(14,38,70,.07)} .cartlink svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round} .cart-n{position:absolute;top:2px;right:0;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--navy);color:#fff;font-size:11px;font-weight:700;line-height:19px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--paper)} .buy{display:grid;gap:18px;width:100%;max-width:560px} .bprice{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px} .bprice b{font-size:clamp(30px,3.2vw,38px);font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1} .bprice span{font-size:15.5px;color:var(--steel)} .bprice.none{font-size:17px;font-weight:600;color:var(--steel)} .opt{display:grid;gap:10px;justify-items:start;width:100%} .opt-h{font-size:14.5px;font-weight:600;color:var(--ink)} .pills{display:flex;flex-wrap:wrap;gap:8px} .pill{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line);font-size:15.5px;font-weight:600;font-variant-numeric:tabular-nums} .pill.on{background:var(--navy);color:#fff;box-shadow:none} /* The pen add-on: one option to tap; selected, it turns navy like the version pill */ .pick{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:14px 18px;border-radius:18px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line);text-align:left;cursor:pointer;transition:box-shadow .2s,background .2s} .pick:hover{box-shadow:inset 0 0 0 1.5px var(--navy)} .pick input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .pick:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:3px} .pick-c{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #A7B2C0;color:#fff;font-size:13px;font-weight:700;transition:background .2s,box-shadow .2s} .pick.on,.pick:has(input:checked){background:var(--navy);box-shadow:none;color:#fff} .pick.on .pick-c,.pick:has(input:checked) .pick-c{background:#fff;box-shadow:none;color:var(--navy)} .pick.on .pick-c::after,.pick:has(input:checked) .pick-c::after{content:"\2713"} .pick.on .pick-t small,.pick:has(input:checked) .pick-t small{color:#C9D4E3} .pick.on .pick-p,.pick:has(input:checked) .pick-p{color:#fff} .pick-c.plus{background:var(--navy);box-shadow:none} .pick-c.plus::after{content:"+";font-size:18px;line-height:1} .pick-t{display:grid;gap:2px;flex:1;min-width:0} .pick-t b{font-size:16px;font-weight:600} .pick-t small{font-size:13.5px;line-height:1.4;color:var(--steel)} .pick-p{flex:none;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap} .buyrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;width:100%} .buyrow .btn{flex:1 1 200px} .qty{display:inline-flex;align-items:center;height:50px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line)} .qty button{width:46px;height:100%;border-radius:999px;font-size:20px;line-height:1;color:var(--navy);transition:background .2s} .qty button:hover{background:rgba(14,38,70,.06)} .qty input{width:38px;height:100%;border:0;background:transparent;text-align:center;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield} .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .qty input:focus{outline:0} .qty:focus-within{box-shadow:inset 0 0 0 2px var(--navy)} .qty-sm{height:40px}.qty-sm button{width:36px;font-size:18px}.qty-sm input{width:32px;font-size:15px} .added{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;width:100%;padding:12px 16px;border-radius:14px;background:var(--ok-bg);color:var(--ok);font-weight:600} .added.pop{animation:lkin .4s var(--eo) both} .added .tlink{color:var(--navy)} /* Checkout */ .co{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(22px,3.5vw,48px);align-items:start;padding-bottom:clamp(64px,8vw,110px)} .co-main{display:grid;gap:16px;min-width:0} .co-empty{display:grid;gap:18px;justify-items:start;padding:12px 0 60px} .olines{display:grid;gap:10px} .oline{display:grid;grid-template-columns:72px minmax(0,1fr) auto 120px 36px;grid-template-areas:"img t q p x";align-items:center;gap:8px 16px;padding:12px 14px;border-radius:18px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line)} .ol-img{grid-area:img;display:block;width:72px;height:60px;border-radius:10px;overflow:hidden;background:#fff} .ol-img img{width:100%;height:100%;object-fit:contain} .ol-t{grid-area:t;display:grid;gap:2px;min-width:0} .ol-t a{font-size:16px;font-weight:600;color:var(--ink)} .ol-t span{font-size:13.5px;color:var(--steel);font-variant-numeric:tabular-nums} .oline .qty{grid-area:q;justify-self:start} .ol-p{grid-area:p;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} .ol-x{grid-area:x;width:36px;height:36px;border-radius:50%;font-size:22px;line-height:1;color:var(--steel);transition:background .2s,color .2s} .ol-x:hover{background:rgba(14,38,70,.07);color:var(--ink)} .co-form{display:grid;gap:14px;padding:22px;border-radius:20px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line)} .field{display:grid;gap:6px} .field>span{font-size:14.5px;font-weight:600} .field small{font-size:13.5px;font-weight:400;color:var(--steel)} .field input,.field textarea{width:100%;border:0;border-radius:12px;padding:12px 14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:16px;line-height:1.5;resize:vertical} .field input:focus,.field textarea:focus{outline:0;background:var(--white);box-shadow:inset 0 0 0 2px var(--navy)} .field [aria-invalid="true"]{box-shadow:inset 0 0 0 2px #B42318} .check{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45;cursor:pointer} .check input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--navy)} .check input[aria-invalid="true"]{outline:2px solid #B42318;outline-offset:2px} .co-sum{position:sticky;top:calc(var(--hh) + 20px);display:grid;gap:14px;padding:24px;border-radius:22px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -44px rgba(14,38,70,.45)} .sum{display:grid;gap:8px;margin:0} .sum div{display:flex;justify-content:space-between;gap:12px} .sum dt{color:var(--steel)} .sum dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums} .sum .tot{padding-top:12px;border-top:1px solid var(--line);font-size:19px} .sum .tot dt{color:var(--ink);font-weight:600} .co-promo{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--ok-bg);box-shadow:inset 0 0 0 1px var(--ok-line);color:var(--ink);font-size:14.5px;line-height:1.45} .co-promo b{color:var(--ok)} .co-promo .code{flex:none;font-family:var(--code);font-weight:700;font-size:15px;letter-spacing:.08em;padding:4px 10px;border-radius:9px;background:var(--white);box-shadow:inset 0 0 0 1px var(--ok-line);color:var(--ok)} .co-err{padding:10px 14px;border-radius:12px;background:#FDECEA;color:#B42318;font-size:15px;font-weight:600} .co-sent{padding:10px 14px;border-radius:12px;background:var(--ok-bg);color:var(--ok);font-weight:600} .co-sent button{font-weight:600;text-decoration:underline;text-underline-offset:2px} .co-sent a{color:var(--navy);text-decoration:underline;text-underline-offset:3px} .btn-wa{width:100%;height:54px} .btn-wa svg{flex:none;width:20px;height:20px;fill:currentColor} .imgnone{display:grid;place-items:center;width:100%;height:100%;min-height:130px;border-radius:16px;background:var(--tint)} .imgnone b{font-size:18px;font-weight:600;color:var(--ink)} .imgnone-lg{min-height:320px;gap:6px;align-content:center} .imgnone-lg b{font-size:30px;letter-spacing:-.01em} .imgnone-lg small{color:var(--steel);font-size:14px} .gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:rgba(11,26,47,.55)} .gate[hidden]{display:none} html.gated,html.gated body{overflow:hidden} .gate-card{max-width:460px;display:grid;gap:12px;padding:28px;border-radius:22px;background:var(--white);box-shadow:0 40px 90px -40px rgba(11,26,47,.6)} .gate-card p{margin:0;color:var(--ink);font-size:15.5px;line-height:1.55} .gate-card p+p{color:var(--steel)} .gate-card #gate-h{margin:0;color:var(--ink)} .gate-card a{color:var(--navy);text-decoration:underline;text-underline-offset:3px} .gate-act{display:flex;align-items:center;gap:18px;margin-top:6px} .gate-act .btn{flex:none;text-decoration:none} .gate-act .tlink{text-decoration:none;color:var(--steel)} @media (max-width:900px){ .co{grid-template-columns:1fr} .co-sum{position:static} } @media (max-width:600px){ .hdr-r{gap:0} .buyrow .btn{flex-basis:150px} .pick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:12px 14px} .pick-c{grid-row:span 2} .pick-p{grid-column:2} .oline{grid-template-columns:60px minmax(0,1fr) auto;grid-template-areas:"img t x" "img q p";gap:8px 12px;padding:10px 12px} .ol-img{width:60px;height:50px} .co-form,.co-sum{padding:18px} }