/* ============================================================
   THE CHOICE v4 — app.css (2026-09-07 review rebuild)
   Mobile-first (390). Pure white, one accent. Instrument-shop
   editorial: mono labels, index numbers, hairlines, one red.
   Type scale 11/12/13/15/17/22/28/36 + display. Logical properties
   throughout (RTL-ready). Duration tokens 120/240/400/600.
   ============================================================ */

:root{
  --paper:#ffffff;
  --tile:#f4f5f7;                     /* every product image sits on this */
  --ink:#0f0f11;
  --ink-2:#3f4046;                    /* secondary text  10.2:1 */
  --ink-3:#5f6067;                    /* labels, meta     6.26:1 (was #9a9ba3 = 2.77) */
  --ink-4:#9a9ba3;                    /* DECORATION ONLY — never text */
  --ph:#6f7079;                       /* placeholders     4.9:1 */
  --hair:rgba(15,15,17,.12);
  --hair-2:rgba(15,15,17,.07);
  --line:rgba(15,15,17,.32);          /* input underline  ≈3:1 */
  /* ---- the one red, split into the three jobs it actually does (2026-09-10) ----
     --brand   the logo. Frozen. Never a UI state.
     --accent  INDEX (editorial numbering) + NOW (where you are / what you picked).
               Always drawn as geometry on an edge: a rule, a ring, a tick.
               CHANGE THIS ONE LINE to re-tint the whole interface (e.g. #0b4ea2).
     --danger  faults only. Frozen red, always text + icon, never an edge mark.
     Before the split all three shared --red, so the accent could not move without
     turning the logo and every validation error with it. --red is kept only as a
     legacy alias; nothing in this file reads it any more. */
  --brand:#e20202;
  --accent:#e20202;
  --danger:#e20202;
  --danger-wash:#fff5f5;
  --red:#e20202;                      /* deprecated alias — use one of the three above */
  --blue:#0b4ea2;                     /* Anwani plate — a depiction of a real object, not a palette colour */
  --wa:#11803f;                       /* 5.0:1 with white */
  --rule:rgba(15,15,17,.11);          /* structural boundary hairline */
  --tick:24px;                        /* accent head-segment that opens a section rule */

  --e:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --d1:120ms;--d2:240ms;--d3:400ms;--d4:600ms;

  --ls-tight:-.03em;--ls-snug:-.01em;--ls-wide:.08em;--ls-label:.10em;

  --f11:11px;--f12:12px;--f13:13px;--f15:15px;--f17:17px;--f22:22px;--f28:28px;--f36:36px;

  --pad:clamp(20px,5.2vw,64px);
  --max:1440px;                       /* 2026-09-11: was 1280 — a 1920 screen kept 640px empty */
  --hdr:56px;
  --bar-h:78px;
  --stage:380px;                      /* hero stage height; product visible = .68 × (stage/.84) */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);

  --f:'Inter Tight','IBM Plex Sans Arabic','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fb:'Inter','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fm:'JetBrains Mono','IBM Plex Sans Arabic',ui-monospace,'SFMono-Regular',Menlo,monospace;
  color-scheme:light;
}
html[lang="ar"]{
  --f11:12px;--f12:13px;--f13:14px;
  --f:'IBM Plex Sans Arabic','Inter Tight',system-ui,sans-serif;
  --fb:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;
  --fm:'IBM Plex Sans Arabic','JetBrains Mono',ui-monospace,monospace;
  --ls-tight:0;--ls-snug:0;--ls-wide:0;--ls-label:0;
}
/* dark tokens kept ready (not auto-applied; the brand ships light) */
.theme-dark{--paper:#0f0f11;--tile:#1a1b1f;--ink:#f4f4f6;--ink-2:#c9cad0;--ink-3:#a8a9b0;--hair:rgba(255,255,255,.14);--hair-2:rgba(255,255,255,.08);--line:rgba(255,255,255,.4);color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{
  min-height:100%;margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--fb);font-size:var(--f15);line-height:1.55;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0}
::selection{background:var(--ink);color:#fff}
/* no insertion caret on static text: Firefox caret browsing (F7) drew a blinking bar wherever
   you clicked. Only real inputs keep one. */
html{caret-color:transparent}
input,textarea,select,[contenteditable]:not([contenteditable="false"]){caret-color:auto}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[tabindex="-1"]:focus-visible{outline:none}
[hidden]{display:none!important}
bdi{unicode-bidi:isolate}
html[lang="ar"] *{letter-spacing:0!important}
html[lang="ar"] .mono,html[lang="ar"] .mono-r,html[lang="ar"] [class*="__m"],html[lang="ar"] .price i{text-transform:none}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;inset-inline-start:12px;top:-60px;z-index:300;background:var(--ink);color:#fff;padding:12px 16px;font-size:var(--f13);transition:top var(--d2)}
.skip:focus{top:12px}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.mark{fill:var(--brand)}

.mono{font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-3);font-weight:400}
.mono-r{font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);color:var(--accent);font-weight:500;font-style:normal}
.muted{color:var(--ink-3)}

/* ---------- masked line swap (site signature) — zero overlap ---------- */
.ls{position:relative;overflow:hidden;display:block}
.ls__l{display:block;transition:transform 260ms var(--e),opacity 260ms var(--e)}
.ls__l--in{transform:translateY(110%)}
.ls__l--out{position:absolute;inset:0;transform:translateY(-110%);transition-duration:180ms}

/* ---------- stagger entrance (first reveal only) ---------- */
.st{opacity:0;transform:translateY(14px);transition:opacity var(--d3) var(--e),transform var(--d3) var(--e)}
.st--in{opacity:1;transform:none}

/* ---------- section head ---------- */
.shead{display:flex;align-items:baseline;gap:12px;padding:0 var(--pad);margin-bottom:22px}
.shead__t{font-family:var(--f);font-size:var(--f22);font-weight:600;letter-spacing:var(--ls-snug);line-height:1.15}
.shead--tight{padding:0;margin-bottom:16px}
.shead--tight .shead__t{font-size:var(--f17)}
.shead__go{font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink-2);margin-inline-start:auto;
  border-block-end:1px solid var(--hair);padding:12px 0 2px;margin-block:-12px 0;flex:0 0 auto;min-height:44px;display:inline-flex;align-items:flex-end}
@media(min-width:768px){.shead__t{font-size:var(--f28)} .shead--tight .shead__t{font-size:var(--f22)}}

/* ---------- price lockup ---------- */
.price{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap;font-family:var(--f);font-weight:500;font-size:var(--f15);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-snug)}
.price i{font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-label);color:var(--ink-3);font-style:normal;text-transform:uppercase}
.price--lg{font-size:var(--f22)}

/* ---------- CTA ---------- */
.cta{min-height:52px;background:var(--ink);color:#fff;display:inline-grid;place-items:center;grid-auto-flow:column;gap:10px;padding:0 20px;
  font-family:var(--f);font-size:var(--f13);font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  position:relative;transition:transform var(--d1) var(--e),opacity var(--d2),background var(--d2)}
html[lang="ar"] .cta{letter-spacing:0;text-transform:none;font-size:var(--f15)}
.cta:active{transform:scale(.985)}
.cta .ls{width:100%;text-align:center}
.cta[disabled],.cta[aria-busy="true"]{background:#2a2b30;opacity:.75;cursor:progress}
.cta--ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cta--wa{background:var(--wa)}
.cta .ico{width:18px;height:18px}
.linky{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--fm);font-size:var(--f12);
  letter-spacing:var(--ls-label);text-transform:uppercase;border-block-end:1px solid var(--ink);padding:8px 2px}
.linky .ico{width:16px;height:16px}
.empty__mark{display:block;width:40px;height:40px;margin:0 auto 16px}
.empty__mark svg{fill:none;stroke:var(--ink-4);stroke-width:14}
.img-ph{display:grid;place-items:center;width:100%;height:100%;font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);color:var(--ink-3);text-transform:uppercase}

/* ---------- benefit bar ---------- */
.bbar{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;background:var(--tile);color:var(--ink-2);font-size:var(--f11);
  padding:7px 12px;line-height:1.3;margin-top:calc(var(--hdr) + var(--sat))}
@media(min-width:480px){.bbar{font-size:var(--f12);gap:10px;padding:8px var(--pad)}}
@media(max-width:479px){.bbar .ico{display:none}}
.bbar span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.bbar .ico{width:14px;height:14px}
.bbar i{color:var(--ink-3);font-style:normal}

/* ============================================================
   LAYERS: 5 views · 39 pdp bar (desktop) · 40 header · 50 bars · 60 sheets ·
   65 menu · 70 cart · 80 search · 90 seal · 95 image viewer · 200 boot
   ============================================================ */
main{position:relative;z-index:5;overflow-x:clip}
.view{display:none;background:var(--paper)}
.view.is-in{display:block;animation:viewin 200ms var(--e)}
.view.is-out{display:block;position:absolute;inset:0 0 auto;z-index:4;pointer-events:none;animation:viewout 200ms var(--e) forwards}
@keyframes viewin{from{opacity:0}to{opacity:1}}    /* opacity only — a transform would re-anchor the fixed bars */
@keyframes viewout{to{opacity:0}}
.v-home .hsec,.v-home .foot{background:var(--paper)}

/* ============================================================
   BOOT
   ============================================================ */
.boot{position:fixed;inset:0;z-index:200;background:var(--paper);display:grid;place-items:center;align-content:center;
  transition:opacity var(--d3) var(--e),visibility var(--d3);animation:bootcap 0s 1.6s forwards}   /* CSS safety cap: gone after 1.6 s even if the script is slow */
@keyframes bootcap{to{opacity:0;visibility:hidden;pointer-events:none}}
body:not(.is-booting) .boot{opacity:0;visibility:hidden;pointer-events:none}
.boot__mark{width:48px;height:48px;overflow:visible;margin-bottom:22px}
.boot__mark path{fill:none;stroke:var(--brand);stroke-width:18;stroke-dasharray:3000;stroke-dashoffset:3000;
  animation:draw .5s var(--e) forwards,fillin .25s var(--e) .4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{fill:var(--brand);stroke-width:0}}
.boot__w{font-family:var(--f);font-size:var(--f13);font-weight:500;letter-spacing:.42em;text-indent:.42em;opacity:0;animation:bootw .4s var(--e) .2s forwards}
.boot__by{font-family:var(--fm);font-size:var(--f11);letter-spacing:.3em;text-indent:.3em;color:var(--ink-3);margin-top:8px;opacity:0;animation:bootw .4s var(--e) .3s forwards}
@keyframes bootw{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{position:fixed;top:0;inset-inline:0;z-index:40;height:calc(var(--hdr) + var(--sat));
  padding:var(--sat) calc(var(--pad) - 10px) 0;display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);transition:box-shadow var(--d3)}
.hdr.scrolled{box-shadow:0 1px 0 var(--hair-2)}
body[data-view="home"] .hdr:not(.scrolled){background:rgba(255,255,255,.72)}
.hdr__l,.hdr__i{display:flex;align-items:center;gap:0}
.brand{display:flex;align-items:center;gap:9px;white-space:nowrap;padding:10px 6px;min-height:44px}
.brand__mark{width:16px;height:16px;fill:var(--brand);flex:0 0 auto}
/* the mark sat ~2px below the capitals: the row was baseline-aligned and the mark centred on a
   20px line box. Now both words share one baseline in a box exactly one line high, and Inter /
   JetBrains capitals are centred in a 1.0 line box — so centring the mark centres it on the caps. */
.brand__txt{display:inline-flex;align-items:baseline;gap:9px;line-height:1}
.brand__word{font-family:'Inter Tight',var(--f);font-size:var(--f13);font-weight:600;letter-spacing:.16em}
.brand__by{font-family:var(--fm);font-size:var(--f11);letter-spacing:.14em;color:var(--ink-3);display:none}
.icobtn{width:44px;height:44px;display:grid;place-items:center;position:relative;transition:opacity var(--d1)}
.icobtn:active{opacity:.55}
.icobtn b{position:absolute;top:4px;inset-inline-end:2px;min-width:16px;height:16px;padding:0 4px;
  font-family:var(--fm);font-size:var(--f11);font-weight:500;line-height:16px;text-align:center;
  background:var(--accent);color:#fff;border-radius:999px;transform:scale(0);transition:transform var(--d2) var(--e)}
.icobtn b.on{transform:scale(1)}
.icobtn b.pulse{animation:pulse var(--d3) var(--e)}
@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
.navlinks{display:none;gap:22px;margin-inline-end:14px}
.navlinks a{font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2);padding:12px 0;position:relative;min-height:44px;display:inline-flex;align-items:center}
.navlinks a::after{content:'';position:absolute;inset-inline-start:0;bottom:8px;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d3) var(--e)}
html[dir="rtl"] .navlinks a::after{transform-origin:100% 50%}
.navlinks a.on{color:var(--ink)}
.navlinks a.on::after,.navlinks a:hover::after{transform:scaleX(1)}
.langbtn{display:none;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:var(--f12);letter-spacing:var(--ls-wide);color:var(--ink-2);padding:0 10px;min-height:44px;margin-inline-end:4px}
html[lang="ar"] .langbtn{font-family:'JetBrains Mono',monospace;letter-spacing:.08em}
.langbtn:hover{color:var(--ink)}
.hdr__secure{display:none;align-items:center;gap:6px;padding-inline-end:6px;font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2)}
/* checkout: collapse the header to brand + secure. The account button is deliberately hidden here too —
   checkout carries its own sign-in / signed-in line (#coAcct), so the header stays distraction-free. */
.hdr__secure .ico{width:15px;height:15px}
body.is-checkout .menubtn,body.is-checkout #searchBtn,body.is-checkout #ordersBtn,body.is-checkout #cartBtn,body.is-checkout .navlinks{display:none}
body.is-checkout .hdr__secure{display:inline-flex}
body.is-checkout .hdr{background:var(--paper)}
@media(min-width:768px){
  .navlinks{display:flex}
  .langbtn{display:inline-flex;align-items:center}
  .menubtn{display:none}
  .brand__by{display:inline}
}

/* ============================================================
   FULL-SCREEN MENU
   ============================================================ */
.menu{position:fixed;inset:0;z-index:65;background:var(--paper);display:flex;flex-direction:column;overflow:auto;
  visibility:hidden;opacity:0;transition:opacity var(--d3) var(--e),visibility var(--d3)}
.menu.on{visibility:visible;opacity:1}
.menu__top{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--sat) + 8px) calc(var(--pad) - 10px) 4px var(--pad)}
.menu__nav{padding:1vh var(--pad) 0}
.menu__nav a{display:flex;align-items:baseline;gap:16px;padding:10px 0;
  font-family:var(--f);font-size:clamp(28px,7.6vw,36px);font-weight:600;letter-spacing:var(--ls-tight);line-height:1.05;
  opacity:0;transform:translateY(20px);transition:opacity var(--d3) var(--e),transform var(--d3) var(--e)}
.menu.on .menu__nav a{opacity:1;transform:none}
.menu__nav a i{font-family:var(--fm);font-size:var(--f11);font-style:normal;color:var(--accent);letter-spacing:var(--ls-label)}
.menu__cats{padding:3vh var(--pad) 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mtile{display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--tile);min-height:44px;
  opacity:0;transform:translateY(14px);transition:opacity var(--d3) var(--e),transform var(--d3) var(--e)}
