/*!
 * FFF Product Card Presentation
 * Faith First Firearms LLC - Launch UX Cleanup batch, 2026-08-14
 *
 * SCOPE
 *   WooCommerce product LOOP cards only: /shop/, product_cat and product_tag
 *   archives, product search results, and related / upsell / cross-sell loops.
 *   These surfaces all render the same component:
 *     ul.products > li.product > a.woocommerce-loop-product__link > img + h2 + .price
 *     followed by a sibling a.button (Add to cart / Select options).
 *
 * EXPLICITLY NOT IN SCOPE
 *   Single-product main image and gallery, cart, checkout, header mini-cart,
 *   media library, future Staff Picks cards. None of those use ul.products.
 *
 * PRESENTATION ONLY
 *   No product data, featured image, attachment, SKU, price, stock, product_cat
 *   or product_tag is read or written by this file.
 *
 * DESIGN RATIONALE (measured, n=4000 published product featured images)
 *   aspect ratio  <=0.80 portrait ......  2.7%
 *                 0.80-1.20 square ..... 51.2%  (48.1% exactly 1:1)
 *                 1.20-1.60 ............ 26.7%
 *                 1.60-2.20 ............  4.2%
 *                 2.20-3.50 ............  3.5%
 *                 >3.50 panorama ....... 11.7%  (long guns, up to 5.7:1)
 *   A 1:1 stage fits the dominant square case edge to edge, keeps the 1.2-1.6
 *   group large, and still shows 5.7:1 long guns complete. object-fit:contain
 *   guarantees the whole source image is visible and never distorted.
 */

:root {
	--fff-card-stage-ratio: 1 / 1;
	--fff-card-stage-pad: 14px;
	--fff-card-stage-bg: #FFFFFF;
	--fff-card-title-min: 3.2em;
}

/* ---------------------------------------------------------------------------
   1. Card shell - equal-height cards, action area pinned to the bottom
   --------------------------------------------------------------------------- */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
   2. Image stage - uniform height, whole image, no crop, no distortion
   --------------------------------------------------------------------------- */
.woocommerce ul.products li.product a.woocommerce-loop-product__link img,
.woocommerce ul.products li.product > a img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: var(--fff-card-stage-ratio);
	object-fit: contain;
	object-position: center center;
	padding: var(--fff-card-stage-pad);
	background: var(--fff-card-stage-bg);
	box-sizing: border-box;
	border-radius: 8px;
	margin: 0 0 12px;
}

/* Placeholder images get the same stage so rows never break alignment. */
.woocommerce ul.products li.product img.woocommerce-placeholder {
	aspect-ratio: var(--fff-card-stage-ratio);
	object-fit: contain;
}

/* ---------------------------------------------------------------------------
   3. Title - predictable space. Never truncated, never shrunk below 15px.
   --------------------------------------------------------------------------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	min-height: var(--fff-card-title-min);
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   4. Price and action area alignment
   --------------------------------------------------------------------------- */
.woocommerce ul.products li.product .price {
	display: block;
	margin: auto 0 0;
}

.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product > .button,
.woocommerce ul.products li.product > .added_to_cart {
	align-self: flex-start;
	margin-top: 12px;
}

/* ---------------------------------------------------------------------------
   5. Overflow guards
   --------------------------------------------------------------------------- */
.woocommerce ul.products {
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
   6. Responsive stage tuning
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	:root {
		--fff-card-stage-pad: 12px;
	}
}

@media (max-width: 767px) {
	:root {
		--fff-card-stage-pad: 10px;
		--fff-card-title-min: 2.9em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product img {
		transition: none !important;
		animation: none !important;
	}
}