/* =========================================================
   styles.css — نظام تصميم موحّد | Unified design system
   نموذج تصوري من Framework — ليس مشروع عميل

   كل قواعد الاتجاه بالخصائص المنطقية ليعمل الملف نفسه في RTL و LTR.
   All directional rules use logical properties: one sheet serves both.
   ========================================================= */

/* ---------- 1. الرموز التصميمية | Design tokens ---------- */
:root {
  /* الهوية | Brand */
  --ink:         #111827;
  --ink-2:       #1F2937;
  --muted:       #6B7280;
  --muted-2:     #9CA3AF;
  --faint:       #D1D5DB;

  --cta:         #F97316;   /* برتقالي الشراء | buy-action orange */
  --cta-dark:    #EA580C;
  --cta-soft:    #FFF1E6;

  --sale:        #DC2626;
  --sale-soft:   #FEF2F2;
  --ok:          #16A34A;
  --ok-soft:     #F0FDF4;
  --star:        #F59E0B;

  /* الأسطح | Surfaces */
  --bg:          #FFFFFF;
  --bg-soft:     #F7F8FA;
  --bg-soft-2:   #EFF1F5;
  --line:        #E5E7EB;
  --line-soft:   #F1F3F6;

  /* الخطوط | Fonts */
  --font: 'Tajawal', system-ui, -apple-system, sans-serif;

  /* الزوايا | Radii */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* الظلال | Shadows */
  --sh-xs: 0 1px 2px rgba(17,24,39,.05);
  --sh-sm: 0 2px 6px rgba(17,24,39,.07);
  --sh-md: 0 6px 18px rgba(17,24,39,.09);
  --sh-lg: 0 14px 36px rgba(17,24,39,.12);
  --sh-xl: 0 28px 64px rgba(17,24,39,.18);

  /* المسافات | Spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px;

  --wrap: 1320px;
  --nav-h: 72px;

  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: .16s var(--ease);
  --t: .25s var(--ease);
  --t-slow: .4s var(--ease);
}

html[lang="en"] { --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* ---------- 2. إعادة الضبط | Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* سمة hidden يجب أن تغلب أي قاعدة display في الملف — وإلا ظهرت عناصر
   يفترض إخفاؤها (أزرار المعالج، اللوحات) وبقيت قابلة للنقر.
   The hidden attribute must beat any author display rule, or "hidden"
   wizard buttons and panels stay visible and clickable. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* يمنع الشريط الثابت من حجب العنصر المُمرَّر إليه (خطوات الدفع، المراسي) */
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.8;
  color: var(--ink-2); background: var(--bg);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
html[lang="en"] body { line-height: 1.65; }

h1,h2,h3,h4,h5 { margin: 0 0 .5em; color: var(--ink); font-weight: 700; line-height: 1.35; }
h1 { font-size: clamp(1.7rem,1.2rem+2.2vw,2.8rem); line-height: 1.25; }
h2 { font-size: clamp(1.35rem,1.05rem+1.3vw,2rem); }
h3 { font-size: clamp(1.05rem,.95rem+.5vw,1.3rem); }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; }
a { color: var(--ink); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--cta-dark); }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--cta-soft); color: var(--ink); }

/* ---------- 3. أدوات | Utilities ---------- */
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; inset-inline-start:16px; top:-100px; z-index:400; background:var(--ink); color:#fff; padding:10px 18px; border-radius:0 0 var(--r-md) var(--r-md); transition:top var(--t); }
.skip-link:focus { top:0; color:#fff; }

.section { padding-block: clamp(40px, 5vw, 68px); }
.section--soft { background: var(--bg-soft); }

.section-head { margin-bottom: var(--s5); }
.section-head p { color: var(--muted); margin: 4px 0 0; font-size: .95rem; }
.head-row { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s5); }
.head-row .section-head { margin-bottom: 0; }

