* {
  box-sizing: border-box;
}

:root {
  --bg: #f7f7f5;
  --white: #ffffff;
  --black: #111214;
  --black-2: #1b1d20;
  --text: #161719;
  --muted: #6f7276;
  --line: #e5e5e2;
  --soft: #eeeeeb;
  --radius: 18px;
  --container: 1280px;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: Arial, "Segoe UI", Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
}

body.menu-open {
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.container {
  width: min(
    var(--container),
    calc(100% - 48px)
  );
  margin-inline: auto;
}


/* ==============================
   ANNOUNCEMENT
============================== */

.announcement {
  background: var(--black);
  color: #fff;
  font-size: 12px;
}

.announcement-inner {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.announcement-links {
  display: flex;
  align-items: center;
  gap: 30px;
  color: #b8b9bb;
}


/* ==============================
   HEADER
============================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.header-main {
  min-height: 82px;
  display: grid;
  grid-template-columns: auto minmax(300px, 1fr) 210px;
  align-items: center;
  gap: 35px;
}

/* عناصر الـgrid الأربعة (زر الهامبرغر، الشعار/الأقسام، البحث،
   الأيقونات) عندها min-width:auto افتراضياً من المتصفح — هذا يمنع
   أي عمود مرن (1fr) من الانكماش تحت العرض الطبيعي لمحتواه، وهو
   بالضبط سبب انسحاب الهيدر كامل أفقياً على الشاشات الضيقة (الشعار
   أو أيقونات السلة/الدخول كانت تدفع الصفحة كلها لبرا). تصفيره هون
   بيخلي الـgrid يحسب المساحة المتوفرة الفعلية ويوزعها صح. */
.header-left,
.desktop-search,
.header-actions {
  min-width: 0;
}

.store-logo {
  width: max-content;
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}

.store-logo strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  letter-spacing: 6px;
}

.store-logo span {
  margin-top: 7px;
  color: #777;
  font-size: 8px;
  letter-spacing: 3px;
}

.store-logo.has-custom-logo {
  flex-direction: row;
}

.store-logo .site-logo-img {
  height: 42px;
}

.desktop-search {
  width: min(100%, 650px);
  justify-self: center;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  background: #f3f3f1;
  border: 1px solid #e6e6e3;
  border-radius: 999px;
  overflow: hidden;
}

.search-symbol {
  text-align: center;
  font-size: 22px;
  color: #777;
}

.desktop-search input {
  min-width: 0;
  height: 48px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  padding: 0 5px;
}

.desktop-search button {
  height: 40px;
  margin-left: 4px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--black);
  color: #fff;
  font-size: 12px;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

.header-icon,
.mobile-menu-button {
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 19px;
}

.cart-icon {
  font-size: 18px;
}

.cart-count {
  position: absolute;
  top: -5px;
  left: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--black);
  color: #fff;
  border: 2px solid #fff;
  font-size: 9px;
  display: grid;
  place-items: center;
}

.mobile-menu-button,
.search-mobile-button {
  display: none;
}


/* ==============================
   NAVIGATION
============================== */

.navigation-wrap {
  border-top: 1px solid #f1f1ef;
}

.navigation-inner {
  display: flex;
  justify-content: center;
}

.main-navigation {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  font-size: 13px;
}

.main-navigation a {
  position: relative;
  padding: 15px 0;
  white-space: nowrap;
}

.main-navigation a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 8px;
  width: 0;
  height: 1px;
  background: #111;
  transition: width .25s ease;
}

.main-navigation a:hover::after,
.main-navigation a.active::after {
  width: 100%;
}

.mobile-search-panel {
  display: none;
}


/* ==============================
   HERO
============================== */

.store-hero {
  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(255,255,255,.10),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      #0b0c0e,
      #1a1d21 58%,
      #292d31
    );
  color: #fff;
  overflow: hidden;
}

.hero-layout {
  min-height: 610px;
  display: grid;
  grid-template-columns: 1fr .95fr;
  align-items: center;
  gap: 70px;
  padding-top: 70px;
  padding-bottom: 70px;
}

.hero-label,
.section-label {
  display: block;
  margin-bottom: 16px;
  color: #777b80;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
}

.hero-copy h1 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(54px, 6vw, 86px);
  line-height: 1.03;
  letter-spacing: -3px;
}

.hero-copy h1 span {
  display: block;
  color: #9da0a4;
  font-weight: 400;
}

.hero-copy > p {
  max-width: 590px;
  margin: 28px 0 0;
  color: #b3b5b8;
  font-size: 15px;
  line-height: 2;
}

