* {
	margin:0;
	padding:0;
}

/* font-family: "OpenSansRegular"; */
@font-face {
	font-family: "Open Sans";
	src: url("../fonts/OpenSansRegular.eot");
	src: url("../fonts/OpenSansRegular.eot?#iefix")format("embedded-opentype"),
	url("../fonts/OpenSansRegular.woff") format("woff"),
	url("../fonts/OpenSansRegular.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
}
/* font-family: "OpenSansLight"; */
@font-face {
	font-family: "Open Sans Light";
	src: url("../fonts/OpenSansLight.eot");
	src: url("../fonts/OpenSansLight.eot?#iefix")format("embedded-opentype"),
	url("../fonts/OpenSansLight.woff") format("woff"),
	url("../fonts/OpenSansLight.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
}
/* font-family: "OpenSansBold"; */
@font-face {
	font-family: "Open Sans Bold";
	src: url("../fonts/OpenSansBold.eot");
	src: url("../fonts/OpenSansBold.eot?#iefix")format("embedded-opentype"),
	url("../fonts/OpenSansBold.woff") format("woff"),
	url("../fonts/OpenSansBold.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
}

body {
	color: #2a2a2a;
	font-size: 14px;
	line-height: 1.6;
	font-weight: normal;
	font-family: "Open Sans", Tahoma, Arial, Helvetica, sans-serif;
	font-weight: 400;
	background: var(--cloud);
}

a {
	outline: none !important;
	color: #333;
	text-decoration: none;
	transition: color .3s;
}
a:hover {
	text-decoration: underline;
	color: #6ec7ea;
	outline: none;
}
a.dashed {
	border-bottom: 1px dashed #6ec7ea;
	text-decoration: none;
}
a.dashed:hover {
	border-color: #fff;
}
a img {
	border: none;
}

p {
	margin: 0;
}

h1, h2, h3 {
	color: #412c15;
}
h1 {
	font-size: 38px;
}
h2 {
	font-size: 28px;
}
h3 {
	font-size: 18px;
}


strong {
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
}

html, body { height: 100%; width:100%; margin: 0; padding: 0; }
html>body #all { height: auto; min-height: 100%; }

#all { height: 100%; width:100%; position: relative;margin: 0; padding: 0;}


.container {
	/*width: 1000px !important;
	min-width: 1000px !important;
	padding: 0;
	position: relative;*/
}


/* ==========================================================================
   Шапка сайта — bootstrap navbar (навигация + логотип + контакты + кабинет)
   ========================================================================== */
#header {
	background: #fff;
	position: relative;
	z-index: 20;
}
.header-inner {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	padding: 12px 0;
	gap: 16px;
}

/* ---- Кнопка-гамбургер — справа от аккаунта/корзины (видна только < 993px,
   см. navbar-expand-lg); её позиция в DOM (после .header-account/#cart)
   уже ставит её последней/правее всех в flex-строке .header-inner. ---- */
.navbar-toggler {
	border: none;
	padding: 6px 8px;
	background: transparent;
	flex: 0 0 auto;
	line-height: 1;
}
.navbar-toggler:focus {
	box-shadow: none;
	outline: none;
}

/* ---- Меню (bootstrap offcanvas: на мобильном/планшетном — выезжает
   карточкой слева поверх контента; на десктопе offcanvas-lg превращает
   его обратно в обычный инлайн-блок строкой, как раньше с .collapse) ---- */
.offcanvas {
	flex: 1 1 auto;
}
@media (min-width: 993px) {
	.offcanvas {
		display: flex !important;
		flex-direction: row !important;
		align-items: center;
		gap: 20px;
		visibility: visible !important;
		position: static !important;
		transform: none !important;
		background: transparent !important;
		box-shadow: none !important;
		width: auto !important;
	}
	/* bootstrap.min.css сам задаёт .navbar-expand-lg .offcanvas .offcanvas-body
	   и .offcanvas-lg .offcanvas-body с flex-grow:0 (специфичность 0-3-0) —
	   это перебивает одиночный класс, поэтому нужен #header-префикс. */
	#header .offcanvas-body {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		gap: 20px;
		padding: 0;
		overflow: visible;
	}
	/* Заголовок офканваса (лого + кнопка-крестик) — крестик нужен только
	   в выезжающей мобильной панели, на десктопе от него смысла нет. */
	/* Bootstrap сам прячет .offcanvas-header на breakpoint'е offcanvas-lg
	   (.offcanvas-lg .offcanvas-header{display:none} в его бандле) — это
	   специфичнее нашего правила, поэтому явно возвращаем display:flex. */
	.offcanvas-lg .offcanvas-header {
		display: flex !important;
		padding: 0;
		flex: 0 0 auto;
	}
	.offcanvas-header .btn-close {
		display: none;
	}
}
@media (max-width: 992px) {
	.offcanvas-body {
		display: flex;
		flex-direction: column;
	}
}

/* ---- Логотип и пункт "Каталог" — только в "раскрытом" состоянии меню:
   на десктопе это скролл (body.scrolled), на мобильном — открытая
   офканвас-панель (.offcanvas.show). В остальное время скрыты (лого
   дублирует то, что уже видно в сайдбаре/шапке страницы; Каталог не нужен,
   пока сайдбар с категориями и так на виду). ---- */
.header-logo {
	display: none;
	flex: 0 0 auto;
	width: 140px;
	height: 40px;
	background: url(../images/logo-horizontal.png) left center no-repeat;
	background-size: contain;
}
.header-nav-catalog-item {
	display: none;
}
@media (min-width: 993px) {
	body.scrolled .header-logo {
		display: block;
	}
	body.scrolled .header-nav-catalog-item {
		display: block;
	}
}
@media (max-width: 992px) {
	.offcanvas.show .header-logo,
	.offcanvas.showing .header-logo {
		display: block;
	}
	.offcanvas.show .header-nav-catalog-item,
	.offcanvas.showing .header-nav-catalog-item {
		display: block;
	}
}

/* ---- Мобильная строка шапки: лого слева, кнопки (аккаунт/корзина/
   гамбургер) справа. .header-logo внутри offcanvas-header виден только
   когда панель открыта — здесь отдельный лого, видимый в шапке всегда. ---- */
.header-logo-mobile {
	display: none;
	flex: 0 0 auto;
	width: 120px;
	height: 32px;
	background: url(../images/logo-horizontal.png) left center no-repeat;
	background-size: contain;
	margin-left: 16px;
	margin-right: auto;
}
@media (max-width: 992px) {
	.header-logo-mobile {
		display: block;
	}
}

/* ---- Единый стиль для всех пунктов меню: Каталог + 4 ссылки ---- */
.header-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0;
	padding: 0;
}
.header-nav .nav-item {
	list-style: none;
}
.header-nav .nav-link {
	display: block;
	color: var(--slate);
	font-size: 14px;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: 8px;
	white-space: nowrap;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.header-nav .nav-link:hover,
.header-nav .nav-link:focus,
.header-nav .nav-link.active {
	background: var(--cloud);
	color: var(--blue);
}
.header-nav .dropdown-toggle::after {
	margin-left: 6px;
	vertical-align: 2px;
}
.header-nav .dropdown-menu,
.header-account .dropdown-menu {
	border: none;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 8px;
	margin-top: 6px;
}
.header-nav .dropdown-item,
.header-account .dropdown-item {
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 14px;
	color: var(--navy);
}
.header-nav .dropdown-item:hover,
.header-nav .dropdown-item:focus,
.header-nav .dropdown-item.active,
.header-account .dropdown-item:hover,
.header-account .dropdown-item:focus {
	background: var(--mint-bg);
	color: var(--blue);
}

/* ---- Телефон + email в один ряд, "Позвонить Вам?" — под телефоном ---- */
.header-contacts {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin-left: auto;
	flex-wrap: wrap;
}
.header-phone-col {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.header-phone {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
}
.header-phone-col .callme {
	font-size: 12px;
	color: var(--blue);
	text-decoration: none;
}
.header-phone-col .callme:hover {
	text-decoration: underline;
}
.header-email {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: center;
	font-size: 14px;
	color: var(--slate);
	text-decoration: none;
	white-space: nowrap;
}
.header-email:hover {
	color: var(--blue);
}
.header-email .fa {
	font-size: 13px;
	color: var(--blue);
}

/* ---- Кабинет/авторизация — слева от корзины, единый стиль с корзиной ---- */
.header-account {
	flex: 0 0 auto;
	margin-left: 20px;
}
.header-account-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--cloud);
	color: var(--navy);
	font-size: 16px;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.header-account-toggle:hover {
	background: var(--blue);
	color: #fff;
}

/* ---- Корзина ---- */
#header .cart {
	flex: 0 0 auto;
	margin: 0 0 0 10px;
	width: 36px;
	height: 36px;
	background: var(--cloud);
	border-radius: 50%;
	position: relative;
	overflow: visible;
	transition: background .15s ease;
}
#header .cart:hover {
	background: var(--blue);
}
#header .cart .cart-summary {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--navy);
	font-size: 16px;
	text-decoration: none;
}
#header .cart:hover .cart-summary {
	color: #fff;
}
#header .cart span {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--orange);
	border-radius: 100%;
	color: #fff;
	text-align: center;
	width: 17px;
	height: 17px;
	line-height: 17px;
	font-size: 11px;
	pointer-events: none;
}

/* ---- Фикс. шапка при скролле (десктоп) ---- */
body.scrolled {
	padding: 57px 0 0 0;
}
body.scrolled #header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 111;
	background: #fff;
	border-bottom: 1px solid #e7edf3;
	box-shadow: 0 2px 12px rgba(8, 39, 71, .08);
}
@media (min-width: 993px) {
	body.scrolled {
		padding-top: 66px;
	}
}

/* ---- Мобильный гамбургер: панель выезжает слева (bootstrap offcanvas),
   а не разворачивает шапку вниз ---- */
@media (max-width: 992px) {
	.offcanvas {
		width: min(320px, 85vw);
		border-right: none;
		box-shadow: 0 0 30px rgba(8, 39, 71, .25);
	}
	.offcanvas-header {
		position: relative;
		justify-content: center;
		padding: 16px 20px;
		border-bottom: 1px solid #eef2f6;
	}
	.offcanvas-header .header-logo {
		display: block;
		margin: 0;
	}
	.offcanvas-header .btn-close {
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
	}
	.offcanvas-body {
		padding: 16px 20px;
	}
	.header-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.header-nav .nav-link {
		padding: 12px 4px;
		border-bottom: 1px solid #eef2f6;
	}
	.header-contacts {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin: 16px 0 0;
	}
	.header-phone-col {
		align-self: center;
		align-items: center;
		text-align: center;
	}
	.header-account {
		margin-left: auto;
	}

	/* Категории теперь доступны через выпадающий список "Каталог" в шапке —
	   на мобильном/планшетном сайдбар с дублирующим меню больше не нужен. */
	#lcol {
		display: none;
	}

	/* Раньше decorative body-фон (top-bg-min.png) маскировался непрозрачным
	   сайдбаром слева — теперь, когда сайдбара нет, он проступает в гуттере
	   .container на мобильном. Перекрываем сплошным белым.
	   Важно: именно прямой потомок (>), а не просто descendant-селектор —
	   иначе это же правило перебивает тёмный фон #footer .container
	   (тот вложен на уровень глубже, через #footer, и тоже является
	   потомком #middle). */
	#middle > .container {
		background: #fff;
	}
}



#middle {
	margin-top: 24px;
}
#lcol {
	float: right;
	/*width: 234px;*/
	width: 100%;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}
#lcol .logo {
	height: 200px;
	display: block;
	margin: 28px 24px 12px;
	background: url(../images/logo-min.png) center no-repeat;
	background-size: contain;
}
#lcol .spec {
	height: 83px;
}
#lcol .spec li {
	margin: 0 0 15px 25px;
	list-style: none;
}
#lcol .spec li a {
	font-size: 12px;
	color: var(--navy);
	padding: 0 0 0 30px;
}
#lcol .spec li.s1 a {
	background: url(../images/lperc.png) left center no-repeat;
}
#lcol .spec li.s2 a {
	background: url(../images/ldar.png) left center no-repeat;
}


#tcat {
	width: 100%;
	font-size: 13px;
	margin: 0;
}
#tcat .callme-sidebar {
	font-size: 15px;
	color: #ffffff;
	height: 42px;
	line-height: 42px;
	text-align: center;
	background: var(--orange);
	margin: 0 16px 12px;
	width: calc(100% - 32px);
	border-radius: var(--radius);
	display: block;
	font-weight: 700;
	transition: background .15s ease;
}
#tcat .callme-sidebar:hover {
	background: var(--orange-dark);
	color: #fff;
}
#tcat ul {
	padding: 4px 0 16px;
	box-shadow: none;
}
#tcat ul li {
	list-style: none;
}
#tcat ul li a {
	position: relative;
	color: var(--navy);
	background: none;
	padding: 11px 28px 11px 24px;
	display: block;
	width: 100%;
	line-height: 16px;
	font-weight: 600;
	box-sizing: border-box;
	transition: background .15s ease, color .15s ease;
}
#tcat ul li a::after {
	content: '\203A';
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--blue);
	opacity: .55;
	font-size: 17px;
	line-height: 1;
}
#tcat ul li a:hover,
#tcat ul li.active > a {
	background: var(--mint-bg);
	color: var(--blue);
	width: 100%;
	padding-right: 28px;
}
#tcat ul ul {
	box-shadow: none;
	padding: 0 0 5px;
}
#tcat ul li li a {
	color: var(--slate);
	background: transparent;
	padding: 6px 15px 6px 36px;
	font-weight: 400;
	font-size: 13px;
}
#tcat ul li li a::after {
	content: none;
}
#tcat ul li li a:hover {
	background: var(--cloud);
	color: var(--blue);
}
#tcat ul li li li a {
	color: var(--slate);
	background: transparent;
	padding: 6px 15px 6px 48px;
}
#tcat ul li.selected > a {
	background: var(--cloud);
	color: var(--blue);
	text-decoration: none;
	font-weight: 700;
	border-left: 3px solid var(--orange);
	padding-left: 21px;
}



.bann {
	text-align: center;
	color: #fff;
	width: 100%;
	padding: 30px;
	font-size: 12px;
	line-height: 16px;
	margin: 0 0 40px;
}
.bann a {
	text-decoration:none;
}
.bann h3 {
	font-size: 30px;
	margin: 0px 0px 20px 0px;
	font-weight: bold;
}
.bann strong {
	font-size: 13px;
	text-transform: uppercase;
}
.bann .btn {
	margin: 40px 0 0;
	width: 100%;
	padding: 0;
}




#rcol {
	/*float: left;*/
	margin: 0 0 0 6px;
	/*width: 760px;*/
	width: 100%;
}
/* Обёртка row/col-12 внутри #rcol (гл. страница) нужна только чтобы каждый
   блок (#visual/#searchbar/.content/#facts/.home-history) был полноценным
   flex-элементом и не "проваливался" из-за схлопывания float-контента
   внутри — без своих боковых отступов, т.к. #rcol и так уже без padding. */