.menu.on .mtile{opacity:1;transform:none}
.mtile__img{display:block;height:72px}
.mtile__img img{height:100%;width:auto;margin:0 auto;object-fit:contain}
.mtile b{font-family:var(--f);font-size:var(--f15);font-weight:500;display:flex;justify-content:space-between;align-items:baseline}
.mtile u{text-decoration:none;font-family:var(--fm);font-size:var(--f11);color:var(--ink-3);letter-spacing:var(--ls-label)}
.menu__util{padding:3vh var(--pad) 0;display:flex;flex-direction:column;gap:2px;margin-top:auto}
.menu__util a,.menu__util button{display:flex;align-items:center;gap:10px;min-height:44px;font-size:var(--f13);color:var(--ink-2);text-align:start}
.menu__util [data-lang-toggle]{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.menu__util .ico{width:18px;height:18px}
.menu__foot{padding:14px var(--pad) calc(20px + var(--sab));border-top:1px solid var(--hair-2);margin-top:12px}

/* ============================================================
   HOME — hero
   ============================================================ */
.hero{position:relative;display:flex;flex-direction:column;padding:0 0 22px;background:transparent}
.hero__stage{position:relative;container-type:inline-size;z-index:2;margin-top:6px}
.hero__frame{position:relative;--box:min(calc(var(--stage) / .84),100cqw);height:calc(var(--box) * .84);overflow:hidden;touch-action:pan-y}
.hero__item{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity var(--d3) var(--e),transform var(--d3) var(--e);transform:scale(.97)}
.hero__item.on{opacity:1;pointer-events:auto;transform:none;transition-delay:40ms}
.hero__item.off-l{transform:translateX(-9%) scale(.96)}
.hero__item.off-r{transform:translateX(9%) scale(.96)}
.hero__img{position:absolute;left:50%;top:0;height:var(--box);width:var(--box);max-width:none;object-fit:contain;margin-left:calc(-.5 * var(--box));
  user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 2px 2px rgba(15,15,17,.05))}
.hero__shadow{position:absolute;left:50%;bottom:-6px;height:14px;width:calc(var(--box) * var(--sw,.5));margin-left:calc(-.5 * var(--box) * var(--sw,.5));
  background:radial-gradient(50% 50% at 50% 50%,rgba(15,15,17,.16),rgba(15,15,17,0) 70%)}
/* carousel controls: one always-visible row UNDER the picture — previous · ticks · next.
   They used to be hover-only ghost circles painted over the product. */
.hero__ctl{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px}
.hero__text{padding:8px var(--pad) 0;display:flex;flex-direction:column;gap:8px;position:relative;z-index:3}
.hero__kick{display:flex;align-items:baseline;gap:10px}
.hero__kick .mono-r{color:var(--ink)}   /* product № is metadata ink; red stays for section indexes/states */
.hero__count{margin-inline-start:auto}
.hero__h{font-family:var(--f);font-size:26px;font-weight:600;letter-spacing:var(--ls-tight);line-height:1.1;margin-top:2px}
/* the title sits in the .ls slide mask (overflow:hidden) and a 1.1 line box is shorter than Arabic
   below-baseline ink: the dots of the final ي were cut, so "ميني" read "مينى" (and "Mug" lost its g).
   The mask gets room below without moving anything (device run 2026-09-12). .22em still cut 1.2 px of
   the dots at 40 px, and the subtitle cut 0.9 px of "تناظري" — measured by tools/verify-devices.mjs §2. */
.hero__h.ls,.hero__sub.ls{padding-bottom:.3em;margin-bottom:-.3em}
.hero__sub{font-size:var(--f12);color:var(--ink-2);font-family:var(--fm);letter-spacing:.02em}
.hero__ticks{display:flex;align-items:center}
.hero__ticks button{width:30px;height:44px;display:grid;place-items:center}
.hero__ticks i{width:14px;height:2px;background:var(--ink-4);transition:var(--d2) var(--e)}
.hero__ticks button.on i{background:var(--accent);width:22px}
@media(hover:hover){.hero__ticks button:not(.on):hover i{background:var(--ink-3)}}
.hero__claim{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.hero__claim em{font-family:var(--f);font-style:normal;font-weight:600;font-size:var(--f17);letter-spacing:var(--ls-snug)}
.hero__claim span{font-size:var(--f13);color:var(--ink-2)}
.hero__chips{display:flex;flex-wrap:wrap;gap:6px 7px}
.hero__chips li{display:inline-flex;align-items:center;gap:4px;font-size:var(--f11);color:var(--ink-2);font-family:var(--fm);white-space:nowrap}
@media(min-width:480px){.hero__chips li{font-size:var(--f12)}}
.hero__chips .ico{width:13px;height:13px}
.hero__bar{display:flex;align-items:center;gap:16px;margin-top:8px}
.hero__bar .cta{flex:1}
.hero__bar .price i{font-size:var(--f11)}
.v-home.is-in .hero__frame{animation:stagein var(--d4) var(--e) both}
@keyframes stagein{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---- home sections ---- */
.hsec{padding:56px 0 8px;max-width:var(--max);margin-inline:auto;width:100%}
.hsec:last-of-type{padding-bottom:56px}
.ctiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 var(--pad)}
.ctile{display:flex;flex-direction:column;background:var(--tile);min-height:200px;position:relative;overflow:hidden}
.ctile__img{display:block;height:130px;position:relative;overflow:hidden}
.ctile__img img{position:absolute;left:50%;top:0;height:calc(130px / .84);width:auto;aspect-ratio:1;transform:translateX(-50%);transition:transform var(--d3) var(--e)}
.ctile:hover .ctile__img img{transform:translateX(-50%) translateY(-4px)}
.ctile__t{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;padding:12px 14px 14px;gap:2px 8px;align-items:center}
.ctile__t b{grid-column:1;font-family:var(--f);font-size:var(--f17);font-weight:600;letter-spacing:var(--ls-snug);display:flex;align-items:baseline;gap:8px}
.ctile__t b i{font-family:var(--fm);font-size:var(--f11);font-style:normal;font-weight:400;color:var(--ink-3);letter-spacing:var(--ls-label)}
.ctile__t u{grid-column:1;text-decoration:none;font-family:var(--fm);font-size:var(--f11);color:var(--ink-3);letter-spacing:var(--ls-label)}
.ctile__t .ico{grid-column:2;grid-row:1/3;width:18px;height:18px;color:var(--ink-2);transition:transform var(--d3) var(--e)}
.ctile:hover .ctile__t .ico{transform:translateX(4px)}
html[dir="rtl"] .ctile__t .ico,html[dir="rtl"] .pdp__back .ico,html[dir="rtl"] .ab__prom .ico:last-child,html[dir="rtl"] .ordlist .ico{transform:scaleX(-1)}

.railwrap{position:relative}
.rail{display:flex;gap:12px;overflow-x:auto;contain:inline-size;padding:2px var(--pad) 22px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .card{flex:0 0 min(72vw,300px);scroll-snap-align:start;box-shadow:inset 0 0 0 1px var(--hair-2)}
.rail__arrow{position:absolute;top:40%;width:44px;height:44px;display:none;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 0 0 1px var(--hair);z-index:3}
.rail__arrow--l{inset-inline-start:calc(var(--pad) - 22px)}.rail__arrow--r{inset-inline-end:calc(var(--pad) - 22px)}
.has-arrows .rail__arrow{display:grid}
@media(hover:none){.rail__arrow{display:none!important}}
html[dir="rtl"] .rail__arrow .ico{transform:scaleX(-1)}

.trust{border-top:1px solid var(--hair-2);padding:0 var(--pad)}
.trust article{display:grid;grid-template-columns:32px 1fr;gap:2px 12px;padding:18px 0;border-bottom:1px solid var(--hair-2)}
.trust article .ico{width:22px;height:22px;color:var(--ink);grid-row:1/3;margin-top:2px}
.trust article h3{font-family:var(--f);font-size:var(--f17);font-weight:600;letter-spacing:var(--ls-snug)}
.trust article p{grid-column:2;color:var(--ink-2);font-size:var(--f13);max-width:52ch}
.claim{display:block;text-align:center;padding:48px var(--pad) 8px}
.claim em{display:block;font-family:var(--f);font-style:normal;font-weight:600;font-size:clamp(27px,7.6vw,40px);letter-spacing:var(--ls-tight);line-height:1.05}
.claim .mono{display:inline-block;margin-top:16px;border-block-end:1px solid var(--hair);padding:12px 0 3px;color:var(--ink-2);transition:color var(--d2);font-size:var(--f12)}
.claim:hover .mono{color:var(--ink)}

@media(min-width:768px){
  :root{--stage:520px}
  .hero{display:grid;grid-template-columns:58% 42%;align-items:center;max-width:var(--max);margin:0 auto;width:100%;min-height:min(720px,calc(100svh - var(--hdr)));padding:0 var(--pad) 24px}
  .hero__stage{margin-top:0}
  .hero__text{padding:0 0 0 24px;gap:10px}
  html[dir="rtl"] .hero__text{padding:0 24px 0 0}
  .hero__h{font-size:34px}
  .hero__claim em{font-size:20px}
  .ctiles{grid-template-columns:repeat(4,1fr);gap:16px}
  .ctile{min-height:300px}
  .ctile__img{height:200px}
  .ctile__img img{height:calc(200px / .84)}
  .trust{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;border-top:0}
  .trust article{border-top:1px solid var(--hair-2)}
}
@media(min-width:1280px){:root{--stage:640px} .hero__h{font-size:40px} .hero__text{padding-inline-start:40px}}
@media(min-width:1800px){:root{--stage:720px}}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--hair);margin-top:24px;position:relative;background:var(--paper)}
.foot__in{padding:32px var(--pad) calc(28px + var(--sab));max-width:var(--max);margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.foot__brand{grid-column:1/-1}
@media(max-width:767px){.foot__grp:nth-of-type(1){grid-row:span 2}.foot__grp:nth-of-type(2),.foot__grp:nth-of-type(3){grid-column:2}.foot__grp a{min-height:40px}}
.lockup{display:flex;align-items:center;gap:10px}
.lockup .mark{width:18px;height:18px}
.lockup b{font-family:'Inter Tight',var(--f);font-size:var(--f13);font-weight:600;letter-spacing:.16em}
.lockup span{font-family:var(--fm);font-size:var(--f11);letter-spacing:.14em;color:var(--ink-3)}
.lockup__t{display:inline-flex;align-items:baseline;gap:10px;line-height:1}
.foot__tag{font-family:var(--f);font-size:var(--f15);font-weight:500;letter-spacing:var(--ls-snug);margin-top:12px;color:var(--ink-2)}
.foot__wa,.foot__mail{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--f13);color:var(--ink);margin-top:6px;margin-inline-end:16px}
.foot__wa .ico,.foot__mail .ico{width:18px;height:18px}
.foot__grp{display:flex;flex-direction:column}
.foot__grp h4{font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.foot__grp a{font-size:var(--f13);color:var(--ink-2);min-height:44px;display:inline-flex;align-items:center;transition:color var(--d2)}
.foot__grp a:hover{color:var(--ink)}
.foot__meta{grid-column:1/-1;border-top:1px solid var(--hair-2);padding-top:18px;display:grid;gap:14px}
.paymarks{display:flex;flex-wrap:wrap;gap:6px}
.paymarks li{font-family:var(--fm);font-size:var(--f11);letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--hair);padding:0 8px;height:24px;display:inline-flex;align-items:center;border-radius:2px}
.foot__legal{display:flex;flex-direction:column;gap:4px;font-family:var(--fm);font-size:var(--f11);letter-spacing:.02em;color:var(--ink-3);line-height:1.5}
.foot__legal a{border-block-end:1px solid var(--hair)}
.foot__lang{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:var(--f12);color:var(--ink-2);justify-self:start}
.foot__lang .ico{width:16px;height:16px}
@media(min-width:768px){
  .foot__in{grid-template-columns:1.4fr repeat(3,1fr);gap:26px 24px}
  .foot__brand{grid-column:auto}
  .foot__grp{grid-row:auto;grid-column:auto}
  .foot__meta{grid-template-columns:1fr auto;align-items:end}
  .foot__legal{grid-column:1;grid-row:2}
  .foot__lang{grid-column:2;grid-row:1/3;align-self:end}
}

/* ============================================================
   SHOP
   ============================================================ */
.v-shop{padding:calc(var(--hdr) + var(--sat) + 14px) 0 0}
.shop__top{padding:0 var(--pad) 4px;display:flex;align-items:baseline;justify-content:space-between;max-width:var(--max);margin-inline:auto}
.shop__h{font-family:var(--f);font-size:clamp(30px,8vw,38px);font-weight:600;letter-spacing:var(--ls-tight)}
.chipbar{display:flex;gap:16px;overflow-x:auto;padding:8px var(--pad) 0;scrollbar-width:none;border-bottom:1px solid var(--hair-2);
  position:sticky;top:calc(var(--hdr) + var(--sat));z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}
.chipbar.overflowing{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 92%,transparent 100%)}
html[dir="rtl"] .chipbar.overflowing{-webkit-mask-image:linear-gradient(270deg,#000 0%,#000 92%,transparent 100%);mask-image:linear-gradient(270deg,#000 0%,#000 92%,transparent 100%)}
.chipbar::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:14px 2px;font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink-2);
  transition:color var(--d2) var(--e);white-space:nowrap;position:relative;min-height:44px}
.chip sup{font-size:var(--f11);letter-spacing:0;margin-inline-start:3px;color:var(--ink-3);vertical-align:super;line-height:0}
@media(max-width:399px){.chip sup{display:none}}
.chip::after{content:'';position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d3) var(--e)}
html[dir="rtl"] .chip::after{transform-origin:100% 50%}
.chip.on{color:var(--ink)}
.chip.on sup{color:var(--accent)}
.chip.on::after{transform:scaleX(1)}
.shop__ctl{display:flex;gap:8px;padding:8px var(--pad) 0;max-width:var(--max);margin-inline:auto}
.ctlbtn{display:inline-flex;align-items:center;gap:8px;padding:0 4px;min-height:44px;
  font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2);transition:color var(--d2);position:relative}
.ctlbtn:active,.ctlbtn:hover{color:var(--ink)}
.ctlbtn .ico{width:16px;height:16px}
.ctlbtn b{font-weight:500;color:var(--ink);letter-spacing:.04em}
.ctlbtn b:empty{display:none}
#filterCount{color:var(--accent)}
.fchips{display:flex;gap:8px;flex-wrap:wrap;padding:8px var(--pad) 0;max-width:var(--max);margin-inline:auto}
.fchips:empty{display:none}
.fchip{display:inline-flex;align-items:center;gap:8px;padding:0 12px;min-height:40px;border:1px solid var(--hair);
  font-family:var(--fm);font-size:var(--f12);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);transition:border-color var(--d2)}
.fchip:hover{border-color:var(--ink)}
.fchip .ico{width:14px;height:14px}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--paper);border-block:1px solid var(--hair-2);margin-top:12px;overflow:hidden;
  padding-inline:calc(var(--pad) - 14px);max-width:var(--max);margin-inline:auto;width:100%}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1200px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.grid .card{box-shadow:-1px 0 0 var(--hair-2),0 1px 0 var(--hair-2)}   /* left+bottom rules: no orphan line after the last card */
html[dir="rtl"] .grid .card{box-shadow:1px 0 0 var(--hair-2),0 1px 0 var(--hair-2)}
.grid--first .card{animation:cardin var(--d3) var(--e) both;animation-delay:calc(var(--i,0) * 20ms)}
.grid--fade{animation:viewin var(--d1) var(--e)}
@keyframes cardin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.card{background:var(--paper);padding:12px 14px 16px;position:relative;display:flex;flex-direction:column;gap:6px}
.card__cover{position:absolute;inset:0;z-index:1}
.card__no{position:absolute;top:12px;inset-inline-end:14px;z-index:2;font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);color:var(--ink-3)}
.card__tag{position:absolute;top:10px;inset-inline-start:14px;z-index:2;font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-wide);text-transform:uppercase;
  color:var(--ink);background:var(--tile);padding:0 7px;height:20px;display:inline-flex;align-items:center;border-radius:2px}
