@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; }
}

/***!  /templates/flex/css/sibmet-minicart.css?25c4dc3c0912dd04a945f718c0baa884  !***/

/*
 * Мини-корзина sibmet.com - иконка в шапке и боковая панель.
 * 23.09.2026. Подключается из templates/flex/html/mod_virtuemart_cart/default.php.
 */

.sm-mc-module,
.sm-mc {
	--mc-accent: #22a9e1;
	--mc-accent-dark: #1689b9;
	--mc-text: #1f2933;
	--mc-muted: #6b7785;
	--mc-line: #e3e8ee;
	--mc-soft: #f4f7fa;
	--mc-danger: #d64545;
}

/* ---------- иконка в шапке ---------- */

.sm-mc-module #cd-menu-trigger {
	position: relative;
	text-decoration: none;
}
.sm-mc-module #cd-menu-trigger:focus-visible {
	outline: 2px solid var(--mc-accent);
	outline-offset: -4px;
}
.sm-mc-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -22px 0 0 6px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--mc-accent);
	color: #fff;
	font: 700 12px/20px "Open Sans", Arial, sans-serif;
	text-align: center;
	box-shadow: 0 0 0 2px #303030; /* отделяет кружок от иконки на тёмной шапке */
	pointer-events: none;
}
.sm-mc-badge[hidden] { display: none; }

/* ---------- слой и панель ---------- */

html.sm-mc-lock,
html.sm-mc-lock body { overflow: hidden; }

.sm-mc[hidden] { display: none !important; }

.sm-mc,
.sm-mc *,
.sm-mc *::before,
.sm-mc *::after { box-sizing: border-box; }

.sm-mc {
	position: fixed;
	inset: 0;
	z-index: 10050;
	font-family: "Open Sans", Arial, sans-serif;
	color: var(--mc-text);
}
.sm-mc__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 32, .5);
	opacity: 0;
	transition: opacity .25s ease;
}
.sm-mc__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: -8px 0 32px rgba(0, 0, 0, .18);
	transform: translateX(100%);
	transition: transform .25s ease;
	outline: none;
}
.sm-mc.is-open .sm-mc__backdrop { opacity: 1; }
.sm-mc.is-open .sm-mc__panel { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.sm-mc__backdrop,
	.sm-mc__panel { transition: none; }
}

/* шапка панели */
.sm-mc__head {
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 16px 16px 24px;
	border-bottom: 1px solid var(--mc-line);
}
.sm-mc .sm-mc__title {
	margin: 0;
	font: 600 22px/1.2 "Open Sans", Arial, sans-serif;
	color: var(--mc-text);
	text-transform: none;
	letter-spacing: 0;
}
.sm-mc__meta {
	flex: 1;
	font-size: 14px;
	color: var(--mc-muted);
	white-space: nowrap;
}
.sm-mc__close {
	flex: none;
	width: 40px;
	height: 40px;
	margin-left: auto;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--mc-muted);
	cursor: pointer;
}
.sm-mc__close:hover { background: var(--mc-soft); color: var(--mc-text); }
.sm-mc__close:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 0; }

/* список */
.sm-mc__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
.sm-mc.is-busy .sm-mc__list { opacity: .55; pointer-events: none; transition: opacity .15s; }

.sm-mc__list {
	list-style: none;
	margin: 0;
	padding: 0 24px;
}
.sm-mc-item {
	position: relative;
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 14px;
	padding: 16px 32px 16px 0;
	border-bottom: 1px solid var(--mc-line);
	transition: opacity .2s;
}
.sm-mc-item:last-child { border-bottom: 0; }
.sm-mc-item.is-removing { opacity: .3; }

.sm-mc-item__media {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 6px;
	background: var(--mc-soft);
	overflow: hidden;
}
.sm-mc-item__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.sm-mc-item__info { min-width: 0; }
.sm-mc .sm-mc-item__name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mc-text);
	text-decoration: none;
}
.sm-mc-item__kg { white-space: nowrap; font-weight: 400; color: var(--mc-muted); }
.sm-mc a.sm-mc-item__name:hover { color: var(--mc-accent-dark); text-decoration: underline; }
.sm-mc-item__price {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--mc-muted);
}
.sm-mc-item__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: 10px;
}
.sm-mc-item__approx {
	font-size: 12px;
	color: var(--mc-muted);
	white-space: nowrap;
}
.sm-mc-item__sum {
	margin-left: auto;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}