#rcol > .row {
	margin-left: 0;
	margin-right: 0;
}
#rcol > .row > .col-12 {
	padding-left: 0;
	padding-right: 0;
}
#rcol .contents {
	padding: 0;
	float: left;
	width: 100%;
	background: none;
	color: #323232 !important;
}
#rcol .contents.prod {
	margin: 0 0 0 -6px;
	width: 766px;
}
#tops {
	float: left;
	width: 100%;
}
#tops .tmenu {
	float: left;
}
#tops .tmenu a {
	color: ;
	font-size: 15px;
	height: 32px;
	display: block;
	float: left;
	height: 32px;
	line-height: 32px;
	border-radius: 12px 12px 0 0;
	position: relative;
	width: 145px;
	text-align: center;
}
#tops .tmenu a.m1 {
	background: #fff;
	color: #333;
	z-index: 3;
	margin: 0 0 0 30px;
}
#tops .tmenu a.m2 {
	background: #9ADD85;
	color: #fff;
	padding: 0 0 0 20px;
	margin: 0 0 0 -20px;
	z-index: 2;
	width: 165px;
}
#tops .tmenu a.m3 {
	background: #ECAF87;
	color: #fff;
	padding: 0 0 0 20px;
	margin: 0 0 0 -20px;
	z-index: 1;
	width: 165px;
}
#tops .reg,
#tops .login {
	float: right;
	color: #333;
	font-size: 13px;
	line-height: 32px;
	margin: 0 25px 0 0;
}
#tops .login a {
	color: #333;
}
#tops .login .dropdown-menu a {
	color: #333;
}
#tops .tcart {
	float: right;
	width:32px;
	height: 32px;
	position: relative;
	background:#84DAF3 url(../images/mcart.png) center no-repeat;
	border-radius: 12px 12px 0 0;
}
#tops .tcart span {
	position: absolute;
	top:4px;
	right: 4px;
	background: #FF1210;
	border-radius: 100%;
	color: #fff;
	text-align: center;
	width: 11px;
	height: 11px;
	line-height: 11px;
	font-size: 8px;
}
#tops .tcart:hover {
	background: #FF1210 url(../images/mcarta.png) center no-repeat;
}
#tops .tcart:hover span {
	background-color: #008CD1;
}


#visual {
	width: 100%;
	height: 280px;
	background: #fff;
	padding: 8px 0px;
	float: left;
	width: 100%;
	position: relative;
	margin: 0 0 6px;
}
#visual .slide-bg {
	position: absolute;
	/*width: 744px;*/
	width: 100%;
	height: 264px;
	display: block;
	z-index: 1;
}
#visual .slide-item {
	float: right;
	width: 268px;
	height: 268px;
	background: url(../images/slide-item.png) center no-repeat;
	z-index: 2;
	position: relative;
	margin: 0 -5px 0 0;
	padding: 10px 54px 0 34px;
}
#visual .slide-item .image {
	display:table;
	width: 160px;
	height: 160px;
	margin:0 0 5px 20px;
}
#visual .slide-item .image a {
	display:table-cell;
	width: 160px;
	height: 160px;
	text-align:center;
	vertical-align:middle;
}
#visual .slide-item .image img {
	max-width: 160px;
	max-height: 160px;
}
#visual .slide-item .name {
	height:38px;
	overflow:hidden;
}
#visual .slide-item .name a {
	color: var(--navy);
	font-size: 14px;
}
#visual .slide-item .desc {
	font-size: 12px;
	color: #47b8e2;
	height: 35px;
	overflow: hidden;
}
#visual .slide-item .price {
	text-align: right;
	color: var(--navy);
	font-size: 12px;
	margin: 15px 0 0;
	position:relative;
}
#visual .slide-item .price strong {
	font-size: 18px;
}
#visual .slide-item .price .btn {
	float: left;
	line-height: 24px;
	height: 24px;
	padding: 0px 10px;
}
#visual .slide-item .price .old-price {
	position: absolute;
	top: -15px;
	white-space: nowrap;
	right: 0px;
	color: #ff2d2d;
	font-style: italic;
	text-decoration: line-through;
	font-weight: bold;
}

#searchbar {
	float: left;
	width: 100%;
	padding: 8px;
	background: #84DAF3;
	position: relative;
}
#searchbar .form-control {
	background: #fff;
	height: 32px;
}
#searchbar .bt,
.page-404-search .bt {
	width:32px;
	height: 32px;
	background: transparent url(../images/search.png) center no-repeat;
	border: 0;
	position: absolute;
	top:8px;
	right: 8px;
}
#searchbar.cat {
	background: #fff;
	margin: 0 0 6px;
	padding: 8px 8px 5px;
}
#searchbar.cat .form-control {
	border:8px solid #84DAF3;
	height: 48px;
}
#searchbar.cat .bt {
	top:16px;
	right: 16px;
}
#searchbar .only {
	color: #a7a7a7;
	font-size: 13px;
}
#searchbar .checkbox {
	margin: 6px 0 0;
}



.breadcr {
	float: left;
	width: 100%;
	line-height: 35px;
	font-size: 13px;
	color: var(--navy);
	margin: 0 0 35px;
}
.breadcr .home {
	float: left;
	width: 35px;
	height: 35px;
	background: #008CD1 url(../images/home.png) center no-repeat;
}
.breadcr .home:hover {
	background-color: #6ec7ea;
}
.breadcr .sep {
	float: left;
	width: 25px;
	background: url(../images/sep.png) center no-repeat;
	height: 35px;
	display: 	block;
}
.breadcr a.main {
	float: left;
	background: #84DAF3;
	color: #fff;
	padding: 0 45px;
}
.breadcr a.main:hover {
	background: #008CD1
}
.breadcr a {
	float: left;
}



#filter {
	float: left;
	font-size: 13px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	width: 100%;
	color: #a7a7a7;
}
#filter h3 {
	font-size: 18px;
	color: #fff;
	height: 48px;
	line-height: 48px;
	text-align: center;
	background: #84DAF3;
	margin: 0;
}
#filter .blocks  {
	padding: 30px 0 30px 30px;
}
#filter h4 {
	color: var(--navy);
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin: 0 0 15px;
	text-transform: uppercase;
}
#filter .block {
	margin: 0 0 25px;
}
#filter .checkbox label,
#filter .radio label {
	padding: 0;
}
#filter .all {
	color: #b0dd88;
	text-decoration: none;
	border-bottom: 1px dashed #b0dd88;
}
#filter .all:hover {
	border-color: #fff;
	color: var(--navy);
}
#filter .resets {
	width: 100%;
	background: #A8A8A8;
}
#filter .resets:hover {
	background: var(--navy);
}




.catalog {
	margin: 0 0 50px;
	float: left;
	width: 100%;
}
/* Каждая карточка теперь имеет фиксированную высоту содержимого (клампованное
   название, картинка с фиксированным аспектом, кнопка) — растягивать колонки
   по высоте самой высокой в ряду (дефолт Bootstrap align-items:stretch) больше
   не нужно и только добавляет пустое место внизу .wra. */
.catalog .row {
	align-items: flex-start;
}
.catalog h3 {
	font-size: 18px;
	color: #333;
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
	margin: 0 0 20px;
	text-transform: uppercase;
}
.catalog .items {
	/*width: 736px;*/
	width: 100%;
	float: left;
	/*margin: 0 0 0 -14px;*/
	margin: 0;
	list-style:none;
}
.catalog .item {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 10px auto;
	background: #fff;
	display: flex;
	flex-direction: column;
}
/* .wra раньше был position:absolute с отрицательными отступами и
   border:9px, из-за чего высота карточки не учитывала его реальный
   контент (пришлось фиксировать .item на глаз в 392px). Теперь .wra —
   обычный flex-столбец в потоке, растягивается на всю высоту .item
   (которая, в свою очередь, тянется на высоту строки за счёт
   бутстраповского .row/.col с align-items:stretch). */
.catalog .item .wra {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: #fff;
	border: 1px solid #eef2f6;
	border-radius: var(--radius);
}
.catalog .item .wra img{
}
.catalog .item .wra .image span{

}
.catalog .item .imge {
	position: relative;

	margin: 0 0 25px;
	display: block;
}
.catalog .item .imge .discount {
	position: absolute;
	top:-9px;
	right: 5px;
	width: 42px;
	height: 139px;
	background: url(../images/action-min.png) center no-repeat;
}
.catalog .item .imge {
	text-align:center;

	display:table;
	border-radius: var(--radius) var(--radius) 0 0;
	overflow: hidden;
}
.catalog .item .imge span {
	text-align:center;
	vertical-align:middle;

	display:table-cell;
}
.catalog .item .imge img {
}
.catalog .item .name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 13px;
	line-height: 17px;
	padding: 0 20px;
	height: 34px;
	overflow: hidden;
}
.catalog .item .name a {
	color: #333;
}
.catalog .item .desc {
	font-size: 12px;
	line-height: 15px;
	padding: 0 20px;
	color: #a7a7a7;
	margin: 25px 0 0;
	display: none;
	height: 60px;
	overflow: hidden;
}
.catalog .item .price {
	color: var(--navy);
	font-size: 12px;
	margin: 15px 0 0;
	padding: 0 0 0 20px;
}
.catalog .item .price strong {
	font-size: 18px;
}
.catalog .item .price span.old-price {
	color: #ff2d2d;
	font-size: 14px;
	text-decoration: line-through;
	padding: 0 15px 0 8px;
	font-style: italic;
	font-weight: bold;
	float: right;
	line-height: 24px;
}
.catalog .item .price span strong {
	font-size: 14px;
}
/* Раньше здесь был margin-top:auto (прибивал кнопку "В корзину" строго
   к низу карточки для выравнивания по ряду) — но в рядах с разной высотой
   карточек (из-за разной длины названия) это создавало слишком большой
   разрыв между ценой и кнопкой у более коротких карточек. Обычный отступ
   держит кнопку ближе к цене, жертвуя пиксель-идеальным выравниванием
   кнопок по низу ряда. */
.catalog .item .btm {
	margin-top: 20px;
	padding: 20px 20px 20px;
}
.catalog .item .btm .out-of-stock {
	padding: 0 0 16px 0px;
}
.catalog .item .btm .out-of-stock strong {
	font-size: 12px;
	line-height: 35px;
}
/* .purchase.addtocart — раньше .quant/.buy держались рядом только за
   счёт float:left/float:right без клирфикса, из-за чего сам блок
   схлопывался в 0px высоты и не учитывался в размере карточки. */
.catalog .item .purchase.addtocart {
	display: flex;
	align-items: start;
	flex-wrap: wrap;
	gap: 12px;
}
.catalog .item .quant {
	flex: 0 0 auto;
}
.catalog .item .quant .product-item-amount-field-container {
	display: flex;
	align-items: center;
}
/* Раньше +/− рисовались фоновыми PNG (item-minus.png/item-plus.png) на
   квадратных кнопках с border-radius:0 — самый "устаревший" элемент
   карточки. Заменено на скруглённые кнопки с CSS-символом вместо картинки. */
.catalog .item .quant .minus,
.catalog .item .quant .plus {
	position: relative;
	width: 32px;
	height: 32px;
	padding: 0;
	flex: 0 0 auto;
	background-color: #eef2f6;
	border-radius: 8px;
}
.catalog .item .quant .minus::before,
.catalog .item .quant .plus::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	background: var(--navy);
	transform: translate(-50%, -50%);
}
.catalog .item .quant .plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 12px;
	background: var(--navy);
	transform: translate(-50%, -50%);
}
.catalog .item .quant .minus:hover,
.catalog .item .quant .plus:hover {
	background-color: #dfe7ee;
}
.catalog .item .quant .form-control {
	width: 42px;
	background: #fff;
	flex: 0 0 auto;
	text-align: center;
	color: #002143;
	font-size: 18px;
}
.catalog .item .product-item-button-container {
	margin-left: auto;
	flex: 0 0 auto;
}
/* Кнопка "В корзину" раньше — фоновая иконка item-buy.png + border-radius:0
   (унаследован от базового .btn). Приведена к тому же скруглённому pill-виду,
   что и остальные CTA на сайте (checkout/PDP/блог). */
.catalog .item .buy {
	width: auto;
	min-width: 112px;
	height: 44px;
	line-height: 44px;
	font-size: 12px;
	font-weight: 600;
	background: var(--orange);
	border-radius: 999px;
	padding: 0 18px;
	box-shadow: 0 6px 14px -6px rgba(255, 106, 26, .55);
	transition: background .3s, transform .15s ease, box-shadow .15s ease;
}
.catalog .item .buy:hover {
	background-color: var(--orange-dark);
	transform: translateY(-1px);
	box-shadow: 0 10px 18px -6px rgba(255, 106, 26, .6);
}
.catalog .item:hover {
	z-index: 3;
}
.catalog .item:hover .desc {
	display: block;
}
.catalog .more {
	border-top:1px solid #EDEDED;
	text-align: center;
	float: left;
	width: 100%;
}
.catalog .more .btn {
	width:248px;
	margin: 0 0 0 -7px;
}
.catalog #cat-bann {
	float: left;
	width: 704px;
	height: 92px;
	margin: 0 0 30px -2px;
}
.catalog .sorts {
	float: left;
	width: 100%;
	margin: 0 0 20px;
	color: #a7a7a7;
	font-size: 13px;
}
.catalog .sorts .name {
	float: left;
	line-height: 35px;
	margin: 0 10px 0 0;
}
.catalog .sorts .asc {
	float: left;
	margin: 0 30px 0 0;
}
.catalog .sorts .asc select,
.catalog .sorts .asc .jqselect {
	width: 205px;
}
.catalog .sorts .shows select,
.catalog .sorts .shows .jqselect {
	width: 75px;
}
.catalog .pagi {
	float: left;
	width: 100%;
	text-align: center;
	margin: 20px 0 0;
}
.catalog .pagi ul li {
	list-style: none;
	display: inline-block;
}
.catalog .pagi a {
	display:inline-block;
	height: 35px;
	color: #a7a7a7;
	font-size: 18px;
	line-height: 35px;
	width: 35px;
	text-align: center;
	margin: 0 2px;
	background: #EDEDED;
}
.catalog .pagi .prev,
.catalog .pagi .next {
	font-size: 13px;
	width: auto;
	padding: 0 22px 0;
	line-height: 38px;
}
.catalog .pagi .selected a {
	background: #84DAF3;
	color: #fff;
}
.catalog .pagi a:hover {
	color: #fff;
	background: #00B9E3;
	text-decoration: none;
}



.others {
	float: left;
	width: 100%;
	margin: 0 0 50px 0;
}
.others .items {
	width: 100%;
	/*width: 1000px;*/
}
.others .items .item:nth-child(3n+3) {
	margin: 9px 9px 39px;
}
.others .more {
	width: 730px;
	margin: 0 125px;
}


#cat-icons  {
	margin: 0 0 30px;
	float: left;
	width: 100%;
}
#cat-icons h3 {
	font-size: 18px;
	color: var(--blue);
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
	margin: 0 0 20px;
	text-transform: uppercase;
}
#cat-icons .items {
	float: left;
	width: 100%;
	margin: 0 0 0 -10px;
}
#cat-icons .item {

	float: left;
	width: 180px;
	min-height: 180px;
	margin: 10px 10px 10px;

}
#cat-icons .item img {
	margin-bottom:5px;
}
#cat-icons .item p {
	/*	min-height: 44px;
        font-size: 12px;
        line-height: 14px;*/
	padding-top: 120px;
}
#cat-icons .item a {
	text-align: center;
	color: var(--navy);
	position: absolute;
	width: 180px;
}



