/**
 * SquareFit Performance CSS
 * Prevents Cumulative Layout Shift (CLS) by reserving space for
 * dynamically loaded images via aspect-ratio.
 *
 * Linked in: index.html, shop-default.html, product-detail.html
 */

/* ── Hero slider images ──────────────────────────────────────────────────────
   CLS prevention: <img width="1920" height="700"> attrs in load-slides.js
   tell the browser the intrinsic ratio before the image loads — space is
   reserved automatically without aspect-ratio CSS.
   Height at desktop: natural image ratio (image drives wrap-slider height).
   Height at mobile (≤767px): styles.css sets wrap-slider to 350px.
   object-fit: cover on .slide-img ensures images fill whichever container
   size styles.css establishes at each breakpoint.                           */
.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Product / category collection images ────────────────────────────────────
   Square product images                                                        */
.collection-image.img-style,
.shop-cat-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f6f8fb;
}

/* ── Product grid cards ──────────────────────────────────────────────────────*/
.card-product-wrapper .product-img {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f6f8fb;
}

.card-product-wrapper .img-product,
.card-product-wrapper .img-hover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Featured collection (portrait banner) ───────────────────────────────────*/
.collection-item-v4 .collection-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f0f2f5;
}

/* ── Testimonial thumbnails ──────────────────────────────────────────────────*/
.box-img .img-style {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f0f2f5;
}

/* ── Personalized section banner ─────────────────────────────────────────────*/
/* store-img: aspect-ratio holds space until JS sets the image src (CLS guard) */
.widget-card-store .store-img {
  aspect-ratio: 6 / 7;
  overflow: hidden;
  background: #f0f2f5;
}

.widget-card-store .store-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* store-item-info: img-bg is absolutely positioned — clip it to parent bounds */
.widget-card-store.type-bg-img .store-item-info {
  overflow: hidden;
}

/* ── Highlight section product images ────────────────────────────────────────*/
.highlight-swiper .card-product .card-product-wrapper {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f6f8fb;
}

/* ── Banner countdown image ──────────────────────────────────────────────────
   Space reserved while data-timer.js fetches from DB and sets src.            */
.tf-hero-image-liquid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-countdown-v2 {
  aspect-ratio: 16 / 5;
  background: #f0f2f5;
  min-height: 160px;
}
@media (max-width: 767px) {
  .banner-countdown-v2 {
    aspect-ratio: 4 / 3;
  }
}

/* ── Ensure all dynamic images don't overflow their containers ───────────────*/
img {
  max-width: 100%;
  height: auto;
}

/* ── Native lazy loading fade-in ─────────────────────────────────────────────*/
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded,
img[loading="eager"] {
  opacity: 1;
}