/* 🎯 حل نهائي لمشكلة الإطار الطويل وتحسين الثبات */

/* جعل الصور تتكيف مع مساحة البطاقة بدون تحديد ارتفاع ثابت */
.product-card img,
.product-item img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 1 / 1; /* يضبط الصورة مربعة */
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* تثبيت مساحة البنر الرئيسي */
.hero-banner {
  min-height: 400px;
  overflow: hidden;
}

/* تثبيت ارتفاع المنتج بدون تمدد */
[class*="product-card"], .product-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* منع تمدد صندوق التقييم أو التعليقات */
.product-card .product-rating,
.product-item .product-rating {
  max-height: 25px !important;
  overflow: hidden !important;
  margin-top: 4px;
}

/* تحسين مظهر النص تحت الصور */
.product-card .product-title,
.product-item .product-title {
  line-height: 1.4;
  overflow: hidden;
}

/* منع الاهتزاز عند التحميل */
button, .btn {
  transition: none !important;
}

/* ثبات عام للصور في كل الصفحات */
img {
  width: 100%;
  height: auto;
  display: block;
}