/* Add custom CSS styles below */ 
/* توسيط الشعارات في الديسكتوب والجوال */
.index .s-block--brands .brands__grid {
  display: flex; /* تحويل الشبكة إلى فليكس بوكس */
  flex-wrap: wrap; /* السماح للعناصر بالنزول لسطر جديد إذا لم تتسع */
  justify-content: center; /* توسيط العناصر أفقياً */
  gap: 1.5rem; /* مسافة بين الشعارات (تعادل gap-6 في Tailwind) */
}

/* تعديلات الجوال: السماح بالنزول لسطر جديد مع التوسيط */
@media (max-width: 767px) { /* يطبق على الشاشات الأصغر من 768px (الجوال) */
  .index .s-block--brands .brands__grid {
    flex-wrap: wrap; /* السماح للعناصر بالنزول لسطر جديد (إلغاء nowrap) */
    overflow-x: hidden; /* إخفاء أي تمرير أفقي محتمل (إلغاء auto) */
    justify-content: center; /* الحفاظ على التوسيط في الجوال */
    padding-bottom: 0; /* إزالة المسافة السفلية التي كانت مخصصة لشريط التمرير */
  }

  /* إلغاء تحديد العرض الأدنى والأقصى للشعارات في الجوال للسماح لها بالتكيف */
  .index .s-block--brands .brands__grid .brands__item {
    flex-shrink: 1; /* السماح للشعارات بالانكماش إذا لزم الأمر */
    min-width: unset; /* إزالة الحد الأدنى للعرض */
    max-width: unset; /* إزالة الحد الأقصى للعرض */
  }
}


/*----------------------*/

/* فرض تصفير أي padding/margin غير متساوي من الجهة اليمين/يسار على كل الطبقات */
.s-block--square-links,
.s-block--square-links .container,
.s-block--square-links salla-slider,
.s-block--square-links .swiper,
.s-block--square-links .swiper-wrapper,
.s-block--square-links .s-slider-swiper-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  .s-block--square-links .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* توسيط شامل لكل الطبقات داخل القسم */
.s-block--square-links .container,
.s-block--square-links salla-slider,
.s-block--square-links .swiper,
.s-block--square-links .swiper-wrapper,
.s-block--square-links .s-slider-swiper-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  overflow: visible !important;
  gap: 16px;
}

/* إخفاء فقط أزرار وأشرطة التنقل الفعلية (مو الحاوية الأم) */
.s-block--square-links .swiper-button-next,
.s-block--square-links .swiper-button-prev,
.s-block--square-links .swiper-pagination,
.s-block--square-links .swiper-scrollbar {
  display: none !important;
}

/* الديسكتوب: صف واحد لكل الـ 6 عناصر */
@media (min-width: 641px) {
  .s-block--square-links .swiper-wrapper,
  .s-block--square-links .s-slider-swiper-wrapper {
    flex-wrap: nowrap !important;
  }
  .s-block--square-links .swiper-slide {
    flex: 1 1 0 !important;
    max-width: 150px !important;
    min-width: 0 !important;
  }
}

/* الجوال: 3 عناصر بالصف، متوسطة تمامًا */
@media (max-width: 640px) {
  .s-block--square-links .container,
  .s-block--square-links .swiper-wrapper,
  .s-block--square-links .s-slider-swiper-wrapper {
    gap: 8px;
    justify-content: center !important;
  }
  .s-block--square-links .swiper-slide {
    flex: 0 0 calc(33.333% - 8px) !important;
    max-width: calc(33.333% - 8px) !important;
    min-width: 0 !important;
  }
}

.s-block--square-links .swiper-slide img {
  width: 100% !important;
  height: auto !important;
}