#product {
	float: left;
	width: 100%;
	margin:0px;
}
#product .contents {
	background: none;
	float: left;
	width: 100%;
}
/* ==========================================================================
   Карточка товара (bitrix:catalog.element/bootstrap_v4) — у компонента
   уже есть готовая структура (слайдер, блок цены/кнопки, табы,
   свойства), просто перекрашенная в дефолтный Bitrix-синий/серый.
   Тут — переоформление под фирменную палитру сайта.
   ========================================================================== */
.bx-catalog-element {
	--theme-color-primary: var(--blue);
}
.bx-catalog-element h1 {
	font-size: 26px;
	color: var(--navy);
	font-family: var(--font-display);
	font-weight: 700;
	margin: 0 0 25px;
	text-transform: none;
}

/* ---- Слайдер / основное фото товара ---- */
.product-item-detail-slider-container {
	background-color: var(--cloud);
	border-radius: var(--radius);
	overflow: hidden;
}
.product-item-detail-slider-controls-image {
	border-radius: 8px;
	overflow: hidden;
}
.product-item-detail-slider-controls-image.active,
.product-item-scu-item-color-container.selected .product-item-scu-item-color-block {
	outline-width: 2px;
}

/* ---- Блок цены / покупки ---- */
.product-item-detail-pay-block {
	background: #fff;
	border: none;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 22px 22px 6px;
}
.product-item-detail-price-current {
	color: var(--navy);
	font-family: var(--font-display);
	font-size: 32px;
}
.product-item-detail-price-old {
	color: #ff2d2d;
}
.product-item-detail-economy-price {
	color: var(--mint);
	text-align: center;
	font-size: 12px;
}

/* ---- Счётчик количества ---- */
.product-item-amount-field-btn-plus,
.product-item-amount-field-btn-minus {
	min-width: 32px;
	height: 32px;
	border-radius: 8px;
	background-color: #eef2f6;
}
.product-item-amount-field-btn-plus:hover,
.product-item-amount-field-btn-minus:hover {
	background-color: #dfe7ee;
}
/* Уточняем селектор до input.product-item-amount-field (а не просто класс) —
   иначе проигрывает по специфичности общему сбросу input[type="text"]
   (height:35px, padding:5px, background:#EDEDED), см. ту же проблему у
   счётчика количества в корзине (.basket-item-amount-filed). */
input.product-item-amount-field {
	width: 60px;
	height: 32px;
	padding: 0;
	line-height: 32px;
	text-align: center;
	background: #fff;
	color: var(--navy);
}

/* ---- Кнопка "Купить" / "В корзину" ---- */
.btn.product-item-detail-buy-button {
	max-width: 100%;
	border-radius: 999px;
	background: var(--orange);
	border-color: var(--orange);
	text-transform: none;
	font-family: var(--font-display);
	font-weight: 700;
}
.btn.product-item-detail-buy-button:hover {
	background: var(--orange-dark);
	border-color: var(--orange-dark);
}
.product-item-detail-unavailable .btn.product-item-detail-buy-button {
	background: #eef2f6;
	border-color: #eef2f6;
	color: var(--slate);
}

/* ---- Арт./Страна под блоком цены ---- */
.product-item-detail-meta {
	margin: 14px 0 0;
	padding: 0 4px;
	color: var(--slate);
	font-size: 13px;
	line-height: 1.7;
}

/* ---- Табы (Описание / Свойства / Комментарии) ---- белая карточка,
   собранная из двух соседних блоков (полоса табов + панель содержимого)
   так, чтобы визуально выглядело одним сплошным блоком. ---- */
.product-item-detail-tabs-container {
	border-bottom-color: #eef2f6;
	background: #fff;
	padding: 24px 24px 0;
	border-radius: var(--radius) var(--radius) 0 0;
}
.product-item-detail-tab-link {
	color: var(--slate);
	text-transform: none;
	font-family: var(--font-display);
	font-size: 14px;
}
.product-item-detail-tab-link:hover,
.product-item-detail-tab.active .product-item-detail-tab-link {
	color: var(--navy);
}
.product-item-detail-tab-link:after {
	background: var(--orange);
}
.product-item-detail-tab-content {
	color: var(--slate);
	line-height: 1.7;
	background: #fff;
	padding: 24px;
	border-radius: 0 0 var(--radius) var(--radius);
}
.product-item-detail-tab-content p {
	margin: 0 0 14px;
}
.product-item-detail-tab-content iframe,
.product-item-detail-tab-content img {
	max-width: 100%;
	border-radius: 8px;
}
.product-item-detail-tab-content ul,
.product-item-detail-tab-content ol {
	margin: 0 0 14px;
	padding-left: 4px;
	list-style: none;
}
.product-item-detail-tab-content ul li,
.product-item-detail-tab-content ol li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 8px;
}
.product-item-detail-tab-content ul li:before {
	content: "";
	position: absolute;
	left: 2px;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--orange);
}
.product-item-detail-tab-content ol {
	counter-reset: pidlist;
}
.product-item-detail-tab-content ol li:before {
	counter-increment: pidlist;
	content: counter(pidlist) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--orange-dark);
}

/* ---- Список свойств (вкладка "Свойства") ---- */
.product-item-detail-properties-name {
	color: var(--slate);
}
.product-item-detail-properties-value {
	color: var(--navy);
	font-weight: 600;
}
.product-item-detail-properties-dots {
	border-bottom-color: #dfe7ee;
}
@media (max-width: 767px) {
	.product-item-detail-pay-block {
		margin-top: 20px;
	}
}
#product .pleft {
	float: left;
	width: 265px;
	margin:0 0 20px 0;
}
#product h3 {
	font-size: 18px;
	color: var(--navy);
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
	margin: 0 0 20px;
	text-transform: uppercase;
}
#product .imgs {
	float: left;
	width:100%;
	position: relative;
	margin: 0 0 30px;
}
#product .imgs .big {
	width: 265px;
	height: 265px;
	display: table;
	position:relative;
}
#product .imgs .big .discount {
	position: absolute;
	top:-9px;
	right: 5px;
	width: 42px;
	height: 139px;
	background: url(../images/action.png) center no-repeat;
}
#product .imgs .big a {
	display:table-cell;
	text-align: center;
	vertical-align:middle;
}
#product .imgs .big img {
	max-width: 100%;
}
#product .imgs .smalls {
	display:table;
	width:100%;
}
#product .imgs .smalls .image {
	display:table-cell;
	padding: 6px 6px 0 0;
	float: left;
	width: 82px;
	text-align: center;
	vertical-align:middle;
	position: relative;
}
#product .imgs .smalls .video a{
	display: block;
	position: relative;
}
#product .imgs .smalls .video a:after{
	width: 82px;
	height: 82px;
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url("../img/tub.png");
}
#product .imgs .smalls img {
	max-width: 82px;
}
#product .cust {
	margin: 0 0 30px;
	float: left;
	width: 100%;
	font-size: 13px;
}
#product .cust strong {
	font-size: 60px;
	line-height: 55px;
	color: var(--blue);
	float: left;
}
#product .cust .ctars {
	float: right;
}
#product .cust .ctars p {
	margin: 0 0 8px;
}
#product .revs {
	float: left;
	width: 100%;
}
#product .rev {
	background: #F5F5F5;
	padding: 25px 25px 25px 35px;
	color: #a7a7a7;
	font-size: 13px;
	margin: 0 0 25px;
}
#product .rev .name {
	font-size: 18px;
	margin: 0 0 8px;
	display: inline-block;
}
#product .rev .name a {
	color: var(--blue);
}

#product .pright {
	width: 265px;
	margin: 0 0 20px 170px;
	float: left;
	font-size: 13px;
}
#product .top {
	float: left;
	width: 100%;
	margin: 0 0 15px;
}
#product .infos {
	float: left;
	width: 100%;
}
#product .art-links {
	font-size: 13px;
	margin: 0 0 15px;
	float: left;
	width: 100%;
}
#product .infos .art {
	color: #a7a7a7;
	margin:0 0 10px 0;
}
#product .art-links a {
	float: left;
	margin: 0 45px 0 0;
}
#product .stars {
	float: left;
	width: 100%;
	margin: 0 0 20px;
}
#product .prop {
	float: left;
	width: 100%;
	color: var(--navy);
	margin: 0 0 15px;
}
#product .prop p {
	line-height: 15px;
	margin: 0 60px 10px 0;
	float: left;
}
#product .char {
	float: left;
	width: 100%;
}
#product .char p {
	background: url(../images/line.png) 0 12px repeat-x;
	position: relative;
	float: left;
	width: 100%;
	margin: 0 0 5px;
}
#product .char span {
	color: #333;
	background: #fff;
	padding: 0 5px 0 0;
}
#product .char a {
	background: #fff;
	position: absolute;
	right:0;
	top:0;
	padding: 0 0 0 5px;
	cursor:default;
	text-decoration:none;
}
#product .buyit {
	float: right;
	width: 100%;
	padding: 40px;
	margin: 0 0 25px;
	border: 8px solid #EDEDED;
	position: relative;
}
#product .buyit .price {
	color: var(--navy);
	font-size: 16px;
	width: 198px;
	line-height: 20px;
	display: block;
}
#product .buyit .price strong {
	font-size: 24px;
}
#product .buyit .old-price {
	color: #ff2d2d;
	text-decoration: line-through;
	font-style: italic;
	position: absolute;
	top:20px;
	left:40px;
	font-size: 14px;
	font-weight:bold;
}
#product .buyit .quant {
	width: 100%;
	margin: 15px 0 0;
	display: block;
}
#product .buyit .quant .minus,
#product .buyit .quant .plus {
	width: 35px;
	padding: 0;
	float: left;
	background:#84DAF3 url(../images/item-minus.png) center no-repeat;
}
#product .buyit .quant .plus {
	background:#9ADD85 url(../images/item-plus.png) center no-repeat;
}
#product .buyit .quant .minus:hover {
	background-color:#74CAE3;
}
#product .buyit .quant .plus:hover {
	background-color:#8ACD75;
}
#product .buyit .quant .form-control {
	width: 98px;
	background: #EDEDED;
	float: left;
	text-align: center;
	color: #002143;
	font-size: 18px;
}
#product .buyit .offers .hint{
	display:none;
}
#product .buyit .stocks {
	position: absolute;
	bottom: 15px;
}
#product .buyit .stocks .stock-high,
#product .buyit .stocks .stock-low,
#product .buyit .stocks .stock-critical {
	color:#8ACD75;
}
#product .buyit .stocks .stock-none {
	color:#ff0000;
}
#product .buyit .stocks .stock-none i {
	display:none;
}
#product .buyit .buy {
	width: 168px;
	float: right;
	font-size: 12px;
	background: var(--orange);
	margin: 18px 0 0;
}
#product .buyit .buy img {
	margin: -3px 0 0;
}
#product .buyit .buy:hover {
	background-color: var(--orange-dark);
}

#product .tabs {
	float:left;
	width:100%;
	list-style:none;
	margin:0px 0px 20px 0px;
}
#product .tabs li {
	display:inline-block;
	margin:0px 40px 0px 0px;
}
#product .tabs li a {
	font-size: 18px;
	color: #777;
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration:underline;
}
#product .tabs li a:hover {
	text-decoration:none;
}
#product .tabs li.active a {
	color: var(--navy);
	text-decoration:none;
}
#product .tabs-contents {
	float:left;
	width:100%;
}
#product .tab-contents {
	display:none;
}
#product .tab-contents.active {
	display:block;
}

#product-description {
	color: #333;
	margin: 0 0 25px;
	position:relative;
}
#product-description .desc p {
	margin: 0 0 15px;
}

.rela {
	float: left;
	width: 100%;
}
.rela h3 {
	color: #333;
	font-size: 18px;
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
	margin: 0 0 20px;
	text-transform: uppercase;
}
.rela .items {
	float: left;
	list-style:none;
}
.rela .item {
	float: left;
	width: calc(25% - 15px);
	margin: 0 20px 0 0;
	height: 100px;
	margin: 0 0 23px;
}
.rela .item:nth-child(4n) {
	margin-right:0px;
}
.rela .item .img {
	float: left;
	width: 90px;
	margin: 0 20px 0 0;
	text-align:center;
}
.rela .item .img {
	max-width: 100%;
	max-height: 100px;
}
.rela .item .name {
	line-height: 12px;
	margin: 8px 0 0;
	height: 50px;
	overflow: hidden;
	font-size: 12px;
}
.rela .item .price {
	color: var(--navy);
	font-size: 12px;
	margin: 10px 0 0;
}
.rela .item .price strong {
	font-size: 18px;
}











#mcat {
	float: left;
	width: 100%;
	margin: 0 0 40px;
}
#mcat .wra {
	/*width: 1164px;*/
	border: 6px solid #EDEDED;
	/*margin: 0 0 0 -82px;*/
	border-radius:45px;
	padding: 0 0 25px;
}
@media (max-width:1200px) {
	#mcat .wra {
		width: 100%;
		border: 0px solid #EDEDED;
		margin: 0;
		border-radius:45px;
		padding: 0 0 25px;
	}
}
#mcat h3 {
	font-size: 18px;
	color: var(--navy);
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
	margin: 60px 0 30px;
	text-transform: uppercase;
}
#mcat .items {
}
#mcat .item {
	/* width: 480px; */
	/* width: 50%; */
	/* float: left; */
	/* margin: 0 20px 35px 0; */
	/* overflow: hidden; */
}
#mcat .item:nth-child(2n+1) {
	clear:left;
}
#mcat .item .name {
	margin: 0 0 25px;
}
#mcat .item .name a {
	color: #333;
	font-size: 18px;
}
#mcat .item ul {
	margin: 0px;
	float: left;
	/*width: 480px;*/
	width: 100%;
}
#mcat .item ul li {
	float: left;
	font-size: 12px;
	line-height: 14px;
	color: #ccc;
	list-style: none;
	padding: 0 13px 0 7px;
	margin: 0 0 5px;
	background: url(../images/bull.png) 0 6px no-repeat;
}
#mcat .item ul li a {
	color: #333;
}
#mcat .item .more {
	border-top:1px solid #EDEDED;
	text-align: center;
	float: left;
	width: 460px;
	margin: 0 0 0 -70px;
}
#mcat .item .more .btn {
	width:248px;
}





#facts {
	float: left;
	width: 100%;
	margin: 0 0 40px;
}
#facts h3 {
	font-size: 18px;
	color: var(--blue);
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
	margin: 0 0 30px;
	text-transform: uppercase;
}
#facts .item .txt h4 {
	font-size: 14px;
	line-height: 16px;
	margin: 0 0 17px;
}
#facts .item .txt p {
	font-size: 12px;
	line-height: 15px;
	margin: 0 0 17px;
	color: #a7a7a7;
}
#facts .item .txt .btn {
	padding: 0;
	width: 140px;
	font-size: 12px;
}
#facts .more {
	margin: 30px 0 0;
	float: left;
	width: 100%;
}
#facts .more .btn {
	width: 100%;
}





