@charset "utf-8";
/***!  /templates/flex/css/sibmet-header.css?25c4dc3c0912dd04a945f718c0baa884  !***/

/* =====================================================================
   Шапка sibmet.com: верхняя строка, меню, липкая шапка, мобильная шапка,
   поиск по товарам. 25.09.2026.

   Файл: templates/flex/css/sibmet-header.css
   Подключается из templates/flex/html/mod_search/topsearch.php с версией
   по дате файла (version=auto), поэтому кэш custom.css ему не мешает.

   Порядок в <head>: template.css → preset4.css → custom.css → этот файл →
   встроенный <style> Helix. Встроенные правила Helix идут ПОСЛЕ этого
   файла и при равном весе побеждают, поэтому часть селекторов здесь
   специально «тяжелее» (#sp-header, body.site).
   ===================================================================== */


/* ---------- 1. Верхняя строка: модуль «Шапка – верхняя строка» в top2 ---------- */

#sp-top-bar { padding: 0; }
#sp-top-bar #sp-top2 { float: none; width: 100%; }
/* у колонки top2 класс pull-right из Bootstrap, а он с !important;
   шаблон ещё добавляет ей отступы 20 px слева и 3 px снизу */
#sp-top-bar #sp-top2 > .sp-column { float: none !important; margin: 0; }
#sp-top-bar #sp-top2 .sp-module { display: block; margin: 0; }

/* страховка: если в настройках шаблона не выключили «Контакты» и «Соцсети»,
   старые списки не показываются рядом с новым модулем */
#sp-top-bar:has(.sbm-tb) #sp-top1,
#sp-top-bar:has(.sbm-tb) .sp-contact-info,
#sp-top-bar:has(.sbm-tb) .social-icons { display: none; }

.sbm-tb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 24px;
	min-height: 44px;
	padding: 6px 0;
	font-size: 13.5px;
	line-height: 1.3;
	color: #cfcfcf;
}
.sbm-tb__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 22px;
}
.sbm-tb__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}
.sbm-tb__item svg { flex: none; color: #65c3ea; }
#sp-top-bar .sbm-tb a {
	color: #d8d8d8;
	text-decoration: none;
	transition: color .15s, background-color .15s, border-color .15s;
}
#sp-top-bar .sbm-tb a:hover,
#sp-top-bar .sbm-tb a:focus-visible { color: #fff; }
#sp-top-bar .sbm-tb a:focus-visible { border-radius: 3px; } /* рамка фокуса – в разделе 3 */

.sbm-tb__nets { display: inline-flex; gap: 2px; }
#sp-top-bar .sbm-tb .sbm-tb__net {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: #bdbdbd;
}
#sp-top-bar .sbm-tb .sbm-tb__net:hover { background: rgba(255, 255, 255, .08); color: #fff; }

#sp-top-bar .sbm-tb .sbm-tb__phone {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .01em;
	color: #fff;
	white-space: nowrap;
}
#sp-top-bar .sbm-tb .sbm-tb__phone:hover { color: #8fd3f0; }

/* белый на #157dab – 4,6:1, на фирменном #22a9e1 было бы 2,7:1 */
#sp-top-bar .sbm-tb .sbm-tb__btn {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	border: 1px solid #22a9e1;
	border-radius: 4px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}
#sp-top-bar .sbm-tb .sbm-tb__btn:hover,
#sp-top-bar .sbm-tb .sbm-tb__btn:focus-visible { background: #157dab; border-color: #157dab; color: #fff; }


/* ---------- 2. Строка с логотипом, меню, поиском и корзиной ---------- */

/* колонки Bootstrap (col-md-3/8/1) + ширины из custom.css (10 % и 81,67 %)
   не помещались: меню наезжало на логотип, корзина уходила за край на 1024 px */
#sp-header .container > .row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
#sp-header .container > .row:before,
#sp-header .container > .row:after { display: none; }

#sp-header #sp-logo {
	flex: 0 0 auto;
	float: none;
	width: auto;
	padding-left: 15px;
	padding-right: 15px;
}
#sp-header #sp-menu {
	flex: 1 1 auto;
	float: none;
	width: auto;
	min-width: 0;
	padding-left: 0;
	padding-right: 0;
}
#sp-header #sp-topsearch {
	flex: 0 0 auto;
	float: none;
	width: auto;
	padding-left: 0;
	padding-right: 5px;
}
#sp-header #sp-topsearch > .sp-column { display: flex; align-items: center; }
#sp-header #sp-topsearch .sp-module { margin: 0; }