.card__imgw{aspect-ratio:1/1;position:relative;background:var(--tile);overflow:hidden;margin-top:18px}
.card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform var(--d4) var(--e),opacity var(--d3) var(--e)}
.card__img--alt{opacity:0}
@media(hover:hover){
  .card:has(.card__img--alt):hover .card__img:not(.card__img--alt){opacity:0}
  .card:hover .card__img--alt{opacity:1}
  .card:hover .card__img{transform:scale(1.02)}
  .card:hover .card__add{background:var(--ink);color:#fff;border-color:var(--ink)}
}
.card__n{font-family:var(--f);font-size:var(--f15);font-weight:500;line-height:1.3;letter-spacing:var(--ls-snug);margin-top:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.card__m{font-family:var(--fm);font-size:var(--f12);letter-spacing:.02em;color:var(--ink-3)}
.swatches{display:inline-flex;gap:6px;min-height:14px;align-items:center}
.sw{display:inline-block;width:var(--s,12px);height:var(--s,12px);border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(15,15,17,.18)}
.sw.on{box-shadow:0 0 0 1px #fff,0 0 0 2px var(--ink)}
.card__f{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:4px}
.card__add{min-width:72px;height:40px;padding:0 12px;border:1px solid var(--hair);display:inline-grid;place-items:center;font-family:var(--fm);font-size:var(--f12);
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink);transition:border-color var(--d2) var(--e),background var(--d2) var(--e),color var(--d2),transform var(--d1) var(--e);position:relative}
.card__add::before{content:'';position:absolute;inset:-2px}   /* 44px hit area */
.card__add:active{transform:scale(.96)}
.card__add.done{background:var(--ink);border-color:var(--ink);color:#fff}
.card__add .ls{width:100%;text-align:center}

.shop__empty{padding:56px var(--pad) 40px;text-align:center;max-width:var(--max);margin-inline:auto}
.shop__empty h2{font-family:var(--f);font-size:var(--f22);font-weight:600;letter-spacing:var(--ls-snug)}
.shop__empty p{color:var(--ink-2);font-size:var(--f13);margin:8px auto 18px;max-width:38ch}
.shop__empty .cta{width:min(100%,320px)}
.shop__empty .linky{display:inline-flex;margin-top:14px}

/* ---------- bottom sheet (mobile) / popover (desktop) ---------- */
.sheet{position:fixed;inset:0;z-index:60;visibility:hidden}
.sheet.on{visibility:visible}
.sheet__scrim{position:absolute;inset:0;background:rgba(15,15,17,.34);opacity:0;transition:opacity var(--d3) var(--e)}
.sheet.on .sheet__scrim{opacity:1}
.sheet__panel{position:absolute;inset-inline:0;bottom:0;background:#fff;padding:10px var(--pad) calc(22px + var(--sab));
  transform:translateY(102%);transition:transform 360ms var(--e);max-height:76svh;overflow:auto}
.sheet.on .sheet__panel{transform:none}
.sheet__grip{width:36px;height:4px;background:var(--hair);margin:2px auto 18px;border-radius:99px}
.sheet__t{font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.sheet__grp{margin-bottom:20px}
.sheet__opts{display:flex;flex-wrap:wrap;gap:8px}
.sheet__opts--col{flex-direction:column;align-items:stretch}
.sopt{padding:0 16px;min-height:44px;border:1px solid var(--hair);color:var(--ink-2);display:inline-flex;align-items:center;
  font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-wide);text-transform:uppercase;transition:var(--d2) var(--e);text-align:start}
.sopt:active{transform:scale(.97)}
.sopt.on{border-color:var(--ink);color:#fff;background:var(--ink)}
.sheet__apply{width:100%;margin-top:4px}
.sheet__clear{width:100%;text-align:center;min-height:44px;font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2)}
@media(min-width:768px) and (min-height:501px){
  .sheet__scrim{background:transparent}
  .sheet__panel{inset:auto;top:calc(var(--hdr) + 112px);inset-inline-start:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));width:340px;padding:18px 20px 16px;
    box-shadow:0 12px 40px -12px rgba(15,15,17,.25),0 0 0 1px var(--hair);transform:translateY(-6px);opacity:0;transition:transform var(--d2) var(--e),opacity var(--d2)}
  .sheet.on .sheet__panel{transform:none;opacity:1}
  .sheet--sort .sheet__panel{inset-inline-start:max(calc(var(--pad) + 110px),calc((100vw - var(--max)) / 2 + var(--pad) + 110px));width:260px}
  .sheet__grip{display:none}
}

/* ---------- full-screen search ---------- */
.search{position:fixed;inset:0;z-index:80;background:rgba(255,255,255,.98);visibility:hidden;opacity:0;transition:opacity var(--d2) var(--e),visibility var(--d2)}
.search.on{visibility:visible;opacity:1}
.search__in{height:100%;display:flex;flex-direction:column;max-width:760px;margin:0 auto}
.search__bar{display:flex;align-items:center;gap:10px;padding:calc(var(--sat) + 8px) var(--pad) 8px;border-bottom:1px solid var(--hair)}
.search__bar .ico{color:var(--ink-3);width:18px;height:18px}
.search__bar input{flex:1;border:0;outline:0;font-size:var(--f17);padding:12px 0;background:none;font-family:var(--f);font-weight:500;min-width:0}
.search__bar input::placeholder{color:var(--ph);font-weight:400}
.search__bar input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search__x{font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2);min-height:44px;padding:0 4px 0 14px}
.search__body{flex:1;overflow:auto;padding:6px 0 30px}
.search__sec{padding:16px var(--pad) 4px}
.search__pop{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.search__pop button{padding:0 14px;min-height:40px;border:1px solid var(--hair);font-family:var(--fm);font-size:var(--f12);letter-spacing:.04em;color:var(--ink-2);transition:var(--d2)}
.search__pop button:hover,.search__pop button:active{border-color:var(--ink);color:var(--ink)}
.search__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.stile{display:flex;flex-direction:column;gap:4px;background:var(--tile);padding:8px 8px 10px;min-height:44px}
.stile img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.stile b{font-family:var(--f);font-size:var(--f12);font-weight:500;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stile span{font-family:var(--fm);font-size:var(--f11);color:var(--ink-3)}
.sres{display:flex;align-items:center;gap:14px;padding:10px var(--pad);transition:background var(--d1);min-height:72px;animation:cardin var(--d2) var(--e) both;animation-delay:calc(var(--i,0)*20ms)}
.sres:active,.sres:hover{background:#f6f7f9}
.sres__img{width:64px;height:64px;display:grid;place-items:center;background:var(--tile);flex:0 0 auto;overflow:hidden}
.sres__img img{width:100%;height:100%;object-fit:contain}
.sres__t{flex:1;min-width:0}
.sres__t b{display:block;font-family:var(--f);font-size:var(--f15);font-weight:500}
.sres__t span{display:block;font-size:var(--f12);color:var(--ink-3);margin-top:2px;line-height:1.35}
.sres__p{font-family:var(--f);font-size:var(--f13);font-weight:500;white-space:nowrap}
.search__none{padding:40px var(--pad);text-align:center;color:var(--ink-2);font-size:var(--f13)}

/* ============================================================
   PDP
   ============================================================ */
.v-pdp{padding:calc(var(--hdr) + var(--sat)) 0 0}
.pdp__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.pdp__galcol,.pdp__body{min-width:0}
.pdp__back{display:inline-flex;align-items:center;gap:8px;padding:0 var(--pad);min-height:44px;font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2)}
.pdp__back .ico{width:18px;height:18px;transition:transform var(--d2) var(--e)}
.pdp__back:hover .ico{transform:translateX(-3px)}
.gal{position:relative}
.gal__main{position:relative}
.gal__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:1;background:var(--tile);width:100%;max-width:100%;outline-offset:-2px}
.gal__track::-webkit-scrollbar{display:none}
.gal__slide{flex:0 0 100%;min-width:0;width:100%;scroll-snap-align:start;display:grid;place-items:center;position:relative;overflow:hidden;margin:0}
@media(hover:hover){.gal__slide{cursor:zoom-in}}
.gal__img{width:100%;height:100%;max-height:100%;object-fit:contain}
.gal__slide--scene .gal__img{object-fit:cover}
/* controls ON the picture and always visible: counter + previous / next at the bottom, zoom at the top */
.gal__ctl{position:absolute;inset-inline:12px;bottom:12px;display:flex;align-items:center;gap:8px;pointer-events:none}
.gal__ctl>*{pointer-events:auto}
.gal__count{margin-inline-end:auto;height:28px;padding:0 10px;display:inline-flex;align-items:center;background:rgba(255,255,255,.92);color:var(--ink-2);border-radius:14px;letter-spacing:.06em}
.gal__zoom{position:absolute;top:12px;inset-inline-end:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow var(--d2)}
.gal__zoom .ico{width:18px;height:18px}
@media(hover:hover){.gal__zoom:hover{box-shadow:inset 0 0 0 1px var(--ink)}}
.gal__note{font-size:var(--f12);color:var(--ink-3);padding:8px var(--pad) 0}
/* phones: a segment bar (swipe is the gesture) · desktop: a thumbnail rail (see 768+) */
.gal__seg{display:flex;gap:4px;padding:10px var(--pad) 0}
.gal__seg i{flex:1;height:2px;background:var(--hair);transition:background var(--d2)}
.gal__seg i.on{background:var(--accent)}
.gal__thumbs{display:none}
.gal__thumbs button{flex:0 0 auto;width:72px;height:72px;background:var(--tile);position:relative;opacity:.5;transition:opacity var(--d2) var(--e)}
.gal__thumbs button img{width:100%;height:100%;object-fit:contain}
.gal__thumbs button::after{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--accent);transform:scaleY(0);transition:transform var(--d3) var(--e)}
.gal__thumbs button.on{opacity:1}
.gal__thumbs button.on::after{transform:none}
@media(hover:hover){.gal__thumbs button:not(.on):hover{opacity:.85}}
.pdp__body{padding:16px var(--pad) 0;padding-bottom:calc(var(--bar-h) + var(--sab) + 24px)}
.pdp__cat{font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-3);display:flex;gap:10px;align-items:baseline}
.pdp__cat em{font-style:normal;color:var(--ink)}
.pdp__name{font-family:var(--f);font-size:clamp(24px,6.4vw,30px);font-weight:600;letter-spacing:var(--ls-tight);line-height:1.12;margin-top:8px}
.pdp__model{font-family:var(--fm);font-size:var(--f12);letter-spacing:.02em;color:var(--ink-3);margin-top:6px}
.pdp__price{margin-top:14px}
/* the buying path ends here: options above, this button, then the delivery promise */
.pdp__buy{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.pdp__buy .cta{width:100%}
.pdp__buy .cta.done{background:#1c1d21}
.pdp__deliv{display:flex;align-items:center;gap:8px;font-size:var(--f13);color:var(--ink-2)}
.pdp__deliv .ico{width:16px;height:16px;flex:0 0 auto}
.pdp__lead{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hair-2);margin:16px 0}
.pdp__lead div{padding:12px 14px;border-inline-end:1px solid var(--hair-2)}
.pdp__lead div:last-child{border-inline-end:0}
.pdp__lead div b{display:block;font-family:var(--f);font-size:var(--f17);font-weight:500;letter-spacing:var(--ls-snug)}
.pdp__lead div span{display:block;font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.pdp__copy{color:var(--ink-2);font-size:var(--f15);max-width:60ch;line-height:1.6;margin-top:14px}
.why{margin-top:28px;padding:16px 16px 6px;border:1px solid var(--hair-2);background:var(--tile)}
.why__h{font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:4px}
.why__list{display:flex;flex-direction:column}
.why__list li{display:flex;gap:10px;align-items:flex-start;padding:8px 0 10px;font-size:var(--f15);line-height:1.45}
.why__list .ico{width:18px;height:18px;color:var(--accent);margin-top:3px}
.opts{margin-top:22px;display:flex;flex-direction:column;gap:18px}
.opt__l{font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;display:block}
.opt__l span{color:var(--ink);text-transform:none;letter-spacing:0;font-family:var(--fb);font-size:var(--f13)}
.opt__vals{display:flex;flex-wrap:wrap;gap:8px}
.ochip{padding:10px 14px;min-height:44px;border:1px solid var(--hair);font-size:var(--f13);color:var(--ink-2);transition:var(--d2) var(--e);display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.2}
.ochip small{font-size:var(--f11);color:var(--ink-3);font-family:var(--fm)}
.ochip.on{border-color:var(--ink);color:#fff;background:var(--ink)}
.ochip.on small{color:rgba(255,255,255,.75)}
.opt__vals--sw{gap:12px}
.swb{width:32px;height:32px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(15,15,17,.18);position:relative;transition:box-shadow var(--d2)}
.swb::before{content:'';position:absolute;inset:-8px}
.swb.on{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ink)}
.opt__table{display:flex;flex-direction:column;border:1px solid var(--hair-2)}
.orow{display:grid;grid-template-columns:auto 1fr auto 20px;gap:12px;align-items:center;min-height:44px;padding:0 12px;border-bottom:1px solid var(--hair-2);text-align:start;transition:background var(--d1)}
.orow:last-child{border-bottom:0}
.orow b{font-family:var(--f);font-size:var(--f15);font-weight:500;min-width:56px}
.orow span{font-family:var(--fm);font-size:var(--f11);color:var(--ink-3)}
.orow i{font-style:normal;font-family:var(--f);font-size:var(--f13);font-weight:500;font-variant-numeric:tabular-nums}
.orow .ico{width:16px;height:16px;opacity:0}
.orow.on{background:var(--tile)}
.orow.on .ico{opacity:1}
.acc{margin-top:24px;border-top:1px solid var(--hair-2)}
.acc__i{border-bottom:1px solid var(--hair-2)}
.acc__i h3{margin:0}
.acc__h{width:100%;display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0;
  font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:500;text-align:start}
.acc__h .ico{width:16px;height:16px;color:var(--ink-2);transition:transform var(--d3) var(--e)}
.acc__i.open .acc__h .ico{transform:rotate(180deg)}
.acc__b{padding-bottom:16px;animation:viewin var(--d2) var(--e)}
.spec{width:100%;border-collapse:collapse}
.spec th,.spec td{padding:9px 0;border-top:1px solid var(--hair-2);font-size:var(--f13);vertical-align:top;text-align:start}
.spec th{font-family:var(--fm);font-size:var(--f12);letter-spacing:.02em;color:var(--ink-3);width:36%;font-weight:400;padding-inline-end:12px}
.spec td a{border-block-end:1px solid var(--hair)}
.pdp__links{font-size:var(--f12);color:var(--ink-3);margin-top:10px}
.pdp__links a{color:var(--ink-2);border-block-end:1px solid var(--hair)}
.boxlist li{padding:8px 0;border-top:1px solid var(--hair-2);font-size:var(--f13)}
.brand__p{font-size:var(--f13);color:var(--ink-2);line-height:1.6}
.pdp__fine{margin-top:16px;font-size:var(--f12);color:var(--ink-3)}
.pdp__rel{margin-top:40px;padding:0 var(--pad) 8px}
.pdp__rel .rail{margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
.pdp__rel .rail .card{flex-basis:min(60vw,260px)}
/* stand-in for #pdpAdd, shown only while that button is off screen (pdp.js wireBar) —
   the in-page button and the bar are never on screen together */
.pdp__bar{position:fixed;inset-inline:0;bottom:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--rule);padding:10px var(--pad) calc(12px + var(--sab));
  transform:translateY(110%);visibility:hidden;transition:transform var(--d3) var(--e),visibility 0s linear var(--d3)}
.pdp__bar.on{transform:none;visibility:visible;transition:transform var(--d3) var(--e),visibility 0s}
.pdp__bar-in{display:flex;align-items:center;gap:14px;max-width:var(--max);margin-inline:auto}
.pdp__bar-img,.pdp__bar-t{display:none}
.pdp__bar .price{font-size:var(--f17)}
.pdp__bar .cta{flex:1}
.pdp__bar .cta.done{background:#1c1d21}
.pdp__nf{padding:16px var(--pad) 40px;text-align:center}
.pdp__nf h1{font-family:var(--f);font-size:var(--f22);font-weight:600;letter-spacing:var(--ls-snug);margin-top:8px}
.pdp__nf p{color:var(--ink-2);margin:8px 0 24px}
.pdp__nf .rail{padding:0;text-align:start}
@media(min-width:1024px){
  .pdp__wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
  .pdp__cols{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
  .pdp__galcol{position:sticky;top:calc(var(--hdr) + var(--sat));padding-top:8px}
  .pdp__back{padding-inline:0}
  .gal--multi{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:start}
  .gal--multi .gal__main{grid-column:2;grid-row:1}
  .gal__thumbs{display:flex;flex-direction:column;gap:10px;grid-column:1;grid-row:1;max-height:640px;overflow-y:auto;scrollbar-width:none}
  .gal__thumbs::-webkit-scrollbar{display:none}
  .gal__seg{display:none}
  .gal__note{padding-inline:0}
  .gal--multi .gal__note{grid-column:2}
  .pdp__body{padding:56px 0 40px}
  .pdp__name{font-size:34px}
  .pdp__copy{font-size:var(--f15)}
  .pdp__bar{top:calc(var(--hdr) + var(--sat));bottom:auto;z-index:39;border-top:0;border-bottom:1px solid var(--rule);padding:8px 0;transform:translateY(-110%)}
  .pdp__bar-in{padding-inline:var(--pad)}
  .pdp__bar-img{display:block;width:44px;height:44px;background:var(--tile);flex:0 0 auto;overflow:hidden}
  .pdp__bar-img img{width:100%;height:100%;object-fit:contain}
  .pdp__bar-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
  .pdp__bar-t b{font-family:var(--f);font-size:var(--f15);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pdp__bar-t small{font-size:var(--f12);color:var(--ink-3)}
  .pdp__bar .cta{flex:0 0 auto;min-width:220px;min-height:44px}
  .pdp__rel{margin-top:20px;padding:0 0 40px}
  .pdp__rel .rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;gap:0;margin-inline:0;padding-inline:0;border-block:1px solid var(--hair-2)}
  .pdp__rel .rail .card{flex-basis:auto;box-shadow:-1px 0 0 var(--hair-2)}
}

/* ============================================================
   ABOUT
   ============================================================ */
.v-about{padding:calc(var(--hdr) + var(--sat)) 0 0}
.ab__blk{padding:6vh var(--pad);max-width:860px;margin-inline:auto}
.ab__manif{padding:56px var(--pad) 32px;min-height:0}
.ab__manif--sm{padding-top:24px}
.ab__kick{display:flex;gap:9px;align-items:baseline;margin-bottom:18px}
.ab__manif h1{font-family:var(--f);font-size:clamp(44px,12vw,88px);font-weight:600;letter-spacing:-.04em;line-height:.98}
.ab__manif p{margin-top:18px;color:var(--ink-2);font-size:var(--f15);max-width:40ch}
.ab__strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 var(--pad);max-width:860px;margin-inline:auto}
.ab__strip span{display:block;aspect-ratio:1;background:var(--tile);overflow:hidden}
.ab__strip img{width:100%;height:100%;object-fit:contain}
.ab__label{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.ab__label b{font-family:var(--fm);font-size:var(--f11);color:var(--accent);letter-spacing:var(--ls-label);font-weight:500}
.ab__label h2{font-family:var(--f);font-size:var(--f22);font-weight:600;letter-spacing:var(--ls-snug);line-height:1.15}
.ab__more{margin-top:14px}
.ab__phil article{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--hair-2);align-items:center}
.ab__pic{display:block;aspect-ratio:1;background:var(--tile);overflow:hidden}
.ab__pic img{width:100%;height:100%;object-fit:contain}
.ab__phil h3{font-family:var(--f);font-size:var(--f17);font-weight:600;letter-spacing:var(--ls-snug);display:flex;gap:12px;align-items:baseline}
.ab__phil h3 i{font-family:var(--fm);font-size:var(--f11);font-style:normal;font-weight:400;color:var(--ink-3);width:22px;flex:0 0 auto}
.ab__phil p{color:var(--ink-2);font-size:var(--f13);margin-top:6px;max-width:52ch}
.ab__prom{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ab__prom a{display:flex;flex-direction:column;gap:6px;padding:16px 14px;background:var(--tile);min-height:140px;position:relative}
.ab__prom .ico:first-child{width:22px;height:22px}
.ab__prom h3{font-family:var(--f);font-size:var(--f15);font-weight:600}
.ab__prom p{font-size:var(--f13);color:var(--ink-2);line-height:1.4}
.ab__prom .ico:last-child{position:absolute;top:14px;inset-inline-end:14px;width:16px;height:16px;color:var(--ink-3)}
.ab__who{font-size:var(--f15);color:var(--ink-2);max-width:60ch;line-height:1.6}
.ab__reg{margin-top:18px;border-top:1px solid var(--hair-2)}
.ab__reg div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--hair-2);font-size:var(--f13)}
.ab__reg dt{font-family:var(--fm);font-size:var(--f12);color:var(--ink-3);letter-spacing:.02em}
.ab__reg dd a{border-block-end:1px solid var(--hair)}
.ab__nums{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair-2);border-block:1px solid var(--hair-2);max-width:1000px;margin-inline:auto}
.ab__num{background:#fff;padding:26px 20px}
.ab__num b{font-family:var(--f);font-size:clamp(28px,7.6vw,40px);font-weight:500;letter-spacing:var(--ls-tight);display:block;font-variant-numeric:tabular-nums}
.ab__num span{font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-3);margin-top:6px;display:block}
@media(min-width:768px){.ab__nums{grid-template-columns:repeat(4,1fr)} .ab__prom{grid-template-columns:repeat(4,1fr)}}
/* desktop: heading on the left, content on the right, across the whole container */
@media(min-width:1024px){
  .ab__blk,.ab__strip,.ab__nums{max-width:var(--max)}
  .ab__manif{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;align-items:end;padding-top:72px;padding-bottom:48px}
  .ab__manif .ab__kick{grid-column:1/-1}
  .ab__manif h1{font-size:clamp(88px,7.4vw,120px)}
  .ab__manif p{margin:0 0 14px;font-size:var(--f17);max-width:36ch}
  .ab__manif--sm{display:block;padding-top:40px}
  .ab__manif--sm h1{font-size:88px}
  .ab__strip{gap:16px}
  .ab__label h2{font-size:var(--f28)}
  .ab__phil{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .ab__phil article{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:0;border-top:0}
  .ab__pic{aspect-ratio:4/3}
  .ab__c--who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"who reg" "more reg";column-gap:56px;align-items:start}
  .ab__c--who .ab__who{grid-area:who}
  .ab__c--who .ab__reg{grid-area:reg;margin-top:0}
  .ab__c--who .ab__more{grid-area:more}
}
.ab__safe details{border-top:1px solid var(--hair-2)}
.ab__safe summary{display:grid;grid-template-columns:44px 1fr 20px;gap:0 12px;align-items:center;min-height:56px;cursor:pointer;list-style:none}
.ab__safe summary::-webkit-details-marker{display:none}
.ab__safe summary i{font-family:var(--fm);font-size:var(--f11);color:var(--ink-3);font-style:normal;letter-spacing:var(--ls-label)}
.ab__safe details[open] summary i{color:var(--accent)}
.ab__safe summary .ico{width:16px;height:16px;color:var(--ink-3);transition:transform var(--d3) var(--e)}
.ab__safe details[open] summary .ico{transform:rotate(180deg)}
.ab__safe h3{font-family:var(--f);font-size:var(--f17);font-weight:600;letter-spacing:var(--ls-snug)}
.ab__safe p{padding:0 0 16px 56px;color:var(--ink-2);font-size:var(--f13)}
html[dir="rtl"] .ab__safe p{padding:0 56px 16px 0}
.ab__where>div{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-top:1px solid var(--hair-2)}
.ab__where b{font-family:var(--f);font-size:var(--f17);font-weight:600;display:block;letter-spacing:var(--ls-snug)}
.ab__where span{display:block;color:var(--ink-2);font-size:var(--f13);margin-top:2px}
.ab__sign{text-align:center;padding:8vh var(--pad) 6vh}
.ab__sign .mark{width:32px;height:32px;margin:0 auto 18px}
.ab__sign b{font-family:var(--fm);font-size:var(--f11);letter-spacing:.24em;text-transform:uppercase;display:block}
.ab__sign p{margin-top:12px;font-size:var(--f13);color:var(--ink-2)}
.ab__sign a{border-block-end:1px solid var(--hair)}

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart{position:fixed;inset:0;z-index:70;visibility:hidden}
.cart.on{visibility:visible}
.cart__scrim{position:absolute;inset:0;background:rgba(15,15,17,.34);opacity:0;transition:opacity 250ms var(--e)}
.cart.on .cart__scrim{opacity:1}
.cart__panel{position:absolute;top:0;inset-inline-end:0;bottom:0;width:min(440px,94vw);background:#fff;display:flex;flex-direction:column;
  transform:translateX(103%);transition:transform 360ms var(--e)}
html[dir="rtl"] .cart__panel{transform:translateX(-103%)}
.cart.on .cart__panel{transform:none}
.cart__top{display:flex;align-items:center;gap:8px;padding:calc(var(--sat) + 10px) 10px 8px 20px;border-bottom:1px solid var(--hair)}
.cart__top h2{font-size:var(--f11)}
.cart__top #cartN{color:var(--ink);font-weight:500}
.cart__x{margin-inline-start:auto}
.cart__body{flex:1;overflow:auto;padding:4px 20px}
.cline{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--hair-2)}
.cline__img{width:80px;height:80px;background:var(--tile);display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
.cline__img img{width:100%;height:100%;object-fit:contain}
.cline__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cline__n{font-family:var(--f);font-size:var(--f15);font-weight:500;line-height:1.3}
.cline__v{font-size:var(--f12);color:var(--ink-2)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--hair);margin-top:6px;width:max-content}
.qty button{width:40px;height:36px;display:grid;place-items:center;color:var(--ink-2);transition:color var(--d1)}
.qty button .ico{width:14px;height:14px}
.qty button:hover{color:var(--ink)}
.qty span{min-width:28px;text-align:center;font-family:var(--f);font-size:var(--f13);font-weight:500}
.cline__r{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:8px}
.cline__x{width:36px;height:36px;display:grid;place-items:center;color:var(--ink-3);margin:-8px -8px 0 0;transition:color var(--d1)}
html[dir="rtl"] .cline__x{margin:-8px 0 0 -8px}
.cline__x .ico{width:16px;height:16px}
.cline__x:hover{color:var(--ink)}
.cline__p{font-family:var(--f);font-size:var(--f15);white-space:nowrap;font-weight:500;font-variant-numeric:tabular-nums}
.cline--undo{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair-2);color:var(--ink-2);font-size:var(--f13)}
.cline--undo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cline--undo button{flex:0 0 auto;font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);min-height:44px;padding:0 10px;position:relative}
.cline--undo button::after{content:'';position:absolute;inset-inline:10px;bottom:11px;height:1px;background:var(--ink)}
.cart__empty{padding:32px 0;text-align:center;color:var(--ink-2);font-size:var(--f13)}
.cart__empty p{margin-bottom:16px}
.cart__empty .cta{width:100%}
.cart__reco{margin-top:28px;text-align:start}
.cart__recogrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.cart__recogrid .card{padding:8px 8px 10px;box-shadow:inset 0 0 0 1px var(--hair-2)}
.cart__recogrid .card__n{font-size:var(--f12);min-height:0}
.cart__recogrid .card__m,.cart__recogrid .card__no,.cart__recogrid .card__tag,.cart__recogrid .swatches,.cart__recogrid .card__img--alt{display:none}
.cart__recogrid .card__imgw{margin-top:0}
.cart__recogrid .card__add,.cart__recogrid .card__f{display:none}
.cart__recogrid .card__n{font-size:var(--f12);min-height:0}
.cart__foot{border-top:1px solid var(--hair);padding:12px 20px calc(16px + var(--sab))}
.cart__deliv{font-size:var(--f12);color:var(--ink-2);margin-bottom:10px}
.cart__sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.cart__sum b{font-family:var(--f);font-size:var(--f22);font-weight:500;font-variant-numeric:tabular-nums}
.cart__foot .cta{width:100%}
.cart__cont{width:100%;min-height:44px;margin-top:4px;font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2)}

