*,*::before,*::after{box-sizing:border-box}body{margin:0}img,svg{max-width:100%}
*,*::before,*::after{box-sizing:border-box}body{margin:0}img,svg{max-width:100%}

:root{
  --bg:#FFFFFF; --surf:#FFFFFF; --surf2:#F5F5F7; --surf3:#FAFAFB; --auth:#210F62;
  --plate:#F4F4F4;  /* matches the flat plate baked into the product renders */
  --tx:#1A1C23; --tx2:#5A5F6B; --tx3:#8A8F99;
  --ac:#5B2EE8; --ac-h:#4A22CE; --ac-q:#F2EFFE; --on-ac:#FFFFFF;
  --bd:rgba(26,28,35,.08); --bd2:rgba(26,28,35,.15);
  --dg:#B3261E; --dg-q:#FCF1F0; --wn:#8A5A00; --wn-q:#FBF6ED; --ok:#1E6B4E; --ok-q:#EEF5F2;
  --hdr:rgba(255,255,255,.88);
  --r:10px; --r2:14px;
  --sh:0 1px 2px rgba(26,28,35,.04),0 10px 30px rgba(26,28,35,.06);
  --f:Inter,"SF Pro Display",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--f);font-size:16px;
  line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(34px,5.2vw,58px)} h2{font-size:clamp(25px,3.2vw,38px);letter-spacing:-.022em}
h3{font-size:clamp(18px,2vw,22px);letter-spacing:-.015em} h4{font-size:15px;letter-spacing:-.008em}
p{margin:0}
a{color:var(--ac);text-decoration:none} a:hover{color:var(--ac-h)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
:focus-visible{outline:2.5px solid var(--ac);outline-offset:3px;border-radius:6px}
table{border-collapse:collapse;width:100%}
.n{font-variant-numeric:tabular-nums}
.w{max-width:1240px;margin:0 auto;padding:0 24px}
.w-n{max-width:880px;margin:0 auto;padding:0 24px}
.st{display:flex;flex-direction:column}
.rw{display:flex;align-items:center}
.g4{gap:4px}.g6{gap:6px}.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g28{gap:28px}.g40{gap:40px}.g64{gap:64px}
.mu{color:var(--tx2)}.mu3{color:var(--tx3)}
.sec{padding:clamp(56px,9vw,104px) 0}
.sec-s{padding:clamp(36px,6vw,64px) 0}
.eb{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
.lead{font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--tx2);max-width:60ch}

/* header */
header{position:sticky;top:0;z-index:50;background:var(--hdr);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--bd)}
.hb{display:flex;align-items:center;gap:14px;height:64px}
.bd{display:flex;align-items:center;color:var(--tx);flex:none}
.bd svg{height:32px;width:auto;display:block}
.nv{display:flex;gap:4px;flex:1;justify-content:center}
.nv a{padding:6px 14px;border-radius:999px;color:var(--tx);font-size:14px;font-weight:500}
.nv a:hover{background:var(--surf2);color:var(--tx)}
.nv a[aria-current]{color:var(--ac)}
.ha{display:flex;align-items:center;gap:4px;flex:none;margin-left:auto}
.ib{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;color:var(--tx);position:relative}
.ib:hover{background:var(--surf2)}
.ib .bdg{position:absolute;top:-1px;right:-1px;background:var(--ac);color:var(--on-ac);
  border-radius:999px;min-width:16px;height:16px;font-size:10px;font-weight:700;
  display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg)}
.seg{display:inline-flex;border:1px solid var(--bd2);border-radius:999px;padding:2px;gap:2px;background:var(--surf)}
.seg button{padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--tx2);letter-spacing:.01em}
.seg button:hover{color:var(--tx)}
.seg button[aria-pressed=true]{background:var(--ac);color:var(--on-ac)}
.av{width:30px;height:30px;border-radius:999px;background:var(--ac);color:var(--on-ac);
  display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.02em}

/* buttons */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;
  padding:11px 22px;font-size:15px;font-weight:600;min-height:44px;border:1px solid transparent;
  letter-spacing:-.01em;transition:background .15s,border-color .15s}
.b.p{background:var(--ac);color:var(--on-ac)} .b.p:hover{background:var(--ac-h);color:var(--on-ac)}
.b.s{border-color:var(--bd2);color:var(--tx)} .b.s:hover{background:var(--surf2);color:var(--tx)}
.b.t{color:var(--ac);padding:8px 12px;min-height:0} .b.t:hover{background:var(--ac-q)}
.b.sm{padding:8px 16px;font-size:13.5px;min-height:36px}
.b:disabled{opacity:.4;cursor:not-allowed}
.b.blk{width:100%}