/* Логотип. template.css при плотности экрана от 1,5 (MacBook, iPad, ноутбуки
   с масштабом 150 %) прячет .sp-default-logo и ждёт логотип ×2, которого
   на сайте нет, – шапка оставалась без логотипа. Показываем всегда;
   когда в настройках шаблона появится логотип ×2, сработает :has ниже. */
#sp-header #sp-logo .logo .sp-default-logo { display: block; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
	#sp-header #sp-logo .logo:has(.sp-retina-logo) .sp-default-logo { display: none; }
}

/* Поиск и корзина: custom.css ставит корзину абсолютом (left: 46px,
   на телефоне top: -91px; left: -168px) – возвращаем в поток */
#sp-header .top-search-wrapper { right: auto; width: 44px; }
#sp-header .top-search-wrapper .icon-top-wrapper,
#sp-header .top-search-wrapper .icon-top-wrapper i.pe { width: 44px; }
#sp-header .top-search-wrapper .icon-top-wrapper i.pe { font-size: 21px; }
#sp-header #sp-topsearch #cart-menu {
	position: relative;
	top: auto;
	left: auto;
	width: auto;
	padding: 0;
}
#sp-header #vmCartModule { right: auto; width: auto; }
#sp-header #cart-menu #cd-menu-trigger,
#sp-header #cart-menu #cd-menu-trigger > i { width: 56px; }

/* Кнопка звонка (модуль «Шапка – кнопка звонка») – только до 991 px */
.sbm-hcall { display: none; }
#sp-header .sbm-hcall {
	place-items: center;
	width: 44px;
	height: 90px;
	color: #ededed;
}
#sp-header .sbm-hcall:hover,
#sp-header .sbm-hcall:focus-visible { color: #fff; }
#sp-header .sbm-hcall svg { display: block; width: 22px; height: 22px; }

/* Значок меню на компьютере не нужен: он открывал то же меню второй раз */
@media (min-width: 992px) {
	#sp-header #offcanvas-toggler { display: none; }
}


/* ---------- 3. Пункты меню ---------- */

#sp-header .sp-megamenu-parent > li > a { transition: color .15s; }
#sp-header .sp-megamenu-parent > li:hover > a,
.sbm-kbd #sp-header .sp-megamenu-parent > li:focus-within > a { color: #fff; }

/* стрелка: при открытии поворачивается вверх, а не меняется на крестик */
#sp-header .sp-megamenu-parent > li.sp-has-child > a::after,
#sp-header .sp-megamenu-parent > li.sp-has-child > a:hover::after {
	display: inline-block;
	content: "\e688";
	opacity: .9;
	transition: transform .2s;
}
#sp-header .sp-megamenu-parent > li.sp-has-child:hover > a::after,
.sbm-kbd #sp-header .sp-megamenu-parent > li.sp-has-child:focus-within > a::after {
	transform: rotate(180deg);
	opacity: 1;
}

/* Рамка фокуса для клавиатуры. template.css убирает outline у всех ссылок
   и кнопок сайта правилом «a, button, input, .btn, .sppb-btn { outline: 0 !important }»,
   поэтому рамка сделана тенью, как в футере. Пункты подменю при фокусе
   подсвечиваются фоном и полоской, как при наведении (раздел 4). */
#sp-header .sp-megamenu-parent > li > a:focus-visible,
#sp-header #sp-logo a.logo:focus-visible,
#sp-header .top-search-wrapper .icon-top-wrapper:focus-visible,
#sp-header .sbm-hcall:focus-visible,
#sp-header #cd-menu-trigger:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px #22a9e1;
	border-radius: 3px;
}
#sp-top-bar .sbm-tb a:focus-visible,
.offcanvas-menu .sbm-ocm a:focus-visible { box-shadow: 0 0 0 2px #4fbfeb; border-radius: 3px; }

/* Меню открывается и с клавиатуры (Tab). Класс sbm-kbd на <html> ставит
   sibmet-header.js после нажатия Tab и снимает при клике мышью: так меню
   не остаётся открытым после Ctrl+клика по пункту. */
.sbm-kbd #sp-header .sp-megamenu-parent .sp-has-child:focus-within > .sp-dropdown {
	display: block;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	/* без анимации: шаблон показывает подменю с задержкой 0,1 с, и пока она идёт,
	   пункты подменю ещё скрыты – Tab их пропускал */
	transition: none;
}