/* ============================================================
   CHECKOUT
   ============================================================ */
.v-co{padding:calc(var(--hdr) + var(--sat)) 0 0}
.co{display:grid;grid-template-columns:1fr;max-width:var(--max);margin-inline:auto;padding:0 var(--pad) calc(var(--bar-h) + var(--sab) + 26px);gap:0}
.co__head{display:flex;align-items:baseline;justify-content:space-between;padding:12px 0 8px}
.co__head h1{font-family:var(--f);font-size:clamp(26px,7vw,32px);font-weight:600;letter-spacing:var(--ls-tight)}
.co__secure{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-3)}
.co__secure .ico{width:14px;height:14px}
.co__sumbar{background:var(--tile);margin:0 calc(-1 * var(--pad));padding:0 var(--pad)}
.co__sumbar summary{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;list-style:none;font-size:var(--f13);font-weight:500}
.co__sumbar summary::-webkit-details-marker{display:none}
.co__sumbar summary b{margin-inline-start:auto;font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:400;color:var(--ink-3)}
.co__sumbar summary .ico{width:16px;height:16px;transition:transform var(--d3) var(--e)}
.co__sumbar[open] summary .ico{transform:rotate(180deg)}
.co__sumbar-in{padding-bottom:16px}
.co__side{display:none}
.sum__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.sum__head a,.sum__edit{font-size:var(--f12);color:var(--ink-2);border-block-end:1px solid var(--hair)}
.sum__edit{min-height:32px;padding:6px 0 1px}
.sum__row{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--hair-2)}
.sum__img{width:56px;height:56px;background:#fff;display:block;overflow:hidden}
.sum__img img{width:100%;height:100%;object-fit:contain}
.sum__t{display:flex;flex-direction:column;gap:1px;min-width:0}
.sum__t b{font-family:var(--f);font-size:var(--f13);font-weight:500;line-height:1.3}
.sum__t span{font-size:var(--f12);color:var(--ink-3)}
.sum__p{font-family:var(--f);font-size:var(--f13);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.sum__line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:var(--f13);color:var(--ink-2);border-bottom:1px solid var(--hair-2)}
.sum__line b{font-weight:400;color:var(--ink);text-align:end}
.sum__total{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px}
.sum__total span{font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-3)}
.sum__total b{font-family:var(--f);font-size:var(--f22);font-weight:500;font-variant-numeric:tabular-nums}
.sum__trust{display:flex;align-items:center;gap:8px;font-size:var(--f12);color:var(--ink-2);margin-top:12px}
.sum__trust .ico{width:16px;height:16px;color:var(--ink)}
.co__main{display:flex;flex-direction:column}
.co__sec{padding:26px 0 6px}
/* step headings are headings: grey mono index, ink title. The hairline with a red head that
   trailed them read as a line with no meaning. */
