﻿:root {
	--color-bg:#9b4dca;
	--color-bg-hover:#bd7ae5;
	--color-text-btn:#fff;
	--color-text-btn-hover:#fff;
	--color-link:#9b4dca;
	--color-link-hover:#bd7ae5;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	src: local(''),
		 url('../fonts/roboto/roboto-300.woff2') format('woff2'),
		 url('../fonts/roboto/roboto-300.woff') format('woff'); 
}
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 300;
	src: local(''),
		 url('../fonts/roboto/roboto-300italic.woff2') format('woff2'),
		 url('../fonts/roboto/roboto-300italic.woff') format('woff'); 
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		 url('../fonts/roboto/roboto-regular.woff2') format('woff2'),
		 url('../fonts/roboto/roboto-regular.woff') format('woff'); 
}
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	src: local(''),
		 url('../fonts/roboto/roboto-italic.woff2') format('woff2'),
		 url('../fonts/roboto/roboto-italic.woff') format('woff'); 
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: bold;
	src: local(''),
		 url('../fonts/roboto/roboto-500.woff2') format('woff2'),
		 url('../fonts/roboto/roboto-500.woff') format('woff'); 
}
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: bold;
	src: local(''),
		 url('../fonts/roboto/roboto-500italic.woff2') format('woff2'),
		 url('../fonts/roboto/roboto-500italic.woff') format('woff'); 
}


*,
*:before,
*:after {
box-sizing: border-box;
outline: none;
}

html,body{min-height:100%;}

html {
font-size: 10px;
}

body{
font-family: 'roboto',sans-serif;
font-size: 1.6rem;
line-height: 1.5;
background-color:#eaeaea;
color: #484c51;
font-weight: 400;
min-width: 36rem;
}

body.no-scroll{
height: 100%;
width: 100%;
overflow: hidden;
}


/* Типографика */
a{
text-decoration:underline;
color:var(--color-link);
}
a .icon{fill:var(--color-link);}
a:hover,a:focus{
text-decoration:none;
color:var(--color-link-hover);
}
a:hover .icon,a:focus .icon{fill:var(--color-link-hover);}
img,table{max-width:100%;}
b,strong{font-weight: bold;}

/* Кнопки */
.btn,button{
border: 0.1rem solid transparent;
border-radius: .4rem;
cursor: pointer;
display: inline-block;
vertical-align: top;
font-size: 1.4rem;
font-weight: bold;
height: 4rem;
line-height: 4rem;
padding: 0 3.0rem;
text-align: center;
text-decoration: none;
white-space: nowrap;
}

.btn[disabled],button[disabled]{cursor: default;opacity:.5;}

.btn,button,
.btn[disabled]:focus,.btn[disabled]:hover,
.btn.disable:focus,.btn.disable:hover,
button[disabled]:focus,button[disabled]:hover,
button.disable:focus,button.disable:hover
{
background-color: var(--color-bg);
border-color: var(--color-bg);
color: var(--color-text-btn);
}

.btn:focus,.btn:hover,
button:focus, button:hover
{
background-color: var(--color-bg-hover);
border-color: var(--color-bg-hover);
color: var(--color-text-btn-hover);
outline: 0;
}

.btn.btn-outline,button.btn-outline{
background-color: transparent;
color: var(--color-link);
}

.btn.btn-outline:focus,.btn.btn-outline:hover,
button.btn-outline:focus,button.btn-outline:hover{
background-color: transparent;
border-color: var(--color-link-hover);
color: var(--color-link-hover);
}

input,
textarea,
select {
-webkit-appearance: none;
background-color: transparent;
border: 0.1rem solid #d1d1d1;
border-radius: .4rem;
box-shadow: none;
box-sizing: inherit;
height: 4rem;
padding: .6rem 1.0rem .7rem;
width: 100%;
}

input:focus,
textarea:focus,
select:focus {
border-color: var(--color-bg);
outline: 0;
}

input[type='checkbox'],
input[type='radio']{
-webkit-appearance: auto;
appearance: auto;
display:inline;
height:auto;
width:auto;
}

select{
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23d1d1d1" d="M0,0l6,8l6-8"/></svg>') center right no-repeat;
padding-right: 3.0rem;
}

select:focus {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%239b4dca" d="M0,0l6,8l6-8"/></svg>');
}

select[multiple] {
background: none;
height: auto;
}

textarea {min-height: 6.5rem;}

label,
legend {
display: block;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: .5rem;
}

