/* First-paint fallback only — see app.js applyHeroSettings() for the full
   hero source-of-truth note. The runtime authority is Firestore
   settings/siteContent.hero, applied via root.style.setProperty(), which
   always wins over these stylesheet defaults once it runs. Keep these
   URLs (including the cache-busting version) in sync with
   DEFAULT_SITE_CONTENT.hero in site-content-defaults.js. */
:root{
  --hero-image-desktop:url('./assets/Images/Web/hero-d1.webp');
  --hero-image-mobile:url('./assets/Images/Web/hero-m1.webp');
}
:root{
  --bg:#FAF6EE;--bg2:#E9DDC8;--bg3:#DDD0B5;--surf:#FFFFFF;
  --br:rgba(106,70,50,.13);--br2:rgba(106,70,50,.24);
  --tx:#2A1A14;--tx2:#6A4632;--tx3:#9C7A52;--tx4:#C4A882;
  --gold:#C8A56A;--gdk:#6A4632;--gpale:#F0E8D4;
  --grn:#2D4A3E;--glt:rgba(45,74,62,.08);--gmd:rgba(45,74,62,.16);--gdark:#1e3329;
  --burg:#6B1A2A;--terra:#A16046;
  --s1:0 2px 8px rgba(42,26,20,.05);--s2:0 6px 24px rgba(42,26,20,.09);
  --s3:0 18px 52px rgba(42,26,20,.14);--s4:0 28px 72px rgba(42,26,20,.2);
  --r1:8px;--r2:14px;--r3:22px;--rp:100px;
  --tr:.24s cubic-bezier(.2,0,0,1);--tsp:.4s cubic-bezier(.34,1.56,.64,1);
}
[data-theme=dark]{
  --bg:#0F0A05;--bg2:#1A0F08;--bg3:#231508;--surf:#1A0F08;
  --br:rgba(200,165,106,.12);--br2:rgba(200,165,106,.22);
  --tx:#E9DDC8;--tx2:#C8A56A;--tx3:#9C7A52;--tx4:#6A5238;
  --gdk:#C8A56A;--gpale:rgba(233,221,200,.1);
  --grn:#3D6B5A;--glt:rgba(61,107,90,.12);--gmd:rgba(61,107,90,.2);--gdark:#2D4A3E;
  --s1:0 2px 8px rgba(0,0,0,.3);--s2:0 6px 24px rgba(0,0,0,.4);
  --s3:0 18px 52px rgba(0,0,0,.5);--s4:0 28px 72px rgba(0,0,0,.6);
}

/* ── Dark mode contrast corrections ──────────────────────────────
   Prices: --burg (#6B1A2A) has ~1.6:1 contrast on dark surface → warm amber
   Secondary text: --tx4 (#6A5238) too dark for small text on dark bg → tx3 level
   ──────────────────────────────────────────────────────────────── */

/* Prices & monetary values — brand rule: gold is reserved almost exclusively
   for price, so it reads as valuable. Tuned separately from decorative
   --gold/--gold-light for AA-level contrast on dark surfaces. */
[data-theme=dark] .p-price,
[data-theme=dark] .cd-total-v,
[data-theme=dark] .ci-price,
[data-theme=dark] .co-item-price,
[data-theme=dark] .vs-val{color:var(--price)}
/* Old/struck-through price — slightly dimmer but still readable */
[data-theme=dark] .p-price-old{color:var(--tx3)}
/* Faint secondary text: tx4 → tx3 for legibility */
[data-theme=dark] .rev-ct,
[data-theme=dark] .p-from,
[data-theme=dark] .mdet-k,
[data-theme=dark] .vc-cups,
[data-theme=dark] .vc-price{color:var(--tx3)}
/* Discount badge: burgundy, using the dark-mode-calibrated --burgundy
   token (defined below) instead of the base --burg so it keeps AA
   contrast on dark surfaces — same reasoning this codebase already
   applies to --burgundy elsewhere in dark mode. */
