/**
 * Square product image system — globally enforced 1:1 ratio for all product images.
 *
 * Per Tahir's Phase 4 contract item 7 (PHASE_4_PLAN.md §1):
 *   "Square product image system globally enforced via CSS that cannot be
 *   accidentally broken by future content edits."
 *
 * Per DESIGN_SYSTEM §5.2 (product card spec — 1:1 image ratio).
 *
 * Strategy:
 *   1. WC `add_image_size('lpk_product_card', 640, 640, true)` registered in
 *      functions.php enforces crop on UPLOAD (every new image gets a square 640x640 thumbnail).
 *   2. CSS below enforces 1:1 ratio + object-fit:contain on the RENDERED image,
 *      so even if a non-cropped thumbnail somehow renders, it sits inside a square frame
 *      with letterboxing rather than distorting.
 *   3. Belt + suspenders: defensive CSS targets every common WC product image selector.
 *
 * Selectors covered: .lpk-product-card image, WC's .woocommerce-loop-product__link img,
 * .wp-block-woocommerce-product-image, plus .lpk-pdp gallery thumbs.
 *
 * @file product-image-square.css
 * @phase 4-A
 */

/* === Generic 1:1 image container — apply class to any wrapper === */
.lpk-square-image {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-bg-surface, #F9FAFB);
}
.lpk-square-image > img,
.lpk-square-image picture,
.lpk-square-image picture > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

/* === Product card image (lpk-product-card pattern from mockups) === */
.lpk-product-card .product-card__image,
.lpk-product-card .lpk-product-card__image {
	aspect-ratio: 1 / 1;
	background: var(--color-bg-surface, #F9FAFB);
	overflow: hidden;
	position: relative;
}
.lpk-product-card .product-card__image img,
.lpk-product-card .lpk-product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

/* === WC core selectors (loop / archive / category page product cards) === */
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce ul.products li.product img,
.wc-block-grid__product-image img {
	aspect-ratio: 1 / 1 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
	background: var(--color-bg-surface, #F9FAFB);
}

/* === Gutenberg WC blocks === */
.wp-block-woocommerce-product-image img,
.wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	background: var(--color-bg-surface, #F9FAFB);
}

/* === PDP main gallery (Phase 4-C will rebuild but ratio is locked here too) === */
.lpk-pdp__main-image,
.woocommerce-product-gallery__image {
	aspect-ratio: 1 / 1;
	background: var(--color-bg-surface, #F9FAFB);
	overflow: hidden;
}
.lpk-pdp__main-image img,
.woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* === PDP gallery thumbnails (always square) === */
.lpk-pdp__thumbs li,
.flex-control-thumbs li {
	aspect-ratio: 1 / 1;
}
.lpk-pdp__thumbs img,
.flex-control-thumbs img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	background: var(--color-bg-surface, #F9FAFB);
}