/* cards */
.cd{background:var(--surf);border:1px solid var(--bd);border-radius:var(--r2);overflow:hidden}
.pad{padding:clamp(20px,3vw,28px)}
.gr{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.pc{background:var(--surf);border:1px solid var(--bd);border-radius:var(--r2);
  display:flex;flex-direction:column;color:inherit;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.pc:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:var(--bd2);color:inherit}
.pth{aspect-ratio:1;background:var(--plate);display:grid;place-items:center;position:relative}
.pth svg{width:56%}
/* product renders: square source in a square holder, so cover never crops */
.pim{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;background:var(--plate)}

/* size picker on the product page — one row per size, price alongside, so the
   choice and its cost are read together rather than after the fact */
/* Size buttons: the size is the decision, the price is context, so the size
   leads and the price sits under it smaller. They wrap rather than stacking so
   a product with eight sizes does not become a long column. */
.sizes{display:flex;flex-wrap:wrap;gap:8px}
.szb{display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:82px;padding:10px 14px;border:1.5px solid var(--bd2);border-radius:var(--r);
  color:inherit;text-decoration:none;background:var(--surf);
  transition:border-color .16s,background .16s}
.szb:hover{border-color:var(--ac);background:var(--ac-q);color:inherit}
.szb[aria-current=true]{border-color:var(--ac);background:var(--ac-q);
  box-shadow:inset 0 0 0 1px var(--ac)}
.szb[data-oos=true]{opacity:.5}
.szb[data-oos=true] .szn{text-decoration:line-through}
.szn{font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.szp{font-size:12px;color:var(--tx3);font-variant-numeric:tabular-nums;white-space:nowrap}
.szb[aria-current=true] .szp{color:var(--ac)}
@media (pointer:coarse){ .szb{padding:12px 16px} }
.pb{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.pn{font-size:15px;font-weight:600;letter-spacing:-.012em;line-height:1.25}
.ps{font-size:13px;color:var(--tx2);font-variant-numeric:tabular-nums}
.pr{margin-top:auto;padding-top:10px;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pr .c{font-size:11.5px;font-weight:600;color:var(--tx3);letter-spacing:.03em;margin-right:4px}
.pr .ref{display:block;font-size:11.5px;font-weight:500;color:var(--tx3);letter-spacing:0;margin-top:2px}
.lock{margin-top:auto;padding-top:10px;font-size:12.5px;color:var(--tx3);display:flex;align-items:center;gap:6px}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--surf2);color:var(--tx2);width:fit-content}
.tag.ok{background:var(--ok-q);color:var(--ok)} .tag.ac{background:var(--ac-q);color:var(--ac)}
.tag.wn{background:var(--wn-q);color:var(--wn)} .tag.dg{background:var(--dg-q);color:var(--dg)}

/* forms */
.fl{display:flex;flex-direction:column;gap:6px}
label{font-size:13.5px;font-weight:600;letter-spacing:-.005em}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],select,textarea{
  padding:11px 13px;border:1px solid var(--bd2);border-radius:var(--r);background:var(--surf);
  width:100%;font-size:15px}
input:focus,select:focus,textarea:focus{outline:2.5px solid var(--ac);outline-offset:-1px;border-color:transparent}
.hint{font-size:12.5px;color:var(--tx3);line-height:1.45}
.ck{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--bd);
  border-radius:var(--r);background:var(--surf);cursor:pointer}
.ck:has(input:checked){border-color:var(--ac);background:var(--ac-q)}
.ck input{margin-top:2px;width:19px;height:19px;flex:none;accent-color:var(--ac)}
.ck .t{font-size:14px;line-height:1.5}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* notes */
.nt{padding:14px 16px;border-radius:var(--r);font-size:13.5px;line-height:1.5;
  border:1px solid var(--bd);background:var(--surf2)}
.nt.i{background:var(--ac-q);border-color:transparent}
.nt.d{background:var(--dg-q);border-color:transparent}
.nt.w{background:var(--wn-q);border-color:transparent}
.nt.o{background:var(--ok-q);border-color:transparent}

/* gate */
.gate{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;
  padding:24px;overflow:auto}
.gbox{max-width:520px;width:100%}

