/* Layout: announcement bar → sticky header → home (hero vial cluster, category tiles, product grid, standards, COA proof, FAQ) → lab / guide / faq / about / product pages via hash → dark footer. Entry gate + cart drawer overlay. */
:root{
  color-scheme:light;
  --bg:#ffffff; --soft:#f5f7fd; --surface:#ffffff; --ink:#0d1b45; --muted:#5d6888; --line:#e3e8f3;
  --navy:#26335c; --navy2:#1a2442; --accent:#3d5a99; --chip:#eef2ff; --onnavy:#c9d3f2;
  --c-met:#0e9fae; --c-rec:#16a34a; --c-gh:#7c3aed; --c-skin:#e07a22; --c-cog:#db2777; --c-lon:#65a30d;
  --holo:linear-gradient(115deg,#dbe4f3 0%,#eef1f8 40%,#d6dff0 70%,#e9eef7 100%);
  --display:'Orbitron','Inter Tight',system-ui,sans-serif;
  --body:'Heebo','IBM Plex Sans Arabic','Inter Tight',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
:lang(ar){--body:'IBM Plex Sans Arabic','Heebo',system-ui,sans-serif}
:lang(en){--body:'Inter Tight','Heebo',system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bar{background:var(--navy2);color:var(--onnavy);font-size:12.5px;text-align:center}
.bar .wrap{padding-block:7px}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;background:rgba(255,255,255,.93);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:11px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--navy);direction:ltr;flex:none}
.logo b{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.01em;line-height:1}
.logo b i{font-style:normal;font-weight:400}
.logo small{display:block;font-family:'Inter Tight',sans-serif;font-size:9px;font-weight:500;letter-spacing:.06em;color:var(--muted);margin-top:4px}
nav.main{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
nav.main a{white-space:nowrap;font-weight:500;font-size:14px;color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:10px}
nav.main a:hover{color:var(--ink)}
nav.main a.on{background:var(--chip);color:var(--accent)}
.hright{display:flex;align-items:center;gap:8px;flex:none}
.langs{display:flex;gap:4px}
.langs button{font-size:12px;font-weight:500;padding:5px 10px;border-radius:99px;border:1px solid var(--line);background:var(--surface);cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
nav.main.nav2{display:none}
@media (max-width:900px){.hrow nav.main{display:none}nav.main.nav2{display:flex;padding-bottom:9px}}
@media (max-width:420px){.langs button{padding:5px 8px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--navy);color:#fff;font-weight:600;font-size:14.5px;padding:12px 20px;cursor:pointer;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--accent)}
.btn.ghost{background:var(--surface);color:var(--navy);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--navy)}
.eyebrow{font:700 11.5px var(--mono);letter-spacing:.16em;color:var(--accent);text-transform:uppercase}

/* vial render */
.v{--w:120px;width:calc(var(--w)*.82);flex:none;display:grid;justify-items:center;filter:drop-shadow(0 18px 18px rgba(15,31,92,.18))}
.v-cap{width:70%;height:calc(var(--w)*.19);border-radius:calc(var(--w)*.05) calc(var(--w)*.05) 3px 3px;background:linear-gradient(90deg,#141a2c,#3a4364 45%,#10162a)}
.v-neck{width:60%;height:calc(var(--w)*.07);background:linear-gradient(90deg,#c8cfe0,#f7f8fc 45%,#bcc4d6)}
.v.spray .v-cap{width:30%;height:calc(var(--w)*.32);border-radius:45% 45% 3px 3px;background:linear-gradient(90deg,#d5dae6,#ffffff 45%,#c2c9d8)}
.v.spray .v-neck{width:46%}
.v-body{width:100%;aspect-ratio:1/1.42;border-radius:calc(var(--w)*.09) calc(var(--w)*.09) calc(var(--w)*.13) calc(var(--w)*.13);background:linear-gradient(90deg,rgba(225,232,247,.9),#ffffff 38%,rgba(236,240,250,.95) 80%,rgba(205,214,235,.9));border:1px solid rgba(15,31,92,.14);display:grid;align-items:center;overflow:hidden}
.v-lab{margin-top:8%;background:var(--holo);border-top:calc(var(--w)*.035) solid var(--c,var(--navy));border-bottom:calc(var(--w)*.035) solid var(--navy);display:grid;justify-items:center;gap:calc(var(--w)*.025);padding:calc(var(--w)*.055) 3px;text-align:center;direction:ltr}
.v-br{font:800 calc(var(--w)*.06) var(--display);letter-spacing:.14em;color:var(--navy)}
.v-nm{font:800 calc(var(--w)*.125) 'Inter Tight',sans-serif;color:var(--navy);line-height:1.02;max-width:94%;overflow-wrap:anywhere}
.v-nm.long{font-size:calc(var(--w)*.085)}
.v-mg{font:700 calc(var(--w)*.075) var(--mono);color:#fff;background:var(--navy);border-radius:4px;padding:1px calc(var(--w)*.05)}
.v-ruo{font:700 calc(var(--w)*.04) var(--mono);color:var(--navy);letter-spacing:.06em}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--soft);border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:-30% -10% auto auto;width:70%;height:170%;background:var(--holo);opacity:.45;filter:blur(55px);transform:rotate(-12deg)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:30px;align-items:center;padding-block:40px}
.hero h1{font-size:clamp(30px,5vw,50px);line-height:1.1;margin:12px 0 14px;font-weight:800;text-wrap:balance;color:var(--navy)}
.hero p.lead{margin:0;color:var(--muted);max-width:48ch;font-size:16.5px}
.checks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.checks li{display:flex;gap:10px;align-items:center;font-size:14.5px}
.checks li::before{content:"";width:20px;height:20px;flex:none;border-radius:50%;background:var(--chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5bff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cluster{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:320px;direction:ltr}
.cluster .v{margin-inline:-14px;position:relative}
.cluster .v:nth-child(1),.cluster .v:nth-child(5){--w:96px;z-index:1;opacity:.92}
.cluster .v:nth-child(2),.cluster .v:nth-child(4){--w:124px;z-index:2}
.cluster .v:nth-child(3){--w:168px;z-index:3}
.ring{position:absolute;left:50%;top:52%;width:min(440px,92%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid rgba(47,91,255,.18);box-shadow:0 0 0 26px rgba(47,91,255,.04)}
.float{position:absolute;z-index:4;background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px 12px;font-size:12.5px;box-shadow:0 12px 30px -16px rgba(15,31,92,.4);display:flex;align-items:center;gap:8px;direction:inherit}
.float b{font:700 13px var(--mono);color:var(--navy)}
.float.f1{top:8%;right:2%}.float.f2{bottom:4%;left:0}
@media (max-width:800px){.hero .wrap{grid-template-columns:1fr;padding-block:22px 30px}.cluster{order:-1;min-height:230px}.cluster .v:nth-child(1),.cluster .v:nth-child(5){--w:66px}.cluster .v:nth-child(2),.cluster .v:nth-child(4){--w:88px}.cluster .v:nth-child(3){--w:118px}.cluster .v{margin-inline:-10px}.float{font-size:11.5px;padding:7px 10px}}

/* product photos */
img.pi{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;mix-blend-mode:multiply}
img.pi.th{width:52px;height:52px;border-radius:10px;border:1px solid var(--line);background:#e9ebf0}
.hphoto{align-items:center}
.heroimg{position:relative;z-index:2;width:100%;max-width:460px;height:auto;border-radius:24px;mix-blend-mode:multiply}
.gart .heroimg{max-width:330px}
.hphoto{min-height:0;padding:0;direction:inherit;position:relative}
.hphoto .ring{display:none}
.hphoto .heroimg{max-width:100%;width:100%;mix-blend-mode:normal;box-shadow:0 24px 50px -28px rgba(15,31,92,.55)}
.hphoto .float{background:rgba(255,255,255,.94);backdrop-filter:blur(6px)}
.hphoto .float.f1{top:14px;inset-inline-end:14px;inset-inline-start:auto;bottom:auto;left:auto;right:auto}
.hphoto .float.f2{bottom:14px;inset-inline-start:14px;inset-inline-end:auto;top:auto;left:auto;right:auto}
.hphoto .float.f1{right:14px!important;left:auto!important}
.hphoto .float.f2{left:14px!important;right:auto!important}
@media (max-width:800px){.hphoto .float{font-size:11px;padding:6px 9px}.hphoto .float b{font-size:12px}}
/* hero gallery: the opening picture is a row of slides that is swiped, dragged, or moved with the arrows and dots under it (the controls sit below the picture so they never cover a vial) */
.hgal{flex-direction:column;align-items:stretch;justify-content:center;gap:24px}
/* the two badges sit across the picture's top and bottom edges, half outside it, so they never cover a vial or a box */
.hgal .float{background:#fff;backdrop-filter:none}
.hgal .float.f1{top:0;right:22px!important;transform:translateY(-50%)}
.hgal .float.f2{bottom:0;left:22px!important;transform:translateY(50%)}
.hgv{position:relative}
.hgt{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:24px;background:#0a1230;box-shadow:0 24px 50px -28px rgba(15,31,92,.55);cursor:grab}
.hgt::-webkit-scrollbar{display:none}
.hgt:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hgs{position:relative;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;aspect-ratio:1400/788;overflow:hidden}
.hgal .heroimg{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;box-shadow:none;user-select:none;-webkit-user-drag:none}
.hgvid{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s;pointer-events:none}
.hgvid.on{opacity:1}
.hgc{display:flex;align-items:center;justify-content:center;gap:8px}
.hgb{width:36px;height:36px;flex:none;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s}
.hgb:hover{border-color:var(--accent);color:var(--accent)}
.hgb svg{width:16px;height:16px}
[dir=rtl] .hgb svg{transform:scaleX(-1)}
.hgd{display:flex}
.hgd button{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.hgd button::before{content:"";width:8px;height:8px;border-radius:99px;background:#b9c2dc;transition:width .25s,background .25s}
.hgd button[aria-current=true]::before{width:22px;background:var(--navy)}
.hgb:focus-visible,.hgd button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.price{font:700 16px var(--mono);color:var(--navy);direction:ltr;unicode-bidi:isolate}
.price.na{font:500 12.5px var(--body);color:var(--muted)}
.pprice{font:800 26px var(--mono);color:var(--navy);margin-top:6px;direction:ltr;unicode-bidi:isolate;display:inline-block}
.lp{font:600 12px var(--mono);color:var(--navy);direction:ltr;unicode-bidi:isolate}
.card .stage{padding:0!important;background:#e9ebef!important}
.card .stage .tg{z-index:1}
.tile .mini{margin:0 -14px;display:block}
.tile .mini img.pi{border-top:1px solid var(--line)}
.shot{background:#e9ebef}
/* ads: visuals come from Higgsfield (16:9 files in /ads) and are shown whole; the copy sits in a caption that fades out of the picture's floor, so it never covers a vial and stays sharp and translated */
.ads{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.ad{grid-column:span 2;position:relative;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#090e22 top/100% auto no-repeat;color:#fff;text-decoration:none;isolation:isolate}
.ads.n1 .ad{grid-column:span 6}
.ads.n2 .ad,.ads.n4 .ad,.ads.n5 .ad:nth-child(-n+2){grid-column:span 3}
.ad img,.ad video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .5s}
.ads.n1 .ad img,.ads.n1 .ad video{aspect-ratio:21/9}
.ad video{transition:transform .5s,opacity .4s}
.ad video.adf{opacity:0}
.ad:hover img,.ad:hover video{transform:scale(1.03)}
.ad:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ad .adt{position:relative;flex:1;margin-top:-36px;padding:24px 18px 16px;display:grid;gap:3px;justify-items:start;align-content:start;text-align:start;background:linear-gradient(to bottom,rgba(9,14,34,0) 0,rgba(9,14,34,.8) 20px,#090e22 36px)}
.ad .adk{font:700 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--onnavy)}
.ad b{font-size:clamp(17px,1.75vw,22px);line-height:1.2;font-weight:800;text-wrap:balance}
.ad small{font-size:13.5px;line-height:1.4;color:#dfe5f7}
.ad .adc{margin-top:6px;font-size:13.5px;font-weight:700;display:inline-flex;gap:6px;align-items:center;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:1px}
@media (max-width:820px){.ads{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;scrollbar-width:none}.ads::-webkit-scrollbar{display:none}.ads .ad,.ads.n1 .ad{flex:0 0 86%;scroll-snap-align:start}.ads.n1 .ad{flex-basis:100%}}
html.a11y-still .ad:hover img,html.a11y-still .ad:hover video{transform:none}
/* films: a still picture with a clip that plays over it. The clip file is asked for only when the film is about to play: when it is on screen, or when the visitor presses play. */
.film{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#060b1c;cursor:pointer;isolation:isolate}
.film>img.filmp,.film>video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;mix-blend-mode:normal}
.film>video{opacity:0;transition:opacity .45s}
.film>video.on{opacity:1}
.filmbig,.filmb{padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(8,13,32,.62);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s,transform .2s}
.filmbig{position:absolute;inset:0;margin:auto;z-index:3;width:68px;height:68px}
.filmbig svg{width:30px;height:30px;margin-left:3px}
.film:hover .filmbig{background:rgba(8,13,32,.82);transform:scale(1.06)}
.film.playing .filmbig{display:none}
.filmc{position:absolute;left:12px;bottom:12px;z-index:3;display:none;gap:8px;direction:ltr}
.film.playing .filmc{display:flex}
.filmb{width:38px;height:38px}
.filmb:hover{background:rgba(8,13,32,.86)}
.filmb svg{width:18px;height:18px}
.film .i-son,.film.snd .i-soff{display:none}
.film.snd .i-son{display:block}
.filmbig:focus-visible,.filmb:focus-visible{outline:3px solid #fff;outline-offset:2px}
html.a11y-still .film:hover .filmbig{transform:none}
/* films section of the home page: one large film and the list of all films next to it */
.fm{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:16px;align-items:start}
.fmcard{border-radius:20px;overflow:hidden;background:#090e22;color:#fff}
.fmcap{display:grid;gap:3px;justify-items:start;text-align:start;padding:14px 18px 16px}
.fmk{font:700 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--onnavy)}
.fmcap b{font-size:clamp(17px,1.75vw,22px);line-height:1.2;font-weight:800;text-wrap:balance}
.fmcap small{font-size:13.5px;line-height:1.4;color:#dfe5f7}
.fmc{margin-top:6px;font-size:13.5px;font-weight:700;display:inline-flex;gap:6px;align-items:center;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:1px}
.fmc:focus-visible{outline:3px solid #fff;outline-offset:3px}
.fmlist{display:grid;gap:10px}
.fmi{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer;transition:border-color .2s,background .2s}
.fmi:hover{border-color:var(--accent)}
.fmi[aria-pressed=true]{border-color:var(--navy);background:var(--chip)}
.fmi:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fmth{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#060b1c}
.fmth img{display:block;width:100%;height:100%;object-fit:cover}
.fmth i,.pmk i{position:absolute;inset:0;margin:auto;width:30px;height:30px;border-radius:50%;background:rgba(8,13,32,.66);color:#fff;display:grid;place-items:center}
.fmth i svg,.pmk i svg{width:14px;height:14px;margin-left:2px}
.fmtx{display:grid;gap:2px;min-width:0}
.fmtx b{font-size:14.5px;line-height:1.3;color:var(--navy)}
.fmtx small{font-size:12.5px;color:var(--muted)}
@media (max-width:820px){.fm{grid-template-columns:minmax(0,1fr);gap:12px}.fmlist{display:flex;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;scrollbar-width:none}.fmlist::-webkit-scrollbar{display:none}.fmi{flex:0 0 46%;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start;scroll-snap-align:start}}
/* product page: the film is a second view of the product picture; the two small buttons under the picture switch between them */
.pmed{min-width:0}
.shot .film.pmfilm{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.shot.art.isfilm{aspect-ratio:16/9!important}
.shot.isfilm>img.pi{visibility:hidden}
.pmt{display:flex;gap:10px;margin-top:10px}
.pmb{position:relative;flex:none;width:96px;aspect-ratio:3/2;padding:0;border:2px solid var(--line);border-radius:12px;overflow:hidden;background:#06142e;cursor:pointer;transition:border-color .2s}
.pmb:hover{border-color:var(--accent)}
.pmb[aria-pressed=true]{border-color:var(--navy)}
.pmb:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pmb img{display:block;width:100%;height:100%;object-fit:cover}
.pmk{position:absolute;inset:0;background:rgba(6,11,28,.22)}
.pmd{position:absolute;right:5px;bottom:4px;font:600 10.5px var(--mono);line-height:1.5;color:#fff;background:rgba(6,11,28,.72);border-radius:6px;padding:0 5px;direction:ltr}
/* bundles */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:820px){.bgrid{grid-template-columns:1fr}}
.bcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.bcard:hover{transform:translateY(-3px);box-shadow:0 16px 32px -20px color-mix(in srgb,var(--c) 75%,transparent)}
.bstage{position:relative;background:#eceef3}
.bstage .tg,.savep{position:absolute;top:12px;z-index:1;font-size:11.5px;font-weight:600;border-radius:99px;padding:3px 10px}
.bstage .tg{inset-inline-start:12px;color:var(--c);background:#fff}
.savep{inset-inline-end:12px;color:#fff;background:var(--c-rec)}
.bcard .body{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;flex:1}
.bcard h4{margin:0;font-size:17px;color:var(--navy)}
.bitems{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.bitems a{display:block;font-size:12px;text-decoration:none;color:var(--navy);background:var(--soft);border:1px solid var(--line);border-radius:7px;padding:2px 8px;direction:ltr}
.bprice{display:flex;align-items:baseline;gap:10px;direction:ltr;justify-content:flex-end}
:dir(ltr) .bprice{justify-content:flex-start}
.bprice s{color:var(--muted);font:500 14px var(--mono)}
.tot.disc{color:var(--c-rec)}
.hint{color:var(--accent);font-weight:500}
/* per-product art cards */
.art{position:relative;container-type:inline-size;overflow:hidden}
.art img.pi{mix-blend-mode:normal}
.card .stage.art{border-radius:16px;margin:8px 8px 0}
.ov{position:absolute;left:7%;bottom:8%;z-index:1;max-width:50%;color:#fff;direction:ltr;text-align:left;pointer-events:none}
.ov b{display:block;font-family:'Inter Tight',sans-serif;font-weight:800;line-height:1.04;font-size:min(10cqw,calc(74cqw / var(--n)));text-transform:uppercase;letter-spacing:-.01em;text-shadow:0 2px 14px rgba(0,0,0,.35);word-break:keep-all;overflow-wrap:normal}
.ov small{display:block;margin-top:.5em;font:500 clamp(9px,3.4cqw,14px)/1.3 var(--body);color:rgba(255,255,255,.92);border-left:2px solid rgba(255,255,255,.75);padding-left:.5em;unicode-bidi:plaintext}
.ovt{position:absolute;top:6%;left:7%;z-index:1;color:#fff;font:700 clamp(10px,4.4cqw,18px) 'Inter Tight',sans-serif;letter-spacing:-.01em;opacity:.95;direction:ltr}
.ovt i{font-style:normal;font-weight:400}
/* bundle sparkle */
.bstage{overflow:hidden}
.bstage img.pi{mix-blend-mode:normal}
.spark{position:absolute;inset:0 0 45% 0;pointer-events:none}
.spark i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(255,255,255,.7);opacity:0;animation:tw 3.6s ease-in-out infinite}
.spark i:nth-child(1){left:12%;top:30%;animation-delay:0s}.spark i:nth-child(2){left:82%;top:18%;animation-delay:.6s}
.spark i:nth-child(3){left:30%;top:68%;animation-delay:1.2s}.spark i:nth-child(4){left:66%;top:52%;animation-delay:1.8s}
.spark i:nth-child(5){left:48%;top:12%;animation-delay:2.4s}.spark i:nth-child(6){left:90%;top:70%;animation-delay:3s}
@keyframes tw{0%,100%{opacity:0;transform:translateY(6px) scale(.6)}50%{opacity:.95;transform:translateY(-6px) scale(1)}}
@media (prefers-reduced-motion:reduce){.spark{display:none}}
html.a11y-still .spark{display:none}
/* showcase badges */
.show{position:relative;padding:34px 14px 40px;overflow:clip}
.showcard{background:#fff;border:1px solid var(--line);border-radius:28px;padding:12px;box-shadow:0 30px 60px -36px rgba(15,31,92,.45)}
.photo.wide{aspect-ratio:16/10;border-radius:20px;border:0;position:relative}
.photo.wide img{mix-blend-mode:normal}
.sbadge{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 14px;box-shadow:0 16px 34px -18px rgba(15,31,92,.5);text-decoration:none;color:var(--ink);max-width:62%}
.sbadge b{display:block;font-size:14.5px;line-height:1.25;color:var(--navy)}.sbadge small{display:block;font-size:12px;color:var(--muted)}
.bi{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--chip);color:var(--accent)}
.bi.ok{background:#e6f6ea;color:#16a34a}
.b-tl{top:0;inset-inline-start:0}.b-br{bottom:0;inset-inline-end:8%}
.b-tr{top:6px;inset-inline-end:0}.b-ml{top:46%;inset-inline-start:0}.b-bl{bottom:8px;inset-inline-start:6%}
.pill.dark{position:absolute;top:14px;inset-inline-end:14px;z-index:2;display:flex;align-items:center;gap:8px;background:rgba(20,28,56,.82);color:#fff;border-radius:99px;padding:8px 14px;font-size:13px;font-weight:600;backdrop-filter:blur(6px)}
.dot-on{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.25)}
.dcard{position:absolute;bottom:14px;inset-inline-end:14px;z-index:2;background:rgba(20,28,56,.85);color:#fff;border-radius:16px;padding:10px 16px;backdrop-filter:blur(6px)}
.dcard small{display:block;font-size:12px;color:#93b4ff}.dcard b{font-size:16px}
.fvial{position:absolute;z-index:4;width:clamp(80px,17%,150px);height:auto;filter:drop-shadow(0 18px 22px rgba(10,20,50,.35));pointer-events:none}
.fv-l{bottom:12%;left:-6px;transform:rotate(-12deg)}
.fv-r{bottom:8%;inset-inline-end:-6px;transform:rotate(14deg)}
.docshow .b-bl{bottom:8px;inset-inline-start:4%}
.docshow{padding:64px 30px 64px}.docshow .doc{max-width:440px}
.std{align-items:center}
.askcard{position:relative;border-radius:26px;overflow:hidden;border:10px solid #fff;box-shadow:0 24px 50px -30px rgba(15,31,92,.45);max-width:820px;margin-bottom:22px;aspect-ratio:16/10}
.askcard img{width:100%;height:100%;object-fit:cover;display:block}
.askbar{position:absolute;left:4%;right:4%;bottom:5%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;border-radius:18px;padding:14px 18px;color:#fff;background:linear-gradient(100deg,#3b6fd8,#2f55c7);cursor:pointer;text-align:start;box-shadow:0 14px 30px -14px rgba(30,60,160,.7)}
.askbar b{display:block;font-size:18px}.askbar small{display:block;font-size:13.5px;color:#dbe6ff}
.askbar i{width:42px;height:42px;flex:none;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-style:normal;font-size:20px}
@media (max-width:600px){.sbadge{padding:8px 10px;gap:8px}.sbadge b{font-size:13px}.sbadge small{font-size:11px}.bi{width:32px;height:32px}.dcard b{font-size:14px}.pill.dark{font-size:11.5px;padding:6px 10px}.show{padding:40px 8px 46px}.docshow{padding:64px 14px 70px}}
/* brand photos */
.isph,.card .stage.isph{background:#06142e!important}
.isph img.phimg{object-fit:contain;mix-blend-mode:normal}
.shot.isph{aspect-ratio:auto}
.shot.isph img.phimg{height:auto;aspect-ratio:auto}
.ruochip{position:absolute;bottom:6px;right:6px;z-index:1;background:rgba(6,20,46,.78);color:#fff;font-size:10.5px;font-weight:600;border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:2px 8px;pointer-events:none}
.shot .ruochip{bottom:12px;right:12px;font-size:12.5px;padding:4px 11px}
/* full-bleed 3:2 product images */
.card .stage.art,.shot.art{aspect-ratio:3/2!important;padding:0!important}
.stage.art img.pi,.shot.art img.pi{width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover!important}
.shot.isph img.phimg{height:100%!important}
.ruom{font-size:11.5px;font-weight:600;color:#9a3412!important;background:#fff4e5!important;border:1px solid #fcd9a8!important;border-radius:7px;padding:1px 7px;display:inline-block}
.grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
@media (max-width:520px){.grid{grid-template-columns:1fr}}
/* stock */
.oosb{position:absolute;top:14px;inset-inline-start:14px;z-index:3;background:#334155;color:#fff;font-size:12px;font-weight:700;border-radius:8px;padding:4px 10px}
.isoos .stage img.pi,.bcard:has(.oosb) .bstage img.pi{filter:grayscale(.85) brightness(.85)}
.isoos{opacity:.85}
.add.off{background:#cbd5e1!important;color:#475569!important;cursor:not-allowed}
.cat.outstock{margin-top:18px;padding-top:18px;border-top:1px dashed var(--line)}
.bstage{aspect-ratio:16/9}
.bstage img.bph{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
/* sections */
.sec-block{padding-block:44px 8px;scroll-margin-top:110px}
.sh{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.sh h2{margin:4px 0 0;font-size:clamp(24px,3.4vw,32px);color:var(--navy);line-height:1.15;text-wrap:balance}
.sh a{font-size:14px;font-weight:600;color:var(--accent);text-decoration:none}

/* category tiles */
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:980px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.tile{position:relative;display:grid;gap:10px;align-content:space-between;text-align:start;border:1px solid var(--line);border-radius:18px;padding:16px 14px 0;cursor:pointer;background:linear-gradient(165deg,color-mix(in srgb,var(--c) 16%,#fff),#fff 70%);overflow:hidden;min-height:210px;transition:transform .15s,box-shadow .15s}
.tile:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px color-mix(in srgb,var(--c) 70%,transparent)}
.tile h3{margin:0;font-size:15.5px;line-height:1.3;color:var(--navy)}
.tile small{color:var(--muted);font-size:12.5px}
.tile .mini{display:flex;justify-content:center;align-items:flex-end;gap:0;direction:ltr;margin-bottom:-14px}
.tile .mini .v{--w:62px;margin-inline:-6px}
.tile .mini .v:first-child{--w:74px;z-index:2}

/* tools + product grid */
.tools{display:grid;gap:12px;margin-bottom:6px}
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0 14px}
.search svg{color:var(--muted);flex:none}
.search input{flex:1;min-width:0;border:0;background:transparent;font:16px var(--body);color:var(--ink);padding:13px 0;outline:none}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chips button{white-space:nowrap;font-size:14px;font-weight:500;padding:8px 16px;border-radius:99px;border:1px solid var(--line);background:var(--surface);cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
section.cat{padding-block:14px}
.cat h3.ct{display:flex;align-items:center;gap:10px;font-size:18px;margin:0 0 12px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--c)}
.count{font:500 12px var(--mono);color:var(--muted);background:var(--chip);border-radius:99px;padding:1px 8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
@media (max-width:520px){.grid{grid-template-columns:1fr 1fr;gap:10px}}
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -20px color-mix(in srgb,var(--c) 75%,transparent)}
.card .cover{position:absolute;inset:0;z-index:1}
.card .stage{position:relative;display:grid;place-items:center;padding:38px 10px 14px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 22%,#fff),color-mix(in srgb,var(--c) 6%,#fff) 70%)}
.card .stage .v{--w:96px}
.card .stage .tg{position:absolute;top:10px;inset-inline-start:10px;font-size:11px;font-weight:600;color:var(--c);background:#fff;border-radius:99px;padding:2px 9px}
.card .body{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px;flex:1}
.card h4{margin:0;font-size:15px;line-height:1.3;direction:ltr;text-align:start;font-family:'Inter Tight',var(--body);font-weight:700}
:dir(rtl) .card h4{text-align:right}
.meta{display:flex;flex-wrap:wrap;gap:6px}
.meta span{font-size:11.5px;color:var(--muted);background:var(--soft);border:1px solid var(--line);border-radius:7px;padding:1px 7px}
.meta .pu{font-family:var(--mono);color:var(--navy)}
.add{position:relative;z-index:2;margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:11px;background:var(--navy);color:#fff;font-weight:600;font-size:13.5px;padding:10px 12px;cursor:pointer;transition:background .15s}
.add:hover{background:var(--accent)}
.add.ok{background:var(--c-rec)}
.empty{color:var(--muted);padding-block:24px}

/* standards */
.std{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
@media (max-width:820px){.std{grid-template-columns:1fr}}
.photo{position:relative;border-radius:24px;overflow:hidden;background:var(--soft);border:1px solid var(--line);aspect-ratio:1/1;max-width:100%}
.photo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.photo .float{position:absolute}
.std p{color:var(--muted);margin:10px 0 0;max-width:52ch}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}
.stat{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--surface)}
.stat b{display:block;font:700 22px var(--mono);color:var(--navy);direction:ltr;text-align:start}
:dir(rtl) .stat b{text-align:right}
.stat span{font-size:12.5px;color:var(--muted)}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
@media (max-width:640px){.feats{grid-template-columns:1fr}}
.feat{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--surface);display:grid;gap:4px}
.feat i{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--chip);color:var(--accent);font-style:normal;margin-bottom:4px}
.feat h4{margin:0;font-size:15px}
.feat p{margin:0;font-size:13.5px;color:var(--muted)}

/* COA proof */
.proofbox{display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center;background:linear-gradient(140deg,#f2f5ff,#fbf4ff 60%,#f2fffa);border:1px solid var(--line);border-radius:26px;padding:30px}
@media (max-width:820px){.proofbox{grid-template-columns:1fr;padding:20px}}
.proofbox h2{margin:6px 0 10px;font-size:clamp(24px,3.4vw,34px);line-height:1.15;color:var(--navy);text-wrap:balance}
.proofbox p{color:var(--muted);margin:0 0 18px;max-width:50ch}
.doc{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 24px 50px -30px rgba(15,31,92,.5);direction:ltr;font-size:12.5px;max-width:420px;justify-self:center;width:100%}
.doc .dh{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--navy);padding-bottom:8px;margin-bottom:10px}
.doc .dh b{font:800 12px var(--display);letter-spacing:.12em;color:var(--navy)}
.doc .dh span{font:700 10px var(--mono);color:var(--muted)}
.doc table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px}
.doc td{padding:6px 4px;border-bottom:1px solid var(--line)}
.doc td:first-child{color:var(--muted)}
.doc .meter{height:8px;border-radius:99px;background:var(--chip);margin-top:12px;overflow:hidden}
.doc .meter i{display:block;height:100%;width:99%;background:linear-gradient(90deg,var(--accent),#7c3aed)}
.doc .samp{position:absolute;top:-10px;right:14px;background:#fff4e5;color:#b45309;border:1px solid #fcd9a8;font:700 10.5px var(--mono);letter-spacing:.08em;border-radius:99px;padding:3px 10px}
.doc .v{position:absolute;--w:84px;bottom:-26px;left:-18px}

/* faq + generic */
.faqhome{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:start}
@media (max-width:820px){.faqhome{grid-template-columns:1fr}}
.qa{display:grid;gap:10px}
.qa details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px 18px}
.qa summary{cursor:pointer;font-weight:600;padding-block:12px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.qa summary::after{content:"+";color:var(--accent);font-weight:700}
.qa details[open] summary::after{content:"–"}
.qa p{margin:0 0 14px;color:var(--muted)}
.view{padding-block:30px 10px}
.crumb{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--accent);text-decoration:none;margin-bottom:14px}
:is(h1,h2).sec{font-size:clamp(24px,3.4vw,30px);margin:6px 0 4px;color:var(--navy);text-wrap:balance}
.sub{color:var(--muted);margin:0 0 22px;max-width:64ch}
h3.st{font-size:19px;color:var(--navy);margin:30px 0 12px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px}
.steps{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.steps .panel{display:grid;gap:6px;align-content:start}
.steps em{font:700 11px var(--mono);font-style:normal;color:var(--accent);letter-spacing:.1em}
.steps h4{margin:0;font-size:16px}.steps p{margin:0;color:var(--muted);font-size:14px}
.tag{display:inline-block;font-size:12px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);padding:3px 10px;border-radius:99px}
.gd{max-width:800px;display:grid;gap:14px}
.gd h3{font-size:18px;margin:0 0 10px;color:var(--navy)}
.gd ul{margin:0;padding-inline-start:20px;display:grid;gap:7px}
.tbl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tbl div{padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px;min-width:0}
.tbl div:nth-child(odd){color:var(--muted);background:var(--soft)}
.tbl div:nth-last-child(-n+2){border-bottom:0}
.tbl .m{font-family:var(--mono);font-size:12.5px;direction:ltr;unicode-bidi:isolate}
.coas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.coa{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:var(--surface)}
.coa .v{--w:46px;filter:none}
.coa h4{margin:0;font-size:14px;direction:ltr;text-align:start;font-family:'Inter Tight',var(--body)}
:dir(rtl) .coa h4{text-align:right}
.coa dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0 6px;font-size:12px}
.coa dt{color:var(--muted)}.coa dd{margin:0;font-family:var(--mono)}
.pend{display:inline-block;font-size:11.5px;font-weight:600;color:#b45309;background:#fff4e5;border-radius:99px;padding:2px 9px}
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center}
@media (max-width:820px){.about{grid-template-columns:1fr}}
.about p{color:var(--muted);font-size:16px;max-width:56ch}
.vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
@media (max-width:640px){.vals{grid-template-columns:1fr}}

/* reconstitution calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:820px){.calc{grid-template-columns:1fr}}
.calc .panel{display:grid;gap:18px;margin:0}
.fld{display:grid;gap:6px;min-width:0}
.fld>span,.fld>label{font-size:14px;font-weight:600;color:var(--navy)}
.fld small{color:var(--muted);font-size:12.5px;line-height:1.5}
.inp{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;direction:ltr;min-width:0}
.inp:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--chip)}
.inp input{font:600 17px var(--mono);border:0;background:transparent;color:var(--ink);padding:11px 12px;width:100%;min-width:0}
.inp input:focus{outline:none}
.inp b{font:600 13px var(--mono);color:var(--muted);padding:0 14px;flex:none}
.calc select{font:500 15px var(--body);color:var(--ink);border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:11px 12px;width:100%;min-width:0}
.seg{display:flex;gap:6px}
.seg button{flex:1 1 0;min-width:0;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 6px;cursor:pointer;font:600 13.5px var(--mono);color:var(--navy);display:grid;gap:1px;line-height:1.3;text-align:center}
.seg button small{font:500 11.5px var(--body);color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.seg button[aria-pressed="true"] small{color:var(--onnavy)}
.inrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}
.inrow .seg button{align-content:center;flex:none;padding:8px 11px}
@media (max-width:420px){.inrow{grid-template-columns:1fr}.inrow .seg button{flex:1 1 0}}
.tx{font-family:var(--body);letter-spacing:0}
.clive{display:none}
@media (max-width:820px){.clive:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:0;border-radius:10px;background:var(--chip);color:var(--navy);font:600 14px/1.4 var(--body);padding:9px 12px;cursor:pointer;text-align:start}
 .clive span+span{font-size:12.5px;color:var(--muted);flex:none}
 .clive [dir=ltr]{white-space:nowrap}
 .clive.warn{background:#fff4e5;color:#9a3412}}
@media (max-width:420px){.seg.syrs{display:grid;grid-template-columns:1fr 1fr}}
.clink{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--accent);text-decoration:none}
.cres{background:var(--soft);gap:14px!important;scroll-margin-top:90px}
@media (min-width:821px){.cres{position:sticky;top:84px}}
.big{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-height:56px}
.big b{font:800 clamp(42px,7vw,56px)/1 var(--mono);color:var(--navy);direction:ltr}
.big span{font-weight:600;color:var(--navy);font-size:15px}
.cempty{margin:0;color:var(--muted);align-self:center}
.syr{position:relative;margin:4px 18px 0 30px;direction:ltr}
.syr::before{content:"";position:absolute;right:100%;top:50%;width:30px;height:2px;background:#8a94b0;transform:translateY(-50%)}
.syr::after{content:"";position:absolute;left:100%;top:50%;width:13px;height:28px;border:2px solid var(--navy);border-left:0;border-radius:0 5px 5px 0;transform:translateY(-50%)}
.syr-b{position:relative;height:40px;border:2px solid var(--navy);border-radius:7px;background:#fff;overflow:hidden}
.syr-f{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--accent) 28%,#fff);transition:width .3s}
.syr-f.on{border-right:2px solid var(--accent)}
.syr-f.over{background:#fed7aa;border-color:#ea580c}
.syr-t{position:absolute;inset:0;opacity:.6;background:repeating-linear-gradient(90deg,var(--navy) 0 1px,transparent 1px var(--mi)) top/100% 26% no-repeat,repeating-linear-gradient(90deg,var(--navy) 0 1.5px,transparent 1.5px var(--ma)) top/100% 52% no-repeat}
.syr-s{display:flex;justify-content:space-between;margin:2px 18px 0 30px;font:500 11.5px var(--mono);color:var(--muted);direction:ltr}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kv div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:2px;min-width:0}
.kv small{color:var(--muted);font-size:12.5px}
.kv b{font:700 16px var(--mono);color:var(--navy);overflow-wrap:anywhere}
.cwarn{margin:0;font-size:13.5px;color:#9a3412;background:#fff4e5;border-radius:10px;padding:9px 12px}
.cnote{margin:0;font-size:12.5px;color:var(--muted)}
.cact{display:flex;gap:8px;flex-wrap:wrap}
.cact .add{margin:0;padding:10px 16px}
.add:disabled{opacity:.5;cursor:not-allowed}

/* product page */
.pp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:30px;align-items:start}
@media (max-width:780px){.pp{grid-template-columns:1fr}}
.shot{position:relative;border-radius:24px;border:1px solid var(--line);overflow:hidden;aspect-ratio:1/1;max-width:100%;display:grid;place-items:center;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 22%,#fff),#f7f8fd 75%)}
.shot img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.shot .v{--w:min(200px,42vw)}
.pinfo h1{margin:8px 0 6px;font-size:clamp(26px,4.4vw,38px);line-height:1.12;color:var(--navy);direction:ltr;text-align:start;font-family:'Inter Tight',var(--body);font-weight:800}
:dir(rtl) .pinfo h1{text-align:right}
.pinfo h4{margin:20px 0 6px;font-size:14px;color:var(--navy)}
.pinfo p{margin:0}
.note{margin-top:18px;font-size:13px;color:var(--muted);border:1px dashed var(--line);border-radius:12px;padding:10px 12px}
.buy{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:20px}
.buy .add{padding:12px 22px;font-size:15px;margin:0}
.step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);direction:ltr}
.step button{width:34px;height:34px;border:0;background:var(--soft);cursor:pointer;font-size:17px;color:var(--navy)}
.step span{min-width:32px;text-align:center;font:600 14px var(--mono)}
.related{margin-top:36px}

/* footer (dark) */
footer{margin-top:56px;background:var(--navy2);color:var(--onnavy)}
footer .wrap{padding-block:34px 26px;display:grid;gap:24px;grid-template-columns:1.6fr 1fr 1fr 1fr}
@media (max-width:980px) and (min-width:721px){footer .wrap{grid-template-columns:1fr 1fr 1fr}footer .disc{grid-column:1/-1}}
footer .lnk{display:block;background:none;border:0;padding:0;margin:0;font:inherit;font-size:13.5px;line-height:2.1;color:var(--onnavy);cursor:pointer;text-align:start}
footer .lnk:hover{color:#fff}
/* terms page */
.legal{max-width:820px}
.legal h2{font-size:18px;color:var(--navy);margin:28px 0 8px;text-wrap:balance}
.legal p,.legal li{line-height:1.85}
.legal p{margin:0 0 10px}
.legal ul{margin:0 0 10px;padding-inline-start:22px}
.legal li+li{margin-top:5px}
mark.fill{background:#fff4e5;color:#9a3412;border-radius:4px;padding:0 4px;font-weight:600}
@media (max-width:720px){footer .wrap{grid-template-columns:1fr 1fr}footer .disc{grid-column:1/-1}}
footer .logo{color:#fff;margin-bottom:12px}
footer .logo small{color:var(--onnavy)}
footer h4{margin:0 0 8px;font-size:14px;color:#fff}
footer p{font-size:13px;margin:0;line-height:1.8}
footer a{font-size:13.5px;text-decoration:none;display:block;line-height:2.1;color:var(--onnavy)}
footer a:hover{color:#fff}
.copy{font:500 11.5px var(--mono);margin-top:14px;direction:ltr;unicode-bidi:isolate;opacity:.75}

/* cart */
.cartbtn{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--navy);flex:none}
.badge{position:absolute;top:-7px;inset-inline-end:-7px;min-width:19px;height:19px;border-radius:10px;background:var(--accent);color:#fff;font:600 11px var(--mono);display:grid;place-items:center;padding:0 5px}
.drawer{position:fixed;inset:0;z-index:30;background:rgba(5,10,30,.45);display:flex;justify-content:flex-end}
.pane{width:min(430px,100%);height:100%;background:var(--surface);display:flex;flex-direction:column;gap:12px;padding:calc(16px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));box-shadow:0 0 40px rgba(5,10,30,.2)}
.ph{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ph h3{margin:0;font-size:19px;color:var(--navy)}
.x{border:0;background:var(--chip);color:var(--ink);width:36px;height:36px;border-radius:10px;font-size:19px;cursor:pointer}
.lines{flex:1;min-height:0;overflow:auto;display:grid;gap:10px;align-content:start}
.line{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px}
.line .v{--w:40px;filter:none}
.line .nm{display:block;font-weight:600;font-size:14px;font-family:'Inter Tight',var(--body);text-decoration:none}
.line small{color:var(--muted);font-size:12px}
.line .end{display:grid;gap:6px;justify-items:end}
.rm{border:0;background:none;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline;padding:0}
.dfoot{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:10px}
.tot{display:flex;justify-content:space-between;gap:10px;font-weight:600}
.tot span:last-child{color:var(--muted);font-weight:500;font-size:13px;text-align:end}
form.co{display:grid;gap:10px}
form.co label{display:grid;gap:4px;font-size:13px;font-weight:500}
form.co input,form.co textarea{font:16px var(--body);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);width:100%}
form.co .chk{display:flex;align-items:flex-start;gap:8px;font-weight:400;color:var(--muted)}
form.co .chk input{width:auto;margin-top:4px}
.err{color:#c2410c;font-size:13px;margin:0}
.wide{width:100%;padding:13px;font-size:15px;margin:0}
.add.ghost{background:var(--chip);color:var(--navy)}
pre.sum{white-space:pre-wrap;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px;font:13.5px/1.7 var(--body);margin:0;unicode-bidi:plaintext}
.emptyc{color:var(--muted);text-align:center;padding:30px 10px}

/* entry gate */
.gate{position:fixed;inset:0;z-index:50;overflow:auto;background:var(--soft);display:grid;grid-template-rows:minmax(min-content,1fr) auto;justify-items:center;align-items:start;overscroll-behavior:contain;padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.gate::before{content:"";position:fixed;inset:0;background:var(--holo);opacity:.35;filter:blur(60px)}
/* bottom gap as a real row, so it stays when the card is taller than the screen and scrolls */
.gate::after{content:"";height:calc(16px + env(safe-area-inset-bottom,0px))}
.gbox{position:relative;width:min(980px,100%);margin-block:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(15,31,92,.35)}
.gart{position:relative;background:linear-gradient(160deg,#eef3ff,#f6eefe 55%,#eefbf7);display:grid;align-content:space-between;padding:26px;gap:10px}
.gart .ey{font:700 11px var(--mono);letter-spacing:.3em;color:var(--accent);direction:ltr}
.gart h3{margin:6px 0 0;font-size:22px;color:var(--navy)}
.gart .cluster{min-height:250px}
.gart .cluster .v:nth-child(1),.gart .cluster .v:nth-child(5){--w:70px}
.gart .cluster .v:nth-child(2),.gart .cluster .v:nth-child(4){--w:92px}
.gart .cluster .v:nth-child(3){--w:126px}
.gart .pill{justify-self:center;font:600 11px var(--mono);letter-spacing:.2em;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 14px;direction:ltr}
.gtxt{padding:28px;display:grid;gap:14px;align-content:start}
.gtop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.gtxt h2{margin:4px 0 0;font-size:clamp(24px,3.6vw,32px);line-height:1.2;color:var(--navy);text-wrap:balance}
.grow{display:grid;grid-template-columns:auto 1fr;column-gap:14px;border-block:1px solid var(--line)}
.grow b{font:700 13px var(--mono);color:var(--accent);padding-block:11px;direction:ltr}
.grow span{color:var(--muted);font-size:14px;padding-block:11px}
.grow b:first-of-type,.grow span:first-of-type{border-bottom:1px solid var(--line)}
.gtxt h4{margin:6px 0 0;font-size:18px}
.gtxt p.gs{margin:0;color:var(--muted);font-size:14px}
.gchk{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff;cursor:pointer;font-size:15px}
.gchk input{width:20px;height:20px;accent-color:var(--navy);flex:none;margin:0}
.gchk:has(input:checked){border-color:var(--navy)}
.genter{width:100%;padding:15px;border:0;border-radius:14px;background:var(--navy);color:#fff;font-weight:700;font-size:16px;cursor:pointer}
.genter:disabled{background:#a9b1c7;cursor:not-allowed}
.gfoot{font-size:12.5px;color:var(--muted);margin:0}
.gfoot a{color:var(--muted)}
@media (max-width:760px){.gbox{grid-template-columns:1fr}.gart{padding:18px}.gart .cluster{min-height:190px}.gart .cluster .v:nth-child(1),.gart .cluster .v:nth-child(5){--w:52px}.gart .cluster .v:nth-child(2),.gart .cluster .v:nth-child(4){--w:70px}.gart .cluster .v:nth-child(3){--w:96px}.gtxt{padding:20px}}
/* chat assistant + accessibility widget */
.fab{position:fixed;z-index:40;width:56px;height:56px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 26px -8px rgba(15,31,92,.55);color:#fff}
.fab.chat{background:var(--navy);bottom:calc(18px + env(safe-area-inset-bottom,0px));left:calc(18px + env(safe-area-inset-left,0px))}
.fab.a11y{background:#1d4ed8;width:50px;height:50px;top:50%;right:calc(10px + env(safe-area-inset-right,0px));transform:translateY(-50%)}
/* WhatsApp: floating button sits under the cart drawer (z 30) and entry gate */
.fab.wa{z-index:29;background:#25d366;bottom:calc(18px + env(safe-area-inset-bottom,0px));right:calc(18px + env(safe-area-inset-right,0px))}
.fab.wa:hover{background:#1ebe5a}
.add.wa{background:#1da851;text-decoration:none}
.add.wa:hover{background:#178a43}
.walink{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:#178a43;font-weight:600;font-size:14px;text-decoration:none}
.walink:hover{text-decoration:underline}
footer a.wafoot{display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#fff;border-radius:99px;padding:7px 15px;line-height:1.3;margin:2px 0 16px;font-weight:600}
footer a.wafoot:hover{background:#1ebe5a;color:#fff}
.chatfoot a{color:#178a43;font-weight:600;text-decoration:none}
.msg a.wamsg{color:#178a43}
.msg a.wamsg svg{vertical-align:-3px;margin-inline-end:5px}
.msg a.wamsg span{white-space:nowrap}
.chatbox{position:fixed;z-index:45;bottom:calc(86px + env(safe-area-inset-bottom,0px));left:calc(16px + env(safe-area-inset-left,0px));width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 120px));background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 70px -25px rgba(15,31,92,.5);display:flex;flex-direction:column;overflow:hidden}
.chathead{background:var(--navy2);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px}
.chathead .on{width:10px;height:10px;border-radius:50%;background:#22c55e;flex:none}
.chathead b{display:block;font-size:15.5px}.chathead small{color:var(--onnavy);font-size:12px}
.chathead button{margin-inline-start:auto;border:0;background:rgba(255,255,255,.12);color:#fff;width:32px;height:32px;border-radius:9px;font-size:18px;cursor:pointer}
.msgs{flex:1;min-height:0;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--soft)}
.msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.55;white-space:pre-line}
.msg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-start-start-radius:4px}
.msg.me{background:var(--navy);color:#fff;align-self:flex-end;border-start-end-radius:4px}
.msg a{color:var(--accent);font-weight:600}
.qchips{display:flex;flex-wrap:wrap;gap:6px}
.qchips button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 12px;font-size:13px;cursor:pointer;color:var(--navy)}
.qchips button:hover{border-color:var(--navy)}
.chatin{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:#fff}
.chatin input{flex:1;min-width:0;font:16px var(--body);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--ink)}
.chatin input:focus{outline:none;border-color:var(--navy)}
.chatin button{border:0;background:var(--navy);color:#fff;border-radius:12px;width:44px;cursor:pointer;display:grid;place-items:center}
.chatfoot{font-size:11.5px;color:var(--muted);text-align:center;padding:0 10px 8px;background:#fff}
.a11yp{position:fixed;z-index:46;top:50%;right:calc(70px + env(safe-area-inset-right,0px));transform:translateY(-50%);width:min(280px,calc(100vw - 90px));max-height:calc(100vh - 40px);overflow:auto;background:#fff;color:#111;border:2px solid #1e293b;border-radius:14px;box-shadow:0 20px 50px -20px rgba(0,0,0,.5);padding:14px}
.a11yp h3{margin:0 0 10px;font-size:17px;color:#111}
.a11yp button{display:flex;align-items:center;gap:10px;width:100%;border:1px solid #e2e8f0;background:#fff;color:#111;border-radius:10px;padding:9px 11px;margin-bottom:6px;font-size:14px;cursor:pointer;text-align:start}
.a11yp button[aria-pressed="true"]{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
.a11yp .sep{border-top:1px solid #cbd5e1;margin:10px 0}
.stmt{position:fixed;inset:0;z-index:60;background:rgba(5,10,30,.5);display:grid;place-items:center;padding:16px}
.stmt .card2{background:#fff;color:#111;border-radius:16px;max-width:640px;width:100%;max-height:85vh;overflow:auto;padding:22px}
.stmt h3{margin:0 0 10px;font-size:20px}.stmt p,.stmt li{font-size:14.5px;line-height:1.75}
.stmt .x{float:inline-end}
/* accessibility modes (applied to page regions so fixed widgets keep working) */
html.a11y-z1 :is(.bar,header,main,footer){zoom:1.12}
html.a11y-z2 :is(.bar,header,main,footer){zoom:1.25}
html.a11y-z3 :is(.bar,header,main,footer){zoom:1.4}
html.a11y-zm1 :is(.bar,header,main,footer){zoom:.9}
html.a11y-gray :is(.bar,header,main,footer,.gate){filter:grayscale(1)}
html.a11y-contrast :is(.bar,header,main,footer,.gate){filter:contrast(1.45)}
html.a11y-invert :is(.bar,header,main,footer,.gate){filter:invert(1) hue-rotate(180deg)}
html.a11y-invert :is(main,header,footer) img{filter:invert(1) hue-rotate(180deg)}
html.a11y-light :is(.bar,header,main,footer) *{background-image:none!important}
html.a11y-light :is(header,main,footer,.hero,.card,.tile,.proofbox,.panel,.feat,.stat,.bcard,.doc){background-color:#fff!important;color:#000!important}
html.a11y-light :is(main,footer) :is(p,span,small,li,h1,h2,h3,h4,dt,dd,summary){color:#000!important}
html.a11y-links a{text-decoration:underline!important;outline:2px solid #f59e0b;outline-offset:2px}
html.a11y-font *{font-family:Arial,Helvetica,sans-serif!important;letter-spacing:.01em}
html.a11y-still *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}