/* =========================================================
   WOOTZ — shared stylesheet (dashcam brand)
   Colors + design tokens lifted from index (48).html
   ========================================================= */

/* ============ TOKENS ============ */
:root{
  /* teal-tinted dark base (derived from brand hue) */
  --steel-950:#04181B;
  --steel-900:#062124;
  --steel-850:#072529;
  --steel-800:#0A2E33;
  --steel-750:#0E3940;
  --steel-700:#13454C;
  --steel-500:#4E7E80;
  --steel-400:#79A1A2;

  /* brand — EXACT logo color #01484E + readable sibling for dark */
  --brand:#01484E;
  --accent:#2E9499;          /* hue-matched lighter teal for accents on dark */
  --accent-press:#0E6066;
  --accent-soft:rgba(46,148,153,.14);

  /* premium — remapped to teal accent (matches theme) */
  --premium:#2E9499;
  --premium-bright:#4EB4B9;
  --premium-press:#0E6066;
  --premium-soft:rgba(46,148,153,.16);
  --premium-line:rgba(46,148,153,.40);
  --premium-grad:linear-gradient(135deg,#4EB4B9 0%,#2E9499 45%,#0E6066 100%);

  /* rec / alert (recording-light signal) */
  --rec:#FF5A4D;

  /* semantic — dark default */
  --bg:var(--steel-950);
  --bg-2:var(--steel-900);
  --surface:var(--steel-850);
  --surface-2:var(--steel-800);
  --line:rgba(140,210,212,.10);
  --line-strong:rgba(140,210,212,.18);
  --text:#E6F1F1;
  --text-2:#9DBDBE;
  --text-3:#5F8385;
  --shadow:0 24px 60px -28px rgba(0,0,0,.7);

  --maxw:1180px;
  --r:14px;
  --r-sm:10px;
  --ease:cubic-bezier(.22,1,.36,1);

  --ff-ar:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,monospace;
}
[data-theme="light"]{
  --brand:#01484E;
  --accent:#01484E;          /* exact logo color — perfect on white */
  --accent-press:#063A3F;
  --accent-soft:rgba(1,72,78,.10);
  /* premium — remapped to teal accent (matches theme) */
  --premium:#01484E;
  --premium-bright:#2E9499;
  --premium-press:#063A3F;
  --premium-soft:rgba(1,72,78,.12);
  --premium-line:rgba(1,72,78,.30);
  --premium-grad:linear-gradient(135deg,#2E9499 0%,#01484E 50%,#063A3F 100%);
  --bg:#EDF2F2;
  --bg-2:#E3ECEC;
  --surface:#FFFFFF;
  --surface-2:#F3F8F8;
  --line:rgba(1,72,78,.12);
  --line-strong:rgba(1,72,78,.20);
  --text:#0A2426;
  --text-2:#436261;
  --text-3:#82A0A0;
  --shadow:0 24px 50px -30px rgba(1,72,78,.30);
}

/* ============ RESET ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff-ar);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .4s var(--ease),color .4s var(--ease);
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
::selection{background:var(--brand);color:#fff}
.mono{font-family:var(--ff-mono);font-feature-settings:"tnum";}
.wrap{width:100%;margin-inline:auto;padding-inline:12px}
@media (min-width:576px){.wrap{max-width:540px}}
@media (min-width:768px){.wrap{max-width:720px}}
@media (min-width:992px){.wrap{max-width:960px}}
@media (min-width:1200px){.wrap{max-width:1140px}}
@media (min-width:1400px){.wrap{max-width:1320px}}

/* ============ HEADER ============ */
header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  /* backdrop-filter is NOT transitioned: animating a blur re-renders it every frame. */
  transition:background .35s var(--ease),border-color .35s var(--ease);
  border-block-end:1px solid transparent;
}
header.scrolled{
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-block-end-color:var(--line);
}
/* Touch devices: a live blur under a fixed header is re-rendered on every
   scroll frame, which is what made scrolling stutter on phones. A near-opaque
   background reads the same at a glance and costs nothing. */
@media (hover:none),(max-width:860px){
  header.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:color-mix(in srgb,var(--bg) 96%,transparent)}
}
.nav{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px}
.brand img{display:block;height:52px;width:auto}
.brand img.l-light{display:none}
[data-theme="light"] .brand img.l-light{display:block}
[data-theme="light"] .brand img.l-dark{display:none}
@media (max-width:860px){.brand img{height:27px}}
.nav-links{display:flex;gap:26px;margin-inline-start:auto;font-size:14.5px;color:var(--text-2)}
.nav-links a{position:relative;transition:color .25s}
.nav-links a::after{content:"";position:absolute;inset-block-end:-6px;inset-inline-start:0;width:0;height:2px;background:var(--accent);transition:width .3s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-tools{display:flex;align-items:center;gap:12px}
.icon-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);display:grid;place-items:center;
  cursor:pointer;transition:.25s var(--ease);
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.btn{
  font-family:inherit;font-weight:600;font-size:14.5px;cursor:pointer;
  padding:11px 20px;border-radius:11px;border:1px solid transparent;
  transition:.25s var(--ease);white-space:nowrap;display:inline-flex;align-items:center;gap:8px;
}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 26px -12px var(--brand)}
.btn-primary:hover{background:#0A6066;transform:translateY(-2px);box-shadow:0 16px 30px -12px var(--brand)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.burger{display:none}

/* ============ HERO ============ */
.hero{position:relative;display:flex;align-items:center;padding-block:260px 120px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg .grid{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 35%,#000 25%,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 70% 35%,#000 25%,transparent 75%);
}
.hero-bg .glow{
  position:absolute;inset-block-start:-10%;inset-inline-end:-5%;width:60vw;height:60vw;max-width:760px;max-height:760px;
  background:radial-gradient(circle,var(--accent-soft),transparent 62%);filter:blur(10px);
}
.hero-bg .scan{position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 3px,rgba(0,0,0,.04) 3px 4px);opacity:.6;pointer-events:none}

/* viewfinder corner brackets + HUD overlay.
   Rendered only when Settings > Pages Settings > Home hero switches them on;
   the markup is absent otherwise, so these rules simply match nothing. */
.viewfinder{position:absolute;inset-block:96px 40px;inset-inline:12px;z-index:1;pointer-events:none}
.viewfinder span{position:absolute;width:34px;height:34px;border:2px solid var(--accent);opacity:.55}
.viewfinder .tl{inset-block-start:0;inset-inline-start:0;border-inline-end:0;border-block-end:0;border-start-start-radius:6px}
.viewfinder .tr{inset-block-start:0;inset-inline-end:0;border-inline-start:0;border-block-end:0;border-start-end-radius:6px}
.viewfinder .bl{inset-block-end:0;inset-inline-start:0;border-inline-end:0;border-block-start:0;border-end-start-radius:6px}
.viewfinder .br{inset-block-end:0;inset-inline-end:0;border-inline-start:0;border-block-start:0;border-end-end-radius:6px}

/* HUD overlay (rec + timestamp) */
.hud{position:absolute;inset-block-start:104px;inset-inline:12px;box-sizing:border-box;padding-inline:18px;z-index:2;display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:13px;color:var(--text-2);pointer-events:none}
@media (min-width:576px){.viewfinder,.hud{inset-inline:0;left:0;right:0;margin-inline:auto;max-width:516px}}
@media (min-width:768px){.viewfinder,.hud{max-width:696px}}
@media (min-width:992px){.viewfinder,.hud{max-width:936px}}
@media (min-width:1200px){.viewfinder,.hud{max-width:1116px}}
@media (min-width:1400px){.viewfinder,.hud{max-width:1296px}}
.rec{display:flex;align-items:center;gap:8px;letter-spacing:1px}
.rec .dot{width:11px;height:11px;border-radius:50%;background:var(--rec);box-shadow:0 0 10px var(--rec);animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}

.hero-inner{position:relative;z-index:3;width:100%}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-ar);font-size:13.5px;font-weight:600;
  color:var(--accent);padding:7px 16px;border:1px solid var(--line-strong);
  border-radius:100px;background:var(--accent-soft);margin-block-end:26px;
}
.eyebrow b{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
h1.hero-title{
  font-size:clamp(2.5rem,6.4vw,5rem);font-weight:700;line-height:1.08;letter-spacing:-.5px;
  max-width:16ch;
}
h1.hero-title .truth{color:var(--accent);position:relative;display:inline-block}
h1.hero-title .truth::after{
  content:"";position:absolute;inset-block-end:.08em;inset-inline:0;height:.12em;
  background:var(--accent);opacity:.28;border-radius:2px;
}
.hero-sub{font-size:clamp(1.05rem,2.1vw,1.3rem);color:var(--text-2);max-width:46ch;margin-block:24px 0;font-weight:400}
.hero-sub strong{color:var(--text);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-meta{display:flex;flex-wrap:wrap;gap:28px;margin-block-start:52px;padding-block-start:30px;border-block-start:1px solid var(--line)}
.hero-meta .item{display:flex;flex-direction:column;gap:2px}
.hero-meta .k{font-family:var(--ff-mono);font-size:1.8rem;font-weight:600;color:var(--text)}
.hero-meta .k.ar{font-family:var(--ff-ar);font-weight:700}
.hero-meta .v{font-size:13px;color:var(--text-3)}

/* reveal utility */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}
[data-d="3"]{transition-delay:.24s}[data-d="4"]{transition-delay:.32s}
[data-d="5"]{transition-delay:.4s}[data-d="6"]{transition-delay:.48s}

@media (max-width:860px){
  .nav-links{display:none}
  .burger{display:grid}
  .nav-tools>.btn-primary{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}

/* ============ SECTION SHELL ============ */
.section{padding-block:96px;position:relative}
#dashcam-types{padding-block-start:40px}
.section-head{max-width:640px;margin-block-end:54px}
.tag{font-family:var(--ff-ar);font-size:14px;font-weight:600;color:var(--accent);display:inline-block;margin-block-end:14px}
.section-head h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:700;line-height:1.12;letter-spacing:-.4px}
.section-head p{color:var(--text-2);margin-block-start:16px;font-size:1.08rem}
.bg-alt{background:var(--bg-2)}
.divider-top{border-block-start:1px solid var(--line)}

/* ============ DIFFERENCE ============ */
.diff-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.gap-card{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:30px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.gap-card::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;height:3px;background:linear-gradient(90deg,var(--accent),transparent)}
.gap-card h3{font-size:1.15rem;margin-block-end:8px}
.gap-card p{color:var(--text-2);font-size:.97rem}
.gap-fear{margin-block-end:22px;padding-inline-start:16px;border-inline-start:3px solid var(--rec)}
.gap-fear h3{color:var(--text)}
.includes{display:flex;flex-direction:column;gap:14px}
.inc{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);transition:.3s var(--ease)}
.inc:hover{border-color:var(--accent);transform:translateX(-6px)}
.inc .ck{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.inc .ck svg{width:20px;height:20px}
.inc h4{font-size:1.02rem;margin-block-end:3px}
.inc p{color:var(--text-3);font-size:.9rem;line-height:1.5}
.inc .plus{font-family:var(--ff-mono);color:var(--accent);font-size:14px;margin-inline-start:auto;align-self:center;opacity:.6}

/* ============ WHY / BENEFITS ============ */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bcard{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:30px 26px;
  transition:.35s var(--ease);position:relative;overflow:hidden;
}
.bcard:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.bcard .ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-block-end:20px}
.bcard .ic svg{width:24px;height:24px}
.bcard h3{font-size:1.18rem;margin-block-end:10px}
.bcard p{color:var(--text-2);font-size:.97rem}
.bcard .num{position:absolute;inset-block-start:18px;inset-inline-end:22px;font-family:var(--ff-mono);font-size:13px;color:var(--text-3);opacity:.7}

/* ============ SPEC STRIP ============ */
.spec-strip{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:34px;display:grid;grid-template-columns:1.4fr 2.6fr;gap:40px;align-items:center}
.spec-strip .lead h3{font-size:1.4rem;line-height:1.25}
.spec-strip .lead p{color:var(--text-2);margin-block-start:10px;font-size:.95rem}
.spec-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.spec{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.spec .badge{font-family:var(--ff-mono);font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:3px 8px;letter-spacing:.5px;flex:0 0 auto}
.spec span.lbl{font-size:.96rem;color:var(--text)}
.spec small{display:block;color:var(--text-3);font-size:.82rem}

@media (max-width:920px){
  .diff-grid{grid-template-columns:1fr;gap:36px}
  .cards-3{grid-template-columns:1fr}
  .spec-strip{grid-template-columns:1fr;gap:26px;padding:26px}
  .spec-list{grid-template-columns:1fr}
}

/* ============ PRODUCTS / UMBRELLA ============ */
.umbrella-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-block-end:46px}
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prod{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:26px 22px;
  position:relative;overflow:hidden;transition:.35s var(--ease);min-height:200px;display:flex;flex-direction:column;
}
.prod:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--shadow)}
.prod .en{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:1.5px;color:var(--accent);margin-block-end:auto;opacity:.85}
.prod .pic{width:52px;height:52px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--text);margin-block-end:18px;transition:.35s var(--ease)}
.prod:hover .pic{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.prod .pic svg{width:26px;height:26px}
.prod h3{font-size:1.12rem;margin-block-start:14px}
.prod p{color:var(--text-3);font-size:.88rem;margin-block-start:5px}
.prod.more{background:linear-gradient(150deg,var(--surface-2),var(--surface));border-style:dashed}
.prod.more h3{color:var(--accent)}

.umbrella-note{
  margin-block-start:24px;padding:22px 26px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);display:flex;gap:16px;align-items:center;color:var(--text-2);font-size:.98rem;
}
.umbrella-note svg{flex:0 0 auto;color:var(--accent)}

/* ============ TRUST BAND ============ */
.trust{background:var(--bg-2)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tcell{background:var(--bg-2);padding:34px 26px;text-align:center;transition:background .3s}
.tcell:hover{background:var(--surface)}
.tcell .ic{width:46px;height:46px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin:0 auto 16px}
.tcell .ic svg{width:23px;height:23px}
.tcell h4{font-size:1.05rem;margin-block-end:6px}
.tcell p{color:var(--text-3);font-size:.88rem}

/* ============ POSITIONING QUOTE ============ */
.quote{padding-block:110px;text-align:center;position:relative;overflow:hidden}
.quote .qmark{font-family:var(--ff-mono);color:var(--accent);font-size:13px;letter-spacing:2px;margin-block-end:22px}
.quote blockquote{font-size:clamp(1.7rem,4vw,2.8rem);font-weight:700;line-height:1.3;max-width:18ch;margin-inline:auto;letter-spacing:-.4px}
.quote blockquote .hl{color:var(--accent)}
.quote .by{margin-block-start:26px;font-family:var(--ff-ar);font-weight:600;font-size:1.05rem;color:var(--text-2)}

@media (max-width:920px){
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .prod-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
}

/* ============ OFFERS ============ */
.offers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.offer{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:26px 22px;
  position:relative;transition:.35s var(--ease);
}
.offer:hover{transform:translateY(-5px);border-color:var(--accent)}
.offer .rib{position:absolute;inset-block-start:18px;inset-inline-end:20px;font-family:var(--ff-mono);font-size:11px;letter-spacing:1px;color:var(--accent);border:1px solid var(--accent);padding:3px 8px;border-radius:6px}
.offer .ic{width:46px;height:46px;border-radius:13px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-block-end:18px}
.offer .ic svg{width:23px;height:23px}
.offer h3{font-size:1.08rem;margin-block-end:8px}
.offer p{color:var(--text-3);font-size:.9rem}

/* ============ CTA / CONTACT ============ */
.cta-band{position:relative;overflow:hidden;border-block-start:1px solid var(--line)}
.cta-card{
  background:linear-gradient(150deg,var(--surface),var(--surface-2));
  border:1px solid var(--line-strong);border-radius:22px;padding:64px 50px;text-align:center;
  position:relative;overflow:hidden;box-shadow:var(--shadow);
}
.cta-card::before{content:"";position:absolute;inset-block-start:-40%;inset-inline-end:-10%;width:480px;height:480px;background:radial-gradient(circle,var(--accent-soft),transparent 60%)}
.cta-card .inner{position:relative;z-index:2}
.cta-card .tag{margin-block-end:18px}
.cta-card h2{font-size:clamp(1.9rem,4.5vw,3.1rem);font-weight:700;line-height:1.15;max-width:20ch;margin-inline:auto}
.cta-card p{color:var(--text-2);margin-block:18px 30px;font-size:1.08rem;max-width:48ch;margin-inline:auto}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-lg{padding:15px 30px;font-size:1rem;border-radius:13px}
.cta-channels{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-block-start:40px;padding-block-start:30px;border-block-start:1px solid var(--line);font-family:var(--ff-mono);font-size:12.5px;color:var(--text-3);letter-spacing:.5px}
.cta-channels span,.cta-channels a{display:flex;align-items:center;gap:7px}
.cta-channels a{color:inherit;transition:color .2s}
.cta-channels a:hover{color:var(--accent)}
.cta-channels span b,.cta-channels a b{width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ============ FOOTER ============ */
footer{padding-block:48px 26px;border-block-start:1px solid var(--line);background:var(--bg-2)}
/* One grid: a compact brand column sized like its neighbours, then the three
   link columns — the brand block no longer dwarfs the links. */
.foot-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,3fr);gap:48px;align-items:start;margin-block-end:32px}
.foot-brand .brand{margin-block-end:12px}
.foot-brand .brand img{height:36px}
.foot-brand p{color:var(--text-3);font-size:.88rem;line-height:1.75;max-width:34ch;margin:0}
.foot-social{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:18px}
.foot-social a{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);color:var(--text-2);transition:color .2s,border-color .2s}
.foot-social a:hover,.foot-social a:focus-visible{color:var(--accent);border-color:var(--accent);outline:none}
.foot-social svg{width:16px;height:16px}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.fcol h5{font-size:12px;font-family:var(--ff-mono);letter-spacing:1px;color:var(--text-3);margin-block:4px 14px}
.fcol a{display:block;color:var(--text-2);font-size:.92rem;margin-block-end:9px;transition:color .2s}
.fcol a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block-start:20px;border-block-start:1px solid var(--line);color:var(--text-3);font-size:.85rem}
.foot-bottom .mono{font-size:12px;letter-spacing:.5px}
@media (max-width:860px){
  footer{padding-block:36px 22px}
  .foot-top{grid-template-columns:1fr;gap:26px;margin-block-end:26px}
  /* Brand collapses to a short strip: logo beside the tagline, not above it. */
  .foot-brand{display:flex;align-items:center;gap:16px;padding-block-end:22px;border-block-end:1px solid var(--line)}
  .foot-brand .brand{margin-block-end:0;flex-shrink:0}
  .foot-brand .brand img{height:30px}
  .foot-brand p{max-width:none;font-size:.84rem;flex:1}
  .foot-social{margin-block-start:0;flex-shrink:0}
  .foot-cols{gap:22px}
}
@media (max-width:560px){
  .foot-brand{flex-direction:column;align-items:flex-start;gap:10px}
  .foot-social{margin-block-start:4px}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
  .fcol a{font-size:.88rem;margin-block-end:8px}
  .foot-bottom{flex-direction:column;align-items:center;text-align:center;gap:6px}
}

