/* ════════════════════════════════════════════════════════════════
   Goustenu · قالب «صلصال دافئ» (salsal) — المظهر وحده
   ----------------------------------------------------------------
   العقد كاملاً: `apps/menu/templates/CONTRACT.md` (يقفله cores.test.mjs).
   نفس `index.html` ونفس `app.mjs` ونفس المُعرّفات — الفرق CSS خالص.

   المادّة: **كل عنصر قطعة صلصال منفوخة باليد.** ثلاث طبقات لكل قطعة:
     1) ظلّ خارجيّ **مُشبَع بلون القطعة نفسها** — لا رمادي. ظلّ رمادي
        تحت قطعة مرجانية يقرؤه العين «بلاستيك رخيص» فوراً. هذا أهمّ قرار
        في القالب وأكثر ما يُخطئ فيه من يقلّد الصلصال.
     2) بريق داخليّ من الأعلى (الضوء يلمس القمّة المنفوخة).
     3) انطباع داخليّ من الأسفل (القطعة تنحدر بعيداً عن الضوء).

   ⚠️ أربعة قرارات موثَّقة:

   1) **عالَم واحد فاتح — ولا وضع داكن.** سِحر الصلصال في الباستيل
      المضيء؛ و«صلصال داكن» يصير بطاقات مدوّرة بظلال لا تُرى، أي فقدان
      المادّة كلّها مع الاحتفاظ بتكلفتها. فالقالب **يُخفي زرّ الوضع**
      (`.theme-toggle { display: none }`) — واختبار العقد يفرض إحدى
      الحالتين: كتلة داكنة، أو إخفاء الزرّ. زرٌّ ظاهر لا يفعل شيئاً أسوأ
      من غياب الميزة، والإعدام البصريّ يُخرجه من ترتيب الجدولة كذلك.

   2) **لون المطعم هو الصلصال.** `--clay: var(--primary, …)` — والمرجاني
      بديلٌ لا فرض. ومنه تُشتقّ الظلال بـ`color-mix` فتبقى مُشبَعة بلونه
      هو. لكن `--primary` قد يكون أيّ شيء (اختبار القبول يضبط `#00FF00`)،
      فكل نصّ على الصلصال يمرّ بسلّم الإضاءة الثلاثي (أسفل) — ولا يُكتب
      نصٌّ بلون المطعم الخام أبداً.

   3) **الأنصاف كبيرة ومتفاوتة** (38/30/22/16px): الصلصال المشغول باليد
      لا يعطي نفس نصف القُطر لكل قطعة. التفاوت مقصود لا سهو.

   4) **`--ease` مرتدّ** (`cubic-bezier(.34,1.56,.64,1)`): القطعة الطريّة
      تتجاوز هدفها قليلاً ثمّ تستقرّ. يُلغى كلّياً عند
      `prefers-reduced-motion` — الارتداد أوّل ما يزعج في هذه الأوضاع.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ─── جسرُ قشرة «خانات» ───
     المضمارُ المشترك يستهلك مفرداتِ «نقش» (`--surface` · `--nm-out` …)،
     ومفرداتُ هذا القالب صلصاليّة (`--tile` · `--puff` …). فتُجسَر الرموزُ
     **ولا تُستبدَل**: الهيكلُ يصير واحداً والمظهرُ يبقى صلصالاً — وهو
     شرطُ الطلب. ولو استبدلنا المفردات ضاعت شخصيّةُ القالب.
     ⚠️ ولا ضغطةَ صغيرة في مفرداتنا، فـ`--nm-in-s` تأخذ `--press` نفسَها. */
  --surface: var(--tile);
  --surface-2: var(--tile-2);
  --lo: var(--sh-lo);
  --accent: var(--clay);
  --accent-2: var(--clay-2);
  --accent-ink: var(--clay-ink);
  --accent-wash: color-mix(in srgb, var(--clay) 14%, transparent);
  --on-accent: var(--on-clay);
  --gold: var(--butter);
  --maxw-col: 640px;
  --nm-out: var(--puff);
  --nm-out-s: var(--puff-sm);
  --nm-in: var(--press);
  --nm-in-s: var(--press);
  /* 🔴 **ظلٌّ بلا إزاحةٍ أفقيّة — للألواح العريضة وحدها** (شكوى 2026-09-10:
     «في الجانبين ظلّان طويلان لا أريدهما، أريد ظلال الأزرار فقط»).
     لوحٌ بعرض العمود يُسقِط ظلَّه يميناً ويساراً؛ وخاناتُ الفئات مرصوصةٌ
     من أعلى الشاشة إلى أسفلها ⇒ خطّان متّصلان ينزلان مع الصفحة. والزرُّ
     قرصٌ صغيرٌ لا يفعل ذلك، فيحتفظ بـ`--nm-out`/`--nm-out-s` كاملةً.
     ⚠️ والانتشارُ السالبُ يساوي نصفَ التمويه ⇒ صفرُ نزيفٍ جانبيّ — لا
        بتصغير الظلّ بل بإلغاء امتداده الأفقيّ وحده. */
  --nm-flat:   var(--puff);
  --nm-flat-s: var(--puff-sm);
  /* ─── مقاسُ النصّ ───
     كان يُستهلَك بلا تعريف: `font-size: var(--t-md)` ورمزٌ مجهول ⇒ الإعلانُ
     **باطلٌ عند الحساب** فيَرِث العنصرُ قياسَ أبيه بدل المقصود — بلا خطأٍ في
     أيّ سجلّ. ونفسُ السلّم المستعمل في `saff`/`shabaka`/`sikka` كي تتّفق
     القوالبُ على نسبةٍ واحدة. */
  --t-xs: .75rem;  --t-sm: .86rem;  --t-md: .96rem;
  --t-lg: 1.12rem; --t-xl: 1.3rem;
  color-scheme: light;   /* عالَم واحد — بلا تفاوض */

  /* ─── الأرض والقِطَع ─── */
  --ground: #FBEFE2;
  --tile: #FFFBF6;
  --tile-2: #FDF3E9;

  /* ─── الحبر ─── */
  --ink: #4A3B33;
  --ink-2: #7C685D;
  --ink-3: #A99384;

  /* ─── الصلصال: لون المطعم أوّلاً، والمرجاني بديل ─── */
  --clay: var(--primary, #F2856D);

  /* نصّ/أيقونة بلون الصلصال — سلّم من ثلاث إعلانات لنفس الرمز.
     المحرّك يُهمل ما لا يفهم فيسقط إلى الطبقة الأقدم بلا كسر.
     `color-mix` وحده لا يُنقذ `#00FF00` (≈2.2:1 على أبيض) — ولذلك
     الطبقة الثالثة تسقُف الإضاءة صراحةً. */
  --clay-ink: #B0432A;
  --clay-ink: color-mix(in srgb, var(--clay) 72%, var(--ink));
  --clay-ink: oklch(from var(--clay) min(l, 0.46) c h);

  /* ثانويّة المطعم — للوسوم والتفاصيل الصغيرة */
  --clay-2: var(--secondary, #7FB77E);
  --clay-2-ink: #3F6B3E;
  --clay-2-ink: color-mix(in srgb, var(--clay-2) 72%, var(--ink));
  --clay-2-ink: oklch(from var(--clay-2) min(l, 0.44) c h);

  --on-clay: #FFF8F4;

  /* ألوان الحالة — ثوابت دلاليّة لا تتبع المطعم (أخضر=مفتوح دائماً) */
  --ok: #4E9A57;
  --ok-ink: #2F6B37;
  --warn: #D9705C;
  --warn-ink: #9C3D2B;
  /* أحمر «مغلق» بمادّة الصلصال (2026-08-22) — أدفأ وأقلّ صراخاً من الأحمر
     المعياريّ كي ينتمي إلى الباستيل، وحبرُه غامق ليبلغ التبايُن. */
  --closed: #D65C5C;
  --closed-ink: #97302F;
  --vac: #8B84C4;
  --vac-ink: #514A8C;
  --butter: #F7C453;

  /* ─── الأنصاف: متفاوتة عن قصد ─── */
  --r-xl: 38px;
  --r-lg: 30px;
  --r-md: 22px;
  --r-sm: 16px;
  --r-pill: 999px;

  /* ─── ظلال القطعة المحايدة (الأرض/البلاط) ───
     الثلاثيّ: خارجيّ مُشبَع + بريق أعلى + انطباع أسفل. */
  --sh-out: rgba(198, 158, 128, .38);
  --sh-hi: rgba(255, 255, 255, .95);
  --sh-lo: rgba(198, 158, 128, .30);

  --puff:
    0 14px 26px -8px var(--sh-out),
    0 4px 8px -4px var(--sh-out),
    inset 0 8px 12px -6px var(--sh-hi),
    inset 0 -9px 12px -6px var(--sh-lo);

  --puff-sm:
    0 8px 16px -6px var(--sh-out),
    inset 0 5px 8px -4px var(--sh-hi),
    inset 0 -6px 8px -4px var(--sh-lo);

  /* تجويف مضغوط — للحقول وأحواض الأيقونات */
  --press:
    inset 0 7px 12px -3px var(--sh-lo),
    inset 0 -5px 9px -3px var(--sh-hi);

  --u: 8px;
  --maxw: 1120px;
  --nav-h: 3.6rem;
  --ease: cubic-bezier(.34, 1.56, .64, 1);
}

/* ─── الأساس ─── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 calc(var(--u) * 2) calc(var(--u) * 14);
  font-family: var(--font-text, system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--ground);
  min-height: 100%;
  overflow-x: hidden;   /* الظلال الخارجية لا تفتح شريط تمرير أفقياً */
}

h1, h2, h3 {
  font-family: var(--font-display, var(--font-text, system-ui, sans-serif));
  margin: 0;
  line-height: 1.35;
  font-weight: 700;
}

p { margin: 0; }

img { max-width: 100%; display: block; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  font-family: var(--font-text, system-ui, sans-serif);
}

