/* ═══════════════════════════════════════════════
   حل CLS الآمن والمتوافق مع جميع المتصفحات
   ═══════════════════════════════════════════════ */

/* ✅ حل عام لجميع الصور */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ✅ صور المنتجات - نسبة 1:1 */
.product-image img,
.s-product-card-image img,
.s-block-image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Fallback للمتصفحات القديمة (Safari < 15) */
@supports not (aspect-ratio: 1 / 1) {
  .product-image img,
  .s-product-card-image img {
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* نسبة 1:1 */
  }
}

/* ✅ البنرات - نسبة 16:9 */
.banner-image,
.hero-image,
.slider-image {
  aspect-ratio: 16 / 9;
  width: 100%;
}

@supports not (aspect-ratio: 16 / 9) {
  .banner-image,
  .hero-image {
    padding-bottom: 56.25%; /* نسبة 16:9 */
    height: 0;
  }
}

/* ✅ منع قفزات الخطوط */
@font-face {
  font-display: swap;
}