/* تصميم «أورورا زجاجي» (Aurora UI + Glassmorphism) — فاتح افتراضياً، ومعه وضع داكن يختاره العميل من زر الشمس/القمر.
   فاتح: سماء لؤلؤية بأضواء ناعمة (وردي، لافندر، نعناعي) تتحرك ببطء ولوحات زجاج أبيض.
   داكن: سماء ليلية (برغندي، بنفسجي، فيروزي خافت) ولوحات زجاج داكن. خط Readex Pro. */
:root{
  color-scheme:light;
  --bg:#f5f3fa; --surface:rgba(255,255,255,.62); --fill:rgba(255,255,255,.7); --fill2:rgba(255,255,255,.55); --line:rgba(76,60,140,.12); --line2:rgba(76,60,140,.2); --sep:rgba(76,60,140,.12);
  --ink:#1c1830; --ink2:#3d3856; --muted:#5d5873;
  --brand:#7c3aed; --brand-2:#6d28d9; --brand-soft:rgba(124,58,237,.1); --link:#6d28d9;
  --f:"Readex Pro","Noto Sans Arabic",Tahoma,sans-serif; --fh:var(--f);
  --glass:saturate(170%) blur(20px);
  --r-lg:22px; --r-xl:28px;
  --top-bg:rgba(250,249,255,.6); --bnav-bg:rgba(250,249,255,.75); --pop:rgba(255,255,255,.92);
  --g-bg:rgba(255,255,255,.58); --g-bg2:rgba(255,255,255,.78); --g-bd:rgba(255,255,255,.85); --g-hi:rgba(255,255,255,.95); --g-sh:0 20px 50px -24px rgba(60,40,120,.28);
  --panel:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.42));
  --chip:rgba(255,255,255,.6); --chip-h:rgba(255,255,255,.9);
  --sel-bg:#1c1830; --sel-ink:#fff;
  --side-bg:rgba(247,245,252,.9);
  --search-bg:rgba(255,255,255,.75);
  --grad-text:linear-gradient(100deg,#be185d,#7c3aed 55%,#0d9488);
  --ring:linear-gradient(135deg,#f472b6,#a78bfa,#2dd4bf); --ring-gap:#f5f3fa;
  --icon:#7c3aed;
  --sky:radial-gradient(40% 40% at 84% 4%,rgba(244,114,182,.5),transparent 62%),radial-gradient(44% 44% at 4% 38%,rgba(167,139,250,.55),transparent 62%),radial-gradient(40% 40% at 72% 96%,rgba(45,212,191,.38),transparent 62%),radial-gradient(120% 80% at 50% -10%,#fdfbff 0%,#f5f3fa 60%);
}
html[data-mode="dark"]{
  color-scheme:dark;
  --brand:#7c3aed; --brand-2:#6d28d9;
  --bg:#07060f; --surface:rgba(255,255,255,.06); --fill:rgba(255,255,255,.08); --fill2:rgba(255,255,255,.05); --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.18); --sep:rgba(255,255,255,.1);
  --ink:#f4f2ff; --ink2:#d8d4ee; --muted:#b4aecd;
  --brand-soft:rgba(167,139,250,.16); --link:#c4b5fd;
  --top-bg:rgba(7,6,15,.55); --bnav-bg:rgba(12,10,24,.72); --pop:#15122a;
  --g-bg:rgba(255,255,255,.06); --g-bg2:rgba(255,255,255,.1); --g-bd:rgba(255,255,255,.1); --g-hi:rgba(255,255,255,.18); --g-sh:0 40px 100px -40px rgba(0,0,0,.8);
  --panel:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  --chip:rgba(255,255,255,.07); --chip-h:rgba(255,255,255,.14);
  --sel-bg:rgba(255,255,255,.92); --sel-ink:#0b0a1a;
  --side-bg:rgba(12,10,24,.92);
  --search-bg:rgba(0,0,0,.35);
  --grad-text:linear-gradient(100deg,#fbcfe8,#c4b5fd 50%,#5eead4);
  --ring-gap:#120f24;
  --icon:#c4b5fd;
  --sky:radial-gradient(38% 38% at 82% 8%,rgba(140,28,61,.5),transparent 62%),radial-gradient(42% 42% at 8% 42%,rgba(91,33,182,.42),transparent 62%),radial-gradient(38% 38% at 72% 96%,rgba(17,94,89,.32),transparent 62%),radial-gradient(120% 80% at 50% -10%,#1a1236 0%,#07060f 60%);
}
html{background:var(--bg);transition:background-color .3s}
html body{background:transparent!important;color:var(--ink)} /* the aurora glow sits behind the body, so the body itself must stay see-through */
.au-sky{display:none}
body::before{content:"";position:fixed;inset:-15%;z-index:-1;pointer-events:none;background:var(--sky);animation:au 24s ease-in-out infinite alternate}
@keyframes au{to{transform:translate3d(4vmax,3vmax,0) scale(1.08)}}
.kicker,.sec-head a.more,.link,.crumbs a,.empty a,.sub a.all,.suggest .all,.legal a,.pdp-cat{color:var(--link)}

/* buttons */
.btn{border-radius:14px}
.btn-primary{background:linear-gradient(135deg,#9d2a52,#7c3aed);color:#fff;box-shadow:0 10px 30px -12px rgba(124,58,237,.6),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-tint,.btn-outline{background:var(--chip);color:var(--ink);box-shadow:inset 0 0 0 1px var(--g-bd),0 6px 16px -10px rgba(60,40,120,.25);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn-tint:hover,.btn-outline:hover{background:var(--chip-h)}
.btn-dark{background:var(--sel-bg);color:var(--sel-ink)}

/* header & menus */
.ann{background:var(--g-bg);color:var(--muted);box-shadow:inset 0 -1px 0 var(--line)}
.top{background:var(--top-bg);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);box-shadow:inset 0 -1px 0 var(--line)}
.search input{background:var(--search-bg);box-shadow:inset 0 0 0 1px var(--line)}
.search input:focus{background:var(--search-bg);box-shadow:inset 0 0 0 1.5px var(--brand)}
.suggest{background:var(--pop);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);box-shadow:var(--g-sh),0 0 0 1px var(--line)}
.icon-btn{color:var(--ink)}.icon-btn:hover{background:var(--chip)}
.cattabs a{color:var(--ink2)}
.cattabs a:hover{background:var(--chip)}
.cattabs a.on{background:var(--sel-bg);color:var(--sel-ink)}
.cattabs a.hot{color:var(--link)}
.side,.cart{background:var(--side-bg);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass)}
.group .gi{background:linear-gradient(135deg,#9d2a52,#7c3aed)}

/* light/dark switch */
.mode-btn svg{transition:transform .5s var(--ease)}
.mode-btn:hover svg{transform:rotate(-25deg)}
.mode-btn .moon{display:none}
html[data-mode="dark"] .mode-btn .sun{display:none}
html[data-mode="dark"] .mode-btn .moon{display:block}

/* hero: wide photo banner (no text), crossfading slides */
.ann{display:none}
.au-hero{padding-top:22px;position:relative}
.au-banner{position:relative;aspect-ratio:21/8.4;border-radius:32px;overflow:hidden;background:var(--fill);box-shadow:inset 0 0 0 1px var(--g-bd),var(--g-sh);isolation:isolate}
.au-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease);z-index:0}
.au-slide.on{opacity:1;z-index:1}
.au-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 6s ease-out}
.au-slide.on img{transform:scale(1)}
.au-banner::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);background:linear-gradient(0deg,rgba(0,0,0,.28),transparent 30%)}
.au-dots{position:absolute;z-index:3;inset:auto 0 50px;display:flex;justify-content:center;gap:8px}
.au-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.55);transition:width .35s var(--ease),background .35s}
.au-dots button[aria-selected=true]{width:26px;background:#fff}
/* perks: icons only, the meaning shows on hover / tap */
.au-perks{list-style:none;margin:-34px auto 0;padding:10px 14px;position:relative;z-index:4;display:flex;justify-content:center;gap:clamp(10px,3vw,28px);width:max-content;max-width:100%;border-radius:999px;background:var(--panel);box-shadow:inset 0 1px 0 var(--g-hi),inset 0 0 0 1px var(--g-bd),var(--g-sh);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass)}
.au-ic{position:relative;width:50px;height:50px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--chip);color:var(--icon);box-shadow:inset 0 0 0 1px var(--g-bd);cursor:default;transition:transform .25s var(--ease),background .25s}
.au-ic:hover,.au-ic:focus-visible{transform:translateY(-3px);background:var(--chip-h)}
.au-ic svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.au-ic::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,4px);white-space:nowrap;font-size:13px;font-weight:500;color:var(--sel-ink);background:var(--sel-bg);padding:5px 10px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.au-ic:hover::after,.au-ic:focus::after{opacity:1;transform:translate(-50%,0)}
/* bottom info card: keep address & hours, drop the delivery-fee line */
.visit-tx dl>div:nth-child(3){display:none}

