:root{
  --bg:#0D0708;
  --bg-soft:#160A0C;
  --surface:#1C0E10;
  --card:#F5ECDC;
  --card-line:#E7D6BC;
  --card-ink:#2B1210;
  --card-ink-soft:#70594F;
  --burgundy:#A11F32;
  --burgundy-bright:#C9293F;
  --burgundy-deep:#6E1423;
  --burgundy-glow:rgba(161,31,50,.35);
  --ink:#F6ECE0;
  --ink-soft:#C7B6AC;
  --ink-faint:#8C7A70;
  --gold:#E3A23B;
  --gold-deep:#C97F1E;
  --line:rgba(246,236,224,.12);
  --line-soft:rgba(246,236,224,.07);
  --shadow-sm:0 4px 16px rgba(0,0,0,.35);
  --shadow-md:0 14px 36px rgba(0,0,0,.45);
  --shadow-lg:0 26px 60px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(201,41,63,.3), 0 14px 40px rgba(161,31,50,.35);
  --radius:18px;
  --radius-sm:10px;
  --ease:cubic-bezier(.16,.84,.44,1);
  --nav-h:74px;
  /* --line is deliberately faint for large surfaces; controls that must read
     as interactive need more edge than that. */
  --line-strong:rgba(246,236,224,.26);
  --font-display:'Montserrat',sans-serif;
  --font-body:'Montserrat',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --font-ar:'Cairo',sans-serif;
}
/* =========================================================================
   styles.css - Arabian Al-Ekha employee store
   The only stylesheet; index.html carries no <style> block and no inline CSS.

   Sections, in file order. Search for the heading text to jump to one:
     tokens & reset          :root variables, fonts, base elements
     nav                     .topnav, .brand-logo, .nav-profile, .icon-btn
     filterbar               .filterbar, .cat-tabs, .brand-strip, .fb-row
     filter panel            .filter-panel, .fp-* (range, toggles, sort)
     hero                    .hero, .brand-stage, .shelf
     board & card            .board (masonry columns), .card
     drawer & modal          .drawer, .modal, .quote-fab
     footer                  .footer
     responsive              @media blocks
     light theme             body.theme-light overrides
     rtl                     body.lang-ar overrides
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:800;letter-spacing:-.01em;}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
.arabic{font-family:var(--font-ar);direction:rtl;}
/* One shell width for the whole page. The hero, the filter rails, the board
   and the footer all read it, so they cannot drift out of line with each
   other -- widening the page is a single number, not four. */
.container{max-width:var(--shell,1320px);margin:0 auto;padding:0 32px;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
::selection{background:var(--gold);color:var(--burgundy-deep);}
/* The thumb used to be --surface on --bg: two near-black values three points
   apart, so there was nothing to aim at. */
html{scrollbar-width:thin;scrollbar-color:rgba(246,236,224,.28) rgba(246,236,224,.05);}
::-webkit-scrollbar{width:12px;}
::-webkit-scrollbar-track{background:rgba(246,236,224,.05);}
::-webkit-scrollbar-thumb{
  background:rgba(246,236,224,.28);border-radius:8px;border:3px solid var(--bg);
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--gold);background-clip:padding-box;}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2.5px solid var(--gold);
  outline-offset:2px;
  border-radius:6px;
}

#progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--gold),var(--burgundy-bright));
  z-index:9999;transition:width .1s linear;
  box-shadow:0 0 10px rgba(227,162,59,.6);
}

/* ---------- nav ---------- */
.topnav{
  position:sticky;top:0;z-index:500;
  /* min-height, not height: a fixed height let the bar collapse to nothing
     when --nav-h was overwritten with a bad measurement, hiding the header
     behind the browser chrome. It can now only ever grow. */
  min-height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(13,7,8,.78);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease), background .3s;
}
.topnav.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.4);background:rgba(13,7,8,.94);}
.topnav .container{display:flex;align-items:center;justify-content:flex-start;gap:18px;max-width:none;width:100%;margin:0;padding:0 18px;}
.nav-actions{margin-left:auto;}
.brand-mark{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
/* Two files rather than a CSS filter: the colour logo is not a tinted version
   of the white one, so recolouring would not have produced it. */
.brand-logo{height:38px;width:auto;display:block;}
.logo-light{display:none;}
body.theme-light .logo-dark{display:none;}
body.theme-light .logo-light{display:block;}
.footer-brand .brand-logo{height:46px;}
@media (max-width:680px){ .brand-logo{height:30px;}}
.brand-mark .mk{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(150deg,var(--burgundy-deep),var(--bg-soft));
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);flex-shrink:0;
}
.brand-mark .mk img{width:24px;height:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}
.brand-mark .txt{line-height:1.15;}
.brand-mark .txt b{display:block;font-family:var(--font-display);font-weight:800;font-size:16.5px;color:var(--ink);letter-spacing:.005em;}
.brand-mark .txt span{display:block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-top:2px;}
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.icon-btn{
  width:38px;height:38px;border-radius:12px;border:1.5px solid var(--line);
  background:transparent;display:flex;align-items:center;justify-content:center;
  transition:all .25s var(--ease);color:var(--ink);position:relative;
}
.icon-btn:hover{background:var(--burgundy);color:#fff;border-color:var(--burgundy);transform:translateY(-2px);}
.icon-btn.active{background:var(--burgundy);color:#fff;border-color:var(--burgundy);}
.quote-count{
  position:absolute;top:-6px;right:-6px;background:var(--gold-deep);color:#fff;
  font-size:10.5px;font-weight:800;min-width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  border:2px solid var(--bg);font-family:var(--font-mono);
  transform:scale(0);transition:transform .3s var(--ease);
}
.quote-count.show{transform:scale(1);}
.nav-search{position:relative;display:flex;align-items:center;}
.nav-search input{
  width:250px;padding:0 16px;margin-left:8px;border:1.5px solid var(--line);background:var(--surface);
  border-radius:12px;color:var(--ink);font-size:13px;height:38px;outline:none;
  transition:border-color .25s var(--ease),width .3s var(--ease);
}
.nav-search input::placeholder{color:var(--ink-faint);}
.nav-search input:focus{border-color:var(--gold);}
body.lang-ar .nav-search input{margin-left:0;margin-right:8px;direction:rtl;text-align:right;}
body.lang-ar .nav-search{flex-direction:row-reverse;}
.theme-icon-light{display:none;}
body.theme-light .theme-icon-dark{display:none;}
body.theme-light .theme-icon-light{display:block;}
@media (max-width:1180px){
  .nav-search input{width:170px;}}
@media (max-width:900px){
  .nav-search input{width:130px;}}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:64px 0 0;
  overflow:hidden;
  background:
    radial-gradient(ellipse 900px 520px at 88% -8%, var(--burgundy-glow), transparent 60%),
    radial-gradient(ellipse 700px 600px at -8% 30%, rgba(227,162,59,.10), transparent 60%),
    var(--bg);
}
.hero .container{position:relative;z-index:2;}
.hero-inner{max-width:600px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  background:rgba(227,162,59,.08);border:1px solid rgba(227,162,59,.28);
  padding:7px 14px;border-radius:100px;margin-bottom:22px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.hero h1{
  font-size:clamp(32px,4.6vw,54px);
  line-height:1.1;
  color:var(--ink);
  font-weight:800;
  letter-spacing:-.02em;
}
.hero h1 .accent{position:relative;white-space:nowrap;color:#fff;}
.hero h1 .accent svg{position:absolute;left:0;bottom:-.1em;width:100%;height:.26em;z-index:-1;}
.hero-sub{
  margin-top:26px;font-size:18px;line-height:1.65;color:var(--ink-soft);
  max-width:600px;font-weight:500;
}
.hero-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 26px;border-radius:100px;font-weight:700;font-size:14.5px;
  text-decoration:none;border:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;
  font-family:var(--font-body);
}
.btn-primary{background:linear-gradient(135deg,var(--burgundy-bright),var(--burgundy-deep));color:#fff;box-shadow:0 10px 28px rgba(161,31,50,.45);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(161,31,50,.55);}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);}
.btn-ghost:hover{background:rgba(246,236,224,.06);border-color:rgba(246,236,224,.3);transform:translateY(-3px);}

/* ---------- shelf strip (signature marquee) ---------- */
.shelf{
  margin-top:56px;position:relative;overflow:hidden;
  padding:26px 0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.02) 20%,rgba(255,255,255,.02) 80%,transparent);
}
/* Motion is driven from JS (see setupAutoScrollRow). A CSS keyframe marquee
   used to run at the same time, and two animations moving the same row is
   what made the shelf look jerky. */
.shelf-item{
  flex:0 0 auto;width:104px;border-radius:16px;
  /* Solid beige, as originally. The translucent version let the dark page
     through and turned every product tile muddy brown. */
  background:#F5ECDC;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 8px;
  border:1px solid rgba(43,18,16,.08);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.shelf-item .si-img{
  width:100%;height:84px;display:flex;align-items:center;justify-content:center;
  /* No white well. The beige tile stays; the product sits directly on it. */
  background:transparent;border-radius:10px;padding:6px;
}
.shelf-item:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow-md);}
.shelf-item img{width:100%;height:100%;object-fit:contain;}
.si-brand{
  font-family:var(--font-mono);font-size:8.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#7A5C48;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.shelf-fade{position:absolute;top:0;bottom:0;width:160px;z-index:2;pointer-events:none;}
.shelf-fade.left{left:0;background:linear-gradient(90deg,var(--bg) 40%,transparent);}
.shelf-fade.right{right:0;background:linear-gradient(270deg,var(--bg) 40%,transparent);}

.shelf-item{position:relative;cursor:pointer;outline:none;}
.shelf-item:focus-visible{box-shadow:0 0 0 3px var(--gold);}

/* ---------- arriving from the shelf ----------
   Tapping a product on the moving shelf scrolls the board to it, and on a
   board of identical beige cards the one you asked for was indistinguishable
   from its neighbours once you got there. The old ring pulse was a gold
   box-shadow on a card sitting against a dark page: by the time the smooth
   scroll finished, most of it had already played and what was left read as
   nothing.

   Three things now happen together, and only once the scroll has actually
   landed: the card lifts and settles, a gold halo blooms and fades, and a
   single band of light sweeps across it. */
@keyframes jumpGlow{
  0%   { box-shadow:0 0 0 0 rgba(227,162,59,.85), 0 10px 30px rgba(0,0,0,.35); }
  25%  { box-shadow:0 0 0 10px rgba(227,162,59,0), 0 22px 70px rgba(227,162,59,.55); }
  100% { box-shadow:0 0 0 0 rgba(227,162,59,0), 0 10px 30px rgba(0,0,0,.35); }
}
@keyframes jumpLift{
  0%   { transform:translateY(0) scale(1); }
  22%  { transform:translateY(-7px) scale(1.035); }
  55%  { transform:translateY(0) scale(1.006); }
  100% { transform:translateY(0) scale(1); }
}
@keyframes jumpSweep{
  0%   { transform:translateX(-120%) skewX(-18deg); opacity:0; }
  12%  { opacity:1; }
  60%  { opacity:1; }
  100% { transform:translateX(220%) skewX(-18deg); opacity:0; }
}
@keyframes jumpBorder{
  0%,100%{ border-color:var(--gold); }
  50%    { border-color:var(--burgundy-bright); }
}
.card.jump-highlight{
  animation:jumpGlow 1.5s var(--ease) 2, jumpLift .9s var(--ease) 1, jumpBorder 1.5s var(--ease) 2;
  border-color:var(--gold);
  /* Above its neighbours while it is lifted, or the glow is clipped by the
     cards sitting next to it in the grid. */
  position:relative; z-index:5;
}
.card.jump-highlight::after{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(100deg,
    transparent 0%, rgba(255,255,255,.10) 38%,
    rgba(255,244,214,.60) 50%, rgba(255,255,255,.10) 62%, transparent 100%);
  animation:jumpSweep 1.15s var(--ease) .12s 1;
}
/* The point is to identify a card, not to animate at someone. Anyone who has
   asked for less motion still gets the halo and the gold border -- the part
   that carries the meaning -- without the lift or the sweep. */
@media (prefers-reduced-motion:reduce){
  .card.jump-highlight{ animation:jumpGlow 1.5s var(--ease) 2; }
  .card.jump-highlight::after{ display:none; }
}
/* ---------- pricing notice ---------- */
.notice{
  margin-top:40px;
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:16px 20px;font-size:13.5px;color:var(--ink-soft);font-weight:500;
}
.notice .ic{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--gold);
  color:var(--burgundy-deep);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;
}

/* ---------- modal primary action ---------- */
.modal-actions{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap;}
/* The old action was a 13px text button borrowed from the drawer's "clear"
   style: it read as a caption, so people did not try to press it. */
