/* Robin Fox Knox — product image animations
 * Shop/category grid: crossfade to each product's real gallery image on hover (when one exists),
 * plus a subtle zoom on the image itself. Single product page: gallery thumbnail hover/active polish.
 * Entrance animation for cards as they scroll into view.
 */

/* ---------- Shop / category grid ---------- */
.wp-block-woocommerce-product-image { overflow: hidden; position: relative; }
.wp-block-woocommerce-product-image img.attachment-large,
.wp-block-woocommerce-product-image img.wp-post-image {
	transition: transform .6s cubic-bezier(.2,.7,.3,1), opacity .5s ease;
}
.wp-block-woocommerce-product-image:hover img.attachment-large,
.wp-block-woocommerce-product-image:hover img.wp-post-image {
	transform: scale(1.06);
}

/* Hover-swap overlay image (injected server-side from the product's real gallery) */
.rfk-hover-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.3,1);
	pointer-events: none;
}
.wp-block-woocommerce-product-image:hover .rfk-hover-img {
	opacity: 1;
	transform: scale(1);
}
.wp-block-woocommerce-product-image:hover img.attachment-large:not(.rfk-hover-img),
.wp-block-woocommerce-product-image:hover img.wp-post-image:not(.rfk-hover-img) {
	opacity: 0;
}

/* Card entrance animation on scroll (class added by rfk-mobile-nav.js's IntersectionObserver) */
ul.products li.product,
li.wc-block-product-template-item,
.wc-block-product-template li {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}
ul.products li.product.rfk-in-view,
li.wc-block-product-template-item.rfk-in-view,
.wc-block-product-template li.rfk-in-view {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- Single product gallery ---------- */
.woocommerce-product-gallery__image, .wp-block-woocommerce-product-image-gallery .wc-block-woocommerce-product-gallery-large-image img {
	transition: transform .3s ease;
}
.woocommerce-product-gallery__trigger { transition: opacity .3s ease; }

/* thumbnails: lift + border highlight on hover, active state in brand bronze */
.flex-control-thumbs li img,
.wc-block-woocommerce-product-image-gallery .wc-block-product-gallery-thumbnails img {
	transition: transform .25s ease, border-color .25s ease, opacity .25s ease;
	border: 2px solid transparent;
	cursor: pointer;
}
.flex-control-thumbs li img:hover,
.wc-block-woocommerce-product-image-gallery .wc-block-product-gallery-thumbnails img:hover {
	transform: translateY(-3px);
	border-color: #C99A3E;
}
.flex-control-thumbs li.flex-active-slide img,
.wc-block-woocommerce-product-image-gallery .wc-block-product-gallery-thumbnails .is-selected img {
	border-color: #101B33;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-woocommerce-product-image img,
	.rfk-hover-img,
	ul.products li.product,
	li.wc-block-product-template-item,
	.wc-block-product-template li,
	.flex-control-thumbs li img {
		transition: none !important;
		transform: none !important;
	}
	ul.products li.product,
	li.wc-block-product-template-item,
	.wc-block-product-template li {
		opacity: 1 !important;
	}
}