/* =============================================================================
   design-system.css — طبقة التصميم التجاري لواجهة المتجر
   تُحمَّل بعد styles.css و premium-polish.css و product-card-calm.css.

   للتراجع: احذف سطر <link> الخاص بهذا الملف من index.html. لا شيء آخر يتغيّر.

   لماذا --ds-* ولماذا !important أحياناً:
   الملفات القديمة فيها ثلاث كتل :root متضاربة تُعيد تعريف --bg و --text و
   --surface و --radius، وآخرها يفوز ويحمل ألوان قالب أجنبي (أزرق/بنفسجي).
   لذلك لا نلمس أسماءها إطلاقاً — نعرّف مساحة أسماء خاصة بادئتها --ds-.
   وحيث تحارب قاعدة قديمة بـ!important، نستخدم !important هنا أيضاً مع تعليق
   يسمّي الملف الذي نحاربه. هذا دَين واعٍ يزول عند تنظيف الملفات القديمة.
   ========================================================================== */

/* ── الخط: Cairo متغيّر، مستضاف محلياً ─────────────────────────────────────
   لا نطلبه من Google: الشبكات المستهدَفة غير موثوقة، والاستضافة المحلية
   تعمل بلا إنترنت عبر الـService Worker. ملف واحد لكل نطاق يغطي كل الأوزان. */
@font-face {
  font-family: "CairoLocal";
  src: url("/assets/fonts/cairo-arabic.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF,
                 U+200C-200E, U+2010-2011, U+204F, U+2E41;
}
@font-face {
  font-family: "CairoLocal";
  src: url("/assets/fonts/cairo-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212;
}

:root {
  /* لوحة مشتقّة من البضاعة نفسها: زيتون، زعفران، سمّاق */
  --ds-canvas: #f4f6f3;
  --ds-surface: #ffffff;
  --ds-surface-sunk: #eef1ed;

  --ds-ink: #16211a;
  --ds-ink-soft: #5c6b60;
  --ds-ink-faint: #8b978f;
  --ds-line: #e3e8e2;
  --ds-line-strong: #d2dad1;

  --ds-brand: #1f8f43;
  --ds-brand-deep: #14672f;
  --ds-brand-wash: #eaf5ed;

  --ds-saffron: #d98a0b;
  --ds-saffron-wash: #fdf3e0;
  --ds-sumac: #a8322a;

  /* مقياس مسافات أساسه 4px */
  --ds-1: 4px;   --ds-2: 8px;   --ds-3: 12px;  --ds-4: 16px;
  --ds-5: 20px;  --ds-6: 24px;  --ds-8: 32px;  --ds-10: 40px;

  --ds-r-card: 14px;
  --ds-r-control: 10px;
  --ds-r-pill: 999px;

  --ds-shadow-card: 0 1px 2px rgba(22, 33, 26, 0.05), 0 8px 24px -14px rgba(22, 33, 26, 0.2);
  --ds-shadow-raised: 0 2px 4px rgba(22, 33, 26, 0.06), 0 18px 36px -18px rgba(22, 33, 26, 0.28);

  --ds-page: 1280px;
  --ds-gutter: clamp(16px, 4vw, 32px);
}

/* ── الأساس ─────────────────────────────────────────────────────────────── */

body {
  font-family: "CairoLocal", "Segoe UI", Tahoma, sans-serif;
  background: var(--ds-canvas);
  color: var(--ds-ink);
  -webkit-font-smoothing: antialiased;
}

/* الأرقام في شبكة الأسعار يجب أن تصطفّ عمودياً حتى تُقارَن بنظرة واحدة */
.product-price,
.price,
.product-price-hero {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── إصلاح: التجاوز الأفقي ───────────────────────────────────────────────
   .hero-bleed كان width:100vw مع margin سالب. و100vw يشمل عرض شريط التمرير،
   فينتج 8px تمرير أفقي للصفحة كلها. النسبة المئوية لا تشمله. */
.hero.hero-bleed {
  width: 100% !important;      /* يحارب: styles.css .hero-bleed{width:100vw} */
  margin-inline: 0 !important;
  max-width: 100%;
}

html,
body {
  overflow-x: clip;            /* حزام أمان: أي تجاوز مستقبلي لا يُحرّك الصفحة */
}

/* ── إصلاح: شريط الجوال السفلي كان يظهر على سطح المكتب ──────────────────── */
@media (min-width: 992px) {
  .mobile-bottom-nav,
  .mobile-bottom-nav-wrapper {
    display: none !important;  /* يحارب: product-card-calm.css .mobile-bottom-nav */
  }
  body {
    padding-bottom: 0 !important;
  }
}

/* ── حاويات التمرير الأفقي ───────────────────────────────────────────────
   الشرائط كانت تلتصق بحافة النافذة بلا هامش ولا إشارة أنها تُمرَّر، فبدت
   البطاقات مقصوصة. الهامش الداخلي يجعل القصّ مقصوداً ومقروءاً. */
.cards-strip,
.sellers-strip-scroll {
  padding-inline: var(--ds-gutter) !important;
  scroll-padding-inline: var(--ds-gutter);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--ds-line-strong) transparent;
}

.cards-strip > *,
.sellers-strip-scroll > * {
  scroll-snap-align: start;
}

.cards-strip::-webkit-scrollbar,
.sellers-strip-scroll::-webkit-scrollbar {
  height: 6px;
}
.cards-strip::-webkit-scrollbar-thumb,
.sellers-strip-scroll::-webkit-scrollbar-thumb {
  background: var(--ds-line-strong);
  border-radius: var(--ds-r-pill);
}

/* التذييل التعريفي جزء من الصفحة الرئيسية فقط، وليس من شاشات التطبيق الداخلية. */
body:not([data-view="home"]) .site-footer {
  display: none !important;
}

/* ── بطاقة المنتج ───────────────────────────────────────────────────────
   الاتجاه تجاري: الصورة تحمل الانتباه، السعر يتفوّق على الاسم، وسطر الثقة
   (البائع + المنطقة + التقييم) عنصر مصمَّم لا بقايا. في سوق محلي المصدر هو
   الفارق عن أي متجر عالمي، فيستحق تصميماً لا هامشاً. */

body .product-card.product-card-refined {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-card) !important;
  box-shadow: var(--ds-shadow-card) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}

body .product-card.product-card-refined:hover,
body .product-card.product-card-refined:focus-visible {
  box-shadow: var(--ds-shadow-raised) !important;
  border-color: var(--ds-line-strong) !important;
  transform: translateY(-2px);
}

body .product-card.product-card-refined:focus-visible {
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
}

/* الصورة: نسبة ثابتة 1:1 حتى تصطفّ البطاقات مهما اختلفت أبعاد الصور */
body .product-card.product-card-refined .product-image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--ds-surface-sunk);
  border-radius: 0 !important;
  overflow: hidden;
}

body .product-card.product-card-refined .product-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 260ms ease;
}

body .product-card.product-card-refined:hover .product-image-wrap img {
  transform: scale(1.03);
}

/* حالة بديلة محترمة: 19 من ملفات الصور مفقودة على القرص، وكانت تظهر
   كأيقونة صورة مكسورة. الآن سلّة على قماش هادئ. */
/* الرمز SVG مضمّن لا إيموجي: خطوط النظام لا تضمن تغطية الإيموجي، وحين يغيب
   المحرف يرسم المتصفّح محرف «غير معرَّف» الذي يشبه صورة مكسورة — أي نفس
   المشكلة التي نعالجها. الـSVG يُرسم دائماً. */