.modal-add{
  flex:1 1 220px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 26px;border:none;border-radius:100px;cursor:pointer;
  background:linear-gradient(135deg,var(--burgundy-bright),var(--burgundy-deep));
  color:#fff;font-family:var(--font-body);font-size:15.5px;font-weight:800;
  box-shadow:0 10px 26px rgba(161,31,50,.4);
  transition:transform .2s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.modal-add:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(161,31,50,.5);}
.modal-add:active{transform:translateY(0) scale(.985);}
.modal-add .ma-ic{display:flex;width:22px;height:22px;}
.modal-add .ma-ic svg{width:100%;height:100%;}
.modal-add.added{
  background:linear-gradient(135deg,#3F8F5B,#2C6B42);
  box-shadow:0 10px 26px rgba(63,143,91,.38);
}
.modal-qty{display:inline-flex;align-items:center;gap:2px;background:var(--surface);border:1.5px solid var(--line);border-radius:100px;padding:4px;}
.modal-qty[hidden]{display:none;}
.mq-btn{
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:transparent;color:var(--ink);font-size:20px;font-weight:700;line-height:1;
  transition:background .2s;
}
.mq-btn:hover{background:var(--bg-soft);color:var(--gold);}
.mq-val{min-width:34px;text-align:center;font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--ink);}

/* ---------- my orders ---------- */
.orders-drawer .drawer-list{padding-bottom:24px;}
.order-card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:15px 16px;margin-bottom:12px;
}
.oc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.oc-ref{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.04em;}
.oc-when{font-size:11.5px;color:var(--ink-faint);margin-top:3px;}
.oc-figures{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;}
.oc-lines{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);}
.oi-line{display:flex;align-items:center;gap:10px;}
.oi-line img{width:34px;height:34px;object-fit:contain;background:#fff;border-radius:8px;padding:3px;flex-shrink:0;}
.oi-name{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.oi-qty{font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--gold);flex-shrink:0;}
.oi-line-total{font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--ink);flex-shrink:0;min-width:66px;text-align:right;}
.oc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;flex-wrap:wrap;}
.oc-total{font-size:12px;font-weight:600;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-mono);}
.oc-total b{font-size:15px;color:var(--ink);margin-left:6px;letter-spacing:0;}
.oc-reorder{
  cursor:pointer;padding:8px 15px;border-radius:100px;
  background:transparent;border:1.5px solid var(--line);color:var(--ink-soft);
  font-family:var(--font-body);font-size:12px;font-weight:700;transition:border-color .2s, color .2s;
}
.oc-reorder:hover{border-color:var(--gold);color:var(--gold);}

/* ---------- filter bar ---------- */
.filterbar{
  position:sticky;top:var(--nav-h);z-index:400;
  background:rgba(13,7,8,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  padding:16px 0;
  margin-top:60px;
}
/* ---------- filters button + dropdown panel ---------- */
.filter-btn{
  display:inline-flex;align-items:center;gap:8px;margin-left:10px;
  padding:10px 16px;border-radius:100px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink-soft);
  font-family:var(--font-body);font-size:12.5px;font-weight:700;white-space:nowrap;
  transition:all .22s var(--ease);
}
.filter-btn:hover{border-color:var(--gold);color:var(--ink);transform:translateY(-1px);}
.filter-btn[aria-expanded="true"]{border-color:var(--burgundy-bright);color:#fff;background:linear-gradient(135deg,var(--burgundy-bright),var(--burgundy-deep));}
.fb-count{
  min-width:17px;height:17px;border-radius:50%;background:var(--gold);color:var(--burgundy-deep);
  font-family:var(--font-mono);font-size:10px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;padding:0 4px;
}
/* ---------- employee profile chip (replaces the nav filter dropdowns) ---------- */
.nav-profile{position:relative;margin-left:20px;}
.profile-btn{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:100px;
  padding:5px 14px 5px 5px;color:var(--ink-soft);
  font-family:var(--font-body);transition:border-color .2s var(--ease), color .2s;
}
.profile-btn:hover{border-color:var(--gold);color:var(--ink);}
.pf-avatar{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--ink-faint);
}
.pf-avatar.set{background:linear-gradient(140deg,var(--burgundy-bright),var(--burgundy-deep));color:#fff;border-color:transparent;}
.pf-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;text-align:left;}
.pf-text b{font-size:12.5px;font-weight:700;color:var(--ink);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pf-text b.unset{font-weight:600;color:var(--ink-faint);}
.pf-text span{
  font-family:var(--font-mono);font-size:10.5px;color:var(--ink-faint);
  max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The panel is a greeting and two actions now -- no editable fields -- so the
   address is set as a line of text rather than as a boxed-out value. */
.pf-hello{
  font-size:13px;font-weight:600;color:var(--ink-soft);line-height:1.5;
  padding-bottom:12px;margin-bottom:2px;border-bottom:1px dashed var(--line);
}
.pf-mail{
  display:block;font-family:var(--font-mono);font-size:12px;font-weight:700;
  color:var(--gold);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pf-mail[hidden]{display:none;}
.pf-orders,
.pf-signout{
  display:flex;align-items:center;gap:9px;width:100%;cursor:pointer;
  margin-top:10px;padding:11px 13px;border-radius:12px;
  background:var(--bg-soft);border:1.5px solid var(--line-strong);color:var(--ink);
  font-family:var(--font-body);font-size:13px;font-weight:700;
  transition:border-color .2s, color .2s, background .2s;
}
.pf-orders:hover{border-color:var(--gold);color:var(--gold);}
/* Sign out ends the session -- it reads burgundy, not gold, so it is never
   mistaken for another way into the store. */
.pf-signout:hover{border-color:var(--burgundy-bright);color:var(--burgundy-bright);}
.pf-orders-n{
  margin-left:auto;font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  color:var(--ink-soft);background:rgba(255,255,255,.08);padding:2px 8px;border-radius:100px;
}
body.lang-ar .pf-orders-n{margin-left:0;margin-right:auto;}
body.theme-light .pf-orders-n{background:rgba(43,18,16,.07);}
.profile-panel{width:270px;padding:16px;}
body.lang-ar .pf-text{align-items:flex-end;text-align:right;}
/* Narrow screens keep the chip -- it is the only route to the profile and to
   past orders now -- but drop to the avatar alone. */
@media (max-width:900px){
  .nav-profile{margin-left:12px;}
  .profile-btn{padding:5px;}
  .pf-text{display:none;}
  .profile-panel{width:min(300px,calc(100vw - 32px));}
}
.nf-item{position:relative;}
.fb-tools{display:flex;align-items:center;gap:10px;flex-shrink:0;min-width:0;}

.fb-filters .filter-panel{left:auto;right:0;}
.filter-panel{
  position:absolute;top:calc(100% + 10px);left:0;z-index:450;width:330px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-lg);padding:18px;
  animation:fpIn .25s var(--ease);
}
@media (max-width:900px){
  .filter-btn span:not(.fb-count){display:none;}
  .filter-btn{padding:9px 11px;}}
@keyframes fpIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.fp-section{margin-bottom:16px;}
.fp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.fp-switch-row{padding:7px 0;}
.fp-switch-row + .fp-switch-row{border-top:1px solid var(--line);}
.fp-switch-cap{font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.fp-label{
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.fp-label .fp-cur{color:var(--ink-faint);letter-spacing:.04em;text-transform:none;}
.fp-select{
  width:100%;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font-family:var(--font-body);font-size:13px;font-weight:600;
  appearance:auto;
}
.fp-select:focus{outline:none;border-color:var(--burgundy-bright);}
.fp-range{position:relative;height:32px;margin:2px 0 4px;}
.fp-range input[type="range"]{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);width:100%;
  -webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;height:32px;margin:0;
}
/* 22px thumbs with a ring: the old 17px handles were hard to grab, and
   impossible once the two met at the same value. */
.fp-range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;
  width:22px;height:22px;border-radius:50%;background:var(--gold);
  border:3px solid var(--bg);box-shadow:0 0 0 1.5px var(--gold), 0 3px 10px rgba(0,0,0,.55);
  cursor:grab;transition:transform .15s var(--ease);
}
.fp-range input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.12);}
.fp-range input[type="range"]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.18);}
.fp-range input[type="range"]::-moz-range-thumb{
  pointer-events:auto;width:20px;height:20px;border-radius:50%;background:var(--gold);
  border:3px solid var(--bg);box-shadow:0 0 0 1.5px var(--gold);cursor:grab;
}
.fp-range input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(227,162,59,.45);}
.fp-track{position:absolute;left:3px;right:3px;top:50%;transform:translateY(-50%);height:6px;border-radius:6px;background:var(--surface);border:1px solid var(--line);}
.fp-fill{
  position:absolute;top:0;bottom:0;border-radius:6px;
  background:linear-gradient(90deg,var(--gold),var(--burgundy-bright));
  transition:box-shadow .2s;
}
/* The selected band lights up once the range is actually narrowed, so an
   untouched slider does not look like an active filter. */
.fp-fill.narrowed{box-shadow:0 0 12px rgba(227,162,59,.5);}
.fp-range-vals{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--gold);font-weight:700;margin-top:2px;}
.fp-range-inputs{display:flex;align-items:flex-end;gap:8px;margin-bottom:2px;}
.fp-num{flex:1;display:block;}
.fp-num span{
  display:block;font-family:var(--font-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px;
}
.fp-num input{
  width:100%;padding:7px 10px;border-radius:9px;border:1.5px solid var(--line);
  background:var(--bg-soft);color:var(--ink);
  font-family:var(--font-mono);font-size:12.5px;font-weight:700;
}
.fp-num input:focus{outline:none;border-color:var(--gold);}
.fp-dash{color:var(--ink-faint);padding-bottom:9px;font-size:12px;}
.fp-toggle{
  display:inline-flex;align-items:center;gap:9px;background:none;border:none;padding:4px 0;
  color:var(--ink-soft);font-family:var(--font-body);font-size:12.5px;font-weight:600;
}
.fp-toggle .knob{
  width:36px;height:20px;border-radius:100px;background:var(--surface);border:1.5px solid var(--line);
  position:relative;transition:all .25s var(--ease);flex-shrink:0;
}
.fp-toggle .knob::after{
  content:'';position:absolute;top:1.5px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--ink-faint);transition:all .25s var(--ease);
}
.fp-toggle[data-active="true"] .knob{background:rgba(143,191,130,.25);border-color:#8fbf82;}
.fp-toggle[data-active="true"] .knob::after{left:17px;background:#8fbf82;box-shadow:0 0 8px rgba(143,191,130,.8);}
.fp-toggle[data-active="true"]{color:#B9E0AE;}
.fp-actions{display:flex;gap:10px;margin-top:2px;}
.fp-reset{
  flex:0 0 auto;padding:11px 18px;border-radius:100px;border:1.5px solid var(--line);
  background:transparent;color:var(--ink-soft);font-weight:700;font-size:12.5px;font-family:var(--font-body);
  transition:all .2s var(--ease);
}
.fp-reset:hover{border-color:var(--gold);color:var(--gold);}
.fp-apply{
  flex:1;padding:11px;border-radius:100px;border:none;
  background:linear-gradient(135deg,var(--burgundy-bright),var(--burgundy-deep));color:#fff;
  font-weight:800;font-size:13px;font-family:var(--font-body);
  box-shadow:0 8px 20px rgba(161,31,50,.4);transition:transform .2s var(--ease);
}
.fp-apply:hover{transform:translateY(-1px);}
@media (max-width:520px){.filter-panel{width:calc(100vw - 48px);right:auto;left:0;}}
.chip{
  flex:0 0 auto;padding:7px 14px;border-radius:100px;border:1px solid var(--line);
  background:transparent;font-size:12.5px;font-weight:600;color:var(--ink-soft);
  transition:all .2s var(--ease);font-family:var(--font-body);
}
.chip:hover{border-color:var(--gold);color:var(--ink);}
.chip.active{background:var(--gold);border-color:var(--gold);color:var(--burgundy-deep);font-weight:800;}

/* Collapsed to its icon by default; the open state is a class, not :focus,
   so a box holding a query stays open when focus moves away. */
.search-wrap{position:relative;display:flex;align-items:center;flex-shrink:0;}
.search-toggle{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1.5px solid var(--line-strong);color:var(--ink-soft);
  transition:border-color .2s var(--ease), color .2s, background .2s;
}
.search-toggle:hover{border-color:var(--gold);color:var(--gold);}
.search-wrap.open .search-toggle{
  border-color:var(--burgundy-bright);color:var(--burgundy-bright);
  border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;
}
.search-wrap input{
  width:0;padding:0;border:1.5px solid transparent;border-left:none;
  border-radius:0 12px 12px 0;background:var(--surface);
  font-size:13.5px;font-family:var(--font-body);color:var(--ink);
  height:38px;opacity:0;
  transition:width .28s var(--ease), padding .28s var(--ease), opacity .2s var(--ease);
}
.search-wrap.open input{
  width:230px;padding:0 34px 0 12px;opacity:1;
  border-color:var(--burgundy-bright);
  box-shadow:0 6px 18px rgba(161,31,50,.18);
}
.search-wrap input:focus{outline:none;}
.search-wrap input::placeholder{color:var(--ink-faint);}
.search-clear{
  position:absolute;right:9px;width:22px;height:22px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft);border:1px solid var(--line);color:var(--ink-soft);
  transition:color .2s, border-color .2s;
}
.search-clear:hover{color:var(--gold);border-color:var(--gold);}
.search-clear[hidden]{display:none;}
@media (max-width:560px){ .search-wrap.open input{width:150px;} }

/* ---------- category sections ---------- */
/* ================================================================
   Category tabs -> brand strip -> product board
   Replaces the old stacked category sections and per-brand banner blocks.
   ================================================================ */
/* Two attempts got this wrong in opposite directions: scrolling silently cut
   off the last tab, wrapping showed everything but grew the pinned bar to
   three rows and buried the page.

   A rail does both jobs. One line that scrolls, with an arrow at each end
   that appears only when there is something past the edge -- so nothing is
   ever hidden without saying so, and the bar stays one line tall. The tools
   sit beside the tabs on the same line rather than on a row of their own. */
.fb-main{display:flex;align-items:center;gap:16px;min-width:0;}
.rail{display:flex;align-items:center;gap:4px;min-width:0;flex:1 1 auto;position:relative;}
.rail-arrow{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  background:var(--surface);border:1.5px solid var(--line-strong);color:var(--ink);
  transition:border-color .2s, color .2s, opacity .2s;
}
.rail-arrow:hover{border-color:var(--gold);color:var(--gold);}
.rail.scrollable .rail-arrow{display:flex;}
.rail-arrow[disabled]{opacity:.28;cursor:default;}
.rail-arrow[disabled]:hover{border-color:var(--line-strong);color:var(--ink);}
.rail-track{
  display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;
  overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:4px 2px;
}
/* Fade the edge rather than slicing a chip through the middle of a word.
   The mask is only applied on the side that still has content past it, so a
   rail scrolled to its end does not look faded for no reason. */
.rail.scrollable .rail-track{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
}
.rail.at-start .rail-track{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%);
}
.rail.at-end .rail-track{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px);
  mask-image:linear-gradient(90deg,transparent 0,#000 18px);
}
.rail.at-start.at-end .rail-track{-webkit-mask-image:none;mask-image:none;}
.rail-track::-webkit-scrollbar{display:none;}
.cat-tabs{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;}
.brand-rail{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);}
@media (max-width:900px){
  .fb-main{flex-wrap:wrap;gap:8px;}
  .rail{flex:1 1 100%;}
  .fb-tools{flex:1 1 100%;}
}
/* Contrast in dark mode.
   These sat on a transparent background with a 14%-opacity border and
   --ink-soft text, so the whole row read as disabled. They now have a lifted
   surface, a stronger border and near-white text, and each tab carries a dot
   in its own category colour so the row can be scanned at a glance. */
