/* إضافة الخط العربي */
@font-face {
    font-family: 'Avenir Arabic';
    src: url('https://www.dropbox.com/scl/fi/whte6meukzb7wh4rtaeiz/alfont_com_AlFont_com_AvenirArabic-Medium.woff?rlkey=nhiebm4ov1saxwymv3l7dkmvz&raw=1') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* إضافة الخط الإنجليزي */
@font-face {
    font-family: 'Futura-Book';
    src: url('https://www.dropbox.com/scl/fi/sbc4mt2f6k6msdr1kve03/Futura-Book.ttf?rlkey=np2m0eo7jff41d7vk81g60vos&dl=0') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* تطبيق الخط العربي للنصوص العربية فقط */
html[lang="ar"], body[lang="ar"], h1[lang="ar"], h2[lang="ar"], h3[lang="ar"], p[lang="ar"], span[lang="ar"] {
    font-family: 'Avenir Arabic', sans-serif !important;
}

/* تطبيق الخط الإنجليزي للنصوص الإنجليزية فقط */
html[lang="en"], body[lang="en"], h1[lang="en"], h2[lang="en"], h3[lang="en"], p[lang="en"], span[lang="en"] {
    font-family: 'Futura-Book', sans-serif !important;
}



////


/* أزرار باللون البرتقالي مع نص أبيض */
button {
    background-color: #3052A0 !important;  /* خلفية الزر باللون البرتقالي */
    color: #FFFFFF !important;  /* النص باللون الأبيض */
    border: none !important;  /* إزالة الحدود الافتراضية */
    padding: 10px 20px !important;  /* إضافة مسافة داخل الزر */
    border-radius: 5px !important;  /* إضافة حواف مدورة للزر */
    font-size: 10px !important;  /* تحديد حجم الخط */
    font-weight: normal !important;  /* جعل النص عريض */
    cursor: pointer !important;  /* تغيير شكل المؤشر عند المرور على الزر */
    text-shadow: none !important;  /* إزالة أي تأثيرات تظليل للنص */
}
button {
    color: rgba(255, 255, 255, 1) !important;  /* تحديد النص بالأبيض بدون شفافية */
}



/* خلفية الموقع بيضاء */
body {
    background-color: #FFFFFF;  /* خلفية بيضاء */
    color: #3052A0;  /* النصوص باللون الأزرق الداكن */
}


/* العناوين باللون الأزرق الداكن */
h1, h2, h3 {
    color: #FFFFFF;
}

   /* تخصيص حجم الخط للعناوين h2 */
h2 {
    font-size: 32px !important; /* تحديد حجم الخط */
    line-height: 1.3 !important; /* ضبط ارتفاع السطر */
    font-weight: bold !important; /* جعل الخط غامق */
}

/* روابط بلون الفاتح */
a {
    color: #F8C5C0;
    text-decoration: none;  /* إزالة التسطير */
}

a:hover {
    color: #E85D29;  /* تغيير اللون عند المرور */
}


/* تغيير خلفية الفوتر إلى وردي */
footer {
    background-color: #F8C5C0 !important;  /* الخلفية باللون الوردي */
}

/* تغيير لون النصوص في الفوتر إلى أزرق */
footer, footer p {
    color: #3052A0 !important;  /* النصوص باللون الأزرق */
}

/* تغيير لون الروابط في الفوتر إلى أزرق */
footer a {
    color: #3052A0 !important;  /* الروابط باللون الأزرق */
    text-decoration: none;  /* إزالة الخط تحت الروابط */
}

/* تغيير لون الروابط عند المرور عليها */
footer a:hover {
    color: #E85D29 !important;  /* تغيير اللون عند المرور على الرابط (يمكنك تعديل اللون كما تريد) */
}

* {
  border: none !important; /* إزالة جميع البوردرز */
  outline: none !important; /* إزالة أي خطوط محيطية */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.section {
  padding: 20px;
}

.header, .footer {
  padding: 0;
}
button {
  background-color: #E85D29; /* لون البرتقالي */
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 25px; /* حواف دائرية */
}

button:hover {
  background-color: #3052A0; /* تغيير اللون عند التمرير */
}
.button:hover {
  background-color: #F8C5C0; /* تغيير اللون على الـ Hover */
  transition: background-color 0.3s ease; /* انتقال ناعم */
}
* {
  box-shadow: none !important; /* إزالة أي ظلال */
}

<header>
  <div class="top-bar">
    <!-- اللوجو -->
    <div class="logo">
      <img src="logo.png" alt="Logo">
    </div>

    <!-- المنيو -->
    <div class="menu">
      <!-- هنا تضع عناصر المنيو -->
    </div>

    <!-- الكارت والبروفايل -->
    <div class="profile-cart">
      <img src="profile.png" alt="Profile">
      <img src="cart.png" alt="Cart">
    </div>
  </div>

  <!-- خانة البحث تحت العناصر الأخرى -->
  <div class="search-bar">
    <input type="text" placeholder="ابحث هنا">
    <button>بحث</button>
  </div>
</header>
/* تنسيق الـ Header */
header {
  width: 100%;
  background-color: #fff; /* لون الخلفية */
}

/* تنسيق الشريط العلوي */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

/* تنسيق اللوجو */
.logo img {
  height: 40px;
  width: auto;
}

/* تنسيق المنيو */
.menu {
  display: flex;
  gap: 20px; /* المسافة بين العناصر في المنيو */
}

/* تنسيق الكارت والبروفايل */
.profile-cart {
  display: flex;
  gap: 20px;
  align-items: center;
}

/* تنسيق خانة البحث */
.search-bar {
  display: flex;
  justify-content: center; /* لتوسيط خانة البحث */
  align-items: center;
  padding: 10px;
  background-color: #f8f8f8;
}

.search-bar input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 300px;
}

.search-bar button {
  padding: 10px 20px;
  background-color: #3052A0; /* لون الزر */
  color: white;
  border: none;
  border-radius: 5px;
  margin-left: 10px;
}
/* إزالة أي تأثيرات مرشح أو تدرج على الصور */
img, .home-slider img, .box img, .product-image, .product-item img {
    filter: none !important; /* إزالة التأثيرات */
    opacity: 100 !important;   /* التأكد من أن الشفافية كاملة */
    background: transparent !important; /* إزالة أي خلفية معتمة */
}

/* إزالة تأثيرات الـ hover على الصور والعناصر */
.home-slider:hover, .box:hover, .product-item:hover {
    filter: none !important; /* إزالة التعتيم عند الـ hover */
    background: transparent !important; /* إزالة الخلفية المعتمة */
    opacity: 100 !important; /* التأكد من عدم وجود تأثيرات شفافية */
}

/* إزالة أي تأثيرات على الخلفية داخل الصور */
.home-slider, .box, .product-item {
    background: transparent !important; /* التأكد من أن الخلفية شفافة */
}

/* إزالة المسافة الفارغة حول مربعات "العناية بالبشرة" و"العناية بالشعر" */
.quick-links-section {
    padding-top: 0px; /* إزالة المسافة العلوية */
    margin-top: 0px;  /* إزالة المسافة العلوية */
    padding-bottom: 0px; /* إزالة المسافة السفلية */
    margin-bottom: 0px; /* إزالة المسافة السفلية */
}

/* تحسين المسافة بين المربعات نفسها */
.quick-links-box {
    margin: 0px; /* إزالة المسافة بين المربعات */
    padding: 0px; /* إزالة أي حواف أو مسافات إضافية داخل المربع */
}
/* المربعات العناية بالبشرة والشعر بشكل مينمل */
.quick-links-section {
    display: flex;
    justify-content: space-between; /* توزيع المربعات بالتساوي */
    gap: 20px; /* المسافة بين المربعات */
    padding: 20px 0; /* مسافة رأسية صغيرة بين المربعات */
}

.quick-links-box {
    background-color: #fff; /* خلفية بيضاء نظيفة */
    border-radius: 10px; /* زوايا مدورة */
    padding: 30px 20px; /* تباعد داخلي مناسب */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* إضافة ظل بسيط للمربعات */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* إضافة تأثير عند التفاعل */
}

.quick-links-box:hover {
    transform: translateY(-10px); /* تأثير رفع عند التمرير */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* زيادة الظل عند التمرير */
}

/* النص داخل المربع */
.quick-links-box h3 {
    font-size: 18px; /* حجم خط مناسب */
    color: #3052A0; /* لون النص الأساسي */
    font-weight: 600;
}

/* إضافة تأثير عند الضغط على المربعات */
.quick-links-box:active {
    transform: scale(0.98); /* تقلص المربع عند الضغط */
}
/* إزالة المسافة الفارغة بين المربعات */
.quick-links-section {
    margin-top: 0; /* إزالة المسافة العلوية */
    padding-top: 0; /* إزالة الحشو العلوي */
    margin-bottom: 0; /* إزالة المسافة السفلية */
    padding-bottom: 0; /* إزالة الحشو السفلي */
}

.quick-links-box {
    margin: 0; /* إزالة المسافات المحيطية للمربعات */
    padding: 30px 20px; /* تباعد داخلي للمربعات */
    background-color: #fff; /* خلفية بيضاء نظيفة */
    border-radius: 10px; /* زوايا مدورة */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* إضافة ظل بسيط */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.quick-links-box:hover {
    transform: translateY(-10px); /* رفع المربع عند التمرير */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* زيادة الظل عند التمرير */
}

/* إزالة الأسهم تمامًا */
.slick-prev, .slick-next {
    display: none !important;
}

/* تفعيل التمرير التلقائي وتغيير السرعة */
.slick-slider {
    animation: slide 1s infinite !important; /* تغيير الوقت هنا ليكون أسرع */
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(-200%);
    }
    75% {
        transform: translateX(-300%);
    }
    100% {
        transform: translateX(-400%);
    }
}

/* تخصيص الأزرار الخاصة بالبروفايل والأسهم والكميات */
button[class*="profile"], 
button[class*="arrow"], 
button[class*="quantity"] {
    background-color: transparent !important;  /* إزالة الخلفية البرتقالية */
    color: #FFFFFF !important;  /* تغيير النص إلى اللون الأبيض */
}

/* تغيير الخلفية عند المرور على الأزرار */
button[class*="profile"]:hover, 
button[class*="arrow"]:hover, 
button[class*="quantity"]:hover {
    background-color: #3052A0 !important;  /* تغيير الخلفية إلى اللون الأزرق عند المرور */
    color: #FFFFFF !important;  /* الحفاظ على النص باللون الأبيض */
}

/* إزالة الخلفية البرتقالية من الزر */
button.header-btn {
    background-color: transparent !important;  /* إزالة الخلفية البرتقالية من الزر */
    border: none !important;  /* إزالة أي حدود للزر */
}

/* إزالة الخلفية من الأيقونة نفسها */
button .header-btn__icon.sicon-user-circle {
    background-color: transparent !important;  /* إزالة الخلفية */
    color: #3052A0 !important;  /* اللون الأزرق للأيقونة */
}

/* عند المرور بالماوس على الأيقونة */
button .header-btn__icon.sicon-user-circle:hover {
    background-color: transparent !important;  /* إزالة الخلفية عند المرور */
    color: #FFFFFF !important;  /* تغيير الأيقونة للون الأبيض عند المرور */
}

/* تغيير اللون عند المرور على الزر */
button:hover {
    background-color: transparent !important;  /* إزالة الخلفية عند المرور بالماوس */
    color: #3052A0 !important;  /* الحفاظ على النص باللون الأزرق */
}

/* أزرار باللون البرتقالي */
button {
    background-color: transparent !important;  /* الزر بدون خلفية */
    color: #3052A0;  /* نص الأزرار باللون الأزرق */
}

/* تحريك أيقونة البروفايل لليسار */
button.header-btn {
    margin-left: -28px !important;  /* تعديل المسافة لتحريك الأيقونة لليسار */
}

/* تغيير لون أيقونة الكارت إلى الأزرق */
i.sicon-shopping-bag {
    color: #3052A0 !important;  /* اللون الأزرق */
}

/* تغيير اللون حول الرقم داخل الكارت إلى برتقالي */
.s-cart-summary-count {
    background-color: #E85D29 !important;  /* خلفية برتقالية للدائرة */
    color: #FFFFFF !important;  /* النص باللون الأبيض */
    border-radius: 50% !important;  /* جعل الدائرة كاملة */
    padding: 5px 8px !important;  /* ضبط الحواف الداخلية للدائرة */
    font-size: 14px !important;  /* حجم الخط */
}

/* إزالة الخلفية للأزرار */
button.header-btn {
    background-color: transparent !important;
}
/* إزالة الحدود أو تعديلها */
i.sicon-shopping-bag {
    border-color: transparent !important;
}

/* عند فتح المنيو */
.menu.open {
    background-color: rgba(0, 0, 0, 0.5) !important;  /* شفافية 50% */
}

/* في حالة الإغلاق */
.menu {
    background-color: rgba(0, 0, 0, 0) !important;  /* شفافية كاملة عند الإغلاق */
}

/* تغيير لون الزر إلى برتقالي */
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline {
    background-color: #E85D29 !important; /* خلفية برتقالية */
    color: #FFFFFF !important; /* النص باللون الأبيض */
    border: none !important; /* إزالة الحدود */
}

/* تغيير لون النص داخل الزر */
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline span {
    color: #FFFFFF !important; /* النص داخل الزر باللون الأبيض */
}

/* تغيير لون الأيقونة داخل الزر */
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline i {
    color: #FFFFFF !important; /* الأيقونة باللون الأبيض */
}

/* عند المرور بالماوس على الزر */
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline:hover {
    background-color: #3052A0 !important; /* تغيير الخلفية إلى الأزرق عند المرور */
}

/* تغيير لون الأيقونة داخل الزر */
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline i {
    color: #FFFFFF !important; /* الأيقونة باللون الأبيض */
}

/* عند المرور بالماوس على الزر */
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline:hover {
    background-color: #3052A0 !important; /* تغيير الخلفية إلى الأزرق عند المرور */
}

/* تغيير لون الزر "إضافة للسلة" في المنتج */
button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary {
    background-color: #E85D29 !important; /* خلفية برتقالية */
    color: #FFFFFF !important; /* النص باللون الأبيض */
    border: none !important; /* إزالة الحدود */
}

/* تغيير لون النص داخل الزر */
button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary span {
    color: #FFFFFF !important; /* النص داخل الزر باللون الأبيض */
}

/* تغيير لون الأيقونة داخل الزر (إذا كانت موجودة) */
button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary i {
    color: #FFFFFF !important; /* الأيقونة باللون الأبيض */
}

/* عند المرور بالماوس على الزر */
button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:hover {
    background-color: #3052A0 !important; /* تغيير الخلفية إلى الأزرق عند المرور */
}


.text-xl.md\:text-2xl {
    font-weight: 400 !important; /* تقليل وزن الخط إلى 400 */
}

button.s-product-card-wishlist-btn .sicon-heart {
    background-color: transparent !important;  /* إزالة الخلفية */
    color: #3052A0 !important;  /* تغيير اللون الأزرق للقلب */
    font-size: 20px;  /* ضبط حجم القلب */
    border: none !important;  /* إزالة أي حدود حول الأيقونة */
    box-shadow: none !important;  /* إزالة الظل إن وجد */
}
/* تخصيص زر المنتجات غير المتوفرة */
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-light-outline.s-button-disabled {
    background-color: rgba(232, 93, 41, 0.5) !important; /* برتقالي مع شفافية */
    color: white !important; /* لون النص أبيض */
    opacity: 0.8 !important; /* تقليل الوضوح */
    cursor: not-allowed !important; /* تغيير المؤشر للإشارة إلى عدم توفر المنتج */
    pointer-events: none !important; /* تعطيل النقر */
    transition: opacity 0.3s ease-in-out !important;
}

/* عند تمرير الماوس على الزر يصبح أكثر شفافية */
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-light-outline.s-button-disabled:hover {
    opacity: 0.6 !important;
}

/* تغيير لون النص داخل الزر */
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-light-outline.s-button-disabled .s-button-text span {
    color: white !important; /* النص باللون الأبيض */
}


////

/* تخصيص الأزرار داخل سكشن "منتجات مميزة" */
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_1"],
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_2"],
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_3"],
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_4"] {
    background-color: #3052A0 !important; /* خلفية زرقاء */
    color: #FFFFFF !important; /* النص باللون الأبيض */
    border: none !important; /* إزالة الحواف */
    transition: all 0.3s ease-in-out !important; /* إضافة تأثير عند التغيير */
}

/* تغيير اللون عند التمرير على الأزرار */
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_1"]:hover,
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_2"]:hover,
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_3"]:hover,
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_4"]:hover {
    background-color: #E85D29 !important; /* الخلفية تصبح برتقالية عند التمرير */
    color: #FFFFFF !important; /* النص يبقى أبيض عند التمرير */
}