fieldset {
border-width: 0;
padding: 0;
}

.label-inline {
display: inline-block;
font-weight: normal;
margin-left: .5rem;
}

blockquote {
border-left: 0.3rem solid #d1d1d1;
margin-left: 0;
margin-right: 0;
padding: 1rem 1.5rem;
}

blockquote *:last-child {
	margin-bottom: 0;
}

code{
background: #f4f5f6;
border-radius: .4rem;
font-size: 86%;
margin: 0 .2rem;
padding: .2rem .5rem;
white-space: nowrap;
}

pre{
background: #f4f5f6;
border-left: 0.3rem solid var(--color-bg);
overflow-y: hidden;
padding: 1rem 1.5rem;
}

pre > code {
border-radius: 0;
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}

hr {
border: 0;
border-top: 0.1rem solid #f4f5f6;
margin: 3.0rem 0;
}

dl,
ol,
ul {
list-style: none;
margin-top: 0;
padding-left: 0;
}

ol {
list-style: decimal inside;
}

ul {
list-style: circle inside;
}

.btn,
button,
dd,
dt,
li {
margin-bottom: 1.0rem;
}

fieldset,
input,
select,
textarea {
margin-bottom: 1.5rem;
}

blockquote,
dl,
figure,
ol,
p,
pre,
table,
ul {
margin-bottom: 2.5rem;
}

table{
border-spacing: 0;
display: block;
overflow-x: auto;
text-align: left;
width: 100%;
}

td,
th {
border-bottom: 0.1rem solid #e1e1e1;
padding: 1.2rem 1.5rem;
}

td:first-child,
th:first-child {
padding-left: 0;
}

td:last-child,
th:last-child {
padding-right: 0;
}

.table_site td,
.table_site th,
.table-site td,
.table_site th{
border: 0.1rem solid #e1e1e1;
padding:10px 10px;
}

@media (min-width: 40rem) {
table {
display: table;
overflow-x: initial;
}
}

h1,.h1{
font-size: 4.6rem;
line-height: 1.2;
}

h2,.h2{
font-size: 3.6rem;
line-height: 1.25;
}

h3,.h3{
font-size: 2.8rem;
line-height: 1.3;
}

h4,.h4{
font-size: 2.2rem;
letter-spacing: -.08rem;
line-height: 1.35;
}

h5,.h5{
font-size: 1.8rem;
letter-spacing: -.05rem;
line-height: 1.5;
}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5{
font-weight: 300;
margin-bottom: 2.0rem;
margin-top: 0;
}

@media (max-width:767px){
	h1,.h1{font-size: 3.2rem;}
	h2,.h2{font-size: 2.4rem;}
	h3,.h3{font-size: 2.0rem;}
	h4,.h4{font-size: 1.8rem;}
	h5,.h5{font-size: 1.6rem;}
}

.img-left{
float:left;
margin:0 20px 20px 0;
}

.img-right{
float:right;
margin:0 0 20px 20px;
}

#app{
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
margin: 0 auto;
}

main{
flex: 1 1 auto;
width: 100%;
}

.st-width{
max-width:1260px;
width: 100%;
margin-left:auto;
margin-right:auto;
}


/* header-line */
.header-line{
display: flex;
justify-content: space-between;
align-items: center;
min-height:40px;
padding:0 2rem;
background: #f7f7f9;
color: #888;
font-size: 1.4rem;
}

