/* ============================================================
   pro-gib.ru — редизайн каталога, 2026 (макет A «Станция»).
   Подключается после style.css и ничего в нём не переопределяет
   глобально: все правила ограничены разделом каталога (.cat2)
   и блоком подбора на главной (.pick).
   Палитра взята из существующего шаблона: #406ae2 — акцент,
   #282828 — текст, #929292 — вторичный, #e7e7e7 — линии.
   ============================================================ */

.cat2 {
	--c-accent: #406ae2;
	--c-accent-dark: #284fb9;
	--c-ink: #282828;
	--c-muted: #929292;
	--c-line: #e7e7e7;
	--c-soft: #f1f2f6;
}

/* ---------- шапка раздела ---------- */

.cat2__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 16px;
	padding: 6px 0 22px;
	border-bottom: 1px solid var(--c-line);
	margin-bottom: 24px;
}

.cat2__title {
	margin: 0;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--c-ink);
}

.cat2__count {
	font-size: 14px;
	color: var(--c-muted);
	white-space: nowrap;
}

/* ---------- две колонки: рельс + сетка ---------- */

.cat2__body {
	display: grid;
	grid-template-columns: 244px minmax(0, 1fr);
	gap: 30px;
	align-items: start;
}

.cat2__main {
	min-width: 0;
}

/* ---------- рельс ---------- */

.cat2__rail {
	position: sticky;
	top: 20px;
}

.rail__group {
	padding: 15px 16px 16px;
	border: 1px solid var(--c-line);
	border-radius: 8px;
	background: #fff;
}

.rail__group + .rail__group {
	margin-top: 12px;
}

.rail__group-title {
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-muted);
}

/* дерево разделов */

.rail__node {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 0;
	font-size: 14px;
	line-height: 1.3;
	color: var(--c-ink);
	text-decoration: none;
}

.rail__node:hover {
	color: var(--c-accent);
}

.rail__node-name {
	flex: 1 1 auto;
}

.rail__node-count {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--c-muted);
	font-variant-numeric: tabular-nums;
}

.rail__node--l2 {
	padding-left: 12px;
	font-size: 13.5px;
}

.rail__node--l3 {
	padding-left: 24px;
	font-size: 13px;
}

.rail__node--open > .rail__node-name {
	font-weight: 500;
}

.rail__node--active {
	color: var(--c-accent);
	font-weight: 500;
}

.rail__node--active .rail__node-count {
	color: var(--c-accent);
}

.rail__branch + .rail__branch {
	border-top: 1px solid #f4f4f4;
}

.rail__branch .rail__branch {
	border-top: none;
}

/* чипы: станция, тип инструмента */

.rail__group-body {
	display: block;
}