/* تخصيص النص داخل الأزرار */
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_1"] .s-button-text,
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_2"] .s-button-text,
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_3"] .s-button-text,
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_4"] .s-button-text {
    font-weight: bold !important; /* جعل النص غامق */
}

/* تخصيص زر "أحدث المنتجات" داخل سكشن "منتجات مميزة" */
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_1"] {
    background-color: #3052A0 !important; /* خلفية زرقاء */
    color: #FFFFFF !important; /* النص باللون الأبيض */
    border: none !important; /* إزالة الحواف */
    transition: all 0.3s ease-in-out !important; /* إضافة تأثير عند التغيير */
}

/* تغيير اللون عند التمرير على زر "أحدث المنتجات" */
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_1"]:hover {
    background-color: #E85D29 !important; /* الخلفية تصبح برتقالية عند التمرير */
    color: #FFFFFF !important; /* النص يبقى أبيض عند التمرير */
}

/* تخصيص النص داخل زر "أحدث المنتجات" */
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_1"] .s-button-text {
    font-weight: bold !important; /* جعل النص غامق */
}
/* تخصيص الأزرار داخل سكشن "منتجات مميزة" - جميع الأزرار بنفس اللون الأزرق والكلام الأبيض */
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_1"],
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_2"],
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_3"],
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_4"] {
    background-color: #3052A0 !important; /* خلفية زرقاء */
    color: #FFFFFF !important; /* النص باللون الأبيض */
    border: none !important; /* إزالة الحواف */
    transition: all 0.3s ease-in-out !important; /* إضافة تأثير عند التغيير */
}

