/**
 * Блок товара «Дополнительная оснастка» — своя вёрстка вместо t396 (Tilda).
 * Подключается только на страницах товара (см. functions.php).
 *
 * Заголовок и под ним строка карточек: они не переносятся, а листаются вбок,
 * под строкой — номера страниц и стрелки.
 */

.wsn-eq {
	background: #fff;
	/* сверху было 120px от Tilda — это слишком много, оставили 56px */
	padding: 56px 0 44px;
	font-family: 'Montserrat', Arial, sans-serif;
	box-sizing: border-box;
}

.wsn-eq * { box-sizing: border-box; }

/* размеры шрифта ровно те, что были у витрины: 40 / 30 / 26 px */
.wsn-eq__title {
	max-width: 1200px;
	margin: 0 auto 34px;
	padding: 0 20px;
	color: var(--uc-color-color-fRWotIFb, #222937);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.5px;
	text-align: center;
}

/* ---------------------------------------------------------------- строка */

/* контейнер сетки приходит из общей функции каталога; ширину задаём сами,
   чтобы блок не зависел от .t-container со стороны Tilda */
.wsn-eqrow .t-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* сетка каталога здесь работает строкой: перенос запрещён, лишнее уезжает вбок */
.wsn-eqrow .block-product-card-grid {
	display: flex;
	flex-wrap: nowrap;
	column-gap: 40px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;          /* свою полосу прокрутки прячем */
	-ms-overflow-style: none;
}

.wsn-eqrow .block-product-card-grid::-webkit-scrollbar { height: 0; }

/* по 4 карточки в видимой части — как было в сетке до переделки */
.wsn-eqrow .block-product-card {
	flex: 0 0 calc((100% - 3 * 40px) / 4);
	scroll-snap-align: start;
}

/* ------------------------------------------------------------ пагинация */

.wsn-eqrow__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 1200px;
	margin: 30px auto 0;
	padding: 0 20px;
}

.wsn-eqrow__nav[hidden] { display: none; }

.wsn-eqrow__pages { display: flex; align-items: center; gap: 10px; }

.wsn-eqrow__page {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: none;
	color: #8b8f96;
	font-family: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.wsn-eqrow__page:hover { color: #222937; }

/* текущая страница — в синем кружке, как было у витрины */
.wsn-eqrow__page.is-active {
	border-color: #3d93ff;
	color: #222937;
	cursor: default;
}

.wsn-eqrow__arrow {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: none;
	color: #3d93ff;
	cursor: pointer;
	line-height: 0;
}

.wsn-eqrow__arrow:hover { color: #1084d1; }

/* Скрытая стрелка занимает своё место: убери её из потока — и на первой и
   последней странице весь ряд номеров прыгал бы вбок. */
.wsn-eqrow__arrow[hidden] {
	display: flex;
	visibility: hidden;
	pointer-events: none;
}
.wsn-eqrow__arrow svg { width: 22px; height: 12px; display: block; }

/* -------------------------------------------------------------- адаптив */

@media (max-width: 1279px) {
	.wsn-eq__title { font-size: 30px; }
	.wsn-eqrow .block-product-card { flex-basis: calc((100% - 2 * 40px) / 3); }
}

@media (max-width: 959px) {
	.wsn-eqrow .block-product-card-grid { column-gap: 20px; }
	.wsn-eqrow .block-product-card { flex-basis: calc((100% - 20px) / 2); }
}

@media (max-width: 639px) {
	.wsn-eq { padding: 40px 0 32px; }
	.wsn-eq__title { font-size: 26px; margin-bottom: 24px; }
	.wsn-eqrow .block-product-card { flex-basis: 78%; }
}