/* الكود الآمن لتعديل القسم المخصص فقط بدون تخريب المتجر */
.custom-class .salla-products-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}

/* الشاشات الكبيرة: تقسيم العناصر بالتساوي ليكون 6 منتجات في الصف */
@media (min-width: 992px) {
    .custom-class .salla-products-list > div {
        width: calc((100% - (5 * 12px)) / 6) !important;
        max-width: calc((100% - (5 * 12px)) / 6) !important;
        flex: 0 0 calc((100% - (5 * 12px)) / 6) !important;
    }
}

/* الموبايل: منتجين في الصف */
@media (max-width: 768px) {
    .custom-class .salla-products-list > div {
        width: calc((100% - 8px) / 2) !important;
        max-width: calc((100% - 8px) / 2) !important;
        flex: 0 0 calc((100% - 8px) / 2) !important;
    }
}

/* إخفاء الزوائد وإلغاء شريط التمرير */
.centered-products {
    overflow: hidden !important;
    position: relative;
    padding: 10px 0;
}

/* شريط المنتجات: تنسيق فليكس وتفعيل الحركة السلسة */
.centered-products .s-grid,
.centered-products .products-list {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
    width: max-content !important;
    /* حركة أبطأ، بانسيابية (بطء في الأطراف وسرعة في المنتصف) */
    animation: smoothScroll 5s ease-in-out infinite alternate;
}

/* إيقاف الحركة عند وقوف الماوس لتسهيل التصفح والنقر */
.centered-products .s-grid:hover,
.centered-products .products-list:hover {
    animation-play-state: paused !important;
}

/* تنسيق الكروت وإضافة تأثير لمسة احترافية */
.centered-products .s-product-card {
    width: 100%;
    min-width: 260px; /* مقاس مناسب ومريح للعين */
    max-width: 280px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border-radius: 8px; /* تنعيم الحواف */
}

/* 🚨 الإضافة الجديدة: حل مشكلة قص صور المنتجات 🚨 */
.centered-products .s-product-card img,
.centered-products .s-product-card-image img {
    object-fit: contain !important; /* احتواء الصورة بالكامل بدون قص */
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important; /* يمكنك زيادة أو تقليل هذا الرقم حسب حجم العلب */
    background-color: transparent !important; /* لمنع ظهور خلفيات مزعجة حول الصورة */
}

/* بروز الكارت وظهور ظل عند الوقوف عليه */
.centered-products .s-product-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.1) !important;
}

/* تفاصيل حركة الذهاب والعودة */
@keyframes smoothScroll {
    0% { transform: translateX(0); }
    /* يمكنك تعديل 40% إلى رقم أكبر أو أصغر بناءً على عدد المنتجات */
    100% { transform: translateX(40%); } 
}

@media (min-width: 992px) {
  .index .s-block--slider-with-bg div.slider-bg:nth-of-type(1) {
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }
}