body .product-card.product-card-refined .product-image-placeholder,
body .store-product-gallery .modal-image-placeholder,
body .product-image-wrap .is-image-missing {
  width: 100%;
  height: 100% !important;     /* يحارب: styles.css:937 height:144px */
  border-radius: 0 !important;
  background-color: var(--ds-surface-sunk);
  background-image:
    radial-gradient(120% 120% at 50% 20%, #ffffff 0%, rgba(238, 241, 237, 0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%238b978f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h18l-1.6 10.2a2 2 0 0 1-2 1.8H6.6a2 2 0 0 1-2-1.8L3 8Z'/%3E%3Cpath d='M8 8 9.8 3.6'/%3E%3Cpath d='M16 8 14.2 3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center !important;
  background-size: auto, 44px 44px !important;
}

/* styles.css:8148 يضع content:"🛍" — والمتصفّحات التي لا تملك هذا الرمز
   ترسم محرف «غير معرَّف» يشبه صورة مكسورة. نلغيه لصالح الـSVG أعلاه. */
body .product-card.product-card-refined .product-image-placeholder::after,
body .store-product-gallery .modal-image-placeholder::after {
  content: none !important;
}

/* في المعرض تكبر السلّة بما يناسب المساحة */
body .store-product-gallery .modal-image-placeholder {
  background-size: auto, 96px 96px !important;
}

/* الجسم */
body .product-card.product-card-refined .product-body {
  padding: var(--ds-3) var(--ds-4) var(--ds-4) !important;
  display: flex;
  flex-direction: column;
  gap: var(--ds-2);
  flex: 1;
}

body .product-card.product-card-refined .product-title {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: var(--ds-ink) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;         /* سطران دائماً: تمنع اهتزاز ارتفاع البطاقات */
  margin: 0 !important;
}

/* السعر يتفوّق على الاسم — قرار الشراء يبدأ من الرقم */
body .product-card.product-card-refined .product-price {
  font-size: 1.1875rem !important;
  font-weight: 800 !important;
  color: var(--ds-ink) !important;
  letter-spacing: -0.01em;
  background: none !important;   /* يحارب: styles.css حبّة السعر المحاطة بإطار */
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

body .product-card.product-card-refined .product-price-row {
  margin: 0 !important;
  align-items: baseline;
}

/* سطر الثقة — العنصر المميّز لهذه الواجهة */
body .product-card.product-card-refined .product-store-rating-row {
  margin-top: auto !important;
  padding-top: var(--ds-3) !important;
  border-top: 1px solid var(--ds-line) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-2);
}

body .product-card.product-card-refined .store-link {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--ds-ink-soft) !important;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

body .product-card.product-card-refined .store-link:hover {
  color: var(--ds-brand-deep) !important;
  text-decoration: underline;
}

body .product-card.product-card-refined .product-rating-inline {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: var(--ds-ink-soft) !important;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

body .product-card.product-card-refined .product-rating-star {
  color: var(--ds-saffron) !important;
}

body .product-card.product-card-refined .rating-count {
  color: var(--ds-ink-faint) !important;
  font-weight: 500 !important;
}

/* المنطقة والتوصيل: معلومة مساعدة، لا تنافس السعر */
body .product-card.product-card-refined .product-meta-inline {
  display: flex;
  align-items: center;
  gap: var(--ds-2);
  flex-wrap: wrap;
}

body .product-card.product-card-refined .region-pill {
  background: var(--ds-surface-sunk) !important;
  color: var(--ds-ink-soft) !important;
  border: 0 !important;
  border-radius: var(--ds-r-pill) !important;
  padding: 3px 10px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

/* التوصيل: رمز مطفأ رمادي لا يبلّغ شيئاً — يقرأ كلطخة لا كمعلومة.
   الغياب أوضح: تظهر الشارة حين يتوفّر التوصيل فقط. */
body .product-card.product-card-refined .product-delivery-icon {
  display: none !important;
}

body .product-card.product-card-refined .product-delivery-icon.is-available {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  background: var(--ds-brand-wash) !important;
  color: var(--ds-brand-deep) !important;
  border: 0 !important;
  border-radius: var(--ds-r-pill) !important;
  padding: 3px 10px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.4;
  cursor: pointer;
}

body .product-card.product-card-refined .product-delivery-icon.is-available::after {
  content: "توصيل";
}

/* شارة الحالة */
body .product-card.product-card-refined .condition-ribbon {
  position: absolute;
  top: var(--ds-2);
  inset-inline-start: var(--ds-2);
  z-index: 3;
  background: var(--ds-saffron-wash) !important;
  color: #8a5600 !important;
  border: 0 !important;
  border-radius: var(--ds-r-pill) !important;
  padding: 3px 10px !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* الحجاب الداكن فوق كل صورة: كان يُطفئ صور المنتجات بشفافية 0.14 دائماً.
   في متجر تجاري الصورة هي البضاعة — تبقى صافية، ويظهر التعتيم عند المرور فقط. */
body .product-card.product-card-refined .product-image-overlay {
  opacity: 0 !important;       /* يحارب: styles.css .product-image-overlay */
  transition: opacity 160ms ease;
  pointer-events: none;
}

body .product-card.product-card-refined:hover .product-image-overlay {
  opacity: 0.08 !important;
}

/* «تاجر جديد» بدل تقييم صفري — الصفر يقرأ كسمعة سيئة لا كغياب بيانات */
body .product-card.product-card-refined .product-rating-empty {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ds-ink-faint);
  white-space: nowrap;
}

/* عدّاد المشاهدات: معلومة ثانوية جداً */
body .product-card.product-card-refined .views-badge {
  background: rgba(22, 33, 26, 0.55) !important;
  color: #fff !important;
  border: 0 !important;
  backdrop-filter: blur(4px);
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: var(--ds-r-pill) !important;
}

/* المفضّلة: ظاهرة دائماً على الجوال، فاللمس لا يعرف hover */
body .product-card.product-card-refined .product-hover-actions {
  position: absolute;
  top: var(--ds-2);
  inset-inline-end: var(--ds-2);
  z-index: 3;
  opacity: 1 !important;       /* يحارب: styles.css إظهارها عند hover فقط */
  transform: none !important;
}

body .product-card.product-card-refined .product-hover-action-favorite {
  width: 32px;
  height: 32px;
  border-radius: var(--ds-r-pill);
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--ds-line) !important;
  color: var(--ds-ink-soft) !important;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 140ms ease, transform 140ms ease;
}

body .product-card.product-card-refined .product-hover-action-favorite:hover {
  transform: scale(1.08);
}

body .product-card.product-card-refined .product-hover-action-favorite.is-active-favorite {
  color: var(--ds-sumac) !important;
}

/* زر الشراء — الاتجاه التجاري يضع القرار على البطاقة نفسها */
.ds-card-cta {
  margin-top: var(--ds-3);
  width: 100%;
  border: 0;
  border-radius: var(--ds-r-control);
  background: var(--ds-brand);
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 10px var(--ds-3);
  cursor: pointer;
  transition: background 140ms ease, transform 100ms ease;
}

.ds-card-cta:hover {
  background: var(--ds-brand-deep);
}

.ds-card-cta:active {
  transform: translateY(1px);
}

.ds-card-cta:focus-visible {
  outline: 2px solid var(--ds-brand-deep);
  outline-offset: 2px;
}

.ds-card-cta[disabled] {
  background: var(--ds-line-strong);
  color: var(--ds-ink-faint);
  cursor: default;
}

/* ── البطاقة على الهاتف ──────────────────────────────────────────────────
   القياس قبل التعديل: 160×389px — أطول من عرضها بـ2.4 مرة، و2.17 بطاقة فقط
   تظهر في الشاشة. الجسم وحده 261px مقابل 119px للصورة.
   المُلتهم الأكبر: سطر الثقة 66px (الاسم و«تاجر جديد» لا يتّسعان في 160px
   فيلتفّان سطرين)، ثم زر الشراء 46px كصفٍّ مستقل.

   الحل: شبكة صريحة تضع السعر والزر في صفٍّ واحد، وتُسقط ما لا يُقرأ في
   160px. المنطقة والتوصيل يبقيان في صفحة المنتج حيث توجد مساحة لهما. */
@media (max-width: 600px) {
  body .product-card.product-card-refined .product-body {
    display: grid !important;    /* يحارب: product-card-calm.css:95 display:flex !important */
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title title"
      "price cta"
      "trust meta";
    align-items: center;
    gap: var(--ds-1) var(--ds-2);
    padding: var(--ds-2) var(--ds-3) var(--ds-3) !important;
  }

  /* لا نحجز سطرين: بطاقات الصفّ الواحد تتساوى تلقائياً في الشبكة، فالحجز
     يضيف فراغاً على كل اسم من سطر واحد بلا مقابل. الحدّ الأقصى يبقى سطرين. */
  body .product-card.product-card-refined .product-title {
    grid-area: title;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
    margin-bottom: 2px !important;
  }

  body .product-card.product-card-refined .product-price-row {
    grid-area: price;
    min-width: 0;
  }

  body .product-card.product-card-refined .product-price {
    font-size: 1rem !important;
  }

  /* المنطقة تُسقَط (المستخدم يفلترها أصلاً) لكن «توصيل» إشارة شرائية تبقى —
     تُشارك صفّ البائع بدل أن تحتلّ صفّاً خاصاً بها. */
  body .product-card.product-card-refined .product-meta-grid {
    grid-area: meta;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: end;
  }

  body .product-card.product-card-refined .region-pill {
    display: none !important;
  }

  body .product-card.product-card-refined .product-delivery-icon.is-available {
    padding: 2px 8px !important;
    font-size: 0.6875rem !important;
  }

  body .product-card.product-card-refined .product-store-rating-row {
    grid-area: trust;
    padding-top: var(--ds-2) !important;
    margin-top: var(--ds-1) !important;
    gap: var(--ds-1);
    min-width: 0;
  }

  body .product-card.product-card-refined .store-link {
    font-size: 0.75rem !important;
    max-width: 100%;
  }

  /* «تاجر جديد» يزاحم اسم البائع على 160px. التقييم الحقيقي يبقى. */
  body .product-card.product-card-refined .product-rating-empty {
    display: none;
  }

  /* الزر يصير مربّعاً بجانب السعر بدل صفٍّ كامل */
  body .product-card.product-card-refined .ds-card-cta {
    grid-area: cta;
    width: 40px;
    height: 40px;
    margin-top: 0;
    padding: 0;
    border-radius: var(--ds-r-control);
    font-size: 0;                /* النص يبقى لقارئات الشاشة */
    display: grid;
    place-items: center;
  }

  body .product-card.product-card-refined .ds-card-cta::after {
    content: "+";
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
  }

  body .product-card.product-card-refined .ds-card-cta[disabled]::after {
    content: "…";
  }
}

/* ── شبكة المنتجات ─────────────────────────────────────────────────────── */
.products-grid,
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--ds-5);
}

