.bazar-carousels {
	clear: both;
	margin: 0;
}

.bazar-carousels .bazar-carousel {
	--bc-per: 4;
	--bc-gap: 30px;
	--bc-peek: 0px;
	/* --bc-edge / --bc-lift — запас по бокам и снизу под карточку,
	   которая увеличивается при наведении */
	--bc-edge: 15px;
	--bc-lift: 92px;

	position: relative;
	clear: both;
	margin: 0 0 38px;
}

.bazar-carousels .bazar-carousel:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------- Шапка */

.bazar-carousels .bazar-carousel__head {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	margin: 0 0 18px;
}

.bazar-carousels .bazar-carousel__title {
	margin: 0 14px 0 0;
	padding: 9px 26px;
	background: #e5e5e5;
	border: 0;
	border-radius: 3px;
	color: #3e3d3d;
	font-family: 'cuprum', 'Cuprum', sans-serif;
	font-size: 19px;
	font-weight: normal;
	line-height: 1.2;
	letter-spacing: 0.5px;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.bazar-carousels .bazar-carousel__all,
.bazar-carousels .bazar-carousel__all:visited {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	background: #f4f4f4;
	border-radius: 30px;
	color: #3e3d3d;
	font-family: 'cuprum', 'Cuprum', sans-serif;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.bazar-carousels .bazar-carousel__all:hover,
.bazar-carousels .bazar-carousel__all:focus {
	background: #e9e9e9;
	color: #3e3d3d;
	text-decoration: none;
}

.bazar-carousels .bazar-carousel__all .bazar-carousel__chevron {
	margin-left: 10px;
	color: #8b8b8b;
}

/* -------------------------------------------------------- Стрелки, счётчик */

.bazar-carousels .bazar-carousel__nav--head {
	display: flex;
	align-items: center;
	margin-left: auto;
	padding-left: 15px;
}

.bazar-carousels .bazar-carousel__counter {
	margin: 0 12px;
	color: #8b8b8b;
	font-family: 'cuprum', 'Cuprum', sans-serif;
	font-size: 16px;
	line-height: 1;
	white-space: nowrap;
}

.bazar-carousels .bazar-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1px solid #dcdcdc;
	border-radius: 50%;
	box-shadow: none;
	color: #3e3d3d;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.bazar-carousels .bazar-carousel__arrow:hover,
.bazar-carousels .bazar-carousel__arrow:focus {
	background: #fff;
	border-color: #b5b5b5;
	color: #000;
}

/* Скрытая, но занимающая место стрелка — счётчик не «скачет». */
.bazar-carousels .bazar-carousel__arrow[disabled] {
	visibility: hidden;
	pointer-events: none;
}

.bazar-carousels .bazar-carousel__arrow--prev .bazar-carousel__chevron {
	transform: scaleX(-1);
}

/* ----------------------------------------------------- Лента и карточки */

.bazar-carousels .bazar-carousel__body {
	position: relative;
}

.bazar-carousels .bazar-carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Свайп вбок не должен вызывать «шаг назад» в Safari на macOS и iOS. */
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* По наведению карточка «приподнимается»: увеличивается фото и появляется
	   кнопка «Купить в 1 клик». Запас снизу не даёт overflow-y обрезать их,
	   а отрицательный отступ возвращает соседние блоки на прежние места. */
	padding-right: var(--bc-edge);
	padding-bottom: var(--bc-lift);
	padding-left: var(--bc-edge);
	margin-right: calc(-1 * var(--bc-edge));
	margin-bottom: calc(-1 * var(--bc-lift));
	margin-left: calc(-1 * var(--bc-edge));
	/* Привязка при свайпе должна учитывать боковой запас. */
	scroll-padding-left: var(--bc-edge);
}

/* У последней карусели запас не «съедаем»: иначе невидимый нижний край
   вьюпорта ложится на текст под витриной и мешает его выделять. */
.bazar-carousels .bazar-carousel:last-child .bazar-carousel__viewport {
	margin-bottom: 0;
}

/* На трекпаде mac «обязательная» привязка спорит с инерцией прокрутки
   и лента подрагивает. Для мыши/трекпада берём мягкую привязку,
   для пальца оставляем жёсткую — там нужен чёткий постраничный шаг. */
@media (hover: hover) and (pointer: fine) {
	.bazar-carousels .bazar-carousel__viewport {
		scroll-snap-type: x proximity;
	}
}

/* Пользователь просил систему не анимировать — уважаем настройку. */
@media (prefers-reduced-motion: reduce) {
	.bazar-carousels .bazar-carousel__viewport {
		scroll-behavior: auto;
	}
}

.bazar-carousels .bazar-carousel__viewport::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.bazar-carousels ul.products.bazar-carousel__track {
	display: flex;
	flex-wrap: nowrap;
	width: auto;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

/* Клирфикс темы превратился бы во флекс-элементы. */
.bazar-carousels ul.products.bazar-carousel__track::before,
.bazar-carousels ul.products.bazar-carousel__track::after {
	content: none !important;
	display: none !important;
}

.bazar-carousels .bazar-carousel__track > li.product {
	flex: 0 0 calc((100% - var(--bc-peek) - (var(--bc-per) - 1) * var(--bc-gap)) / var(--bc-per));
	width: auto !important;
	max-width: none;
	min-height: 0;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	scroll-snap-align: start;
}

.bazar-carousels .bazar-carousel__track > li.product + li.product {
	margin-left: var(--bc-gap) !important;
}

/* Хвостовой распорка ровно на ширину «подглядывающей» карточки: благодаря ей
   последняя страница доезжает до конца и встаёт по scroll-snap.
   Именно элемент, а не padding/margin, — их браузер не учитывает
   в scrollWidth флекс-ленты. */
.bazar-carousels .bazar-carousel__track > li.bazar-carousel__spacer {
	flex: 0 0 calc(var(--bc-peek) + var(--bc-edge));
	min-height: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	list-style: none;
}

/* Место под миниатюру резервируется заранее: ленивые картинки
   не сдвигают вёрстку, когда подгружаются, и лента не «прыгает»
   при боковой прокрутке. Правило намеренно бьёт только по самому фото
   товара: уголки «new» / «sale» / «нет в наличии» — тоже <img> внутри
   .thumbnail-wrapper, и от width: 100% они растягивались во всю карточку. */
.bazar-carousels .bazar-carousel__track > li.product img.attachment-shop_catalog {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* Кнопка «Купить в 1 клик» ведёт себя ровно как в каталоге: остаётся
   в потоке и появляется по наведению внутри рамки карточки. Раньше она
   была вынесена из потока и вылезала под нижнюю рамку.
   Запас снизу у вьюпорта (padding-bottom) не даёт обрезать «подросшую»
   карточку. */
.bazar-carousels .bazar-carousel__track > li.product .oneclickby {
	margin-top: 11px;
}

/* Все карточки одной высоты.

   Видимая рамка карточки нарисована не на <li>, а на .product-thumbnail.
   Сами <li> флексом и так растянуты до одинаковой высоты, а вот рамка
   тянулась только под содержимое — из-за разной длины названий карточки
   выглядели разными по высоте. Растягиваем рамку на всю высоту <li>. */
.bazar-carousels .bazar-carousel__track > li.product {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* При наведении тема увеличивает карточку (width: 112%). Пока карточка
   оставалась в потоке, лента становилась выше и весь блок ниже —
   следующая карусель, текст — прыгал вниз почти на 80px.
   Выводим увеличенную карточку из потока: высота ленты не меняется,
   карточка просто рисуется поверх соседних. */
.bazar-carousels .bazar-carousel__track > li.product:hover > .product-thumbnail {
	position: absolute;
	top: 0;
	z-index: 3;
	/* Увеличение ограничиваем боковым запасом: карточка вырастает ровно
	   настолько, насколько её видно целиком, и ни пикселем больше.
	   border-box обязателен — иначе в ограничение не попадут
	   внутренние отступы и рамка карточки (ещё 16px). */
	box-sizing: border-box;
	max-width: calc(100% + 2 * var(--bc-edge));
	left: calc(-1 * var(--bc-edge)) !important;
}

/* На широких экранах по бокам страницы места много — увеличение
   можно оставить таким же крупным, как в каталоге. */
@media only screen and (min-width: 1400px) {
	.bazar-carousels .bazar-carousel {
		--bc-edge: 30px;
	}
}

.bazar-carousels .bazar-carousel__track > li.product > .product-thumbnail {
	flex: 1 1 auto;
}

/* У товаров с галереей под фото есть блок-превью с отступом сверху 10px,
   у товаров без галереи его нет — из-за этого содержимое таких карточек
   было на 10px выше соседних. Отступ переносим на сам блок с фото,
   чтобы он был у всех одинаковый. */
.bazar-carousels .bazar-carousel__track > li.product .thumbnail-wrapper {
	padding-bottom: 10px;
}

.bazar-carousels .bazar-carousel__track > li.product .thumbnail-wrapper > a > div {
	padding-top: 0 !important;
}

/* Название занимает ровно две строки — тогда цена, размеры и кнопки
   в соседних карточках стоят на одной линии. Более длинные названия
   не обрезаются, карточка от этого не «поедет»: рамка всё равно
   растянута на всю высоту. */
.bazar-carousels .bazar-carousel__track > li.product .product-meta h3 {
	display: block;
	line-height: 20px;
	min-height: 40px;
}

/* Страховка: уголки-бейджи всегда своего натурального размера. */
.bazar-carousels .bazar-carousel__track > li.product img.onsale {
	width: auto;
	height: auto;
	max-width: 72px;
	aspect-ratio: auto;
}

/* --------------------------------------------- Плавающие стрелки (мобильные) */

.bazar-carousels .bazar-carousel__nav--float {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	pointer-events: none;
}

.bazar-carousels .bazar-carousel__nav--float .bazar-carousel__arrow {
	position: absolute;
	top: calc(var(--bc-slide-w, 150px) / 2 + 14px);
	width: 38px;
	height: 38px;
	border-color: transparent;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	pointer-events: auto;
	transform: translateY(-50%);
}

.bazar-carousels .bazar-carousel__nav--float .bazar-carousel__arrow--prev {
	left: 2px;
}

/* Стрелка «вперёд» сдвинута правее — ближе к краю экрана,
   поверх выглядывающей карточки, как на макете. */
.bazar-carousels .bazar-carousel__nav--float .bazar-carousel__arrow--next {
	right: 2px;
}

/* ------------------------------------------------------------ Планшеты */

@media only screen and (max-width: 1023px) and (min-width: 768px) {
	.bazar-carousels .bazar-carousel {
		--bc-per: 3;
		--bc-gap: 20px;
	}
}

/* ----------------------------------------------------------- Мобильные */

@media only screen and (max-width: 767px) {
	.bazar-carousels .bazar-carousel {
		--bc-per: 2;
		--bc-gap: 10px;
		--bc-peek: 42px;

		margin-bottom: 26px;
	}

	.bazar-carousels .bazar-carousel__head {
		margin-bottom: 12px;
	}

	.bazar-carousels .bazar-carousel__title {
		margin-right: 10px;
		padding: 7px 16px;
		font-size: 15px;
	}

	.bazar-carousels .bazar-carousel__all,
	.bazar-carousels .bazar-carousel__all:visited {
		padding: 7px 14px;
		font-size: 14px;
	}

	.bazar-carousels .bazar-carousel__all .bazar-carousel__chevron {
		margin-left: 7px;
	}

	.bazar-carousels .bazar-carousel__nav--head {
		padding-left: 8px;
	}

	.bazar-carousels .bazar-carousel__nav--head .bazar-carousel__arrow {
		display: none;
	}

	.bazar-carousels .bazar-carousel__counter {
		margin: 0;
		font-size: 15px;
	}

	.bazar-carousels .bazar-carousel__nav--float {
		display: block;
	}

	/* Карточка узкая — названия занимают 2–3 строки. Резервируем три,
	   чтобы цена, размеры и кнопки стояли на одной линии.
	   Названия не обрезаем: длинное просто займёт всё место. */
	/* Карточка узкая, и названия занимают от двух до четырёх строк.
	   Фиксируем ровно три: цена, размеры и кнопки во всех карточках
	   встают на одну линию при любой ширине экрана. Совсем длинное
	   название обрезается многоточием — полностью оно видно
	   на странице товара. */
	.bazar-carousels .bazar-carousel__track > li.product .product-meta h3 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		min-height: 60px;
	}

	/* На узкой карточке длинный ряд размеров (36–43) переносится
	   на вторую строку. Резервируем две — иначе кнопка «В корзину»
	   у таких товаров опускается ниже, чем у соседей. */
	.bazar-carousels .bazar-carousel__track > li.product .razm-wrp {
		min-height: 60px;
	}

	/* На телефоне наведения нет, запас под него не нужен —
	   оставляем пару пикселей, чтобы не срезалась нижняя рамка карточки. */
	.bazar-carousels .bazar-carousel {
		--bc-edge: 0px;
		--bc-lift: 2px;
	}

	.bazar-carousels .bazar-carousel__viewport,
	.bazar-carousels .bazar-carousel:last-child .bazar-carousel__viewport {
		margin-bottom: 0;
	}

	/* Тач-устройства умеют «залипать» на :hover — на всякий случай
	   оставляем карточку в потоке. */
	.bazar-carousels .bazar-carousel__track > li.product:hover > .product-thumbnail {
		position: static;
		max-width: none;
		left: auto !important;
	}

	/* Тема убирает нижнюю рамку карточки на мобильных
	   (responsive.css: .product-thumbnail у .open-on-mobile).
	   В каталоге это незаметно, а в карусели карточки стоят вплотную
	   и «открытый» низ выглядит как ошибка вёрстки. Возвращаем рамку
	   только внутри витрины — каталог остаётся как был.
	   !important — иначе не перебить правило темы. */
	.bazar-carousels .bazar-carousel__track > li.product .product-thumbnail {
		padding-bottom: 7px !important;
		border-bottom: 1px solid #e0dfdf !important;
	}

	.bazar-carousels {
		margin-bottom: 20px;
	}
}

/* ------------------------------------------------ Очень узкие экраны (iPhone SE) */

@media only screen and (max-width: 374px) {

	.bazar-carousels .bazar-carousel__track > li.product .price {
		display: block;
		min-height: 60px;
	}
}