/* Add custom CSS styles below */ 
/***** 0) أساسيات الصور *****/
:where(img) {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/***** 1) شبكة بطاقات المنتجات (الصفحة الرئيسية/القسم) *****/
:where([class*="product-card"], [class*="product_item"], [class*="grid"] [class*="product"])
  :where(img) {
  aspect-ratio: 1 / 1;        /* عدّلها إذا صورك مستطيلة */
}
:where([class*="product-card"], [class*="product_item"], [class*="grid"] [class*="product"])
  :where([class*="image"], [class*="media"], picture) {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/***** 2) صفحة المنتج — الصورة الرئيسية والمعرض *****/
:where([class*="product"], [class*="product-page"]) 
  :where([class*="gallery"], [class*="media"], [class*="image"], picture) {
  aspect-ratio: 1 / 1;        /* أغلب صور المنتجات مربعة؛ غيّرها 4/5 أو 3/4 إذا لزم */
  overflow: hidden;
}

/* شرائح السلايدر (Swiper/Glide شائع في سلة) */
:where(.swiper, [class*="swiper"], [class*="glide"]) :where(.swiper-slide, [class*="slide"]) 
  :where(img, picture) {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
}

/* الصور المصغّرة (ثامبنيلز) ثابتة الحجم لتفادي القفز */
:where([class*="thumb"], [class*="thumbnail"], [class*="mini"], [class*="swatch"]) img {
  width: 64px; height: 64px; object-fit: cover;
}

/***** 3) البنرات/الهيرو *****/
:where([class*="hero"], [class*="banner"], [class*="cover"], [class*="masthead"]) {
  aspect-ratio: 16 / 9;       /* غيّرها 21/9*