/* =========================================================================
 * Minimal Premium Menu
 * All rules are scoped under .mpm — safe next to any theme.
 * ====================================================================== */

.mpm {
	--mpm-duration: 420ms;
	--mpm-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mpm-z: 999;

	--mpm-max-width: 1200px;
	--mpm-bar-gap: 32px;
	--mpm-menu-align: flex-end;
	--mpm-sticky-offset: 0px;

	--mpm-item-gap: 8px;
	--mpm-link-padding: 8px 12px;
	--mpm-link-radius: 0px;
	--mpm-link-color: #111;
	--mpm-link-color-hover: #000;
	--mpm-link-color-active: var(--mpm-link-color-hover);

	--mpm-underline-size: 1px;
	--mpm-underline-offset: 2px;
	--mpm-underline-color: currentColor;
	--mpm-highlight-color: rgba(0, 0, 0, 0.05);

	--mpm-submenu-bg: #fff;
	--mpm-submenu-color: var(--mpm-link-color);
	--mpm-submenu-color-hover: var(--mpm-link-color-hover);
	--mpm-submenu-width: 220px;
	--mpm-submenu-padding: 10px;
	--mpm-submenu-radius: 10px;
	--mpm-submenu-offset: 8px;

	--mpm-burger-width: 26px;
	--mpm-burger-height: 16px;
	--mpm-burger-thickness: 2px;
	--mpm-burger-color: #111;
	--mpm-burger-color-open: var(--mpm-burger-color);

	--mpm-panel-width: 380px;
	--mpm-panel-align: flex-start;
	--mpm-panel-gap: 6px;
	--mpm-panel-color: var(--mpm-link-color);
	--mpm-panel-color-hover: var(--mpm-link-color-hover);
	--mpm-panel-divider: transparent;
	--mpm-backdrop: rgba(0, 0, 0, 0.4);

	--mpm-stagger-step: 55ms;

	position: relative;
	z-index: var(--mpm-z);
}

/* An open menu always wins over other navbars on the page. */
.mpm.is-open {
	z-index: calc(var(--mpm-z) + 10);
}

.mpm *,
.mpm *::before,
.mpm *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Bar
 * ---------------------------------------------------------------------- */

.mpm__bar {
	position: relative;
	/* Stays above the panel so the close button is always reachable. */
	z-index: 2;
	width: 100%;
	transition: background-color var(--mpm-duration) var(--mpm-ease),
		box-shadow var(--mpm-duration) var(--mpm-ease),
		backdrop-filter var(--mpm-duration) var(--mpm-ease);
}

.mpm__inner {
	display: flex;
	align-items: center;
	gap: var(--mpm-bar-gap);
	width: 100%;
	transition: padding var(--mpm-duration) var(--mpm-ease);
}

.mpm--width-boxed .mpm__inner {
	max-width: var(--mpm-max-width);
	margin-inline: auto;
}

.mpm--logo-end .mpm__inner {
	flex-direction: row-reverse;
}

/* Logo ------------------------------------------------------------------ */

.mpm__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
	line-height: 0;
	transition: opacity var(--mpm-duration) var(--mpm-ease);
}

.mpm__logo-img {
	display: block;
	width: 140px;
	height: auto;
	max-width: 100%;
	transition: opacity var(--mpm-duration) var(--mpm-ease);
}

.mpm__logo-img--scrolled {
	display: none;
}

.mpm.is-scrolled .mpm__logo--swap .mpm__logo-img--main {
	display: none;
}

.mpm.is-scrolled .mpm__logo--swap .mpm__logo-img--scrolled {
	display: block;
}

.mpm__logo-text {
	line-height: 1.1;
	color: var(--mpm-link-color);
	transition: color var(--mpm-duration) var(--mpm-ease);
}

/* Nav ------------------------------------------------------------------- */

.mpm__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: var(--mpm-menu-align);
	min-width: 0;
}

