/* ================================
   1) العناوين - تقليل المسافة بين الأسطر
================================ */
h3.text-lg.font-bold.leading-12 {
  line-height: 1.4 !important;
  margin-bottom: 0.5em;
  word-break: break-word;
}

/* ================================
   2) الكروت العمودية: حاوية الصورة مربّعة
   مثال HTML:
   <custom-salla-product-card class="s-product-card-entry s-product-card-vertical ...">
================================ */
.s-product-card-entry.s-product-card-vertical .s-product-card-image {
  position: relative;
  width: 100%;
  height: 0;             /* نستخدم padding لعمل مربع */
  padding-top: 100%;     /* 1:1 = مربع */
  overflow: hidden;
  background: #f7f7f7;   /* خلفية خفيفة أثناء تحميل الصورة */
}

/* الرابط جوّه حاوية الصورة في الكروت العمودية */
.s-product-card-entry.s-product-card-vertical .s-product-card-image > a {
  position: absolute;
  inset: 0;
  display: block;
}

/* ================================
   3) الكروت الأفقية: نخلي الصورة Fill جوّه الكونتينر
   مثال HTML:
   <custom-salla-product-card class="s-product-card-entry s-product-card-horizontal ...">
================================ */
.s-product-card-entry.s-product-card-horizontal .s-product-card-image {
  overflow: hidden;   /* عشان أي جزء زيادة يتقص */
}

/* ================================
   4) كل صور الكروت (عمودي + أفقي):
      تملأ الكونتينر وتكون في النص
================================ */
.s-product-card-entry .s-product-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover !important;          /* Fill بدون مط */
  object-position: center center !important; /* في منتصف الصورة */
  border-radius: inherit;
}