/****************************
 * Menu > Common
****************************/
/* clear list style */
.desktop-menu ul {list-style:none; margin:0;}
.desktop-menu ul > li {padding:0;}
.desktop-menu ul > li > a {
    text-decoration:none; display:inline-block; font-size:16px; color:var(--vii-color-black);
    font-family:var(--vii-font-secondary); font-weight:500;
}

/* hover */
.desktop-menu ul > li > a:hover,
.desktop-menu ul > li > a:focus {color:var(--vii-color-dark-green);}

/* current */
.desktop-menu ul > li[class*="current"] > a {font-weight:700; color:var(--vii-color-dark-green);}

.desktop-menu ul > li.main-category:before {display:none;}
.main_content .desktop-menu ul.sub-menu > li.main-category > a {width:fit-content; padding-right:32px;}
.main_content .desktop-menu ul > li.main-category > a:before {
    font-family:var(--vii-font-icomoon); content:"\e959";
    line-height:1; font-size:20px; color:var(--vii-color-secondary);
    position:absolute; right:5px; top:5px;
}

/* submenu animation (search submenuAnimationDelay to edit stagger time) */
.desktop-menu li[class*="has-child"]:hover > ul.sub-menu > li {
    animation:slide-fade-in .4s ease forwards;
    opacity:0;
}
@keyframes slide-fade-in {
    0% {transform:translate(-15px); opacity:0;}
    100% {transform:translate(0); opacity:1;}
}

/* has submenu arrow */
.desktop-menu ul > li[class*="has-child"] > a {position:relative; padding-right:16px;}
.desktop-menu ul > li[class*="has-child"] > a:after {
    position:absolute; right:0; top:50%;
    display:inline-block; transform:translateY(-50%);
    content:"\e931"; font-family:var(--vii-font-icomoon); font-size:.6em;
    transition:transform .3s ease;
}
.desktop-menu li[class*="has-child"].active > a:after,
.desktop-menu li[class*="has-child"]:hover > a:after {transform:translateY(-50%) rotate(180deg);}

/* a11y */
.desktop-menu ul.menu > li > a:focus-visible {
    outline:2px solid var(--vii-color-primary); border-radius:3px; text-decoration:none;
    background:transparent; color:var(--vii-color-primary);
    transition:none;
}

/****************************
 * Menu > Lv1
****************************/
.desktop-menu ul.menu {display:flex; gap:0 35px;}
.desktop-menu ul.menu > li:not(.menu-two-column) {position:relative;}
.desktop-menu ul.menu > li:not(:hover) > ul.sub-menu {opacity:0; visibility:hidden; pointer-events:none;}
.desktop-menu ul.menu > li > a {
    display:flex; align-items:center; justify-content:center;
    padding-top:5px; padding-bottom:5px; z-index:2;
}

/* top menu > current */
.desktop-menu.top-menu ul.menu > li[class*="current"] > a:before {
    content:""; position:absolute; bottom:-2px; left:0; right:0;
    height:3px; background:var(--vii-color-primary);
}


/****************************
 * Menu > Lv2
****************************/
.desktop-menu ul.sub-menu ul.sub-menu ul.sub-menu {display:none;}

/* show/hide submenu */
.desktop-menu li:not(:hover) > ul.sub-menu {opacity:0; visibility:hidden; pointer-events:none;}