.mpm__extra {
	flex: 0 0 auto;
}

.mpm__menu {
	display: flex;
	align-items: center;
	gap: var(--mpm-item-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mpm__item {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mpm__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: var(--mpm-link-padding);
	border-radius: var(--mpm-link-radius);
	color: var(--mpm-link-color);
	text-decoration: none;
	transition: color var(--mpm-duration) var(--mpm-ease),
		background-color var(--mpm-duration) var(--mpm-ease),
		opacity var(--mpm-duration) var(--mpm-ease),
		transform 180ms var(--mpm-ease);
	-webkit-tap-highlight-color: transparent;
}

.mpm__link:hover,
.mpm__link:focus-visible {
	color: var(--mpm-link-color-hover);
}

.mpm__link--active {
	color: var(--mpm-link-color-active);
}

.mpm__link-text {
	position: relative;
	display: block;
}

.mpm__link:focus {
	outline: none;
}

.mpm__link:focus-visible,
.mpm__burger:focus-visible,
.mpm__submenu-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

.mpm__notice {
	margin: 0;
	padding: 8px 12px;
	font-size: 13px;
	opacity: 0.6;
}

/* -------------------------------------------------------------------------
 * Vertical orientation
 * ---------------------------------------------------------------------- */

.mpm--vertical .mpm__inner {
	flex-direction: column;
	align-items: var(--mpm-menu-align);
}

.mpm--vertical .mpm__nav {
	width: 100%;
	justify-content: inherit;
}

.mpm--vertical .mpm__menu--desktop {
	flex-direction: column;
	align-items: var(--mpm-menu-align);
	width: 100%;
}

/* Fixed side rail */
.mpm--rail {
	position: fixed;
	top: 0;
	height: 100vh;
	height: 100dvh;
}

.mpm--rail.mpm--side-left {
	left: 0;
}

.mpm--rail.mpm--side-right {
	right: 0;
}

.mpm--rail .mpm__bar,
.mpm--rail .mpm__inner {
	height: 100%;
}

.mpm--rail .mpm__inner {
	justify-content: space-between;
}

/* Vertical text: labels read top-to-bottom, stacked down the rail. */
.mpm--vtext .mpm__menu--desktop .mpm__link-text {
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

/* The logo turns with the menu so a narrow rail stays narrow. */
.mpm--vlogo:not(.is-mobile) .mpm__logo-text {
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

.mpm--vlogo-up:not(.is-mobile) .mpm__logo-text {
	transform: rotate(180deg);
}

.mpm--vlogo:not(.is-mobile) .mpm__logo {
	justify-content: center;
}

.mpm--vtext .mpm__menu--desktop .mpm__item--has-children > .mpm__link::after {
	margin-left: 0;
	margin-top: 8px;
	transform: rotate(-45deg);
}

/* Sub-panels open to the side of a vertical menu. */
.mpm--vertical .mpm__menu--desktop .mpm__submenu {
	top: 0;
	left: 100%;
	transform: translateX(calc(var(--mpm-submenu-offset) - 8px));
}

.mpm--vertical.mpm--sub-hover .mpm__menu--desktop .mpm__item--has-children:hover > .mpm__submenu,
.mpm--vertical.mpm--sub-hover .mpm__menu--desktop .mpm__item--has-children:focus-within > .mpm__submenu,
.mpm--vertical .mpm__menu--desktop .mpm__item--has-children.is-open > .mpm__submenu {
	transform: translateX(var(--mpm-submenu-offset));
}

.mpm--vertical.mpm--side-right .mpm__menu--desktop .mpm__submenu {
	left: auto;
	right: 100%;
	transform: translateX(calc(8px - var(--mpm-submenu-offset)));
}

.mpm--vertical.mpm--side-right .mpm__menu--desktop .mpm__item--has-children:hover > .mpm__submenu,
.mpm--vertical.mpm--side-right .mpm__menu--desktop .mpm__item--has-children.is-open > .mpm__submenu {
	transform: translateX(calc(-1 * var(--mpm-submenu-offset)));
}

/* -------------------------------------------------------------------------
 * Sticky / scroll states
 * ---------------------------------------------------------------------- */

.mpm--sticky:not(.mpm--rail) {
	position: sticky;
	top: var(--mpm-sticky-offset);
}

.mpm--sticky.mpm--rail {
	position: fixed;
}

.mpm--sticky .mpm__bar {
	will-change: transform;
	transition: transform var(--mpm-duration) var(--mpm-ease),
		background-color var(--mpm-duration) var(--mpm-ease),
		box-shadow var(--mpm-duration) var(--mpm-ease);
}

.mpm--sticky.is-hidden .mpm__bar {
	transform: translate3d(0, -110%, 0);
}

.mpm--sticky.is-hidden.mpm--rail .mpm__bar {
	transform: none;
}

.mpm--transparent:not(.is-scrolled) .mpm__bar {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

/* Menu is open: never hide the bar. */
.mpm.is-open.is-hidden .mpm__bar {
	transform: none;
}

/* =========================================================================
 * Hover effects (desktop menu only — the panel gets its own treatment)
 * ====================================================================== */

/* Underline reveal ------------------------------------------------------ */

.mpm--hover-underline .mpm__menu--desktop .mpm__link-text::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(-1 * var(--mpm-underline-offset));
	height: var(--mpm-underline-size);
	background-color: var(--mpm-underline-color);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--mpm-duration) var(--mpm-ease);
}

.mpm--hover-underline.mpm--underline-center .mpm__menu--desktop .mpm__link-text::before {
	transform-origin: center center;
}

.mpm--hover-underline.mpm--underline-wipe .mpm__menu--desktop .mpm__link-text::before {
	transform-origin: right center;
}

.mpm--hover-underline .mpm__menu--desktop .mpm__link:hover .mpm__link-text::before,
.mpm--hover-underline .mpm__menu--desktop .mpm__link:focus-visible .mpm__link-text::before,
.mpm--hover-underline.mpm--active-effect .mpm__menu--desktop .mpm__link--active .mpm__link-text::before {
	transform: scaleX(1);
}

.mpm--hover-underline.mpm--underline-wipe .mpm__menu--desktop .mpm__link:hover .mpm__link-text::before,
.mpm--hover-underline.mpm--underline-wipe .mpm__menu--desktop .mpm__link:focus-visible .mpm__link-text::before {
	transform-origin: left center;
}

/* Vertical text: the underline becomes a side rule. */
.mpm--vtext.mpm--hover-underline .mpm__menu--desktop .mpm__link-text::before {
	left: auto;
	right: calc(-1 * var(--mpm-underline-offset));
	top: 0;
	bottom: 0;
	width: var(--mpm-underline-size);
	height: auto;
	transform: scaleY(0);
	transform-origin: center top;
	transition: transform var(--mpm-duration) var(--mpm-ease);
}

.mpm--vtext.mpm--hover-underline .mpm__menu--desktop .mpm__link:hover .mpm__link-text::before,
.mpm--vtext.mpm--hover-underline .mpm__menu--desktop .mpm__link:focus-visible .mpm__link-text::before,
.mpm--vtext.mpm--hover-underline.mpm--active-effect .mpm__menu--desktop .mpm__link--active .mpm__link-text::before {
	transform: scaleY(1);
}

/* Text slide / reveal --------------------------------------------------- */

.mpm--hover-slide .mpm__menu--desktop .mpm__link-text {
	overflow: hidden;
}

.mpm--hover-slide .mpm__menu--desktop .mpm__link-inner {
	display: block;
	transition: transform var(--mpm-duration) var(--mpm-ease);
}

.mpm--hover-slide .mpm__menu--desktop .mpm__link-text::after {
	content: attr(data-mpm-text);
	position: absolute;
	inset: 0;
	transform: translateY(105%);
	transition: transform var(--mpm-duration) var(--mpm-ease);
	color: var(--mpm-link-color-hover);
	white-space: nowrap;
}

.mpm--hover-slide .mpm__menu--desktop .mpm__link:hover .mpm__link-inner,
.mpm--hover-slide .mpm__menu--desktop .mpm__link:focus-visible .mpm__link-inner {
	transform: translateY(-105%);
}

.mpm--hover-slide .mpm__menu--desktop .mpm__link:hover .mpm__link-text::after,
.mpm--hover-slide .mpm__menu--desktop .mpm__link:focus-visible .mpm__link-text::after {
	transform: translateY(0);
}

.mpm--vtext.mpm--hover-slide .mpm__menu--desktop .mpm__link-text::after {
	writing-mode: vertical-rl;
	transform: translateX(-105%);
}

.mpm--vtext.mpm--hover-slide .mpm__menu--desktop .mpm__link:hover .mpm__link-inner {
	transform: translateX(105%);
}

.mpm--vtext.mpm--hover-slide .mpm__menu--desktop .mpm__link:hover .mpm__link-text::after {
	transform: translateX(0);
}

/* Fade & translate ------------------------------------------------------ */

.mpm--hover-fade .mpm__menu--desktop:hover .mpm__link {
	opacity: 0.45;
}

.mpm--hover-fade .mpm__menu--desktop .mpm__link:hover,
.mpm--hover-fade .mpm__menu--desktop .mpm__link:focus-visible {
	opacity: 1;
	transform: translateY(-2px);
}

.mpm--hover-fade.mpm--vtext .mpm__menu--desktop .mpm__link:hover {
	transform: translateX(-2px);
}

/* Background highlight -------------------------------------------------- */

.mpm--hover-highlight .mpm__menu--desktop .mpm__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: var(--mpm-link-radius, 6px);
	background-color: var(--mpm-highlight-color);
	opacity: 0;
	transform: scale(0.92);
	transition: opacity var(--mpm-duration) var(--mpm-ease),
		transform var(--mpm-duration) var(--mpm-ease);
}

.mpm--hover-highlight .mpm__menu--desktop .mpm__link {
	isolation: isolate;
}

.mpm--hover-highlight .mpm__menu--desktop .mpm__link:hover::before,
.mpm--hover-highlight .mpm__menu--desktop .mpm__link:focus-visible::before,
.mpm--hover-highlight.mpm--active-effect .mpm__menu--desktop .mpm__link--active::before {
	opacity: 1;
	transform: scale(1);
}

/* Click feedback -------------------------------------------------------- */

.mpm--press .mpm__link:active,
.mpm--press .mpm__submenu-toggle:active {
	transform: scale(0.95);
}

.mpm--press .mpm__burger:active .mpm__burger-box {
	transform: scale(0.9);
}

.mpm--press .mpm__logo:active {
	transform: scale(0.98);
}

/* =========================================================================
 * Submenus (desktop)
 * ====================================================================== */

.mpm__submenu-toggle {
	display: none;
	appearance: none;
	border: 0;
	background: none;
	padding: 6px;
	margin: 0;
	color: inherit;
	cursor: pointer;
	line-height: 0;
	transition: transform 180ms var(--mpm-ease);
}

.mpm__chevron {
	display: block;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--mpm-duration) var(--mpm-ease);
}

.mpm__item--has-children.is-open > .mpm__submenu-toggle .mpm__chevron {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.mpm__menu--desktop .mpm__item--has-children > .mpm__link::after {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--mpm-duration) var(--mpm-ease);
}

.mpm__menu--desktop .mpm__item--has-children.is-open > .mpm__link::after {
	transform: translateY(1px) rotate(-135deg);
}

.mpm__menu--desktop .mpm__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: var(--mpm-submenu-width);
	margin: 0;
	padding: var(--mpm-submenu-padding);
	list-style: none;
	background-color: var(--mpm-submenu-bg);
	border-radius: var(--mpm-submenu-radius);
	opacity: 0;
	visibility: hidden;
	transform: translateY(calc(var(--mpm-submenu-offset) - 8px));
	transition: opacity var(--mpm-duration) var(--mpm-ease),
		transform var(--mpm-duration) var(--mpm-ease),
		visibility 0s linear var(--mpm-duration);
}

