:root{
  color-scheme:dark;
  /* Phase 5 "espresso & gold" dark palette -- converged with admin-app's
     own tokens (admin went through this same redesign in its Phase 1;
     these values are admin's dark palette, nudged slightly toward the
     brief's exact hexes). --bad is now intentionally DIFFERENT from the
     light theme's --bad (#cf695e vs #c0392b) -- previously this worker
     reused the exact same red in both themes, which read at only 3.08:1
     against this dark panel background (fails WCAG AA); every token pair
     here is verified >=4.5:1 (or >=3:1 for large text/UI) by
     _verify/check_contrast_5a.js, with 2 documented, accepted exceptions
     (gold used as a decorative accent, never as body text; subtle card
     dividers, which get their contrast from differing surface shades plus
     a separate visible focus ring, not border color alone). */
  --ground:#17120f; --panel:#241c17; --panel-2:#30251e; --line:#3c3024;
  --gold:#b69a64; --gold-hi:#d2ac70; --gold-lo:#8a7142;
  /* ink-3 lightened (#8f8372->#9d907d) during the Phase 5g contrast
     sweep so it clears 4.5:1 against every dark-theme surface it's used
     on -- unlike the light-theme tier (see the matching comment there),
     this one fully resolves without colliding with ink-2. */
  --ink:#f6f0e7; --ink-2:#c2b6a2; --ink-3:#9d907d;
  --wa:#2fbf71; --bad:#cf695e; --info:#4fa3c9; --buy:#21e0bd;
  --success:var(--wa); --danger:var(--bad);
  --nav-bg:rgba(23,18,15,.92);
  --loc-grid:rgba(182,154,100,.08); --loc-a:#211a14; --loc-b:#140f0b;
  --display:"Amiri",serif;
  --body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --latin:"Cormorant Garamond",Georgia,serif;
  /* Spacing (4px scale), radius, and motion tokens -- declared once here
     (shared by both themes, not color-dependent), consumed incrementally
     by components as each page is restyled in later Phase 5 sub-phases
     rather than mass-replacing every hardcoded px value in one risky pass. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur-hover:180ms; --dur-menu:220ms; --dur-modal:240ms;
}
:root[data-theme="light"]{
  color-scheme:light;
  /* Phase 5 "ivory & champagne gold" light palette -- matches admin-app's
     existing light tokens (already near-identical to the brief's target
     hexes from admin's own earlier redesign), with --ink-2 nudged to the
     brief's exact value and --wa darkened slightly (#1a8f52 -> #18864d)
     so it clears 4.5:1 on a white panel. See the dark-theme comment above
     for the full contrast-verification note. */
  --ground:#f7f3eb; --panel:#ffffff; --panel-2:#f0ebe3; --line:#e7e0d7;
  --gold:#b69a64; --gold-hi:#866b3b; --gold-lo:#d8c9a3;
  /* ink-2 nudged 1 shade darker (#756c61->#70685d) and ink-3 darkened
     more noticeably (#9e9384->#7e766a) during the Phase 5g contrast
     sweep -- ink-2 now clears 4.5:1 everywhere it's used; ink-3 is still
     the deliberately-muted tertiary tier (timestamps, counts,
     disclaimers -- never primary content) and a 3rd accepted exception
     alongside the 2 already documented below, since darkening it enough
     to hit 4.5:1 against every surface would make it indistinguishable
     from ink-2 and erase the 3-tier hierarchy; it's meaningfully closer
     now (was ~2.7-3.0:1, now ~3.8-4.5:1 depending on surface). */
  --ink:#35291f; --ink-2:#70685d; --ink-3:#7e766a;
  --wa:#18864d; --bad:#c0392b; --info:#2a6f8f; --buy:#0b8a74;
  --nav-bg:rgba(247,243,235,.92);
  --loc-grid:rgba(182,154,100,.12); --loc-a:#f0ebe3; --loc-b:#e7ddc9;
}
*{box-sizing:border-box}
html,body{background:var(--ground);touch-action:manipulation;overflow-x:hidden}
body{margin:0;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;
  background:radial-gradient(120% 60% at 50% -10%, rgba(201,162,75,.16), transparent 60%), var(--ground);
  min-height:100%;padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:14px}
button{font:inherit}
/* Root-cause fix found and applied while verifying 5b: .wrap is a flex
   item of .shell-row (flex-direction:column) with margin-inline:auto to
   center it -- an auto cross-axis margin makes a flex item opt OUT of
   stretch sizing, falling back to a shrink-to-fit/max-content width
   instead. That's invisible on every page whose content never has a wide
   max-content contributor, but the new homepage's horizontally-scrolling
   new-arrivals strip does: overflow-x:auto only clips a box once its own
   width is already resolved, so during THIS ancestor sizing pass the
   track's full un-scrolled content width was still contributing to
   .wrap's shrink-to-fit calculation -- inflating .wrap (and the whole
   page) past the viewport, regardless of whether the cards themselves
   were sized in % or vw. The standard fix for the "max-width +
   margin:auto" centering idiom is to pair it with width:100% (so the
   item always takes its DEFINITE container width, capped by max-width,
   via normal block sizing -- never content-based shrink-to-fit), which
   this rule was missing. This is additive/corrective for every page, not
   just home: any page already rendering inside its max-width keeps
   rendering exactly the same; only the pages that could have hit this
   (now just the home page) are affected. */
.wrap{width:100%;max-width:460px;margin-inline:auto;display:flex;flex-direction:column;gap:22px;padding:22px 16px 40px}
.shell-row{display:flex;flex-direction:column;min-width:0}

/* ---------- top nav: a plain top-bar ribbon at every screen width -- no
   horizontal scrolling, no vertical sidebar. Three-column grid so the
   brand sits dead-center regardless of how wide the two side groups are:
   hamburger menu button on the right, brand centered, theme/notification
   toggles on the left. The hamburger opens a dropdown listing every page
   top-to-bottom. ---------- */
.topnav{position:sticky;top:0;z-index:15;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  background:var(--nav-bg);border-bottom:1px solid var(--line);
  padding:15px 12px;padding-top:calc(26px + env(safe-area-inset-top,0px))}
#navToggle{justify-self:start}
.topnav-brand{flex:none;display:flex;align-items:center;justify-self:center}
.topnav-brand img{height:30px;width:auto;display:block}
.topnav-actions{display:flex;gap:8px;flex:none;justify-self:end}
.nav-dropdown{position:absolute;top:100%;left:0;right:0;z-index:14;
  display:flex;flex-direction:column;gap:2px;padding:10px;
  max-height:calc(100vh - 80px);overflow-y:auto;
  background:var(--nav-bg);border-bottom:1px solid var(--line);
  box-shadow:0 14px 26px rgba(0,0,0,.28);
  opacity:0;transform:translateY(-8px);transform-origin:top center;
  transition:opacity var(--dur-menu) var(--ease),transform var(--dur-menu) var(--ease)}
.nav-dropdown[hidden]{display:none}
.nav-dropdown.open{opacity:1;transform:translateY(0)}
.nav-dropdown a{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 14px;border-radius:10px;font-size:.92rem;font-weight:600;color:var(--ink-2)}
.nav-dropdown a svg{flex:none;opacity:.8}
.nav-dropdown a.on{background:var(--gold);color:#1a1408}
.nav-dropdown a.on svg{opacity:1}
.nav-dropdown a:not(.on):hover{background:var(--panel-2);color:var(--ink)}

/* ---------- desktop: same hamburger + dropdown, just anchored as a
   compact card under the button instead of a full-width sheet, and the
   nav bar gets roomier spacing. ---------- */
@media (min-width:860px){
  .topnav{padding:16px 32px}
  .topnav-brand img{height:34px}
  .nav-dropdown{padding:14px 32px}
  /* the real desktop .wrap max-width is set once, later in this file (see
     the "desktop content widths" block near the end) -- not here, so there
     is only one place that decides it instead of two competing rules. */
  .wrap{margin:0 auto;padding:40px 32px 60px}
}
.theme-toggle{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;padding:0}
.theme-toggle:hover{border-color:var(--gold-lo);color:var(--gold-hi)}

/* ---------- notification bell dropdown panel ---------- */
.notify-wrap{position:relative}
.notify-panel{position:absolute;top:calc(100% + 10px);left:0;z-index:16;
  width:290px;max-width:calc(100vw - 24px);
  display:flex;flex-direction:column;gap:6px;padding:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 14px 30px rgba(0,0,0,.28);
  opacity:0;transform:translateY(-8px);transform-origin:top left;
  transition:opacity var(--dur-menu) var(--ease),transform var(--dur-menu) var(--ease)}
.notify-panel[hidden]{display:none}
.notify-panel.open{opacity:1;transform:translateY(0)}
.notify-panel-head{font-weight:700;font-size:.86rem;color:var(--ink-2);padding:4px 8px}
.notify-list{display:flex;flex-direction:column;gap:3px;max-height:300px;overflow-y:auto}
.notify-item{display:flex;flex-direction:column;gap:2px;padding:9px 8px;border-radius:10px;transition:background var(--dur-hover) var(--ease)}
.notify-item:hover{background:var(--panel-2)}
.notify-item b{font-size:.86rem;font-weight:600;color:var(--ink)}
.notify-item small{font-size:.78rem;color:var(--ink-3);line-height:1.4}
.notify-item .notify-time{font-size:.7rem;color:var(--ink-3);opacity:.75;margin-top:1px}
.notify-empty,.notify-loading{color:var(--ink-3);font-size:.82rem;text-align:center;padding:18px 8px;line-height:1.6}
.notify-disable-btn{margin-top:2px;padding:10px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--bad);font-weight:600;font-size:.82rem;cursor:pointer;
  transition:border-color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.notify-disable-btn:hover{border-color:var(--bad);background:rgba(192,57,43,.08)}
.notify-disable-btn[hidden]{display:none}

/* ---------- Masthead (home) ---------- */
.mast{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:6px}
.logo{width:clamp(120px,36vw,160px);height:auto;margin-bottom:-6px}
.name{margin:0;line-height:0;width:100%;display:flex;justify-content:center}
.wordmark{width:min(100%,400px);height:auto;filter:drop-shadow(0 2px 14px rgba(201,162,75,.18))}
.latin{font-family:var(--latin);font-weight:600;letter-spacing:.34em;font-size:.82rem;color:var(--ink-2);direction:ltr}
.rule{display:flex;align-items:center;gap:10px;width:70%;margin-top:10px;color:var(--gold)}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-lo))}
.rule::after{transform:scaleX(-1)}
.verse{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,5.2vw,1.4rem);color:var(--ink);line-height:1.9;margin-top:2px}
.intro{color:var(--ink-2);text-align:center;font-size:.92rem;margin-top:-6px}