/* تغيير اللون عند التمرير على الأزرار - جميع الأزرار */
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_1"]:hover,
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_2"]:hover,
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_3"]:hover,
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_4"]:hover {
    background-color: #E85D29 !important; /* الخلفية تصبح برتقالية عند التمرير */
    color: #FFFFFF !important; /* النص يبقى أبيض عند التمرير */
}

/* تخصيص النص داخل الأزرار */
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_1"] .s-button-text,
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_2"] .s-button-text,
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_3"] .s-button-text,
#featured-products-style2-2 button[data-target="featured-products-style2-2-oODeZv_4"] .s-button-text {
    font-weight: bold !important; /* جعل النص غامق */
}

----


/* تخصيص أزرار "أضف إلى السلة" مع الفئات المحددة */
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline {
    font-size: 18px !important; /* زيادة حجم الخط */
    height: 40px !important; /* تقليل ارتفاع الزر */
    padding: 0 20px !important; /* تعديل الحشوات الداخلية */
    width: auto !important; /* تأكيد عرض الزر يكون مناسب */
    max-width: 250px !important; /* تحديد أقصى عرض للزر */
    border-radius: 8px !important; /* حواف مدورة */
    background-color: transparent !important; /* خلفية شفافة */
    color: #3052A0 !important; /* نص باللون الأزرق */
    font-weight: bold !important; /* جعل النص غامق */
    text-transform: uppercase !important; /* تحويل النص إلى حروف كبيرة */
    border: 2px solid #3052A0 !important; /* إضافة حد أزرق */
    cursor: pointer !important; /* تغيير المؤشر عند التمرير فوق الزر */
    transition: background-color 0.3s ease, transform 0.3s ease !important; /* إضافة تأثيرات عند التمرير */
    text-align: center !important; /* محاذاة النص في الوسط */
}

