/**
 * Hover de imagem para cards de variações por cor.
 * A imagem principal e a secundária pertencem a variações da mesma cor.
 */
.wizer-variation-color-card .astra-shop-thumbnail-wrap > a.woocommerce-LoopProduct-link,
.wizer-variation-color-card .astra-shop-thumbnail-wrap > a.woocommerce-loop-product__link {
	position: relative;
	display: block;
	overflow: hidden;
}

.wizer-variation-color-card .astra-shop-thumbnail-wrap > a > img:not(.wizer-variation-hover-image) {
	position: relative;
	z-index: 1;
}

.wizer-variation-color-card .astra-shop-thumbnail-wrap .wizer-variation-hover-image {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.wizer-variation-color-card .astra-shop-thumbnail-wrap > a:hover .wizer-variation-hover-image,
	.wizer-variation-color-card .astra-shop-thumbnail-wrap > a:focus-visible .wizer-variation-hover-image {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wizer-variation-color-card .astra-shop-thumbnail-wrap .wizer-variation-hover-image {
		transition: none;
	}
}

/**
 * Em dispositivos touch, o primeiro toque revela a imagem secundária e a
 * navegação ocorre logo depois pelo script do plugin.
 */
@media (hover: none), (pointer: coarse) {
	.wizer-variation-color-card.wizer-mobile-image-revealed .astra-shop-thumbnail-wrap .wizer-variation-hover-image {
		opacity: 1;
	}

	.wizer-variation-color-card.wizer-mobile-navigation-pending a {
		-webkit-tap-highlight-color: transparent;
	}
}

/**
 * Permite rolagem vertical normal e reserva o gesto horizontal da imagem
 * para alternar entre a foto principal e a secundária no mobile.
 */
@media (hover: none), (pointer: coarse) {
	.wizer-variation-color-card .astra-shop-thumbnail-wrap > a.woocommerce-LoopProduct-link,
	.wizer-variation-color-card .astra-shop-thumbnail-wrap > a.woocommerce-loop-product__link {
		touch-action: pan-y;
	}
}


/**
 * Cada card expandido já representa uma única cor; oculta grades de swatches
 * adicionadas por outros plugins/trechos ao produto pai.
 */
.wizer-variation-color-card .coral-swatch-grid {
	display: none !important;
}