/* 992–1199 px: меню чуть уже, чтобы поместиться рядом с логотипом и корзиной */
@media (min-width: 992px) and (max-width: 1199px) {
	#sp-header #sp-logo { padding-right: 10px; }
	#sp-header .sp-megamenu-parent > li > a { padding: 0 7px; font-size: 14px; }
	#sp-header .sp-megamenu-parent > li.sp-has-child > a::after { padding: 0 0 0 2px; }
}


/* ---------- 4. Выпадающее меню: вариант Б, белая карточка ---------- */

/* Ширину 240 px Helix пишет в style="" – без !important не перебить.
   Меню шириной по самому длинному пункту, но не шире 380 px. */
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown {
	width: max-content !important;
	min-width: 240px;
	max-width: 380px;
}

/* было rgba(40,40,40,.8): на 20 % прозрачное, сквозь него просвечивал баннер.
   Белая карточка с тенью отделяется и от тёмного первого экрана, и от белых
   страниц под липкой шапкой; в том же стиле мобильное меню и панель корзины. */
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
	padding: 6px 0;
	background: #fff;
	border-top: 3px solid #22a9e1;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 22px 48px rgba(9, 18, 28, .4), 0 3px 10px rgba(9, 18, 28, .2);
}
/* подменю «Каталога»: верх вровень с пунктом, из которого выехало */
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown.sp-dropdown-sub { top: -9px; }
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown.sp-dropdown-sub .sp-dropdown-inner { border-radius: 0 6px 6px 6px; }

#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner .sp-dropdown-items > li.sp-menu-item + li.sp-menu-item {
	border-top: 1px solid #edf1f5;
}
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner .sp-dropdown-items > li.sp-menu-item > a {
	margin: 0;
	padding: 10px 22px;
	border-radius: 0;
	background: transparent;
	font-size: 15px;
	line-height: 1.35;
	color: #1f2b37;
	white-space: normal;
	transition: background-color .15s, color .15s, box-shadow .15s;
}
/* наведение, фокус с клавиатуры и пункт с открытым подменю;
   #126a91 на #eef4f9 – 5,4:1 (фирменный #1683b1 дал бы 3,9:1) */
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner .sp-dropdown-items > li.sp-menu-item > a:hover,
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner .sp-dropdown-items > li.sp-menu-item > a:focus-visible,
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner .sp-dropdown-items > li.sp-menu-item.sp-has-child:hover > a,
.sbm-kbd #sp-header #sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner .sp-dropdown-items > li.sp-menu-item.sp-has-child:focus-within > a {
	background: #eef4f9;
	color: #126a91;
	box-shadow: inset 3px 0 0 #22a9e1;
	outline: none;
}
/* пункт текущей страницы (preset4 красил его полупрозрачным синим с белым текстом) */
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner .sp-dropdown-items > li.sp-menu-item.current-item > a,
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner .sp-dropdown-items > li.sp-menu-item.current-item > a:hover {
	background: #f5f9fc;
	color: #126a91;
	font-weight: 600;
	box-shadow: inset 3px 0 0 #22a9e1;
}
/* стрелка у пунктов с подменю остаётся стрелкой вправо (шаблон менял её на «вниз») */
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child > a::after,
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child > a:hover::after {
	content: "\e684";
	margin-left: 12px;
	color: #7b8a99;
	opacity: 1;
}
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child:hover > a::after,
.sbm-kbd #sp-header #sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child:focus-within > a::after { color: #126a91; }


/* ---------- 5. Липкая шапка при прокрутке ---------- */

/* было rgba(39,39,39,.75) без тени – сквозь шапку была видна страница */
#sp-header.sticky .sticky__wrapper {
	background-color: #303030;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}


/* ---------- 6. Панель поиска ---------- */

/* панель под шапкой у правого края: отсчёт от строки шапки (.row с position: relative),
   а не от значка и не от узкой колонки #sp-topsearch */