.cat-tab{
  display:inline-flex;align-items:center;gap:9px;flex-shrink:0;cursor:pointer;
  white-space:nowrap;
  padding:9px 16px;border-radius:100px;
  background:var(--bg-soft);border:1.5px solid var(--line-strong);
  color:var(--ink);font-family:var(--font-body);font-size:13px;font-weight:700;
  transition:border-color .2s var(--ease), color .2s, background .2s, box-shadow .2s;
}
.cat-tab .ct-ic{color:var(--cat,var(--gold));}
.cat-tab:hover{
  border-color:var(--cat,var(--gold));color:var(--ink);
  background:var(--surface);box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.cat-tab .ct-ic{display:flex;width:15px;height:15px;}
.cat-tab .ct-ic svg{width:100%;height:100%;}
.cat-tab .ct-n{
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  color:var(--ink-soft);background:rgba(255,255,255,.07);
  padding:2px 7px;border-radius:100px;
}
/* The active tab is filled with its own category colour, so the board below
   always has a visible owner. */
.cat-tab.active{
  background:var(--cat,var(--burgundy-bright));
  border-color:var(--cat,var(--burgundy-bright));
  color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.cat-tab.active .ct-n{background:rgba(0,0,0,.22);color:#fff;}

.brand-strip{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;}
.brand-rail[hidden]{display:none;}
.bs-chip{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;flex-shrink:0;
  /* Two-word brands were wrapping inside the chip -- "Boom Boom" and "Family
     Garden" became two lines and pushed the whole rail to double height. */
  white-space:nowrap;
  padding:7px 13px;border-radius:100px;
  background:var(--bg-soft);border:1.5px solid var(--line);
  color:var(--ink);font-family:var(--font-body);font-size:12.5px;font-weight:600;
  transition:border-color .2s, color .2s, background .2s;
}
.bs-chip:hover{color:var(--ink);border-color:var(--gold);background:var(--surface);}
.bs-chip .n{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--ink-soft);}
.bs-chip.active{
  border-color:var(--gold);background:var(--gold);
  color:#2B1210;font-weight:800;
  box-shadow:0 5px 16px rgba(227,162,59,.3);
}
.bs-chip.active .n{color:rgba(43,18,16,.62);}

/* ---------- the board ----------
   CSS columns rather than grid: cards keep their natural height, so rows do
   not lock to the tallest card and the layout closes up the way a pinboard
   does. break-inside stops a card being split across a column. */
/* A grid, not CSS columns.
   Columns let every card keep its own height, which is what made the board
   look ragged: a two-line product name sat beside a four-line one and nothing
   aligned. Grid rows stretch to a common height and the cards fill it, so
   every tile in a row is identical. */
.board{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:18px;
  align-items:stretch;
  padding:34px 0 20px;
}
.board .card{height:100%;}
.board-sentinel{grid-column:1/-1;height:1px;}
@media (max-width:820px){ .board{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px;} }
@media (max-width:440px){ .board{grid-template-columns:repeat(2,1fr);gap:10px;} }

/* ---------- product card ---------- */
.card{
  background:var(--card);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--card-line);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  opacity:0;transform:translateY(22px);
  display:flex;flex-direction:column;
  cursor:pointer;
}
.card.in{opacity:1;transform:translateY(0);}
.card.hide{display:none;}
.card:hover{transform:translateY(-7px);box-shadow:var(--glow);}
/* Flat white, edge to edge.
   Most ERP product shots are JPEG/WEBP on a white background, which cannot be
   made transparent in the browser. Matching the plate to that white is what
   makes them sit together: the photo's own background becomes invisible
   because it is the same colour as the tile, and genuine transparent PNGs
   look identical on it. A gradient or a tinted plate would have made every
   white-background photo show as a visible square. */
.card .imgwrap{
  position:relative;aspect-ratio:1/1;
  background:#fff;
  display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden;
  border-bottom:1px solid var(--card-line);
}
/* No drop-shadow: on a white plate it draws a halo around the photo's own
   white background rather than around the product. */
.card .imgwrap img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease);pointer-events:none;}
.card:hover .imgwrap img{transform:scale(1.08) rotate(-1.5deg);}
.card .catdot{position:absolute;top:14px;left:14px;width:9px;height:9px;border-radius:50%;background:var(--cat,var(--burgundy-bright));box-shadow:0 0 0 3px rgba(255,255,255,.7);z-index:2;pointer-events:none;}
/* Both sit on the product photo, which is any colour the packaging happens to
   be, so a bare glyph disappeared against light artwork. A small opaque disc
   gives them a consistent surface whatever is behind. */
.card .addbtn{
  position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.94);border:1px solid rgba(43,18,16,.1);
  box-shadow:0 2px 8px rgba(43,18,16,.18);
  color:var(--burgundy-deep);
  display:flex;align-items:center;justify-content:center;
  opacity:1;transform:translateY(0) scale(1);
  transition:all .22s var(--ease);
  z-index:5;pointer-events:auto;cursor:pointer;
}
.card .addbtn:hover{color:#fff;background:var(--burgundy-bright);border-color:var(--burgundy-bright);transform:scale(1.12);}
.card .addbtn:active{transform:scale(.92);}
.card .addbtn.added{background:var(--gold);border-color:var(--gold);color:#2B1210;}
.card .addbtn.added:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff;}
.card .addbtn svg{width:17px;height:17px;pointer-events:none;}
.card .favbtn{
  position:absolute;top:10px;right:46px;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.94);border:1px solid rgba(43,18,16,.1);
  box-shadow:0 2px 8px rgba(43,18,16,.18);
  color:var(--burgundy-deep);
  display:flex;align-items:center;justify-content:center;
  transition:all .22s var(--ease);
  z-index:5;pointer-events:auto;cursor:pointer;
}
.card .favbtn:hover{color:var(--burgundy-bright);transform:scale(1.12);}
.card .favbtn:active{transform:scale(.9);}
.card .favbtn svg{width:16px;height:16px;pointer-events:none;transition:all .2s var(--ease);}
.card .favbtn.faved{color:var(--burgundy-bright);}
.card .favbtn.faved svg{fill:var(--burgundy-bright);}
.card .body{padding:16px 17px 18px;display:flex;flex-direction:column;gap:7px;flex:1;}
.card .brandline{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--cat,var(--burgundy));
}
.card .brandline .sub{color:var(--card-ink-soft);font-weight:600;text-transform:none;letter-spacing:0;font-family:var(--font-body);font-size:11px;}
/* Clamped rather than min-height: a long name used to push the price row of
   one card out of line with its neighbours. Two lines always, then ellipsis;
   the full name is in the product modal. */
.card h4{
  font-size:13.5px;line-height:1.36;font-weight:700;color:var(--card-ink);
  font-family:var(--font-body);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;height:2.72em;
}
/* Holds whichever name is NOT the heading, so its direction follows the text
   (dir="auto" in the markup) instead of being pinned to RTL -- pinned, the
   English name on an Arabic page rendered right-aligned and reversed. */
.card .ar{
  font-family:var(--font-ar);font-size:11.5px;color:var(--card-ink-soft);font-weight:600;
  text-align:start;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;height:1.6em;
}
.card .foot{margin-top:auto;padding-top:11px;border-top:1px dashed var(--card-line);display:flex;align-items:center;justify-content:space-between;gap:8px;}
.card .size{font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--card-ink-soft);background:rgba(43,18,16,.06);padding:4px 9px;border-radius:7px;}
.card .stockno{font-family:var(--font-mono);font-size:9px;font-weight:600;color:var(--card-ink-soft);opacity:.7;}
/* ---- pack-size toggle ----
   Sits under the size/SKU row because it changes both of them: picking a pack
   rewrites the SKU, the price and the availability on the card in place. Small
   and quiet -- it is a refinement of a product already chosen, not a second
   call to action competing with Add. */
.card .packrow{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:9px;padding-top:9px;border-top:1px dashed var(--card-line);
}
.card .pack-lbl{
  font-family:var(--font-mono);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--card-ink-soft);
}
.pack-opts{display:flex;gap:5px;flex-wrap:wrap;}
.pack-opt{
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  padding:4px 9px;border-radius:100px;cursor:pointer;
  background:transparent;color:var(--card-ink-soft);
  border:1.5px solid var(--card-line);
  transition:border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.pack-opt:hover{border-color:var(--burgundy);color:var(--burgundy);}
.pack-opt.active{
  background:var(--burgundy);border-color:var(--burgundy);color:#fff;
}
/* In the modal the control sits on the panel rather than on a card, so it
   takes the panel's ink instead of the card's. */
.modal-packs{margin:2px 0 14px;}
.modal-packs[hidden]{display:none;}
.modal-packs .lbl{
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);margin-bottom:7px;
}
.modal-packs .pack-opt{
  font-size:11.5px;padding:6px 13px;
  color:var(--ink-soft);border-color:var(--line-strong);
}
.modal-packs .pack-opt:hover{border-color:var(--burgundy-bright);color:var(--ink);}
.modal-packs .pack-opt.active{
  background:var(--burgundy);border-color:var(--burgundy);color:#fff;
}