.mpm__menu--desktop .mpm__submenu .mpm__link {
	display: flex;
	width: 100%;
	color: var(--mpm-submenu-color);
	white-space: nowrap;
}

.mpm__menu--desktop .mpm__submenu .mpm__link:hover,
.mpm__menu--desktop .mpm__submenu .mpm__link:focus-visible {
	color: var(--mpm-submenu-color-hover);
}

/* Bridge the gap so the pointer can travel into the panel. */
.mpm__menu--desktop .mpm__item--has-children > .mpm__submenu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1 * var(--mpm-submenu-offset) - 4px);
	height: calc(var(--mpm-submenu-offset) + 4px);
}

.mpm--sub-hover .mpm__menu--desktop .mpm__item--has-children:hover > .mpm__submenu,
.mpm--sub-hover .mpm__menu--desktop .mpm__item--has-children:focus-within > .mpm__submenu,
.mpm__menu--desktop .mpm__item--has-children.is-open > .mpm__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(var(--mpm-submenu-offset));
	transition-delay: 0s;
}

/* Nested levels open sideways. */
.mpm__menu--desktop .mpm__submenu .mpm__submenu {
	top: 0;
	left: 100%;
	transform: translate(8px, 0);
	margin-left: 4px;
}

.mpm--sub-hover .mpm__menu--desktop .mpm__submenu .mpm__item--has-children:hover > .mpm__submenu,
.mpm__menu--desktop .mpm__submenu .mpm__item--has-children.is-open > .mpm__submenu {
	transform: translate(0, 0);
}

