/*
Theme Name: Corsen
Theme URI: https://corsen.qodeinteractive.com
Description: Corsen - Fashion and Clothing Store Theme
Author: Select Themes
Author URI: https://qodeinteractive.com
Text Domain: corsen
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-menu, featured-images, flexible-header, post-formats, sticky-post, threaded-comments, translation-ready
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/* 1) The container that holds the product image — keep a fixed aspect ratio (2:3)
   Use aspect-ratio where supported and a padding-top fallback for older browsers. */
ul.products li.product .product-image-wrap,
.woocommerce ul.products li.product .product-image-wrap {
  width: 100%;
  /* desktop visual height control: choose a base. It will remain proportional by aspect-ratio */
  aspect-ratio: 2 / 3;            /* modern browsers */
  position: relative;
  overflow: hidden;
  background-color: #fff;         /* optional placeholder */
  border-radius: 2px;
}

/* fallback for browsers not supporting aspect-ratio */
ul.products li.product .product-image-wrap::before,
.woocommerce ul.products li.product .product-image-wrap::before {
  content: "";
  display: block;
  padding-top: 150%; /* 3/2 = 150% => height = 150% of width => 2:3 aspect */
}

/* 2) Make the actual <img> fill the box with cover (no distortion) */
ul.products li.product .product-image-wrap img,
.woocommerce ul.products li.product .product-image-wrap img,
ul.products li.product img.wp-post-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* critical — fills the box and crops nicely */
  object-position: 50% 30%; /* tweak vertical crop; change to 50% 50% if you prefer center */
  display: block;
}

/* 3) Make card content (title/price) consistent height if needed */
ul.products li.product {
  display: flex;
  flex-direction: column;
  height: 100%;
}
ul.products li.product .woocommerce-loop-product__link,
ul.products li.product .product-card-inner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
ul.products li.product .shop-loop-meta {
  margin-top: auto; /* pushes price/actions to bottom to align across rows */
}