[data-theme=dark] .p-disc{color:var(--burgundy,#C1445C);background:rgba(107,26,42,.22)}
/* In-stock label */
[data-theme=dark] .stock-ok{color:#6BBD97}
/* Nav links: boost from tx3 to slightly brighter */
[data-theme=dark] nav a{color:#B8956A}
[data-theme=dark] nav a:hover{color:#E9DDC8;background:var(--glt)}
/* Badge contrast: pb-sale (burg bg) → brighter maroon so white text stays ~12:1 */
[data-theme=dark] .pb-sale{background:#8B2D3C}
/* gnote text on dark gpale background */
[data-theme=dark] .gnote{color:var(--tx2)}

/* ── Rebrand-block dark-mode fixes ─────────────────────────────────
   The rebrand rules further down reference the docx's raw brand tokens
   (--text-secondary, --burgundy, --black) directly instead of the
   semantic --tx2/--br aliases above, so they didn't pick up dark-mode
   values: hero subtitles/trust copy/section intros went near-invisible,
   burgundy emphasis text lost contrast on near-black, and black-background
   buttons (Add to cart, Shop Now, filter pills) disappeared into
   dark-mode's near-black surfaces. Fixed at the token/selector level so
   every consumer picks it up at once. ── */
[data-theme=dark]{--burgundy:#C1445C}
[data-theme=dark] nav a,
[data-theme=dark] .hsub,
[data-theme=dark] .ti,
[data-theme=dark] .sec-sub,
[data-theme=dark] .p-desc{color:var(--tx2)}
/* Primary CTAs: on dark surfaces a black button has ~1:1 contrast against
   the black-deep/charcoal backgrounds behind it. Invert to the gold accent
   the brand doc already specifies for dark editorial sections. */
[data-theme=dark] .btn-g,
[data-theme=dark] .atc,
[data-theme=dark] .m-atc,
[data-theme=dark] .qs-trig,
[data-theme=dark] .cd-checkout,
[data-theme=dark] .co-submit,
[data-theme=dark] .login-btn,
[data-theme=dark] .stt{background:var(--gold-light);color:#171717}
[data-theme=dark] .btn-g:hover,
[data-theme=dark] .atc:hover,
[data-theme=dark] .m-atc:hover,
[data-theme=dark] .cd-checkout:hover,
[data-theme=dark] .co-submit:hover,
[data-theme=dark] .login-btn:hover,
[data-theme=dark] .stt:hover{background:var(--burgundy);color:#fff}
[data-theme=dark] .btn-o{border-color:var(--tx);color:var(--tx)}
[data-theme=dark] .btn-o:hover{background:var(--tx);color:#171717}
[data-theme=dark] .fpill.on,
[data-theme=dark] .lbtn.on{background:var(--tx);color:#171717;border-color:var(--tx)}
[data-theme=dark] .pb-best,
[data-theme=dark] .pb-new{background:var(--gold-light);color:#171717}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--tx);overflow-x:clip;line-height:1.6;transition:background .3s,color .3s}
body.ar{font-family:'IBM Plex Sans Arabic',sans-serif}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
/* ── Announcement bar — SINGLE authoritative implementation ──────────────
   All messages move together as one continuous, seamlessly looping
   sequence (not a one-message-at-a-time rotator). auth.js's
   AnnouncementBar.update() builds the required markup:
     .ann-track > .ann-set > .ann-seg*  +  .ann-track > .ann-set.ann-set-clone > .ann-seg*
   Two identical sets back-to-back make the track exactly 2x one set's
   width, so animating translateX(0 → -50%) loops with no visible seam.
   Do not add another competing .ann/.ann-track/.ann-seg block anywhere in
   this project — consolidate into this one instead. */
.ann{
  background:#2A1A14;color:#E9DDC8;font-size:12px;letter-spacing:.04em;
  height:40px;min-height:40px;padding:0;display:flex;align-items:center;
  justify-content:flex-start;overflow:hidden;
}
[data-theme=dark] .ann{background:#1C1715}
body.ar .ann{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;letter-spacing:0}
.ann-track{
  direction:ltr;display:flex;align-items:center;justify-content:flex-start;
  width:max-content;min-width:max-content;flex:none;
  transform:translate3d(0,0,0);
  animation:annMarquee 28s linear infinite;
  will-change:transform;
}
.ann-track:hover{animation-play-state:paused}
.ann-set{display:flex;align-items:center;width:max-content;min-width:max-content;flex:none}
.ann-seg{display:block;flex:none;width:auto;max-width:none;overflow:visible;white-space:nowrap;padding:0 3rem;line-height:40px;opacity:1;transform:none;transition:none;unicode-bidi:plaintext}
@keyframes annMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:760px){
  .ann-track{animation-duration:26s}
  .ann-seg{padding:0 2rem}
}
@media(prefers-reduced-motion:reduce){
  /* Kept moving under reduced-motion by deliberate, repeated prior product
     decision (documented across earlier passes) rather than freezing —
     the !important is required to beat the universal
     *{animation-duration:.01ms!important} rule below. */
  .ann-track{animation:annMarquee 28s linear infinite!important;}
}
/* Sticky top — announcement bar + header pinned together */
.topbar{position:sticky;top:0;z-index:100}
/* Header */
header{position:relative;z-index:100;background:rgba(250,246,238,.97);backdrop-filter:blur(22px);border-bottom:1px solid var(--br);transition:box-shadow var(--tr),background .3s}
[data-theme=dark] header{background:rgba(28,23,21,.97)}
header.scrolled{box-shadow:var(--s2)}
.hdr{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:.65rem;padding:.72rem 1.6rem}
.logo{display:flex;flex-direction:row;align-items:center;gap:.6rem;line-height:1.15;flex-shrink:0}
.logo-mark{height:44px;width:auto;display:block}
[data-theme=dark] .logo-mark{filter:none}
.ft-logo-mark{height:32px;width:auto;display:block;margin-bottom:.7rem}
/* EN (default): English name primary on top, Arabic small. AR overrides below. */
.logo-ar{font-family:'Amiri',serif;font-size:.82rem;font-weight:700;color:var(--tx3);letter-spacing:.01em}
.logo-en{font-family:'DM Sans',sans-serif;font-size:1.02rem;font-weight:700;letter-spacing:.06em;color:var(--tx);text-transform:uppercase;order:-1}
body.ar .logo-ar{font-size:1.38rem;color:var(--tx)}
body.ar .logo-en{font-size:7px;font-weight:600;letter-spacing:.12em;color:var(--burg);order:0;margin-top:2px}
/* Scoped to #deskNav (the storefront header's desktop nav) — this used to be
   a bare `nav` tag selector, which also matched the Admin Portal's sidebar
   `<nav>` (no class/id of its own, styled entirely via inline styles).
   That leaked `display:flex` (no flex-direction, so browser default is
   row) onto the sidebar, squashing its vertical button list into an
   unreadable row and overriding its inline `width:200px` via `flex:1`.
   Same bug family as the responsive.css `nav{display:none}` fix already
   made for the same admin sidebar element. */
#deskNav{flex:1;display:flex;justify-content:center;flex-wrap:wrap;gap:.05rem}
#deskNav a{font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--tx3);padding:.34rem .58rem;border-radius:var(--r1);transition:color var(--tr),background var(--tr)}
body.ar #deskNav a{font-family:'Amiri',serif;font-size:13px;text-transform:none;letter-spacing:0}
#deskNav a:hover{color:var(--grn);background:var(--glt)}
.hdr-r{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.lang-sw{display:flex;background:var(--bg2);border:1px solid var(--br);border-radius:var(--rp);padding:2px}
.lbtn{font-family:'DM Sans',sans-serif;font-size:9px;font-weight:600;letter-spacing:.03em;color:var(--tx3);padding:.25rem .58rem;border-radius:var(--rp);transition:background var(--tr),color var(--tr);line-height:1}
.lbtn.on{background:var(--grn);color:#fff}
.lbtn:hover:not(.on){color:var(--grn)}
.ibtn{color:var(--tx3);padding:.28rem;border-radius:var(--r1);display:flex;align-items:center;justify-content:center;transition:color var(--tr),background var(--tr);position:relative}
.ibtn:hover{color:var(--grn);background:var(--glt)}
/* WhatsApp header icon: colored green at rest (not just on hover). Uses
   #25D366 (WhatsApp's own brand color) rather than this site's --grn
   token, because --grn was repurposed to an alias for black/near-black in
   the current black-and-white redesign system (see the later :root block
   below) and no longer resolves to an actual green — using it here would
   make the icon black, not green. #25D366 already appears elsewhere in
   this codebase for the same reason (orders.js's WhatsApp confirmation
   button), so this matches existing convention rather than introducing a
   new color. */
.ibtn[data-control="whatsapp"]{color:#25D366}
.ibtn[data-control="whatsapp"]:hover{color:#1DA851}
.ibtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.ic-badge{position:absolute;top:-2px;inset-inline-end:-2px;background:var(--burg,#641D2B);color:#fff;font-size:7.5px;font-weight:700;min-width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif}
.burger{display:none;color:var(--tx2);padding:.28rem;border-radius:var(--r1)}
.burger svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}


.mob-nav{display:none;flex-direction:column;background:var(--surf);border-bottom:1px solid var(--br2)}
.mob-nav.open{display:flex}
.mob-nav a{font-size:14px;font-weight:500;color:var(--tx2);padding:.7rem 1.5rem;border-bottom:1px solid var(--br);transition:color var(--tr)}
body.ar .mob-nav a{font-family:'Amiri',serif;font-size:15px}
.mob-nav a:hover{color:var(--grn)}
/* Hero */
.hero{
  position:relative;
  height:620px;
  width:100%;
  overflow:hidden;
  background:var(--bg2);
}
/* Hero bottom fade — visual boundary separating hero from trust strip */
.hero::after{content:'';position:absolute;bottom:0;inset-inline:0;height:72px;background:linear-gradient(transparent,rgba(var(--bg-rgb,250,246,238),.55));pointer-events:none;z-index:3}
[data-theme=dark] .hero::after{background:linear-gradient(transparent,rgba(15,10,5,.55))}
.hslide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transition:opacity .85s}
.hslide.on{opacity:1}
.hbg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transition:transform 9s;
  filter:brightness(1.12);
}
.hslide.on .hbg{transform:scale(1.05)}
.hcont{
  position:relative;
  z-index:2;
  max-width:1320px;
  margin:0 auto;
  padding:0 1.6rem;
  width:100%;
}
.htag{display:none}
[data-theme=dark] .htag{background:rgba(0,0,0,.3)}
body.ar .htag{font-family:'Amiri',serif;font-size:12px;letter-spacing:0;text-transform:none}
.hpill{display:inline-block;font-size:.73rem;font-weight:600;color:var(--gdk);background:var(--gpale);border:1px solid rgba(201,169,110,.26);border-radius:var(--rp);padding:.27rem .88rem;margin-bottom:.95rem;animation:fup .7s .3s both}
[data-theme=dark] .hpill{background:rgba(201,169,110,.1)}
body.ar .hpill{font-family:'Amiri',serif;font-size:.86rem}
.htitle{font-family:'DM Sans',sans-serif;font-size:clamp(2.4rem,5.5vw,4.8rem);font-weight:700;line-height:1.08;color:var(--tx);margin-bottom:.9rem;animation:fup .7s .3s both}
body.ar .htitle{font-family:'Amiri',serif;font-size:clamp(2.1rem,5vw,4.2rem)}
.htitle em{color:var(--grn);font-style:italic}
.hsub{font-size:.95rem;color:var(--tx);max-width:400px;line-height:1.78;margin-bottom:1.7rem;animation:fup .7s .44s both;font-weight:500}
.hcont > *{
  max-width:650px;
}

[dir=rtl] .hcont{
  text-align:right;
}
/* English: text sits on the LEFT where the light gradient is */
body:not(.ar) .hcont{text-align:left}
body:not(.ar) .hcont > *{margin-left:0;margin-right:auto}
body:not(.ar) .hbtns{justify-content:flex-start}
body.ar .hsub{font-family:'Amiri',serif;font-size:1.03rem}
.hbtns{display:flex;gap:.75rem;flex-wrap:wrap;animation:fup .7s .56s both}
.hdots{position:absolute;bottom:1.75rem;left:50%;transform:translateX(-50%);display:flex;gap:.42rem;z-index:3}
.hdot{width:25px;height:2.5px;border-radius:2px;background:rgba(45,74,62,.18);cursor:pointer;transition:all var(--tr)}
.hdot.on{background:var(--grn);width:44px}
@keyframes fup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.38rem;border-radius:var(--r1);padding:.78rem 1.8rem;font-size:.84rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:background var(--tr),transform var(--tsp),box-shadow var(--tr);cursor:pointer;font-family:'DM Sans',sans-serif}
body.ar .btn{font-family:'Amiri',serif;font-size:.96rem;text-transform:none;letter-spacing:0}
.btn-g{background:var(--grn);color:#fff;box-shadow:0 4px 18px rgba(45,74,62,.25)}
.btn-g:hover{background:var(--gdark);transform:translateY(-2px);box-shadow:0 8px 26px rgba(45,74,62,.35)}
.btn-o{background:rgba(255,255,255,.55);border:1.5px solid var(--br2);color:var(--tx2);backdrop-filter:blur(8px)}
[data-theme=dark] .btn-o{background:rgba(0,0,0,.35)}
.btn-o:hover{border-color:var(--grn);color:var(--grn);background:var(--glt)}

/* ── User-select ───────────────────────────────────────────────────
   Decorative / interactive elements: none (prevent accidental drag-select)
   Readable content: explicit text (copy-able by user)
   No global none on body or * — only targeted elements
   ─────────────────────────────────────────────────────────────────── */

/* Decorative — none */
.ann,.ann-track,.ann-seg{user-select:none;-webkit-user-select:none}
.atc,.m-atc,.cd-checkout,.login-btn,.btn{user-select:none;-webkit-user-select:none}
nav a,.mob-nav a,.lbtn{user-select:none;-webkit-user-select:none}
.ibtn svg,.ibtn{user-select:none;-webkit-user-select:none}
.pbadge,.mb,.p-disc,.ic-badge{user-select:none;-webkit-user-select:none}
.hdot,.qs-trig,.m-close,.cd-close,.pol-close{user-select:none;-webkit-user-select:none}
.fpill,.spill,.vchip{user-select:none;-webkit-user-select:none}

/* Content — text (allow copy) */
.p-name,.p-desc,.p-price{user-select:text;-webkit-user-select:text}
.m-name,.m-desc,.m-rct{user-select:text;-webkit-user-select:text}
.pol-body,.pol-body h3,.pol-body p{user-select:text;-webkit-user-select:text}
.t-text,.t-nm{user-select:text;-webkit-user-select:text}
.mdet-v,.ci-name,.ci-var,.ci-price{user-select:text;-webkit-user-select:text}
/* Trust */
.trust{background:var(--surf);border-bottom:1px solid var(--br)}
.trust-in{max-width:1320px;margin:0 auto;display:flex;justify-content:center;flex-wrap:wrap;gap:1.8rem;padding:.85rem 1.6rem}
.ti{display:flex;align-items:center;gap:.4rem;font-size:11px;font-weight:500;color:var(--tx3);letter-spacing:.04em;text-transform:uppercase}
body.ar .ti{font-family:'Amiri',serif;font-size:12.5px;letter-spacing:0;text-transform:none}
.ti svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:1.9;flex-shrink:0}
/* Section */
.sec{padding:2.2rem 1.6rem}
.sec-in{
  max-width:1320px;
  margin:0 auto;
}
.sec-hd{text-align:center;margin-bottom:1.6rem}
.kicker{display:block;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gdk);margin-bottom:.55rem}
/* Bumped from 11px: at the old size this label (e.g. "لماذا حافظ مصطفى؟")
   rendered noticeably smaller than the nav links (13px) and filter pills
   (12.5px) it sits alongside, making it hard to read next to the large
   section title below it. */
body.ar .kicker{font-family:'Amiri',serif;font-size:13px;letter-spacing:0;text-transform:none}
.sec-title{font-family:'DM Sans',sans-serif;font-size:clamp(1.8rem,3vw,2.7rem);font-weight:700;color:var(--tx);line-height:1.15;margin-bottom:.48rem}
body.ar .sec-title{font-family:'Amiri',serif}
.sec-div{width:46px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:.72rem auto}
.sec-sub{font-size:.92rem;color:var(--tx2);line-height:1.75;max-width:490px;margin:0 auto}
body.ar .sec-sub{font-family:'Amiri',serif;font-size:.99rem}
/* Categories */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.cat-card{position:relative;overflow:hidden;border-radius:var(--r2);aspect-ratio:16/9;cursor:pointer;box-shadow:var(--s1);transition:transform .32s,box-shadow .32s}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--s3)}
.cat-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .52s}
.cat-card:hover .cat-bg{transform:scale(1.06)}
.cat-ov{position:absolute;inset:0;background:linear-gradient(155deg,transparent 25%,rgba(26,14,5,.88))}
.cat-lbl{position:absolute;bottom:.75rem;inset-inline-start:.88rem}
.cat-name{font-family:'DM Sans',sans-serif;font-size:1.06rem;font-weight:700;color:#fff;line-height:1.2}
body.ar .cat-name{font-family:'Amiri',serif;font-size:1.1rem}
.cat-ct{font-size:.69rem;color:var(--gold);font-weight:600;margin-top:.1rem}
/* Filter bar */
.filter-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.85rem;margin-bottom:1.1rem}
.fpills{display:flex;gap:.34rem;flex-wrap:wrap}
.fpill{font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--tx3);background:var(--bg2);border:1.5px solid transparent;padding:.38rem .95rem;border-radius:var(--rp);cursor:pointer;transition:all var(--tr);font-family:'DM Sans',sans-serif}
body.ar .fpill{font-family:'Amiri',serif;font-size:12.5px;text-transform:none;letter-spacing:0}
.fpill:hover{color:var(--grn);border-color:var(--grn);background:var(--glt)}
.fpill.on{background:var(--grn);color:#fff;border-color:var(--grn)}
.fcount{font-size:.8rem;color:var(--tx3)}
body.ar .fcount{font-family:'Amiri',serif}
/* Grind note */
.gnote{background:var(--gpale);border:1px solid rgba(201,169,110,.26);border-radius:var(--r2);padding:.8rem 1rem;display:flex;align-items:center;gap:.65rem;margin-bottom:1.1rem;font-size:.8rem;color:var(--tx2)}
[data-theme=dark] .gnote{background:rgba(201,169,110,.07)}
body.ar .gnote{font-family:'Amiri',serif;font-size:.93rem}
.gnote svg{width:15px;height:15px;stroke:var(--gdk);fill:none;stroke-width:1.8;flex-shrink:0}
/* Product grid */
.prod-sec{background:var(--surf);border-top:1px solid var(--br)}
.prod-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.25rem;
}
/* Product card */
.pc{background:var(--surf);border:1px solid var(--br);border-radius:var(--r2);overflow:hidden;position:relative;transition:transform .33s,box-shadow .33s,border-color .28s;box-shadow:var(--s1);display:flex;flex-direction:column}
.pc:hover{transform:translateY(-6px);box-shadow:var(--s3);border-color:rgba(201,169,110,.3)}
/* Final product card frame: every admin/product image gets one stable 4:5
   viewport (contain, not cover, below — so packaging is never cropped). */
.pc-img{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--bg2);cursor:pointer}
.img-a,.img-b{position:absolute;inset:0;background-size:contain;background-position:center;background-repeat:no-repeat;opacity:1;visibility:visible;transition:opacity .58s,transform .62s}
.img-b{opacity:0;transform:scale(1.05)}
.pc:hover .img-b{opacity:1;transform:scale(1)}
.pc:hover .img-a{opacity:0}
/* .pbadges: wrapper so 2+ badges (e.g. New + Sale) stack in the same corner
   instead of overlapping — .pbadge keeps its own absolute positioning for
   the (still-supported) single-badge case, so it's neutralized to a plain
   stacked item only when a wrapper is present. */
.pbadges{position:absolute;top:.6rem;inset-inline-start:.6rem;display:flex;flex-direction:column;align-items:flex-start;gap:.32rem;z-index:2}
.pbadges .pbadge{position:static}
.pbadge{position:absolute;top:.6rem;inset-inline-start:.6rem;font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:.04em;padding:.19rem .52rem;border-radius:4px;font-weight:700;color:#fff;z-index:2}
body.ar .pbadge{font-family:'Amiri',serif;font-size:9.5px;letter-spacing:0}
.pb-best{background:var(--grn)}.pb-sale{background:var(--burg)}.pb-new{background:var(--terra)}
.qs-trig{position:absolute;bottom:-42px;left:0;right:0;background:rgba(26,14,5,.78);backdrop-filter:blur(8px);color:#fff;padding:.66rem;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:bottom .26s;display:flex;align-items:center;justify-content:center;gap:.36rem;font-family:'DM Sans',sans-serif}
body.ar .qs-trig{font-family:'Amiri',serif;font-size:12.5px;text-transform:none;letter-spacing:0}
.qs-trig svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.pc:hover .qs-trig{bottom:0}
.qs-trig:hover{background:rgba(45,74,62,.88)}
.pc-body{padding:.95rem .95rem .9rem;flex:1;display:flex;flex-direction:column}
.p-stars{display:flex;align-items:center;gap:.32rem;margin-bottom:.34rem}
.stars-v{color:var(--gold);font-size:.7rem;line-height:1}
.rev-ct{font-size:.68rem;color:var(--tx4)}
.p-name{font-family:'DM Sans',sans-serif;font-size:.98rem;font-weight:700;color:var(--tx);line-height:1.3;margin-bottom:.22rem;cursor:pointer}
body.ar .p-name{font-family:'Amiri',serif;font-size:1.04rem}
/* pre-line: the admin description textarea is plain text, so a line break
   the admin types is a literal \n character, not a <br> tag. Without this,
   HTML collapses \n to a space and the flavor-notes line never starts on
   its own line even though it's there in the stored text. pre-line keeps
   normal word-wrap and space-collapsing, it only respects real newlines. */
.p-desc{font-size:.74rem;color:var(--tx3);line-height:1.55;margin-bottom:.6rem;flex:1;white-space:pre-line}
body.ar .p-desc{font-family:'Amiri',serif;font-size:.84rem}
.chips{display:flex;flex-wrap:wrap;gap:.24rem;margin-bottom:.6rem}
.chip{font-size:.64rem;font-weight:600;color:var(--tx3);background:var(--bg2);border:1px solid var(--br);border-radius:var(--rp);padding:.12rem .46rem}
body.ar .chip{font-family:'Amiri',serif;font-size:.75rem}
.p-price-row{display:flex;align-items:baseline;gap:.34rem;flex-wrap:wrap;margin-bottom:.78rem}
.p-from{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--tx4)}
body.ar .p-from{font-family:'Amiri',serif;font-size:.76rem;text-transform:none;letter-spacing:0}
.p-price{font-family:'DM Sans',sans-serif;font-size:1.34rem;font-weight:700;color:var(--price,#B5302B);line-height:1}
.p-price-old{font-size:.73rem;color:var(--tx4);text-decoration:line-through}
.p-disc{font-size:.64rem;font-weight:700;color:var(--burg);background:rgba(107,26,42,.09);padding:.12rem .38rem;border-radius:var(--rp)}
/* Wraps the old/new/percent trio (see products.js priceRowHtml()) so they sit
   inline with a consistent gap wherever they're used — inside the already-flex
   .p-price-row on product cards, and inside the plain block .vs-val in Quick Shop. */
.price-inline{display:inline-flex;align-items:baseline;gap:.34rem;flex-wrap:wrap}
.atc{width:100%;padding:.6rem;background:var(--bg2);border:1.5px solid var(--br2);color:var(--tx2);border-radius:var(--r1);font-size:.73rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background var(--tr),color var(--tr),border-color var(--tr),transform var(--tsp),box-shadow var(--tr);font-family:'DM Sans',sans-serif}
body.ar .atc{font-family:'Amiri',serif;font-size:.88rem;text-transform:none;letter-spacing:0}
/* Dark mode: make the add-to-cart button clearly visible (it blended into the card) */
[data-theme=dark] .atc{background:rgba(200,165,106,.12);border-color:var(--gold);color:var(--gold)}
[data-theme=dark] .atc:hover{background:var(--grn);border-color:var(--grn);color:#fff}
.atc:hover{background:var(--grn);color:#fff;border-color:var(--grn);transform:translateY(-3px);box-shadow:0 8px 22px rgba(45,74,62,.27)}
.atc.pulse{animation:apulse .5s}
@keyframes apulse{0%,100%{transform:scale(1)}35%{transform:scale(1.04)}70%{transform:scale(.98)}}
/* Quick Shop overlay */
.ov{position:fixed;inset:0;z-index:300;background:rgba(26,14,5,.45);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .28s;display:flex;align-items:center;justify-content:center;padding:1rem}
.ov.open{opacity:1;pointer-events:all}
.modal{background:var(--surf);border-radius:var(--r3);box-shadow:var(--s4);width:100%;max-width:840px;max-height:91vh;overflow:hidden;display:flex;transition:transform .32s cubic-bezier(.2,0,0,1);transform:translateY(20px) scale(.97)}
.ov.open .modal{transform:translateY(0) scale(1)}
[dir=rtl] .modal{flex-direction:row-reverse}
.m-img{width:40%;flex-shrink:0;position:relative;background:var(--bg2);overflow:hidden}
.m-img-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .55s}
.m-img:hover .m-img-bg{transform:scale(1.04)}
.m-close{position:absolute;top:.82rem;inset-inline-end:.82rem;z-index:2;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);border:1px solid var(--br2);border-radius:50%;width:29px;height:29px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx2);transition:background var(--tr)}
[data-theme=dark] .m-close{background:rgba(0,0,0,.6)}
.m-close:hover{background:var(--tx);color:#fff}
.m-close svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5}
.m-body{flex:1;overflow-y:auto;padding:1.55rem 1.5rem;max-height:91vh}
.m-badges{display:flex;gap:.36rem;flex-wrap:wrap;margin-bottom:.58rem}
.mb{font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:.04em;padding:.19rem .52rem;border-radius:4px;font-weight:700;color:#fff}
body.ar .mb{font-family:'Amiri',serif;font-size:9.5px;letter-spacing:0}
.m-name{font-family:'DM Sans',sans-serif;font-size:1.58rem;font-weight:700;color:var(--tx);line-height:1.12;margin-bottom:.32rem}
body.ar .m-name{font-family:'Amiri',serif;font-size:1.48rem}
.m-stars-row{display:flex;align-items:center;gap:.36rem;margin-bottom:.78rem}
.m-stars{color:var(--gold);font-size:.82rem}
.m-rct{font-size:.76rem;color:var(--tx3)}
.m-desc{font-size:.84rem;color:var(--tx2);line-height:1.75;margin-bottom:.98rem;white-space:pre-line}
body.ar .m-desc{font-family:'Amiri',serif;font-size:.94rem}
.m-lbl{display:block;font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-bottom:.44rem}
body.ar .m-lbl{font-family:'Amiri',serif;font-size:.8rem;text-transform:none;letter-spacing:0}
.var-chips{display:flex;flex-wrap:wrap;gap:.44rem;margin-bottom:.9rem}
.vchip{background:var(--bg2);border:1.5px solid var(--br2);border-radius:var(--r1);padding:.44rem .84rem;cursor:pointer;transition:all var(--tr);text-align:center;min-width:70px}
.vchip.oos{opacity:.44;cursor:not-allowed}
.vc-lbl{font-size:.8rem;font-weight:600;color:var(--tx2);display:block;line-height:1}
body.ar .vc-lbl{font-family:'Amiri',serif;font-size:.92rem}
.vc-price{font-size:.68rem;color:var(--tx3);display:block;margin-top:.11rem}
.vc-cups{font-size:.61rem;color:var(--tx4);display:block;margin-top:.07rem}
.var-strip{display:flex;gap:.82rem;background:var(--bg2);border-radius:var(--r1);padding:.64rem .9rem;margin-bottom:.95rem;flex-wrap:wrap}
.vs{text-align:center;flex:1;min-width:55px}
.vs-val{font-family:'DM Sans',sans-serif;font-size:1.22rem;font-weight:700;color:var(--price,#641D2B);display:block;line-height:1}
.vs-lbl{font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);display:block;margin-top:.13rem}
body.ar .vs-lbl{font-family:'Amiri',serif;font-size:.74rem;text-transform:none;letter-spacing:0}
.stock-ok{color:var(--grn);font-size:.72rem;font-weight:700;display:flex;align-items:center;gap:.25rem}
.stock-no{color:var(--burg)}
.stock-ok svg,.stock-no svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.5}
.qty-row{display:flex;align-items:center;gap:.58rem;margin-bottom:.88rem}
.qty-lbl{font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
body.ar .qty-lbl{font-family:'Amiri',serif;font-size:.8rem;text-transform:none;letter-spacing:0}
.qty-ctrl{display:flex;align-items:center;background:var(--bg2);border:1.5px solid var(--br2);border-radius:var(--r1);overflow:hidden}
.qbtn{background:none;border:none;padding:.36rem .66rem;font-size:1rem;color:var(--tx2);cursor:pointer;transition:background var(--tr);line-height:1}
.qbtn:hover{background:var(--br)}
.qval{font-size:.86rem;font-weight:600;color:var(--tx);min-width:30px;text-align:center;border-inline:1.5px solid var(--br2);padding:.36rem 0}
.m-atc{width:100%;padding:.8rem;background:var(--grn);color:#fff;border:none;border-radius:var(--r1);font-size:.88rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:background var(--tr),transform var(--tsp),box-shadow var(--tr);box-shadow:0 4px 18px rgba(45,74,62,.26);margin-bottom:.48rem;font-family:'DM Sans',sans-serif}
body.ar .m-atc{font-family:'Amiri',serif;font-size:.98rem;text-transform:none;letter-spacing:0}
.m-atc:hover{background:var(--gdark);transform:translateY(-2px);box-shadow:0 8px 26px rgba(45,74,62,.35)}
.m-atc.oos-st{background:var(--bg3);color:var(--tx3);box-shadow:none;cursor:default}
.m-atc.oos-st:hover{transform:none;box-shadow:none}
.m-sep{height:1px;background:var(--br);margin:.98rem 0}
.m-det-grid{display:grid;grid-template-columns:1fr 1fr;gap:.48rem;margin-bottom:.82rem}
.mdet{background:var(--bg2);border-radius:var(--r1);padding:.52rem .72rem}
.mdet-k{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx4);margin-bottom:.14rem}
body.ar .mdet-k{font-family:'Amiri',serif;font-size:.75rem;text-transform:none;letter-spacing:0}
.mdet-v{font-size:.79rem;color:var(--tx2)}
body.ar .mdet-v{font-family:'Amiri',serif;font-size:.89rem}
.pairs-grid{display:flex;gap:.56rem;flex-wrap:wrap;margin-top:.5rem}
.pair{display:flex;flex-direction:column;align-items:center;gap:.28rem;width:62px}
.pair-img{width:46px;height:46px;border-radius:var(--r1);background:var(--bg2);background-size:cover;background-position:center;border:1px solid var(--br)}
.pair-nm{font-size:.58rem;color:var(--tx3);text-align:center;line-height:1.3}
body.ar .pair-nm{font-family:'Amiri',serif;font-size:.7rem}
/* Cart/Wishlist drawer */
.cart-ov{position:fixed;inset:0;z-index:200;background:rgba(26,14,5,.34);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .28s}
.cart-ov.open{opacity:1;pointer-events:all}
.cdrawer{position:fixed;top:0;inset-inline-end:-400px;width:370px;max-width:100vw;height:100%;background:var(--surf);border-inline-start:1px solid var(--br);z-index:201;display:flex;flex-direction:column;transition:inset-inline-end .3s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 28px rgba(26,14,5,.1)}
.cdrawer.open{inset-inline-end:0}
.cd-hdr{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.3rem;border-bottom:1px solid var(--br)}
.cd-title{font-family:'DM Sans',sans-serif;font-size:1.15rem;font-weight:700;color:var(--tx)}
body.ar .cd-title{font-family:'Amiri',serif}
.cd-close{color:var(--tx3);padding:.18rem;border-radius:var(--r1);transition:color var(--tr)}
.cd-close:hover{color:var(--tx)}
.cd-close svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.cd-list{flex:1;overflow-y:auto;padding:.8rem 1.3rem}
.ci{display:flex;gap:.75rem;padding:.78rem 0;border-bottom:1px solid var(--br);align-items:flex-start}
.ci-img{width:50px;height:50px;border-radius:var(--r1);background:var(--bg2);background-size:cover;background-position:center;border:1px solid var(--br);flex-shrink:0}
.ci-info{flex:1}
.ci-name{font-size:.81rem;font-weight:600;color:var(--tx);margin-bottom:.1rem;line-height:1.3}
body.ar .ci-name{font-family:'Amiri',serif}
.ci-var{font-size:.69rem;color:var(--tx3);margin-bottom:.28rem}
body.ar .ci-var{font-family:'Amiri',serif}
.ci-price{font-family:'DM Sans',sans-serif;font-size:.96rem;font-weight:700;color:var(--price,#641D2B)}
.ci-qty{display:flex;align-items:center;gap:.34rem;margin-top:.32rem}
.ci-qb{width:20px;height:20px;border-radius:4px;background:var(--bg2);border:1px solid var(--br);color:var(--tx2);font-size:.86rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--tr)}
.ci-qb:hover{background:var(--br)}
.ci-qn{font-size:.8rem;min-width:18px;text-align:center;color:var(--tx)}
.ci-rm{color:var(--tx4);margin-inline-start:auto;transition:color var(--tr);flex-shrink:0;padding:.16rem}
.ci-rm:hover{color:var(--burg)}
.ci-rm svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.cd-ftr{padding:1rem 1.3rem;border-top:1px solid var(--br)}
.cod-note{display:flex;align-items:center;gap:.38rem;background:var(--gpale);border:1px solid rgba(201,169,110,.22);border-radius:var(--r1);padding:.46rem .7rem;margin-bottom:.7rem;font-size:.72rem;color:var(--tx2)}
[data-theme=dark] .cod-note{background:rgba(201,169,110,.08)}
body.ar .cod-note{font-family:'Amiri',serif;font-size:.84rem}
.cod-note svg{width:13px;height:13px;stroke:var(--gdk);fill:none;stroke-width:1.8;flex-shrink:0}
.cd-total{display:flex;justify-content:space-between;font-size:.92rem;font-weight:600;color:var(--tx);margin-bottom:.78rem}
.cd-total-v{font-family:'DM Sans',sans-serif;font-size:1.18rem;font-weight:700;color:var(--price,#641D2B)}
.cd-checkout{display:block;width:100%;padding:.83rem;background:var(--grn);color:#fff;border:none;border-radius:var(--r1);font-size:.86rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:background var(--tr);box-shadow:0 4px 16px rgba(45,74,62,.24);font-family:'DM Sans',sans-serif}
body.ar .cd-checkout{font-family:'Amiri',serif;font-size:.96rem;text-transform:none;letter-spacing:0}
.cd-checkout:hover{background:var(--gdark)}
.cd-note-txt{text-align:center;font-size:.71rem;color:var(--tx3);margin-top:.48rem}
body.ar .cd-note-txt{font-family:'Amiri',serif}
.cd-empty{text-align:center;padding:2.8rem 1rem;color:var(--tx3)}
.cd-empty svg{width:40px;height:40px;stroke:var(--br2);fill:none;stroke-width:1.3;margin:0 auto .7rem}
.cd-empty p{font-size:.85rem}
body.ar .cd-empty p{font-family:'Amiri',serif}
/* Why us */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(188px,1fr));gap:2rem}
.wi{text-align:center;padding:1.3rem .95rem;border-radius:var(--r2);transition:background var(--tr)}
.wi:hover{background:var(--bg2)}
.w-ico{width:62px;height:62px;border-radius:50%;background:var(--glt);border:1px solid var(--gmd);display:flex;align-items:center;justify-content:center;margin:0 auto .9rem;transition:all var(--tr)}
.wi:hover .w-ico{background:var(--gmd)}
.w-ico svg{width:24px;height:24px;stroke:var(--grn);fill:none;stroke-width:1.65}
.wi h3{font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:700;color:var(--tx);margin-bottom:.38rem}
body.ar .wi h3{font-family:'Amiri',serif}
.wi p{font-size:.81rem;color:var(--tx3);line-height:1.72}
body.ar .wi p{font-family:'Amiri',serif;font-size:.91rem}
/* Testimonials */
.test-sec{
  background:var(--bg2);
  padding-top:2rem;
  padding-bottom:2rem;
}
.test-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
}
.tc{background:var(--surf);border:1px solid var(--br);border-radius:var(--r2);padding:1.3rem;box-shadow:var(--s1);transition:box-shadow var(--tr),transform var(--tr);display:flex;flex-direction:column}
.tc:hover{box-shadow:var(--s2);transform:translateY(-3px)}
.t-stars{color:var(--gold);font-size:.82rem;letter-spacing:.04em;margin-bottom:.78rem}
.t-text{font-family:'DM Sans',sans-serif;font-size:.94rem;color:var(--tx2);line-height:1.82;margin-bottom:.9rem;font-style:italic;flex:1}
body.ar .t-text{font-family:'Amiri',serif;font-size:.98rem;font-style:normal}
.t-auth{display:flex;align-items:center;gap:.6rem}
.t-av{width:34px;height:34px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:700;color:var(--grn);border:1px solid var(--br);flex-shrink:0}
.t-nm{font-size:.83rem;color:var(--tx);font-weight:600;display:block}
body.ar .t-nm{font-family:'Amiri',serif}
.t-lc{font-size:.71rem;color:var(--tx3);display:block}
/* Credibility */
.cred-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.15rem}
.cr{background:var(--bg2);border:1px solid var(--br);border-radius:var(--r2);padding:1.38rem;transition:box-shadow var(--tr),transform var(--tr)}
.cr:hover{box-shadow:var(--s2);transform:translateY(-3px)}
.cr-ico{font-size:1.4rem;margin-bottom:.58rem}
.cr-title{font-family:'DM Sans',sans-serif;font-size:1.02rem;font-weight:700;color:var(--tx);margin-bottom:.24rem}
body.ar .cr-title{font-family:'Amiri',serif}
.cr-txt{font-size:.8rem;color:var(--tx2);line-height:1.62;white-space:pre-line}
body.ar .cr-txt{font-family:'Amiri',serif;font-size:.9rem}
/* Policy sheet */
.pol-ov{position:fixed;inset:0;z-index:400;background:rgba(26,14,5,.5);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .28s;display:flex;align-items:flex-end;justify-content:center}
.pol-ov.open{opacity:1;pointer-events:all}
.pol-sheet{background:var(--surf);border-radius:var(--r3) var(--r3) 0 0;width:100%;max-width:700px;max-height:86vh;overflow:hidden;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,0,0,1)}
.pol-ov.open .pol-sheet{transform:translateY(0)}
.pol-hdr{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.6rem;border-bottom:1px solid var(--br)}
.pol-title{font-family:'DM Sans',sans-serif;font-size:1.18rem;font-weight:700;color:var(--tx)}
body.ar .pol-title{font-family:'Amiri',serif}
.pol-close{color:var(--tx3);padding:.18rem;border-radius:var(--r1);transition:color var(--tr)}
.pol-close:hover{color:var(--tx)}
.pol-close svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.pol-body{flex:1;overflow-y:auto;padding:1.6rem}
.pol-body h3{font-family:'DM Sans',sans-serif;font-size:1.05rem;font-weight:700;color:var(--tx);margin:1.1rem 0 .42rem}
body.ar .pol-body h3{font-family:'Amiri',serif}
.pol-body p{font-size:.85rem;color:var(--tx2);line-height:1.78;margin-bottom:.42rem}
body.ar .pol-body p{font-family:'Amiri',serif;font-size:.95rem}
/* Login modal */
.login-ov{position:fixed;inset:0;z-index:350;background:rgba(26,14,5,.45);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .28s;display:flex;align-items:center;justify-content:center;padding:1rem}
.login-ov.open{opacity:1;pointer-events:all}
.login-box{background:var(--surf);border-radius:var(--r2);box-shadow:var(--s4);width:100%;max-width:400px;overflow:hidden;transform:scale(.96) translateY(10px);transition:transform .3s cubic-bezier(.2,0,0,1)}
.login-ov.open .login-box{transform:scale(1) translateY(0)}
.login-hdr{padding:1.38rem 1.5rem 0;display:flex;justify-content:space-between;align-items:flex-start}
.login-title{font-family:'DM Sans',sans-serif;font-size:1.38rem;font-weight:700;color:var(--tx)}
body.ar .login-title{font-family:'Amiri',serif}
.login-sub{font-size:.79rem;color:var(--tx3);margin-top:.16rem}
body.ar .login-sub{font-family:'Amiri',serif}
.login-close{color:var(--tx3);transition:color var(--tr)}
.login-close:hover{color:var(--tx)}
.login-close svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.login-body{padding:1.25rem 1.5rem 1.5rem}
.ff{margin-bottom:.88rem}
.ff label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);margin-bottom:.3rem}
body.ar .ff label{font-family:'Amiri',serif;font-size:.84rem;text-transform:none;letter-spacing:0}
.ff input{width:100%;padding:.67rem .84rem;background:var(--bg2);border:1.5px solid var(--br);border-radius:var(--r1);font-size:.85rem;color:var(--tx);font-family:'DM Sans',sans-serif;outline:none;transition:border-color var(--tr)}
body.ar .ff input{font-family:'Amiri',serif}
.ff input:focus{border-color:var(--grn)}
.login-btn{width:100%;padding:.76rem;background:var(--grn);color:#fff;border:none;border-radius:var(--r1);font-size:.86rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:background var(--tr);box-shadow:0 4px 16px rgba(45,74,62,.23);margin-top:.44rem;font-family:'DM Sans',sans-serif}
body.ar .login-btn{font-family:'Amiri',serif;text-transform:none;letter-spacing:0}
.login-btn:hover{background:var(--gdark)}
.login-alt{text-align:center;font-size:.75rem;color:var(--tx3);margin-top:.78rem}
body.ar .login-alt{font-family:'Amiri',serif;font-size:.88rem}
.login-alt span{color:var(--grn);font-weight:600;cursor:pointer}
/* Footer */
footer{background:#1C1715;color:#E9DDC8;padding:3.8rem 1.6rem 2rem}
[data-theme=dark] footer{background:#0F0A08}
.ft-in{max-width:1440px;margin:0 auto}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.3rem;margin-bottom:2.6rem}
.ft-logo-ar{font-family:'Amiri',serif;font-size:1.38rem;font-weight:700;color:#E9DDC8;display:block;margin-bottom:.18rem;line-height:1.2}
.ft-logo-en{font-family:'DM Sans',sans-serif;font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.68rem}
.ft-desc{font-size:.82rem;line-height:1.78;color:rgba(240,226,196,.44);max-width:222px;margin-bottom:1rem}
body.ar .ft-desc{font-family:'Amiri',serif;font-size:.92rem}
.ft-soc{display:flex;gap:.42rem;flex-wrap:wrap}
.ft-s{width:30px;height:30px;border-radius:var(--r1);border:1px solid rgba(201,169,110,.16);display:flex;align-items:center;justify-content:center;color:rgba(201,169,110,.44);transition:border-color var(--tr),color var(--tr)}
.ft-s:hover{border-color:var(--gold);color:var(--gold)}
.ft-s svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.ft-col h4{font-family:'DM Sans',sans-serif;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.88rem}
body.ar .ft-col h4{font-family:'Amiri',serif;font-size:11px;letter-spacing:0;text-transform:none}
.ft-col ul{list-style:none}
.ft-col ul li{margin-bottom:.4rem}
.ft-col ul li a{font-size:.81rem;color:rgba(240,226,196,.42);transition:color var(--tr);cursor:pointer}
body.ar .ft-col ul li a{font-family:'Amiri',serif;font-size:.9rem}
.ft-col ul li a:hover{color:var(--gpale)}
.ft-bot{border-top:1px solid rgba(201,169,110,.09);padding-top:1.3rem;padding-inline-end:3.2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem}
.ft-copy{font-size:.75rem;color:rgba(240,226,196,.28)}
body.ar .ft-copy{font-family:'Amiri',serif}
.pay-icons{display:flex;gap:.28rem;flex-wrap:wrap}
.pi{background:rgba(255,255,255,.04);border:1px solid rgba(201,169,110,.12);border-radius:4px;padding:.17rem .42rem;font-size:.65rem;font-weight:700;color:rgba(201,169,110,.42);letter-spacing:.03em}
/* Toast */
.toast{
  position:fixed;
  bottom:24px;
  inset-inline-end:24px;   /* logical — left in RTL, right in LTR */
  background:#2A1A14;
  color:#fff;
  padding:12px 18px;
  border-radius:8px;
  font-size:13px;
  font-family:'Amiri',serif;
  z-index:9999;
  direction:rtl;
  max-width:280px;
  line-height:1.5;
  font-weight:600;
  box-shadow:0 6px 22px rgba(42,26,20,.38);
  /* hidden by default — JS adds .show */
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.toast.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.toast.success{border-inline-end:3px solid #4CAF50}
.toast.error{border-inline-end:3px solid #e53935}
@keyframes toastIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
/* Scroll to top */
.stt{position:fixed;bottom:2rem;inset-inline-end:1.3rem;width:38px;height:38px;border-radius:50%;background:var(--grn);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:90;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s,background var(--tr);box-shadow:0 4px 14px rgba(45,74,62,.26)}
.stt.show{opacity:1;transform:translateY(0)}
.stt:hover{background:var(--gdark)}
.stt svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2}
/* Responsive */


/* ═══════════════════════════════════════════════════════════════════════
   PERFORMANCE — LCP / CLS / INP optimisations
   ═══════════════════════════════════════════════════════════════════════ */

/* LCP — hero bg: force GPU layer, reserve full viewport height */
.hbg{
  transform:translateZ(0);   /* promote to compositor layer */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* Stable hero height prevents CLS during slide init */


/* CLS — announcement bar: fixed height to prevent reflow */


/* CLS — product grid: reserve card height before JS renders */
#prodGrid:empty{min-height:420px}
#catGrid:empty{min-height:160px}
#whyGrid:empty{min-height:200px}
#testGrid:empty{min-height:240px}

/* CLS — img-lazy placeholder: block size before image loads */
.img-a,.img-b{
  background-color:var(--bg2);
}

/* INP — touch target minimum size */
.ibtn,.qbtn,.ci-qb{
  min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
}
/* .burger also carries .ibtn (for shared sizing/hover styles), so the INP
   touch-target rule above (equal specificity, later in source order) was
   silently winning over ".burger{display:none}" at line 187 at ALL widths —
   the burger was only ever hidden at desktop because nobody had reason to
   look until the mobile show-rules (responsive.css/mobile-final.css, which
   load after this file and correctly re-assert display:flex at <=900px)
   masked it. Re-assert the hide here, after the rule that was beating it,
   without touching those later mobile-only rules at all. */
.burger{display:none}
.lbtn,.fpill,.hdot{
  display:inline-flex;align-items:center;justify-content:center;
}
.hdot{min-width:28px;min-height:28px}

/* INP — remove 300ms tap delay on mobile */
html{touch-action:manipulation}
a,button,.fpill,.spill,.vchip,.lbtn{touch-action:manipulation}

/* INP — paint containment on interactive cards */
.pc{
  isolation:isolate;
}

/* INP — instant hover feedback (no layout-triggering props) */
.atc:active{opacity:.85;transform:none}
.btn:active{opacity:.85}

/* Smooth font rendering */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* content-visibility for off-screen sections (improves INP via reduced rendering) */
.test-sec{
  content-visibility:auto;
  contain-intrinsic-size:0 400px;
}

/* Reduce motion — honour user preference */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .hbg{transition:none}
  html{scroll-behavior:auto}
}

/* High contrast mode support */
@media(forced-colors:active){
  .btn-g{border:2px solid ButtonText}
  .atc{border:2px solid ButtonText}
}

/* ── Loading states ─────────────────────────────────────────────── */
.btn-loading{
  opacity:.65;
  cursor:not-allowed;
  pointer-events:none;
}
/* Skeleton shimmer — used by showProductSkeleton() in app.js */
.skeleton{
  background:linear-gradient(90deg,
    var(--bg2) 25%,
    var(--bg3) 50%,
    var(--bg2) 75%);
  background-size:200% 100%;
  animation:skel 1.4s infinite;
  border-radius:4px;
}
@keyframes skel{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* Print styles — hide interactive chrome */
@media print{
  header,.ann,.stt,.cart-ov,.cdrawer,#adminPortal{display:none!important}

  body{font-size:12pt;color:#000;background:#fff}
}
button:focus,
button:focus-visible,
.vchip:focus,
.vchip:focus-visible,
.fpill:focus,
.fpill:focus-visible,
.spill:focus,
.spill:focus-visible{
  outline:none !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent;
}
@media (max-width:768px){

  .hdr,
  .sec,
  .hcont,
  .ft-in{
    padding-left:16px;
    padding-right:16px;
  }

}
.cart-bump{
  animation:cartBump .45s ease;
}

@keyframes cartBump{
  0%{transform:scale(1)}
  20%{transform:scale(1.25) rotate(-8deg)}
  40%{transform:scale(1.25) rotate(8deg)}
  60%{transform:scale(1.15) rotate(-5deg)}
  80%{transform:scale(1.1) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}

/* Signature black & white — contemporary heritage visual system. */
:root{--ivory:#F7F3EC;--white:#FFFFFF;--black:#171717;--black-deep:#0D0D0D;--charcoal:#242424;--burgundy:#641D2B;--gold:#B89455;--gold-light:#D2B879;--taupe:#B8AEA0;--coffee-brown:#4A3327;--text-primary:#171717;--text-secondary:#625C55;--text-muted:#91897F;--border:#D9D0C3;--bg:var(--white);--bg2:#EEE8DE;--bg3:#E3DACE;--surf:var(--white);--br:var(--border);--br2:#C9BEAF;--tx:var(--text-primary);--tx2:var(--text-secondary);--tx3:var(--text-muted);--tx4:var(--taupe);--gdk:var(--gold);--gpale:#F3ECDF;--grn:var(--black);--glt:rgba(23,23,23,.06);--gmd:rgba(23,23,23,.12);--gdark:var(--black-deep);--burg:var(--burgundy);--terra:var(--burgundy);
  /* Price accent — a deepened gold calibrated for ~4.6:1 text contrast on white, distinct from decorative --gold so price stays legible AND gold stays rare/valuable elsewhere */
  --price:#2D4A3E;
  --s1:0 4px 14px rgba(0,0,0,.06);--s2:0 12px 32px rgba(0,0,0,.08);--s3:0 24px 60px rgba(0,0,0,.12);--s4:0 24px 60px rgba(0,0,0,.16);--r1:3px;--r2:5px;--r3:8px;--rp:3px;--tr:.3s cubic-bezier(.2,0,0,1);--tsp:.3s cubic-bezier(.2,0,0,1)}
[data-theme=dark]{--bg:var(--black-deep);--bg2:var(--charcoal);--bg3:#33302D;--surf:#171717;--br:#4B4741;--br2:#625C55;--tx:#F7F3EC;--tx2:#D9D0C3;--tx3:#B8AEA0;--tx4:#91897F;--glt:rgba(247,243,236,.08);--gmd:rgba(247,243,236,.14);--gpale:#242424;--price:#3D6B5A}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--tx);letter-spacing:.005em}body.ar,body.ar .ann,body.ar nav a,body.ar .mob-nav a,body.ar .btn,body.ar .sec-title,body.ar .kicker,body.ar .p-name,body.ar .p-desc,body.ar .fpill,body.ar .atc,body.ar .m-name,body.ar .m-desc,body.ar .m-lbl,body.ar .logo-ar{font-family:'Noto Naskh Arabic',serif}
.ann,[data-theme=dark] .ann{background:var(--burgundy);color:var(--ivory);padding:7px 0;font-weight:600}header,[data-theme=dark] header{background:color-mix(in srgb,var(--bg) 94%,transparent);border-color:var(--border)}.hdr{max-width:1440px;padding:1.4rem 2rem}.logo{align-items:center}.logo-ar{font-family:'Noto Naskh Arabic',serif;color:var(--black);font-size:1.25rem}.logo-en{font-family:'DM Sans',sans-serif;letter-spacing:.16em;font-size:.67rem;color:var(--burgundy)}body.ar .logo-ar{font-size:1.45rem}body.ar .logo-en{font-size:.58rem;color:var(--burgundy)}nav a{color:var(--text-secondary);border-radius:0;font-size:.68rem;letter-spacing:.12em;padding:.55rem .72rem}nav a:hover{color:var(--burgundy);background:transparent}.lang-sw{background:transparent;border-color:var(--border);border-radius:var(--r1)}.lbtn{border-radius:0}.lbtn.on{background:var(--black);color:var(--white)}.lbtn:hover:not(.on),.ibtn:hover{color:var(--burgundy);background:transparent}.ic-badge{background:var(--burgundy);color:var(--white);border-radius:50%}
.hero{height:min(600px,calc(100vh - 84px));min-height:500px;background:var(--bg);border-bottom:1px solid var(--border)}.hero::before{content:'HAFEZ MUSTAFA';position:absolute;inset-inline-end:4%;top:13%;font:600 clamp(3rem,10vw,10rem)/.8 'Cormorant Garamond',serif;letter-spacing:-.06em;color:rgba(23,23,23,.035);writing-mode:vertical-rl;pointer-events:none}.hpill{background:transparent;border-color:var(--burgundy);color:var(--burgundy);border-radius:0;padding:.35rem .6rem;font-size:.65rem;letter-spacing:.1em}.htitle{font-family:'Cormorant Garamond',serif;font-size:clamp(2.6rem,5.2vw,5rem);font-weight:600;letter-spacing:-.045em}.htitle em{color:var(--burgundy);font-style:normal}.hsub{color:var(--text-secondary);font-size:1rem;max-width:34rem;font-weight:400}.btn,.atc,.m-atc{border-radius:var(--r1);min-height:44px}.btn-g,.m-atc{background:var(--black);box-shadow:none}.btn-g:hover,.m-atc:hover{background:var(--burgundy);box-shadow:none;transform:translateY(-1px)}.btn-o{border-color:var(--black);border-radius:var(--r1);background:transparent;color:var(--black)}.btn-o:hover{background:var(--black);color:var(--white)}
.trust{background:var(--surf);border-color:var(--border)}.trust-in{max-width:1440px;justify-content:space-between;padding:1rem clamp(1.5rem,7vw,8rem)}.ti{font-size:.66rem;letter-spacing:.1em;color:var(--text-secondary)}.ti svg{stroke:var(--burgundy)}.sec{padding:clamp(2.75rem,5.5vw,4.75rem) clamp(1rem,4vw,3rem)}.sec-in{max-width:1440px}.sec-hd{text-align:start;max-width:40rem;margin:0 0 2.25rem}.kicker{color:var(--burgundy);font-size:.64rem;letter-spacing:.2em}.sec-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,3.4vw,3.2rem);font-weight:600;letter-spacing:-.035em}.sec-div{margin:.9rem 0;width:56px;background:var(--gold)}.sec-sub{margin:0;color:var(--text-secondary);max-width:34rem}.prod-sec{background:var(--surf);border-color:var(--border)}.search-input{border-radius:0;border-color:var(--border);background:var(--bg2)}.fpill,.spill,.chip{border-radius:0;background:transparent;border-color:var(--border)}.fpill:hover,.spill:hover{border-color:var(--burgundy);color:var(--burgundy);background:transparent}
.prod-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}.pc{border-radius:0;border-color:var(--border);box-shadow:none}.pc:hover{transform:translateY(-3px);box-shadow:var(--s2);border-color:var(--coffee-brown)}.pc-img{aspect-ratio:4/5;background:var(--bg2)}.img-a,.img-b{background-color:var(--bg2);background-repeat:no-repeat}.pbadge{border-radius:0;background:var(--burgundy)}.pb-best,.pb-new{background:var(--black)}.pc-body{padding:1.15rem}.p-name,.m-name{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:600}.p-desc{color:var(--text-secondary)}.p-price{color:var(--price)}.atc{background:var(--black);border-color:var(--black);color:var(--white)}.atc:hover{background:var(--burgundy);border-color:var(--burgundy);box-shadow:none;transform:none}.qs-trig{background:var(--black);border-radius:0}.qs-trig:hover{background:var(--burgundy)}.modal,.pol-sheet,.cdrawer,.co-sheet{border-radius:0;border:1px solid var(--border);box-shadow:var(--s4)}.m-img{background:var(--bg2)}.m-close,.cd-close,.pol-close{border-radius:0}.vchip{border-radius:0}.m-atc{border-radius:0}.why-grid,.test-grid{gap:1px;background:var(--border);border:1px solid var(--border)}.wi,.tc{border-radius:0;background:var(--surf);box-shadow:none}.test-sec{background:var(--black-deep);color:var(--ivory)}.test-sec .sec-title{color:var(--ivory)}.test-sec .kicker{color:var(--gold-light)}.test-sec .tc{background:var(--charcoal);color:var(--ivory)}footer{background:var(--black-deep)}.ft-logo-ar{font-family:'Noto Naskh Arabic',serif;color:var(--white)}.ft-logo-en{color:var(--gold-light)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--burgundy)!important;outline-offset:3px;box-shadow:none!important}
@media(max-width:1023px){.prod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:640px){.hdr{padding:.8rem 1rem}.sec{padding:2.75rem 1rem}.sec-title{font-size:2.1rem}.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.pc-body{padding:.85rem}.p-name{font-size:1.08rem}.trust-in{justify-content:flex-start;padding:1rem;gap:.65rem 1.2rem}.ti{font-size:.58rem}.test-sec{content-visibility:visible}}

/* ── Hero restructure (pass 3 + 4): single static image, no overlay, no
   carousel. The 3-slide auto-rotating carousel crossfaded on a plain
   opacity transition with both slides' text stacked at position:absolute
   the whole time, so mid-transition (every 5.5s, automatically) two
   different headlines/CTAs were visibly overlapping — a real bug, not a
   screenshot fluke. Removing the carousel removes that bug entirely as a
   side effect. Also dropped the decorative vertical "HAFEZ MUSTAFA"
   watermark and the "TURKISH COFFEE" kicker pseudo-label under the CTA:
   both were purely decorative, and the kicker duplicated the pill
   directly above it.
   Pass 4: per feedback, the intro copy block (#heroIntro: kicker/headline/
   subtitle/CTA) moved in the HTML to AFTER the hero image (below it, not
   above/overlaid), and is now hidden by default — it only shows when the
   admin turns on the new "Hero Intro Text" feature flag from
   Admin → Feature Flags (see app.js applyFeatureFlags() and admin.js
   FLAG_META). Default state ships with just the clean product photo,
   matching the reference design. ── */
.hero::before,.hcont::after,body.ar .hcont::after{content:none}
.hero{position:static;height:auto;min-height:0;overflow:visible;background:var(--bg);border-bottom:none}
.hero::after{display:none}
.hcont{position:static;max-width:640px;margin:0 auto;padding:clamp(2.5rem,6vw,4.25rem) 1.5rem clamp(1.75rem,3.5vw,2.75rem);text-align:center}
.hcont>*{margin-inline:auto}
[dir=rtl] .hcont,body:not(.ar) .hcont{text-align:center}
body:not(.ar) .hcont>*{margin-left:auto;margin-right:auto}
.hbtns,body:not(.ar) .hbtns{justify-content:center}
.htitle{max-width:20ch}
.hero-img{position:relative;width:100%;aspect-ratio:16/7;overflow:hidden;background:var(--bg2)}
.hero-img .hbg{position:absolute;inset:0;background-image:var(--hero-image-desktop,none)!important;background-size:cover;background-position:center;filter:none;transition:none}
/* Hidden by default; admin flag adds .intro-visible to reveal it. */
#heroIntro{display:none}
#heroIntro.intro-visible{display:block}
@media(max-width:640px){
  .hero-img{aspect-ratio:4/5}
  .hcont{padding:2rem 1.25rem 1.5rem}
  .htitle{max-width:16ch}
}

/* ── Geometry: a previous pass had reverted card/pill/button corners and
   shadows to the old site's bulky pill + heavy-shadow treatment on top of
   the rebrand colors. That directly conflicts with the brand doc's explicit
   UI geometry rule (cards 3–6px, buttons 3–5px, images 0–6px, "avoid
   excessive rounded cards / 18px+ radius / large pills / SaaS-style UI") and
   this brief's "don't make it look like a SaaS dashboard" requirement, so
   it's removed rather than carried forward — the small architectural radii
   and soft shadows already defined in :root above are what actually apply
   now. The rules below just point interactive elements at those tokens. ── */
.pc{transition:transform .33s,box-shadow .33s,border-color .28s}.pc:hover{transform:translateY(-6px);border-color:var(--burgundy)}
.modal{border-radius:var(--r3)}.pol-sheet,.co-sheet{border-radius:var(--r3) var(--r3) 0 0}.m-close{border-radius:50%}.cd-close,.pol-close{border-radius:var(--r1)}.vchip{border-radius:var(--r1)}.m-atc{border-radius:var(--r1)}

/* Bug fix: the rebrand block above turns .why-grid/.test-grid into a
   hairline table (1px gap + a filled --border background showing through
   the seams) which only looks right with square (radius:0) cells. Now that
   .wi/.tc are rounded floating cards again, those 1px seams show as small
   triangular slivers of --border colour at every rounded corner junction —
   the odd notches and "different background" patches reported when testing
   this section. Restore normal spacing with no shared seam background. */
.why-grid,.test-grid{gap:1.75rem;background:none;border:none}

/* Bug fix: .test-sec is a permanently dark-styled band (background:
   var(--black-deep), .tc background: var(--charcoal)) regardless of the
   site's light/dark toggle, but .t-text/.t-nm/.t-lc colour themselves with
   --tx2/--tx/--tx3, which follow the toggle. In light mode those resolve to
   near-black tones, making testimonial text nearly invisible on its always-
   dark card background. Pin these to fixed light tones so they stay
   readable in both light and dark mode. */
.test-sec .t-text{color:#D9D0C3}
.test-sec .t-nm{color:#F7F3EC}
.test-sec .t-lc{color:#B8AEA0}
.test-sec .t-av{background:rgba(247,243,236,.08);color:#F7F3EC;border-color:#4B4741}

/* Bug fix: the Admin Portal login fields (#adminEmail/#adminPass) never had
   an autofill override. Chrome/Edge force their own yellow highlight
   (internal -webkit-autofill UA style) onto an autofilled field's
   background, ignoring the dark inline background these inputs are given —
   showing as an ugly yellow/olive box behind saved-credential text, since
   this card is dark-themed regardless of the site's light/dark toggle. The
   inset box-shadow trick is required because WebKit ignores a plain
   background-color override on autofilled fields; the huge spread just
   paints over the whole field. Color matches #2A1A14 (login card bg) with
   the input's own rgba(233,221,200,.06) tint composited on top. */
#adminEmail:-webkit-autofill,
#adminEmail:-webkit-autofill:hover,
#adminEmail:-webkit-autofill:focus,
#adminPass:-webkit-autofill,
#adminPass:-webkit-autofill:hover,
#adminPass:-webkit-autofill:focus{
  -webkit-text-fill-color:#E9DDC8;
  -webkit-box-shadow:0 0 0px 1000px #35261F inset;
  box-shadow:0 0 0px 1000px #35261F inset;
  caret-color:#E9DDC8;
  transition:background-color 5000s ease-in-out 0s;
}
#adminEmail:autofill,#adminPass:autofill{color:#E9DDC8;background:#35261F}


/* ========================================================================
   HAFEZ MUSTAFA — TARGETED STOREFRONT POLISH
   Scope: header geometry, hero height, section rhythm, product-grid balance,
   typography legibility, and contrast only. No business logic changes.
   ======================================================================== */

/* 1) Header — use the available horizontal space instead of leaving large
   dead zones at both edges. Keep the agreed icon order unchanged. */
@media(min-width:901px){
  .hdr{
    max-width:none;
    width:100%;
    padding:0 3.25rem;
    min-height:82px;
  }
  .logo-mark{
    height:78px;
    width:auto;
  }
  .hdr-r{gap:.72rem}
  .ibtn{padding:.42rem}
  .ibtn svg{width:21px;height:21px;stroke-width:1.8}
  #deskNav{gap:.25rem}
  body.ar #deskNav a{font-size:15px;padding:.45rem .72rem}
  .lang-sw{padding:2px}
  .lbtn{font-size:10px;padding:.3rem .62rem}
}

/* 2) Hero — keep the approved image and simply reduce its vertical footprint
   to the proportions of the proposed storefront. No new content or overlay. */
@media(min-width:641px){
  .hero-img{
    width:100%;
    aspect-ratio:16/7;
    height:auto;
    min-height:0;
    max-height:none;
    overflow:hidden;
  }
}

/* 3) Visual rhythm — tighter, deliberate section cadence. Avoid both the
   oversized dead areas and abrupt density changes between sections. */
@media(min-width:901px){
  .sec{padding-top:3.4rem;padding-bottom:3.4rem}
  .prod-sec{padding-top:3.6rem;padding-bottom:4rem}
  .why-grid{margin-top:1.25rem}
  .test-sec{padding-top:3.4rem;padding-bottom:3.6rem}
}

/* 4) Products — center a small catalogue instead of pushing two products to
   one side of a four-column grid. When more products exist, the same rule
   naturally expands across the available width. */
.prod-grid{
  grid-template-columns:repeat(auto-fit,minmax(280px,320px));
  justify-content:center;
  gap:1.35rem;
}
@media(max-width:1023px){
  .prod-grid{grid-template-columns:repeat(auto-fit,minmax(260px,320px));}
}
@media(max-width:640px){
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:.75rem}
}

/* 5) Product section composition — center the heading/control relationship
   so the section reads as one composition rather than three disconnected
   columns. */
.prod-sec .sec-hd{
  max-width:760px;
  margin:0 auto 1.9rem;
  text-align:center;
}
.prod-sec .sec-div{margin:.8rem auto}
.prod-sec .sec-sub{max-width:560px}
.search-wrap{max-width:760px;margin:0 auto 1rem}
.filter-bar{max-width:760px;margin:0 auto 1.25rem}

/* 6) Typography — increase only the storefront text that was visibly too
   small in the supplied screenshots. */
body.ar #deskNav a{font-size:15px}
body.ar .ti{font-size:.86rem}
body.ar .sec-sub{font-size:1rem;line-height:1.85}
body.ar .fcount{font-size:.9rem}
body.ar .fpill{font-size:14px}
body.ar .p-name{font-size:1.2rem}
body.ar .p-desc{font-size:.92rem;line-height:1.68}
body.ar .p-price{font-size:1.48rem}
body.ar .atc{font-size:.96rem}
body.ar .wi h3{font-size:1.12rem}
body.ar .wi p{font-size:.98rem;line-height:1.8}
body.ar .t-text{font-size:1.05rem;line-height:1.9}
body.ar .t-nm{font-size:.92rem}
body.ar .t-lc{font-size:.8rem}
body.ar .ft-desc{font-size:1rem}
body.ar .ft-col h4{font-size:12px}
body.ar .ft-col ul li a{font-size:.96rem}
body.ar .ft-copy{font-size:.8rem}

/* 7) Contrast — strengthen text/borders without changing the palette.
   Gold remains an accent rather than becoming a general UI color. */
body.ar .ti{color:var(--tx2)}
body.ar .p-desc{color:var(--tx2)}
body.ar .sec-sub{color:var(--tx2)}
.search-input{color:var(--tx);font-weight:500}
.search-input::placeholder{color:var(--tx3);opacity:1}
.fpill{color:var(--tx2);border-color:var(--br2)}
.fcount{color:var(--tx2)}
.pc{border-color:var(--br2)}
.pc:hover{border-color:var(--burg)}

/* Footer readability: keep the same dark section and gold accent, but make
   secondary copy readable at normal desktop viewing distance. */
.ft-desc{color:rgba(240,226,196,.68)}
.ft-col ul li a{color:rgba(240,226,196,.68)}
.ft-copy{color:rgba(240,226,196,.52)}

/* ================================================================
   FINAL CROSS-VIEW POLISH — targeted fixes only
   ================================================================ */


  .prod-sec .sec-hd,
  #why .sec-hd,
  .test-sec .sec-hd{
    max-width:none;
    width:100%;
    margin-inline:auto;
    text-align:center;
  }
  .prod-sec .sec-div,
  #why .sec-div,
  .test-sec .sec-div{margin:.9rem auto;}
  /* A later "rebrand" block (~line 805, `.sec-sub{margin:0;...}`) strips the
     auto-centering margin this component needs, so — same as .sec-div just
     above — the subtitle collapses to its RTL start edge (flush right)
     instead of staying centered under the heading. Restore it here. */
  .prod-sec .sec-sub,
  #why .sec-sub,
  .test-sec .sec-sub{margin:0 auto;}

/* The product/testimonial kickers duplicate their main headings and created
   unnecessary vertical clutter on both desktop and mobile. Keep the IDs for
   CMS compatibility but don't render the duplicate visual line. */
.prod-sec #prodKick,
.test-sec #tKick{display:none!important;}

/* Why/Reviews use the same centered editorial hierarchy as Products. */
#why .sec-hd,
.test-sec .sec-hd{
  text-align:center;
  max-width:none;
  width:100%;
}
#why .sec-div,
.test-sec .sec-div{margin:.9rem auto;}

/* Dark mode: make component separators architectural, not white rules. */
[data-theme=dark]{
  --border:#342F2A;
  --br:#342F2A;
  --br2:#4A4139;
}
[data-theme=dark] .why-grid,
[data-theme=dark] .test-grid{
  background:none;
  border:0;
}
[data-theme=dark] .wi,
[data-theme=dark] .tc,
[data-theme=dark] .pc{
  border-color:#342F2A!important;
}

/* Why-Us icons: fixed after the --grn token was used for both green and dark
   backgrounds, which made the SVG strokes disappear in dark mode. */
.w-ico svg{stroke:var(--burg)!important;}
[data-theme=dark] .w-ico{
  border-color:#4A4139!important;
  background:#1C1A18!important;
}
[data-theme=dark] .w-ico svg{stroke:var(--gold-light)!important;}

/* Dark mode supporting copy: keep all small secondary text above the muted
   threshold so it doesn't disappear into the charcoal surface. */
[data-theme=dark] .wi p,
[data-theme=dark] .ti,
[data-theme=dark] .sec-sub,
[data-theme=dark] .p-desc,
[data-theme=dark] .ft-desc,
[data-theme=dark] .ft-copy,
[data-theme=dark] .ft-col ul li a{
  color:#CFC4B8!important;
}
[data-theme=dark] .ft-col h4{color:var(--gold-light)!important;}

/* Footer readability: same brand presence as the header, without turning the
   entire footer gold. */
.ft-logo-mark{
  height:52px!important;
  width:auto!important;
  max-width:220px;
}
.ft-logo-en{font-size:9px!important;}
.ft-desc{font-size:.98rem!important;line-height:1.75!important;}
.ft-col h4{font-size:11px!important;}
.ft-col ul li a{font-size:.92rem!important;}
.ft-copy{font-size:.8rem!important;line-height:1.65!important;}
.pi{font-size:.86rem!important;padding:.28rem .58rem!important;}

/* Footer direction: no override here — the footer simply inherits
   direction from <html dir> like the rest of the page (rtl for Arabic,
   ltr for English), set by setLang()/applyStaticA11yLabels() in app.js.
   A previous rule here forced `body:not(.ar) footer{direction:rtl}` —
   backwards (it applied RTL specifically to the non-Arabic/English case)
   — which mirrored the footer's grid columns (.ft-grid), the bottom bar
   (.ft-bot) and the social-icon row (.ft-soc) for English visitors while
   only patching text-direction on 4 leaf elements (.ft-desc/.ft-col/
   .ft-copy/.pi), leaving the column order itself scrambled. Removed
   rather than patched further, per the "one authoritative implementation"
   rule — inheritance already produces the correct result in both
   languages with no override needed. */

/* ========================================================================
   HAFEZ MUSTAFA — CROSS-VIEW FINAL POLISH
   Stable header/footer geometry, English logo swap, admin anti-flash,
   fixed desktop hero crop, announcement continuity, dark-mode contrast.
   ======================================================================== */
html.admin-route body > *:not(#adminPortal){display:none!important;}
html.admin-route #adminPortal{display:block!important;}

@media(min-width:901px){
  .prod-sec .sec-hd,#why .sec-hd,.test-sec .sec-hd{max-width:760px!important;margin:0 auto 2rem!important;text-align:center!important;}
  .prod-sec .sec-div,#why .sec-div,.test-sec .sec-div{margin:.9rem auto!important;}
}
.prod-sec #prodKick,.test-sec #tKick{display:none!important;}

@media(min-width:901px){.logo-mark{height:58px!important;max-width:260px!important;}}
.ft-logo-mark{height:58px!important;max-width:250px!important;width:auto!important;object-fit:contain!important;}
[data-theme=dark] .ft-logo-mark[src*="logo-english"]:not([src*="white"]){filter:none!important;}
.ft-logo-en{font-size:10px!important;letter-spacing:.1em!important;}
.ft-desc{font-size:1rem!important;line-height:1.75!important;}
.ft-col h4{font-size:12px!important;}
.ft-col ul li a{font-size:.95rem!important;}
.ft-copy{font-size:.84rem!important;line-height:1.7!important;}

[data-theme=dark]{--border:#3A332D;--br:#3A332D;--br2:#524940;}
[data-theme=dark] .trust,[data-theme=dark] #why,[data-theme=dark] .test-sec,[data-theme=dark] .prod-sec{border-color:#3A332D!important;}
[data-theme=dark] .why-grid,[data-theme=dark] .test-grid{gap:10px!important;background:none!important;border:0!important;}
[data-theme=dark] .wi,[data-theme=dark] .tc,[data-theme=dark] .pc{border:1px solid #3A332D!important;}
[data-theme=dark] .wi p,[data-theme=dark] .sec-sub,[data-theme=dark] .p-desc,[data-theme=dark] .ft-copy,[data-theme=dark] .ft-col ul li a,[data-theme=dark] .ti{color:#D6CDC2!important;}
[data-theme=dark] .wi h3,[data-theme=dark] .tc .t-text,[data-theme=dark] .t-nm{color:#F1E9DE!important;}
[data-theme=dark] .w-ico{border-color:#514840!important;background:#211A15!important;}
[data-theme=dark] .w-ico svg{stroke:var(--gold-light)!important;}
[data-theme=dark] .sec-title{color:#F5EFE7!important;}
[data-theme=dark] .kicker{color:#C98A99!important;}
[data-theme=dark] .sec-div{background:var(--gold)!important;}
[data-theme=dark] .fpill,[data-theme=dark] .spill{color:#E5DDD3!important;border-color:#524940!important;}
[data-theme=dark] .fpill.on{background:#F0E7DA!important;color:#171717!important;border-color:#F0E7DA!important;}
[data-theme=dark] .search-input{color:#F1E9DE!important;border-color:#524940!important;}
[data-theme=dark] .search-input::placeholder{color:#AFA398!important;opacity:1!important;}
[data-theme=dark] .p-price{color:var(--gold-light)!important;}
[data-theme=dark] .atc,[data-theme=dark] .m-atc,[data-theme=dark] .cd-checkout{background:#E2C27F!important;color:#171717!important;}
[data-theme=dark] .atc:hover,[data-theme=dark] .m-atc:hover,[data-theme=dark] .cd-checkout:hover{background:#8D3045!important;color:#fff!important;}

.pi,.co-submit,#tr5,[data-key="cod"],[id*="cod"]{unicode-bidi:isolate;}
body.ar .pi,body.ar .co-submit,body.ar #tr5{font-family:'IBM Plex Sans Arabic','Noto Naskh Arabic',sans-serif!important;direction:rtl!important;unicode-bidi:isolate!important;}

/* Admin portal shares the storefront visual system. */
#adminPortal{background:#0F0A05!important;color:#E9DDC8!important;font-family:'DM Sans',sans-serif!important;}
#adminPortal input,#adminPortal button,#adminPortal select,#adminPortal textarea{font-family:'DM Sans',sans-serif;}
#adminLogin{min-height:100vh!important;padding:2rem 1.25rem!important;}
#adminLogin > div{background:#1A0F08!important;border:1px solid rgba(200,165,106,.24)!important;border-radius:14px!important;box-shadow:0 24px 70px rgba(0,0,0,.48)!important;}
.admin-login-logo{display:block!important;width:min(250px,82%)!important;height:auto!important;max-height:72px!important;object-fit:contain!important;margin:0 0 1rem auto!important;}
.admin-eyebrow{color:#C8A56A!important;}
#adminLogin label{color:#B9AA9B!important;}
#adminEmail,#adminPass{background:#24150E!important;border:1px solid #5A4434!important;color:#F0E7DB!important;border-radius:8px!important;min-height:44px!important;caret-color:#E9DDC8!important;}
#adminEmail::placeholder,#adminPass::placeholder{color:#8E8176!important;}
#adminEmail:focus,#adminPass:focus{border-color:#C8A56A!important;box-shadow:0 0 0 3px rgba(200,165,106,.1)!important;}
#adminLogin #adminSignInBtn{background:#2D4A3E!important;border:0!important;color:#fff!important;min-height:44px!important;border-radius:7px!important;box-shadow:none!important;}
#adminLogin #adminSignInBtn:hover{background:#365E4E!important;}
#adminLoginErr{color:#D88B98!important;}#adminLogin a{color:#C8A56A!important;}
#adminDash{background:#0F0A05!important;min-height:100vh!important;}
#adminDash > div:first-child{background:#17110D!important;border-bottom:1px solid #3A332D!important;padding:.8rem 1.4rem!important;}
.admin-top-logo{display:block!important;width:190px!important;height:auto!important;max-height:54px!important;object-fit:contain!important;}
#adminDash > div:nth-child(2){background:#120C08!important;}
#adminDash > div:nth-child(2) > nav{background:#17110D!important;border-right:1px solid #3A332D!important;border-left:0!important;}
#adminContent{background:#0F0A05!important;color:#E9DDC8!important;}
#adminNav button{color:#C9BDB0!important;background:transparent!important;border-left:3px solid transparent!important;border-radius:0!important;}
#adminNav button:hover{color:#F2EAE0!important;background:rgba(200,165,106,.06)!important;}
#adminNav button.active,#adminNav button[aria-current="page"]{color:#F2EAE0!important;background:rgba(200,165,106,.08)!important;border-left-color:#C8A56A!important;}
#adminContent input,#adminContent select,#adminContent textarea{background:#21140D!important;color:#F0E7DB!important;border-color:#4A3D34!important;}
#adminContent input:focus,#adminContent select:focus,#adminContent textarea:focus{border-color:#C8A56A!important;box-shadow:0 0 0 3px rgba(200,165,106,.08)!important;}
#adminContent table{border-color:#3A332D!important;}#adminContent th{color:#C8A56A!important;}#adminContent td{color:#D8CEC3!important;border-color:#332C27!important;}
@media(max-width:760px){
  #adminDash > div:first-child{padding:.7rem .85rem!important;}
  .admin-top-logo{width:150px!important;max-height:44px!important;}
  #adminDash > div:nth-child(2) > nav{width:100%!important;border-right:0!important;border-bottom:1px solid #3A332D!important;}
}

/* The supplied English logo is black; footer is dark in both themes.
   :not([src*="white"]) excludes the dedicated white footer asset
   (logo-english-white.png), which the plain substring match below would
   otherwise also catch, inverting it to black/invisible against the dark
   footer background. */
.ft-logo-mark[src*="logo-english"]:not([src*="white"]){filter:none!important;}


/* Reviews belong to the storefront surface, not to the footer. */
.test-sec{
  background:var(--bg)!important;
  color:var(--tx)!important;
  border-top:1px solid var(--border)!important;
  border-bottom:1px solid var(--border)!important;
}
.test-sec .sec-title{color:var(--tx)!important;}
.test-sec .kicker{color:var(--burgundy)!important;}
.test-sec .tc{
  background:var(--surf)!important;
  color:var(--tx)!important;
  border:1px solid var(--border)!important;
}
[data-theme="dark"] .test-sec .tc{
  background:#171717!important;
  border-color:#342F2A!important;
}
footer{
  background:#0D0D0D!important;
  border-top:1px solid #342F2A!important;
}

/* ================================================================
   FINAL PATCH 05 — ADMIN BRAND SYSTEM
   Black / ivory / gold only for the admin chrome; burgundy remains
   reserved for destructive/semantic states. Arabic logo only.
   ================================================================ */
#adminPortal{
  --admin-bg:#0D0D0D!important;
  --admin-surface:#171717!important;
  --admin-surface-2:#242424!important;
  --admin-line:#342F2A!important;
  --admin-text:#F7F3EC!important;
  --admin-muted:#B8AEA0!important;
  --admin-gold:#C8A56A!important;
  background:#0D0D0D!important;
  color:#F7F3EC!important;
}
#adminPortal .admin-login-logo,
#adminPortal .admin-top-logo{content:url('./assets/Images/Brand/logo-ar-white.png')!important;}
#adminLogin > div{
  background:#171717!important;
  border-color:rgba(200,165,106,.24)!important;
}
#adminLogin #adminSignInBtn{
  background:#171717!important;
  border:1px solid #C8A56A!important;
  color:#F7F3EC!important;
}
#adminLogin #adminSignInBtn:hover{background:#242424!important;}
#adminDash{background:#0D0D0D!important;}
#adminDash > div:first-child{background:#171717!important;border-bottom-color:#342F2A!important;}
#adminDash > div:nth-child(2){background:#0D0D0D!important;}
#adminDash > div:nth-child(2) > nav{background:#171717!important;border-color:#342F2A!important;}
#adminContent{background:#0D0D0D!important;color:#F7F3EC!important;}
#adminNav button{color:#C9BDB0!important;}
#adminNav button:hover,
#adminNav button.active,
#adminNav button[aria-current="page"]{background:rgba(200,165,106,.07)!important;color:#F7F3EC!important;}
#adminNav button.active,#adminNav button[aria-current="page"]{border-inline-start-color:#C8A56A!important;}
#adminContent input,#adminContent select,#adminContent textarea{
  background:#171717!important;
  color:#F0E7DB!important;
  border-color:#4A4139!important;
}
#adminContent input:focus,#adminContent select:focus,#adminContent textarea:focus{
  border-color:#C8A56A!important;
  box-shadow:0 0 0 3px rgba(200,165,106,.08)!important;
}
/* Replace common inline green primary actions with the black/gold system. */
#adminPortal button[style*="#171717"]{color:#F7F3EC!important;}
#adminPortal button[style*="#C8A56A"]{color:#171717!important;}
#adminPortal .admin-primary{background:#171717!important;border-color:#C8A56A!important;color:#F7F3EC!important;}

/* Login must always start empty, even when the browser has a saved credential. */
#adminEmail,#adminPass{-webkit-text-fill-color:#F0E7DB!important;}


/* Testimonials are an independent storefront section; footer begins only
   after a deliberate section boundary. */
.test-sec{background:var(--bg)!important;border-top:1px solid var(--border)!important;border-bottom:1px solid var(--border)!important;}
footer{background:#0D0D0D!important;border-top:1px solid #342F2A!important;}

/* ================================================================
   ADMIN — BLACK / IVORY / GOLD ONLY
   Burgundy is reserved for destructive/error states.
   ================================================================ */
#adminPortal .admin-login-logo,
#adminPortal .admin-top-logo{
  content:url('./assets/Images/Brand/logo-ar-white.png')!important;
  filter:none!important;
}
#adminPortal .btn-primary,
#adminPortal button.primary,
#adminPortal .admin-primary,
#adminPortal button[style*="#2D4A3E"],
#adminPortal button[style*="#365E4E"]{
  background:#171717!important;
  color:#F7F3EC!important;
  border:1px solid #C8A56A!important;
}
#adminPortal .btn-primary:hover,
#adminPortal button.primary:hover,
#adminPortal .admin-primary:hover,
#adminPortal button[style*="#2D4A3E"]:hover,
#adminPortal button[style*="#365E4E"]:hover{background:#242424!important;}
#adminPortal #adminRoleBadge{color:#C8A56A!important;border-color:rgba(200,165,106,.35)!important;background:rgba(200,165,106,.08)!important;}
#adminPortal [style*="125,190,170"],
#adminPortal [style*="45,74,62"]{color:#C8A56A!important;background:rgba(200,165,106,.08)!important;border-color:rgba(200,165,106,.35)!important;}



/* English logo is a real asset, not a CSS inversion of the Arabic logo. */
#headerLogo[data-active-logo="enSrc"],
#footerLogo[data-active-logo="enSrc"]{
  filter:none!important;
}
[data-theme="dark"] #headerLogo[data-active-logo="enSrc"]{
  filter:none!important;
}
/* #footerLogo's English asset (logo-english-white.png) is already white —
   unlike the header's, which is black and needs the invert above to read
   in dark mode. This ID selector (specificity beats every .ft-logo-mark
   rule elsewhere in this file) was inverting the already-white footer logo
   back to black in dark mode, which is the actual reason the earlier
   .ft-logo-mark[src*="logo-english"]:not([src*="white"]) fix had no visible
   effect: this rule was the one actually winning. Footer just keeps the
   filter:none from the shared rule above in both themes. */

/* Admin route: hide storefront before Firebase/auth scripts execute. */
html.admin-route body > *:not(#adminPortal){display:none!important;}
html.admin-route #adminPortal{display:block!important;}

/* ================================================================
   TESTIMONIAL LEGIBILITY — LIGHT STOREFRONT
   The reviews section is light in light mode, so testimonial copy must
   use dark storefront text tokens rather than the old dark-section colors.
   ================================================================ */
body:not([data-theme="dark"]) .test-sec .tc{
  background:#FFFFFF!important;
  border-color:#D8CBB9!important;
}
body:not([data-theme="dark"]) .test-sec .t-text{
  color:#2A1A14!important;
  font-size:1rem!important;
  line-height:1.8!important;
  opacity:1!important;
}
body:not([data-theme="dark"]) .test-sec .t-nm{
  color:#2A1A14!important;
  font-size:.9rem!important;
  opacity:1!important;
}
body:not([data-theme="dark"]) .test-sec .t-lc{
  color:#6A4632!important;
  font-size:.78rem!important;
  opacity:1!important;
}
body:not([data-theme="dark"]) .test-sec .t-stars{
  color:#C8A56A!important;
  opacity:1!important;
}
body:not([data-theme="dark"]) .test-sec .t-av{
  background:#FAF6EE!important;
  color:#2A1A14!important;
  border-color:#CFC3B2!important;
}

/* ========================================================================
   HAFEZ MUSTAFA — CANONICAL UI GEOMETRY
   One physical header layout for AR/EN; responsive media ratios only.
   ======================================================================== */

/* Header: one stable physical architecture in every language — desktop.
   tools (icon cluster) = physically left, logo = center, nav = physically
   right, regardless of Arabic/English. direction:ltr is forced on the grid
   container and each grid-area assignment so language switching never
   flips which track is visually left/right; !important is kept on the
   properties this previously had to defend against older responsive/
   dark-mode patches — nothing else in the project overrides these at
   desktop widths, but there is no cost to leaving the guard in place. */
#mainHdr .hdr{
  width:100%;
  max-width:none;
  margin:0 auto;
  align-items:center;
  min-height:84px;
  height:84px;
  padding:0 3.25rem;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  grid-template-areas:"tools logo nav"!important;
  direction:ltr!important;
}
#mainHdr .hdr-r{
  grid-area:tools!important;
  justify-self:start!important;
  direction:ltr!important;
  display:flex;
  flex-direction:row!important;
  align-items:center;
  flex-shrink:0;
}
#mainHdr .logo{
  grid-area:logo!important;
  justify-self:center!important;
  direction:ltr!important;
  margin:0;
}
#mainHdr #deskNav{
  grid-area:nav!important;
  justify-self:end!important;
  direction:ltr!important;
  display:flex;
  align-items:center;
  justify-content:flex-end!important;
  flex:none;
  flex-wrap:nowrap;
}
#mainHdr #deskNav a{white-space:nowrap;direction:ltr!important;unicode-bidi:plaintext!important;}
#mainHdr .mob-nav{direction:rtl;}
#mainHdr .lang-sw{direction:ltr;}
body.ar #mainHdr .lang-sw{direction:ltr;}
body:not(.ar) #mainHdr #deskNav a{direction:ltr;unicode-bidi:plaintext;}

/* Hero image geometry: desktop 16:7, mobile 4:5. */
.hero-img{
  position:relative;
  width:100%;
  aspect-ratio:16/7;
  height:auto;
  min-height:0;
  max-height:none;
  overflow:hidden;
  background:var(--bg2);
}
.hero-img .hbg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:none;
}

/* Product image geometry: identical 4:5 frame on desktop and mobile. */
.pc-img{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  height:auto;
  min-height:0;
  overflow:hidden;
  background:var(--bg2);
}

@media(max-width:900px){
  /* Mobile header geometry: single authoritative implementation is
     mobile-final.css "FINAL V10" (loads last across the whole stylesheet
     chain). The competing grid-based attempt formerly here was removed
     during consolidation — it was always overridden by V10. */

  .hero{
    height:auto!important;
    min-height:0!important;
    overflow:hidden;
  }
  .hero-img{
    width:100%;
    aspect-ratio:4/5!important;
    height:calc(100vw * 1.25)!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden;
  }
  #hs0 .hbg{
    background-image:var(--hero-image-mobile,var(--hero-image-desktop,none))!important;
    background-size:cover!important;
    background-position:center center!important;
  }
  #heroIntro{display:none;}
}

@media(min-width:901px){
  #mainHdr .hdr{min-height:84px;height:84px;}
  .hero-img{aspect-ratio:16/7;}
}

/* Removed: a dead @media(max-width:640px) block that redeclared
   .hero-img (aspect-ratio 4/5) and .pc-img (aspect-ratio 4/5) here. Verified
   both were fully inert: .hero-img at this breakpoint is entirely decided by
   mobile-final.css's own @media(max-width:640px) rule (aspect-ratio 3/2,
   height auto — loads last, same !important weight, so it always wins
   regardless of what was declared here), and .pc-img's values exactly
   matched its own unscoped base rule above with nothing else contesting it
   at this breakpoint. Kept: the @media(max-width:900px) .hero-img rule
   above this — that one is the live, undisputed rule for 641–900px, since
   mobile-final.css only defines a hero override at ≤640px. */

/* ========================================================================
   HEADER LOGO SWAP — English logo asset visibility per theme
   ======================================================================== */
html:not([data-theme="dark"]) #headerLogo[data-active-logo="enSrc"]{filter:none!important;opacity:1!important;visibility:visible!important;}
[data-theme="dark"] #headerLogo[data-active-logo="enSrc"]{filter:none!important;opacity:1!important;visibility:visible!important;}

/* Review cards are readable in both themes. */
html:not([data-theme="dark"]) .test-sec{background:#FAF6EE!important;color:#2A1A14!important;}
html:not([data-theme="dark"]) .test-sec .tc{background:#FFFFFF!important;color:#2A1A14!important;border:1px solid #D8CDBE!important;}
html:not([data-theme="dark"]) .test-sec .t-text{color:#51443A!important;}
html:not([data-theme="dark"]) .test-sec .t-nm{color:#2A1A14!important;}
html:not([data-theme="dark"]) .test-sec .t-lc{color:#786B60!important;}
html:not([data-theme="dark"]) .test-sec .t-av{background:#FAF6EE!important;color:#2A1A14!important;border-color:#CFC3B2!important;}
[data-theme="dark"] .test-sec{background:#17130F!important;color:#F7F3EC!important;}
[data-theme="dark"] .test-sec .tc{background:#211A15!important;color:#F7F3EC!important;border:1px solid #40352D!important;}
[data-theme="dark"] .test-sec .t-text{color:#E6DED5!important;}
[data-theme="dark"] .test-sec .t-nm{color:#FFF8EE!important;}
[data-theme="dark"] .test-sec .t-lc{color:#BEB2A6!important;}

/* Selected product options (variant pills / weight chips): single
   authoritative implementation — consolidated from prior duplicates in
   main.css, admin.css and mobile-final.css. Values reproduce the previously
   cascade-resolved appearance; no visual change intended. */
.spill.on,
.spill.on *{
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
}
.spill.on,
.spill.on *{background:#2A1A14!important;color:#FFFFFF!important;border-color:#C8A56A!important;}
[data-theme="dark"] .spill.on{background:#C8A56A!important;color:#171717!important;border-color:#F0D89A!important;box-shadow:0 0 0 1px rgba(240,216,154,.25)!important;}
[data-theme="dark"] .spill.on *{background:transparent!important;color:#171717!important;border-color:#C8A56A!important;}

.vchip.on{background:#6B1A2A!important;color:#FFFFFF!important;border-color:#C8A56A!important;box-shadow:0 0 0 1px rgba(200,165,106,.15)!important;}
.vchip.on .vc-lbl,.vchip.on .vc-price{color:#FFFFFF!important;}
[data-theme="dark"] .vchip.on{background:#C8A56A!important;color:#171717!important;border-color:#F0D89A!important;box-shadow:0 0 0 1px rgba(240,216,154,.25)!important;}
[data-theme="dark"] .vchip.on .vc-lbl,[data-theme="dark"] .vchip.on .vc-price{color:#171717!important;}

/* Cart confirmation must sit above the checkout action in the drawer. */
.cdrawer.open ~ .toast{bottom:118px!important;inset-inline-end:24px!important;z-index:99999!important;}
@media(max-width:640px){
  #mainHdr .hdr{grid-template-columns:minmax(128px,1fr) auto minmax(104px,1fr)!important;height:68px!important;min-height:68px!important;padding:0 4px!important;}
  #mainHdr .hdr-r{gap:4px!important;min-width:128px!important;flex-direction:row-reverse!important;}
  #mainHdr .ibtn{width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important;flex:0 0 29px!important;}
  #mainHdr .ibtn svg{width:19px!important;height:19px!important;}
  #mainHdr .lang-sw{gap:2px!important;padding:1px!important;}
  #mainHdr .lbtn{min-width:20px!important;min-height:26px!important;font-size:10px!important;padding:.15rem .22rem!important;}
  #mainHdr .logo{width:clamp(88px,28vw,104px)!important;max-width:104px!important;}
  #mainHdr .mob-nav{direction:ltr!important;}
  .cdrawer.open ~ .toast{bottom:178px!important;left:12px!important;right:12px!important;inset-inline-end:auto!important;max-width:none!important;text-align:center!important;}
}
@media(max-width:340px){
  #mainHdr .hdr{grid-template-columns:minmax(120px,1fr) auto minmax(100px,1fr)!important;}
  #mainHdr .hdr-r{gap:3px!important;min-width:120px!important;}
  #mainHdr .ibtn{width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important;flex-basis:27px!important;}
  #mainHdr .ibtn svg{width:18px!important;height:18px!important;}
  #mainHdr .lbtn{min-width:19px!important;min-height:25px!important;}
  #mainHdr .logo{width:88px!important;}
}
/* Mobile header WhatsApp visibility: this rule never actually won (same
   specificity as mobile-final.css's later-loaded, later-in-cascade
   `.hdr-r > .ibtn{display:flex!important}`, which has no exclusion for
   the WhatsApp icon — see that file's "FINAL V10" block), so the icon has
   been visible on mobile in practice regardless of this rule. Removed
   here rather than left as a hide-intent that doesn't fire, alongside the
   matching dead rule removed from mobile-final.css — the icon is now
   correctly colored green there instead of hidden. */

/* Footer structure: preserve the original brand + three-column footer shape. */
.ft-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)!important;}
footer .ft-logo-mark[src*="logo-english"]:not([src*="white"]){filter:none!important;opacity:1!important;visibility:visible!important;}


.ft-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)!important;}
#mainHdr .hdr{direction:ltr!important;}
#mainHdr .hdr-r{direction:ltr!important;gap:6px!important;}
#mainHdr #deskNav{direction:ltr!important;justify-content:flex-end!important;}
html:not([data-theme="dark"]) #headerLogo[data-active-logo="enSrc"], [data-theme="dark"] #headerLogo[data-active-logo="enSrc"]{opacity:1!important;visibility:visible!important;}
[data-theme="dark"] #headerLogo[data-active-logo="enSrc"]{filter:none!important;}
[data-theme="dark"] .test-sec .tc{background:#211A15!important;color:#F7F3EC!important;border-color:#40352D!important;}
[data-theme="dark"] .test-sec .t-text{color:#E6DED5!important;}
[data-theme="dark"] .test-sec .t-nm{color:#FFF8EE!important;}
[data-theme="dark"] .test-sec .t-lc{color:#BEB2A6!important;}
@media(max-width:640px){#mainHdr .hdr{grid-template-columns:minmax(128px,1fr) auto minmax(108px,1fr)!important;height:68px!important;min-height:68px!important;padding:0 4px!important;}#mainHdr .ibtn{width:31px!important;height:31px!important;min-width:31px!important;min-height:31px!important;flex-basis:31px!important;}#mainHdr .ibtn svg{width:20px!important;height:20px!important;}.vchip{min-width:74px!important;padding:.48rem .72rem!important;}[data-theme="dark"] .vchip:not(.on) .vc-lbl{color:#E6DED5!important;}footer .ft-grid{grid-template-columns:1fr 1fr!important;}footer .ft-grid>div:first-child{grid-column:1/-1!important;}footer .ft-grid>.ft-col:nth-of-type(n+3){display:none!important;}}
#adminPortal .admin-save-feedback{position:fixed;top:20px;left:50%;transform:translate(-50%,-10px);z-index:10020;opacity:0;pointer-events:none;background:#2D4A3E;color:#fff;border-radius:999px;padding:.58rem .95rem;font:800 .76rem/1 'DM Sans',sans-serif;box-shadow:0 10px 28px rgba(42,26,20,.18);transition:opacity .18s ease,transform .18s ease;white-space:nowrap;}
#adminPortal .admin-save-feedback.is-visible{opacity:1;transform:translate(-50%,0);}
#adminPortal .admin-save-feedback.is-error{background:#6B1A2A;}
#adminPortal #adminEmail,#adminPortal #adminPass{pointer-events:auto!important;user-select:text!important;-webkit-user-select:text!important;caret-color:#2A1A14!important;position:relative!important;z-index:2!important;}
#adminPortal .a-card-title,#adminPortal .a-page-header h2,#adminPortal .a-help,#adminPortal .a-field label,#adminPortal .a-section-title-sm{opacity:1!important;color:#2A1A14!important;}
#adminPortal .a-help{color:#75665B!important;}

/* Keep the login fields directly editable; no JS/CSS layer may disable text input. */
#adminPortal #adminLogin input{pointer-events:auto!important;user-select:text!important;-webkit-user-select:text!important;caret-color:currentColor!important;}
/* Readability for remaining legacy inline light-on-dark admin text. */
#adminPortal #adminContent [style*="color:rgba(233,221,200"]{color:var(--admin-muted,#75665B)!important;}
#adminPortal #adminContent [style*="color:#E9DDC8"]{color:var(--admin-text,#2A1A14)!important;}
#adminPortal #adminContent [style*="color:#F7F3EC"],
#adminPortal #adminContent [style*="color:#FFFFFF"],
#adminPortal #adminContent [style*="color:#fff"]{color:var(--admin-text,#2A1A14)!important;}


/* The footer uses a dedicated white English logo asset; never invert it. */
footer .ft-logo-mark[src*="logo-english-white"]{filter:none!important;opacity:1!important;visibility:visible!important;}


/* FINAL v13 — compact mobile trust rhythm. (The .hero-img rule that used to
   sit here was a byte-for-byte subset of mobile-final.css's own
   @media(max-width:640px) .hero-img rule — same properties/values, which
   loads after this file and so already wins outright — so it was dead
   code; removed rather than left as a second copy of the same rule.) */
@media(max-width:640px){
  .trust-in{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    max-width:none!important;
    padding:0!important;
    gap:0!important;
  }
  .trust-in .ti{
    min-height:54px!important;
    padding:5px 8px!important;
    gap:6px!important;
    justify-content:center!important;
    font-size:10.5px!important;
    line-height:1.15!important;
    letter-spacing:0!important;
  }
  body.ar .trust-in .ti{font-size:11px!important;}
  .trust-in .ti svg{width:17px!important;height:17px!important;}
}


/* ── Customer-journey pass (2026-09-23) — owner-approved storefront fixes ──
   1. (Hero intro text is switched on from Admin → Feature Flags → "Hero
      Intro Text"; it uses the existing under-the-photo layout on all
      screens, so it never covers any of the rotating hero photos.)
   2. Empty cart badge hidden (the mobile header forces it visible with
      !important; .is-empty is set by updateCartUI()).
   3. Scroll-to-top hidden on phones (it covered the Add-to-cart button).
   4. "Added to cart" confirmation inside the drawer styled as a pill.
   5. Product image no longer shows a hand cursor (it isn't clickable).
   6. Struck original price in the cart line, and a legible dark-mode
      discount pill. */
#mainHdr .hdr-r .ic-badge.is-empty,.ic-badge.is-empty{display:none!important}
@media(max-width:767px){.stt,.stt.show{display:none!important}}
.cart-confirm{display:none}
.cart-confirm.show{
  display:block;width:fit-content;max-width:calc(100% - 2rem);margin:.4rem auto .6rem;
  padding:.5rem 1rem;border-radius:999px;background:#1C1715;color:#F7F3EC;
  font-size:.78rem;font-weight:600;line-height:1.45;text-align:center;
  box-shadow:0 6px 18px rgba(28,23,21,.18);animation:fup .25s both
}
body.ar .cart-confirm.show{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:.84rem}
[data-theme=dark] .cart-confirm.show{background:#F7F3EC;color:#1C1715}
.pc-img{cursor:default}
.ci-price-old{margin-inline-end:.4rem;font-weight:500}
[data-theme=dark] .p-disc{color:#6B1A2A;background:#F1DDE1}
.filter-bar.fbar-hidden{display:none!important}

/* Hero intro — brand alignment (2026-09-23): the pill reads as the same
   burgundy kicker used above every section title (no boxed label), the
   headline sits one step above section titles instead of dwarfing them,
   tighter vertical rhythm so products start sooner, and a normal-width
   button in the UI typeface (same proportions as "Back to Store"). */
#heroIntro.intro-visible{padding:clamp(1.6rem,3.5vw,2.6rem) 1.25rem clamp(1.4rem,3vw,2.2rem)}
#heroIntro .hpill{background:none!important;border:0!important;border-radius:0;padding:0;margin-bottom:.55rem;color:var(--burg,#641D2B);font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
body.ar #heroIntro .hpill{font-size:.9rem;letter-spacing:0;text-transform:none}
[data-theme=dark] #heroIntro .hpill{color:var(--gold,#C8A56A)}
#heroIntro .htitle{font-size:clamp(2rem,3.6vw,3.3rem);line-height:1.18;margin-bottom:.6rem}
body.ar #heroIntro .htitle{font-size:clamp(2.05rem,3.6vw,3.3rem);line-height:1.3}
#heroIntro .hsub{max-width:34rem;margin-bottom:1.15rem}
#heroIntro .hbtns .btn{width:auto;min-width:200px;padding:.78rem 1.9rem;border-radius:4px;font-size:.88rem}
body.ar #heroIntro .hbtns .btn{font-family:'IBM Plex Sans Arabic',sans-serif;font-weight:700}
#heroIntro .hbtns{align-items:center}
[data-theme=dark] #heroIntro .htitle em{color:#C8A56A}
#heroIntro .hpill:empty{display:none}
/* Header links (2026-09-23): the desktop nav is laid out LTR on purpose, so
   in Arabic the visual order is set here to read right→left:
   من نحن · قهوة تركية · طريقة التحضير. English keeps the DOM order
   (About · Turkish Coffee · How to Brew). */
body.ar #mainHdr #deskNav #nv2{order:1}
body.ar #mainHdr #deskNav #nv1{order:2}
body.ar #mainHdr #deskNav #nv3{order:3}
/* Product hover photo (2026-09-23): slow, soft crossfade only — no zoom.
   Cards without a second photo (or with Feature Flags → "Product Hover
   Photo" off) keep their main photo on hover. */
.pc .pc-img .img-a,.pc .pc-img .img-b{transition:opacity .9s ease!important;transform:none!important}
.pc:not(.has-hover):hover .pc-img .img-a{opacity:1!important}

/* Hero height cap on desktop (2026-09-24): on wide screens the 16:7 photo
   used to fill the whole first screen, pushing the headline and Shop Now
   button below the fold. Cap it so they show without scrolling; the photo
   stays centred (background-size:cover) so the bags stay in view. */
@media(min-width:901px){
  .hero-img{max-height:max(420px,calc(100vh - 84px - 310px));}
  /* Crop a little more from the bottom than the top so faces stay in frame. */
  .hero-img .hbg{background-position:center 28%!important;}
}