.mpm__menu--desktop .mpm__submenu .mpm__item--has-children > .mpm__link::after {
	margin-left: auto;
	transform: rotate(-45deg);
}

/* Flip when the panel would overflow the viewport (class set by JS). */
.mpm__menu--desktop .mpm__submenu.mpm__submenu--flip {
	left: auto;
	right: 0;
}

.mpm__menu--desktop .mpm__submenu .mpm__submenu.mpm__submenu--flip {
	left: auto;
	right: 100%;
	margin-left: 0;
	margin-right: 4px;
}

/* Click mode exposes the toggle button. */
.mpm--sub-click .mpm__menu--desktop .mpm__item--has-children > .mpm__link::after {
	display: none;
}

.mpm--sub-click .mpm__menu--desktop .mpm__submenu-toggle {
	display: inline-flex;
	align-items: center;
	position: absolute;
	right: -2px;
	top: 50%;
	transform: translateY(-50%);
}

.mpm--sub-click .mpm__menu--desktop .mpm__item--has-children > .mpm__link {
	padding-right: calc(1.5em + 6px);
}

/* =========================================================================
 * Hamburger
 * ====================================================================== */

.mpm__burger {
	display: none;
	appearance: none;
	border: 0;
	background: none;
	margin: 0;
	padding: 8px;
	color: inherit;
	cursor: pointer;
	line-height: 0;
	flex: 0 0 auto;
	margin-left: auto;
	-webkit-tap-highlight-color: transparent;
}

