:root{
    --white:#fff;
    --input-border:#f5f5f5;
    --main-color:#E31E24;
    --svg-gray:#777777;
    --input-background-hover: #f2f2f2;
    --border--dark: #ddd;
}

#menu-wrapper {overflow: hidden;max-width: var(--height);cursor: pointer;display: none}
#menu-wrapper #hamburger-menu {position: relative;width: 25px;height: 20px;margin: 15px;}
#menu-wrapper #hamburger-menu span {opacity: 1;left: 0;display: block;width: 100%;height: 2px;border-radius: 10px;color: black;background-color: white;position: absolute;transform: rotate(0deg);transition: .4s ease-in-out;}
#menu-wrapper #hamburger-menu span:nth-child(1) {top: 0;}
#menu-wrapper #hamburger-menu span:nth-child(2) {top: 9px;}
#menu-wrapper #hamburger-menu span:nth-child(3) {top: 18px;}
#menu-wrapper #hamburger-menu.open span:nth-child(1) {transform: translateY(9px) rotate(135deg);}
#menu-wrapper #hamburger-menu.open span:nth-child(2) {opacity: 0;transform: translateX(-60px);}
#menu-wrapper #hamburger-menu.open span:nth-child(3) {transform: translateY(-9px) rotate(-135deg);}

.header--fixed-menu {display: block;position: fixed;top: 0;right: 0;transform: translateX(100%);opacity: 1;height: 100vh;padding-bottom: 50px;width: 100%;background-color: var(--white);overflow-y: auto;/*transition: .4s;*/z-index: 2000;max-width: 340px}
.bx-ios .header--fixed-menu {padding-bottom: 90px}
.menu--background {position: fixed;top: 0;right: 0;width: 10%;height: 100vh;background-color: rgba(0,0,0,0.3);display: block;transform: translateX(-1000px);visibility: hidden;z-index: 1999;}

