.aamh-root,
.aamh-root * {
box-sizing: border-box;
}
.aamh-header {
display: none;
width: 100%;
z-index: var(--aamh-z-index, 99999);
background: var(--aamh-header-bg, #fff);
color: var(--aamh-header-color, #1f2933);
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
}
.aamh-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 68px;
padding: 10px 16px;
width: 100%;
}
.aamh-logo-wrap,
.aamh-panel-logo {
display: flex;
align-items: center;
min-width: 0;
}
.aamh-logo {
display: inline-flex;
align-items: center;
max-width: 190px;
min-height: 44px;
color: var(--aamh-header-color, #1f2933);
text-decoration: none;
}
.aamh-logo img {
display: block;
max-width: 100%;
max-height: var(--aamh-logo-max-height, 42px);
width: auto;
height: auto;
}
.aamh-logo--text {
font-size: 20px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
}
.aamh-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-left: auto;
}
.aamh-toggle,
.aamh-close,
.aamh-submenu-toggle,
.aamh-cart,
.aamh-cta {
-webkit-tap-highlight-color: transparent;
}
.aamh-toggle,
.aamh-close,
.aamh-submenu-toggle {
font: inherit;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
}
.aamh-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
min-height: 46px;
min-width: 46px;
padding: 8px;
border-radius: 999px;
color: var(--aamh-header-color, #1f2933);
}
.aamh-toggle__icon {
display: inline-grid;
place-items: center;
width: 24px;
height: 18px;
position: relative;
}
.aamh-toggle__icon::before,
.aamh-toggle__icon::after,
.aamh-toggle__icon span {
content: "";
display: block;
position: absolute;
left: 2px;
right: 2px;
height: 2px;
border-radius: 999px;
background: currentColor;
}
.aamh-toggle__icon::before { top: 1px; }
.aamh-toggle__icon span { top: 8px; }
.aamh-toggle__icon::after { top: 15px; }
.aamh-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 9px 15px;
border-radius: 999px;
background: var(--aamh-cta-bg, #4E700B);
color: var(--aamh-cta-color, #fff);
font-size: 14px;
font-weight: 700;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.aamh-cta:hover,
.aamh-cta:focus-visible {
background: var(--aamh-cta-hover-bg, #94C11A);
color: var(--aamh-cta-hover-color, #1f2933);
text-decoration: none;
}
.aamh-cart {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
min-width: 44px;
min-height: 44px;
border-radius: 999px;
color: var(--aamh-header-color, #1f2933);
text-decoration: none;
}
.aamh-cart__count {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 1px;
right: 0;
min-width: 19px;
height: 19px;
padding: 0 5px;
border-radius: 999px;
background: var(--aamh-accent, #94C11A);
color: #111;
font-size: 11px;
font-weight: 800;
line-height: 1;
}
.aamh-overlay {
position: fixed;
inset: 0;
z-index: calc(var(--aamh-z-index, 99999) + 1);
background: var(--aamh-overlay-color, rgba(0,0,0,0.48));
opacity: 0;
transition: opacity 240ms ease;
}
.aamh-overlay.aamh-is-visible {
opacity: 1;
}
.aamh-panel {
position: fixed;
inset: 0;
z-index: calc(var(--aamh-z-index, 99999) + 2);
pointer-events: none;
}
.aamh-panel__surface {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: min(88vw, 430px);
height: 100dvh;
max-height: 100dvh;
background: var(--aamh-panel-bg, #fff);
color: var(--aamh-panel-color, #1f2933);
box-shadow: -22px 0 55px rgba(15, 23, 42, 0.18);
transform: translateX(104%);
transition: transform 260ms cubic-bezier(.2, .7, .2, 1);
pointer-events: auto;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.aamh-root[data-layout="offcanvas-left"] .aamh-panel__surface {
left: 0;
right: auto;
box-shadow: 22px 0 55px rgba(15, 23, 42, 0.18);
transform: translateX(-104%);
}
.aamh-root[data-layout="fullscreen"] .aamh-panel__surface {
left: 0;
right: 0;
width: 100vw;
max-width: none;
box-shadow: none;
transform: translateY(-10px);
opacity: 0;
transition: opacity 220ms ease, transform 220ms ease;
}
.aamh-panel.aamh-is-open .aamh-panel__surface {
transform: translateX(0);
}
.aamh-root[data-layout="fullscreen"] .aamh-panel.aamh-is-open .aamh-panel__surface {
transform: translateY(0);
opacity: 1;
}
.aamh-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 72px;
padding: 12px 18px;
border-bottom: 1px solid rgba(15, 23, 42, 0.09);
}
.aamh-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 999px;
font-size: 34px;
line-height: 1;
color: var(--aamh-panel-color, #1f2933);
}
.aamh-nav {
padding: 10px 12px 28px;
}
.aamh-menu,
.aamh-sub-menu {
list-style: none;
margin: 0;
padding: 0;
}
.aamh-menu-row {
display: flex;
align-items: stretch;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.aamh-menu-link {
display: flex;
align-items: center;
flex: 1 1 auto;
min-height: 54px;
padding: 14px 8px;
color: var(--aamh-link-color, #1f2933);
font-size: var(--aamh-top-link-font-size, 18px);
font-weight: 700;
line-height: 1.25;
text-decoration: none;
}
.aamh-depth-1 .aamh-menu-link,
.aamh-depth-2 .aamh-menu-link,
.aamh-depth-3 .aamh-menu-link {
min-height: 48px;
font-size: var(--aamh-sub-link-font-size, 16px);
font-weight: 600;
}
.aamh-depth-1 .aamh-menu-link { padding-left: 24px; }
.aamh-depth-2 .aamh-menu-link { padding-left: 40px; }
.aamh-depth-3 .aamh-menu-link { padding-left: 56px; }
.aamh-menu-link:hover,
.aamh-menu-link:focus-visible {
color: var(--aamh-link-hover-color, #4E700B);
text-decoration: none;
}
.aamh-submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 52px;
min-width: 52px;
min-height: 52px;
border-left: 1px solid rgba(15, 23, 42, 0.08);
color: var(--aamh-panel-color, #1f2933);
}
.aamh-submenu-icon {
position: relative;
display: block;
width: 18px;
height: 18px;
}
.aamh-submenu-icon::before,
.aamh-submenu-icon::after {
content: "";
position: absolute;
left: 2px;
right: 2px;
top: 8px;
height: 2px;
border-radius: 999px;
background: currentColor;
transition: transform 180ms ease;
}
.aamh-submenu-icon::after {
transform: rotate(90deg);
}
.aamh-submenu-toggle[aria-expanded="true"] .aamh-submenu-icon::after {
transform: rotate(0deg);
}
.aamh-sub-menu {
background: color-mix(in srgb, var(--aamh-panel-bg, #fff) 92%, var(--aamh-accent, #94C11A));
}
.aamh-empty-menu {
margin: 24px 8px;
font-size: 16px;
}
.aamh-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.aamh-root :focus-visible {
outline: 3px solid var(--aamh-focus-color, #005fcc);
outline-offset: 3px;
}
body.aamh-menu-open {
overflow: hidden !important;
touch-action: none;
}
@media (max-width: 430px) {
.aamh-header__inner {
padding-inline: 12px;
gap: 8px;
}
.aamh-cta {
max-width: 126px;
padding-inline: 12px;
font-size: 13px;
}
.aamh-logo {
max-width: 150px;
}
}
@media (prefers-reduced-motion: reduce) {
.aamh-root *,
.aamh-overlay,
.aamh-panel__surface {
scroll-behavior: auto !important;
transition-duration: 1ms !important;
animation-duration: 1ms !important;
}
}
.aamh-menu-link img {
display: inline-block;
flex: 0 0 auto;
width: auto;
max-width: 28px;
height: auto;
margin-right: 8px;
vertical-align: middle;
}
.aamh-menu-link img:only-child {
margin-right: 0;
}
.aamh-menu-item.lang-item .aamh-menu-link {
gap: 8px;
}
.aamh-menu-item.lang-item .aamh-menu-link img {
margin-right: 0;
}