/* Add custom CSS styles below */ 
@media (max-width: 767px) {
    /* استهداف شامل لجميع احتمالات حاويات المنتجات في سلة */
    salla-products-list, 
    .s-products-grid, 
    .s-products-list-container,
    [class*="products-grid"] {
        display: block !important; /* إلغاء أي نظام قديم */
    }

    /* تحويل الحاوية المباشرة للمنتجات إلى شبكة من عمودين */
    salla-products-list > div, 
    .s-products-grid > div,
    .s-products-list-container > div {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 10px !important;
        padding: 10px !important;
    }

    /* إجبار بطاقة المنتج على أخذ عرض العمود بالكامل */
    salla-product-card, 
    .product-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}
/* إظهار عنوان المنتج بالكامل وتعديل الخط للجوال */
@media (max-width: 767px) {
    /* 1. السماح للعنوان بالظهور في أكثر من سطر */
    .s-product-card-content-title, 
    .product-title,
    salla-product-card h3,
    .s-product-card-entry h3 {
        white-space: normal !important; /* السماح بالنزول لسطر جديد */
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important; /* إظهار سطرين كحد أدنى */
        -webkit-box-orient: vertical !important;
        overflow: visible !important;
        height: auto !important; /* ترك الارتفاع يتحدد حسب النص */
        
        /* 2. تصغير حجم الخط ليناسب العرض الضيق */
        font-size: 13px !important; 
        line-height: 1.4 !important;
        margin-bottom: 5px !important;
    }

    /* 3. ضبط مساحة محتوى البطاقة لتجنب التداخل */
    .s-product-card-content {
        padding: 8px 5px !important;
        min-height: 80px !important; /* توحيد ارتفاع منطقة النص */
    }
}
/* تغيير لون عنوان بطاقة المنتج للأزرق الداكن - ثيم إتقان */
salla-product-card {
    --s-product-card-title-color: #00008b !important; /* متغير اللون الداخلي */
}

/* استهداف العنوان بشكل مباشر للأمان */
.s-product-card-content-title, 
.s-product-card-content-title a,
salla-product-card::part(title) {
    color: #00008b !important;
}
@media (max-width: 767px) {
    salla-rating-stars, 
    .s-product-card-rating {
        display: none !important; /* إخفاء التقييم للحفاظ على تناسق العمودين */
    }
}