@media (max-width:920px){
  .offers-grid{grid-template-columns:repeat(2,1fr)}
  .cta-card{padding:48px 26px}
}
@media (max-width:560px){.offers-grid{grid-template-columns:1fr}}

/* mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:80;background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:blur(14px);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transition:.35s var(--ease)}
.mobile-menu.open{opacity:1;visibility:visible}

/* =========================================================
   SUBPAGE STYLES (multi-page WOOTZ site)
   ========================================================= */

/* page hero / banner for inner pages */
.page-hero{position:relative;overflow:hidden;padding-block:150px 70px;border-block-end:1px solid var(--line)}
.page-hero .hero-bg{z-index:0}
.page-hero .wrap{position:relative;z-index:2}
.crumbs{display:flex;gap:8px;align-items:center;font-family:var(--ff-ar);font-size:12px;color:var(--text-3);letter-spacing:.4px;margin-block-end:18px}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{opacity:.5}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:700;line-height:1.1;letter-spacing:-.5px;max-width:18ch}
.page-hero p{color:var(--text-2);margin-block-start:16px;font-size:1.08rem;max-width:54ch}

/* media frame (video / poster) with HUD chrome */
.media-frame{position:relative;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow)}
.media-frame video,.media-frame img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.media-frame .hud-tag{position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:3;display:flex;align-items:center;gap:7px;font-family:var(--ff-mono);font-size:12px;letter-spacing:1px;color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);padding:5px 10px;border-radius:7px}
.media-frame .hud-tag .dot{width:9px;height:9px;border-radius:50%;background:var(--rec);box-shadow:0 0 8px var(--rec);animation:blink 1.4s steps(1) infinite}
.media-frame .hud-ts{position:absolute;inset-block-start:14px;inset-inline-end:14px;z-index:3;font-family:var(--ff-mono);font-size:12px;color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);padding:5px 10px;border-radius:7px}
.media-frame .vf{position:absolute;inset:14px;z-index:2;pointer-events:none}
.media-frame .vf span{position:absolute;width:26px;height:26px;border:2px solid rgba(255,255,255,.7)}
.media-frame .vf .tl{inset-block-start:0;inset-inline-start:0;border-inline-end:0;border-block-end:0}
.media-frame .vf .tr{inset-block-start:0;inset-inline-end:0;border-inline-start:0;border-block-end:0}
.media-frame .vf .bl{inset-block-end:0;inset-inline-start:0;border-inline-end:0;border-block-start:0}
.media-frame .vf .br{inset-block-end:0;inset-inline-end:0;border-inline-start:0;border-block-start:0}

/* product detail layout */
.pd-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.pd-info .en{font-family:var(--ff-mono);font-size:12px;letter-spacing:1.5px;color:var(--accent)}
.pd-info h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:700;line-height:1.15;margin-block:10px 14px;letter-spacing:-.4px}
.pd-info .price{display:flex;align-items:baseline;gap:12px;margin-block:18px}
.pd-info .price .now{font-family:var(--ff-mono);font-size:2rem;font-weight:600;color:var(--text)}
.pd-info .price .was{font-family:var(--ff-mono);text-decoration:line-through;color:var(--text-3);font-size:1.1rem}
.pd-info .price .save{font-family:var(--ff-mono);font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:3px 8px}
.pd-info>p{color:var(--text-2);margin-block:6px 22px}
.pd-feat{display:flex;flex-direction:column;gap:12px;margin-block:22px}
.pd-feat li{display:flex;gap:12px;align-items:flex-start;color:var(--text-2);font-size:.96rem}
.pd-feat li svg{flex:0 0 auto;color:var(--accent);margin-block-start:3px}
.pd-actions{display:flex;gap:12px;flex-wrap:wrap;margin-block-start:26px}
@media (max-width:860px){.pd-grid{grid-template-columns:1fr;gap:30px}}

/* blog grid */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bpost{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);overflow:hidden;transition:.35s var(--ease);display:flex;flex-direction:column}
.bpost:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.bpost .thumb{aspect-ratio:16/10;background:linear-gradient(150deg,var(--surface-2),var(--bg-2));position:relative;display:grid;place-items:center;color:var(--accent);border-block-end:1px solid var(--line)}
.bpost .thumb svg{width:44px;height:44px;opacity:.7}
.bpost .thumb img{width:100%;height:100%;object-fit:cover}
.bpost .body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.bpost .cat{font-family:var(--ff-mono);font-size:11px;letter-spacing:1px;color:var(--accent);margin-block-end:10px}
.bpost h3{font-size:1.1rem;line-height:1.4;margin-block-end:10px}
.bpost p{color:var(--text-3);font-size:.9rem;flex:1}
.bpost .more{margin-block-start:16px;font-size:.9rem;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:6px}
@media (max-width:920px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.blog-grid{grid-template-columns:1fr}}

/* article */
.article{max-width:760px;margin-inline:auto}
.article .meta{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--ff-mono);font-size:12px;color:var(--text-3);letter-spacing:.4px;margin-block-end:22px}
.article h1{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:700;line-height:1.18;letter-spacing:-.4px;margin-block-end:20px}
.article h2{font-size:1.5rem;font-weight:700;margin-block:36px 14px}
.article p{color:var(--text-2);margin-block-end:18px;font-size:1.05rem}
.article ul.bullets{margin-block-end:18px;display:flex;flex-direction:column;gap:10px}
.article ul.bullets li{position:relative;padding-inline-start:22px;color:var(--text-2)}
.article ul.bullets li::before{content:"";position:absolute;inset-block-start:.7em;inset-inline-start:0;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.article blockquote{border-inline-start:3px solid var(--accent);padding-inline-start:18px;margin-block:24px;color:var(--text);font-size:1.2rem;font-weight:600}

/* generic grids */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:760px){.grid-2{grid-template-columns:1fr}}

/* 404 */
.nf{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;overflow:hidden;padding:120px 16px}
.nf .code{font-family:var(--ff-mono);font-size:clamp(5rem,18vw,11rem);font-weight:600;line-height:1;color:var(--accent);letter-spacing:-.04em}
.nf h1{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:700;margin-block:10px 14px}
.nf p{color:var(--text-2);max-width:42ch;margin-block-end:28px}

/* contact form */
.cform{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:640px;margin-inline:auto;text-align:start}
.cform .full{grid-column:1/-1}
.cform label{display:block;font-size:13px;color:var(--text-2);margin-block-end:7px}
.cform input,.cform textarea{
  width:100%;font-family:inherit;font-size:.95rem;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;transition:.25s var(--ease);
}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.cform textarea{min-height:120px;resize:vertical}
@media (max-width:560px){.cform{grid-template-columns:1fr}}

/* =========================================================
   HERO VIDEO BACKGROUND  (slice 1)
   ========================================================= */
.hero{background:var(--bg) url("../img/hero-poster.svg") center/cover no-repeat}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
/* smooth overlay concentrated on the text side (RTL = right/start),
   video stays visible on the other side + soft top/bottom fades */
.hero-overlay{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to left,
      color-mix(in srgb,var(--bg) 86%,transparent) 0%,
      color-mix(in srgb,var(--bg) 64%,transparent) 36%,
      color-mix(in srgb,var(--bg) 18%,transparent) 68%,
      transparent 100%),
    linear-gradient(to top, var(--bg) 0%, color-mix(in srgb,var(--bg) 30%,transparent) 22%, transparent 40%),
    linear-gradient(to bottom, color-mix(in srgb,var(--bg) 55%,transparent) 0%, transparent 20%);
}
[data-theme="light"] .hero-overlay{
  background:
    linear-gradient(to left, rgba(237,242,242,.88) 0%, rgba(237,242,242,.66) 36%, rgba(237,242,242,.2) 68%, transparent 100%),
    linear-gradient(to top, var(--bg) 0%, rgba(237,242,242,.3) 22%, transparent 40%),
    linear-gradient(to bottom, rgba(237,242,242,.55) 0%, transparent 20%);
}
/* re-stack layers above the video + overlay; keep dashcam grid subtle so the video reads as the external view */
.hero .hero-bg{z-index:2;opacity:.35}
.hero .viewfinder{z-index:3}
.hero .hud{z-index:4}
.hero .hero-inner{z-index:5}

/* scroll indicator */
.scroll-ind{position:absolute;inset-block-end:22px;inset-inline:0;margin-inline:auto;width:max-content;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--text-2);
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:1.5px;transition:color .25s}
.scroll-ind:hover{color:var(--accent)}
.scroll-ind .mouse{width:24px;height:38px;border:2px solid var(--text-3);border-radius:13px;display:flex;justify-content:center;padding-block-start:6px;transition:border-color .25s}
.scroll-ind:hover .mouse{border-color:var(--accent)}
.scroll-ind .wheel{width:4px;height:8px;border-radius:2px;background:var(--accent);animation:scrollwheel 1.6s var(--ease) infinite}
@keyframes scrollwheel{0%{opacity:0;transform:translateY(-5px)}40%{opacity:1}80%{opacity:0;transform:translateY(9px)}}

/* CTA shine */
.hero-cta .btn-primary{position:relative;overflow:hidden}
.hero-cta .btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.22) 50%,transparent 68%);transform:translateX(120%)}
.hero-cta .btn-primary:hover::after{animation:shine .9s var(--ease)}
@keyframes shine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
.btn .btn-ic{width:17px;height:17px;flex:0 0 auto}

@media (prefers-reduced-motion:reduce){.scroll-ind .wheel{animation:none}}

/* =========================================================
   HEADER CATEGORIES DROPDOWN  (slice 1)
   ========================================================= */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd-btn{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:14.5px;color:var(--text-2);background:none;border:0;cursor:pointer;padding:0;transition:color .25s}
.nav-dd-btn:hover,.nav-dd.open .nav-dd-btn{color:var(--text)}
.nav-dd-btn .chev{transition:transform .25s}
.nav-dd.open .nav-dd-btn .chev{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;inset-block-start:calc(100% + 16px);inset-inline-end:0;min-width:240px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s var(--ease);z-index:70}
.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:none}
.nav-dd-menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);color:var(--text-2);font-size:14px;transition:.2s}
.nav-dd-menu a:hover{background:var(--accent-soft);color:var(--accent)}
.nav-dd-menu a .ic{width:32px;height:32px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;color:var(--accent);flex:0 0 auto}
.nav-dd-menu a .ic svg{width:18px;height:18px}
.nav-dd-menu a b{font-weight:600;display:block}
.nav-dd-menu a small{display:block;font-family:var(--ff-mono);font-size:10px;color:var(--text-3);letter-spacing:.5px;margin-block-start:1px}

/* mobile categories block inside the mobile menu */

/* =========================================================
   OUR PRODUCTS section + tabs + product cards  (slice 2)
   ========================================================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.op-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-block-end:26px}
.op-select{font-family:inherit;font-size:14px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;cursor:pointer;transition:.2s var(--ease)}
.op-select:hover{border-color:var(--accent)}
.op-select:focus{outline:none;border-color:var(--accent)}

/* tabs */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-block-end:30px}
.tab{font-family:inherit;font-size:14px;font-weight:600;color:var(--text-2);background:var(--surface);
  border:1px solid var(--line);border-radius:100px;padding:9px 18px;cursor:pointer;transition:.22s var(--ease);white-space:nowrap}
.tab:hover{border-color:var(--accent);color:var(--accent)}
.tab.active{background:var(--brand);border-color:var(--brand);color:#fff}
[data-theme="light"] .tab.active{color:#fff}

/* product cards grid */
.prod-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1100px){.prod-cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.prod-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.prod-cards{grid-template-columns:1fr}}

/* ===== premium "capture-frame" product card ===== */
.pcard{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
  position:relative}
.pcard::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .4s var(--ease)}
.pcard:hover{transform:translateY(-8px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.pcard:hover::before{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.pcard.out{opacity:.82}

.pcard-frame{position:relative;aspect-ratio:4/3;overflow:hidden;border-block-end:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 60%),
    linear-gradient(150deg,var(--surface-2),var(--bg-2))}
.pcard-media{position:absolute;inset:0;display:block}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .4s var(--ease)}
.pcard:hover .pcard-media img{transform:scale(1.07)}
.pcard.out .pcard-media img{filter:grayscale(.7) brightness(.75)}

.pcard-scan{position:absolute;inset-inline:0;inset-block-start:-40%;height:40%;z-index:1;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 22%,transparent),transparent)}
.pcard:hover .pcard-scan{animation:pscan 1.1s var(--ease) .05s}
@keyframes pscan{0%{opacity:0;transform:translateY(0)}12%{opacity:1}100%{opacity:0;transform:translateY(340%)}}

.vf{position:absolute;width:20px;height:20px;z-index:3;border:2px solid color-mix(in srgb,var(--text) 55%,transparent);
  opacity:.4;transition:.4s var(--ease);pointer-events:none}
.vf-tl{inset-block-start:12px;inset-inline-start:12px;border-inline-end:0;border-block-end:0}
.vf-tr{inset-block-start:12px;inset-inline-end:12px;border-inline-start:0;border-block-end:0}
.vf-bl{inset-block-end:12px;inset-inline-start:12px;border-inline-end:0;border-block-start:0}
.vf-br{inset-block-end:12px;inset-inline-end:12px;border-inline-start:0;border-block-start:0}
.pcard:hover .vf{opacity:1;border-color:var(--accent);width:26px;height:26px}

.pcard-hud{position:absolute;inset-block-start:0;inset-inline:0;z-index:4;display:flex;align-items:center;
  justify-content:space-between;gap:8px;padding:19px 26px;font-family:var(--ff-mono);pointer-events:none}
.pcard-hud .rec{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:1.5px;color:var(--text);
  background:rgba(0,0,0,.34);backdrop-filter:blur(4px);padding:4px 8px;border-radius:5px}
