.product-image-switcher {
	position: relative;
	margin: 0 0 12px;
	--product-card-radius: 8px;
}

.product-image-switcher .products-list__img {
	margin-bottom: 0;
	overflow: hidden;
	border-radius: var(--product-card-radius);
}

.product-image-switcher__link {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--product-card-radius);
	isolation: isolate;
	transform: translateZ(0);
	/* вертикальный скролл страницы работает, горизонтальный свайп ловит JS (листание фото) */
	touch-action: pan-y;
}

.product-image-switcher__link:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: var(--product-card-radius);
	box-shadow: inset 0 0 0 1px rgba(52, 52, 52, .06);
	pointer-events: none;
}

.product-image-switcher__frame {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	overflow: hidden;
	border-radius: var(--product-card-radius);
	clip-path: inset(0 round var(--product-card-radius));
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 104% auto;
	transition: opacity .18s ease;
}

.product-image-switcher__frame.is-active {
	opacity: 1;
	z-index: 1;
}

.product-image-switcher__frame img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: auto;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	transform: scale(1.04);
	transform-origin: center center;
	border-radius: var(--product-card-radius);
	clip-path: inset(0 round var(--product-card-radius));
}

.catalogue .product-image-switcher .product-image-switcher__frame > img.js-img-hover {
	width: 100% !important;
	height: 100% !important;
	min-width: 100%;
	min-height: 100%;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: cover !important;
	object-position: center center !important;
}

.catalogue .product-image-switcher .product-image-switcher__frame.is-bg-loaded > img.js-img-hover {
	opacity: 0 !important;
	visibility: hidden;
}

.products-list__link:hover .product-image-switcher__frame img {
	opacity: 1 !important;
}

.product-image-switcher__footer {
	position: absolute;
	right: 0;
	bottom: 8px;
	left: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.product-image-switcher__nav {
	display: flex;
	justify-content: flex-start;
	gap: 4px;
	box-sizing: border-box;
	width: max-content;
	max-width: 72px;
	padding: 3px 6px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, .58);
	backdrop-filter: blur(2px);
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	clip-path: inset(0 round 999px);
}

.product-image-switcher__nav::-webkit-scrollbar {
	display: none;
}

.product-image-switcher__dot {
	display: block;
	flex: 0 0 auto;
	width: 4px;
	height: 4px;
	min-width: 4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(52, 52, 52, .16);
	cursor: default;
	transition: background-color .18s ease, transform .18s ease;
}

.product-image-switcher__dot.is-active {
	background: rgba(52, 52, 52, .46);
	transform: scale(1.1);
}

.product-image-switcher__hover-overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
}

.product-image-switcher__hover-area {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 767px) {
	.product-image-switcher__hover-overlay {
		display: none;
	}

	.product-image-switcher__footer {
		pointer-events: auto;
	}

	.product-image-switcher__nav {
		max-width: 96px;
		padding: 3px 5px;
	}

	.product-image-switcher__dot {
		position: relative;
		width: 16px;
		height: 16px;
		min-width: 16px;
		background: transparent;
		cursor: pointer;
	}

	.product-image-switcher__dot:before {
		content: "";
		position: absolute;
		top: 6px;
		left: 6px;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: rgba(52, 52, 52, .16);
	}

	.product-image-switcher__dot.is-active:before {
		background: rgba(52, 52, 52, .46);
	}
}

/* точки — гарантированно внизу по центру фотографии */
.product-image-switcher__footer { left: 0 !important; right: 0 !important; bottom: 8px !important; justify-content: center !important; }
.product-image-switcher__nav { margin: 0 auto !important; }

/* ── Точки листания как в карточке товара (ТЗ 2026-07-29) ─────────────────
   Было: 4px серые точки в белой полупрозрачной пилюле. Стало точь-в-точь как
   на странице товара (.tst-galdots): 7px, активная — синяя «пилюля» 18px,
   зазор 6px, без подложки. Разметку и логику переключения не трогаем. */
.product-image-switcher__nav{
	gap:6px !important;
	max-width:none !important;
	padding:0 !important;
	background:transparent !important;
	backdrop-filter:none !important;
	-webkit-backdrop-filter:none !important;
	clip-path:none !important;
	align-items:center;
	overflow:visible !important;
}
.product-image-switcher__dot{
	width:7px !important; height:7px !important; min-width:7px !important;
	border-radius:50% !important;
	background:#c9d0da !important;
	transform:none !important;
	transition:width .15s ease, background .15s ease !important;
}
.product-image-switcher__dot.is-active{
	width:18px !important; border-radius:4px !important;
	background:#376CAA !important;
}
.product-image-switcher__dot:before{ content:none !important; }

@media (max-width: 767px){
	/* на телефоне у точки была увеличенная зона нажатия (16×16) и картинка в
	   :before — теперь рисует сама точка, а палец попадает за счёт padding у
	   контейнера и зазора */
	.product-image-switcher__dot{ width:7px !important; height:7px !important; min-width:7px !important; }
	.product-image-switcher__dot.is-active{ width:18px !important; }
	.product-image-switcher__nav{ padding:6px 4px !important; }
}

/* Точки ниже — вплотную к нижнему краю фото, как в карточке товара:
   там расстояние от низа снимка до низа точек 6px, здесь было 16px. */
.product-image-switcher__footer{ bottom:0 !important; }
.product-image-switcher__nav{
	padding:4px 4px 0 !important;
	/* панель точек рисуется выше своей нулевой по высоте обёртки-footer,
	   поэтому просто сдвигаем её вниз — так точки садятся к самому краю фото */
	transform:translateY(8px);
}
.product-image-switcher__footer{ bottom:2px !important; }