#onmap {
	float:left;
	width: 100%;
	height: 540px;
}
#onmap .map {
	position: relative;
	width: 100%;
	height: 540px;
}
#onmap .yd {
	width: 100%;
	height: 540px;
	overflow: hidden;
	position: absolute;
	top:0;
	left:0;
}
#onmap .yd .fake {

}
#onmap .bubble {
	width: 398px;
	height: 364px;
	background: url(../images/foot-bg.png) top left no-repeat;
	display: block;
	margin: 100px 0 0;
	color: #fff;
	padding: 25px 61px 0 20px;
}
#onmap .bubble .logo {
	float: left;
	width: 100%;
	text-align: center;
	padding:0 0 35px;
	border-bottom: 1px solid #fff;
	margin: 0 0 40px;
}
#onmap .bubble .addr {
	padding: 0 10px 0 25px;
	margin: 0 0 30px 15px;
	font-size: 13px;
	background: url(../images/foot-addr.png) left center no-repeat;
	float: left;
}
#onmap .bubble .phone {
	padding: 0 10px 0 25px;
	margin: 0 0 30px 15px;
	font-size: 13px;
	background: url(../images/foot-phon.png) left center no-repeat;
	float: left;
	position: relative;
}
#onmap .bubble .phone strong {
	font-size: 18px;
	color: var(--navy);
}
#onmap .bubble .callme {
	color: #fff;
	font-size: 13px;
}
#onmap .bubble .phone span {
	position: absolute;
	font-size: 10px;
	color: #caecfb;
	left: 192px;
	top: 0px;
	width: 70px;
}
#onmap .bubble .mail {
	padding: 0 10px 0 25px;
	margin: 0 0 30px 15px;
	font-size: 13px;
	background: url(../images/foot-mail-min.png) left center no-repeat;
	float: left;
}



#footer {
	background: var(--navy);
	padding: 56px 0 0;
	color: rgba(255,255,255,.62);
}
.footer-top {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-col {
	flex: 1 1 200px;
}
.footer-brand {
	flex: 1 1 260px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.footer-logo {
	display: block;
	width: 160px;
	height: 34px;
	background: url(../images/foot-logo.png) left center no-repeat;
	background-size: contain;
}
.footer-contacts {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.footer-email,
.footer-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 15px;
	text-decoration: none;
	width: fit-content;
	transition: color .15s ease;
}
.footer-phone {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17px;
}
.footer-email .fa,
.footer-phone .fa {
	color: var(--blue);
	font-size: 14px;
	width: 16px;
	text-align: center;
}
.footer-email:hover,
.footer-phone:hover {
	color: var(--blue);
}
.footer-col h3 {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255,255,255,.4);
	margin: 0 0 18px;
}
.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.footer-col ul a {
	color: rgba(255,255,255,.75);
	font-size: 14px;
	text-decoration: none;
	transition: color .15s ease;
}
.footer-col ul a:hover {
	color: var(--blue);
}
.social {
	display: flex;
	gap: 10px;
}
.socialt {
	justify-content: center;
}
.social a {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(255,255,255,.08);
	transition: background-color .15s ease;
}
.social a:hover {
	background-color: var(--blue);
}
.social .vk, .socialt .vk {
	background-image: url(../images/vk.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px;
}
.social .fb, .socialt .fb {
	background-image: url(../images/face.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px;
}
.footer-bottom {
	padding: 20px 0;
}
.footer-copy {
	font-size: 13px;
	color: rgba(255,255,255,.4);
}






























.nav-tabs {
	border-bottom: 0px solid #f05024;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
	color: #412c15;
	cursor: default;
	background-color: #FEF5E4;
	border: 0;
	padding: 10px 25px;
	margin: 0;
	z-index: 5;
	border-right: 1px solid #fff;
	text-decoration: none;
}
.nav-tabs>li>a:hover {
	background: #F1E0C2;
}
.nav>li>a:focus, .nav>li>a:hover {
	text-decoration:  underline;

}
.nav-tabs>li>a {
	margin-right: 2px;
	line-height: 1.42857143;
	border-radius: 0;
}
.nav>li>a {
	position: relative;
	display: block;
	padding: 10px 25px 10px 45px;
	background: #F1E0C2;
	color: #A99376;
	font-size: 14px;
	text-decoration: none;
	border-radius: 15px 15px 0 0;
	border: 0;
	margin: 0 0 0 -20px;
	border-right: 1px solid #fff;
}
.nav>li.tab1>a {
	z-index: 4;
	margin: 0;
	padding: 10px 25px;
}
.nav>li.tab2>a {
	z-index: 3;
}
.nav>li.tab3>a {
	z-index: 2;
}
.nav>li.tab4>a {
	z-index: 1;
}
.tab-content {
	background: #FEF5E4;
	padding:10px 25px;
}


.modal-dialog {
	z-index: 1050;
}
.modal-dialog {
	width: 520px;
	margin: 0 auto;
	margin-top:100px;
}
.modal-content {
	border-radius: 0;
	position: relative;
	background: transparent;
	box-shadow: none;
	background: #fff;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.15);
	border-bottom:5px solid #00A9D3;
	color:#412c15;
}
.modal-header {
	padding: 15px;
	border-top: 1px solid #e5e5e5;
}
.modal-header h4 {
	font-size: 18px;
	color: var(--blue);
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
	margin: 0;
	text-transform: uppercase;
}
.modal-header h3 {
	font-family: "Lobster", Tahoma, Arial, Helvetica, sans-serif;
	font-size: 30px;
	background: #fff;
	height: 68px;
	line-height: 66px;
	margin: 0 ;
}
.modal-body {
	padding: 15px;
	border-radius: 0;
}
.modal-body h3 {
	font-family: "Lobster", Tahoma, Arial, Helvetica, sans-serif;
	font-size: 30px;
	margin: 0 0 20px;
}
.modal-body .btn {
	margin: 10px 0 15px;
}
.modal-body p {
	font-size: 18px;
	margin: 0 0 22px;
}
.modal-body p.small {
	font-size: 12px;
	margin: 0;
}
.modal-body .form-group {
	margin-bottom: 22px;
}
.modal-body .form-group input[type="text"] {
	background:#fff;
	border: 1px solid #E0E0D6;
}
.modal-sm {
	width: 420px;
	text-align: center;
}
.modal-sm .modal-content {
	border-bottom:5px solid #46280B;
}
.modal-sm .modal-header {
	padding: 0;
	border: 0;
}
.modal-lg {
	width: 940px;
}
.modal-dialog .close {
	width: 34px;
	background:#fff url(../images/pop-close.png) top right no-repeat;
	height: 31px;
	position: absolute;
	top:5px;
	right: -33px;
	opacity: 1;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
	z-index: -1;
	outline: none;
}
.modal-dialog .close:hover {
	background-color: #E1DAD1;
}
.modal-backdrop.in {
	background: #412c15;
	opacity: 0.35;
}

.jq-selectbox {
	vertical-align: middle;
	cursor: pointer;
	width:100%;
}
.jq-selectbox__select {
	height: 35px;
	font-size: 13px;
	font-family: 'Open Sans', Tahoma, Arial, Helvetica, sans-serif;
	border: 0px solid  #E0E0D6;
	box-shadow:none;
	color: #a7a7a7;
	text-align: left;
	padding: 8px 35px 0px 10px;
	background: #EDEDED;
	margin: 0;
	box-shadow:none;
	border-radius: 0px;
	width:100%;
}
.jq-selectbox.opened .jq-selectbox__select {
	border:0px solid #D5BB91;
	border-bottom: 0;
	border-radius: 0;
}
.jq-selectbox__select:hover {
}
.jq-selectbox__select:active {
}
.jq-selectbox.focused .jq-selectbox__select {
}
.jq-selectbox.disabled .jq-selectbox__select {
}
.jq-selectbox__select-text {
	display: block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.jq-selectbox .placeholder {
	color: #888;
}
.jq-selectbox__trigger {
	position: absolute;
	top: 0;
	right: 0;
	width: 35px;
	height: 100%;
}
.jq-selectbox__trigger-arrow {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 35px;
	height: 35px;
	overflow: hidden;
	background:#84DAF3 url(../images/select.png) 0 0 no-repeat;
}
.jq-selectbox:hover .jq-selectbox__trigger-arrow {
	opacity: 1;
	filter: alpha(opacity=100);
}
.jq-selectbox.opened .jq-selectbox__trigger-arrow {
	background:#84DAF3 url(../images/select.png) 0 -35px no-repeat;
}
.jq-selectbox.disabled .jq-selectbox__trigger-arrow {
	opacity: 0.3;
	filter: alpha(opacity=30);
}
.jq-selectbox__dropdown {
	top: 100%;
	width: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border:0px solid #D5BB91;
	font-family: 'Open Sans', Tahoma, Arial, Helvetica, sans-serif;
	text-align: left;
	border-radius: 0;
	border-top:0;
	font-size: 13px;
	box-shadow:none;
	color: #a7a7a7;
	text-align: left;
	padding: 10px 10px 0px 10px;
	background: #EDEDED;
}

.jq-selectbox ul {
	margin: 0;
	padding: 0;
}
.jq-selectbox li {
	padding: 5px 0px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-o-user-select: none;
	white-space: nowrap;
}
.jq-selectbox li.selected {
	background-color: #eee;
	color:var(--blue);
}
.jq-selectbox li:hover {
	color: #000;
}
.jq-selectbox li.disabled {
	display: none;
}



.jq-checkbox {
	top: -1px;
	vertical-align: middle;
	width: 11px;
	height: 11px;
	margin: 0 4px 0 0;
	background: url(../images/checkbox.png) 0 0 no-repeat;
	cursor: pointer;
}
.jq-checkbox.checked {
	background: url(../images/checkbox.png) 0 -11px no-repeat;
}
.jq-checkbox.focused {
}




input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
textarea,
textarea.form-control,
select,
input.form-control {
	padding: 5px;
	height: 35px;
	font-size: 14px;
	background: #EDEDED;
	font-family: 'Open Sans', Tahoma, Arial, Helvetica, sans-serif;
	border: 0px solid  #E0E0D6;
	box-shadow: none!important;
	border-radius: 0px;
	width: 100%;
	color: #002245;
}
.form-control.white {
	background-color: #fff !important;
}
input[type="search"] {
	-webkit-appearance: none;
}
select {
}
textarea.form-control {
	overflow: auto;
	min-height: 100px;
	width:100%;
	line-height: 22px;
	resize: vertical;
	padding:12px 20px;
}

input[type="email"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover,
input[type="url"]:hover,
textarea:hover {

}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
.form-control:focus,
textarea:focus {
	outline: none;
	border-color: transparent;
}
input.input-sm {
	height: 32px;
	padding: 10px;
	font-size: 16px;
	border-radius: 3px;
}
.btn {
	overflow: visible;
	outline: none !important;
	border:0px !important;
	padding: 0 30px;
	color: #fff;
	height: 35px;
	line-height: 35px;
	text-align: center;
	cursor: pointer;
	font-size: 13px;
	text-decoration: none;
	margin: 0;
	-webkit-appearance: none;
	border-radius: 0px;
	box-shadow: none;
	text-shadow: none !important;
	font-family: 'Open Sans', Tahoma, Arial, Helvetica, sans-serif;
	background: var(--orange);
	display: inline;
	transition: background .3s;
}
.btn,
.btn:focus,
.btn.focus {
	background-color: var(--orange);
	color: #fff;
}
.btn:hover {
	background-color: var(--orange-dark);
	color: #fff;
}
.btn:active,
.btn.active,
.btn:active:hover,
.btn.active:hover,
.btn:active:focus,
.btn.active:focus,
.btn:active.focus,
.btn.active.focus {
	background-color: #00A9D3;
	color: #fff;
}
.btn:active {
}
.btn:active,
.btn.active {
	box-shadow: none;
}
a.btn,span.btn {
	display: inline-block;
}
.btn-success,
.btn-success:focus,
.btn-success.focus {
	background-color: #9ADD85;
	color: #fff;
}
.btn-success:hover {
	background-color: #8ACD75;
	color: #fff;
}
.btn-success:active,
.btn-success.active,
.btn-success:active:hover,
.btn-success.active:hover,
.btn-success:active:focus,
.btn-success.active:focus,
.btn-success:active.focus,
.btn-success.active.focus {
	background-color: #AAED95;
	color: #fff;
}
.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
	background-color: #0BA3D1;
	color: #fff;
}
.btn-primary:hover {
	background-color: #1Bb3e1;
	color: #fff;
}
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.btn-primary:active.focus,
.btn-primary.active.focus {
	background-color: #0B83b1;
	color: #fff;
}
.btn-info,
.btn-info:focus,
.btn-info.focus {
	background-color: #fff;
	color: var(--navy);
}
.btn-info:hover {
	background-color: #f1f1f1;
	color: var(--navy);
}
.btn-info:active,
.btn-info.active,
.btn-info:active:hover,
.btn-info.active:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.btn-info:active.focus,
.btn-info.active.focus {
	background-color: #e5e5e5;
	color: var(--navy);
}
.btn-danger,
.btn-danger:focus,
.btn-danger.focus {
	background-color: #30D883;
	color:#fff;
}
.btn-danger:hover {
	background-color: #0ac064;
	color: #fff;
}
.btn-danger:active,
.btn-danger.active,
.btn-danger:active:hover,
.btn-danger.active:hover,
.btn-danger:active:focus,
.btn-danger.active:focus,
.btn-danger:active.focus,
.btn-danger.active.focus {
	background-color: #0ac064;
	color: #fff;
}
.btn-lg {
	padding: 0 25px;
	font-size: 20px;
}
.btn-sm {
	height: 35px;
	line-height: 30px;
	padding: 0 25px;
	min-width: 110px;
	font-size: 12px;
}
.has-error .form-control {
	border-color: #F5494D!important;
	box-shadow: none!important;
}


.btn-link {
	background: transparent !important;
	color: #0094c9!important;
	text-decoration: underline;
	min-width: inherit;
	padding: 0;
}
.btn-link:hover {
	text-decoration: none;
}


/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
[dir="rtl"] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: inline-block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

/* Arrows */
.slick-prev, .slick-next {
	z-index: 2;border-radius:0!important; position: absolute; display: block; height: 92px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent;padding: 0; border: none; outline: none; min-width:inherit; box-shadow: none;}


.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 0.4; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }

.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.slick-prev {
	left: -20px;
	top: 0px;
	background:#84DAF3 url(../images/prev.png) center no-repeat;
	box-shadow:none!important;
}
.slick-next {
	right: -20px;
	top: 0px;
	background:#84DAF3 url(../images/next.png) center no-repeat;
	box-shadow:none!important;
}
.slick-prev:focus,.slick-next:focus {
	outline: none;
	color: transparent;
}
.slick-prev.slick-disabled {
	opacity: 0.4 !important;
	cursor:default;
}
.slick-next.slick-disabled {
	opacity: 0.4 !important;
	cursor:default;
}
.slick-disabled:hover {
}
.slick-prev:hover,
.slick-next:hover {
	background-color: var(--blue);
}

.slick-dots { position: absolute; bottom: -55px; list-style: none; display: block; text-align: center; padding: 0; width: 100%; }
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { text-indent: -9999px; border: 0; margin:5px; background: #FACABD; display: block; height: 6px; width: 6px; outline: none; line-height: 0; font-size: 0; color: transparent;  cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before { color: black; opacity: 0.75; }
.slick-dots li.slick-active button {
	background: #F05024;
	width: 16px;
	height: 16px;
	margin: 0;
}

.nowrap {
	white-space: nowrap;
}
.align-center {
	text-align: center;
}
.to-cart-item .btm {
	display:none;
}
.cat-description {
	position:relative;
	clear:left;
}
.cat-description p {
	margin-bottom:10px;
}
#page {
	padding-right:30px;
}
.checkout h1,
#cartpage h1,
#page h1 {
	font-size: 18px;
	color: var(--blue);
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
	margin: 0 0 25px;
	text-transform: uppercase;
}

#cartpage {
	padding: 0 30px 0 0;
}
#cartpage .row { clear: both; border-top: 1px solid #eee; padding: 20px 0; min-height: 23px; margin:0;}
#cartpage .row.no-border { border: none; }
#cartpage .col { float: left; }
#cartpage .col.w1 { width: 6%; }
#cartpage .col.w2 { width: 12%; }
#cartpage .col.w3 { width: 18%; }
#cartpage .col.w4 { width: 24%; }
#cartpage .col.w5 { width: 30%; }
#cartpage .col.w6 { width: 36%; }
#cartpage .col.w7 { width: 42%; }
#cartpage .col.w8 { width: 48%; }
#cartpage .col.w9 { width: 54%; }
#cartpage .col.w10 { width: 60%; }
#cartpage .col.w11 { width: 66%; }
#cartpage .col.w12 { width: 72%; }
#cartpage .col.w13 { width: 78%; }
#cartpage .col.w14 { width: 84%; }
#cartpage .col.w15 { width: 90%; }
#cartpage .col.w16 { width: 96%; }

#cartpage .col.item-thumb { min-width: 55px; }
#cartpage .col.item-thumb img { margin-top: 0; max-width: 48px; max-height: 48px; }
#cartpage .col.item-remove { float: right; text-align:right;}
#cartpage .col.total { font-size: 1.8em; font-weight: bold; }
#cartpage .col.services { margin-top: 5px; }
#cartpage .col.cart-coupon { min-height: 1px; }
#cartpage .col.cart-coupon .errormsg { display: inline-block; margin: 0; }
#cartpage .related { padding: 15px; background: #eee; border-top: 0; margin-bottom: 10px; margin-top: 0; }
#cartpage .related h4 { font-weight: normal; color: #777; }
#cartpage input.qty { max-width: 50px; text-align: right; }
#cartpage .affiliate { text-align: center; padding: 20px; border-top: 1px solid rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.1); }
#cartpage .featured-shipping-and-payment img { margin-right: 5px; }

#cartpage .col.item-remove a {
	text-decoration:none;
}
#cartpage .col.item-remove i:before {
	content:'×';
	font-size: 21px;
	font-weight: 700;
	line-height: 19px;
	font-style:normal;
	color: #000;
	text-shadow: 0 1px 0 #fff;
}
.cart-total-row label {
	font-size: 20px;
	font-weight: bold;
	line-height: 34px;
	margin:0;
}