.pcard-hud .rec i{width:7px;height:7px;border-radius:50%;background:var(--rec);box-shadow:0 0 7px var(--rec);animation:blink 1.4s steps(1) infinite}
.pcard-hud .hud-right{display:flex;align-items:center;gap:6px}
.pcard-hud .hud-code{font-size:10.5px;letter-spacing:1px;color:#fff;background:rgba(0,0,0,.34);backdrop-filter:blur(4px);padding:4px 8px;border-radius:5px}
.pcard-hud .tag{font-size:10px;font-weight:600;letter-spacing:.4px;color:#fff;padding:4px 8px;border-radius:5px;line-height:1;white-space:nowrap;margin-block-end:0}
.pcard-hud .tag.best{background:linear-gradient(90deg,#CFAC66 0%,#E8D59E 50%,#CFAC66 100%);color:#04181C}
.pcard-hud .tag.new{background:var(--accent)}
.pcard-hud .tag.sale{background:var(--rec)}

/* 52% used to be the share left over beside the wish/quick buttons in this
   corner; they now live in .pcard-actions, so the chips get the frame width
   less a matching inset on the far side. */
.pcard-tel{position:absolute;inset-block-end:16px;inset-inline-start:26px;z-index:3;display:flex;gap:5px;flex-wrap:wrap;
  max-width:calc(100% - 52px);font-family:var(--ff-mono);transition:.3s var(--ease)}
.pcard-tel span{font-size:9.5px;letter-spacing:.3px;color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.1);padding:3px 7px;border-radius:5px;white-space:nowrap}

/* Quick view sits in the middle of the image. The overlay covers the whole
   frame so the button can centre over the media link; pointer-events are
   handed back to the button alone, or the overlay would swallow the click that
   opens the product page. */
.pcard-quick{position:absolute;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none}
.pcard-quick .quickbtn{pointer-events:auto;width:46px;height:46px;border-radius:50%;padding:0;
  border:1px solid var(--line-strong);background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(8px);
  color:var(--text);display:grid;place-items:center;cursor:pointer;
  opacity:0;transform:scale(.86);transition:.26s var(--ease)}
.pcard:hover .pcard-quick .quickbtn,
.pcard:focus-within .pcard-quick .quickbtn{opacity:1;transform:none}
.pcard-quick .quickbtn:hover{color:var(--accent);border-color:var(--accent)}
.pcard-quick .quickbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.pcard-quick .quickbtn:focus-visible{opacity:1;transform:none;outline:2px solid var(--accent);outline-offset:2px}
@media (hover:none){.pcard-quick .quickbtn{opacity:1;transform:none}}
/* An out-of-stock card already centres its own "نفد المخزون" plate in the same
   spot, and two centred overlays would sit on top of each other. The frame is
   still a link to the product page. */
.pcard.out .pcard-quick{display:none}

/* Wishlist heart, beside the cart button. Out of the frame it no longer fights
   the telemetry chips for the bottom corner on touch, where both were pinned
   permanently visible. */
.pcard-actions{display:flex;align-items:stretch;gap:8px;margin-block-start:12px}
.pcard-actions .pcard-cart{margin-block-start:0;flex:1 1 auto;inline-size:auto;min-inline-size:0}
/* ===== wishlist button — one treatment for the card and the product page =====
   Borderless: a bordered, filled square next to the solid cart button read as
   two competing buttons of equal weight, when only one is the primary action.
   It keeps a surface fill though — an outline-only heart sitting directly on
   the card background was too easy to miss, and on the product page the button
   had no appearance rules at all, so it fell back to the browser's default
   grey chrome with a black filled heart.

   So: no border (simple), but a real background (clear). State is carried by
   colour + tint alone, instead of border + fill + colour all changing at once.

   Sizes are set per context below; everything else is shared. */
.pcard-actions .wish,.pdp-buy .wish{padding:0;border:0;border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--text-3);
  display:grid;place-items:center;cursor:pointer;
  transition:color .2s var(--ease),background-color .2s var(--ease)}
.pcard-actions .wish svg,.pdp-buy .wish svg{fill:none;stroke:currentColor;stroke-width:1.9;
  pointer-events:none;transition:fill .2s var(--ease)}
.pcard-actions .wish:hover,.pdp-buy .wish:hover{color:var(--rec);
  background:color-mix(in srgb,var(--rec) 13%,var(--surface-2))}
/* favourited: filled heart on a red-tinted surface */
.pcard-actions .wish.on,.pdp-buy .wish.on{color:var(--rec);
  background:color-mix(in srgb,var(--rec) 15%,var(--surface-2))}
.pcard-actions .wish.on svg,.pdp-buy .wish.on svg{fill:var(--rec)}
.pcard-actions .wish:focus-visible,.pdp-buy .wish:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.pcard-actions .wish{flex:0 0 auto;inline-size:42px}
.pcard-actions .wish svg{inline-size:20px;block-size:20px}

.pcard-out{position:absolute;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none;
  background:color-mix(in srgb,var(--bg) 45%,transparent)}
.pcard-out span{font-family:var(--ff-mono);font-size:11px;letter-spacing:1.5px;color:var(--text);
  border:1px solid var(--line-strong);background:rgba(0,0,0,.4);padding:7px 14px;border-radius:6px}

.pcard-body{padding:16px 16px 16px;display:flex;flex-direction:column;flex:1;gap:8px}
/* min-width:0 on both sides or a long category name refuses to shrink and
   pushes the stock badge past the card edge. The category is the one that
   gives — the stock state has to stay readable in full. */
.pcard-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.pcard-cat{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.8px;color:var(--text-3);text-transform:uppercase;
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-stock{display:inline-flex;align-items:center;gap:5px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.3px;color:var(--text-3);
  flex:0 0 auto;white-space:nowrap}
.pcard-stock i{width:6px;height:6px;border-radius:50%;background:#3FB27F;box-shadow:0 0 6px rgba(63,178,127,.7)}
.pcard-stock.low{color:var(--accent)}.pcard-stock.low i{background:var(--accent);box-shadow:0 0 6px var(--accent)}
.pcard-stock.off{color:var(--rec)}.pcard-stock.off i{background:var(--rec);box-shadow:none}
.pcard-name{font-size:1.06rem;font-weight:700;line-height:1.4;min-height:2.8em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-name a{transition:color .2s var(--ease)}
.pcard-name a:hover{color:var(--accent)}
.pcard-rate{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3)}
.pcard-rate b{font-family:var(--ff-mono);font-weight:600;color:var(--text-2)}
.pcard-rate .rcount{font-family:var(--ff-mono)}
.stars{display:inline-flex;gap:1px}
.stars svg{width:13px;height:13px}
.stars .st{stroke:#E0A93B;stroke-width:1.6;fill:none}
.stars .st.on{fill:#E0A93B}

/* price + struck-through compare + discount badge is three items on one line;
   below ~200px of card they don't fit, so let the badge drop to its own line
   instead of squeezing the price. */
.pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-block-start:auto;padding-block-start:4px}
.pcard-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.pcard-price .now{font-family:var(--ff-mono);font-size:1.28rem;font-weight:600;color:var(--text);letter-spacing:-.3px}
.pcard-price .was{font-family:var(--ff-mono);font-size:.82rem;text-decoration:line-through;color:var(--text-3)}
.pcard-foot .off{font-family:var(--ff-mono);font-size:11px;font-weight:600;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:5px;padding:3px 7px;background:var(--accent-soft)}

.pcard-cart{margin-block-start:12px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;padding:11px 14px;border-radius:var(--r-sm);
  border:1px solid #CFAC66;background:linear-gradient(90deg,#CFAC66 0%,#E8D59E 50%,#CFAC66 100%);color:#04181C;transition:.24s var(--ease);position:relative;overflow:hidden}
.pcard-cart svg{width:17px;height:17px;flex:0 0 auto}
.pcard-cart::after{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)}
.pcard-cart:hover{background:#B8934E;border-color:#B8934E;box-shadow:0 12px 26px -14px #CFAC66}
.pcard-cart:hover::after{animation:shine .8s var(--ease)}
.pcard-cart:disabled{background:transparent;border-color:var(--line);color:var(--text-3);cursor:not-allowed}
.pcard-cart:disabled:hover{box-shadow:none}
.pcard-cart:disabled::after{display:none}

@media (prefers-reduced-motion:reduce){
  .pcard,.pcard-media img,.vf,.pcard-actions .wish,.pcard-quick .quickbtn{transition:none}
  .pcard-scan,.pcard-cart::after{animation:none;display:none}
  .pcard:hover{transform:none}
}

/* ===================== SKELETON LOADING =====================
   موجة ضوء واحدة تمرّ عبر البطاقة كلها (لا كل عنصر على حدة)،
   مع تأخير متدرّج بين البطاقات (--i) ليبدو التحميل حيًّا لا آليًا. */
.pcard.skel{pointer-events:none;user-select:none;
  animation:skBreathe 2.6s var(--ease) infinite;
  animation-delay:calc(var(--i,0) * .12s)}
.pcard.skel::before{box-shadow:none}
.pcard.skel:hover{transform:none;box-shadow:none;border-color:var(--line)}

/* الكتل الرمادية — أساس ثابت، اللمعان يأتي من طبقة الموجة */
.skel .sk{position:relative;overflow:hidden;border-radius:7px;
  background:color-mix(in srgb,var(--text) 7%,var(--surface-2))}
.skel .sk::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    transparent 20%,
    color-mix(in srgb,var(--text) 5%,transparent) 40%,
    color-mix(in srgb,var(--accent) 12%,transparent) 50%,
    color-mix(in srgb,var(--text) 5%,transparent) 60%,
    transparent 80%);
  background-size:220% 100%;
  animation:sk 1.8s cubic-bezier(.45,0,.25,1) infinite;
  animation-delay:calc(var(--i,0) * .12s)}

.skel .pcard-frame{background:var(--surface-2);border-block-end-color:var(--line)}
.skel .sk-media{position:absolute;inset:0;border-radius:0}
/* شبح الواجهة داخل الإطار: شارة REC + كود التصنيف */
.skel .sk-hud{position:absolute;inset-block-start:19px;inset-inline:26px;z-index:2;
  display:flex;justify-content:space-between;gap:8px}
.skel .sk-hud .sk{height:18px;border-radius:5px}
.skel .sk-hud .sk:first-child{width:52px}
.skel .sk-hud .sk:last-child{width:38px}

.skel .pcard-body{gap:9px}
.skel .sk-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* margin للسياقات غير المرنة (مثل .pdp-info)؛ داخل .pcard-body الفراغ من gap */
.skel .sk-line{display:block;height:11px;margin-block-end:10px}
.skel .pcard-body .sk-line,.skel .sk-row .sk-line{margin-block-end:0}
.skel .sk-line.w20{width:20%}.skel .sk-line.w28{width:28%}.skel .sk-line.w40{width:40%}
.skel .sk-line.w60{width:60%}.skel .sk-line.w80{width:80%}.skel .sk-line.w100{width:100%}
.skel .sk-title{height:15px}
.skel .sk-price{height:19px;width:44%}
.skel .sk-btn{height:44px;border-radius:10px;margin-block-start:auto}
/* mirrors .pcard-actions: cart button + square heart */
.skel .sk-actions{display:flex;gap:8px;margin-block-start:auto}
.skel .sk-actions .sk-btn{flex:1 1 auto;margin-block-start:0}
.skel .sk-actions .sk-wish{flex:0 0 44px;height:44px;border-radius:10px}

@keyframes sk{0%{background-position:0% 0}100%{background-position:-220% 0}}
[dir="ltr"] .skel .sk::after{animation-name:skLtr}
@keyframes skLtr{0%{background-position:220% 0}100%{background-position:0% 0}}
/* نبض خفيف جدًا على مستوى البطاقة — يمنع إحساس "الصورة المجمّدة" */
@keyframes skBreathe{0%,100%{opacity:1}50%{opacity:.72}}

/* ===================== QUICK-VIEW MODAL ===================== */
.qv{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:20px}
.qv.show,.qv.closing{display:flex}
.qv-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 62%,rgba(0,0,0,.6));
  backdrop-filter:blur(3px);opacity:0;transition:opacity .32s var(--ease)}
.qv.show .qv-scrim{opacity:1}
.qv-dialog{position:relative;z-index:1;width:100%;max-width:840px;max-height:90vh;overflow:auto;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow);
  transform:scale(.86) translateY(14px);opacity:0;transform-origin:center;
  transition:transform .42s var(--ease),opacity .32s var(--ease)}
.qv.show .qv-dialog{transform:none;opacity:1}
.qv.closing .qv-dialog{transform:scale(.94);opacity:0;transition:transform .28s var(--ease),opacity .28s}
.qv.closing .qv-scrim{opacity:0}
.qv-bar{position:absolute;inset-block-start:0;inset-inline:0;height:3px;z-index:3;overflow:hidden;background:transparent;opacity:0;transition:opacity .2s}
.qv.loading .qv-bar{opacity:1}
.qv-bar::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:40%;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:qvbar 1s var(--ease) infinite}
@keyframes qvbar{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.qv-close{position:absolute;inset-block-start:12px;inset-inline-end:12px;z-index:4;width:38px;height:38px;
  border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--text);
  display:grid;place-items:center;cursor:pointer;transition:.2s var(--ease)}
.qv-close:hover{border-color:var(--accent);color:var(--accent);transform:rotate(90deg)}
.qv-close svg{width:18px;height:18px}

.qv .sk{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:6px;display:block}
.qv .sk-line{height:12px}
.qv .sk-line.w60{width:60%}.qv .sk-line.w40{width:40%}.qv .sk-line.w80{width:80%}

.qv-grid{display:grid;grid-template-columns:1fr 1fr;min-height:340px}
@media (max-width:680px){.qv-grid{grid-template-columns:1fr}}
/* The media column now mirrors the product page: a square stage with the thumb
   strip under it. The dividing border moved from the photo to this wrapper, so
   the strip sits inside the column rather than beside it. */
.qv-gallery{display:flex;flex-direction:column;min-inline-size:0;
  border-inline-end:1px solid var(--line);background:var(--surface)}
@media (max-width:680px){.qv-gallery{border-inline-end:0;border-block-end:1px solid var(--line)}}

.qv-media{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--surface-2),var(--bg-2));
  aspect-ratio:1/1}
/* object-fit:contain with padding, matching .gallery-main img — not cover.
   The catalogue holds 3:2 photos as well as square ones, and cover was slicing
   the ends off the wide ones; zoom.js reads both values back to place the lens,
   so this is also what makes the quick view's zoom land where the product
   page's does. */
.qv-img{width:100%;height:100%;padding:18px;object-fit:contain;opacity:0;
  transition:opacity .5s var(--ease),transform .15s var(--ease);
  transform-origin:center;will-change:transform}
.qv-media.ready .qv-img{opacity:1}
/* Cross-fade on a thumbnail swap, same as the product page. */
.qv-media.ready .qv-img.swapping{opacity:0}

/* Thumb strip. Same metrics and states as .gallery-thumbs, one size down to
   sit inside a dialog rather than a full page. */
.qv-thumbs{display:flex;gap:8px;padding:12px 14px 14px;flex-wrap:wrap;justify-content:center}
.qv-thumbs button{position:relative;width:58px;height:58px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;cursor:pointer;
  background:var(--surface-2);padding:0;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.qv-thumbs button:hover{border-color:var(--accent);transform:translateY(-2px)}
.qv-thumbs button.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.qv-thumbs button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.qv-thumbs img{width:100%;height:100%;padding:4px;object-fit:contain;
  transition:transform .3s var(--ease)}
.qv-thumbs button:hover img{transform:scale(1.06)}

/* The lens panel is appended to .qv (a fixed, unclipped box) and must sit above
   the dialog, which carries z-index:1. .zoom-panel's own z-index:50 already
   clears it; this only stops the dialog's overflow from clipping the lens the
   panel is paired with. */
.qv .zoom-panel{position:fixed}
.qv-zoom{cursor:zoom-in}
/* the scale itself is set inline by zoom.js so mouse, touch and keyboard all
   drive one code path; this only carries the cursor + gesture affordances */
.qv-zoom.zoomed{cursor:zoom-out;touch-action:none}
.qv-sk-img{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.qv-spinner{position:absolute;inset-block-start:50%;inset-inline-start:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:3px solid var(--line-strong);border-block-start-color:var(--accent);border-radius:50%;animation:qvspin .7s linear infinite;z-index:2}
@keyframes qvspin{to{transform:rotate(360deg)}}
.qv-badges{position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:3;display:flex;flex-wrap:wrap;gap:6px}
.qv-hud{position:absolute;inset-block-end:14px;inset-inline-end:14px;z-index:3;font-family:var(--ff-mono);
  font-size:10.5px;letter-spacing:1.5px;color:#fff;background:rgba(0,0,0,.42);backdrop-filter:blur(4px);padding:4px 9px;border-radius:6px}

.qv-info{padding:30px 28px;display:flex;flex-direction:column;gap:12px}
.qv-info>.sk-line{display:block}
.qv-cat{font-family:var(--ff-mono);font-size:11px;letter-spacing:.8px;color:var(--text-3)}
.qv-name{font-size:1.5rem;font-weight:700;line-height:1.25;color:var(--text)}
.qv-rate{display:flex;align-items:center;gap:8px}
.qv-rate .rcount{font-family:var(--ff-mono);font-size:12px;color:var(--text-3)}
.qv-price{display:flex;align-items:baseline;gap:10px;margin-block-start:2px}
.qv-price .now{font-family:var(--ff-mono);font-size:1.7rem;font-weight:600;color:var(--text)}
.qv-price .was{font-family:var(--ff-mono);font-size:1rem;text-decoration:line-through;color:var(--text-3)}
.qv-price .off{font-family:var(--ff-mono);font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:3px 8px}
.qv-desc{color:var(--text-2);font-size:.95rem;line-height:1.7}
.qv-actions{display:flex;gap:10px;margin-block-start:8px}
.qv-actions .btn-cart{flex:1}
.qv-wish.on{border-color:var(--accent);color:var(--accent)}
.qv-details{font-family:var(--ff-mono);font-size:12.5px;color:var(--accent);text-decoration:none;letter-spacing:.4px;margin-block-start:4px;transition:.2s var(--ease)}
.qv-details:hover{opacity:.75}
.qv:not(.loading) .qv-info>*{animation:qvup .5s var(--ease) backwards}
.qv:not(.loading) .qv-info>*:nth-child(1){animation-delay:.02s}
.qv:not(.loading) .qv-info>*:nth-child(2){animation-delay:.06s}
.qv:not(.loading) .qv-info>*:nth-child(3){animation-delay:.10s}
.qv:not(.loading) .qv-info>*:nth-child(4){animation-delay:.14s}
.qv:not(.loading) .qv-info>*:nth-child(5){animation-delay:.18s}
.qv:not(.loading) .qv-info>*:nth-child(6){animation-delay:.22s}
.qv:not(.loading) .qv-info>*:nth-child(7){animation-delay:.26s}
@keyframes qvup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .qv-dialog,.qv-scrim,.qv-img,.qv-close{transition:none}
  .qv-spinner,.qv-bar::before{animation:none}
  .qv:not(.loading) .qv-info>*{animation:none}
}
/* دخول البطاقات الحقيقية بعد الهيكل — يمنع "القفزة" عند استبدال innerHTML
   (يعمل أيضًا عند تبديل التبويب/الترتيب في #prodGrid) */
/* backwards لا both: بعد انتهاء الحركة لا تبقى قيمة transform مفروضة فتُعطّل رفعة hover */
.prod-cards>.pcard:not(.skel){animation:pcardIn .5s var(--ease) backwards}
.prod-cards>.pcard:nth-child(1){animation-delay:.02s}
.prod-cards>.pcard:nth-child(2){animation-delay:.06s}
.prod-cards>.pcard:nth-child(3){animation-delay:.1s}
.prod-cards>.pcard:nth-child(4){animation-delay:.14s}
.prod-cards>.pcard:nth-child(5){animation-delay:.18s}
.prod-cards>.pcard:nth-child(6){animation-delay:.22s}
.prod-cards>.pcard:nth-child(7){animation-delay:.26s}
.prod-cards>.pcard:nth-child(n+8){animation-delay:.3s}
@keyframes pcardIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .skel .sk::after{animation:none;background:color-mix(in srgb,var(--text) 3%,transparent)}
  .pcard.skel{animation:none}
  .prod-cards>.pcard:not(.skel){animation:none}
}

/* empty state */
.op-empty{text-align:center;padding:60px 20px;color:var(--text-2)}
.op-empty svg{width:48px;height:48px;color:var(--text-3);margin-block-end:16px}
.op-empty h3{font-size:1.2rem;margin-block-end:6px;color:var(--text)}
.op-more{text-align:center;margin-block-start:40px}

/* toast */
.toast{position:fixed;inset-block-end:24px;inset-inline:0;margin-inline:auto;width:max-content;max-width:90vw;z-index:120;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow);
  color:var(--text);font-size:14px;font-weight:500;padding:13px 20px;display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(16px);visibility:hidden;transition:.3s var(--ease)}
