/* === تفعيل المحاذاة المنضبطة (Responsive Alignment) === */

/* 1. الحاوية الرئيسية لضمان ثبات الهوامش يميناً ويساراً */
.s-block {
    direction: rtl;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px;
    box-sizing: border-box;
}

/* 2. ضبط السطر العلوي (العنوان ورابط عرض الكل) */
/* نستخدم Flex لضمان أن العنوان في أقصى اليمين والرابط في أقصى اليسار تماماً */
.s-block-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 30px !important;
    width: 100%;
}

/* 3. ضبط شبكة الكروت (الأقسام الثلاثة) */
.s-products-list-vertical-cards, 
.grid-container { /* حسب الكلاس المستخدم في ثيمك */
    display: grid !important;
    gap: 20px !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 أعمدة متساوية للكمبيوتر */
    align-items: start;
}

/* 4. توحيد أحجام الصور والمحاذاة داخل الكارت */
.category-item, .product-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* توسيط العناصر داخل الكارت */
    text-align: center;
}

.category-item img, .product-card img {
    width: 100% !important;
    max-width: 200px; /* حجم موحد للصور */
    aspect-ratio: 1 / 1 !important; /* جعل الصورة مربعة دائماً للمحاذاة */
    object-fit: contain !important;
    margin-bottom: 15px;
}

/* 5. ضبط النصوص لتكون على خط واحد */
.category-item h3, .product-card h3 {
    font-size: 1.1rem;
    min-height: 2.5em; /* حجز مساحة موحدة للنص لمنع اهتزاز المحاذاة */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === تعديلات الموبايل (Responsive) === */
@media (max-width: 768px) {
    .s-products-list-vertical-cards, 
    .grid-container {
        grid-template-columns: repeat(2, 1fr) !important; /* كارتين بجانب بعض في الموبايل */
        gap: 10px !important;
    }

    .category-item img, .product-card img {
        max-width: 140px; /* تصغير حجم الصور قليلاً للموبايل */
    }

    .s-block-header h2 {
        font-size: 18px !important; /* تصغير العنوان ليناسب عرض الشاشة */
    }
}

/* حل مشكلة الخروج عن الإطار */
html, body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
}/* استهداف الحاوية وإجبارها على إظهار المحتوى */
salla-slider#thumbs-feeding-1 .swiper-wrapper {
    display: flex !important;
    width: max-content !important;
    /* استخدام أنيميشن قوي جداً */
    animation: force-ltr 25s linear infinite !important;
    
    /* منع أي كود جافاسكريبت من تغيير التحويلات */
    transform: none !important; 
    transition: none !important;
}

/* حركة من الشمال لليمين */
@keyframes force-ltr {
    0% {
        /* يبدأ من إزاحة لليسار */
        translate: 50% 0;
    }/* 1. إعداد حاوية السلايدر */
salla-slider .swiper-wrapper {
    display: flex !important;
    width: max-content !important;
    /* الأنيميشن: يتحرك بمقدار منتج واحد كل مرة */
    animation: slideByProduct 10s steps(1) infinite !important;
    transform: none !important;
    direction: ltr !important;
}/* 1. ضبط الحاوية لحركة Swipe ناعمة */
salla-slider .swiper-wrapper {
    display: flex !important;
    width: max-content !important;
    /* حركة مستمرة ناعمة (Ease-in-out) */
    animation: smoothSwipeLTR 12s ease-in-out infinite !important;
    transform: none !important;
    direction: ltr !important;
}

/* 2. تعريف حركة السحب (منتج بمنتج) من الشمال لليمين */
@keyframes smoothSwipeLTR {
    0%, 15% { transform: translateX(0); }             /* المنتج 1 ثابت */
    25%, 40% { transform: translateX(240px); }        /* سحب للمنتج 2 */
    50%, 65% { transform: translateX(480px); }        /* سحب للمنتج 3 */
    75%, 90% { transform: translateX(720px); }        /* سحب للمنتج 4 */
    100% { transform: translateX(0); }   
  /* عودة للبداية */