.mpm--logo-end .mpm__burger {
	margin-left: 0;
	margin-right: auto;
}

.mpm__burger-box {
	position: relative;
	display: block;
	width: var(--mpm-burger-width);
	height: var(--mpm-burger-height);
	transition: transform 180ms var(--mpm-ease);
}

.mpm__burger-line {
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--mpm-burger-thickness);
	background-color: var(--mpm-burger-color);
	border-radius: 999px;
	transition: transform var(--mpm-duration) var(--mpm-ease),
		opacity 160ms var(--mpm-ease),
		width var(--mpm-duration) var(--mpm-ease),
		background-color var(--mpm-duration) var(--mpm-ease);
}

.mpm__burger-line:nth-child(1) {
	top: 0;
}

.mpm__burger-line:nth-child(2) {
	top: 50%;
	transform: translateY(-50%);
}

.mpm__burger-line:nth-child(3) {
	bottom: 0;
}

.mpm__burger:hover .mpm__burger-line:nth-child(2) {
	width: 70%;
}

.mpm.is-open .mpm__burger-line {
	background-color: var(--mpm-burger-color-open);
}

.mpm.is-open .mpm__burger-line:nth-child(1) {
	transform: translateY(calc((var(--mpm-burger-height) - var(--mpm-burger-thickness)) / 2)) rotate(45deg);
}

