.cosmod-menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
width: 22px;
padding: 2px 0;
border: 0;
background: none;
cursor: pointer;
color: #fff;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.cosmod-menu-toggle span {
display: block;
height: 1.5px;
width: 100%;
background: currentColor;
margin: 3.5px 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.cosmod-menu-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(8.5px) rotate(45deg);
}
.cosmod-menu-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.cosmod-menu-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-8.5px) rotate(-45deg);
}
.cosmod-mobile-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.4s ease, visibility 0.4s ease;
z-index: 999998;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
html.cosmod-mobile-open,
body.cosmod-mobile-open {
overflow: hidden;
overscroll-behavior: none;
}
body.cosmod-mobile-open .cosmod-mobile-overlay {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.cosmod-mobile-drawer {
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: 400px;
height: 100vh;
height: 100dvh;
background: #fff;
color: #111;
z-index: 999999;
transform: translateX(-105%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
overscroll-behavior: contain;
box-shadow: 4px 0 32px rgba(0, 0, 0, 0.1);
pointer-events: none;
}
body.cosmod-mobile-open .cosmod-mobile-drawer {
transform: translateX(0);
pointer-events: auto;
}
.cosmod-mobile-overlay[hidden],
.cosmod-mobile-drawer[hidden] {
display: block !important;
}
.cosmod-mobile-panel {
position: absolute;
overscroll-behavior: contain;
touch-action: pan-y;
inset: 0;
width: 100%;
height: 100%;
background: #fff;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.cosmod-mobile-panel.active {
transform: translateX(0);
} .cosmod-mobile-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
border-bottom: 0.5px solid #e8e6e1;
position: sticky;
top: 0;
z-index: 2;
background: #fff;
}
.cosmod-mobile-panel__title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
font-weight: 400;
font-style: normal;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #111;
white-space: nowrap;
text-decoration: none;
}
.cosmod-mobile-panel__spacer {
width: 44px;
display: block;
flex-shrink: 0;
}
.cosmod-mobile-panel__back,
.cosmod-mobile-panel__close {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
border: 0;
background: none;
padding: 0;
font-size: 0;
color: transparent;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.cosmod-mobile-panel__back::after {
content: "";
display: inline-block;
width: 14px;
height: 14px;
border-left: 2.5px solid #111;
border-bottom: 2.5px solid #111;
transform: rotate(45deg);
margin-left: 4px;
}
.cosmod-mobile-panel__close {
opacity: 0.65;
position: relative;
transition: opacity 0.2s;
}
.cosmod-mobile-panel__close::before,
.cosmod-mobile-panel__close::after {
content: "";
position: absolute;
width: 22px;
height: 2.5px;
background: #111;
left: 50%;
top: 50%;
margin-left: -11px;
margin-top: -1.25px;
}
.cosmod-mobile-panel__close::before {
transform: rotate(45deg);
}
.cosmod-mobile-panel__close::after {
transform: rotate(-45deg);
}
.cosmod-mobile-panel__close:hover {
opacity: 1;
} .cosmod-mobile-list,
.cosmod-mobile-drawer .sub-menu {
list-style: none;
margin: 0;
padding: 0;
}
.cosmod-mobile-list > li,
.cosmod-mobile-drawer .sub-menu > li {
border-bottom: 0.5px solid #f0ede8;
}
.cosmod-mobile-list a,
.cosmod-mobile-drawer .sub-menu a {
display: block;
padding: 20px 22px;
text-decoration: none;
color: #111 !important;
font-size: 16px;
font-family: Georgia, "Times New Roman", Times, serif !important;
font-weight: 400 !important;
font-style: normal !important;
letter-spacing: 0.02em;
transition: background 0.15s;
}
.cosmod-mobile-list a:hover,
.cosmod-mobile-drawer .sub-menu a:hover {
background: #f9f8f6;
}
.cosmod-mobile-list ul.sub-menu {
display: none;
}
.cosmod-mobile-list .menu-item-has-children,
.cosmod-mobile-drawer .menu-item-has-children {
position: relative;
}
.cosmod-mobile-list .menu-item-has-children > a,
.cosmod-mobile-drawer .menu-item-has-children > a {
padding-right: 72px;
} .cosmod-mobile-arrow {
position: absolute;
right: 0;
top: 0;
width: 72px;
height: 100%;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 0;
background: none;
padding: 0;
z-index: 10;
font-size: 0;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.cosmod-mobile-arrow::after {
content: "";
display: inline-block;
width: 12px;
height: 12px;
border-right: 2.5px solid #777;
border-top: 2.5px solid #777;
transform: rotate(45deg);
}
.cosmod-mobile-arrow:hover::after {
border-color: #111;
} .cosmod-mobile-list > li:last-child {
border-top: 1.5px solid #e8e6e1;
margin-top: 8px;
}
.cosmod-mobile-list > li:last-child > a {
color: #000 !important;
font-size: 16px !important;
letter-spacing: 0.06em !important;
}
.cosmod-mobile-empty {
padding: 40px 20px;
text-align: center;
color: #111;
font-size: 14px;
font-family: Georgia, serif;
}
@media (max-width: 960px) {
.cosmod-menu-toggle {
display: inline-flex;
}
}
@media (min-width: 961px) {
.cosmod-mobile-overlay,
.cosmod-mobile-drawer,
.cosmod-menu-toggle {
display: none !important;
}
} @media(max-width:960px){
body.cosmod-theme #cosmod-mobile-drawer{max-width:460px;background:#f6f2eb!important;color:#142238!important}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-panel{background:#f6f2eb!important;display:flex;flex-direction:column}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-panel__head{background:#142238!important;color:#fff;min-height:80px;padding:12px 14px;flex-shrink:0;border:0}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-panel__title{color:#fff!important;font-family:Georgia,serif;font-size:17px;max-width:calc(100% - 110px);overflow:hidden;text-overflow:ellipsis;letter-spacing:.04em}
body.cosmod-theme #cosmod-mobile-drawer [data-level="0"]>.cosmod-mobile-panel__head .cosmod-mobile-panel__title{font-size:34px;letter-spacing:.12em}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-panel__close{opacity:1}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-panel__close:before,body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-panel__close:after{background:#fff;width:25px;height:1.5px;margin-left:-12.5px}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-panel__back:after{border-color:#fff;border-width:1.5px}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-search{display:flex;align-items:center;border:1px solid #bfb5a8;border-radius:8px;margin:15px 18px 9px;min-height:49px;flex-shrink:0;background:transparent}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-search button{width:46px;min-height:46px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:#142238;padding:10px}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-search svg{width:25px;height:25px}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-search input[type=search]{border:0;box-shadow:none;background:transparent;min-width:0;width:100%;padding:10px 10px 10px 0;font:17px Georgia,serif;color:#142238;outline-offset:3px}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-search input::placeholder{color:#626777;opacity:1}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-catalog{padding:0 18px;flex:1 0 auto}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-list{margin:0;padding:0;display:block}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-list>li{margin:0;padding:0;border:0;border-bottom:1px solid #ddd5c9;position:relative}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-list>li>a{color:#142238!important;font:400 22px/1.25 Georgia,serif!important;letter-spacing:-.02em!important;display:flex;align-items:center;min-height:64px;padding:14px 46px 14px 0!important;background:transparent;border:0;border-radius:0;margin:0}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-list>li>a:before{content:none!important}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-arrow{width:44px;height:64px;min-height:44px;right:0;top:0}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-arrow:after{width:11px;height:11px;border-color:#9a805c;border-width:1.5px}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-catalog>.cosmod-mobile-list>li:nth-child(n+8){display:none}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-bottom{padding:12px 18px max(8px,env(safe-area-inset-bottom));flex-shrink:0}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-utilities{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid #ddd5c9;padding:8px 0 18px}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-utilities a{display:flex;align-items:center;flex-direction:column;gap:10px;text-align:center;color:#142238!important;text-decoration:none;font:13px/1.3 Georgia,serif;padding:0 6px;border-right:1px solid #ddd5c9}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-utilities a:last-child{border:0}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-utilities svg{width:27px;height:27px}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-languages{display:flex;justify-content:space-between;gap:2px;padding:12px 0;border-bottom:1px solid #ddd5c9}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-languages a{display:flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;padding:7px;border-radius:8px;text-decoration:none;color:#142238!important;font:16px Georgia,serif}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-languages a[aria-current]{background:#142238;color:#fff!important}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-delivery{display:flex;align-items:center;justify-content:center;gap:10px;color:#142238;font:12px/1.4 Georgia,serif;margin:14px 0 4px;text-align:center}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-delivery svg{width:23px;height:23px;flex-shrink:0;color:#9a805c}
body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-panel:not([data-level="0"])>.cosmod-mobile-list{margin:0 18px}
body.cosmod-theme #cosmod-mobile-drawer a:focus-visible,body.cosmod-theme #cosmod-mobile-drawer button:focus-visible{outline:2px solid #9a805c;outline-offset:-3px}
}
@media(max-width:360px){body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-list>li>a{font-size:20px!important}body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-utilities a{font-size:12px}}
@media(prefers-reduced-motion:reduce){.cosmod-mobile-drawer,.cosmod-mobile-panel,.cosmod-mobile-overlay{transition:none}}
@media(max-width:960px){body.cosmod-theme #cosmod-mobile-drawer .cosmod-mobile-promo{display:inline-block;margin-left:10px;background:#dfcfad;border-radius:20px;padding:5px 9px;color:#142238;font:10px/1.2 Georgia,serif;letter-spacing:.12em;white-space:nowrap}}