/* Шапка по макету: служебная полоса + два белых ряда (29.08.2026).
 *
 * Отдельный файл, а не дописка в redesign2.css: шапка задевает все
 * страницы сайта, и откатывать её нужно уметь отдельно от главной.
 *
 * Тема рисует шапку тёмной (.top__wrap { background:#282828 }), а меню
 * белым по тёмному. Здесь это перебивается только там, где меню стоит
 * строкой: ниже 992px оно уезжает в тёмную выезжающую панель, и белые
 * ссылки с иконками темы там как раз к месту.
 */

/* ---------- каркас ---------- */

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

.top__wrap {
	background: #fff;
}

.top {
	padding: 0;
}

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

/* .main__block тема раскладывает флексом с переносом и отступом снизу —
   в двухрядной шапке ряды раскладываются сами */
.hdr2 {
	display: block;
	padding: 0;
	gap: 0;
	border-top: 0;
	position: relative;
	box-sizing: border-box;
	background: #fff;
}

.hdr2__in {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 24px;
	position: relative;
}

/* ---------- служебная полоса ---------- */

.hdr2__util {
	background: #0d2a63;
	color: #cfe0ff;
	font-size: 13px;
	line-height: 1;
}

.hdr2__util-in {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
	height: 34px;
	display: flex;
	align-items: center;
	gap: 18px;
}

.hdr2__msg {
	padding: 5px 10px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	text-decoration: none;
}

.hdr2__msg:hover {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

.hdr2__work {
	color: #a9c6ff;
}

.hdr2__util-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 22px;
}

.hdr2__mail,
.hdr2__addr {
	color: #cfe0ff;
	text-decoration: none;
}

.hdr2__mail:hover {
	color: #fff;
}