/* كل رقم بعرض ثابت — بلا هذا يهترّ عمود الأسعار عند كل تحديث سلّة */
.dish-price, .cart-btn-total, .cart-row-price, .cart-total-row, .qty-num {
  font-variant-numeric: tabular-nums;
}

/* السبرايت مخفيّ بلا الإعدام البصريّ (يُبطل مراجع <use> في بعض المحرّكات) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

/* ⚠️ يضيفها `app.mjs` ولا يعرّفها — قالب ينساها يُظهر زرّ سلّة فارغة دائماً */
.hidden { display: none !important; }

:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ⚠️ عالَم واحد فاتح ⇒ الزرّ يُخفى (العقد §6). لا تحذف هذا السطر. */
.theme-toggle { display: none; }

/* ════════════════════════════════════════════════
   2. الترويسة — لوح صلصال كبير
   ════════════════════════════════════════════════ */
.header {
  margin: calc(var(--u) * 2) auto calc(var(--u) * 3);
  max-width: var(--maxw);
  background: var(--tile);
  border-radius: var(--r-xl);
  box-shadow: var(--puff);
  padding: calc(var(--u) * 2);
  overflow: hidden;
}

.r-hero {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--press);   /* الصورة **مضغوطة** في اللوح لا نابتة منه */
  margin-bottom: calc(var(--u) * 2);
}
.r-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 34vh;
  object-fit: cover;
}

/* البديل بلا صورة: **كتل صلصال طريّة** لا مستطيل رمادي (مضادّ PRODUCT.md).
   `--seed` (0–24) يكتبها `app.mjs` فتتحرّك مواضع الكتل وأحجامها ⇒ لا
   مطعمان بنفس البديل. الألوان من لون المطعم نفسه، فيبقى البديل هويّةً. */
.r-hero.is-fallback {
  --seed: 0;
  aspect-ratio: 16 / 9;
  max-height: 34vh;
  background-color: var(--tile-2);
  background-image:
    radial-gradient(
      circle at calc(22% + var(--seed) * 2.2%) calc(34% + var(--seed) * 1.1%),
      color-mix(in srgb, var(--clay) 34%, transparent) 0,
      transparent calc(28% + var(--seed) * 0.7%)
    ),
    radial-gradient(
      circle at calc(74% - var(--seed) * 1.4%) calc(66% - var(--seed) * 0.9%),
      color-mix(in srgb, var(--clay-2) 30%, transparent) 0,
      transparent calc(24% + var(--seed) * 0.8%)
    ),
    radial-gradient(
      circle at calc(50% + var(--seed) * 1.6%) calc(14% + var(--seed) * 1.8%),
      color-mix(in srgb, var(--butter) 26%, transparent) 0,
      transparent 20%
    );
}

.r-headwrap {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 2);
  padding: 0 var(--u);
  flex-wrap: wrap;
}

/* الشعار قطعة منفوخة مستقلّة — يبرز من اللوح لا يجلس عليه */
.r-logo {
  width: 68px;
  height: 68px;
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--tile-2);
  box-shadow: var(--puff-sm);
  flex: none;
}

.r-name {
  font-size: clamp(1.55rem, 5.5vw, 2.35rem);
  color: var(--ink);
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: break-word;   /* اسم من 40 حرفاً لا يفتح تمريراً أفقياً */
}

.r-bio {
  flex: 1 1 100%;
  color: var(--ink-2);
  font-size: .96rem;
  max-width: 44em;
  padding-inline-start: 2px;
}

.r-metarow {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--u);
  margin-top: var(--u);
}

/* العنوان والهاتف: حصاة صغيرة لكل واحد. 44px حدّ اللمس (العقد §7-5). */
.r-link, .r-meta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: 0 calc(var(--u) * 1.75);
  border-radius: var(--r-pill);
  background: var(--tile-2);
  box-shadow: var(--puff-sm);
  color: var(--ink-2);
  font-size: .9rem;
  text-decoration: none;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.r-link { color: var(--clay-ink); font-weight: 600; }
.r-link:hover { transform: translateY(-2px); }
.r-link:active { box-shadow: var(--press); transform: none; }

/* ════════════════════════════════════════════════
   3. حالة المطعم — حصاة ملوّنة، وظلّها من لونها
   ------------------------------------------------
   لون الحالة **لا يتبع المطعم**: أخضر=مفتوح وأحمر=مغلق دلالة عامّة،
   ومطعمٌ لونه أحمر لا يجوز أن يعرض «مفتوح» بالأحمر.
   ════════════════════════════════════════════════ */
.status-wrap {
  max-width: var(--maxw);
  margin: 0 auto calc(var(--u) * 3);
  display: flex;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2.25);
  border-radius: var(--r-md);
  font-size: .95rem;
  box-shadow:
    0 10px 20px -8px var(--st-sh),
    inset 0 6px 10px -5px rgba(255, 255, 255, .34),
    inset 0 -7px 10px -5px var(--st-sh);
  background: var(--st-bg);
  color: var(--st-ink);
}

.status-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--st-ink);
  flex: none;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .18);
}

.status-title { font-weight: 700; }
.status-detail { color: inherit; opacity: .82; }

/* 🔴 **ممتلئة لا شاحبة** (حكم 2026-08-22: «لون الحالة فاتح») — والتنفيذ
   **داخل نظام هذا القالب** لا بقواعدَ فوقه: قاعدةٌ عامّة بوزن
   `.status-badge.status-open` تدهس مادّته الصلصاليّة. فالمتغيّرات نفسها
   تحمل القيمة الجديدة، ويبقى بريقُه الداخليّ وظلّه الملوَّن كما هما.
   والنسبة `78%` من `MIX.FILL` في `shared/theme-roles.mjs`. */
.status-open {
  --st-bg: color-mix(in srgb, var(--ok) 78%, #000);
  --st-ink: #FFFAF7;
  --st-sh: color-mix(in srgb, var(--ok) 52%, transparent);
}
.status-closed {
  /* بطلبك (2026-08-22): الأحمر للمغلق. كان `--warn` كهرمانيّاً فيُقرأ
     «تنبيه» لا «مغلق» — والزبون يحتاج جواباً لا تحذيراً. */
  --st-bg: color-mix(in srgb, var(--closed) 78%, #000);
  --st-ink: #FFFAF7;
  --st-sh: color-mix(in srgb, var(--closed) 52%, transparent);
}
.status-vacation {
  --st-bg: color-mix(in srgb, var(--vac) 78%, #000);
  --st-ink: #FFFAF7;
  --st-sh: color-mix(in srgb, var(--vac) 52%, transparent);
}

/* توقيع قوالب «موعد»: الحالة تصبغ الصفحة كلّها لا الشارة وحدها.
   مغلق/عطلة ⇒ الغلاف يفقد تشبّعه فيُقرأ «ليس الآن» بلا قراءة نصّ. */
body.s-closed .r-hero img,
body.s-vacation .r-hero img { filter: saturate(.55) brightness(.94); }
body.s-closed .r-hero.is-fallback,
body.s-vacation .r-hero.is-fallback { opacity: .6; }

/* ════════════════════════════════════════════════
   4. شريط الفئات — حصوات في ميزاب
   ════════════════════════════════════════════════ */
.cat-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: var(--u);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--u) calc(var(--u) * 1.5);
  margin: 0 auto calc(var(--u) * 3);
  max-width: var(--maxw);
  min-height: var(--nav-h);
  align-items: center;
  border-radius: var(--r-pill);
  background: var(--ground);
  box-shadow: var(--press);
}
.cat-nav::-webkit-scrollbar { display: none; }

/* `app.mjs` يُخلي الشريط عند فئة واحدة — فارغاً يبقى ميزاباً بلا معنى */
.cat-nav:empty { display: none; }

.cat-chip {
  flex: none;
  min-height: 40px;
  padding: 0 calc(var(--u) * 2);
  border-radius: var(--r-pill);
  background: var(--tile);
  box-shadow: var(--puff-sm);
  color: var(--ink-2);
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .2s var(--ease), color .2s ease;
}
.cat-chip:hover { transform: translateY(-2px); }

/* المفعَّلة **مضغوطة** لا مرفوعة: الحصاة التي دُفعت في الطين هي المختارة.
   دلالة مادّية بلا حاجة إلى لون وحده — تعمل حتى في `prefers-contrast`. */
.cat-chip.is-active {
  background: var(--tile-2);
  box-shadow: var(--press);
  color: var(--clay-ink);
  transform: none;
}

/* ════════════════════════════════════════════════
   5. المنيو — الفئات
   ════════════════════════════════════════════════ */
.menu { max-width: var(--maxw); margin: 0 auto; }

.cat { margin-bottom: calc(var(--u) * 5); }

/* الشريط لاصق ⇒ بلا هذا يختفي عنوان الفئة تحته عند القفز إليها */
.cat { scroll-margin-top: calc(var(--nav-h) + var(--u) * 2); }

.cat-title {
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0 0 calc(var(--u) * 2);
  padding: 0 calc(var(--u) * 1.5);
}

.cat-dishes {
  display: grid;
  gap: calc(var(--u) * 2);
}

/* ════════════════════════════════════════════════
   6. البطاقة — القطعة الأساسية
   ------------------------------------------------
   ⚠️ ثلاث حالات حصراً، ولا يجتمع صنفان (العقد §4):
     `.dish`              بلا صورة
     `.dish.has-img`      صورة صغيرة جانبية
   (أُزيل «الطبق المميَّز» بطلب صاحب المشروع 2026-09-01 — البطاقاتُ متساوية.)
   لتقرّر الفائز بترتيب السطور — ولذلك `app.mjs` يُصدر واحداً فقط.
   ════════════════════════════════════════════════ */
.dish {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 2);
  background: var(--tile);
  border-radius: var(--r-lg);
  box-shadow: var(--puff);
  transition: transform .25s var(--ease);
}
.dish:hover { transform: translateY(-3px); }

.dish.has-img {
  grid-template-columns: 84px minmax(0, 1fr) auto;
}



/* الصورة مضغوطة في القطعة (نفس منطق الغلاف): الطعام محفور في الصلصال */
.dish-thumb {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--press);
  background: var(--tile-2);
}
.dish-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.dish-info { min-width: 0; }