/* تغيير لون الزر عند التمرير */
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline:hover {
    background-color: #3052A0 !important; /* خلفية الزر تصبح زرقاء عند التمرير */
    color: #FFFFFF !important; /* النص يصبح أبيض */
    border: 2px solid #3052A0 !important; /* إبقاء الحدود الزرقاء */
    transform: translateY(-2px) !important; /* رفع الزر عند التمرير */
}

----



////

button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline i.sicon-shopping-bag {
    visibility: hidden !important; /* إخفاء الأيقونة */
}

button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline i.sicon-shopping-bag {
    display: none !important; /* إخفاء الأيقونة */
}




--

.s-product-card-content-title a {
    text-transform: capitalize !important; /* تحويل النص إلى Title Case */
    display: block; /* عرض العنصر ككتلة */
    width: 100%; /* عرض العنصر بالكامل */
    height: 1.2em; /* تحديد ارتفاع النص (مهم لإظهار النقاط) */
    font-size: 16px; /* حجم الخط */
    line-height: 1.2; /* ارتفاع السطر */
    white-space: nowrap; /* لا يسمح بانتقال النص إلى سطر جديد */
    overflow: hidden; /* إخفاء النص الزائد */
    text-overflow: ellipsis; !important; /* إظهار الثلاث نقاط عند overflow */
}