.mpm.is-open .mpm__burger-line:nth-child(2) {
	opacity: 0;
	transform: translateY(-50%) scaleX(0.2);
}

.mpm.is-open .mpm__burger-line:nth-child(3) {
	width: 100%;
	transform: translateY(calc((var(--mpm-burger-height) - var(--mpm-burger-thickness)) / -2)) rotate(-45deg);
}

/* =========================================================================
 * Mobile panel
 * ====================================================================== */

.mpm__backdrop {
	position: fixed;
	inset: 0;
	z-index: 0;
	background-color: var(--mpm-backdrop);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mpm-duration) var(--mpm-ease),
		visibility 0s linear var(--mpm-duration);
}

.mpm.is-open .mpm__backdrop {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.mpm__panel {
	position: fixed;
	z-index: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background-color: #fff;
	visibility: hidden;
	transition: transform var(--mpm-duration) var(--mpm-ease),
		opacity var(--mpm-duration) var(--mpm-ease),
		visibility 0s linear var(--mpm-duration);
}

.mpm.is-open .mpm__panel {
	visibility: visible;
	transition-delay: 0s;
}

.mpm__panel-inner {
	display: flex;
	flex-direction: column;
	align-items: var(--mpm-panel-align);
	justify-content: center;
	gap: 24px;
	min-height: 100%;
}

.mpm__panel-nav {
	width: 100%;
}

.mpm__menu--panel {
	flex-direction: column;
	align-items: stretch;
	gap: var(--mpm-panel-gap);
	width: 100%;
}

.mpm__menu--panel .mpm__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--mpm-panel-align);
	border-bottom: 1px solid var(--mpm-panel-divider);
}

.mpm__menu--panel .mpm__link {
	flex: 1 1 auto;
	justify-content: var(--mpm-panel-align);
	color: var(--mpm-panel-color);
}

.mpm__menu--panel .mpm__link:hover,
.mpm__menu--panel .mpm__link:focus-visible,
.mpm__menu--panel .mpm__link--active {
	color: var(--mpm-panel-color-hover);
}

/* Panel variants -------------------------------------------------------- */

.mpm--panel-fullscreen .mpm__panel {
	inset: 0;
	opacity: 0;
	transform: scale(1.02);
}

/* The overlay owns the screen: the bar keeps only the logo and the X. */
.mpm--panel-fullscreen.is-open .mpm__bar {
	background: transparent !important;
	box-shadow: none !important;
	border-color: transparent !important;
}

.mpm--panel-fullscreen.is-open .mpm__panel {
	opacity: 1;
	transform: scale(1);
}

.mpm--panel-slide-right .mpm__panel,
.mpm--panel-slide-left .mpm__panel {
	top: 0;
	bottom: 0;
	width: min(var(--mpm-panel-width), 100vw);
}

.mpm--panel-slide-right .mpm__panel {
	right: 0;
	transform: translate3d(100%, 0, 0);
}

