.wcpif-wrap {
	position: relative;
	display: block;
	max-width: 100%;
	line-height: 0;
	overflow: hidden;
}

.wcpif-wrap > img:first-child {
	display: block;
	width: 100%;
	height: auto;
}

.wcpif-wrap > img.wcpif-hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	margin: 0;
	pointer-events: none;
	transition: opacity var(--wcpif-duration, 300ms) ease, transform var(--wcpif-duration, 300ms) ease;
}

.wcpif-effect-zoom > img.wcpif-hover {
	transform: scale(1.06);
}

/* Trigger: the image itself. */
@media (hover: hover) {
	.wcpif-wrap:not(.wcpif-trigger-item):hover > img.wcpif-hover {
		opacity: 1;
	}
	.wcpif-effect-zoom:not(.wcpif-trigger-item):hover > img.wcpif-hover {
		transform: scale(1);
	}

	/* Trigger: the whole loop item / product card. */
	.e-loop-item:hover .wcpif-trigger-item > img.wcpif-hover,
	li.product:hover .wcpif-trigger-item > img.wcpif-hover {
		opacity: 1;
	}
	.e-loop-item:hover .wcpif-effect-zoom.wcpif-trigger-item > img.wcpif-hover,
	li.product:hover .wcpif-effect-zoom.wcpif-trigger-item > img.wcpif-hover {
		transform: scale(1);
	}
}