.card .pricing{margin-top:9px;display:flex;flex-direction:column;gap:3px;}
.card .prow{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.card .prow .plabel{font-family:var(--font-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--card-ink-soft);}
.card .prow .pval{font-family:var(--font-mono);font-size:13.5px;font-weight:800;color:var(--burgundy-deep);}
.card .prow .pval.tbc{font-size:11px;font-weight:700;color:#a88f80;letter-spacing:.02em;}
.card .prow.after .pval{color:var(--card-ink);}
.card .prow.after .pval.tbc{color:#a88f80;font-style:normal;}

.empty-state{text-align:center;padding:90px 20px;color:var(--ink-soft);display:none;}
.empty-state.show{display:block;}
.empty-state .em{font-size:44px;margin-bottom:14px;}
.empty-state h3{font-size:22px;color:var(--ink);margin-bottom:8px;}
.empty-state button{margin-top:18px;}

/* ---------- quote drawer & fab ---------- */
.quote-fab{
  position:fixed;bottom:26px;right:26px;z-index:600;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--burgundy-bright),var(--burgundy-deep));color:#fff;border:none;border-radius:100px;
  padding:15px 22px 15px 18px;font-weight:700;font-size:14px;font-family:var(--font-body);
  box-shadow:0 14px 34px rgba(161,31,50,.5);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.quote-fab:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 18px 40px rgba(161,31,50,.6);}
.quote-fab svg{width:19px;height:19px;}
.quote-fab .badge{
  background:var(--gold);color:var(--burgundy-deep);border-radius:100px;
  min-width:22px;height:22px;padding:0 6px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:12px;font-weight:800;
}
.backtotop{
  position:fixed;bottom:26px;left:26px;z-index:600;
  width:46px;height:46px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line);
  color:var(--ink);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);opacity:0;pointer-events:none;transform:translateY(10px);
  transition:all .3s var(--ease);
}
.backtotop.show{opacity:1;pointer-events:auto;}
.backtotop:hover{background:var(--burgundy);color:#fff;transform:translateY(-3px);}

.scrim-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);z-index:700;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);}
.scrim-overlay.show{opacity:1;pointer-events:auto;}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--bg-soft);
  z-index:800;box-shadow:-20px 0 60px rgba(0,0,0,.5);
  transform:translateX(100%);transition:transform .45s var(--ease);
  display:flex;flex-direction:column;border-left:1px solid var(--line);
}
.drawer.show{transform:translateX(0);}
.drawer-head{padding:24px 24px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;}
.drawer-head h3{font-size:21px;color:var(--ink);}
.drawer-head p{font-size:12.5px;color:var(--ink-faint);margin-top:4px;font-weight:600;}
.drawer-close{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0;}
.drawer-close:hover{background:var(--burgundy);color:#fff;border-color:var(--burgundy);}
.drawer-list{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:10px;}
.drawer-empty{text-align:center;padding:60px 20px;color:var(--ink-faint);}
.drawer-empty .em{font-size:38px;margin-bottom:10px;}
.drawer-item{display:flex;gap:12px;background:var(--card);border-radius:8px;padding:10px;border:1px solid var(--card-line);align-items:center;animation:slideIn .35s var(--ease);}
@keyframes slideIn{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:translateX(0);}}
.drawer-item img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:10px;padding:6px;flex-shrink:0;}
.drawer-item .di-body{flex:1;min-width:0;}
.drawer-item .di-brand{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;color:var(--burgundy);font-weight:700;letter-spacing:.05em;}
.drawer-item .di-name{font-size:13px;font-weight:700;color:var(--card-ink);line-height:1.3;margin-top:2px;}
.drawer-item .di-size{font-size:11px;color:var(--card-ink-soft);margin-top:3px;font-weight:600;}
.drawer-item .di-size em{font-style:normal;color:var(--burgundy-deep);font-weight:700;}
.drawer-item .di-remove{width:28px;height:28px;border-radius:50%;border:none;background:rgba(43,18,16,.08);color:var(--burgundy-deep);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;}
.drawer-item .di-remove:hover{background:var(--burgundy);color:#fff;}
.drawer-foot{padding:16px 24px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;}
.drawer-foot .row{display:flex;gap:10px;}
.drawer-foot button{flex:1;padding:13px;border-radius:100px;font-weight:700;font-size:13px;border:none;font-family:var(--font-body);transition:transform .2s,opacity .2s;}
.drawer-foot .clear{background:transparent;border:1.5px solid var(--line);color:var(--ink-soft);}
.drawer-foot .clear:hover{border-color:var(--burgundy-bright);color:var(--ink);}
.drawer-foot .copy{background:var(--surface);border:1.5px solid var(--line);color:var(--ink);}
.drawer-foot .copy:hover{border-color:var(--gold);color:var(--gold);}
.drawer-foot .send-order{
  width:100%;padding:14px;background:linear-gradient(135deg,var(--burgundy-bright),var(--burgundy-deep));
  color:#fff;font-size:14px;box-shadow:0 10px 26px rgba(161,31,50,.4);display:flex;align-items:center;justify-content:center;gap:8px;
}
.drawer-foot .send-order:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(161,31,50,.5);}
.drawer-foot .send-order:disabled{opacity:.45;pointer-events:none;transform:none;}
.drawer-foot .note{font-size:10.5px;color:var(--ink-faint);text-align:center;font-weight:600;}

.drawer-checkout{padding:4px 18px 6px;display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--line);}
.drawer-checkout .dc-title{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);font-weight:700;margin:10px 0 2px;}
.drawer-checkout .dc-row{display:flex;gap:8px;}
.drawer-payment{padding:4px 18px 6px;display:flex;flex-direction:column;gap:6px;border-top:1px dashed var(--line);}
.drawer-payment .dc-title{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);font-weight:700;margin:10px 0 2px;}
.drawer-payment .dp-option{
  display:flex;align-items:center;gap:9px;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;
  font-size:.86rem;transition:border-color .15s var(--ease);
}
.drawer-payment .dp-option:has(input:checked){border-color:var(--burgundy-bright);}
.drawer-payment .dp-option input{accent-color:var(--burgundy-bright);width:15px;height:15px;flex:none;}
.drawer-checkout input,.drawer-checkout textarea{
  flex:1;width:100%;padding:11px 13px;border-radius:11px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font-family:var(--font-body);font-size:13px;
  transition:border-color .2s;resize:vertical;min-height:40px;
}
.drawer-checkout input::placeholder,.drawer-checkout textarea::placeholder{color:var(--ink-faint);}
.drawer-checkout input:focus,.drawer-checkout textarea:focus{outline:none;border-color:var(--burgundy-bright);}
.drawer-checkout input.invalid{border-color:#d94f4f;animation:shake .3s;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
.order-toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);z-index:900;
  background:var(--card);color:var(--card-ink);padding:14px 22px;border-radius:100px;font-weight:700;font-size:13.5px;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:all .35s var(--ease);display:flex;align-items:center;gap:9px;
}
.order-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- footer ---------- */
.footer{margin-top:100px;background:#080405;color:var(--ink);padding:64px 0 28px;position:relative;overflow:hidden;border-top:1px solid var(--line);}
.footer::before{content:'';position:absolute;top:-140px;right:-140px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(227,162,59,.14),transparent 70%);}
.footer .container{position:relative;z-index:1;}
.footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line);}
.footer-brand .brand-mark .txt b{color:var(--ink);}
.footer-brand .brand-mark .txt span{color:var(--gold);}
.footer-brand p{margin-top:16px;max-width:340px;font-size:13.5px;line-height:1.7;color:var(--ink-faint);font-weight:500;}
.footer-links{display:flex;gap:64px;flex-wrap:wrap;}
.footer-col h5{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:16px;font-weight:700;}
.footer-col a{display:block;color:var(--ink-soft);text-decoration:none;font-size:13.5px;margin-bottom:11px;font-weight:600;transition:color .2s;}
.footer-col a:hover{color:#fff;}
/* One item left in the bar now that the pricing pill is gone; centre it
   rather than leaving it stranded against the left edge. */
.footer-bottom{display:flex;justify-content:center;text-align:center;align-items:center;padding-top:24px;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--ink-faint);font-weight:600;}

/* ---------- animations ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
.hero-inner > *{animation:fadeUp .9s var(--ease) both;}
.hero-inner > *:nth-child(1){animation-delay:.02s;}
.hero-inner > *:nth-child(2){animation-delay:.10s;}
.hero-inner > *:nth-child(3){animation-delay:.18s;}
.hero-inner > *:nth-child(4){animation-delay:.26s;}
.hero-inner > *:nth-child(5){animation-delay:.34s;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero{padding-top:44px;}
  .shelf-item{width:76px;height:96px;}
  .search-wrap{margin-left:0;order:3;width:100%;}
  .search-wrap input{width:100%;}
  .search-wrap input:focus{width:100%;}}
@media (max-width:600px){
  .container{padding:0 18px;}
  .card h4{font-size:12.5px;}
  .card .body{padding:12px 13px 14px;}
  .footer-links{gap:32px;}
  .quote-fab span.lbl{display:none;}
  .quote-fab{padding:15px;}}
@media print{
  body *{visibility:hidden;}
  .drawer, .drawer *{visibility:visible;}
  .drawer{position:absolute;top:0;left:0;transform:none;box-shadow:none;width:100%;background:#fff;}
  .drawer-close,.drawer-foot button{display:none;}}/* ---------- stock pill (product modal) ---------- */
.stock-pill{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;font-weight:700;
  padding:6px 12px;border-radius:100px;text-transform:uppercase;letter-spacing:.04em;
}
.stock-pill.in{background:rgba(120,170,110,.15);color:#8fbf82;border:1px solid rgba(120,170,110,.3);}
.stock-pill.out{background:rgba(201,41,63,.12);color:#e0697a;border:1px solid rgba(201,41,63,.3);}
.stock-pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

/* ---------- badges (new / bestseller) ---------- */
.badge-tag{
  position:absolute;top:14px;left:14px;z-index:4;
  font-family:var(--font-mono);font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:100px;color:#fff;
}
.badge-tag.new{background:linear-gradient(120deg,var(--gold),var(--gold-deep));color:var(--burgundy-deep);}
.badge-tag.best{background:linear-gradient(120deg,var(--burgundy-bright),var(--burgundy-deep));}
.card .catdot{display:none;} /* superseded by badge-tag system, kept for legacy targeting */

/* ---------- recently viewed: compact strip (New Arrivals / Best Sellers now live as filter toggles) ---------- */
.recent-section{padding:22px 0 6px;}
.recent-head{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
}
.recent-head svg{color:var(--gold);flex-shrink:0;}
.recent-strip{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;}
.recent-strip::-webkit-scrollbar{display:none;}
.recent-chip{flex:0 0 auto;width:82px;cursor:pointer;background:none;border:none;text-align:center;padding:0;font-family:var(--font-body);}
.recent-chip .thumb{
  width:82px;height:82px;border-radius:8px;background:rgba(245,236,220,.24);
  display:flex;align-items:center;justify-content:center;padding:10px;
  border:1px solid rgba(245,236,220,.14);transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.recent-chip:hover .thumb{transform:translateY(-4px);box-shadow:var(--glow);}
.recent-chip img{width:100%;height:100%;object-fit:contain;}
.recent-chip span{
  display:block;margin-top:6px;font-size:10px;font-weight:600;color:var(--ink-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- product modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:850;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);display:flex;align-items:center;justify-content:center;padding:24px;
}
.modal-overlay.show{opacity:1;pointer-events:auto;}
.modal{
  position:relative;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:24px;max-width:920px;width:100%;
  height:88vh;max-height:88vh;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  transform:scale(.94) translateY(16px);transition:transform .4s var(--ease);box-shadow:var(--shadow-lg);
}
@media (max-width:720px){
  .modal{grid-template-columns:1fr;height:92vh;max-height:92vh;grid-template-rows:auto 1fr;}
  .modal-gallery{max-height:38vh;}}
.modal-overlay.show .modal{transform:scale(1) translateY(0);}
.modal-gallery{background:var(--card);padding:32px;display:flex;flex-direction:column;gap:16px;position:relative;overflow-y:auto;min-height:0;}
.modal-close{
  position:absolute;top:16px;right:16px;z-index:6;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.9);border:1px solid var(--card-line);color:var(--card-ink);
  display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{background:var(--burgundy);color:#fff;}
.modal-main-img{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;
  background:radial-gradient(circle at 50% 40%, #fff 0%, var(--card) 130%);border-radius:16px;
}
.modal-main-img img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 16px 24px rgba(43,18,16,.18));transition:transform .4s var(--ease);}
.modal-main-img:hover img{transform:scale(1.12);}
.modal-thumbs{display:flex;gap:10px;}
.modal-thumbs button{
  width:56px;height:56px;border-radius:10px;border:2px solid transparent;background:#fff;padding:6px;
  display:flex;align-items:center;justify-content:center;
}
.modal-thumbs button.active{border-color:var(--burgundy-bright);}
.modal-thumbs img{width:100%;height:100%;object-fit:contain;}
.modal-body{padding:34px 32px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;min-height:0;scrollbar-width:thin;scrollbar-color:var(--burgundy-bright) transparent;}
.modal-body::-webkit-scrollbar{width:8px;}
.modal-body::-webkit-scrollbar-track{background:transparent;}
.modal-body::-webkit-scrollbar-thumb{background:var(--burgundy-bright);border-radius:8px;}
.modal-body::-webkit-scrollbar-thumb:hover{background:var(--gold);}
.modal-gallery::-webkit-scrollbar{width:8px;}
.modal-gallery::-webkit-scrollbar-track{background:transparent;}
.modal-gallery::-webkit-scrollbar-thumb{background:var(--card-line);border-radius:8px;}
.modal-tags{display:flex;gap:8px;flex-wrap:wrap;}
.modal-tags span{
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:5px 11px;border-radius:100px;background:var(--surface);border:1px solid var(--line);color:var(--gold);
}
.modal-body h2{font-size:26px;color:var(--ink);line-height:1.2;}
.modal-body .ar{font-family:var(--font-ar);direction:rtl;text-align:left;font-size:15px;color:var(--ink-soft);font-weight:700;}
.modal-desc{font-size:14px;line-height:1.7;color:var(--ink-soft);font-weight:500;}
.modal-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px;}
.modal-meta .mm{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;}
.modal-meta .mm .lbl{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);font-weight:700;}
.modal-meta .mm .val{margin-top:4px;font-size:14px;font-weight:700;color:var(--ink);}
.modal-price{display:flex;gap:20px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:8px;margin-top:4px;}
.modal-price .mp{flex:1;}
.modal-price .mp .lbl{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;color:var(--ink-faint);font-weight:700;letter-spacing:.05em;}
.modal-price .mp .val{font-family:var(--font-mono);font-size:20px;font-weight:800;color:var(--gold);margin-top:4px;}
.modal-price .mp .val.tbc{color:var(--ink-faint);font-size:15px;}
.modal-actions{display:flex;gap:12px;margin-top:auto;padding-top:6px;}
.modal-actions button{flex:1;}
@media (max-width:760px){
  .modal{grid-template-columns:1fr;max-height:92vh;}
  .modal-gallery{padding:22px;}}

/* ---------- shelf refinements ---------- */
.shelf{cursor:default;}
.shelf-item{position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.shelf-item:hover{transform:translateY(-6px) scale(1.04);box-shadow:var(--glow);z-index:3;}
.shelf-item:hover .si-brand{color:var(--burgundy-deep);}
.shelf-item::after{
  content:'';position:absolute;left:6px;right:6px;bottom:-7px;height:7px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.35),transparent 75%);opacity:0;transition:opacity .3s;
}
.shelf-item:hover::after{opacity:1;}

