:root {
--rmm-width: 320px;
--rmm-bg: #ffffff;
--rmm-text: var(--rz-green, #1a1a1a);
--rmm-text-muted: #777777;
--rmm-border: #e8e8e8;
--rmm-primary: var(--rz-green, #1a1a1a);
--rmm-primary-text: #ffffff;
--rmm-secondary-bg: #f5f5f5;
--rmm-hover-bg: #f0f0f0;
--rmm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--rmm-font-size: 14px;
--rmm-z: 999998;
--rmm-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--rmm-item-height: 52px;
} #rmm-drawer *,
#rmm-drawer *::before,
#rmm-drawer *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#rmm-drawer {
font-family: var(--rmm-font);
font-size: var(--rmm-font-size);
color: var(--rmm-text);
line-height: 1.5;
}
#rmm-drawer a {
color: inherit;
text-decoration: none;
}
#rmm-drawer ul,
#rmm-drawer ol {
list-style: none;
margin: 0;
padding: 0;
}
#rmm-drawer img {
display: block;
max-width: 100%;
height: auto;
}
#rmm-drawer button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
padding: 0;
line-height: 1;
} #rmm-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: calc(var(--rmm-z) - 1);
opacity: 0;
visibility: hidden;
transition: opacity var(--rmm-transition), visibility var(--rmm-transition);
}
body.rmm-open #rmm-overlay {
opacity: 1;
visibility: visible;
} #rmm-drawer {
position: fixed;
top: 0;
bottom: 0;
width: var(--rmm-width);
max-width: 100vw;
background: var(--rmm-bg);
z-index: var(--rmm-z);
display: flex;
flex-direction: column;
will-change: transform;
overflow: hidden;
transition: transform var(--rmm-transition);
}
#rmm-drawer.rmm-dir-left {
left: 0;
right: auto;
transform: translateX(-100%);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
}
#rmm-drawer.rmm-dir-right {
right: 0;
left: auto;
transform: translateX(100%);
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}
body.rmm-open #rmm-drawer {
transform: translateX(0);
} .admin-bar #rmm-drawer {
top: 32px;
}
@media (max-width: 782px) {
.admin-bar #rmm-drawer {
top: 46px;
}
}
@media (max-width: 480px) {
#rmm-drawer {
width: 100vw;
}
}
body.rmm-open {
overflow: hidden;
} #rmm-drawer .rmm-header {
display: flex;
align-items: center;
gap: 8px;
padding: 0 20px;
height: 64px;
border-bottom: 1px solid var(--rmm-border);
flex-shrink: 0;
}
#rmm-drawer .rmm-title {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rmm-text);
}
#rmm-drawer .rmm-logo {
display: flex;
align-items: center;
}
#rmm-drawer .rmm-logo img {
height: auto;
}
#rmm-drawer .rmm-close {
margin-left: auto;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--rmm-text);
transition: background var(--rmm-transition), transform 0.2s;
flex-shrink: 0;
} #rmm-drawer.rmm-close-left .rmm-close {
margin-left: 0;
margin-right: auto;
order: -1;
}  #rmm-drawer.rmm-title-center .rmm-header {
position: relative;
}
#rmm-drawer.rmm-title-center .rmm-title,
#rmm-drawer.rmm-title-center .rmm-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
max-width: 60%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} #rmm-drawer.rmm-title-right .rmm-title,
#rmm-drawer.rmm-title-right .rmm-logo {
margin-left: auto;
} #rmm-drawer .rmm-close:hover {
background: var(--rmm-secondary-bg);
transform: rotate(90deg);
} #rmm-drawer .rmm-search {
padding: 12px 16px;
border-bottom: 1px solid var(--rmm-border);
flex-shrink: 0;
}
#rmm-drawer .rmm-search form {
display: flex;
align-items: center;
background: var(--rmm-secondary-bg);
border-radius: 6px;
padding: 0 12px;
gap: 8px;
}
#rmm-drawer .rmm-search-icon {
color: var(--rmm-text-muted);
display: flex;
align-items: center;
flex-shrink: 0;
}
#rmm-drawer .rmm-search-input {
flex: 1;
border: none;
background: transparent;
font-family: var(--rmm-font);
font-size: 13px;
color: var(--rmm-text);
padding: 10px 0;
outline: none;
width: 100%;
-webkit-appearance: none;
}
#rmm-drawer .rmm-search-input::placeholder {
color: var(--rmm-text-muted);
} #rmm-drawer .rmm-nav {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #ccc transparent;
}
#rmm-drawer .rmm-nav::-webkit-scrollbar {
width: 4px;
}
#rmm-drawer .rmm-nav::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 2px;
} #rmm-drawer .rmm-menu {
list-style: none;
margin: 0;
padding: 0;
}
#rmm-drawer .rmm-item {
border-bottom: 1px solid var(--rmm-border);
}
#rmm-drawer .rmm-item:last-child {
border-bottom: none;
} #rmm-drawer .rmm-item-wrap {
display: flex;
align-items: stretch;
}
#rmm-drawer .rmm-link {
display: flex;
align-items: center;
flex: 1;
padding: 0 20px;
min-height: var(--rmm-item-height);
font-size: 14px;
font-weight: 500;
color: var(--rmm-text);
transition: background var(--rmm-transition), color var(--rmm-transition);
}
#rmm-drawer .rmm-link:hover,
#rmm-drawer .rmm-current > .rmm-link,
#rmm-drawer .rmm-current > .rmm-item-wrap .rmm-link {
background: var(--rmm-hover-bg);
color: var(--rmm-primary);
} #rmm-drawer .rmm-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
flex-shrink: 0;
color: var(--rmm-text-muted);
border-left: 1px solid var(--rmm-border);
transition: background var(--rmm-transition), color var(--rmm-transition);
}
#rmm-drawer .rmm-toggle:hover {
background: var(--rmm-hover-bg);
color: var(--rmm-primary);
}
#rmm-drawer .rmm-toggle svg {
transition: transform 0.25s;
}
#rmm-drawer .rmm-toggle[aria-expanded="true"] svg {
transform: rotate(180deg);
} #rmm-drawer .rmm-submenu {
background: var(--rmm-secondary-bg);
border-top: 1px solid var(--rmm-border);
}
#rmm-drawer .rmm-submenu[hidden] {
display: none;
}
#rmm-drawer .rmm-submenu.rmm-open {
display: block;
animation: rmmSlideDown 0.2s ease;
}
@keyframes rmmSlideDown {
from { opacity: 0; transform: translateY(-4px); }
to   { opacity: 1; transform: translateY(0); }
}
#rmm-drawer .rmm-submenu .rmm-item {
border-bottom: 1px solid var(--rmm-border);
}
#rmm-drawer .rmm-submenu .rmm-item:last-child {
border-bottom: none;
}
#rmm-drawer .rmm-submenu .rmm-link {
padding-left: 36px;
font-size: 13px;
font-weight: 400;
min-height: 44px;
}
#rmm-drawer .rmm-submenu .rmm-submenu .rmm-link {
padding-left: 52px;
}
#rmm-drawer .rmm-submenu .rmm-item-wrap {
align-items: stretch;
} #rmm-drawer .rmm-footer-cart {
border-top: 1px solid var(--rmm-border);
padding: 12px 20px;
flex-shrink: 0;
}
#rmm-drawer .rmm-cart-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
color: var(--rmm-text);
transition: background var(--rmm-transition);
}
#rmm-drawer .rmm-cart-link:hover {
background: var(--rmm-hover-bg);
}
#rmm-drawer .rmm-cart-icon {
display: flex;
align-items: center;
color: var(--rmm-text);
}
#rmm-drawer .rmm-cart-label {
flex: 1;
}
#rmm-drawer .rmm-cart-count {
min-width: 22px;
height: 22px;
padding: 0 6px;
background: var(--rmm-primary);
color: var(--rmm-primary-text);
font-size: 11px;
font-weight: 700;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
} #rmm-drawer .rmm-social {
display: flex;
gap: 10px;
padding: 14px 20px;
border-top: 1px solid var(--rmm-border);
flex-shrink: 0;
}
#rmm-drawer .rmm-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--rmm-secondary-bg);
color: var(--rmm-text);
transition: background var(--rmm-transition), color var(--rmm-transition);
}
#rmm-drawer .rmm-social-link:hover {
background: var(--rmm-primary);
color: var(--rmm-primary-text);
} .rmm-btn-icon {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: none;
cursor: pointer;
color: inherit;
font-family: inherit;
font-size: inherit;
padding: 0;
line-height: 1;
}
.rmm-btn-label {
font-size: 14px;
font-weight: 500;
}