.hero-actions {
  margin-top: 35px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.primary-button,
.secondary-button,
.dark-button {
  min-height: 50px;
  padding: 0 27px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  transition:
    transform .2s ease,
    background .2s ease;
}

.primary-button {
  background: #fff;
  color: #111;
}

.secondary-button {
  border-color: #55595e;
  color: #fff;
}

.primary-button:hover,
.secondary-button:hover,
.dark-button:hover {
  transform: translateY(-2px);
}

.secondary-button:hover {
  background: rgba(255,255,255,.08);
}

.hero-points {
  margin-top: 45px;
  padding-top: 25px;
  border-top: 1px solid #33363a;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.hero-points > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #999da1;
  font-size: 11px;
}

.hero-points strong {
  color: #fff;
}

.hero-showcase {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center;
}

.hero-card {
  position: relative;
  overflow: hidden;
}

.hero-card-main {
  width: min(410px, 82%);
  aspect-ratio: .78;
  padding: 38px;
  background:
    linear-gradient(
      145deg,
      #d8d8d5,
      #f4f4f1 48%,
      #a8aaac
    );
  color: #111;
  box-shadow: 0 35px 80px rgba(0,0,0,.38);
  transform: rotate(-4deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-card-main::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  left: -80px;
  bottom: 50px;
  border: 60px solid rgba(255,255,255,.40);
  border-radius: 50%;
}

.hero-card-main > * {
  position: relative;
  z-index: 2;
}

.hero-card-main > span {
  font-family: Georgia, serif;
  letter-spacing: 6px;
  font-size: 17px;
}

.hero-card-main strong {
  font-family: Georgia, serif;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.04;
  letter-spacing: -1px;
}

.hero-card-main small {
  letter-spacing: 2px;
  font-size: 8px;
}

.hero-mini-card {
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 125px;
  height: 125px;
  padding: 20px;
  background: #111;
  border: 1px solid #3b3d40;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

.hero-mini-card span {
  color: #777;
  font-size: 9px;
  letter-spacing: 3px;
}

.hero-mini-card strong {
  font: 32px Georgia, serif;
}


/* ==============================
   TRUST
============================== */

.trust-strip {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.trust-grid {
  min-height: 100px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.trust-grid article {
  min-width: 0;
  padding: 22px 25px;
  border-left: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 15px;
}

.trust-grid article:last-child {
  border-left: 0;
}

.trust-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid #d9d9d6;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.trust-grid strong,
.trust-grid small {
  display: block;
}

.trust-grid strong {
  font-size: 12px;
}

.trust-grid small {
  margin-top: 3px;
  color: #8a8c8f;
  font-size: 10px;
}


/* ==============================
   COMMON SECTION
============================== */

.store-section {
  padding: 100px 0;
}

.section-header {
  margin-bottom: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.section-header h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -1.5px;
}

.section-header p {
  max-width: 500px;
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.section-link {
  padding-bottom: 5px;
  border-bottom: 1px solid #222;
  font-size: 12px;
}


/* ==============================
   CATEGORIES
============================== */

.categories-section {
  background: var(--bg);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.category-card {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  color: #111;
  padding: 24px;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0,0,0,.08);
}

.category-card > * {
  position: relative;
  z-index: 2;
}

.category-number {
  font: 12px Georgia, serif;
  color: #999;
}

.category-content {
  margin-top: auto;
}

.category-content small {
  display: block;
  margin-bottom: 7px;
  color: #8a8c8f;
  font-size: 8px;
  letter-spacing: 2px;
}

.category-content strong {
  display: block;
  font-size: 22px;
  line-height: 1.25;
}

.category-content span,
.category-description {
  display: block;
  margin-top: 9px;
  color: #777;
  font-size: 10px;
  line-height: 1.6;
}

.category-all {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}

.category-all .category-number,
.category-all .category-content small,
.category-all .category-content span {
  color: #85888c;
}

.category-bg-image {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0 !important;
  object-fit: cover;
  transition: transform .45s ease;
}

.category-card:has(.category-bg-image)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.82),
      rgba(0,0,0,.12)
    );
}

.category-card:has(.category-bg-image) {
  color: #fff;
  border-color: transparent;
}

.category-card:has(.category-bg-image)
.category-number,
.category-card:has(.category-bg-image)
.category-content small,
.category-card:has(.category-bg-image)
.category-content span,
.category-card:has(.category-bg-image)
.category-description {
  color: rgba(255,255,255,.72);
}

.category-card:hover .category-bg-image {
  transform: scale(1.06);
}

/* بطاقة قسم بدون صورة (الأدمن ما رفع صورة له بعد) — نفس معالجة
   البطاقة الغامقة بدل بطاقة بيضاء عادية وسط بطاقات الصور، حتى
   الصف يضل متناسق بصرياً بدل ما تبين بطاقة واحدة "غريبة" بينهم. */
.category-card:not(:has(.category-bg-image)) {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}

.category-card:not(:has(.category-bg-image))
.category-number,
.category-card:not(:has(.category-bg-image))
.category-content small,
.category-card:not(:has(.category-bg-image))
.category-content span,
.category-card:not(:has(.category-bg-image))
.category-description {
  color: rgba(255,255,255,.72);
}


/* ==============================
   PRODUCTS
============================== */

.products-section {
  background: #fff;
}

.results-info {
  color: #888;
  font-size: 11px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 18px;
}

.product-card {
  min-width: 0;
}

.product-image-wrap,
.product-image {
  position: relative;
  overflow: hidden;
  background: #f1f1ef;
  aspect-ratio: 1 / 1.12;
}

.product-image-wrap img,
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.product-card:hover
.product-image-wrap img,
.product-card:hover
.product-image img {
  transform: scale(1.035);
}

.product-image-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, #ededeb, #dadbd8);
  color: #8c8e90;
  font: 22px Georgia, serif;
  letter-spacing: 4px;
}

.product-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: #111;
  color: #fff;
  padding: 6px 9px;
  font-size: 8px;
  letter-spacing: 1px;
}

.product-media {
  position: relative;
}

/* دوائر صغيرة بزاوية صورة البطاقة تدل على وجود ألوان/تنويعات تانية
   للمنتج (راجع public/js/product-card-swatch.js) — زاوية مقابلة
   لشارة الخصم/نفاد المخزون (أعلى يمين) حتى ما تتداخل معاها. تمرير
   الماوس فوق صورة البطاقة ينقّل الصورة بين التنويعات تلقائياً. */
.product-swatch-badges {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  gap: 4px;
}

.product-swatch-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  background-size: cover;
  background-position: center;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

/* صف صغير مستقل تحت الصورة لزر المفضلة بدل ما يطفو فوقها — حتى ما
   يغطي أي جزء من صورة المنتج ولا يتداخل مع أي عنصر تاني بالبطاقة.
   flex-end بلغة الصفحة (RTL) بتحطه بالزاوية اليسرى، بنفس جهة مكانه
   القديم فوق الصورة، بس هلق بمساحته الخاصة تحتها. */
.product-fav-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.favorite-toggle-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(17,18,20,.1);
  background: #fff;
  color: #3c3d40;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: transform .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.favorite-toggle-btn:hover {
  transform: scale(1.1);
  color: #c0143c;
  border-color: rgba(192,20,60,.25);
  box-shadow: 0 2px 6px rgba(0,0,0,.14);
}

.favorite-toggle-btn.active {
  color: #c0143c;
  border-color: rgba(192,20,60,.2);
}

/* أيقونة قلب SVG بدل رمز يونيكود (♡/♥) — الرمز النصي بيطلع بشكل
   مشوّه أو غير متناسق حسب نظام تشغيل/خط المستخدم، بينما الـ SVG
   بيبين نفس الشكل الدقيق بكل المتصفحات. التبديل بين حالة "فاضي"
   و"ممتلئ" بقى بس بتبديل كلاس active (fill يصير currentColor)
   بدل استبدال محتوى الزر بالجافاسكربت. */
.fav-icon-svg {
  display: block;
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.favorite-toggle-btn.active .fav-icon-svg {
  fill: currentColor;
}

.product-info {
  padding-top: 14px;
}

.product-category {
  color: #8b8d90;
  font-size: 9px;
}

.product-title {
  display: block;
  margin: 5px 0 7px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.product-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-price-row strong,
.product-price {
  font-size: 14px;
}

.compare-price,
.old-price {
  color: #999;
  font-size: 11px;
  text-decoration: line-through;
}

.quick-add,
.product-add-btn {
  width: 100%;
  min-height: 43px;
  margin-top: 12px;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  font-size: 11px;
  transition: .2s ease;
}

a.quick-add,
a.product-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
  text-align: center;
}

.quick-add:hover,
.product-add-btn:hover {
  background: #111;
  color: #fff;
}

.quick-add:disabled,
.product-add-btn:disabled {
  border-color: #ddd;
  background: #eee;
  color: #999;
  cursor: not-allowed;
}

.product-skeleton {
  aspect-ratio: 1 / 1.25;
  background:
    linear-gradient(
      90deg,
      #eee 25%,
      #f7f7f7 37%,
      #eee 63%
    );
  background-size: 400% 100%;
  animation: skeleton 1.4s ease infinite;
}

@keyframes skeleton {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0 0;
  }
}

.empty-products {
  padding: 80px 20px;
  text-align: center;
}

.empty-icon {
  font-size: 45px;
  color: #999;
}

.empty-products h3 {
  margin-bottom: 5px;
}

.empty-products p {
  color: #777;
  font-size: 13px;
}

.dark-button {
  margin-top: 15px;
  background: #111;
  color: #fff;
  border: 1px solid #111;
}


/* ==============================
   PROMO
============================== */

.promo-section {
  padding: 20px 0 100px;
  background: #fff;
}

.promo-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
}

/* لو الأدمن خفى بطاقة وحدة بس (اختيارات جديدة / تجربة شراء أبسط)
   من الإعدادات، خلي الثانية تاخد عرض الصف كامل بدل عمود فاضي. */
.promo-grid.single-card {
  grid-template-columns: 1fr;
}

