/****************************
 * Common
****************************/
/* open/close */
html:not(.menu-open) .px-menu-mobile {visibility:hidden; opacity:0;}
html:not(.menu-open) .px-menu-mobile-container {transform:translateX(-105%);}

/* wrapper */
[data-menu*="default"][data-menu*="mobile"] {display:block;}
.px-menu-mobile-container {
    width:100%; max-width:var(--px-mobile-menu-width); padding-top:var(--px-header-height);
    background:#fff;
}
.px-menu-mobile-inner {height:100%;}

/* close layer */
.px-menu-mobile__close {background:rgba(0, 0, 0, .3);}

/* sections */
.px-menu-mobile__section {padding:0 var(--px-gap-container) 20px;}

/* search */
.px-menu-block.search-mobile {margin:0 -16px 20px;}
.px-menu-block.search-mobile .px-search-form__field {border:none; border-bottom:2px solid #d9d9d9;}
.px-menu-block.search-mobile .px-search-form__field:focus,
.px-menu-block.search-mobile .px-search-form__field:hover {border-color:#000;}

/* button */
.px-menu-block.mobile-button {margin:0 -16px 20px; padding:0 20px 20px; border-bottom:1px solid #d9d9d9;}

/* section bottom */
.px-menu-mobile__section.bottom {}

/* Accordion Button */
.open-sub-menu {background:none; padding:5px;}
.open-sub-menu.active {transform:rotate(180deg);}
.open-sub-menu.active, .open-sub-menu:hover {color:var(--px-color-primary);}

/****************************
 * Menu
****************************/
/* Common Menu */
.mobile-menu ul > li:not(:last-child) {border-bottom:2px solid #000;}
.mobile-menu ul {list-style:none; margin:0;}
.mobile-menu ul > li {padding:0;}
.mobile-menu ul > li > a {
    position:relative; display:inline-flex; align-items:center;
    padding:10px 0; text-decoration:none; min-height:50px;

    font-weight:700; font-size:14px; text-transform:uppercase;
}

.mobile-menu ul > li > a:hover, .mobile-menu ul > li > a:focus {color:var(--px-color-primary);}
.mobile-menu ul > li[class*="current-"] > a:before {
    font-family:"icomoon"; content:"\e939";
    font-size:.5em; margin-right:1em; color:var(--px-color-primary);
}

/* Common Sub Menu */
.mobile-menu ul.sub-menu {width:100%; padding-left:15px;}
.mobile-menu ul.sub-menu > li:first-child {border-top:2px solid #000;}


/* Menu level 2 */
.mobile-menu ul ul > li {border-color:#d9d9d9 !important;}

/* Menu level 3 */
.mobile-menu ul ul ul > li {border-width:1px !important;}
.mobile-menu ul ul ul > li > a {
    text-transform:unset; font-weight:500; font-size:16px;
}


/****************************
 * Menu Has Child
****************************/
.menu-item-has-children {display:flex; flex-wrap:wrap; justify-content:space-between; position:relative;}
.menu-item-has-children > a {order:1; max-width:calc(100% - 40px);}
.menu-item-has-children > .menu-item-arrow {order:2; width:40px;}
.menu-item-has-children > ul {order:3; width:100%;}

/* Arrow button */
.menu-item-arrow {text-align:right; display:flex; justify-content:end;}
.menu-item-arrow__button {
    font-size:15px; display:flex; width:100%; align-items:center; justify-content:end;
    background:transparent;
}
.menu-item-arrow__button i {display:inline-block; transition:transform .3s ease;}
.menu-item-arrow__button.active i {transform:rotate(90deg);}

/****************************
 * Mobile Menu Responsive
****************************/
@media only screen and (max-width:1180px) {
    html.menu-open {overflow:hidden; height:100%;}
    .px-menu-mobile.hidden {display:block;}
}

@media only screen and (max-width:480px) {
    .px-menu-mobile-container {max-width:unset;}
}