/* ---------- mini page head (inner pages) ---------- */
.miniHead{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding-top:4px}
.form-page-wrap{display:flex;flex-direction:column;gap:22px}
.form-page-wrap[hidden]{display:none}
.miniHead img{width:130px;height:auto}
.miniHead h1{margin:4px 0 0;font-family:var(--display);color:var(--gold-hi);font-size:1.3rem;font-weight:700}
.miniHead p{margin:0;color:var(--ink-3);font-size:.85rem;max-width:34ch}

/* ---------- gold price banner ---------- */
.prices{position:relative;display:flex;align-items:center;gap:14px;padding:18px 18px;border-radius:18px;color:#1a1408;
  background:linear-gradient(135deg,#e9cd84 0%,#c9a24b 45%,#a8842f 100%);
  box-shadow:0 10px 30px -12px rgba(201,162,75,.55), inset 0 1px 0 rgba(255,255,255,.4);transition:transform var(--dur-hover) var(--ease)}
.prices:hover{transform:translateY(-2px)}
.prices .ic{width:48px;height:48px;border-radius:12px;background:rgba(26,20,8,.12);display:grid;place-items:center;flex:none}
.prices b{display:block;font-family:var(--display);font-size:1.45rem;line-height:1.5;margin:3px 0}
.prices small{display:block;font-size:.86rem;line-height:1.6;opacity:.8}
.prices .go{margin-inline-start:auto;flex:none;opacity:.7}
/* color is a fixed hex, not --gold-hi -- this badge's background is
   already a fixed dark hex (not theme-dependent, by design), but the
   THEME's --gold-hi still shifts under it; in light theme that landed at
   only 3.64:1 against this always-dark badge (Phase 5g contrast sweep).
   #d2ac70 is the dark-theme's own gold-hi value, chosen directly since
   it's verified bright enough (8.6:1) against this fixed background in
   either theme. */
.live{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;background:#1a1408;color:#d2ac70;padding:2px 9px;border-radius:99px;margin-bottom:4px}
.live i{width:6px;height:6px;border-radius:50%;background:#58d68d;box-shadow:0 0 0 0 rgba(88,214,141,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(88,214,141,.7)}100%{box-shadow:0 0 0 0 rgba(88,214,141,0)}}
/* Phase 5b homepage live gold-price ticker (section 2 of the brief's
   sequence): reuses the .prices gold-card visual language above, with a
   numeric readout added. Numbers are western digits inside an RTL page, so
   -- same pattern as the TV board's .tv-num and the gold-price page's own
   number spans -- they get an explicit direction:ltr + tabular-nums so a
   price like "١٨٥,٠٠٠" worth of digit groups never reorders itself. */
.price-ticker-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:2px}
.price-ticker-row .pt-item{display:flex;align-items:baseline;gap:6px;font-size:.86rem}
.price-ticker-row .pt-item b{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;font-size:1rem}

/* ---------- section heads ---------- */
section{display:flex;flex-direction:column;gap:10px}
/* Phase 5b type scale (brief section 2): section headings clamp between
   30-42px, product titles 16-20px, body 15-17px -- hero heading has its
   own clamp on .home-hero-content h1 (52-72px desktop, scaled down below
   that for phones since the brief's range is explicitly "desktop hero"). */
/* gold-hi, not the base gold -- every section heading on the site runs
   through this one rule, and the base --gold only hit 2.43:1 against the
   Phase 5g contrast sweep's 3:1 large-text floor on a light background;
   gold-hi is the variant meant for exactly this higher-contrast use. */
h2{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,1.05rem + 1.4vw,2.4rem);color:var(--gold-hi);display:flex;align-items:center;gap:10px}
h2::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- home page entrance + ambient animations ---------- */
@keyframes homeFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.mast{animation:homeFadeUp .7s cubic-bezier(.22,1,.36,1) both}
.home-feat-cards{display:flex;flex-direction:column;gap:14px}
.home-feat-cards .prices{opacity:0;animation:homeFadeUp .6s cubic-bezier(.22,1,.36,1) both;overflow:hidden}
.home-feat-cards .prices:nth-child(1){animation-delay:.15s}
.home-feat-cards .prices:nth-child(2){animation-delay:.3s}
.prices::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 46%,transparent 62%);
  transform:translateX(-130%);animation:priceShine 6s ease-in-out .9s infinite}
.prices .ic,.prices .go{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.prices:hover .ic{transform:scale(1.1) rotate(-6deg)}
.prices:hover .go{transform:translateX(-4px)}
@keyframes priceShine{0%,55%{transform:translateX(-130%)}80%,100%{transform:translateX(130%)}}
@media (prefers-reduced-motion: reduce){
  .mast,.home-feat-cards .prices{animation:none;opacity:1;transform:none}
  .prices::before{display:none}
}

/* ---------- generic scroll-reveal (qilada-style storytelling home page) ----------
   parallel to .feat's own reveal rules above -- same observer in pageHome()'s
   script watches both classes, so this never touches .feat's CSS. */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0ms)}
.reveal.revealed{opacity:1;transform:translateY(0)}
/* bouncier "pop" variant for icon tiles / photo cards -- scales in with a
   slight overshoot instead of just sliding up, for a livelier feel */
.reveal-pop{opacity:0;transform:translateY(14px) scale(.88);transition:opacity .55s cubic-bezier(.34,1.56,.64,1),transform .55s cubic-bezier(.34,1.56,.64,1);transition-delay:var(--d,0ms)}
.reveal-pop.revealed{opacity:1;transform:translateY(0) scale(1)}
/* word-by-word reveal used for the hero heading */
.word-pop{display:inline-block;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;transition-delay:var(--d,0ms)}
.word-pop.revealed{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){.reveal-pop{transition:none;opacity:1;transform:none}.word-pop{transition:none;opacity:1;transform:none}}

/* ---------- home hero (full photo, within the page's rounded-card rhythm) ----------
   Phase 5b: dropped the infinite sparkle-particle drift and the endlessly
   bouncing scroll-cue arrow -- both were continuous/perpetual motion, which
   the brief's animation guidance explicitly asks to avoid ("avoid bouncing,
   excessive parallax, continuous movement"). heroZoom and the word/line
   reveal transitions stay: they run ONCE on entrance, which is exactly the
   "tasteful transition, not excessive animation" the brief does want. Two
   real CTA buttons replace the scroll-cue as the hero's call to action. */
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.home-hero{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;max-height:62vh;isolation:isolate;box-shadow:0 18px 44px -18px rgba(0,0,0,.6)}
/* Skeleton-loader placeholder, underneath the <img> in DOM order (see
   pageHome) -- once the photo paints it simply covers the shimmer, no JS
   needed to hide it. */
.home-hero-skel{position:absolute;inset:0}
.home-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:heroZoom 1.8s cubic-bezier(.22,1,.36,1) both}
.home-hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,5,3,.92) 0%,rgba(6,5,3,.55) 38%,rgba(6,5,3,.15) 62%,rgba(6,5,3,.35) 100%)}
.home-hero-content{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;gap:10px;padding:0 22px 26px}
.home-hero-logo{width:52px;height:52px;margin-bottom:2px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
/* brief's "desktop hero: 52-72px" target is reached via the vw term, which
   only grows meaningfully past phone widths -- clamp min keeps phones at a
   sane ~26-34px. */
.home-hero-content h1{margin:0;font-family:var(--display);font-weight:700;color:#fff;font-size:clamp(1.65rem,1rem + 3.6vw,4.2rem);line-height:1.2;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.home-hero-content p{margin:0;color:rgba(255,255,255,.86);font-size:clamp(.92rem,.8rem + .4vw,1.1rem);max-width:42ch}
.home-hero-ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.home-hero-ctas .btn{padding:12px 22px;font-size:.92rem}
.home-hero-ctas .btn.outline{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(6px)}
.home-hero-ctas .btn.outline:hover{background:rgba(255,255,255,.18);border-color:#fff}
/* desktop: a wider, more cinematic banner crop instead of the phone's tall
   portrait tile -- object-fit:cover means this only crops more off the top
   and bottom of the same photo, never stretches or distorts it. */
@media (min-width:860px){
  .home-hero{aspect-ratio:21/9;max-height:74vh}
  .home-hero-content{padding-bottom:44px}
}
@media (prefers-reduced-motion: reduce){.home-hero-img{animation:none;transform:none}}

/* ---------- section intro helpers (eyebrow label + subtitle line) ---------- */
.section-eyebrow{align-self:center;position:relative;font-size:.76rem;font-weight:700;letter-spacing:.14em;color:var(--gold-hi);text-transform:uppercase;padding-bottom:8px}
.section-eyebrow::after{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--gold);transform:translateX(-50%);transition:width .5s ease .15s}
.section-eyebrow.revealed::after{width:30px}
.section-sub{color:var(--ink-3);font-size:.88rem;text-align:center;max-width:36ch;align-self:center;margin-top:-4px}
section[aria-labelledby] h2{justify-content:center;text-align:center}
section[aria-labelledby] h2::after{display:none}

/* ---------- compact trust strip (right under the hero) -- folds the old
   heavy "جودة تُرى وتُلمس" 4-card quality-grid section into one slim row of
   icon+label chips instead of a whole standalone section, per the brief's
   "avoid cluttering" guidance -- the trust signal stays, just lighter. ---- */
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 4px;padding:2px 0}
.trust-chip{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:.8rem;color:var(--ink-2);font-weight:600;white-space:nowrap}
.trust-chip svg{flex:none;color:var(--gold-hi)}

/* ---------- "تسوّق حسب القسم" shop-by-category strip ---------- */
.cat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cat-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border-radius:var(--r-lg,14px);background:var(--panel);border:1px solid var(--line);
  text-align:center;transition:border-color var(--dur-hover,180ms) var(--ease,ease),background var(--dur-hover,180ms) var(--ease,ease),transform var(--dur-hover,180ms) var(--ease,ease)}