.co__st{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.co__st b{font-family:var(--fm);font-size:var(--f11);color:var(--ink-3);letter-spacing:var(--ls-label);font-weight:500;flex:0 0 auto}
.co__st h2{font-family:var(--f);font-size:var(--f17);font-weight:600;letter-spacing:var(--ls-snug);line-height:1.25;color:var(--ink)}
@media(min-width:768px){.co__st h2{font-size:20px}}
.fld{padding:10px 0 6px;position:relative}
.fld label,.fld legend{display:block;font-size:var(--f12);color:var(--ink-2);margin-bottom:4px;letter-spacing:.01em}
.fld__in{position:relative;display:flex;align-items:center;gap:8px}
/* +974 and the number share ONE underline. Each used to draw its own at a different height
   (the prefix 6px under its text, the input at the bottom of a 44px box), so the lines never met. */
.fld__in--pre{direction:ltr;align-items:baseline;gap:10px;border-bottom:1px solid var(--line);transition:border-color var(--d2),box-shadow var(--d2)}
.fld__prefix{font-family:var(--fb);font-size:16px;color:var(--ink-2);flex:0 0 auto;padding:8px 0}
.fld .fld__in--pre input,.fld .fld__in--pre input:focus{border-bottom:0;padding-bottom:8px}
.fld .fld__in--pre:focus-within{border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.fld.bad .fld__in--pre{border-bottom-color:var(--danger)}
.fld.bad .fld__in--pre:focus-within{border-bottom-color:var(--danger);box-shadow:0 1px 0 var(--danger)}
.fld input,.fld select{width:100%;min-width:0;border:0;outline:0;background:none;font-size:16px;padding:8px 0;min-height:44px;
  border-bottom:1px solid var(--line);border-radius:0;transition:border-color var(--d2),box-shadow var(--d2);caret-color:var(--ink)}
.fld select{appearance:none;-webkit-appearance:none}
.fld input:focus,.fld select:focus{border-bottom:2px solid var(--ink);padding-bottom:7px}
.fld:focus-within{background:linear-gradient(var(--tile),var(--tile)) no-repeat;background-size:100% calc(100% - 4px);border-radius:2px;margin-inline:-8px;padding-inline:8px}
.fld input:focus-visible{outline:none}
.fld input::placeholder{color:var(--ph)}
.fld__ok,.fld__lock{position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-3);opacity:0;pointer-events:none;transition:opacity var(--d2)}
.fld__lock{opacity:1;inset-inline-end:24px}
.fld.ok .fld__ok{opacity:1;color:var(--wa)}
.fld__help{display:block;font-size:var(--f12);color:var(--ink-3);margin-top:4px;line-height:1.4}
.fld__help a{border-block-end:1px solid var(--hair);color:var(--ink-2)}
.fld__err{display:block;font-size:var(--f12);color:var(--danger);margin-top:4px;line-height:1.4}
.fld__err:empty{display:none}
.fld.bad input{border-bottom-color:var(--danger)}
.fld.bad label,.fld.bad legend{color:var(--danger)}
.fld:focus-within label{color:var(--ink)}
.fld--static .fld__in::after{content:'';position:absolute;inset-inline-end:2px;top:45%;width:7px;height:7px;border:solid var(--ink-2);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-50%);pointer-events:none}
.fld--group{padding-top:12px}
.fld--mini{padding:4px 0 0}
.fldrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fldrow--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.anwani{display:inline-flex;align-items:center;gap:12px;margin-top:12px;padding:10px 16px;background:var(--blue);color:#fff;
  font-family:var(--fm);border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.anwani u{text-decoration:none;text-align:center;line-height:1.15;min-width:40px}
.anwani u b{display:block;font-size:var(--f17);font-weight:500}
.anwani u i{display:block;font-size:var(--f11);letter-spacing:.1em;font-style:normal;opacity:.88;margin-top:2px}
.anwani s{text-decoration:none;width:1px;height:28px;background:rgba(255,255,255,.35);display:block}
.anwani--sm{padding:8px 12px;gap:10px}
.anwani--sm u b{font-size:var(--f15)}
.days{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.day__l{display:block;font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.win{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.win button{min-height:44px;padding:6px 10px;border:1px solid var(--hair);font-size:var(--f13);color:var(--ink-2);transition:var(--d2) var(--e);position:relative;font-family:var(--fm);line-height:1.2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.win button.on{border-color:var(--ink);color:#fff;background:var(--ink)}
.win button small{font-size:var(--f11);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.win button.dis{color:var(--ink-3);border-style:dashed;cursor:not-allowed;background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(15,15,17,.03) 5px,rgba(15,15,17,.03) 6px)}
.methods{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.method{display:grid;grid-template-columns:24px 1fr 20px;gap:12px;align-items:center;min-height:56px;padding:8px 14px;border:1px solid var(--hair);text-align:start;transition:border-color var(--d2),background var(--d2)}
.method .ico:first-child{width:22px;height:22px;color:var(--ink-2)}
.method span{display:flex;flex-direction:column;gap:1px}
.method b{font-family:var(--f);font-size:var(--f15);font-weight:500}
.method small{font-size:var(--f12);color:var(--ink-3)}
.method .ico:last-child{width:16px;height:16px;opacity:0}
.method.on{border-color:var(--ink);background:var(--tile)}
.method.on .ico:last-child{opacity:1}
.co__cardbox{padding-top:8px}
.cardmarks{display:flex;align-items:center;gap:6px;padding:8px 0 2px}
.cardmarks span{font-family:var(--fm);font-size:var(--f11);letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--hair);padding:0 7px;height:22px;display:inline-flex;align-items:center;border-radius:2px}
.cardmarks i{margin-inline-start:auto;color:var(--ink);font-style:normal}
.co__3ds{font-size:var(--f12);color:var(--ink-3);padding:8px 0 0;display:flex;gap:6px}
.co__codnote{display:flex;gap:8px;align-items:flex-start;font-size:var(--f12);color:var(--ink-2);margin-top:10px;background:var(--tile);padding:10px 12px}
.co__codnote .ico{width:16px;height:16px;flex:0 0 auto}
.terms{display:flex;gap:12px;align-items:flex-start;font-size:var(--f13);color:var(--ink-2);min-height:44px;cursor:pointer}
.terms input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink);flex:0 0 auto}
.terms a{color:var(--ink);border-block-end:1px solid var(--hair)}
[data-fld="terms"].bad{color:var(--danger)}
.co__declined,.co__attention{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-top:12px;border:1px solid var(--danger);color:var(--ink);font-size:var(--f13);background:var(--danger-wash)}
.co__declined .ico{color:var(--danger);width:18px;height:18px;flex:0 0 auto}
.co__bar{position:fixed;inset-inline:0;bottom:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--hair);
  padding:11px var(--pad) calc(13px + var(--sab));display:flex;align-items:center;gap:14px;transition:transform var(--d2) var(--e)}
.co__bar .cta{flex:1}
.co__bar .cta .ico{width:16px;height:16px;opacity:.7}
.co__bar-n{white-space:nowrap}
/* with Google Pay chosen, the official Google Pay button takes the pay button's place */
.co__wal{flex:1;height:52px;min-width:0}
.co__wal>*{width:100%!important;height:100%!important}
body.kb-open .co__bar,body.kb-open .pdp__bar{transform:translateY(110%)}
@media(min-width:900px){
  .co{grid-template-columns:minmax(0,640px) 380px;column-gap:56px;justify-content:center;padding-bottom:40px}
  .co__head{grid-column:1/-1}
  .co__sumbar{display:none}
  .co__side{display:block;grid-column:2;grid-row:2/4;position:sticky;top:calc(var(--hdr) + 24px);align-self:start;padding:20px;border:1px solid var(--hair-2)}
  .co__main{grid-column:1}
  .co__bar{position:sticky;grid-column:1;inset-inline:auto;bottom:0;padding:14px 0 18px;margin-top:14px;border-top:1px solid var(--hair-2)}
  body.kb-open .co__bar{transform:none}
  .win{grid-template-columns:repeat(4,1fr)}
}
/* from 1280 the form starts on the same edge as the logo instead of floating centred */
@media(min-width:1280px){.co{grid-template-columns:minmax(0,1fr) 420px;column-gap:96px;justify-content:stretch}}

/* ============================================================
   ORDER
   ============================================================ */
.v-ord{padding:calc(var(--hdr) + var(--sat)) 0 0}
.ord{max-width:640px;margin-inline:auto;padding:24px var(--pad) 48px}
.ord__head{text-align:center;padding:16px 0 24px}
.ord__ring{display:block;width:96px;height:96px;margin:0 auto 16px}
.ord__ring svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ord__ring path{stroke-dasharray:60;stroke-dashoffset:60;animation:draw2 var(--d4) var(--e) .1s forwards}
@keyframes draw2{to{stroke-dashoffset:0}}
.ord h1{font-family:var(--f);font-size:var(--f28);font-weight:600;letter-spacing:var(--ls-tight)}
.ord__id{font-family:var(--fm);font-size:var(--f13);margin-top:8px;color:var(--ink-2)}
.ord__thanks{margin-top:10px;color:var(--ink-2);font-size:var(--f13);max-width:44ch;margin-inline:auto}
.ord__sec{padding:14px 0 6px}
.ord__deliv{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ord__deliv b{font-family:var(--f);font-size:var(--f17);font-weight:500;display:block}
.ord__deliv span{font-size:var(--f13);color:var(--ink-2)}
.ord__items{display:flex;flex-direction:column}
.ord__line{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--hair-2)}
.ord__line .sum__img{background:var(--tile)}
.ord__pay{font-size:var(--f15);font-weight:500;font-family:var(--f)}
.ord__receipt{font-size:var(--f13);color:var(--ink-2);margin-top:6px}
.ord__meta{margin-top:8px;text-transform:none;letter-spacing:.02em}
.ord__acts{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.ord__legal{margin-top:24px;font-size:var(--f12);color:var(--ink-3);text-align:center;line-height:1.6}
.ord__legal a{border-block-end:1px solid var(--hair);color:var(--ink-2)}
.ord--nf{text-align:center;padding-top:56px}
.ord--nf h1{font-size:var(--f22)}
.ord--list h1{font-size:var(--f28)}
.ord--list p{color:var(--ink-2);margin-top:8px}
.lookup{margin:18px 0 28px}
.lookup label{display:block;font-size:var(--f12);color:var(--ink-2);margin-bottom:6px}
.lookup__row{display:flex;gap:10px}
.lookup__row input{flex:1;min-width:0;border:0;border-bottom:1px solid var(--line);padding:8px 0;font-size:16px;min-height:44px;background:none;outline:0}
.lookup__row input:focus{border-bottom:2px solid var(--ink)}
.lookup__row .cta{min-height:44px;padding:0 16px}
.ordlist li a{display:grid;grid-template-columns:1fr auto 20px;gap:4px 12px;align-items:center;padding:12px 0;border-top:1px solid var(--hair-2);min-height:56px}
.ordlist li a b{font-family:var(--fm);font-size:var(--f13);font-weight:500;grid-column:1}
.ordlist li a span{font-size:var(--f12);color:var(--ink-2);grid-column:1}
.ordlist li a span.mono{grid-column:2;grid-row:1/3}
.ordlist li a .ico{grid-column:3;grid-row:1/3;width:16px;height:16px;color:var(--ink-3)}
@media(min-width:768px){.ord__acts{flex-direction:row} .ord__acts .cta{flex:1} .ord__deliv{flex-direction:row;justify-content:space-between;align-items:center}}
.ordlist__row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:12px 0;border-top:1px solid var(--hair-2);min-height:56px}
.ordlist__row b{font-family:var(--f);font-size:var(--f15);font-weight:500;grid-column:1}
.ordlist__row span{font-size:var(--f12);color:var(--ink-2);grid-column:1}
.ordlist__row span.mono{grid-column:2;grid-row:1/3}
.ordl__side{margin-top:12px}
.ordl__h{font-family:var(--f);font-size:var(--f17);font-weight:600;letter-spacing:var(--ls-snug);margin-bottom:10px}
@media(min-width:1024px){
  .ord--list,.ord--done{max-width:var(--max)}
  .ordl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:80px;align-items:start;padding-top:24px}
  .ordl__side{margin-top:0;background:var(--tile);padding:26px 28px 14px}
  .ord__cols{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:64px;align-items:start}
  .ord__aside{position:sticky;top:calc(var(--hdr) + 24px)}
  .ord--done .ord__acts{flex-direction:column}
}

/* ============================================================
   POLICY · CONTACT
   ============================================================ */
.v-pol{padding:calc(var(--hdr) + var(--sat)) 0 0}
.pol,.ct{max-width:720px;margin-inline:auto;padding:20px var(--pad) 48px}
.pol__nav{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-bottom:20px;border-bottom:1px solid var(--hair-2)}
.pol__nav::-webkit-scrollbar{display:none}
.pol__nav a{font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2);white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;position:relative}
.pol__nav a.on{color:var(--ink)}
.pol__nav a.on::after{content:'';position:absolute;inset-inline:0;bottom:-5px;height:2px;background:var(--ink)}
.pol h1,.ct h1{font-family:var(--f);font-size:var(--f28);font-weight:600;letter-spacing:var(--ls-tight)}
.pol__updated{margin-top:8px}
.pol__intro{margin-top:16px;font-size:var(--f15);color:var(--ink-2);line-height:1.6}
.pol__toc{margin:22px 0 8px;padding:14px 16px;background:var(--tile)}
.pol__toc ol{list-style:decimal;padding-inline-start:20px;margin-top:6px;columns:2;column-gap:20px}
.pol__toc li{font-size:var(--f13);padding:4px 0;break-inside:avoid}
.pol__toc a{color:var(--ink-2)}
.pol section{margin-top:30px;scroll-margin-top:calc(var(--hdr) + 20px)}
.pol h2{font-family:var(--f);font-size:var(--f17);font-weight:600;letter-spacing:var(--ls-snug);margin-bottom:8px}
.pol p{font-size:var(--f15);line-height:1.65;color:var(--ink-2);margin-top:8px}
.pol__contact{margin-top:28px;font-size:var(--f12)!important;color:var(--ink-3)!important;line-height:1.6}
.pol__contact a{border-block-end:1px solid var(--hair)}
.ct__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.ct__card{display:flex;flex-direction:column;gap:6px;padding:16px 14px;background:var(--tile);min-height:120px}
.ct__card .ico{width:22px;height:22px}
.ct__card b{font-family:var(--f);font-size:var(--f15);font-weight:600}
.ct__card span{font-size:var(--f13);color:var(--ink-2);line-height:1.4;overflow-wrap:anywhere}
.ct__form{margin-top:26px}
.ct__form label{display:block;font-size:var(--f12);color:var(--ink-2);margin-bottom:6px}
.ct__complaint{margin-top:32px}
.ct__h{font-family:var(--f);font-size:var(--f17);font-weight:600;letter-spacing:var(--ls-snug)}
.ct__complaint p{font-size:var(--f15);color:var(--ink-2);line-height:1.6;margin-top:8px}
@media(min-width:768px){.ct__grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){
  .pol,.ct{max-width:var(--max)}
  .pol__cols{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-areas:"toc head" "toc body" "toc aside";column-gap:64px}
  .pol__aside{grid-area:aside}
  .pol__head{grid-area:head}
  .pol__body{grid-area:body}
  .pol__head,.pol__body{max-width:72ch}
  .pol__toc{grid-area:toc;align-self:start;position:sticky;top:calc(var(--hdr) + 28px);margin:8px 0 0;padding:0;background:none}
  .pol__toc ol{columns:1;list-style:none;padding:0;margin-top:10px}
  .pol__toc li{padding:0}
  .pol__toc a{display:block;padding:7px 0;color:var(--ink-2);transition:color var(--d2)}
  .pol__toc a:hover{color:var(--ink)}
  .ct__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:start;margin-top:40px}
  .ct__row .ct__form,.ct__row .ct__complaint{margin-top:0}
}
@media(min-width:1280px){
  .pol__cols{grid-template-columns:220px minmax(0,680px) minmax(240px,1fr);grid-template-areas:"toc head aside" "toc body aside";column-gap:72px}
  .pol__aside{margin-top:8px;position:sticky;top:calc(var(--hdr) + 28px);align-self:start}
}

/* ============================================================
   THE SEAL — payment takeover (geometry locked: ring 168 / r64)
   ============================================================ */