/* ---------- search enhancement hint ---------- */


/* =====================================================================
   REDESIGN ADDITIONS - brand chips w/ logos, category grid, mobile nav,
   landing page, scroll cues, drag marquee, drawer summary, FBT, i18n/RTL
   ===================================================================== */

/* ---------- language toggle button ---------- */
/* The word, not just a globe. A globe alone says "language" but not which one
   you would be switching to; the label carries the target language written in
   itself, so it is legible to whoever needs it without reading the other. */
#langToggleBtn{width:auto;padding:0 13px;gap:7px;border-radius:100px;}
.lang-btn-txt{
  font-family:var(--font-body);font-size:12px;font-weight:700;
  white-space:nowrap;line-height:1;
}
body.lang-ar .lang-btn-txt{font-family:var(--font-body);}
.mnp-lang-btn{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:transparent;border:none;color:var(--gold);font-weight:700;font-size:15px;
  padding:14px 4px;font-family:var(--font-body);cursor:pointer;
}

/* ---------- mobile hamburger + panel ---------- */
.mobile-menu-btn{display:none;}
.mobile-nav-panel{
  position:fixed;top:0;left:0;right:0;background:var(--bg-soft);
  border-bottom:1px solid var(--line);z-index:490;
  transform:translateY(-100%);transition:transform .4s var(--ease);
  padding:calc(var(--nav-h) + 8px) 24px 20px;box-shadow:0 20px 40px rgba(0,0,0,.4);
}
.mobile-nav-panel.show{transform:translateY(0);}
.mobile-nav-panel a{
  display:block;padding:13px 4px;color:var(--ink-soft);text-decoration:none;
  font-weight:600;font-size:15px;border-bottom:1px solid var(--line-soft);
}
.mobile-nav-panel a:last-child{border-bottom:none;}
.mnp-cats{display:flex;flex-direction:column;}
.mnp-cat{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:none;border:none;border-bottom:1px solid var(--line);
  padding:13px 4px;color:var(--ink-soft);
  font-family:var(--font-body);font-size:14px;font-weight:700;transition:color .2s;
}
.mnp-cat:hover{color:var(--gold);}
body.lang-ar .mnp-cat{text-align:right;}
.footer-cats{display:flex;flex-direction:column;align-items:flex-start;}
.footer-cats .mnp-cat{border-bottom:none;padding:0 0 11px;font-size:13.5px;font-weight:600;}
.mobile-nav-panel a:hover{color:var(--gold);}
@media (max-width:900px){
  .mobile-menu-btn{display:flex;}}

/* ---------- brand chips w/ logo ---------- */
.chip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  padding:6px 16px 6px 6px;border-radius:100px;border:1px solid var(--line);
  background:var(--surface);font-size:13px;font-weight:600;color:var(--ink-soft) !important;
  transition:all .25s var(--ease);font-family:var(--font-body);min-height:44px;
}
.chip .chip-logo{
  width:32px;height:32px;border-radius:50%;background:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.chip .chip-logo img{width:100%;height:100%;object-fit:contain;padding:5px;}
.chip .chip-logo.all-logo{background:var(--surface);color:var(--gold);border:1.5px solid var(--line);box-shadow:none;}
.chip:hover{border-color:var(--gold);color:var(--ink) !important;transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.chip.active{background:linear-gradient(135deg,var(--burgundy-bright),var(--burgundy-deep));border-color:var(--burgundy-bright);color:#fff !important;font-weight:800;box-shadow:0 8px 20px rgba(161,31,50,.4);}

/* ---------- filter bar compact-on-scroll ---------- */
.filterbar{transition:padding .3s var(--ease);}
/* Once pinned, the bar has to give the page back its screen.
   Tabs + brand strip + result row stacked to roughly a third of a laptop
   viewport and stayed there for the whole scroll. Pinned, it collapses to a
   single row: the tabs, the search box and the filter button. The brand strip
   and the count fold away and come back the moment the bar unpins. */
.filterbar.compact{padding:6px 0;}
.filterbar.compact .search-wrap{flex-shrink:0;}
.brand-strip,
.fb-row{transition:max-height .3s var(--ease), opacity .25s var(--ease), margin .3s var(--ease), padding .3s var(--ease);}
/* Pinned, both rails stay -- they are the navigation -- and simply tighten.
   Categories on one line, brands on one line: about 90px, against the ~285px
   the wrapped three-row version took. */
.filterbar.compact .rail-track{padding:2px;}
.filterbar.compact .cat-tab{padding:6px 12px;font-size:12px;gap:7px;}
.filterbar.compact .cat-tab .ct-ic{display:none;}
.filterbar.compact .brand-rail{margin-top:5px;padding-top:5px;}
.filterbar.compact .bs-chip{padding:5px 11px;font-size:11.5px;}

/* ---------- scroll cue (shared: hero + landing) ---------- */
.scroll-cue{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:none;color:var(--ink-soft);cursor:pointer;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  animation:scrollCueBounce 2.4s ease-in-out infinite;transition:color .3s;
}
.scroll-cue:hover{color:var(--gold);}
.scroll-cue svg{width:22px;height:22px;opacity:.85;}
.scroll-cue span{padding-left:.24em;} /* optically compensates tracking so text sits dead-centre */
@keyframes scrollCueBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(9px);}}
.hero-scroll-cue{margin:52px auto 0;}

/* ---------- shelf: JS-driven drag/auto-scroll marquee ---------- */
/* overflow:hidden, not auto.
   `overflow-x:auto` makes the other axis compute to `auto` as well, which
   turned this into a vertical scroll container that ate the wheel -- hovering
   the shelf stopped the page scrolling. There is nothing to scroll here now;
   JS translates the row instead.
   touch-action keeps vertical swipes with the page while leaving the
   horizontal axis to the drag handler. */
.shelf-row-wrap{overflow:hidden;cursor:grab;touch-action:pan-y;}
.shelf-row-wrap:active{cursor:grabbing;}
.shelf-row-wrap + .shelf-row-wrap{margin-top:16px;}
.shelf-row{display:flex;gap:16px;width:max-content;will-change:transform;}
.shelf-item img{pointer-events:none;}
.si-brand{pointer-events:none;}

/* ---------- drawer: redesigned item + summary ---------- */
.drawer-item{align-items:stretch;}
.drawer-item .di-body{display:flex;flex-direction:column;justify-content:center;}
.drawer-item .di-price-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px;}
.drawer-item .di-price-badge{
  font-family:var(--font-mono);font-weight:800;font-size:13px;color:#fff;
  background:linear-gradient(135deg,var(--burgundy-bright),var(--burgundy-deep));
  padding:4px 10px;border-radius:100px;white-space:nowrap;box-shadow:0 3px 10px rgba(161,31,50,.35);
}
.drawer-item .di-price-badge.tbc{background:var(--surface);color:var(--card-ink-soft);box-shadow:none;border:1px solid var(--card-line);}
.drawer-summary{
  margin:2px 18px 4px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);
  border-radius:8px;display:flex;flex-direction:column;gap:6px;
}
.drawer-summary .ds-row{display:flex;align-items:baseline;justify-content:space-between;font-size:12.5px;color:var(--ink-soft);font-weight:600;}
.drawer-summary .ds-row b{font-family:var(--font-mono);font-size:16px;font-weight:800;color:var(--gold);}
.drawer-summary .ds-row.total{padding-top:6px;border-top:1px dashed var(--line);}
.drawer-summary .ds-row.total b{color:#fff;font-size:18px;}
/* The total was hardcoded white, which on the light theme's white drawer meant
   the one number the employee is checking before they send an order was
   invisible. It follows the theme's ink like every other figure now. */
body.theme-light .drawer-summary .ds-row.total b{color:var(--card-ink);}
.drawer-summary:empty{display:none;}

/* ---------- frequently bought together (modal) ---------- */
.modal-fbt{border-top:1px dashed var(--line);padding-top:16px;margin-top:6px;}
.modal-fbt:empty{display:none;padding:0;margin:0;border:none;}
.fbt-head{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:7px;}
.fbt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.fbt-item{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:8px;text-align:center;cursor:pointer;transition:all .2s var(--ease);}
.fbt-item:hover{border-color:var(--gold);transform:translateY(-2px);}
.fbt-item.added{border-color:var(--gold);background:rgba(227,162,59,.1);}
.fbt-item .fbt-imgwrap{position:relative;background:#fff;border-radius:8px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:6px;}
.fbt-item img{width:100%;height:100%;object-fit:contain;}
.fbt-item .fbt-check{
  position:absolute;top:4px;right:4px;width:19px;height:19px;border-radius:50%;background:#fff;
  border:1.5px solid var(--card-line);display:flex;align-items:center;justify-content:center;color:var(--gold-deep);
}
.fbt-item.added .fbt-check{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep);}
.fbt-item .fbt-check svg{width:11px;height:11px;}
.fbt-item .fn{font-size:10.5px;font-weight:700;margin-top:7px;color:var(--ink);line-height:1.3;min-height:2.4em;}
.fbt-item .fp{font-family:var(--font-mono);font-size:10px;color:var(--gold);margin-top:3px;font-weight:700;}
.fbt-addall{
  width:100%;margin-top:11px;padding:11px;border-radius:100px;border:1.5px solid var(--line);
  background:transparent;color:var(--ink);font-weight:700;font-size:12.5px;transition:all .2s var(--ease);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.fbt-addall:hover{border-color:var(--gold);color:var(--gold);}

/* ---------- RTL / Arabic mode ---------- */
body.lang-ar [data-i18n]{font-family:var(--font-ar);}
body.lang-ar p[data-i18n],
body.lang-ar h1 [data-i18n],
body.lang-ar h2[data-i18n],
body.lang-ar h3[data-i18n],
body.lang-ar span.notice-txt,
body.lang-ar .hero-sub{
  direction:rtl;text-align:right;
}
body.lang-ar .search-wrap input{direction:rtl;text-align:right;}
body.lang-ar .search-wrap.open input{padding:0 12px 0 34px;}
body.lang-ar .search-clear{right:auto;left:9px;}
[dir="rtl"].rtl-aware{font-family:var(--font-ar);text-align:right;}
.category-head p[dir="rtl"], .brand-head .tag[dir="rtl"], .modal-desc[dir="rtl"], .fbt-head[dir="rtl"]{
  font-family:var(--font-ar);text-align:right;direction:rtl;
}
body.lang-ar .drawer-checkout input, body.lang-ar .drawer-checkout textarea{direction:rtl;text-align:right;font-family:var(--font-ar);}
body.lang-ar .btn, body.lang-ar .pill, body.lang-ar .chip{font-family:var(--font-ar);}

/* =====================================================================
   BRAND RAIL - sticky brand navigator beside the catalogue
   ===================================================================== */
.catalog-shell{display:block;}
.catalog-shell #catalog{min-width:0;}
@media (max-width:1080px){
  .catalog-shell{display:block;}}

/* =====================================================================
   HERO BRAND STAGE - scroll-driven brand showcase on a burgundy disc
   ===================================================================== */
.hero-stage{position:relative;}
.brand-stage{position:absolute;top:0;right:0;width:54%;height:100%;z-index:1;pointer-events:none;}
.bs-circle{
  position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);
  width:min(560px,40vw);aspect-ratio:1/1;border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%, #5C1220, #3D0B15 52%, #26060D 100%);
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.55),
    inset -18px -24px 60px rgba(0,0,0,.4),
    0 40px 90px rgba(0,0,0,.5);
}
.bs-circle .bs-ring{
  position:absolute;inset:-30px;border-radius:50%;
  border:1.5px dashed rgba(227,162,59,.32);
  animation:bsRingSpin 80s linear infinite;
}
.bs-circle .bs-ring::before{
  content:'';position:absolute;top:9%;left:13%;width:10px;height:10px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 16px rgba(227,162,59,.85);
}
.bs-circle::after{content:'';position:absolute;inset:26px;border-radius:50%;border:1px solid rgba(246,236,224,.07);}
@keyframes bsRingSpin{to{transform:rotate(360deg);}}

