.header-nav-drawer {
--header-nav-drawer-slide-anime-duration: 200ms;

position: fixed;
z-index: -1;
display: none;
pointer-events: none;
transition: z-index 1ms ease var(--header-nav-drawer-slide-anime-duration);
}

.header-nav-drawer--lockscreen {
overflow: hidden !important;
}

.header-nav-drawer.open {
z-index: var(--z-index-fixed);
pointer-events: all;
transition: z-index 1ms ease;
}
.header-nav-drawer:after {
content: "";
position: absolute;
width: 100vw;
left: 0;
top: 0;
height: 4px;
background: #E60044;
z-index: 100;
}
.header-nav-drawer,
.header-nav-drawer__backdrop,
.header-nav-drawer__content {
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
}

@media (max-width: 959px) {
.header-nav-drawer .body-font-bold {
font-weight: 700;
}
}

.header-nav-drawer__backdrop {
position: fixed;
z-index: -1;
display: block !important;
width: 100%;
height: 100vh;
background: rgb(0 0 0 / 40%);
opacity: 0;
transition:
opacity var(--header-nav-drawer-slide-anime-duration) ease-in-out,
z-index 1ms ease var(--header-nav-drawer-slide-anime-duration);
}

.header-nav-drawer.open .header-nav-drawer__backdrop {
opacity: 1;
}

.header-nav-drawer__content {
position: fixed;
gap: 0;
width: 400px;
padding: 15px 0;
background: rgb(var(--color-background));
transition:
width var(--header-nav-drawer-slide-anime-duration) ease,
transform var(--header-nav-drawer-slide-anime-duration) ease-out;
transform: translateX(-100%); 

}

@media (max-width: 959px) {
.header-nav-drawer__content {
width: 80%;position: relative;
}
.drawer__header--fixed{width: 100%;}
}

.header-nav-drawer.open .header-nav-drawer__content {
transition:
width var(--header-nav-drawer-slide-anime-duration) ease,
transform var(--header-nav-drawer-slide-anime-duration) ease-in;
transform: translateX(0);
}

.header-nav-drawer__header {
padding-inline: 30px;
}

@media (max-width: 959px) {
.header-nav-drawer__header {
padding-inline: 0px;
}
}

.header-nav-drawer__header-container {
box-sizing: content-box;
display: flex;
gap: 15px;
align-items: center;
justify-content: space-between;
height: 28px;
padding-block-end: 15px;
color: rgb(var(--color-text));
border-block-end: 1px solid rgb(var(--color-entry-line));
}

.header-nav-drawer__login {
display: inline-flex;
flex: 1;
gap: 8px;
align-items: center;
}

