/* ===== تخطيط "تبويبات + بحث" — ملف اختياري لكل عميل =====
   يُحمَّل فقط عند theme.json ← features.menu_layout === "tabs" (انظر server.js).
   عند غياب الخيار لا يصل هذا الملف للصفحة إطلاقاً، فيبقى التخطيط الحالي حرفياً.
   كل الألوان من متغيرات --brand-* الموجودة (مع نفس fallbacks المستخدمة في
   base.css) — لا ألوان ثابتة جديدة. */

/* عمود واحد متوسّط بعرض أقصى ~560px على أي شاشة — لا تخطيط منفصل للديسكتوب.
   (منطق إخفاء أزرار الشراء على اللابتوب مستقل عن هذا تماماً: يحصل في
   server.js عبر detectIsMobile ولم يُمسّ.) */
.menu {
  max-width: 560px;
  margin-inline: auto;
}

/* ---------- الترويسة (تخطيط tabs فقط) ----------
   مساران حسب الغلاف (التصنيف في menu-tabs.js):
   - غلاف حقيقي: ترويسة غنية — غلاف 96–110px + شعار دائري متداخل + الاسم
     وtagline فوق تدرّج + أزرار اللغة بزاوية الغلاف، بسقف إجمالي ≤150px.
   - بلا غلاف حقيقي: شريط علوي ≤52px + (شريط tagline رفيع ≤26px) كما كان —
     لا تغيير على هذا المسار إطلاقاً. */
.header {
  /* containing block للشريط الرفيع أدناه — بلا هذا (الإصلاح ج) يكون
     موضعه المطلق نسبةً لأقرب جد مُوضَّع أعلى (قد يكون body)، فيخطئ موقعه. */
  position: relative;
  padding: 8px 12px;
  gap: 8px;
}
.header img.logo { width: 32px; height: 32px; }
.header h1 { font-size: 0.95rem; }
.lang-switch button { padding: 3px 8px; font-size: 0.7rem; }

/* شريط الشعار النصي الرفيع — يُبنى فقط عبر JS، فقط حين لا يوجد غلاف حقيقي
   (menu-tabs-hero-hidden) وكان نص tagline غير فارغ. تباين واضح من نفس
   متغيرات --brand-* الحالية (لا ألوان ثابتة جديدة)، ونص واحد بلا التفاف —
   overflow: hidden هنا مقصود (تقصير نص طويل جداً بـ ellipsis)، بخلاف overlay
   الغلاف أدناه الذي يُسمح له بالنمو كي لا يُقصّ أبداً.
   position: absolute (الإصلاح ج): الشريط الحقيقي يُدرَج بـ JS ابناً لـ
   .header (لا شقيقاً — top:100% يُحسَب نسبةً لأقرب جدّ مُوضَّع، و.header
   ليس كذلك إلا لأبنائه). لو بقي الشريط في التدفق الطبيعي لدفع .menu للأسفل
   بارتفاعه (~26px) عند إدراجه، فوق حجز .menu الداخلي (padding-top) المحسوب
   أصلاً لهذا الارتفاع نفسه — حجز مضاعف يُسبّب قفزة CLS حقيقية (قيس هنا
   ≈0.027 على Chromium 141؛ البلاغ الأصلي ≈0.094 على بيئة أخرى، غير قابل
   لإعادة إنتاجه هنا بنفس الدقة). بالمطلق هنا، الشريط يطفو داخل حجز .menu
   المُسبَق (132px أدناه) بلا أي مساهمة في التخطيط عند إدراجه — إدراجه أو
   تغيير محتواه لا يحرّك أي عنصر آخر إطلاقاً مهما كان ارتفاع نصه الفعلي. */