#sp-header #sp-topsearch,
#sp-header #sp-topsearch > .sp-column,
#sp-header #sp-topsearch .sp-module,
#sp-header .top-search-wrapper { position: static; }
#sp-header .top-search-input-wrap .top-search-wrap,
#sp-header .top-search-input-wrap .top-search-wrap.active {
	top: 100%;
	right: 15px;
	left: auto;
	width: 440px;
	margin: 0;
}
#sp-header .top-search-input-wrap .top-search-wrap .searchwrapper,
#sp-header .top-search-wrapper .searchwrapper {
	margin: 0;
	padding: 12px;
	background: #fff;
	border-top: 3px solid #22a9e1;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.sbm-search { display: flex; align-items: stretch; margin: 0; }
.sbm-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
#sp-header .sbm-search .sbm-search__input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid #cfd8e0;
	border-right: 0;
	border-radius: 4px 0 0 4px;
	background: #fff;
	box-shadow: none;
	font-size: 16px; /* меньше 16 px – iPhone увеличивает страницу при вводе */
	line-height: 1.2;
	color: #1f2b37;
}
#sp-header .sbm-search .sbm-search__input::placeholder { color: #8a97a3; }
#sp-header .sbm-search .sbm-search__input:focus {
	border-color: #22a9e1;
	outline: none;
	box-shadow: 0 0 0 3px rgba(34, 169, 225, .25);
}
#sp-header .sbm-search .sbm-search__btn {
	flex: none;
	width: 50px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 4px 4px 0;
	background: #157dab;
	color: #fff;
	font-size: 22px;
	line-height: 44px;
	cursor: pointer;
}
#sp-header .sbm-search .sbm-search__btn:hover,
#sp-header .sbm-search .sbm-search__btn:focus-visible { background: #126a91; }
#sp-header .sbm-search__hint {
	margin: 8px 2px 0;
	font-size: 13px;
	line-height: 1.4;
	color: #56636f;
}

/* Страница результатов: подсказка, если ничего не нашлось
   (разметка – в правке category/default.php) */