.sm-mc-item__del {
	position: absolute;
	top: 12px;
	right: -6px;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #9aa5b1;
	cursor: pointer;
}
.sm-mc-item__del:hover { color: var(--mc-danger); background: #fdeeee; }
.sm-mc-item__del:focus-visible { outline: 2px solid var(--mc-accent); }

/* количество */
.sm-mc-qty {
	display: inline-flex;
	align-items: center;
	height: 34px;
	border: 1px solid #cfd8e1;
	border-radius: 6px;
	background: #fff;
}
.sm-mc-qty__btn {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mc-text);
	font: 400 18px/1 Arial, sans-serif;
	cursor: pointer;
}
.sm-mc-qty__btn:hover:not(:disabled) { color: var(--mc-accent-dark); background: var(--mc-soft); }
.sm-mc-qty__btn:disabled { color: #c3ccd5; cursor: default; }
.sm-mc-qty__btn:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: -2px; }
.sm-mc .sm-mc-qty__input {
	width: 36px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
	color: var(--mc-text);
	font: 600 14px/32px "Open Sans", Arial, sans-serif;
	text-align: right;
	-moz-appearance: textfield;
	appearance: textfield;
}
.sm-mc-qty__input::-webkit-outer-spin-button,
.sm-mc-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sm-mc-qty__input:focus { outline: none; }
.sm-mc-qty:focus-within { border-color: var(--mc-accent); box-shadow: 0 0 0 2px rgba(34, 169, 225, .2); }
.sm-mc-qty__unit {
	padding: 0 4px 0 3px;
	font-size: 14px;
	color: var(--mc-muted);
}

/* ошибка и пустая корзина */
.sm-mc__error {
	margin: 16px 24px 0;
	padding: 10px 12px;
	border-radius: 6px;
	background: #fdeeee;
	color: #9b2c2c;
	font-size: 13px;
	line-height: 1.45;
}
.sm-mc__error a { color: inherit; font-weight: 600; }
.sm-mc__error[hidden],
.sm-mc__empty[hidden],
.sm-mc__foot[hidden],
.sm-mc__list[hidden] { display: none; }

.sm-mc__empty {
	padding: 56px 32px;
	text-align: center;
	color: var(--mc-muted);
}
.sm-mc__empty svg { color: #c3ccd5; }
.sm-mc__empty-title {
	margin: 14px 0 6px;
	font-size: 18px;
	font-weight: 600;
	color: var(--mc-text);
}
.sm-mc__empty-text {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.5;
}
.sm-mc__phone {
	display: inline-block;
	margin-top: 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--mc-text);
	text-decoration: none;
}
.sm-mc__phone:hover { color: var(--mc-accent-dark); }

/* низ панели */
.sm-mc__foot {
	flex: none;
	padding: 16px 24px calc(20px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--mc-line);
	background: #fff;
}
.sm-mc__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: 16px;
}
.sm-mc__sum { font-size: 22px; font-weight: 700; }
.sm-mc__note {
	margin: 4px 0 14px;
	font-size: 13px;
	color: var(--mc-muted);
}

/* кнопки */
.sm-mc .sm-mc__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: 6px;
	font: 600 15px/1.2 "Open Sans", Arial, sans-serif;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.sm-mc .sm-mc__btn + .sm-mc__btn { margin-top: 8px; }
.sm-mc .sm-mc__btn--primary { background: var(--mc-accent); color: #fff; }
.sm-mc .sm-mc__btn--primary:hover,
.sm-mc .sm-mc__btn--primary:focus { background: var(--mc-accent-dark); color: #fff; }
.sm-mc .sm-mc__btn--ghost { background: #fff; color: var(--mc-text); border-color: #cfd8e1; }
.sm-mc .sm-mc__btn--ghost:hover { border-color: var(--mc-accent); color: var(--mc-accent-dark); }
.sm-mc .sm-mc__btn:focus-visible { outline: 2px solid var(--mc-text); outline-offset: 2px; }
.sm-mc__empty .sm-mc__btn { max-width: 260px; margin: 0 auto; }

/* ---------- телефон ---------- */

@media (max-width: 480px) {
	.sm-mc__panel { width: 100%; }
	.sm-mc__head { padding: 14px 8px 12px 16px; }
	.sm-mc .sm-mc__title { font-size: 20px; }
	.sm-mc__list { padding: 0 16px; }
	.sm-mc__foot { padding-left: 16px; padding-right: 16px; }
	.sm-mc__error { margin-left: 16px; margin-right: 16px; }
	.sm-mc-item { grid-template-columns: 56px 1fr; gap: 12px; }
	.sm-mc-item__media { width: 56px; height: 56px; }
}