/* Add custom CSS styles below */ 
/* ==================================================
   توسيط عناوين أقسام المنتجات في الصفحة الرئيسية
   ================================================== */

html body.index main#main-content
section.s-block.container
> .section-main-title {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

html body.index main#main-content
.section-main-title
.right-side {
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

html body.index main#main-content
.section-main-title
.right-side h2 {
  margin: 0 !important;
  text-align: center !important;
}

/* إبقاء عرض الكل في يسار القسم */
html body.index main#main-content
.section-main-title
.s-block__display-all {
  position: absolute !important;
  inset-inline-end: 0 !important;
}


/* ==================================================
   توسيط بطاقات المنتجات
   ================================================== */

html body.index main#main-content
salla-products-list.s-products-list
> div.s-products-list-wrapper.s-products-list-vertical-cards {
  display: flex !important;
  grid-template-columns: none !important;
  flex-flow: row wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 24px !important;
  width: 100% !important;
  margin-inline: auto !important;
}

/* حجم المنتج على الكمبيوتر */
html body.index main#main-content
salla-products-list.s-products-list
> div.s-products-list-wrapper.s-products-list-vertical-cards
> custom-salla-product-card {
  flex: 0 1 calc(25% - 18px) !important;
  width: calc(25% - 18px) !important;
  min-width: 260px !important;
  max-width: none !important;
  margin: 0 !important;
}


/* ==================================================
   تنسيق الجوال
   ================================================== */

@media screen and (max-width: 640px) {

  html body.index main#main-content
  section.s-block.container
  > .section-main-title {
    flex-direction: column !important;
    gap: 8px !important;
  }

  html body.index main#main-content
  .section-main-title
  .s-block__display-all {
    position: static !important;
    margin-top: 5px !important;
  }

  html body.index main#main-content
  salla-products-list.s-products-list
  > div.s-products-list-wrapper.s-products-list-vertical-cards {
    gap: 12px !important;
  }

  html body.index main#main-content
  salla-products-list.s-products-list
  > div.s-products-list-wrapper.s-products-list-vertical-cards
  > custom-salla-product-card {
    flex: 0 0 calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
    min-width: 0 !important;
    max-width: 220px !important;
  }
}
/* إخفاء زر عرض الكل */
html body.index main#main-content
.section-main-title
.s-block__display-all {
  display: none !important;
}