/* =========================================
   الروائح الراقية — توزيع بطاقات المنتجات
   لا يغيّر صور أزرار الأقسام أو نصوص البنر
========================================= */

:root {
  --rr-products-columns: 5;
  --rr-products-gap: 16px;
}

/* توسيع الحاويات التي تضم منتجات فعلية */
:is(.container, .s-block):has(
  :is(salla-products-list, salla-products-slider):not(
    header *, footer *,
    .store-header *, .store-footer *,
    salla-menu *, salla-modal *, salla-drawer *
  )
) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* هوامش جانبية بسيطة ومتساوية */
.container:has(
  :is(salla-products-list, salla-products-slider):not(
    header *, footer *,
    .store-header *, .store-footer *,
    salla-menu *, salla-modal *, salla-drawer *
  )
) {
  margin-inline: auto !important;
  padding-inline: clamp(12px, 1.5vw, 24px) !important;
}

/* منع تكرار الهوامش داخل الحاويات المتداخلة */
.container .container:has(
  :is(salla-products-list, salla-products-slider):not(
    header *, footer *,
    .store-header *, .store-footer *,
    salla-menu *, salla-modal *, salla-drawer *
  )
) {
  padding-inline: 0 !important;
}

/* توزيع شبكة المنتجات العمودية بأعمدة متساوية */
salla-products-list:not(
  header *, footer *,
  .store-header *, .store-footer *,
  salla-menu *, salla-modal *, salla-drawer *,
  [row-cards]:not([row-cards="false"]),
  [horizontal-cards]:not([horizontal-cards="false"])
) .s-products-list-wrapper.s-products-list-vertical-cards {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  grid-template-columns:
    repeat(var(--rr-products-columns), minmax(0, 1fr)) !important;

  gap: var(--rr-products-gap) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

/* الأجهزة المتوسطة */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --rr-products-columns: 3;
  }
}

/* الجوال */
@media (max-width: 767px) {
  :root {
    --rr-products-columns: 2;
    --rr-products-gap: 12px;
  }
}

/* توسيع بطاقات الأقسام الثلاثة — الكمبيوتر فقط */
@media (min-width: 1024px) {

  /* توسيع صف الأقسام مع هامش صغير من الجانبين */
  .rr-categories-wide {
    box-sizing: border-box !important;
    width: calc(100vw - 40px) !important;
    max-width: none !important;

    margin-inline: calc(50% - 50vw + 20px) !important;
    padding-inline: 0 !important;
  }

  /* إزالة تقييد العرض داخل عنصر الأقسام */
  .rr-categories-wide .container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  /* تكبير الصور مع الحفاظ على نسبها دون قص */
  .rr-categories-wide img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

}