/****************************
 * Menu > Common
****************************/
/* clear list style */
.desktop-menu ul {list-style:none; margin:0;}
.desktop-menu ul > li {padding:0; position:relative;}
.desktop-menu ul > li > a {text-decoration:none; display:inline-block; color:var(--menu-text);}

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

/* current */
.desktop-menu ul > li.current-menu-item > a {font-weight:600!important; color:var(--menu-text); text-decoration:underline;}

/* hide unused submenus */
.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;}

/* submenu animation (search submenuAnimationDelay to edit stagger time) */
.vii-language-switcher-hover:hover ul > li,
.desktop-menu ul.menu > li[class*="has-child"]:not(.vii-mega-menu-item):hover > ul.sub-menu > li {
    animation:menu-slide-fade-in .4s ease forwards;
    opacity:0;
}
@keyframes menu-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:15px;}
.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), fantasy; font-size:.7em;
    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(--menu-text); border-radius:3px; text-decoration:none;
    background:transparent; color:var(--menu-text);
    transition:none;
}

/****************************
 * Menu > Lv1
****************************/
.desktop-menu ul.menu {display:flex; gap:0 48px;}
.desktop-menu ul.menu > li > a {
    display:flex; align-items:center; justify-content:center;
    padding-top:5px; padding-bottom:5px;
}
.desktop-menu ul > li > a:hover,
.desktop-menu ul > li > a:focus {text-decoration:underline;}


/****************************
 * Menu > Lv2
****************************/
.desktop-menu ul.menu > li > ul.sub-menu:before {
    content:''; position:absolute; bottom:100%; left:0; width:100%;
    height:15px;
}
.desktop-menu ul.sub-menu {
    position:absolute; top:calc(100% + 15px); left:-12px; z-index:2;
    min-width:calc(100% + 24px); max-width:300px;
    background:#fff; border:1px solid #000;
    transition:var(--vii-transition);
}
.desktop-menu ul.sub-menu > li:not(:last-child) {border-bottom:1px solid rgba(0, 0, 0, .2);}
.desktop-menu ul.sub-menu > li > a {
    display:block; padding:12px;
    width:max-content; max-width:100%;
    color:var(--vii-color-primary);
}

/* placeholder for pointer icon */
.desktop-menu ul.sub-menu:after {
    content:""; position:absolute; left:0; bottom:100%; right:0;
    height:10px;
}

/* has submenu arrow */
.desktop-menu ul.sub-menu > li[class*="has-child"] > a {padding-right:40px;}
.desktop-menu ul.sub-menu > li[class*="has-child"] > a:after {right:20px;}
.desktop-menu ul.sub-menu > li[class*="has-child"]:hover > a:after {transform:translateY(-50%) rotate(-90deg);}


/****************************
 * Menu > Lv3
****************************/
.desktop-menu ul.sub-menu ul.sub-menu {
    left:100%; top:0;
    margin-left:10px; margin-top:0;
}

/* pointer */
.desktop-menu ul.sub-menu ul.sub-menu:before {
    right:100%; top:15%; left:auto;
    border-top:7px solid transparent;
    border-right:7px solid #fff;
    border-bottom:7px solid transparent;
}

/* placeholder for pointer icon */
.desktop-menu ul.sub-menu ul.sub-menu:after {
    top:0; bottom:0; right:100%; left:auto;
    width:10px; height:auto;
}


/****************************
 * Menu Responsive
****************************/
@media only screen and (max-width:1380px) {
    .desktop-menu ul.menu {gap:0 25px;}
}



/****************************
 * Menu Product
****************************/
.desktop-menu li.vii-mega-menu-item > ul.sub-menu {
    left:0; width:auto; min-width:unset; max-width:unset;
    display:flex; border-radius:0;
    padding:16px 0;
}
.desktop-menu li.vii-mega-menu-item > ul.sub-menu > li {min-height:200px;}
.desktop-menu li.vii-mega-menu-item ul.sub-menu > li {padding:0 12px; width:150px; border:none;}
.desktop-menu li.vii-mega-menu-item > ul.sub-menu > li:not(:last-child):not(.vii-menu-item-image) {border-right:1px solid #000;}

.desktop-menu li.vii-mega-menu-item ul.sub-menu > li > a {
    padding:0; font-size:var(--vii-size-18); font-weight:400; letter-spacing: 0.04em; line-height: 1.2;
}
.desktop-menu li.vii-mega-menu-item ul.sub-menu > li > a img {aspect-ratio:290/355; width:290px;}


.desktop-menu li.vii-mega-menu-item ul.sub-menu ul.sub-menu {
    padding-top:15px;
    position:relative; opacity:1; visibility:visible; transform:none; left:auto; margin:0;
    border:none; border-radius:0; min-width:auto; max-width:unset; width:auto;
}
.desktop-menu li.vii-mega-menu-item ul > li[class*="has-child"] > a:after {display:none;}
.desktop-menu li.vii-mega-menu-item ul.sub-menu ul.sub-menu li {padding:0; border:none; display:block; width:100%;}
.desktop-menu li.vii-mega-menu-item ul.sub-menu ul.sub-menu li:not(:first-child) {padding-top:5px;}
.desktop-menu li.vii-mega-menu-item ul.sub-menu ul.sub-menu li a {font-size:var(--vii-size-body-cta); font-weight:300;}

.desktop-menu li.vii-mega-menu-item ul.sub-menu > li.vii-menu-item-image {width:200px; padding:0 14px;}