.header-nav-drawer__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
}
a.header-nav-drawer__icon{color: #fff;}
.header-nav-drawer__ellipsis {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
white-space: normal;
-webkit-box-orient: vertical;
}

.header-nav-drawer__menu {
--nav-drawer-padding-inline: 20px;
--nav-drawer-padding-block: 12px;
}

.header-nav-drawer__menu-control {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
padding: var(--nav-drawer-padding-block) var(--nav-drawer-padding-inline);
color: rgb(var(--color-text));
}

.header-nav-drawer__menu-control > a {
color: inherit;
}

.header-nav-drawer__menu-control .header-nav-drawer__menu-icon {
width: 10px;
height: 10px;
}

.header-nav-drawer__menu-control .header-nav-drawer__menu-icon > svg {
--animation-rotate-degree: -270deg;

position: absolute;
opacity: 0;
transition: transform 300ms ease;
transform: rotate(0deg) scale(1);
}

details:not([open])
.header-nav-drawer__menu-control
.header-nav-drawer__menu-icon
> .icon-arrow-thin {
opacity: 1;
transform: rotate(0deg) scale(1);
}

details:not([open])
.header-nav-drawer__menu-control
.header-nav-drawer__menu-icon
> .icon-minus {
opacity: 0;
transform: rotate(var(--animation-rotate-degree)) scale(0);
}

details[open]
.header-nav-drawer__menu-control
.header-nav-drawer__menu-icon
> .icon-arrow-thin {
opacity: 0;
transform: rotate(var(--animation-rotate-degree)) scale(0);
}

details[open]
.header-nav-drawer__menu-control
.header-nav-drawer__menu-icon
> .icon-minus {
opacity: 1;
transform: rotate(0) scale(1);
}

.header-nav-drawer__submenu {
--nav-drawer-submenu-padding-inline: 15px;

overflow: hidden;
background: rgb(0 0 0 / 5%);
}

.header-nav-drawer__submenu .header-nav-drawer__submenu {
background-color: rgb(0 0 0 / 0%);
}

details:not([open]) + .header-nav-drawer__submenu {
max-height: 0;
color: rgb(0 0 0 / 0%);
transition:
max-height 360ms ease,
color 200ms ease;
}

details[open] + .header-nav-drawer__submenu {
max-height: 100vh;
color: rgb(var(--color-text));
transition:
max-height 360ms ease-in,
color 200ms ease-in-out 200ms;
}

details[open]
+ .header-nav-drawer__submenu
details:not([open])
+ .header-nav-drawer__submenu {
color: rgb(0 0 0 / 0%);
}

details:not([open])
+ .header-nav-drawer__submenu
details[open]
+ .header-nav-drawer__submenu {
color: rgb(0 0 0 / 0%);
transition-delay: 0ms, 0ms;
}

details[open]
+ .header-nav-drawer__submenu
details[open]
+ .header-nav-drawer__submenu {
color: rgb(var(--color-text));
}

.header-nav-drawer__submenu .header-nav-drawer__menu-control {
padding-inline-start: calc(
var(--nav-drawer-padding-inline) +
(
var(--nav-drawer-submenu-padding-inline) *
(var(--nav-drawer-submenu-level, 1) - 1)
)
);
color: inherit;
}

details + .header-nav-drawer__submenu .header-nav-drawer__menu-control {
transition: transform 400ms ease-in;
}

details:not([open])
+ .header-nav-drawer__submenu
.header-nav-drawer__menu-control {
transform: translate(4px, 4px) !important;
}

details[open]
+ .header-nav-drawer__submenu
> li
> .header-nav-drawer__menu-control,
details[open]
+ .header-nav-drawer__submenu
> li
> details
.header-nav-drawer__menu-control {
transform: translate(0, 0);
} 
.header-nav-drawer__content .content__box {
background: #fff;
padding: 0 0;
width: 100%;
position: relative;
height: calc(100% - 0px);
overflow: hidden;
overflow-y: auto;
}

.basics-nav.has-dropdown {
display: block;
position: relative;
clear: both;
}

.basics-nav.has-dropdown>.basics-lable {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 9px 10px; background: #ededed;
}    .second-dropdown-conversion {
font-weight: 600;
}
.basics-nav.has-dropdown.open >.basics-lable {background: #fff;}
.basics-nav.has-dropdown .basics-lable .basics-link {
width: calc(100% - 50px - 11px);
height: 44px;
line-height: 44px;
display: block;
padding-left: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.basics-nav.has-dropdown .basics-lable .basics-link a {
font-size: 13px;
color: #000;
font-weight: 900;
text-transform: uppercase;
}
.basics-nav.has-dropdown.open .basics-lable .basics-link a{color: #FF9800;} 

.basics-nav.has-dropdown .dropdown-conversion {
position: relative;
width: 12px;
height: 12px;
}

.basics-nav.has-dropdown .dropdown-conversion:before,
.basics-nav.has-dropdown .dropdown-conversion:after {
content: "";
display: block;
background: #000;
}

.basics-nav.has-dropdown .dropdown-conversion:before {
transform: translateY(7px);
width: 100%;
height: 2px;
}

.basics-nav.has-dropdown .dropdown-conversion:after {
transform: rotate(0deg);
margin-left: 5px;
width: 2px;
height: 107%;
transition: all 0.3s;
}
.basics-nav.has-dropdown.open .dropdown-conversion:after {
transform: rotate(90deg);background: #FF9800;
}.basics-nav.has-dropdown.open .dropdown-conversion:before {
    display: none;
}
         
.basics-nav.has-dropdown .dropdown-second-tier {
padding-bottom: 22px;
display: flex;
background: #fff;
flex-wrap: wrap;
justify-content: flex-start;
}
.basics-nav.has-dropdown .dropdown-second-tier .level-two.has-third-level {
width: 35%;padding: 0;
flex-direction: column;
} 
.basics-nav.has-dropdown .dropdown-second-tier .level-two{flex-wrap: wrap;padding: 0 5px;
    display: flex;
    justify-content: flex-start;}
.level-two.has-third-level .two-layers {
WIDTH: 100%;
justify-content: space-between;
display: flex;
}  .dropdown-second-tier .level-two .second {
width: 100%;
margin-top: 7px;
}

.dropdown-second-tier .level-two .second a {
padding: 0;
font-weight: 500;
color: #000;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 13px;
width: 100%; text-align: center;
display: block;
}  
.basics-second-nav.second-dropdown.active .second a {
color: #FF9800;
font-weight: 600;
}
.basics-nav.has-dropdown .dropdown-second-tier .basics-second-nav.second-dropdown {
width: 100%;justify-content: flex-start;
}
.basics-nav.has-dropdown .two-layers {
display: flex;
flex-wrap: wrap;
align-items: center;width: 92%;
border-bottom: none;
}

.basics-nav.has-dropdown .dropdown-second-tier .basics-second-nav {
display: flex;
align-items: center;
border-bottom: none;
padding: 10px 0px;
flex-wrap: wrap;width: 33.33%;
  justify-content: center;
}

.basics-nav.has-dropdown .dropdown-second-tier .basics-second-nav .tn-box {
display: none;
}
 
a.no-pointer {
pointer-events: none;
}

.basics-second-nav.second-dropdown .second a {
pointer-events: none;margin: 0 10px;padding: 0;text-transform: uppercase;text-align: left;font-size: 12px;
}

.basics-nav.has-dropdown .dropdown-second-tier .basics-second-nav .photo-more1 {
font-size: 16px;
font-weight: 900;
color: #000;
}

.three-layers-nav {
width: 62%;
z-index: 9;
overflow-y: auto;
background: #fff;
transition: all .3s;
height:30vh;
}

.three-layers-nav.open {
right: 0;
}

#menu-drawer .photo-close {
font-size: 28px;
}

.three-layers-nav .tn-top {
display: flex;
align-items: center;
padding: 15px 10px;
font-size: 16px;
color: #000;
font-weight: 600;
}

.three-layers-nav .tn-top .photo-back {
padding-right: 15px;
font-size: 24px;
font-weight: 100;
}

.three-layers-nav .tn-top .tn-title {
width: 80%;
font-size: 14px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 10%;
padding-bottom: 5px;
transform: translateY(5px);
text-align: center;
}

.three-layers-nav .tn {
display: flex;
flex-flow: wrap;
padding:0;
}

.three-layers-nav .tn .tn-list {
width: 50%;
border-bottom: none
}.three-layers-nav .tn .tn-list a {
width: 94%;
display: block;
margin: 5px;
}

.three-layers-nav .levelthree-dropdown.tn .tn-list {
width: 100%;
}

.three-layers-nav .tn .tn-list span {
font-size: 13px;
text-align: center;
display: block;
color: #000;
text-transform: capitalize;
}

.three-layers-nav .tn-top .tn-title a {
position: relative;
}

.three-layers-nav .tn-top .tn-title a:after {
content: "";
display: inline-block;
width: 100%;
height: 1px;
background: #000;
position: absolute;
left: 0;
bottom: -2px;
}
.three-layers-nav .tn-top.table-list~.tn {
flex-flow: column;
}

.three-layers-nav .tn-top.table-list~.tn img,
.three-layers-nav .tn-top.table-list~.tn div.tn-img {
display: none;
}

.three-layers-nav .tn-top.table-list~.tn .tn-list {
width: 100%;
}

.three-layers-nav .tn-top.table-list~.tn .tn-list span {
text-align: left;
}
div.tn-img {
width: 85px;
height: 85px;
background: #f1f1f1;
display: flex;
justify-content: center;
align-items: center;
}


.header-nav-drawer__content .tack-call {
display: flex;
justify-content: space-between;
height: 60px;
align-items: center;
padding: 0;
margin: 0;
} 
.header-nav-drawer__content .tack-call li:first-child:after {
display: none;
}
.header-nav-drawer__content .tack-call li:after{
position: absolute;
height: 70%;
width: 0.1rem;
top: auto;
left: 0;
background: #ddd;
content: '';
}
.header-nav-drawer__content .tack-call li.track-order {
width: 49%;
display: flex;
justify-content: center;
position: relative;
align-items: center;
}.header-nav-drawer__content .tack-call .track-order>a {
font-weight: 600;
color: #FF9800;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 14px;
padding: 0;
} 
.header-nav-drawer__content .track-order>a i {
font-size: 22px;
font-weight: 900;
}
.header-nav-drawer__content .track-order>a span {
padding: 0;
font-size: 12px;
padding-left: 8px;
font-weight: 100;
}
.header-nav-drawer__content .drawer__close {
color: #fff;
height: 60px;
background: #FF9800;
width: 60px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding-left: 0;
position: absolute;
right: -60px;
top: 0;
}
.header-nav-drawer__content .drawer__close svg.pop-header-close{width: 28px; height: 28px;}

.header-nav-drawer__content .select-wrappercurrency {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
background: #f5f5f5;
padding: 12px 27px;
color: #000;
font-size: 14px;
font-weight: 900;
}
.header-action-bar__user .photo-yonghu1 {
font-size: 26px;
font-weight: 500;
}
.header-action-bar_cart .photo-cart {
font-size: 22px;
}
.header-nav-drawer__content .select-wrappercurrency theme-select::after{box-shadow: none;}
.header-nav-drawer__content .select-wrappercurrency theme-select select{background-color: transparent;}
@media(max-width:768px){
.header-nav-drawer__content .content__box{
position: unset;
}
.drawer__main {
height: calc(100% - 70px);
overflow: hidden;
position: relative;
}
theme-action-bar.header-action-bar.right .plugin-isv-multiLanguage{
display: none;
}
.header__container .header__container-top-wrap{
padding: 10px 15px;
}
.header-action-bar__user .photo-yonghu1 {
font-size: 24px;
}
}