@media (max-width: 600px) {
  .products-grid,
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--ds-3);
  }
}

/* ── دوائر المتاجر ───────────────────────────────────────────────────────
   كانت تُلوَّن بألوان inline عشوائية (بنفسجي، أزرق، برتقالي) في متجر هويته
   خضراء — 17 دائرة صاخبة بلا تسلسل. الـinline لا يُهزَم إلا بـ!important.
   البديل: حرف بلون الهوية على سطح هادئ، فتبرز شعارات المتاجر الحقيقية
   حين تُرفَع بدل أن تغرق في ضجيج. */
.seller-circle-avatar {
  background: var(--ds-brand-wash) !important;   /* يحارب: style="background:#..." */
  color: var(--ds-brand-deep) !important;
  border: 1px solid var(--ds-line) !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.seller-circle-item:hover .seller-circle-avatar {
  border-color: var(--ds-brand) !important;
}

/* الشعار الحقيقي يملأ الدائرة ويلغي الحرف */
.seller-circle-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.seller-circle-name {
  color: var(--ds-ink-soft) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
}

/* ── الصورة الرئيسية ─────────────────────────────────────────────────────
   كانت 816px من أصل 900px — أي 91% من الشاشة، فلا يرى الزائر منتجاً واحداً
   قبل التمرير. متجر تجاري يعرض البضاعة فوق الطيّة. */
.hero.hero-bleed .hero-card.hero-poster,
.hero.hero-bleed .hero-poster {
  height: clamp(260px, 42vh, 420px) !important;  /* يحارب: styles.css ارتفاع الـposter */
  min-height: 0 !important;
}

@media (max-width: 700px) {
  .hero.hero-bleed .hero-card.hero-poster,
  .hero.hero-bleed .hero-poster {
    height: clamp(200px, 32vh, 280px) !important;
  }
}

/* النص كان أبيض على سماء ساطعة. التدرّج وحده لم يكفِ لأن العنوان يقع في
   أعلى الصورة حيث السماء أفتح ما تكون — فيُعتَّم الطرفان لا الأسفل فقط. */
.hero.hero-bleed .hero-overlay {
  background: linear-gradient(
    to top,
    rgba(9, 20, 13, 0.72) 0%,
    rgba(9, 20, 13, 0.30) 45%,
    rgba(9, 20, 13, 0.62) 100%
  ) !important;
}

.hero.hero-bleed h1,
.hero.hero-bleed .hero-title {
  text-shadow: 0 2px 12px rgba(9, 20, 13, 0.55);
  letter-spacing: -0.01em;
}

/* ── صفحة المنتج ─────────────────────────────────────────────────────────
   ما كان: عمودان غير متوازنين، والصورة الرئيسية مكسورة تعرض النص البديل،
   ولوحة الشراء **ثالثة** في عمود من خمس بطاقات منفصلة — أي أن قرار الشراء
   مدفون تحت الوصف والتفاصيل. في متجر تجاري السعر والزر يقعان بجانب الصورة. */

.store-product-view-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.modal-product-layout.store-product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--ds-8);
  align-items: start;
}

/* المعرض يلاصق أعلى الشاشة أثناء قراءة التفاصيل */
.store-product-gallery {
  position: sticky;
  top: var(--ds-4);
  display: grid;
  gap: var(--ds-3);
}

.store-product-gallery .modal-product-image,
.store-product-gallery .modal-image-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--ds-r-card);
  border: 1px solid var(--ds-line);
  background: var(--ds-surface);
  display: block;
}

.store-product-copy {
  display: flex;
  flex-direction: column;
  gap: var(--ds-4);
}

/* لوحة الشراء تصعد مباشرةً تحت الاسم والسعر */
.store-product-copy > .modal-purchase-box {
  order: -1;
}

.store-product-copy > .modal-title-row,
.store-product-copy > .store-title-row {
  order: -3;
}

.store-product-copy > .detail-delivery-pill,
.store-product-copy > [class*="delivery-pill"] {
  order: -2;
}

.modal-purchase-box.store-purchase-box {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-line-strong) !important;
  border-radius: var(--ds-r-card) !important;
  box-shadow: var(--ds-shadow-card) !important;
  padding: var(--ds-5) !important;
}

.store-product-price {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: var(--ds-ink) !important;
  font-variant-numeric: tabular-nums;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* البطاقات الداخلية كانت تُحيط كل فقرة بإطار وظل — إطار داخل إطار.
   فواصل رفيعة تكفي لفصل الأقسام. */
.store-product-copy .detail-card-block {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--ds-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: var(--ds-4) 0 0 !important;
}

.store-product-copy .detail-card-title {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: var(--ds-ink) !important;
  margin-bottom: var(--ds-2) !important;
}

.store-buy-btn {
  background: var(--ds-brand) !important;
  border: 0 !important;
  font-weight: 700 !important;
}

.store-buy-btn:hover {
  background: var(--ds-brand-deep) !important;
}

.detail-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-2);
}

.seller-share-btn {
  min-height: 42px;
}

@media (max-width: 900px) {
  .modal-product-layout.store-product-layout {
    grid-template-columns: 1fr;
    gap: var(--ds-5);
  }

  .store-product-gallery {
    position: static;
  }
}

/* ── السلة ───────────────────────────────────────────────────────────────
   ما كان على الجوال: بطاقة بطول الشاشة تقريباً للعنصر الواحد، والكمية مذكورة
   مرّتين (سطر «الكمية الحالية» ثم المُبدّل نفسه)، وزر «تحديث الكمية» منفصل
   رغم أن المُبدّل يحدّث فوراً، وزر إتمام الشراء تحت 1885px من أعلى الصفحة.
   الشكل التجاري المعتاد: صورة صغيرة، اسم وسعر، مُبدّل — في صفّ واحد. */

.cart-item-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-card) !important;
  box-shadow: none !important;
  padding: var(--ds-3) !important;
}

.cart-item-head {
  display: flex;
  gap: var(--ds-3);
  align-items: flex-start;
}

.cart-item-main {
  display: flex;
  gap: var(--ds-3);
  align-items: flex-start;
  min-width: 0;
  flex: 1;
}

.cart-item-image {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  object-fit: cover;
  border-radius: var(--ds-r-control);
  border: 1px solid var(--ds-line);
  background: var(--ds-surface-sunk);
}

/* الصورة الغائبة كانت مربّعاً أبيض فارغاً بلا دلالة */
.cart-item-image.placeholder {
  background-color: var(--ds-surface-sunk);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%238b978f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h18l-1.6 10.2a2 2 0 0 1-2 1.8H6.6a2 2 0 0 1-2-1.8L3 8Z'/%3E%3Cpath d='M8 8 9.8 3.6'/%3E%3Cpath d='M16 8 14.2 3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.cart-item-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-item-copy > strong,
.cart-item-copy > .cart-item-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.cart-item-copy .muted {
  font-size: 0.8125rem !important;
  color: var(--ds-ink-soft) !important;
}

.cart-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-r-control);
  overflow: hidden;
}

.cart-qty-btn {
  width: 36px;
  height: 36px;
  border: 0 !important;
  background: var(--ds-surface-sunk) !important;
  color: var(--ds-ink) !important;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.cart-qty-btn:hover {
  background: var(--ds-line) !important;
}

.cart-qty-input {
  width: 46px !important;
  height: 36px;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center;
  font-weight: 700;
  background: var(--ds-surface) !important;
  padding: 0 !important;
  font-variant-numeric: tabular-nums;
}

.summary-box {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-line-strong) !important;
  border-radius: var(--ds-r-card) !important;
  box-shadow: var(--ds-shadow-card) !important;
}

