.cosmod-menu-toggle {
width: 28px;
cursor: pointer;
}
.cosmod-menu-toggle span {
display: block;
height: 1.5px;
background: #fff;
margin: 6px 0;
transition: 0.3s;
}
.cosmod-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
z-index: 999998;
}
.cosmod-overlay.active {
opacity: 1;
visibility: visible;
}
.cosmod-mobile-menu {
position: fixed;
top: 0;
left: -100%;
width: 100%;
max-width: 400px;
height: 100%;
background: #fff;
z-index: 999999;
transition: left 0.4s cubic-bezier(0.4,0,0.2,1);
overflow: hidden;
box-shadow: 4px 0 32px rgba(0,0,0,0.1);
}
.cosmod-mobile-menu.active {
left: 0;
}
.menu-panel {
position: absolute;
width: 100%;
height: 100%;
left: 100%;
top: 0;
background: #fff;
transition: left 0.35s cubic-bezier(0.4,0,0.2,1);
overflow-y: auto;
}
.menu-panel.active {
left: 0;
} .menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 20px;
border-bottom: 0.5px solid #e8e6e1;
position: relative;
background: #fff;
} .menu-title-text {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
font-family: Georgia, serif !important;
font-size: 13px !important;
font-weight: 400 !important;
font-style: normal !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #111 !important;
white-space: nowrap !important;
text-decoration: none !important;
} .menu-title {
display: none !important;
} .menu-placeholder {
width: 20px;
display: block;
} .menu-back {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
font-size: 0 !important;
color: transparent !important;
}
.menu-back::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-left: 1.5px solid #111;
border-bottom: 1.5px solid #111;
transform: rotate(45deg);
} .menu-close {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
position: relative;
font-size: 0 !important;
color: transparent !important;
opacity: 0.5;
transition: opacity 0.2s;
}
.menu-close::before,
.menu-close::after {
content: "";
position: absolute;
width: 16px;
height: 1.5px;
background: #111;
}
.menu-close::before { transform: rotate(45deg); }
.menu-close::after  { transform: rotate(-45deg); }
.menu-close:hover { opacity: 1; } .cosmod-menu-list,
.sub-menu {
list-style: none;
margin: 0;
padding: 0;
}
.cosmod-menu-list li,
.sub-menu li {
border-bottom: 0.5px solid #f0ede8;
}
.cosmod-menu-list li a,
.sub-menu li a {
display: block;
padding: 17px 20px;
text-decoration: none;
color: #111 !important;
font-size: 14px;
font-family: Georgia, serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0.02em;
transition: background 0.15s;
}
.cosmod-menu-list li a:hover,
.sub-menu li a:hover {
background: #f9f8f6;
}
.cosmod-menu-list ul.sub-menu {
display: none;
} .menu-item-has-children {
position: relative;
}
.menu-item-has-children > a {
display: block;
padding-right: 56px;
}
.submenu-arrow {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
font-size: 0 !important;
}
.submenu-arrow::after {
content: "";
display: inline-block;
width: 7px;
height: 7px;
border-right: 1.5px solid #999;
border-top: 1.5px solid #999;
transform: rotate(45deg);
}
.submenu-arrow:hover::after {
border-color: #111;
} .cosmod-menu-list li a,
.sub-menu li a {
font-family: Georgia, serif !important;
font-style: normal !important;
font-weight: 400 !important;
color: #111 !important;
} .cosmod-menu-list li:last-child {
border-top: 1.5px solid #e8e6e1;
margin-top: 8px;
}
.cosmod-menu-list li:last-child a {
color:  #000000 !important;
font-size: 16px !important;
letter-spacing: 0.06em !important;
}