.tooto-product-hover-image {
	--tooto-product-hover-duration: 280ms;
	position: relative;
	display: block;
	width: 100%;
	min-height: 260px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	text-decoration: none;
	background: #f5f5f5;
	isolation: isolate;
}

.tooto-product-hover-image__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: opacity var(--tooto-product-hover-duration) ease;
	backface-visibility: hidden;
}

.tooto-product-hover-image__image--primary {
	z-index: 1;
	opacity: 1;
}

.tooto-product-hover-image__image--hover {
	z-index: 2;
	opacity: 0;
}

.tooto-product-hover-image--has-hover:hover .tooto-product-hover-image__image--primary,
.tooto-product-hover-image--has-hover:focus-visible .tooto-product-hover-image__image--primary,
.tooto-product-hover-image--has-hover:focus-within .tooto-product-hover-image__image--primary {
	opacity: 0;
}

.tooto-product-hover-image--has-hover:hover .tooto-product-hover-image__image--hover,
.tooto-product-hover-image--has-hover:focus-visible .tooto-product-hover-image__image--hover,
.tooto-product-hover-image--has-hover:focus-within .tooto-product-hover-image__image--hover {
	opacity: 1;
}

a.tooto-product-hover-image:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.tooto-product-hover-image__image {
		transition: none;
	}
}