/* Строка с горизонтальной прокруткой — общая оболочка для плиточных лент: подкатегории
   на странице категории, бренды на главной. Плитки внутри свои у каждого блока, здесь
   только полоса, прокрутка и стрелки.

   Ширину плитки задаёт блок через --sb-carousel-item. */

.sb-carousel {
	position: relative;
}

/* Плитки не переносятся и не растягиваются: ряд остаётся ровным при любом их числе. */
.sb-carousel__track {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 4px 0;
	overflow-x: auto;
	list-style: none;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.sb-carousel__track::-webkit-scrollbar {
	display: none;
}

.sb-carousel__track > li {
	display: flex;
	flex: 0 0 var(--sb-carousel-item, 150px);
	scroll-snap-align: start;
}

/* Стрелки: показывает их скрипт и только когда строка не помещается. */
.sb-carousel__nav {
	position: absolute;
	z-index: 2;
	top: 50%;
	width: 36px;
	height: 36px;
	padding: 0;
	transform: translateY(-50%);
	border: var(--sb-rule) solid var(--sb-line);
	background: var(--sb-card);
	color: var(--sb-ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.sb-carousel__nav:hover,
.sb-carousel__nav:focus-visible {
	border-color: var(--sb-ink);
	background: var(--sb-ink);
	color: var(--sb-paper);
}

.sb-carousel__nav--prev {
	left: -14px;
}

.sb-carousel__nav--next {
	right: -14px;
}

.sb-carousel__nav[hidden] {
	display: none;
}

/* На узком экране контейнер прижат к краю: стрелку наружу выносить некуда. */
@media (max-width: 575px) {
	.sb-carousel__nav--prev {
		left: 0;
	}

	.sb-carousel__nav--next {
		right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sb-carousel__track {
		scroll-behavior: auto;
	}
}