.promo-card {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  padding: 55px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.promo-card > span,
.promo-card h2,
.promo-card p,
.promo-card a {
  position: relative;
  z-index: 2;
}

.promo-card > span {
  margin-bottom: auto;
  font-size: 9px;
  letter-spacing: 3px;
}

.promo-card h2 {
  max-width: 480px;
  margin: 40px 0 12px;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.12;
}

.promo-card p {
  max-width: 450px;
  margin: 0 0 25px;
  font-size: 12px;
}

.promo-card a {
  width: max-content;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-size: 11px;
}

.promo-dark {
  background:
    radial-gradient(
      circle at 20% 20%,
      #3c4147,
      transparent 28%
    ),
    #151719;
  color: #fff;
}

/* حلقة زخرفية خفيفة بالركن — نفس لمسة قسم "اكتشف الجديد" (.new-visual)
   حتى البطاقة الغامقة ما تحس فاضية/مسطحة */
.promo-dark::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border: 60px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  left: -70px;
  bottom: -90px;
  pointer-events: none;
  z-index: 1;
}

.promo-dark > span,
.promo-dark p {
  color: #8f9296;
}

.promo-light {
  background:
    linear-gradient(
      145deg,
      #e4e4e0,
      #f5f5f2
    );
}

.promo-light > span,
.promo-light p {
  color: #777;
}

/* لما الأدمن يرفع صورة خلفية لبطاقة عرض (من لوحة الإدارة) —
   بنفرض نص أبيض بغض النظر عن البطاقة غامقة أو فاتحة، حتى يضل
   مقروء فوق الصورة (backgrounds.js بيضيف هالكلاس فقط لو في صورة) */
.promo-card.promo-has-image,
.promo-card.promo-has-image > span,
.promo-card.promo-has-image h2,
.promo-card.promo-has-image p,
.promo-card.promo-has-image a {
  color: #fff;
}


/* ==============================
   NEW
============================== */

.new-section {
  background: var(--bg);
}

.new-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.new-visual {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      #1b1d20,
      #454a50 60%,
      #111315
    );
  color: #fff;
  padding: 45px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.new-visual::after {
  content: "";
  position: absolute;
  width: 370px;
  height: 370px;
  border: 80px solid rgba(255,255,255,.07);
  border-radius: 50%;
  left: -100px;
  bottom: -110px;
}

.new-brand {
  position: relative;
  z-index: 2;
  font: clamp(55px, 8vw, 110px) Georgia, serif;
  letter-spacing: 10px;
}

.new-visual > span {
  position: relative;
  z-index: 2;
  color: #8d9195;
  font-size: 9px;
  letter-spacing: 4px;
}

.new-copy {
  background: #fff;
  padding: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.new-copy h2 {
  max-width: 500px;
  margin: 0;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.1;
}

.new-copy p {
  max-width: 520px;
  margin: 25px 0;
  color: #707276;
  font-size: 13px;
  line-height: 2;
}

.new-copy .dark-button {
  width: max-content;
}

/* شبكة بطاقات بانرات منتصف الصفحة المُدارة من لوحة الإدارة — بطاقتين
   بكل سطر بالضبط (بطلب صاحب المتجر)، بغض النظر عن العدد الكلي؛ لو
   العدد فردي بتضل آخر بطاقة لحالها بسطرها وهيك متوقع/مقصود. */
.new-banners-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.new-banner-card {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  border-radius: 3px;
  background:
    linear-gradient(
      145deg,
      #1b1d20,
      #454a50 60%,
      #111315
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: flex-end;
  padding: 28px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.new-banner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0,0,0,.18);
}

.new-banner-card-body {
  position: relative;
  z-index: 2;
  max-width: 100%;
}

.new-banner-card-body h3 {
  margin: 0 0 8px;
  font-size: 21px;
  line-height: 1.25;
}

.new-banner-card-body p {
  margin: 0 0 10px;
  color: rgba(255,255,255,.8);
  font-size: 12.5px;
  line-height: 1.7;
}

.new-banner-card-cta {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
}

@media (max-width: 640px) {
  .new-banners-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .new-banner-card {
    min-height: 240px;
    padding: 22px;
  }
}

.campaign-banner-badge {
  position: absolute;
  top: 18px;
  inset-inline-start: 18px;
  z-index: 3;
  background: #c0272d;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: .3px;
}


/* ==============================
   ABOUT
============================== */

.about-section {
  background: #111315;
  color: #fff;
  padding: 110px 0;
}

.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: start;
}

.section-label.light {
  color: #717579;
}

.about-layout h2 {
  margin: 0;
  font-size: clamp(46px, 6vw, 72px);
  line-height: 1.08;
}

.about-text {
  padding-top: 25px;
}

.about-text p {
  max-width: 560px;
  color: #9b9ea2;
  font-size: 14px;
  line-height: 2;
}


/* ==============================
   NEWSLETTER
============================== */

.newsletter {
  background: #202327;
  color: #fff;
  padding: 75px 0;
}

.newsletter-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.newsletter h2 {
  margin: 0;
  max-width: 600px;
  font-size: clamp(32px, 4vw, 45px);
  line-height: 1.2;
}

.newsletter p {
  color: #8f9296;
  font-size: 12px;
}

.newsletter-form {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #62666b;
}

.newsletter-form input {
  flex: 1;
  min-width: 0;
  height: 58px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
}

.newsletter-form input::placeholder {
  color: #777b80;
}

.newsletter-form button {
  height: 44px;
  padding: 0 25px;
  border: 0;
  background: #fff;
  color: #111;
  font-size: 11px;
  font-weight: 700;
}

/* عندما تكون النشرة البريدية داخل الفوتر (الصفحة الرئيسية فقط) —
   حجم أصغر وأكثر إحكاماً يناسب مكانها الجديد داخل الفوتر */
.site-footer > .newsletter {
  padding-top: 0;
  padding-bottom: 36px;
}

.site-footer > .newsletter .newsletter-layout {
  gap: 40px;
}

.site-footer > .newsletter h2 {
  font-size: clamp(18px, 1.6vw, 22px);
  max-width: 420px;
}

.site-footer > .newsletter p {
  font-size: 11px;
}

.site-footer > .newsletter .newsletter-form input {
  height: 38px;
  font-size: 12px;
}

.site-footer > .newsletter .newsletter-form button {
  height: 30px;
  padding: 0 16px;
  font-size: 10px;
}


/* ==============================
   FOOTER
============================== */

.site-footer {
  background: #090a0b;
  color: #fff;
  padding: 75px 0 25px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 50px;
}

.footer-logo span {
  color: #666;
}