.mpm--panel-slide-left .mpm__panel {
	left: 0;
	transform: translate3d(-100%, 0, 0);
}

.mpm--panel-slide-right.is-open .mpm__panel,
.mpm--panel-slide-left.is-open .mpm__panel {
	transform: translate3d(0, 0, 0);
}

/* Slide panels read top-down, clearing the bar. */
.mpm--panel-slide-right .mpm__panel-inner,
.mpm--panel-slide-left .mpm__panel-inner {
	justify-content: flex-start;
	padding-top: calc(var(--mpm-bar-height, 0px) + 24px);
}

.mpm--panel-dropdown .mpm__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: min(70vh, 600px);
	opacity: 0;
	transform: translate3d(0, -10px, 0);
}

.mpm--panel-dropdown.is-open .mpm__panel {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.mpm--panel-dropdown .mpm__panel-inner {
	justify-content: flex-start;
	min-height: 0;
}

/* Stagger --------------------------------------------------------------- */

.mpm--stagger .mpm__menu--panel > .mpm__item,
.mpm--stagger .mpm__extra--panel {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity 500ms var(--mpm-ease), transform 500ms var(--mpm-ease);
}

.mpm--stagger.is-open .mpm__menu--panel > .mpm__item,
.mpm--stagger.is-open .mpm__extra--panel {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--mpm-i, 0) * var(--mpm-stagger-step) + 80ms);
}

/* Panel submenus -------------------------------------------------------- */

.mpm__menu--panel .mpm__submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.4em;
	height: 2.4em;
	color: var(--mpm-panel-color);
}

.mpm__menu--panel .mpm__submenu {
	flex: 1 0 100%;
	display: flex;
	flex-direction: column;
	gap: var(--mpm-panel-gap);
	width: 100%;
	margin: 0;
	padding: 0 0 0 16px;
	list-style: none;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height var(--mpm-duration) var(--mpm-ease),
		opacity var(--mpm-duration) var(--mpm-ease),
		padding var(--mpm-duration) var(--mpm-ease);
}

.mpm__menu--panel .mpm__item.is-open > .mpm__submenu {
	max-height: 80vh;
	opacity: 1;
	padding-top: var(--mpm-panel-gap);
	padding-bottom: var(--mpm-panel-gap);
}

.mpm__menu--panel .mpm__submenu .mpm__link {
	opacity: 0.85;
}

/* =========================================================================
 * Desktop / mobile switching (classes are applied by JS)
 * ====================================================================== */

.mpm:not(.is-mobile) .mpm__burger,
.mpm:not(.is-mobile) .mpm__panel,
.mpm:not(.is-mobile) .mpm__backdrop {
	display: none;
}

.mpm.is-mobile .mpm__nav {
	display: none;
}

.mpm.is-mobile .mpm__extra:not(.mpm__extra--panel) {
	display: none;
}

.mpm.is-mobile .mpm__burger {
	display: inline-flex;
}

.mpm.is-mobile .mpm__inner {
	justify-content: space-between;
}

/* Vertical rail collapses to a normal top bar on mobile. */
.mpm.is-mobile.mpm--rail {
	position: relative;
	height: auto;
}

.mpm.is-mobile.mpm--vertical .mpm__inner {
	flex-direction: row;
	align-items: center;
}

/* Body scroll lock (applied to <html>). */
.mpm-scroll-locked {
	overflow: hidden !important;
}

/* =========================================================================
 * Editor + reduced motion
 * ====================================================================== */

/* Inside the editor the widget is not the real page header — keep the rail
 * in flow so the canvas stays usable. */
.mpm--editor.mpm--rail {
	position: sticky;
}

@media (prefers-reduced-motion: reduce) {
	.mpm *,
	.mpm *::before,
	.mpm *::after {
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.mpm--stagger .mpm__menu--panel > .mpm__item,
	.mpm--stagger .mpm__extra--panel {
		opacity: 1;
		transform: none;
	}
}