/* شبكة لا فلكس: السعر يلتزم حافّة عموده فيبقى مستقيماً بين البطاقات */
.dish-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--u);
}

.dish-name {
  font-family: var(--font-display, var(--font-text, system-ui, sans-serif));
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: break-word;
}

.dish-price {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--clay-ink);
  white-space: nowrap;
}

.dish-desc {
  color: var(--ink-2);
  font-size: .92rem;
  line-height: 1.7;
  margin-top: .3rem;
}

.dish-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .6rem;
}

/* الوسم حصاة صغيرة بلون المطعم الثانوي */
.tag {
  font-size: .76rem;
  font-weight: 600;
  padding: .2rem .7rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--clay-2) 18%, var(--tile));
  color: var(--clay-2-ink);
  box-shadow: var(--puff-sm);
}

.dish-action { display: flex; align-items: center; }

/* ─── الإضافة والكمّية ─── */

/* الزرّ قطعة صلصال بلون المطعم — ينضغط فعلاً عند اللمس (`:active`).
   هذه هي «الاستجابة» في الصلصال: لا تغيير لون بل تغيير عمق. */
.add-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 calc(var(--u) * 2.25);
  border-radius: var(--r-pill);
  background: var(--clay-ink);
  color: var(--on-clay);
  font-weight: 700;
  font-size: .92rem;
  box-shadow:
    0 10px 18px -7px color-mix(in srgb, var(--clay) 55%, transparent),
    inset 0 6px 9px -5px rgba(255, 255, 255, .45),
    inset 0 -7px 10px -5px rgba(0, 0, 0, .22);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.add-btn:hover { transform: translateY(-2px); }
.add-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 6px 10px -3px rgba(0, 0, 0, .28);
}

/* المُبدِّل تجويف واحد وفيه ثلاث خلايا — لا ثلاث قطع منفصلة */
.qty {
  display: grid;
  grid-template-columns: 44px auto 44px;
  align-items: center;
  border-radius: var(--r-pill);
  background: var(--tile-2);
  box-shadow: var(--press);
  padding: 3px;
}

.qty-btn {
  min-height: 40px;
  border-radius: 50%;
  color: var(--clay-ink);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  background: var(--tile);
  box-shadow: var(--puff-sm);
  transition: transform .18s var(--ease);
}
.qty-btn:active { transform: scale(.92); box-shadow: var(--press); }

.qty-num {
  text-align: center;
  font-weight: 700;
  min-width: 2ch;
  color: var(--ink);
}

/* ─── ملاحظات ونهاية الصفحة ─── */
.empty-note {
  color: var(--ink-3);
  text-align: center;
  padding: calc(var(--u) * 5) var(--u);
  font-size: .95rem;
}

.foot {
  max-width: var(--maxw);
  margin: calc(var(--u) * 5) auto 0;
  text-align: center;
  color: var(--ink-3);
  font-size: var(--t-sm);
  padding-bottom: var(--u);
}

/* ════════════════════════════════════════════════
   7. زرّ السلّة العائم — أكبر قطعة في الصفحة
   ------------------------------------------------
   `env(safe-area-inset-bottom)`: بلا ذلك يقع الزرّ تحت شريط الإيماءات
   في iPhone فيتعذّر لمسه — والمنيو كلّه يُستعمل على الهاتف.
   ════════════════════════════════════════════════ */
.cart-button {
  position: fixed;
  z-index: 40;
  inset-inline: calc(var(--u) * 2);
  bottom: calc(var(--u) * 2 + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 56px;
  padding: 0 calc(var(--u) * 2.5);
  border-radius: var(--r-pill);
  background: var(--clay-ink);
  color: var(--on-clay);
  font-weight: 700;
  box-shadow:
    0 16px 28px -8px color-mix(in srgb, var(--clay) 60%, transparent),
    inset 0 8px 12px -6px rgba(255, 255, 255, .45),
    inset 0 -9px 12px -6px rgba(0, 0, 0, .24);
  transition: transform .22s var(--ease);
}
.cart-button:hover { transform: translateY(-3px); }
.cart-button:active { transform: translateY(1px); }

/* ═══ لفتُ العين إلى زرّ السلّة — أُعيد بناؤه 2026-09-10 ═══
   🔴 **والنسخةُ الأولى كانت ميّتة — وموتُها مَقيسٌ لا مستنتَج:** جُرّبت على
   شخصٍ فاختار طعامَه ثمّ سأل «كيف أرسل؟». لم يرَ الزرَّ أصلاً. والسببُ سطرٌ
   واحد: التوهّجُ كان `color-mix(… var(--accent-ink) …)` — أي **بلون الزرّ
   نفسِه**. وهالةٌ حمراءُ حول زرٍّ أحمر لا تُرى: تزيد حافّتَه ضبابيّةً وكفى.
   وهذا معنى «يموت مع الثيم» بالحرف — وكلّما اشتدّ لونُ المطعم ازداد اختفاؤها.

   ✅ **والبديلُ لا يراهن على لونٍ إطلاقاً — ثلاثُ طبقاتٍ مستقلّة:**
     ① **حركة**: نبضةُ تكبيرٍ خفيفة. الرؤيةُ المحيطيّة تلتقط **الحركة** قبل
        اللون بمراحل — وزرُّ السلّة يقع في محيط نظر من يقرأ الأطباق لا في
        مركزه، وهناك بالضبط تفشل الهالةُ وتنجح الحركة.
     ② **لمعانٌ يعبر** (`::after`): شريطٌ مائلٌ يمسح الزرّ — وهذا حرفيّاً
        «يلمع» الذي طلبتَه، لا هالةً ساكنة.
     ③ **ولونُ اللمعان `--on-accent` لا `--accent`:** هو اللونُ المضمونُ
        تبايُنُه مع أرضيّة الزرّ **بالبناء** (فهو لونُ نصِّه أصلاً) — كريميٌّ
        فوق أحمرَ في الفاتح، وداكنٌ فوق أحمرَ فاتحٍ في الداكن. فيُرى في
        الوضعَين ومع أيّ لونِ مطعمٍ، بلا استثناءٍ يُكتَب يوماً.

   ⚠️ **و`:active` يُطفئ الحركة:** الحركةُ تغلب أيَّ `transform` عاديّ ما دامت
      تعمل، فبلا هذا السطر يفقد الزرُّ ردَّ فعل الضغط تحت الإصبع. */
.cart-button { overflow: hidden; }
/* كلمةُ الفعل — انظر تعليقَها في `index.html`. تُخفى بـ`hidden` وحدها. */
.cart-cta { font-weight: 800; white-space: nowrap; }
.cart-button::after {
  content: "";
  position: absolute;
  top: -60%; bottom: -60%; inset-inline-start: 0;
  width: 34%;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--on-accent) 60%, transparent), transparent);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes cart-attention {
    0%, 70%, 100% { transform: scale(1); }
    76% { transform: scale(1.075); }
    83% { transform: scale(.975); }
    90% { transform: scale(1.035); }
  }
  /* ⏱️ **السرعة أُبطئت بأمرك (2026-09-10): «سرعة اللمعان كبيرة قللها».**
     السحبةُ كانت 26% من 4.4ث ≈ **1.14ث** — ومضةٌ تُلمَح ولا تُتابَع. صارت
     36% من 5.6ث ≈ **2.0ث** (أبطأ 76%): تكفي العينَ لتتبع الشريطَ وهو يعبر،
     وهذا هو الفرق بين «شيءٌ ومض» و«هذا الزرُّ ينادي».
     و`linear` للسحبة لا `ease-in-out`: الأخيرة تُبطئ الطرفَين وتُسرع
     الوسط، فيمرّ اللمعانُ فوق **النصّ** (وسطِ الزرّ) في أسرع لحظاته — أي
     يختفي بالضبط حيث يجب أن يُرى. والنبضةُ تبقى `ease-in-out` (حركةٌ حيّة
     لا آليّة)، وبنفس المدّة فيبقيان **حدثاً واحداً** لا اثنَين متزاحمَين. */
  @keyframes cart-sheen {
    0% { transform: translateX(-300%) rotate(18deg); opacity: 0; }
    4% { opacity: 1; }
    36% { transform: translateX(300%) rotate(18deg); opacity: 1; }
    37%, 100% { transform: translateX(300%) rotate(18deg); opacity: 0; }
  }
  .cart-button:not(.hidden) { animation: cart-attention 5.6s ease-in-out infinite; }
  .cart-button:not(.hidden)::after { animation: cart-sheen 5.6s linear infinite; }
  .cart-button:active { animation: none; transform: translateY(1px); }
}

/* أيقونة السلّة أكبر قليلاً من `.icon` العامّة: هي المقبض الأساسي في
   الصفحة، ويحملها زرّ بارتفاع 56px فتبدو ضامرة بالحجم الافتراضي. */
.cart-icon { width: 1.45rem; height: 1.45rem; }

/* العدّاد قطعة بيضاء مضغوطة داخل الزرّ — تباين بلا لون ثالث */
.cart-badge {
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--on-clay);
  color: var(--clay-ink);
  font-size: .82rem;
  font-weight: 700;
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, .16);
}

.cart-btn-total { margin-inline-start: auto; font-size: .95rem; }

/* ─── الطبقة المعتمة ───
   `visibility` مع `opacity` لا `display`: يحفظ الانتقال ويمنع اللمس معاً. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: color-mix(in srgb, var(--ink) 46%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
.backdrop.show { opacity: 1; visibility: visible; }

/* ════════════════════════════════════════════════
   8. الدرج — لوح صلصال ينزلق من الأسفل
   ------------------------------------------------
   ⚠️ **لا الإعدام البصريّ** (العقد §7-7): يُخرج العنصر من الانتقال ومن
   ترتيب الجدولة معاً بلا تدريج. المغلق = `transform` + `visibility`،
   فيبقى الانزلاق مرئيّاً ويبقى محتواه بعيداً عن Tab.
   ════════════════════════════════════════════════ */