.footer-brand p {
  max-width: 300px;
  margin-top: 25px;
  color: #777a7d;
  font-size: 11px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-column h3 {
  margin: 0 0 12px;
  color: #ddd;
  font-size: 12px;
}

.footer-column a,
.footer-column span {
  color: #74777a;
  font-size: 11px;
}

.footer-column a:hover {
  color: #fff;
}

.footer-payment-methods {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.footer-payment-methods img {
  width: 280px;
  max-width: 100%;
  height: auto;
  opacity: .85;
}

.footer-bottom {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid #242628;
  color: #65686b;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-bottom > div {
  display: flex;
  gap: 9px;
}


/* ==============================
   TOAST
============================== */

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 3000;
  max-width: 340px;
  padding: 14px 18px;
  background: #111;
  color: #fff;
  box-shadow: 0 15px 45px rgba(0,0,0,.25);
  font-size: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: .25s ease;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* ==============================
   TABLET
============================== */

@media (max-width: 1100px) {

  .header-main {
    grid-template-columns: 180px 1fr 120px;
    gap: 20px;
  }

  .main-navigation {
    gap: 26px;
  }

  .hero-layout {
    gap: 30px;
  }

  .hero-card-main {
    width: 85%;
  }

  .categories-grid,
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

  .footer-brand {
    grid-row: span 2;
  }

}


/* ==============================
   MOBILE
============================== */

@media (max-width: 820px) {

  .container {
    width: min(
      100% - 28px,
      var(--container)
    );
  }

  .announcement-inner {
    min-height: 32px;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    /* header-switchers ما بينكمش (flex-shrink:0) — لو ما سمحنا
       للصف يلف لسطر ثاني، نص الإعلان بينضغط بعرض ضيق جداً ويلف
       بعشرات الأسطر (المشكلة اللي ظهرت بالفيديو). اللف هون بخلي
       الـswitchers ينزلوا سطر تاني براحتهم بدل ما يعصروا النص. */
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .announcement-links {
    display: none;
  }

  #announcementText {
    width: 100%;
  }

  .header-main {
    min-height: 66px;
    grid-template-columns: 40px 1fr auto;
    gap: 8px;
  }

  .store-logo {
    justify-self: center;
  }

  .store-logo strong {
    font-size: 21px;
    letter-spacing: 4px;
  }

  .store-logo span {
    font-size: 6px;
  }

  .desktop-search {
    display: none;
  }

  .mobile-menu-button,
  .search-mobile-button {
    display: grid;
  }

  .header-actions {
    justify-content: flex-start;
    gap: 6px;
    /* شبكة أمان: لو صف الأيقونات (لأي سبب بصفحة معينة) صار أعرض من
       المتاح، يصير قابل للتمرير هو لحاله بدل ما يدفع الصفحة كلها
       عرضياً أو يخفي أيقونة السلة/الدخول بالكامل. */
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .header-actions::-webkit-scrollbar {
    display: none;
  }

  .header-icon,
  .mobile-menu-button {
    width: 36px;
    height: 36px;
  }

  .navigation-wrap {
    position: fixed;
    top: 98px;
    right: 0;
    left: 0;
    z-index: 1200;
    display: none;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
  }

  .navigation-wrap.open {
    display: block;
  }

  .navigation-inner {
    display: block;
  }

  .main-navigation {
    min-height: 0;
    padding: 15px 0 25px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .main-navigation a {
    padding: 14px 5px;
    border-bottom: 1px solid #eee;
  }

  .main-navigation a::after {
    display: none;
  }

  .mobile-search-panel {
    display: none;
    padding: 10px 0;
    background: #fff;
    border-top: 1px solid var(--line);
  }

  .mobile-search-panel.open {
    display: block;
  }

  .mobile-search-panel input {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--line);
    outline: 0;
    background: #f6f6f4;
  }

  .hero-layout {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 65px;
    padding-bottom: 55px;
    gap: 55px;
  }

  .hero-copy h1 {
    font-size: clamp(46px, 14vw, 68px);
    letter-spacing: -2px;
  }

  .hero-copy > p {
    font-size: 13px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-points {
    justify-content: space-between;
    gap: 15px;
  }

  .hero-showcase {
    min-height: 390px;
  }

  .hero-card-main {
    width: min(290px, 82%);
    padding: 28px;
  }

  .hero-mini-card {
    width: 100px;
    height: 100px;
    left: 5px;
    bottom: 20px;
    padding: 15px;
  }

  .hero-mini-card strong {
    font-size: 25px;
  }

  .trust-grid {
    grid-template-columns: 1fr 1fr;
  }

  .trust-grid article {
    min-height: 85px;
    padding: 15px 10px;
    border-bottom: 1px solid var(--line);
  }

  .trust-grid article:nth-child(2n) {
    border-left: 0;
  }

  .trust-grid strong {
    font-size: 11px;
  }

  .store-section {
    padding: 70px 0;
  }

  .section-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
  }

  .section-header h2 {
    font-size: 35px;
  }

  .categories-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }

  .category-card {
    min-height: 190px;
    padding: 17px;
  }

  .category-content strong {
    font-size: 17px;
  }

  .products-grid {
    grid-template-columns: 1fr 1fr;
    gap: 25px 9px;
  }

  .product-title {
    font-size: 11px;
  }

  .product-info {
    padding-top: 10px;
  }

  .quick-add,
  .product-add-btn {
    min-height: 40px;
    font-size: 10px;
  }

  .promo-section {
    padding-bottom: 70px;
  }

  .promo-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .promo-card {
    min-height: 300px;
    padding: 35px 25px;
  }

  .promo-card h2 {
    font-size: 37px;
  }

  .new-layout {
    grid-template-columns: 1fr;
  }

  .new-visual {
    min-height: 350px;
    padding: 30px;
  }

  .new-brand {
    font-size: clamp(50px, 18vw, 80px);
    letter-spacing: 5px;
  }

  .new-copy {
    padding: 50px 25px;
  }

  .new-copy h2 {
    font-size: 40px;
  }

  .about-section {
    padding: 75px 0;
  }

  .about-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .about-layout h2 {
    font-size: 48px;
  }

  .about-text {
    padding-top: 0;
  }

  .newsletter {
    padding: 60px 0;
  }

  .newsletter-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .newsletter h2 {
    font-size: 34px;
  }

  .site-footer > .newsletter {
    padding-top: 0;
    padding-bottom: 26px;
  }

  .site-footer > .newsletter .newsletter-layout {
    gap: 16px;
  }

  .site-footer > .newsletter h2 {
    font-size: 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 25px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .toast {
    right: 14px;
    left: 14px;
    bottom: 14px;
    max-width: none;
  }

}


/* ==============================
   SMALL MOBILE
============================== */

@media (max-width: 420px) {

  .search-mobile-button {
    display: none;
  }

  .hero-copy h1 {
    font-size: 44px;
  }

  .hero-points > div {
    font-size: 9px;
  }

  .category-card {
    min-height: 170px;
  }

  .category-content strong {
    font-size: 15px;
  }

  .product-price-row {
    flex-wrap: wrap;
  }

  .promo-card h2 {
    font-size: 32px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

}

/* =========================================
   ISTREV V2 - VISUAL REFINEMENT
========================================= */

/* Header */
.header-main {
  min-height: 88px;
}

.desktop-search {
  max-width: 720px;
}

.desktop-search input {
  height: 52px;
  font-size: 13px;
}

.desktop-search button {
  height: 44px;
  min-width: 74px;
  font-size: 12px;
}

.main-navigation {
  min-height: 52px;
  font-size: 13px;
  font-weight: 600;
}


/* Hero proportions */
.hero-layout {
  min-height: 560px;
  padding-top: 55px;
  padding-bottom: 55px;
}

.hero-copy {
  max-width: 650px;
}

.hero-copy h1 {
  font-size: clamp(58px, 5.7vw, 82px);
}

.hero-copy > p {
  max-width: 620px;
  font-size: 15px;
  line-height: 2.05;
  color: #c0c2c5;
}

.hero-label {
  color: #9a9da1;
  font-size: 10px;
}

.primary-button,
.secondary-button {
  min-width: 145px;
  min-height: 52px;
  font-size: 12px;
}


/* Hero visual */
.hero-showcase {
  min-height: 430px;
}

.hero-card-main {
  width: min(380px, 80%);
  box-shadow:
    0 40px 90px rgba(0,0,0,.42);
}

.hero-card-main strong {
  font-size: clamp(38px, 3.6vw, 50px);
}


/* Trust */
.trust-grid strong {
  font-size: 13px;
}

.trust-grid small {
  font-size: 11px;
}


/* Categories start closer to hero */
.categories-section {
  padding-top: 85px;
}


/* Better Arabic readability */
.section-header p,
.new-copy p,
.about-text p,
.promo-card p,
.newsletter p {
  font-size: 14px;
}

.category-content strong {
  font-size: 23px;
}

.category-content span,
.category-description {
  font-size: 11px;
}


/* Product cards feel more ecommerce */
.product-title {
  font-size: 14px;
}

.product-price-row strong,
.product-price {
  font-size: 16px;
}

.quick-add,
.product-add-btn {
  min-height: 46px;
  font-size: 12px;
  font-weight: 700;
}


/* Desktop marketplace density */
@media (min-width: 1200px) {

  .products-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
    gap: 36px 20px;
  }

  .categories-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }

}


/* Tablet */
@media (max-width: 1000px) {

  .hero-layout {
    min-height: auto;
  }

  .hero-copy h1 {
    font-size: 58px;
  }

}


/* Mobile refinement */
@media (max-width: 820px) {

  .header-main {
    min-height: 68px;
  }

  .hero-layout {
    padding-top: 52px;
    padding-bottom: 48px;
  }

  .hero-copy h1 {
    font-size: clamp(44px, 13vw, 62px);
  }

  .hero-copy > p {
    font-size: 14px;
    line-height: 1.9;
  }

  .hero-showcase {
    min-height: 350px;
  }

  .hero-card-main {
    width: min(270px, 80%);
  }

  .section-header h2 {
    font-size: 36px;
  }

  .section-header p {
    font-size: 13px;
  }

  .product-title {
    font-size: 12px;
  }

  .product-price-row strong,
  .product-price {
    font-size: 14px;
  }

}

/* =========================================
   CATEGORY / PRODUCT FLOW FIX
========================================= */

.categories-section {
  padding-top: 80px;
  padding-bottom: 65px;
}

.categories-section .section-header {
  margin-bottom: 32px;
}

.categories-grid {
  align-items: stretch;
}

.category-card {
  min-height: 220px;
}

.products-section {
  padding-top: 75px;
  padding-bottom: 90px;
  border-top: 1px solid #e8e8e5;
}

@media (max-width: 820px) {

  .categories-section {
    padding-top: 60px;
    padding-bottom: 50px;
  }

  .category-card {
    min-height: 180px;
  }

  .products-section {
    padding-top: 60px;
    padding-bottom: 70px;
  }

}

/* =========================================
   ISTREV SMART PRODUCT GRID
========================================= */

.products-section .section-header {
  margin-bottom: 38px;
}

/* Advanced filters toolbar (sort dropdown row above the filter bars) */
.products-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 18px;
}

@media (max-width: 640px) {
  .products-toolbar-row {
    justify-content: flex-start;
  }
}

/* Default: 4+ products */
.products-grid {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 34px 20px;
}

/* Only one product */
.products-grid:has(.product-card:only-child) {
  grid-template-columns:
    minmax(260px, 310px);
  justify-content: start;
}

/* Exactly two products */
.products-grid:has(
  .product-card:nth-child(2):last-child
) {
  grid-template-columns:
    repeat(2, minmax(260px, 310px));
  justify-content: start;
}

/* Exactly three products */
.products-grid:has(
  .product-card:nth-child(3):last-child
) {
  grid-template-columns:
    repeat(3, minmax(250px, 1fr));
}

/* Product card */
.product-card {
  width: 100%;
}

.product-image-wrap,
.product-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.08;
  background: #f4f4f2;
}