/* stats */
.stg{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.stt{background:var(--surf);border:1px solid var(--bd);border-radius:var(--r2);padding:20px}
.stt .k{font-size:12px;font-weight:600;color:var(--tx3);letter-spacing:.02em}
.stt .v{font-size:27px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:5px}
.stt .d{font-size:12px;color:var(--tx2);margin-top:2px}

/* table */
.tw{overflow-x:auto;border:1px solid var(--bd);border-radius:var(--r2);background:var(--surf)}
th{text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tx3);padding:12px 14px;border-bottom:1px solid var(--bd);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--bd);font-size:14px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surf2)}
.tin{padding:6px 9px;font-size:13.5px;width:110px;border-radius:7px}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--bd);overflow-x:auto}
.tabs button{padding:11px 16px;font-size:14px;font-weight:600;color:var(--tx2);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--ac);border-bottom-color:var(--ac)}

/* order lifecycle stepper: state is carried by shape and label as well as
   colour, so it survives a monochrome print and a colour-blind reader */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.stp{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r);font-size:14px}
.stpd{width:23px;height:23px;flex:none;border-radius:999px;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
  border:1.5px solid var(--bd2);color:var(--tx3);background:var(--surf)}
.stp[data-s=done]{color:var(--tx2)}
.stp[data-s=done] .stpd{background:var(--ok);border-color:var(--ok);color:#fff}
.stp[data-s=now]{background:var(--ac-q);font-weight:600}
.stp[data-s=now] .stpd{background:var(--ac);border-color:var(--ac);color:var(--on-ac)}
.stp[data-s=todo]{color:var(--tx3)}
@media (min-width:720px){ .steps{grid-template-columns:1fr 1fr} }

/* pdp */
.pdp{display:grid;gap:48px;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
.buy{position:sticky;top:84px;display:flex;flex-direction:column;gap:18px}
.kv{font-size:14px}
.kv th{text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;color:var(--tx2);
  padding:10px 16px 10px 0;border-bottom:1px solid var(--bd);width:44%}
.kv td{padding:10px 0;border-bottom:1px solid var(--bd);font-variant-numeric:tabular-nums;font-weight:500}
.qty{display:inline-flex;border:1px solid var(--bd2);border-radius:999px;overflow:hidden;align-items:center}
.qty button{width:38px;height:40px;font-size:17px;color:var(--tx)}
.qty button:hover{background:var(--surf2)}
.qty span{width:44px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;font-size:14.5px}

/* misc */
.line{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--bd)}
.ltop{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.lbot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.lbot .u{margin-left:auto;text-align:right}
.mini{aspect-ratio:1;background:var(--plate);border-radius:var(--r);display:grid;place-items:center}
.mini svg{width:64%}
.scrim{position:fixed;inset:0;background:rgba(11,11,15,.5);backdrop-filter:blur(4px);z-index:80;
  display:grid;place-items:center;padding:24px;overflow-y:auto;overscroll-behavior:contain}
/* A tall dialog — the discount form, say — must never grow past the viewport:
   centred overflow is clipped at both ends and cannot be scrolled to. So the
   box is capped, the title and the close button hold still, and only the middle
   scrolls. The close button is therefore always reachable. */
.mdl{background:var(--bg);border:1px solid var(--bd);border-radius:18px;max-width:460px;width:100%;
  padding:28px;box-shadow:0 30px 70px rgba(0,0,0,.3);
  max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
  display:flex;flex-direction:column;overflow:hidden}
.mdl>.st{flex:1;min-height:0}
.mdlb{flex:1;min-height:0;overflow-y:auto;padding:2px}
.skip{position:absolute;left:-9999px;background:var(--ac);color:var(--on-ac);padding:10px 18px;
  border-radius:999px;z-index:200}
.skip:focus{left:14px;top:14px}
footer{border-top:1px solid var(--bd);margin-top:88px;padding:60px 0 40px;background:var(--surf3)}
.fg{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
footer h4{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);margin-bottom:12px}
footer a{display:block;color:var(--tx2);font-size:13.5px;padding:4px 0}
footer a:hover{color:var(--ac)}
.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.hero h1{max-width:15ch} .hero .lead{max-width:52ch}
/* The first row of products should be reachable without scrolling, so the hero
   is shorter than a full section and the band under it starts sooner. */
.sec-hero{padding:clamp(40px,6vw,72px) 0 clamp(26px,3.5vw,40px)}
.sec-tight{padding-top:clamp(24px,4vw,40px)}
/* Stated, not shouted: it belongs under the buttons as a footnote, not as a
   badge above the headline. */
.hruo{font-size:12.5px;line-height:1.45;color:var(--tx3);letter-spacing:.01em;margin-top:-6px}

/* section bands */
.band{background:var(--surf3);border-block:1px solid var(--bd)}
.shd{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
.shd .rw{justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.gr3{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.gr3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gr3{grid-template-columns:1fr}}

/* favourite */
.fav{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:999px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(6px);display:grid;place-items:center;
  color:var(--tx3);border:1px solid var(--bd);z-index:2}
.fav:hover{color:var(--dg);border-color:var(--bd2)}
.fav[aria-pressed=true]{color:var(--dg)}
.fav[aria-pressed=true] svg{fill:var(--dg)}

/* search overlay */
.so{position:fixed;inset:0;z-index:90;background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);
  display:flex;flex-direction:column;align-items:center;padding:0 24px}
.sow{width:100%;max-width:720px;margin-top:12vh;display:flex;flex-direction:column;gap:20px}
.sob{display:flex;align-items:center;gap:14px;background:var(--surf);border:1px solid var(--bd2);
  border-radius:16px;padding:0 20px;box-shadow:var(--sh)}
.sob input{border:none;outline:none;padding:20px 0;font-size:21px;font-weight:500;
  letter-spacing:-.02em;background:transparent;width:100%}
.sob input::placeholder{color:var(--tx3);font-weight:400}
.sor{background:var(--surf);border:1px solid var(--bd);border-radius:16px;overflow:hidden;
  max-height:52vh;overflow-y:auto;box-shadow:var(--sh)}
.sri{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--bd);color:inherit}
.sri:last-child{border-bottom:none}
.sri:hover,.sri:focus{background:var(--surf3);color:inherit}
.sri .th{width:40px;height:40px;border-radius:9px;background:var(--plate);overflow:hidden;display:grid;place-items:center;flex:none}
.sri .th svg{width:70%}

/* language menu */
.lm{position:relative}
.lmd{position:absolute;top:42px;right:0;background:var(--surf);border:1px solid var(--bd);
  border-radius:12px;box-shadow:var(--sh);overflow:hidden;min-width:150px;z-index:60}
.lmd button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 15px;
  font-size:14px;font-weight:500;text-align:left;color:var(--tx)}
.lmd button:hover{background:var(--surf3)}
.lmd button[aria-pressed=true]{color:var(--ac);font-weight:600}
.lmh{display:block;padding:9px 15px 4px;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx3)}
.lmh:not(:first-child){border-top:1px solid var(--bd);margin-top:4px}
.lmc{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--tx3);font-variant-numeric:tabular-nums}
.lmd{min-width:212px}
/* Store picker. Spacing steps 12 / 20 / 32 so the logo, the question and the
   choices read as three separate blocks rather than one crowded column, and the
   whole thing is centred on both axes. */
