/* تحسين CLS + LCP مع تصغير الصور في الجوال فقط */
img {
  max-width: 100% !important;
  height: auto !important; /* يحافظ على النسبة الطبيعية */
  display: block !important;
  object-fit: contain !important; /* بدون تشويه أو قص */
  background: #f0f0f0 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><rect width="30" height="30" fill="%23dddddd"/><text x="15" y="15" font-family="sans-serif" font-size="8" fill="%23999" text-anchor="middle" dy=".3em">...</text></svg>') center center no-repeat !important;
  background-size: 20px 20px !important; /* placeholder صغير جدًا */
}

/* أولوية عالية للهيرو */
.salla-hero-image, .hero-img, .slider-img:first-child, .banner-img:first-child, [class*="hero"], [class*="banner"], .salla-slider img:first-child, .salla-product-image, .product-img, .card-img {
  loading: eager !important;
  fetchpriority: high !important;
}

/* lazy للباقي */
img:not(.salla-hero-image):not(.hero-img):not(.slider-img:first-child):not([class*="hero"]):not([class*="banner"]) {
  loading: lazy !important;
}

/* خطوط */
@font-face {
  font-family: 'Tajawal';
  src: url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');
  font-display: swap !important;
}
body { font-family: 'Tajawal', sans-serif !important; }

/* عام (ديسكتوب) */
.salla-slider, .slider, .carousel, .hero-section, .salla-hero, .banner { 
  min-height: 200px !important; /* طبيعي لديسكتوب */
}

/* تخصيص للجوال (شاشات <768px) - مساحة أصغر */
@media (max-width: 768px) {
  img {
    min-height: 30px !important; /* صغير جدًا */
  }
  .salla-hero-image, .hero-img, .slider-img:first-child, .banner-img:first-child, [class*="hero"], [class*="banner"], .salla-slider img:first-child {
    min-height: 60px !important; /* هيرو صغير */
  }
  img:not(.salla-hero-image):not(.hero-img):not(.slider-img:first-child):not([class*="hero"]):not([class*="banner"]) {
    min-height: 25px !important;
  }
  .salla-product-image, .product-img, .card-img {
    min-height: 40px !important; /* صور منتجات صغيرة */
  }
  .salla-slider, .slider, .carousel, .hero-section, .salla-hero, .banner { 
    min-height: 80px !important; /* سلايدر صغير */
  }
}

/* للجوال الأصغر (<480px) */
@media (max-width: 480px) {
  img { min-height: 20px !important; }
  .salla-hero-image, .hero-img { min-height: 50px !important; }
  .salla-slider, .slider { min-height: 70px !important; }
}