/* =============================================================
   square-images.css — loaded LAST, highest specificity
   Forces 1:1 aspect ratio on ALL product loop card images.
   Covers: archive grid, homepage popular slider, bundle cards.
   ============================================================= */

/* ══════════════════════════════════════════════════════════════
   1. ARCHIVE GRID (shop/category pages)
      Replaces the fixed `height: 220px` with true 1:1 ratio.
   ══════════════════════════════════════════════════════════════ */
body.post-type-archive-product.woocommerce ul.products li.product img,
body.tax-product_cat.woocommerce            ul.products li.product img,
body.tax-product_tag.woocommerce            ul.products li.product img,
body.post-type-archive-product.woocommerce-page ul.products li.product img,
body.tax-product_cat.woocommerce-page           ul.products li.product img,
body.tax-product_tag.woocommerce-page           ul.products li.product img {
  width:           100%    !important;
  height:          auto    !important;   /* ← replaces all fixed px heights */
  aspect-ratio:    1 / 1   !important;
  object-fit:      cover   !important;
  object-position: center  !important;
  display:         block   !important;
  padding:         0       !important;
  margin:          0       !important;
  border-radius:   20px 20px 0 0 !important;
  background:      linear-gradient(180deg, #f7faf8 0%, #eef5f2 100%);
  transition:      transform .25s ease;
}

/* ══════════════════════════════════════════════════════════════
   2. HOMEPAGE POPULAR PRODUCTS SLIDER
      The ul.products inside the slider uses data-pq-slider-track.
   ══════════════════════════════════════════════════════════════ */
.pq-popular-products ul.products[data-pq-slider-track] > li.product img,
.pq-popular-slider__track-wrap ul.products li.product img {
  width:           100%    !important;
  height:          auto    !important;
  aspect-ratio:    1 / 1   !important;
  object-fit:      cover   !important;
  object-position: center  !important;
  display:         block   !important;
  padding:         0       !important;
  margin:          0       !important;
  border-radius:   20px 20px 0 0 !important;
  background:      linear-gradient(180deg, #f7faf8 0%, #eef5f2 100%);
  transition:      transform .25s ease;
}

/* ══════════════════════════════════════════════════════════════
   3. BUNDLE IMAGES (homepage dark section)
      Replaces fixed `height: 150px`.
   ══════════════════════════════════════════════════════════════ */
.pq-bundle__img {
  width:           100%    !important;
  height:          auto    !important;
  aspect-ratio:    1 / 1   !important;
  object-fit:      cover   !important;
  object-position: center  !important;
  display:         block;
  border-radius:   var(--pq-radius);
  margin-bottom:   4px;
}

/* ══════════════════════════════════════════════════════════════
   4. GLOBAL FALLBACK — any WooCommerce loop card not caught above
   ══════════════════════════════════════════════════════════════ */
.woocommerce ul.products li.product > a img,
.woocommerce ul.products li.product img.wp-post-image {
  width:           100%    !important;
  height:          auto    !important;
  aspect-ratio:    1 / 1   !important;
  object-fit:      cover   !important;
  object-position: center  !important;
  display:         block   !important;
  padding:         0       !important;
  margin:          0       !important;
}

/* ══════════════════════════════════════════════════════════════
   5. PRODUCT-CATEGORY tiles — these use position:absolute so
      they shouldn't be square; keep them untouched.
      Explicitly undo any 1:1 we might accidentally set on them.
   ══════════════════════════════════════════════════════════════ */
body.post-type-archive-product.woocommerce ul.products li.product-category img,
body.tax-product_cat.woocommerce            ul.products li.product-category img,
body.tax-product_tag.woocommerce            ul.products li.product-category img {
  aspect-ratio:  auto     !important;
  height:        100%     !important;
  position:      absolute !important;
  inset:         0        !important;
  border-radius: 0        !important;
  background:    transparent !important;
}