/* إضافة الكود هنا لكي يعمل مع المتصفحات الحديثة */
.s-product-card-content-title a {
    display: -webkit-box;
    -webkit-line-clamp: 1; /* تحديد أن يكون النص في سطر واحد */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; !important;
}



///



/* تصميم الروابط السريعة */
.swiper-slide.slide--one-sixth a.slide--cat-entry {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #e85d29, #3052a0) !important; /* تدرج لوني ملفت */
    color: white !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 15px !important;
    padding: 20px 15px !important;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    width: 100% !important;
    height: 130px !important;
}

/* تحسين الأيقونة */
/* تصميم الروابط السريعة */
.swiper-slide.slide--one-sixth a.slide--cat-entry {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #ffa07a, #ffb6c1)  !important; /* تدرج لوني ملفت */
    color: white !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 15px !important;
    padding: 20px 15px !important;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    width: 100% !important;
    height: 100px !important;
}

/* تحسين الأيقونة */
.swiper-slide.slide--one-sixth a.slide--cat-entry i {
    font-size: 30px !important;
    margin-bottom: 10px !important;
}

/* تحسين النص */
.swiper-slide.slide--one-sixth a.slide--cat-entry h2 {
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: capitalize !important;
    letter-spacing: 0px !important;
}

/* تأثير عند تمرير الماوس */
.swiper-slide.slide--one-sixth a.slide--cat-entry:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
}