.bs-ghost{
  display:none;
  position:absolute;top:50%;left:55%;transform:translate(-50%,-58%);
  font-family:var(--font-display);font-weight:900;letter-spacing:.02em;
  font-size:clamp(54px,6.4vw,104px);color:transparent;white-space:nowrap;
  -webkit-text-stroke:1.5px rgba(246,236,224,.14);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.bs-hero{
  position:absolute;top:50%;left:55%;transform:translate(-50%,-54%);
  width:min(330px,24vw);aspect-ratio:1/1;pointer-events:auto;cursor:pointer;
  transition:opacity .38s var(--ease), transform .5s var(--ease);
}
.bs-hero img{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 34px 40px rgba(0,0,0,.6));
  animation:bsHeroBob 7s ease-in-out infinite;
}
@keyframes bsHeroBob{0%,100%{transform:translateY(0) rotate(-1.2deg);}50%{transform:translateY(-13px) rotate(1.2deg);}}
.bs-hero:hover img{filter:drop-shadow(0 34px 44px rgba(0,0,0,.65)) drop-shadow(0 0 26px rgba(227,162,59,.35));}

.bs-label{
  position:absolute;left:55%;top:calc(50% + min(280px,20vw) + 8px);transform:translateX(-50%);
  display:flex;align-items:center;gap:11px;white-space:nowrap;pointer-events:auto;
  background:rgba(13,7,8,.78);border:1px solid rgba(227,162,59,.35);border-radius:100px;
  padding:9px 18px;backdrop-filter:blur(10px);
  transition:opacity .38s var(--ease), transform .5s var(--ease);
}
.bs-label b{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--ink);}
.bs-label .ar{font-family:var(--font-ar);font-size:13px;font-weight:700;color:var(--ink-soft);}
.bs-label .n{
  font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--gold);
  background:rgba(227,162,59,.12);border:1px solid rgba(227,162,59,.3);
  padding:2px 9px;border-radius:100px;
}

.bs-sat{
  position:absolute;pointer-events:none;opacity:.55;
  transition:opacity .5s var(--ease);
}
.bs-sat img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.5));animation:bsHeroBob 8s ease-in-out infinite;}
.bs-sat.s1{top:12%;left:20%;width:84px;height:84px;}
.bs-sat.s1 img{animation-delay:-2.4s;}
.bs-sat.s2{top:22%;right:4%;width:72px;height:72px;}
.bs-sat.s2 img{animation-delay:-4.8s;}
.bs-sat.s3{bottom:16%;left:26%;width:66px;height:66px;}
.bs-sat.s3 img{animation-delay:-1.2s;}

.bs-dots{
  position:absolute;right:26px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:12px;pointer-events:auto;
}
.bs-dots button{
  width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(246,236,224,.35);
  background:transparent;padding:0;transition:all .3s var(--ease);
}
.bs-dots button:hover{border-color:var(--gold);transform:scale(1.25);}
.bs-dots button.active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(227,162,59,.7);transform:scale(1.2);}

/* leaving / entering states (direction-aware) */
.bs-anim.out-up{opacity:0;transform:translate(-50%,-54%) translateY(-34px) scale(.92);transition-duration:.24s;}
.bs-anim.out-down{opacity:0;transform:translate(-50%,-54%) translateY(34px) scale(.92);transition-duration:.24s;}
.bs-anim.pre-up{opacity:0;transform:translate(-50%,-54%) translateY(44px) scale(.9);transition:none;}
.bs-anim.pre-down{opacity:0;transform:translate(-50%,-54%) translateY(-44px) scale(.9);transition:none;}
.bs-ghost.out-up,.bs-ghost.out-down{transform:translate(-50%,-58%) scale(.96);}
.bs-label.out-up{transform:translateX(-50%) translateY(-18px);}
.bs-label.out-down{transform:translateX(-50%) translateY(18px);}
.bs-label.pre-up{transform:translateX(-50%) translateY(22px);}
.bs-label.pre-down{transform:translateX(-50%) translateY(-22px);}
.bs-label.out-up,.bs-label.out-down{opacity:0;transition-duration:.24s;}
.bs-label.pre-up,.bs-label.pre-down{opacity:0;transition:none;}
.bs-ghost.pre-up,.bs-ghost.pre-down{opacity:0;transition:none;transform:translate(-50%,-58%) scale(.96);}

@media (min-width:901px){
  .hero-stage{min-height:600px;}}
@media (max-width:900px){
  .brand-stage{display:none;}}

/* =====================================================================
   LIGHT THEME
   ===================================================================== */