.cart-checkout { margin-top: -10px; }

.your-cart-is-empty { padding: 50px; text-align: center; }

#cartpage #use-coupon { margin-left: 5px; white-space: nowrap; }
#cartpage .row.highlighted #apply-coupon-code { margin-left: 20px; }


.checkout { margin: 20px 0 0; }
.checkout select { max-width: 260px; }
.checkout-header { margin: 0; color: #999; background: #fff; padding: 20px; }
.checkout-header h3 { margin-bottom: 0; }
.checkout-header h3 a { text-decoration: none; color: #777; font-weight: normal; }
.checkout-header h3 a:hover { color: #a00 !important; }
.checkout-header strong { color: #666; }
.checkout ul.checkout-options { padding-left: 25px; }
.checkout ul.checkout-options li { list-style: none; position: relative; margin-bottom: 20px; clear: both; }
.checkout ul.checkout-options li h3 { font-weight: bold; margin: 0px; max-width:70%; }
.checkout ul.checkout-options li h3 label { margin-right: 10px; }
.checkout ul.checkout-options li .rate { float: right; text-align: right; width: 200px; }
.checkout ul.checkout-options li p { width: 70%; font-size: 0.85em; }
.checkout ul.checkout-options li input[type="radio"] { position: absolute; top: 4px; left: -25px; }
.checkout ul.checkout-options li label input[type="radio"] { top: 0px; }
.checkout ul.checkout-options li img.method-logo { position: relative; float: left; margin-right: 10px; top: -6px; left: 0px; /* adjusted for default 60x32-px logos */ }
.checkout ul.checkout-options li .wa-form { margin-top: 0px; margin-bottom: 30px; }
.checkout ul.checkout-options li .wa-form label input[type="radio"] { position: static; }
.checkout ul.checkout-options.payment li .wa-form { display:none!important; }
.checkout ul.checkout-options.payment li b { font-size: 14px; }
.checkout ul.checkout-options.shipping li .wa-form { display:none!important; }

.checkout .checkout-result { padding: 60px 0 20px; background: #fff; text-align: center; }
.checkout .checkout-result h1 { font-size: 18px; margin-bottom: 50px; font-weight: bold; }
.checkout .checkout-result .welcome { margin-top: -80px; padding-top: 200px; }
.checkout .checkout-result.error h1 { color: red; }
.checkout .checkout-result .wa-form { margin: 10px auto 20px; width: 400px; float: none; text-align: left; }
.checkout .checkout-result .back { margin-top: 50px; }
.checkout { padding: 0 30px 0 0; }
.checkout h2 { padding: 15px 20px; font-weight: normal; margin: 0; background: #f3f3f3; margin-top: 10px;font-size: 14px;font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;text-transform: uppercase; }
.checkout h2 a { text-decoration: none; color: var(--blue); }
.checkout h2 a:hover { color: var(--blue) !important; }
.checkout h2.upcoming a:hover { color: #000 !important; cursor: default; }
.checkout h2 a.hint { font-size: 0.6em; color: #aaa; text-decoration: none; margin-top: 2px; }
.checkout h2 a.hint strong { text-decoration: underline; }

.checkout .checkout-step.is-done .step-header { position: relative; }
.checkout .checkout-step.is-done .step-header:after { content: ""; position: absolute; top: 0; right: 0; width: 60px; height: 100%; background: transparent url("../img/checkout-done.png") 50% no-repeat; background-size: 30px; }

.checkout .checkout-step-content { padding: 20px 0px; background: #fff; }
.checkout ul { list-style: none; padding-left: 0; margin-top: 0; }
.checkout ul li { font-size: 1.1em; margin-bottom: 5px; }
.checkout ul li input[type="radio"] { float: left; margin-right: 10px; }
.checkout #login-form h1 { display: none; }
.checkout input.large { font-size: 1.4em; }
.checkout .comment { width: 100%; height: 100px; margin-bottom: 20px; }
.checkout blockquote img { margin-right: 20px; float: left; border-radius: 50%; }
.checkout blockquote p { margin-bottom: 10px; margin-left: 70px; }
.checkout blockquote p span { color: #000; }
.checkout-step { box-shadow: 0 2px 5px -2px rgba(0,0,0,0.1); }

.checkout .errormsg.inline { display: inline; margin-left: 10px; }

.checkout table.table { width: 100%; }
.checkout table.table td { border: none; }

.checkout .last span.loading {left: -10px}

.checkout .wa-form .wa-field input,
.checkout .wa-form .wa-field select { font-size: 1.2em; }
.checkout .wa-form .wa-field .wa-name { padding-top: 0.3em; }
.checkout .wa-form .wa-field.wa-field-birthday .wa-value select { margin-right: 5px;  }
.checkout .wa-form .wa-field.wa-field-address .wa-field-address-zip input { min-width: 100px; width: 20%; }

.checkout-step-content.auth label {
	font-weight:normal;
}

.checkout-step.step-confirmation h3 {
	margin:0 0 10px;
	font-weight:bold;
}
.checkout-step.step-confirmation td,
.checkout-step.step-confirmation th {
	padding:8px 8px 8px 0px;
}

blockquote {
	color: #555;
	font-size: 0.9em;
	padding: 20px;
	background: #f3f3f3;
}

.wa-form { float: left; margin: 10px 0; overflow: visible; }
.wa-form .wa-field { clear: left; margin: 0; padding-top: 3px; }
.wa-form .wa-field .wa-name { float: left; width: 155px; padding-top: 0.05em; padding-bottom: 10px; font-size: 0.95em; color: #888; }
.wa-form .wa-field.wa-separator { height: 10px; }
.wa-form .wa-field .wa-value { margin-left: 180px; margin-bottom: 5px; position: relative; }
.wa-form .wa-field .wa-value input.wa-error { border: 2px solid red; }
.wa-form .wa-field .wa-value .wa-error-msg { font-size: 0.9em; color: red; display: block; }
.wa-form .wa-field .wa-value input[type="text"],
.wa-form .wa-field .wa-value input[type="email"],
.wa-form .wa-field .wa-value input[type="password"] { width: 30%; min-width: 260px;  margin:0;}
.wa-form .wa-field .wa-value textarea { min-width: 300px; height: 70px; }
.wa-form .wa-field .wa-value input.wa-captcha-input { width: 100px; min-width: 0; }
.wa-form .wa-field .wa-value label { display: block; font-weight:normal; }
.wa-form .wa-field .wa-value .wa-captcha img { margin-left: 0; }
.wa-form .wa-field .wa-value .errormsg { margin-left: 0; }
.wa-form .wa-field .wa-value.wa-submit { margin-top: 10px; }
.wa-form .wa-field .wa-value p label { display: block; margin: 0; }
.wa-form .wa-field .wa-value p { line-height: 1.6em; margin-bottom: 23px; position: relative; }
.wa-form .wa-field .wa-value p span { color: #777; font-size: 0.9em; display: block; }
.wa-form .wa-field .wa-value p i.icon16 { float: left; left: -20px; margin-top: 2px; position: absolute; }
.wa-form .wa-field .wa-value p input { display: block; margin-bottom: 2px; }
.wa-form .wa-field .wa-value p input[type="radio"],
.wa-form .wa-field .wa-value p input[type="checkbox"] { display: inline; }
.wa-form .wa-field .wa-value label input[type="checkbox"] { float: left; margin-right:5px; }
.wa-form .wa-field .wa-value p .field.wa-required span:after { content: " *"; color: #faa; }
.wa-form .wa-field.wa-required .wa-name:after { content: " *"; color: #faa; }
.wa-signup-form .wa-form .wa-field.wa-field-email { margin-top: 20px; }
.wa-signup-form .wa-form .wa-field.wa-field-email .wa-value input { min-width: 300px; }
.wa-signup-form .wa-form .wa-field.wa-field-password .wa-value input,
.wa-signup-form .wa-form .wa-field.wa-field-password_confirm .wa-value input { min-width: 200px; width: 200px; }
.wa-form .wa-field .wa-value input[type="submit"] {
	overflow: visible;
	outline: none !important;
	border: 0px !important;
	padding: 0 30px;
	color: #fff;
	height: 35px;
	line-height: 35px;
	text-align: center;
	cursor: pointer;
	font-size: 13px;
	text-decoration: none;
	margin: 0;
	-webkit-appearance: none;
	border-radius: 0px;
	box-shadow: none;
	text-shadow: none !important;
	font-family: 'Open Sans', Tahoma, Arial, Helvetica, sans-serif;
	background: var(--orange);
	display: inline;
	transition: background .3s;
}
.wa-form .wa-field .wa-value input[type="submit"]:hover {
	background-color: var(--orange-dark);
	color: #fff;
}
.clear-both {
	clear: both;
}


#wa-my-info-wrapper select { max-width:260px; }
.orders-table td {
	padding:8px 12px 8px 0px!important;
	font-size:12px;
}
.orders-table td :last-child {
	padding-right:0px!important;
}
.orders-table td hr {
	margin:5px 0px;
}
.order-status {
	padding: 2px 5px;
	color: #fff;
	text-align:center;
}
.orders-table .order-status {
	display:block;
	margin-top:5px;
}

.order-shipping {
	width:calc(50% - 10px);
	margin:0px 0px 20px 0px;
	float:left;
}
.order-payment {
	width:calc(50% - 10px);
	margin:0px 0px 20px 20px;
	float:left;
}
.order-table th {
	border:none!important;
}
.order-table th,
.order-table td {
	padding:8px 8px 8px 0px!important;
}

.filters {
	clear:left;
	/*width:700px;*/
	width: 100%;
	margin:0 0 30px 0;
}
.filters h3 {
	font-size: 18px;
	color: #fff;
	height: 48px;
	line-height: 48px;
	text-align: center;
	background: #84DAF3;
	margin: 0;
	position:relative;
}
.filters h3:after {
	content:'';
	position:absolute;
	width:10px;
	height:6px;
	right:16px;
	top:50%;
	margin-top:-3px;
	background:url(../images/arrow-bot.png) 0% 0% no-repeat;
}
.filters.opened h3:after {
	background:url(../images/arrow-top.png) 0% 0% no-repeat;
}
.filters h3:hover {
	background-color: #10C9F3;
	cursor:pointer;
}
.filters form {
	display:none;
	background: #EDEDED;
	border: 1px solid #E0E0D6;
	padding:15px;
}
.filters .filter {
	width:calc(33% - 10px);
	float:left;
	margin:0 15px 15px 0;
}
.filters .filter:nth-child(3n) {
	margin-right:0px;
}
.filters .filter:nth-child(3n+1) {
	clear:left;
}
.filters .filter b {
	display:block;
	margin:0 0 10px;
}
.filters .filter label {
	float:left;
	width:calc(50% - 2px);
	margin:0 4px 5px 0;
	font-size:12px;
	padding-left: 16px;
	position:relative;
	font-weight: normal;
}
.filters .filter label:nth-child(2n) {
	margin-right:0px;
}
.filters .filter label:nth-child(2n+1) {
	clear:left;
}
.filters .filter label input {
	position:absolute;
	left:0px;
	top:2px;
	margin:0;
}
.filters .btn {
	clear:left;
	display:block;
	width:120px;
	margin:0px auto;
}

#tcat ul li.active > a {
	background: var(--mint-bg);
	color: var(--blue);
	width: 100%;
	padding-right: 28px;
}
.category-popup {
	display:none;
	position:absolute;
	left:240px;
	z-index:1000;
}
.category-popup h3 {
	background: var(--blue)!important;
	text-align: left!important;
	padding-left: 30px;
}
.category-popup-content {
	padding:20px;
	border: 1px solid #eef2f6;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	background:#fff;
}
.category-popup-content h4 {
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
	font-size:14px;
	color:var(--navy);
	margin-bottom:20px;
	text-transform:uppercase;
}
.category-popup-content ul {
	padding:0px!important;
	box-shadow:none!important;
}
.category-popup-content ul a {
	background-position:0px 9px!important;
	padding: 4px 0 4px 12px!important;
}
.category-popup-content-col {
	float:left;
	width:220px;
	margin-right:20px;
}
.category-popup-content-col:last-child {
	margin-right:0px;
}
.category-popup-content-childs {
	float:left;
}
.category-popup-content-brands {
	float:left;
	margin-left:20px;
}

#post-stream .post {
	clear:left;
	margin: 0 0 30px;
}
#post-stream .post .text:after {
	content:'';
	display:table;
	width:100%;
	clear:left;
}
#post-stream .post .text img {
	width:126px;
}
#post-stream .post .text .read-more {
	display:inline-block;
	margin-top:5px;
}
#post-stream .post h3 {
	font-size: 16px;
	color: var(--blue);
	/* font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif; */
	/* margin: 0 0 10px; */
	text-transform: uppercase;
}
#post-stream .pageless-wrapper {
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: var(--navy);
	text-transform: uppercase;
}

.full-post h1 {
	font-size: 18px;
	color: var(--blue);
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
	margin: 0 0 25px;
	text-transform: uppercase;
}
.full-post .text p {
	margin-bottom:5px;
}
.comment-form {
	margin:30px 0 0 0;
}
.comment-form h4 {
	font-size: 14px;
	color: var(--blue);
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
	margin: 0 0 10px;
	text-transform: uppercase;
}
.comments { margin: 30px 50px 10px 0; }
.comments h3 { margin: 0 0 20px; }
.comments h4 { margin: 0 0 10px; }
.comments .credentials .date { margin: 0 5px; padding-top: 1px; }
.comments .credentials .userpic { margin-right: 5px; }
.comments .credentials .userpic.icon16 { min-width: 0; width: 16px; height: 16px; margin: 7px 4px 0; }
.comments textarea { height: 100px; min-height: 100px; width: 75%; margin-top: 0; }
.comments ul,
.comments ul li { padding: 0; margin: 0 0 20px 0; list-style: none;}
.comments ul li ul { margin:20px 0 0 0; }
.comments ul li span.hint a { color: #aaa; text-decoration: underline; }
.comments .text { margin: 5px 0 5px 28px; }
.comments .actions { margin: 0 0 5px 28px; font-size: 0.9em; }
.comments ul li a.comment-delete { margin: 0 0 0 5px; padding: 0; color: #d99; text-decoration: underline; }
.comments ul li a.comment-delete:hover { background: red; color: white; }
.comments ul li ul { padding-left: 25px; }
.comments ul li .comment-form { padding: 10px 30px; margin-top: 0; }
.comments ul li .comment-form textarea { min-height: 100px; }
.comment.in-reply-to { background: #eee; margin: -8px -8px -13px; padding: 8px 35px 8px 8px; position: relative; }
.comment.new { background: #ffc; margin: -8px -8px -13px; padding: 8px 35px 8px 8px; }

ul.auth-type { padding: 0 0 10px !important; list-style: none; }
ul.auth-type li { padding-right: 10px; display: inline-block; float: left\9; display: inline\9; }
ul.auth-type li a { padding: 5px 6px; }
ul.auth-type li a img { margin-right: 5px; top: 4px; position: relative; }

.comment-form { padding: 0; margin-top: 30px; }
.comment-form h4 { margin: 0 0 20px; font-weight: normal; }
.comment-form-fields p { margin: 0 0 10px; }
.comment-form-fields p a { display: inline !important; }
.comment-form-fields label { width: 160px; display: block; clear: left; float: left; margin: 0 10px 0 0; font-size: 0.95em; font-weight:normal; color: #888; padding-top: 3px; }
.comment-form-fields input { width: 20em; }
.comment-form textarea { width:500px; min-height: 160px; }
.comment-form .comment-submit { padding:0 0 0 170px;}
.comment-form .userpic { width: 20px; height: 20px; float: left; margin-right: 5px; border-radius: 50%; }
.comment-form ul.menu-h.auth-type li a img { float: left; margin-right: 3px; position: relative; top: 2px; }
.comment-form ul.menu-h.auth-type { padding-bottom: 20px; }
.comment-form .wa-captcha {margin:0 0 10px 0;}
.comment-form .wa-captcha-input { width:100px; }

#cartpage .item-name {
	padding-right:10px;
}
#cartpage .item-qty .minus,
#cartpage .item-qty .plus {
	width: 35px;
	padding: 0;
	float: left;
	background:#84DAF3 url(../images/item-minus.png) center no-repeat;
}
#cartpage .item-qty .plus {
	background:#9ADD85 url(../images/item-plus.png) center no-repeat;
}
#cartpage .item-qty .minus:hover {
	background-color:#74CAE3;
}
#cartpage .item-qty .plus:hover {
	background-color:#8ACD75;
}
#cartpage .item-qty .qty {
	width: 50px;
	background: #EDEDED;
	float: left;
	text-align: center;
	color: #002143;
	font-size: 18px;
}

#page {
	color:var(--navy);
}

#catinfo {
	position:absolute;
	top:-340px;
}
#prdinfo {
	position:absolute;
	margin-top:-80px;
}

@media screen and (max-width: 1100px) {
	.slick-prev, .slick-next {
		display: none !important;
	}
}

.ldm span {
	display: none;
}
.mask {
	position: absolute;
	height: 48px;
	width: 100%;
	z-index: -1;


}

/*==========  Desktop First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
	#mcat .item {
		width: 100%;
		float: left;
		margin: 0 20px 35px 0;
		overflow: hidden;
	}
	#mcat .item ul {
		margin: 0px;
		float: left;
		width: 100%;
	}
	#rcol .contents {
		padding: 0;
		float: left;
		width: 100%;
		background: none;
		color: var(--blue) !important;
	}
	#rcol #page {
		color: var(--blue) !important;
	}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

	#product .pleft {
		float: none;
		width: 100%;
		margin: 0 0 20px 0;
	}

	#product .imgs .big {
		width: 265px;
		height: 265px;
		display: table;
		position: relative;
		margin: 0 auto;
	}

	#product .buyit .buy {
		width: 168px;
		float: left;
		font-size: 12px;
		background: var(--orange);
		margin: 18px 0 0;
	}
	#product .pright {
		width: 100%;
		margin: 0;
		float: none;
	}

	.mask:hover ~ h3{
		transition: 0.4s;
		background: #9ADD85 !important;
	}
	.mask:hover{
		cursor: pointer;
	}

	#tcat {
		margin: 0;
	}

	.mask {
		z-index: 9;
		background: url(../images/down.png);
		background-repeat: no-repeat;
		background-size: auto 60%;
		background-position-x: 65%;
		background-position-y: 70%;
	}
	.menu-v {
		display: none;
	}
	#tops .tmenu {
		display: none;
	}
	#tcat .callme-sidebar {
		height:38px;
		line-height:38px;
	}
	.mask {
		height: 38px !important;
		padding: 10px !important;
	}

	#header .tmenu {
		display: none;
	}#header .email {
		 display: none;
	 }
	#header .tmenu li {
		list-style: none;
		margin: 0;
		padding: 0;
		background: none;
		float: none;
		font-size: 13px;
	}
	#header .phone {
		float: left;
		font-size: 18px;
		color: var(--blue);
		margin: 10px 0px 0 0;
	}
	#header .email {
		float: none;
		font-size: 18px;
		color: var(--blue);
		margin: 10px 0px 0 0;
	}
	#header .tmenu {
		float: none;
		margin: 18px 0 0;
	}
	#header .callme {
		margin: -3px 0 0 0;
		text-align: left;
		color: var(--blue);
		font-size: 13px;
		text-decoration: none;
		display: block;
		font-weight: normal;
		font-family: "Open Sans", Tahoma, Arial, Helvetica, sans-serif;
	}
	#tops .tmenu {
		float: none;
	}
	#tops .tmenu a {
		color: ;
		font-size: 15px;
		height: 32px;
		display: block;
		float: none;
		height: 32px;
		line-height: 32px;
		border-radius: 12px 12px 0 0;
		position: relative;
		width: 100%;
		text-align: center;
	}
	#tops .tmenu a.m2 {
		background: #9ADD85;
		color: #fff;
		padding: 0;
		margin: 0;
		z-index: 2;
		width: 100%;
	}
	#tops .tmenu a.m1 {
		background: #fff;
		color: var(--blue);
		z-index: 3;
		margin: 0;
	}
	#tops .tmenu a.m3 {
		background: #ECAF87;
		color: #fff;
		padding: 0;
		margin: 0;
		z-index: 1;
		width: 100%;
	}
	div#header {
		text-align: center;
	}
	#rcol {
		margin: 0;
		width: 100%;
	}
	.modal-dialog {
		width: 80%;
		margin: 0 auto;
		margin-top: 100px;
	}
	.catalog .item:nth-child(3n+3) {
		margin: 36px auto;
		margin-top: 9px;
	}
	#lcol .logo {
		width: 176px;
		height: 252px;
		display: block;
		background: url(../images/logo-min.png) center no-repeat;
		margin: 32px auto;
	}
	.catalog h3 {
		font-size: 18px;
		color: var(--blue);
		font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
		margin: 0 0 20px;
		text-transform: uppercase;
		text-align: center;
	}
	.rela .item {
		float: none;
		width: 100%;
		margin: 0 20px 0 0;
		height: 100px;
		margin: 0 0 23px;
	}

}

/* Small Devices, Tablets */


/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

	.review-form textarea {
		width: 100% !important;
	}

	.breadcr {
		display: none;
	}
	#lcol .logo {
		width: 100%;
		height: 80px;
		display: block;
		background: url(../images/logom.jpg) center no-repeat;
		background-size: auto 100%;
		margin: 10px auto;
	}


	#page {
		padding-right: 0px;
	}

	.wa-form {
		width: 100%;
	}
	.wa-form .wa-field .wa-value input[type="text"], .wa-form .wa-field .wa-value input[type="email"], .wa-form .wa-field .wa-value input[type="password"] {
		width: 100%;
		min-width: 260px;
		margin: 0;
	}
	.wa-form .wa-field .wa-value {
		margin-left: 0px;
		margin-bottom: 5px;
		position: relative;
	}
	.category-popup-content {
		display: none;
	}
	#cat-icons .item {
		float: none;
		width: 180px;
		text-align: center;
		padding: 0 10px;
		margin: 0 auto;
	}
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	ul.menu-v {
		display: block !important;
	}
	#tops .tmenu {
		display: block !important;
	}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

