.product-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-outofstock { opacity:.75; }

.product-image-holder {
  display: grid;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden; /* جلوگیری از بیرون زدن تصویر هنگام scale */
}
.product-image-size {
  padding-top: 1rem;
  margin-bottom: 3.5rem;
  width: 120px;
  height: 120px;
}
@media (min-width:1024px){
  .product-image-size { width: 144px; height: 144px; }
}

.product-image {
  grid-area: 1/1/2/2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease, opacity .25s ease-in-out;
  backface-visibility: hidden;
}

/* همیشه: روی hover یک zoom نرم بده (برای هر دو حالت — تک تصویر یا چند تصویر) */
.product-link:hover .product-image {
  transform: scale(1.05);
}

/* حالت پیش‌فرض برای تصویر hover (اگر وجود داشته باشد مخفی باشد) */
.product-image-hover { opacity: 0; }

/* -------- شرطی: فقط وقتی تصویر دوم وجود داشته باشد، تصویر عوض شود -------- */
/* روش اول (اگر مرورگر از :has پشتیبانی کند) */
.product-link:has(.product-image-hover):hover .product-image-main {
  opacity: 0;
}
.product-link:has(.product-image-hover):hover .product-image-hover {
  opacity: 1;
}

/* روش دوم — fallback برای مرورگرهایی که :has پشتیبانی نمی‌کنند:
   جاوااسکریپت یک کلاس has-hover-image به <a class="product-link"> اضافه می‌کند */
.product-link.has-hover-image:hover .product-image-main { opacity: 0; }
.product-link.has-hover-image:hover .product-image-hover { opacity: 1; }

/* بقیه استایل‌ها (همان قبلی‌ها) */
.product-title {
  font-size: .75rem;
  line-height: 21px;
  color: #1a1a1a;
  font-weight: 500;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0 16px;
}
.product-prices { margin-top: auto; padding-top: 12px; padding-left: 16px; padding-right: 16px; }
.product-compareprice { font-size: .625rem; color: #999; text-decoration: line-through; display: block; font-weight: 500; line-height: 1; margin-bottom: 3px; }
.product-price { font-size: .875rem; color: #0000FF; font-weight: 700; display: block; line-height: 18px; }
.product-price-unit { font-size: .625rem; letter-spacing: -.5px; color: #0000FF; }
.product-discount { background: #f00; border-radius: 9999px; font-size: .75rem; font-weight: 800; padding: 2px 8px; color: #fff; position: absolute; left: 0; bottom: 0; line-height: 1; }
.product-outofstock-text { color: #b91c1c; font-size: .75rem; font-weight: 500; }