/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
:root {
  --gold: #e6b241;
  --purple: #4E1367;
  --black: #000;
  --white: #fff;
}


/* =========================================
   🧾 2) العناوين والنصوص العامة
========================================= */

h1, h2, h3, h4, h5, h6 {
  color: var(--gold) !important;
  font-weight: 600;
}

.Moa_singlePage,
.Moa_singlePage .main-content h1,
.Moa_singlePage .main-content b,
.form-label,
.s-list-tile-item-content,
.Moa_title-content h1,
.Moa_title-content p {
  color: var(--white) !important;
}


/* =========================================
   🏷️ 3) بطاقات الأسعار (المنتجات)
========================================= */

.s-product-card-price {
  color: #000 !important;
  font-weight: 600;
  font-size: 18px;
  text-shadow: none !important;
}

.s-product-card-entry .s-product-card-price {
  color: #000 !important;
}

.s-product-price,
.product-price,
.Moa_singlePage .s-product-price {
  color: #000 !important;
  font-size: 20px;
  font-weight: 600;
}

.s-product-card-discount,
.s-product-price-discount {
  color: var(--gold) !important;
  font-weight: 700;
}

.s-product-card-old-price,
.s-product-price-old {
  color: #999 !important;
  text-decoration: line-through;
}


/* =========================================
   🛒 4) الأزرار (إضافة للسلة)
========================================= */

.s-product-card-entry .s-button-btn {
  background-color: var(--black) !important;
  border-color: var(--black) !important;
}


/* =========================================
   🛍️ 5) أيقونة السلة
========================================= */

.s-cart-summary-icon {
  display: unset !important;
}

.s-cart-summary-icon svg  {
  fill: #fbbf24 !important;
}

salla-cart-summary {
  background: transparent !important;
}
salla-cart-summary svg path {
  fill: #fbbf24 !important;
}
#mainnav  salla-cart-summary .s-cart-summary-wrapper{
  display: none !important;
}

/* =========================================
   📱 6) القائمة الجانبية (الموبايل)
========================================= */

#mobile-menu {
  background-color: var(--purple) !important;
  border: 2px solid var(--purple) !important;
}

#mobile-menu a {
  color: var(--gold) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#mobile-menu a:hover {
  color: #c8a140 !important;
}


/* =========================================
   🧩 7) عناصر مساعدة عامة
========================================= */

.bg-scprimary,
.feature-text {
  color: var(--gold) !important;
}

.s-quantity-input-input {
  color: var(--gold) !important;
  text-align: center;
}


/* =========================================
   🚚 8) أيقونات الخدمات (الشحن وغيره)
========================================= */

i.sicon-shipping-fast {
  background-color: var(--gold) !important;
  color: white;
}


/* =========================================
   ⚠️ 9) التحكم الخاص بالنصوص
========================================= */

.s-product-card-price span,
.s-product-price span,
.product-price span {
  color: #FF6347 !important;
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  color: var(--gold) !important;
}


/* =========================================
   🎯 10) Toast Notification (سلة)
========================================= */

/* منع الوميض عند تحميل الصفحة */
salla-add-product-toast:not(:defined) {
    display: none !important;
}

/* إخفاء افتراضي */
salla-add-product-toast {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* إظهاره عند التفعيل من سلة */
salla-add-product-toast.hydrated,
salla-add-product-toast[style*="display: block"],
salla-add-product-toast[style*="opacity: 1"] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
a.pr-4.py-2.mb-4.rounded-xl.flex-1 {
  background-color: #ffffff;
  border: 2px solid #4E1367;
  box-shadow: 0 4px 12px rgba(78, 19, 103, 0.15);
}
.s-product-options-thumbnails-wrapper div p {
  color: #ffffff !important;
}
h1.text-gray-900 a {
  color: #ffffff !important;
}
#free-shipping-msg {
  color: #d62828 !important;
  font-size: 18px;
}
.flex.justify-between.mb-5 span.text-gray-500 {
  color: #e6b241 !important;
  font-size: 18px;
}
.flex.justify-between.mb-5 span.text-gray-400 {
  color: #e6b241 !important;
  font-size: 20px;
}
.flex.justify-between.mb-5 b {
  color: #d62828 !important;
  font-size: 18px;
}
.s-product-options-option-label b,
.s-product-options-option-label span {
  color: #ffffff !important;
}
.s-product-options-grid-mode .s-product-options-grid-mode-span {
  color: #ffffff !important;
}
#product-filter {
  color: #e6b241 !important;
}

