/*
 * Petland Summerville — custom override stylesheet.
 * Loaded by functions.php AFTER the parent stylesheet, so rules here win.
 * Use this for larger/organized overrides; keep small tweaks in style.css.
 */

/* === Puppy grid: uniform card images =========================================
 * The /puppies-for-sale/ grid (parent-theme WooCommerce product cards) shows
 * puppy photos uploaded at mixed sizes/orientations. With no enforced frame,
 * small/landscape studio shots float with whitespace while large/portrait shots
 * fill the card. Force every card image into the SAME square, cropped to fill
 * (never stretched). Scoped to WooCommerce product cards (li.product) so it only
 * touches the puppy grids — the archive AND the child's Puppies page template
 * reuse the same card (functions.php psv_render_location_puppies()).
 *
 * Written to be version-agnostic: works whether the live parent wraps the image
 * in a Bootstrap .ratio box (newer build) or renders a plain linked <img> (older
 * build). !important is required to beat the parent's inline width/height="542".
 * ============================================================================ */

/* 1. Square the image wrapper (newer .ratio / .unlock-price-image-container box,
      or the standard WooCommerce product link in older markup). */
li.product .ratio,
li.product .unlock-price-image-container,
li.product a.woocommerce-LoopProduct-link {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

/* 2. Fill that square with the photo — cropped to cover, never distorted. */
li.product img.wp-post-image,
li.product .ratio img,
li.product .unlock-price-image-container img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 1 / 1;
	object-fit: cover !important;
	object-position: center 30%; /* bias upward so puppy faces stay in frame */
	background: #f4f1ec;         /* neutral fill behind any transparency */
}