.cart-drawer {
  position: fixed;
  z-index: 50;
  inset-inline: 0;
  bottom: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -18px 40px -12px var(--sh-out);
  padding: calc(var(--u) * 2) calc(var(--u) * 2)
           calc(var(--u) * 2 + env(safe-area-inset-bottom, 0px));
  transform: translateY(101%);
  visibility: hidden;
  transition: transform .34s var(--ease), visibility .34s;
}
.cart-drawer.open { transform: none; visibility: visible; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u);
  margin-bottom: calc(var(--u) * 2);
}
.drawer-head h2 { font-size: 1.2rem; color: var(--ink); }

.close-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tile);
  color: var(--ink-2);
  box-shadow: var(--puff-sm);
  transition: transform .18s var(--ease);
}
.close-btn:active { transform: scale(.92); box-shadow: var(--press); }

.cart-list {
  overflow-y: auto;
  display: grid;
  gap: var(--u);
  margin-bottom: calc(var(--u) * 2);
  /* الظلال الخارجية تُقتصّ عند حافّة الصندوق المُمرَّر — هامش يحفظها */
  padding: 4px;
  margin-inline: -4px;
}

.cart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--u);
  padding: calc(var(--u) * 1.5);
  background: var(--tile);
  border-radius: var(--r-md);
  box-shadow: var(--puff-sm);
}

.cart-row-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--u);
  min-width: 0;
}
.cart-row-name {
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: break-word;
}
.cart-row-price { color: var(--clay-ink); font-weight: 700; white-space: nowrap; }

/* المجموع تجويف: القيمة النهائية محفورة لا مرفوعة */
.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--u);
  padding: calc(var(--u) * 1.75) calc(var(--u) * 2);
  border-radius: var(--r-md);
  background: var(--ground);
  box-shadow: var(--press);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--ink);
  margin-bottom: calc(var(--u) * 2);
}

/* ─── نموذج الطلب ─── */
.order-form { display: grid; gap: var(--u); }

/* الحقل تجويف مضغوط — الاستعارة الطبيعية للإدخال في مادّة طريّة */
.field {
  width: 100%;
  min-height: 48px;
  padding: calc(var(--u) * 1.25) calc(var(--u) * 2);
  border: 0;
  border-radius: var(--r-md);
  background: var(--tile-2);
  box-shadow: var(--press);
  color: var(--ink);
  font: inherit;
  font-family: var(--font-text, system-ui, sans-serif);
}
.field::placeholder { color: var(--ink-3); }

/* ═══ حالةُ الخانة (طلبُك 2026-09-08) ═══
   «كل حقل يملا يتغير محيطه الى اللون الاخضر» · و«بعد التقاط الموقع … تتوهج
   او يتغير لونها لتصبح واضحة».
   🔴 وعلّتُه تشغيليّة لا زينة: نموذجُ الطلب يُملأ على هاتفٍ بيدٍ واحدة في
   الشارع، ومن لا يرى أيَّ خانةٍ أتمّها يُرسل ناقصاً فيُردّ عليه بخطأ.

   ⚠️ **الصنفُ يضعه JS لا `:not(:placeholder-shown)`:** الهاتفُ «ممتلئٌ»
      بثلاثة أرقامٍ وهو **غيرُ صالح** — وأخضرُ يَعِد ثمّ يرفضه الإرسالُ أسوأ
      من لا شيء. فالمعيارُ `isCompletePhone` نفسُها التي يفحص بها الإرسال.
   ⚠️ **و`--ok` لا أخضرُ مكتوب:** معرَّفٌ في القوالب الستّة وبدرجةٍ أفتحَ في
      الوضع الداكن — وأخضرُ ثابتٌ يبتلعه سطحٌ داكن.
   ⚠️ **وحلقةٌ داخليّة (`inset`) لا `outline`:** الأخيرةُ هي بالضبط ما يرسم
      حلقةَ التركيز، فخانةٌ ممتلئةٌ كانت ستمحو دليلَ التركيز عمّن يتنقّل
      بلوحة المفاتيح. */
.field.is-filled { box-shadow: var(--press), 0 0 0 2px var(--ok) inset; }

/* سطرُ «تمّ التقاط موقعك» — يلبس `empty-note` أيضاً فيرث حشوَ القالب وسطحَه
   (عقدُ القوالب §4: أصنافٌ قائمةٌ لا جديدة)، ويضيف هذا اللونَ والحلقة.
   والنبضُ **ثلاثُ مرّاتٍ ثمّ يسكن**: هو إقرارُ لحظةٍ لا زينةٌ دائمة — وحلقةٌ
   خضراءُ ثابتةٌ تبقى بعده تقول «هذا تمّ» بلا حركةٍ تشدّ العين إلى الأبد. */
.geo-ok {
  padding: .75rem 1rem;
  color: var(--ok);
  font-weight: 700;
  box-shadow: var(--press), 0 0 0 2px var(--ok) inset;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes geo-ok-pulse {
    0%, 100% { box-shadow: var(--press), 0 0 0 2px var(--ok) inset; }
    50% { box-shadow: var(--press), 0 0 0 2px var(--ok) inset, 0 0 16px 3px color-mix(in srgb, var(--ok) 55%, transparent); }
  }
  .geo-ok { animation: geo-ok-pulse 1.4s ease-in-out 3; }
}

.field:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 2px;
}
textarea.field { min-height: 80px; resize: vertical; }

/* ارتفاع محفوظ: بلا هذا يقفز الزرّ للأسفل لحظة ظهور الخطأ */
.form-err {
  min-height: 1.3em;
  color: var(--warn-ink);
  font-size: .86rem;
  font-weight: 600;
  padding-inline: var(--u);
}

/* ⚠️ **ليس أخضر واتساب** (مضادّ `PRODUCT.md §3-13`): الزرّ يرسل رسالة
   واتساب، فتقليد لون العلامة يوهم أنّ هذا تطبيقهم. لون المطعم أصدق. */
.send-btn {
  min-height: 52px;
  border-radius: var(--r-pill);
  background: var(--clay-ink);
  color: var(--on-clay);
  font-weight: 700;
  font-size: 1.02rem;
  box-shadow:
    0 14px 24px -8px color-mix(in srgb, var(--clay) 58%, transparent),
    inset 0 7px 11px -6px rgba(255, 255, 255, .45),
    inset 0 -8px 11px -6px rgba(0, 0, 0, .24);
  transition: transform .22s var(--ease);
}
.send-btn:hover { transform: translateY(-2px); }
.send-btn:active { transform: translateY(1px); box-shadow: var(--press); }
.send-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--press);
}

/* ════════════════════════════════════════════════
   9. سطح المكتب
   ------------------------------------------------
   العناصر الخمسة وحدها أبناء الشبكة: `.sprite` مُطلَق، وزرّ الوضع
   (مخفيّ أصلاً) والسلّة والطبقة والدرج `fixed` ⇒ خارج التخطيط.
   ════════════════════════════════════════════════ */
@media (min-width: 900px) {
  body { padding: 0 calc(var(--u) * 4) calc(var(--u) * 14); }

  body {
    max-width: calc(var(--maxw) + var(--u) * 8);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas:
      "hero   hero"
      "status menu"
      "nav    menu"
      "foot   foot";
    column-gap: calc(var(--u) * 4);
    align-items: start;
  }
  #header-zone { grid-area: hero; }
  #status-zone { grid-area: status; margin-bottom: calc(var(--u) * 2); }
  #cat-nav { grid-area: nav; }
  #menu-zone { grid-area: menu; }
  .foot { grid-area: foot; }

  .r-name { font-size: 2.5rem; }
  .r-logo { width: 84px; height: 84px; }
  .header { padding: calc(var(--u) * 2.5); }

  /* الميزاب يصير عمودياً لاصقاً: صفّ الحصوات ينزل بمحاذاة المنيو.
     `#menu-zone` يمتدّ على صفَّي status وnav فيطول العمود، وبه تحصل
     `sticky` على مسافة سفر فعليّة (بلا ذلك لا تتحرّك أصلاً). */
  .cat-nav {
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    border-radius: var(--r-lg);
    padding: calc(var(--u) * 1.5);
    min-height: 0;
    top: calc(var(--u) * 2);
  }
  .cat-chip { text-align: start; min-height: 44px; }

  .status-badge { flex: 1; }
}

/* عمودان للأطباق حين يتّسع العمود فعلاً */
@media (min-width: 1100px) {
  .cat-dishes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--u) * 2.5);
  }

  /* البطاقة البارزة تعبر العمودين — وإلّا انكمشت صورتها العريضة إلى نصف
     العرض فذهب سبب وجودها. */

.dish.has-img { grid-template-columns: 96px minmax(0, 1fr) auto; }

  /* الدرج يصير لوحاً جانبيّاً على حافّة البداية (اليمين في RTL) */
  .cart-drawer {
    inset-inline-start: 0;
    inset-inline-end: auto;
    top: 0;
    bottom: 0;
    width: 440px;
    max-width: 92vw;
    max-height: none;
    border-radius: 0 var(--r-xl) var(--r-xl) 0;
    box-shadow: 18px 0 40px -12px var(--sh-out);
    transform: translateX(101%);
  }
  .cart-drawer.open { transform: none; }

  /* شريط بعرض 1120px مبالغة — أصل الفكرة (أوسع مقبض ممكن) خاصّ بالهاتف */
  .cart-button {
    inset-inline: auto calc(var(--u) * 4);
    bottom: calc(var(--u) * 3);
    min-width: 240px;
  }
}

/* ─── 10. تفضيلات الوصول ─── */

/* الارتداد أوّل ما يزعج هنا: يُلغى الانتقال **والمنحنى** معاً — لا يبقى
   `--ease` مؤثّراً حين تكون المدّة .01ms، لكنّ `scroll-behavior` يبقى
   فيقفز المتصفّح إلى الفئة بلا انزلاق. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .dish:hover, .cart-button:hover, .send-btn:hover,
  .add-btn:hover, .cat-chip:hover, .r-link:hover { transform: none; }
}

/* ⚠️ **الحالة الحرِجة لهذا القالب.** بنيته كلّها ظلال، والظلال أوّل ما
   يغيب في أوضاع التباين العالي ⇒ تصير الصفحة كتلة بيج بلا حدود. فكل
   قطعة تأخذ إطاراً صريحاً بديلاً، والحصاة المضغوطة (الفئة المفعَّلة)
   تُميَّز بإطار سميك لأنّ فرق العمق لا يُرى. */