.summary-box .summary-line:last-of-type strong,
.summary-box .summary-line strong {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .cart-item-card {
    padding: var(--ds-2) !important;
  }

  .cart-item-image {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }

  /* سطر «الكمية الحالية» يكرّر ما يعرضه المُبدّل نفسه */
  .cart-item-side {
    display: none !important;
  }

  /* شارة تحتلّ صفّاً كاملاً لتقول «التوصيل غير متاح» — الغياب أوضح من نفي
     صريح، تماماً كما في بطاقة المنتج */
  .cart-item-card [class*="delivery-pill"]:not(.is-available),
  .cart-item-card .delivery-indicator.is-unavailable {
    display: none !important;
  }

  /* المُبدّل يحفظ فوراً، فزر التحديث المنفصل خطوة بلا مقابل */
  .cart-item-actions [data-cart-update] {
    display: none !important;
  }

  .cart-item-actions {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-2);
    margin-top: var(--ds-2) !important;
    padding-top: var(--ds-2);
    border-top: 1px solid var(--ds-line);
  }

  .cart-item-actions [data-cart-remove] {
    border: 0 !important;
    background: transparent !important;
    color: var(--ds-sumac) !important;
    font-size: 0.8125rem !important;
    padding: 6px 4px !important;
  }
}

/* ── الطلبات ─────────────────────────────────────────────────────────────
   الشاشة تستخدم نمط سطح المكتب: قائمة على جانب ولوحة تفاصيل على الآخر.
   على الهاتف تتكدّس اللوحة تحت القائمة فارغة بارتفاع 1348px تقول «اختر
   طلباً» — أطول من القائمة نفسها. الهاتف يفتح التفاصيل بالانتقال لا بلوحة
   مجاورة، فتظهر اللوحة فقط بعد اختيار طلب فعلي. */

.order-line-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-card) !important;
  box-shadow: none !important;
}

.order-line-card .order-total,
.order-line-card [class*="total"] strong {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  /* التطبيق يضع is-placeholder ما دامت اللوحة تعرض «اختر طلباً»، ويزيلها
     عند عرض طلب فعلي — فنُخفي البطاقة كاملة (بعنوانها) في الحالة الأولى */
  #ordersView .card:has(> #orderDetailsPanel.is-placeholder) {
    display: none !important;
  }

  /* زرّا «محادثة» و«عرض التفاصيل» كانا صفّين كاملين */
  .order-line-card .order-line-actions,
  .order-line-card .list-item-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-2);
  }

  .order-line-card .order-line-actions > *,
  .order-line-card .list-item-actions > * {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ── لوحة البائع: إدارة المنتجات ─────────────────────────────────────────
   كل منتج كان يحمل أربعة أزرار بعرض كامل في شبكة 2×2 تأخذ 82px من صفٍّ
   ارتفاعه 232px — أي أن ثلث الصفّ أزرار. كتلة الإدارة وحدها بلغت 1035px.
   البائع يقرأ منتجاته أكثر ممّا يُعدّلها، فالقراءة تتقدّم على الإجراء:
   الأزرار تصير صفّاً واحداً مضغوطاً، ونصوصها تُختصر إلى ما يميّزها. */

.managed-product-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-card) !important;
  box-shadow: none !important;
}

.managed-product-image {
  border-radius: var(--ds-r-control) !important;
  border: 1px solid var(--ds-line) !important;
  object-fit: cover;
  background-color: var(--ds-surface-sunk) !important;
}

/* الصورة الغائبة كانت مربّعاً رمادياً فارغاً — نفس رمز بقيّة الواجهة */
.managed-product-image:not(img),
.managed-product-image-placeholder {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%238b978f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h18l-1.6 10.2a2 2 0 0 1-2 1.8H6.6a2 2 0 0 1-2-1.8L3 8Z'/%3E%3Cpath d='M8 8 9.8 3.6'/%3E%3Cpath d='M16 8 14.2 3.6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

@media (max-width: 600px) {
  #dashboardView .managed-product-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--ds-1) !important;
    grid-template-columns: none !important;
  }

  #dashboardView .managed-product-actions > .btn,
  #dashboardView .managed-product-actions > button,
  #dashboardView .managed-product-actions > a {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px !important;
    font-size: 0.75rem !important;
    border-radius: var(--ds-r-control) !important;
    white-space: nowrap;
  }

  /* الأرشفة إجراء لا رجعة فيه — تُقرأ كخطر لا كخيار متعادل */
  #dashboardView .managed-product-actions [data-archive-product],
  #dashboardView .managed-product-actions [data-product-archive] {
    color: var(--ds-sumac) !important;
    border-color: var(--ds-line) !important;
  }
}

/* ── لوحة الترحيب في لوحة البائع ─────────────────────────────────────────
   النصّ كان rgb(43,94,59) أخضر داكن على تدرّج rgb(31,107,58) أخضر داكن —
   نسبة تباين ~1.2:1 مقابل حدّ أدنى 4.5:1. النصّ كان موجوداً وغير مقروء. */
#dashboardView .dashboard-hero-panel,
#dashboardView .dashboard-hero-panel * {
  color: #ffffff !important;
}

#dashboardView .dashboard-hero-panel .muted,
#dashboardView .dashboard-hero-panel [class*="kicker"] {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* أزرار اللوحة على خلفية داكنة: حدود فاتحة شفافة بدل حدود بلون النصّ الداكن */
#dashboardView .dashboard-hero-panel .btn {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

#dashboardView .dashboard-hero-panel .btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
}

/* ── حركة مسؤولة ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body .product-card.product-card-refined,
  body .product-card.product-card-refined .product-image-wrap img,
  .ds-card-cta {
    transition: none !important;
  }
  body .product-card.product-card-refined:hover {
    transform: none;
  }
  body .product-card.product-card-refined:hover .product-image-wrap img {
    transform: none;
  }
}

/* ─── الشراء بلا حساب، شام كاش، شارة التاجر الموثّق ─────────────────── */
.verified-seller-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e7f5ec;
  color: #1f6b3a;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.verified-seller-badge.is-large {
  font-size: 0.875rem;
  padding: 4px 12px;
  margin-top: 6px;
}

.payment-method-picker {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}
.payment-method-picker legend {
  font-weight: 700;
  padding: 0 6px;
}
.payment-method-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}
.payment-method-option span {
  display: grid;
  gap: 2px;
}
.payment-method-option small {
  color: #6b7280;
}
.payment-method-option.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.guest-checkout-fields {
  display: grid;
  gap: 8px;
}
.guest-checkout-note {
  margin: 0 0 8px;
}
.guest-login-link {
  margin-top: 6px;
  padding: 0;
  background: none;
  border: 0;
  color: #2b5e3b;
  text-decoration: underline;
  cursor: pointer;
}
.guest-order-receipt {
  display: grid;
  gap: 10px;
}

.account-claim-card {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  border: 1px solid #cfe7d7;
  background: #f3faf5;
}
.account-claim-copy {
  display: grid;
  gap: 4px;
}
.account-claim-form,
.sham-cash-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  align-items: end;
}

.order-payment-block {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}
.payment-status-chip {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  background: #fff4e0;
  color: #8a5a00;
}
.payment-status-chip.is-confirmed {
  background: #e7f5ec;
  color: #1f6b3a;
}
.payment-status-chip.is-rejected {
  background: #fde8e8;
  color: #9b1c1c;
}
.payment-proof-thumb {
  display: inline-grid;
  gap: 4px;
  justify-items: start;
  max-width: 180px;
}
.payment-proof-thumb img {
  max-width: 180px;
  max-height: 180px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  object-fit: cover;
}
.payment-proof-upload {
  display: grid;
  gap: 8px;
}

/* شريط «ثبّت التطبيق» — فوق شريط التنقل السفلي على الجوال */
.install-app-bar {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  font-size: 0.875rem;
}
.install-app-bar[hidden] {
  display: none !important;
}
.install-app-bar img {
  border-radius: 8px;
  flex: none;
}
.install-app-bar span {
  flex: 1;
}
.install-app-close {
  background: none;
  border: 0;
  font-size: 1rem;
  cursor: pointer;
  color: #6b7280;
  padding: 4px;
}
@media (min-width: 901px) {
  .install-app-bar {
    bottom: 20px;
    inset-inline: auto 20px;
    max-width: 420px;
  }
}