.seal{position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none}
.seal.on{visibility:visible;pointer-events:auto}
.seal__blur{position:absolute;inset:0;backdrop-filter:blur(0px);background:rgba(255,255,255,0);transition:backdrop-filter var(--d3) var(--e),background var(--d3) var(--e)}
.seal.on .seal__blur{backdrop-filter:blur(14px);background:rgba(255,255,255,.62)}
.seal__core{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:280px;height:300px}
.seal__ring{position:absolute;left:50%;top:0;width:168px;height:168px;transform:translateX(-50%);transform-origin:50% 50%;transition:transform var(--d2) var(--e),opacity var(--d2) var(--e)}
.seal__ring circle{fill:none;stroke:var(--ink);stroke-width:1;transform:rotate(-90deg);transform-origin:50% 50%}
.seal__ring .seal__track{stroke:var(--hair-2);transform:none}
.seal.collapse .seal__ring{transform:translateX(-50%) scale(.06);opacity:0}
.seal.fail .seal__ring circle{stroke:var(--danger)}
.seal__amt{position:absolute;left:0;right:0;top:84px;text-align:center;font-family:var(--f);font-size:var(--f15);font-weight:500;transform:translateY(-50%);transition:opacity var(--d2) var(--e);font-variant-numeric:tabular-nums}
.seal.collapse .seal__amt{opacity:0}
.seal__status{position:absolute;left:0;right:0;top:186px;height:18px;overflow:hidden;text-align:center;transition:opacity var(--d2) var(--e)}
.seal.collapse .seal__status{opacity:0}
.seal__status span{position:absolute;inset:0;display:block;font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2);transform:translateY(115%);opacity:0;transition:transform 300ms var(--e),opacity 300ms var(--e)}
.seal__status span.in{transform:none;opacity:1}
.seal__status span.out{transform:translateY(-115%);opacity:0}
.seal__dot{position:absolute;left:50%;top:84px;width:4px;height:4px;background:var(--ink);transform:translate(-50%,-50%) scale(0);opacity:0}
.seal.collapse .seal__dot{opacity:1;transform:translate(-50%,-50%) scale(1);transition:transform 180ms var(--e),opacity var(--d1)}
.seal.flat .seal__dot{opacity:0;transition:opacity var(--d1)}
.seal__line{position:absolute;left:50%;top:84px;height:1px;width:240px;background:var(--ink);transform:translateX(-50%) scaleX(0);transform-origin:50% 50%;transition:transform var(--d2) var(--e)}
.seal.flat .seal__line{transform:translateX(-50%) scaleX(1)}
.seal__cancel{position:absolute;left:50%;top:232px;transform:translateX(-50%);min-height:44px;padding:0 18px;font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--hair)}
.seal__cancel[hidden]{display:none}

/* ============================================================
   CONSENT
   ============================================================ */
.consent{position:fixed;inset-inline:12px;bottom:calc(12px + var(--sab));z-index:85;background:var(--paper);box-shadow:0 8px 40px -12px rgba(15,15,17,.35),0 0 0 1px var(--hair);padding:14px 16px;display:flex;flex-direction:column;gap:10px;max-width:520px;margin-inline:auto}
.consent p{font-size:var(--f13);color:var(--ink-2);line-height:1.45}
.consent a{color:var(--ink);border-block-end:1px solid var(--hair)}
.consent__acts{display:flex;gap:8px;justify-content:flex-end}
.consent__acts button{min-height:40px;padding:0 14px;font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink-2);border:1px solid var(--hair)}
.consent__ok{background:var(--ink);color:#fff!important;border-color:var(--ink)!important}
body[data-view="checkout"] .consent,body[data-view="pdp"] .consent{bottom:calc(var(--bar-h) + var(--sab) + 12px)}

/* ============================================================
   RESPONSIVE EXTRAS · LANDSCAPE · PRINT · MOTION
   ============================================================ */
@media(orientation:landscape) and (max-height:500px){
  :root{--stage:260px}
  .hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding-inline:var(--pad)}
  .co__bar{position:static;transform:none;padding-inline:0;border-top:1px solid var(--hair-2)}
  .pdp__bar{display:none}
  .gal__track{aspect-ratio:auto;height:60svh}
  .pdp__body{padding-bottom:20px}
  .hero__chips{display:none}
  .hero__text{gap:4px}
}
@media print{
  .hdr,.boot,.cart,.sheet,.search,.seal,.consent,.pdp__bar,.co__bar,.hero__ctl,.rail__arrow,.lb,.gal__ctl,.gal__zoom{display:none!important}
  .view{display:block!important}
  body{color:#000}
  .st{opacity:1!important;transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .hero__img,.hero__shadow,.ord__ring path,.boot__mark path{animation:none!important}
  .st{opacity:1;transform:none}
}

/* 1280+ type step-ups (kept last so they win the cascade) */
@media(min-width:1280px){.card__n{font-size:16px} .card__m{font-size:var(--f13)} .pdp__copy{font-size:16px} .trust article p{font-size:var(--f15)}}


/* ============================================================
   KEPT FROM THE 2026-09-08 PASS — structural fixes only.
   The visual direction of that pass (warm gradient wells, contact
   shadows, true-relative product scale, denser cards, a large bold
   price) was reverted: it read as an ordinary template. Nothing
   below changes the look of a product; each rule fixes a defect
   that was reproduced by measurement.
   ============================================================ */

/* Arabic is a joined script and an en-dash between two Latin-digit runs is bidi-neutral,
   so every delivery window used to render 21:00 – 18:00. Digits type left-to-right. */
html[dir="rtl"] input[inputmode="numeric"],html[dir="rtl"] input[type="tel"]{direction:ltr;text-align:start}
html[dir="rtl"] .win button{unicode-bidi:isolate}
/* the About manifesto ran at 0.98 in both languages; Arabic diacritics climbed into the line above */
html[lang="ar"]{--lh-ar-display:1.16}
html[lang="ar"] .ab__manif h1{line-height:var(--lh-ar-display)}

/* the consent panel used to sit on top of the hero's only price and only buy button:
   elementFromPoint at the CTA centre returned the cookie text. */
.consent{inset-inline:0;bottom:0;max-width:none;flex-direction:row;align-items:center;flex-wrap:nowrap;
  gap:10px;padding:8px 14px calc(8px + var(--sab));box-shadow:0 -8px 40px -12px rgba(15,15,17,.28),0 -1px 0 var(--hair)}
/* no line clamp: at 390 px the English needs four lines and the clamp cut the panel's only link to
   "Privacy &…" (device run 2026-09-12). The bar grows one line instead. */
.consent p{flex:1 1 auto;min-width:0;font-size:var(--f11);line-height:1.35}
.consent__acts{flex:0 0 auto;flex-direction:column;gap:6px}
.consent__acts button{min-height:34px;padding:0 10px;font-size:var(--f11);white-space:nowrap}
@media(min-width:520px){
  .consent p{font-size:var(--f13)}
  .consent__acts{flex-direction:row;gap:8px}
  .consent__acts button{min-height:40px;padding:0 14px;font-size:var(--f12)}
}
body[data-view="checkout"] .consent,body[data-view="pdp"] .consent{bottom:calc(var(--bar-h) + var(--sab))}
body.has-consent{padding-bottom:var(--consent-h,0px)}

/* a wrong URL used to teleport the shopper to the home page with no explanation */
.v-nf{padding:calc(var(--hdr) + var(--sat) + 40px) 0 0}
.nf{max-width:var(--max);margin-inline:auto;padding:40px var(--pad) 72px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.nf__h{font-family:var(--f);font-size:clamp(26px,7vw,36px);font-weight:600;letter-spacing:var(--ls-tight);line-height:1.1;max-width:18ch}
.nf__p{color:var(--ink-2);font-size:var(--f15);max-width:46ch}
.nf__acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:10px}

/* the bag was a 94vw sliver holding 115px of product above 472px of empty white */
.cart__panel{width:100%}
@media(min-width:600px){.cart__panel{width:min(440px,94vw)}}
.cart__ledger{display:grid;gap:4px;margin:2px 0 8px}
.cart__ledger div{display:flex;justify-content:space-between;gap:12px;font-size:var(--f13);color:var(--ink-3)}
.cart__ledger dd{margin:0}
.cart__assure{font-size:var(--f11);color:var(--ink-3);text-align:center;margin-top:10px;line-height:1.4}
.cline__u{display:block;font-size:var(--f11);color:var(--ink-3);margin-top:2px}
.cart__reco--filled{padding:22px 20px 8px;border-top:1px solid var(--hair-2);margin-top:18px}
.card__note{font-family:var(--f);font-size:var(--f11);line-height:1.35;color:var(--ink-3);margin-top:2px}

/* at the moment of pressing PAY the only thing on screen was the site footer */
.co__assure{margin-top:26px;padding-top:18px;border-top:1px solid var(--hair-2)}
.co__assure ul{display:grid;gap:10px;margin-top:12px}
.co__assure li{display:flex;gap:10px;align-items:flex-start;font-size:var(--f13);color:var(--ink-2);line-height:1.4}
.co__assure .ico{width:17px;height:17px;flex:0 0 auto;margin-top:1px;color:var(--ink)}
.foot--min .foot__grp,.foot--min .foot__tag,.foot--min .foot__wa,.foot--min .foot__mail{display:none}
.foot--min .foot__in{padding-top:20px}

/* the product's name and price used to appear 71% down the first screen, under an
   unlabelled grey square; and the line that closes a Qatari appliance sale (plug and
   voltage) was 2,027px down inside the fourth collapsed accordion. */
.pdp__id{padding:0 var(--pad) 14px}
.pdp__id--desk{display:none;padding:0}
@media(min-width:1024px){.pdp__id--phone{display:none}.pdp__id--desk{display:block}}
.pdp__assure{font-size:var(--f12);color:var(--ink-3);line-height:1.5}

/* ---- stock state, said out loud (2026-09-12) ----
   It used to live only in the invisible JSON-LD and in the checkout's last gate: a piece the
   owner had marked "not available" looked exactly like any other, took a tap, sat in the bag,
   and was refused on the final press. The state is a plain fact, so it is set quietly in the
   mono label voice; only the sentence that actually blocks the bag turns --danger. */
.pdp__stock{font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);color:var(--ink-3);text-transform:uppercase}
.pdp__stock--off{color:var(--ink-2)}
/* scoped, NOT a bare .cta[disabled]: the pay button is disabled while the order is in flight and
   must keep reading as "working", not as "unavailable" */
.pdp__buy .cta[disabled],.pdp__bar .cta[disabled]{background:transparent;color:var(--ink-3);border:1px solid var(--hair);cursor:not-allowed}
.pdp__buy .cta[disabled]:active,.pdp__bar .cta[disabled]:active{transform:none}
.card__add--off{color:var(--ink-3);border-color:var(--hair-2);cursor:default;font-size:var(--f11);line-height:1.15;text-align:center}
.card:hover .card__add--off{background:transparent;color:var(--ink-3);border-color:var(--hair-2)}
.cline--off .cline__img,.cline--off .cline__p{opacity:.55}
.cline__off{font-family:var(--fm);font-size:var(--f11);letter-spacing:var(--ls-label);color:var(--ink-2);text-transform:uppercase}
.cart__assure--warn{color:var(--danger)}
.cart__foot .cta[disabled]{background:transparent;color:var(--ink-3);border:1px solid var(--hair);cursor:not-allowed}
/* a piece that has left the catalogue: the receipt and the summary used to drop the row and keep the
   full total, so the paid amount did not match the list the shopper could see */
.sum__row--gone .sum__p,.ord__line--gone .sum__p{color:var(--ink-3)}
.sum__row--gone .sum__img,.ord__line--gone .sum__img,.cline--off .cline__img{border:1px solid var(--hair-2)}
.ord__line--gone{cursor:default}


/* ════════════════════════════════════════════════════════════
   ACCENT & BOUNDARY SYSTEM — 2026-09-10
   ────────────────────────────────────────────────────────────
   The site already had one red. It spent it inconsistently:
   "you are here" was red in ONE place (the hero tick) and black
   in nine; the same editorial index was red, ink and grey in
   three different views; and the same #e20202 meant both
   "current step" and "this field is wrong" on the checkout.

   So this is not a new colour. It is one grammar for the red the
   site already had, split into the three jobs it has to do:

     BRAND   var(--brand)   the logo. Never changes, never a state.
     ACCENT  var(--accent)  INDEX (editorial numbering) + NOW
                            (where you are / what you picked).
                            Always drawn as GEOMETRY on an edge:
                            a rule, a ring, a tick. Never a fill,
                            never a price, never a heading.
     DANGER  var(--danger)  faults only. Always drawn as TEXT +
                            icon, never as an edge mark. Inside
                            the checkout, red means ONLY this.

   The tokens live in :root at the top of this file and the 22
   original rules now read the right one, so there is a single
   source of truth per rule. Everything BELOW is new: the marks
   that were black and should have been accent, the boundary
   layer, and the direction bugs the audit turned up.

   Boundaries get their own quiet layer: one hairline token
   (--rule) for structural edges, and one accent head-segment
   (--tick) that opens every indexed section rule.
   ════════════════════════════════════════════════════════════ */

.theme-dark{--rule:rgba(255,255,255,.16)}

/* ── INDEX: the editorial ordinal marks the SECTION SPINE only. Never a per-item
      serial — a red number on every card is a colour scheme, not an accent. ── */
.hero__kick .mono-r{color:var(--ink)}            /* product № stays metadata ink */

/* ── NOW: one language for "you are here" / "this is what you chose".
      Every one of these was black before; the hero tick was the only red. ── */
.navlinks a::after{background:var(--ink-3)}      /* hover — the pointer is here */
.navlinks a.on::after{background:var(--accent)}  /* active — you are here */
.chip.on::after{background:var(--accent)}
.pol__nav a.on::after{background:var(--accent)}
.menu__nav a.on{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:9px;text-decoration-thickness:2px}
.acc__i.open .acc__h .ico{color:var(--accent)}
.ctlbtn[aria-expanded="true"]{color:var(--ink)}
/* phone only: at 768+ the filter/sort panel is a popover painted directly over this
   button, so an underline here would never be seen. The red #filterCount carries the
   applied-filter state on desktop instead. */
@media(max-width:767px),(max-height:500px){
  .ctlbtn[aria-expanded="true"]::after{content:'';position:absolute;inset-inline:0;bottom:6px;height:2px;background:var(--accent)}
}
@media(hover:hover){.card:hover .card__no{color:var(--accent)}}
/* Two deliberate exclusions.
   1. Selected colour swatches keep an INK ring: a red ring around a colour chip
      reads as "unavailable", and it tints the colour it is supposed to frame.
   2. Controls that FILL when chosen — option chips, delivery windows, payment
      methods, the size table — stay monochrome. The fill already is the state,
      and their tick glyph would then collide with the one below. */

/* ── CHOSEN: the one red glyph, and it belongs to the proposition.
      "Chosen, not listed" is the whole shop, so the tick beside each reason a
      product was kept is not decoration — it is the brand speaking. It keeps the
      accent, and is protected by taking the accent OFF every other tick on the
      site (the exclusions above), so a red check now means exactly one thing.
      No rule needed here — .why__list .ico already reads var(--accent). ── */

/* .fld:focus-within label{color:var(--ink)} (app.css above) outranks .fld.bad label on
   exactly the field that validation focuses — so the field being complained about was
   the one field whose label was NOT red. Restore the fault colour while focused. */
.fld.bad:focus-within label,.fld.bad:focus-within legend{color:var(--danger)}

/* ── BOUNDARY: one hairline for structure, one accent segment that opens a section ── */
.grid{border-block-color:var(--rule)}
.grid .card{box-shadow:-1px 0 0 var(--rule),0 1px 0 var(--rule)}
html[dir="rtl"] .grid .card{box-shadow:1px 0 0 var(--rule),0 1px 0 var(--rule)}
.rail .card{box-shadow:inset 0 0 0 1px var(--rule)}
.trust,.trust article{border-color:var(--rule)}
.hdr.scrolled{box-shadow:0 1px 0 var(--rule)}
.chipbar{border-bottom-color:var(--rule)}
@media(min-width:1024px){.pdp__rel .rail{border-block-color:var(--rule)}}  /* its own card rules already moved */

/* the new position bar is screen furniture, not content */
@media print{.rail__prog{display:none!important}}

/* 2026-09-11: the accent head-segment that opened every indexed section rule is gone, and so
   are the rules themselves — the owner read them as lines with no meaning. Sections are now
   separated by real headings and space. */

/* Three money states (paid / owed at the door / not started) rendered as one
   identical grey run of text on both the receipt and the orders list. */
.ostat{font-style:normal;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
/* --ink-4 is declared DECORATION ONLY (2.77:1) and this dot encodes a state, so the
   waiting dot uses --ink-3 (6.26:1) — over the 3:1 floor for a non-text indicator. */
.ostat::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ink-3);flex:0 0 auto}
.ostat--paid::before{background:var(--ink)}
.ostat--due::before{background:var(--accent)}