/* ---------- 4. الأزرار | Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: #fff; --bd: transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--bg); color:var(--fg); border:1.5px solid var(--bd);
  padding:12px 22px; border-radius:var(--r-md);
  font-weight:700; font-size:.92rem; line-height:1.4; min-height:46px;
  /* normal لا nowrap: يلفّ السطر بدل الفيضان على الشاشات الضيقة */
  white-space:normal; text-align:center;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { background:var(--ink-2); color:#fff; box-shadow:var(--sh-md); }
.btn svg { width:18px; height:18px; flex:none; }

.btn--cta { --bg: var(--cta); --fg:#fff; }
.btn--cta:hover { background: var(--cta-dark); }
.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--line); }
.btn--ghost:hover { background: var(--bg-soft); color: var(--ink); border-color: var(--muted-2); }
.btn--soft { --bg: var(--bg-soft-2); --fg: var(--ink); }
.btn--soft:hover { background: var(--faint); color: var(--ink); }
.btn--white { --bg:#fff; --fg:var(--ink); }
.btn--white:hover { background: var(--bg-soft); color: var(--ink); }
.btn--outline-white { --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.5); }
.btn--outline-white:hover { background:rgba(255,255,255,.14); color:#fff; border-color:#fff; }
.btn--lg { padding:15px 30px; font-size:1rem; min-height:54px; }
.btn--sm { padding:8px 15px; font-size:.85rem; min-height:40px; }
.btn--block { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ---------- 5. الشريط التصريحي العلوي | Top disclosure bar ---------- */
.topbar { background: var(--ink); color: rgba(255,255,255,.88); font-size:.8rem; }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; min-height:40px; padding-block:5px; }
.topbar__note { display:inline-flex; align-items:center; gap:8px; font-weight:700; color:#fff; }
.topbar__note svg { width:14px; height:14px; color:var(--cta); flex:none; }
.topbar__right { display:flex; align-items:center; gap:var(--s4); }
.topbar__promo { display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.8); }
.topbar__promo svg { width:14px; height:14px; }
@media (max-width: 900px) { .topbar__promo { display:none; } }

.lang-switch { display:inline-flex; border:1px solid rgba(255,255,255,.28); border-radius:var(--r-pill); overflow:hidden; flex:none; }
.lang-switch button { padding:4px 13px; font-size:.75rem; font-weight:700; color:rgba(255,255,255,.72); min-height:28px; font-family:'Inter',system-ui,sans-serif; transition:background var(--t-fast), color var(--t-fast); }
.lang-switch button:hover { color:#fff; }
.lang-switch button[aria-pressed="true"] { background:var(--cta); color:#fff; }

/* ---------- 6. الهيدر | Header ---------- */
.header { position:sticky; top:0; z-index:120; background:#fff; border-bottom:1px solid var(--line-soft); transition:box-shadow var(--t); }
.header.is-stuck { box-shadow: var(--sh-sm); }
.header__row { display:flex; align-items:center; gap:var(--s4); min-height:var(--nav-h); }

.logo { display:inline-flex; align-items:center; gap:10px; flex:none; padding-block:5px; }
.logo__mark { width:38px; height:38px; border-radius:var(--r-md); background:var(--ink); color:#fff; display:grid; place-items:center; flex:none; }
.logo__mark svg { width:20px; height:20px; }
.logo__text { display:flex; flex-direction:column; line-height:1.15; }
.logo__name { font-weight:700; font-size:1.1rem; color:var(--ink); }
.logo__sub { font-size:.6rem; color:var(--muted-2); font-family:var(--font); }
/* التباعد الحرفي والأحرف الكبيرة أسلوب لاتيني — تباعد الأحرف يكسر اتصال الحروف العربية
   letter-spacing/uppercase is a Latin stylistic device — it breaks Arabic letter joining */
html[lang="en"] .logo__sub { letter-spacing:.14em; text-transform:uppercase; font-family:'Inter',sans-serif; }

/* شريط البحث | Search bar */
.searchbar { position:relative; flex:1; max-width:560px; }
.searchbar input { width:100%; border:1.5px solid var(--line); border-radius:var(--r-pill); padding:11px 46px 11px 18px; font-size:.92rem; min-height:46px; background:var(--bg-soft); transition:border-color var(--t-fast), background var(--t-fast); }
html[dir="rtl"] .searchbar input { padding:11px 46px 11px 18px; }
html[dir="ltr"] .searchbar input { padding:11px 18px 11px 46px; }
.searchbar input:focus { outline:none; border-color:var(--ink); background:#fff; }
.searchbar__btn { position:absolute; inset-inline-start:6px; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--muted); }
.searchbar__btn:hover { color:var(--ink); background:var(--bg-soft-2); }
.searchbar__btn svg { width:19px; height:19px; }
@media (max-width: 900px) { .searchbar { display:none; } }

/* الشاشات الضيقة جداً (320px): الشعار + أربعة أزرار لا يتسعان بالمقاسات الكاملة
   Very narrow screens (320px): logo + four icon buttons overflow at full size */
@media (max-width: 400px) {
  .header__row { gap:var(--s2); }
  .header__actions { gap:0; }
  .icon-btn { width:40px; }
  .logo { gap:8px; }
  .logo__mark { width:34px; height:34px; }
  .logo__mark svg { width:18px; height:18px; }
}
/* السطر الثانوي تحت الاسم يفيض قبل الاسم نفسه | the sub-line overflows before the name does */
@media (max-width: 480px) { .logo__sub { display:none; } }
/* عند ٣٢٠px لا يتّسع الاسم مع أربعة أزرار — يبقى في الشريط العلوي والتذييل والقائمة
   At 320px the name cannot fit beside four buttons — it stays in the top bar, footer and menu */
@media (max-width: 340px) { .header .logo__text { display:none; } }

.header__actions { display:flex; align-items:center; gap:6px; flex:none; margin-inline-start:auto; }
.icon-btn { position:relative; width:44px; height:44px; border-radius:var(--r-md); display:grid; place-items:center; color:var(--ink); transition:background var(--t-fast); }
.icon-btn:hover { background:var(--bg-soft); }
.icon-btn svg { width:21px; height:21px; }
.icon-btn__count {
  position:absolute; top:4px; inset-inline-start:4px; min-width:19px; height:19px; padding:0 5px;
  border-radius:var(--r-pill); background:var(--cta); color:#fff; font-size:.66rem; font-weight:700;
  display:grid; place-items:center; border:2px solid #fff; font-family:'Inter',sans-serif;
  transition:transform var(--t);
}
.icon-btn__count.is-bump { transform:scale(1.3); }
.header__burger { display:none; }

/* شريط الفئات | Category nav */
.catnav { border-top:1px solid var(--line-soft); background:#fff; }
.catnav .wrap { display:flex; align-items:center; gap:2px; overflow-x:auto; scrollbar-width:none; }
.catnav .wrap::-webkit-scrollbar { display:none; }
.catnav a { padding:11px 14px; font-size:.9rem; font-weight:500; color:var(--ink-2); white-space:nowrap; border-bottom:2px solid transparent; transition:color var(--t-fast), border-color var(--t-fast); }
.catnav a:hover { color:var(--cta-dark); }
.catnav a[aria-current="page"] { color:var(--ink); font-weight:700; border-bottom-color:var(--cta); }
@media (max-width: 1000px) {
  .header__burger { display:grid; }
  .catnav { display:none; }
}

/* قائمة الجوال | Mobile menu */
.mobile-menu {
  overflow:hidden;   /* يمنع اللوحة المزاحة من توسيع عرض المستند وهي مغلقة */
  position:fixed; inset:0; z-index:300; background:rgba(17,24,39,.5);
  backdrop-filter:blur(3px); opacity:0; visibility:hidden;
  transition:opacity var(--t), visibility var(--t);
}
.mobile-menu.is-open { opacity:1; visibility:visible; }
.mobile-menu__panel {
  position:absolute; inset-block:0; inset-inline-end:0; width:min(330px,88vw);
  background:#fff; padding:var(--s5); overflow-y:auto;
  display:flex; flex-direction:column; gap:var(--s4);
  transform:translateX(var(--menu-out)); transition:transform var(--t-slow);
}
/* اللوحة مثبّتة على inset-inline-end: الحافة اليسرى في RTL واليمنى في LTR،
   فتنزلق نحو حافتها هي. عكس الإشارة يجعلها تعبر الشاشة بكاملها. */
html[dir="rtl"] .mobile-menu__panel { --menu-out: -100%; }
html[dir="ltr"] .mobile-menu__panel { --menu-out: 100%; }
.mobile-menu.is-open .mobile-menu__panel { transform:translateX(0); }
.mobile-menu__head { display:flex; align-items:center; justify-content:space-between; }
.mobile-menu__links { display:flex; flex-direction:column; gap:2px; }
.mobile-menu__links a { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-md); color:var(--ink-2); font-weight:500; transition:background var(--t-fast); }
.mobile-menu__links a:hover { background:var(--bg-soft); }
.mobile-menu__links a[aria-current="page"] { background:var(--bg-soft-2); font-weight:700; }
.mobile-menu__links svg { width:19px; height:19px; color:var(--muted); flex:none; }

/* شريط سفلي للجوال | Mobile bottom bar */
.mobilebar { display:none; }
@media (max-width: 760px) {
  .mobilebar {
    display:flex; position:fixed; inset-inline:0; bottom:0; z-index:110;
    background:#fff; border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);
  }
  .mobilebar a { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 4px; font-size:.66rem; color:var(--muted); position:relative; min-height:56px; }
  .mobilebar a[aria-current="page"] { color:var(--cta-dark); }
  .mobilebar svg { width:21px; height:21px; }
  .mobilebar__count { position:absolute; top:4px; inset-inline-start:calc(50% + 4px); min-width:17px; height:17px; padding:0 4px; border-radius:var(--r-pill); background:var(--cta); color:#fff; font-size:.62rem; font-weight:700; display:grid; place-items:center; font-family:'Inter',sans-serif; }
  body { padding-bottom: 62px; }
}

/* ---------- 7. البطل والبانرات | Hero & banners ---------- */
.hero { position:relative; background:var(--bg-soft); overflow:hidden; }
.hero__slides { position:relative; }
.hero__slide { display:none; }
.hero__slide.is-active { display:block; }
.hero__inner { display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s6); align-items:center; padding-block:clamp(36px,5vw,72px); }
.hero__copy { max-width:520px; }
.hero__eyebrow { display:inline-flex; align-items:center; gap:7px; background:var(--cta-soft); color:var(--cta-dark); font-size:.78rem; font-weight:700; padding:6px 14px; border-radius:var(--r-pill); margin-bottom:14px; }
.hero__eyebrow svg { width:14px; height:14px; }
.hero h1 { margin-bottom:12px; }
.hero__lead { color:var(--muted); font-size:1.02rem; }
.hero__actions { display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s5); }
.hero__media { border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--sh-lg); }
.hero__media img { width:100%; height:100%; object-fit:cover; }
@media (max-width: 880px) { .hero__inner { grid-template-columns:1fr; } .hero__media { order:-1; aspect-ratio:16/10; } }

/* النقطة تبقى 9px بصرياً، ومساحة اللمس 25×35 بفضل الحشو | dot stays 9px visually,
   padding grows the tap area to 25×35 without changing the spacing */
.hero__dots { display:flex; gap:0; justify-content:center; padding-bottom:calc(var(--s5) - 13px); }
.hero__dots button { position:relative; box-sizing:content-box; width:9px; height:9px; padding:13px 8px; background:none; transition:width var(--t); }
.hero__dots button::after { content:''; position:absolute; inset:13px 8px; border-radius:50%; background:var(--faint); transition:background var(--t); }
.hero__dots button[aria-current="true"] { width:26px; }
.hero__dots button[aria-current="true"]::after { background:var(--cta); border-radius:var(--r-pill); }

/* شارات الثقة | Trust badges */
.trust { border-block:1px solid var(--line-soft); background:#fff; }
.trust__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); padding-block:var(--s5); }
.trust__item { display:flex; align-items:center; gap:12px; }
.trust__icon { width:42px; height:42px; border-radius:50%; background:var(--bg-soft); color:var(--ink); display:grid; place-items:center; flex:none; }
.trust__icon svg { width:21px; height:21px; }
.trust__item b { display:block; font-size:.92rem; color:var(--ink); }
.trust__item span { font-size:.82rem; color:var(--muted); }
@media (max-width: 900px) { .trust__grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 460px) { .trust__grid { grid-template-columns:1fr; } }

/* ---------- 8. بطاقات الفئات | Category cards ---------- */
.grid-cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr)); gap:var(--s4); }
.cat-card { position:relative; display:block; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1; box-shadow:var(--sh-xs); transition:transform var(--t), box-shadow var(--t); }
.cat-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); }
.cat-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.cat-card:hover img { transform:scale(1.06); }
.cat-card::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(17,24,39,.05) 40%,rgba(17,24,39,.72) 100%); }
.cat-card__body { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:var(--s4); color:#fff; }
.cat-card__name { font-weight:700; font-size:1rem; }
.cat-card__count { font-size:.78rem; color:rgba(255,255,255,.82); }

/* ---------- 9. بطاقة المنتج | Product card ---------- */
.grid-products { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr)); gap:var(--s4); }
@media (max-width: 520px) { .grid-products { grid-template-columns:repeat(2,1fr); gap:var(--s3); } }