/* =============================================================================
   رأس صفّ التصنيف وسعر «عند التواصل» — لكل المقاسات
   ============================================================================= */
#homeCategorySections .category-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--ds-4);
  margin: 0 0 var(--ds-3);
  padding-inline: var(--ds-gutter);
}
#homeCategorySections .category-head .category-title {
  display: inline-flex !important;
  align-items: baseline;
  gap: var(--ds-2);
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  color: var(--ds-ink) !important;
}
#homeCategorySections .category-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ds-ink-faint);
}
#homeCategorySections .category-head .category-see-all {
  min-height: 0 !important;
  height: auto !important;
  padding: var(--ds-1) 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ds-brand-deep) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
}
#homeCategorySections .category-head .category-see-all:hover {
  text-decoration: underline;
}

body .product-card .product-price.is-on-request {
  display: inline-block;
  padding: 3px 10px !important;
  border-radius: var(--ds-r-pill);
  background: var(--ds-saffron-wash) !important;
  color: #8a5606 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  white-space: nowrap;
}

.hero-lede {
  margin: 0;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  line-height: 1.6;
}

/* =============================================================================
   طبقة الجوال (حتى 640px)
   المتجر يُستعمل من الجوال أولاً. هذه الطبقة تعيد ترتيب الشاشة الرئيسية
   والبطاقات والبحث فوق طبقات الأنماط القديمة (styles.css نحو 18 ألف سطر، وكتلة
   style داخل index.html كانت تزيح رأس الصفحة بـtranslate). البادئة
   «html body» ترفع الأولوية فوق تلك القواعد بدل ملاحقتها واحدة واحدة.
   ============================================================================= */