#product-filter option {
  color: #e6b241;
}
.s-social-icon svg path {
  fill: #e6b241 !important;
}
.nestedmenu {
  color: #e6b241 !important;
}
h1 {
  color: #e6b241 !important;
  -webkit-text-fill-color: #e6b241 !important;
}
#M_titles-22 salla-count-down {
  --counter-color: #e6b241 !important;
}

#M_titles-22 .s-count-down-item-value,
#M_titles-22 .s-count-down-item-label {
  color: #e6b241 !important;
  opacity: 1 !important;
}
#M_titles-22 * {
  color: #e6b241 !important;
  opacity: 1 !important;
}
.s-product-card-sale-price span {
  position: relative;
  color: red !important;
  font-size: 18px !important;
  opacity: 0.8;
  text-decoration: none !important; /* إلغاء الشطب القديم */
}

/* الشطب الجديد أفقي */
.s-product-card-sale-price span::after {
  content: "";
  position: absolute;
  top: 35%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000; /* لون الشطب */
}
#mobile-menu,
.mm-ocd__content {
  background-color: #4E1367 !important;
}
[data-mm-spn-title="القائمة الرئيسية"] {
  color: #e6b241 !important;
  font-size: 18px !important;
  font-weight: bold;
}
.s-breadcrumb-item:first-child a {
  color: #e6b241 !important;  /* ذهبي */
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
}
.s-breadcrumb-item:last-child {
  color: #e6b241 !important; /* ذهبي */
  font-size: 16px;
  font-weight: bold;
}
/* خلفية اللودنج */
.loader-init {
  background-color: #4E1367 !important;
}

/* الطبقة اللي تغطي (نفس اللون) */
.loader-init .loadermas {
  background-color: #4E1367 !important;
}

/* الشعار يبقى واضح */
.loader-init .loader-logo {
  opacity: 1 !important;
  filter: none !important;
}
/* تغيير اللون الأساسي للأزرار (ومنها تأكيد الدفع) */
:root {
  --color-primary: #d62828 !important;
}
/* إظهار النافذة بدون كسر تصميمها */
.s-add-product-toast {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 9999 !important;
}

/* مهم: لا نغير position ولا display */
/* جعل نص نافذة إضافة للسلة باللون الأسود */
.s-add-product-toast,
.s-add-product-toast * {
  color: #000000 !important;
  left: 0 !important
}
/* إجبار النص يكون أسود */
.s-button-primary .s-button-text {
  color: #000000 !important;
}
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
/* إخفاء الأيقونات القديمة */
.s-social-icon svg {
  display: none;
}

/* تجهيز المكان */
.s-social-icon {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
}

/* الأيقونة الجديدة */
.s-social-icon::before {
  font-family: "Font Awesome 6 Brands";
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* انستقرام */
a[href*="instagram"] .s-social-icon::before {
  content: "\f16d";
}
/* سناب - خلفية صفراء */
a[href*="snapchat"] {
  background: #FFFC00 !important;
  border-radius: 50%;
  position: relative;
}

/* الشبح */
a[href*="snapchat"] .s-social-icon::before {
  content: "\f2ac";
  color: #ffffff; /* أبيض */

  /* حواف سوداء */
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

/* تيك توك */
a[href*="tiktok"] .s-social-icon::before {
  content: "\e07b";
}

/* فيسبوك */
a[href*="facebook"] .s-social-icon::before {
  content: "\f39e";
}
/* إخفاء الأيقونات القديمة */
.s-social-icon svg {
  display: none !important;
}

/* تجهيز */
.s-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* انستقرام */
a[href*="instagram"] .s-social-icon::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: url("https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/instagram.svg") no-repeat center;
  background-size: contain;
  filter: invert(1);
}

/* سناب */
a[href*="snapchat"] .s-social-icon::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: url("https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/snapchat.svg") no-repeat center;
  background-size: contain;
  filter: invert(1);
}