.sp{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:32px;width:100%;max-width:452px;margin:0 auto}
.splogo{width:min(150px,42vw);display:flex;justify-content:center}
.splogo svg{width:100%;height:auto;display:block}
.sphead{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:40ch}
.sphead h1{margin:0;font-size:clamp(23px,3.4vw,30px);font-weight:600;
  letter-spacing:-.025em;line-height:1.2;text-wrap:balance}
.sphead p{margin:0;font-size:15px;line-height:1.55;color:var(--tx2);text-wrap:pretty}

.stores{display:grid;gap:14px;grid-template-columns:1fr;width:100%;max-width:452px}
@media (min-width:560px){ .stores{grid-template-columns:1fr 1fr} }
.stc{display:grid;gap:7px;justify-items:center;text-align:center;padding:26px 20px 22px;
  border:1.5px solid var(--bd2);border-radius:var(--r2);background:var(--surf);cursor:pointer;
  transition:border-color .16s,box-shadow .16s,transform .16s}
.stc:hover{border-color:var(--ac);transform:translateY(-2px);box-shadow:var(--sh)}
.stc:focus-visible{outline:2.5px solid var(--ac);outline-offset:2px}
.stc[data-sug=true]{border-color:var(--ac);box-shadow:inset 0 0 0 1px var(--ac)}
.stf{font-size:32px;line-height:1;margin-bottom:2px}
.stn{font-size:18px;font-weight:600;letter-spacing:-.015em}
.sts{font-size:12.5px;line-height:1.45;color:var(--tx2);max-width:22ch}
/* PO text preview: monospace so the columns line up the way the factory sees them */
/* Footer locale pills, in the manner of Google Flights: a quiet row of
   labelled chips that state the current setting and open one dialog to change
   it. Currency is shown rather than chosen, because it follows the store. */