.sbm-noresult {
	max-width: 760px;
	margin: 10px 0 30px;
	padding: 22px 24px;
	border: 1px solid #e3eaf0;
	border-left: 3px solid #22a9e1;
	border-radius: 0 6px 6px 0;
	background: #f5f8fb;
	font-size: 15.5px;
	line-height: 1.6;
	color: #44525f;
}
.sbm-noresult p { margin: 0 0 10px; }
.sbm-noresult .sbm-noresult__title { font-size: 18px; font-weight: 600; color: #1f2b37; }
.sbm-noresult a { color: #1683b1; }
.sbm-noresult .sbm-noresult__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.sbm-noresult .sbm-noresult__btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid #157dab;
	border-radius: 4px;
	background: #157dab;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.sbm-noresult .sbm-noresult__btn:hover { background: #126a91; border-color: #126a91; color: #fff; }
.sbm-noresult .sbm-noresult__btn--ghost { background: #fff; color: #157dab; }
.sbm-noresult .sbm-noresult__btn--ghost:hover { background: #eef4f9; color: #157dab; }


/* ---------- 7. Планшет и телефон (до 991 px): логотип | ☎ поиск корзина | меню ---------- */

@media (max-width: 991px) {
	.sbm-tb__hours { display: none; }

	#sp-header #sp-topsearch { order: 2; margin-left: auto; padding-right: 0; }
	#sp-header #sp-menu { order: 3; flex: 0 0 auto; padding-right: 5px; }
	#sp-header #offcanvas-toggler { float: none; display: block; }
	#sp-header #offcanvas-toggler > i { width: 48px; margin: 0; font-size: 24px; }
	#sp-header .sbm-hcall { display: grid; }
}

@media (max-width: 1199px) {
	.sbm-tb__mail { display: none; }
}


/* ---------- 8. Телефон (до 767 px) ---------- */

@media (max-width: 767px) {
	/* верхней строки нет: звонок – кнопкой ☎ в шапке и в мобильном меню */
	#sp-top-bar { display: none; }

	/* шапка 64 px вместо 90 px (и в липком виде вместо 70 px) */
	body.site #sp-header.flex,
	body.site #sp-header.flex .sticky__wrapper { height: 64px; }
	body.site #sp-header.flex #sp-logo a.logo,
	body.site #sp-header.flex .top-search-wrapper .icon-top-wrapper,
	body.site #sp-header.flex .top-search-wrapper .icon-top-wrapper > i::before,
	body.site #sp-header.flex .sp-megamenu-wrapper #offcanvas-toggler,
	body.site #sp-header.flex #cart-menu,
	body.site #sp-header.flex #cart-menu #cd-menu-trigger,
	body.site #sp-header.flex #cart-menu #cd-menu-trigger > i,
	body.site #sp-header.flex .sbm-hcall { height: 64px; line-height: 64px; }

	/* логотип с отступом 15 px (custom.css обнулял отступ до 1199 px) */
	#sp-header #sp-logo { padding-left: 15px; padding-right: 8px; }
	#sp-header #sp-logo .logo .sp-default-logo { width: 150px; max-width: 150px; height: auto; }

	#sp-header .top-search-wrapper,
	#sp-header .top-search-wrapper .icon-top-wrapper,
	#sp-header .top-search-wrapper .icon-top-wrapper i.pe,
	#sp-header .sbm-hcall,
	#sp-header #cart-menu #cd-menu-trigger,
	#sp-header #cart-menu #cd-menu-trigger > i { width: 44px; }
	#sp-header #cart-menu #cd-menu-trigger > i { font-size: 26px; }
	#sp-header #offcanvas-toggler > i { width: 44px; font-size: 22px; }
	#sp-header #sp-menu { padding-right: 4px; }

	/* панель поиска на всю ширину под шапкой */
	#sp-header .top-search-input-wrap .top-search-wrap,
	#sp-header .top-search-input-wrap .top-search-wrap.active {
		left: 10px;
		right: 10px;
		width: auto;
	}
	#sp-header .top-search-input-wrap .top-search-wrap .searchwrapper { padding: 10px; }

	/* мобильное меню у правого края: custom.css сдвигал его на left: 41px,
	   справа оставалась серая полоса 14 px */
	body .offcanvas-menu { left: auto; right: 0; }
}

@media (max-width: 359px) {
	#sp-header #sp-logo .logo .sp-default-logo { width: 124px; max-width: 124px; }
	#sp-header .top-search-wrapper,
	#sp-header .top-search-wrapper .icon-top-wrapper,
	#sp-header .top-search-wrapper .icon-top-wrapper i.pe,
	#sp-header .sbm-hcall,
	#sp-header #cart-menu #cd-menu-trigger,
	#sp-header #cart-menu #cd-menu-trigger > i,
	#sp-header #offcanvas-toggler > i { width: 40px; }
}


/* ---------- 9. Мобильное меню: модуль «Мобильное меню – контакты» ---------- */

.offcanvas-menu .offcanvas-inner .sbm-ocm {
	margin: 0 0 6px;
	padding: 2px 0 18px;
	border-bottom: 1px solid #e6ebf0;
}
.offcanvas-menu .sbm-ocm a { text-decoration: none; }
.offcanvas-menu .sbm-ocm .sbm-ocm__phone {
	display: inline-block;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	color: #1f2b37;
	white-space: nowrap;
}
.offcanvas-menu .sbm-ocm .sbm-ocm__meta {
	margin: 4px 0 14px;
	font-size: 14px;
	line-height: 1.45;
	color: #56636f;
}
.offcanvas-menu .sbm-ocm .sbm-ocm__meta a { color: #1683b1; }
.offcanvas-menu .sbm-ocm .sbm-ocm__actions { display: flex; gap: 8px; margin: 0; }
.offcanvas-menu .sbm-ocm .sbm-ocm__btn {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid #157dab;
	border-radius: 4px;
	background: #157dab;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	color: #fff;
}
.offcanvas-menu .sbm-ocm .sbm-ocm__btn--wa { border-color: #cfd8e0; background: #fff; color: #1f2b37; }
.offcanvas-menu .sbm-ocm .sbm-ocm__btn--wa svg { flex: none; color: #25d366; }


/* ---------- 10. Без анимаций для тех, кто их отключил ---------- */

@media (prefers-reduced-motion: reduce) {
	#sp-header .sp-megamenu-parent .sp-dropdown,
	#sp-header .sp-megamenu-parent > li.sp-has-child > a::after { transition: none; }
}