.social .inst, .socialt .inst {
	background: url(../images/inst.svg) left top no-repeat;
	background-size: cover;
}

#cat-icons h1 {
	font-size: 18px;
	color: var(--blue);
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
	margin: 0 0 20px;
	text-transform: uppercase;
}

#cat-icons h2 {
	font-size: 14px;
	color: var(--blue);
	font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif;
	margin: 0 0 0px;
	text-transform: uppercase;
}
#facts + .container .contents {
	margin-bottom:30px;
}
.post h2 {
	font-size: 18px;
	color: var(--blue);
	/* font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif; */
	/* margin: 0 0 25px; */
	font-weight: 600;
}
.post h3 {
	font-size: 16px;
	color: var(--blue);
	/* font-family: "Open Sans Bold", Tahoma, Arial, Helvetica, sans-serif; */
	/* margin: 0 0 25px; */
	font-weight: 600;
}
#post-stream .post .text h3 {
	font-size: 16px;
	color: var(--blue);
	font-weight: 600;
	text-transform: unset;
}
#header .tmenu li:nth-child(5){/*display:none;*/}
.contents ul {
	padding-left: 20px;
}
#page h3 {
	color: #0098da;
}
#page h2 {
	color: #0098da;
}
#rcol #page {
	color: var(--blue) !important;
}
.oneclickbuy {
	background-color:  #84daf3;
	font-size: 12px;
	display:  block;
	/* margin:  0 auto; */
	padding: 0px 10px;
	margin-top:  5px;
	width: 100%;
}

.add2cart {
	display:  block;
}
#post-1052 {
	display: none;
}
#product #product-description h2,#product #product-description h3,
.cat-description h2,
.cat-description h3{
	font-weight: 400;
	color: var(--blue);
	margin:  14px 0px;
	font-family: "Open Sans", Tahoma, Arial, Helvetica, sans-serif;
}
span[id^="product_anchor-"] {
	position:  absolute;
	top: -50px;
}

#product-description td{border: solid 1px !important; padding:5px !important;}
/* ---- Плавающая кнопка WhatsApp — раньше сидела на inline-стилях без
   left, из-за чего прилипала к самому краю экрана и была непропорционально
   крупной (70px). ---- */
.wa-float {
	position: fixed;
	left: 15px;
	bottom: 20px;
	width: 52px;
	height: 52px;
	z-index: 90;
}
.wa-float-link {
	display: block;
}
.wa-float-link img {
	width: 100%;
	display: block;
	filter: drop-shadow(0 4px 10px rgba(8, 39, 71, .25));
	transition: transform .15s ease;
}
.wa-float-link:hover img {
	transform: scale(1.06);
}
.modal-chat {
	position: absolute;
	width: 300px;
	height: 115px;
	bottom: 90px;
	left: 15px;
	background: #f1f1f1;
	border-radius: 20px;
	box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);
	padding: 15px;
}
.modal-chat:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 25px;
	top: 115px;
	border: 9px solid;
	border-color: #f1f1f1 transparent transparent #f1f1f1;
}
.close-btn {
	position: absolute;
	right: 15px;
	top: 10px;
	cursor: pointer;
}
.modal-img {
	float: left;
	width: 30%;
	text-align: center;
}
.modal-img img{
	width: 100%;
}
.modal-text {
	width: 70%;
	float: left;
	padding: 10px 0 0 10px;
}
.mb-3 {
	margin-bottom:10px;
}

/* ==========================================================================
   Главная страница — герой-баннер, поиск, заголовки секций, блок истории
   ========================================================================== */

/* ---- Баннер (Swiper) ---- */
#visual {
	height: auto;
	background: transparent;
	padding: 0;
	margin: 0 0 16px;
}
#visual .swiper {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}
#visual .swiper-slide img {
	display: block;
	width: 100%;
	height: 320px;
	object-fit: cover;
}
#visual .swiper-button-prev,
#visual .swiper-button-next {
	--swiper-navigation-size: 16px;
	width: 40px;
	height: 40px;
	background: rgba(8, 39, 71, .45);
	border-radius: 50%;
	color: #fff;
	transition: background .15s ease;
}
#visual .swiper-button-prev:hover,
#visual .swiper-button-next:hover {
	background: var(--orange);
}
#visual .swiper-button-prev { left: 16px; }
#visual .swiper-button-next { right: 16px; }
#visual .swiper-pagination-bullet {
	background: #fff;
	opacity: .65;
}
#visual .swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--orange);
}
@media (max-width: 767px) {
	#visual .swiper-slide img { height: 200px; }
}

/* ---- Поисковая строка под баннером (и такая же — на странице 404) ---- */
#searchbar,
.page-404-search {
	background: transparent;
	padding: 4px 0 24px;
}
#searchbar .search-wrapper,
.page-404-search .search-wrapper {
	position: relative;
	width: 100%;
}
#searchbar .form-control,
.page-404-search .form-control {
	height: 48px;
	border-radius: 999px;
	border: 1px solid #dfe7ee;
	padding-left: 20px;
	padding-right: 52px;
	box-shadow: var(--shadow-card);
}
#searchbar .form-control:focus,
.page-404-search .form-control:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(11, 127, 191, .15);
}
#searchbar .bt,
.page-404-search .bt {
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(8, 39, 71, .18);
}

/* ---- Страница результатов поиска ---- */
/* Внутри bitrix:catalog.search вызывается стандартный bitrix:search.page —
   у него своя незалогинированная форма поиска (.search-page), дублирующая
   наш стилизованный #searchbar в шапке/сайдбаре. Сама форма нужна только
   бэкенду компонента (он читает $_REQUEST['q']), визуально не нужна. */
.search-page {
	display: none;
}

/* ---- Заголовки секций ("Хиты продаж" / "Новости") ---- */
.catalog h3,
#facts h3 {
	font-family: var(--font-display);
	font-size: 22px;
	color: var(--navy);
	text-transform: none;
	letter-spacing: .01em;
	margin: 0 0 24px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--mint-bg);
	position: relative;
}
.catalog h3::after,
#facts h3::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 56px;
	height: 2px;
	background: var(--orange);
}