.toast.show{opacity:1;transform:none;visibility:visible}
.toast svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto}

/* =========================================================
   ALL PRODUCTS page: layout + filters + toolbar + pager  (slice 3)
   ========================================================= */
.shop-layout{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start}

/* sidebar filters */
.filters{position:sticky;inset-block-start:84px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:20px 22px}
.filters-head{display:none;justify-content:space-between;align-items:center;margin-block-end:10px}
.filters-head h3{font-size:1.1rem}
.filter-topbar{display:flex;justify-content:space-between;align-items:center;margin-block-end:6px}
.filter-topbar h4{font-family:var(--ff-mono);font-size:12px;letter-spacing:1px;color:var(--text-3)}
.filter-clear{font-size:12px;color:var(--accent);background:none;border:0;cursor:pointer;font-family:inherit}
.filter-clear:hover{text-decoration:underline}

.fgroup{border-block-start:1px solid var(--line);padding-block:18px}
.fgroup > h4{font-size:14px;font-weight:600;margin-block-end:12px;display:flex;align-items:center;justify-content:space-between}
.fopt{display:flex;align-items:center;gap:10px;padding:5px 0;cursor:pointer;color:var(--text-2);font-size:14px;transition:color .2s}
.fopt:hover{color:var(--text)}
.fopt input{accent-color:var(--brand);width:16px;height:16px;flex:0 0 auto;cursor:pointer}
.fopt .cnt{margin-inline-start:auto;font-family:var(--ff-mono);font-size:11px;color:var(--text-3)}
.fopt .stars{pointer-events:none}

/* price dual-range */
.range-wrap{position:relative;height:30px;direction:ltr;margin-block:6px 4px}
.range-track{position:absolute;inset-block-start:13px;inset-inline:2px;height:4px;background:var(--line-strong);border-radius:3px}
.range-fill{position:absolute;inset-block-start:13px;height:4px;background:var(--accent);border-radius:3px}
.range-wrap input[type=range]{position:absolute;inset-block-start:0;inset-inline:0;width:100%;height:30px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.range-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--brand);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--accent);cursor:pointer}
.range-wrap input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border:2px solid var(--surface);border-radius:50%;background:var(--brand);box-shadow:0 0 0 1px var(--accent);cursor:pointer}
.price-inputs{display:flex;align-items:center;gap:10px;margin-block-start:10px}
.price-inputs input{width:100%;font-family:var(--ff-mono);font-size:13px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px}
.price-inputs input:focus{outline:none;border-color:var(--accent)}
.price-inputs span{color:var(--text-3)}

/* shop main */
.shop-toolbar{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-block-end:18px}
.search{position:relative;flex:1;min-width:220px;max-width:440px}
.search input{width:100%;font-family:inherit;font-size:14px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;padding-inline-start:42px;transition:.2s var(--ease)}
.search input:focus{outline:none;border-color:var(--accent)}
.search svg{position:absolute;inset-inline-start:14px;inset-block-start:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-3);pointer-events:none}
.tools-right{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.result-count{font-size:13px;color:var(--text-3);font-family:var(--ff-mono);white-space:nowrap}

.active-chips{display:flex;gap:8px;flex-wrap:wrap;margin-block-end:18px}
.active-chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;background:var(--accent-soft);color:var(--accent);border-radius:100px;padding:5px 8px 5px 12px}
.chip button{background:none;border:0;color:inherit;cursor:pointer;display:grid;place-items:center;padding:0}
.chip button svg{width:13px;height:13px}
.chip.clear{background:transparent;border:1px dashed var(--line-strong);color:var(--text-2);padding:5px 12px;cursor:pointer}
.chip.clear:hover{border-color:var(--accent);color:var(--accent)}

/* pagination */
.pager{display:flex;justify-content:center;gap:6px;margin-block-start:40px;flex-wrap:wrap}
.pager button{min-width:40px;height:40px;padding:0 10px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);color:var(--text-2);cursor:pointer;font-family:var(--ff-mono);font-size:14px;transition:.2s var(--ease)}
.pager button:hover:not(:disabled):not(.active){border-color:var(--accent);color:var(--accent)}
.pager button.active{background:var(--brand);border-color:var(--brand);color:#fff}
.pager button:disabled{opacity:.4;cursor:not-allowed}
.pager .dots{align-self:center;color:var(--text-3);padding:0 4px}

/* mobile filter drawer + fab */
.filter-fab{position:fixed;inset-block-end:22px;inset-inline:0;margin-inline:auto;width:max-content;z-index:78;display:none;align-items:center;gap:8px;
  background:var(--brand);color:#fff;border:0;border-radius:100px;padding:13px 26px;box-shadow:var(--shadow);cursor:pointer;font-family:inherit;font-weight:600}
.filter-fab svg{width:18px;height:18px}
.filter-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:88;opacity:0;visibility:hidden;transition:.3s var(--ease)}

/* 991, not 980: .wrap drops from 960 to 720 at 991. Collapsing the sidebar one
   step later left a band where a 720px wrap still paid for a 248px sidebar and
   the cards beside it were ~140px wide. */
@media (max-width:991px){
  .shop-layout{grid-template-columns:1fr}
  .filter-fab{display:inline-flex}
  .filter-scrim.open{opacity:1;visibility:visible}
  .filters{position:fixed;inset-block:auto 0;inset-inline:0;z-index:90;max-height:86vh;overflow-y:auto;border-radius:18px 18px 0 0;
    transform:translateY(102%);transition:transform .35s var(--ease);visibility:hidden}
  .filters.open{transform:none;visibility:visible}
  .filters-head{display:flex}
}

/* back to top */
.back-top{position:fixed;inset-block-end:22px;inset-inline-start:22px;z-index:76;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s var(--ease);box-shadow:var(--shadow)}
.back-top.show{opacity:1;visibility:visible;transform:none}
.back-top:hover{border-color:var(--accent);color:var(--accent)}
.back-top svg{width:20px;height:20px}

/* =========================================================
   PRODUCT DETAILS (dynamic, ?slug)  (slice 4)
   ========================================================= */
.pdp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:880px){.pdp-grid{grid-template-columns:1fr;gap:30px}}

/* Two per row on phones instead of one full-width card. 460px is exactly where
   the shared .prod-cards rules collapse to a single column, so nothing above
   that breakpoint changes.

   Opted into per grid by id rather than applied to .prod-cards globally: the
   home, dashcam and category grids each have their own breakpoint ladder, and
   changing the shared rule would move all of them. The id also means these win
   on specificity rather than load order — which matters, because home.css
   loads after this file and restates .prod-cards.

     #pdpRelatedWrap — related products, product detail page
     #offersDeals    — discounted products, offers page */
@media (max-width:460px){
  #pdpRelatedWrap .prod-cards,
  #offersDeals .prod-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (max-width:360px){
  #pdpRelatedWrap .prod-cards,
  #offersDeals .prod-cards{gap:8px}
}

/* gallery
   Laid out the way the large stores lay one out: a thumbnail rail down the
   inline-start edge from 992px up, the photo beside it, the lens panel
   overhanging the info column. Below that the rail drops under the photo,
   because a 68px column out of a 360px screen is a quarter of the picture. */
.gallery{display:block}
.gallery-stage{min-inline-size:0}

.gallery-main{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-2);cursor:zoom-in}
/* object-fit:contain, not cover: this catalogue holds 3:2 photos as well as
   square ones, and cover was quietly slicing the ends off the wide ones — on a
   page whose whole job is showing the product. The padding keeps it off the
   frame; zoom.js reads both back rather than assuming either. */
.gallery-main img{width:100%;height:100%;padding:18px;object-fit:contain;
  transition:transform .15s var(--ease),opacity .18s var(--ease);transform-origin:center}

/* "Roll over image to zoom in" — the lens is only found by shoppers who know
   to hover, so the page says so, and says the touch version on touch. */
.gallery-note{margin-block-start:10px;text-align:center;font-size:12.5px;color:var(--text-3);
  transition:opacity .2s var(--ease)}
.gallery-note .on-touch{display:none}
@media (hover:none),(pointer:coarse){
  .gallery-note .on-hover{display:none}
  .gallery-note .on-touch{display:inline}
}
/* It has said its piece once the lens is out. */
.gallery:has(.gallery-main.lens-on) .gallery-note{opacity:0}
/* Cross-fade between gallery photos — pdp.js only adds .swapping once the
   replacement has decoded, so this covers the swap, not a load. */
.gallery-main img.swapping{opacity:0}
/* touch-action:none while zoomed, or the browser claims the drag for scrolling
   and the pan never gets the move events */
.gallery-main.zoom{cursor:zoom-out;touch-action:none}
.gallery-main:focus-visible,.qv-zoom:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Zoom affordance — injected by zoom.js into whichever box it is attached to,
   so the blade partial and store.js do not each need their own copy. Sits at
   the bottom inline-start: .g-badges and .qv-badges own the top-start corner
   and .qv-hud the bottom-end one. */
.zoom-hint{position:absolute;inset-block-end:12px;inset-inline-start:12px;z-index:3;
  display:grid;place-items:center;inline-size:32px;block-size:32px;border-radius:9px;
  color:#fff;background:rgba(0,0,0,.42);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.14);pointer-events:none;
  opacity:.85;transform:none;transition:opacity .25s var(--ease)}
.zoom-hint svg{inline-size:16px;block-size:16px}
/* out of the way once it has done its job */
.gallery-main.zoom .zoom-hint,.qv-zoom.zoomed .zoom-hint{opacity:0}
@media (prefers-reduced-motion:reduce){.zoom-hint{transition:none}}

/* ===== Amazon-style lens zoom (mouse, >=880px) =====
   zoom.js injects .zoom-lens into .gallery-main and .zoom-panel into .gallery,
   then sizes and places both inline from the measured photo — the rules here
   only own appearance. .gallery is the panel's positioning parent, which is
   why it has to be a containing block; zoom.js sets that defensively too, for
   any page that reuses the gallery markup without this stylesheet.

   The panel deliberately overhangs the info column, so it sits above it. */
.gallery{position:relative}

.zoom-lens{position:absolute;top:0;left:0;z-index:4;   /* physical, not logical: the
  square is placed by a transform in box coordinates, and an RTL inset-inline-start
  would anchor it to the opposite edge from the one those coordinates count from */
  pointer-events:none;opacity:0;
  /* transform is written every frame from a rAF loop in zoom.js — a CSS
     transition on top of that fights it and the square lags the pointer. */
  transition:opacity .14s var(--ease);will-change:transform;
  border:1px solid rgba(255,255,255,.9);border-radius:4px;
  background:rgba(255,255,255,.16);
  /* The 9999px spread is the dimmer: everything outside the square recedes,
     which is what makes the lens read as a selection and not a sticker. Kept
     light — the point is to show the region, not to black out the photo. */
  box-shadow:0 0 0 9999px rgba(0,0,0,.24),inset 0 0 0 1px rgba(0,0,0,.28),0 1px 6px rgba(0,0,0,.28)}
.zoom-lens.on{opacity:1}

.zoom-panel{position:absolute;z-index:50;pointer-events:none;  /* over the info
  column, under the fixed header's 60 — the panel scrolls with the page, so it
  would otherwise slide across the header on the way up */
  opacity:0;transform:scale(.985);transform-origin:center;
  transition:opacity .16s var(--ease),transform .16s var(--ease);
  border:1px solid var(--line-strong,var(--line));border-radius:var(--r);
  /* White-ish mat behind the magnified pixels, so a photo cut out on white
     does not end on a hard edge against the page. */
  background-color:var(--surface);background-repeat:no-repeat;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.06);
  overflow:hidden}
.zoom-panel.on{opacity:1;transform:none}

/* Crosshair while the lens is out: the pointer is aiming, not clicking. The
   hint has said its piece by then, and the badges would sit under the dimmer
   looking like part of the photo. */
.gallery-main.lens-on{cursor:crosshair}
.gallery-main.lens-on .zoom-hint{opacity:0}
.gallery-main.lens-on .g-badges{opacity:0;transition:opacity .16s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .zoom-lens,.zoom-panel{transition:none}
  .zoom-panel{transform:none}
}