.ph3{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.refs{margin:0;padding-left:20px;display:grid;gap:8px;font-size:13.5px;line-height:1.55;color:var(--tx2)}
.refs a{font-variant-numeric:tabular-nums}
.pdesc{margin:0;font-size:14.5px;line-height:1.6;color:var(--tx2);text-wrap:pretty}
.pdx{font-size:12.5px;line-height:1.45;color:var(--tx3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.seq{font:600 12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;
  word-break:break-all;color:var(--tx)}
.sw{display:inline-flex;cursor:pointer}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw span{width:34px;height:20px;border-radius:999px;background:var(--bd2);position:relative;
  transition:background .16s}
.sw span::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform .16s}
.sw input:checked+span{background:var(--ok)}
.sw input:checked+span::after{transform:translateX(14px)}
.sw input:focus-visible+span{outline:2px solid var(--ac);outline-offset:2px}
.thsort{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;
  font:inherit;color:inherit;cursor:pointer;text-align:inherit}
.thsort:hover{color:var(--ac)}
.thsort:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.codechip{font:600 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;
  padding:5px 9px;border-radius:6px;border:1px solid var(--bd2);background:var(--surf2);
  color:var(--tx);cursor:pointer}
.codechip:hover{border-color:var(--ac);color:var(--ac);background:var(--ac-q)}
.fpills{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.fpill{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--bd2);background:var(--surf);color:var(--tx2);cursor:pointer;
  font-size:13px;line-height:1;transition:border-color .16s,background .16s,color .16s}
.fpill:hover{border-color:var(--ac);background:var(--ac-q);color:var(--ac)}
.fpill:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.fpill svg{flex:none;opacity:.75}
.fpill span{color:var(--tx3)}
.fpill strong{font-weight:600;color:var(--tx);letter-spacing:-.005em}
.fpill:hover strong,.fpill:hover span{color:inherit}
@media (max-width:420px){ .fpill{padding:8px 12px;font-size:12.5px} }
.pores{display:grid;gap:6px;margin-top:8px;max-height:300px;overflow-y:auto;
  border:1px solid var(--bd);border-radius:var(--r);padding:6px;background:var(--surf3)}
.porow{display:flex;align-items:center;gap:12px;justify-content:space-between;width:100%;
  padding:9px 11px;border:1px solid transparent;border-radius:8px;background:var(--surf);
  cursor:pointer;text-align:left;color:inherit}
.porow:hover{border-color:var(--ac);background:var(--ac-q)}
.porow:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
.pot{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;overflow-x:auto;
  background:var(--surf2);border:1px solid var(--bd);border-radius:var(--r);padding:14px;margin:0;max-height:52vh}

/* prominent shop search */
.bigsearch{display:flex;align-items:center;gap:14px;background:var(--surf);border:1px solid var(--bd2);
  border-radius:999px;padding:0 24px;max-width:620px;width:100%;margin:0 auto}
.bigsearch input{border:none;outline:none;padding:17px 0;font-size:17px;background:transparent;width:100%}

/* wizard */
.wz{max-width:760px;margin:0 auto}
.pbar{height:4px;background:var(--surf2);border-radius:999px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--ac);border-radius:999px;transition:width .35s ease}
.wsteps{display:flex;gap:8px;justify-content:space-between;font-size:11.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--tx3)}
.wsteps span[data-on=true]{color:var(--ac)}
.opt{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid var(--bd);
  border-radius:12px;background:var(--surf);width:100%;text-align:left;cursor:pointer}
.opt:hover{border-color:var(--bd2);background:var(--surf3)}
.opt[aria-pressed=true]{border-color:var(--ac);background:var(--ac-q)}
.opt .th{width:46px;height:46px;border-radius:10px;background:var(--plate);overflow:hidden;display:grid;place-items:center;flex:none}
.wzacts{display:flex;gap:12px;align-items:center;margin-top:4px}
.wzacts .b{flex:1;min-width:0}
.wzacts .b.p{flex:1.4}
.opt .th svg{width:70%}
/* ───────── mobile drawer ───────── */
.burger{display:none;width:40px;height:40px;border-radius:999px;place-items:center;color:var(--tx)}
.burger:hover{background:var(--surf2)}
.dscrim{position:fixed;inset:0;background:rgba(11,11,15,.34);z-index:70;
  opacity:0;pointer-events:none;transition:opacity .22s}