.header--fixed-menu::-webkit-scrollbar {width: 8px;height: 8px;background-color: transparent;}
.header--fixed-menu::-webkit-scrollbar-thumb {background-color: #9CA0A9;border-radius: 6px;box-shadow: none;}
.header--fixed-menu::-webkit-scrollbar-thumb:hover {background-color: #9CA0A9;}

#v--menu *{box-sizing: border-box;list-style-type: none;padding: 0;margin: 0;font-size: 14px;user-select: none}
#v--menu a:hover {color:#121212;}
#v--menu > a:hover {color:var(--white);}
#v--menu svg {-moz-transition: none;-webkit-transition: none;-o-transition: none;-ms-transition: none}
#v--menu{width: 100%;float: none;flex-basis: 100%;max-width: 100%;padding: 0 8px;margin: 0}
#v--menu > a, .catalog--menu-mobile-box .menu--first-level.opened > a{padding: 15px 15px;background-color: var(--main-color);display: block;width: 100%;color: var(--white);text-align: center;font-size: 14px;}
#v--menu > a, .catalog--menu-mobile-box .menu--first-level.opened > a{padding-right: 40px !important;}
#v--menu > a > svg {float: left;transform: rotate(90deg);fill: var(--white);width: 12px;height: 12px;margin-right: 10px;margin-top: 2px;}
#v--menu ul {width: 100%;}
#v--menu li {width: 100%;flex-basis: 100%;max-width: 100%;padding: 0;margin: 0;position: relative}
#v--menu ul > li:last-child {border: none}

#v--menu > li{border-bottom: 1px solid var(--input-border);}
#v--menu  li{border-bottom: 1px solid var(--input-border);}
.js--vertical-menu-close{position: absolute;top: 3px;right: 10px;stroke: var(--white);width: 40px;height: 40px;cursor: pointer;z-index: 170;display: flex;align-items: center;justify-content: center}
.js--vertical-menu-close svg{width: 35px;height: 35px;fill:var(--white)}
#v--menu ul {display: none;}
#v--menu .v--menu-content {padding-top: var(--gap)}
#v--menu .v--menu-content > ul {display: block;padding-left: var(--gap);padding-right: var(--gap)}
#v--menu .v--menu-content > ul a{padding:9px 0;color:#5E5E5E;font-size: 14px;}
#v--menu .v--menu-content > ul li{border:none;margin-bottom: 8px;}

#v--menu a {width: 100%;text-decoration: none;padding: 15px 55px 15px 0;display: flex;color:#000}
#v--menu > a {color:#fff}
#v--menu .svg--menu-arrow{width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;position: absolute;right: 10px;top:50%;transform: translateY(-50%);z-index: 1}
#v--menu .opened > .svg--menu-arrow{right: auto;top:0;transform: translateY(0)}
#v--menu .opened > .svg--menu-arrow svg{right: auto;top:10px;transform: translateY(0) rotate(90deg);fill:#fff}
#v--menu .svg--menu-arrow svg{transform: rotate(-90deg);width: 12px;height: 12px;}

#v--menu > a > .svg--menu-arrow,
#v--menu li.opened > .menu--box-contacts .svg--menu-arrow,
#v--menu li.opened > a > .svg--menu-arrow{float: left;transform: rotate(180deg);fill: var(--white);width: 30px;height: 30px;margin-right: 10px;margin-top: -5px;display: flex;align-items: center;justify-content: center}

#v--menu > a > .svg--menu-arrow svg,
#v--menu li.opened > .menu--box-contacts .svg--menu-arrow svg,
#v--menu li.opened > a > .svg--menu-arrow svg{width: 18px;height: 18px;}

#v--menu li.opened > .menu--box-contacts img,
#v--menu li.opened > .menu--box-contacts .menu--left {display:none}


#v--menu li.opened{position: absolute;top: 0;left: 0;width: 100%;z-index: 150;height: 100%;background-color: #fff}

#v--menu li.opened > .menu--box-contacts a,
#v--menu li.opened > a
{padding: 15px 50px 15px 45px;background-color: var(--main-color);display: flex;width: 100%;color: var(--white);text-align: center;box-sizing: border-box;font-size: 16px}

#v--menu li:not(.opened) > a > .svg--menu-arrow{margin-left: auto}
#v--menu li.opened > a .menu--section-icon {display: none}

#v--menu li.opened > a > .svg--menu-arrow {-webkit-box-ordinal-group: 2;-webkit-order: 1;-ms-flex-order: 1;order: 1;}
#v--menu li.opened > a > span {-webkit-box-ordinal-group: 3;-webkit-order:2;-ms-flex-order: 2;order: 2;}

#v--menu .menu--section-icon {width: 24px;height: 24px;margin-right: 7px}
.menu--section-icon svg {fill:var(--svg-gray)}
.hamburger--menu-box {width:var(--height);height:var(--height);user-select: none;display: flex;align-items: center;justify-content: center;background-color: #F6F6F6;border-radius: 10px;}
.hamburger--menu-box:not(.open) .close{display: none}
.hamburger--menu-box.open i{display: none}
.hamburger--menu-box.open i.close{display: block}

.clicked > li:not(.opened) {display: none}

#v--menu .menu--box{border-bottom: 1px solid var(--border-dark)}
#v--menu .menu--box:last-child{border-bottom: 1px solid transparent}
#v--menu .menu--box.gray{background-color: var(--input-background-hover)}

#v--menu li.opened > ul {display: block}

.root-item-selected {color:var(--main-color)}

.header--mobile-buttons{display: none;width: var(--height);height:var(--height)}

.v--menu-top {background-color: var(--main-color)}
#v--menu .v--menu-top a{color: #fff;padding-left: 45px;font-size: 16px;}
#v--menu .v--menu-top .svg--menu-arrow{right: auto;top:0;transform: translateY(0)}
#v--menu .v--menu-top .svg--menu-arrow svg{transform: rotate(90deg);width: 12px;height: 12px;fill:#fff}

#v--menu .menu--picture{margin-right: 15px;width: 18px;height: auto}

.menu--left {display: flex;padding: 15px 10px 10px 10px;align-items: center;justify-content: center}
.menu--left img{width: 100%}
.menu--left svg{width: 20px;height: 20px;fill:var(--main-color)}

#v--menu .menu--box-contacts a{padding:15px 15px 15px 10px}
#v--menu .menu--box-contacts a:nth-child(n+2){padding-top:0;}

.menu--box-contacts {display: flex}
.menu--box-contacts .menu--left{width: 40px;}
.menu--box-contacts .menu--right{width: calc(100% - 40px);}

.hamburger-menu,
.hamburger-menu:after,
.hamburger-menu:before {
    width: 28px;
    height: 3px;
}

.hamburger-menu {position: relative;transform: translateY(15px);background: #fff;transition: all 0ms 300ms;user-select: none}
.hamburger-menu.animate {background: rgba(255, 255, 255, 0);}
.hamburger-menu:before {content: "";position: absolute;left: 0;bottom: 9px;background: #fff;transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);}
.hamburger-menu:after {content: "";position: absolute;left: 0;top: 9px;background: #fff;transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);}
.hamburger-menu.animate:after {top: 0;transform: rotate(45deg);transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);}
.hamburger-menu.animate:before {bottom: 0;transform: rotate(-45deg);transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);}

#v--menu .mobile--personal {display: flex;flex-direction: column;background-color: #F6F6F6;position: relative;border-radius: 12px;margin-bottom: 10px;padding-left: var(--gap);padding-right: var(--gap)}
#v--menu .mobile--personal-arrow {width: 20px;height:20px;position: absolute;top:50%;right:0;transform: translateY(-50%)}
#v--menu .mobile--personal-label {color:#9CA0A9;font-size: 12px;line-height: 15px;margin-bottom: 8px;}
#v--menu .mobile--personal-name {color:var(--a);font-size: 16px;line-height: 20px;font-weight: 500}
#v--menu .mobile--personal-arrow svg {width:12px;height:6px;transform: rotate(-90deg)}
#v--menu .v--menu-content .header--loc {margin-bottom: 8px;padding: 15px 55px 10px 15px;color:var(--main);fill:var(--main)}

#v--menu .mobile--authorize {background-color: #F6F6F6;border-radius: 12px;margin-bottom: 10px;padding: var(--gap)}
#v--menu .mobile--authorize .btn--fill {gap:10px;fill:#fff;padding: 15px 15px 15px 0;color: #fff;}
#v--menu .mobile--authorize-title {color:var(--a);font-size: 18px;line-height: 22px;font-weight: 500;margin-bottom: 8px}
#v--menu .mobile--authorize-desc {color:var(--a);font-size: 14px;line-height: 19px;margin-bottom: 12px}

#v--menu .mobile--menu-icons {padding-bottom: 12px;margin-bottom: 12px;border-bottom: 1px solid #E8EBF1;padding-left: var(--gap);padding-right: var(--gap)}
#v--menu .mobile--menu-icon {gap:8px}
#v--menu .mobile--menu-icon.--red {color:var(--main);)}
#v--menu .mobile--menu-icon.--red .svg--fill svg *{fill:var(--main)}
#v--menu .mobile--menu-icon i, #v--menu .mobile--menu-icon svg {width: 16px;height: 16px}
#v--menu .mobile--menu-text {margin-left: 6px;display: inline-block}

#v--menu .v--menu-bottom {padding-top: 12px;border-top: 1px solid #E8EBF1;margin-left: var(--gap);margin-right: var(--gap)}
#v--menu .header--phone-box {gap:8px;}
#v--menu .header--phone-box a {padding-bottom: 0;font-weight: 600}

#v--menu .mobile--menu-icon {margin-bottom: 8px;padding: 9px 0;}
#v--menu .mobile--menu-icon:last-child {margin-bottom: 0}

#v--menu .mobile--menu-box {display: inline-flex;align-items: center;gap:8px;position: relative}

#v--menu .mobile--menu-icons > a .js--basket-count, #v--menu .mobile--menu-icons > a .js--basket-count {padding: 2px 4px;font-size: 10px;background-color: var(--main);right: 0;top:0;transform: translateX(calc(100% + 10px))}
#v--menu .mobile--menu-icons > a:not([data-value]) .js--basket-count, #v--menu .mobile--menu-icons > a[data-value="0"] .js--basket-count {padding: 0}
#v--menu .header--phone{justify-content: flex-start}

@media screen and (max-width: 1024px) {
    .header--mobile-buttons{display: flex;align-items: center;justify-content: center}
    #menu-wrapper {display: block}

    .header--mobile-buttons.opened .header--fixed-menu {transform: translateX(0)  translate3d(0,0,0);}
    .header--mobile-buttons .menu--background {position: fixed;top:0;right:0;width: 100%;height: 100vh;background-color: rgba(0,0,0,0.3);display: block;transform: translateX(-1000px);visibility: hidden;}
    .header--mobile-buttons.opened .menu--background {transform: translateX(0px);visibility: visible}

    .v--menu-content .header--loc {display: flex;gap:8px}
    #v--menu .header--phone-box {display: flex;justify-content: flex-start;flex-wrap: wrap}
    #v--menu .header--socials {display: flex;margin-top: var(--gap)}
    #v--menu .header--social {width: 44px;height: 44px;padding: 0;display: flex;align-items: center;justify-content: center;background-color:#F6F6F6;border-radius:6px;}
    #v--menu .header--social svg {width: 20px;height: 20px;}
}

@media screen and (max-width: 768px) {

}