/* The shortlist rail had no position affordance at all — and a phone is the only
   place it is ever swiped. Same vocabulary as the hero tick row: a short grey track
   with an accent segment on it, where the segment IS the position. */
.rail__prog{position:relative;height:2px;width:120px;background:var(--hair-2);margin:-16px var(--pad) 16px;display:none}
.has-arrows .rail__prog{display:block}
@media(hover:hover) and (pointer:fine){.rail__prog{display:none!important}}   /* the arrows carry it on desktop */
.rail__prog b{position:absolute;inset-block:0;inset-inline-start:var(--px,0%);width:var(--pw,40%);background:var(--accent);transition:inset-inline-start 90ms linear}
@media(prefers-reduced-motion:reduce){.rail__prog b{transition:none}}


/* hover on the two editorial "go" links resolves to the accent edge */
.shead__go:hover,.claim:hover .mono{border-block-end-color:var(--accent);color:var(--ink)}

/* ════════════════════════════════════════════════════════════
   BUGS FOUND WHILE MAPPING THE ABOVE — each one reproduced.
   These are direction / specificity faults that were invisible
   only because the marks sitting on them were 7% grey.
   ════════════════════════════════════════════════════════════ */

/* 1. The hero carousel was the only carousel that never mirrored: .off-l/.off-r are
      physical translateX with no RTL rule, so Arabic slid images left while the tick
      row (display:flex) advanced right. Promoting that tick to the system's canonical
      NOW mark would have drawn a red arrow pointing the wrong way on the first
      Arabic screen. (The rail at home.js:113 and the gallery at pdp.js:188 both
      already multiply by document.dir; the hero did not.) */
html[dir="rtl"] .hero__item.off-l{transform:translateX(9%) scale(.96)}
html[dir="rtl"] .hero__item.off-r{transform:translateX(-9%) scale(.96)}

/* 2. .grid .card has an RTL box-shadow flip; its twin at the related-products rail
      never got one, so Arabic drew the separator on the trailing side and left the
      orphan line the original comment exists to prevent. */
@media(min-width:1024px){
  .pdp__rel .rail .card{box-shadow:-1px 0 0 var(--rule)}
  html[dir="rtl"] .pdp__rel .rail .card{box-shadow:1px 0 0 var(--rule)}
}

/* 3. `.ctile:hover .ctile__t .ico` (0,4,0) outranks `html[dir=rtl] .ctile__t .ico`
      (0,3,1), so hovering a category tile in Arabic un-mirrored the arrow and slid it
      INTO its own label. Same family on the PDP back link. Merge, don't compete. */
html[dir="rtl"] .ctile:hover .ctile__t .ico{transform:scaleX(-1) translateX(4px)}
html[dir="rtl"] .pdp__back:hover .ico{transform:scaleX(-1) translateX(-3px)}

/* 4. The Anwani plate is a depiction of a real object — the blue plate at a Doha gate
      reads ZONE · STREET · BUILDING. As inline-flex it reversed under dir=rtl and the
      Arabic checkout showed BUILDING · STREET · ZONE, i.e. the plate backwards. */
.anwani{direction:ltr}

/* 5. Three physical 4-value paddings on hairline-carrying headers had no RTL
      counterpart (two of their siblings do), so in Arabic the tight inset landed at
      the start and the roomy one at the end, under the heaviest rules on the panel. */
html[dir="rtl"] .cart__top{padding-inline:20px 10px}
html[dir="rtl"] .search__x{padding-inline:14px 4px}
html[dir="rtl"] .menu__top{padding-inline:var(--pad) calc(var(--pad) - 10px)}

/* 6. A fixed 22px index box while Arabic bumps --f11 from 11px to 12px. */
.ab__phil h3 i{width:auto;min-width:22px}

/* 7. The chipbar fade mask is painted over the element's own children, so the active
      category's 2px underline was being erased whenever that chip sat in the last 8%
      — and which chip that is flips with the language. */
.chipbar.overflowing{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 97%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 97%,transparent 100%)}
html[dir="rtl"] .chipbar.overflowing{-webkit-mask-image:linear-gradient(270deg,#000 0%,#000 97%,transparent 100%);mask-image:linear-gradient(270deg,#000 0%,#000 97%,transparent 100%)}

/* 8. One hand-typed grey two steps off --tile, used once. */
.sres:active,.sres:hover{background:var(--tile)}


/* ════════════════════════════════════════════════════════════
   ROUND 6 — 2026-09-11 · the owner's issue list
   ════════════════════════════════════════════════════════════ */

/* wide screens: the header lines up with the 1440 content column instead of hugging the
   window edges while the page sits in the middle */
@media(min-width:1024px){
  .hdr{padding-inline:max(calc(var(--pad) - 10px),calc((100% - var(--max)) / 2 + var(--pad) - 10px))}
}

/* one round previous / next button for the hero, the gallery and the viewer */
.navbtn{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;flex:0 0 auto;background:var(--paper);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow var(--d2) var(--e),opacity var(--d2),transform var(--d1) var(--e)}
.navbtn .ico{width:18px;height:18px}
@media(hover:hover){.navbtn:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--ink)}}
.navbtn:active:not(:disabled){transform:scale(.94)}
.navbtn:disabled{opacity:.35;cursor:default}
.navbtn--sm{width:40px;height:40px}
html[dir="rtl"] .navbtn .ico{transform:scaleX(-1)}

/* full-screen image viewer (product gallery → click / Zoom / Enter) */
.lb{position:fixed;inset:0;z-index:95;background:var(--paper);display:flex;flex-direction:column;
  visibility:hidden;opacity:0;transition:opacity var(--d2) var(--e),visibility 0s linear var(--d2)}
.lb.on{visibility:visible;opacity:1;transition:opacity var(--d2) var(--e),visibility 0s}
.lb__top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;
  padding:calc(var(--sat) + 6px) calc(var(--pad) - 10px) 6px var(--pad)}
html[dir="rtl"] .lb__top{padding-inline:var(--pad) calc(var(--pad) - 10px)}
.lb__count{color:var(--ink-2);min-height:1em}
.lb__track{flex:1;min-height:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:var(--tile)}
.lb__track::-webkit-scrollbar{display:none}
.lb__slide{flex:0 0 100%;min-width:0;height:100%;margin:0;scroll-snap-align:start;display:grid;place-items:center;padding:2vh 2vw calc(2vh + var(--sab))}
.lb__img{width:100%;height:100%;object-fit:contain}
.lb__nav{position:absolute;top:calc(50% + 6px)}
.lb__nav--prev{inset-inline-start:var(--pad)}
.lb__nav--next{inset-inline-end:var(--pad)}
@media(hover:none){.lb__nav{display:none}}

/* LTR inputs inside an Arabic form (card, expiry, CVC, Anwani): the field row runs left-to-right,
   so the lock / tick sit at the END of the number — the lock used to sit on the first digits */
html[dir="rtl"] .fld__in:has(> input[dir="ltr"]),html[dir="rtl"] .fld__in:has(> input[inputmode="numeric"]){direction:ltr}

/* layers hold the page still behind them (bag, menu, search, filters, viewer) */
body.layer-open{overflow:hidden}
html{scrollbar-gutter:stable;transition:background-color 250ms var(--e)}
/* the reserved scrollbar gutter belongs to the root, outside the fixed scrim: with the bag open a
   15 px white strip stayed undimmed down the right edge on Windows (device run 2026-09-12).
   Same tint as .cart__scrim over paper. */
html:has(.cart.on){background-color:color-mix(in srgb,var(--paper) 66%,#0f0f11)}
/* the bag says which order limit stopped an add */
.cline--note{margin:12px 0 2px;padding:10px 12px;background:var(--tile);font-size:var(--f13);line-height:1.45;color:var(--ink)}
.qty button:disabled{opacity:.3;cursor:default}
.foot__cookie{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;border-block-end:1px solid var(--hair);padding:0}

/* policy pages — at-a-glance rail (below the text on phones, a sticky third column from 1280) */
.pol__aside{margin-top:36px;padding:20px 22px 14px;background:var(--tile)}
.pol__aside-h{font-family:var(--f);font-size:var(--f15);font-weight:600;letter-spacing:var(--ls-snug);margin-bottom:4px}
.pol__aside li a{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;padding:10px 0;color:var(--ink)}
.pol__aside .ico{width:18px;height:18px;margin-top:1px}
.pol__aside b{display:block;font-family:var(--f);font-size:var(--f13);font-weight:600}
.pol__aside small{display:block;font-size:var(--f12);color:var(--ink-2);line-height:1.45;margin-top:2px}
@media(hover:hover){.pol__aside li a:hover b{text-decoration:underline;text-underline-offset:3px}}
.pol__aside .linky{margin-top:6px}

/* ════════════════════════════════════════════════════════════
   ROUND 6 · VISUAL QA — 2026-09-11
   Independent sweeps (phone / desktop, EN / AR) measured the site in a
   real browser. Every rule below answers one measured fault.
   ════════════════════════════════════════════════════════════ */

/* product cards on phones: price above a full-width button. "FROM QAR 390" plus the 72px button is
   wider than a card on a 360 phone, so the button ran past the card and off the screen */
@media(max-width:599px){
  .card__f{flex-direction:column;align-items:stretch;gap:10px}
  .card__add{width:100%}
}

/* the phone's bottom bar (product page, checkout) sits over the end of the page: the footer's
   language switch — on the checkout the only one — was under it */
@media(max-width:1023px){body[data-view="pdp"] .foot__in{padding-bottom:calc(28px + var(--bar-h) + var(--sab))}}
@media(max-width:899px){body[data-view="checkout"] .foot__in{padding-bottom:calc(28px + var(--bar-h) + var(--sab))}}

/* contact: the address breaks after the @ (policy.js adds the break), never inside a word —
   it read "hello@sinoqat.globa" / "l" at 360 */
.ct__card .ct__mail{overflow-wrap:normal}
/* phones: the request field gets the whole width — its placeholder was cut to "e.g. a 1.5 L kettle in" */
@media(max-width:599px){.ct__form .lookup__row{flex-direction:column;align-items:stretch}}

/* policy tabs on phones: the strip runs to the screen edge like the shop's category bar and fades at
   the edge while there is more to scroll (policy.js) — three of five tabs were hidden, no cue */
@media(max-width:767px){.pol__nav{margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scroll-padding-inline:var(--pad)}}
.pol__nav.overflowing{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 84%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 84%,transparent 100%)}
html[dir="rtl"] .pol__nav.overflowing{-webkit-mask-image:linear-gradient(270deg,#000 0%,#000 84%,transparent 100%);mask-image:linear-gradient(270deg,#000 0%,#000 84%,transparent 100%)}
/* policy contents on phones: each row is a 44px target (they were 16px tall, 12px apart) */
@media(max-width:1023px){.pol__toc li{padding:0}.pol__toc a{display:flex;align-items:center;min-height:44px}}

/* shop grid: a rule only BETWEEN columns. Each row opened with a line 14px outside the content edge
   and closed with none, so the frame was lopsided */
@media(max-width:699px){.grid .card:nth-child(2n+1),html[dir="rtl"] .grid .card:nth-child(2n+1){box-shadow:0 1px 0 var(--rule)}}
@media(min-width:700px) and (max-width:1199px){.grid .card:nth-child(3n+1),html[dir="rtl"] .grid .card:nth-child(3n+1){box-shadow:0 1px 0 var(--rule)}}
@media(min-width:1200px){.grid .card:nth-child(4n+1),html[dir="rtl"] .grid .card:nth-child(4n+1){box-shadow:0 1px 0 var(--rule)}}

/* bag: the suggestions share the drawer's 20px edge, and one rule — the last line's — separates
   them. A second rule 19px lower read as a stray line, and the block was inset 20px from the rest */
.cart__reco--filled{margin-top:0;padding:24px 0 8px;border-top:0}
/* the alt-photo hover swap belongs to the shop grid: the bag never renders the alt photo, so a
   hover left an empty grey tile */
.cart__recogrid .card:has(.card__img--alt):hover .card__img:not(.card__img--alt){opacity:1}

/* only weights 400–500 of Inter and JetBrains Mono ship: a 700 there is a smeared, synthesised bold */
.foot__grp h4{font-weight:500}
.ord__receipt b{font-family:var(--f);font-weight:600}

/* touch targets: 44px hit areas without drawing the controls any bigger */
.qty button,.cline__x,.gal__ctl .navbtn,.sum__edit,.foot__legal a,.foot__cookie{position:relative}
.qty button::before{content:'';position:absolute;inset:-4px -2px}
.cline__x::before{content:'';position:absolute;inset:-4px}
.gal__zoom::before,.gal__ctl .navbtn::before{content:'';position:absolute;inset:-2px;border-radius:50%}
.sum__edit::before{content:'';position:absolute;inset:-6px -4px}
.foot__legal a::before,.foot__cookie::before{content:'';position:absolute;inset:-6px -2px}
.chip::before{content:'';position:absolute;inset-block:0;inset-inline:min(-8px,calc((100% - 44px) / 2))}
.search__pop button{min-height:44px}
.hero__ticks button{width:40px}
@media(min-width:375px){.hero__ticks button{width:44px}}

/* desktop: the category tabs line up with the page — at 1920 they started 232px left of the heading */
.chipbar{max-width:var(--max);margin-inline:auto}

/* desktop filter / sort: under the button that opened it (shop.js sets --at / --as), wide enough for
   the three price bands on one row. It was pinned 168px from the top, over its own button */
@media(min-width:768px) and (min-height:501px){
  .sheet__panel{top:var(--at,calc(var(--hdr) + 112px));max-height:calc(100svh - var(--at,168px) - 16px);width:360px}
  .sheet .sheet__panel{inset-inline-start:var(--as,max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad))))}
  .sheet--sort .sheet__panel{width:260px}
}

/* viewer: the photo is fitted to the screen. The slide's grid row was sized by the image itself, so a
   2000px photo drew 1367px tall and its lower half was off the screen */
.lb__slide{position:relative;padding:0}
.lb__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:2vh 2vw calc(2vh + var(--sab));box-sizing:border-box}

/* a stretched CTA spread its grid columns across the button: the label sat left of centre and the
   lock floated in the right half (Pay; the order page's WhatsApp button). Centred tracks keep them together */
.cta{justify-content:center}

/* shortlist arrows say where the ends are (home.js) */
.rail__arrow[aria-disabled="true"]{opacity:.35;cursor:default}
/* wide screens: the rail runs to the window edge as it does at 1440, first card on the content edge.
   It was cut hard at the 1440 container, mid-gutter, with the Next arrow over the cut */
@media(min-width:1441px){
  .hsec--rail{max-width:none}
  .hsec--rail .shead{max-width:var(--max);margin-inline:auto}
  .hsec--rail .rail{padding-inline:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));scroll-padding-inline:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)))}
  .hsec--rail .rail__arrow--l{inset-inline-start:calc(max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad))) - 22px)}
  .hsec--rail .rail__arrow--r{inset-inline-end:calc(max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad))) - 22px)}
}

/* product page, desktop: while the buy bar is down, the stuck gallery starts under it (bar 61px;
   column spacer 8 + back link 44 = 52px; so 9px more). The bar covered the photo's top 9px */