/* تحسين توزيع العناصر في السلايدر */
.swiper-wrapper {
    display: flex !important;
    gap: 10px !important;
}


//

/* تصغير حجم الخانات */
.swiper-slide.slide--one-sixth a.slide--cat-entry {
    height: 90px !important; /* تقليل الارتفاع */
    padding: 15px 10px !important; /* تصغير الحشوة الداخلية */
    font-size: 14px !important; /* تصغير حجم الخط */
    border-radius: 10px !important; /* تقليل تدوير الحواف */
}

/* إخفاء الأيقونات */
.swiper-slide.slide--one-sixth a.slide--cat-entry i {
    display: none !important;
}

//

/* تصغير حجم الخانات وإضفاء طابع مودرن */
.swiper-slide.slide--one-sixth a.slide--cat-entry {
    height: 90px !important; /* تقليل الارتفاع */
    padding: 10px 15px !important; /* تصغير الحشوة الداخلية */
    font-size: 14px !important; /* تصغير حجم الخط */
    border-radius: 8px !important; /* تدوير الحواف لتكون أنعم */
    background: linear-gradient(135deg, #E85D29, #3052A0) !important; /* تدرج لوني للمزيد من الحداثة */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; /* إضافة ظل ناعم للخانة */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* حركة سلسة */
}

/* عند المرور على الخانة، تعطي تأثير الحركة */
.swiper-slide.slide--one-sixth a.slide--cat-entry:hover {
    transform: translateY(-5px); /* رفع الخانة لأعلى */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); /* إضافة ظل أقوى عند التمرير */
}

/* إخفاء الأيقونات */
.swiper-slide.slide--one-sixth a.slide--cat-entry i {
    display: none !important;
}

/* تخصيص النص ليتناسب مع المودرن */
.swiper-slide.slide--one-sixth a.slide--cat-entry h2 {
    color: #fff !important; /* جعل النص أبيض ليظهر بوضوح */
    font-weight: 600 !important; /* جعل الخط سميكًا قليلاً */
    text-transform: uppercase; /* جعل النص بحروف كبيرة لتبدو أكثر حداثة */
    letter-spacing: 1px; /* زيادة التباعد بين الحروف قليلاً */
    margin: 0; /* إزالة الهامش من النص */
}

//

/* التأكد من تغيير اللون إلى الأزرق */
.total-price {
    color: #3052A0 !important; /* اللون الأزرق */
    font-weight: bold; /* التأكد من سمك الخط */
    font-size: 1rem; /* يمكنك تعديل الحجم إذا أردت */
}

h2.total-price {
    color: #3052A0 !important; /* اللون الأزرق */
    font-weight: bold !important; /* التأكد من سمك الخط */
    font-size: 16px !important; /* تصغير الحجم */
}

//

.s-social-share-btn svg {
    fill: #3052A0; /* اللون الأزرق بشكل افتراضي */
    transition: fill 0.3s ease; /* تأثير انتقال سلس بين الألوان */
}

.s-social-share-btn svg {
    fill: #3052A0 !important; /* اللون الأزرق بشكل افتراضي */
}

.s-social-share-btn:hover svg {
    fill: #E85D29 !important; /* اللون البرتقالي عند المرور بالماوس */
}

.s-social-share-btn {
    margin-bottom: 1px !important; /* أو قيمة أصغر حسب الحاجة */
}

//

