/*
* Advanced Mega Menu — mobile styles.
* The breakpoint itself is applied dynamically by mobile-nav.js (reading
* the configured tablet/mobile breakpoints), which toggles the
* `.amm-menu--mobile` class on — these rules never rely on a
* hardcoded @media breakpoint so the admin-configured value is always
* honored.
*/
.amm-menu--mobile .amm-menu__item {
position: static;
}
.amm-menu--mobile .amm-menu__mega {
position: static;
display: none;
width: 100%;
max-width: none;
min-width: 0;
box-shadow: none;
border-width: 1px 0 0;
border-radius: 0;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition: none;
}
/*
* Note: `.is-open` (the desktop hover/click state owned by frontend.js) is
* deliberately NOT a reveal condition here. On this layout hover is switched
* off entirely and the panel opens only from a tap — via `is-submenu-open`,
* set by the arrow control or by tapping the parent itself (mobile-nav.js).
* Emulated hover on touch devices can therefore never pop a panel open.
*/
/*
* Parent-item arrow + accordion for native (non-mega) submenus.
*
* On this layout a parent is opened by tapping its arrow
* (`.amm-submenu-toggle`, injected by Frontend\FrontendModule) — or the
* parent label itself when that parent has no real URL to navigate to.
* Either way mobile-nav.js toggles `is-submenu-open` on that , closing
* any sibling branch so only one is expanded at a time.
*
* Every rule below uses the child combinator so a parent only ever governs
* its OWN submenu. That is what makes this work unchanged for a menu with
* many parents and for submenus nested arbitrarily deep — each carries
* its own arrow, its own state class, and its own submenu.
*/
.amm-menu--mobile .amm-menu__item--has-children,
.amm-menu--mobile .amm-menu__item--has-mega {
position: static;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.amm-menu--mobile .amm-menu__item--has-children > a,
.amm-menu--mobile .amm-menu__item--has-mega > a {
flex: 1 1 auto;
min-width: 0;
}
.amm-menu--mobile .amm-menu__item--has-children > .amm-submenu-toggle,
.amm-menu--mobile .amm-menu__item--has-mega > .amm-submenu-toggle {
flex: none;
width: 44px;
height: 44px;
margin-inline-start: auto;
}
/* rem-based so the hit target stays proportionate regardless of the (often
large) link font-size a theme sets on the responsive menu. */
.amm-menu--mobile .amm-submenu-toggle__icon {
width: 0.7rem;
height: 0.7rem;
border-width: 2px;
}
/* The submenu / mega panel drops onto its own full-width row below the
label + arrow. */
.amm-menu--mobile .amm-menu__item--has-children > .sub-menu,
.amm-menu--mobile .amm-menu__item--has-children > .amm-menu__mega,
.amm-menu--mobile .amm-menu__item--has-mega > .amm-menu__mega {
flex-basis: 100%;
order: 1;
}
/* Native submenu: collapsed until the arrow opens it. `!important` guards
against theme list styles (e.g. `.menu ul { display: flex }`). */
.amm-menu--mobile .amm-menu__item--has-children:not(.amm-menu__item--has-mega) > .sub-menu {
position: static;
display: none !important;
width: 100%;
min-width: 0;
margin: 0;
padding: 0.25rem 0 0.25rem 1rem;
border: 0;
border-radius: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition: none;
}
.amm-menu--mobile .amm-menu__item--has-children:not(.amm-menu__item--has-mega).is-submenu-open > .sub-menu {
display: block !important;
}
/* Whole mega menu: on this layout it is disclosed only by a tap — the arrow
control, or the parent item itself. Hover plays no part (see note above). */
.amm-menu--mobile .amm-menu__item--has-mega.is-submenu-open > .amm-menu__mega {
display: block;
}
/*
* Mode-specific rules below. `data-mobile-behavior` lives on the
* `.amm-menu__mega` element itself (set by Frontend\Renderer), not on the
* `.amm-menu--mobile` element (set by mobile-nav.js on ) — so every
* selector here scopes by `.amm-menu--mobile` as an ancestor, then
* re-selects `.amm-menu__mega[data-mobile-behavior="..."]` as the element
* that actually carries the attribute, rather than combining the two into
* one compound selector (which would never match, since they're never the
* same element).
*/
/* Accordion mode (default) */
.amm-menu--mobile .amm-menu__mega--tabbed[data-mobile-behavior="accordion"] {
flex-direction: column;
}
.amm-menu--mobile .amm-menu__mega[data-mobile-behavior="accordion"] .amm-menu__tablist {
display: none;
}
.amm-menu--mobile .amm-menu__mega[data-mobile-behavior="accordion"] .amm-menu__panel {
display: block !important;
}
.amm-menu--mobile .amm-menu__mega[data-mobile-behavior="accordion"] .amm-menu__accordion-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.75em 0;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
font: inherit;
font-weight: 600;
cursor: pointer;
color: inherit;
}
.amm-menu--mobile .amm-menu__mega[data-mobile-behavior="accordion"] .amm-menu__accordion-trigger[aria-expanded="false"] + .amm-menu__panel {
display: none !important;
}
.amm-menu--mobile .amm-menu__mega[data-mobile-behavior="accordion"] .amm-menu__accordion-icon {
transition: transform 150ms ease;
}
.amm-menu--mobile .amm-menu__mega[data-mobile-behavior="accordion"] .amm-menu__accordion-trigger[aria-expanded="true"] .amm-menu__accordion-icon {
transform: rotate(180deg);
}
/* Horizontal scroll tabs mode */
.amm-menu--mobile .amm-menu__mega[data-mobile-behavior="horizontal-scroll"] .amm-menu__tablist {
display: flex;
flex-direction: row;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
border-inline-end: 0;
padding-inline-end: 0;
flex: none;
}
.amm-menu--mobile .amm-menu__mega[data-mobile-behavior="horizontal-scroll"] .amm-menu__tab {
flex: 0 0 auto;
white-space: nowrap;
}
/* Vertical tabs mode */
.amm-menu--mobile .amm-menu__mega--tabbed[data-mobile-behavior="vertical-tabs"] {
flex-direction: column;
}
.amm-menu--mobile .amm-menu__mega[data-mobile-behavior="vertical-tabs"] .amm-menu__tablist {
flex-direction: row;
flex-wrap: wrap;
border-inline-end: 0;
padding-inline-end: 0;
margin-bottom: 0.5rem;
}
/* Standard dropdown mode: identical structure to accordion but without the
chevron affordance, since it mimics a plain native submenu. */
.amm-menu--mobile .amm-menu__mega[data-mobile-behavior="dropdown"] .amm-menu__tablist {
display: none;
}
.amm-menu--mobile .amm-menu__mega[data-mobile-behavior="dropdown"] .amm-menu__panel {
display: block !important;
}
.amm-menu--mobile .amm-menu__mega[data-mobile-behavior="dropdown"] .amm-menu__accordion-icon {
display: none;
}
/* Off-canvas container (optional; enabled per Settings) */
.amm-offcanvas {
position: fixed;
top: 0;
bottom: 0;
width: min(85vw, 360px);
background: #fff;
z-index: 100000;
overflow-y: auto;
transition: transform 250ms ease;
box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
}
.amm-offcanvas[data-position="left"] {
left: 0;
transform: translateX(-100%);
}
.amm-offcanvas[data-position="right"] {
right: 0;
transform: translateX(100%);
}
.amm-offcanvas.is-open {
transform: translateX(0);
}
.amm-offcanvas__overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 99999;
opacity: 0;
visibility: hidden;
transition: opacity 250ms ease;
}
.amm-offcanvas__overlay.is-open {
opacity: 1;
visibility: visible;
}
.amm-offcanvas__close {
background: transparent;
border: 0;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
padding: 1rem;
}
body.amm-no-scroll {
overflow: hidden;
}