.cat-tile:hover{border-color:var(--gold-lo);background:var(--panel-2);transform:translateY(-3px)}
.cat-tile .cic{width:40px;height:40px;border-radius:12px;background:rgba(182,154,100,.14);color:var(--gold-hi);display:grid;place-items:center}
.cat-tile b{font-size:.82rem;font-weight:600}
.cat-tile.all{background:var(--gold);border-color:var(--gold);color:#1a1408}
.cat-tile.all .cic{background:rgba(26,20,8,.14);color:#1a1408}
@media (min-width:640px){ .cat-strip{grid-template-columns:repeat(4,1fr)} }
@media (min-width:860px){ .cat-strip{grid-template-columns:repeat(7,1fr)} }
/* Every category tile shows immediately -- no collapse/expand control
   (removed at Ali's request; see the matching comment by categorySection
   in the worker). */

/* ---------- "وصل حديثاً" new-arrivals strip -- same horizontal-scroller
   mechanics as .showcase-track, with its own compact card (photo + a
   caption line) since these are live catalog items, not admin photos.
   Bug found and fixed while verifying 5b: unlike .showcase-track's cards
   (which hold only an <img>, with no equivalent risk), .arrival-card's
   title is real nowrap/ellipsis TEXT with no inherent width cap. A
   %-based flex-basis (flex:0 0 42%) only resolves once its flex
   container's own width is definite -- but .wrap sizes itself via
   margin-inline:auto (shrink-to-fit, not stretch), which is exactly the
   kind of indefinite-width pass where a percentage flex-basis falls back
   to the item's CONTENT size instead. With a nowrap title that content
   size is unbounded, so it was inflating .arrivals-track's intrinsic
   width -- and everything above it, all the way up through
   .home-arrivals into .wrap -- regardless of overflow-x:auto, since
   clipping only applies once a box's own width is already resolved, not
   during this ancestor sizing pass. Viewport units don't have this
   circularity (they resolve against the viewport, never the ancestor),
   so sizing the card off vw instead of % is the real fix -- same visual
   result, no ancestor dependency. min-width:0 is also kept: it's the
   correct, standard flex-item shrink override (same pattern already used
   on .shell-row), just not sufficient alone for THIS grow-not-shrink
   direction of the bug. ---- */
.arrivals-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0;padding:4px 0 10px;min-width:0}
.arrivals-track::-webkit-scrollbar{display:none}
.arrival-card{flex:0 0 42vw;min-width:0;max-width:42vw;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px}
.arrival-card .thumb{aspect-ratio:4/5;border-radius:var(--r-lg,14px);overflow:hidden;background:var(--panel-2);box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.arrival-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.arrival-card b{display:block;font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arrival-card small{color:var(--ink-3);font-size:.76rem}
@media (min-width:640px){ .arrival-card{flex:0 0 22vw;max-width:22vw} }

/* ---------- "قصتنا" (our story) ---------- photos render as a simple,
   non-scrolling row/grid that always fits the screen width exactly --
   no horizontal scroller here, so there's nothing to crop or misalign
   on any device. */
.home-story{gap:14px}
/* at phone/tablet widths the text column wraps nothing special -- it's
   "unwrapped" via display:contents so the heading/paragraph/points/button
   flow exactly like plain siblings of .home-story, same as before this
   wrapper existed. Only the desktop 2-column split (further down this
   file) turns it into a real flex column. */
.story-text{display:contents}
/* Pre-existing bug found and fixed while verifying 5b's story-section
   restyle: minmax(0,1fr) with auto-fit has no real floor, so Chromium
   computes dozens of near-zero-width implicit tracks whenever the
   container's own width is itself content-driven (exactly this element's
   situation once .story-text's display:contents repositioning changed
   what sits around it) -- that doesn't just mis-size this grid, it was
   making the WHOLE PAGE overflow horizontally. A real pixel floor keeps
   auto-fit's column count sane for every photo count (1-3) this ever holds. */
.story-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:2px 0}
.story-photos img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;border-radius:16px;background:var(--panel-2);min-width:0}
.story-photos img:only-child{aspect-ratio:16/11}
.home-story > p{color:var(--ink-2);line-height:1.8}
.story-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.story-points li{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:.9rem}
.story-points li svg{flex:none;color:var(--gold-hi)}

/* ---------- "تشكيلتنا" signature showcase ---------- a horizontal
   scroller, but confined inside the page's normal side padding (no
   negative-margin edge bleed) so its scroll boundaries can never be
   mis-measured against the viewport. */
.home-picks{gap:12px}

/* ---------- dark CTA band before the explore grid ---------- */
.home-cta{align-items:center;text-align:center;gap:10px;padding:30px 20px;border-radius:20px;
  background:linear-gradient(160deg,#1c1710,#0e0c08 70%);border:1px solid var(--line);position:relative;overflow:hidden}
.home-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(201,162,75,.16),transparent 60%);pointer-events:none}
.home-cta h2{position:relative;color:var(--gold-hi);font-size:1.25rem}
.home-cta p{position:relative;margin:0;color:var(--ink-2);font-size:.9rem;max-width:34ch}
.home-cta .btn{position:relative;margin-top:4px;padding-inline:26px;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.home-cta .btn:hover{transform:scale(1.05)}

/* ---------- Jewellery Guide: admin-managed link row under the rich-text
   body (reuses .rich-content + .btn.ghost -- this is the only bit that's
   genuinely new) ---------- */
.guide-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.guide-links .btn{min-height:38px;padding:8px 16px;font-size:.84rem}

/* ---------- Visit Our Boutique: address/hours rows inside the existing
   .home-cta dark band ---------- */
.boutique-info{position:relative;display:flex;flex-direction:column;gap:6px;width:100%;max-width:34ch}
.boutique-row{display:flex;align-items:flex-start;gap:8px;color:var(--ink-2);font-size:.88rem;line-height:1.6;text-align:start}
.boutique-row svg{flex-shrink:0;margin-top:2px;color:var(--gold)}

/* ---------- contact page layout (desktop 2-col arrangement, see
   pageContact's ".contact-layout" wrapper) ---------- */
.contact-layout{display:flex;flex-direction:column;gap:22px}

/* ---------- social ---------- */
.social{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* min-width:0 on both the grid item and its text wrapper: without it, a
   grid/flex item's default min-width is its content's natural width, so
   on the narrowest phones the card refused to shrink below "انستغرام"'s
   full width and silently clipped the first letter or two instead of
   wrapping/truncating -- found during the Phase 5g responsive sweep. */
.soc{display:flex;align-items:center;gap:10px;padding:14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);min-width:0;transition:border-color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.soc:hover{border-color:var(--gold-lo);background:var(--panel-2)}
.soc svg{flex:none}
.soc span{min-width:0;overflow:hidden}
.soc b{display:block;font-weight:600;font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc small{display:block;color:var(--ink-3);font-size:.78rem;direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- contacts ---------- */
.person{padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.who{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.who b{font-size:1.08rem;font-weight:600}
.num{font-variant-numeric:tabular-nums;direction:ltr;color:var(--ink-2);font-size:1rem;letter-spacing:.04em;user-select:all;background:none;border:0;padding:0;font-family:var(--body);cursor:copy}
.num:hover{color:var(--gold-hi)}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 10px;border-radius:11px;font-weight:600;font-size:.95rem;border:1px solid var(--line);background:var(--panel-2);transition:filter var(--dur-hover) var(--ease),border-color var(--dur-hover) var(--ease);cursor:pointer;color:var(--ink)}
.btn:hover{border-color:var(--gold-lo)}
.btn.wa{background:var(--wa);border-color:var(--wa);color:#04210f}
/* light theme's --wa (#18864d) is darker than dark theme's (#2fbf71), so
   the fixed dark text above (tuned for dark theme, 7.2:1 there) only hit
   3.71:1 in light theme -- Phase 5g contrast sweep. White text in light
   theme and the existing dark text in dark theme both clear 4.5:1. */
:root[data-theme="light"] .btn.wa{color:#fff}
.btn.wa:hover{filter:brightness(1.08)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1a1408}
.btn.gold:hover{filter:brightness(1.08)}
.btn.ghost{background:none}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.danger:hover{filter:brightness(1.1)}
.btn.block{width:100%}
.btn[disabled]{opacity:.55;cursor:default;filter:none!important}

/* ---------- location ---------- */
.loc{border-radius:16px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.loc-map{position:relative;height:120px;background:
    repeating-linear-gradient(0deg,transparent 0 23px,var(--loc-grid) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 23px,var(--loc-grid) 23px 24px),
    linear-gradient(160deg,var(--loc-a),var(--loc-b));
  display:grid;place-items:center}
.loc-map .street{position:absolute;inset-inline:0;top:58%;height:14px;background:rgba(201,162,75,.12);border-block:1px dashed rgba(201,162,75,.25)}
.loc-map .street span{position:absolute;inset-inline-start:14px;top:-22px;font-size:.72rem;color:var(--ink-3)}
.pin{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;transform:translateY(-6px)}
.pin svg{filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.loc-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}
.addr{font-size:1rem;line-height:1.7}
.addr strong{color:var(--gold-hi);font-weight:600}
.navrow{display:flex}
.navrow .btn.gmaps{flex:1;padding:13px 12px;font-size:1rem;background:var(--gold);border-color:var(--gold);color:#1a1408}
.navrow .btn.gmaps svg{stroke:#1a1408}
.navrow .btn.gmaps:hover{filter:brightness(1.08)}
.copy-addr{align-self:flex-start;background:none;border:0;color:var(--ink-3);font-family:var(--body);font-size:.85rem;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.copy-addr:hover{color:var(--gold)}

/* ---------- about ---------- */
.about-layout{display:flex;flex-direction:column;gap:22px}
.about{padding:18px 18px;border-radius:16px;background:linear-gradient(180deg,var(--panel),transparent);border:1px solid var(--line);position:relative}
.about p{margin:0 0 10px;color:var(--ink-2);max-width:62ch}
.about p:first-of-type{color:var(--ink)}
.about p:first-of-type::first-letter{font-family:var(--display);color:var(--gold);font-size:1.25em}

/* ---------- rich content (About / Article body / Q&A answer) -- rendered
   from the admin's rich-text editor, so headings/lists/colors set there
   show up here matching the site's own look ---------- */
.rich-content p{margin:0 0 10px}
.rich-content p:last-child{margin-bottom:0}
.rich-content h2{font-family:var(--display);color:var(--gold-hi);font-size:1.15rem;margin:18px 0 8px;line-height:1.4}
.rich-content h3{font-family:var(--display);color:var(--gold-hi);font-size:1.02rem;margin:14px 0 6px;line-height:1.4}
.rich-content h2:first-child,.rich-content h3:first-child{margin-top:0}
.rich-content ul,.rich-content ol{margin:0 0 10px;padding-inline-start:22px}
.rich-content li{margin-bottom:4px}
.rich-content a{color:var(--gold-hi);text-decoration:underline;text-underline-offset:2px}
.rich-content strong,.rich-content b{color:var(--ink)}

/* ---------- "من نحن" photo carousel (admin-managed, up to 10 shop photos) ---------- */
.about-gallery{display:flex;flex-direction:column;gap:10px}
.ag-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ag-track::-webkit-scrollbar{display:none}
.ag-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--panel-2)}
.ag-slide img{width:100%;height:100%;object-fit:cover;display:block}
.ag-dots{display:flex;justify-content:center;gap:6px}
.ag-dot{flex:none;width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;transition:background var(--dur-hover) var(--ease),transform var(--dur-hover) var(--ease)}
.ag-dot.on{background:var(--gold);transform:scale(1.3)}

.pc{font-family:var(--body);direction:ltr;display:inline-block;font-size:.85rem;color:var(--ink-3);letter-spacing:.06em;margin-top:2px}

/* ---------- elegant site-wide footer (redesign brief's homepage-sequence
   item #10 -- but this lives in pageShell, not pageHome, since a footer is
   shared chrome on every page, not a home-only section). Three stacked
   groups on mobile (brand+social / quick links / contact), a 3-column row
   on desktop; a thin copyright line closes it out. Every piece of content
   here -- nav labels/hrefs, the two phone numbers, the Instagram/TikTok
   URLs -- already exists elsewhere (NAV_ITEMS, pageContact's .person/.social
   blocks); this is a pure presentation addition, zero new data/API. */
/* Trimmed down (was padding-top:28/gap:22/sf-grid gap:26/40/sf-bottom
   padding-top:16) -- the footer was taking up far more vertical space than
   its actual content needed, especially on short pages like /gold-price. */
/* Compacted further: logo + social icons sit in one row instead of a
   stacked block, the tagline paragraph only shows on desktop (where the
   3-column layout has room for it; on mobile it was the single biggest
   contributor to footer height), and the contact row + address merge into
   one wrapping line instead of two separate stacked blocks. */
.site-footer{margin-top:4px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.sf-grid{display:flex;flex-direction:column;gap:8px}
.sf-brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.sf-brand-row{display:flex;align-items:center;justify-content:center;gap:10px}
.sf-logo{width:96px;height:auto;opacity:.92}
.sf-tag{display:none;margin:0;color:var(--ink-3);font-size:.82rem;max-width:36ch;line-height:1.4}
.sf-social{display:flex;gap:8px}
.sf-social a{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);color:var(--gold);transition:border-color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.sf-social a:hover{border-color:var(--gold-lo);background:var(--panel-2)}
.sf-col{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.sf-col a{color:var(--ink-2);font-size:.84rem;text-decoration:none;transition:color var(--dur-hover) var(--ease)}
.sf-col a:hover{color:var(--gold)}
/* Quick links wrap as a compact inline row instead of one link per line --
   7 short words stacked vertically was the single biggest contributor to
   the footer's old height; wrapped, they settle into 2-3 lines instead. */
.sf-links{flex-direction:row;flex-wrap:wrap;justify-content:center;row-gap:4px;column-gap:12px}
.sf-contact-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
.sf-contact-row .sf-dot{color:var(--ink-3)}
.sf-col .sf-phone{direction:ltr;font-family:var(--body)}
.sf-col .sf-wa{color:var(--gold-hi);font-weight:600}
.sf-col .sf-addr{color:var(--ink-3);font-size:.82rem}
.sf-bottom{text-align:center;color:var(--ink-3);font-size:.78rem;padding-top:6px;border-top:1px solid var(--line)}
@media (min-width:860px){
  .sf-grid{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:40px}
  .sf-brand{align-items:flex-start;text-align:start}
  .sf-brand-row{justify-content:flex-start}
  .sf-tag{display:block}
  .sf-col{align-items:flex-start;text-align:start;min-width:150px}
  .sf-links{justify-content:flex-start}
  .sf-contact-row{justify-content:flex-start}
}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;background:var(--gold);color:#1a1408;font-weight:600;padding:9px 18px;border-radius:99px;font-size:.9rem;transition:var(--dur-modal) var(--ease);pointer-events:none;z-index:9;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- catalog ---------- */
.cat-dd{position:relative;margin-bottom:14px;z-index:5}
.cat-dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:.95rem;font-weight:600;cursor:pointer;font-family:var(--body);text-align:right;transition:border-color var(--dur-hover) var(--ease),box-shadow var(--dur-hover) var(--ease)}
.cat-dd-btn:hover{border-color:var(--gold-lo)}
.cat-dd-btn .lbl{display:flex;align-items:center;gap:9px;min-width:0}
.cat-dd-btn .lbl small{font-weight:400;color:var(--ink-3);font-size:.78rem}
.cat-dd-btn .chev{transition:transform var(--dur-hover) var(--ease);flex:none;color:var(--gold-hi)}
.cat-dd.open .cat-dd-btn{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.15)}
.cat-dd.open .cat-dd-btn .chev{transform:rotate(180deg)}
.cat-dd-list{position:absolute;top:calc(100% + 8px);right:0;left:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px;max-height:min(58vh,420px);overflow-y:auto;box-shadow:0 18px 44px -14px rgba(0,0,0,.5);list-style:none;margin:0}
.cat-dd-list[hidden]{display:none}
.cat-dd-list li{padding:11px 14px;border-radius:var(--r-sm);font-size:.92rem;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.cat-dd-list li:hover{background:var(--panel-2);color:var(--ink)}
.cat-dd-list li.on{background:var(--gold);color:#1a1408;font-weight:600}
.cat-dd-list li .ck{opacity:0;flex:none;width:16px;height:16px}
.cat-dd-list li.on .ck{opacity:1}
.cat-dd-list li + li{margin-top:2px}
.cat-section{display:flex;flex-direction:column;gap:10px}
.cat-section h3{margin:0;font-family:var(--display);color:var(--gold-hi);font-size:1.05rem}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
@media (min-width:860px){ .cat-grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:18px} }
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.pager button{min-height:40px;padding:0 16px;border-radius:var(--r-md);font-size:.88rem;font-weight:600;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);cursor:pointer;transition:border-color var(--dur-hover) var(--ease)}
.pager button:hover:not(:disabled){border-color:var(--gold-lo)}
.pager button:disabled{opacity:.4;cursor:default}
.pager span{color:var(--ink-3);font-size:.84rem}
.piece{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:border-color var(--dur-hover) var(--ease),box-shadow var(--dur-hover) var(--ease),transform var(--dur-hover) var(--ease)}
.piece.selected{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,162,75,.4)}
@media (hover:hover){ .piece:hover{border-color:var(--gold-lo);box-shadow:0 16px 32px -20px rgba(0,0,0,.4);transform:translateY(-2px)} }
.piece .ph-wrap{position:relative}
/* Product photos: 4:5 portrait, object-fit:contain (not cropped) -- the
   redesign brief's explicit call for catalogue photos, confirmed with Ali:
   letterboxing (showing the full uncropped piece against the panel-2
   background) over cropping it to fill a square, since a jewellery piece's
   true proportions matter when a customer is deciding to buy. Marketing
   thumbnails elsewhere (home's showcase/new-arrivals cards) stay cropped
   cover -- those are curated teaser images, not the product-research view. */
.piece .ph-scroll{position:relative;aspect-ratio:4/5;background:var(--panel-2);display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;direction:rtl}
.piece .ph-scroll::-webkit-scrollbar{display:none}
.piece .ph{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;display:block;object-fit:contain;cursor:pointer}
.piece .ph-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:5px;padding:4px 8px;border-radius:99px;background:rgba(0,0,0,.35);pointer-events:none}
.piece .ph-dots .dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);transition:background var(--dur-hover) var(--ease),transform var(--dur-hover) var(--ease)}
.piece .ph-dots .dot.on{background:#fff;transform:scale(1.3)}
.piece .pbody{padding:11px 12px 12px;display:flex;flex-direction:column;gap:7px}
.piece .pt{font-weight:600;font-size:.92rem;line-height:1.35}
.piece .pm{color:var(--ink-3);font-size:.76rem;text-align:right}
.piece .btn{padding:8px 8px;font-size:.82rem;gap:6px}
.piece .piece-btns{display:flex;flex-direction:column;gap:6px}
.piece-icon-row{display:flex;align-items:center;gap:8px}
.piece-icon-row .btn{flex:1}
.piece-icon-row .like-btn{flex:none}
.btn.icon-only{padding:8px}
.empty{color:var(--ink-3);text-align:center;padding:30px 10px;font-size:.92rem}

/* ---------- "نصف اجور" (half crafting fee) sticker -- now drawn from the
   shared --bad/--danger token instead of its own hardcoded hex pair, so it
   tracks the token system's light/dark values like everything else restyled
   this phase, instead of staying frozen at the old dark-mode-only red. ---------- */
.half-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;background:var(--bad);color:#fff;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:99px;box-shadow:0 2px 6px rgba(0,0,0,.25);letter-spacing:.2px}

/* ---------- "عرض السعر الآن" live price result ---------- */
.price-now-result{background:rgba(201,162,75,.1);border:1px solid var(--gold-lo);border-radius:8px;padding:7px 8px;font-size:.78rem;color:var(--gold-hi);font-weight:700}
.price-now-result[hidden]{display:none}
.price-now-result .pn-amount{display:flex;align-items:baseline;justify-content:center;gap:4px;direction:ltr;font-variant-numeric:tabular-nums}
.price-now-result .pn-amount small{font-weight:500;font-size:.72rem;color:var(--ink-3)}
.price-now-result .pn-note{display:block;font-weight:400;color:var(--ink-3);font-size:.68rem;margin-top:4px;text-align:center}

/* ---------- piece card badges + multi-select ---------- */
.badge-new{position:absolute;top:8px;right:8px;z-index:2;background:var(--gold);color:#1a1408;font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:99px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.piece-select-btn{position:absolute;top:8px;left:8px;z-index:2;width:28px;height:28px;border-radius:50%;background:rgba(10,8,4,.55);border:1.5px solid rgba(255,255,255,.5);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
/* Phase 5f added a [data-tip] tooltip to this button (it's otherwise a
   blank circle with zero visible cue until selected). The shared
   [data-tip]{position:relative} rule below would otherwise win on equal
   specificity (it comes later in this stylesheet) and knock this element
   out of absolute positioning -- the extra class in the selector lifts
   this one rule's specificity above it so the corner placement holds. */
.piece-select-btn[data-tip]{position:absolute}
.piece.selected .piece-select-btn{background:var(--gold);border-color:var(--gold);color:#1a1408}
.piece-select-btn svg{opacity:0}
.piece.selected .piece-select-btn svg{opacity:1}

/* ---------- like button (jewellery pieces: like-only, no dislike) ---------- */
.like-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:99px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2);font-size:.78rem;font-weight:600;cursor:pointer;font-family:var(--body)}
.like-btn.on{border-color:var(--gold);color:var(--gold)}
.like-btn:disabled{opacity:.7;cursor:default}
/* overlay variant: sits on the card photo itself, bottom-right corner --
   mirrors .piece-select-btn's translucent-dark-pill look at the opposite corner */
.piece-like-btn{position:absolute;bottom:8px;right:8px;z-index:2;background:rgba(10,8,4,.55);border-color:rgba(255,255,255,.5);color:#fff}
.piece-like-btn.on{background:var(--gold);border-color:var(--gold);color:#1a1408}

/* ---------- category + weight filter dropdowns side by side ---------- */
.dd-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.dd-row .cat-dd{margin-bottom:0}

/* ---------- "نصف اجور" checkbox filter ---------- */
.half-filter-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:.9rem;font-weight:600;cursor:pointer;font-family:var(--body);margin-bottom:14px;transition:border-color var(--dur-hover) var(--ease)}
.half-filter-btn:hover{border-color:var(--gold-lo)}
.half-filter-btn .hf-box{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;color:transparent;background:var(--panel-2);transition:background var(--dur-hover) var(--ease),border-color var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.half-filter-btn .hf-box svg{width:13px;height:13px}
.half-filter-btn.on{border-color:var(--gold)}
.half-filter-btn.on .hf-box{background:var(--gold);border-color:var(--gold);color:#1a1408}

/* ---------- sticky multi-select inquiry bar ---------- */
.multi-bar{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;align-items:center;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -10px 30px -10px rgba(0,0,0,.4)}
.multi-bar[hidden]{display:none}
.multi-bar .mb-count{flex:1;font-size:.88rem;color:var(--ink-2);font-weight:600}
.multi-bar .btn{flex:none;padding:10px 14px;font-size:.84rem}
@media (min-width:860px){ .multi-bar{left:50%;right:auto;transform:translateX(-50%);bottom:20px;max-width:560px;border-radius:999px;border:1px solid var(--line);box-shadow:0 16px 36px -14px rgba(0,0,0,.45)} }

/* ---------- floating "request a custom piece" button -- always present on
   the catalog page so a visitor who doesn't find what they want can jump
   straight to the standalone custom-order page. Hidden while the
   multi-select inquiry bar is showing, so the two never overlap at the
   bottom of the screen. ---------- */
.order-fab{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:14;
  display:flex;align-items:center;gap:8px;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis;
  background:var(--gold);color:#1a1408;font-weight:700;font-size:.84rem;
  padding:13px 20px;border-radius:99px;box-shadow:0 10px 26px rgba(0,0,0,.4);transition:filter var(--dur-hover) var(--ease),transform var(--dur-hover) var(--ease)}
.order-fab:hover{filter:brightness(1.06)}
.order-fab[hidden]{display:none}
.order-fab svg{flex:none}
@media (min-width:860px){ .order-fab{left:auto;right:32px;transform:none} .order-fab:hover{transform:translateY(-2px)} }

/* ---------- lightbox ---------- */
.ovl{position:fixed;inset:0;background:rgba(5,4,2,.82);display:flex;align-items:flex-end;justify-content:center;z-index:20;backdrop-filter:blur(2px)}
.ovl[hidden]{display:none}
.sheet{width:100%;max-width:460px;max-height:88vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:20px 20px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px))}
.sheet-head{display:flex;justify-content:flex-end}
.sheet-close{background:none;border:0;color:var(--ink-3);font-size:1.3rem;cursor:pointer;line-height:1;padding:4px 8px}
/* Product detail main photo: same 4:5 contain/letterbox treatment as the
   catalogue cards (see .piece .ph above) -- a visitor opening a piece to
   look closer should see the exact same uncropped photo, just bigger. */
.sheet img.pd{width:100%;aspect-ratio:4/5;object-fit:contain;background:var(--panel-2);border-radius:var(--r-lg);margin-bottom:10px}
.pd-thumbs{display:flex;gap:8px;margin-bottom:12px;overflow-x:auto}
.pd-thumbs img{width:56px;height:56px;object-fit:cover;border-radius:var(--r-sm);cursor:pointer;border:2px solid transparent;flex:none;opacity:.6;transition:opacity var(--dur-hover) var(--ease),border-color var(--dur-hover) var(--ease)}
.pd-thumbs img.on{border-color:var(--gold);opacity:1}
/* Desktop: the product-detail sheet specifically (not every .ovl/.sheet
   dialog site-wide -- confirm/notify overlays elsewhere are untouched,
   out of this phase's scope) centers as a real modal instead of staying
   pinned to the bottom of a tall desktop viewport, and gets a little more
   room for the taller 4:5 photo. */
@media (min-width:860px){
  #pieceOvl{align-items:center}
  #pieceOvl .sheet{max-width:520px;border-radius:var(--r-xl);max-height:85vh}
}
.sheet h3{margin:0 0 4px;font-family:var(--display);color:var(--gold-hi);font-size:1.15rem}
.sheet .half-badge{margin-bottom:8px}
.sheet .pm{color:var(--ink-3);font-size:.85rem;text-align:right;margin-bottom:10px}
.sheet p{color:var(--ink-2);margin:0 0 14px;line-height:1.7}
.sheet .piece-btns{display:flex;flex-direction:column;gap:8px}
.sheet .price-now-result{margin-bottom:10px;padding:10px;font-size:.88rem}

/* ---------- articles ---------- */
.art-list{display:flex;flex-direction:column;gap:10px}
.art-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);
  transition:border-color var(--dur-hover) var(--ease),box-shadow var(--dur-hover) var(--ease),transform var(--dur-hover) var(--ease)}
@media (hover:hover){ .art-card:hover{border-color:var(--gold-lo);box-shadow:0 16px 32px -20px rgba(0,0,0,.4);transform:translateY(-2px)} }
.art-card b{font-family:var(--display);font-size:1.05rem;color:var(--gold-hi)}
.art-card p{margin:0;color:var(--ink-2);font-size:.88rem;line-height:1.6}
.art-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.art-card .date{color:var(--ink-3);font-size:.74rem;direction:ltr}
.art-card-votes{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:.76rem;flex-shrink:0}
.art-card-votes span{display:inline-flex;align-items:center;gap:3px}
.art-card-votes svg{opacity:.7}
/* The article itself is an admin-designed full page meant to read as a
   native page of its own right under the top ribbon -- not a card or a
   boxed-in widget. So its iframe breaks all the way out of the centered
   reading column to span the FULL viewport width edge-to-edge, with no
   border/corner/background of its own: visually it just IS the page. The
   standard "full-bleed" trick (100vw + negative margins) is what does the
   breaking-out; html,body get overflow-x:hidden (declared earlier) so the
   100vw calculation can never create a stray horizontal scrollbar. */
/* .wrap normally has top padding (gap under the nav before content starts),
   which left a visible strip of the page's own background between the nav
   and the full-bleed article -- zero it out here so the article starts
   flush against the nav with no seam. The bottom padding is untouched; it's
   what gives the vote-widget/"all articles" section some breathing room
   above the site's own footer. */
.wrap.art-detail{padding-top:0}
.art-frame-wrap{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)}
.art-frame{display:block;width:100%;border:none;min-height:70vh;overflow:hidden}
/* ...except the bit of site UI that has to stay -- the like/dislike widget
   and the link back to the article list -- which comes right after the
   custom page and sits in the normal centered column like everything else. */
.art-foot{max-width:640px;margin-inline:auto;padding:22px 16px 0}
@media (min-width:860px){ .art-foot{max-width:640px;padding:28px 32px 0} }

/* ---------- like/dislike vote widget (under articles + answered questions) ---------- */
.vote-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.vote-label{color:var(--ink-3);font-size:.8rem;margin-inline-end:2px}
.vote-btn{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2);font-size:.82rem;font-weight:600;cursor:pointer;transition:border-color var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.vote-btn:hover:not([disabled]){border-color:var(--gold-lo);color:var(--gold-hi)}
.vote-btn.on{border-color:var(--gold);background:rgba(201,162,75,.14);color:var(--gold-hi)}
.vote-btn[disabled]{cursor:default}
.vote-btn[disabled]:not(.on){opacity:.55}
.vote-thanks{color:var(--ink-3);font-size:.78rem}

/* ---------- ask the jeweller ---------- */
.qa-form{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
textarea,input[type=text],input[type=number],select{
  width:100%;padding:11px 12px;border-radius:11px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-family:var(--body);font-size:.94rem
}
textarea{min-height:84px;resize:vertical}
textarea:focus,input:focus,select:focus{outline:2px solid var(--gold-lo);outline-offset:1px}
.qa-item{padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.qa-q{color:var(--gold-hi);font-weight:600;font-size:.94rem}
.qa-a{color:var(--ink-2);font-size:.92rem;line-height:1.7;margin-top:6px}
.qa-a-label{font-weight:700;color:var(--ink);margin-inline-end:4px}
.qa-a-body{display:inline}
.qa-a-body p{display:inline;margin:0}
.field-msg{font-size:.82rem;color:var(--ink-3);min-height:1.2em}
.field-msg.err{color:var(--bad)}
.field-msg.ok{color:var(--wa)}

/* ---------- optional image attach (orders form) ---------- */
.upload{position:relative;border:1.5px dashed var(--line);border-radius:14px;padding:18px 14px;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer;
  background:var(--panel-2);transition:border-color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.upload:hover{border-color:var(--gold-lo)}
.upload input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload .uicon{color:var(--gold-lo)}
.upload b{font-size:.86rem;font-weight:600;color:var(--ink-2)}
.upload small{font-size:.74rem;color:var(--ink-3)}
.upload .preview{display:none;align-items:center;gap:12px;width:100%;text-align:right}
.upload.has-file{padding:10px}
.upload.has-file .placeholder{display:none}
.upload.has-file .preview{display:flex}
.upload .preview img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none;border:1px solid var(--line)}
.upload .preview .pname{flex:1;min-width:0;font-size:.84rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload .preview .pchange{font-size:.78rem;color:var(--gold-hi);text-decoration:underline;flex:none}

/* ---------- gold price page ---------- */
.price-live{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
/* Replaced the old two-side-by-side-card ("boxes") layout with a single
   ledger: one row per weight unit, sell/buy shown as two plain stat
   columns inside it, divided only by a thin line -- reads like a real
   price board instead of a grid of cards. */
.pg-row{display:flex;align-items:center;gap:8px;padding:12px 2px;border-bottom:1px solid var(--line)}
.pg-row:last-child{border-bottom:0}
.pg-label{font-family:var(--display);color:var(--gold-hi);font-weight:700;font-size:.92rem;display:flex;flex-direction:column;gap:1px;flex:0 0 auto;min-width:50px}
.pg-label small{color:var(--ink-3);font-weight:500;font-size:.64rem}
.pg-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.pg-stat small{font-size:.72rem;font-weight:700;color:var(--ink-3)}
/* Bumped up from the original 1.15rem -- these are the page's single most
   important numbers (what a customer is actually here to read), so they
   should read at a glance, not blend in with the surrounding text. */
.pg-stat b{font-variant-numeric:tabular-nums;direction:ltr;font-weight:800;font-size:clamp(1.1rem,5.2vw,1.5rem);display:flex;align-items:baseline;gap:4px;line-height:1.1}
.pg-stat.sell b{color:var(--wa)}
.pg-stat.buy b{color:var(--bad)}
.pg-stat b i{font-style:normal;font-weight:600;font-size:.6rem;color:var(--ink-3)}

/* ---------- gold price: TV-kiosk board + the small mode toggle ---------- */
/* The merged /gold-price page carries both the normal (phone/laptop) view
   and a full-screen TV board in the same DOM; only one is shown at a time
   via the html.tv-mode class, toggled by an auto-detect heuristic with a
   rememberable manual override (see gpToggle in the page script below). */
.gp-toggle{position:fixed;inset-inline-end:10px;bottom:10px;z-index:9000;width:34px;height:34px;border-radius:50%;
  background:var(--panel);border:1px solid var(--line);color:var(--ink-3);display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:.4;transition:opacity var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease),border-color var(--dur-hover) var(--ease)}
/* Phase 5f gave this button a [data-tip] tooltip too -- same specificity
   fix as .piece-select-btn above: without it, the shared
   [data-tip]{position:relative} rule would knock this out of its fixed
   corner placement. */
.gp-toggle[data-tip]{position:fixed}
.gp-toggle:hover,.gp-toggle:focus-visible{opacity:1;color:var(--gold-hi);border-color:var(--gold-lo)}
.gp-toggle svg{width:16px;height:16px}
html.tv-mode .gp-toggle{opacity:.25}
html.tv-mode .gp-toggle:hover{opacity:1}
#tvBoard{display:none}
html.tv-mode #tvBoard{display:flex}
html.tv-mode .topnav{display:none!important}
html.tv-mode .install-banner,html.tv-mode .toast{display:none!important}
html.tv-mode .wrap>*:not(#tvBoard):not(.gp-toggle){display:none!important}
html.tv-mode,html.tv-mode body{overflow:hidden}
#tvBoard{position:fixed;inset:0;z-index:8000;background:var(--ground);color:var(--ink);
  flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.6vh,34px);
  padding:clamp(18px,3.5vh,48px) clamp(18px,3.5vw,64px);box-sizing:border-box}
/* The sections (brand wordmark / ounce price / buy-sell cards / footer)
   stay a single vertically-centered cluster -- NOT stretched across the
   full screen height (that was the original bug, fixed in an earlier
   update) -- but Ali asked for the numbers themselves to read much bigger
   on the shop's actual TV, since a compact cluster at modest font sizes
   looked small from across the room. So the cluster is still centered/
   compact, just considerably larger: bigger clamp() max-ends and vh/vw
   multipliers throughout this block (and a wider .tv-cards/.tv-divider so
   the two columns don't collide at the larger sizes), rather than
   reintroducing edge-to-edge stretching.
   Floors raised again (not just the max-ends) after Ali compared this to
   the original standalone TV app: the max-ends already gave plenty of
   headroom, but on a real TV that isn't in true browser fullscreen (so the
   viewport height is shrunk by visible browser chrome), these clamp()s sit
   much closer to their floor than their ceiling in practice -- so the
   floor is what actually has to look "big", not just the max. Also restores
   the persistent shop-name wordmark at the top (the original app's own
   comment called it "the biggest thing on screen") -- this build only had
   it inside the one-time fullscreen-prompt card, never in the permanent
   board itself. */
/* Brand wordmark made bigger still (both the floor, which is what a real
   TV -- its vh shrunk by visible browser chrome -- actually sits near, and
   the ceiling, for a normal/"windowed" screen), while every other cluster
   below it (ounce price, buy/sell cards, footer) is pulled back down a
   notch at BOTH ends: Ali confirmed the windowed/"Windows" rendering looks
   right overall but wants the name bigger and the rest a bit smaller, and
   on the actual TV the floor sizes of "the rest" were big enough to force
   line-wraps and push content off screen, so the floor needed the larger
   correction of the two. */
.tv-brand{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.tv-brand img{height:clamp(104px,19vh,280px);width:auto;object-fit:contain}
.tv-ounce{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;flex:0 0 auto}
.tv-ounce .l{font-size:clamp(16px,2.1vh,38px);color:var(--ink-3);font-weight:600}
.tv-ounce .v{font-weight:800;font-size:clamp(52px,11.5vh,210px);line-height:1;color:var(--gold-hi);font-variant-numeric:tabular-nums;direction:ltr}
.tv-ounce .v small{font-size:.3em;color:var(--ink-3);font-weight:600;margin-inline-start:8px}
.tv-cards{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(14px,2vw,48px);max-width:1900px;margin:0 auto;width:100%;position:relative}
.tv-divider{position:absolute;top:6%;bottom:6%;inset-inline-start:50%;width:1px;background:var(--line);transform:translateX(-50%)}
.tv-pgroup{display:flex;flex-direction:column;gap:clamp(3px,.7vh,10px)}
.tv-pgroup .tv-ctitle{font-size:clamp(24px,3.8vh,72px);font-weight:800;text-align:center;margin-bottom:4px}
.tv-pgroup.sell .tv-ctitle{color:var(--wa)}
.tv-pgroup.buy .tv-ctitle{color:var(--bad)}
.tv-prow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:clamp(2px,.5vh,8px) clamp(5px,.8vw,14px);border-bottom:1px solid var(--line)}
.tv-prow:last-child{border-bottom:none}
.tv-prow .tv-pl{font-size:clamp(19px,2.5vh,44px);color:var(--ink-3);font-weight:600;white-space:nowrap}
.tv-prow .tv-pv{font-size:clamp(42px,8vh,144px);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;direction:ltr}
.tv-prow .tv-pv small{font-size:.32em;color:var(--ink-3);font-weight:500;margin-inline-start:6px}
.tv-pgroup.sell .tv-pv{color:var(--wa)}
.tv-pgroup.buy .tv-pv{color:var(--bad)}
/* Footer is day/date + time only now (address, phone, and the Instagram
   handle were removed on request -- Ali wants the TV screen to show
   nothing but the price cards and the clock at the bottom). Kept matched
   to .tv-prow .tv-pl ("الغرام الواحد" etc) exactly, per Ali's request --
   both were bumped up together a notch after he said that shared size
   still read small. flex-wrap stays off as a safety net even though
   there's only one item now. */
.tv-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:4px;color:var(--ink-3);font-size:clamp(19px,2.5vh,44px);flex-wrap:nowrap;max-width:100%}
.tv-footer .item{display:flex;align-items:center;gap:7px;white-space:nowrap}
.tv-footer .item svg{flex:0 0 auto;opacity:.75;width:1.1em;height:1.1em}
.tv-footer .item+.item{padding-inline-start:clamp(8px,1.1vw,18px);border-inline-start:1px solid var(--line)}
.tv-fshint{position:fixed;inset:0;background:rgba(4,3,2,.86);display:flex;align-items:center;justify-content:center;z-index:9500}
.tv-fshint[hidden]{display:none}
.tv-fscard{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.5);padding:clamp(22px,4vh,44px) clamp(26px,5vw,56px);text-align:center;max-width:min(560px,86vw)}
/* .tv-fscard has no icon next to its heading, but the SITE-WIDE h2 rule
   (near the top of this stylesheet) makes every h2 a flex row with a
   trailing divider line (h2::after) meant for section headings like "Shop
   by Category" -- on a plain two-line text heading like this one that line
   rendered as a stray bar next to the title and pinned the text to the
   flex-start edge instead of letting text-align:center (set on the card
   above) center it, which is exactly the "weird line ... not centered"
   Ali reported. Both are undone here, scoped to just this heading. */
.tv-fscard h2{display:block;margin:0 0 10px;font-family:var(--display);font-weight:800;color:var(--gold-hi);font-size:clamp(17px,2.2vh,24px)}
.tv-fscard h2::after{display:none}
.tv-fscard p{margin:0 0 18px;color:var(--ink-3);font-size:clamp(12.5px,1.4vh,16px);line-height:1.7}
@media (max-width:900px),(orientation:portrait){
  #tvBoard{overflow-y:auto}
  .tv-brand img{height:clamp(56px,16vw,140px)}
  .tv-cards{flex:none;display:flex;flex-direction:column;gap:18px;max-width:560px}
  .tv-divider{display:none}
  .tv-pgroup{gap:6px;padding-bottom:14px;border-bottom:1px solid var(--line)}
  .tv-pgroup:last-child{border-bottom:none;padding-bottom:0}
  .tv-footer{flex-direction:column;align-items:center;gap:8px;text-align:center}
  .tv-footer .item+.item{padding-inline-start:0;border-inline-start:none}
}

/* ---------- valuation ---------- */
.val-form{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.val-form label{font-size:.85rem;color:var(--ink-2)}
/* Was a hardcoded 3-stop neon mint/teal gradient (same fixed hex in both
   themes, never adapting). Tokenizing it straight (var(--buy) as a gradient
   stop with fixed dark text) turned out to fail AA contrast in light mode,
   since light's --buy (#0b8a74) is a deliberately darker, more muted accent
   than dark's bright #21e0bd. So instead of forcing a gradient into both
   themes, this is now a calm panel card with a --buy accent stripe + price
   color -- also more in line with the brief's "reduce heavy gradients, gold
   as accent only" direction. Verified >=3:1 (large bold text) for --buy on
   --panel-2 in both themes; the small print stays on --ink-3 (already
   AA-verified) rather than --buy, which only clears the large-text threshold. */
.val-result{padding:16px 16px;border-radius:16px;background:var(--panel-2);border:1px solid var(--line);border-inline-start:4px solid var(--buy)}
.val-result b{display:block;font-family:var(--display);font-size:1.6rem;color:var(--buy)}
.val-result small{display:block;font-size:.84rem;color:var(--ink-3);margin-top:4px;line-height:1.6}
.disclaimer{font-size:.78rem;color:var(--ink-3);line-height:1.6}

/* ---------- orders: post-submit "thank you" full view ---------- */
.order-thanks{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:40px 16px 20px}
.order-thanks[hidden]{display:none}
.order-thanks h1{font-family:var(--display);color:var(--gold-hi);font-size:1.4rem;margin:0}
.order-thanks p{color:var(--ink-2);margin:0 0 6px;max-width:34ch;line-height:1.7}
.order-thanks .btn{width:100%;max-width:320px}

/* ---------- install banner ---------- */
.install-banner{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));max-width:436px;margin-inline:auto;background:var(--panel);border:1px solid var(--gold-lo);border-radius:16px;padding:14px 14px;display:flex;flex-direction:column;gap:10px;z-index:30;box-shadow:0 12px 34px -10px rgba(0,0,0,.6)}
.install-banner[hidden]{display:none}
.ib-top{display:flex;align-items:center;gap:10px}
.ib-top img{width:34px;height:34px;border-radius:9px;flex:none}
.ib-top b{font-size:.94rem;flex:1}
.ib-close{background:none;border:0;color:var(--ink-3);font-size:1.2rem;cursor:pointer;padding:2px 4px;line-height:1}
.ib-steps{display:flex;flex-direction:column;gap:6px;font-size:.84rem;color:var(--ink-2)}
.ib-steps .step{display:flex;align-items:flex-start;gap:8px}
.ib-steps .n{flex:none;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#1a1408;font-size:.74rem;font-weight:700;display:grid;place-items:center;margin-top:1px}
.ib-steps .ic{flex:none;display:inline-flex;vertical-align:-5px}

/* ---------- reusable confirm dialog (bottom sheet, matches the site's own
   look) -- used instead of a plain confirm() wherever we need a yes/no,
   e.g. confirming you want to turn notifications off. ---------- */
.confirm-ovl{opacity:0;transition:opacity var(--dur-modal) var(--ease)}
.confirm-ovl.open{opacity:1}
.confirm-sheet{text-align:center;transform:translateY(14px);opacity:0;transition:transform var(--dur-modal) var(--ease),opacity var(--dur-modal) var(--ease)}
.confirm-ovl.open .confirm-sheet{transform:translateY(0);opacity:1}
.confirm-icon{width:52px;height:52px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center}
.confirm-icon.warn{background:rgba(192,57,43,.14);color:var(--bad)}
.confirm-icon.info{background:rgba(201,162,75,.16);color:var(--gold-hi)}
.confirm-sheet h3{text-align:center}
.confirm-sheet p{text-align:center}
.confirm-actions{display:flex;gap:8px;margin-top:4px}
.confirm-actions .btn{flex:1}

/* ---------- Phase 5a — shared component groundwork (tooltip, skeleton
   loader). Declared now, inert -- not yet applied to any element. Site's
   existing single-slot #toast/ddToast() already covers the toast role here
   (see SITE_SHELL_JS), so no separate toast-stack component is added to
   this app. Sparkline/toggle-switch aren't needed on the public site. ---- */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);inset-inline-start:50%;
  transform:translateX(-50%) translateY(4px);background:var(--ink);color:var(--ground);font-size:.74rem;font-weight:600;
  white-space:nowrap;padding:5px 9px;border-radius:7px;pointer-events:none;opacity:0;
  transition:opacity var(--dur-hover,180ms) var(--ease,ease),transform var(--dur-hover,180ms) var(--ease,ease);z-index:200}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
@keyframes skelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel{background:linear-gradient(110deg,var(--panel-2) 8%,var(--line) 18%,var(--panel-2) 33%);
  background-size:200% 100%;animation:skelShimmer 1.4s ease-in-out infinite;border-radius:var(--r-sm,8px)}
.skel-line{height:14px;border-radius:5px}
.skel-thumb{width:100%;aspect-ratio:1/1;border-radius:var(--r-md,10px)}

/* ---------- desktop content widths (Phase 5b, extended through 5d) ----------
   One rule decides each page's desktop .wrap width now, instead of two
   competing same-specificity rules (the old setup silently let a later,
   narrower rule win over an earlier, wider one -- see the removed comment
   this replaces). Every page has now had its own Phase 5 sub-phase
   (home/about/contact in 5b, jewellery/catalogue in 5c, gold-price/orders/
   questions/articles in 5d) and joins this group -- this closes out the
   public site's desktop-width pass; any page added later joins here too. */
@media (min-width:760px){ .wrap{max-width:560px} }
@media (min-width:860px){
  .wrap-home,.wrap-about,.wrap-contact,.wrap-jewellery,
  .wrap-goldprice,.wrap-orders,.wrap-questions,.wrap-articles{max-width:1360px}
}
/* Inside the wide home/about/contact wrap, single-column prose/text blocks
   stay at a readable line length (the brief's own "modern readable
   interface text" goal) rather than stretching edge to edge -- grids
   (category tiles, new-arrivals, showcase, cards) use the full wide wrap. */
@media (min-width:860px){
  .home-hero-content{max-width:760px;margin-inline:auto}
  .about p,.about .rich-content p{max-width:62ch}
  /* .story-text wraps everything except the photo grid (see pageHome's
     markup) so this is a plain 2-column split -- text column left, photos
     column right -- not a multi-area grid juggling several siblings. */
  .home-story{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
  .home-story .story-text{display:flex;flex-direction:column;gap:14px;align-items:flex-start;text-align:start}
  .home-story .story-text .section-eyebrow{align-self:flex-start}
  .home-story .story-text .section-eyebrow::after{inset-inline-start:0;transform:none}
  .home-story .story-text h2{justify-content:flex-start}
  .home-story .story-text h2::after{display:none}
  .home-story .story-text > p{max-width:50ch}
  .home-story .story-photos{margin:0}
  /* "من نحن": gallery carousel beside the text instead of a full-width
     strip -- only when a gallery actually exists (no-gallery pages, the
     common case before the admin uploads shop photos, stay single-column,
     letting .about's own max-width rule above control the reading width). */
  .about-layout:not(.no-gallery){display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:start}
  .about-layout .about-gallery{align-self:start}
  /* "تواصل معنا": "أرقامنا" (the actual call/WhatsApp actions, this page's
     real purpose) gets its own full-height column; "تابعونا" + "موقع
     المحل" stack in the other column -- a plain 3-item auto-placement, no
     explicit per-section selectors needed since the DOM order already is
     social, contact, location. */
  .contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;align-items:start}
  .contact-layout section[aria-labelledby="h-contact"]{grid-row:1 / 3}
}
/* Phase 5d: gold-price/orders/questions/articles are single-column
   calculator/form/reading pages, not multi-column layouts like home/about/
   jewellery -- so their wide .wrap just gives them a comfortable centered
   reading column at desktop (same idea as .home-hero-content/.about p
   above), not an edge-to-edge stretch. #tvBoard and .gp-toggle are
   deliberately left out of this (both are position:fixed and must stay
   exactly as they are -- see the "gold price: TV-kiosk board" CSS section). */
@media (min-width:860px){
  .wrap-goldprice .miniHead,.wrap-goldprice .price-live,.wrap-goldprice .val-section{max-width:680px;margin-inline:auto}
  .form-page-wrap,.order-thanks{max-width:640px;margin-inline:auto}
  .wrap-questions .qa-section{max-width:760px;margin-inline:auto}
  .wrap-articles .art-list{max-width:760px;margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- product page (/jewellery/<id>) -- social landing ---------- */
.wrap-product{max-width:560px;gap:16px;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.pp-crumbs{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.88rem}
.pp-back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);text-decoration:none;padding:6px 0}
.pp-back:hover{color:var(--gold-hi)}
.pp-crumb-cat{color:var(--ink-3);text-decoration:none}
.pp-gallery{position:relative;margin-inline:-16px}
.pp-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.pp-track::-webkit-scrollbar{display:none}
.pp-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/5;background:var(--panel-2);margin:0}
.pp-slide img{width:100%;height:100%;object-fit:cover;display:block}
.pp-count{position:absolute;bottom:12px;left:14px;background:rgba(0,0,0,.55);color:#fff;font-size:.74rem;padding:3px 10px;border-radius:99px;direction:ltr}
.pp-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.pp-dots span{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .2s}
.pp-dots span.on{background:var(--gold)}
@media (min-width:600px){.pp-gallery{margin-inline:0}.pp-slide:first-child,.pp-track{border-radius:var(--r-lg,14px)}.pp-track{overflow-x:auto}}
.pp-head{display:flex;flex-direction:column;gap:10px}
.pp-head h1{font-family:var(--display);font-size:1.45rem;line-height:1.5;margin:0;color:var(--ink)}
.pp-specs{display:flex;flex-wrap:wrap;gap:8px}
.pp-spec{border:1px solid var(--line);background:var(--panel-2);border-radius:999px;padding:5px 12px;font-size:.84rem;color:var(--ink-2)}
.pp-spec b{color:var(--ink);font-weight:600}
.pp-spec.avail{border-color:var(--success);color:var(--success)}
.pp-spec.half{background:var(--bad);border-color:var(--bad);color:#fff;font-weight:700}
.pp-price{background:var(--panel);border:1px solid var(--gold-lo);border-radius:var(--r-lg,14px);padding:14px 16px;min-height:64px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.pp-price-amt{display:flex;align-items:baseline;gap:6px;direction:ltr;justify-content:flex-end;font-variant-numeric:tabular-nums}
.pp-price-amt b{font-size:1.6rem;color:var(--gold-hi)}
.pp-price-amt small{color:var(--ink-2)}
.pp-price-note,.pp-price-na,.pp-price-wait{color:var(--ink-3);font-size:.8rem}
.pp-enq{display:flex;flex-direction:column;gap:10px}
.pp-enq label{font-size:.85rem;color:var(--ink-2)}
.pp-enq textarea{min-height:64px}
.pp-enq .btn.wa{font-size:1.05rem;padding:14px 12px}
.pp-actions{display:flex;align-items:center;gap:8px}
.pp-actions .btn{flex:1}
.pp-note{font-size:.78rem;color:var(--ink-3);text-align:center;margin:0}
.pp-related h2{font-family:var(--display);font-size:1.15rem;margin:6px 0 12px;color:var(--gold-hi)}
.pp-rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pp-rel-grid .arrival-card{flex:none;max-width:none;text-decoration:none;color:var(--ink)}
.pp-rel-grid .arrival-card b{font-size:.9rem;font-weight:600}
.pp-rel-grid .arrival-card small{color:var(--ink-3)}
.pp-all{margin-top:4px}
.pp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -10px 24px -16px rgba(0,0,0,.6);transform:translateY(110%);transition:transform .22s var(--ease,ease)}
.pp-sticky.show{transform:none}
.pp-sticky-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.pp-sticky-info span{font-size:.82rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-sticky-info small{font-size:.78rem;color:var(--gold-hi);direction:ltr;text-align:right}
.pp-sticky .btn.wa{flex:none;padding:11px 16px}
body.pp-sticky-on .install-banner{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
body.pp-sticky-on .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){.pp-sticky{display:none}}
.pp-missing{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;padding:20px 0}
.pp-missing h1{font-family:var(--display);color:var(--gold-hi);font-size:1.3rem;margin:0}
.pp-missing p{color:var(--ink-3);margin:0}

/* ---------- wishlist + comparison ---------- */
.wish-nav{position:relative;display:grid;place-items:center;color:var(--ink-2);text-decoration:none}
.wish-nav.on{border-color:var(--gold-lo);color:var(--gold-hi)}
.wish-badge{position:absolute;top:-5px;inset-inline-end:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--gold);color:#1a1408;font-size:.66rem;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--nav-bg,var(--panel))}
.wish-badge[hidden]{display:none}
.wish-badge.bump{animation:ddBump .35s var(--ease,ease)}
@keyframes ddBump{0%{transform:scale(1)}45%{transform:scale(1.3)}100%{transform:scale(1)}}
.like-btn svg{transition:transform .2s var(--ease,ease)}
.like-btn.pop svg{animation:ddHeartPop .42s var(--ease,ease)}
@keyframes ddHeartPop{0%{transform:scale(1)}35%{transform:scale(1.38)}65%{transform:scale(.92)}100%{transform:scale(1)}}
.wrap-wishlist,.wrap-compare{max-width:560px;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.wl-loading{text-align:center;color:var(--ink-3);padding:30px 0}
.wl-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 8px;color:var(--ink-3)}
.wl-empty svg{color:var(--gold-lo)}
.wl-empty h2{font-family:var(--display);color:var(--gold-hi);font-size:1.15rem;margin:4px 0 0}
.wl-empty p{margin:0 0 6px;max-width:34ch;line-height:1.7;font-size:.9rem}
.cmp-empty-actions{display:flex;gap:10px}
.wl-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.85rem;color:var(--ink-2)}
.wl-clear{background:none;border:none;color:var(--bad);font:inherit;font-size:.82rem;cursor:pointer;padding:6px 0}
.wl-hint{margin:0;font-size:.8rem;color:var(--ink-3);line-height:1.6}
.wl-list{display:flex;flex-direction:column;gap:10px}
.wl-card{position:relative;display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r-lg,14px);background:var(--panel);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s,opacity .2s,transform .2s}
.wl-card.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.wl-card.leaving{opacity:0;transform:translateX(16px)}
.wl-card.unavail .wl-thumb img{filter:grayscale(.85);opacity:.6}
.wl-card.unavail .wl-title{color:var(--ink-3)}
.wl-check{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);background:var(--panel-2);color:transparent;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .18s,border-color .18s,transform .18s}
.wl-check:active{transform:scale(.88)}
.wl-card.sel .wl-check{background:var(--gold);border-color:var(--gold);color:#1a1408}
.wl-thumb{flex:none;width:78px;height:96px;border-radius:10px;overflow:hidden;background:var(--panel-2);display:block}
.wl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.wl-title{color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wl-meta{font-size:.78rem;color:var(--ink-3)}
.wl-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wl-status{font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:99px;border:1px solid currentColor}
.wl-status.ok{color:var(--success)}
.wl-status.na{color:var(--bad)}
.wl-status.unk{color:var(--ink-3)}
.wl-price{font-size:.8rem;color:var(--ink-2);direction:ltr}
.wl-price b{color:var(--gold-hi)}
.wl-remove{flex:none;align-self:flex-start;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;padding:0}
.wl-remove:hover{color:var(--bad);border-color:var(--bad)}
.wl-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(0,0,0,.6);animation:ddUp .22s var(--ease,ease)}
.wl-bar[hidden]{display:none}
@keyframes ddUp{from{transform:translateY(100%)}to{transform:none}}
.wl-bar .mb-count{flex:1;font-size:.84rem;color:var(--ink-2);font-weight:600;white-space:nowrap}
.wl-bar .btn{flex:none;padding:10px 12px;font-size:.84rem}
.wl-bar .wl-x{background:none;border:none;color:var(--ink-3);font-size:1.1rem;cursor:pointer;padding:6px}
body.wl-bar-on .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.cmp-scroll{overflow-x:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.cmp-grid{display:grid;grid-template-columns:repeat(var(--n),minmax(118px,1fr));column-gap:10px;min-width:min-content}
.cmp-head{position:relative;display:flex;flex-direction:column;gap:6px;padding-bottom:10px}
.cmp-img{display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--panel-2)}
.cmp-img img{width:100%;height:100%;object-fit:cover;display:block}
.cmp-head.unavail .cmp-img img{filter:grayscale(.85);opacity:.6}
.cmp-name{font-weight:600;font-size:.86rem;color:var(--ink);text-decoration:none;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmp-heart .like-btn{padding:4px 9px}
.cmp-x{position:absolute;top:6px;inset-inline-start:6px;z-index:1;width:26px;height:26px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:1rem;line-height:1;cursor:pointer}
.cmp-label{grid-column:1/-1;font-size:.74rem;color:var(--ink-3);padding:10px 0 4px;border-top:1px solid var(--line)}
.cmp-cell{font-size:.88rem;color:var(--ink);padding-bottom:8px;word-break:break-word}
.cmp-cell b{color:var(--gold-hi)}
.cmp-na{color:var(--ink-3)}
.cmp-half{color:var(--bad);font-weight:700}
.cmp-low{display:inline-block;margin-inline-start:6px;font-size:.66rem;padding:1px 7px;border-radius:99px;background:rgba(201,162,75,.15);color:var(--gold-hi);border:1px solid var(--gold-lo)}
.cmp-actions{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.cmp-links{display:flex;gap:10px}
.cmp-links .btn{flex:1}
.multi-bar .btn[disabled]{opacity:.45}
@media (prefers-reduced-motion:reduce){.like-btn.pop svg,.wish-badge.bump,.wl-bar{animation:none}.wl-card,.wl-check{transition:none}}

body:has(#multiBar:not([hidden])) .install-banner{bottom:calc(80px + env(safe-area-inset-bottom,0px))}

/* sold pieces (open only by direct link) */
.pp-sold-ribbon{position:absolute;top:14px;right:14px;background:var(--bad);color:#fff;font-weight:700;font-size:.82rem;padding:5px 14px;border-radius:99px;box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.pp-spec.sold{background:var(--bad);border-color:var(--bad);color:#fff;font-weight:700}
.pp-sticky-info .pp-sticky-sold{color:var(--bad);font-weight:700;direction:rtl}
.pp-sold-note{border-color:var(--line);gap:6px}
.pp-sold-note b{color:var(--ink);font-size:1rem}
.pp-sold-note span{color:var(--ink-2);font-size:.85rem;line-height:1.7}