/* ============================================================
   CLS (Cumulative Layout Shift) fixes
   Loaded LAST so these rules win over the template styles.
   Goal: reserve layout space up-front so nothing jumps while
   images, fonts and async data load. Target: CLS < 0.1 (mobile).
   ============================================================ */

/* 1) Product-card images (home, search results, category grids).
      The image box gets a FIXED height, so the card/row height is
      known before the image downloads. object-fit keeps the aspect
      ratio (no distortion); the box just letterboxes if needed. */
.services-two__single-img {
  height: 275px;
  max-height: 275px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.services-two__single-img img {
  width: 80%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 767px) {
  .services-two__single-img {
    height: 220px;
    max-height: 220px;
  }
}

/* 2) Reserve space for async product lists so the content/footer
      below does not jump up before the fetch resolves and again
      after it fills in. Roughly one row of cards tall. */
.itms-container {
  min-height: 320px;
}

/* 3) Product-detail main image: reserve space via an aspect ratio
      instead of letting height snap from 0 to the loaded height. */
.product-detail__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

/* 4) Blog / project / resource images keep a stable box while loading. */
.blog-one__single-img img,
.projects-one__single-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* 5) Logos: let width/height attributes drive the aspect ratio so the
      reserved box matches the final render (no reflow when they load). */
.logo img,
.footer-widget__about-logo img {
  max-width: 100%;
  height: auto;
}