@media(max-width: 767px) {
.s-slider-swiper-wrapper div,
section.s-block--banners:nth-of-type(11) .swiper-wrapper:nth-of-type(1) .swiper-slide
,
section.s-block--banners:nth-of-type(16) .swiper-wrapper:nth-of-type(1) .swiper-slide
,
section.s-block--banners:nth-of-type(20) .swiper-wrapper:nth-of-type(1) .swiper-slide
,
section.s-block--banners:nth-of-type(24) .swiper-wrapper:nth-of-type(1) .swiper-slide{
flex-wrap:wrap;
flex-direction:column;
}

 }.square-grid{
    gap: .125rem!important;
}
@media (min-width: 1024px) {
    .square-grid {
        gap: .25rem!important;
    }
}






/* 1. تهيئة الحاوية الأساسية لتكون هي المرجع */
.banner-square {
    position: relative !important;
    overflow: hidden; /* لضمان عدم خروج العناصر عن الحواف */
}

/* 2. تحريك حاوية الزر لتكون فوق الصورة في الأسفل */
.banner-square .text-wrapper {
    position: absolute !important;
    bottom: 20px !important;  /* المسافة من الأسفل */
    right: 20px !important;   /* المسافة من اليمين (للمحاذاة العربية) */
    /* إذا كنت تريده في اليسار استبدل right بـ left: 20px */
    
    width: auto !important;   /* حجم الزر فقط بدون تمدد */
    background: transparent !important; /* إزالة أي خلفية للنص */
    padding: 0 !important;
    z-index: 10; /* لضمان ظهور الزر فوق الصورة */
}

/* 3. تصميم الزر ليشبه الصورة المرفقة (أبيض دائري) */
.banner-square .btn-primary {
    background-color: #ffffff !important; /* لون الخلفية أبيض */
    color: #000000 !important; /* لون النص أسود */
    border-radius: 999px !important; /* حواف دائرية كاملة (شكل كبسولة) */
    padding: 8px 24px !important; /* مساحة داخلية للزر */
    font-weight: bold !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* ظل خفيف لإبراز الزر */
    
    /* 4. ضبط سلوك الماوس */
    cursor: pointer !important; /* شكل اليد */
    transition: all 0.3s ease; /* نعومة في الحركة */
}

/* تأثير عند وضع الماوس على الزر (تكبير بسيط) */
.banner-square .btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}


/* 1. تهيئة الحاوية الأساسية */
.banner-square {
    position: relative !important;
    overflow: hidden; 
}

/* 2. الإعدادات العامة لمكان الزر (الافتراضي يمين) */
.banner-square .text-wrapper {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;  /* الافتراضي يمين */
    right: auto !important;
    
    width: auto !important;
    background: transparent !important;
    padding: 0 !important;
    z-index: 10;
}


.banner-square .btn-primary {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-radius: 999px !important;
    padding: 8px 24px !important;
    font-weight: bold !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    
    cursor: pointer !important;
    transition: all 0.3s ease;
}

/* تأثير عند مرور الماوس */
.banner-square .btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* 1. تهيئة الحاوية الأساسية */
.banner-square {
    position: relative !important;
    overflow: hidden; 
}

/* -----------------------------------------------------------
   جديد: إلغاء النقر على الصورة الخلفية 
   (هذا الجزء يجعل الصورة غير قابلة للضغط والماوس سهم عادي)
----------------------------------------------------------- */
.banner-square > a {
    pointer-events: none !important; /* يمنع الضغط على رابط الصورة */
    cursor: default !important;      /* يبقي الماوس كالسهم العادي */
}

.banner-square .text-wrapper {
    position: absolute !important;
    bottom: 20px !important;
    right: 20px !important;  /* الافتراضي يمين */
    left: auto !important;
    
    width: auto !important;
    background: transparent !important;
    padding: 0 !important;
    z-index: 20; /* رقم مرتفع لضمان أنه فوق الصورة */
    pointer-events: auto !important; /* إعادة تفعيل النقر للزر */
}

.square-grid .banner-square:nth-child(1) .text-wrapper,
.square-grid .banner-square:nth-child(3) .text-wrapper {
    right: auto !important;
    left: 20px !important;
}

.banner-square .btn-primary {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-radius: 999px !important;
    padding: 8px 24px !important;
    font-weight: bold !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    
    pointer-events: auto !important; 
    cursor: pointer !important;
    transition: all 0.3s ease;
}

.banner-square .btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}


/* 3. تخصيص الصورة الأولى (1) والصورة الثالثة (3) لتكون يسار */
.square-grid .banner-square:nth-child(1) .text-wrapper,
.square-grid .banner-square:nth-child(3) .text-wrapper {
    left: auto !important;   /* إلغاء اليمين */
    right: 20px !important;    /* تفعيل اليسار */
}
/* 3. تخصيص الصورة الأولى (1) والصورة الثالثة (3) لتكون يسار */
.square-grid .banner-square:nth-child(2) .text-wrapper,
.square-grid .banner-square:nth-child(4) .text-wrapper {
    right: auto !important;   /* إلغاء اليمين */
    left: 20px !important;    /* تفعيل اليسار */
}

/* 1. إخفاء أي شريط تمرير سويبر في الموقع بالكامل */
.swiper-scrollbar {
    display: none !important;
}

/* 2. إظهاره فقط داخل بلوك المنتجات */
.s-block--angel-products .swiper-scrollbar {
    display: block !important;
    background: rgba(0, 0, 0, 0.05) !important;
    height: 4px !important;
    bottom: 4px !important;
    width: 90% !important;
    left: 5% !important;
    transition: all 0.3s ease; /* لإعطاء نعومة في الظهور */
}

/* 3. تنسيق المقبض ليكون انسيابياً */
.s-block--angel-products .swiper-scrollbar-drag {
    background: #000 !important;
    cursor: grab;
}

.s-block--angel-products .swiper-scrollbar-drag:active {
    cursor: grabbing;
}

/* 4. مساحة احترافية أسفل المنتجات */
.s-block--angel-products .s-slider-container {
    padding-bottom: 25px !important;
}
@media (max-width: 768px) {
  .banner-square .text-wrapper {
    position: absolute !important;
    bottom: 2px !important;
    right: 20px !important;
    left: auto !important;
    width: auto !important;
    background: transparent !important;
    padding: 0 !important;
    z-index: 20;
    pointer-events: auto !important;
}
.square-grid .banner-square:nth-child(2) .text-wrapper, .square-grid .banner-square:nth-child(4) .text-wrapper {
    left: 2px !important;
}
.square-grid .banner-square:nth-child(1) .text-wrapper, .square-grid .banner-square:nth-child(3) .text-wrapper {
    right: 2px !important;
}

  .banner-square .btn-primary {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-radius: 999px !important;
    padding: 0px 10px !important;
    font-weight: bold !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: all 0.3s ease;
}


}
.s-rating-stars-wrapper {        DISPLAY: flex!IMPORTANT;

        flex-wrap: wrap!IMPORTANT;
        flex-direction: row!IMPORTANT;
    }