body.theme-light{
  --bg:#FBF6EE;
  --bg-soft:#F5ECDC;
  --surface:#FFFFFF;
  --card:#FFFFFF;
  --card-line:#E7D6BC;
  --card-ink:#2B1210;
  --card-ink-soft:#70594F;
  --ink:#2B1210;
  --ink-soft:#5C4A42;
  --ink-faint:#93796D;
  --line:rgba(43,18,16,.14);
  --line-soft:rgba(43,18,16,.06);
  --line-strong:rgba(43,18,16,.24);
  --shadow-sm:0 4px 16px rgba(43,18,16,.08);
  --shadow-md:0 14px 36px rgba(43,18,16,.12);
  --shadow-lg:0 26px 60px rgba(43,18,16,.16);
  --burgundy-glow:rgba(161,31,50,.14);
}
body.theme-light .topnav{background:rgba(255,251,245,.88);}
body.theme-light .topnav.scrolled{background:rgba(255,251,245,.97);}
body.theme-light .filterbar{background:rgba(255,251,245,.95);}
body.theme-light .mobile-menu-btn:hover,
body.theme-light .icon-btn:hover{color:#fff;}
body.theme-light .footer{background:#FFFFFF;}
body.theme-light .oos-badge{background:rgba(43,18,16,.85);}
/* hero: the accent line was hardcoded white and vanished on the cream background */
body.theme-light .hero h1 .accent{color:var(--burgundy-deep);}
body.theme-light .hero{
  background:
    radial-gradient(ellipse 900px 560px at 88% -12%, rgba(161,31,50,.10), transparent 60%),
    radial-gradient(ellipse 700px 600px at -10% 110%, rgba(227,162,59,.08), transparent 60%),
    var(--bg);
}
/* moving product shelf: white cards with soft grey borders instead of translucent beige */
body.theme-light .shelf-item{
  background:#FFFFFF;border-color:#E6DCCB;
  box-shadow:0 4px 14px rgba(43,18,16,.07);
}
body.theme-light .shelf-item:hover{border-color:var(--gold);}
body.theme-light .shelf{background:linear-gradient(180deg,transparent,rgba(43,18,16,.025) 20%,rgba(43,18,16,.025) 80%,transparent);}
/* brand stage: keep the burgundy disc, fix the ghost brand name + label pill around it */
body.theme-light .bs-ghost{-webkit-text-stroke:1.5px rgba(43,18,16,.12);}
body.theme-light .bs-label{background:#FFFFFF;border-color:#E6DCCB;box-shadow:0 8px 24px rgba(43,18,16,.10);}
body.theme-light .bs-label b{color:#2B1210;}
body.theme-light .bs-label .ar{color:#70594F;}
body.theme-light .filter-panel{background:#FFFFFF;}
body.theme-light .nav-search input{background:#FFFFFF;}
body.theme-light .recent-chip .thumb{background:#FFFFFF;border-color:#E6DCCB;}

/* =========================================================================
   Employee auth gate + availability + cart quantities
   ========================================================================= */

/* While unauthenticated, nothing but the gate is visible. */
body.auth-pending > *:not(.auth-gate){ display:none !important; }
body.auth-pending{ overflow:hidden; }

.auth-gate{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:24px; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, var(--bg-soft) 0%, var(--bg) 70%);
}
body.authed .auth-gate{ display:none; }

/* ---- blurred storefront behind the gate ----
   A flat image of the product board, blurred when it was built rather than in
   the browser: the gate runs before authentication and cannot call the
   catalogue, and hardcoding ERP image URLs here would be a local copy of
   catalogue data that goes stale without telling anyone. Pre-blurring also
   costs the browser nothing at paint and compresses to ~117KB.
   Decorative only -- aria-hidden in the markup, pointer-events off here.
   Regenerate with make_backdrop.py when the product line-up changes. */
.ag-backdrop{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("assets/gate-backdrop.jpg") center/cover no-repeat;
  /* The image is already dark and already blurred, so it is shown at close to
     full strength -- dimming it further just greys the packs out. The mask is
     what keeps the card readable: it fades the backdrop away behind the
     middle of the screen and at the corners. */
  opacity:.88;
  -webkit-mask-image:radial-gradient(125% 100% at 50% 45%, #000 20%, transparent 82%);
          mask-image:radial-gradient(125% 100% at 50% 45%, #000 20%, transparent 82%);
  animation:agDrift 40s var(--ease) infinite alternate;
}
/* A slow push across the image, so the gate is not a still photograph while
   it waits. Scaled up first so the pan never exposes an edge. */
@keyframes agDrift{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to  { transform:scale(1.06) translate3d(-2.5%,-2%,0); }
}
body.theme-light .ag-backdrop{ opacity:.55; }
@media (max-width:700px){
  .ag-backdrop{ opacity:.80; }
}
/* The drift is decoration; anyone who has asked for less motion gets a still
   backdrop rather than no backdrop. */
@media (prefers-reduced-motion:reduce){
  .ag-backdrop{ animation:none; }
}


.ag-card{
  position:relative; z-index:1;
  width:100%; max-width:420px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:34px 30px 28px;
  font-family:var(--font-body);
  color:var(--ink);
}
.auth-gate[dir="rtl"] .ag-card{ font-family:var(--font-ar); text-align:right; }

/* Small mark, not a masthead: the card already says which store this is, so
   the logo is there to confirm it rather than to lead.
   Left, in line with the heading, the label, the field and the button. A
   centred logo over left-aligned everything-else gave the card two competing
   edges. */
.ag-brand{ display:flex; justify-content:flex-start; margin-bottom:16px; }
.ag-brand img{ height:34px; width:auto; }
.ag-brand .logo-light{ display:none; }
body.theme-light .ag-brand .logo-dark{ display:none; }
body.theme-light .ag-brand .logo-light{ display:block; }

.ag-card h1{
  font-family:var(--font-display);
  font-size:1.45rem; font-weight:700;
  margin:0 0 6px; letter-spacing:-.01em;
}
.ag-sub{ margin:0 0 22px; color:var(--ink-soft); font-size:.92rem; line-height:1.5; }
.ag-note{ margin:0 0 14px; color:var(--ink-soft); font-size:.85rem; line-height:1.5; }
.ag-fail{ color:var(--burgundy-bright); }

.ag-card label{
  display:block; font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-faint); margin-bottom:7px;
}
.ag-card input{
  width:100%; padding:13px 15px;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-family:inherit; font-size:.95rem;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.ag-card input:focus{
  outline:none; border-color:var(--burgundy);
  box-shadow:0 0 0 3px var(--burgundy-glow);
}
#agCode{ font-family:var(--font-mono); letter-spacing:.14em; text-transform:uppercase; }

.ag-btn{
  width:100%; margin-top:16px; padding:13px 18px;
  background:var(--burgundy); color:#fff;
  border:none; border-radius:var(--radius-sm);
  font-family:var(--font-display); font-size:.93rem; font-weight:600;
  cursor:pointer;
  transition:background .18s var(--ease), transform .12s var(--ease);
}
.ag-btn:hover:not(:disabled){ background:var(--burgundy-bright); }
.ag-btn:active:not(:disabled){ transform:translateY(1px); }
.ag-btn:disabled{ opacity:.6; cursor:default; }

.ag-divider{
  display:flex; align-items:center; gap:10px; margin:16px 0;
  color:var(--ink-faint); font-size:.78rem;
}
.ag-divider::before, .ag-divider::after{
  content:''; flex:1; height:1px; background:var(--card-line, rgba(255,255,255,.14));
}
.ag-btn-google{
  margin-top:0; background:transparent; color:var(--ink);
  border:1px solid var(--card-line, rgba(255,255,255,.22));
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.ag-google-ic{ width:18px; height:18px; flex:none; }
.ag-btn-google:hover:not(:disabled){ background:rgba(255,255,255,.06); }
body.theme-light .ag-btn-google{ border-color:var(--card-line); color:var(--card-ink); }
body.theme-light .ag-btn-google:hover:not(:disabled){ background:rgba(0,0,0,.04); }

.ag-links{ display:flex; justify-content:space-between; gap:12px; margin-top:14px; }
.ag-link{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--ink-faint); font-family:inherit; font-size:.82rem;
  text-decoration:underline; text-underline-offset:3px;
}
.ag-link:hover{ color:var(--ink); }
/* Resending retires the previous code, so the link goes dead for a moment
   after a click and counts itself back in. Losing the underline as well as
   the contrast is what makes it read as "not yet" rather than as broken. */
.ag-link:disabled{ cursor:default; }
.ag-link.is-waiting{
  color:var(--ink-faint); opacity:.55; text-decoration:none;
  font-variant-numeric:tabular-nums;
}

.ag-err{
  background:rgba(161,31,50,.14);
  border:1px solid rgba(201,41,63,.4);
  color:#F3B7BF;
  border-radius:var(--radius-sm);
  padding:11px 14px; margin-bottom:18px;
  font-size:.86rem; line-height:1.45;
}

.ag-spinner{
  width:32px; height:32px; margin:6px auto 16px;
  border:3px solid var(--line);
  border-top-color:var(--burgundy-bright);
  border-radius:50%;
  animation:agSpin .8s linear infinite;
}
@keyframes agSpin{ to{ transform:rotate(360deg); } }

body.theme-light .ag-card{ background:var(--card); color:var(--card-ink); }
body.theme-light .ag-card input{ background:#fff; color:var(--card-ink); border-color:var(--card-line); }
body.theme-light .ag-sub,
body.theme-light .ag-note{ color:var(--card-ink-soft); }

/* The signed-in chip that used to sit in the nav bar is gone: sign out moved
   into the account panel, where the address it belongs to already was. */

/* ---- availability ----
   An out-of-stock card stays readable - the employee still needs to see what
   it is and what it costs - but it is visibly dimmed and carries the reason
   across the middle of the shot, where it cannot be missed. The old rule here
   pointed at .card-media, an element the card does not have, so nothing was
   ever dimmed. */
.card.is-oos{ opacity:.78; }
.card.is-oos .imgwrap img{ filter:grayscale(.9) brightness(.5); }
.card.is-oos .imgwrap::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:rgba(13,7,8,.34);
}
.card.is-oos h4, .card.is-oos .ar{ color:var(--ink-faint); }
.oos-band{
  position:absolute; z-index:3; inset-inline:0; top:50%;
  transform:translateY(-50%); pointer-events:none;
  padding:7px 6px; text-align:center;
  font-family:var(--font-mono); font-size:10.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:#F3B7BF;
  background:rgba(13,7,8,.84);
  border-top:1px solid rgba(201,41,63,.5);
  border-bottom:1px solid rgba(201,41,63,.5);
}
.stock-left{ font-size:.74rem; color:var(--gold); font-weight:600; }
.addbtn:disabled{ opacity:.4; cursor:not-allowed; }
#modalAddBtn:disabled{ opacity:.45; cursor:not-allowed; }
#modalAddBtn:disabled:hover{ transform:none; }

/* ---- cart quantity stepper ---- */
.qty-ctl{ display:inline-flex; align-items:center; gap:2px; margin-inline-end:8px; }
.qty-btn{
  width:26px; height:26px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-soft); color:var(--ink);
  border:1px solid var(--line); border-radius:7px;
  font-size:1rem; cursor:pointer; padding:0;
  transition:border-color .15s var(--ease);
}
.qty-btn:hover:not(:disabled){ border-color:var(--burgundy); }
.qty-btn:disabled{ opacity:.35; cursor:not-allowed; }
.qty-val{
  min-width:30px; text-align:center;
  font-family:var(--font-mono); font-size:.88rem; font-weight:600;
}

/* An ERP image that fails to load falls back to the placeholder rather than
   leaving an empty frame. */
.card .imgwrap img.img-fallback{ object-fit:contain; padding:12%; opacity:.85; }

/* The order form's contact fields are gone: createorder takes SKU and quantity
   only, and the session already identifies the employee. The send button is
   lifted out of the block so the drawer keeps its layout. */
#drawerCheckout .dc-title,
#drawerCheckout .dc-row,
#drawerCheckout #custNotes{ display:none !important; }
#drawerCheckout{ padding-top:4px; }
/* =====================================================================
   MOBILE
   The desktop layout is a landscape composition: a wide hero with a long
   paragraph, then two horizontal rails for categories and brands. On a phone
   that costs two full screens before a single product appears, and it hides
   twelve brands behind a sideways scroll with nothing to say how many are off
   the edge. Below 700px the hero compresses to a heading and one button, and
   the rails are replaced by a bottom sheet.
   ===================================================================== */
.m-browse-btn{ display:none; }

/* ---- no sideways drag ----
   The list and orders drawers are fixed panels parked off the right edge
   (translateX(100%)), so they sit at x=390-749 on a phone while closed.
   Chromium contains that; iOS Safari counts it towards the document width and
   the whole page could be dragged sideways. `clip` rather than `hidden`
   because `hidden` on html/body turns the element into a scroll container,
   which breaks position:sticky on the nav and the filter bar. */
html{ overflow-x:clip; }
body{ overflow-x:clip; max-width:100%; }
@supports not (overflow:clip){
  html, body{ overflow-x:hidden; }
}

@media (max-width:700px){
  /* ---- nav: smaller marks, tighter row ---- */
  .topnav .container{ gap:10px; padding:0 14px; }
  .brand-logo{ height:24px; }
  .nav-actions{ gap:7px; }
  .icon-btn{ width:33px; height:33px; border-radius:10px; border-width:1px; }
  .icon-btn svg{ width:16px; height:16px; }
  .profile-btn{ padding:3px; border-width:1px; }
  .pf-avatar{ width:26px; height:26px; font-size:10px; }
  .quote-count{ min-width:16px; height:16px; font-size:9px; border-width:1.5px; }

  /* ---- hero: a title and one action ----
     The paragraph explained the tool to people who had already signed in to
     use it. What is left is small enough that the first row of products is on
     the opening screen, which is the whole point of the page. */
  .hero{ padding:18px 0 0; }
  .hero-sub{ display:none; }
  .hero h1{ font-size:clamp(23px,6.4vw,29px); line-height:1.18; letter-spacing:-.015em; }
  /* The underline SVG is sized off the text; at this size it sat too low. */
  .hero h1 .accent svg{ height:.17em; bottom:-.02em; }
  .hero-cta{ margin-top:18px; gap:10px; }
  .hero-cta .btn{ padding:13px 22px; font-size:13.5px; }
  /* The list is one tap away on the floating button, which is always on
     screen; a second control for it here is just height. */
  #heroQuoteBtn{ display:none; }
  .hero-scroll-cue{ display:none; }

  /* ---- no moving shelf on a phone ----
     It is a marquee: it animates, it drags horizontally, and it sits directly
     between the title and the products. On a small screen that reads as the
     page moving under your thumb rather than as decoration. Desktop keeps it
     -- this is a mobile-only rule, so nothing changes on a laptop. */
  .shelf{ display:none; }

  /* ---- filter bar: search plus one button ---- */
  .filterbar{ padding:10px 0; margin-top:22px; }
  .filterbar .rail, .filterbar .brand-rail{ display:none; }
  .fb-main{ gap:8px; }
  /* Browse gets its own full-width row above search: sharing a row with the
     search field and the filter chip squeezed it to "Categories &". */
  .fb-tools{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; width:100%; }
  .fb-filters{ flex:0 0 auto; }
  .filter-btn{ margin-left:0; padding:11px 13px; }
  .filter-btn span[data-i18n]{ display:none; }
  /* The 900px rule sets width:100% on this, which pushed it onto a row of its
     own next to a 44px filter chip. They share one row here. */
  /* Search is always open on a phone. The toggle exists on desktop to keep the
     field from eating the filter bar; here there is nothing to protect, and a
     magnifier that has to be tapped before it becomes a field is a step for
     nothing. The row is search + the filter chip, so the field fills it. */
  /* flex-basis 0, not auto: with `auto` the basis is the input's intrinsic
     content width (~20 characters), which on a 320px screen was wider than
     the room left beside the filter chip and pushed it onto a third row. */
  .search-wrap{ flex:1 1 0%; width:auto; min-width:0; order:0; }
  .search-toggle{
    width:38px; height:38px; flex-shrink:0;
    border-color:var(--line-strong); color:var(--ink-soft);
    border-top-right-radius:0; border-bottom-right-radius:0; border-right:none;
    pointer-events:none;
  }
  .search-wrap input,
  .search-wrap.open input{
    flex:1 1 auto; width:auto; min-width:0;
    padding:0 34px 0 12px; opacity:1;
    border-color:var(--line-strong); box-shadow:none;
  }
  .search-wrap input:focus{ border-color:var(--burgundy-bright); }

  /* The Arabic name is a second script on a 165px-wide card, and the one-line
     clamp broke on mixed direction text -- it bled a second line out under the
     dashed rule. Wrapped to one line with an ellipsis instead of clamped. */
  .card .ar{
    display:block; height:auto; line-height:1.6;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  .m-browse-btn{
    display:inline-flex; align-items:center; gap:7px;
    flex:1 1 100%; order:-1; min-width:0;
    padding:11px 14px; border-radius:100px;
    border:1.5px solid var(--line); background:var(--surface); color:var(--ink);
    font-family:var(--font-body); font-size:12.5px; font-weight:700;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .m-browse-btn.on{ border-color:var(--gold); color:var(--gold); }
  .mb-count{
    margin-left:auto; font-family:var(--font-mono); font-size:10px; font-weight:800;
    background:var(--burgundy); color:#fff; border-radius:100px; padding:2px 7px;
  }
  .mb-count[hidden]{ display:none; }

  /* ---- board: two up, tighter ---- */
  .board{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .card .body{ padding:11px 11px 12px; }
  .card .packrow{ margin-top:7px; padding-top:7px; }
  .card .pack-lbl{ display:none; }
  .pack-opt{ font-size:9.5px; padding:3px 8px; }
}

/* ---- bottom sheet ---- */
.m-sheet-scrim{
  position:fixed; inset:0; z-index:820; background:rgba(0,0,0,.55);
  opacity:0; transition:opacity .26s var(--ease);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.m-sheet-scrim.show{ opacity:1; }
.m-sheet-scrim[hidden]{ display:none; }
.m-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:830;
  display:flex; flex-direction:column;
  /* Capped so the board stays visible above it: the sheet is a control over
     the catalogue, not a page that replaces it. */
  max-height:82vh;
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  border-radius:22px 22px 0 0;
  box-shadow:0 -20px 60px rgba(0,0,0,.5);
  transform:translateY(100%);
  transition:transform .28s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
.m-sheet.show{ transform:translateY(0); }
.m-sheet[hidden]{ display:none; }
.ms-grab{
  width:38px; height:4px; border-radius:100px; background:var(--line-strong);
  margin:9px auto 2px; flex-shrink:0;
}
.ms-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 18px 10px; flex-shrink:0;
}
.ms-head h3{ font-family:var(--font-display); font-size:16px; font-weight:800; color:var(--ink); margin:0; }
.ms-close{
  width:32px; height:32px; border-radius:10px; border:1px solid var(--line);
  background:transparent; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.ms-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 12px 8px; }
.ms-sec + .ms-sec{ margin-top:14px; }
.ms-sec-h{
  font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint);
  padding:8px 6px 6px;
}
.ms-row{
  display:flex; align-items:center; gap:11px; width:100%;
  /* 46px of height: this is a thumb target, not a menu item. */
  min-height:46px; padding:9px 12px; margin-bottom:4px;
  background:transparent; border:1.5px solid transparent; border-radius:12px;
  color:var(--ink); font-family:var(--font-body); font-size:14px; font-weight:600;
  text-align:left; cursor:pointer;
}
.ms-row.on{ background:var(--surface); border-color:var(--burgundy); }
.ms-tick{
  width:20px; height:20px; border-radius:6px; flex-shrink:0;
  border:1.5px solid var(--line-strong); color:transparent;
  display:flex; align-items:center; justify-content:center;
}
.ms-row.on .ms-tick{ background:var(--burgundy); border-color:var(--burgundy); color:#fff; }
.ms-lbl{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-n{ font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--ink-faint); flex-shrink:0; }
.ms-foot{
  display:flex; gap:10px; align-items:center;
  padding:12px 16px 16px; border-top:1px solid var(--line); flex-shrink:0;
}
.ms-clear{
  padding:13px 18px; border-radius:100px; border:1.5px solid var(--line);
  background:transparent; color:var(--ink-soft);
  font-family:var(--font-body); font-size:13px; font-weight:700; cursor:pointer;
}
.ms-apply{
  flex:1 1 auto; padding:14px 18px; border-radius:100px; border:none;
  background:linear-gradient(135deg,var(--burgundy-bright),var(--burgundy-deep));
  color:#fff; font-family:var(--font-body); font-size:14px; font-weight:700; cursor:pointer;
}
.ms-apply:disabled{ opacity:.45; cursor:not-allowed; }
@media (min-width:701px){ .m-sheet, .m-sheet-scrim{ display:none !important; } }

/* =====================================================================
   MOBILE HEADER + CARD REFINEMENTS
   ===================================================================== */

/* A note on the card, not a control: three pack buttons made the card taller
   than its neighbours and left the board a ragged grid. */
.card .packnote{
  margin-top:8px;padding-top:8px;border-top:1px dashed var(--card-line);
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--burgundy);
  display:flex;align-items:center;gap:6px;
}
.card .packnote::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--burgundy);flex-shrink:0;
}

.m-hero{ display:none; }
.m-hero[hidden]{ display:none; }

@media (max-width:700px){
  /* The desktop hero is a wide composition; the phone gets its own. */
  .hero{ display:none; }
  .m-hero{ display:block; padding:12px 14px 0; }

  .mh-panel{
    position:relative; overflow:hidden;
    border-radius:20px; padding:18px 18px 16px;
    border:1px solid var(--line);
    background:
      radial-gradient(120% 130% at 8% 0%, rgba(161,31,50,.55), transparent 62%),
      radial-gradient(110% 120% at 100% 100%, rgba(227,162,59,.20), transparent 58%),
      var(--surface);
    box-shadow:0 18px 40px rgba(0,0,0,.45);
  }
  /* The same blurred shelf that sits behind the sign-in card, reused at low
     strength: the two screens read as one product rather than two. */
  .mh-bg{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:url("assets/gate-backdrop.jpg") center/cover no-repeat;
    opacity:.16;
    -webkit-mask-image:linear-gradient(200deg,#000,transparent 78%);
            mask-image:linear-gradient(200deg,#000,transparent 78%);
  }
  .mh-inner{ position:relative; z-index:1; }
  .mh-eyebrow{
    display:inline-block; font-family:var(--font-mono);
    font-size:9.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
    color:var(--gold); margin-bottom:9px;
  }
  .mh-title{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(24px,7vw,30px); line-height:1.12; letter-spacing:-.02em;
    color:#fff; margin:0;
  }
  .mh-sub{
    margin:8px 0 0; font-size:12.5px; line-height:1.5;
    color:var(--ink-soft); max-width:30ch;
  }
  .mh-stats{
    margin-top:12px; display:inline-flex; align-items:center; gap:7px;
    font-family:var(--font-mono); font-size:10.5px; font-weight:700;
    letter-spacing:.04em; color:var(--ink);
    background:rgba(255,255,255,.07); border:1px solid var(--line);
    border-radius:100px; padding:7px 13px;
  }
  .mh-stats::before{
    content:''; width:6px; height:6px; border-radius:50%;
    background:#8fbf82; box-shadow:0 0 0 3px rgba(143,191,130,.18);
  }


  /* Categories as a two-column grid of tiles: all visible at once, each a
     thumb-sized target, the count read first, and a colour tab down the
     leading edge taken from the category's own colour so they are told apart
     by more than their words. Brands are the sheet's job; these two never
     share a control. */
  .mh-cats{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px; margin-top:10px;
  }
  .mh-cat{
    display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    min-height:46px; padding:8px 11px; cursor:pointer;
    border-radius:14px; border:1px solid var(--line);
    background:var(--surface); color:var(--ink);
    font-family:var(--font-body); text-align:left;
    position:relative; overflow:hidden;
    transition:border-color .2s var(--ease), background .2s var(--ease);
  }
  .mh-cat::before{
    content:''; position:absolute; inset-inline-start:0; top:0; bottom:0;
    width:3px; background:var(--cat,var(--gold)); opacity:.85;
  }
  .mh-cat-n{
    font-family:var(--font-mono); font-size:13.5px; font-weight:800;
    color:var(--cat,var(--gold)); line-height:1;
  }
  .mh-cat-l{
    font-size:11.5px; font-weight:600; color:var(--ink-soft); line-height:1.25;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
  }
  .mh-cat.on{
    background:linear-gradient(140deg,rgba(161,31,50,.32),rgba(161,31,50,.10));
    border-color:var(--burgundy-bright);
  }
  .mh-cat.on .mh-cat-l{ color:#fff; }
  body.lang-ar .mh-cat{ text-align:right; align-items:flex-end; }

  /* The menu button is gone: everything it held is on the page now --
     categories as the tiles above, brands in the sheet -- so it was a button
     that opened a list of things already visible. The language control takes
     its place at the end of the bar. */
  .mobile-menu-btn{ display:none !important; }
  .mobile-nav-panel{ display:none; }

  .filterbar{ margin-top:14px; padding:8px 0; }

  /* Dropdown panels are absolutely positioned against a control that sits
     part-way across the bar, and at 330px wide they ran off the right edge of
     the screen -- the account panel was cut in half. On a phone they are
     pinned to the viewport instead of to their trigger, so they cannot
     overflow whatever the trigger's position. */
  .profile-panel, #filterPanel{
    position:fixed; left:12px; right:12px; width:auto;
    top:calc(var(--nav-h) + 8px);
    max-height:calc(100vh - var(--nav-h) - 24px); overflow-y:auto;
  }

  /* Cards: the pack note is small enough to sit inside the existing rhythm. */
  .card .packnote{ font-size:8.5px; margin-top:7px; padding-top:7px; }
}

/* =====================================================================
   NARROW DESKTOP  (701-900px)
   A laptop with the window dragged narrow, or a small screen. It keeps the
   desktop layout -- this is not a phone and should not be handed the phone's
   header -- but the desktop hero is built around a brand stage occupying the
   right 54% of the screen, and that stage is hidden below 900px. So the
   headline kept its narrow 600px column while the space it was making room
   for no longer existed: half the screen empty, and four screenfuls of hero
   before the first product.
   ===================================================================== */
@media (min-width:701px) and (max-width:900px){
  .hero{ padding:38px 0 0; }
  /* The column was 600px wide to clear the brand stage. With no stage to
     clear, it uses the width it has. */
  .hero-inner{ max-width:min(760px,100%); }
  .hero h1{ font-size:clamp(30px,4.6vw,42px); }
  .hero-sub{ margin-top:18px; font-size:16px; max-width:68ch; }
  .hero-cta{ margin-top:26px; }
  /* Pointing at content that is already on screen once the hero is this
     short. */
  .hero-scroll-cue{ display:none; }
  /* One row of the marquee, not two: the second row was pushing the board
     below the fold on a short laptop screen. */
  #shelfWrap2{ display:none; }
  .shelf{ margin-top:30px; padding:16px 0; }
  .shelf-item{ width:68px; height:86px; }
  .filterbar{ margin-top:34px; }
}

/* Very small phones (SE-class). Two columns of card at 320px leaves 136px
   each, so the padding comes off the container and the gaps tighten rather
   than the cards getting any narrower. */
@media (max-width:360px){
  .container{ padding:0 12px; }
  /* The title's clamp bottoms out at 24px, which is wider than the panel at
     this size and pushed "Store" against the edge. */
  .mh-title{ font-size:21px; }
  .mh-sub{ font-size:12px; }
  /* An <input> carries a default intrinsic width of about 20 characters, so
     the search field refused to shrink and pushed the filter chip onto a row
     of its own. */
  .search-wrap input{ min-width:0; }
  .board{ gap:9px; }
  .card .body{ padding:10px 10px 11px; }
  .m-hero{ padding:10px 12px 0; }
  .mh-panel{ padding:16px 15px 14px; }
  .mh-cats{ gap:6px; }
}

/* =====================================================================
   THE HERO STAGE AT THE EDGES OF THE RANGE
   The brand stage -- the burgundy disc with the product turning on it -- is
   positioned against the VIEWPORT, while the text beside it sits in a
   container capped at 1320px. The two therefore only line up at the width the
   layout was drawn at. Wider and they drift apart; narrower and they collide.
   ===================================================================== */

/* 901-1180px: the stage appears at 901px but the disc is still wide enough to
   sit on top of the paragraph -- at 1024 it overlapped it by about 60px. The
   disc comes in and moves further right until there is room for both. */
@media (min-width:901px) and (max-width:1180px){
  .hero-inner{ max-width:min(520px,52%); }
  .bs-circle{ width:min(360px,32vw); }
  .bs-circle, .bs-ghost, .bs-hero{ left:62%; }
  .bs-label{ left:62%; top:calc(50% + min(190px,16vw) + 8px); }
  .bs-hero{ width:min(210px,19vw); }
  .hero h1{ font-size:clamp(30px,3.8vw,40px); }
}

/* 1400px and up: the container stops growing, so every pixel added to the
   window went into the gap between the text and the disc -- 406px of empty
   floor at 2560px, with the disc itself hanging outside the content column.
   Anchoring the stage to the container edge instead of the viewport edge
   keeps the composition together however wide the screen gets. */
@media (min-width:1400px){
  .brand-stage{
    right:max(0px, calc((100vw - var(--shell,1320px)) / 2));
    width:min(660px, 46%);
  }
  /* No upper cap on the shell: a cap just reintroduces the side margins on
     anything wider than it, which is the thing being fixed. */
  /* The text column was fixed at 600px for a 1440px screen; it can breathe a
     little once there is this much room, without running at the disc. */
  .hero-inner{ max-width:660px; }
  .hero h1{ font-size:clamp(48px,3.6vw,60px); }
  .hero-sub{ font-size:19px; max-width:640px; }
}

/* Large phones and small tablets in portrait (481-700px). Two columns of card
   at 600px wide makes each one 276px -- larger than the same card on a
   laptop. Three columns puts the density back and lets the category tiles
   spread out too. */
@media (min-width:481px) and (max-width:700px){
  .board{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px; }
  .mh-cats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mh-title{ font-size:clamp(28px,5.2vw,34px); }
  .mh-sub{ font-size:13.5px; max-width:46ch; }
  .m-hero{ padding:16px 20px 0; }
  .mh-panel{ padding:24px 24px 20px; }
}

/* =====================================================================
   WIDE SCREENS: LET THE PAGE FILL
   The shell was pinned at 1320px, so on anything wider every extra pixel
   became margin -- on an 1880px laptop the filter rails and the board sat in
   the middle with a band of empty floor down both sides. Above 1400px the
   shell tracks the window instead, keeping a fixed breathing margin, and it
   stops growing at 2200px so a very large monitor does not stretch the
   catalogue into one endless row.
   ===================================================================== */
@media (min-width:1400px){
  :root{ --shell:calc(100vw - 140px); }
  /* Everything in the hero is now a share of the shell rather than a fixed
     pixel width. Fixed widths were what produced the drift in the first
     place: pinning the text at 660px and the stage at 760px meant every extra
     pixel of window landed in the space between them, so closing the gap at
     the edges only moved it to the middle. */
  .hero-inner{ max-width:48%; }
  /* The paragraph stays a readable measure even though its column is wide. */
  .hero-sub{ max-width:56ch; }
  .brand-stage{ width:calc(var(--shell) / 2); }
  .bs-circle{ width:min(700px,34vw); }
  .bs-hero{ width:min(400px,20vw); }
  .bs-label{ top:calc(50% + min(350px,17vw) + 8px); }
  .bs-ghost{ font-size:clamp(64px,5vw,120px); }
}