.header--catalog {position: relative}
.header--vertical-menu {position: absolute;top:calc(100% + 10px);left:0;width: auto;z-index: 100;transition: .4s;display: none;opacity: 0;visibility: hidden}
.header--catalog.active .header--vertical-menu {display: block;opacity:1;visibility: visible}

#v--vertical {border: 1px solid #f2f4f4;border-radius: 12px;background-color: #fff;}
#v--vertical ul{list-style-type: none;padding: 0;margin: 0;min-width: 300px}
#v--vertical ul ul {display: none;opacity: 0;visibility: hidden}
#v--vertical li{display: flex;justify-content: space-between;gap:12px;padding-right:16px;position: relative}
#v--vertical ul li{border-bottom: 1px solid #f2f4f4;transition: .4s}
#v--vertical ul li:last-child{border-bottom: 1px solid transparent;}
#v--vertical li:hover{background-color: #f8f8f8}
#v--vertical li > a{padding:12px 16px;display: block}
#v--vertical a{text-decoration: none;font-family: 'Inter';font-weight: 500;font-size: 15px;line-height: 140%;color: var(--text);transition: .4s;flex-grow:1}
#v--vertical a:hover{text-decoration: none;color:var(--main)}
#v--vertical .svg--menu-arrow{display: flex;align-items: flex-start;padding-top: 14px}
#v--vertical .svg--menu-arrow svg{transition: .4s;transform: rotate(-90deg)}
#v--vertical li:hover .svg--menu-arrow svg{fill:var(--main);transform: rotate(90deg)}
#v--vertical li:hover ul{display: block;opacity: 1;visibility: visible;position: absolute;top: 0;left: 100%;background-color: #fff;border: 1px solid #f2f4f4;border-radius: 12px}