.menu {

    z-index: 100
}



.menu .menu-table {

    height: min(420px, 70vh);

    width: 100%;

    transform: perspective(600px) rotateX(-90deg);

    opacity: 0;

    transform-origin: 0 0 0;

    visibility: hidden;

    transition: opacity .2s, transform .2s, visibility .2s;

    overflow: hidden;

    border-radius: 0 0 12px 12px;

    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.15))
}



.menu .menu-table ::-webkit-scrollbar-track {

    background-color: rgba(0, 0, 0, 0)
}



.menu .menu-table:hover {

    width: 448.275862069%
}



.menu .menu-table:hover .menu-table-left {

    width: 22.3076923077%
}



.menu .menu-table:hover .menu-table-right {

    width: 77.6923076923%
}



.menu .menu-table-left {

    width: 100%;

    height: 100%;

    overflow: auto;

    border-radius: 0 0 12px 12px
}



.menu .menu-table-left a {

    border-left: 2px solid transparent;

    font: 400 15px/1.2 var(--font-family);

    color: var(--7);

    padding: 0 15px;

    min-height: 42px
}



.menu .menu-table-right {

    width: 0;

    height: 100%;

    overflow: hidden;

    position: relative
}



.menu .menu-table-right>div.bg-white {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    overflow: auto;

    display: flex
}



.menu .menu-table-right>div.bg-white .menu-table-right-bg {

    position: absolute;

    display: block;

    top: 0;

    bottom: 0;

    right: 100%;

    width: 10px;

    background: #fff;

    z-index: -1
}



.menu .menu-table-right>div.bg-white .cat-group {

    -moz-column-break-inside: avoid;

    break-inside: avoid-column
}



.menu .menu-table-right>div.bg-white a:not(:hover) {

    color: #333
}



.menu .menu-table-right>div.bg-white .col-10>.list-group {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

}



.menu .menu-table-anchor {

    width: 22.3076923077%;

    font: 700 17px var(--font-family);

    /* text-transform: uppercase; */

    padding: 15px
}



.menu .menu-table-anchor a:hover {

    color: var(--primary-color);

}



.menu .menu-table-anchor>a {

    color: var(--1)
}



.menu .menu-table-anchor:hover .menu-table,

.menu .menu-table-anchor.show-dropdown .menu-table {

    transform: perspective(600px) rotateX(0deg);

    visibility: visible;

    opacity: 1
}



.menu ul {

    list-style: none;

    margin: auto;

    width: 100%
}



.menu ul li a {

    font: 500 15px var(--font-family);

    color: var(--7)
}



.menu ul li a.active,

.menu ul li a:hover {

    color: var(--primary-color)
}



.menu ul li a.has-child {

    margin-right: 8px;

    padding-right: 16px
}



.menu ul li a.has-child:after {

    border: 1px solid #fafafa;

    border-left: 0;

    border-top: 0;

    position: absolute;

    top: 50%;

    right: 5px;

    translate: 0 -50%;

    content: "";

    height: 5px;

    width: 5px;

    transform: rotate(45deg);

    transition: all .3s
}



.menu ul li ul {

    background-color: #fafafa;

    min-width: 250px;

    transform: perspective(600px) rotateX(-90deg);

    transform-origin: 0 0 0;

    visibility: hidden;

    transition: all .3s
}



.menu ul li ul li a {

    color: #313131;

    padding: clamp(3px, .439238653vw, 6px) 0;

    text-transform: capitalize;

    background-color: rgba(0, 0, 0, 0)
}



.menu ul li ul li a.has-child {

    margin-right: 0
}



.menu ul li ul li a.has-child:after {

    border-color: #313131;

    transform: rotate(-45deg)
}



.menu ul li ul li:not(:last-child)>a {

    border-bottom: 1px solid #ececec
}



.menu ul li ul li ul {

    left: 100%;

    margin-top: 0;

    top: -0.75rem
}



.menu ul li:hover>ul {

    opacity: 1;

    transform: perspective(600px) rotateX(0);

    transform-origin: 0 0 0;

    visibility: visible;

    transition: all .3s
}



.menu ul li.menu-line {

    background-color: rgba(0, 0, 0, .1);

    height: 15px;

    width: 1px
}



.menu ul.menu-main>li>a {

    text-transform: uppercase
}



.menu-main {

    gap: clamp(10px, calc(40 / 1230 * 100vw), 40px);

}



.menu-main>li:last-child ul {

    right: 0;

}



.menu-main>li:not(:last-child) ul {

    left: 50%;

    translate: -50% 0;

}





.menu-brand-grid {

    min-width: 385px !important;

    display: grid;

    padding: 16px !important;

    --gap: 8px;

    gap: var(--gap);

    grid-template-columns: repeat(auto-fill, minmax(max(80px, calc((100% - (var(--gap) * 3)) / 4)), 1fr));

}