/* === DeviGifts CLS + Performance Fix v4 === */
/* File: /public/dg-fix.css — linked via header_script */
/* Updated: 2026-03-23 — Removed broad wildcard img selectors that caused cropping */

/* 1. IMAGES: prevent layout shift by reserving space */
img {
  vertical-align: middle;
  background-color: #f5f5f5;
}
img:not([src]), img[src=""] {
  background-color: #f0f0f0;
  min-height: 60px;
}

/* 2. BANNER images: aspect-ratio 1280x620 */
[class*="banner-section"] img,
.hero-banner img {
  aspect-ratio: 1280 / 620;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 3. CATEGORY thumbnail images: square
   REMOVED [class*="categor"] img — was too broad, matched product detail images too.
   Only using specific class .category-img which is the actual thumbnail wrapper. */
.category-img img,
.cat-img img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 4. PRODUCT card images: square (listing/grid cards only)
   REMOVED [class*="product"] img.img-fluid — was matching the main product
   detail page image and forcing it into a 1:1 crop.
   Only .product-card is used — a specific card class, not the detail page. */
.product-card img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 5. SWIPER overflow fix */
.swiper-wrapper {
  overflow: visible !important;
}

/* 6. FOOTER CLS FIX v4 — THE MAIN FIX
   Root cause: Vue renders Header → Footer → Main (in that order).
   Footer appears at Y=196 (visible), then Main pushes it to Y=4499.
   Fix: Make main fill the viewport → footer always renders BELOW FOLD.
*/
.v-main.aiz-main-wrap,
main.aiz-main-wrap,
.v-main {
  min-height: calc(100vh - 200px) !important;
}

/* 7. Footer height stability (prevents secondary CLS) */
footer.bg-grey-darken-4 {
  flex-shrink: 0 !important;
}

/* REMOVED rule 8: .mb-5 { contain: layout; }
   Too broad — mb-5 is a common Vuetify/Bootstrap utility class applied
   to many unrelated sections, causing stacking context issues. */