@media(min-width:1024px){
  .pdp__galcol{transition:top var(--d3) var(--e)}
  body:has(#pdpBar.on) .pdp__galcol{top:calc(var(--hdr) + var(--sat) + 9px)}
}

/* SINOQAT figures: the first and last figure sit on the content edge like everything around them
   (the first started 44px left of the heading) */
@media(min-width:768px){
  .ab__nums{max-width:var(--max)}
  .ab__num:first-child{padding-inline-start:var(--pad)}
  .ab__num:last-child{padding-inline-end:var(--pad)}
}

/* header: the mark sits on the content edge. The header is inset 10px less than the page so its
   44px icon buttons centre on the edge; the logo link gave back only 6px of it */
@media(min-width:1024px){.hdr .brand{padding-inline-start:10px}}

/* policy pages at 1280+: the rail starts level with the contents column. The base 36px margin is
   declared later in this file than the 8px meant for this layout, so it won */
@media(min-width:1280px){.pol__aside{margin-top:8px}}
/* the "last updated" line is metadata: `.pol p` (15px body copy) outranked `.mono` */
.pol .pol__updated{font-size:var(--f11);line-height:1.5;color:var(--ink-3)}

/* contact, desktop: the request form and the complaints route sit on the card grid above — the form
   across two columns, complaints as the third tile. It used to start on no column line at all */
@media(min-width:1024px){
  .ct__row{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10px}
  .ct__row .ct__form{grid-column:1 / 3;padding-inline-end:54px}
  .ct__row .ct__complaint{grid-column:3;background:var(--tile);padding:16px 14px}
  .ct__row .ct__h{font-size:var(--f15)}
  .ct__row .ct__complaint p{font-size:var(--f13);line-height:1.5;margin-top:6px}
}

/* "Why we chose it" heads its section: it was an 11px grey label over 15px text */
.why__h{font-family:var(--f);font-size:var(--f17);font-weight:600;letter-spacing:var(--ls-snug);text-transform:none;color:var(--ink);margin-bottom:6px}

/* desktop pay bar: opaque. Through the 94% white + blur, the blue Anwani plate scrolling under it
   showed as a smear beneath "3 ITEMS" */
@media(min-width:900px){.co__bar{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* wide screens: the SINOQAT opener and the 404 take the About page's two columns (heading left, text
   right); they used a third of the container and left the rest blank */
@media(min-width:1024px){
  .ab__manif--sm{display:grid}
  .ab__manif--sm .pdp__back{grid-column:1 / -1;justify-self:start;margin-bottom:12px}
  .nf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;row-gap:16px;align-items:end;padding-top:48px;padding-bottom:96px}
  .nf>.mono{grid-column:1 / -1}
  .nf__h{grid-column:1;grid-row:2 / span 2;font-size:clamp(48px,4.6vw,72px);line-height:1.02;max-width:14ch}
  .nf__p{grid-column:2;grid-row:2}
  .nf__acts{grid-column:2;grid-row:3;margin-top:0}
}

/* ── visual QA, second pass: tablet / landscape / Arabic / keyboard (2026-09-11) ── */

/* only real faces: the sign-off label and the brand paragraph asked for a bold the fonts don't ship */
.ab__sign b{font-weight:500}
.brand__p b{font-family:var(--f);font-weight:600}

/* "Edit bag" is a 44px target: its underline is a text decoration now, so the box can be tall
   without dropping the line away from the words (a 6px ::before did not register below it) */
.sum__edit{min-height:44px;display:inline-flex;align-items:center;padding:0;border-block-end:0;text-decoration:underline;text-decoration-color:var(--hair);text-decoration-thickness:1px;text-underline-offset:4px}
.sum__edit::before{content:none}

/* gallery slides: the photo fits the slide's box whatever its shape — a landscape phone gives the
   track 60svh, and the photo kept its width-derived height (up to 43% of it cut off) */
.gal__slide{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
/* the gallery box can start on a fractional pixel while the track scrolls in whole ones — a 1px
   sliver of the next photo showed along the edge (Arabic) */
.gal__track{clip-path:inset(0 1px)}
/* the thumbnail focus ring was clipped by the rail's own scroll box to a stray underline */
.gal__thumbs button:focus-visible{outline-offset:-2px}

/* landscape phones */
@media(orientation:landscape) and (max-height:500px){
  :root{--stage:240px}                                   /* the hero's arrows ended 7px below the fold */
  /* the bag scrolls as one column: its footer took 305 of 390px and left 22px for the items */
  .cart__panel{overflow-y:auto;overscroll-behavior:contain}
  .cart__body{flex:0 0 auto;overflow:visible}
  .cart__top{position:sticky;top:0;z-index:2;background:#fff}
}

/* checkout, desktop: the delivery windows fill the row — two windows sat in the first half of a
   four-column grid, their labels wrapping */
@media(min-width:900px){.win{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}

/* a focused field never lands under the pay bar (checkout) or the add-to-bag bar (product page on
   phones and tablets): scrolling a focused control into view keeps clear of header and bar */
html:has(body[data-view="checkout"]){scroll-padding-block:calc(var(--hdr) + var(--sat) + 16px) calc(var(--bar-h) + var(--sab) + 24px)}
@media(max-width:1023px){html:has(#pdpBar.on){scroll-padding-block:calc(var(--hdr) + var(--sat) + 16px) calc(var(--bar-h) + var(--sab) + 16px)}}

/* policy pages 1024–1279: the promise box keeps the text column's measure (it ran 171px wider) */
@media(min-width:1024px) and (max-width:1279px){.pol__aside{max-width:72ch}}

/* footer at tablet widths: the brand gets its own row and the three link columns sit under it —
   at 768 the lockup was squeezed onto two lines */
@media(min-width:768px) and (max-width:1023px){
  .foot__in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__brand{grid-column:1 / -1}
}
.lockup b,.lockup span,.brand__word,.brand__by{white-space:nowrap}

/* home on a portrait tablet: the hero no longer reserves a screen's height it cannot fill
   (about 400px of the first screen was white) */
@media(min-width:768px) and (max-width:1023px) and (orientation:portrait){.hero{min-height:0;padding-block:24px 8px}}
/* a spec value and its unit stay together ("5.5" / "ساعة" split across two lines) */
.hero__sub bdi{white-space:nowrap}

/* About: heading beside content from 1180 — at 1024 the label column was too narrow, wrapped one of
   three headings, and the three cards' titles wrapped unevenly */
@media(min-width:1180px){
  .ab__sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:64px;align-items:start;padding-block:72px 24px}
  .ab__sec .ab__label{flex-direction:column;gap:8px;margin:0;position:sticky;top:calc(var(--hdr) + 32px)}
}

/* short labels keep a 44px target without drawing bigger (header links, policy tabs, underlined
   links) — the hit area grows only when the label is narrower than 44px */
.pol__nav a,.linky{position:relative}
.pol__nav a::before,.linky::before{content:'';position:absolute;inset-block:0;inset-inline:min(0px,calc((100% - 44px) / 2))}
.navlinks a::before{content:'';position:absolute;inset-block:0;inset-inline:min(-6px,calc((100% - 44px) / 2))}

/* Arabic ───────────────────────────────────────────────────────────── */
/* the Arabic face carries no space character, so in label text (the mono stack) every space came
   from JetBrains Mono at 0.6em and the words stood apart. The space now comes from Inter. */
@font-face{font-family:'TC Space';src:url(../assets/fonts/inter-latin-400.woff2) format('woff2');unicode-range:U+0020;font-display:swap}
html[lang="ar"]{--fm:'TC Space','IBM Plex Sans Arabic','JetBrains Mono',ui-monospace,monospace}
/* the logo lockup reads the same in both languages — mark, THE CHOICE, BY SINOQAT. The Arabic flex
   row reversed it to "BY SINOQAT THE CHOICE" */
.brand,.lockup,.ab__kick{direction:ltr}
html[dir="rtl"] .lockup,html[dir="rtl"] .ab__kick{justify-content:flex-end}
/* Anwani: the three boxes run in the plate's order, ZONE · STREET · BUILDING left to right, so what is
   typed in the first box lands in the plate's first cell (in Arabic the boxes ran the other way) */
html[dir="rtl"] [data-fld="anwani"] .fldrow{direction:ltr}
html[dir="rtl"] [data-fld="anwani"] .fldrow>.fld{direction:rtl}

/* gallery / viewer arrows at the ends: aria-disabled keeps the keyboard focus where it is — a disabled
   button dropped it to <body>, and the next Tab escaped the viewer */
.navbtn[aria-disabled="true"]{opacity:.35;cursor:default}
@media(hover:hover){.navbtn[aria-disabled="true"]:hover{box-shadow:inset 0 0 0 1px var(--hair)}}
.navbtn[aria-disabled="true"]:active{transform:none}

/* 200% text on a phone: the email link breaks instead of running off the screen */
.ab__reg dd a{overflow-wrap:anywhere}

/* ── visual QA, third pass: Arabic form alignment (2026-09-11) ── */
/* Arabic forms: values typed left to right (phone, email, card, expiry, security code, Anwani) sit on
   the right, under their right-aligned labels — on a desktop they started 780px away from the label.
   Each value still READS left to right (direction:ltr; "5512 8840" never flips to "8840 5512"), and
   the +974 prefix sits at the start of the row, beside the number, isolated so it never reads "974+". */
html[dir="rtl"] .fld input[dir="ltr"],html[dir="rtl"] .fld input[inputmode="numeric"],html[dir="rtl"] .fld input[type="email"],html[dir="rtl"] .fld input[type="tel"]{text-align:right}
html[dir="rtl"] .fld .fld__in.fld__in--pre{direction:rtl}
html[dir="rtl"] .fld .fld__in--pre input{direction:ltr}
html[dir="rtl"] .fld__prefix{direction:ltr;unicode-bidi:isolate}
/* room for the tick (and the card's lock) at the end of a right-aligned value. The selectors carry an
   extra .fld so the card's 48px outranks the generic 24px (the :has() argument counts too); the phone
   row keeps none — in Arabic its tick sits at the other end, and padding would push the number off +974 */
html[dir="rtl"] .fld__in:has(> input[dir="ltr"]) input,html[dir="rtl"] .fld__in:has(> input[inputmode="numeric"]) input{padding-right:24px}
html[dir="rtl"] .fld .fld__in:has(> .fld__lock) input{padding-right:48px}
html[dir="rtl"] .fld .fld__in.fld__in--pre input{padding-right:0}

/* ============================================================
   CUSTOMER ACCOUNTS (2026-09-14, accounts spec §7)
   Built from the parts the checkout and order pages already use (.fld, .cta, .linky, .ordlist): no new
   colours, no fills for the accent, red only for a fault.
   ============================================================ */
.v-auth,.v-acct{padding:calc(var(--hdr) + var(--sat)) 0 0}
.auth{max-width:440px;margin-inline:auto;padding:28px var(--pad) 48px}
.auth__h{font-family:var(--f);font-size:var(--f28);font-weight:600;letter-spacing:var(--ls-tight);line-height:1.15}
.auth__h:focus{outline:none}
.auth__sub,.auth__lead{margin-top:8px;color:var(--ink-2);font-size:var(--f15);line-height:1.5}
.auth__lead bdi{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
/* a message carried back from Google/Apple or an account action: ink on tile; a fault keeps the checkout's red box */
.auth__note{margin-top:14px;padding:12px 14px;background:var(--tile);font-size:var(--f13);color:var(--ink);line-height:1.5}
.auth__note--err{background:var(--danger-wash);box-shadow:inset 0 0 0 1px var(--danger)}
.auth__msg{margin-top:12px;font-size:var(--f13);color:var(--danger);line-height:1.5}
.auth__msg:empty{display:none}
.auth__providers{display:flex;flex-direction:column;gap:10px;margin-top:22px}
/* Google: white, #747775 outline, #1F1F1F text · Apple: black, one colour for mark and text · the same size */
.authbtn{display:inline-grid;grid-auto-flow:column;place-content:center;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 12px;border-radius:4px;
  font-family:var(--fb);font-size:var(--f15);font-weight:500;line-height:1.2;transition:opacity var(--d2)}
.authbtn--google{background:#fff;color:#1f1f1f;box-shadow:inset 0 0 0 1px #747775}
.authbtn--apple{background:#000;color:#fff}
.authbtn__logo{width:20px;height:20px;display:block}
.authbtn[disabled]{opacity:.45;cursor:not-allowed}
.authbtn[aria-busy="true"]{opacity:.7;cursor:progress}
.authbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.authbtn__test{display:block;margin-top:-4px;text-align:center}
.auth__hint{font-size:var(--f13);color:var(--ink-2);line-height:1.5}
.auth__or{display:flex;align-items:center;gap:12px;margin:22px 0 4px;color:var(--ink-3);font-size:var(--f12)}
.auth__or::before,.auth__or::after{content:'';flex:1;height:1px;background:var(--hair)}
.auth__form{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.auth__form .cta{width:100%}
.auth__keep{margin-top:18px}
.auth__row{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}
.auth__row .linky[aria-disabled="true"]{color:var(--ink-3);border-block-end-color:var(--hair);cursor:default}
.auth .auth__hint{margin-top:10px}
.auth__foot{margin-top:28px;padding-top:12px;border-top:1px solid var(--hair-2)}

.acct{max-width:var(--max);margin-inline:auto;padding:24px var(--pad) 48px}
.acct__head h1{font-family:var(--f);font-size:var(--f28);font-weight:600;letter-spacing:var(--ls-tight)}
.acct__head h1:focus{outline:none}
.acct__who{margin-top:6px;color:var(--ink-2);font-size:var(--f15);overflow-wrap:anywhere}
.acct__who bdi{color:var(--ink)}
.acct__sec{padding:22px 0 8px}
.acct__h{font-family:var(--f);font-size:var(--f17);font-weight:600;letter-spacing:var(--ls-snug);margin-bottom:8px}
.acct__save{display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.acct__status{font-size:var(--f13);color:var(--ink-2)}
.acct__methods li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 0;border-top:1px solid var(--hair-2);min-height:44px}
.acct__methods li b{font-weight:500}
.acct__methods li span{font-size:var(--f13);color:var(--ink-2);overflow-wrap:anywhere;min-width:0}
.acct__acts{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.acct__acts .cta{width:100%}
.acct__warn{font-size:var(--f13);color:var(--ink);line-height:1.5;margin-top:10px}
.acct__delbox{margin-top:8px}
.acct__del{margin-top:6px}
.acct__side .fld__help{margin-top:8px}
@media(min-width:1024px){
  .acct__cols{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:64px;align-items:start}
  .acct__side{background:var(--tile);padding:6px 28px 20px;margin-top:22px}
}

.ordl__acct{margin-top:-8px;color:var(--ink-2);font-size:var(--f13);display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}

.co__acct:empty{display:none}
.co__signin{margin:6px 0 2px}
.co__signedin{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:8px 0 4px;font-size:var(--f13);color:var(--ink-2)}
.co__signedin>.ico{width:16px;height:16px}
.co__signedin bdi{color:var(--ink);overflow-wrap:anywhere}
.co__notyou{min-height:44px;padding:0 2px;color:var(--ink);border-block-end:1px solid var(--hair);font-size:var(--f13)}
.co__save{margin-top:16px}

/* the header's account entry once signed in: a filled mark, not a colour */
.ico--fill{fill:currentColor}
/* the header's account button (2026-09-14, only while some sign-in method is on — main.js adds .acctbtn): a 44px icon on a
   phone; from 768px, where the text nav shows, the word beside the icon in the nav's own type, box and underline */
.acctbtn__l{display:none}
@media(min-width:768px){
  .icobtn.acctbtn{width:auto;min-width:44px;display:inline-flex;align-items:center;gap:7px;padding-inline:10px}
  .acctbtn .acctbtn__l{display:inline-flex;align-items:center;min-height:44px;position:relative;white-space:nowrap;
    font-family:var(--fm);font-size:var(--f12);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2)}
  .acctbtn .acctbtn__l::after{content:'';position:absolute;inset-inline-start:0;bottom:8px;height:1px;width:100%;background:var(--ink-3);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d3) var(--e)}
  html[dir="rtl"] .acctbtn .acctbtn__l::after{transform-origin:100% 50%}
  .acctbtn:hover .acctbtn__l,.acctbtn.on .acctbtn__l{color:var(--ink)}
  .acctbtn:hover .acctbtn__l::after,.acctbtn.on .acctbtn__l::after{transform:scaleX(1)}
  .acctbtn.on .acctbtn__l::after{background:var(--accent)}
}
/* the phone menu's account entry: the person mark stands where the other entries have a number */
.menu__nav a.menu__acct{align-items:center}
.menu__nav a.menu__acct i{display:inline-flex;justify-content:center;width:15px}   /* the numbers' width, so the words still line up */
.menu__nav a.menu__acct .ico{width:22px;height:22px}
@media print{.co__acct,.co__save,.auth__providers,.acct__side{display:none!important}}