/* Hover image on product covers (doraan-hover-image).
   The second image lies exactly on top of the cover and fades in while the
   pointer is over the cover, or while the cover link has keyboard focus.
   Devices without hover never show it; display:none also keeps a lazy image
   from being downloaded there. */

.doraan-has-hover > a,
.doraan-has-hover {
	position: relative;
}

.doraan-has-hover .doraan-hover-img {
	display: none;
}

@media (hover: hover) {
	.doraan-has-hover .doraan-hover-img {
		display: block;
		position: absolute;
		top: 0;
		inset-inline-start: 0;
		max-width: 100%;
		opacity: 0;
		transition: opacity 0.25s ease;
		pointer-events: none;
	}

	.doraan-has-hover:hover .doraan-hover-img,
	.doraan-has-hover a:focus-visible .doraan-hover-img {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.doraan-has-hover .doraan-hover-img {
		transition: none;
	}
}