/*
 * Hover interactions for the classic/legacy-template product grid (Shop,
 * homepage, category archives) — reachable entirely through WooCommerce's
 * own loop hooks, no template file copied into the theme (see
 * class-toga-product-card-hover.php). A subtle card elevation/scale, plus a
 * secondary-gallery-image crossfade when Toga_Product_Card_Hover found one.
 *
 * The elevation/scale transition lives entirely inside
 * prefers-reduced-motion: no-preference, so a visitor who has asked for
 * reduced motion gets no card motion at all — not a slower version of it.
 * The secondary-image crossfade still happens, just instantly instead of
 * animated, since only its transition (not the opacity swap itself) is
 * gated the same way.
 */

@media (prefers-reduced-motion: no-preference) {
	.woocommerce ul.products li.product {
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.woocommerce ul.products li.product:hover,
	.woocommerce ul.products li.product:focus-within {
		transform: translateY(-2px) scale(1.01);
		box-shadow: var(--toga-shadow-md);
	}
}

.toga-product-card-hover__media {
	position: relative;
	display: block;
}

.toga-product-card-hover__secondary-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.toga-product-card-hover__secondary-image {
		transition: opacity 0.2s ease;
	}
}

.woocommerce ul.products li.product:hover .toga-product-card-hover__secondary-image,
.woocommerce ul.products li.product:focus-within .toga-product-card-hover__secondary-image {
	opacity: 1;
}