/* ---- Секция "Новости" целиком ---- */
#facts {
	box-sizing: border-box;
}

/* ---- Карточки статей в "Новости" ---- */
#facts .item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 16px;
	box-sizing: border-box;
}
#facts .item .image {
	float: none;
	flex: 0 0 40%;
	width: 40%;
	margin: 0;
	border-radius: calc(var(--radius) - 4px);
	overflow: hidden;
}
#facts .item .txt {
	float: none;
	flex: 1 1 auto;
	width: auto;
}
#facts .item .txt h4 a {
	color: var(--navy);
	font-family: var(--font-display);
}
#facts .item .txt p {
	color: var(--slate);
}

/* ---- Блок истории компании внизу главной ---- */
.home-history {
	background: #fff;
	border-radius: var(--radius);
	padding: 32px 30px;
	margin: 0 0 40px;
	box-sizing: border-box;
}
.home-history h1 {
	margin: 0 0 16px;
}
.home-history p {
	color: var(--slate);
	line-height: 1.7;
	margin: 0 0 16px;
}
.home-history p:last-child {
	margin-bottom: 0;
}

#tops .tmenu {
	display: none;
}

/* ==========================================================================
   Модалки "Позвонить Вам?" / "Зарезервировать товар" / "Спасибо"
   ========================================================================== */
#callbackModal .modal-dialog,
#reserveModal .modal-dialog,
#thanksModal .modal-dialog {
	max-width: 420px;
	margin: 80px auto;
}
#callbackModal .modal-content,
#reserveModal .modal-content,
#thanksModal .modal-content {
	border: none;
	border-radius: var(--radius);
	box-shadow: 0 20px 60px rgba(8, 39, 71, .25);
	overflow: hidden;
}
#callbackModal .modal-header,
#reserveModal .modal-header,
#thanksModal .modal-header {
	background: var(--navy);
	padding: 20px 24px;
	border: none;
	position: relative;
}
#callbackModal .modal-title,
#reserveModal .modal-title,
#thanksModal .modal-title {
	color: #fff;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
}
#callbackModal .btn-close,
#reserveModal .btn-close,
#thanksModal .btn-close {
	filter: invert(1) grayscale(100%) brightness(2);
	opacity: .8;
	position: absolute;
	right: 20px;
	top: 24px;
}
#callbackModal .btn-close:hover,
#reserveModal .btn-close:hover,
#thanksModal .btn-close:hover {
	opacity: 1;
}
#callbackModal .modal-body,
#reserveModal .modal-body,
#thanksModal .modal-body {
	padding: 28px 24px;
}

/* Форма bitrix:form (WEB_FORM_ID=1) внутри #callbackModal — стандартный
   BS3 form-horizontal/form-group/col-sm-* из штатного шаблона компонента,
   в BS5 эта грид-разметка не работает (col-sm-offset-3 в BS5 не существует
   вовсе) — вместо попытки её оживить, просто переводим на простую
   вертикальную раскладку (лейбл сверху, поле на всю ширину). */
#callbackModal .form-group {
	margin: 0 0 16px;
}
#callbackModal .control-label {
	display: block;
	float: none;
	width: auto;
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	color: var(--slate);
	margin: 0 0 6px;
	padding: 0;
}
#callbackModal .col-sm-9,
#callbackModal .col-sm-offset-3 {
	float: none;
	width: 100%;
	padding: 0;
	margin: 0;
}
#callbackModal .inputtext {
	width: 100%;
	height: 44px;
	border: 1px solid #dfe7ee;
	border-radius: 10px;
	padding: 0 14px;
	font-size: 14px;
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}
#callbackModal .inputtext:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(11, 127, 191, .15);
}
#callbackModal img {
	border-radius: 8px;
	border: 1px solid #dfe7ee;
	display: block;
	margin: 0 0 10px;
}
#callbackModal .btn.btn-default,
#reserveModal .btn.btn-default {
	width: 100%;
	height: 46px;
	border-radius: 999px;
	background: var(--orange);
	border: none;
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: background .15s ease;
}
#callbackModal .btn.btn-default:hover,
#reserveModal .btn.btn-default:hover {
	background: var(--orange-dark);
	color: #fff;
}

/* reserveModal использует стандартные .form-control (уже стилизованы
   Bootstrap-ом достаточно прилично), но применяем ту же вертикальную
   раскладку и отступы для единообразия с callbackModal. */
#reserveModal .form-group {
	margin: 0 0 16px;
}
#reserveModal .control-label {
	display: block;
	float: none;
	width: auto;
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	color: var(--slate);
	margin: 0 0 6px;
	padding: 0;
}
#reserveModal .col-sm-9,
#reserveModal .col-sm-offset-3 {
	float: none;
	width: 100%;
	padding: 0;
	margin: 0;
}
#reserveModal .form-control {
	border-radius: 10px;
	border-color: #dfe7ee;
}

/* ==========================================================================
   Подвал — мобильная раскладка
   ========================================================================== */
@media (max-width: 767px) {
	.footer-top {
		flex-direction: column;
		gap: 32px;
	}
	/* .footer-col/.footer-brand несут flex-basis:200px/260px для десктопной
	   строки — в колоночном направлении flex-basis задаёт не ширину, а
	   минимальную ВЫСОТУ, из-за чего каждый блок растягивался под свой
	   десктопный размер и между ними появлялись большие пустые промежутки. */
	.footer-col {
		flex: 0 0 auto;
	}
	.footer-brand {
		align-items: center;
		text-align: center;
	}
	.footer-logo {
		margin: 0 auto;
	}
	.footer-contacts {
		align-items: center;
	}
	.footer-menu,
	.footer-legal {
		text-align: center;
	}
	.footer-col ul {
		align-items: center;
	}
	.footer-bottom {
		text-align: center;
	}
}

/* ==========================================================================
   Страница "Доставка и оплата" (/dostavka/) — статический контент,
   раньше выводился нестилизованным полотном <p>-абзацев.
   ========================================================================== */
.delivery-page {
	max-width: 780px;
	background: #fff;
	padding: 30px;
	border-radius: var(--radius);
}
.delivery-lead {
	font-size: 17px;
	color: var(--navy);
	line-height: 1.6;
	margin: 0 0 24px;
}
.delivery-price-card {
	background: var(--cloud);
	border-radius: var(--radius);
	padding: 28px 30px;
	margin: 0 0 32px;
	box-sizing: border-box;
}
.delivery-price-card h2 {
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--navy);
	margin: 0 0 18px;
}
.delivery-price-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.delivery-price-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: #fff;
	border-radius: 10px;
	padding: 12px 18px;
	box-shadow: var(--shadow-card);
}
.delivery-price-range {
	color: var(--slate);
	font-size: 14px;
}
.delivery-price-value {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	color: var(--navy);
}
.delivery-price-value.delivery-price-free {
	color: var(--mint);
}
.delivery-note {
	margin: 0;
	color: var(--slate);
	font-size: 14px;
}
.delivery-info-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0 0 32px;
}
.delivery-info-item {
	background: #fff;
	border: 1px solid #eef2f6;
	border-radius: var(--radius);
	padding: 22px;
	box-sizing: border-box;
}
.delivery-info-item h3 {
	font-family: var(--font-display);
	font-size: 15px;
	color: var(--blue);
	margin: 0 0 12px;
}
.delivery-info-item p,
.delivery-info-item ul {
	font-size: 14px;
	color: var(--slate);
	line-height: 1.6;
	margin: 0 0 10px;
}
.delivery-info-item p:last-child,
.delivery-info-item ul:last-child {
	margin-bottom: 0;
}
.delivery-info-item ul {
	padding-left: 18px;
}
.delivery-guarantee {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--navy);
	text-align: center;
	padding: 16px;
	background: var(--mint-bg);
	border-radius: var(--radius);
	margin: 0 0 32px;
}
.delivery-article h3 {
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--navy);
	margin: 32px 0 14px;
}
.delivery-article p {
	color: var(--slate);
	line-height: 1.7;
	margin: 0 0 14px;
}
.delivery-cta {
	background: var(--navy);
	border-radius: var(--radius);
	padding: 30px;
	margin: 0 0 32px;
	box-sizing: border-box;
}
.delivery-cta h2 {
	font-family: var(--font-display);
	font-size: 19px;
	color: #fff;
	margin: 0 0 20px;
	max-width: 520px;
}
.delivery-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
}
.delivery-form .form-group {
	margin: 0;
	flex: 1 1 200px;
}
.delivery-form .control-label {
	display: block;
	color: rgba(255,255,255,.7);
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 6px;
}
.delivery-form .form-control {
	width: 100%;
	height: 46px;
	background: #fff;
	color: var(--navy);
	border: none;
	border-radius: 10px;
	padding: 0 16px;
	box-sizing: border-box;
}
.delivery-form .form-control:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}
.delivery-form .btn {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 28px;
	background: var(--orange);
	border: none;
	border-radius: 10px;
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
}
.delivery-form .btn:hover {
	background: var(--orange-dark);
}
@media (max-width: 767px) {
	.delivery-info-grid {
		grid-template-columns: 1fr;
	}
	.delivery-form {
		flex-direction: column;
		align-items: stretch;
	}
	.delivery-form .form-group {
		flex: 0 0 auto;
	}
	.delivery-form .btn {
		width: 100%;
	}
}

/* ==========================================================================
   Список новостей на /blog/ — одна карточка в строку (переопределяет
   стандартную bootstrap-сетку компонента bitrix:news.list/bootstrap_v4:
   у него карточки — flex-items с "col-sm" (авто-ширина), из-за чего они
   вставали по 3-4 в ряд; тут явно фиксируем 100% ширины).
   ========================================================================== */
.news-list-item {
	flex: 0 0 100%;
	max-width: 100%;
	margin-bottom: 20px;
}
.news-list .card {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 24px;
	padding: 20px;
	border: none;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	background: #fff;
}
.news-list .card-img-top {
	flex: 0 0 280px;
	width: 280px;
	height: 200px;
	object-fit: cover;
	border-radius: calc(var(--radius) - 4px);
	margin: 0;
}
.news-list .card-body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.news-list .card-title,
.news-list .card-title a {
	margin: 0;
	padding: 0 0 10px;
	color: var(--navy);
	font: 700 20px/1.3 var(--font-display);
}
.news-list .card-title a:hover {
	color: var(--blue);
}
.news-list .card-text {
	color: var(--slate);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 16px;
}
.news-list-post-params {
	margin: 0 0 12px;
}
.news-list-param,
.news-list-value {
	font-size: 13px;
	color: var(--slate);
}
.news-list .news-list-more {
	margin-top: auto;
}
.news-list .news-list-more .btn {
	background: var(--orange);
	border-color: var(--orange);
	border-radius: 999px;
	padding: 8px 20px;
	height: auto;
	line-height: 1.4;
	font-weight: 600;
}
.news-list .news-list-more .btn:hover {
	background: var(--orange-dark);
	border-color: var(--orange-dark);
}
@media (max-width: 767px) {
	.news-list .card {
		flex-direction: column;
	}
	.news-list .card-img-top {
		width: 100%;
		flex-basis: auto;
		height: 200px;
	}
}

/* ==========================================================================
   Детальная страница новости (bitrix:news.detail/bootstrap_v4, /news/.../
   и /blog/.../) — тот же вид сборки, что и у news.list, только для одной
   статьи.
   ========================================================================== */
/* .news-detail-title дублирует H1, который уже выводит header.php для
   некаталожных страниц (тот же текст) — прячем дубль. */
.news-detail-title {
	display: none;
}
.news-detail-img,
.news-detail-slider {
	background: var(--cloud);
	border-radius: var(--radius);
	overflow: hidden;
}
.news-detail-img img {
	border-radius: var(--radius);
}
.news-detail-date {
	color: var(--slate);
	font-size: 14px;
	margin-bottom: 20px;
}
.news-detail-content {
	color: var(--slate);
	font-size: 15px;
	line-height: 1.7;
	background: #fff;
	padding: 30px;
	border-radius: var(--radius);
}
.news-detail-content p {
	margin: 0 0 16px;
}
.news-detail-content h2,
.news-detail-content h3,
.news-detail-content h4 {
	color: var(--navy);
	font-family: var(--font-display);
	margin: 28px 0 14px;
}
.news-detail-content img,
.news-detail-content iframe {
	max-width: 100%;
	border-radius: 8px;
}
.news-detail-back {
	margin: 20px 0 40px;
}
.news-detail-back-link {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid #dfe7ee;
	color: var(--navy);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	padding: 12px 22px;
	border-radius: 999px;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.news-detail-back-link:hover {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
	text-decoration: none;
}

/* ==========================================================================
   Корзина (/personal/cart/, bitrix:sale.basket.basket/cart) — компонент
   уже несёт полную вёрстку (2000+ строк своего style.css), тут только
   перекраска под фирменную палитру + карточная подача строк товара.
   ========================================================================== */
.basket-items-list-wrapper {
	border: none;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}
.basket-items-list-header {
	background: var(--cloud);
	border-bottom: 1px solid #eef2f6;
}
.basket-items-search-field .form-control {
	border-radius: 999px;
	border-color: #dfe7ee;
}
.basket-items-search-field .form-control:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(11, 127, 191, .15);
}
.basket-item-image {
	border-radius: 8px;
}
.basket-item-info-name-link {
	color: var(--navy);
	font-family: var(--font-display);
}
.basket-item-info-name-link:hover {
	color: var(--blue);
}
.basket-item-price-current-text {
	color: var(--navy);
	font-weight: 700;
}
.basket-item-amount-btn-minus,
.basket-item-amount-btn-plus {
	background-color: #eef2f6;
	border-radius: 8px;
	flex-shrink: 0;
}
.basket-item-amount-filed-block {
	flex-shrink: 0;
}
/* Общий сброс input[type="text"] (width:100%, height:35px, padding:5px)
   ниже по каскаду перебивал компактный вид счётчика количества в корзине —
   поле растягивалось на всю ширину ячейки и сжимало кнопки +/- до полосок. */
input.basket-item-amount-filed {
	width: 60px;
	height: 28px;
	padding: 0;
	background: #fff;
	border-radius: 6px;
	text-align: center;
	color: var(--navy);
	font-weight: 600;
}
.basket-item-amount-btn-minus:hover,
.basket-item-amount-btn-plus:hover {
	background-color: #dfe7ee;
}
.basket-item-actions-remove:hover {
	opacity: .7;
}

/* ---- Итого / оформление заказа ---- */
.basket-checkout-container {
	background: #fff;
	border: none;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}
.basket-checkout-block-total-title {
	color: var(--slate);
}
.basket-coupon-block-total-price-current {
	color: var(--navy);
	font-family: var(--font-display);
	font-weight: 700;
}
.basket-btn-checkout {
	background: var(--orange);
	border-color: var(--orange);
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: none;
}
.basket-btn-checkout:hover {
	background: var(--orange-dark);
	border-color: var(--orange-dark);
}
.basket-checkout-block-btn p {
	color: var(--mint);
	font-size: 13px;
}

/* ---- Плашка "Минимальная сумма заказа / стоимость доставки" над корзиной
   — та же карточная подача цен, что и на /dostavka/. ---- */
