/* ════════════════════════════════════════════════════════════════
   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);
  /* ─── مقاسُ النصّ ───
     كان يُستهلَك بلا تعريف: `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); }

/* أيقونة السلّة أكبر قليلاً من `.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); }
.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); }

/* ─── عمود واحد دائماً: يُبطِل شبكة سطح المكتب التي يبنيها القسم 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-out-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-out);
  color: var(--ink);
  text-decoration: none;
  min-height: 68px;
}
/* اللمس يُنقص النتوء (نفس فيزياء naqsh: يقترب من السطح لا يرتفع عنه) */
.khana:hover { box-shadow: var(--nm-out-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); }

/* ─── رأس المشهد الداخليّ ─── */
.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)); } }
.kh-shot {
  margin: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--nm-in-s);
}
.kh-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.kh-shot figcaption {
  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-out-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-out-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 {
    box-shadow: none;
    outline: 1px solid var(--ink-2);
  }
}

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