/* Better image presentation */
.product-image-wrap img,
.product-image img {
  object-fit: cover;
}

/* Product information */
.product-info {
  padding-top: 16px;
}

.product-category {
  display: block;
  margin-bottom: 5px;
  color: #949699;
  font-size: 9px;
  letter-spacing: .3px;
}

.product-title {
  min-height: 42px;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

.product-price-row {
  min-height: 25px;
}

.product-price-row strong,
.product-price {
  font-size: 16px;
  font-weight: 700;
}

.quick-add,
.product-add-btn {
  margin-top: 14px;
  min-height: 45px;
  border-radius: 2px;
}


/* Tablet */
@media (max-width: 1000px) {

  .products-grid,
  .products-grid:has(
    .product-card:nth-child(3):last-child
  ) {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .products-grid:has(
    .product-card:only-child
  ) {
    grid-template-columns:
      minmax(250px, 330px);
  }

}


/* Mobile */
@media (max-width: 820px) {

  .products-grid,
  .products-grid:has(
    .product-card:nth-child(2):last-child
  ),
  .products-grid:has(
    .product-card:nth-child(3):last-child
  ) {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 25px 10px;
  }

  .products-grid:has(
    .product-card:only-child
  ) {
    grid-template-columns: 1fr;
  }

  .product-image-wrap,
  .product-image {
    aspect-ratio: 1 / 1.12;
  }

  .product-title {
    min-height: 38px;
    font-size: 12px;
  }

  .product-price-row strong,
  .product-price {
    font-size: 14px;
  }

}

/* =========================================
   CENTER SHORT PRODUCT ROWS
========================================= */

.products-grid:has(
  .product-card:only-child
) {
  justify-content: center;
}

.products-grid:has(
  .product-card:nth-child(2):last-child
) {
  justify-content: center;
}

@media (max-width: 820px) {

  .products-grid:has(
    .product-card:nth-child(2):last-child
  ) {
    justify-content: stretch;
  }

}

/* =========================================
   Admin-managed homepage banner slider
   (falls back to .store-hero when empty —
   see /js/banners.js)
========================================= */

.banner-slider {
  position: relative;
  overflow: hidden;
  background: var(--black-2);
}

/* aspect-ratio لازم يطابق نسبة أبعاد صورة البانر الفعلية بالضبط (تم
   التحقق مباشرة من صورة البانر الحالية على الموقع: 2048×768 بكسل =
   نسبة 8/3 بالضبط) — مش رقم تقريبي زي 21/10 اللي كان مستخدم قبل. لو
   الأبعاد ما تطابق 100%، أي حد أقصى للارتفاع (max-height) بيخلي نسبة
   الصندوق تنحرف عن نسبة الصورة على الشاشات العريضة جداً (أو عند تصغير
   حجم الصفحة، لأنه هذا بالنسبة للمتصفح متل ما يكون العرض المتاح زاد)،
   وبالتالي background-size:cover بيرجع يقص من فوق/تحت — وهذا بالضبط
   السبب اللي خلى القص يرجع بعد الحل السابق (تم تأكيده: القص كان يبلش
   من عرض ~2400px فما فوق، لأنه 900px (الحد الأقصى القديم) × 2.667
   (نسبة الصورة الحقيقية) = 2400px، وبعدها الصندوق يصير أعرض من نسبته
   الحقيقية فيصير القص من فوق/تحت).
   الحل النهائي: ما في max-height إطلاقاً — بما إنه aspect-ratio يطابق
   الصورة تمام، الصندوق بيكبر تناسبياً مع العرض بدون أي حد أقصى، فما
   في أي احتمال قص لا من فوق/تحت ولا من الجنب، بأي عرض شاشة أو مستوى
   تصغير مهما كان (تم اختباره وتأكيده مباشرة على الموقع لعروض تصل
   لـ6000px). min-height يضل موجود عشان الشاشات الضيقة بس (بيصير قص
   خفيف من الجنب هناك بدل فوق/تحت، وهذا مقبول بصرياً).
   width: 100% ضروري هون — بدونه، aspect-ratio (حتى بدون max-height)
   بيخلّي المتصفح "يحل" للعرض بدل الارتفاع باستخدام width الافتراضي
   auto، فيصغّر عرض الصندوق كامل بدل ما ياخذ عرض العنصر الأب (تم
   اختباره وتأكيده). */
.banner-track {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 3;
  min-height: 460px;
}

.banner-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease;
}

.banner-slide.active {
  /* .banner-slide.active يصير position:relative (بدل absolute) — بس هاد
     كان يخلي ارتفاعه "auto" (يعتمد على محتواه، يعني .banner-content) بدل
     ما ياخذ ارتفاع .banner-track كامل. لو ارتفاع .banner-content المحسوب
     أصغر من ارتفاع .banner-track (يصير هيك على الشاشات العريضة، شرح أسفل)
     كان بيبين فراغ أسود تحت الصورة. height:100% يخلي .banner-slide.active
     ياخذ ارتفاع .banner-track بالضبط دايماً (تم اختباره وتأكيده). */
  position: relative;
  height: 100%;
  opacity: 1;
  visibility: visible;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(10,11,13,.72) 0%,
    rgba(10,11,13,.35) 55%,
    rgba(10,11,13,.10) 100%
  );
}

