/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* إخفاء العنوان */
div.mb-6 > h2.font-semibold.text-background.text-center {
    display: none !important;
}

/* إخفاء اللوجو */
div.absolute.top-6:has(> img[src*="fd412fe5-970e-4ec0-a387-50e986edae1f.webp"]) {
    display: none !important;
}

/* إخفاء قسم تخفيضات والأكثر مبيعاً (يشتركان في نفس الرابط) */
.category-card:has(.parent-category[data-url="https://ra7eek.com/ar/offers"]) {
    display: none !important;
}

/* إخفاء قسم العلامات التجارية */
.category-card:has(.parent-category[data-url="https://ra7eek.com/ar/brands"]) {
    display: none !important;
}

/* ------------------------------------------------------ */
/* 1. التعديل على الصورة الأساسية المعروضة في جالري صفحة المنتج فقط */
/* ------------------------------------------------------ */
.product-single .details-slider [slot="items"] .magnify-wrapper.homeslider__slide {
    aspect-ratio: 871 / 1016 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    width: 100% !important; /* لإلغاء أي عرض ثابت يسبب مساحات */
}

.product-single .details-slider [slot="items"] .magnify-wrapper.homeslider__slide img {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
}

/* ------------------------------------------------------ */
/* 2. التعديل على الصور المصغرة (الثمنيلز) في نفس الجالري فقط */
/* ------------------------------------------------------ */
.product-single .details-slider [slot="thumbs"] .slide--one-fourth {
    aspect-ratio: 871 / 1016 !important;
    height: auto !important;
    background-color: transparent !important;
}

.product-single .details-slider [slot="thumbs"] .slide--one-fourth img {
    object-fit: contain !important; /* يمنع قص الصور المصغرة ويظهرها كاملة */
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important;
}




/* اخفاء الصورة */
.flex.items-center.gap-5.p-4 a img {
    display: none !important;
}

/* ترتيب النصوص في سطر واحد */
.flex.items-center.gap-5.p-4 .flex.flex-col {
    display: inline;
    font-size: 12px;
    line-height: 1.3;
}

/* الرابط للعلامة التجارية */
.flex.items-center.gap-5.p-4 .flex.flex-col span a {
    color: #0C7067; /* لون العلامة التجارية */
    text-decoration: none; /* شيل الخط تحت */
    font-weight: 700; /* وزن العلامة */
    margin-left: 0;
}

/* كلمة 100٪ أصلي بعد النص */
.flex.items-center.gap-5.p-4 .flex.flex-col span .original-tag {
    color: #2E78A9; /* اللون المميز */
    font-weight: 500; /* الوزن المطلوب */
    margin-left: 5px; /* المسافة بين العلامة و100٪ أصلي */
}

/* اخفاء صورة البراندات فقط داخل الهيدر */
header.flex img.rounded-md.object-contain {
    display: none !important;
}





/* ==================================================
   السكشن الأول:
   Get Ready for the Next Surprise فقط
================================================== */

/* محاذاة محتوى السكشن إلى اليمين */
.mail-banner[style*="2c70e371-0ece-4287-9a5b-219cbe05db07.webp"] {
  direction: rtl !important;
  text-align: right !important;
}

/* محاذاة العنوان والوصف والزر داخل نفس السكشن فقط */
.mail-banner[style*="2c70e371-0ece-4287-9a5b-219cbe05db07.webp"] > div,
.mail-banner[style*="2c70e371-0ece-4287-9a5b-219cbe05db07.webp"] h2,
.mail-banner[style*="2c70e371-0ece-4287-9a5b-219cbe05db07.webp"] span,
.mail-banner[style*="2c70e371-0ece-4287-9a5b-219cbe05db07.webp"] button {
  text-align: right !important;
}

/* يخلي الزر يبدأ من اليمين */
.mail-banner[style*="2c70e371-0ece-4287-9a5b-219cbe05db07.webp"] button.open-newsletter-modal {
  display: block !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}


/* ==================================================
   السكشن الثاني:
   GL Promotional Banner رقم 4 فقط
================================================== */

/* محتوى كل بانر بعرض الكارد بالكامل ومحاذاة النصوص يمين */
.GL-promotional-banner-4 .img-three > div:first-child .relative.z-10,
.GL-promotional-banner-4 .img-three > div:nth-child(2) > div .relative.z-10 {
  width: 100% !important;
  text-align: right !important;
  direction: ltr !important;
}