.header-line-contact__text .icon,
span.basket-mini-line__icon .icon
{fill:#888;}

.header-line-contact__link,
.header-line-contact__text{
	text-decoration:none;
	margin-right:20px;
	padding:5px 0;
}

.basket-mini-line__title,
.auth-mini-line__link{
	text-decoration:none;
}

.header-line__contacts{
	display:flex;
	flex-wrap:wrap;
}

.header-line__contacts-cosial{
	margin-right:30px;
	text-decoration:none;
	display: inline-flex;
	align-items: center;
}

.header-linecontacts-icon{
	text-decoration:none;
	padding-right:5px;
}

.header-line__shop{
	display: flex;
	align-items: center;
	margin-left:10px;
}

.header-line__basket{
	margin-right:10px;
	white-space: nowrap;
}

.header-line__auth{		
	margin-left:10px;
	white-space: nowrap;
}

.auth-mini-line__link{
	margin-left:10px;
}


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

/* Шапка */
.header-main{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:2rem 2rem;
	background-color: #fff;
}

.header-main__info{
	display: flex;
	align-items: center;
	flex: 0 0 50%;
}

.header__logo{flex:0 0 200px;max-width:200px;margin-right:30px;}

.header__company{
	width:100%;
	padding-right:20px;
}

.header__company-name{
	font-size: 2.5rem;
}

.header__contact{padding-left: 20px;}
.header-contact__item{
	margin-top: 3px;
	margin-bottom: 3px;
}
.header-contact__text,
.header-contact__link{
	line-height: 2rem;
	text-decoration:none;
	display:inline-flex;
	align-items: center;
	margin-right:10px;
	font-size: 1.4rem;
}

.header-contact__text{color:#888;}
.header-contact__text .icon{fill:#888;}


@media(max-width:991px){
	.header-main__info{flex:0 0 100%;}
	.header__contact{display: none;}
}

@media(max-width:480px){
	.header__logo{max-width: 120px;}
}


.header .icon{height:18px;width:18px;vertical-align:top;margin-right:5px;}

.icon.icon-vk{fill:#4872a3;width:23px;height:20px;}
.icon.icon-facebook-f{fill:#1b4a8c;width:20px;height:20px;}
.icon.icon-instagram{fill:#8134AF;width:20px;height:20px;}
.icon.icon-youtube{fill:#e02e2e;width:22px;height:20px;}
.icon.icon-vimeo-v{fill:#1393cd;width:22px;height:20px;}
.icon.icon-twitter{fill:#1da1f2;width:22px;height:20px;}
.icon.icon-odnoklassniki{fill:#e47d08;width:22px;height:20px;}
.icon.icon-tiktok{fill:#000000;width:22px;height:20px;}
.icon.icon-twitch{fill:#9147ff;width:22px;height:22px;}
.icon.icon-telegram-plane{fill:#2ca5e0;width:22px;height:22px;}
.icon.icon-whatsapp{fill:#00e676;width:22px;height:22px;}
.icon.icon-viber{fill:#665ca7;width:22px;height:20px;}
.icon.icon-snapchat-ghost{fill:#fffc00;width:22px;height:20px;}

.icon.icon-shopping-basket{width:20px;height:20px;}
.icon.icon-user{width:16px;height:18px;}


.basket-popup{
	border-top: 2px solid var(--color-bg);
}


/*footer*/
.footer__content{
	padding:30px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	font-size: 1.4rem;
	border-top: 2px solid var(--color-bg);
}

.footer__counters p{margin: 0;}

@media(max-width:767px){
	.footer__content{
		justify-content: center;
		flex-wrap: wrap;
		/* display: block; */
	}
	.footer__copyright,
	.footer__counters,
	.footer__alma{
		width:100%;
		text-align: center;
		margin:3px 0;
	}
	.alma-company{
		justify-content: center;
	}
}

.tmpl-logo{
	display: flex;
	width:200px;
	height:80px;
	border:.1rem solid var(--color-bg);
	color:var(--color-bg);
	text-decoration: none;
	justify-content: center;
	align-items: center;
	max-width: 100%;
}

.tmpl-logo::before{
	content:'ЛОГОТИП';
	font-size:2.4rem;
}

.st-content-top,
.st-content-bottom,
main
{background-color: #fff;}

.st-content-top p{margin:0;}
.st-content-main,
.st-content-left,
.st-content-right
{padding:30px 20px;}

.st-content-bottom{
	padding: 30px 20px;
	border-top: 1px solid #e1e1e1;
}

.st-content-top .bx-viewport{
	border-top: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
}

@media(max-width:991px){
	.st-content-left{
		padding: 0;
		flex: 0 0 auto;
	}
	.st-content-left>.contentblock{
		display: none;
	}

	.st-content-right{
		display: none;
	}
}


/*top-menu*/
.nav-wrap{
	position: sticky;
	top: 0px;
	z-index: 10;
}

.nav-wrap__panel{
	min-height:50px;
	background-color: var(--color-bg); 
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nav-wrap__actions{
	display: inline-flex;
}

.nav-wrap__actions-icon{
	display: none;
	align-items: center;
	justify-content: center;
	width:50px;
	height:50px;
}

@media(max-width:991px){
	.nav-wrap__actions-icon{
		display: inline-flex;
	}
}

.nav-wrap__actions-icon .icon,
.nav-wrap__actions-icon:hover .icon{
	fill:var(--color-text-btn);
	width:20px;
}

.nav-wrap__actions-icon:hover{
	background-color: var(--color-bg-hover);
}

.nav__list_sub .nav__openmarker {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 15'%3E%3Cpath fill='%239b4dca' d='M7.8 7.1L1 .2C.8 0 .4 0 .2.2 0 .4 0 .8.2 1l6.4 6.5L.2 14c-.2.2-.2.6 0 .8.1.1.2.2.4.2.1 0 .3-.1.4-.2l6.9-6.9c0-.1.1-.2.1-.4s-.1-.3-.2-.4z'/%3E%3C/svg%3E");
}

.nav__item_lvl0 > .nav__link.active,
.nav__item>.nav__link:hover{
	background-color:var(--color-bg-hover);
	color:var(--color-text-btn-hover);
}

/* search */
nav.is-search .nav{
	padding-right: 50px;
}


@media(max-width:991px){
	.nav{display: none;}
	.nav-wrap__panel{
		padding:0 20px;
	}
}


.ic-hamburger {
	display: none;
	vertical-align: middle;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 20px;
	height: 16px;
	font-size: 0;
	text-indent: -9999px;
	appearance: none;
	box-shadow: none;
	border-radius: none;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s;
}

.ic-hamburger:focus {
	outline: none;
}

.ic-hamburger span {
	display: block;
	position: absolute;
	top: 6px;
	left: 0;
	right: 0px;
	height: 2px;
	background: #fff;
}

.ic-hamburger span::before,
.ic-hamburger span::after {
	content: "";
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #fff;
}

.ic-hamburger span::before {
	top: -6px;
}

.ic-hamburger span::after {
	bottom: -6px;
}

.ic-hamburgerspan {
	transition: background-color 0s 0.3s;
}

.ic-hamburger span::before,
.ic-hamburger span::after {
	transition-duration: 0.3s, 0.3s;
	transition-delay: 0.3s, 0s;
}

.ic-hamburger span::before {
	transition-property: top, transform;
}

.ic-hamburger span::after {
	transition-property: bottom, transform;
}

.ic-hamburger.active span {
	background: none;
}

.ic-hamburger.active span::before {
	top: 0;
	transform: rotate(45deg);
}

.ic-hamburger.active span::after {
	bottom: 0;
	transform: rotate(-45deg);
}

.ic-hamburger.active span::before,
.ic-hamburger.active span::after {
	transition-delay: 0s, 0.3s;
}

.ic-hamburger.active:hover span{
	background-color: transparent;
}


@media(max-width:991px){
	.ic-hamburger{display: inline-block;}
}

.search-wrap{
	position: relative;
	flex:0 0 50px;
	width:50px;
	height: 100%;
}

@media(max-width:991px){
	.search-wrap{
		margin-right:-20px;
	}
}

.search-btn{
	display: inline-flex;
	vertical-align: top;
	align-items: center;
	justify-content: center;
	width:100%;
	height: 50px;
	cursor: pointer;
	padding: 0;
	margin: 0;
}

.search-btn .icon{
	fill:#fff;
	width:20px;
	height:20px;
	transform: scaleX(-1);
}

.search-btn:hover{
	background-color:var(--color-bg-hover);
}

.search__form-wrap{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	width: 0;
	overflow: hidden;
	padding: 5px 0 0;
	background: var(--color-bg-hover);
	-webkit-transition: width 0.3s linear;
	transition: width 0.3s linear;
}

.search__btn .icon{fill:var(--color-bg-hover);}
.search__btn{right:5px;}
.search__form-wrap.active{
	width: 320px;
	max-width: 320px;
}

@media(max-width:767px){
	.search-wrap{
		position: static;
	}
	.search__form-wrap.active{
		width: 100%;
		max-width: none;
	}
}

.search__field{
	width: calc(100% - 20px);
	margin: 0 10px;
}

.search-autocomplete__item{padding: 5px 12px;}
.search-autocomplete__item:nth-child(even){background-color: var(--color-bg);}
.search-autocomplete__link,.search-autocomplete__link:hover{color: #fff;font-size: 1.4rem;}
.search-autocomplete__name_color{color:#eee;}

.vmenu__link{
	text-decoration: none;
	font-weight: normal;
	text-transform: none;
	color: #484c51;
}

.vmenu__link_lvl0{
	font-size: 1.5rem;
	font-weight: bold;
	border-bottom: 1px solid #dfe7ec;
	text-transform: none;
	display: block;
	padding-top: 9px;
	padding-bottom: 9px;
}

/*переопределения и фиксы*/
.bxslider_wrap .bx-wrapper{margin-bottom:0px;}
.bx-wrapper .bx-controls-direction a{
	background-color: #888888;
	opacity:.7;
	border-radius: 50%;
	border: 0;
	outline: 0;
	width: 32px;
	height: 32px;
}

.bx-wrapper .bx-controls-direction a:hover{	opacity:1;}

.bx-wrapper .bx-next:focus,
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next{
	background-image: url(../i/arrslider.png);
	background-repeat: no-repeat;
	background-position: -35px 0;
}

.bx-wrapper .bx-prev:focus,
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev{
	background-image: url(../i/arrslider.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}


/*Кнопка наверх*/
.btn-move-up{
	position: fixed;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 99;
	left:auto;
	top:auto;
	right: -40px;
	bottom: 50px;
	width: 40px;
	height: 40px;
	background-color: #3b3e43;
	border-radius:0;
	opacity: 0.5;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.4s ease 0s;
}

.btn-move-up .icon,
.btn-move-up:hover .icon{
	width:30px;
	height:30px;
	fill:#fff;
}

.btn-move-up.visible{right:40px;opacity: 0.5;}


/* Мобильный сайдбар */
.mobile-sidebar{
	display: none;
	flex-direction: column;
	position: fixed;
	top:0;
	width: 350px;
	max-width: 100%;
	height: 100vh;
	background-color: #fff;
	box-shadow: 1px 1px 5px 0px rgb(0 0 0 / 20%);
	z-index: 100;
	left:-100%;
	transition: all 0.2s ease 0s;
	overflow-y: auto;
}

@media(max-width:991px){
	.mobile-sidebar{
		display: flex;
	}
}

.mobile-sidebar.active{
	left:0;
}

.mobile-sidebar .ic-hamburger span::before,
.mobile-sidebar .ic-hamburger span::after {
	background-color: #555;
}

.mobile-sidebar__title{
	display: flex;
	justify-content: space-between;
	padding: 10px 20px;
}

.mobile-sidebar__logo{
	width:calc(100% - 40px);
}

.mobile-sidebar__logo img{
	max-width: 150px;
}

.mobile-sidebar__company{
	font-weight: bold;
	font-size: 18px;
	line-height: 30px;
	text-decoration:none;
}

.mobile-sidebar__close{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width:30px;
	height:30px;
}

.mobile-sidebar__content{
	padding:10px 20px;
	flex: 1 1 auto;
}

.mobile-contact{
	padding:30px 20px 20px;
}

.mobile-contact__item{
	padding:5px 0;
}

.mobile-contact__link,
.mobile-contact__text{
	text-decoration:none;
	display: inline-flex;
	align-items: center;
	margin-right:10px;
}

.mobile-contact__text .icon{
	fill:#484c51;
}

.mobile-sidebar .icon{
	width:18px;
	height:18px;
	margin-right:5px;
}

.mobile-contacts-cosial .icon{
	height:30px;
	width:30px;	
}

.mobile-sidebar .badsee-link__box{
	padding: 30px 20px 20px;
}


.bg-shadow{
	display:none;
	background: rgba(0,0,0,.4);
	position: fixed;
	top:0;
	left:0;
	width:100vw;
	height: 100vh;
	z-index: 99;
}

.no-scroll .bg-shadow{display: block;}

/* Исправления */
.one_video iframe{max-width: 100%;}


/* Цветовые схемы блоков */
.catalog-scroller__link,
.noUi-connect::before,
.noUi-handle,
.bx-wrapper .bx-controls-direction a,
.modal-window__title
{background-color:var(--color-bg);color:var(--color-text-btn);}

.catalog-scroller__link:hover,
.catalog-scroller__link_active,
.catalog-scroller__link_active:hover,
.noUi-handle:hover
{background-color:var(--color-bg-hover);color:var(--color-text-btn-hover);}

.bcatalog-inside__gallery-item.active,
.sku-props__value.active, 
.sku-props__value:hover
{border-color:var(--color-bg-hover);outline:1px solid var(--color-bg-hover);}

.bcomment__answer{border-bottom: 1px dotted var(--color-bg);}

/* sitemap */
.sitemap{
	display: flex;
	gap: 30px;
}

.sitemap__sect{width: 100%;}

@media (max-width: 991px) {
	.sitemap{flex-wrap: wrap;}
	.sitemap__sect{width: calc(50% - 15px);}
}

@media (max-width: 767px) {
	.sitemap__sect{width: 100%;}
}