.rail__group--chips .rail__group-body {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.rail__chip {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 5px 10px;
	border: 1px solid var(--c-line);
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.2;
	color: var(--c-ink);
	text-decoration: none;
	transition: border-color .15s, color .15s;
}

.rail__chip:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

.rail__chip-count {
	font-size: 11px;
	font-style: normal;
	color: var(--c-muted);
	font-variant-numeric: tabular-nums;
}

.rail__chip--active {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: #fff;
}

.rail__chip--active:hover {
	background: var(--c-accent-dark);
	border-color: var(--c-accent-dark);
	color: #fff;
}

.rail__chip--active .rail__chip-count {
	color: rgba(255, 255, 255, .75);
}

.rail__group--types .rail__chip {
	font-size: 12.5px;
}

.rail__reset {
	display: inline-block;
	margin-top: 12px;
	font-size: 13px;
	color: var(--c-muted);
	text-decoration: none;
	border-bottom: 1px dashed currentColor;
}

.rail__reset:hover {
	color: var(--c-accent);
}

/* ---------- плотная сетка карточек ---------- */

.cat2__main .production-list--t3 {
	padding-top: 0;
}

.cat2__main .production-list-content {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
	gap: 14px;
}

.cat2__main .production-item {
	width: auto;
	display: flex;
	flex-direction: column;
	padding: 12px 12px 14px;
	border: 1px solid var(--c-line);
	border-radius: 6px;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}

.cat2__main .production-item:hover {
	border-color: #cdd8f5;
	box-shadow: 0 6px 18px rgba(40, 79, 185, .08);
}

.cat2__main .production-item-parentname {
	order: 1;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: left;
	color: var(--c-accent);
}

.cat2__main .production-item__data {
	order: 2;
	height: 118px;
	padding-top: 10px;
}

.cat2__main .production-item__title {
	order: 3;
	padding-top: 10px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
	color: var(--c-ink);
}

.cat2__main .production-item__line--order {
	order: 5;
	margin-top: auto;
	padding-top: 12px;
	text-align: left;
}

.cat2__main .production-item__order {
	width: 100%;
	padding: 8px 0;
	font-size: 12.5px;
	background: #fff;
	border: 1px solid var(--c-accent);
	color: var(--c-accent);
}

.cat2__main .production-item__order:hover {
	background: var(--c-accent);
	color: #fff;
}

/* плитки подразделов внутри раздела */

.cat2__main .catalog-list {
	margin-bottom: 22px;
}

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

@media (max-width: 1000px) {
	.cat2__body {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.cat2__rail {
		position: static;
	}

	/* Ограничение по высоте с прокруткой срезало последнюю строку
	   на полуслове, а дерево короткое — показываем целиком. */
}

@media (max-width: 600px) {
	.cat2__title {
		font-size: 22px;
	}

	.cat2__main .production-list-content {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 10px;
	}

	.cat2__main .production-item__data {
		height: 96px;
	}
}

/* ============================================================
   Блок подбора по станку на главной (взят из макета B).
   ============================================================ */

.pick {
	--c-accent: #406ae2;
	--c-accent-dark: #284fb9;
	--c-ink: #282828;
	--c-muted: #929292;
	--c-line: #e7e7e7;
	padding: 30px 0 10px;
}

.pick__box {
	padding: 24px 26px 26px;
	border: 1px solid var(--c-line);
	border-radius: 10px;
	background: #f7f9fc;
}

.pick__title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 500;
	color: var(--c-ink);
}

.pick__sub {
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--c-muted);
	max-width: 62ch;
}

.pick__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: 12px;
	align-items: end;
}

.pick__field label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.pick__field select {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #cfd7e6;
	border-radius: 5px;
	background: #fff;
	font-size: 14px;
	color: var(--c-ink);
	font-family: inherit;
}

.pick__field select:disabled {
	background: #f1f2f6;
	color: var(--c-muted);
}

.pick__go {
	height: 42px;
	padding: 0 26px;
	border: none;
	border-radius: 5px;
	background: var(--c-accent);
	color: #fff;
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
}

.pick__go:hover {
	background: var(--c-accent-dark);
}

.pick__go[disabled] {
	background: #dedede;
	cursor: default;
}

.pick__hint {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--c-muted);
}

.pick__hint a {
	color: var(--c-accent);
}

@media (max-width: 800px) {
	.pick__row {
		grid-template-columns: 1fr;
	}

	.pick__go {
		width: 100%;
	}
}

/* ---------- характеристики в карточке ---------- */

.specs {
	display: block;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #f0f0f0;
	text-align: left;
}

.spec {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 11.5px;
	line-height: 1.45;
}

.spec__name {
	flex: 0 0 auto;
	color: #929292;
}