/* تيك توك */
a[href*="tiktok"] .s-social-icon::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: url("https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/tiktok.svg") no-repeat center;
  background-size: contain;
  filter: invert(1);
}

/* فيسبوك */
a[href*="facebook"] .s-social-icon::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: url("https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/facebook.svg") no-repeat center;
  background-size: contain;
  filter: invert(1);
}
/* ===== الأساس ===== */
.s-social-link a {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

/* نخلي الأيقونات فوق */
.s-social-link a svg {
  position: relative;
  z-index: 1;
}

/* ===== فيسبوك ===== */
.s-social-link a[title="facebook"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #1877F2;
  z-index: 0;
}

/* ===== انستغرام ===== */
.s-social-link a[title="instagram"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, #feda75, #d62976, #962fbf);
  z-index: 0;
}

/* ===== سناب ===== */
.s-social-link a[title="snapchat"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #F5E600;
  z-index: 0;
}

/* ===== تيك توك ===== */
.s-social-link a[title="tiktok"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000000;
  z-index: 0;
}
/* حركة عامة */
.s-social-link a {
  transition: all 0.3s ease;
}

/* تكبير */
.s-social-link a:hover {
  transform: scale(1.15);
}

/* Glow لكل منصة */
.s-social-link a[title="facebook"]:hover {
  box-shadow: 0 0 15px #1877F2;
}

.s-social-link a[title="instagram"]:hover {
  box-shadow: 0 0 15px #d62976;
}

.s-social-link a[title="snapchat"]:hover {
  box-shadow: 0 0 15px #FFFC00;
}

.s-social-link a[title="tiktok"]:hover {
  box-shadow: 0 0 15px #000000;
}
/* إصلاح بلوك تواصل معنا (الموبايل) */
.store-footer .flex-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* توسيط عنوان تواصل معنا */
.store-footer .flex-center h3 {
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

/* توسيط أيقونات السوشال */
.store-footer .s-social-list {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* إزالة أي انحراف */
.store-footer .s-social-list li {
    float: none !important;
}

/* تأكيد التوسيط */
.store-footer .block.md\:hidden {
    text-align: center !important;
}
/* =========================================
   👁️ كود "يشاهد المنتج الآن"
   هذا الكود يخص:
   - تمييز عداد المشاهدين (data-random-number)
   - تلوين أيقونة السلة داخل زر الشراء
   - إضافة تأثير حركة (Glow Pulse) على أيقونة السلة
========================================= */

/* 🟡 تمييز عداد المشاهدين */
html body b[data-random-number] {
  background: linear-gradient(135deg, #d4af37, #f7e08a) !important;
  color: #1a1a1a !important;
  font-weight: 900 !important;
  padding: 2px 6px;
  border-radius: 6px;
  display: inline-block;
}

/* 🟢 لون أيقونة السلة داخل زر الشراء الأساسي */
.s-button-primary .sicon-shopping-basket {
  color: #168F87 !important;
}

/* ✨ تأثير الحركة (نبض خفيف للأيقونة) */
@keyframes glowPulse {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 0px #168F87);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px #168F87);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 0px #168F87);
  }
}

/* 🟢 تطبيق الحركة على أيقونة السلة داخل الزر الأساسي */
button.s-button-primary i.sicon-shopping-basket {
  color: #168F87 !important;
  animation: glowPulse 2s infinite ease-in-out;
}
/* خلفية تسجيل الدخول (Login Modal Background) */
.s-modal-body {
  background: #168F87 !important;
  color: #fff !important;
}

/* رأس نافذة تسجيل الدخول */
.s-modal-header {
  background: #168F87 !important;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

/* زر الإغلاق (X) */
.s-modal-close svg {
  fill: #000 !important;
}
/* =========================================
   🎯 خلفية المسارتسجيل الدخول (Breadcrumb)
   ========================================= */
.breadcrumbs {
  background: #4E1367 !important;
  padding: 10px 15px;
  border-radius: 8px;
}

nav.breadcrumbs::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100vw;
  width: 300vw;
  height: 100%;
  background: #4E1367;
  z-index: -1;
}

nav.breadcrumbs {
  position: relative;
  z-index: 1;
}


/* =========================================
   💰 محفظة العميل فقط (salla-wallet)
========================================= */

.main-content salla-wallet {
  background: #4E1367 !important;
  padding: 15px;
  border-radius: 10px;
}

/* 💰 رصيد المحفظة (10 ريال) */
.main-content salla-wallet .s-wallet-table-balance-container div div:first-child {
  color: #e6b241 !important;
  font-weight: bold;
}

/* 🔴 نص "رصيد المحفظة" */
.main-content salla-wallet .font-normal {
  color: red !important;
}

/* 🟡 "سجل العمليات" */
.main-content salla-wallet h2 {
  color: #e6b241 !important;
}

/* 🔴 عناوين الجدول فقط */
.main-content salla-wallet thead th {
  color: red !important;
}

/* 🔴 بيانات الجدول بالكامل */
.main-content salla-wallet tbody td {
  color: red !important;
}


/* =========================================
   🔧 إضافات بدون لمس تصميمك
========================================= */

/* 💰 إصلاح لون الريال داخل المحفظة فقط */
.main-content salla-wallet .sicon-sar,
.main-content salla-wallet .sicon-sar * {
  color: #e6b241 !important;
  fill: #e6b241 !important;
}

/* 📏 تحكم بحجم النصوص داخل المحفظة */
.main-content salla-wallet {
  font-size: 16px !important;
}

/* 📏 حجم عنوان "سجل العمليات" */
.main-content salla-wallet h2 {
  font-size: 15px !important;
}

/* 📏 حجم عناوين الجدول */
.main-content salla-wallet thead th {
  font-size: 15px !important;
}

/* 📏 حجم بيانات الجدول */
.main-content salla-wallet tbody td {
  font-size: 16px !important;
}
/* =========================================
   💰 قسم الكاش باك (Cashback Banner)
   هذا الكود مسؤول عن تصميم وعرض الكاش باك داخل صفحة المنتج
   يشمل:
   - تنسيق الحاوية الخارجية
   - لون النص
   - شكل السعر داخل خلفية ذهبية
   - تنسيق أيقونة الريال
   - وبعض التأثيرات على ظهور السعر
========================================= */

p:has(.s-cashback-banner-label) {
  background: #ffffff !important;
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ⚫ النص العادي */
.s-cashback-banner-label {
  color: #000000 !important;
}

/* 🟡 المربع الذهبي ثابت + بدون حركة */
.s-cashback-banner-value {
  background: linear-gradient(135deg, #d4af37, #f7e08a) !important;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 💰 التأثير فقط على الرقم (اختفاء/ظهور) */
.s-cashback-banner-value {
  animation: none !important;
}

.s-cashback-banner-value > * {
  animation: cashbackFade 2s infinite ease-in-out;
}

/* ✨ تأثير ظهور واختفاء */
@keyframes cashbackFade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

/* 🔴 الريال */
.s-cashback-banner-value i,
.s-cashback-banner-value i * {
  color: #d62828 !important;
  fill: #d62828 !important;
}
.s-cashback-banner-value i {
  color: #ffffff !important;
  fill: #ffffff !important;

  font-size: 1.2em !important; /* تكبير بسيط */
  vertical-align: middle !important;

  position: relative;
  top: -1px;

  animation: none !important;
  transform: none !important;
}
/* 📍 توسيط مربع الكاش باك في الصفحة */
p:has(.s-cashback-banner-label) {
  display: flex !important;
  justify-content: center !important;
  margin: 10px auto !important;
}
/* =========================================
   🎯 هذا الكود يخص أزرار المقارنة الجانبية للمنتج
   (الرؤية السريعة / المفضلة / المقارنة / المنتجات المشابهة)

   يقوم بتوحيد لون جميع الأيقونات داخل حاوية
   .Mws_opsbtns إلى اللون الأبيض فقط
   مع الحفاظ على شكل الأيقونات وعدم تغيير التصميم
   أو التأثير على باقي الموقع
========================================= */

.Mws_opsbtns {
  --color-primary: #ffffff !important;
}

/* أيقونات تعتمد fill */
.Mws_opsbtns svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* أيقونات font (القلب) */
.Mws_opsbtns i {
  color: #ffffff !important;
}

/* فقط أيقونات stroke (مثل المقارنة) */
.Mws_opsbtns button[product-id] svg path {
  stroke: #ffffff !important;
  fill: none !important;
}


/* =========================================
   🎯 حركة ذكية حسب الجهاز صور الاقسام
   - كمبيوتر: سريعة
   - جوال: ناعمة وخفيفة
========================================= */


/* =========================
   🖥️ الكمبيوتر
========================= */
@media (min-width: 769px) {

  .gr.aft_line .item img.main {
    transition: transform 0.15s ease;
    will-change: transform;
  }

  .gr.aft_line .item:hover img.main {
    transform: scale(1.08);
  }

  .gr.aft_line .item {
    transition: transform 0.15s ease;
  }

  .gr.aft_line .item:hover {
    transform: translateY(-3px);
  }
}


/* =========================
   📱 الجوال
========================= */
@media (max-width: 768px) {

  .gr.aft_line .item img.main {
    transition: transform 0.35s ease;
    will-change: transform;
  }

  .gr.aft_line .item:hover img.main {
    transform: scale(1.04);
  }

  .gr.aft_line .item {
    transition: transform 0.3s ease;
  }

  .gr.aft_line .item:hover {
    transform: translateY(-1px);
  }
}


/* =========================================
   ⚡ إيقاف الأنيميشنات الثقيلة فقط اكواد تحسين الاداء للجوال 
   - بدون لمس "يشاهد المتجر الآن"
========================================= */


/* ❌ السلة + الكاش باك فقط */
.s-button-primary i,
.s-cashback-banner-value > * {
  animation: none !important;
}


/* ❌ الكروت (إلغاء الهوفر الثقيل فقط) */
.s-product-card:hover,
.gr.aft_line .item:hover {
  transform: none !important;
  transition: none !important;
}


/* ❌ السوشال */
.s-social-link a,
.s-social-icon {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* =========================================
   ⚡ تحسين أداء الجوال - مشكلة hover / repaint
   بدون تغيير شكل الكمبيوتر
========================================= */

@media (max-width: 768px) {

  /* ❌ إيقاف hover بالكامل على الجوال (أهم خطوة للأداء) */
  .s-product-card:hover,
  .gr.aft_line .item:hover,
  .s-social-link a:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* ❌ تقليل الضغط على الصور */
  .s-product-card img,
  .gr.aft_line .item img.main {
    transform: none !important;
    transition: none !important;
  }

  /* ❌ منع أي إعادة رسم غير ضرورية */
  * {
    will-change: auto !important;
  }
}

/* =========================================
   ⚡ تقليل استخدام !important في العناصر الداخلية
   بدون تغيير الشكل
========================================= */

/* النصوص الأساسية (كنا مستخدمين !important بدون حاجة) */
h1, h2, h3 {
  color: #e6b241;
}

/* الأسعار (نخليها طبيعية داخل النظام) */
.s-product-card-price,
.s-product-price {
  color: #000;
}

/* السوشال (نخلي override فقط عند الحاجة) */
.s-social-icon {
  color: inherit;
}

/* المحفظة (نخفف التكرار) */
.main-content salla-wallet {
  color: #fff;
}

/* =========================================
   ⚡ تبسيط الـ selectors العميقة فقط
   - بدون تغيير الشكل
   - تحسين سرعة الرندر
========================================= */


/* 🟢 المحفظة (تبسيط الوصول) */
salla-wallet {
  background: #4E1367;
  color: #fff;
}

/* بدل التعمق */
.s-wallet-table-balance-container > div:first-child {
  color: #e6b241;
}

/* 🟢 الجدول (تقليل العمق) */
salla-wallet th,
salla-wallet td {
  color: inherit;
}

/* 🟢 تقليل الاعتماد على main-content */
.main-content salla-wallet {
  padding: 15px;
  border-radius: 10px;
}

/* =========================================
   ⚡ تحسين أداء السوشال ميديا
   - تقليل repaint
   - بدون تغيير الشكل
========================================= */


/* ❌ إيقاف hover الثقيل */
.s-social-link a:hover {
  transform: none !important;
  box-shadow: none !important;
}


/* ❌ تقليل تأثير SVG hidden (منع إعادة حساب غير ضرورية) */
.s-social-icon svg {
  display: none !important;
  pointer-events: none;
}


/* ❌ تثبيت الأيقونات بدون repaint */
.s-social-link a {
  will-change: auto !important;
  transform: none !important;
  transition: none !important;
}


/* 🟡 تحسين عرض الأيقونات فقط */
.s-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================
   ⚡ استبدال :has() لتخفيف الحمل
   - بدون تغيير شكل الكاش باك
========================================= */


/* بدل p:has() */
.cashback-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  padding: 6px 10px;
  border-radius: 8px;
}

/* =========================================
   ⚡ تقليل transitions الثقيلة
   - تحسين أداء الجوال
   - بدون تغيير الشكل
========================================= */


/* ❌ إيقاف transition في العناصر الثقيلة فقط */
.s-social-link a,
.s-product-card,
.gr.aft_line .item {
  transition: none !important;
}


/* 🟡 ترك transition خفيف فقط للأزرار المهمة */
button,
.s-button-primary {
  transition: background-color 0.2s ease, color 0.2s ease;
}
@media (max-width: 768px) {
    [dir=rtl] .marquee--inner {
        animation: marquee-rtl 50s linear infinite;
    }

}
[dir=rtl] .marquee--inner {
        animation: marquee-rtl 30s linear infinite;
    }
/* =========================================
   🎯 خلفية السلايدر منتجات مميزة بالكامل (بانر المنتجات)
   لون المتجر الموف
========================================= */

section.s-block--products-slider {
  background-color: #4E1367 !important;
  padding: 20px 0;
}

/* داخل السلايدر نفسه */
section.s-block--products-slider .swiper {
  background-color: transparent !important;
}

/* wrapper */
section.s-block--products-slider .swiper-wrapper {
  background-color: transparent !important;
}
section.s-block--products-slider {
  background: #4E1367 !important;
}
/* =========================================
   🎯 خلفية السلايدر الحقيقي (حل نهائي)
========================================= */

/* الحاوية الأب للسلايدر */
section:has(.swiper-wrapper.s-slider-swiper-wrapper) {
  background-color: #4E1367 !important;
}

/* منع تأثير الخلفية على الداخل */
.swiper-wrapper.s-slider-swiper-wrapper,
.s-products-slider-card {
  background-color: transparent !important;
}
/* إخفاء زر التاب الفاضي (المربع الأحمر) */
button.tab-trigger.is-active.s-button-element.s-button-btn.s-button-outline.s-button-primary-outline {
    display: none !important;
}
/* التحكم الكامل بالسعر القديم */
.text-gray-500.line-through {
    text-decoration: none !important;
    position: relative;

    /* 🎯 تحكم بالنص */
    color: #d32f2f !important;
    font-size: 25px;       /* 👈 غيّر الحجم */
    font-weight: 700;      /* 👈 سماكة الخط */
}

/* 🎯 الشطب المخصص */
.text-gray-500.line-through::after {
    content: "";
    position: absolute;

    /* 👇 التحكم بالمكان */
    left: 0;
    right: 0;
    top: 50%;              /* 👈 نزّل أو ارفع الشطب */

    /* 👇 التحكم بالشكل */
    height: 4px;           /* 👈 سماكة الخط */
    background-color: #000;

    transform: translateY(-50%);
}
/* نص "وصف المنتج" فقط */
.s-tabs-header-item span {
    color: #ffffff !important;
}