.cart-delivery-note {
	margin: 0 0 24px;
}

/* ---- Прогресс-бар до следующего порога скидки/бесплатной доставки
   (текст #hgh уже считался в component.js, тут только визуализация) ---- */
.cart-progress {
	margin-top: 10px;
	height: 6px;
	border-radius: 999px;
	background: #eef2f6;
	overflow: hidden;
}
.cart-progress-bar {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--mint);
	transition: width .35s ease;
}

/* ==========================================================================
   Оформление заказа (/personal/order/make/, bitrix:sale.order.ajax/bootstrap_v5)
   ========================================================================== */
/* ---- Способы доставки — карточки рендерятся JS-шаблоном компонента
   с классом только col-md-6 (без базового col-*), поэтому ниже брейкпоинта
   md растягивались на всю ширину. Держим 2 в ряд на любой ширине. ---- */
.bx-soa-pp-company {
	flex: 0 0 50% !important;
	max-width: 50% !important;
}

/* ---- "Тип плательщика" — переключатель в один ряд кнопками вместо
   вертикального списка радиокнопок. ---- */
#bx-soa-person-type-anchor .form-check-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
#bx-soa-person-type-anchor .bx-soa-custom-label {
	flex: 0 0 100%;
	margin: 0 0 10px;
}
#bx-soa-person-type-anchor .form-check {
	margin: 0;
	padding: 0;
}
#bx-soa-person-type-anchor .form-check-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
#bx-soa-person-type-anchor .form-check-label {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 10px 22px;
	border: 1px solid #dfe7ee;
	border-radius: 999px;
	color: var(--slate);
	font-weight: 600;
	cursor: pointer;
	transition: all .15s ease;
}
#bx-soa-person-type-anchor .form-check-label:hover {
	border-color: var(--blue);
}
#bx-soa-person-type-anchor .form-check-input:checked + .form-check-label {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

/* ---- Поля "Куда прислать подтверждение?" / "Контакт для подтверждения"
   (order props 21/22) — убираем белую плашку-карточку и паддинг, чтобы
   поля смотрелись как обычные поля формы, а не как отдельная секция. ---- */
[data-property-id-row="21"],
[data-property-id-row="22"] {
	background: transparent;
	padding: 0;
}

/* ---- Сайдбар "Итого" — фиксация на десктопе должна учитывать высоту
   собственной шапки сайта (иначе он всплывает под неё). ---- */
@media (min-width: 993px) {
	.bx-soa-cart-total.bx-soa-cart-total-fixed {
		top: 97px;
	}
}

/* ==========================================================================
   Карточка товара на узком мобильном — сетка карточек переведена на
   2 колонки (col-md-4 col-6 вместо col-md-4 col-sm-6 col-12 в
   catalog.section/bootstrap_v4/template.php), здесь уплотняем внутренние
   отступы, чтобы контент не выглядел стиснутым в узкой колонке.
   ========================================================================== */
@media (max-width: 576px) {
	.product-item-image-wrapper {
		height: 160px;
	}
	.catalog .item .name {
		padding: 0 12px;
		font-size: 12px;
		line-height: 16px;
		height: 32px;
	}
	.catalog .item .price {
		padding: 0 0 0 12px;
		margin: 10px 0 0;
	}
	.catalog .item .btm {
		padding: 12px;
		margin-top: 12px;
	}
	.catalog .item .buy {
		min-width: 0;
		padding: 0 14px;
	}
}

/* ==========================================================================
   Страница 404 — раньше голый текст + битая картинка (путь на несуществующий
   /images/404.png при том, что реальный файл лежит в images/404.jpg темплейта)
   + пустое дерево каталога (IBLOCK_ID не тот) + общие demo-ссылки Bitrix
   ("Гарантия"/"Как купить" и т.п., не относящиеся к этому сайту).
   ========================================================================== */
.page-404 {
	max-width: 640px;
	margin: 0 auto;
	padding: 40px 0 60px;
	text-align: center;
}
.page-404-image {
	margin: 0 0 24px;
}
.page-404-image img {
	max-width: 320px;
	width: 100%;
	height: auto;
}
.page-404 > p {
	color: var(--slate);
	line-height: 1.6;
	margin: 0 0 28px;
}
.page-404-search {
	max-width: 420px;
	margin: 0 auto;
	padding: 0 0 20px;
	text-align: left;
}
.page-404-home-btn {
	display: inline-block;
	background: var(--orange);
	color: #fff;
	border-radius: 999px;
	padding: 14px 36px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: background .15s ease;
}
.page-404-home-btn:hover {
	background: var(--orange-dark);
	color: #fff;
}
.page-404-links {
	margin: 44px 0 0;
	padding: 32px 0 0;
	border-top: 1px solid #eef2f6;
}
.page-404-links-title {
	color: var(--slate);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0 0 16px;
}
.page-404-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.page-404-tag {
	display: inline-block;
	background: var(--cloud);
	color: var(--navy);
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.page-404-tag:hover {
	background: var(--blue);
	color: #fff;
}
@media (max-width: 575px) {
	.page-404 {
		padding: 24px 16px 48px;
	}
	.page-404-image img {
		max-width: 240px;
	}
}

/* ==========================================================================
   Тост "Товар добавлен в корзину" — bottom:90px, чтобы не перекрываться с
   плавающими виджетами WhatsApp (низ-слева) и JivoChat (низ-справа).
   ========================================================================== */
.toast-cart {
	position: fixed;
	right: 24px;
	bottom: 90px;
	z-index: 1080;
	background: #fff;
	box-shadow: var(--shadow-card);
	border-radius: var(--radius);
	border-left: 4px solid var(--mint);
	padding: 14px 22px;
	color: var(--navy);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease;
}
.toast-cart.toast-cart-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (max-width: 575px) {
	.toast-cart {
		left: 16px;
		right: 16px;
		bottom: 90px;
		text-align: center;
	}
}

/* Плитки категорий (catalog.section.list) — карточный вид вместо серых рамок */
.catalog-section-list-item-img {
	display: block;
	border: 0;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	background-color: var(--cloud);
	transition: transform .25s ease, box-shadow .25s ease;
}
.catalog-section-list-item-img:hover {
	border-color: transparent;
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(8, 39, 71, .16);
}
.catalog-section-list-item-inner {
	position: static;
}
.catalog-section-list-tile-list .catalog-section-list-item-title,
.catalog-section-list-line-list .catalog-section-list-item-title {
	position: static;
	width: auto;
	background: none;
	padding: 12px 4px 0;
	text-align: center;
}
.catalog-section-list-item-link {
	color: var(--navy);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
}
.catalog-section-list-item:hover .catalog-section-list-item-link {
	color: var(--blue);
}
.catalog-section-list-item-counter {
	display: block;
	margin-top: 2px;
	color: var(--slate);
	font-weight: 500;
	font-size: 12px;
}

/* Категория без фото — брендовая заглушка вместо стандартной иконки камеры Bitrix */
a.catalog-section-list-item-img[style*="tile-empty.png"],
a.catalog-section-list-item-img[style*="line-empty.png"] {
	background-image: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%) !important;
	position: relative;
}
a.catalog-section-list-item-img[style*="tile-empty.png"]::after,
a.catalog-section-list-item-img[style*="line-empty.png"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.85' d='M12 2C12 2 5 10.5 5 15a7 7 0 0 0 14 0C19 10.5 12 2 12 2Z'/%3E%3C/svg%3E") center no-repeat;
	background-size: 34%;
}

/* ==========================================================================
   Отзывы (/review/, api:reviews "rev") — стороннее решение (маркетплейс-
   модуль REV) со своей системой цветовых тем. COLOR переключён на "orange3"
   в review/index.php (уже даёт нужный фирменный оранжевый на кнопке/звёздах
   и белые карточки) — здесь только подгонка под токены сайта поверх темы.
   ========================================================================== */
.api-reviews-list .api-item {
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	border-color: transparent;
}
.api-reviews-list .api-item-hidden {
	border-color: #e0e0e0 !important;
}
.api-reviews-list .api-field-title {
	font-family: var(--font-display);
	font-style: normal;
	color: var(--navy);
	background: transparent;
	padding: 0;
	font-size: 17px;
}
.api-block-top,
.api-reviews-stat {
	border-radius: var(--radius);
}
.api-reviews-list .api_button {
	background: #eef2f6;
	color: var(--navy);
	border: none;
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 600;
	transition: background .15s ease;
}
.api-reviews-list .api_button:hover {
	background: #dfe7ee;
}

/* ==========================================================================
   Мои заказы (/personal/orders/, bitrix:sale.personal.order.list) —
   компонент не переопределён локально (используется ядро Bitrix), поэтому
   только перекраска через каскад. Заголовок заказа и его содержимое —
   два соседних row-блока без общей обёртки, визуально собираем в одну
   карточку (радиус сверху/снизу + общая тень), как и на PDP-табах.
   ========================================================================== */
.sale-order-list-title-container {
	border: 1px solid #dfe7ee;
	background: var(--cloud);
	border-radius: var(--radius) var(--radius) 0 0;
}
.sale-order-list-title-container h3,
.sale-order-list-title-container h4 {
	font-family: var(--font-display);
	color: var(--navy);
}
.sale-order-list-inner-container {
	background: #fff;
	border: 1px solid #dfe7ee;
	border-top: none;
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow-card);
}
.sale-order-list-payment-title,
.sale-order-list-shipment-title {
	font-family: var(--font-display);
	color: var(--navy);
}
.sale-order-list-status-alert,
.sale-order-list-status-restricted,
.sale-order-list-status-success {
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 600;
	border: none;
}
.sale-order-list-status-alert {
	background: #fff0e6;
	color: var(--orange-dark);
}
.sale-order-list-status-success {
	background: var(--mint-bg);
	color: var(--mint);
}
.sale-order-list-status-restricted {
	background: #eef2f6;
	color: var(--slate);
}
.sale-order-list-shipment-button,
.sale-order-list-change-payment,
.sale-order-list-payment-about-link,
.sale-order-list-payment-repeat-link,
.sale-order-list-payment-cancel-link a,
.sale-order-list-repeat-link {
	color: var(--blue);
}

/* ==========================================================================
   Профиль пользователя (/personal/private/, bitrix:main.profile) —
   белая карточка вместо голого списка полей на фоне страницы. Блок
   привязки соцсетей отключён параметром DISABLE_SOCSERV_AUTH в
   personal/index.php (устаревшие сервисы вроде "Мой Мир", LiveJournal —
   не нужен вовсе, а не просто визуально спрятан).
   ========================================================================== */
.bx_profile {
	background: #fff;
	padding: 30px;
	border-radius: var(--radius);
}
.main-profile-block-date-info {
	color: var(--slate);
	font-size: 13px;
	margin: 0 0 20px;
}
.main-profile-block-date-info strong {
	font-weight: 600;
	color: var(--navy);
}
.main-profile-form-label {
	font-family: var(--font-display);
	color: var(--navy);
	font-weight: 600;
}
.bx_profile .form-control {
	background: #f3f7fa;
	border: 1px solid #dfe7ee;
}
.bx_profile .form-control:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(11, 127, 191, .15);
}

/* ==========================================================================
   Оформление заказа (/personal/order/make/) — поля ввода внутри
   .bx-soa-group были белыми без бордера (сливались с белым фоном самой
   группы), плюс кнопка "Оформить заказ" наследовала базовый .btn
   (height:35px) и выглядела мельче/площе остальных CTA на сайте.
   ========================================================================== */
.bx-soa-group .form-control {
	background: #f3f7fa;
	border: 1px solid #dfe7ee;
}
.bx-soa-group .form-control:focus {
	background: #fff;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(11, 127, 191, .15);
}
.btn.btn-order-save,
.btn[data-save-button="true"] {
	height: 54px;
	line-height: 54px;
	padding: 0 40px;
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	box-shadow: 0 8px 20px -8px rgba(255, 106, 26, .6);
	transition: background .2s ease, transform .15s ease, box-shadow .15s ease;
}
.btn.btn-order-save:hover,
.btn[data-save-button="true"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 24px -8px rgba(255, 106, 26, .65);
}

/* ==========================================================================
   Ленивая загрузка изображений + переливающийся ("shimmer") прелоадер —
   карточки каталога (product-item-image-original — CSS background, ставится
   через IntersectionObserver из data-lazy-bg в footer.php), карточка товара
   и новости (обычные <img loading="lazy">, тут только сам прелоадер —
   реальная картинка перекрывает переливающийся фон, как только прогрузится).
   ========================================================================== */
@keyframes lazy-shimmer {
	0% { background-position: -400px 0; }
	100% { background-position: 400px 0; }
}
.lazy-shimmer-bg {
	background-color: #fff;
	background-image: linear-gradient(90deg, #fff 0px, #eef2f6 60px, #fff 120px);
	background-size: 400px 100%;
	background-repeat: no-repeat;
	animation: lazy-shimmer 1.1s linear infinite;
}
.lazy-shimmer-bg.lazy-shimmer-loaded {
	/* .lazy-shimmer-bg сам задаёт background-size:400px 100% (нужно для
	   анимации переливания) — если не сбросить его после загрузки, реальная
	   картинка (она приходит через инлайновый background-image у
	   .product-item-image-original) рисуется в этом же урезанном размере
	   вместо background-size:contain из CSS компонента. */
	animation: none;
	background-image: none;
	background-size: contain;
}

/* ==========================================================================
   Быстрый поиск — выпадающий список результатов под строкой поиска
   (картинка + название + наличие + цена), см. /ajax/quicksearch.php
   ========================================================================== */
.search-suggest {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	z-index: 60;
	display: none;
	text-align: left;
}
.search-suggest.search-suggest-open {
	display: block;
}
.search-suggest-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	transition: background .15s ease;
}
.search-suggest-item:hover {
	background: var(--cloud);
}
.search-suggest-item-img {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 8px;
	background-color: var(--cloud);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
.search-suggest-item-body {
	flex: 1 1 auto;
	min-width: 0;
}
.search-suggest-item-name {
	display: block;
	font-size: 13px;
	color: var(--navy);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.search-suggest-item-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 3px;
	font-size: 12px;
}
.search-suggest-item-price {
	font-weight: 700;
	color: var(--navy);
	font-family: var(--font-display);
}
.search-suggest-item-avail {
	color: var(--mint);
}
.search-suggest-item-avail.search-suggest-out {
	color: #ff2d2d;
}
.search-suggest-empty {
	padding: 16px;
	text-align: center;
	color: var(--slate);
	font-size: 13px;
}
.search-suggest-more {
	display: block;
	padding: 10px 16px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--blue);
	border-top: 1px solid #eef2f6;
	transition: background .15s ease;
}
.search-suggest-more:hover {
	background: var(--cloud);
	text-decoration: none;
}

/* ---- Свойство заказа "Куда прислать подтверждение?" (order prop 21) —
   рендерится голым <select> без класса form-control, поэтому не подхватывает
   рамку остальных полей на странице оформления заказа. Значения подобраны
   по факту вычисленных стилей соседнего текстового поля (.bx-soa-customer-input). ---- */
.bx-soa-customer-field select,
.soa-property-container select {
	display: block;
	width: 100%;
	height: 35px;
	padding: 5px;
	background-color: #fff;
	border: 1px solid #d7e1e8;
	border-radius: 8px;
}
.bx-soa-customer-field select:focus,
.soa-property-container select:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(11, 127, 191, .15);
}