@media (prefers-contrast: more) {
  .header, .dish, .cart-row, .cat-chip, .r-link, .r-meta,
  .status-badge, .qty, .field, .cart-total-row, .close-btn,
  .cat-nav, .cart-drawer, .r-logo, .tag {
    box-shadow: none;
    border: 1px solid var(--ink-2);
  }
  .cat-chip.is-active { border: 3px solid var(--ink); }
  .add-btn, .send-btn, .cart-button {
    box-shadow: none;
    border: 2px solid var(--ink);
  }
  .r-hero, .dish-thumb { border: 1px solid var(--ink-2); box-shadow: none; }
  .status-dot { box-shadow: none; border: 1px solid var(--ink); }
}

/* ════════════════════════════════════════════════
   رابط المصادر باهتاً (2026-08-22)
   ════════════════════════════════════════════════ */
/* ⚠️ **قواعد الشارة الملوَّنة لا تُلحَق هنا:** هذا القالب يملك نظام حالة
   خاصّاً به (`--st-bg/--st-ink/--st-sh` أعلاه) بمادّته الصلصاليّة، وقواعدُ
   عامّة بوزن `.status-badge.status-open` تدهسه. فالمطلوب (أحمر للمغلق)
   نُفِّذ **داخل نظامه**: `.status-closed` صار يستعمل `--closed` لا `--warn`. */
/* رابط «مصادر الصور»: صغيرٌ باهت لا يُلاحَظ (طلبك).
   ⚠️ **ولا معدوم:** صور الديمو بتراخيص CC BY تُلزِم بالإسناد، والإعدام البصريّ
      أو شفافيّةٌ صفر يُبطِلانه ويصيران خدعةً بصريّة. ولم أُنزِل التبايُن تحت
      حدّ العقد (`CONTRACT §7.5`: 4.5:1) — رابطٌ لا يُقرأ أصلاً إسنادٌ باطل
      قانوناً وخرقٌ لعقدنا معاً. فالإخفاء بالمقاس والوزن لا بالتبايُن. */

/* ─── لا مستطيل أزرق عند اللمس (طلبك 2026-08-22) ───
   تظليل اللمس الافتراضيّ يرسم مربّعاً شبه شفّاف **فوق** المقبض لحظةَ الضغط،
   فيقطع المادّة المنحوتة ويظهر كعطب. وإزالتُه آمنة هنا لأنّ البديل موجود
   أصلاً: لكل مقبض حالة `:active`/`:hover` تُنقص النتوء — أي أنّ التغذية
   الراجعة **من النمط** لا من طبقة النظام.
   ⚠️ ولا يُمَسّ `:focus-visible`: ذاك للوصول بلوحة المفاتيح، وإسقاطه يعمي
      من لا يستعمل إصبعاً (شرط `CONTRACT §7.5`). */
html { -webkit-tap-highlight-color: transparent; }

/* ════════════════════════════════════════════════
   شرائح الأحجام (بند 3.13) — الشريحة **زرُّ الإضافة نفسه**
   ────────────────────────────────────────────────
   🔵 لماذا في البطاقة لا في مودال: الطلب نقرةٌ واحدة لا ثلاث (افتح ·
   اختر · أضف)، ومودالٌ لكل طبق يحبس التركيز ويُعتِم منيو الغرضُ منه
   التصفّح. والكمّيّة على الشريحة نفسها فيرى الزبون اختياره بلا فتح السلّة.
   ⚠️ و44px حدُّ هدف اللمس (`PRODUCT.md §5`) — شريحةٌ أصغر تُخطئها الإصبع
   في منيو يُقرأ واقفاً. ولا `letter-spacing` (يكسر وصل العربيّة).
   ════════════════════════════════════════════════ */
.dish-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * .75);
  margin-top: var(--u);
}

/* صلصال: بلاطةٌ منتفخة تُضغَط عند الاختيار (لا ظلَّ نقشيّ هنا). */
.size-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .4rem .85rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--tile);
  color: var(--clay-ink);
  font-family: var(--font-text);
  font-size: var(--t-sm);
  white-space: nowrap;
  box-shadow: var(--puff-sm);
  cursor: pointer;
  transition: box-shadow .16s ease, transform .16s ease;
}
.size-chip:active { transform: translateY(1px); }
.size-chip.is-on { box-shadow: var(--press); }
.size-name { font-weight: 700; }
.size-price { opacity: .72; font-size: var(--t-xs); }

.size-qty {
  display: grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 .3rem;
  border-radius: var(--r-pill);
  /* ⚠️ مادّة salsal لا تُعرِّف --on-accent: شارةُ سلّتها تستعمل
     --on-clay/--clay-ink، فنتبعها — وإلّا نصٌّ بلا لونٍ محسوم. */
  background: var(--on-clay);
  color: var(--clay-ink);
  font-size: var(--t-xs);
  font-weight: 700;
}

.size-pair { display: inline-flex; align-items: center; gap: .2rem; }
.size-minus {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--tile);
  color: var(--clay-ink);
  font-size: var(--t-lg);
  line-height: 1;
  box-shadow: var(--puff-sm);
  cursor: pointer;
}
.size-minus:active { box-shadow: var(--press); }

/* ════════════════════════════════════════════════
   مبدّل اللغة (بند 2.15) — بمادّة الصلصال، وفي زاوية زرّ الوضع
   ────────────────────────────────────────────────
   ⚠️ هذا القالب فاتحٌ فقط (`dark:false`) فيُخفي `.theme-toggle`
   بـ`display:none` — والمبدّل يرث الصنف، فيجب أن **يُعيد الظهور**
   صريحاً وأن يأخذ الزاوية بلا إزاحةِ زرٍّ لا وجود له.
   ومادّته مادّةُ القالب: `--tile` أرضيّةً و`--puff-sm` نفخةً
   و`--press` عند اللمس — لا `--surface`/`--nm-*` (لا وجود لها هنا).
   ════════════════════════════════════════════════ */
.lang-toggle {
  display: grid;
  place-items: center;
  position: fixed;
  top: max(.7rem, env(safe-area-inset-top));
  inset-inline-end: .7rem;
  z-index: 30;
  width: 44px; height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--tile);
  color: var(--ink);
  box-shadow: var(--puff-sm);
  cursor: pointer;
  font-family: var(--font-text);
  font-size: var(--t-sm);
  font-weight: 700;
  /* ⚠️ **لا `direction` هنا.** كانت `direction: ltr` لأجل «FR»، فقلبت معنى
     `inset-inline-end` **لهذا العنصر وحده** (تُحلّ باتّجاه العنصر لا صفحته)
     ⇒ الزرّ يمينَ الشاشة وزرّ الوضع يسارَها. وbidi تعرض المقطع اللاتينيّ
     صحيحاً بلا تدخّل، فالتصريح كان ضرراً بلا مقابل. */
  transition: color .18s ease, box-shadow .18s ease;
}
.lang-toggle:hover { color: var(--clay-ink); }
.lang-toggle:active { box-shadow: var(--press); }

/* ▼▼▼ مضمار قشرة «خانات» — مولَّدٌ من apps/menu/shell-khanat.css ▼▼▼
   ⚠️ لا تُعدّله هنا: عدّل المصدر ثمّ نفّذ node tools/sync-shell.mjs */

/* ════════════════════════════════════════════════════════════════
   مضمارُ قشرة «خانات» — الهيكلُ المشترك لكلّ القوالب (بند 2.11)
   ----------------------------------------------------------------
   **مصدرٌ واحد** لهذا المضمار: `apps/menu/shell-khanat.css`، ويُولَّد في
   `style.css` لكلّ قالبٍ يقول سجلُّه `"shell": "khanat"` — لأنّ الهيكلَ
   واحدٌ للجميع بطلبِ صاحب المشروع، **والمظهرُ لكلٍّ خصائصُه**.

   🔴 **مصدر الهيكل:** صورةٌ أرسلها صديق صاحب المشروع (بروفايل: صفّ
   أيقونات، ثمّ خانات عريضة كلٌّ بسهم دخول، ثمّ دوائر شبكات في القاع).
   ⚠️ **وتصحيحٌ صريح من صاحب المشروع (2026-08-21):** «طبّق ثيمنا الحالي على
   الموجود في الصورة، لا تعتمد الصورة مباشرة» — فالصورة مرجعُ هيكلٍ لا مظهر.

   ⚠️ **ولا لونَ مثبَّتاً واحداً هنا:** كلُّ قيمةٍ `var()` يعرّفها القالبُ
   نفسُه. فقالبُ الصلصال يجسر الرموزَ بقيمِ الصلصال فيحصل على الدخول
   والرجوع والتصفّح الأفقيّ **بظلالِه هو** لا بظلال «نقش». وهذا شرطُ
   الطلب: هيكلٌ مشترك ومظهرٌ خاصّ.

   📐 **الفرق البنيويّ في سطر:** الكلاسيكيّةُ صفحةٌ واحدة تُمرَّر وفيها كل
   الفئات؛ وهذه **بروفايل يُدخَل منه** إلى شاشة لكل فئة. ولذلك:
     • عمود واحد على كل المقاسات (لا شبكة سطح مكتب) — البروفايل شكلٌ
       عموديّ بطبيعته، وتمديدُه إلى 1180px يجعله ترويسةً عريضة بلا محتوى.
     • `.cat-nav` لا يُستعمل أصلاً (JS يتركه فارغاً) فيُخفى بـ`:empty`.
     • المشاهد الداخليّة تُقصّر الترويسة: البروفايل مكانه الواجهة وحدها.
   ════════════════════════════════════════════════════════════════ */