/* Sub menu level 1 */
.desktop-menu ul.menu > li > ul.sub-menu {
    --sub-spacing-left:65px;
    position:absolute; top:100%; left:50%; transform:translateX(-50%); z-index:1;
    min-width:calc(100% + 40px); padding:19px 0 2px; transition:var(--vii-transition);
}
.desktop-menu ul.menu > li > ul.sub-menu:before {
    content:""; display:block;
    width:100%; top:18px; position:absolute; bottom:0;
    background:#f9f8f3; border:1px solid #d3c6a4;
}
.desktop-menu ul.sub-menu > li > a {display:block; padding:10px 20px; white-space:nowrap;}
.desktop-menu ul.menu > li:not(.menu-two-column) > ul.sub-menu > li:not(:last-child) > a {border-bottom:1px solid #d3c6a4;}

/* Sub menu two column */
.desktop-menu ul.menu > li.menu-two-column > ul.sub-menu {
    min-width:calc((100% + var(--sub-spacing-left) + 20px) * 2 / 3);
    left:calc(-1 * var(--sub-spacing-left)); transform:translateX(0);
    padding:70px 0 32px; top:50%;
    display:flex;
}
.desktop-menu ul.menu > li.menu-two-column > ul.sub-menu:before {top:37px;}
.desktop-menu ul.menu > li.menu-two-column > ul.sub-menu > li {width:100%; position:relative; padding:0 var(--sub-spacing-left);}
.desktop-menu ul.menu > li.menu-two-column > ul.sub-menu > li:not(:last-child):after {
    content:""; display:block;
    width:1px; height:calc(100% + 65px); background:#d3c6a4;
    position:absolute; bottom:-32px; right:-1px;
}
.desktop-menu ul.menu > li.menu-two-column > ul.sub-menu > li > a {padding-left:0;}

/* has submenu arrow */
.desktop-menu ul.sub-menu > li[class*="has-child"] > a:after {display:none}

/* Col left */
.vii-menu-col.left {width:175px; height:calc(var(--vii-header-height) + 40px);}
.vii-menu-block.logo {width:100%; height:100%; top:0; left:0; background:#fff; border-radius:0 0 10px 10px;}
.vii-menu-block.logo:before {
    content:""; display:block;
    width:100%; height:35px; border-radius:0 0 10px 10px;
    border:1px solid #d3c6a4; border-top:none;
    position:absolute; bottom:0; left:-1px;
}


/****************************
 * Menu bottom
****************************/
/* Hide menu bottom at first */
.vii-menu-block.menu-bottom {
    --sub-spacing-left:65px;
    opacity:0; background:#f9f8f3;
    width:calc(100% + var(--sub-spacing-left) + 20px);
    left:calc(-1 * var(--sub-spacing-left)); top:calc(100% + 15px); z-index:0;
    padding:30px 0; border:1px solid #d3c6a4;
}

/* Sub menu of second menu */
.desktop-menu.second-menu ul > li[class*="has-child"] > a:after,
.desktop-menu.second-menu ul > li[class*="has-child"] ul.sub-menu:before,
.desktop-menu.second-menu ul > li[class*="has-child"] ul.sub-menu:after {display:none;}
.desktop-menu.second-menu ul > li[class*="has-child"] ul.sub-menu {
    width:auto; height:auto; padding:0; flex-direction:column;
    position:relative; top:0; left:0;
}
.desktop-menu.second-menu li[class*="has-child"]:hover > ul.sub-menu > li {animation:none; opacity:1;}
.desktop-menu.second-menu ul > li[class*="has-child"] ul.sub-menu > li {padding:0;}
.desktop-menu.second-menu ul > li[class*="has-child"] ul.sub-menu > li > a {
    font-family:var(--vii-font-primary); font-size:var(--vii-size-14); font-weight:400;
    padding:5px 0;
}
html.menu-open .desktop-menu.second-menu ul > li[class*="has-child"] ul.sub-menu {
    opacity:1; pointer-events:auto; visibility:visible;
}


/****************************
 * Menu > Lv3
****************************/
.desktop-menu ul.sub-menu ul.sub-menu {
    --sub-spacing-left:0px;
    width:auto; height:auto; padding:0;
    position:relative; top:0; left:0;
}
.desktop-menu li[class*="has-child"]:hover > ul.sub-menu ul.sub-menu {opacity:1; pointer-events:auto; visibility:visible;}
.desktop-menu li[class*="has-child"]:hover > ul.sub-menu ul.sub-menu > li {animation:none; opacity:1;}
.desktop-menu ul > li[class*="has-child"] ul.sub-menu ul.sub-menu > li {padding:0;}
.desktop-menu ul > li[class*="has-child"] ul.sub-menu ul.sub-menu > li > a {
    font-family:var(--vii-font-primary); font-size:var(--vii-size-14); font-weight:400;
    padding:5px 0;
}

/* Menu top */
.vii-menu-top .desktop-menu ul > li > a {color:#fff; font-size:13px; line-height:1.2;}


/****************************
 * Menu Responsive
****************************/
@media only screen and (max-width:1439px) {
    .desktop-menu ul.menu {gap:0 30px;}
    .desktop-menu ul.sub-menu, .vii-menu-block.menu-bottom {--sub-spacing-left:40px;}
    .vii-menu-row.main {--vii-gap-container:40px;}
}