.hdr2__phone {
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

.hdr2__phone:hover {
	color: #fff;
	text-decoration: underline;
}

/* при залипании служебная полоса уезжает: шапка и так высокая */
.is-sticky .hdr2__util {
	display: none;
}

/* ---------- первый ряд: логотип, меню, кнопка ---------- */

.hdr2__row1 .hdr2__in {
	height: 64px;
}

.hdr2 .hdr__logo,
.hdr2 .top__logo-block {
	width: auto;
	padding: 0;
	flex: 0 0 auto;
}

/* 210px — как было в тёмной шапке. Меньше нельзя: на белом фоне тот же
 * знак читается легче тёмной версии и «худеет» на глаз, поэтому и сам
 * файл logo-dark.png чуть плотнее исходного. */
.hdr2 .hdr__logo img {
	width: 210px;
	height: auto;
	display: block;
	/* знак стоит чуть ниже середины ряда: вплотную к тёмной полосе он
	   выглядел приклеенным к ней */
	margin-top: 8px;
}

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

.hdr2__cta {
	margin-left: auto;
	flex: 0 0 auto;
	height: 40px;
	padding: 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background: #17924f;
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}

.hdr2__cta:hover {
	background: #147f45;
	color: #fff;
}

.hdr2__cta-short {
	display: none;
}

/* ---------- меню строкой (только на широком экране) ---------- */

/* Порог 1101px — по замеру: логотип 170 + шесть пунктов + кнопка требуют
   около 1080px. Ниже меню уезжает в выезжающую панель темы. */
@media (min-width: 1101px) {
	.hdr2 .hdr__nav .mobile-list__data > .main {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		gap: 22px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

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

	/* Движок печатает меню внутри обёртки .mobile-list__data, поэтому
	   селекторы идут через неё, а не прямым потомком .hdr__nav. */

	/* «Каталог» на десктопе — синяя кнопка второго ряда */
	.hdr2 .hdr__nav .mobile-list__data > .main > .main__item--catalog {
		display: none;
	}

	.hdr2 .main__link {
		padding: 0;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		line-height: 1;
		white-space: nowrap;
		color: #414b57;
		font-size: 14.5px;
		/* тема печатает пункты капслоком — в макете обычный регистр */
		text-transform: none;
	}

	.hdr2 .main__link:hover {
		color: #406ae2;
	}

	/* .main__info — контакты для выезжающей панели: в строке им не место.
	   В теме это правило висело на .hdr, которого в новой шапке нет. */
	.hdr2 .main__info {
		display: none;
	}

	/* выпадающий список: у темы он тёмный, на светлой шапке — карточка */
	.hdr2 .main .main {
		top: 100%;
		left: 0;
		min-width: 260px;
		padding: 8px 0;
		border: 1px solid #e2e6ec;
		border-radius: 0 0 6px 6px;
		background: #fff;
		box-shadow: 0 12px 28px rgba(23, 27, 34, .12);
	}

	.hdr2 .main .main .main__item {
		display: block;
		padding: 0;
	}

	.hdr2 .main .main .main__link {
		padding: 9px 18px;
		display: block;
		white-space: normal;
	}

	.hdr2 .main .main .main__item:before {
		display: none;
	}

	/* Стрелка списка у темы — белая картинка, на светлом фоне её не видно.
	   Селектор длинный намеренно: в redesign.css лежит правило
	   .hdr__nav .main__link .ico_mmenu:before с размерами картинки,
	   и без такой же длины оно перебивало треугольник. */
	.hdr2 .hdr__nav .main__link .ico_mmenu {
		position: static;
		top: auto;
		width: 10px;
		height: 6px;
		margin: 0;
		flex: 0 0 auto;
	}

	.hdr2 .hdr__nav .main__link .ico_mmenu:before {
		width: 0;
		height: 0;
		background: none;
		border: 3.5px solid transparent;
		border-top: 4px solid currentColor;
		border-bottom: 0;
		opacity: .55;
	}
}

/* ---------- 993..1100: бургер вместо строки ----------
 * redesign.css (правка шапки от 20.08) возвращала меню в строку уже
 * с 993px — под четыре пункта. Теперь их шесть, ряд не помещается,
 * поэтому на этом промежутке возвращаем поведение темы: бургер и
 * выезжающая панель. Правила приходится повторить: перебить чужой
 * медиазапрос иначе нечем.
 */

@media (min-width: 993px) and (max-width: 1100px) {
	.hdr2 .menu__btn {
		display: block;
		position: static;
		order: 9;
		flex: 0 0 auto;
		margin: 0;
	}

	.main__wrap .hdr2 .hdr__nav {
		width: 320px;
		margin: 0;
		padding: 24px 0 16px;
		box-sizing: border-box;
		display: block;
		text-align: left;
		border-radius: 0 0 0 5px;
		position: fixed;
		top: 94px;
		right: -100%;
		z-index: 900;
		overflow-y: auto;
		visibility: hidden;
		transition-duration: .25s;
		background: #282828;
	}

	.main__wrap-show .hdr2 .hdr__nav {
		right: 0;
		visibility: visible;
		transition: all .5s;
	}

	.hdr2 .hdr__nav .mobile-list__data > .main {
		display: block;
		padding-left: 15px;
	}

	.hdr2 .hdr__nav .main__item {
		display: block;
	}

	/* правила темы про удобные цели нажатия живут в медиазапросе до 992px,
	   здесь их нет — задаём отступы сами, иначе пункты слипаются */
	.hdr2 .hdr__nav .main__link {
		display: block;
		padding: 9px 30px 9px 0;
	}

	.hdr2 .hdr__nav .main .main {
		position: relative;
		display: none;
		top: 0;
		padding-left: 0;
	}

	.hdr2 .main__info {
		display: block;
	}
}

/* ---------- второй ряд: каталог, поиск, корзина ---------- */

.hdr2__row2 {
	border-bottom: 1px solid #e2e6ec;
}

.hdr2__row2 .hdr2__in {
	height: 60px;
	gap: 12px;
}

.hdr2__cat {
	flex: 0 0 auto;
	position: relative;
}

.hdr2__catbtn {
	height: 44px;
	padding: 0 20px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 0;
	border-radius: 4px;
	background: #406ae2;
	color: #fff;
	font: 700 15px/1 inherit;
	cursor: pointer;
}

.hdr2__catbtn:hover,
.hdr2__catbtn[aria-expanded="true"] {
	background: #284fb9;
}

.hdr2__catbtn i {
	width: 16px;
	height: 2px;
	display: block;
	position: relative;
	background: #fff;
}

.hdr2__catbtn i:before,
.hdr2__catbtn i:after {
	content: "";
	position: absolute;
	left: 0;
	width: 16px;
	height: 2px;
	background: #fff;
}

.hdr2__catbtn i:before { top: -5px; }
.hdr2__catbtn i:after  { top: 5px; }

.hdr2__catmenu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 960;
	width: min(940px, calc(100vw - 48px));
	padding: 18px 20px 14px;
	box-sizing: border-box;
	border: 1px solid #e2e6ec;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 14px 34px rgba(23, 27, 34, .16);
}

.hdr2__catmenu[hidden] {
	display: none;
}

.hdr2__catcols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 8px 22px;
}

.hdr2__cathead {
	display: block;
	margin-bottom: 6px;
	color: #171b22;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.hdr2__catlink {
	display: block;
	padding: 4px 0;
	color: #414b57;
	font-size: 14px;
	text-decoration: none;
}

.hdr2__cathead:hover,
.hdr2__catlink:hover {
	color: #406ae2;
}

.hdr2__cathead i,
.hdr2__catlink i {
	margin-left: 7px;
	font: 600 11.5px/1 monospace;
	font-style: normal;
	color: #8b96a3;
}

.hdr2__catlink--more {
	color: #406ae2;
	font-weight: 600;
}

.hdr2__catfoot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #e2e6ec;
}

