/* --- 1) الأساسيات: إلغاء أي قيود تسبب فراغات --- */
custom-salla-product-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important; /* السماح للكارد بالتنفس */
}

.s-product-card-entry {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #f2f2f2 !important;
}

/* --- 2) منطقة الصورة: أهم تعديل --- */
.s-product-card-image {
  width: 100% !important;
  height: auto !important; /* إلغاء الارتفاع الثابت اللي عمل المشكلة */
  position: relative !important;
  background-color: #fff !important;
  padding: 0 !important;
  margin: 0 !important;
}

.s-product-card-image img {
  width: 100% !important;
  height: auto !important; /* جعل الصورة تأخذ ارتفاعها الطبيعي */
  object-fit: contain !important;
  display: block !important;
}

/* --- 3) شريط الكود: نخليه جزء من الصورة وليس طائراً فوقها --- */
[class*="code-bar"], .product-code-area { 
  display: flex !important;
  width: 100% !important;
  background: #f5f0eb !important; /* اللون الكريمي للشريط */
  padding: 6px 0 !important;
  justify-content: center !important;
  position: relative !important; /* نخليه يجي تحت الصورة مباشرة */
  margin-top: -1px !important; /* لضمان الالتصاق التام بالصورة */
  z-index: 5 !important;
  font-size: 11px !important;
}

/* --- 4) بيانات المنتج: خلفية بيضاء ومرتبة --- */
.s-product-card-content {
  background-color: #ffffff !important;
  padding: 15px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.s-product-card-content-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #333 !important;
}

.s-product-card-price {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #0d3b2e !important;
}

/* --- 5) زر الإضافة --- */
.s-product-card-content-footer button {
  width: 100% !important;
  background-color: #0d3b2e !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 12px !important;
  border: none !important;
}

/* --- 6) تعديلات الجوال لضمان التناسق --- */
@media (max-width: 767px) {
  .s-product-card-content {
    padding: 10px !important;
  }
  .s-product-card-content-title {
    font-size: 14px !important;
  }
  .s-product-card-price {
    font-size: 15px !important;
  }
}