.dscrim[data-open=true]{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(84vw,320px);background:var(--bg);
  z-index:71;transform:translateX(-100%);transition:transform .26s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:calc(14px + env(safe-area-inset-top)) 0 calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 0 40px rgba(0,0,0,.16)}
.drawer[data-open=true]{transform:none}
.drawer .dh{display:flex;align-items:center;justify-content:space-between;padding:0 18px 16px;
  border-bottom:1px solid var(--bd)}
.drawer .dh svg.lg{height:30px;width:auto}
.drawer nav{display:flex;flex-direction:column;padding:10px 10px 6px}
.drawer nav a{display:flex;align-items:center;gap:12px;padding:14px 14px;border-radius:12px;
  font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--tx);min-height:52px}
.drawer nav a:hover,.drawer nav a:active{background:var(--surf2);color:var(--tx)}
.drawer nav a[aria-current]{color:var(--ac);background:var(--ac-q)}
.dsec{padding:12px 24px 6px;font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tx3)}
.drawer .dfoot{margin-top:auto;padding:16px 20px 0;border-top:1px solid var(--bd);
  display:flex;flex-direction:column;gap:12px}

/* ───────── responsive ───────── */
@media (max-width:1024px){
  .w,.w-n{padding:0 20px}
}
@media (max-width:900px){
  .pdp{grid-template-columns:1fr;gap:32px}
  .buy{position:static}
  .nv{display:none}
  .burger{display:grid}
  .two{grid-template-columns:1fr}
  header .seg{display:none}          /* language lives in the drawer on mobile */
  .hb{gap:8px}
  .sec{padding:clamp(40px,8vw,72px) 0}
}
@media (max-width:680px){
  h1{font-size:clamp(28px,7.6vw,40px)}
  .hero h1{max-width:100%}
  .lead{font-size:16.5px}
  .sec-hero{padding:22px 0 18px}
  .sec-tight{padding-top:20px}
  .hero{gap:15px}
  .hruo{font-size:11.5px;margin-top:-3px}
  .shd{margin-bottom:18px}
  .gr{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .pb{padding:13px;gap:5px}
  .pn{font-size:14px}
  .pr{font-size:16px}
  .pad{padding:18px}
  .stg{grid-template-columns:1fr 1fr;gap:12px}
  .stt{padding:15px}
  .stt .v{font-size:22px}
  .line{grid-template-columns:58px minmax(0,1fr);gap:13px;padding:16px 0}
  .lbot .u{margin-left:0;width:100%;text-align:left;order:3}
  /* wizard steps: numbers only */
  .wsteps{font-size:10.5px;gap:4px}
  .wsteps span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:center}
  .sow{margin-top:6vh}
  .sob input{font-size:17px;padding:16px 0}
  .mdl{padding:22px;border-radius:16px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
  .scrim{padding:12px}
  .fg{grid-template-columns:1fr 1fr;gap:24px}
  .tabs button{padding:10px 13px;font-size:13.5px}
  .opt{padding:13px 14px;gap:12px}
  .opt .th{width:40px;height:40px}
}
@media (max-width:420px){
  .w,.w-n{padding:0 16px}
  .gr{grid-template-columns:1fr;gap:14px}
  .gr3{grid-template-columns:1fr}
  .stg{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr;gap:20px}
  .hb{height:58px}
  .bd svg{height:27px}
  .b{padding:11px 18px}
  .hero .b{width:100%}
  .wzacts{flex-direction:column-reverse;align-items:stretch}
  .wzacts .b,.wzacts .b.p{flex:none;width:100%}
  .hero .rw{width:100%;flex-direction:column}
  .kv th{width:auto;padding-right:12px}
}
/* iOS: never let a focused input zoom the page */
@media (max-width:900px){
  input[type=text],input[type=email],input[type=tel],input[type=password],
  input[type=number],select,textarea{font-size:16px}
  .bigsearch input{font-size:16px}
}
/* comfortable touch targets */
@media (pointer:coarse){
  .ib{width:40px;height:40px}
  .av{width:36px;height:36px}
  .b.t{min-height:40px;padding:9px 14px}
  .qty button{width:44px;height:44px}
  .fav{width:38px;height:38px}
}
/* notch / home-indicator safety */
header{padding-top:env(safe-area-inset-top)}
footer{padding-bottom:calc(36px + env(safe-area-inset-bottom))}
.so{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
/* wide content never pushes the page sideways */
body{overflow-x:hidden}
.tw{-webkit-overflow-scrolling:touch}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

body{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:32px;white-space:pre}