/* إعلان القشرة — يقرؤه app.mjs (لا ميتا ولا ملفّ إعداد: العقد يقول إنّ
   القالب يملك هذا الملفّ وحده). قيمةٌ مجهولة تسقط إلى الكلاسيكيّة. */
:root {
  --shell: khanat;
  --kh-gap: .85rem;
  --kh-pad: 1.05rem;
  /* 📐 **شريطُ الأزرار الثابتة أعلى الشاشة** (اللغة + الوضع): كلاهما
     `position: fixed` بارتفاع 44px وz-index 30. فأيّ عنصرٍ لاصقٍ بـ`top: 0`
     يمرّ **تحتهما** (z أقلّ) فيُغطّى أوّلُه. */
  --toggle-band: calc(max(.7rem, env(safe-area-inset-top)) + 44px + .5rem);
}

/* ─── 📐 شريط الفئات يلصق **تحت** زرَّي اللغة والوضع لا تحتهما بصريّاً ───
   🔴 **عطبٌ في صورةٍ أرسلها صاحب المشروع (2026-09-05):** «أيقونة اللغة
      والثيم يغطّيان على الصنف — أريد شريط الفئات لا يصعد إلى ذلك العلو».
      وسببُه أنّ `.cat-nav` لاصقٌ بـ`top: 0` وz-index 20، والزرّان ثابتان
      بـz-index 30 ⇒ عند التمرير يصل الشريطُ إلى أعلى الشاشة فيقف **خلف**
      الزرّين، فيُقرأ أوّلُ صنفٍ نصفَ مغطّى. وليس تراكبَ ألوانٍ ولا شفافيّة:
      ترتيبُ طبقاتٍ صحيحٌ في مكانٍ خاطئ.
   ⚠️ **وقيمةٌ واحدة مشتقّةٌ من مقاس الزرّ نفسه** (`--toggle-band`) لا رقمٌ
      مكتوبٌ بالعين: لو تغيّر مقاسُ الزرّ تبعَه الشريطُ تلقائيّاً. ومعها
      `env(safe-area-inset-top)` فلا يقع تحت نتوء الشاشة على iPhone.
   ⚠️ **والمُحدِّدُ الثاني لازمٌ لا زائد:** `sikka` تحمل
      `.status-wrap:empty + .cat-nav { top: 0 }` (خصوصيّةٌ أعلى) — فبلا
      مطابقتِها يبقى العطبُ في ذلك القالب وحده، وهو أسوأُ صنفٍ من العطب:
      مُصلَحٌ في خمسةٍ وباقٍ في واحد. */
.cat-nav { top: var(--toggle-band); }
.status-wrap:empty + .cat-nav { top: var(--toggle-band); }

/* ─── 🔴 لوحٌ معتمٌ فوق شرائح الفئات (شكوى 2026-09-10 بصورة) ───
   «فوق خنات الفئات عند التمرير أريد ألّا يظهر ما هو في الخلف. أريد ظهور
   زرّ الثيم واللغة والتنزيل فقط، لا الأطباق وتلك الأمور.»

   الشريطُ `0 … --toggle-band` **شفّاف**: الزرّان الثابتان قرصان صغيران
   يطفوان فيه، وما حولهما فراغٌ تمرّ تحته بطاقاتُ الأطباق مرئيّةً حتّى
   تصطدم بحافّة الشريط اللاصق. فاللوحُ يملأ ذلك الفراغ بلون السطح.

   ⚠️ **وصنفٌ لا قاعدةٌ دائمة:** لوحٌ معتمٌ دائمٌ يقصّ أعلى صورة الغلاف —
      أوّلَ ما يراه الزبون. فـ`app.mjs` يضيف `nav-stuck` **لحظةَ التصاق
      الشريط وحدها** (انظر `syncNavStuck`)، وهو نصُّ الطلب: «عند التمرير».
   ⚠️ **وz-index 28 رقمٌ محسوبٌ لا مرتفعٌ عشوائيّ:** فوق الشرائح (20) وزرّ
      السلّة (25)، وتحت الأزرار الثابتة (30) والدرج (45) والمكبّر (60) —
      فالثلاثةُ التي طلبها وحدَها تبقى فوقه.
   ⚠️ **و+1px لا صفر:** `env(safe-area-inset-top)` كسريّةٌ في أجهزة، وحافّتان
      متلاصقتان تماماً تكشفان خيطاً من المحتوى بينهما. */
body.nav-stuck::before {
  content: '';
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: calc(var(--toggle-band, 0px) + 1px);
  background: var(--surface);
  z-index: 28;
  pointer-events: none;
}

/* 🔴 **شكوى 2026-09-10 (ب) — «أخفيتَ معك الشعار».**
   اللوحُ المعتم أدّى عملَه أكثرَ ممّا طُلب: الشعارُ يعبر الشريطَ عند التمرير
   مثلَ بطاقات الأطباق، فاختفى معها — وهو **هويّةُ المطعم** لا محتوىً عابر.
   ⚠️ **و29 لا 31:** فوق اللوح (28) وتحت الأزرار الثلاثة (30) ⇒ يظهر الشعار
      ولا يزاحم زرَّ الثيم أو اللغة أو التنزيل إن تقاطعا.
   ⚠️ **و`position` شرطٌ لا زينة:** `z-index` لا يعمل على عنصرٍ ساكن. و`.r-headwrap`
      حاضنُه `position: relative` بلا `z-index` ⇒ لا يصنع سياقَ تكديسٍ يحبس
      الابنَ تحت اللوح، فالرقمُ يُقاس في السياق الجذر كما نريد. */
.r-logo {
  position: relative;
  z-index: 29;
}

/* 🔴 **شكوى 2026-09-10 (ج) — «في أعلى صورة الغلاف خطٌّ أبيضُ مزعج».**
   ليس ظلّاً ولا حدّاً: `.header` تحمل `padding-top: 1rem` من مادّة `naqsh`،
   فيظهر شريطٌ بلون السطح (1rem ≈ 16px) فوق غلافٍ يمتدّ إلى حافّتَي الشاشة —
   يُقرأ خطّاً أبيضَ لأنّ الصورة تحته بلا هامشٍ جانبيّ يبرّره.
   ⚠️ **والإلغاء مشروطٌ بوجود غلافٍ مرئيّ:** في المشهد الداخليّ (`kh-inner`)
      يُخفى الغلاف ويصعد لوحُ الهويّة إلى القمّة — وهناك الهامشُ متنفَّسٌ لا
      عطب، فيبقى. ولوحةُ الترويسة بلا غلافٍ أصلاً تحتفظ به كذلك. */
body:not(.kh-inner) .header.has-hero { padding-top: 0; }

/* ─── عمود واحد دائماً: يُبطِل شبكة سطح المكتب التي يبنيها القسم 11 ─── */
@media (min-width: 900px) {
  body {
    display: block;
    max-width: var(--maxw-col);
    padding: 0 1.15rem 4rem;
  }
  /* الغلاف يعود إلى نسبة الهاتف: عمودٌ بعرض 640px لا يحتاج نسبةً سينمائيّة،
     وبها يُقتَطع من الصورة بلا سبب (بند 2.10). */
  /* لا `margin-inline` هنا: القسم 11 صار يحاذي العمود (عطب 2026-08-24)،
     وهذا العمود أضيق فتبقى المحاذاة صحيحة بلا إعادة قيمة. */
  .r-hero { max-height: 46vh; }
  /* 🔴 **إبطالٌ لازم — عطبٌ حقيقيّ أبلغ عنه صاحب المشروع (2026-08-22):**
     «أريد شريط التمرير أفقيّاً مثل الأوّل وليس عموديّاً».
     مادّة `naqsh` تحوّل الشريط على سطح المكتب إلى **قائمة عموديّة لاصقة**
     في حاشية شبكةٍ ذات عمودَين (سطر 795 هناك). وكتلة الهيكل هذه أبطلت
     الشبكة (`display: block`) **ولم تُبطِل** تلك القاعدة ⇒ فبقي الشريط
     عموديّاً بينما المسار أفقيّ: تناقضٌ في اتّجاهَين على شاشة واحدة، ومعه
     يفقد الشريط معناه (هو أداة الانتقال الأفقيّ نفسها).
     ⚠️ والدرس: **نسخُ مادّةٍ يورّث قواعدها البنيويّة أيضاً** — فكل قاعدة
     في `@media` تخصّ شبكة سطح المكتب يجب أن يُبطِلها من ألغى الشبكة.
     القيم أدناه هي قيم الهاتف في `naqsh` حرفاً بحرف (لا اجتهاد). */
  .cat-nav {
    position: sticky;
    top: var(--toggle-band);
    flex-direction: row;
    align-items: center;
    margin-inline: -1.15rem;
    padding: .6rem 1.15rem;
    overflow-x: auto;
    border-radius: 0;
    box-shadow: 0 10px 18px -14px var(--lo);
  }
  .cat-chip { justify-content: center; }
  .cart-drawer { inset-inline: 0 auto; width: min(420px, 94vw); }
}

/* ─── الترويسة في المشاهد الداخليّة: هويّة مختصرة لا بروفايل كامل ─── */
body.kh-inner .r-hero,
body.kh-inner .r-bio,
body.kh-inner .r-metarow { display: none; }
body.kh-inner .r-headwrap {
  padding: .7rem .9rem;
  box-shadow: var(--nm-flat-s);
}
body.kh-inner .r-name { font-size: var(--t-lg); }
body.kh-inner .r-logo { width: 42px; height: 42px; margin: 0 auto .3rem; }

/* ─── صفّ الأفعال السريعة (أربع أيقونات في مرجع الهيكل) ─── */
.kh-quick {
  display: grid;
  /* auto-fit لا 4 ثابتة: مطعمٌ بلا واتساب يعطي ثلاثة أفعال، والعمود
     الرابع الفارغ يُقرأ عطلاً. auto-fit يطوي المسار الفارغ. */
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: .55rem;
  margin: 1.15rem 0 var(--kh-gap);
}
.kh-q {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  /* ≥44px هدف لمس (PRODUCT.md §6) — والحشو هو ما يضمنه لا المقاس المعلَن. */
  min-height: 76px;
  padding: .7rem .35rem;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--nm-out-s);
  color: var(--ink);
  text-decoration: none;
  text-align: center;
}
.kh-q-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 1.05rem;
}
.kh-q-label { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.3; }
.kh-q:hover, .kh-q:focus-visible { box-shadow: var(--nm-in-s); outline: none; }
.kh-q:focus-visible .kh-q-label { color: var(--accent-ink); }