.banner-content {
  /* عرضه محكوم أصلاً بقاعدة .container (min(var(--container), 100%-48px)
     + margin-inline:auto) وهي قيمة محدّدة (مش auto)، فما يلزم تكرارها هون.
     الارتفاع: height:100% يورّثه مباشرة من .banner-slide (اللي بدوره صار
     100% من .banner-track بعد التعديل أعلاه) — بدل ما نحسبه من جديد عبر
     aspect-ratio اعتماداً على عرض .banner-content نفسه. هاد العرض محدود
     بـ .container (أقصى شي 1280px) بينما عرض .banner-track ما إله حد
     أقصى، فحساب aspect-ratio منفصل كان يعطي ارتفاع أصغر بكثير من ارتفاع
     .banner-track الفعلي على الشاشات العريضة — وهاد بالضبط سبب الفراغ
     الأسود تحت الصورة (تم اكتشافه وتأكيده مباشرة على الموقع). */
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  padding-top: 70px;
  padding-bottom: 70px;
  color: #fff;
}

.banner-content h2 {
  margin: 0;
  max-width: 680px;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -1.5px;
}

.banner-content p {
  margin: 0;
  max-width: 560px;
  color: #d8d9db;
  font-size: 15px;
  line-height: 1.9;
}

.banner-content .primary-button {
  margin-top: 6px;
}

.banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.25);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
}

.banner-arrow:hover {
  background: rgba(0,0,0,.45);
}

.banner-prev {
  right: 24px;
}

.banner-next {
  left: 24px;
}

.banner-dots {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}

.banner-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  padding: 0;
}

.banner-dot.active {
  background: #fff;
}

@media (max-width: 820px) {

  .banner-track,
  .banner-content {
    min-height: 460px;
  }

  .banner-arrow {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .banner-prev {
    right: 12px;
  }

  .banner-next {
    left: 12px;
  }

}


/* Footer social icons (admin-managed — see /js/site-settings.js) */

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  color: #d8d9db;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.footer-social-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.footer-social-icon:hover {
  background: #fff;
  color: #111;
  border-color: #fff;
}

/* =========================================
   Header redesign — categories menu button,
   vertical icon+text account/favorites/cart,
   and the horizontal category strip below the
   header. See /js/header-menu.js.
========================================= */

.header-left {
  display: flex;
  align-items: center;
  gap: 22px;
}

.categories-menu-wrap {
  position: relative;
}

.categories-menu-button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.categories-menu-button:hover {
  border-color: var(--black);
}

.categories-menu-icon {
  font-size: 15px;
}

/* Mega-menu: multi-column dropdown, one column per main category
   (its own subcategories listed underneath), laid out with CSS grid
   so it wraps naturally instead of stacking every category in one
   long single-column list. */
.categories-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: max-content;
  min-width: 300px;
  max-width: min(940px, calc(100vw - 40px));
  max-height: 75vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.14);
  padding: 10px;
  display: none;
  z-index: 500;
}

.categories-menu-panel.open {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 4px 30px;
  padding: 26px 28px;
}

.categories-menu-panel a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}

.categories-menu-panel a:hover {
  background: var(--bg);
}

.categories-menu-empty {
  grid-column: 1 / -1;
  padding: 14px;
  color: #999;
  font-size: 12px;
  text-align: center;
}

/* كل تصنيف رئيسي = عمود مستقل داخل الشبكة: الاسم الرئيسي كعنوان
   عمود بخط عريض وفاصل تحته، وتحته فروعه بخط أصغر — تصنيف بدون فروع
   يبقى عمود فيه رابط واحد بارز فقط. */
.categories-menu-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.categories-menu-main {
  font-weight: 700;
  padding: 4px 4px 12px !important;
  margin-bottom: 6px;
  border-bottom: 1px solid #f0f0ee;
  white-space: normal;
}

.categories-menu-sub {
  display: flex;
  flex-direction: column;
  padding-right: 0;
}

.categories-menu-sub a {
  font-size: 12.5px;
  color: #67696c;
  padding: 6px 4px;
  white-space: normal;
}

.categories-menu-sub a:hover {
  background: none;
  color: var(--black);
  text-decoration: underline;
}

.header-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 50px;
  text-align: center;
  color: var(--text);
}

.header-action-icon {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 17px;
}

.header-action-item:hover .header-action-icon {
  border-color: var(--black);
}

.header-action-label {
  font-size: 10px;
  color: #666;
  white-space: nowrap;
}

.category-strip-wrap {
  /* ثابت (sticky) تحت الهيدر أثناء التمرير — الارتفاع المستخدم
     بـ top يُحسب ديناميكياً بجافاسكربت (header-menu.js) حسب ارتفاع
     .site-header الفعلي على أي مقاس شاشة، والقيمة الثابتة هون قيمة
     احتياطية بس لأول رسم قبل ما تشتغل الجافاسكربت. */
  position: sticky;
  top: var(--site-header-height, 131px);
  z-index: 999;
  border-bottom: 1px solid #f1f1ef;
  background: #fff;
}

.category-strip {
  display: flex;
  gap: 10px;
  padding: 14px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.category-strip::-webkit-scrollbar {
  display: none;
}

.category-strip-item {
  flex: none;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  white-space: nowrap;
  color: var(--text);
}

.category-strip-item:hover {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}

/* قائمة التصنيفات الفرعية المنسدلة عند مرور الماوس على تصنيف رئيسي
   بالشريط الأفقي (header-menu.js — initCategoryStripHover). عنصر
   واحد مشترك بموضع fixed يتحرك بالجافاسكربت، مو جوا .category-strip
   نفسه (اللي عنده overflow-x:auto وبيقص أي شي يفيض تحته). */
.category-strip-dropdown-panel {
  position: fixed;
  z-index: 1100;
  min-width: 170px;
  max-width: 280px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(0,0,0,.14);
  padding: 8px;
  display: none;
}

.category-strip-dropdown-panel.open {
  display: block;
}

.category-strip-dropdown-link {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text);
  white-space: normal;
}

.category-strip-dropdown-link:hover {
  background: var(--bg);
}

@media (max-width: 1100px) {
  .header-main {
    grid-template-columns: auto 1fr 120px;
  }
}

