/* Слайдер главного баннера (.tp-main-head-img). Подключается только на главной. */
/* Соц-блок и значок доставки должны оставаться поверх слайдера */
.tp-header_soc_block,
.tp-header-ship1 {
	z-index: 5;
}

.tp-hero-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* металлический фон — просвечивает по бокам в момент сдвига вместо белого */
	background: linear-gradient(135deg, #c7cbd1 0%, #b3b9c1 45%, #a7adb6 100%);
}

/* Лента: слайды встык, плавно едет влево */
.tp-hero-track {
	display: flex;
	transition: transform 1.2s ease-in-out;
	will-change: transform;
}

/* мгновенный сброс позиции без анимации (для бесшовного цикла) */
.tp-hero-track.no-anim {
	transition: none;
}

.tp-hero-slide {
	flex: 0 0 100%;
	max-width: 100%;
}

.tp-hero-slide picture,
.tp-hero-slide img {
	display: block;
	width: 100%;
	vertical-align: bottom;
}

/* точки-индикаторы поверх баннера, снизу по центру */
.tp-hero-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.75rem;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.tp-hero-dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	cursor: pointer;
	transition: background .25s, transform .25s;
}

.tp-hero-dot:hover {
	background: rgba(255, 255, 255, .85);
}

.tp-hero-dot.is-active {
	background: #fff;
	transform: scale(1.25);
}

@media (max-width: 767px) {
	.tp-hero-dots {
		bottom: 10px;
		gap: 8px;
	}

	.tp-hero-dot {
		width: 9px;
		height: 9px;
	}
}