/* Udgoon Commerce Core — Product Card Renderer
 *
 * Canonical product-card media behavior for homepage commerce sections.
 * Desktop hover crossfade: primary -> secondary.
 * Touch/coarse pointer: secondary hidden, primary only.
 * Reduced motion: transition eliminated.
 *
 * Forge owns section geometry. Commerce Core owns media markup, absolute
 * secondary overlay, and hover opacity. The scoped rules below use
 * !important with selectors that outrank the actual live Forge image
 * cascade so the 12px gap lives on the media wrapper, not on images.
 *
 * Version: 1.4.2
 */

/* === Base media container === */
.udg-product-card .udg-product-card__media {
	position: relative;
	overflow: hidden;
	display: block;
	width: 100%;
}

/* === Base primary image === */
.udg-product-card .udg-product-card__image--primary {
	position: relative;
	z-index: 1;
	opacity: 1;
	transition: opacity 300ms ease;
}

/* === Base secondary image — absolutely positioned, no layout flow === */
.udg-product-card .udg-product-card__image--secondary {
	position: absolute !important;
	inset: 0;
	z-index: 2;
	opacity: 0;
	transition: opacity 300ms ease;
	pointer-events: none;
}

/* === Desktop fine-pointer hover: crossfade primary -> secondary === */
@media (hover: hover) and (pointer: fine) {
	.udg-product-card:hover .udg-product-card__image--primary {
		opacity: 0;
	}

	.udg-product-card:hover .udg-product-card__image--secondary {
		opacity: 1;
	}
}

/* === Touch/coarse pointer: secondary hidden, non-interactive === */
@media (hover: none), (pointer: coarse) {
	.udg-product-card .udg-product-card__image--secondary {
		display: none;
	}

	.udg-product-card .udg-product-card__image--primary {
		opacity: 1;
		transition: none;
	}
}

/* === Reduced motion: eliminate transition, keep functionality === */
@media (prefers-reduced-motion: reduce) {
	.udg-product-card .udg-product-card__image--primary,
	.udg-product-card .udg-product-card__image--secondary {
		transition: none;
	}
}

/* === Cards without a secondary image: no hover state changes === */
.udg-product-card:not(.has-secondary-image) .udg-product-card__image--primary {
	opacity: 1;
}

/* ================================================================
 * S02 — New Arrivals
 *
 * Competing Forge rule (live Production Polish):
 *   .udg-home-s02__products ul.products li.product a img {
 *       display:block; width:100%!important;
 *       aspect-ratio:4/5; margin:0 0 12px!important; object-fit:cover;
 *   }
 *
 * Forge specificity: 4 classes + 3 elements = (0,4,3)
 * Our scoped selectors below use 5+ classes to outrank it.
 *
 * Model:
 *   MEDIA WRAPPER owns the 4:5 frame + the 12px bottom gap.
 *   IMAGES have zero margin and fill the visual frame only.
 *   Secondary (absolute inset:0) cannot extend into the 12px gap.
 * ================================================================ */

.udg-home-s02__products ul.products li.product .udg-product-card .udg-product-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	margin: 0 0 12px;
	overflow: hidden;
}

/* Override Forge's `a img` margin/width on BOTH images inside S02 media.
 * Selector: 6 classes + 1 element = (0,6,1) — outranks Forge (0,4,3). */
.udg-home-s02__products ul.products li.product .udg-product-card .udg-product-card__media > .udg-product-card__image {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: cover;
	display: block;
}

/* S02 primary fills the 4:5 frame. */
.udg-home-s02__products ul.products li.product .udg-product-card .udg-product-card__media > .udg-product-card__image--primary {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: cover;
}

/* S02 secondary fills the 4:5 frame, absolute, no gap. */
.udg-home-s02__products ul.products li.product .udg-product-card .udg-product-card__media > .udg-product-card__image--secondary {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: cover;
	object-position: center top;
}

/* ================================================================
 * S04 — The Udgoon Edit
 *
 * Competing Forge rule (live Production Polish):
 *   .udg-home-s04__products ul.products li.product a img {
 *       width:100%!important; height:auto; margin:0!important;
 *       object-fit:contain;
 *   }
 *
 * S04 is editorial: natural height, contain, no forced 4:5 crop.
 * Media wrapper height is established by the primary image.
 * Secondary absolute inset:0 fills the primary's footprint.
 * ================================================================ */

/* S04 media wrapper: no forced aspect-ratio, height from primary. */
.udg-home-s04__products ul.products li.product .udg-product-card .udg-product-card__media {
	position: relative;
	overflow: hidden;
	margin: 0;
}

/* S04 primary: natural height, contain, zero margin.
 * Selector: 6 classes + 1 element = (0,6,1) — outranks Forge (0,4,3). */
.udg-home-s04__products ul.products li.product .udg-product-card .udg-product-card__media > .udg-product-card__image--primary {
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	object-fit: contain;
	display: block;
}

/* S04 secondary: absolute, fills primary footprint, contain. */
.udg-home-s04__products ul.products li.product .udg-product-card .udg-product-card__media > .udg-product-card__image--secondary {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: contain;
	object-position: center center;
}