.hdr2__catfoot a {
	color: #406ae2;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

/* поиск */

.hdr2__search {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	position: relative;
	margin: 0;
	padding: 0;
}

.hdr2__search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	box-sizing: border-box;
	border: 1px solid #dde2e9;
	border-right: 0;
	border-radius: 4px 0 0 4px;
	background: #f4f6fa;
	color: #282828;
	font-size: 14.5px;
	text-overflow: ellipsis;
}

.hdr2__search-input::placeholder {
	color: #8b96a3;
}

.hdr2__search-input:focus {
	outline: 0;
	border-color: #406ae2;
	background: #fff;
}

.hdr2__search-btn {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 22px;
	border: 0;
	border-radius: 0 4px 4px 0;
	background: #284fb9;
	color: #fff;
	font: 600 14.5px/1 inherit;
	cursor: pointer;
}

.hdr2__search-btn:hover {
	background: #1d3f9c;
}

/* сообщение валидатора темы не должно раздвигать ряд */
.hdr2__search label.error {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	padding: 4px 8px;
	border-radius: 3px;
	background: #fff5f5;
	color: #c0392b;
	font-size: 12px;
	line-height: 1.2;
	white-space: nowrap;
	z-index: 5;
}

/* корзина */

.hdr2__cart {
	flex: 0 0 auto;
	margin: 0;
	height: 44px;
	padding: 0 4px 0 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	position: relative;
	color: #171b22;
	font-size: 14px;
	text-decoration: none;
}

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

.hdr2__cart .cart__ico {
	width: 22px;
	height: 20px;
	padding: 0;
	flex: 0 0 auto;
	display: block;
}

.hdr2__cart .cart__count {
	position: absolute;
	top: 4px;
	left: 12px;
	width: 16px;
	height: 16px;
	min-width: 16px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #406ae2;
	color: #fff;
	font-size: 10px;
	line-height: 1;
}

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

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

/* ---------- пороги ----------
 * Числа проверены браузером на staging: до 1250px строка меню ещё
 * помещается, ниже уходит в выезжающую панель темы.
 */

@media (max-width: 1400px) {
	.hdr2__addr {
		display: none;
	}
}

@media (max-width: 1250px) {
	.hdr2__in {
		gap: 16px;
	}

	.hdr2 .hdr__logo img {
		width: 190px;
	}

	.hdr2 .hdr__nav .mobile-list__data > .main {
		gap: 16px;
	}

	.hdr2 .main__link {
		font-size: 13.5px;
	}
}

@media (max-width: 1100px) {
	.hdr2__mail {
		display: none;
	}
}

/* меню в бургер: панель темы остаётся тёмной, поэтому цвета ссылок
   ниже 992px не трогаем */
@media (max-width: 992px) {
	.hdr2__row1 .hdr2__in {
		height: 60px;
		gap: 12px;
	}

	.hdr2__cta {
		margin-left: auto;
	}

	.hdr2 .menu__btn {
		position: static;
		order: 9;
		flex: 0 0 auto;
		margin: 0;
	}

	/* панель выезжает из-под шапки: её высота теперь другая */
	.main__wrap .main__menu-block {
		top: 94px;
	}

	.hdr2__work {
		display: none;
	}
}

@media (max-width: 720px) {
	.hdr2__in,
	.hdr2__util-in {
		padding: 0 16px;
	}

	.hdr2__util-in {
		gap: 12px;
	}

	.hdr2__msg {
		display: none;
	}

	.hdr2__row2 .hdr2__in {
		height: auto;
		padding-top: 10px;
		padding-bottom: 12px;
		flex-wrap: wrap;
	}

	.hdr2__search {
		order: 3;
		flex: 1 0 100%;
	}

	.hdr2__cart {
		margin-left: auto;
	}

	.main__wrap .main__menu-block {
		top: 88px;
	}
}

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

	.hdr2__cta {
		padding: 0 14px;
	}

	.hdr2__cta-full {
		display: none;
	}

	.hdr2__cta-short {
		display: inline;
	}

	.hdr2__catbtn {
		padding: 0 16px;
	}

	.hdr2__cart-text {
		display: none;
	}

	.hdr2__catmenu {
		width: calc(100vw - 32px);
	}
}

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

	.hdr2__search-btn {
		padding: 0 14px;
	}

	.hdr2__catbtn span {
		display: none;
	}

	.hdr2__catbtn {
		padding: 0 14px;
	}
}

/* ---------- один контейнер на весь сайт ----------
 * У темы контент страниц идёт в .base-block шириной ровно 1241px, а ряды
 * шапки — 1440px. На главной к ним добавлялась третья ширина, и все три
 * края были видны глазом. Приводим контент к ширине шапки.
 */

.base-block {
	width: 100%;
	max-width: 1440px;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

@media (max-width: 720px) {
	.base-block {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Колонка текста на страницах. Ширина 1440 хороша для витрины и каталога,
   но строка в двести знаков не читается — глаз теряет начало следующей.
   Чертежи и таблицы стоят в той же колонке и потому тоже не растекаются. */
.content-d__d2 {
	max-width: 940px;
}