/* ─── الخانة: بطاقة عريضة تُدخَل ─── */
.khanat { display: grid; gap: var(--kh-gap); }
.khana {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  padding: var(--kh-pad);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--nm-flat);
  color: var(--ink);
  text-decoration: none;
  min-height: 68px;
}
/* اللمس يُنقص النتوء (نفس فيزياء naqsh: يقترب من السطح لا يرتفع عنه) */
.khana:hover { box-shadow: var(--nm-flat-s); }
.khana:active { box-shadow: var(--nm-in-s); }
.khana:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.khana-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 1.25rem;
}
.khana-text { display: grid; gap: .16rem; min-width: 0; }
.khana-title {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.35;
}
.khana-note {
  font-size: var(--t-xs);
  color: var(--ink-3);
  /* اسم فئة طويل أو عنوان طويل لا يجوز أن يكسر البطاقة إلى ثلاثة أسطر. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.khana-go { color: var(--ink-3); font-size: 1.15rem; display: grid; place-items: center; }
.khana:hover .khana-go, .khana:focus-visible .khana-go { color: var(--accent-ink); }

/* ─── الخانة الأولى: المنيو بارزاً (بند 2.18 · أمرُ 2026-09-08) ───
   🔴 **الطلبُ بالحرف:** «اريد ان تكون زر المينيو هو الاول قبل صور من مطعمنا
      و ايضا اريده بارز قليلا اعني واضح».
   و«قليلاً» قيدٌ لا تهويناً: بطاقةُ المكافأة تأخذ لوناً ممتلئاً وحدّاً ذهبيّاً،
   فلو أخذ المنيو مثلَها تنافَس فعلان على العين وضاع كلاهما. فالبروزُ هنا
   ثلاثُ درجاتٍ محسوبة — هالةٌ حول البطاقة · أيقونةٌ أكبر بلونٍ ممتلئ ·
   وارتفاعٌ أعلى قليلاً — فتبقى من نفس العائلة ويُرى فوراً أنّها الأولى.
   ⚠️ ولا لونَ مكتوبٌ بالعين: كلُّه مشتقٌّ من `--accent` الذي يحرّره المطعم من
      تبويب الألوان، فمطعمٌ أزرق يأخذ هالةً زرقاء بلا سطرٍ إضافيّ. */
.khana-primary {
  --kh-pri: color-mix(in srgb, var(--accent) 44%, transparent);
  min-height: 80px;
  background: color-mix(in srgb, var(--accent-wash) 58%, var(--surface));
  box-shadow: var(--nm-flat), 0 0 0 3px var(--kh-pri), 0 12px 26px -12px var(--kh-pri);
}
.khana-primary:hover { box-shadow: var(--nm-flat-s), 0 0 0 4px var(--kh-pri), 0 14px 30px -12px var(--kh-pri); }
.khana-primary:active { box-shadow: var(--nm-in-s), 0 0 0 3px var(--kh-pri); }
.khana-primary .khana-icon {
  width: 52px; height: 52px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.45rem;
}
.khana-primary .khana-title { font-size: calc(var(--t-md) * 1.08); }
.khana-primary .khana-go { color: var(--accent-ink); }

/* ─── رأس المشهد الداخليّ ─── */
.kh-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin: 1rem 0 .85rem;
}
.kh-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 40px;
  padding: .4rem .8rem;
  border-radius: 99px;
  background: var(--surface);
  box-shadow: var(--nm-out-s);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-xs);
  font-weight: 600;
}
/* 🔴 **توهّجٌ خلف الزرّ وحده** (طلبك 2026-08-22: «أضف توهّجاً بسيطاً في خلف
   الزرّ فقط») — لا لونَ ممتلئ ولا حجماً أكبر: الزرُّ يبقى هادئاً وتحته هالة
   من لكنة المطعم فيُرى فوراً بلا أن ينافس عنوان المشهد.
   `--kh-back-glow` رمزٌ مستقلّ فيستطيع قالبٌ لاحق تعديل شدّته وحدها. */
.kh-back {
  /* `--backGlow` يكتبه المطعم من تبويب الألوان (بند 3.9)؛ وبلا ضبطٍ يسقط
     إلى لكنته — فالافتراضيّ يبقى كما كان بلا حقلٍ مطلوب. */
  --kh-back-glow: color-mix(in srgb, var(--backGlow, var(--accent)) 55%, transparent);
  position: relative;
  box-shadow: var(--nm-out-s), 0 0 0 4px var(--kh-back-glow), 0 6px 18px -6px var(--kh-back-glow);
}
.kh-back:hover, .kh-back:focus-visible {
  --kh-back-glow: color-mix(in srgb, var(--backGlow, var(--accent)) 78%, transparent);
  color: var(--accent-ink);
  box-shadow: var(--nm-in-s), 0 0 0 5px var(--kh-back-glow), 0 8px 22px -6px var(--kh-back-glow);
  outline: none;
}
@media (prefers-contrast: more) {
  .kh-back { box-shadow: none; outline: 2px solid var(--accent-ink); }
}
/* السهم يشير للخلف = ضدّ اتّجاه الدخول. الصفحة RTL فالرجوع نحو اليمين. */
.kh-back-icon { transform: scaleX(-1); }
.kh-title { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; margin: 0; }

/* الدخول ينزلق قليلاً — إشارةُ تنقّل لا زينة، ومُعطَّلة عند تقليل الحركة. */
@media (prefers-reduced-motion: no-preference) {
  body.kh-inner #menu-zone { animation: kh-slide-in .22s ease-out both; }
  @keyframes kh-slide-in {
    from { transform: translateX(22px); opacity: .55; }
    to   { transform: none; opacity: 1; }
  }
}

/* ─── المعرض ─── */
.kh-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}
@media (min-width: 560px) { .kh-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 🔴 **صارت الصورةُ زرّاً لا `<figure>`** (بند 2.18 · 2026-09-08): المكبّر
   يُفتح منها، وعنصرٌ غيرُ تفاعليّ بمستمعِ نقرٍ لا يُركَّز بـTab ولا يُفتح
   بـEnter ولا يُنطَق دورُه — أي أنّ المعرضَ يصير محجوباً عن لوحة المفاتيح
   وقارئ الشاشة. فإعادةُ تصفير سمات الزرّ إلزاميّةٌ هنا (المتصفّح يضع له
   حدّاً وخطّاً وحشواً)، و`cursor: zoom-in` يقول ما سيحدث **قبل** الضغط.
   ⚠️ وتبدّلت `figcaption` إلى `.kh-shot-cap`: `<figcaption>` لا يجوز داخل
      `<button>` (والمُحدِّدُ القديم صار يصطاد عنصراً لا وجود له). */
.kh-shot {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--nm-in-s);
}
.kh-shot:hover { box-shadow: var(--nm-flat-s); }
.kh-shot:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.kh-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.kh-shot-cap {
  display: block;
  padding: .4rem .55rem .5rem;
  font-size: var(--t-xs);
  color: var(--ink-2);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── الموقع وساعات العمل ─── */
.kh-info { display: grid; gap: .6rem; }
.kh-info-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .7rem;
  padding: .85rem 1rem;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--nm-flat-s);
}
.kh-info-icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.kh-info-text { display: grid; gap: .15rem; }
.kh-info-label { font-size: var(--t-xs); color: var(--ink-3); }
.kh-info-value { font-size: var(--t-sm); line-height: 1.55; }
.kh-maps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: .9rem;
  min-height: 48px;
  padding: .75rem 1rem;
  border-radius: var(--r-md);
  /* لون ممتلئ وحبر معاكس — الفعل يخرج من المادّة (قرار 4 في رأس الملفّ). */
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-sm);
}
.kh-maps:hover { background: var(--accent-2); }
.kh-maps:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* ─── دوائر الشبكات في القاع ─── */
.kh-social { margin: 1.6rem 0 .4rem; text-align: center; }
.kh-social-label {
  display: block;
  margin-bottom: .7rem;
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.kh-circles { display: flex; justify-content: center; gap: .75rem; }
.kh-circle {
  display: grid;
  place-items: center;
  /* 48px: هدف لمس مريح فوق الحدّ الأدنى — وهي آخر ما تُلمَس في الصفحة. */
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--nm-out-s);
  color: var(--ink-2);
  font-size: 1.2rem;
}
.kh-circle:hover, .kh-circle:focus-visible {
  color: var(--accent-ink);
  box-shadow: var(--nm-in-s);
  outline: none;
}

/* ─── مسار الأعمدة: كل فئة عمودٌ بعرض الشاشة، والانتقال أفقيّ ───
   🔴 **هذا هو تصحيح صاحب المشروع (2026-08-21):** «المنيو عبارة عن أعمدة كل
      عمود يمثّل فئة، وشريط التغيير يبقى كما كان، وكل ما يتغيّر هو بدل
      الانتقال العموديّ ينتقل لليسار».
   فالبنية هي بنية الكلاسيكيّة نفسها (شرائح + أقسام + بطاقات) والمتغيّر
      **محور التمرير وحده**. والشريحة تنادي `scrollIntoView({inline:'start'})`
      بدل `{block:'start'}` — سطرٌ واحد في JS، وهذه الكتلة في CSS.

   ⚠️ `scroll-snap-type: x mandatory` إلزاميّ لا زينة: بلا التوقيف يبقى
      الزبون بين عمودَين نصفَين فلا يعرف أين هو. و`overscroll-behavior-x:
      contain` يمنع سحبةً أفقيّة من أن تُشغّل «رجوع» في متصفّح الهاتف —
      وهو عطلٌ حقيقيّ في المسارات الأفقيّة: يخرج الزبون من الموقع بلا قصد. */
