/* Add custom CSS styles below */ 
/* ===== آنغاتي — ذهبي في الهيدر والفوتر ===== */

/* الهيدر: التدرج على الحاوية الأم ليمر متصلاً */
header.store-header {
  background: linear-gradient(135deg, #F6E17F 0%, #B08F2F 100%) !important;
}

/* إزالة الأبيض المفروض من كلاس bg-white */
header.store-header .main-nav-container,
header.store-header .top-navbar {
  background: transparent !important;
}

/* حقل البحث: أبيض شبه معتم ليبقى واضحاً فوق الذهبي */
header.store-header .s-search-input {
  background: rgba(255, 255, 255, 0.88) !important;
}

/* الفوتر: الطبقتان معاً */
footer.store-footer,
footer.store-footer .store-footer__inner {
  background: linear-gradient(135deg, #F6E17F 0%, #B08F2F 100%) !important;
}

/* نص الفوتر: Charcoal للتباين فوق الذهبي */
footer.store-footer,
footer.store-footer a,
footer.store-footer p,
footer.store-footer li,
footer.store-footer h3 {
  color: #2d2d2d !important;
}

/* ⚠️ ضروري: خلفية بيضاء لقائمة الجوال المنسدلة */
@media (max-width: 1024px) {
  header.store-header .main-nav-container .inner {
    background: #ffffff !important;
  }
}
/* خلفية المتجر — التدرج الذهبي من هوية آنغاتي */
body {
  background: linear-gradient(160deg, #faf8f4 0%, #d1b995 100%);
  background-attachment: fixed;
}
/* ===== آنغاتي — توحيد الهوية عبر الصفحات ===== */

/* ١ — مسار التنقل (breadcrumbs) */
nav.breadcrumbs .s-breadcrumb-item a { color: #2d2d2d !important; }
nav.breadcrumbs .s-breadcrumb-item a:hover { color: #7B327F !important; }
nav.breadcrumbs .s-breadcrumb-arrow { color: #B08F2F !important; }

/* ٢ — عنوان صفحات التصنيفات + شريط ذهبي تحته */
.container--products-list .main-content h1 {
  color: #7B327F !important;
  position: relative;
  padding-bottom: 10px;
}
.container--products-list .main-content h1::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;   /* يمين تلقائياً في RTL */
  bottom: 0;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, #F6E17F, #B08F2F);
}

/* ٣ — بطاقات المنتجات في صفحات القوائم */
.s-product-card-entry {
  background-color: #faf8f4 !important;
  border-width: 1px !important;      /* منفصلة — الاختصار border لا يغلب */
  border-style: solid !important;
  border-color: #EDE7DC !important;
  border-radius: 12px !important;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.s-product-card-entry:hover {
  border-color: #B08F2F !important;
  box-shadow: 0 6px 20px rgba(123, 50, 127, .10) !important;
  transform: translateY(-3px);
}
.s-product-card-image { background-color: #ffffff !important; }
.s-product-card-content-title,
.s-product-card-content-title a { color: #2d2d2d !important; }
.s-product-card-entry:hover .s-product-card-content-title,
.s-product-card-entry:hover .s-product-card-content-title a { color: #7B327F !important; }

.s-product-card-sale-price { color: #7B327F !important; font-weight: 700 !important; }
/* ===== آنغاتي — إصلاح وميض صورة المنتج ===== */

/* 1) حجز مساحة الصورة قبل تهيئة السلايدر — يمنع قفزة التخطيط */
salla-slider.details-slider:not(.hydrated) {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* 2) إخفاء الرسم المبكر الذي يسبب الوميض */
salla-slider.details-slider:not(.hydrated) img {
  opacity: 0;
  animation: angatiFailsafe 0s linear 3s forwards;  /* شبكة أمان */
}

/* 3) ظهور تدريجي ناعم بعد اكتمال التهيئة */
salla-slider.details-slider.hydrated img {
  opacity: 1;
  transition: opacity .28s ease;
}

/* شبكة الأمان: لو تعطّل الجافاسكربت، تظهر الصورة بعد 3 ثوانٍ رغماً عن ذلك */
@keyframes angatiFailsafe { to { opacity: 1; } }
/* ===== آنغاتي — إصلاح الانزلاق الأفقي في الجوال ===== */

/* 1) منع تمرير الصفحة أفقياً — الثيم يضبطه على body فقط */
html { overflow-x: hidden; }

/* 2) تقييد درج قائمة الجوال داخل حدود الشاشة (المتسبب الفعلي) */
.mm-ocd {
  max-width: 100vw !important;
  width: 100% !important;
}
/* إخفاء "نهاية المحتوى" أسفل قوائم المنتجات */
.s-infinite-scroll-last,
.infinite-scroll-last {
  display: none !important;
}