/* العناوين والوصف: يمين بدون قلب علامات الترقيم في الإنجليزي */
.GL-promotional-banner-4 .img-three .relative.z-10 h2,
.GL-promotional-banner-4 .img-three .relative.z-10 p {
  width: 100% !important;
  text-align: right !important;
  direction: ltr !important;
}

/* الأزرار ناحية اليمين */
.GL-promotional-banner-4 .img-three .relative.z-10 a.btn-swap {
  display: table !important;
  width: fit-content !important;
  margin-top: 1rem !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  direction: ltr !important;
  text-align: center !important;
}

/* إصلاح ظهور صورة الكارد العلوي اليمين فقط */
.GL-promotional-banner-4 .img-three > div:nth-child(2) > div:first-child img {
  object-fit: cover !important;
  object-position: left center !important;
}








/* ==========================================================
   Rahiq - Global Product Cards Enhancements
   Home Product Sliders + Shop / Category Product Listings
========================================================== */


/* ==========================================================
   1. شكل صورة المنتج داخل كل سكاشن المنتجات والسوق والأقسام
========================================================== */

salla-products-slider.product-slider .s-product-card-image,
salla-products-list.s-products-list .s-product-card-image {
  position: relative !important;
  height: clamp(205px, 18vw, 255px) !important;
  min-height: 0 !important;
  background-color: #ffffff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* رابط الصورة يأخذ مساحة الكونتينر */
salla-products-slider.product-slider .s-product-card-image > a,
salla-products-list.s-products-list .s-product-card-image > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 14px !important;
  background-color: #ffffff !important;
}

/* الصورة كاملة بدون قص */
salla-products-slider.product-slider .s-product-card-image img.s-product-card-image-cover,
salla-products-list.s-products-list .s-product-card-image img.s-product-card-image-cover {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background-color: #ffffff !important;
}

/* منع قص البادج أو أي عناصر أعلى الصورة */
salla-products-slider.product-slider custom-salla-product-card,
salla-products-list.s-products-list custom-salla-product-card,
salla-products-slider.product-slider .s-product-card-entry,
salla-products-list.s-products-list .s-product-card-entry {
  overflow: visible !important;
}


/* ==========================================================
   2. ليبل نسبة الخصم
========================================================== */

salla-products-slider.product-slider .raheeq-discount-badge,
salla-products-list.s-products-list .raheeq-discount-badge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 50 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
  background-color: #fde0dc !important;
  color: #d94a42 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* اللغة العربية */
html[lang^="ar"] .raheeq-discount-badge {
  direction: rtl !important;
}

/* اللغة الإنجليزية */
html[lang^="en"] .raheeq-discount-badge {
  direction: ltr !important;
}


/* ==========================================================
   3. صفحة الشوب وصفحات الأقسام: 5 منتجات في الصف
   لا يطبق على السلايدر حتى لا يفسد حركة Swiper
========================================================== */

@media (min-width: 1280px) {
  salla-products-list.s-products-list .s-products-list-wrapper.s-products-list-vertical-cards {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    column-gap: 20px !important;
    row-gap: 32px !important;
  }
}

/* تابلت كبير */
@media (min-width: 992px) and (max-width: 1279px) {
  salla-products-list.s-products-list .s-products-list-wrapper.s-products-list-vertical-cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 18px !important;
    row-gap: 28px !important;
  }
}

/* تابلت صغير */
@media (min-width: 640px) and (max-width: 991px) {
  salla-products-list.s-products-list .s-products-list-wrapper.s-products-list-vertical-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 15px !important;
    row-gap: 24px !important;
  }
}


/* ==========================================================
   4. الموبايل
========================================================== */

@media (max-width: 767px) {
  salla-products-slider.product-slider .s-product-card-image,
  salla-products-list.s-products-list .s-product-card-image {
    height: 175px !important;
    border-radius: 8px !important;
  }

  salla-products-slider.product-slider .s-product-card-image > a,
  salla-products-list.s-products-list .s-product-card-image > a {
    padding: 10px !important;
  }

  salla-products-slider.product-slider .raheeq-discount-badge,
  salla-products-list.s-products-list .raheeq-discount-badge {
    top: 7px !important;
    right: 7px !important;
    min-height: 25px !important;
    padding: 5px 7px !important;
    font-size: 11px !important;
  }
}