.kh-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  /* النعومة من CSS فتحترم `prefers-reduced-motion` تلقائياً (نفس قرار
     الشريط اللاصق في القشرة الكلاسيكيّة). */
  scroll-behavior: smooth;
  align-items: start;
  /* شريط التمرير الأفقيّ يُخفى: الشرائح هي أداة التنقّل المعلَنة، وشريطٌ
     ثانٍ تحتها يُربك. والتمرير باللمس/العجلة يبقى يعمل كما هو. */
  scrollbar-width: none;
  gap: 0;
}
.kh-track::-webkit-scrollbar { display: none; }
.kh-track > .cat {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  /* حشوٌ رقيق كي لا تُقصّ ظلال البطاقات عند حافّة العمود. */
  padding-inline: 3px;
}
/* البطاقات داخل العمود تبقى صفّاً واحداً مهما اتّسعت الشاشة: العمود بعرض
   الشاشة، فعمودان من البطاقات داخله يُلغيان معنى «عمود لكل فئة». */
.kh-track .cat-dishes { grid-template-columns: minmax(0, 1fr); }

/* ─── الخريطة المدمجة (بطلبك الصريح «مثل موعد») ─── */
.kh-map-wrap {
  margin-top: .9rem;
  border-radius: var(--r-md);
  overflow: hidden;
  /* محفورة في السطح كبقيّة الأسطح الغائرة في هذه المادّة. */
  box-shadow: var(--nm-in);
  background: var(--surface-2);
}
.kh-map {
  display: block;
  width: 100%;
  /* نسبة لا ارتفاع ثابت: 4:3 يعطي سياقاً كافياً على الهاتف بلا أن يأكل
     الشاشة، ويتمدّد مع العمود على المقاسات الأكبر. */
  aspect-ratio: 4 / 3;
  max-height: 52vh;
  border: 0;
}

/* ─── حلقة المكافأة (بند 2.12) ───
   بطاقة العرض **أبرز عنصر في الواجهة**: لون ممتلئ وحبر معاكس، لا سطح غائر —
   فهي الفعل الذي يريده المطعم من الزيارة (نفس منطق «الفعل يخرج من المادّة»
   في رأس هذا الملفّ، ونفس ما يفعله بروشور Aissart بأكبر بطاقة فيه). */
.kh-reward {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  margin-top: 1.15rem;
  padding: 1.1rem var(--kh-pad);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  /* حدٌّ ذهبيّ رقيق: تمييزٌ بالحدّ لا بالنصّ (الذهبيّ لا يبلغ 4.5:1 كحبر). */
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 70%, transparent),
              6px 6px 16px -6px var(--lo);
}
.kh-reward:hover { background: var(--accent-2); }
.kh-reward:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.kh-reward-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 30%, transparent);
  font-size: 1.4rem;
}
.kh-reward-text { display: grid; gap: .2rem; min-width: 0; }
.kh-reward-title {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 800;
  line-height: 1.35;
}
.kh-reward-offer {
  font-size: var(--t-sm);
  font-weight: 700;
  color: color-mix(in srgb, var(--gold) 78%, var(--on-accent));
}
.kh-reward .khana-go { color: var(--on-accent); }

/* شارة العرض داخل المشهد */
.kh-offer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 70%, transparent);
}
.kh-offer-icon { font-size: 1.5rem; }
.kh-offer-text { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 800; }

/* الخطوات: رقمٌ لاتينيّ + رابط خارجيّ. لا نموذج ولا حقل (حدّ PII). */
.kh-steps {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
  counter-reset: none;
}
.kh-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: center; }
.kh-step-num {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--nm-out-s);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}
.kh-step-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  min-height: 60px;
  padding: .75rem .95rem;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--nm-flat-s);
  color: var(--ink);
  text-decoration: none;
}
.kh-step-link:hover { box-shadow: var(--nm-in-s); }
.kh-step-link:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.kh-step-icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.kh-step-text { display: grid; gap: .12rem; min-width: 0; }
.kh-step-label { font-size: var(--t-sm); font-weight: 700; }
.kh-step-note { font-size: var(--t-xs); color: var(--ink-3); }

/* كيف تأخذ المكافأة — النادل هو التحقّق، فلا رمز مولَّد يوهم بما لا نملكه. */
.kh-claim {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: var(--nm-in-s);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.kh-claim-icon { color: var(--ok); font-size: 1.1rem; flex: none; }

/* شريط الثقة — كل عبارة فيه صادقة عندنا فعلاً (لا بيانات · خطوة واحدة · فوريّ) */
.kh-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  margin-top: 1.1rem;
  color: var(--ink-3);
  font-size: var(--t-xs);
}
.kh-trust-item { display: inline-flex; align-items: center; gap: .3rem; }

/* ─── تباين أعلى: الظلّ وحده لا يفصل (PRODUCT.md §6) ─── */
@media (prefers-contrast: more) {
  .khana, .kh-q, .kh-info-row, .kh-back, .kh-circle, .kh-map-wrap,
  .kh-step-link, .kh-step-num, .kh-claim, .kh-shot, .foot-cta {
    box-shadow: none;
    outline: 1px solid var(--ink-2);
  }
}

/* ════════════════════════════════════════════════
    مكبّر الصور — الطبقة (بند 2.18 · أمرُ 2026-09-08)
   ------------------------------------------------
   🔴 **الطلبُ بالحرف:** «في الصور من مطعمنا اريد عند الضغط على صورة تكبر و
      تملا الصفحة تقريبا».

   ⚠️ **z-index 60 رقمٌ محسوبٌ لا مرتفعٌ عشوائيّ:** السلّمُ في `style.css` هو
      شريطُ الفئات 20 · زرُّ السلّة 25 · زرّا اللغة والوضع 30 · الطبقةُ
      المعتمة 40 · درجُ السلّة 45. فمكبّرٌ بأقلَّ من ذلك يعني **زرَّ سلّةٍ
      عائماً فوق صورةٍ مكبّرة** — وهو ما يُرى في هاتفٍ لا في محرّرٍ.
   ⚠️ **وأسودُ الطبقة مكتوبٌ صريحاً لا من رموز المادّة، وهذا مقصود:** المشهدُ
      هو الصورة، وسطحُ المادّة الفاتح حولها يزاحمها ويُفسد قراءةَ ألوان
      الطعام. فالحاجزُ الداكن صحيحٌ في الوضعين الفاتح والداكن معاً.
   ⚠️ **و`object-fit: contain` لا `cover`:** «تملأ الصفحة» تعني أكبرَ حجمٍ
      ممكن، لا قصّاً — وقصُّ صورةِ طبقٍ لتملأ المستطيل يحذف نصفَ الطبق،
      وهو بالضبط ما فُتح المكبّرُ لأجله.
   ════════════════════════════════════════════════ */
body.lb-open { overflow: hidden; }
.lb {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: .55rem;
  padding: max(.6rem, env(safe-area-inset-top)) .7rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(12, 10, 9, .93);
  overscroll-behavior: contain;
}
.lb:focus { outline: none; }
.lb-close {
  justify-self: end;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  font-size: 1.15rem;
}
.lb-close:hover { background: rgba(255, 255, 255, .26); }
.lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-figure {
  margin: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: .5rem;
  place-items: center;
}
.lb-img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
}
.lb-cap {
  color: rgba(255, 255, 255, .92);
  font-size: var(--t-sm);
  line-height: 1.5;
  text-align: center;
}
.lb-bar { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.lb-nav {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  font-size: 1.3rem;
}
.lb-nav:hover { background: rgba(255, 255, 255, .26); }
.lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-count {
  color: rgba(255, 255, 255, .85);
  font-size: var(--t-xs);
  /* أرقامٌ جدوليّة: بلا هذا يرقص العدّادُ عند كل تنقّل («1 من 9» ← «10 من 9»). */
  font-variant-numeric: tabular-nums;
  min-width: 6ch;
  text-align: center;
}
/* السهمُ في السبرايت يشير **يساراً** (الصفحةُ RTL فاليسارُ «إلى الأمام»).
   فـ«السابق» في العربية يشير يميناً ⇒ يُقلَب؛ وفي اللاتينيّة العكسُ تماماً.
   والقلبُ في CSS لا في المنطق: `lb-prev/lb-next` تبقى دلالةً واحدة. */
.lb-chev-prev { transform: scaleX(-1); }
[dir="ltr"] .lb-chev-prev { transform: none; }
[dir="ltr"] .lb-chev-next { transform: scaleX(-1); }
@media (prefers-reduced-motion: no-preference) {
  .lb { animation: lb-in .18s ease-out both; }
  @keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
}

/* ════════════════════════════════════════════════
    زرُّ القاع الذي يملكه المالك (بند 2.18)
   ------------------------------------------------
   🔴 «اريد في اسفل الموقع بدل كلمة مدعوم من goustenu يكون في زر اخر وذلك
      الزر اتحكم في نصه و رابطه و اخفائه من لوحة المالك».
   ويبقى هادئاً بمادّة القشرة (سطحٌ ناتئ) لا بلونٍ ممتلئ: هذا آخرُ شيءٍ في
   الصفحة ولا يجوز أن ينافس زرَّ الطلب. و44px حدُّ اللمس (`PRODUCT.md §5`).
   ════════════════════════════════════════════════ */
.foot-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  padding: .55rem 1.25rem;
  border-radius: 99px;
  background: var(--surface);
  box-shadow: var(--nm-out-s);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-xs);
  font-weight: 700;
}
.foot-cta:hover { box-shadow: var(--nm-in-s); color: var(--accent-ink); }
.foot-cta:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
/* نصٌّ بلا رابط: المالكُ كتب نصّاً ولم يضع رابطاً (أو وضع رابطاً مرفوضاً) —
   فيُعرَض نصّاً لا زرّاً يوهم بأنّه يُضغَط. */
.foot-note { color: var(--ink-3); font-size: var(--t-xs); }

/* ▲▲▲ نهاية مضمار «خانات» المولَّد ▲▲▲ */