@media (min-width: 768px) {
    .s-comments-product {
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

.s-comments-product {
    display: none !important;
}

//

h2 {
    color: #3052A0 !important; /* اللون الأزرق */
}

.s-slider-block__title-right h2 {
    color: #3052A0 !important; /* اللون الأزرق */
    letter-spacing: 0 !important; /* إزالة المسافة بين الأحرف */
    font-size: 18px !important; /* تحديد حجم الخط */
    font-weight: bold !important; /* جعل الخط عريض */
    word-spacing: 0 !important; /* التأكد من عدم وجود مسافة بين الكلمات */
    margin: 0 !important; /* إزالة أي مسافة غير مرغوب فيها حول العنصر */
    padding: 0 !important; /* إزالة أي padding إضافي */
}

///

.block {
    display: inline-block; /* وضع العنصر بجانب العنصر الآخر */
    margin-right: 10px; /* المسافة بين "السعر" و الرقم */
    vertical-align: middle; /* محاذاة العنصر عموديًا */
}

.total-price {
    display: inline-block; /* وضع الرقم بجانب العنصر الآخر */
    vertical-align: middle; /* محاذاة العنصر عموديًا مع "السعر" */
}


///

footer h3 {
    color: #E85D29 !important; /* اللون البرتقالي */
}
footer h3.s-contacts-title,
footer h3:nth-of-type(1),
footer h3:nth-of-type(2) {
    color: #E85D29 !important; /* اللون البرتقالي */
}

//

footer .s-social-icons {
    display: flex !important;
    justify-content: flex-start !important; /* محاذاة الأيقونات إلى اليسار */
    gap: 40px !important; /* زيادة المسافة بين الأيقونات */
    margin-left: 20px !important; /* زيادة المسافة عن الجدار من اليسار */
    margin-right: 10px !important; /* زيادة المسافة عن الجدار من اليمين */
    padding: 0 !important; /* تأكد من إزالة المسافات الداخلية */
    transform: none; /* إلغاء تحريك الأيقونات لليسار */
}

footer .s-social-icon {
    background-color: #F8C5C0 !important; /* اللون الوردي */
    border-radius: 50% !important; /* جعل الأيقونة دائرة */
    padding: 12px !important; /* مسافة حول الأيقونة */
    transition: background-color 0.3s ease, transform 0.3s ease !important;
}

footer .s-social-icon svg {
    fill: #3052A0 !important; /* الأزرق */
    width: 24px !important; /* حجم الأيقونة */
    height: 24px !important; /* حجم الأيقونة */
    transition: fill 0.3s ease, transform 0.3s ease !important;
}

footer .s-social-icon:hover {
    background-color: #E85D29 !important; /* اللون البرتقالي عند التمرير */
}

footer .s-social-icon:hover svg {
    fill: #FFFFFF !important; /* اللون الأبيض عند التمرير */
    transform: scale(1.1) !important; /* تكبير الأيقونة عند التمرير */
}

.s-social-link {
    margin-right: 10px; /* زيادة المسافة بين الأيقونات */
}


////


/* الأيقونة بشكل افتراضي تكون باللون الأزرق */
.filters-trigger i.sicon-filter {
    color: #3052A0 !important; /* اللون الأزرق الجديد */
    transition: color 0.3s ease; /* تأثير الانتقال للون عند المرور */
}

/* تغيير اللون إلى البرتقالي عند المرور */
.filters-trigger:hover i.sicon-filter {
    color: #E85D29 !important; /* اللون البرتقالي الجديد */
}

/* تنسيق رابط الأيقونة */
.filters-trigger {
    position: fixed; /* تحديد وضع الأيقونة */
    right: 5px; /* المسافة من الجهة اليمنى */
    margin-right: 5px; /* مسافة إضافية من الجهة اليمنى */
}

/* تنسيق العنصر الأب إذا كان يستخدم position relative */
.parent-container {
    position: relative; /* العنصر الأب يجب أن يحتوي على position relative */
}

/* تنسيق الأيقونة إذا كانت تستخدم position absolute داخل عنصر */
.filters-trigger {
    position: absolute;
    right: 5px; /* المسافة من الجهة اليمنى */
    margin-right: 5px; /* المسافة الإضافية من اليمين */
}

/////

/* تنسيق عام لقسم وصف المنتج */
.s-metadata-wrapper {
    background: #F8F8F0; /* لون خلفية ناعم */
    border-radius: 12px; /* زوايا مستديرة */
    padding: 20px; /* مسافة داخلية */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* ظل خفيف */
    font-family: 'Avenir Arabic', sans-serif; /* استخدام خط متناسق */
    margin-bottom: 20px; /* مسافة بين الأقسام */
}

/* تحسين العنوان "وصف المنتج" */
.s-metadata-box-header {
    font-size: 20px;
    font-weight: bold;
    color: #3052A0; /* لون أزرق للعنوان */
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #E85D29; /* خط سفلي بلون برتقالي */
    padding-bottom: 8px;
    margin-bottom: 15px;
}

/* تنسيق أيقونة العنوان */
.s-metadata-box-header i {
    font-size: 18px;
    color: #E85D29; /* لون الأيقونة برتقالي */
}

/* تنسيق محتوى وصف المنتج */
.s-metadata-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* إخفاء عنوان "وصف المنتج" داخل القسم */
.s-metadata-row-name {
    display: none !important;
}

/* تنسيق النص داخل وصف المنتج */
.s-metadata-row-value {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    text-align: right; /* محاذاة للنصوص العربية */
    direction: rtl; /* اتجاه النص للعربية */
}

/* تحسين التجربة على الجوال */
@media (max-width: 768px) {
    .s-metadata-wrapper {
        padding: 15px;
    }

    .s-metadata-box-header {
        font-size: 18px;
    }

    .s-metadata-row-value {
        font-size: 14px;
        padding: 12px;
    }
}

///
/* تحسين صندوق الوصف */
.s-metadata-box {
    max-height: 150px; /* تحديد أقصى ارتفاع للصندوق */
    overflow: hidden; /* إخفاء أي محتوى زائد */
    padding: 15px; /* تقليل الحشوة الداخلية */
    background: #F8F8F0; /* لون خلفية ناعم */
    border-radius: 10px; /* زوايا مدورة */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* ظل خفيف */
    transition: max-height 0.3s ease-in-out; /* تأثير سلس عند التمدد */
}

/* تحسين العنوان */
.s-metadata-box-header {
    font-size: 18px;
    font-weight: bold;
    color: #3052A0;
    padding-bottom: 5px;
    margin-bottom: 8px;
    border-bottom: 2px solid #E85D29; /* خط سفلي */
}

/* إخفاء العنوان الداخلي "وصف المنتج" */
.s-metadata-row-name {
    display: none !important;
}

/* ضبط تنسيق نص الوصف */
.s-metadata-row-value {
    font-size: 14px;
    line-height: 1.5; /* جعل السطور واضحة ومتناسقة */
    color: #333;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    max-height: 100px; /* تحديد ارتفاع للصندوق */
    overflow: hidden; /* إخفاء أي نص زائد */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* عرض 3 أسطر فقط */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis; /* إضافة "..." عند تجاوز الحجم */
    direction: rtl;
    text-align: right;
    word-wrap: break-word; /* كسر الكلمات الطويلة عند الحاجة */
}

/* تحسين التجربة على الجوال */
@media (max-width: 768px) {
    .s-metadata-box {
        max-height: 130px;
        padding: 12px;
    }

    .s-metadata-box-header {
        font-size: 16px;
    }

    .s-metadata-row-value {
        font-size: 13px;
        padding: 8px;
        max-height: 80px; /* تقليل الطول أكثر على الجوال */
        -webkit-line-clamp: 2; /* عرض سطرين فقط في الجوال */
    }
}

////

h1.text-xl {
    font-size: 10px !important;  /* تصغير حجم الخط */
    line-height: 1 !important; /* تقليل المسافة بين السطور */
    margin-bottom: 5px !important; /* تقليل المسافة الفارغة أسفل العنوان */
}

///

.product__description,
.product__description.p-2,
.product__description.px-5,
.product__description.sm\:p-1,
.product__description.leading-7,
.product__description.mb-3 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

//
/* تنسيق القسم بالكامل */
.s-metadata-box {
    position: relative;
    background: #F8F8F0;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* تصميم العنوان */
.s-metadata-box-header {
    font-size: 18px;
    font-weight: bold;
    color: #3052A0;
    padding-bottom: 8px;
    border-bottom: 2px solid #E85D29;
}

/* إخفاء نص وصف المنتج افتراضيًا */
.s-metadata-row-value {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* إظهار نص الوصف عند النقر */
.s-metadata-box:focus-within .s-metadata-row-value,
.s-metadata-box:hover .s-metadata-row-value {
    max-height: 200px; /* يمكن تغييرها حسب الطول المطلوب */
    opacity: 1;
    padding-top: 10px;
}

///

.lg\:col-span-2 p:empty {
    display: none !important;
}