@media (max-width: 820px) {
  .categories-menu-wrap {
    display: none;
  }

  .header-left {
    justify-self: center;
  }

  .header-action-label {
    display: none;
  }

  .header-action-item {
    min-width: auto;
  }

  .header-action-icon {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .category-strip {
    padding: 10px 0;
  }
}


/* ==============================
   LANGUAGE / CURRENCY SWITCHERS
============================== */

.header-switchers {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* .lang-switch-select هوي الكلاس الفعلي المستخدم بالـHTML لعنصر
   اللغة (#langSwitcher) — .lang-switch-btn كان اسم قديم من قبل ما
   يصير select، خلّيناه هون بس للتوافق مع أي مكان قديم لسا يستخدمه.
   بدون .lang-switch-select كان هاد الـselect يطلع بشكله الافتراضي
   من نظام الأندرويد (صندوق أبيض كبير بدون تنسيق) — وهو اللي كان
   ظاهر بالمشكلة. appearance:none هون بيفرض نفس الشكل المخصص عنا
   بدل شكل النظام الافتراضي على أي جهاز. */
.lang-switch-btn,
.lang-switch-select,
.currency-switch-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid rgba(255,255,255,.3);
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: left 8px center;
  color: #fff;
  font-size: 11px;
  padding: 3px 10px 3px 22px;
  border-radius: 999px;
  cursor: pointer;
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lang-switch-btn:hover {
  border-color: #fff;
}

.currency-switch-select option,
.lang-switch-select option {
  color: #111;
}

@media (max-width: 820px) {
  .header-switchers {
    gap: 6px;
  }

  .lang-switch-btn,
  .lang-switch-select,
  .currency-switch-select {
    font-size: 10px;
    padding: 2px 18px 2px 7px;
    background-position: left 6px center;
    max-width: 110px;
  }
}


/* ==============================
   RTL / LTR — functional mirroring for the small set of
   physical-direction (left/right) rules in this file. Most layout
   here is flex/grid, which already mirrors automatically with the
   `dir` attribute — these are the specific exceptions.
============================== */

[dir="ltr"] .desktop-search button {
  margin-left: 0;
  margin-right: 4px;
}

[dir="ltr"] .main-navigation a::after {
  right: auto;
  left: 0;
}

[dir="ltr"] .hero-mini-card {
  left: auto;
  right: 0;
}

[dir="ltr"] .trust-grid article {
  border-left: 0;
  border-right: 1px solid var(--line);
}

[dir="ltr"] .trust-grid article:last-child {
  border-right: 0;
}

[dir="ltr"] .banner-prev {
  right: auto;
  left: 24px;
}

[dir="ltr"] .banner-next {
  left: auto;
  right: 24px;
}

[dir="ltr"] .categories-menu-panel {
  right: auto;
  left: 0;
}

[dir="ltr"] .category-card {
  text-align: left;
}

/* سهم قوائم اللغة/العملة (خلفية SVG) بالعربي (RTL، الأساس) عالطرف
   الشمال — بالإنجليزي/التركي (LTR) لازم يرجع عالطرف اليمين. */
[dir="ltr"] .lang-switch-btn,
[dir="ltr"] .lang-switch-select,
[dir="ltr"] .currency-switch-select {
  background-position: right 8px center;
  padding: 3px 22px 3px 10px;
}

@media (max-width: 820px) {
  [dir="ltr"] .lang-switch-btn,
  [dir="ltr"] .lang-switch-select,
  [dir="ltr"] .currency-switch-select {
    background-position: right 6px center;
    padding: 2px 18px 2px 7px;
  }
}


/* ==============================
   PRODUCTS SECTION — SIDEBAR FILTER LAYOUT
   (نفس نمط الفلتر العمودي الجانبي المستخدم أصلاً بصفحة التصنيف
   category.html/style.css — منقول هون بنفس أسماء الكلاسات حتى
   يشتغل عليه home.js بدون أي تعديل بمنطق الفلترة).
============================== */

.category-store-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: 50px;
}

.category-main {
  min-width: 0;
}

.category-sidebar {
  position: sticky;
  top: 90px;
}

.category-sidebar-details {
  border: 1px solid #e5e5e1;
}

.category-sidebar-summary {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.category-sidebar-summary::-webkit-details-marker {
  display: none;
}

.category-sidebar-summary-icon {
  font-size: 13px;
}

.category-sidebar-body {
  display: block;
  padding: 22px 20px 26px;
}

.category-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 22px;
}

.category-sidebar-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.category-sidebar-clear {
  border: none;
  background: none;
  padding: 0;
  color: #85878a;
  font: inherit;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
}

.category-sidebar-clear:hover {
  color: #111214;
}

.category-sidebar-section {
  padding: 18px 0;
  border-top: 1px solid #ededeb;
}

.category-sidebar-section:first-of-type {
  padding-top: 0;
  border-top: none;
}

.category-sidebar-heading {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #111214;
  text-transform: uppercase;
}

.category-sidebar .category-stock-filter,
.category-sidebar .category-rating-filter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.category-sidebar .filter-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 8px 6px;
  border: none;
  background: none;
  color: #45474a;
  text-align: right;
}

[dir="ltr"] .category-sidebar .filter-chip {
  text-align: left;
}

.category-sidebar .filter-chip::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid #c7c7c3;
  background: #fff;
}

.category-sidebar .filter-chip:hover {
  color: #111214;
  border-color: transparent;
}

.category-sidebar .filter-chip:hover::before {
  border-color: #111214;
}

.category-sidebar .filter-chip.active {
  background: none;
  color: #111214;
  font-weight: 700;
}

.category-sidebar .filter-chip.active::before {
  background: #111214;
  border-color: #111214;
  background-image:
    linear-gradient(45deg, transparent 40%, #fff 40%, #fff 55%, transparent 55%),
    linear-gradient(135deg, transparent 55%, #fff 55%, #fff 70%, transparent 70%);
}

.category-sidebar .category-price-filter {
  flex-wrap: nowrap;
}

.category-sidebar .category-price-filter input {
  flex: 1;
  width: auto;
  min-width: 0;
  padding: 0 8px;
}

.category-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 30px;
}

.category-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.category-sort-label {
  white-space: nowrap;
  font-size: 11px;
  color: #777a7d;
}

#productSort {
  min-width: 210px;
  height: 48px;
  padding: 0 15px;
  border: 1px solid #dcdcd8;
  background: #fff;
  color: #111214;
  font: inherit;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

#productSort:focus {
  border-color: #111214;
}

.category-stock-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-chip {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid #dadad6;
  background: #fff;
  color: #55585b;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: .2s ease;
}

.filter-chip:hover {
  border-color: #111214;
  color: #111214;
}

.filter-chip.active {
  background: #111214;
  border-color: #111214;
  color: #fff;
}

.category-price-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-price-filter input {
  width: 90px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #dadad6;
  background: #fff;
  color: #111214;
  font: inherit;
  font-size: 12px;
}

.category-price-filter input:focus {
  border-color: #111214;
  outline: 0;
}

.category-price-filter span {
  color: #9a9c9f;
}

.category-rating-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 1000px) {

  .category-store-layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 30px;
  }

  .category-toolbar {
    align-items: center;
  }

}

