/* Basel home product modules: MP4 instead of thumb (product_listing_video_basel) */

.single-product .image {
	overflow: hidden;
}

.single-product .image > a {
	display: block;
	width: 100%;
	position: relative;
	line-height: 0;
	isolation: isolate;
	z-index: 0;
}

.basel-lv-wrap {
	max-width: 100%;
	position: relative;
	z-index: 1;
	background: #fff;
}

.basel-lv-wrap[data-video-state="playing"],
.basel-lv-wrap[data-video-state="loading"] {
	z-index: 5;
}

.basel-lv-wrap .basel-lv-fallback {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.25s ease;
}

.basel-lv-wrap .basel-lv-video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	background: #fff;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 2;
}

.basel-lv-wrap[data-video-state="playing"] .basel-lv-video,
.basel-lv-wrap[data-video-state="loading"] .basel-lv-video {
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 4 !important;
}

.basel-lv-wrap[data-hide-fallback="1"] .basel-lv-fallback {
	opacity: 0;
}

/* Скрываем thumb2 при активном видео */
.single-product .image a .basel-lv-wrap + .thumb2 {
	position: absolute;
	left: -1px;
	top: 0;
	width: calc(100% + 2px);
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	z-index: 3;
	box-sizing: border-box;
}

.single-product .image:hover a .basel-lv-wrap[data-video-state="playing"] + .thumb2,
.single-product .image:hover a .basel-lv-wrap[data-video-state="loading"] + .thumb2,
.single-product .image a .basel-lv-wrap[data-video-state="playing"] + .thumb2,
.single-product .image a .basel-lv-wrap[data-video-state="loading"] + .thumb2,
.product-style4 .single-product:hover a .basel-lv-wrap[data-video-state="playing"] + .thumb2 {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	z-index: 0 !important;
	transform: scale(0.001);
}

@media (hover: none) {
	.single-product .image a .basel-lv-wrap[data-video-state="playing"] + .thumb2,
	.single-product .image a .basel-lv-wrap[data-video-state="loading"] + .thumb2 {
		opacity: 0 !important;
		visibility: hidden !important;
	}
}

.single-product .image:has(.basel-lv-wrap[data-video-state="playing"]) .img-overlay,
.single-product .image:has(.basel-lv-wrap[data-video-state="loading"]) .img-overlay {
	pointer-events: none;
	opacity: 0;
}