.gallery-main .g-badges{position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.gallery-thumbs{display:flex;gap:10px;margin-block-start:12px;flex-wrap:wrap}
.gallery-thumbs button{position:relative;width:72px;height:72px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;cursor:pointer;background:var(--surface-2);padding:0;transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.gallery-thumbs button:hover{border-color:var(--accent);transform:translateY(-2px)}
/* The chosen thumbnail carries a ring rather than just a 1px border, so which
   photo is on the big canvas is readable at a glance down the strip. */
.gallery-thumbs button.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gallery-thumbs button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gallery-thumbs button img{transition:transform .3s var(--ease)}
.gallery-thumbs button:hover img{transform:scale(1.06)}
/* contain, matching the main photo: a wide product cropped to a square chip
   next to an uncropped big one looks like a different product. */
.gallery-thumbs img{width:100%;height:100%;padding:4px;object-fit:contain}

/* The desktop rail. Placed after the base strip rules, not before them: same
   specificity, so source order is what decides, and a media query does not
   change that. */
@media (min-width:992px){
  .gallery{display:flex;align-items:flex-start;gap:14px}
  .gallery-stage{flex:1 1 auto;min-inline-size:0}
  /* order, not float: in Arabic the rail belongs on the right, and the writing
     direction already knows which side that is. */
  /* The rail scrolls, so it clips: the chosen thumbnail's ring is drawn 2px
     OUTSIDE its border box, and with the old 2px padding it landed exactly on
     the clip edge and vanished. Room on every side, and a little extra at the
     block end where the last chip would otherwise sit flush against it. */
  .gallery-thumbs{order:-1;flex:0 0 auto;flex-direction:column;flex-wrap:nowrap;
    inline-size:76px;margin-block-start:0;max-block-size:560px;overflow-y:auto;
    scrollbar-width:thin;padding:4px;padding-block-end:12px}
  .gallery-thumbs button{inline-size:62px;block-size:62px}
  /* Belt and braces: a scroll container's block-end padding is honoured by
     current browsers but was not always, and the ring is the one thing on this
     page that says which photo is on the canvas. */
  .gallery-thumbs button:last-child{margin-block-end:6px}
  /* translateY on hover would push a column item into its neighbour; nudge it
     out of the rail instead. */
  .gallery-thumbs button:hover{transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .gallery-thumbs button,.gallery-thumbs button img,.gallery-main img{transition:none}
  .gallery-thumbs button:hover{transform:none}
  .gallery-thumbs button:hover img{transform:none}
}

/* ===== full-screen gallery viewer (.lb) =====
   Built and owned by pdp.js, opened by clicking the photo. The lens answers
   "what does this detail look like"; this answers "show me the whole thing as
   big as this screen goes", with its own click-to-magnify, wheel zoom and a
   thumbnail rail. Above everything, including the fixed header's 60. */
html.lb-open{overflow:hidden}

.lb{position:fixed;inset:0;z-index:950;   /* above the theme-picker FAB at 900, which would otherwise float over it */
  display:flex;flex-direction:column;
  opacity:0;transition:opacity .2s var(--ease)}
.lb.on{opacity:1}
.lb[hidden]{display:none}
.lb-scrim{position:absolute;inset:0;background:rgba(3,14,16,.92);backdrop-filter:blur(6px)}

.lb-bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 16px;color:var(--text)}
.lb-count{font-size:13px;color:var(--text-2);letter-spacing:.04em}
.lb-tools{display:flex;gap:8px}
.lb-btn{display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:11px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;
  cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.lb-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
.lb-btn:active{transform:scale(.94)}
.lb-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lb-btn svg{inline-size:19px;block-size:19px}

.lb-stage{position:relative;z-index:1;flex:1 1 auto;min-block-size:0;
  display:flex;align-items:center;justify-content:center;padding:8px 64px;
  cursor:zoom-in;overflow:hidden;touch-action:none}
.lb.zoomed .lb-stage{cursor:zoom-out}
/* auto width/height rather than a stretched box: the element then IS the
   photo, which is what the pan maths in pdp.js measures against. */
.lb-img{max-inline-size:100%;max-block-size:100%;inline-size:auto;block-size:auto;
  object-fit:contain;border-radius:6px;user-select:none;-webkit-user-drag:none;
  transition:transform .22s var(--ease)}

.lb-nav{position:absolute;z-index:3;inset-block-start:50%;transform:translateY(-50%);
  display:grid;place-items:center;inline-size:46px;block-size:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;
  cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease)}
.lb-nav:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}
.lb-nav:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lb-nav svg{inline-size:22px;block-size:22px}
.lb-prev{inset-inline-start:12px}
.lb-next{inset-inline-end:12px}
/* The chevrons are drawn pointing at the physical left and right; in Arabic
   "previous" lives on the right, so the pair swaps rather than being redrawn. */
[dir="rtl"] .lb-nav svg{transform:scaleX(-1)}
.lb.solo .lb-nav,.lb.solo .lb-rail{display:none}

.lb-rail{position:relative;z-index:2;display:flex;gap:8px;justify-content:center;
  padding:12px 16px 18px;overflow-x:auto;scrollbar-width:thin}
.lb-thumb{flex:0 0 auto;inline-size:58px;block-size:58px;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);border-radius:9px;overflow:hidden;
  background:rgba(255,255,255,.05);opacity:.6;
  transition:opacity .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.lb-thumb:hover{opacity:1;transform:translateY(-2px)}
.lb-thumb.active{opacity:1;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.lb-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lb-thumb img{inline-size:100%;block-size:100%;padding:3px;object-fit:contain}

@media (max-width:640px){
  .lb-stage{padding:6px 10px}
  .lb-nav{inline-size:38px;block-size:38px}
  .lb-prev{inset-inline-start:6px}
  .lb-next{inset-inline-end:6px}
  .lb-thumb{inline-size:48px;block-size:48px}
  .lb-rail{justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .lb,.lb-img,.lb-btn,.lb-nav,.lb-thumb{transition:none}
}

/* ===== product badges (.bdg) — gallery + quick view =====
   These had no rules in any stylesheet: four bare <span>s stacked in a column,
   rendering as plain body text over the photo. Hence "classic".

   Built as a glass pill so it stays legible over any product shot — a solid
   fill has to guess the photo behind it — with the state colour carried by a
   dot rather than the whole chip. The discount is the exception: it is the one
   badge meant to sell, so it drops the glass and goes solid. */
.bdg{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--ff-mono);font-size:11px;font-weight:600;letter-spacing:.3px;line-height:1;
  padding:7px 12px;border-radius:100px;white-space:nowrap;color:#fff;
  background:color-mix(in srgb,#000 52%,transparent);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);
  box-shadow:0 8px 20px -12px rgba(0,0,0,.9)}
.bdg::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;flex:0 0 auto;
  background:var(--bdg-dot,var(--accent));box-shadow:0 0 8px var(--bdg-dot,var(--accent))}

.bdg.best{--bdg-dot:#E0A93B}
.bdg.new{--bdg-dot:var(--accent)}
.bdg.sale{--bdg-dot:var(--rec)}
/* out of stock is a status, not a highlight — neutral dot, dimmed label, and
   no glow, so it never competes with the badges that are trying to sell */
.bdg.out{--bdg-dot:#9AA4A6;color:rgba(255,255,255,.84)}
.bdg.out::before{box-shadow:none}

.bdg.sale{background:linear-gradient(135deg,var(--rec),color-mix(in srgb,var(--rec) 62%,#000));
  border-color:color-mix(in srgb,var(--rec) 55%,transparent);
  box-shadow:0 10px 24px -12px var(--rec)}
.bdg.sale::before{background:#fff;box-shadow:none}

.g-badges{gap:8px}
/* they arrive with the image rather than being there flatly from the start */
.g-badges .bdg,.qv-badges .bdg{animation:bdgIn .45s var(--ease) backwards}
.g-badges .bdg:nth-child(1),.qv-badges .bdg:nth-child(1){animation-delay:.06s}
.g-badges .bdg:nth-child(2),.qv-badges .bdg:nth-child(2){animation-delay:.14s}
.g-badges .bdg:nth-child(3),.qv-badges .bdg:nth-child(3){animation-delay:.22s}
.g-badges .bdg:nth-child(4),.qv-badges .bdg:nth-child(4){animation-delay:.30s}
@keyframes bdgIn{from{opacity:0;transform:translateY(-6px) scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.g-badges .bdg,.qv-badges .bdg{animation:none}}

/* info column */
.pdp-cat{font-family:var(--ff-mono);font-size:12px;letter-spacing:1px;color:var(--accent)}
.pdp-title{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:700;line-height:1.15;letter-spacing:-.4px;margin-block:8px 12px}
.pdp-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-block-end:18px;font-size:13px;color:var(--text-3)}
.pdp-meta .stars{transform:translateY(2px)}
.pdp-meta .brand{font-family:var(--ff-mono);color:var(--text-2)}
.pdp-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-block-end:14px}
.pdp-price .now{font-family:var(--ff-mono);font-size:2rem;font-weight:600;color:var(--text)}
.pdp-price .was{font-family:var(--ff-mono);font-size:1.1rem;text-decoration:line-through;color:var(--text-3)}
.pdp-price .off{font-family:var(--ff-mono);font-size:12px;color:#fff;background:var(--rec);border-radius:6px;padding:3px 8px}
.pdp-avail{display:inline-flex;align-items:center;gap:8px;font-size:14px;margin-block-end:20px}
.pdp-avail .dot{width:9px;height:9px;border-radius:50%}
.pdp-avail.in{color:var(--accent)} .pdp-avail.in .dot{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.pdp-avail.out{color:var(--rec)} .pdp-avail.out .dot{background:var(--rec)}
.pdp-desc{color:var(--text-2);margin-block-end:22px;font-size:1.02rem}
.pdp-feat{display:flex;flex-direction:column;gap:11px;margin-block-end:24px}
.pdp-feat li{display:flex;gap:11px;align-items:flex-start;color:var(--text-2);font-size:.96rem}
.pdp-feat li svg{flex:0 0 auto;color:var(--accent);width:18px;height:18px;margin-block-start:3px}

.pdp-buy{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-block-end:18px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.qty button{width:42px;height:46px;background:var(--surface);border:0;color:var(--text);font-size:20px;cursor:pointer;transition:.2s}
.qty button:hover{color:var(--accent)}
.qty input{width:50px;height:46px;text-align:center;border:0;background:var(--surface-2);color:var(--text);font-family:var(--ff-mono);font-size:15px}
.pdp-buy .btn-cart,.pdp-buy .btn-buy-now{flex:1;min-width:150px;height:46px;justify-content:center;text-align:center}
.btn-buy-now{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn-buy-now:hover{background:var(--brand);color:#fff;transform:translateY(-2px)}
[data-theme="dark"] .btn-buy-now,:root:not([data-theme="light"]) .btn-buy-now{color:var(--accent);border-color:var(--accent)}
[data-theme="dark"] .btn-buy-now:hover,:root:not([data-theme="light"]) .btn-buy-now:hover{background:var(--accent);color:#fff}
#buyBarAdd{justify-content:center}
/* size only — appearance is shared with .pcard-actions .wish above. 46px to
   match .pdp-buy .btn-cart beside it. (position:static used to be here to undo
   an absolutely-positioned .wish base rule that no longer exists.) */
.pdp-buy .wish{flex:0 0 auto;inline-size:46px;block-size:46px}
.pdp-buy .wish svg{inline-size:22px;block-size:22px}

.pdp-share{display:flex;align-items:center;gap:10px;padding-block-start:18px;border-block-start:1px solid var(--line);font-size:13px;color:var(--text-3)}
.pdp-share .s-btns{display:flex;gap:8px}
.pdp-share a,.pdp-share button.s-copy{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);display:grid;place-items:center;cursor:pointer;transition:.2s var(--ease)}
.pdp-share a:hover,.pdp-share button.s-copy:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.pdp-share svg{width:17px;height:17px}

/* tabs panel (description / specs / reviews) */
.pdp-tabs{margin-block-start:10px}
.pdp-panels{margin-block-start:24px}
.pdp-panel{display:none}
.pdp-panel.active{display:block}
.pdp-panel p{color:var(--text-2);margin-block-end:14px}
.spec-table{width:100%;border-collapse:collapse}
.spec-table tr{border-block-end:1px solid var(--line)}
.spec-table th{text-align:start;color:var(--text-3);font-weight:500;padding:13px 0;width:42%;font-size:.95rem}
.spec-table td{padding:13px 0;color:var(--text);font-size:.95rem}

/* reviews */
.rev-summary{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-block-end:26px;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.rev-score{text-align:center}
.rev-score .big{font-family:var(--ff-mono);font-size:2.6rem;font-weight:600;line-height:1}
.rev-score .stars{margin-block:6px}
.rev-score small{color:var(--text-3);font-size:12px}
.rev-list{display:flex;flex-direction:column;gap:16px}
.review{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;background:var(--surface)}
.review-head{display:flex;align-items:center;gap:10px;margin-block-end:8px}
.review-head .av{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:600;font-size:13px}
.review-head .nm{font-weight:600;font-size:.95rem}
.review-head .dt{margin-inline-start:auto;font-family:var(--ff-mono);font-size:11px;color:var(--text-3)}
.review p{color:var(--text-2);font-size:.95rem}

/* not found */
.pdp-404{text-align:center;padding:80px 20px}
.pdp-404 svg{width:54px;height:54px;color:var(--text-3);margin-block-end:18px}
.pdp-404 h2{font-size:1.5rem;margin-block-end:10px}
.pdp-404 p{color:var(--text-2);margin-block-end:24px}

/* =========================================================
   CART: header badge + cart page  (slice 5)
   ========================================================= */
.cart-btn{position:relative}
/* Host for the badge so it can sit proud of the (clipped) button. */
.nav-cart{position:relative;display:inline-flex}
.cart-count{position:absolute;inset-block-start:-6px;inset-inline-start:-6px;min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;background:var(--rec);color:#fff;font-family:var(--ff-mono);font-size:11px;line-height:18px;
  text-align:center;display:none}
.cart-count.has{display:inline-block;animation:cart-pop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes cart-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.cart-count.has{animation:none}}

.cart-grid{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start}
@media (max-width:880px){.cart-grid{grid-template-columns:1fr}}

.cart-actions-top{display:flex;justify-content:space-between;align-items:center;margin-block-end:18px}
.cart-actions-top .count{font-family:var(--ff-mono);font-size:13px;color:var(--text-3)}
.cart-clear{background:none;border:0;color:var(--text-3);cursor:pointer;font-size:13px;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.cart-clear:hover{color:var(--rec)}
.cart-clear svg{width:15px;height:15px}

.cart-items{display:flex;flex-direction:column;gap:14px}
.cart-row{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px;transition:.25s var(--ease)}
.cart-row:hover{border-color:var(--line-strong)}
.cart-row .ci-thumb{width:96px;height:96px;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.cart-row .ci-thumb img{width:100%;height:100%;object-fit:cover}
.cart-row .ci-cat{font-family:var(--ff-mono);font-size:11px;letter-spacing:.5px;color:var(--text-3);margin-block-end:3px}
.cart-row .ci-name{font-size:1rem;margin-block-end:6px}
.cart-row .ci-name a:hover{color:var(--accent)}
.cart-row .ci-unit{font-family:var(--ff-mono);font-size:.85rem;color:var(--text-2)}
.cart-row .ci-unit .was{text-decoration:line-through;color:var(--text-3);margin-inline-start:6px}
.cart-row .ci-end{display:flex;flex-direction:column;align-items:flex-end;gap:12px;white-space:nowrap}
.cart-row .line-total{font-family:var(--ff-mono);font-weight:600;font-size:1.05rem}
.cart-row .ci-rm{background:none;border:0;color:var(--text-3);cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-family:inherit}
.cart-row .ci-rm:hover{color:var(--rec)}
.cart-row .ci-rm svg{width:14px;height:14px}
.cart-row .qty button{width:36px;height:38px;font-size:18px}
.cart-row .qty input{width:42px;height:38px;font-size:14px}
@media (max-width:480px){
  .cart-row{grid-template-columns:72px 1fr;gap:12px}
  .cart-row .ci-thumb{width:72px;height:72px}
  .cart-row .ci-end{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
}

.cart-summary{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:24px;position:sticky;inset-block-start:84px}
.cart-summary h3{font-size:1.15rem;margin-block-end:16px}
.sum-row{display:flex;justify-content:space-between;align-items:center;padding-block:11px;color:var(--text-2);font-size:.95rem;border-block-end:1px solid var(--line)}
.sum-row .v{font-family:var(--ff-mono)}
.sum-row.total{border-block-end:0;color:var(--text);font-weight:700;font-size:1.2rem;padding-block-start:16px}
.sum-row.total .v{color:var(--text)}
.sum-free{color:var(--accent)}
.cart-summary .btn{width:100%;justify-content:center;margin-block-start:18px}
.cart-note{font-size:12px;color:var(--text-3);margin-block-start:14px;text-align:center;line-height:1.7}
.cart-note a{color:var(--accent)}

/* a summary value that is a phrase, not a number — mono spaces Arabic badly */
.sum-row .v.txt{font-family:var(--ff-ar);font-size:.9rem}
.sum-row .v.txt:not(.sum-free){color:var(--text-3)}

/* the resolved shipping method, shown next to the label once a region is picked */
.sum-note{display:inline;font-style:normal;font-size:11px;color:var(--text-3)}
.sum-note:not(:empty)::before{content:"· "}

/* line middle column: category, name, unit price, then the qty stepper */
.cart-row .ci-mid{min-width:0}
.cart-row .ci-name a{overflow-wrap:anywhere}
.cart-row .qty{margin-block-start:12px}

/* =========================================================
   CHECKOUT: contact + address + payment form  (slice 5)
   Sits in the .cart-grid next to the sticky .cart-summary.
   ========================================================= */
.checkout-form{display:flex;flex-direction:column;gap:18px}

.co-block{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:22px 24px}
.co-head{display:flex;align-items:center;gap:11px;margin-block-end:18px}
.co-head .n{font-family:var(--ff-mono);font-size:11px;letter-spacing:.5px;color:var(--accent);
  background:var(--accent-soft);border:1px solid var(--line-strong);border-radius:999px;padding:4px 9px;line-height:1}
.co-head h3{font-size:1.05rem;margin:0}

/* Checkout "already have an account?" offer. An aside, not a step, so it reads
   as a slim banner — copy on one side, actions on the other — instead of
   carrying the same padding and numbered heading as the real sections.

   These rules live here rather than in account.css because checkout.blade.php
   loads only site.css: parked in the account stylesheet they never reached this
   panel, which left the skip control rendering as a raw native button. */
.co-login{display:flex;align-items:center;justify-content:space-between;
  gap:14px 22px;flex-wrap:wrap;padding:14px 18px}
.co-login-main{flex:1 1 260px;min-inline-size:0}
.co-login-main h3{font-size:1rem;margin:0}
.co-login-lead{font-size:13px;color:var(--text-2);line-height:1.65;margin:5px 0 0}
.co-login-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:0 0 auto}
.co-login-actions .btn{padding:9px 16px;font-size:13.5px;border-radius:10px}
/* The order CTA is the only brand-filled button on this page, so the login
   action takes the softer accent treatment rather than competing with it. */
.co-login-cta{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.co-login-cta:hover{border-color:var(--accent)}
.co-login-skip{background:none;border:0;font-family:inherit;font-size:13px;color:var(--text-3);
  cursor:pointer;padding:9px 4px;text-decoration:underline;text-underline-offset:4px;
  transition:color .25s var(--ease)}
.co-login-skip:hover{color:var(--text)}
.co-saved{margin-block-end:18px}
.trk-result{margin-block-start:4px}

@media (max-width:560px){
  .co-login-actions{inline-size:100%}
  .co-login-actions .btn{flex:1 1 0;justify-content:center}
}

.co-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.co-fields .full{grid-column:1/-1}
/* National Address sits in its own grid under the typed-address one (which hides for a saved address). */
.co-fields + .co-fields{margin-block-start:16px}
@media (max-width:560px){.co-fields{grid-template-columns:1fr}}

.fld{display:block}
.fld>span{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);margin-block-end:7px}
.fld>span em{font-style:normal;font-family:var(--ff-mono);font-size:10px;letter-spacing:.4px;color:var(--text-3)}
.fld input,.fld textarea{
  width:100%;font-family:inherit;font-size:.95rem;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;transition:.25s var(--ease);
}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--text-3)}
.fld textarea{resize:vertical;min-height:78px;line-height:1.7}
.fld.has-error input,.fld.has-error textarea,.fld.has-error select{border-color:var(--rec)}
.fld.has-error input:focus,.fld.has-error textarea:focus,.fld.has-error select:focus{border-color:var(--rec);box-shadow:0 0 0 3px rgba(255,90,77,.14)}
.fld .err{display:block;margin-block-start:6px;font-size:12px;line-height:1.6;color:var(--rec)}

/* Native <select>, restyled to match .fld inputs. The chevron is drawn on the
   wrapper so it survives the browser's own appearance reset. */
.sel{position:relative;display:block}
.sel select{
  width:100%;font-family:inherit;font-size:.95rem;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;padding-inline-end:38px;transition:.25s var(--ease);cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.sel select:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.sel select:disabled{cursor:not-allowed;opacity:.55}
/* PHYSICAL borders on purpose: the logical pair mirrors under RTL and turns the
   chevron sideways. Down is down in both directions. */
.sel::after{
  content:"";position:absolute;inset-block-start:50%;inset-inline-end:15px;width:8px;height:8px;
  margin-block-start:-6px;border-right:1.8px solid var(--text-3);border-bottom:1.8px solid var(--text-3);
  transform:rotate(45deg);pointer-events:none;transition:border-color .2s
}
.sel:focus-within::after{border-color:var(--accent)}
/* the placeholder row reads as a prompt, not as a chosen value */
.sel select:invalid,.sel select option[value=""]{color:var(--text-3)}
/* while a dependent list is loading */
.sel.is-loading::after{opacity:.35}

/* country → state → city sit on one line; they collapse together on narrow screens */
.co-geo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:760px){.co-geo{grid-template-columns:1fr}}

/* "billing same as shipping" — a switch, since it hides a whole block */
.switch{display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{flex:0 0 auto;position:relative;width:42px;height:24px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line-strong);transition:.25s var(--ease)}
.switch .knob{position:absolute;inset-block-start:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;
  background:var(--text-3);transition:.25s var(--ease)}
.switch input:checked~.track{background:var(--accent-soft);border-color:var(--accent)}
.switch input:checked~.track .knob{background:var(--accent);inset-inline-start:20px}
.switch input:focus-visible~.track{box-shadow:0 0 0 3px var(--accent-soft)}
.switch-txt{font-size:.92rem;color:var(--text-2)}
.switch input:checked~.switch-txt{color:var(--text)}

.billing-fields{margin-block-start:16px}
.billing-fields[hidden]{display:none}

/* payment method as a selectable card (the native radio stays the a11y control) */
.pay-opt{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-sm);padding:15px 16px;transition:.25s var(--ease)}
.pay-opt:hover{border-color:var(--line-strong)}
.pay-opt input{position:absolute;opacity:0;width:0;height:0}
.pay-opt .dot{flex:0 0 auto;width:18px;height:18px;margin-block-start:2px;border-radius:50%;
  border:1.5px solid var(--line-strong);position:relative;transition:.2s var(--ease)}
.pay-opt .dot::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--accent);transform:scale(0);transition:.2s var(--ease)}
.pay-opt input:checked~.dot{border-color:var(--accent)}
.pay-opt input:checked~.dot::after{transform:scale(1)}
.pay-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.pay-opt input:focus-visible~.dot{box-shadow:0 0 0 3px var(--accent-soft)}
.pay-opt .pay-txt{display:flex;flex-direction:column;gap:3px}
.pay-opt .pay-txt b{font-size:.95rem;font-weight:600}
.pay-opt .pay-txt small{font-size:12px;color:var(--text-3);line-height:1.6}

.form-error{border:1px solid var(--rec);background:rgba(255,90,77,.10);color:var(--rec);
  border-radius:var(--r-sm);padding:12px 14px;font-size:.9rem;line-height:1.6}
.form-error[hidden]{display:none}

.co-submit{width:100%;justify-content:center}
.checkout-form .cart-note{margin-block-start:0}

/* =========================================================
   CHECKOUT SUMMARY — the receipt panel beside the form
   ========================================================= */
.co-summary .sum-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-block-end:14px;border-block-end:1px solid var(--line)}
.co-summary .sum-head h3{margin:0}
.sum-count{font-family:var(--ff-mono);font-size:11px;letter-spacing:.4px;color:var(--text-3);white-space:nowrap}

/* progress toward the free-shipping threshold */
.ship-goal{margin-block:14px 4px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--accent-soft);border:1px solid var(--line-strong)}
.ship-goal p{margin:0 0 9px;font-size:12px;line-height:1.6;color:var(--text-2)}
.ship-goal p b{color:var(--accent);font-family:var(--ff-mono)}
.ship-goal .bar{display:block;block-size:5px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.ship-goal .bar i{display:block;block-size:100%;border-radius:999px;background:var(--accent);transition:inline-size .4s var(--ease)}

/* promo code */
.promo{margin-block:16px;padding-block:16px;border-block:1px solid var(--line)}
.promo-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.promo-row input{
  width:100%;font-family:inherit;font-size:.9rem;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 12px;transition:.25s var(--ease);letter-spacing:.5px;
}
.promo-row input:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.promo-row input::placeholder{color:var(--text-3);letter-spacing:0}
.promo-btn{font-family:inherit;font-size:.85rem;font-weight:600;color:var(--text);cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding-inline:16px;transition:.25s var(--ease)}
.promo-btn:hover{border-color:var(--accent);color:var(--accent)}
.promo-btn[disabled]{opacity:.55;cursor:not-allowed}
.promo-msg{margin:9px 0 0;font-size:12px;line-height:1.6;color:var(--rec)}
.promo-msg.is-ok{color:var(--accent)}
.promo-msg[hidden]{display:none}
.promo.is-applied .promo-row input{border-color:var(--accent);color:var(--accent)}

/* grand total gets its own weight class, separate from the .sum-row list */
.sum-grand{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-block-start:14px;padding-block-start:16px;border-block-start:1px solid var(--line-strong)}
.sum-grand .lbl{font-size:1rem;font-weight:700}
.sum-grand .amt{font-family:var(--ff-mono);white-space:nowrap}
.sum-grand .amt b{font-size:1.5rem;font-weight:600;letter-spacing:-.5px}
.sum-grand .amt em{font-style:normal;font-size:12px;color:var(--text-3);margin-inline-start:3px}

/* trust strip — NOT `.trust`, which is already the home page's banded section */
.co-trust{list-style:none;margin:16px 0 0;padding:14px 0 0;border-block-start:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px}
.co-trust li{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text-3);line-height:1.5}
.co-trust svg{inline-size:15px;block-size:15px;flex:0 0 auto;color:var(--accent)}

/* order summary lines on the checkout side panel */
.co-lines{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.co-lines li{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center}
/* no overflow:hidden here — the qty badge deliberately sits outside the frame */
.co-lines .pic{position:relative;width:48px;height:48px}
.co-lines .pic img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line)}
.co-lines .pic .q{position:absolute;inset-block-start:-6px;inset-inline-start:-6px;min-width:19px;height:19px;padding:0 5px;
  border-radius:10px;background:var(--brand);color:#fff;font-family:var(--ff-mono);font-style:normal;font-size:11px;
  line-height:19px;text-align:center;border:1px solid var(--surface)}
.co-lines .nm{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:.88rem;line-height:1.45;overflow-wrap:anywhere}
.co-lines .nm b{font-weight:600;color:var(--text)}
.co-lines .nm small{font-family:var(--ff-mono);font-size:11px;color:var(--text-3)}
.co-lines .v{font-family:var(--ff-mono);font-size:.88rem;white-space:nowrap;align-self:center}

/* =========================================================
   SHOP FLOW — compact rhythm for cart + checkout
   These two pages are a task, not a pitch: the visitor wants the whole basket
   and the total on one screen. Everything below tightens the marketing-page
   spacing. Scoped to .shop-flow so the rest of the storefront stays airy.
   ========================================================= */
.x-phero.shop-flow{padding-block:96px 14px}
.x-phero.shop-flow .crumbs{margin-block-end:10px}
.x-phero.shop-flow .kicker{font-size:11px}
.x-phero.shop-flow h1{font-size:clamp(1.55rem,3vw,2.15rem);line-height:1.2;margin-block-start:2px}
.section.shop-flow{padding-block:24px 64px}
.section.shop-flow .op-empty{padding:38px 20px}

.shop-flow .cart-grid{grid-template-columns:1fr 318px;gap:20px}
@media (max-width:880px){.shop-flow .cart-grid{grid-template-columns:1fr}}

.shop-flow .cart-actions-top{margin-block-end:12px}
.shop-flow .cart-items{gap:9px}
.shop-flow .cart-row{grid-template-columns:74px 1fr auto;gap:13px;padding:11px 13px}
.shop-flow .cart-row .ci-thumb{width:74px;height:74px}
.shop-flow .cart-row .ci-cat{margin-block-end:2px}
.shop-flow .cart-row .ci-name{font-size:.95rem;margin-block-end:3px}
.shop-flow .cart-row .ci-unit{font-size:.82rem}
.shop-flow .cart-row .qty{margin-block-start:0}
.shop-flow .cart-row .qty button{width:30px;height:30px;font-size:16px}
.shop-flow .cart-row .qty input{width:34px;height:30px;font-size:13px}

/* one horizontal band — stepper, line total, remove — so the row has no dead middle */
.shop-flow .cart-row .ci-end{flex-direction:row;align-items:center;gap:16px}
.shop-flow .cart-row .line-total{min-width:8ch;text-align:end;font-size:1rem}
.shop-flow .cart-row .ci-rm{padding:4px}
.shop-flow .cart-row .ci-rm svg{width:16px;height:16px}
@media (max-width:480px){
  .shop-flow .cart-row .ci-end{justify-content:space-between;gap:10px;margin-block-start:2px}
  .shop-flow .cart-row .line-total{min-width:0}
}

.shop-flow .cart-summary{padding:18px 20px;inset-block-start:78px}
.shop-flow .cart-summary h3{font-size:1.05rem;margin-block-end:10px}
.shop-flow .sum-row{padding-block:8px;font-size:.9rem}
.shop-flow .sum-row.total{font-size:1.1rem;padding-block-start:12px}
.shop-flow .cart-summary .btn{margin-block-start:10px}
.shop-flow .cart-note{margin-block-start:10px}

.shop-flow .checkout-form{gap:12px}
.shop-flow .co-block{padding:16px 18px}
.shop-flow .co-head{margin-block-end:13px}
.shop-flow .co-head h3{font-size:.98rem}
.shop-flow .co-fields{gap:12px}
.shop-flow .fld>span{margin-block-end:5px;font-size:12px}
.shop-flow .fld input,.shop-flow .fld textarea{padding:10px 12px;font-size:.9rem}
.shop-flow .fld textarea{min-height:62px;line-height:1.6}
.shop-flow .sel select{padding:10px 12px;padding-inline-end:34px;font-size:.9rem}
.shop-flow .co-geo{gap:12px}
.shop-flow .pay-opt{padding:12px 14px}
.shop-flow .billing-fields{margin-block-start:14px}

/* The checkout summary is the receipt the customer checks before paying, so it
   runs wider and looser than the cart's — the rest of the page stays compact. */
.shop-flow .checkout-grid{grid-template-columns:1fr 420px}
@media (max-width:1040px){.shop-flow .checkout-grid{grid-template-columns:1fr}}

.shop-flow .co-summary{padding:22px 24px}
.shop-flow .co-summary h3{font-size:1.12rem}

.shop-flow .co-lines{gap:14px}
.shop-flow .co-lines li{grid-template-columns:56px 1fr auto;gap:13px}
.shop-flow .co-lines .pic{width:56px;height:56px}
.shop-flow .co-lines .nm{font-size:.92rem}
.co-lines .nm em{font-style:normal;font-family:var(--ff-mono);font-size:10px;
  letter-spacing:.4px;color:var(--text-3)}

/* A sticky panel taller than the viewport traps its own footer: it never scrolls
   up, so the total and the edit link stay out of reach on short screens. Cap it
   to the visible height and let the panel itself scroll — one region, not two. */
.shop-flow .co-summary{max-block-size:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain}
.shop-flow .co-summary::-webkit-scrollbar{inline-size:5px}
.shop-flow .co-summary::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px}
@media (max-width:1040px){
  /* Stacked under the form — no longer sticky, so it needs no cap. */
  .shop-flow .co-summary{max-block-size:none;overflow:visible;position:static}
}

.shop-flow .checkout-grid .sum-row{font-size:.94rem;padding-block:9px}
.shop-flow .checkout-grid .sum-rows .sum-row:last-child{border-block-end:0}

@media (max-width:560px){
  .x-phero.shop-flow{padding-block:88px 12px}
  .shop-flow .cart-row{padding:10px}
  .shop-flow .co-block{padding:14px 15px}
  .shop-flow .cart-summary{padding:16px 17px}
}

/* =========================================================
   SHOP BROWSE — denser rhythm for the products listing
   Same intent as .shop-flow on cart/checkout: a page people scan, not a pitch.
   Scoped so the marketing pages keep their airy spacing.
   ========================================================= */
.x-phero.shop-browse{padding-block:104px 22px}
.x-phero.shop-browse h1{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.18}
.x-phero.shop-browse .lead{margin-block-start:12px;font-size:1rem}
.x-phero.shop-browse .crumbs{margin-block-end:10px}
.x-phero.shop-browse .kicker{margin-block-end:12px}
.x-phero.shop-browse .watermark{opacity:.1}
.section.shop-browse{padding-block:26px 56px}

.shop-browse .shop-layout{grid-template-columns:248px 1fr;gap:22px}
@media (max-width:991px){.shop-browse .shop-layout{grid-template-columns:1fr}}

.shop-browse .filters{padding:16px 18px;inset-block-start:78px}
.shop-browse .fgroup{padding-block:14px}
.shop-browse .fgroup > h4{margin-block-end:9px}
.shop-browse .fopt{padding:3px 0}

.shop-browse .shop-toolbar{margin-block-end:14px}
.shop-browse .active-chips{margin-block-end:14px}
.shop-browse .pager{margin-block-start:28px}

/* The filter FAB is fixed to the bottom of the viewport from 991 down, and it
   sat on top of the last card row and the pager. Buy back its height. */
@media (max-width:991px){
  .shop-browse .shop-main{padding-block-end:72px}
}
/* Under 576 .wrap goes fluid and the toolbar's two halves stop fitting on one
   line; let them stack full-width instead of the search box collapsing to its
   220px minimum and the sort select spilling. */
@media (max-width:575px){
  .shop-browse .shop-toolbar{gap:10px}
  .shop-browse .shop-toolbar .search{flex:1 1 100%;max-width:none;min-width:0}
  .shop-browse .tools-right{width:100%;justify-content:space-between;gap:10px}
  .shop-browse .tools-right .op-select{padding:9px 12px}
}

/* Four across on the listing. #shopGrid was pinned to three in home.css, which
   loads later — this beats it on specificity rather than by load order.
   The steps track .wrap's max-widths, not round numbers: .wrap jumps 1320 →
   1140 → 960 → 720 → 540, and the sidebar eats 270px of that, so a column
   count that changes on a different boundary lands cards at ~140px in the
   gap between the two. Resulting card width stays ~205-280px throughout. */
.shop-browse .prod-cards#shopGrid{grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1199px){.shop-browse .prod-cards#shopGrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.shop-browse .prod-cards#shopGrid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media (max-width:359px){.shop-browse .prod-cards#shopGrid{grid-template-columns:1fr}}

/* Four narrower cards need their own chrome trimmed, or the frame overwhelms
   the product: smaller viewfinder marks, tighter HUD, shorter copy block. */
.shop-browse .pcard-hud{padding:12px 14px}
.shop-browse .vf{width:14px;height:14px}
.shop-browse .vf-tl,.shop-browse .vf-tr{inset-block-start:8px}
.shop-browse .vf-bl,.shop-browse .vf-br{inset-block-end:8px}
.shop-browse .vf-tl,.shop-browse .vf-bl{inset-inline-start:8px}
.shop-browse .vf-tr,.shop-browse .vf-br{inset-inline-end:8px}
.shop-browse .pcard:hover .vf{width:18px;height:18px}

/* ---------------------------------------------------------
   Narrow-card chrome
   The overlays inside .pcard-frame are absolutely positioned at fixed insets
   sized for a ~270px card: REC badge + tag + category code across the top,
   telemetry chips bottom-start, two 36px tool buttons bottom-end. Under about
   230px of card they overlap each other — and on touch the tool buttons are
   permanently visible (see the hover:none rule above), so the collision is not
   just a hover state.

   Keyed to the card, not the viewport, because the same card is 207px in a
   four-across desktop listing and 169px in a two-across phone grid: a viewport
   query would have to guess which grid it is in. Browsers without container
   query support simply keep the wide chrome, which is what they render today.

   These selectors are doubled (.pcard .pcard-hud) and placed after the
   .shop-browse block above on purpose: @container adds no specificity, so a
   plain .pcard-hud here would lose to .shop-browse .pcard-hud.
   --------------------------------------------------------- */
.pcard{container-type:inline-size;container-name:pcard}

@container pcard (max-width:230px){
  .pcard .pcard-hud{padding:10px 11px;gap:5px}
  .pcard .pcard-hud .rec{display:none}          /* decorative, first to go */
  .pcard .pcard-hud .tag{font-size:9.5px;padding:3px 6px}
  .pcard .pcard-hud .hud-code{font-size:9.5px;padding:3px 6px}
  .pcard .vf{width:12px;height:12px}
  .pcard:hover .vf{width:15px;height:15px}
  .pcard .vf-tl,.pcard .vf-tr{inset-block-start:7px}
  .pcard .vf-bl,.pcard .vf-br{inset-block-end:7px}
  .pcard .vf-tl,.pcard .vf-bl{inset-inline-start:7px}
  .pcard .vf-tr,.pcard .vf-br{inset-inline-end:7px}

  /* The bottom-end corner is free now that the two tool buttons have left the
     frame, so the chips get the full width back — two of them instead of one. */
  .pcard .pcard-tel{inset-block-end:11px;inset-inline-start:12px;flex-wrap:nowrap;
    max-width:calc(100% - 24px)}
  .pcard .pcard-tel span{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .pcard .pcard-tel span:nth-child(n+3){display:none}

  .pcard .pcard-quick .quickbtn{width:40px;height:40px}
  .pcard .pcard-quick .quickbtn svg{width:18px;height:18px}
  .pcard .pcard-actions{gap:6px;margin-block-start:10px}
  .pcard .pcard-actions .wish{inline-size:38px}
  .pcard .pcard-actions .wish svg{inline-size:18px;block-size:18px}

  .pcard .pcard-body{padding:13px 13px 14px;gap:7px}
  .pcard .pcard-name{font-size:.98rem;min-height:2.7em}
  .pcard .pcard-price .now{font-size:1.12rem}
  /* no margin here — .pcard-actions carries it, and a top margin on a stretch
     flex item would drop the cart button below the heart beside it */
  .pcard .pcard-cart{padding:10px 12px;font-size:13.5px;gap:6px}
  .pcard .pcard-cart svg{width:15px;height:15px}
}

@container pcard (max-width:200px){
  /* The chips survive down here now — with the corner free they only have to
     give up the second one instead of the whole row. The category code goes:
     it duplicates the breadcrumb above. */
  .pcard .pcard-tel span:nth-child(n+2){display:none}
  .pcard .pcard-hud .hud-code{display:none}
  .pcard .pcard-body{padding:11px 11px 12px}
  .pcard .pcard-name{font-size:.92rem}
  .pcard .pcard-price .now{font-size:1.02rem}
  .pcard .pcard-price .was{font-size:.75rem}
  .pcard .pcard-cart{padding:9px 8px;font-size:12.5px}
  .pcard .pcard-actions{gap:5px}
  .pcard .pcard-actions .wish{inline-size:34px}
  .pcard .pcard-actions .wish svg{inline-size:17px;block-size:17px}
}

/* =========================================================
   ORDER CONFIRMATION — reuses the checkout grid + summary panel
   ========================================================= */
.oc-hero{display:flex;align-items:flex-start;gap:16px}
.oc-check{flex:0 0 auto;inline-size:46px;block-size:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent);margin-block-start:6px}
.oc-check svg{inline-size:22px;block-size:22px}
.oc-lead{color:var(--text-2);font-size:.98rem;line-height:1.8;margin-block-start:10px;max-width:56ch}
@media (max-width:560px){.oc-hero{gap:12px}.oc-check{inline-size:38px;block-size:38px}.oc-check svg{inline-size:18px;block-size:18px}}

.oc-main{display:flex;flex-direction:column;gap:14px}

/* reference / date / payment strip */
.oc-ref{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:620px){.oc-ref{grid-template-columns:1fr;gap:12px}}
.oc-ref .lbl{display:block;font-family:var(--ff-mono);font-size:10px;letter-spacing:.5px;
  color:var(--text-3);margin-block-end:5px}
.oc-ref b{font-size:.95rem;font-weight:600}
.oc-ref .ref{font-family:var(--ff-mono);font-size:1.05rem;color:var(--accent);letter-spacing:.5px}

/* status timeline */
.oc-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.oc-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  text-align:center;font-size:12px;color:var(--text-3);line-height:1.5}
/* the connector runs BEHIND the dots, between each pair */
.oc-steps li::before{content:"";position:absolute;inset-block-start:6px;inset-inline-start:50%;
  inline-size:100%;block-size:2px;background:var(--line);z-index:0}
.oc-steps li:last-child::before{display:none}
.oc-steps li.is-done::before{background:var(--accent)}
.oc-steps .dot{position:relative;z-index:1;inline-size:14px;block-size:14px;border-radius:50%;
  background:var(--surface-2);border:2px solid var(--line-strong);transition:.25s var(--ease)}
.oc-steps li.is-done .dot{background:var(--accent);border-color:var(--accent)}
.oc-steps li.is-now .dot{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.oc-steps li.is-done .txt,.oc-steps li.is-now .txt{color:var(--text)}
.oc-steps li.is-now .txt{font-weight:600}
@media (max-width:560px){.oc-steps{grid-template-columns:1fr;gap:14px}.oc-steps li{flex-direction:row;text-align:start}
  .oc-steps li::before{inset-block-start:auto;inset-block-end:-14px;inset-inline-start:6px;inline-size:2px;block-size:14px}}

.oc-closed{margin:0;font-size:.95rem;color:var(--rec)}

.oc-address{font-style:normal;display:flex;flex-direction:column;gap:5px;font-size:.93rem;
  color:var(--text-2);line-height:1.7}
.oc-address b{color:var(--text);font-weight:600}
.oc-address .mono{font-family:var(--ff-mono);font-size:.85rem}
.oc-address .oc-note{margin-block-start:6px;font-size:12px;color:var(--text-3)}
.oc-ship{margin:14px 0 0;padding-block-start:12px;border-block-start:1px solid var(--line);
  font-size:.88rem;color:var(--text-3)}
.oc-ship b{color:var(--text-2)}
.oc-same{margin:0;font-size:.93rem;color:var(--text-3)}

.oc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-block-start:4px}
.oc-actions .btn{flex:1 1 200px;justify-content:center}

/* The confirmation is a receipt people print — drop the chrome, keep the paper. */
@media print{
  header,.back-top,.toast,.oc-actions,.co-trust,#mobileMenu,footer,.x-phero .hero-bg{display:none !important}
  .section.shop-flow{padding-block:0}
  .x-phero.shop-flow{padding-block:0 12px}
  .shop-flow .checkout-grid{grid-template-columns:1fr;gap:16px}
  .shop-flow .co-summary{max-block-size:none;overflow:visible;position:static}
  .co-block,.cart-summary{break-inside:avoid;box-shadow:none}
}

/* =========================================================
   THEME SKINS — site-wide style presets (data-skin on <html>)
   Orthogonal to data-theme (light/dark). Persisted in localStorage.
   ========================================================= */

/* ---- COMPACT: denser spacing, tighter radii ---- */
[data-skin="compact"]{--r:10px}
[data-skin="compact"] .section{padding-block:58px}
[data-skin="compact"] .section-head{margin-block-end:32px}
[data-skin="compact"] .tile,[data-skin="compact"] .col,[data-skin="compact"] .dcm-card,
[data-skin="compact"] .rail-card,[data-skin="compact"] .dcm-intro{padding:18px}
[data-skin="compact"] .bento,[data-skin="compact"] .dcm-grid{gap:12px}
[data-skin="compact"] .dcm-layout{gap:14px}

/* ---- LUXURY: gold accent, serif headings, airy, deep shadow ---- */
[data-skin="luxury"]{--accent:#2E9499;--accent-soft:rgba(46,148,153,.15);
  --r:18px;--shadow:0 32px 74px -30px rgba(0,0,0,.78)}
[data-skin="luxury"] .section{padding-block:120px}
[data-skin="luxury"] h1,[data-skin="luxury"] h2,[data-skin="luxury"] h3,
[data-skin="luxury"] .h-sec,[data-skin="luxury"] .section-head h2{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;letter-spacing:.2px;font-weight:700}
[data-skin="luxury"] .kicker,[data-skin="luxury"] .kicker::before{color:#2E9499;background:#2E9499}
[data-skin="luxury"] .btn-primary{background:linear-gradient(120deg,#2E9499,#4EB4B9);border-color:#2E9499;color:#04181B}
[data-skin="luxury"] .tile,[data-skin="luxury"] .dcm-card,[data-skin="luxury"] .col{border-color:color-mix(in srgb,#2E9499 26%,var(--line))}

/* ---- MINIMAL: flat, hairline, no gradients or shadows ---- */
[data-skin="minimal"]{--r:6px;--shadow:none;--accent-soft:transparent}
[data-skin="minimal"] .tile,[data-skin="minimal"] .col,[data-skin="minimal"] .dcm-card,
[data-skin="minimal"] .rail-card,[data-skin="minimal"] .dcm-intro,[data-skin="minimal"] .off-feat{box-shadow:none!important}
[data-skin="minimal"] .tile.lg,[data-skin="minimal"] .dcm-intro{background:var(--surface)!important}
[data-skin="minimal"] .dcm-card::before,[data-skin="minimal"] .dcm-intro::before,
[data-skin="minimal"] .off-feat::before{display:none}
[data-skin="minimal"] .dcm-intro{box-shadow:none}
[data-skin="minimal"] .tile:hover,[data-skin="minimal"] .dcm-card:hover,
[data-skin="minimal"] .rail-card:hover{transform:none;box-shadow:none}
[data-skin="minimal"] .btn-primary{box-shadow:none}

/* ---- TECH / NEON: cyan accent, glow edges, HUD feel ---- */
[data-skin="tech"]{--accent:#00E5C0;--accent-soft:rgba(0,229,192,.14);--r:8px}
[data-skin="tech"] .h-sec,[data-skin="tech"] .section-head h2{letter-spacing:-.2px}
[data-skin="tech"] .tile:hover,[data-skin="tech"] .dcm-card:hover,[data-skin="tech"] .rail-card:hover{
  border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 26px -6px var(--accent)}
[data-skin="tech"] .dcm-card::before{background:linear-gradient(90deg,var(--accent),transparent);opacity:1;
  box-shadow:0 0 12px -2px var(--accent)}
[data-skin="tech"] .btn-primary{background:var(--accent);border-color:var(--accent);color:#00201b;
  box-shadow:0 0 20px -6px var(--accent)}
[data-skin="tech"] .kicker,[data-skin="tech"] .kicker::before{color:var(--accent);background:var(--accent)}

/* ---- GLASS: frosted translucent surfaces ---- */
[data-skin="glass"] .tile,[data-skin="glass"] .col,[data-skin="glass"] .dcm-card,
[data-skin="glass"] .rail-card,[data-skin="glass"] .dcm-intro,[data-skin="glass"] .dcm-cam,
[data-skin="glass"] #hdr.scrolled,[data-skin="glass"] .off-row{
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--surface) 55%,transparent);
  border-color:color-mix(in srgb,var(--text) 14%,transparent)}
[data-skin="glass"] .tile.lg,[data-skin="glass"] .dcm-intro{
  background:color-mix(in srgb,var(--surface) 48%,transparent)}
[data-skin="glass"]{--shadow:0 20px 50px -26px rgba(0,0,0,.5)}

/* ---- BOLD: thick borders, heavy weights, punchy fills ---- */
[data-skin="bold"]{--r:12px}
[data-skin="bold"] .tile,[data-skin="bold"] .col,[data-skin="bold"] .dcm-card,
[data-skin="bold"] .rail-card,[data-skin="bold"] .dcm-intro,[data-skin="bold"] .dcm-cam,
[data-skin="bold"] .tab{border-width:2px;border-color:var(--line-strong)}
[data-skin="bold"] h1,[data-skin="bold"] h2,[data-skin="bold"] .h-sec,
[data-skin="bold"] .section-head h2{font-weight:800;letter-spacing:-.5px}
[data-skin="bold"] .dcm-card::before{height:5px;opacity:1}
[data-skin="bold"] .tile:hover,[data-skin="bold"] .dcm-card:hover{border-color:var(--accent)}
[data-skin="bold"] .btn-primary{border-width:2px;font-weight:700}

/* ---- CLASSIC: warm, soft radii, serif headings, calm ---- */
[data-skin="classic"]{--r:16px}
[data-skin="classic"] h1,[data-skin="classic"] h2,[data-skin="classic"] h3,
[data-skin="classic"] .h-sec,[data-skin="classic"] .section-head h2{
  font-family:Georgia,"Times New Roman",serif;letter-spacing:.1px}
[data-skin="classic"] .tile,[data-skin="classic"] .col,[data-skin="classic"] .dcm-card,
[data-skin="classic"] .rail-card{border-radius:16px}
[data-skin="classic"] .btn{border-radius:12px}

/* =========================================================
   CUSTOMIZER — floating FAB + skin panel (injected by site.js)
   ========================================================= */
.skin-fab{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:900;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--brand);color:#fff;border:1px solid var(--line-strong);
  box-shadow:var(--shadow);transition:.25s var(--ease)}
.skin-fab:hover{transform:translateY(-3px) rotate(30deg)}
.skin-fab svg{width:22px;height:22px}

.skin-panel{position:fixed;inset-block-end:86px;inset-inline-end:22px;z-index:901;width:min(340px,calc(100vw - 44px));
  background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:18px;opacity:0;visibility:hidden;transform:translateY(12px) scale(.97);transform-origin:bottom;
  transition:.26s var(--ease)}
.skin-panel.open{opacity:1;visibility:visible;transform:none}
.skin-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-block-end:14px}
.skin-panel-head h4{font-size:15px;font-weight:700}
.skin-panel-head .en{font-family:var(--ff-mono);font-size:10px;letter-spacing:1.5px;color:var(--text-3);display:block;margin-block-start:2px}
.skin-close{background:none;border:none;color:var(--text-2);cursor:pointer;padding:4px;border-radius:8px;line-height:0}
.skin-close:hover{background:var(--surface-2);color:var(--text)}
.skin-close svg{width:18px;height:18px}

.skin-mode{display:flex;gap:8px;margin-block-end:14px}
.skin-mode button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:9px}
.skin-mode button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.skin-mode button svg{width:15px;height:15px}

.skin-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.skin-opt{display:flex;align-items:center;gap:10px;text-align:start;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 11px;transition:.2s var(--ease)}
.skin-opt:hover{border-color:var(--accent)}
.skin-opt.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.skin-sw{width:26px;height:26px;flex:0 0 auto;border-radius:8px;border:1px solid rgba(255,255,255,.25);
  background:var(--sw,var(--brand))}
.skin-opt .t{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.skin-opt .t b{font-size:12.5px;font-weight:600;color:var(--text)}
.skin-opt .t small{font-family:var(--ff-mono);font-size:8.5px;letter-spacing:1px;color:var(--text-3)}

@media (max-width:560px){
  .skin-fab{inset-block-end:16px;inset-inline-end:16px;width:48px;height:48px}
  .skin-panel{inset-block-end:74px;inset-inline-end:16px}
}
@media (prefers-reduced-motion:reduce){
  .skin-fab:hover{transform:none}
  .skin-panel{transition:opacity .2s}
}

/* ============ ACCENT (teal — matches nv1) ============ */
/* premium classes flattened to nv1 teal look: flat brand button, solid accent */

/* -- utility classes -- */
.text-premium{color:var(--accent)}
.premium-grad-text{color:var(--accent)}

.btn-premium{
  background:var(--brand);
  color:#fff;border-color:transparent;
  box-shadow:0 10px 26px -12px var(--brand);
}
.btn-premium:hover{transform:translateY(-2px);background:#0A6066;box-shadow:0 16px 30px -12px var(--brand)}
.btn-premium:active{background:var(--accent-press)}

/* زر "احصل على عرضك" في الهيدر — نفس ذهب زر "أضف للسلة" في كروت المنتجات. */
#hdr .btn-premium,.mobile-menu .btn-premium{
  background:linear-gradient(90deg,#CFAC66 0%,#E8D59E 50%,#CFAC66 100%);
  color:#04181C;
  box-shadow:0 10px 26px -12px #CFAC66;
}
#hdr .btn-premium:hover,.mobile-menu .btn-premium:hover{background:#B8934E;box-shadow:0 16px 30px -12px #CFAC66}
#hdr .btn-premium:active,.mobile-menu .btn-premium:active{background:#A8853F}

.offer .rib{color:var(--accent);border-color:var(--line-strong)}

.btn-premium-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-premium-ghost:hover{border-color:var(--accent);color:var(--accent)}

.badge-premium{
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.5px;
  color:var(--accent);border:1px solid var(--line-strong);
  border-radius:6px;padding:3px 8px;background:var(--accent-soft);
}

.premium-ring{border:1px solid var(--line-strong);box-shadow:0 0 0 1px var(--accent-soft)}
.premium-bg{background:var(--accent-soft)}

/* -- hero accents -- */
h1.hero-title .truth,
.x-hero h1 .truth{color:var(--accent);position:relative;display:inline-block}
h1.hero-title .truth::after,
.x-hero h1 .truth::after{background:var(--accent);opacity:.28}

.eyebrow{border-color:var(--line-strong)}
.eyebrow b{background:var(--accent);box-shadow:0 0 8px var(--accent)}

.hero-meta .k{color:var(--accent)}

/* ── live validation states ────────────────────────────────── */

/* A field the server has just accepted gets a quiet tick — enough to show the
   check happened, never loud enough to compete with an error. */
.fld.is-valid input,.fld.is-valid textarea,.fld.is-valid select{border-color:rgba(62,207,142,.45)}
.fld.is-valid>span::after{content:"✓";margin-inline-start:6px;color:#3ECF8E;font-size:12px}
.switch.has-error .track{border-color:var(--rec)}
.switch.has-error .err{display:block;flex:1 0 100%;margin-block-start:6px;font-size:12px;color:var(--rec)}

.form-error{border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.7;
  border:1px solid rgba(255,90,77,.4);background:rgba(255,90,77,.10);color:var(--text)}

/* Submit in flight: the button says so and refuses a second click. */
.btn.is-loading{opacity:.65;pointer-events:none;position:relative}
.btn.is-loading::after{content:"";inline-size:14px;block-size:14px;margin-inline-start:9px;
  border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;
  display:inline-block;vertical-align:-2px;animation:acc-spin .8s linear infinite}
@keyframes acc-spin{to{transform:rotate(360deg)}}

/* ── phone picker (intl-tel-input on the dark theme) ───────── */

.iti{inline-size:100%;--iti-border-color:var(--line-strong);--iti-country-selector-bg:transparent;
  --iti-icon-color:var(--text-2);--iti-hover-color:var(--accent-soft)}
.iti__tel-input{inline-size:100%}
/* Structure (padding, RTL side-swaps) is the plugin's own CSS; only the skin
   is restated here so the picker matches the dark storefront. */
.iti__selected-country{border-radius:10px}
.iti__selected-dial-code{color:var(--text-2);font-family:var(--ff-mono);font-size:13px}
.iti__country-selector,.iti__country-list{background:var(--surface-2);color:var(--text);
  border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow)}
.iti__country{color:var(--text-2);font-size:14px}
.iti__country.iti__highlight{background:var(--accent-soft);color:var(--accent)}
.iti__search-input{background:var(--surface);color:var(--text);border-radius:10px}
.iti__search-input::placeholder{color:var(--text-3)}
.iti__dial-code{color:var(--text-3)}

/* ── header account menu ───────────────────────────────────── */

/* the avatar button — presses in, keeps a ring while its menu is open */
.acc-btn{position:relative;inline-size:38px;block-size:38px;padding:0;border:0;border-radius:50%;
  cursor:pointer;background:none;overflow:hidden;isolation:isolate;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s}
.acc-btn:hover{transform:translateY(-1px) scale(1.05)}
.acc-btn:active{transform:scale(.94)}
.acc-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.nav-dd.open .acc-btn{box-shadow:0 0 0 2px var(--accent),0 0 0 6px var(--accent-soft)}
.acc-initial{position:absolute;inset:0;display:grid;place-items:center;
  font-size:15px;font-weight:700;color:#fff;background:var(--premium-grad)}
/* unverified email — a quiet dot on the avatar, not a banner */
.acc-btn-host{position:relative;display:inline-flex}
.acc-flag{position:absolute;inset-block-start:-1px;inset-inline-end:-1px;z-index:2;
  inline-size:10px;block-size:10px;border-radius:50%;background:var(--rec);
  border:2px solid var(--bg);animation:acc-pulse 2.4s ease-in-out infinite;pointer-events:none}
@keyframes acc-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* the panel */
.acc-menu{min-inline-size:268px;padding:6px;overflow:hidden;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(14px);border:1px solid var(--line-strong);
  border-radius:16px;box-shadow:0 24px 60px -24px rgba(0,0,0,.65);
  transform-origin:top var(--acc-menu-origin,left);
  transition:opacity .2s ease,transform .24s cubic-bezier(.34,1.4,.64,1),visibility .24s}
[dir="rtl"] .acc-menu{--acc-menu-origin:right}
.nav-dd .acc-menu{opacity:0;visibility:hidden;transform:translateY(-8px) scale(.96)}
.nav-dd.open .acc-menu{opacity:1;visibility:visible;transform:none}

/* identity header, over the brand gradient so the menu opens with colour */
.acc-menu-head{display:flex;align-items:center;gap:10px;padding:12px;margin-block-end:6px;
  border-radius:12px;background:linear-gradient(135deg,var(--accent-soft),transparent 70%);
  border:1px solid var(--line)}
.acc-menu-avatar{flex:0 0 auto;inline-size:34px;block-size:34px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;font-weight:700;color:#fff;background:var(--premium-grad)}
.acc-menu-id{min-inline-size:0}
.acc-menu-id b{display:block;font-size:14px;line-height:1.4}
.acc-menu-id small{display:block;font-size:11px;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* groups separated by hairlines instead of one undifferentiated list */
.acc-menu-group{display:grid;gap:2px;padding-block:4px}
.acc-menu-group+.acc-menu-group{border-block-start:1px solid var(--line)}
.acc-menu-out{padding-block-start:4px;border-block-start:1px solid var(--line)}

.acc-menu a,.acc-menu button{position:relative;display:flex;align-items:center;gap:10px;
  inline-size:100%;padding:9px 11px;border-radius:10px;overflow:hidden;
  font:inherit;font-size:13.5px;text-align:start;color:var(--text-2);
  background:none;border:0;cursor:pointer;
  transition:background .18s,color .18s,padding-inline-start .18s}
.acc-menu a svg,.acc-menu button svg{flex:0 0 auto;inline-size:17px;block-size:17px;
  color:var(--text-3);transition:color .18s,transform .22s}
.acc-menu a:hover,.acc-menu button:hover{background:var(--accent-soft);color:var(--accent);padding-inline-start:14px}
.acc-menu a:hover svg,.acc-menu button:hover svg{color:var(--accent);transform:scale(1.08)}
.acc-menu-out button:hover{background:rgba(255,90,77,.12);color:var(--rec)}
.acc-menu-out button:hover svg{color:var(--rec)}

.acc-menu-warn{color:var(--rec) !important;background:rgba(255,90,77,.10);margin-block-end:4px}
.acc-menu-warn svg{color:var(--rec) !important}

/* the click wave — a circle grown from the pointer, painted by forms.js */
.ripple{position:relative;overflow:hidden}
.ripple-wave{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);
  background:currentColor;opacity:.28;animation:acc-ripple .55s ease-out forwards}
@keyframes acc-ripple{to{transform:scale(2.4);opacity:0}}

/* Motion is decoration here; anyone who asked for less gets the states without
   the movement. */
@media (prefers-reduced-motion:reduce){
  .acc-btn,.acc-menu,.acc-menu a,.acc-menu button,.acc-menu svg{transition:none}
  .acc-flag,.ripple-wave{animation:none}
}

/* ══ button motion — one behaviour for every button on the site ══
   Hover lifts, press sinks, click sends a wave out from the pointer.
   The SAME spec is implemented for the admin shell in
   resources/css/admin/brhub.css, so the two surfaces feel identical.
   ═══════════════════════════════════════════════════════════════ */

.btn,.icon-btn,.promo-btn,.nav-dd-btn,button.wish,.quickbtn,.s-copy{
  position:relative;overflow:hidden;
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),background .22s,color .22s,
             border-color .22s,box-shadow .22s}
.btn:hover,.icon-btn:hover,.promo-btn:hover,.quickbtn:hover,button.wish:hover{transform:translateY(-1px)}
.btn:active,.icon-btn:active,.promo-btn:active,.quickbtn:active,button.wish:active,.nav-dd-btn:active{
  transform:scale(.97)}
.btn:focus-visible,.icon-btn:focus-visible,.promo-btn:focus-visible,.nav-dd-btn:focus-visible{
  outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.btn[disabled],.btn:disabled,.icon-btn:disabled,.promo-btn:disabled{
  transform:none;opacity:.55;cursor:not-allowed}

@media (prefers-reduced-motion:reduce){
  .btn,.icon-btn,.promo-btn,.nav-dd-btn,button.wish,.quickbtn,.s-copy{transition:none}
  .btn:hover,.icon-btn:hover,.promo-btn:hover,.btn:active,.icon-btn:active{transform:none}
}

/* header language switcher — reuses .nav-dd/.nav-dd-menu wholesale; only the
   locale-code badge needs its own type rules, because .ic was sized to hold an
   18px icon rather than text. */
.lang-dd .nav-dd-menu{min-width:200px}
.lang-dd .nav-dd-menu a .ic{font-family:var(--ff-mono);font-size:11px;font-weight:600;letter-spacing:.5px}
.lang-dd .nav-dd-menu a[aria-current] .ic{background:var(--accent-soft)}

/* Locale flags. Reuses the sprite already vendored for intl-tel-input instead
   of shipping a second flag set: 244 flags laid out in one row, each 20x15, so
   flag N sits at -N*20px. Offsets are that library's own — re-check them if it
   is ever upgraded. */
.lang-flag{
  width:20px;height:15px;flex:0 0 auto;border-radius:2px;
  box-shadow:0 0 0 1px rgb(0 0 0 / .28);
  background-repeat:no-repeat;background-size:4880px 15px;
  background-image:url("/vendor/intl-tel-input/img/flags.webp");
  background-image:image-set(url("/vendor/intl-tel-input/img/flags.webp") 1x,url("/vendor/intl-tel-input/img/flags@2x.webp") 2x);
  background-position:calc(var(--flag-i) * 20px) 0}
.lang-flag-sa{--flag-i:-188}
.lang-flag-gb{--flag-i:-75}
.lang-flag-fr{--flag-i:-73}
.lang-flag-de{--flag-i:-55}
.lang-flag-es{--flag-i:-66}
.lang-flag-it{--flag-i:-106}
.lang-flag-tr{--flag-i:-219}
.lang-flag-ru{--flag-i:-186}
.lang-flag-pk{--flag-i:-174}
.lang-flag-ir{--flag-i:-104}
.lang-flag-in{--flag-i:-101}
.lang-flag-cn{--flag-i:-46}
/* flag rows in the burger menu */
.m-lang{display:inline-flex;align-items:center;gap:10px}

/* ── Mobile header: search + burger; language/theme move to the drawer ── */
.m-only{display:none}
.hdr-search{display:none}
@media (max-width:860px){
  /* burger + search | logo | account + cart. Two buttons a side keeps the logo
     dead centre; display:contents lets the tools order around the logo. */
  .nav{gap:8px}
  .nav-tools{display:contents}
  .nav-tools>.d-only{display:none}
  .nav-tools>.m-only{display:grid}
  #burger{order:1}
  #searchBtn{order:2}
  .brand{order:3;margin-inline:auto}
  .nav-tools>.nav-acc,.nav-tools>.acc-dd{order:4}
  .nav-tools>.nav-cart{order:5}
  html.mm-lock{overflow:hidden}
  #hdr.search-open{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(16px) saturate(1.3);border-block-end-color:var(--line)}
  #hdr.search-open .hdr-search{display:flex;gap:8px;padding-block:0 12px}
  #hdr.search-open #searchBtn{border-color:var(--accent);color:var(--accent)}
  .hdr-search input{flex:1;min-width:0;height:42px;padding-inline:14px;border:1px solid var(--line);border-radius:10px;
    background:var(--surface);color:var(--text);font:inherit;font-size:16px}
  .hdr-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .hdr-search .icon-btn{flex:0 0 auto;width:42px;height:42px}
}

/* ── Drawer: sticky top bar (close | language + theme), then nav, categories,
   account and the offer CTA. Top-aligned so a long list scrolls, never clips. ── */
@media (min-width:861px){.mobile-menu{display:none}}
.mm-head{position:sticky;inset-block-start:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-inline:20px;padding-block:calc(14px + env(safe-area-inset-top)) 14px;
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);border-block-end:1px solid var(--line)}
.mm-tools{display:flex;align-items:center;gap:8px}
.mm-body{display:flex;flex-direction:column;gap:20px;width:100%;max-width:520px;margin-inline:auto;
  padding-inline:20px;padding-block:16px calc(28px + env(safe-area-inset-bottom))}
.mm-nav{display:flex;flex-direction:column;gap:2px}
.mobile-menu .mm-nav a{display:flex;align-items:center;gap:14px;padding:9px 10px;border-radius:12px;
  font-size:1.05rem;font-weight:600;color:var(--text);transition:background .2s,color .2s}
.mobile-menu .mm-nav a:hover{background:var(--surface)}
.mobile-menu .mm-nav a.active{background:var(--accent-soft);color:var(--accent)}
.mm-ic{width:36px;height:36px;flex:0 0 auto;border-radius:10px;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;color:var(--accent)}
.mm-ic svg{width:18px;height:18px}
.mm-sec{display:flex;flex-direction:column;gap:10px;padding-block-start:18px;border-block-start:1px solid var(--line)}
.mm-h{font-family:var(--ff-mono);font-size:11px;letter-spacing:1.5px;color:var(--text-3);padding-inline:4px}
.mobile-menu .m-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mobile-menu .m-cats a{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);font-size:.92rem;font-weight:600;line-height:1.3;color:var(--text);transition:border-color .2s}
.mobile-menu .m-cats a:hover{border-color:var(--accent)}
.mobile-menu .m-cats .ic{width:30px;height:30px;flex:0 0 auto;border-radius:8px;background:var(--surface-2);
  display:grid;place-items:center;color:var(--accent)}
.mobile-menu .m-cats .ic svg{width:17px;height:17px}
.mm-acc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mobile-menu .mm-acc a{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 10px;
  border:1px solid var(--line-strong);border-radius:11px;font-size:.92rem;font-weight:600;color:var(--text);transition:border-color .2s}
.mobile-menu .mm-acc a:hover{border-color:var(--accent)}
.mobile-menu .mm-acc svg{width:17px;height:17px;flex:0 0 auto;color:var(--accent)}
.mobile-menu .mm-cta{justify-content:center;width:100%;padding-block:14px;font-size:1rem}
.mm-langs{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--surface)}
.mobile-menu .mm-langs a{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:8px;
  font-family:var(--ff-mono);font-size:12px;font-weight:600;color:var(--text-2)}
.mobile-menu .mm-langs a[aria-current]{background:var(--accent-soft);color:var(--text)}

/* ── Product page sticky buy bar ── */
.buybar{position:fixed;inset-inline:0;inset-block-end:0;z-index:70;
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);
  border-block-start:1px solid var(--line);box-shadow:0 -10px 30px -18px rgb(0 0 0 / .35);
  padding-block:10px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(110%);visibility:hidden;transition:transform .3s var(--ease),visibility .3s}
.buybar.on{transform:none;visibility:visible}
.buybar-in{display:flex;align-items:center;gap:12px}
.buybar-img{width:46px;height:46px;flex:0 0 auto;object-fit:contain;border-radius:10px;border:1px solid var(--line);background:var(--surface-2)}
.buybar-info{display:flex;flex-direction:column;min-width:0;flex:1}
.buybar-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar-price{display:flex;align-items:baseline;gap:8px}
.buybar-price .now{font-family:var(--ff-mono);font-size:1.1rem;font-weight:600;color:var(--text)}
.buybar-price .was{font-family:var(--ff-mono);font-size:.85rem;text-decoration:line-through;color:var(--text-3)}
.buybar .btn-cart{flex:0 0 auto;height:46px;padding-inline:22px}
@media (max-width:560px){
  .buybar-img,.buybar-name{display:none}
  .buybar .btn-cart{flex:1;justify-content:center}
  .buybar-info{flex:0 0 auto}
}
/* lift the floating controls above the bar while it shows */
body.buybar-on .back-top,body.buybar-on .skin-fab{inset-block-end:calc(84px + env(safe-area-inset-bottom))}
body.buybar-on .toast{inset-block-end:calc(90px + env(safe-area-inset-bottom))}
body.buybar-on .skin-panel{inset-block-end:calc(148px + env(safe-area-inset-bottom))}
@media (prefers-reduced-motion:reduce){.buybar{transition:none}}

/* Product description authored in the admin rich editor (sanitized server-side). */
.pdp-rich{color:var(--text-2);line-height:1.8;overflow-wrap:anywhere}
.pdp-rich>*:first-child{margin-top:0}
.pdp-rich p,.pdp-rich ul,.pdp-rich ol,.pdp-rich blockquote,.pdp-rich pre,.pdp-rich table{margin:0 0 1em}
.pdp-rich h2,.pdp-rich h3,.pdp-rich h4,.pdp-rich h5,.pdp-rich h6{color:var(--text);margin:1.2em 0 .5em;line-height:1.35}
.pdp-rich h2{font-size:1.4rem}.pdp-rich h3{font-size:1.2rem}.pdp-rich h4{font-size:1.08rem}
.pdp-rich ul,.pdp-rich ol{padding-inline-start:1.4em}
.pdp-rich li{margin-bottom:.3em}
.pdp-rich a{color:var(--accent,inherit);text-decoration:underline}
.pdp-rich img{max-width:100%;height:auto;border-radius:10px}
.pdp-rich figure{margin:0 0 1em}
.pdp-rich figure.image{display:table;clear:both;margin:1em auto;text-align:center}
.pdp-rich figure.image img{display:block;margin:0 auto;min-width:100%}
.pdp-rich figure.image.image_resized{display:block;max-width:100%}
.pdp-rich figure.image.image_resized img{width:100%}
.pdp-rich img.image_resized{max-width:100%;height:auto}
.pdp-rich figure.image>figcaption{display:table-caption;caption-side:bottom;padding:.5em .3em 0;font-size:.85em;color:var(--text-2);text-align:center;word-break:break-word}
/* Image alignment from the editor (CKEditor image-style classes). */
.pdp-rich::after{content:"";display:table;clear:both}
.pdp-rich .image-style-align-left,.pdp-rich figure.image.image-style-align-left{float:left;clear:none;margin:.3em 1.5em 1em 0}
.pdp-rich .image-style-align-right,.pdp-rich figure.image.image-style-align-right{float:right;clear:none;margin:.3em 0 1em 1.5em}
.pdp-rich figure.image.image-style-side{float:right;clear:none;margin:.3em 0 1em 1.5em;max-width:50%}
.pdp-rich .image-style-align-center{margin-left:auto;margin-right:auto}
.pdp-rich figure.image.image-style-block-align-left{margin-left:0;margin-right:auto;max-width:calc(100% - 1.5em)}
.pdp-rich figure.image.image-style-block-align-right{margin-left:auto;margin-right:0;max-width:calc(100% - 1.5em)}
.pdp-rich img.image-style-align-left,.pdp-rich img.image-style-align-right{margin-top:.75em;margin-bottom:.75em}
@media (max-width:560px){
  .pdp-rich figure.image.image-style-align-left,.pdp-rich figure.image.image-style-align-right,.pdp-rich figure.image.image-style-side{float:none;margin:1em auto;max-width:100%}
}
.pdp-rich blockquote{border-inline-start:3px solid currentColor;padding-inline-start:1em;opacity:.9}
.pdp-rich pre{overflow:auto;padding:.8em 1em;border-radius:8px;background:rgba(127,127,127,.12)}
.pdp-rich table{display:block;overflow-x:auto;border-collapse:collapse;max-width:100%}
.pdp-rich th,.pdp-rich td{border:1px solid rgba(127,127,127,.35);padding:.45em .7em;text-align:start}
.pdp-rich hr{border:0;border-top:1px solid rgba(127,127,127,.35);margin:1.4em 0}
.pdp-info-desc{margin-top:24px;padding-top:20px;border-top:1px solid var(--line,rgba(127,127,127,.25))}
.pdp-info-desc-title{font-size:1.1rem;margin:0 0 12px;color:var(--text)}