.pcard {
  position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:border-color var(--t), box-shadow var(--t), transform var(--t);
}
.pcard:hover { border-color:transparent; box-shadow:var(--sh-lg); transform:translateY(-3px); }
.pcard__media { position:relative; aspect-ratio:1; overflow:hidden; background:var(--bg-soft); }
.pcard__media img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.pcard:hover .pcard__media img { transform:scale(1.05); }
.pcard__badges { position:absolute; top:9px; inset-inline-start:9px; display:flex; flex-direction:column; gap:5px; z-index:2; }
.badge { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:var(--r-pill); font-size:.7rem; font-weight:700; line-height:1.5; }
.badge--sale { background:var(--sale); color:#fff; }
.badge--new { background:var(--ink); color:#fff; }
.badge--best { background:var(--star); color:var(--ink); }
.badge--out { background:var(--muted-2); color:#fff; }
.badge--stock { background:var(--ok-soft); color:var(--ok); }

.pcard__fav {
  position:absolute; top:9px; inset-inline-end:9px; z-index:3;
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.94);
  display:grid; place-items:center; color:var(--muted); box-shadow:var(--sh-xs);
  transition:color var(--t-fast), transform var(--t-fast);
}
.pcard__fav:hover { color:var(--sale); transform:scale(1.08); }
.pcard__fav svg { width:18px; height:18px; fill:none; }
.pcard__fav[aria-pressed="true"] { color:var(--sale); }
.pcard__fav[aria-pressed="true"] svg { fill:currentColor; }
.pcard__fav.is-pop { animation:pop .3s var(--ease); }
@keyframes pop { 0%,100%{transform:scale(1)} 45%{transform:scale(1.3)} }

.pcard__quick {
  position:absolute; inset-inline:9px; bottom:9px; z-index:2;
  background:rgba(255,255,255,.96); color:var(--ink); border-radius:var(--r-md);
  padding:9px; font-size:.82rem; font-weight:700; min-height:38px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  opacity:0; transform:translateY(6px); transition:opacity var(--t), transform var(--t);
}
.pcard:hover .pcard__quick { opacity:1; transform:none; }
.pcard__quick svg { width:16px; height:16px; }
@media (hover: none) { .pcard__quick { display:none; } }

.pcard__body { padding:var(--s4); flex:1; display:flex; flex-direction:column; }
.pcard__brand { font-size:.72rem; color:var(--muted-2); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-family:'Inter',sans-serif; }
.pcard__name { font-size:.94rem; font-weight:600; color:var(--ink); margin:3px 0 6px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pcard__name a { color:inherit; }
.stars { display:inline-flex; align-items:center; gap:2px; color:var(--star); }
.stars svg { width:13px; height:13px; fill:currentColor; }
.pcard__rating { display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--muted); margin-bottom:8px; }
.price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:auto; }
.price b { font-size:1.06rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.price del { font-size:.85rem; color:var(--muted-2); }
.price .off { font-size:.74rem; font-weight:700; color:var(--sale); background:var(--sale-soft); padding:2px 7px; border-radius:var(--r-sm); }
.pcard__foot { padding:0 var(--s4) var(--s4); }
.pcard__foot .btn { width:100%; }
/* رابط ممتد يجعل البطاقة كلها هدف نقر واحد. زر السلة فوقه بـ z-index أعلى.
   بلا transform على الرابط، وإلا صار هو الكتلة الحاوية وانكمش الغطاء. */
.pcard__name a::after { content:''; position:absolute; inset:0; z-index:1; }
.pcard__foot .btn, .pcard__fav, .pcard__quick { position:relative; z-index:2; }

/* شريط منتجات أفقي | Horizontal product rail */
.rail { display:flex; gap:var(--s4); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:var(--s3); scroll-behavior:smooth; scrollbar-width:none; }
.rail::-webkit-scrollbar { display:none; }
.rail > * { flex:0 0 min(240px,68%); scroll-snap-align:start; }
.rail-nav { display:flex; gap:7px; }

/* ---------- 10. العرض المحدود | Flash sale ---------- */
.flash { background:linear-gradient(135deg,var(--ink),#1F2937); color:#fff; border-radius:var(--r-xl); padding:clamp(24px,3vw,40px); }
.flash__head { display:flex; align-items:center; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; margin-bottom:var(--s5); }
.flash h2 { color:#fff; margin:0; }
.flash p { color:rgba(255,255,255,.7); margin:4px 0 0; font-size:.92rem; }
.countdown { display:flex; gap:8px; }
.countdown__unit { background:rgba(255,255,255,.12); border-radius:var(--r-md); padding:8px 12px; text-align:center; min-width:58px; }
.countdown__num { font-size:1.4rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; font-family:'Inter',sans-serif; }
.countdown__lbl { font-size:.68rem; color:rgba(255,255,255,.62); }

/* ---------- 11. الفلاتر | Filters ---------- */
.listing { display:grid; grid-template-columns:260px 1fr; gap:var(--s5); align-items:start; padding-block:var(--s5) var(--s7); }
@media (max-width: 1000px) { .listing { grid-template-columns:1fr; } }

.filters { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4); position:sticky; top:calc(var(--nav-h) + 12px); max-height:calc(100vh - var(--nav-h) - 24px); overflow-y:auto; scrollbar-gutter:stable; }
@media (max-width: 1000px) { .filters { position:static; max-height:none; } }
.filters__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s3); }
.filters__head h2 { font-size:1rem; margin:0; display:flex; align-items:center; gap:8px; }
.filters__head svg { width:17px; height:17px; }
.filters__reset { font-size:.82rem; color:var(--cta-dark); font-weight:700; min-height:38px; padding:0 8px; border-radius:var(--r-sm); }
.filters__reset:hover { background:var(--cta-soft); }
.fgroup { padding-block:13px; border-top:1px solid var(--line-soft); }
.fgroup:first-of-type { border-top:0; padding-top:0; }
.fgroup__label { display:block; font-size:.85rem; font-weight:700; color:var(--ink); margin-bottom:9px; }
.fopts { display:flex; flex-direction:column; gap:7px; }
.fopt { display:flex; align-items:center; gap:9px; font-size:.88rem; color:var(--ink-2); cursor:pointer; min-height:40px; }
.fopt input { width:19px; height:19px; accent-color:var(--ink); flex:none; cursor:pointer; }
.fopt span.count { margin-inline-start:auto; font-size:.76rem; color:var(--muted-2); }
/* فتات التنقّل | Breadcrumbs
   بدون تحديد مقاس، تتمدّد أيقونات SVG المحقونة لتملأ عرض الحاوية.
   Without an explicit size, injected SVG icons stretch to the container width. */
.crumbs { display:flex; align-items:center; flex-wrap:wrap; gap:7px; font-size:.85rem; }
.crumbs a { color:var(--muted); }
.crumbs a:hover { color:var(--cta-dark); }
.crumbs [data-icon] { display:inline-flex; }
.crumbs svg { width:14px; height:14px; flex:none; color:var(--faint); }
html[dir="ltr"] .crumbs svg { transform:scaleX(-1); }

.filters__mobile-toggle { display:none; }
@media (max-width: 1000px) {
  .filters__mobile-toggle { display:flex; width:100%; justify-content:center; margin-bottom:var(--s4); }
  .filters__body.is-collapsed { display:none; }
  /* الوسم كله هو هدف اللمس على الشاشات اللمسية | the whole label is the touch target */
  .fopt { min-height:44px; }
  .fopt input { width:20px; height:20px; }
}

.swatches { display:flex; flex-wrap:wrap; gap:8px; }
.swatch { width:32px; height:32px; border-radius:50%; border:2px solid var(--line); position:relative; transition:border-color var(--t-fast), transform var(--t-fast); }
.swatch:hover { transform:scale(1.08); }
.swatch[aria-pressed="true"] { border-color:var(--ink); }
.swatch[aria-pressed="true"]::after { content:''; position:absolute; inset:-5px; border:1.5px solid var(--ink); border-radius:50%; }

.sizes { display:flex; flex-wrap:wrap; gap:7px; }
.size-btn { min-width:44px; min-height:40px; padding:0 10px; border-radius:var(--r-sm); border:1.5px solid var(--line); background:#fff; font-size:.85rem; font-weight:600; color:var(--ink-2); transition:all var(--t-fast); }
.size-btn:hover { border-color:var(--ink); }
.size-btn[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:#fff; }
.size-btn:disabled { opacity:.4; cursor:not-allowed; text-decoration:line-through; }

.range-out { display:flex; align-items:center; justify-content:space-between; font-size:.83rem; color:var(--muted); margin-bottom:8px; }
.range-out b { color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
/* المسار مرسوم عبر ::track، وارتفاع العنصر ٣٦px ليكون هدف لمس مريحاً */
input[type="range"] { width:100%; height:36px; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; margin:0; }
input[type="range"]::-webkit-slider-runnable-track { height:5px; border-radius:var(--r-pill); background:var(--line); }
input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; margin-top:-7px; width:19px; height:19px; border-radius:50%; background:var(--ink); border:3px solid #fff; box-shadow:var(--sh-sm); }
input[type="range"]::-moz-range-track { height:5px; border-radius:var(--r-pill); background:var(--line); }
input[type="range"]::-moz-range-thumb { width:15px; height:15px; border-radius:50%; background:var(--ink); border:3px solid #fff; box-shadow:var(--sh-sm); }

/* شريط الأدوات | Toolbar */
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s4); }
.toolbar__count { font-size:.9rem; color:var(--muted); }
.toolbar__count b { color:var(--ink); font-weight:700; }
.toolbar__right { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.view-toggle { display:flex; gap:3px; background:var(--bg-soft); padding:3px; border-radius:var(--r-md); }
.view-toggle button { width:38px; height:38px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--muted); }
.view-toggle button[aria-pressed="true"] { background:#fff; color:var(--ink); box-shadow:var(--sh-xs); }
.view-toggle svg { width:17px; height:17px; }

.chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:var(--s4); }
.chip-active { display:inline-flex; align-items:center; gap:6px; background:var(--bg-soft-2); color:var(--ink); padding:6px 12px; border-radius:var(--r-pill); font-size:.82rem; font-weight:600; }
.chip-active button { display:grid; place-items:center; opacity:.6; }
.chip-active button:hover { opacity:1; }
.chip-active svg { width:13px; height:13px; }

/* عرض القائمة | List view */
.grid-products.is-list { grid-template-columns:1fr; }
.grid-products.is-list .pcard { flex-direction:row; }
.grid-products.is-list .pcard__media { width:200px; flex:none; aspect-ratio:1; }
.grid-products.is-list .pcard__quick { display:none; }
@media (max-width:640px){ .grid-products.is-list .pcard { flex-direction:column; } .grid-products.is-list .pcard__media { width:auto; } }

.empty { text-align:center; padding:clamp(44px,7vw,76px) var(--s4); background:var(--bg-soft); border:1px dashed var(--line); border-radius:var(--r-lg); }
.empty__icon { width:62px; height:62px; margin:0 auto var(--s4); border-radius:50%; background:#fff; color:var(--muted-2); display:grid; place-items:center; box-shadow:var(--sh-sm); }
.empty__icon svg { width:28px; height:28px; }
.empty p { color:var(--muted); margin:0 0 var(--s5); }

.pager { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:var(--s6); flex-wrap:wrap; }
.pager button { min-width:42px; height:42px; padding:0 12px; border-radius:var(--r-md); border:1px solid var(--line); background:#fff; font-weight:700; color:var(--ink-2); display:grid; place-items:center; transition:all var(--t-fast); }
.pager button:hover:not(:disabled) { border-color:var(--ink); }
.pager button[aria-current="page"] { background:var(--ink); border-color:var(--ink); color:#fff; }
.pager button:disabled { opacity:.4; cursor:not-allowed; }
.pager svg { width:17px; height:17px; }

/* ---------- 12. صفحة المنتج | Product page ---------- */
.pdp { display:grid; grid-template-columns:1.1fr 1fr; gap:var(--s6); align-items:start; padding-block:var(--s5); }
@media (max-width: 940px) { .pdp { grid-template-columns:1fr; } }

.gallery__main { position:relative; aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden; background:var(--bg-soft); cursor:zoom-in; }
.gallery__main img { width:100%; height:100%; object-fit:cover; }
.gallery__thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:9px; margin-top:9px; }
.gallery__thumbs button { aspect-ratio:1; border-radius:var(--r-md); overflow:hidden; border:2px solid transparent; opacity:.7; background:var(--bg-soft); transition:opacity var(--t-fast), border-color var(--t-fast); }
.gallery__thumbs button[aria-current="true"] { border-color:var(--ink); opacity:1; }
.gallery__thumbs img { width:100%; height:100%; object-fit:cover; }

.pdp__brand { font-size:.8rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-family:'Inter',sans-serif; }
.pdp__title { font-size:clamp(1.35rem,1.1rem+1.1vw,1.9rem); margin:6px 0 10px; }
.pdp__meta { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; font-size:.87rem; color:var(--muted); margin-bottom:var(--s4); }
.pdp__price { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-block:var(--s4); border-block:1px solid var(--line-soft); margin-bottom:var(--s4); }
.pdp__price b { font-size:1.75rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.pdp__price del { font-size:1rem; color:var(--muted-2); }
.pdp__opt { margin-bottom:var(--s4); }
.pdp__opt-label { display:flex; align-items:center; justify-content:space-between; font-size:.87rem; font-weight:700; color:var(--ink); margin-bottom:9px; }
.pdp__opt-label span { font-weight:400; color:var(--muted); }
.pdp__buy { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:var(--s4); }
.pdp__buy .btn { flex:1; min-width:150px; }

.stepper { display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.stepper button { width:42px; height:44px; display:grid; place-items:center; color:var(--ink); transition:background var(--t-fast); }
.stepper button:hover:not(:disabled) { background:var(--bg-soft); }
.stepper button:disabled { color:var(--faint); cursor:not-allowed; }
.stepper svg { width:16px; height:16px; }
.stepper input { width:52px; height:44px; text-align:center; border:0; border-inline:1.5px solid var(--line); font-weight:700; font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

.pdp__trust { display:grid; gap:10px; padding-top:var(--s4); border-top:1px solid var(--line-soft); }
.pdp__trust li { display:flex; gap:10px; align-items:center; font-size:.87rem; color:var(--muted); }
.pdp__trust svg { width:17px; height:17px; color:var(--ok); flex:none; }

/* تبويبات | Tabs */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; margin-bottom:var(--s5); }
.tabs::-webkit-scrollbar { display:none; }
.tabs button { padding:12px 18px; font-size:.92rem; font-weight:600; color:var(--muted); white-space:nowrap; border-bottom:2px solid transparent; min-height:46px; transition:color var(--t-fast), border-color var(--t-fast); }
.tabs button:hover { color:var(--ink); }
.tabs button[aria-selected="true"] { color:var(--ink); font-weight:700; border-bottom-color:var(--ink); }
.tabpanel[hidden] { display:none; }

.spec-table { display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--s6); }
.spec-table div { display:flex; justify-content:space-between; gap:var(--s3); padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:.9rem; }
.spec-table dt { color:var(--muted); }
.spec-table dd { margin:0; font-weight:600; color:var(--ink); text-align:end; }
@media (max-width:640px){ .spec-table { grid-template-columns:1fr; } }

.review { padding-block:var(--s4); border-bottom:1px solid var(--line-soft); }
.review:last-child { border-bottom:0; }
.review__head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.review__name { font-weight:700; color:var(--ink); font-size:.92rem; }
.review p { color:var(--muted); font-size:.92rem; margin:0; }

/* ---------- 13. درج السلة | Cart drawer ---------- */
.drawer { overflow:hidden; position:fixed; inset:0; z-index:350; background:rgba(17,24,39,.5); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity var(--t), visibility var(--t); }
.drawer.is-open { opacity:1; visibility:visible; }
.drawer__panel {
  position:absolute; inset-block:0; inset-inline-end:0; width:min(420px,92vw);
  background:#fff; display:flex; flex-direction:column;
  transform:translateX(var(--menu-out)); transition:transform var(--t-slow);
}
.drawer.is-open .drawer__panel { transform:translateX(0); }
.drawer__head { display:flex; align-items:center; justify-content:space-between; padding:var(--s4) var(--s5); border-bottom:1px solid var(--line); }
.drawer__head h2 { margin:0; font-size:1.1rem; }
.drawer__body { flex:1; overflow-y:auto; padding:var(--s4) var(--s5); }
.drawer__foot { padding:var(--s5); border-top:1px solid var(--line); background:var(--bg-soft); }

.line-item { display:flex; gap:12px; padding-block:var(--s3); border-bottom:1px solid var(--line-soft); }
.line-item:last-child { border-bottom:0; }
.line-item__img { width:72px; height:72px; border-radius:var(--r-md); overflow:hidden; background:var(--bg-soft); flex:none; }
.line-item__img img { width:100%; height:100%; object-fit:cover; }
.line-item__body { flex:1; min-width:0; }
.line-item__name { font-size:.9rem; font-weight:600; color:var(--ink); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-item__opts { font-size:.78rem; color:var(--muted-2); margin-top:2px; }
.line-item__row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; flex-wrap:wrap; }
.line-item__price { font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.line-item__remove { color:var(--muted-2); width:34px; height:34px; border-radius:var(--r-sm); display:grid; place-items:center; }
.line-item__remove:hover { color:var(--sale); background:var(--sale-soft); }
.line-item__remove svg { width:16px; height:16px; }

.summary-row { display:flex; justify-content:space-between; gap:var(--s3); padding-block:8px; font-size:.92rem; color:var(--muted); }
.summary-row b { color:var(--ink); font-variant-numeric:tabular-nums; }
.summary-row--total { padding-top:var(--s3); margin-top:var(--s2); border-top:2px solid var(--line); font-size:1.05rem; }
.summary-row--total span, .summary-row--total b { color:var(--ink); font-weight:700; }
.summary-row--save b { color:var(--ok); }

/* ---------- 14. معاينة سريعة | Quick view modal ---------- */
.modal { position:fixed; inset:0; z-index:360; background:rgba(17,24,39,.6); backdrop-filter:blur(4px); display:grid; place-items:center; padding:var(--s4); opacity:0; visibility:hidden; transition:opacity var(--t), visibility var(--t); }
.modal.is-open { opacity:1; visibility:visible; }
.modal__box { background:#fff; border-radius:var(--r-xl); width:min(880px,100%); max-height:90vh; overflow-y:auto; position:relative; box-shadow:var(--sh-xl); }
.modal__close { position:absolute; top:12px; inset-inline-end:12px; z-index:2; width:38px; height:38px; border-radius:50%; background:var(--bg-soft); display:grid; place-items:center; color:var(--ink); }
.modal__close:hover { background:var(--bg-soft-2); }
.modal__close svg { width:19px; height:19px; }
.modal__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); padding:var(--s5); }
@media (max-width:700px){ .modal__grid { grid-template-columns:1fr; } }
.modal__media { border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1; background:var(--bg-soft); }
.modal__media img { width:100%; height:100%; object-fit:cover; }

/* ---------- 15. تنبيه عائم | Toast ---------- */
.toasts { position:fixed; z-index:400; inset-inline-end:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
@media (max-width:760px){ .toasts { bottom:70px; inset-inline:16px; } }
.toast {
  display:flex; align-items:center; gap:10px; background:var(--ink); color:#fff;
  padding:12px 16px; border-radius:var(--r-md); box-shadow:var(--sh-lg);
  font-size:.9rem; font-weight:600; max-width:340px;
  animation:toastIn .28s var(--ease);
}
.toast svg { width:18px; height:18px; color:var(--ok); flex:none; }
.toast--warn svg { color:var(--star); }
@keyframes toastIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ---------- 16. الدفع | Checkout ---------- */
.checkout { display:grid; grid-template-columns:1fr 360px; gap:var(--s6); align-items:start; padding-block:var(--s5) var(--s7); }
@media (max-width: 1000px) { .checkout { grid-template-columns:1fr; } }
.checkout__side { position:sticky; top:calc(var(--nav-h) + 12px); }
@media (max-width: 1000px) { .checkout__side { position:static; } }

.steps { display:flex; justify-content:space-between; gap:var(--s2); margin-bottom:var(--s5); position:relative; }
.steps::before { content:''; position:absolute; inset-inline:20px; top:19px; height:2px; background:var(--line); z-index:0; }
.step { position:relative; z-index:1; text-align:center; flex:1; }
.step__dot { width:40px; height:40px; border-radius:50%; margin:0 auto 7px; display:grid; place-items:center; background:#fff; border:2px solid var(--line); color:var(--muted-2); font-weight:700; font-size:.88rem; font-variant-numeric:tabular-nums; transition:all var(--t); }
.step__label { font-size:.78rem; color:var(--muted-2); }
.step[aria-current="step"] .step__dot { background:var(--ink); border-color:var(--ink); color:#fff; }
.step[aria-current="step"] .step__label { color:var(--ink); font-weight:700; }
.step.is-done .step__dot { background:var(--ok); border-color:var(--ok); color:#fff; }
.step__dot svg { width:18px; height:18px; }
@media (max-width:560px){ .step__label { display:none; } }

.card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); }
.wizard-panel[hidden] { display:none; }
.wizard-nav { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s3); margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line-soft); }

.opt-card { display:flex; align-items:center; gap:12px; padding:14px; border:1.5px solid var(--line); border-radius:var(--r-md); background:#fff; text-align:start; width:100%; min-height:64px; margin-bottom:10px; transition:border-color var(--t-fast), background var(--t-fast); }
.opt-card:hover { border-color:var(--ink); }
.opt-card[aria-pressed="true"] { border-color:var(--ink); background:var(--bg-soft); }
.opt-card__icon { width:40px; height:40px; border-radius:var(--r-md); background:var(--bg-soft-2); color:var(--ink); display:grid; place-items:center; flex:none; }
.opt-card[aria-pressed="true"] .opt-card__icon { background:var(--ink); color:#fff; }
.opt-card__icon svg { width:20px; height:20px; }
.opt-card b { display:block; font-size:.92rem; color:var(--ink); }
.opt-card span { font-size:.8rem; color:var(--muted); }
.opt-card__price { margin-inline-start:auto; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }

/* ---------- 17. النماذج | Forms ---------- */
.field { width:100%; border:1.5px solid var(--line); border-radius:var(--r-md); padding:12px 14px; font-size:.92rem; background:#fff; color:var(--ink); min-height:46px; transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.field:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--bg-soft-2); }
select.field { appearance:none; cursor:pointer; padding-inline-end:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; }
html[dir="rtl"] select.field { background-position:left 13px center; padding-inline-end:14px; padding-inline-start:38px; }
textarea.field { min-height:110px; resize:vertical; }

.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.form-row { display:flex; flex-direction:column; gap:6px; }
.form-row--full { grid-column:1/-1; }
.form-row label { font-size:.85rem; font-weight:600; color:var(--ink); }
.form-row .req { color:var(--sale); }
.form-error { font-size:.8rem; color:var(--sale); min-height:1.1em; display:flex; align-items:center; gap:5px; }
.form-error svg { width:13px; height:13px; flex:none; }
.field.is-invalid { border-color:var(--sale); background:var(--sale-soft); }
@media (max-width:640px){ .form-grid { grid-template-columns:1fr; } }

.form-success { display:flex; align-items:flex-start; gap:12px; background:var(--ok-soft); border:1px solid #BBF7D0; border-radius:var(--r-md); padding:var(--s4); margin-top:var(--s4); }
.form-success[hidden] { display:none; }
.form-success svg { width:22px; height:22px; color:var(--ok); flex:none; }
.form-success b { display:block; color:var(--ink); }
.form-success p { font-size:.88rem; color:var(--muted); margin:2px 0 0; }

.coupon-row { display:flex; gap:8px; }
.coupon-row .field { flex:1; min-width:0; }
.coupon-msg { font-size:.83rem; margin-top:8px; min-height:1.2em; }
.coupon-msg.is-ok { color:var(--ok); }
.coupon-msg.is-err { color:var(--sale); }

/* ---------- 18. الأكورديون والحساب | Accordion & account ---------- */
.accordion { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff; }
.acc-item + .acc-item { border-top:1px solid var(--line-soft); }
.acc-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:16px var(--s5); text-align:start; font-weight:600; font-size:.95rem; color:var(--ink); min-height:58px; transition:background var(--t-fast); }
.acc-trigger:hover { background:var(--bg-soft); }
.acc-trigger[aria-expanded="true"] { background:var(--bg-soft); }
.acc-icon { width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; border:1px solid var(--line); color:var(--ink); transition:transform var(--t), background var(--t), color var(--t); }
.acc-icon svg { width:15px; height:15px; }
.acc-trigger[aria-expanded="true"] .acc-icon { transform:rotate(180deg); background:var(--ink); color:#fff; border-color:var(--ink); }
.acc-panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t); }
.acc-panel > div { overflow:hidden; }
.acc-item.is-open .acc-panel { grid-template-rows:1fr; }
.acc-panel p { padding:0 var(--s5) 18px; color:var(--muted); font-size:.92rem; margin:0; }

.acct { display:grid; grid-template-columns:230px 1fr; gap:var(--s5); align-items:start; }
@media (max-width:860px){ .acct { grid-template-columns:1fr; } }
.acct__nav { display:flex; flex-direction:column; gap:3px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:8px; }
@media (max-width:860px){ .acct__nav { flex-direction:row; overflow-x:auto; scrollbar-width:none; } }
.acct__nav button { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r-md); font-size:.9rem; font-weight:600; color:var(--ink-2); text-align:start; white-space:nowrap; min-height:44px; transition:background var(--t-fast); }
.acct__nav button:hover { background:var(--bg-soft); }
.acct__nav button[aria-selected="true"] { background:var(--ink); color:#fff; }
.acct__nav svg { width:18px; height:18px; flex:none; }

.order-card { border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4); margin-bottom:var(--s3); }
.order-card__head { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-bottom:10px; }
.order-card__id { font-weight:700; color:var(--ink); font-family:'Inter',monospace; }
.status { padding:4px 11px; border-radius:var(--r-pill); font-size:.76rem; font-weight:700; }
.status--processing { background:var(--cta-soft); color:var(--cta-dark); }
.status--shipped { background:#EFF6FF; color:#1D4ED8; }
.status--delivered { background:var(--ok-soft); color:var(--ok); }

/* ---------- 19. الخريطة والتذييل | Map & footer ---------- */
.map-box { height:340px; border-radius:var(--r-lg); overflow:hidden; z-index:0; background:var(--bg-soft-2); }
.leaflet-container { font-family:var(--font) !important; }
html[dir="rtl"] .leaflet-popup-content { direction:rtl; text-align:right; }
.leaflet-control-zoom a { width:40px !important; height:40px !important; line-height:40px !important; font-size:20px !important; }
.leaflet-popup-close-button { width:38px !important; height:38px !important; font-size:22px !important; padding:0 !important; }

.footer { background:var(--ink); color:rgba(255,255,255,.7); padding-top:var(--s7); margin-top:var(--s6); }
.footer a { color:rgba(255,255,255,.7); }
.footer a:hover { color:var(--cta); }
.footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.4fr; gap:var(--s5); padding-bottom:var(--s6); }
.footer__about p { font-size:.9rem; margin-top:var(--s3); max-width:300px; }
.footer .logo__name { color:#fff; } .footer .logo__sub { color:rgba(255,255,255,.45); }
.footer .logo__mark { background:rgba(255,255,255,.1); }
.footer h4 { color:#fff; font-size:.92rem; margin-bottom:var(--s3); }
.footer__list { display:flex; flex-direction:column; gap:9px; font-size:.88rem; }
.footer__list a { display:inline-flex; align-items:center; gap:7px; }
.footer__list svg { width:14px; height:14px; opacity:.6; flex:none; }
@media (max-width:1080px){ .footer__grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .footer__grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .footer__grid { grid-template-columns:1fr; } }

.newsletter { display:flex; gap:8px; margin-top:var(--s3); }
.newsletter input { flex:1; min-width:0; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; border-radius:var(--r-md); padding:11px 14px; font-size:.88rem; min-height:46px; }
.newsletter input::placeholder { color:rgba(255,255,255,.4); }
.newsletter input:focus { outline:none; border-color:var(--cta); }
.newsletter__msg { font-size:.83rem; color:var(--cta); margin-top:8px; min-height:1.2em; }

.pay-methods { display:flex; gap:8px; flex-wrap:wrap; margin-top:var(--s3); }
.pay-methods span { padding:6px 12px; border:1px solid rgba(255,255,255,.16); border-radius:var(--r-sm); font-size:.74rem; color:rgba(255,255,255,.7); font-family:'Inter',sans-serif; }

.socials { display:flex; gap:9px; margin-top:var(--s3); }
.socials a { width:40px; height:40px; border-radius:var(--r-md); display:grid; place-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); transition:background var(--t-fast), color var(--t-fast); }
.socials a:hover { background:var(--cta); border-color:var(--cta); color:#fff; }
.socials svg { width:17px; height:17px; }

/* لافتة داخل المحتوى — منفصلة عن .disclaimer المحجوز للتذييل */
.notice { display:flex; align-items:flex-start; gap:11px; border:1px solid var(--line); border-inline-start:3px solid var(--cta); border-radius:var(--r-md); padding:13px 16px; margin-bottom:24px; font-size:.87rem; color:var(--muted); background:var(--cta-soft); }
.notice svg { width:17px; height:17px; color:var(--cta-dark); flex:none; margin-top:3px; }

.disclaimer { display:flex; align-items:flex-start; gap:11px; border:1px solid rgba(255,255,255,.14); border-inline-start:3px solid var(--cta); border-radius:var(--r-md); padding:13px 16px; margin-bottom:var(--s5); font-size:.85rem; color:rgba(255,255,255,.72); }
.disclaimer svg { width:17px; height:17px; color:var(--cta); flex:none; margin-top:3px; }

.bottombar { border-top:1px solid rgba(255,255,255,.1); background:#0B1220; padding-block:var(--s4); }
.bottombar .wrap { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; font-size:.82rem; }
.bottombar__note { display:inline-flex; align-items:center; gap:8px; font-weight:700; color:#fff; background:var(--cta); padding:6px 16px; border-radius:var(--r-pill); }
.bottombar__note svg { width:14px; height:14px; flex:none; }
.bottombar__copy { color:rgba(255,255,255,.5); }
@media (max-width:760px){ .footer { margin-bottom:62px; } }

/* ---------- 20. الظهور التدريجي | Reveal ---------- */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }
.reveal[data-delay="1"]{transition-delay:.06s} .reveal[data-delay="2"]{transition-delay:.12s} .reveal[data-delay="3"]{transition-delay:.18s}

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

body.is-switching { opacity:.55; transition:opacity .12s linear; }