.menu-tabs-tagline-strip {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: 59; /* تحت شريط البحث الثابت (60) وفوق محتوى .menu العادي */
  background: var(--brand-secondary, #F4E9DC);
  color: var(--brand-primary, #8B2E2E);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  padding: 4px 12px;
  max-height: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* قرار "غلاف حقيقي أم لا" يُحاكى هنا من أول رسم بلا انتظار JS (يمنع قفزة
   CLS على الشبكات البطيئة).
   ⚠️ ارتباط صريح بـ menu-tabs.js: extractHeroUrl/isPlaceholderHeroUrl هناك
   والـ attribute selectors هنا وجهان لقرار واحد على attribute الـ style
   نفسه — أي تعديل على أحدهما يجب أن يطابق الآخر. الصيغ المغطاة في
   الجانبين: url('…') وurl("…") وurl(…) بلا اقتباس، والفارغ بصيغه الثلاث،
   وأي مسار يحوي /icons/placeholder-. اختلاف الجانبين = قفزة CLS أو إخفاء
   خاطئ — تغطيه سيناريوهات q-* وempty في مصفوفة القياس. */

/* غلاف حقيقي: أبعاد الترويسة الغنية النهائية من أول رسم. الارتفاع 104px +
   هامش سفلي 30px يستوعب بروز الشعار (28px) فيبقى المجموع ~134px ≤ 150px،
   ولا يصطدم الشعار بشريط الأقسام. z-index أعلى من الشريط الثابت (60) حتى
   لا يغطّي بروزَ الشعار. */
.hero {
  position: relative;
  max-height: none;
  height: 104px;
  margin-bottom: 30px;
  z-index: 61;
}

/* بلا غلاف حقيقي (placeholder أو فارغ بأي صيغة اقتباس): مخفي من أول رسم —
   شريط tagline أعلاه يحل مكانه إن وُجد نص. */
.hero[style*="/icons/placeholder-"],
.hero[style*="url('')"],
.hero[style*='url("")'],
.hero[style*="url()"] {
  display: none;
}
/* إخفاء الصنف (يضيفه JS) يبقى تأكيداً وغطاءً لأي صيغة لم تطابقها الـ
   selectors أعلاه. */
.hero.menu-tabs-hero-hidden { display: none; }

/* القياس بـ menu-tabs.js: تجاوز المجموع 150px فعلياً على هذا الجهاز/الخط —
   يُخفَض الغلاف إلى 88px (خط دفاع؛ لا يُفعَّل مع الأبعاد الحالية). */
.hero.menu-tabs-hero-tight { height: 88px; }

/* غلاف حقيقي: ترويسة غنية (تُبنى بـ menu-tabs.js — يُنقل الشعار والاسم
   وأزرار اللغة إلى داخل/تحت الغلاف). الأبعاد النهائية محجوزة أعلاه من أول
   رسم، وصنف menu-tabs-hero-rich يبقى علامة حالة يعتمدها القياس.
   ::before: تعتيم علوي خفيف مستقل لأزرار اللغة فقط (تعتيم الاسم/tagline
   مرتبط بكتلة النص نفسها — انظر .menu-tabs-rich-text أدناه).
   استثناء موثّق من قاعدة "الألوان من --brand-* فقط": rgba(0,0,0,…) ثابت
   دائماً، لأن النص فوقه أبيض ثابت فيجب أن يبقى التعتيم داكناً مهما كانت
   لوحة الألوان (لوحة غامقة تجعل --brand-text فاتحاً فينقلب "التغميق"
   تفتيحاً)، ومهما كان الغلاف نفسه فاتحاً. نص الترويسة أبيض فوق التعتيم —
   نفس نمط .hero span في base.css (أبيض فوق تغميق)، فهو امتداد لاتفاقية
   موجودة لا لون ثابت جديد. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0) 34%);
}

/* الترويسة الأصلية في وضع الغلاف تُفرَّغ (يُنقل محتواها للغلاف) فتُخفى —
   مبكراً عبر :has (تحسين تدريجي: بلا دعم :has تُخفى عند وصول menu-tabs.js
   بقفزة بسيطة على المتصفحات القديمة فقط — الشكل يبقى صحيحاً في الحالتين).
   لا تُحذف من DOM. نفس سلسلة الـ selectors المرتبطة بـ menu-tabs.js أعلاه. */
body:has(> .hero:not([style*="/icons/placeholder-"]):not([style*="url('')"]):not([style*='url("")']):not([style*="url()"])) > .header {
  display: none;
}
.menu-tabs-header-absorbed { display: none; }

/* أزرار اللغة فوق زاوية الغلاف (منطقياً: تنعكس تلقائياً في LTR) */
.hero.menu-tabs-hero-rich .lang-switch {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 2;
  margin-inline-start: 0; /* يلغي دفع base.css التلقائي داخل .header */
}

/* صف الهوية أسفل الغلاف: الشعار متداخلاً مع الحافة السفلية + الاسم وtagline */
.menu-tabs-rich-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  padding: 0 12px;
  /* التعتيم هنا، على الصف نفسه، لا على .menu-tabs-rich-text: الصف يمتد
     بعرض الغلاف الكامل (حدوده = حدود .hero) بينما كتلة النص flex:1 تتوقف
     عند مساحتها المخصّصة في الصف فقط — فتعتيم مربوط بها وحدها كان يترك
     جزءاً من الغلاف مكشوفاً خلف الشعار وحتى الحافة. هنا يمتد خلف الشعار
     وتحته أيضاً (الشعار فوقه بصرياً عبر transform فلا يتأثر). الارتفاع
     يتبع تلقائياً أطول عنصر في الصف (الشعار الثابت 56px أو كتلة النص
     الأطول غالباً مع سطرين) — بلا أي JS أو نسبة هشة من ارتفاع الغلاف، نفس
     مبدأ الربط بكتلة المحتوى لا بـ.hero الذي كان مطبَّقاً هنا من قبل.
     استثناء rgba(0,0,0,…) الثابت موثّق كما كان: النص فوقه أبيض ثابت دائماً. */
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.62) 14px, rgba(0,0,0,0.78));
}
.hero.menu-tabs-hero-rich img.logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--brand-bg, #FAF7F2);
  transform: translateY(28px); /* نصفه تحت حافة الغلاف — الهامش 30px يستوعبه */
  flex-shrink: 0;
}
/* التعتيم الحاكم أصبح على .menu-tabs-rich-row (أعلاه). الحشو الأفقي هنا
   صفر عمداً: حشو الصف (12px) هو ما يُبعد النص عن حافة الغلاف الآن، فلا
   يتغيّر موضع الاسم أفقياً عمّا كان عليه قبل هذا التعديل (كان صفراً صافياً
   + هامشاً سالباً يلغيانه إلى نفس الأثر). عرض h1 المتاح للالتفاف (300px)
   يبقى كما كان بالضبط فلا يتغيّر عدد أسطره ولا تفعيل tight. التباين
   الحاكم مقاس بعينة بكسل فوق غلاف أبيض صافٍ: ≥4.5:1 للاسم و≥3:1 لـ tagline. */