/* glass blocks */
.au-cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.au-cat,.au-cat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 12px;border-radius:24px;text-align:center;transition:transform .3s var(--ease),background .3s}
.au-cat:hover{transform:translateY(-4px);background:var(--g-bg2)}
.au-ring{width:96px;height:96px;border-radius:50%;padding:3px;background:var(--ring)}
.au-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--ring-gap)}
.au-cat b{font-size:16px;margin-top:6px}
.au-cat small{color:var(--muted)}
.card{border-radius:22px}
.card:hover{background:var(--g-bg2);transform:translateY(-3px)}
.card-img{border-radius:16px;background:var(--fill)}
.add{background:var(--chip);color:var(--ink);box-shadow:inset 0 0 0 1px var(--g-bd)}
.add:hover{background:linear-gradient(135deg,#9d2a52,#7c3aed);color:#fff;box-shadow:none}
.stepper,.pdp-ctl .add{background:linear-gradient(135deg,#9d2a52,#7c3aed);color:#fff}
.badge{background:var(--pop);color:var(--ink)}
.badge.sale{background:linear-gradient(135deg,#9d2a52,#7c3aed);color:#fff}
.fav{background:var(--pop);color:var(--ink)}
.fav.on{color:#db2777}
.chips a{background:var(--g-bg);box-shadow:inset 0 0 0 1px var(--g-bd)}
.chips a.on{background:var(--sel-bg);color:var(--sel-ink)}
.visit-tx dt,.trust i{background:var(--brand-soft);color:var(--link)}
input:where(:not([type=radio]):not([type=checkbox])),select,textarea{background:var(--search-bg);box-shadow:inset 0 0 0 1px var(--line)}
.foot{background:var(--g-bg);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);box-shadow:inset 0 1px 0 var(--line)}
.sec{padding-top:64px}

@media (max-width:1000px){
  .au-banner{aspect-ratio:16/8}
  .au-cats{grid-template-columns:repeat(5,minmax(150px,1fr));overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px}
}
@media (max-width:720px){
  .au-hero{padding-top:12px}
  .au-banner{aspect-ratio:4/3.2;border-radius:22px}
  .au-perks{margin-top:-28px;gap:8px;padding:8px 10px}
  .au-dots{bottom:42px}
  .au-ic{width:44px;height:44px}.au-ic svg{width:22px;height:22px}
  .au-cats{grid-template-columns:repeat(5,40%)}
  .au-ring{width:78px;height:78px}
  .sec{padding-top:44px}
  /* lighter on phones: no blur on the many small cards */
  .card,.au-cat{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--g-bg2)}
  .bnav{background:var(--bnav-bg);box-shadow:inset 0 .5px 0 var(--line2)}
  .bnav .on{color:var(--link)}
}