/* Add custom CSS styles below */

/* --- قسم الماركات (شريط الماركات) --- */
.s-block--animated-brands--brand {
    width: 160px !important;
    height: 40px !important;
    /* تمت إزالة الـ padding لضمان ملء الصورة للحاوية بالكامل */
    padding: 0 !important; 
    background-color: var(--bg-secondary) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--transition-main);
    margin: 0 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    /* تمت إضافة overflow: hidden لمنع أي جزء من الصورة من الخروج عن الحاوية المستديرة */
    overflow: hidden !important;
}

.s-block--animated-brands--brand:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- التعديلات الرئيسية هنا --- */
.s-block--animated-brands--brand img {
    /* جعل الصورة تملأ عرض وارتفاع الحاوية بالكامل */
    width: 100% !important;
    height: 100% !important;
    
    /* 
      استخدام 'cover' للحفاظ على نسبة أبعاد الصورة مع قص الأجزاء الزائدة.
      إذا كنت تريد تمديد الصورة لتملأ الحاوية بالكامل حتى لو تشوهت أبعادها،
      يمكنك استخدام 'fill' بدلاً من 'cover'.
    */
    object-fit: cover !important; 
    
    /* لم نعد بحاجة إلى max-width أو max-height */
}