.menu-tabs-rich-text {
  min-width: 0;
  flex: 1;
  padding: 14px 0 6px;
}
.menu-tabs-rich-text h1 {
  margin: 0;
  font-size: 1.05rem;
  /* صريح بدل الاعتماد على line-height الموروث من base.css — القياس على
     Edge 154/ويندوز (غير قابل لإعادة الإنتاج هنا) أظهر h1 بثلاثة أسطر
     بدل اثنين، فيعلو الاسم تدرّج التعتيم ويفشل التباين. غير مُتحقَّق أن
     هذا السطر وحده يكفي هناك — فقط أنه لا يُحدث تراجعاً على Chromium 141. */
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  /* يلتف حتى سطرين ثم يُقصّ بـ ellipsis — الكتلة (وتدرّجها) تنمو معه
     للأعلى لأنها مثبتة بقاع الغلاف. بلا دعم line-clamp يلتف بلا قصّ
     والتدرّج يغطيه أيضاً. الاسم الكامل يبقى متاحاً عبر title (menu-tabs.js).
     display: -webkit-box إلزامي لعمل -webkit-line-clamp (لا يعملان بلا
     بعضهما) فلا يجوز استبداله بأي display آخر على نفس العنصر. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2; /* القياسي؛ يُتجاهَل بأمان في المتصفحات التي لا تدعمه بعد */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* (الإصلاح د) خط كبير + اسم يلتف سطرين يصطدم بأزرار اللغة — menu-tabs.js
   يقيس التداخل الفعلي بعد الرسم ويضيف هذا الصنف عندها فقط (لا عند كل خط
   كبير بلا تمييز). يُقصّ لسطر واحد كمقايضة واعية: نص أقل مقابل عدم تداخل.
   القياس أثبت margin-top على .menu-tabs-rich-text بلا أثر هنا (تثبيت سفلي
   مزدوج بـalign-items:flex-end على .hero وعلى .menu-tabs-rich-row يُلغي أي
   هامش علوي) — راجع التعليق في menu-tabs.js لتفاصيل القياس. */
.hero.menu-tabs-hero-name-1line .menu-tabs-rich-text h1 {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
/* tagline: يبقى داخل .hero لكن بلا شريطه الأسود — تدرّج الكتلة يحل محله */
.hero.menu-tabs-hero-rich .menu-tabs-rich-text span {
  background: none;
  padding: 0;
  width: auto;
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  color: #fff;
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- الشريط الثابت: بحث + chips الأقسام ----------
   الشريط يُبنى بـ menu-tabs.js، فمكانه (94px مقاسة بخط 16px) محجوز من أول
   رسم عبر padding-top على .menu وهامش سالب يسحبه للمحجوز — بلا هذا يدفع
   بناؤُه المتأخر (شبكة بطيئة) كل المحتوى للأسفل (مصدر CLS الرئيس). 106 =
   12 (padding الـ .menu في base.css) + 94. بخط أكبر (زوم 20px) يزيد
   الفعلي قليلاً — الفرق مقاس في المصفوفة وبقاياه تحت العتبة. */
.menu { padding-top: 106px; }
/* وضع placeholder/الفارغ مع tagline فعلي (الإصلاح ج): يُضاف 26px لشريط
   tagline الرفيع فوق الشريط الثابت. الشرط الآن CSS خالص بالكامل — بلا أي
   اعتماد على JS أو تصحيح لاحق: span داخل .hero (موجود دائماً في index.html
   بلا تعديل) يكون :empty حرفياً حين theme.tagline فارغ، فـ:not(:empty)
   يميّز الحالتين من أول رسم بنفس الموثوقية التي كان يعتمد عليها JS سابقاً،
   بلا أي قفزة تصحيحية بعد وصوله. تحسين تدريجي: بلا دعم :has يبقى .menu عند
   106px حتى وصول JS، فيُصحَّح حينها (سطر الدفاع في menu-tabs.js) — شكل
   صحيح في الحالتين، فرق فقط في توقيت الحجز على المتصفحات القديمة. */
body:has(> .hero[style*="/icons/placeholder-"] > span:not(:empty)) > .menu,
body:has(> .hero[style*="url('')"] > span:not(:empty)) > .menu,
body:has(> .hero[style*='url("")'] > span:not(:empty)) > .menu,
body:has(> .hero[style*="url()"] > span:not(:empty)) > .menu { padding-top: 132px; }
.menu-tabs-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--brand-bg, #FAF7F2);
  padding-block: 8px 6px;
  /* يمتد بكامل عرض عمود المنيو رغم padding الـ .menu في base.css */
  margin-inline: -12px;
  padding-inline: 12px;
  /* يسكن المكان المحجوز أعلاه بدل دفع المحتوى */
  margin-top: -94px;
}

/* ---------- حقل البحث الفوري ---------- */
.menu-tabs-search {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  padding: 9px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  border: 2px solid var(--brand-secondary, #F4E9DC);
  background: var(--brand-bg, #FAF7F2);
  color: var(--brand-text, #222);
}
.menu-tabs-search:focus {
  outline: none;
  border-color: var(--brand-primary, #8B2E2E);
}

/* ---------- chips الأقسام (تمرير أفقي بدون scrollbar ظاهر) ---------- */
.menu-tabs-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.menu-tabs-chips::-webkit-scrollbar { display: none; }

.menu-tab-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid var(--brand-primary, #8B2E2E);
  background: transparent;
  color: var(--brand-primary, #8B2E2E);
  cursor: pointer;
  white-space: nowrap;
}
.menu-tab-chip .chip-count {
  font-size: 0.75rem;
  opacity: 0.8;
}
.menu-tab-chip.active {
  background: var(--brand-primary, #8B2E2E);
  color: var(--brand-bg, #FAF7F2);
}

/* ---------- الفلترة: إخفاء الأصناف والأقسام والـ chips غير المطابقة ---------- */
.menu-card.tabs-hidden,
.menu-category.tabs-hidden,
.menu-tab-chip.tabs-hidden { display: none; }

.menu-tabs-no-results {
  text-align: center;
  padding: 24px 12px;
  opacity: 0.7;
}

/* ---------- بطاقة مضغوطة + نافذة تفاصيل ----------
   .reviews-section الأصلية (اسم القسم من base.css) تبقى في الـDOM كما رسمها
   السيرفر بلا أي تعديل — reviews.js يستمر يُحدّثها بشكل طبيعي، هي فقط تُخفى
   بصرياً هنا؛ نافذة التفاصيل (تُبنى بـmenu-tabs.js) وسطر الملخص أدناه
   "مرآة" تُقرآن منها، لا مصدر بيانات منفصل. */
.menu-card { cursor: pointer; }
.menu-card img { width: 48px; height: 48px; }
.menu-card .desc,
.menu-card .reviews-section { display: none; }

/* حجز سطر الملخص ♥★ (يُبنى بـ menu-tabs.js داخل .info) من أول رسم — بلاه
   تنمو كل بطاقة ~19px عند وصول JS (مصدر CLS الثالث). ::after يحجز نفس
   الارتفاع، ويُخفى حين يوجد السطر الحقيقي (بلا دعم :has يبقى فراغ صغير
   أسفل البطاقة — تحسين تدريجي، الشكل يبقى صحيحاً). */
.menu-card .info::after {
  content: '';
  display: block;
  height: 16px;
  margin-top: 3px;
}
.menu-card .info:has(.menu-tabs-card-summary)::after { display: none; }

/* سطر ♥★ الملخص بالبطاقة: ≥13px وبلا opacity مخفِّض — التباين ≥4.5:1 مع
   خلفية البطاقة (يقاس من getComputedStyle في كل لوحة). الأيقونات أكبر قليلاً
   وبلون مشتق: السطر الأول fallback ثابت (--brand-text) لمن لا يدعم color-mix،
   والثاني يمزج primary نحو لون النص فيبقى داكناً كفاية على البطاقة البيضاء
   في اللوحتين (أحمر الشام والذهبي الغامق كلاهما ≥5.8:1 مقاساً). */
.menu-tabs-card-summary {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-text, #222);
  margin-top: 3px;
}
.menu-tabs-sum-icon {
  color: var(--brand-text, #222);
  color: color-mix(in srgb, var(--brand-primary, #8B2E2E) 45%, var(--brand-text, #222));
  font-size: 14px;
  line-height: 1;
}
.menu-tabs-sum-sep { opacity: 0.55; }

/* ---------- نافذة تفاصيل الصنف ----------
   عناصر .reviews-summary / .like-btn / .heart-icon / .review-form /
   .star-input / .reviews-list أدناه هي أصناف base.css الموجودة أصلاً
   (مُعرَّفة بلا ربط بـ.reviews-section) — إعادة استخدامها هنا على عناصر
   جديدة تعطي المظهر البصري نفسه بلا أي CSS مكرَّر. */
.menu-tabs-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.menu-tabs-detail-modal[hidden] { display: none; }

.menu-tabs-detail-box {
  background: var(--brand-bg, #fff);
  color: var(--brand-text, #222);
  font-family: var(--brand-font, sans-serif);
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 12px;
  padding: 16px;
  position: relative;
}

.menu-tabs-detail-close {
  position: absolute;
  top: 8px;
  /* منطقي لا فعلي — يبقى بالزاوية الصحيحة بلا شرط dir صريح، في RTL وLTR */
  inset-inline-end: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--brand-secondary, #F4E9DC);
  color: var(--brand-text, #222);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.menu-tabs-detail-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
  background: var(--brand-secondary, #F4E9DC);
}

.menu-tabs-detail-name { font-size: 1.15rem; font-weight: 700; }
.menu-tabs-detail-price { color: var(--brand-primary, #8B2E2E); font-weight: 700; margin: 4px 0; }
.menu-tabs-detail-desc { font-size: 0.9rem; opacity: 0.85; margin-bottom: 10px; }

.menu-tabs-detail-write-title { font-size: 0.95rem; font-weight: 700; margin-top: 10px; }
.menu-tabs-detail-list-title { font-size: 0.95rem; font-weight: 700; margin-top: 14px; }

/* قفل تمرير الخلفية أثناء فتح النافذة — يُضاف/يُزال عبر menu-tabs.js فقط. */
body.menu-tabs-modal-open { overflow: hidden; }

/* ---------- الشاشات الكبيرة (≥768px): عرض أوسع + عمودان ----------
   أقل من 768px يبقى عموداً واحداً كما هو حرفياً. الشريط الثابت يتبع عرض
   الحاوية تلقائياً (margin-inline: -12px الحالية مقاسة على padding الـ .menu
   الثابت 12px). البطاقة الأخيرة الفردية في أي قسم تحتل عموداً واحداً فقط —
   لا تمدد. منطق إخفاء أزرار الشراء على اللابتوب (server.js) مستقل عن هذا. */
@media (min-width: 768px) {
  .menu { max-width: 880px; }
  .category-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  /* gap الشبكة يحل محل هامش البطاقة السفلي داخل الأقسام */
  .category-items .menu-card { margin-bottom: 0; }
}

/* ---------- سلة الطلب على الجوال (ordering مفعّل) ----------
   واجهة فقط — لا تغيير على DOM ولا على index.js/cart-store.js. تُطبَّق على
   عناصر base.css الموجودة (.qty-stepper / .cart-bar)، ومحصورة بتخطيط tabs لأن
   هذا الملف لا يُحمَّل إلا له. على اللابتوب لا يرسم السيرفر هذه العناصر أصلاً. */
.qty-stepper {
  align-self: center; /* بدون هذا تتمدد الحبّة بطول البطاقة (flex stretch) */
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--brand-secondary, #F4E9DC);
}
.qty-btn {
  width: 32px;
  height: 32px;
  font-size: 1.15rem;
  border: none;
  background: transparent;
  color: var(--brand-primary, #8B2E2E);
}
.qty-btn.plus {
  background: var(--brand-primary, #8B2E2E);
  color: #fff;
}
.qty-btn:active { transform: scale(0.94); }
.qty-value { min-width: 22px; font-size: 0.95rem; }

/* شريط السلة: بطاقة عائمة مستديرة بدل شريط ملتصق بحافة الشاشة. */
.bottom-bar.cart-bar {
  left: 12px;
  right: 12px;
  bottom: max(10px, env(safe-area-inset-bottom));
  padding: 10px 10px 10px 12px;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.cart-bar .cart-summary { font-size: 0.95rem; }
.cart-bar .btn-cta { padding: 12px 24px; border-radius: 12px; }
/* مساحة سفلية تكفي الشريط العائم (كانت 70px للشريط الملتصق). */
body:has(> .bottom-bar.cart-bar) { padding-bottom: 96px; }