/* Add custom CSS styles below */ 
  body {
  background: linear-gradient(180deg, #2c91b8 0%, #21759a 100%) !important;
}
/* 🎨 خلفية الفوتر */
.store-footer {
  background-color: #2c91b8 !important;
  color: #ffffff !important;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* ✨ الروابط داخل الفوتر */
.store-footer a {
  color: #ffffff !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* 🔘 تأثير عند المرور على الروابط */
.store-footer a:hover {
  color: #000000 !important; /* يصير أسود عند المرور */
}

/* 📄 العناوين أو النصوص البارزة */
.store-footer h3, .store-footer h4, .store-footer h5 {
  color: #ffffff !important;
  font-weight: 700;
}

/* 🧱 ضبط القوائم أو النصوص الثانوية */
.store-footer .s-menu-footer-list, 
.store-footer .footer-content {
  color: #f5f5f5 !important;
  font-size: 15px !important;
}
/* 🎨 تعديل لون الفوتر بالكامل */
footer.store-footer {
  background-color: #2b3a49 !important; /* رمادي مزرق فخم */
  color: #ffffff !important; /* نص أبيض */
}

/* 📝 تنسيق النصوص والروابط */
footer.store-footer a,
footer.store-footer p,
footer.store-footer h3,
footer.store-footer span {
  color: #ffffff !important;
}

/* 🌟 عند تمرير الماوس */
footer.store-footer a:hover {
  color: #1d86b5 !important; /* أزرق الموقع */
}

/* 🧱 خط فاصل جميل فوق الفوتر */
footer.store-footer::before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, #1d86b5, #00b4d8);
  margin-bottom: 20px;
}
/* 🎨 خلفية متدرجة من الرمادي للأزرق */
footer.store-footer {
  background: linear-gradient(to bottom, #2b3a49 0%, #1d86b5 100%) !important;
  color: #ffffff !important;
  border-top: none !important;
  box-shadow: none !important;
}

/* 📝 تنسيق النصوص والروابط */
footer.store-footer a,
footer.store-footer p,
footer.store-footer h3,
footer.store-footer span {
  color: #ffffff !important;
}

/* 🌟 عند تمرير الماوس */
footer.store-footer a:hover {
  color: #00b4d8 !important;
}

/* 🚫 حذف الخط الفاصل الأزرق */
footer.store-footer::before {
  display: none !important;
}
.center-side {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.center-side h2 {
  background: transparent !important;
  color: #ffffff !important; /* يخلي النص أبيض */
  font-weight: 700 !important;
  border: none !important;
}
/* إزالة أي خط تحت أو فوق العناوين نهائيًا */
.s-block_title::after,
.s-block_title::before,
.s-block_title *::after,
.s-block_title *::before,
.center-side::after,
.center-side::before {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
  height: 0 !important;
  width: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

/* أمان إضافي — يعطل أي تنسيق يأتي من ملفات خارجية */
section.s-block [class*="title"]::after,
section.s-block [class*="title"]::before {
  all: unset !important;
  display: none !important;
  content: none !important;
}
/* ⚜️ تصميم راقي لبطاقة المنتج */
.product-entry {
  background: linear-gradient(180deg, #4682B4 0%, #2C648A 100%) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  padding: 18px !important;
  text-align: center !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.35s ease !important;
  border: none !important;
}

/* عند مرور الماوس */
.product-entry:hover {
  background: linear-gradient(180deg, #5A9BD5 0%, #2C648A 90%) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35) !important;
}

/* الصورة */
.product-entry__image img {
  border-radius: 14px !important;
  width: 100% !important;
  height: auto !important;
  transition: transform 0.4s ease !important;
}
.product-entry:hover .product-entry__image img {
  transform: scale(1.05) !important;
}

/* اسم المنتج */
.product-entry__title {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-top: 12px !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.25) !important;
}

/* السعر */
.product-entry__price {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
}

/* زر السلة */
.product-entry button,
.product-entry .add-to-cart {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin-top: 10px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}
.product-entry button:hover,
.product-entry .add-to-cart:hover {
  background: #ffffff !important;
  color: #2C648A !important;
  transform: scale(1.05) !important;
}

/* أيقونة السلة */
.product-entry button svg,
.product-entry .add-to-cart svg {
  fill: #ffffff !important;
  transition: fill 0.3s ease !important;
}
.product-entry button:hover svg,
.product-entry .add-to-cart:hover svg {
  fill: #2C648A !important;
}

/* المفضلة */
.product-entry .salla-product-fav-btn {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}
.product-entry .salla-product-fav-btn:hover {
  background: #ffffff !important;
  color: #2C648A !important;
}

/* كل النصوص أبيض */
.product-entry * {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* 🔧 إزالة الخلفية أو الطبقة السفلية اللي تشوه التصميم */
.product-entry__footer,
.product-entry footer,
.product-entry .s-product-footer,
.product-entry .product-footer {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* تأكد أن النص والسعر والسلة بدون خلفية */
.product-entry__title,
.product-entry__price,
.product-entry button,
.product-entry .add-to-cart {
  background: transparent !important;
}

/* إلغاء أي مساحة فارغة أو padding زايد */
.product-entry footer,
.product-entry__footer {
  padding: 0 !important;
  margin-top: 5px !important;
}

/* تصحيح التمركز وجعل الشكل أنظف */
.product-entry .s-product-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
/* تغيير لون عنوان المنتج إلى الأبيض */
h1.product-title {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.4); /* يعطيه لمعة فخمة وواضحة */
}
.product_description * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}
/* حاوية الكمية كلها */
.s-quantity-input-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #ffffff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background-color: #2c91b8 !important;
}

/* الأزرار + و - */
.s-quantity-input-button {
  background-color: #2c91b8 !important;
  border: none !important;
  color: #ffffff !important;
  width: 45px !important;
  height: 45px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: 0.3s ease !important;
}

.s-quantity-input-button svg path {
  fill: #ffffff !important;
}

/* الزر عند المرور عليه */
.s-quantity-input-button:hover {
  background-color: #2c91b8 !important;
}

.s-quantity-input-button:hover svg path {
  fill: #ffffff !important;
}

/* مربع الرقم */
.s-quantity-input-input {
  background-color: #2c91b8 !important;
  color: #ffffff !important;
  border: none !important;
  text-align: center !important;
  font-weight: bold !important;
  width: 55px !important;
  height: 45px !important;
  font-size: 18px !important;
}
/* تبويب تقييمات المنتج */
.accordion.tab--comments {
  background-color: #2c91b8 !important;
  color: #ffffff !important; /* يخلي النص أبيض */
  border-radius: 10px !important; /* يخلي الزوايا ناعمة */
  padding: 12px 0 !important;
  text-align: center !important;
}

/* عنوان التبويب داخل العنصر */
.accordion.tab--comments .accordion-title {
  color: #ffffff !important;
  font-weight: bold !important;
  font-size: 17px !important;
}
/* يجعل كل النصوص في الموقع باللون الأبيض */
body, body * {
  color: #ffffff !important;
}

/* لو فيه روابط (لتوضيحها أكثر) */
a {
  color: #ffffff !important;
}

/* نصوص الأزرار */
button, .btn, .s-button {
  color: #ffffff !important;
}
/* شريط التنقل العلوي */
nav.breadcrumbs.w-full.py-5.container {
  background-color: #2c91b8 !important;
  border-radius: 8px !important; /* يخلي الزوايا ناعمة */
  padding: 15px !important;
}

/* النصوص داخل الشريط */
nav.breadcrumbs.w-full.py-5.container a,
nav.breadcrumbs.w-full.py-5.container li,
nav.breadcrumbs.w-full.py-5.container span {
  color: #ffffff !important;
  font-weight: 500 !important;
}
/* تغيير لون خلفية المربع وإزالة أي حواف أو فراغات */
.bg-zinc-100 {
  background-color: #2c91b8 !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* لضمان امتداد اللون بالكامل حتى الأطراف */
.page-container {
  background-color: #2c91b8 !important;
}

/* لو فيه أي حدود داخلية */
.bg-zinc-100 * {
  border: none !important;
}
/* توحيد الهيدر العلوي مع الخلفية */
.header-components-all,
.header-components-top,
.header-top-page,
.store-header,
.bg-zinc-100 {
  background-color: #2c91b8 !important; /* غيّر اللون لو تبغى أبيض */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* إزالة أي فراغ علوي مزعج */
body,
html {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ضبط ارتفاع الهيدر */
header.header-components-all {
  height: auto !important;
  min-height: 50px !important;
  align-items: center !important;
  display: flex !important;
  justify-content: space-between !important;
}

/* الأيقونات والنصوص داخل الهيدر */
header.header-components-all * {
  color: #ffffff !important; /* يخلي النص أبيض */
}
/* الهيدر العلوي المثبت */
.header-components.header-components-home.fixed-pinned.animated.fixed-header {
  background-color: #2c91b8 !important;
  border: none !important;
  box-shadow: none !important;
}

/* تأكيد أن جميع الطبقات داخل الهيدر بنفس اللون */
.header-components-home.fixed-header * {
  background-color: transparent !important;
  color: #ffffff !important;
}

/* إزالة أي فراغ أبيض حوله */
header,
.header-components,
.header-components-home {
  margin: 0 !important;
  padding: 0 !important;
}
.fa-whatsapp {
  color: #25D366 !important;
}
:root {
  --brand-color: #2C91B8;
}

/* الهيدر المثبّت */
.header-components.fixed-pinned,
.header-components.fixed-pinned .inner,
.header-components.fixed-pinned .container,
.header-components.fixed-pinned::before,
.main-nav-container.fixed-pinned.animated,
.main-nav-container.fixed-pinned.animated .inner,
.page-header,
.page-header .container,
.inner.bg-inherit {
  background: var(--brand-color) !important;
  background-color: var(--brand-color) !important;
  border-color: var(--brand-color) !important;
}

/* لو فيه شفافيات/أوفرلاي */
.has-overlay-opacity,
.has-overlay-opacity::before {
  background: var(--brand-color) !important;
  background-color: var(--brand-color) !important;
  opacity: 1 !important; /* إذا تبي تلغي الشفافية */
}

/* نصوص وأيقونات الهيدر عشان التباين */
.header-components a,
.header-components .icon,
.page-header h1,
.page-header a,
.main-nav-container a {
  color: #fff !important;
}

/* لو فيه ظل أو حد أبيض */
.header-components,
.main-nav-container,
.page-header {
  box-shadow: none !important;
  border: none !important;
}
/* إخفاء زر المفضلة من جميع المنتجات */
button.btn-wishlist,
.product-entry .btn-wishlist,
.product-entry .btn-wishlist:before,
button[class*="wishlist"],
.salla-button-icon[data-action="wishlist"],
.product-actions .wishlist,
.product-entry .wishlist,
.product-entry .btn-wishlist.btn,
button.salla-button.btn-wishlist {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* تغيير خلفية بطاقة المنتج */
.product-entry,
.s-product-card,
.product-card,
.product-entry .card,
.product-entry .product-inner,
.s-product-card .card,
.product-entry-fit-type,
.product-entry-fit-type .product-cover {
  background-color: #2C91B8 !important;
  background: #2C91B8 !important;
  border-color: #2C91B8 !important;
}

/* يخلي النص والسعر باللون الأبيض للتباين */
.product-entry *,
.s-product-card *,
.product-card * {
  color: #fff !important;
}

/* لو تبغى لون الزر مختلف أو يندمج مع الخلفية */
.product-entry .btn,
.s-product-card .btn,
.product-card .btn {
  background-color: #fff !important;
  color: #2C91B8 !important;
  border: none !important;
}

/* تأثير بسيط لما تمرّ الفأرة */
.product-entry:hover,
.s-product-card:hover,
.product-card:hover {
  transform: scale(1.03);
  transition: all 0.3s ease-in-out;
}
/* توزيع عناصر الهيدر */
.header-components-home .header-components-inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* القسم الأيسر (الحساب - البحث - العملة) */
.header-components-home .flex.justify-end.items-center {
  order: 2 !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

/* القسم الأيمن (الشعار - القائمة) */
.header-components-home .flex.justify-start.items-center {
  order: 1 !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

/* تأكد من المسافات المتناسقة */
.header-components-home .header-components-inner > div {
  flex: 1 !important;
}

/* تصحيح المحاذاة الداخلية */
.header-components-home .left-side,
.header-components-home .right-side {
  display: flex !important;
  align-items: center !important;
}
/* نقل الشريط العلوي بأكمله إلى أقصى اليسار */
div.header-components-top.header-op-page {
  position: absolute !important;
  left: 15px !important;
  right: auto !important;
  top: 15px !important;
  display: flex !important;
  justify-content: flex-start !important;
  z-index: 9999 !important;
  width: auto !important;
}

/* تأكيد أن الهيدر يسمح بالحركة */
.header-components-all,
.header-components-home {
  position: relative !important;
}
/* نقل الـ store-header إلى أقصى اليمين */
div.store-header.w-full.top-0.rtl\:left-0.ltr\:right-0.z-10 {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: 0 !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  justify-content: flex-end !important;
  display: flex !important;
}

/* تأكيد أن باقي الهيدر ما يمنع الحركة */
.header-components-all {
  position: relative !important;
  z-index: 1 !important;
}
/* تبديل أماكن زر القائمة والسلة */

/* ننقل زر السلة إلى اليسار */
a.s-cart-summary-wrapper {
  order: -1 !important;
}

/* ننقل زر القائمة (الثلاث شرطات) إلى اليمين */
button.lg\:hidden.mburger.mburger--collapse {
  order: 3 !important;
}

/* نضبط التوزيع داخل الـ flex */
.header-components-inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
[class*="header-components"] [class*="flex"] {
  flex-direction: row-reverse !important;
}
/* 🎯 ترتيب مثالي للهيدر بدون تداخل أو طفو */
.header-components-inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 25px !important;
  gap: 15px !important;
}

/* 🔄 نبدّل مواقع الثلاث شرطات والسلة */
button.lg\:hidden.mburger.mburger--collapse {
  order: 3 !important; /* يمين */
  margin-right: 10px !important;
  position: relative !important;
  z-index: 999 !important;
}

a.s-cart-summary-wrapper {
  order: 1 !important; /* يسار */
  margin-left: 10px !important;
}

/* ⚙️ ترتيب باقي العناصر */
.header-icon-button,
.btn-currency,
.user-login {
  order: 2 !important;
}

/* 🎨 تحسين شكل الأزرار */
.header-icon-button, 
button.lg\:hidden.mburger.mburger--collapse, 
a.s-cart-summary-wrapper {
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  width: 40px !important;
}

/* 📱 ضبط العرض للجوال */
@media (max-width: 768px) {
  .header-components-inner {
    gap: 10px !important;
    padding: 10px 15px !important;
  }

  button.lg\:hidden.mburger.mburger--collapse,
  a.s-cart-summary-wrapper {
    height: 36px !important;
    width: 36px !important;
  }
}

/* 🧩 إصلاح المربع الأبيض (القائمة المنسدلة) */
.mobile-menu,
.drawer-menu,
.sidebar-menu {
  position: absolute !important;
  top: 70px !important; /* نزلها تحت الثلاث شرطات */
  right: 20px !important; /* محاذاة الزر */
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
  z-index: 9999 !important;
  padding: 10px 15px !important;
  width: 250px !important;
}

/* ✨ تحسين شكل العناصر داخل القائمة */
.mobile-menu a,
.drawer-menu a,
.sidebar-menu a {
  display: block !important;
  padding: 8px 10px !important;
  color: #333 !important;
  font-size: 15px !important;
  border-radius: 6px !important;
  transition: background 0.2s ease;
}

.mobile-menu a:hover,
.drawer-menu a:hover,
.sidebar-menu a:hover {
  background: #f2f2f2 !important;
}
/* 🎯 تنسيق القوائم المنسدلة بالكامل */
.sub-menu, 
ul.sub-menu, 
.main-menu .sub-menu, 
.main-menu ul ul {
  background: rgba(44, 145, 184, 0.95) !important; /* أزرق أنيق من اختيارك */
  border-radius: 10px !important;
  padding: 10px 0 !important;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
  z-index: 9999 !important;
}

/* 📄 تعديل عناصر القائمة */
.sub-menu li a,
ul.sub-menu li a {
  color: #ffffff !important; /* النص أبيض واضح */
  display: block !important;
  padding: 8px 15px !important;
  font-size: 15px !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}

/* ✨ التأثير عند تمرير الماوس */
.sub-menu li a:hover,
ul.sub-menu li a:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  transform: translateX(-3px) !important;
}

/* 🧭 تحسين مكان القائمة (تحت الزر مباشرة) */
.main-menu li.has-children .sub-menu {
  top: 100% !important;
  right: 0 !important;
  position: absolute !important;
  min-width: 220px !important;
}