@media (max-width: 820px) {

  .category-store-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .category-sidebar {
    position: static;
  }

  /* شريط "الفلاتر" + "الترتيب" فوق المنتجات — خفّفنا الحشو (padding)
     والمسافات هون حتى المنتجات تطلع أسرع بدون ما نمرر كتير قبلها. */
  .category-sidebar-summary {
    display: flex;
    justify-content: space-between;
    padding: 11px 16px;
  }

  .category-sidebar-summary::after {
    content: "+";
    font-size: 15px;
  }

  .category-sidebar-details[open] .category-sidebar-summary::after {
    content: "−";
  }

  .category-sidebar-body {
    display: revert;
    padding: 4px 16px 20px;
  }

  .category-toolbar {
    display: block;
    margin-bottom: 16px;
  }

  .category-toolbar-actions {
    margin-top: 10px;
  }

  #productSort {
    width: 100%;
    height: 42px;
  }

  .category-stock-filter {
    margin-top: 12px;
    overflow-x: auto;
  }

  .filter-chip {
    flex: 0 0 auto;
  }

  .category-price-filter {
    width: 100%;
  }

  .category-price-filter input {
    flex: 1;
    width: auto;
  }

  .category-rating-filter {
    overflow-x: auto;
  }

}

/* =========================================
   SHORTCUT TILES — بانرات صغيرة يديرها الأدمن
   (مثال: أفضل المنتجات، خواتم، مسابح ...)
   تظهر تحت البانر الرئيسي كصف من المربعات القابلة للنقر.
========================================= */

.shortcut-tiles-wrap {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
}

/* سكة أيقونات دائرية بسيطة (متل ترندیول) بدل بطاقات بحدود/خلفية —
   صف واحد قابل للتمرير أفقياً لو التصنيفات كتيرة، وبيتمركز بالنص لو
   قليلة وعم تلاقي مكانها بدون تمرير (safe center: fallback تلقائي
   لمحاذاة البداية بدل ما يقص أول عنصر لو المتصفح ما يدعمها). */
.shortcut-tiles-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  justify-content: safe center;
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 8px;
}

.shortcut-tiles-row::-webkit-scrollbar {
  display: none;
}

.shortcut-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  width: 74px;
  flex: 0 0 auto;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.shortcut-tile:hover {
  opacity: 0.75;
  transform: translateY(-2px);
}

.shortcut-tile-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--soft);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(17, 18, 20, 0.08);
}

.shortcut-tile-title {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 640px) {
  .shortcut-tiles-wrap {
    padding: 18px 0;
  }

  .shortcut-tiles-row {
    gap: 16px;
    justify-content: flex-start;
  }

  .shortcut-tile {
    width: 64px;
  }

  .shortcut-tile-image {
    width: 52px;
    height: 52px;
  }

  .shortcut-tile-title {
    font-size: 11px;
  }
}

/* =========================================
   PRODUCTS PAGINATION — الرئيسية (نفس نمط: زر سابق/تالي + رقم الصفحة)
========================================= */

.products-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

.products-pagination-btn {
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.products-pagination-btn:hover:not(:disabled) {
  border-color: var(--black);
  background: var(--bg);
}

.products-pagination-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.products-pagination-info {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

/* =========================================
   Product strip — شريط منتجات أفقي بأسهم (منتجات مميزة / الأكثر
   مبيعاً / عروض وتخفيضات بالرئيسية) بدل الشبكة الثابتة. نفس
   بطاقات المنتج تماماً (.product-card)، بس بصف أفقي واحد قابل
   للسحب مع سهمين للتنقل. .products-grid تبقى صنف افتراضي على
   العنصر (احتياط لو الجافاسكربت ما حمّل)، و.product-strip-track
   هون بتلغي شكل الشبكة وتحوّلها لصف أفقي.
========================================= */

.product-strip {
  position: relative;
}

.product-strip-track.products-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 18px;
  padding: 2px 2px 10px;
}

.product-strip-track.products-grid::-webkit-scrollbar {
  display: none;
}

.product-strip-track.products-grid > .product-card {
  flex: 0 0 auto;
  width: clamp(200px, 22vw, 268px);
  scroll-snap-align: start;
}

.product-strip-arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #eee;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  font-size: 20px;
  line-height: 1;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: opacity .2s ease, box-shadow .2s ease;
}

.product-strip-arrow:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}

.product-strip-arrow.is-disabled {
  opacity: 0;
  pointer-events: none;
}

.product-strip-prev {
  right: 6px;
}

.product-strip-next {
  left: 6px;
}

@media (max-width: 820px) {

  .product-strip-track.products-grid > .product-card {
    width: clamp(150px, 46vw, 190px);
  }

  /* على الموبايل السحب باللمس كافٍ — نخفي الأسهم حتى لا تزاحم
     البطاقات بمساحة صغيرة. */
  .product-strip-arrow {
    display: none;
  }

}

/* =========================================
   لما عدد منتجات الشريط (منتجات مميزة/الأكثر مبيعاً/عروض) يكون 4
   أو أقل، ما في داعي لسحب أفقي أصلاً بحجم شاشة أكبر من الموبايل —
   الصف بيتسع لهم كاملين. بهالحالة (كلاس product-strip-track--compact-N
   يتحط بالجافاسكربت حسب عدد المنتجات الفعلي — renderProductStrip
   بـ home.js — بدل الاعتماد على :has() بالـ CSS اللي ممكن ما يكون
   مدعوم بكل متصفح) نرجّع الشريط لنفس تخطيط الشبكة العادية
   (.products-grid) بنفس عرض الأعمدة والمسافات بالضبط متل قسم
   "منتجات مختارة لك" تحته، حتى يكونوا متناسقين بصرياً وما يبين فرق
   بعرض البطاقات أو المسافات بين القسمين. الأسهم بتختفي تلقائياً
   (updateArrows بالجافاسكربت بيضيف is-disabled لما ما يكون في
   overflow)، فما في داعي نخفيها يدوياً هون. السحب الأفقي (flex بعرض
   ثابت clamp() لكل بطاقة) يضل بس لما يكون فعلاً في أكتر من 4 منتجات
   ومحتاجة سحب (بدون كلاس compact) — وعلى الموبايل يضل سلوك البطاقات
   المسحوبة باللمس كما هو لكل الحالات (تصميم مقصود، مو جزء من هاي
   الملاحظة).
========================================= */
@media (min-width: 821px) {

  .product-strip-track.products-grid.product-strip-track--compact-1,
  .product-strip-track.products-grid.product-strip-track--compact-2,
  .product-strip-track.products-grid.product-strip-track--compact-3,
  .product-strip-track.products-grid.product-strip-track--compact-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: visible;
    gap: 34px 20px;
    padding: 0;
  }

  .product-strip-track.products-grid.product-strip-track--compact-1 {
    grid-template-columns: minmax(260px, 310px);
    justify-content: start;
  }

  .product-strip-track.products-grid.product-strip-track--compact-2 {
    grid-template-columns: repeat(2, minmax(260px, 310px));
    justify-content: start;
  }

  .product-strip-track.products-grid.product-strip-track--compact-3 {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
  }

  .product-strip-track.products-grid.product-strip-track--compact-1 > .product-card,
  .product-strip-track.products-grid.product-strip-track--compact-2 > .product-card,
  .product-strip-track.products-grid.product-strip-track--compact-3 > .product-card,
  .product-strip-track.products-grid.product-strip-track--compact-4 > .product-card {
    flex: initial;
    width: auto;
    scroll-snap-align: none;
  }

}

@media (min-width: 821px) and (max-width: 1000px) {

  .product-strip-track.products-grid.product-strip-track--compact-3,
  .product-strip-track.products-grid.product-strip-track--compact-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}