.spec__value {
	flex: 1 1 auto;
	color: #282828;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* в плотной сетке показываем только первые три строки,
   полный список открывается в карточке-модалке */
.cat2__main .specs .spec:nth-child(n+4) {
	display: none;
}

.cat2__main .production-item__line--order {
	padding-top: 10px;
}

/* в модалке — весь список и без обрезки значений */
.dialog__content--pro .specs {
	margin-top: 14px;
	padding-top: 12px;
}

.dialog__content--pro .spec {
	font-size: 13px;
	padding: 3px 0;
}

.dialog__content--pro .spec + .spec {
	border-top: 1px solid #f6f6f6;
}

.dialog__content--pro .spec__value {
	white-space: normal;
}

/* характеристики идут после названия и перед кнопкой: без order блок
   получал бы порядок 0 и уезжал выше картинки */
.cat2__main .specs {
	order: 4;
}

/* ============================================================
   ШАПКА: один flex-ряд, 72px.

   Тёмная полоса .top__wrap — на всю ширину, ряд .hdr ограничен
   1440px. Внимание: контент страницы идёт в .base-block шириной
   1241px, поэтому на экранах шире 1490px логотип встаёт левее
   хлебных крошек. Так решено сознательно.

   Шкала отступов кратна 8: 32px между смысловыми группами,
   24px внутри меню и в кнопке, 8px между иконкой и её текстом.
   ============================================================ */

.top__push,
.top__wrap,
.is-sticky .top__wrap {
	height: auto;
}

.top {
	padding: 0;
}

.main__wrap,
.is-sticky .main__wrap {
	padding: 0;
	position: relative;
}

.hdr {
	max-width: 1440px;
	height: 72px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 32px;
	border-top: none;
}

/* ---------- логотип ---------- */

.hdr__logo {
	flex: 0 0 auto;
	width: auto;
	padding: 0;
}

.hdr__logo .logo {
	display: flex;
	align-items: center;
}

.hdr__logo img {
	width: 210px;
	height: auto;
	display: block;
}

/* ---------- меню ---------- */

.hdr__nav {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.hdr__nav > .main {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hdr__nav > .main > .main__item {
	padding: 0;
	display: flex;
	align-items: center;
	position: relative;
}

/* убираем вертикальные padding и line-height, из-за которых текст
   не вставал по центру строки */
.hdr__nav .main__link {
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
	white-space: nowrap;
}

/* стрелка теперь внутри ссылки: не absolute, а обычный элемент потока */
.hdr__nav .main__link .ico_mmenu {
	position: static;
	top: auto;
	width: 10px;
	height: 6px;
	margin: 0;
	flex: 0 0 auto;
}

.hdr__nav .main__link .ico_mmenu:before {
	position: static;
	width: 10px;
	height: 6px;
	margin: 0;
}

/* выпадающий список отсчитывается от пункта */
.hdr__nav > .main > .main__item > .main {
	top: 100%;
	left: 0;
	padding-top: 12px;
}

.hdr .main__info {
	display: none;
}

/* ---------- контакты ---------- */

.hdr__contacts {
	margin-left: auto;
	/* не сжимаем: при flex-shrink текст с nowrap вылезал за границы блока
	   и поиск наезжал на телефон */
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 32px;
}

.hdr__addr,
.hdr__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	font-size: 15px;
	font-weight: 300;
	line-height: 1;
	color: #fff;
	text-decoration: none;
}

.hdr__phone:hover {
	color: #406ae2;
}

/* В теме у иконок нулевая ширина: сама картинка рисуется в :before,
   который позиционирован absolute, а место под неё резервировал
   margin-right. Раз отступ теперь задаёт gap, размер надо проставить
   явно, иначе иконка вылезает на соседний текст. */
.hdr__contacts .ico_adress,
.hdr__contacts .ico_phone {
	margin: 0;
	flex: 0 0 auto;
	display: block;
	position: relative;
}

.hdr__contacts .ico_adress {
	width: 14px;
	height: 18px;
}

.hdr__contacts .ico_phone {
	width: 16px;
	height: 16px;
}

/* ---------- поиск, кнопка, корзина: все по 40px ---------- */

.hdr__search {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin: 0;
}

.hdr__cta {
	flex: 0 0 auto;
	height: 40px;
	width: auto;
	min-width: 0;
	padding: 0 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	white-space: nowrap;
}

.hdr__cta-short {
	display: none;
}

.hdr__cart {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.hdr__cart .cart__ico {
	width: 22px;
	height: 20px;
	padding: 0;
	margin: 0;
	display: block;
}

/* счётчик привязан к иконке, а не стоит в потоке */
.hdr__cart .cart__count {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 16px;
	height: 16px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	line-height: 1;
	border-radius: 50%;
	background: #fff;
	color: #282828;
}

/* ---------- бургер ---------- */

.menu__btn,
.is-sticky .menu__btn {
	top: 16px;
	right: 24px;
}

/* ============================================================
   Поведение при нехватке ширины. Порядок жёсткий, переносов нет
   ни на одном шаге.
   ============================================================ */

/* Пороги выставлены по замеру, а не на глаз: ряд со всем содержимым
   требует 1537px, а контейнер ограничен 1440px, поэтому адрес при этой
   ширине контейнера не помещается никогда. Порог оставлен на 1560px —
   если поднять max-width ряда, адрес вернётся сам. */
.hdr__addr {
	display: none;
}

/* без адреса ряду нужно 1295px — прячем текст телефона чуть раньше,
   чем в задании (1300 вместо 1200), иначе на 1280 поиск наезжал на номер */
@media (max-width: 1300px) {
	.hdr__phone-text {
		display: none;
	}
}

/* тема сворачивала меню в бургер уже на 1250px — возвращаем строку
   обратно на промежутке 993..1250 и оставляем бургер только ниже 992 */
@media (min-width: 993px) and (max-width: 1250px) {
	.menu__btn {
		display: none;
	}

	.main__wrap .hdr__nav {
		width: auto;
		margin: 0;
		padding: 0;
		display: block;
		position: static;
		top: auto;
		right: auto;
		z-index: auto;
		overflow: visible;
		visibility: visible;
		border-radius: 0;
		background: none;
	}

	.main__wrap .hdr__nav > .main {
		padding-left: 0;
		display: flex;
	}

	.main__wrap .hdr__nav > .main > .main__item > .main {
		position: absolute;
		display: none;
	}

	.main__wrap .hdr__nav > .main > .main__item:hover > .main {
		display: block;
	}
}

/* до 992px — меню в бургер, в строке логотип, поиск, кнопка, корзина */
@media (max-width: 992px) {
	.hdr {
		gap: 16px;
	}

	/* бургер в тему был вписан как absolute и ложился поверх корзины;
	   ставим его в поток последним элементом ряда */
	.menu__btn {
		position: static;
		order: 9;
		flex: 0 0 auto;
		margin: 0;
		top: auto;
		right: auto;
	}

	.hdr__contacts {
		gap: 16px;
	}
}

@media (max-width: 768px) {
	.hdr__logo img {
		width: 160px;
	}
}

@media (max-width: 600px) {
	.hdr__logo img {
		width: 130px;
	}

	.hdr__cta {
		padding: 0 16px;
	}

	.hdr__cta-full {
		display: none;
	}

	.hdr__cta-short {
		display: inline;
	}
}

/* с учётом ширины иконки телефона ряду на 460px нужно 465px —
   поиск убираем на 480 */
@media (max-width: 480px) {
	.hdr {
		padding: 0 16px;
		gap: 8px;
	}

	.hdr__search {
		display: none;
	}
}

/* на 320px не хватало 21px: ужимаем логотип и убираем иконку телефона.
   Ниже 992px приоритет по заданию — логотип, поиск, кнопка и корзина,
   так что телефон здесь уступает кнопке заявки. Номер остаётся
   в выезжающем меню и в подвале. */
@media (max-width: 360px) {
	.hdr__logo img {
		width: 110px;
	}

	.hdr__contacts {
		display: none;
	}
}

/* В узкой карточке подпись характеристики съедала ширину строки и значение
   схлопывалось в многоточие: ставим подпись и значение друг под другом. */
@media (max-width: 600px) {
	.cat2__main .spec {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 2px 0;
	}

	.cat2__main .spec__value {
		text-align: left;
		white-space: normal;
		overflow: visible;
	}

	.cat2__main .specs .spec:nth-child(n+4) {
		display: none;
	}
}