@media (max-width: 640px) {
  html body {
    background: var(--ds-canvas) !important;
    /* شريط التنقل السفلي ثابت: يُحجز له مكان كي لا يغطي آخر المحتوى */
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden;
  }

  html body main.container.main-space {
    padding-inline: var(--ds-4) !important;
    margin-top: 0 !important;
  }
  /* الصفحة الرئيسية وحدها تمتدّ إلى حافة الشاشة (رفوف تُسحب أفقياً) */
  html body main.container.main-space > #homeView {
    margin-inline: calc(-1 * var(--ds-4)) !important;
    max-width: none !important;
    width: auto !important;
  }

  /* شريحة التصنيف المختارة بلون المتجر (كانت زرقاء من طبقة قديمة) */
  html body #filtersSection #categoryChips > .chip {
    background: var(--ds-surface) !important;
    color: var(--ds-ink-soft) !important;
    border: 1px solid var(--ds-line-strong) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
  }
  html body #filtersSection #categoryChips > .chip.active {
    background: var(--ds-ink) !important;
    color: #fff !important;
    border-color: var(--ds-ink) !important;
  }

  /* ── صفحة المنتج: معرض يُسحب أفقياً بصور مربّعة ── */
  html body #productView > .section-head .muted {
    display: none !important;
  }
  html body #productView > .section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--ds-3) !important;
    margin: var(--ds-3) 0 !important;
  }
  /* العنوان يتكرّر تحت المعرض؛ رأس الصفحة يكتفي بزرّ رجوع صغير */
  html body #productView > .section-head > div:first-child {
    display: none !important;
  }
  html body #productView > .section-head .nav-actions {
    margin: 0 !important;
    padding: 0 !important;
  }
  html body #productView #productBackBtn {
    width: auto !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 var(--ds-4) !important;
    border-radius: var(--ds-r-pill) !important;
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-line-strong) !important;
    box-shadow: none !important;
    color: var(--ds-ink) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
  }
  html body #productView #productBackBtn::before {
    content: "› ";
    font-size: 1.1em;
  }
  html body #productView .store-product-view-shell {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body #productView .store-product-layout {
    display: block !important;
  }
  html body #productView .store-product-gallery {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--ds-2) !important;
    margin: 0 calc(-1 * var(--ds-4)) var(--ds-4) !important;
    padding: 0 var(--ds-4) !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    max-height: none !important;
    position: static !important;
  }
  html body #productView .store-product-gallery::-webkit-scrollbar {
    display: none;
  }
  html body #productView .store-product-gallery > * {
    flex: 0 0 88% !important;
    width: 88% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 16px !important;
    object-fit: cover !important;
    scroll-snap-align: center;
    background: var(--ds-surface-sunk);
  }
  html body #productView .store-product-gallery > *:only-child {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  html body #productView .store-product-copy {
    padding: 0 !important;
  }
  html body #productView .store-title-row {
    display: grid !important;
    gap: var(--ds-2) !important;
    margin-bottom: var(--ds-3) !important;
  }
  html body #productView .store-title-row h2 {
    margin: 0 !important;
    font-size: 1.375rem !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
  }
  html body #productView .store-product-price {
    font-size: 1.375rem !important;
    font-weight: 800 !important;
    color: var(--ds-brand-deep) !important;
  }
  html body[data-view="product"] {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body[data-view="product"] .mobile-bottom-nav {
    display: none !important;
  }
  html body #productView .store-purchase-box {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 130;
    margin: 0 !important;
    padding: var(--ds-3) var(--ds-4) calc(var(--ds-3) + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ds-line) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -6px 20px rgba(22, 33, 26, 0.08) !important;
  }
  html body #productView .store-purchase-box .modal-purchase-head {
    display: none !important;
  }
  html body #productView .store-purchase-box .modal-cart-inline {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: var(--ds-2) !important;
    align-items: center !important;
    margin: 0 !important;
  }
  html body #productView .store-purchase-box .modal-qty-stepper {
    display: flex !important;
    align-items: center !important;
    height: 46px !important;
    padding: 0 4px !important;
    border-radius: 12px !important;
    border: 1px solid var(--ds-line-strong) !important;
    background: var(--ds-surface) !important;
  }
  html body #productView .store-purchase-box .modal-qty-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: var(--ds-surface-sunk) !important;
    color: var(--ds-ink) !important;
    box-shadow: none !important;
  }
  html body #productView .store-purchase-box .modal-qty-input {
    width: 32px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
  }
  html body #productView .store-purchase-box .store-buy-btn,
  html body #productView .store-purchase-box .store-direct-buy-btn {
    height: 46px !important;
    min-height: 46px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 var(--ds-2) !important;
    border-radius: 12px !important;
    font-size: 0.875rem !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    white-space: nowrap;
  }
  html body #productView .store-purchase-box .store-buy-btn {
    background: var(--ds-surface) !important;
    color: var(--ds-brand-deep) !important;
    border: 1.5px solid var(--ds-brand) !important;
  }
  html body #productView .store-purchase-box .store-direct-buy-btn {
    background: var(--ds-brand) !important;
    color: #fff !important;
    border: 0 !important;
  }

  html body #productView .detail-card-block {
    margin: 0 0 var(--ds-3) !important;
    padding: var(--ds-4) !important;
    border-radius: 14px !important;
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-line) !important;
    box-shadow: none !important;
  }

  /* ── رأس الصفحة: شعار في البداية، بحث وقائمة في النهاية ── */
  html body .topbar.site-header.topbar-layout-lock {
    position: sticky !important;
    top: 0;
    z-index: 120;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--ds-line) !important;
    box-shadow: none !important;
  }
  html body .topbar.site-header.topbar-layout-lock .topbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--ds-3) !important;
    height: 56px !important;
    padding: 0 var(--ds-4) !important;
    max-width: none !important;
  }
  html body .topbar.site-header.topbar-layout-lock .brand {
    display: flex !important;
    align-items: center !important;
    gap: var(--ds-2) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body .topbar.site-header.topbar-layout-lock .topbar-logo-wrap {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    overflow: hidden;
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid var(--ds-line) !important;
    transform: none !important;
  }
  html body .topbar.site-header.topbar-layout-lock .topbar-logo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transform: scale(1.45);
  }
  html body .topbar.site-header.topbar-layout-lock #siteBrandTitle {
    font-size: 1.0625rem !important;
    font-weight: 800 !important;
    color: var(--ds-ink) !important;
  }
  html body .topbar.site-header.topbar-layout-lock .header-nav-links {
    display: none !important;
  }
  html body .topbar.site-header.topbar-layout-lock .header-nav-row {
    display: flex !important;
    align-items: center !important;
    gap: var(--ds-2) !important;
    flex: 0 0 auto !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
  html body .topbar.site-header.topbar-layout-lock .mobile-header-menu {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
  html body .topbar.site-header.topbar-layout-lock .header-search-trigger,
  html body .topbar.site-header.topbar-layout-lock .mobile-header-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: var(--ds-r-control) !important;
    background: var(--ds-surface-sunk) !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ds-ink) !important;
  }

  /* ── الواجهة: لافتة بصورة المدينة، النص والأزرار داخلها ── */
  html body #heroIntroSection.hero {
    width: 100% !important;
    margin: var(--ds-3) 0 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }
  html body #heroIntroSection .hero-card,
  html body #heroIntroSection .hero-poster {
    min-height: 232px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background-position: center 35% !important;
    background-size: cover !important;
  }
  html body #heroIntroSection .hero-overlay {
    background: linear-gradient(180deg, rgba(10, 30, 18, 0.05) 0%, rgba(10, 30, 18, 0.35) 40%, rgba(10, 30, 18, 0.86) 100%) !important;
  }
  html body #heroIntroSection .hero-shell {
    position: relative;
    display: flex !important;
    align-items: flex-end !important;
    min-height: 232px !important;
    padding: var(--ds-5) var(--ds-4) var(--ds-4) !important;
  }
  html body #heroIntroSection .hero-text {
    display: grid !important;
    align-content: end !important;
    justify-content: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    gap: var(--ds-2) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: start !important;
    background: none !important;
    transform: none !important;
  }
  html body #heroIntroSection #heroTitle {
    margin: 0 !important;
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  }
  html body #heroIntroSection .hero-lede {
    font-size: 0.9375rem;
  }
  html body #heroIntroSection .hero-actions {
    display: flex !important;
    gap: var(--ds-2) !important;
    margin: var(--ds-2) 0 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
  }
  html body #heroIntroSection .hero-actions .golden-btn,
  html body #heroIntroSection .hero-actions .rainbow-btn-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 var(--ds-5) !important;
    border-radius: 12px !important;
    font-size: 0.9375rem !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    animation: none !important;
    white-space: nowrap;
  }
  html body #heroIntroSection .hero-actions .golden-btn {
    flex: 1 1 auto;
    background: #fff !important;
    color: var(--ds-brand-deep) !important;
    border: 0 !important;
  }
  html body #heroIntroSection .hero-actions .rainbow-btn-outer {
    flex: 0 0 auto;
    padding: 0 !important;
    background: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    animation: none !important;
  }
  html body #heroIntroSection .hero-actions .rainbow-btn-inner {
    width: 100%;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
  }

  /* ── حقل البحث في الصفحة الرئيسية ── */
  html body .google-search-wrapper {
    margin: var(--ds-4) var(--ds-4) 0 !important;
    padding: 0 !important;
    width: auto !important;
  }
  html body .google-search-wrapper .search-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  html body .google-search-wrapper .rainbow-border {
    display: none !important;
  }
  html body .google-search-wrapper .search-box {
    display: flex !important;
    align-items: center !important;
    gap: var(--ds-2) !important;
    height: 48px !important;
    padding: 0 var(--ds-4) !important;
    border-radius: 14px !important;
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-line-strong) !important;
    box-shadow: none !important;
  }
  html body .google-search-wrapper .search-icon {
    font-size: 1rem !important;
    opacity: 0.6;
  }
  html body .google-search-wrapper .search-input {
    font-size: 1rem !important; /* 16px: أقل منه يجعل iOS يكبّر الصفحة عند الكتابة */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: 100% !important;
  }

  /* ── المتاجر ── */
  html body .home-sellers-strip {
    margin: var(--ds-5) 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body .home-sellers-strip .sellers-strip-head {
    padding: 0 var(--ds-4) !important;
    margin-bottom: var(--ds-2) !important;
  }
  html body .home-sellers-strip .sellers-strip-title {
    font-size: 1.125rem !important;
    font-weight: 800 !important;
    color: var(--ds-ink) !important;
  }
  html body .home-sellers-strip .sellers-strip-title > span[aria-hidden] {
    display: none;
  }
  html body .home-sellers-strip .sellers-strip-scroll {
    display: flex !important;
    gap: var(--ds-4) !important;
    padding: var(--ds-1) var(--ds-4) var(--ds-2) !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  html body .home-sellers-strip .sellers-strip-scroll::-webkit-scrollbar {
    display: none;
  }
  html body .home-sellers-strip .seller-circle-item {
    flex: 0 0 72px !important;
    width: 72px !important;
    scroll-snap-align: start;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
  }
  html body .home-sellers-strip .seller-circle-avatar {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto var(--ds-1) !important;
    border: 2px solid #fff !important;
    box-shadow: 0 0 0 1px var(--ds-line-strong) !important;
    font-size: 1.375rem !important;
  }
  html body .home-sellers-strip .seller-circle-name {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    color: var(--ds-ink-soft) !important;
  }

  /* ── شريط النتائج والترتيب والفلاتر ── */
  html body #homeView #filtersSection {
    margin: var(--ds-5) 0 0 !important;
    padding: 0 var(--ds-4) !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  html body #homeView #filtersSection .filters-shell {
    overflow: visible !important;
    margin: 0 !important;
    width: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body #filtersSection .mobile-filters-toolbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--ds-2) !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body #filtersSection .mobile-filters-summary {
    display: flex !important;
    align-items: baseline !important;
    gap: var(--ds-1) !important;
    flex: 0 0 auto;
  }
  html body #filtersSection .mobile-filters-summary-label {
    display: none !important;
  }
  html body #filtersSection #mobileFiltersResultsCount {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--ds-ink-soft) !important;
  }
  html body #filtersSection .mobile-filters-toolbar-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--ds-2) !important;
    flex: 1 1 auto;
    justify-content: flex-end !important;
  }
  html body #filtersSection .mobile-sort-field {
    display: block !important;
    flex: 0 1 150px;
    margin: 0 !important;
  }
  html body #filtersSection .mobile-sort-label {
    display: none !important;
  }
  html body #filtersSection #mobileSortBy,
  html body #filtersSection .mobile-filters-sheet-toggle {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: var(--ds-r-control) !important;
    font-size: 0.875rem !important;
    box-shadow: none !important;
  }
  html body #filtersSection #mobileSortBy {
    width: 100% !important;
    padding: 0 var(--ds-3) !important;
    background-color: var(--ds-surface) !important;
    border: 1px solid var(--ds-line-strong) !important;
  }
  html body #filtersSection .mobile-filters-sheet-toggle {
    padding: 0 var(--ds-4) !important;
    background: var(--ds-surface) !important;
    color: var(--ds-ink) !important;
    border: 1px solid var(--ds-line-strong) !important;
    font-weight: 700 !important;
  }
  html body #filtersSection #categoryChips {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--ds-2) !important;
    margin: var(--ds-3) calc(-1 * var(--ds-4)) 0 !important;
    padding: 0 var(--ds-4) var(--ds-1) !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  html body #filtersSection #categoryChips::-webkit-scrollbar {
    display: none;
  }
  html body #filtersSection #categoryChips > * {
    flex: 0 0 auto !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 var(--ds-4) !important;
    border-radius: var(--ds-r-pill) !important;
    font-size: 0.8125rem !important;
    white-space: nowrap !important;
  }

  /* ── صفوف التصنيفات: رفوف أفقية تنطبق على البطاقة ── */
  html body #homeCategorySections {
    margin-top: var(--ds-2) !important;
  }
  html body #homeCategorySections .category-block {
    margin: 0 !important;
    padding: var(--ds-5) 0 var(--ds-2) !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  html body #homeCategorySections .category-block + .category-block {
    border-top: 8px solid var(--ds-surface-sunk) !important;
  }
  html body #homeCategorySections .category-head {
    justify-content: space-between;
    padding: 0 var(--ds-4);
  }
  html body #homeCategorySections .cards-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--ds-3) !important;
    width: auto !important;
    margin: 0 !important;
    padding: var(--ds-1) var(--ds-4) var(--ds-3) !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ds-4);
    scrollbar-width: none;
    transform: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  html body #homeCategorySections .cards-strip::-webkit-scrollbar {
    display: none;
  }
  /* 44% من العرض: بطاقتان كاملتان وطرف الثالثة، فيظهر أن الصفّ يُسحب */
  html body #homeCategorySections .cards-strip > .product-card {
    flex: 0 0 44% !important;
    width: 44% !important;
    min-width: 0 !important;
    max-width: 200px !important;
    scroll-snap-align: start;
  }

  /* ── بطاقة المنتج: الصورة هي البطاقة ──
     نمط تطبيقات البقالة السريعة (Instacart وTalabat Mart وNoon): بلا إطار حول
     البطاقة، صورة مربّعة بزوايا مستديرة، زرّ إضافة دائري عائم على زاوية الصورة
     حيث يصل الإبهام، ثم السعر أولاً فالاسم فالتاجر. */
  html body article.product-card.product-card-refined {
    position: relative !important;
    container-type: inline-size;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
  }
  html body article.product-card.product-card-refined .condition-ribbon,
  html body article.product-card.product-card-refined .product-views-corner,
  html body article.product-card.product-card-refined .product-image-overlay {
    display: none !important;
  }
  html body article.product-card.product-card-refined .product-image-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: var(--ds-surface-sunk) !important;
    border: 1px solid var(--ds-line) !important;
  }
  html body article.product-card.product-card-refined .product-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }
  html body article.product-card.product-card-refined .product-hover-actions {
    position: absolute !important;
    opacity: 1 !important;
    visibility: visible !important;
    top: var(--ds-2) !important;
    inset-inline-start: var(--ds-2) !important;
    inset-inline-end: auto !important;
    bottom: auto !important;
    transform: none !important;
    background: none !important;
  }
  html body article.product-card.product-card-refined .product-hover-action-favorite {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 1px 3px rgba(22, 33, 26, 0.18) !important;
    color: var(--ds-ink) !important;
    font-size: 0.875rem !important;
  }
  html body article.product-card.product-card-refined .product-hover-action-favorite.is-active-favorite {
    color: var(--ds-sumac) !important;
  }
  html body article.product-card.product-card-refined .product-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "title"
      "price" !important;
    align-content: start !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: var(--ds-2) 2px 0 !important;
    background: none !important;
    border: 0 !important;
  }
  html body article.product-card.product-card-refined .product-body .product-price-row {
    grid-area: price;
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    text-align: start !important;
    min-width: 0;
    min-height: 22px;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body article.product-card.product-card-refined .product-body .product-price {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: var(--ds-ink) !important;
    white-space: nowrap;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  html body article.product-card.product-card-refined .product-body .price-currency {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ds-ink-soft);
  }
  html body article.product-card.product-card-refined .product-body .product-price.is-on-request {
    padding: 2px 8px !important;
    border-radius: var(--ds-r-pill) !important;
    background: var(--ds-saffron-wash) !important;
    color: #8a5606 !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
  }
  html body article.product-card.product-card-refined .product-body .product-title {
    grid-area: title;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: clip !important;
    min-height: calc(2 * 1.45em) !important;
    max-height: calc(2 * 1.45em) !important;
    margin: 0 !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    color: var(--ds-ink) !important;
    text-align: start !important;
  }
  html body article.product-card.product-card-refined .product-body .product-store-rating-row {
    grid-area: trust;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--ds-1) !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html body article.product-card.product-card-refined .product-body .store-link {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    color: var(--ds-ink-faint) !important;
    text-decoration: none !important;
  }
  html body article.product-card.product-card-refined .product-body .verified-seller-badge {
    flex: none;
    padding: 0 5px;
    font-size: 0.625rem;
  }
  html body article.product-card.product-card-refined .product-body .product-rating-inline,
  html body article.product-card.product-card-refined .product-body .product-rating-empty,
  html body article.product-card.product-card-refined .product-body .product-meta-grid {
    display: none !important;
  }
  /* زرّ الإضافة يطفو على زاوية الصورة: 100cqw = عرض البطاقة = ارتفاع الصورة المربّعة */
  html body article.product-card.product-card-refined .ds-card-cta {
    position: absolute !important;
    top: calc(100cqw - 44px) !important;
    inset-inline-end: var(--ds-2) !important;
    inset-inline-start: auto !important;
    z-index: 2;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: #fff !important;
    color: var(--ds-brand-deep) !important;
    box-shadow: 0 2px 8px rgba(22, 33, 26, 0.22) !important;
    font-size: 0 !important;
    display: grid !important;
    place-items: center !important;
  }
  html body article.product-card.product-card-refined .ds-card-cta::after {
    content: "+";
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
  }
  html body article.product-card.product-card-refined .ds-card-cta:active {
    transform: scale(0.94);
    background: var(--ds-brand) !important;
    color: #fff !important;
  }

  /* ── السلة: صفوف مضغوطة وشريط «متابعة الشراء» ثابت بالإجمالي ── */
  html body #cartView > .section-head {
    display: flex !important;
    flex-direction: row !important;
    text-align: start !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--ds-3) !important;
    margin: var(--ds-4) 0 var(--ds-3) !important;
  }
  html body #cartView > .section-head h2 {
    margin: 0 !important;
    font-size: 1.375rem !important;
    font-weight: 800 !important;
  }
  html body #cartView > .section-head h2::after,
  html body #cartView > .section-head .muted,
  html body #cartView #refreshCartBtn {
    display: none !important;
  }
  html body #cartView > .section-head > div:first-child {
    flex: 1 1 auto !important;
  }
  html body #cartView > .section-head .nav-actions {
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
  }
  html body #cartView #clearCartBtn {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: var(--ds-1) 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ds-sumac) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
  }
  html body.cart-is-empty #cartView #clearCartBtn {
    display: none !important;
  }
  html body #cartView .cart-layout {
    display: grid !important;
    gap: var(--ds-3) !important;
  }
  html body #cartView .cart-layout > .card {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body #cartView #cartItemsList {
    display: grid !important;
    gap: var(--ds-2) !important;
  }
  html body #cartView .cart-item-card {
    display: grid !important;
    gap: var(--ds-3) !important;
    margin: 0 !important;
    padding: var(--ds-3) !important;
    border-radius: 14px !important;
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-line) !important;
    box-shadow: none !important;
  }
  html body #cartView .cart-item-head {
    display: block !important;
    margin: 0 !important;
  }
  html body #cartView .cart-item-main {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: var(--ds-3) !important;
    align-items: start !important;
  }
  html body #cartView .cart-item-image {
    width: 72px !important;
    height: 72px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    background: var(--ds-surface-sunk) !important;
  }
  html body #cartView .cart-item-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0;
  }
  html body #cartView .cart-item-copy > strong {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    color: var(--ds-ink) !important;
  }
  html body #cartView .cart-item-copy > .muted {
    font-size: 0.75rem !important;
    color: var(--ds-ink-faint) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html body #cartView .cart-item-copy .delivery-pill,
  html body #cartView .cart-item-side,
  html body #cartView .cart-meta-row > span:first-child {
    display: none !important;
  }
  html body #cartView .cart-line-label {
    display: none;
  }
  html body #cartView .cart-meta-row {
    display: block !important;
    margin: var(--ds-1) 0 0 !important;
  }
  html body #cartView .cart-meta-row > span {
    font-size: 0.9375rem !important;
    font-weight: 800 !important;
    color: var(--ds-ink) !important;
  }
  html body #cartView .cart-item-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--ds-3) !important;
    margin: 0 !important;
    padding: var(--ds-2) 0 0 !important;
    border-top: 1px solid var(--ds-line) !important;
  }
  html body #cartView .cart-qty-stepper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    height: 36px !important;
    padding: 0 3px !important;
    border-radius: 10px !important;
    border: 1px solid var(--ds-line-strong) !important;
    background: var(--ds-surface) !important;
    width: auto !important;
  }
  html body #cartView .cart-qty-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    border: 0 !important;
    background: var(--ds-surface-sunk) !important;
    color: var(--ds-ink) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
  }
  html body #cartView .cart-qty-input {
    width: 36px !important;
    min-width: 0 !important;
    height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    text-align: center !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
  }
  html body #cartView [data-cart-remove] {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: var(--ds-1) 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ds-ink-soft) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-decoration: underline;
  }
  html body #cartView .cart-layout > .card:last-child > h3 {
    display: none !important;
  }
  html body #cartView .cart-summary-box {
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: var(--ds-2) var(--ds-4) !important;
    border-radius: 14px !important;
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-line) !important;
    box-shadow: none !important;
  }
  html body #cartView .cart-summary-box .summary-line {
    display: flex !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: var(--ds-2) 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 0.875rem !important;
    color: var(--ds-ink-soft) !important;
  }
  html body #cartView .cart-summary-box .summary-line + .summary-line {
    border-top: 1px solid var(--ds-line) !important;
  }
  html body #cartView .cart-summary-box .summary-line-total {
    font-size: 1rem !important;
    color: var(--ds-ink) !important;
  }
  html body #cartView .cart-summary-box .summary-line-total strong {
    font-weight: 800 !important;
  }
  /* زرّ المتابعة ثابت فوق شريط التنقل ويحمل الإجمالي */
  html body[data-view="cart"] {
    padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body #cartView .cart-layout > .card:last-child > .nav-actions {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 125;
    margin: 0 !important;
    padding: var(--ds-2) var(--ds-4) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid var(--ds-line) !important;
  }
  html body.cart-is-empty #cartView .cart-layout > .card:last-child > .nav-actions {
    display: none !important;
  }
  html body #cartView #submitCartOrderBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 var(--ds-5) !important;
    border-radius: 14px !important;
    background: var(--ds-brand) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
  }
  html body #cartView #submitCartOrderBtn .cart-cta-total {
    font-weight: 800;
    opacity: 0.95;
  }

  /* ── إتمام الطلب: صفحة مركّزة، زرّ التأكيد ثابت، بلا شريط تنقل ── */
  html body[data-view="checkout"] {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body[data-view="checkout"] .mobile-bottom-nav {
    display: none !important;
  }
  html body #checkoutView > .section-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--ds-3) !important;
    margin: var(--ds-4) 0 var(--ds-3) !important;
    text-align: start !important;
  }
  html body #checkoutView > .section-head > div:first-child {
    flex: 1 1 auto !important;
  }
  html body #checkoutView > .section-head h2 {
    margin: 0 !important;
    font-size: 1.375rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }
  html body #checkoutView > .section-head h2::after,
  html body #checkoutView > .section-head .muted {
    display: none !important;
  }
  html body #checkoutView > .section-head .nav-actions {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body #checkoutView #checkoutBackBtn {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: var(--ds-1) 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ds-brand-deep) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
  }
  html body #checkoutView .checkout-layout {
    display: grid !important;
    gap: var(--ds-4) !important;
  }
  html body #checkoutView .checkout-layout > .card {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body #checkoutView .checkout-layout > .card > h3::before,
  html body #checkoutView .checkout-layout > .card > h3::after {
    display: none !important;
  }
  html body #checkoutView .checkout-layout > .card {
    overflow: visible !important;
  }
  html body #checkoutView .checkout-layout > .card > h3 {
    margin: 0 0 var(--ds-2) !important;
    padding: 2px 0 0 !important;
    line-height: 1.6 !important;
    width: auto !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--ds-ink) !important;
  }
  html body #checkoutView #checkoutItemsList {
    display: grid !important;
    gap: 0 !important;
    padding: 0 var(--ds-3) !important;
    border-radius: 14px !important;
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-line) !important;
  }
  html body #checkoutView .checkout-item-card {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--ds-3) !important;
    margin: 0 !important;
    padding: var(--ds-3) 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  html body #checkoutView .checkout-item-card + .checkout-item-card {
    border-top: 1px solid var(--ds-line) !important;
  }
  html body #checkoutView .checkout-item-main {
    display: flex !important;
    align-items: center !important;
    gap: var(--ds-3) !important;
    min-width: 0;
  }
  html body #checkoutView .checkout-item-main .cart-item-image {
    width: 52px !important;
    height: 52px !important;
    flex: none;
    border-radius: 10px !important;
    object-fit: cover !important;
  }
  html body #checkoutView .checkout-item-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0;
  }
  html body #checkoutView .checkout-item-copy strong {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html body #checkoutView .checkout-item-copy .muted {
    font-size: 0.75rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html body #checkoutView .checkout-item-card > strong {
    flex: none;
    font-size: 0.875rem !important;
    font-weight: 800 !important;
  }
  html body #checkoutView .checkout-summary-box {
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: var(--ds-2) var(--ds-4) !important;
    border-radius: 14px !important;
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-line) !important;
    box-shadow: none !important;
  }
  html body #checkoutView .checkout-summary-box .summary-line {
    display: flex !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: var(--ds-2) 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 0.875rem !important;
  }
  html body #checkoutView .checkout-summary-box .summary-line + .summary-line {
    border-top: 1px solid var(--ds-line) !important;
  }
  html body #checkoutView .payment-method-picker {
    margin: var(--ds-3) 0 0 !important;
    padding: var(--ds-2) var(--ds-4) var(--ds-3) !important;
    border-radius: 14px !important;
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-line) !important;
  }
  html body #checkoutView .payment-method-option {
    padding: var(--ds-2) 0 !important;
  }
  html body #checkoutView .payment-method-option + .payment-method-option {
    border-top: 1px solid var(--ds-line);
  }
  html body #checkoutView .checkout-form-grid {
    display: grid !important;
    gap: var(--ds-3) !important;
    margin-top: var(--ds-3) !important;
  }
  html body #checkoutView .checkout-form-grid .detail-card-block {
    margin: 0 !important;
    padding: var(--ds-4) !important;
    border-radius: 14px !important;
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-line) !important;
    box-shadow: none !important;
  }
  html body #checkoutView .guest-checkout-fields .field,
  html body #checkoutView #checkoutNotes {
    font-size: 1rem !important;
    min-height: 46px !important;
    border-radius: 12px !important;
  }
  html body #checkoutView #checkoutNotes {
    min-height: 88px !important;
    max-height: 160px;
  }
  html body #checkoutView #confirmCheckoutBtn {
    position: fixed !important;
    left: var(--ds-4) !important;
    right: var(--ds-4) !important;
    bottom: calc(var(--ds-3) + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 130;
    width: auto !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    background: var(--ds-brand) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 8px 24px -8px rgba(20, 103, 47, 0.55) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
  }

  /* ── تحميل المزيد ── */
  html body #homeLoadMoreWrap {
    padding: var(--ds-4) !important;
  }
  html body #homeLoadMoreBtn {
    width: 100% !important;
    height: 46px !important;
    border-radius: 12px !important;
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-line-strong) !important;
    color: var(--ds-ink) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  /* ── البحث: لوحة بعرض الشاشة كاملة ── */
  html body .search-area {
    padding: 0 !important;
    align-items: flex-start !important;
  }
  html body .search-area .search-area-panel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 100dvh;
    border-radius: 0 !important;
    padding: var(--ds-4) var(--ds-4) var(--ds-6) !important;
    background: var(--ds-surface) !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
  }
  html body .search-area .search-close-btn {
    position: static !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 0 var(--ds-3) auto !important;
    border-radius: var(--ds-r-control) !important;
    background: var(--ds-surface-sunk) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body .search-area .search-overlay-head {
    padding: 0 !important;
    margin: 0 0 var(--ds-3) !important;
  }
  html body .search-area .search-area-kicker,
  html body .search-area .search-overlay-head p {
    display: none !important;
  }
  html body .search-area .search-overlay-head h3 {
    margin: 0 !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    color: var(--ds-ink) !important;
  }
  html body .search-area .search-overlay-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: var(--ds-2) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body .search-area .search-overlay-field {
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 var(--ds-3) !important;
    border-radius: 12px !important;
    border: 1px solid var(--ds-line-strong) !important;
    background: var(--ds-surface) !important;
    box-shadow: none !important;
  }
  html body .search-area .search-overlay-input {
    font-size: 1rem !important;
  }
  html body .search-area .search-overlay-submit {
    height: 48px !important;
    min-height: 48px !important;
    width: auto !important;
    padding: 0 var(--ds-5) !important;
    border-radius: 12px !important;
    background: var(--ds-brand) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
  }
  html body .search-area .search-overlay-suggestions {
    margin-top: var(--ds-5) !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
  }
  html body .search-area .search-overlay-suggestions-label {
    margin-bottom: var(--ds-2) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    color: var(--ds-ink-soft) !important;
  }
  html body .search-area .search-quick-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--ds-2) !important;
  }
  html body .search-area .search-quick-chip {
    width: auto !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 var(--ds-4) !important;
    border-radius: var(--ds-r-pill) !important;
    background: var(--ds-surface-sunk) !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ds-ink) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
  }

  /* ── شريط التنقل السفلي ── */
  html body .mobile-bottom-nav {
    inset-inline: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 6px var(--ds-2) calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: saturate(1.4) blur(10px);
    border-top: 1px solid var(--ds-line) !important;
    box-shadow: 0 -4px 16px rgba(22, 33, 26, 0.06) !important;
    transform: none !important;
  }
  html body .mobile-bottom-nav .mobile-bottom-nav-item {
    min-height: 52px !important;
    padding: 4px 0 !important;
    border-radius: 12px !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ds-ink-faint) !important;
  }
  html body .mobile-bottom-nav .mobile-bottom-nav-item.is-active {
    color: var(--ds-brand-deep) !important;
    background: var(--ds-brand-wash) !important;
  }
  html body .mobile-bottom-nav .mobile-bottom-nav-label {
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
  }
  html body .btn,
  html body button {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  html body .product-contact-seller-btn {
    width: 100%;
    min-height: 44px;
    height: auto;
    padding: 10px 14px;
    white-space: normal;
    line-height: 1.35;
  }
  html body .install-app-bar {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}