/* Add custom CSS styles below */ 
/* ============================================================
   1. تصغير بطاقات المنتجات وضبط أبعادها (لثيم رائد)
   ============================================================ */
.product-item, 
.s-product-card-entry,
[data-salla="product-card"] {
  background-color: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #eef2f6 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  padding: 8px !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

/* حركة رفع لطيفة للمنتج عند التمرير */
.product-item:hover, 
.s-product-card-entry:hover,
[data-salla="product-card"]:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important;
}

/* ============================================================
   2. تصغير حاوية الصورة والصور نفسها لمنع الضخامة
   ============================================================ */
.product-item .product-item-image,
.s-product-card-image,
.s-product-card-entry .s-product-card-image-wrap,
.product-item img, 
.s-product-card-entry img {
  height: 180px !important;
  max-height: 180px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

/* تصغير عنوان المنتج ليصبح متناسقاً */
.product-item .product-title,
.s-product-card-title,
.s-product-card-title a {
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  color: #1e293b !important;
}

/* ============================================================
   3. تحسين شارات الخصومات والعروض
   ============================================================ */
.s-product-card-sale-badge, 
.badge-discount,
.product-item .badge {
  background: #e11d48 !important;
  color: #ffffff !important;
  font-weight: bold !important;
  font-size: 0.72rem !important;
  border-radius: 6px !important;
  padding: 3px 6px !important;
}

/* ============================================================
   4. تنسيق أزرار الشراء "أضف إلى السلة"
   ============================================================ */
.s-button-primary, 
.btn-primary, 
.add-to-cart-btn,
.product-item .btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  transition: all 0.2s ease !important;
}

/* ============================================================
   5. ضبط العرض التلقائي لشاشات الجوال
   ============================================================ */
@media (max-width: 768px) {
  .product-item .product-item-image,
  .s-product-card-image,
  .s-product-card-entry .s-product-card-image-wrap,
  .product-item img, 
  .s-product-card-entry img {
    height: 140px !important;
    max-height: 140px !important;
  }
}