/* ==========================================================================
   Manara Al Shamkha — styles. Mobile-first, no frameworks.
   Brand "Royal souq" (Oct 2026): ivory + maroon + antique gold. No green.
   Themes: data-theme = light (default) | dark ; data-accent = maroon (default) | gold | date
   (variable names --plum / --saffron are kept for compatibility: --plum = deep brand colour, --saffron = gold)
   ========================================================================== */
:root{
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", "Helvetica Neue", Arial, sans-serif;
  --display: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --display-ar: "Mirza", "Noto Naskh Arabic", "Tajawal", serif;
  --r-sm:12px; --r:18px; --r-lg:28px;
  --ease: cubic-bezier(.2,.8,.2,1);
  /* Palette: ivory #FBF8F1 · maroon #7A1F2B · deep maroon #4E1019 · antique gold #C9A24B · light gold #E2C27A · gold text #8A6A1F · sand #F3EADB */
  --plum:#4e1019; --plum2:#2c070d; --saffron:#c9a24b; --saffron-lt:#e2c27a; --coral:#c9a24b; --gold-ink:#8a6a1f;
  /* accent: maroon (default) */
  --a1:#7a1f2b; --a2:#4e1019; --f1:#7a1f2b; --f2:#4e1019; --a3:#f1dfb2; --a-soft:#f6ece0; --pop:#c9a24b; --pop-ink:#8a6a1f;
  /* light surface (ivory) */
  --bg:#fbf8f1; --bg2:#f3eadb; --card:#fffdf9; --glass:rgba(255,253,249,.74);
  --ink:#2b1a1c; --ink2:#6b5a55; --line:rgba(78,16,25,.11);
  --shadow: 0 1px 2px rgba(78,16,25,.05), 0 8px 24px -8px rgba(78,16,25,.16);
  --shadow-lg: 0 30px 60px -20px rgba(78,16,25,.32);
  /* WhatsApp's own dark teal (WhatsApp buttons only, so customers recognise them; AA with white text) */
  --wa:#0e7c6b; --wa2:#075e54;
  color-scheme: light;
}
[data-accent="gold"]{ --a1:#8a6a1f; --a2:#5e4712; --f1:#8a6a1f; --f2:#5e4712; --a3:#f3e2b0; --a-soft:#f8f0dc; --pop:#7a1f2b; --pop-ink:#7a1f2b; }
[data-accent="date"]{ --a1:#6b3a1e; --a2:#3f2210; --f1:#6b3a1e; --f2:#3f2210; --a3:#ead2b8; --a-soft:#f5ebe0; --pop:#c9a24b; --pop-ink:#8a6a1f; }
[data-theme="dark"]{
  --bg:#1c0f11; --bg2:#251417; --card:#2c181b; --glass:rgba(44,24,27,.7);
  --ink:#f8efe2; --ink2:#c9b5ac; --line:rgba(248,239,226,.12); --a-soft:rgba(255,255,255,.07);
  --pop-ink:#e2c27a;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -10px rgba(0,0,0,.6);
  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.7);
  color-scheme: dark;
}
[data-theme="dark"][data-accent="maroon"]{ --a1:#e2c27a; --a2:#962a3b; --f1:#962a3b; --f2:#6e1a26; }
[data-theme="dark"][data-accent="gold"]{ --a1:#e9cf8e; --a2:#8a6a1f; }
[data-theme="dark"][data-accent="date"]{ --a1:#e0b48c; --a2:#8a4b27; --f1:#8a4b27; --f2:#5a2f16; }

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{ margin:0; font-family:var(--font); background:var(--bg); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; transition: background .4s var(--ease), color .4s var(--ease); overflow-x:hidden }
img,svg{ display:block; max-width:100% }
a{ color:inherit }
button,input,textarea{ font:inherit; color:inherit }
h1,h2,h3,h4{ line-height:1.15; margin:0 0 .4em; letter-spacing:-.02em }
[hidden]{ display:none !important }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{ position:absolute; left:-999px; top:8px; background:var(--f1); color:#fff; padding:8px 14px; border-radius:10px; z-index:100 }
.skip:focus{ left:8px }
:focus-visible{ outline:3px solid var(--a1); outline-offset:2px; border-radius:8px }
.wrap{ width:min(1200px, 100% - 32px); margin-inline:auto }
.section{ padding:48px 0 }
.eyebrow{ display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--a1); margin-bottom:6px }
.fine{ font-size:.78rem; color:var(--ink2); margin:.5em 0 0 }
.grad{ background:linear-gradient(100deg,var(--a1) 10%,var(--pop-ink) 95%); -webkit-background-clip:text; background-clip:text; color:transparent }

/* ---------- buttons ---------- */
.btn{ --h:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--h); padding:0 18px; border-radius:999px; border:0; font-weight:700; text-decoration:none; cursor:pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; white-space:nowrap }
.btn:active{ transform:scale(.97) }
.btn--lg{ --h:52px; padding:0 24px; font-size:1.02rem }
.btn--block{ width:100% }
.btn--primary{ background:linear-gradient(135deg,var(--f1),var(--f2)); color:#fff; box-shadow:0 10px 24px -10px var(--a1) }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px var(--a1) }
.btn--wa{ background:linear-gradient(135deg,var(--wa),var(--wa2)); color:#fff; box-shadow:0 10px 24px -10px var(--wa2) }
.btn--wa:hover{ transform:translateY(-2px) }
.btn--wa small{ font-weight:500; opacity:.9 }
.btn--soft{ background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow) }
.btn--soft:hover{ border-color:var(--a1); color:var(--a1) }
.wa-ico{ width:20px; height:20px; fill:currentColor }
.icon-btn{ position:relative; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--card); cursor:pointer; transition:transform .2s var(--ease) }
.icon-btn:hover{ transform:translateY(-1px) }
.icon-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.i-moon{ display:none } [data-theme="dark"] .i-moon{ display:block } [data-theme="dark"] .i-sun{ display:none }
.linkbtn{ background:none; border:0; color:var(--ink2); text-decoration:underline; cursor:pointer; font-size:.85rem; margin-top:8px }
.badge{ position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--saffron); color:#2b1a1c; font-size:.72rem; font-weight:800; display:grid; place-items:center; border:2px solid var(--card) }
.badge.bump{ animation:bump .45s var(--ease) }
@keyframes bump{ 40%{ transform:scale(1.45) } }

/* ---------- top bar ---------- */
.topbar{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s }
.topbar.scrolled{ border-color:var(--line); box-shadow:0 6px 20px -16px rgba(0,0,0,.4) }
.topbar__inner{ display:flex; align-items:center; gap:12px; height:64px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; flex:1 }
.brand img{ border-radius:0; flex:none; filter:drop-shadow(0 3px 5px rgba(78,16,25,.3)) }
.brand__text{ display:flex; flex-direction:column; min-width:0 }
.brand__text strong{ font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.brand__text small{ color:var(--ink2); font-size:.74rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:start }
.nav{ display:none; gap:4px }
.nav a{ text-decoration:none; padding:8px 12px; border-radius:999px; font-weight:600; font-size:.92rem; color:var(--ink2) }
.nav a:hover{ background:var(--a-soft); color:var(--a1) }
.topbar__tools{ display:flex; align-items:center; gap:8px }
.palette{ display:none; gap:6px; padding:5px; border-radius:999px; background:var(--card); border:1px solid var(--line) }
.swatch{ width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0 }
.swatch[data-accent-btn="maroon"]{ background:linear-gradient(135deg,#a8394a,#4e1019) }
.swatch[data-accent-btn="gold"]{ background:linear-gradient(135deg,#f0d590,#8a6a1f) }
.swatch[data-accent-btn="date"]{ background:linear-gradient(135deg,#c08a5a,#3f2210) }
.swatch[aria-pressed="true"]{ border-color:var(--ink); transform:scale(1.1) }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding:28px 0 36px }
.hero__bg{ position:absolute; inset:0; pointer-events:none }
.blob{ position:absolute; border-radius:50%; filter:blur(50px); opacity:.55 }
.b1{ width:340px; height:340px; background:var(--a3); top:-100px; right:-80px; animation:drift 14s ease-in-out infinite }
.b2{ width:260px; height:260px; background:color-mix(in srgb,var(--pop) 45%, transparent); bottom:-80px; left:-80px; animation:drift 18s ease-in-out infinite reverse }
.b3{ width:220px; height:220px; background:#f0dcc0; top:40%; left:45%; opacity:.35; animation:drift 20s ease-in-out infinite }
[data-theme="dark"] .blob{ opacity:.22 }
@keyframes drift{ 50%{ transform:translate(30px,20px) scale(1.08) } }
.hero__leaves{ position:absolute; width:300px; right:-60px; bottom:-60px; opacity:.13; fill:none; stroke:var(--plum) }
[data-theme="dark"] .hero__leaves{ stroke:var(--saffron); opacity:.12 }
.hero__grid{ position:relative; display:grid; gap:28px }
.rating-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 10px; border-radius:999px; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px); text-decoration:none; font-size:.86rem; box-shadow:var(--shadow) }
.stars{ color:#9a7417; letter-spacing:1px }
.hero h1{ font-size:clamp(2.1rem, 8.5vw, 4rem); margin:16px 0 8px; font-weight:850 }
.hero__ar{ font-size:1.1rem; font-weight:600; color:var(--a1); margin:0 0 10px; text-align:start }
.hero__lead{ color:var(--ink2); font-size:1.04rem; max-width:34em; margin:0 0 20px }
.hero__cta{ display:flex; flex-wrap:wrap; gap:10px }
.hero__chips{ list-style:none; padding:0; margin:20px 0 0; display:flex; flex-wrap:wrap; gap:8px }
.hero__chips li{ display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:var(--glass); border:1px solid var(--line); font-size:.85rem; backdrop-filter:blur(8px) }
.hero__art{ position:relative; height:300px; display:grid; place-items:center }
.orb{ position:relative; width:270px; height:270px; border-radius:50%; background: radial-gradient(circle at 30% 25%, #fff 0, var(--a3) 45%, var(--a1) 100%); box-shadow: inset -20px -30px 60px rgba(0,0,0,.15), var(--shadow-lg) }
[data-theme="dark"] .orb{ background: radial-gradient(circle at 30% 25%, color-mix(in srgb,var(--a1) 60%, #fff) 0, var(--a1) 50%, var(--a2) 100%) }
.orb__ring{ position:absolute; inset:-18px; border-radius:50%; border:2px dashed color-mix(in srgb,var(--saffron) 70%, transparent); animation:spin 40s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
.basket{ position:absolute; inset:0; display:grid; place-items:center; font-size:110px; filter:drop-shadow(0 18px 18px rgba(0,0,0,.25)) }
.float{ position:absolute; font-size:44px; filter:drop-shadow(0 10px 10px rgba(0,0,0,.2)); animation:bob 6s ease-in-out infinite }
.f1{ top:-10px; left:30px } .f2{ top:10px; right:-10px; animation-delay:-1s } .f3{ bottom:30px; left:-24px; animation-delay:-2s }
.f4{ bottom:-14px; right:40px; animation-delay:-3s } .f5{ top:45%; right:-34px; animation-delay:-4s; font-size:38px }
.f6{ top:-28px; left:45%; animation-delay:-2.5s; font-size:36px } .f7{ bottom:-20px; left:60px; font-size:34px; animation-delay:-1.5s } .f8{ top:40%; left:-36px; font-size:36px; animation-delay:-3.5s }
@keyframes bob{ 50%{ transform:translateY(-12px) rotate(6deg) } }
.glass-card{ position:absolute; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:16px; background:var(--glass); border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:var(--shadow); font-size:.82rem; animation:bob 8s ease-in-out infinite }
[data-theme="dark"] .glass-card{ border-color:var(--line) }
.glass-card span{ font-size:1.5rem } .glass-card small{ display:block; color:var(--ink2) }
.hc1{ left:0; bottom:6px } .hc2{ right:0; top:6px; animation-delay:-4s }

/* ---------- info strip ---------- */
.info-strip{ display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow) }
.info-strip__addr{ font-weight:600; font-size:.92rem }
.info-strip__btns{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.info-strip__btns .btn{ padding:0 10px; font-size:.9rem }

/* ---------- deals ---------- */
.deals-banner{ position:relative; overflow:hidden; border-radius:var(--r-lg); padding:26px 22px; color:#fff; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,var(--saffron) 80%, #fff) 0, transparent 50%), linear-gradient(125deg,var(--f1) 0%,var(--f2) 48%,var(--plum) 100%); box-shadow:var(--shadow-lg) }
.deals-banner .eyebrow{ color:#fff; background:rgba(255,255,255,.18); padding:4px 10px; border-radius:999px }
.deals-banner h2{ font-size:clamp(1.5rem,5.5vw,2.3rem); margin-top:6px }
.deals-banner p{ margin:0; opacity:.92; max-width:30em }
.deals-banner__deco{ position:absolute; right:-14px; bottom:-26px; font-size:120px; transform:rotate(-14deg); opacity:.9; animation:bob 7s ease-in-out infinite }
.deals-banner__text{ position:relative; z-index:1; max-width:75% }
.hscroll{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px, 62%); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:16px 2px 12px; scrollbar-width:none; overscroll-behavior-x:contain }
.hscroll::-webkit-scrollbar{ display:none }
.hscroll > *{ scroll-snap-align:start }

/* ---------- shop tools ---------- */
.section__head{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px }
.section__head h2{ font-size:clamp(1.6rem,6vw,2.4rem) }
.price-note{ margin:0; font-size:.84rem; padding:8px 12px; border-radius:12px; background:var(--a-soft); color:var(--ink2); border:1px dashed color-mix(in srgb,var(--a1) 40%, transparent) }
.price-note span{ display:block }
.shop-tools{ position:sticky; top:64px; z-index:30; margin:0 -16px; padding:10px 16px 6px; background:color-mix(in srgb,var(--bg) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px) }
.search{ position:relative; display:flex; align-items:center }
.search svg{ position:absolute; left:16px; width:20px; height:20px; fill:none; stroke:var(--ink2); stroke-width:2; stroke-linecap:round }
.search input{ width:100%; height:52px; padding:0 44px 0 46px; border-radius:16px; border:1.5px solid var(--line); background:var(--card); box-shadow:var(--shadow); font-size:1rem; transition:border-color .2s, box-shadow .2s }
.search input:focus{ outline:none; border-color:var(--a1); box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 18%, transparent) }
.search input::-webkit-search-cancel-button{ display:none }
.search__clear{ position:absolute; right:8px; width:36px; height:36px; border:0; border-radius:50%; background:var(--a-soft); cursor:pointer }
.cats{ display:flex; gap:10px; overflow-x:auto; padding:12px 2px 6px; scroll-snap-type:x proximity; scrollbar-width:none }
.cats::-webkit-scrollbar{ display:none }
.cat{ flex:none; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:4px; width:92px; padding:10px 6px 8px; border-radius:18px; border:1.5px solid var(--line); background:var(--card); cursor:pointer; transition:transform .25s var(--ease), border-color .2s, background .2s, box-shadow .2s }
.cat:hover{ transform:translateY(-2px) }
.cat__ico{ width:46px; height:46px; display:grid; place-items:center; font-size:28px; border-radius:14px; background:var(--a-soft); transition:transform .3s var(--ease) }
.cat b{ font-size:.78rem; line-height:1.15; text-align:center }
.cat small{ font-size:.7rem; color:var(--ink2) }
.cat[aria-selected="true"]{ border-color:var(--a1); background:linear-gradient(160deg, var(--a-soft), var(--card)); box-shadow:0 10px 22px -14px var(--a1) }
.cat[aria-selected="true"] .cat__ico{ transform:scale(1.08) rotate(-6deg); background:linear-gradient(135deg,var(--f1),var(--f2)) }
.result-meta{ color:var(--ink2); font-size:.85rem; margin:10px 0 }

/* ---------- product cards ---------- */
.grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px }
.card{ position:relative; display:flex; flex-direction:column; border-radius:var(--r); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.card.in-cart{ border-color:color-mix(in srgb,var(--a1) 55%, transparent) }
.card__media{ position:relative; aspect-ratio: 4/3; display:grid; place-items:center; background: radial-gradient(circle at 50% 60%, #fff 0, var(--a-soft) 70%); font-size:clamp(46px, 13vw, 64px); overflow:hidden }
[data-theme="dark"] .card__media{ background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.12) 0, rgba(255,255,255,.03) 70%) }
.card__media > span{ filter:drop-shadow(0 10px 10px rgba(0,0,0,.18)); transition:transform .4s var(--ease) }
.card:hover .card__media > span{ transform:scale(1.12) rotate(-6deg) }
.card__media img{ width:100%; height:100%; object-fit:cover }
.tag{ position:absolute; top:8px; left:8px; font-size:.66rem; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--glass); backdrop-filter:blur(6px); border:1px solid var(--line); color:var(--ink2) }
.deal-flag{ position:absolute; top:8px; right:8px; font-size:.68rem; font-weight:800; padding:3px 8px; border-radius:999px; background:var(--pop); color:#fff }
.card__body{ display:flex; flex-direction:column; flex:1; padding:10px 12px 12px; gap:2px }
.card__name{ font-weight:750; font-size:.95rem; line-height:1.2 }
.card__ar{ font-size:.86rem; color:var(--ink2); direction:rtl; text-align:left }
.card__price{ margin-top:auto; padding-top:6px; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap }
.card__price b{ font-size:1.02rem; color:var(--a1) }
.card__price s{ font-size:.78rem; color:var(--ink2) }
.card__price small{ font-size:.75rem; color:var(--ink2) }
.card__act{ margin-top:8px }
.add{ width:100%; height:40px; border-radius:12px; border:0; background:var(--a-soft); color:var(--a1); font-weight:800; cursor:pointer; transition:background .2s, color .2s, transform .15s }
.add:hover{ background:var(--f1); color:#fff }
.add:active{ transform:scale(.96) }
.qty{ display:flex; align-items:center; justify-content:space-between; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--f1),var(--f2)); color:#fff; overflow:hidden; animation:pop .3s var(--ease) }
.qty button{ width:42px; height:100%; border:0; background:transparent; color:#fff; font-size:1.3rem; font-weight:700; cursor:pointer }
.qty button:hover{ background:rgba(255,255,255,.15) }
.qty output{ font-weight:800; font-size:.92rem }
@keyframes pop{ from{ transform:scale(.9); opacity:.4 } }
.hscroll .card{ min-width:0 }

.empty{ text-align:center; padding:40px 16px; color:var(--ink2) }
.empty__emoji{ font-size:48px }

/* ---------- how ---------- */
.how{ background:linear-gradient(180deg, transparent, var(--bg2), transparent) }
.steps{ list-style:none; padding:0; margin:0; display:grid; gap:12px }
.steps li{ position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center; padding:16px; border-radius:var(--r); background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px); box-shadow:var(--shadow) }
.steps__ico{ grid-row:1/3; width:54px; height:54px; display:grid; place-items:center; font-size:28px; border-radius:16px; background:var(--a-soft) }
.steps small{ color:var(--ink2) }
.steps__n{ position:absolute; top:10px; right:14px; font-size:2rem; font-weight:900; color:color-mix(in srgb,var(--a1) 22%, transparent) }

/* ---------- reviews ---------- */
.rating-hero{ display:grid; gap:18px; align-items:center; padding:22px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow) }
.rating-hero__score{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:130px; height:130px; border-radius:50%; background:conic-gradient(var(--a1) 0 100%); color:#fff; box-shadow:0 18px 40px -16px var(--a1); position:relative }
.rating-hero__score::before{ content:""; position:absolute; inset:6px; border-radius:50%; background:linear-gradient(135deg,var(--f1),var(--f2)) }
.rating-hero__score > *{ position:relative }
.rating-hero__score > span{ font-size:2.6rem; font-weight:900; line-height:1 }
.rating-hero__score small{ font-size:.72rem; opacity:.9 }
.rating-hero p{ color:var(--ink2); margin:0 0 12px }
.testimonials{ display:grid; grid-auto-flow:column; grid-auto-columns:85%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:16px 2px 8px; scrollbar-width:none }
.testimonials::-webkit-scrollbar{ display:none }
.tcard{ scroll-snap-align:start; padding:18px; border-radius:var(--r); background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px); box-shadow:var(--shadow) }
.tcard p{ margin:8px 0 12px; font-size:.98rem }
.tcard footer{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:.88rem }
.avatar{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; background:linear-gradient(135deg,var(--f1),var(--plum)) }

/* ---------- visit ---------- */
.visit{ display:grid; gap:16px }
.visit__card{ padding:22px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow) }
.visit__card h3{ font-size:1rem; margin-top:18px }
.visit__card h3 small{ color:var(--ink2); font-weight:500 }
.visit__addr{ font-weight:600 }
.hours{ list-style:none; padding:0; margin:0; display:grid; gap:6px }
.hours li{ display:flex; justify-content:space-between; gap:12px; padding:8px 12px; border-radius:10px; background:var(--a-soft); font-size:.9rem }
.hours li span:last-child{ font-weight:700; text-align:right }
.areas{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px }
.areas li{ padding:5px 10px; border-radius:999px; border:1px solid var(--line); font-size:.82rem }
.visit__btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px }
.visit__map{ position:relative; min-height:300px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow);
  background:
    linear-gradient(0deg, transparent 48%, color-mix(in srgb,var(--a1) 25%, transparent) 48% 52%, transparent 52%),
    linear-gradient(90deg, transparent 30%, color-mix(in srgb,var(--pop) 22%, transparent) 30% 33%, transparent 33%),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 40px), var(--bg2) }
.visit__map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.map-load{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:transparent; border:0; cursor:pointer; color:var(--ink) }
.map-load__pin{ font-size:52px; animation:bob 3s ease-in-out infinite }
.map-load b{ padding:8px 16px; border-radius:999px; background:var(--card); box-shadow:var(--shadow) }
.map-load small{ color:var(--ink2) }

/* ---------- footer ---------- */
.footer{ position:relative; margin-top:24px; padding:44px 0 120px; background:radial-gradient(90% 120% at 100% 0%, rgba(201,162,75,.22) 0, transparent 55%), linear-gradient(160deg, #5a1520, #2c070d); color:#f8efe2 }
.footer::before{ content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,#7a1f2b,#c9a24b 55%,#e2c27a) }
.footer__grid{ display:grid; gap:24px }
.footer h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:#e2c27a }
.footer__links{ list-style:none; padding:0; margin:0; display:grid; gap:8px }
.footer__links a{ text-decoration:none; opacity:.9; cursor:pointer } .footer__links a:hover{ opacity:1; text-decoration:underline }
.brand--footer .brand__text strong{ white-space:normal; font-size:.95rem }
.brand--footer .brand__text small{ color:#e2c27a }
.footer__tag{ opacity:.8; margin:10px 0 0 }
.footer__bottom{ display:flex; flex-direction:column; gap:4px; margin-top:28px; padding-top:18px; border-top:1px solid rgba(255,255,255,.15); font-size:.8rem; opacity:.75 }

/* ---------- sticky cart bar ---------- */
.cartbar{ position:fixed; z-index:45; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:12px; padding:10px 18px 10px 12px; border:0; border-radius:20px; color:#fff; cursor:pointer; text-align:left; background:linear-gradient(135deg,var(--f1),var(--f2)); box-shadow:0 18px 40px -12px color-mix(in srgb,var(--a2) 80%, #000); animation:rise .45s var(--ease) }
@keyframes rise{ from{ transform:translateY(120%) } }
.cartbar__icon{ position:relative; width:44px; height:44px; display:grid; place-items:center; font-size:24px; border-radius:14px; background:rgba(255,255,255,.18) }
.cartbar__icon .badge{ border-color:var(--f1) }
.cartbar__text{ flex:1; display:flex; flex-direction:column; line-height:1.2 }
.cartbar__text small{ opacity:.85 }
.cartbar__total{ font-weight:850; font-size:1.05rem }
.cartbar.bump{ animation:bump .45s var(--ease) }

/* ---------- drawer ---------- */
.scrim{ position:fixed; inset:0; z-index:60; background:rgba(44,7,13,.5); backdrop-filter:blur(3px); opacity:0; transition:opacity .3s }
.scrim.open{ opacity:1 }
.drawer{ position:fixed; z-index:70; left:0; right:0; bottom:0; max-height:92dvh; display:flex; flex-direction:column; background:var(--bg); border-radius:26px 26px 0 0; box-shadow:0 -20px 60px rgba(0,0,0,.3); transform:translateY(105%); transition:transform .4s var(--ease) }
.drawer.open{ transform:none }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px; border-bottom:1px solid var(--line) }
.drawer__head::before{ content:""; position:absolute; top:7px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:4px; background:var(--line) }
.drawer__head h2{ font-size:1.25rem; margin:0 }
.drawer__head h2 small{ color:var(--ink2); font-weight:500 }
.drawer__body{ flex:1; overflow-y:auto; padding:12px 18px; overscroll-behavior:contain }
.drawer__foot{ padding:12px 18px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--card) }
.sum{ display:flex; justify-content:space-between; align-items:baseline; font-size:1rem }
.sum b{ font-size:1.35rem; color:var(--a1) }
.drawer__foot .fine{ margin:2px 0 10px }
.cart-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px }
.citem{ display:grid; grid-template-columns:46px 1fr auto; gap:10px; align-items:center; padding:8px; border-radius:14px; background:var(--card); border:1px solid var(--line); animation:pop .3s var(--ease) }
.citem__emo{ width:46px; height:46px; display:grid; place-items:center; font-size:26px; border-radius:12px; background:var(--a-soft) }
.citem__name{ font-weight:700; font-size:.9rem; line-height:1.2 }
.citem__meta{ font-size:.78rem; color:var(--ink2) }
.citem .qty{ height:34px; min-width:112px; border-radius:10px }
.citem .qty button{ width:34px; font-size:1.1rem }
.citem__line{ font-weight:800; font-size:.85rem; text-align:right; margin-top:4px }
.cart-empty{ text-align:center; padding:26px 0; color:var(--ink2) }
.cart-empty div{ font-size:44px }
.checkout{ display:grid; gap:12px; margin-top:16px; padding-top:16px; border-top:1px dashed var(--line) }
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; margin:0; border:0; border-radius:14px; background:var(--a-soft) }
.seg label{ position:relative; cursor:pointer }
.seg input{ position:absolute; opacity:0 }
.seg span{ display:flex; flex-direction:column; align-items:center; padding:8px; border-radius:10px; font-weight:700; font-size:.92rem; transition:background .2s, box-shadow .2s }
.seg span small{ font-weight:500; color:var(--ink2); font-size:.74rem }
.seg input:checked + span{ background:var(--card); box-shadow:var(--shadow); color:var(--a1) }
.seg input:focus-visible + span{ outline:3px solid var(--a1) }
.field{ display:grid; gap:4px }
.field label{ font-weight:700; font-size:.86rem }
.field label small{ color:var(--ink2); font-weight:500 }
.field input,.field textarea{ width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--card); font-size:1rem; resize:vertical; transition:border-color .2s, box-shadow .2s }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--a1); box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 16%, transparent) }
.field.invalid input,.field.invalid textarea{ border-color:#e11d48 }
.err{ color:#e11d48; font-size:.78rem; min-height:0 }
.area-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px }
.area-chips button{ padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:.78rem; cursor:pointer }
.area-chips button:hover{ border-color:var(--a1); color:var(--a1) }

/* ---------- toast & fly ---------- */
.toast{ position:fixed; z-index:90; left:50%; bottom:96px; transform:translate(-50%, 20px); padding:10px 16px; border-radius:999px; background:var(--ink); color:var(--bg); font-weight:700; font-size:.88rem; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s var(--ease); white-space:nowrap }
.toast.show{ opacity:1; transform:translate(-50%,0) }
.fly{ position:fixed; z-index:95; pointer-events:none; font-size:34px; transition:transform .7s cubic-bezier(.5,-.3,.7,1), opacity .7s; will-change:transform }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.reveal.in{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
  .reveal{ opacity:1; transform:none }
}

.icon-btn{ text-decoration:none }
.icon-btn--wa{ color:#fff; background:linear-gradient(135deg,var(--wa),var(--wa2)); border-color:transparent }
.icon-btn--wa svg{ fill:#fff; stroke:none }
@media (max-width:599px){ .icon-btn{ width:38px; height:38px } .topbar__tools{ gap:6px } }
.more{ display:flex; justify-content:center; margin-top:22px }
.footer__theme{ display:flex; align-items:center; gap:8px; margin-top:16px; font-size:.82rem; opacity:.9 }
.footer__theme .swatch[aria-pressed="true"]{ border-color:#fff }
.footer__mode{ border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; border-radius:999px; padding:4px 10px; cursor:pointer }

/* ---------- larger screens ---------- */
@media (min-width:600px){
  .grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px }
  .hscroll{ grid-auto-columns:220px }
  .testimonials{ grid-auto-columns:minmax(280px,1fr) }
  .steps{ grid-template-columns:repeat(3,1fr) }
  .steps li{ grid-template-columns:1fr; text-align:left }
  .steps__ico{ grid-row:auto; margin-bottom:10px }
  .info-strip{ flex-direction:row; align-items:center; justify-content:space-between }
  .info-strip__btns{ display:flex }
  .palette{ display:flex }
  .only-mobile{ display:none }
  .price-note span{ display:inline; margin-left:6px }
  .footer__grid{ grid-template-columns:2fr 1fr 1fr }
  .footer__bottom{ flex-direction:row; justify-content:space-between }
}
@media (min-width:900px){
  .nav{ display:flex }
  .brand{ flex:0 1 auto; margin-right:auto }
  .hero{ padding:56px 0 64px }
  .hero__grid{ grid-template-columns:1.1fr .9fr; align-items:center }
  .hero__art{ height:440px }
  .orb{ width:360px; height:360px }
  .basket{ font-size:150px } .float{ font-size:58px }
  .grid{ grid-template-columns:repeat(4, minmax(0,1fr)) }
  .section__head{ flex-direction:row; justify-content:space-between; align-items:flex-end }
  .price-note{ max-width:440px }
  .rating-hero{ grid-template-columns:auto 1fr; padding:30px 36px }
  .visit{ grid-template-columns:1fr 1.2fr }
  .shop-tools{ margin:0; padding:12px 0 6px }
  .drawer{ left:auto; top:0; width:440px; max-height:none; border-radius:26px 0 0 26px; transform:translateX(105%) }
  .drawer__head::before{ display:none }
  .cartbar{ left:auto; right:24px; bottom:24px; width:360px }
  .toast{ bottom:110px }
}
@media (min-width:1200px){ .grid{ grid-template-columns:repeat(5, minmax(0,1fr)) } }

.card__price--unit small{ display:inline-block; padding:3px 9px; border-radius:999px; background:var(--a-soft); color:var(--a1); font-weight:700 }
.cartbar__total{ white-space:nowrap }

/* ==========================================================================
   Real-photo styling (Lulu-style product cards, photo hero, photo tabs)
   ========================================================================== */
/* product cards */
.card{ border-radius:16px; background:var(--card); border:1px solid var(--line); box-shadow:0 1px 2px rgba(78,16,25,.05) }
.card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(78,16,25,.30) }
.card__media{ aspect-ratio:1/1; background:#fff; border-bottom:1px solid var(--line); padding:0 }
[data-theme="dark"] .card__media{ background:#fff }
.card__media img{ width:100%; height:100%; object-fit:contain; transition:transform .45s var(--ease) }
.card:hover .card__media img{ transform:scale(1.05) }
.card__emoji{ font-size:clamp(46px,13vw,64px) }
.tag{ top:8px; left:8px; background:rgba(255,255,255,.92); color:#6b5a55; border-color:rgba(78,16,25,.08); backdrop-filter:none }
.deal-flag{ background:var(--f1) }
.card__body{ padding:10px 12px 12px; gap:1px }
.card__name{ font-size:.93rem; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.3em }
.card__ar{ font-size:.85rem }
.card__price--unit small{ font-size:.72rem; padding:2px 8px; background:transparent; border:1px solid var(--line); color:var(--ink2); font-weight:600 }
.add{ background:var(--f1); color:#fff; border-radius:10px; height:38px }
.add:hover{ background:var(--f2) }
.qty{ height:38px; border-radius:10px }
/* hero photo composition */
.orb{ background: radial-gradient(circle at 30% 25%, #fff 0, var(--a3) 50%, var(--saffron) 95%, var(--a1) 135%) }
[data-theme="dark"] .orb{ background: radial-gradient(circle at 30% 25%, #f3dc9c 0, var(--saffron) 45%, #6e1a26 100%) }
.basket{ inset:14%; border-radius:50%; overflow:hidden; background:#fff; box-shadow:0 24px 50px -20px rgba(0,0,0,.45); filter:none; border:6px solid #fff }
.basket img{ width:100%; height:100%; object-fit:cover; transform:scale(1.05) }
.float{ width:66px; height:66px; border-radius:50%; background:#fff; overflow:hidden; box-shadow:0 12px 26px -10px rgba(0,0,0,.35); border:3px solid #fff; filter:none; font-size:0 }
.float img{ width:100%; height:100%; object-fit:contain }
.f5,.f6,.f7,.f8{ width:56px; height:56px }
.f1{ top:-14px; left:18px } .f2{ top:4px; right:-18px } .f3{ bottom:22px; left:-30px } .f4{ bottom:-18px; right:30px }
.f5{ top:44%; right:-40px } .f6{ top:-34px; left:44% } .f7{ bottom:-26px; left:52px } .f8{ top:38%; left:-42px }
@media (min-width:900px){ .float{ width:92px; height:92px } .f5,.f6,.f7,.f8{ width:74px; height:74px } }
.gc-img{ width:40px; height:40px; border-radius:12px; object-fit:cover; background:#fff }
.gc-star{ font-size:1.5rem; color:#c9a24b }
/* fresh picks banner photo */
.deals-banner__deco{ right:-10px; bottom:-18px; width:150px; height:150px; border-radius:50%; overflow:hidden; border:5px solid rgba(255,255,255,.85); box-shadow:0 20px 40px -18px rgba(0,0,0,.5); background:#fff; font-size:0; transform:rotate(-8deg) }
.deals-banner__deco img{ width:100%; height:100%; object-fit:cover }
@media (min-width:900px){ .deals-banner__deco{ width:200px; height:200px; right:30px; top:50%; bottom:auto; margin-top:-100px } }
/* category tabs with photos */
.cat__ico{ width:56px; height:56px; border-radius:50%; background:#fff; overflow:hidden; border:2px solid var(--line); padding:0 }
.cat__ico img{ width:100%; height:100%; object-fit:cover }
.cat[aria-selected="true"] .cat__ico{ background:#fff; border-color:var(--a1); transform:scale(1.06); box-shadow:0 0 0 3px color-mix(in srgb,var(--a1) 25%, transparent) }
/* basket thumbnails + fly */
.citem__emo{ background:#fff; overflow:hidden; border:1px solid var(--line) }
.citem__emo img{ width:100%; height:100%; object-fit:contain }
.fly{ width:56px; height:56px; border-radius:50%; overflow:hidden; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.25) }
.fly img{ width:100%; height:100%; object-fit:contain }
.footer__bottom a{ color:inherit }
@media (max-width:599px){ .glass-card{ display:none } }
@media (max-width:899px){ .deals-banner__deco{ width:104px; height:104px; right:-14px; bottom:-14px } .deals-banner__text{ max-width:72% } }
.cartbar__icon svg{ width:24px; height:24px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

/* ---- Google review buttons ---- */
.btn--review{ background:#fffdf9; color:#4e1019; border:2px solid #c9a24b; box-shadow:var(--shadow); text-decoration:none }
.btn--review:hover{ background:#f6ece0; border-color:#7a1f2b; transform:translateY(-2px) }
.btn--review small{ font-weight:600; opacity:.85 }
.btn--review .g-ico{ flex:none }
.btn--sm{ --h:36px; padding:0 14px; font-size:.86rem }
.footer__links a.btn--review{ opacity:1; text-decoration:none; color:#4e1019 }
[data-theme="dark"] .btn--review{ background:#2c181b; color:#f3dc9c; border-color:#c9a24b }
[data-theme="dark"] .footer__links a.btn--review{ color:#f3dc9c }
.order-sent{ background:var(--a-soft); border:1px solid var(--a1); border-radius:var(--r); padding:12px 14px; margin:0 0 12px; display:grid; gap:8px }
.order-sent[hidden]{ display:none }
.order-sent p{ margin:0; font-size:.9rem; line-height:1.4 }
.order-sent__title{ font-weight:700 }

/* ==========================================================================
   Language toggle (EN | عربي) + Arabic / RTL layout
   ========================================================================== */
.lang-toggle{ display:flex; flex:none; padding:3px; gap:2px; border-radius:999px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow) }
.lang-toggle button{ min-width:44px; height:36px; padding:0 10px; border:0; border-radius:999px; background:transparent; color:var(--ink2); font:inherit; font-size:.86rem; font-weight:800; cursor:pointer; line-height:1; transition:background .2s, color .2s }
.lang-toggle button[lang="ar"]{ font-family:"Tajawal", "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif; font-size:.95rem }
.lang-toggle button[aria-pressed="true"]{ background:var(--f1); color:#fff }
.lang-toggle button:focus-visible{ outline:3px solid var(--a1); outline-offset:1px }
@media (max-width:599px){ .lang-toggle button{ min-width:40px; height:32px; padding:0 8px; font-size:.8rem } .brand__text small{ display:none } }
@media (max-width:379px){ .topbar__tools .icon-btn--wa{ display:none } }

/* Arabic font */
html[lang="ar"]{ --font: "Tajawal", "Noto Kufi Arabic", "Noto Sans Arabic", ui-sans-serif, system-ui, "Segoe UI", Tahoma, sans-serif }
html[lang="ar"] body{ letter-spacing:0 }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3{ letter-spacing:0; line-height:1.3 }
html[lang="ar"] .eyebrow{ letter-spacing:0; text-transform:none }
html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] button, html[lang="ar"] select{ font-family:var(--font) }
html[lang="ar"] .card__name{ line-height:1.35 }
/* phone numbers stay left-to-right */
[data-shop="PHONE_DISPLAY"], #fPhone{ direction:ltr; unicode-bidi:isolate }
[dir="rtl"] #fPhone{ text-align:right }

/* mirror directional positions */
[dir="rtl"] .skip{ left:auto; right:-999px } [dir="rtl"] .skip:focus{ right:8px }
[dir="rtl"] .badge{ right:auto; left:-4px }
[dir="rtl"] .search svg{ left:auto; right:16px }
[dir="rtl"] .search input{ padding:0 46px 0 44px }
[dir="rtl"] .search__clear{ right:auto; left:8px }
[dir="rtl"] .tag{ left:auto; right:8px }
[dir="rtl"] .deal-flag{ right:auto; left:8px }
[dir="rtl"] .steps__n{ right:auto; left:14px }
[dir="rtl"] .hours li span:last-child{ text-align:left }
[dir="rtl"] .citem__line{ text-align:left }
[dir="rtl"] .cartbar{ text-align:right; padding:10px 12px 10px 18px }
[dir="rtl"] .deals-banner__deco{ right:auto; left:-10px; transform:rotate(8deg) }
[dir="rtl"] .hero__leaves{ right:auto; left:-40px; transform:scaleX(-1) }
[dir="rtl"] .card__ar{ text-align:right }
@media (max-width:899px){ [dir="rtl"] .deals-banner__deco{ right:auto; left:-14px } }
@media (min-width:600px){
  [dir="rtl"] .steps li{ text-align:right }
  [dir="rtl"] .price-note span{ margin-left:0; margin-right:6px }
}
@media (min-width:900px){
  [dir="rtl"] .brand{ margin-right:0; margin-left:auto }
  [dir="rtl"] .deals-banner__deco{ right:auto; left:30px }
  [dir="rtl"] .drawer{ right:auto; left:0; border-radius:0 26px 26px 0; transform:translateX(-105%) }
  [dir="rtl"] .drawer.open{ transform:none }
  [dir="rtl"] .cartbar{ right:auto; left:24px }
}
html[lang="ar"] .footer h4, html[lang="ar"] .cat b, html[lang="ar"] .tag, html[lang="ar"] .deal-flag{ letter-spacing:0; text-transform:none }
/* small phones: keep the shop name readable next to the language toggle */
@media (max-width:599px){
  .topbar__tools #modeToggle{ display:none } /* light/dark is also in the footer */
  .topbar__inner{ gap:8px }
  .brand{ gap:7px }
  .brand img{ width:34px; height:34px }
  .brand__text strong{ white-space:normal; font-size:.84rem; line-height:1.1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
  html[lang="ar"] .brand__text strong{ font-size:.92rem; line-height:1.2 }
}

/* ==========================================================================
   Brand "Royal souq" — header strip, wordmark, accents
   ========================================================================== */
.topbar::before{ content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,#7a1f2b,#c9a24b 50%,#4e1019) }
html:not([lang="ar"]) .brand__text strong{ font-family:var(--display); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--plum); font-size:1.02rem }
html[data-theme="dark"] .brand__text strong{ color:var(--ink) !important }
html[lang="ar"] .brand__text strong{ color:var(--plum); font-family:var(--display-ar); font-weight:700 }
html[lang="ar"][data-theme="dark"] .brand__text strong{ color:var(--ink) !important }
.footer .brand__text strong{ color:#f8efe2 !important; font-family:var(--font); text-transform:none; letter-spacing:.02em }
.hero h1{ color:var(--plum) }
[data-theme="dark"] .hero h1{ color:var(--ink) }
.hero__ar{ color:var(--a1) }
.eyebrow{ color:var(--a1) }
.rating-hero__score{ background:conic-gradient(var(--saffron) 0 100%) }
.rating-hero__score::before{ background:linear-gradient(135deg,var(--f1),var(--plum)) }
.cartbar{ background:linear-gradient(135deg,var(--f1),var(--f2) 60%,var(--plum)) }
.cat[aria-selected="true"]{ background:linear-gradient(160deg, var(--a-soft), var(--card)) }
.hero__chips li b{ color:var(--a1) }
.how{ background:linear-gradient(180deg, transparent, color-mix(in srgb,var(--saffron) 10%, var(--bg2)), transparent) }
.steps__ico{ background:linear-gradient(135deg, var(--a-soft), color-mix(in srgb,var(--saffron) 18%, var(--card))) }
.hours li{ background:color-mix(in srgb,var(--saffron) 10%, var(--card)) }
.price-note{ border-color:color-mix(in srgb,var(--saffron) 70%, transparent) }
.footer__theme .swatch{ box-shadow:0 0 0 1px rgba(255,255,255,.35) }
@media (max-width:599px){ html:not([lang="ar"]) .brand__text strong{ font-size:.68rem; letter-spacing:0; line-height:1.18; -webkit-line-clamp:3 } }
.stars{ color:#9a7417 } .rating-hero__score .stars, [data-theme="dark"] .stars{ color:#f0d590 }
/* Royal souq extras */
.footer .brand img{ filter:drop-shadow(0 0 1px rgba(226,194,122,.8)) }
[data-theme="dark"] .hero__leaves{ stroke:var(--saffron) }

/* ==========================================================================
   Delivery areas (owner-confirmed: Al Shamkha, Madinat Al Riyadh, Baniyas, Al Shawamekh)
   ========================================================================== */
.deliver{ position:relative; display:flex; gap:16px; align-items:flex-start; margin-top:14px; padding:18px 18px 16px; border-radius:var(--r);
  background:radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,var(--saffron) 16%, transparent) 0, transparent 60%), var(--card);
  border:1px solid color-mix(in srgb,var(--saffron) 55%, transparent); box-shadow:var(--shadow); overflow:hidden }
.deliver::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(180deg,var(--f1),var(--saffron)) }
[dir="rtl"] .deliver::before{ inset:0 0 0 auto }
.deliver__icon{ flex:none; width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:linear-gradient(135deg,var(--f1),var(--f2)); box-shadow:0 10px 20px -12px var(--f1) }
.deliver__icon svg{ width:28px; height:28px; fill:none; stroke:#f3dc9c; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.deliver__body{ min-width:0; flex:1 }
.deliver .eyebrow{ margin-bottom:2px }
.deliver h2{ font-size:clamp(1.15rem,4.6vw,1.45rem); margin:0 0 10px; color:var(--plum) }
[data-theme="dark"] .deliver h2{ color:var(--ink) }
.deliver__areas, .footer__chips{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px }
.deliver__areas li{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px 7px 11px; border-radius:999px; font-weight:700; font-size:.92rem;
  background:var(--a-soft); color:var(--a1); border:1.5px solid color-mix(in srgb,var(--a1) 30%, transparent) }
.deliver__areas li::before, .footer__chips li::before{ content:""; width:8px; height:8px; flex:none; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--saffron); box-shadow:0 0 0 2px color-mix(in srgb,var(--saffron) 25%, transparent) }
[dir="rtl"] .deliver__areas li{ padding:7px 11px 7px 13px }
.deliver__note{ margin:10px 0 0; font-size:.84rem; color:var(--ink2) }
@media (min-width:900px){ .deliver{ align-items:center; padding:20px 26px } .deliver__body{ display:grid; grid-template-columns:auto 1fr; column-gap:24px; align-items:center }
  .deliver .eyebrow, .deliver h2{ grid-column:1 } .deliver__areas{ grid-column:2; grid-row:1 / span 2; justify-content:flex-end } .deliver__note{ grid-column:1 / -1 } }
.footer__areas{ margin-top:16px }
.footer__areas h4{ margin-bottom:8px }
.footer__chips li{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; font-size:.84rem; font-weight:600; color:#f8efe2; border:1px solid rgba(226,194,122,.45); background:rgba(255,255,255,.06) }
/* area dropdown */
.select-wrap{ position:relative }
.select-wrap select{ width:100%; appearance:none; -webkit-appearance:none; padding:12px 42px 12px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font-size:1rem; cursor:pointer; transition:border-color .2s, box-shadow .2s }
[dir="rtl"] .select-wrap select{ padding:12px 14px 12px 42px }
.select-wrap::after{ content:""; position:absolute; top:50%; right:16px; width:9px; height:9px; margin-top:-7px; border:solid var(--a1); border-width:0 2px 2px 0; transform:rotate(45deg); pointer-events:none }
[dir="rtl"] .select-wrap::after{ right:auto; left:16px }
.select-wrap select:focus{ outline:none; border-color:var(--a1); box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 16%, transparent) }
.select-wrap select option{ background:var(--card); color:var(--ink) }
.field.invalid select{ border-color:#e11d48 }
.field__note{ font-size:.76rem; color:var(--ink2) }
@media (max-width:599px){
  .deliver{ gap:12px; padding:16px 14px 14px }
  .deliver__icon{ width:42px; height:42px; border-radius:13px } .deliver__icon svg{ width:24px; height:24px }
  .deliver__areas{ gap:6px } .deliver__areas li{ font-size:.84rem; padding:6px 10px 6px 9px; gap:6px }
  [dir="rtl"] .deliver__areas li{ padding:6px 9px 6px 10px }
}

/* ==========================================================================
   Back-to-top button (Royal souq: maroon + antique gold). Sits at the inline-end
   corner; stacks above the sticky cart bar when it is showing; hidden while the
   cart drawer is open. Mirrors to the left in Arabic (RTL).
   ========================================================================== */
.totop{ --tt-bg1:#7a1f2b; --tt-bg2:#4e1019; --tt-ink:#c9a24b; --tt-ring:#c9a24b;
  position:fixed; z-index:44; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:48px; height:48px; padding:0;
  display:grid; place-items:center; border-radius:50%; border:2px solid var(--tt-ring); cursor:pointer; color:var(--tt-ink);
  background:linear-gradient(135deg,var(--tt-bg1),var(--tt-bg2)); box-shadow:0 10px 24px -10px rgba(44,7,13,.65), 0 0 0 3px color-mix(in srgb,#fbf8f1 55%, transparent);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.9); -webkit-tap-highlight-color:transparent;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s, bottom .3s var(--ease) }
.totop svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round }
.totop.show{ opacity:1; visibility:visible; transform:none; transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s, bottom .3s var(--ease) }
.totop:hover{ --tt-ink:#e2c27a; transform:translateY(-2px) }
.totop:focus-visible{ outline:3px solid var(--a1); outline-offset:3px; border-radius:50% }
[dir="rtl"] .totop{ right:auto; left:16px }
/* stack above the sticky cart bar (12px + 64px bar + 12px gap) */
.cartbar:not([hidden]) ~ .totop{ bottom:calc(88px + env(safe-area-inset-bottom)) }
/* never over the cart / order drawer */
.drawer.open ~ .totop, .drawer[aria-hidden="false"] ~ .totop{ opacity:0; visibility:hidden; pointer-events:none }
/* theme swatches + dark mode */
[data-accent="gold"] .totop{ --tt-bg1:#8a6a1f; --tt-bg2:#5e4712; --tt-ink:#fbf8f1; --tt-ring:#e2c27a }
[data-accent="date"] .totop{ --tt-bg1:#6b3a1e; --tt-bg2:#3f2210; --tt-ink:#e2c27a; --tt-ring:#c9a24b }
[data-theme="dark"] .totop{ box-shadow:0 10px 24px -8px rgba(0,0,0,.8), 0 0 0 3px rgba(226,194,122,.18) }
[data-theme="dark"][data-accent="maroon"] .totop{ --tt-bg1:#962a3b; --tt-bg2:#6e1a26; --tt-ink:#e2c27a; --tt-ring:#c9a24b }
[data-theme="dark"][data-accent="date"] .totop{ --tt-bg1:#8a4b27; --tt-bg2:#5a2f16 }
[data-accent="gold"] .totop:hover{ --tt-ink:#fff }
@media (min-width:900px){
  .totop{ right:24px; bottom:24px }
  [dir="rtl"] .totop{ right:auto; left:24px }
  .cartbar:not([hidden]) ~ .totop{ bottom:100px }
}
@media print{ .totop{ display:none } }