.wd-product-card-bg {
	position: absolute;
	visibility: hidden;
	box-shadow: 0 0 10px rgba(0, 0, 0, .15);
	opacity: 0;
	transform: scale(.98);
}

.wd-product-card-hover {
	position: absolute;
	top: 100%;
	inset-inline: 0;
	visibility: hidden;
	opacity: 0;
}

.wd-hover-with-fade.hover-ready.state-hover .wd-product-wrapper {
	z-index: 20;
	transform: translateY(-5px) translateZ(0);
}

.wd-hover-with-fade.hover-ready.state-hover .wd-product-card-bg {
	visibility: visible;
	opacity: 1;
	transition: opacity .3s ease, visibility 0s ease, transform .3s ease;
	transform: scale(1);
}

.wd-hover-with-fade.hover-ready.state-hover .wd-product-card-hover {
	visibility: visible;
	opacity: 1;
	transition: opacity .3s ease, visibility 0s ease;
}

@media (hover: hover) {
	.wd-hover-with-fade.hover-ready:hover .wd-product-wrapper {
		z-index: 20;
		transform: translateY(-5px) translateZ(0);
	}
	
	.wd-hover-with-fade.hover-ready:hover .wd-product-card-bg {
		visibility: visible;
		opacity: 1;
		transition: opacity .3s ease, visibility 0s ease, transform .3s ease;
		transform: scale(1);
	}
	
	.wd-hover-with-fade.hover-ready:hover .wd-product-card-hover {
		visibility: visible;
		opacity: 1;
		transition: opacity .3s ease, visibility 0s ease;
	}
}

@media (max-width: 1024px) {
	.wd-hover-with-fade.hover-ready:not(.state-hover) .wd-product-wrapper {
		transform: none;
	}
	
	.wd-hover-with-fade.hover-ready:not(.state-hover) .wd-product-card-bg, .wd-hover-with-fade.hover-ready:not(.state-hover) .wd-product-card-hover {
		visibility: hidden;
		opacity: 0;
	}
}