/* ============================================================
   FIX: Auto-crop images on homescreen page v2.0
   ============================================================
   
   ROOT CAUSE:
   The previous fix attempted to force position:absolute on
   images and used padding-bottom hacks that CONFLICTED with
   the modern aspect-ratio property from d3-luxury.css and
   d8-mobile-typography-image.css. The 'contain: layout style'
   property from d8 further broke absolute-positioned children
   inside aspect-ratio containers.
   
   SOLUTION:
   Let the images stay in normal document flow (NO position:
   absolute). The container's aspect-ratio + the image's
   object-fit: cover does the proper cropping. We just need
   to ensure CSS specificity wins over conflicting rules.
   ============================================================ */

/* ── Desktop: ensure proper 4:5 aspect-ratio container ── */
.product-grid-lux .lux-img-container,
.product-card-lux .lux-img-container {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 4 / 5 !important;
  width: 100% !important;
  background: #FAF1F4 !important;
  border-radius: var(--card-radius, 16px) !important;
  /* Remove 'contain: layout style' from d8 — it breaks aspect-ratio */
  contain: none !important;
  contain: paint !important;
}

/* ── Desktop: images flow naturally with object-fit ── */
.product-grid-lux .lux-img-container img,
.product-card-lux .lux-img-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  /* CRITICAL: NO position:absolute — keep in normal flow */
  position: static !important;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* ── Image link stays as block in normal flow ── */
.product-grid-lux .lux-img-link,
.product-card-lux .lux-img-link {
  display: block !important;
  line-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* CRITICAL: NO position:absolute */
  position: static !important;
}

/* ── Mobile: max-width 768px ── */
@media (max-width: 768px) {
  .product-grid-lux .lux-img-container,
  .product-card-lux .lux-img-container {
    aspect-ratio: 4 / 5 !important;
    /* Remove height:0 / padding-bottom hack — use clean aspect-ratio */
    height: auto !important;
    padding-bottom: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    contain: none !important;
    contain: paint !important;
  }
  
  .product-grid-lux .lux-img-container img,
  .product-card-lux .lux-img-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    position: static !important;
  }
  
  .product-grid-lux .lux-img-link,
  .product-card-lux .lux-img-link {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* ── Badge positioning (keep these absolute for overlay) ── */
.product-card-lux .lux-img-container .mobile-product-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 6 !important;
}

.product-card-lux .lux-img-container .lux-badges {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 7 !important;
}

.product-card-lux .product-heart-btn {
  position: absolute !important;
  right: 10px !important;
  top: 10px !important;
  z-index: 5 !important;
}

/* ── Quick add overlay ── */
.lux-quick-add {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 7 !important;
}

/* ── Fix hover effect ── */
.product-card-lux:hover .lux-img-container img {
  transform: scale(1.05) !important;
}

/* ============================================================
   END FIX v2.0
   ============================================================ */