/* =============================================================================
   500 Designs – WordPress Menu 2.0
   Identical behaviour to Elementor Pro "WordPress Menu" widget + mobile select.
   CSS prefix: d500-mnm2__*
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   1. CSS Custom Properties defaults
   NOTE: --d500-mnm2-divider-content is intentionally NOT declared here.
   The divider ::after pseudo-element uses content:var(--d500-mnm2-divider-content)
   with NO fallback, so when Elementor does not set the variable (switcher OFF)
   the content property is invalid/unset and the pseudo-element is invisible.
   Elementor sets the variable to "" (empty string) only when the Divider
   switcher is turned ON.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
	--d500-mnm2-item-margin : 0px;
	--d500-mnm2-icon-size   : 22px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. Container / wrapper
   ───────────────────────────────────────────────────────────────────────────── */
.d500-mnm2__container {
	display: flex;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. Main nav   (.d500-mnm2__main)
   ───────────────────────────────────────────────────────────────────────────── */
.d500-mnm2__main {
	width: 100%;
}

/* The <ul> produced by wp_nav_menu.
   flex-grow: 1 makes it fill nav.d500-mnm2__main (which is display:flex via .d500-mnm2__container),
   so justify-content alignment has room to work. */
.d500-mnm2__main > .d500-mnm2__nav-menu {
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Vertical layout */
.d500-mnm2__main.d500-mnm2--layout-vertical > .d500-mnm2__nav-menu {
	flex-direction: column;
	align-items: flex-start;
}

/* Top-level list items */
.d500-mnm2__main > .d500-mnm2__nav-menu > li {
	position: relative;
	margin: 0 var(--d500-mnm2-item-margin);
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. Alignment helpers  (prefix_class d500-mnm2__align- on the widget wrapper)
   UL has flex-grow:1 so it fills the NAV — justify-content then positions the LI items.
   ───────────────────────────────────────────────────────────────────────────── */
.d500-mnm2__align-start   .d500-mnm2__main .d500-mnm2__nav-menu { justify-content: flex-start; }
.d500-mnm2__align-center  .d500-mnm2__main .d500-mnm2__nav-menu { justify-content: center; }
.d500-mnm2__align-end     .d500-mnm2__main .d500-mnm2__nav-menu { justify-content: flex-end; }
.d500-mnm2__align-justify .d500-mnm2__main .d500-mnm2__nav-menu { justify-content: space-between; }

/* ─────────────────────────────────────────────────────────────────────────────
   5. Menu items (links)
   ───────────────────────────────────────────────────────────────────────────── */
.d500-mnm2__item,
.d500-mnm2__sub-item {
	display: flex;
	align-items: center;
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s;
	position: relative;
	padding: 8px 16px;
	white-space: nowrap;
}

/* Submenu indicator icon — injected by walker inside <a> for parent items.
   <a> is now display:flex so text + icon are flex siblings — no inline-flex hacks needed. */
.d500-mnm2__sub-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-left: 6px;
	font-size: 1em;
	line-height: 1;
	transition: transform 0.2s;
}

/* Ensure SVG icons inside the submenu indicator are properly sized and coloured.
   Elementor's e-font-icon-svg only sets height:1em — we also need width and fill. */
.d500-mnm2__sub-icon svg,
.d500-mnm2__sub-icon i {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	color: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. Divider (horizontal only, CSS custom-property driven)
   content uses the variable with NO fallback — when the variable is unset
   (Divider switcher OFF) the declaration is invalid and the element is hidden.
   Elementor sets --d500-mnm2-divider-content: "" via the switcher selectors.
   ───────────────────────────────────────────────────────────────────────────── */
.d500-mnm2__main .d500-mnm2__nav-menu > li:not(:last-child)::after {
	/* No fallback: element is invisible when --d500-mnm2-divider-content is unset */
	content: var(--d500-mnm2-divider-content);
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: var(--d500-mnm2-divider-width, 1px);
	height: var(--d500-mnm2-divider-height, 100%);
	background-color: var(--d500-mnm2-divider-color, currentColor);
	border-style: var(--d500-mnm2-divider-style, solid);
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. Pointer effects
   All require the item to be position:relative (already set above).
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Underline / Overline / Double-line shared ── */
.d500-mnm2__main.e--pointer-underline .d500-mnm2__item::after,
.d500-mnm2__main.e--pointer-overline  .d500-mnm2__item::before,
.d500-mnm2__main.e--pointer-double-line .d500-mnm2__item::before,
.d500-mnm2__main.e--pointer-double-line .d500-mnm2__item::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 3px;
	background-color: currentColor;
}

/* Position: underline at bottom, overline at top */
.d500-mnm2__main.e--pointer-underline  .d500-mnm2__item::after  { bottom: 0; }
.d500-mnm2__main.e--pointer-overline   .d500-mnm2__item::before { top: 0; }
.d500-mnm2__main.e--pointer-double-line .d500-mnm2__item::before { top: 0; }
.d500-mnm2__main.e--pointer-double-line .d500-mnm2__item::after  { bottom: 0; }

/* Animation: fade */
.d500-mnm2__main.e--pointer-underline.e--animation-fade  .d500-mnm2__item::after,
.d500-mnm2__main.e--pointer-overline.e--animation-fade   .d500-mnm2__item::before,
.d500-mnm2__main.e--pointer-double-line.e--animation-fade .d500-mnm2__item::before,
.d500-mnm2__main.e--pointer-double-line.e--animation-fade .d500-mnm2__item::after {
	opacity: 0;
	transition: opacity 0.3s;
}
.d500-mnm2__main.e--pointer-underline.e--animation-fade  .d500-mnm2__item:hover::after,
.d500-mnm2__main.e--pointer-underline.e--animation-fade  .d500-mnm2__item.d500-mnm2__item-active::after,
.d500-mnm2__main.e--pointer-overline.e--animation-fade   .d500-mnm2__item:hover::before,
.d500-mnm2__main.e--pointer-overline.e--animation-fade   .d500-mnm2__item.d500-mnm2__item-active::before,
.d500-mnm2__main.e--pointer-double-line.e--animation-fade .d500-mnm2__item:hover::before,
.d500-mnm2__main.e--pointer-double-line.e--animation-fade .d500-mnm2__item:hover::after,
.d500-mnm2__main.e--pointer-double-line.e--animation-fade .d500-mnm2__item.d500-mnm2__item-active::before,
.d500-mnm2__main.e--pointer-double-line.e--animation-fade .d500-mnm2__item.d500-mnm2__item-active::after {
	opacity: 1;
}

/* Animation: slide / grow / drop-in / drop-out (scale on X) */
.d500-mnm2__main.e--pointer-underline.e--animation-slide  .d500-mnm2__item::after,
.d500-mnm2__main.e--pointer-underline.e--animation-grow   .d500-mnm2__item::after,
.d500-mnm2__main.e--pointer-underline.e--animation-drop-in  .d500-mnm2__item::after,
.d500-mnm2__main.e--pointer-underline.e--animation-drop-out .d500-mnm2__item::after,
.d500-mnm2__main.e--pointer-overline.e--animation-slide   .d500-mnm2__item::before,
.d500-mnm2__main.e--pointer-overline.e--animation-grow    .d500-mnm2__item::before,
.d500-mnm2__main.e--pointer-double-line.e--animation-slide  .d500-mnm2__item::before,
.d500-mnm2__main.e--pointer-double-line.e--animation-slide  .d500-mnm2__item::after,
.d500-mnm2__main.e--pointer-double-line.e--animation-grow   .d500-mnm2__item::before,
.d500-mnm2__main.e--pointer-double-line.e--animation-grow   .d500-mnm2__item::after {
	transform: scaleX(0);
	transition: transform 0.3s;
}
.d500-mnm2__main.e--pointer-underline.e--animation-slide  .d500-mnm2__item::after,
.d500-mnm2__main.e--pointer-overline.e--animation-slide   .d500-mnm2__item::before,
.d500-mnm2__main.e--pointer-double-line.e--animation-slide .d500-mnm2__item::before,
.d500-mnm2__main.e--pointer-double-line.e--animation-slide .d500-mnm2__item::after {
	transform-origin: left center;
}
.d500-mnm2__main.e--pointer-underline.e--animation-grow  .d500-mnm2__item::after,
.d500-mnm2__main.e--pointer-overline.e--animation-grow   .d500-mnm2__item::before,
.d500-mnm2__main.e--pointer-double-line.e--animation-grow .d500-mnm2__item::before,
.d500-mnm2__main.e--pointer-double-line.e--animation-grow .d500-mnm2__item::after {
	transform-origin: center;
}
.d500-mnm2__main [class*="e--pointer-"].e--animation-drop-in  .d500-mnm2__item::after  { transform-origin: top center; }
.d500-mnm2__main [class*="e--pointer-"].e--animation-drop-out .d500-mnm2__item::after  { transform-origin: bottom center; }

.d500-mnm2__main.e--pointer-underline  .d500-mnm2__item:hover::after,
.d500-mnm2__main.e--pointer-underline  .d500-mnm2__item.d500-mnm2__item-active::after,
.d500-mnm2__main.e--pointer-overline   .d500-mnm2__item:hover::before,
.d500-mnm2__main.e--pointer-overline   .d500-mnm2__item.d500-mnm2__item-active::before,
.d500-mnm2__main.e--pointer-double-line .d500-mnm2__item:hover::before,
.d500-mnm2__main.e--pointer-double-line .d500-mnm2__item:hover::after,
.d500-mnm2__main.e--pointer-double-line .d500-mnm2__item.d500-mnm2__item-active::before,
.d500-mnm2__main.e--pointer-double-line .d500-mnm2__item.d500-mnm2__item-active::after {
	transform: scaleX(1);
}

/* ── Framed ── */
.d500-mnm2__main.e--pointer-framed .d500-mnm2__item::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 2px solid currentColor;
	transition: transform 0.3s, opacity 0.3s;
}
/* Fade */
.d500-mnm2__main.e--pointer-framed.e--animation-fade .d500-mnm2__item::before { opacity: 0; }
.d500-mnm2__main.e--pointer-framed.e--animation-fade .d500-mnm2__item:hover::before,
.d500-mnm2__main.e--pointer-framed.e--animation-fade .d500-mnm2__item.d500-mnm2__item-active::before { opacity: 1; }
/* Grow */
.d500-mnm2__main.e--pointer-framed.e--animation-grow   .d500-mnm2__item::before { transform: scale(0.9); opacity: 0; }
.d500-mnm2__main.e--pointer-framed.e--animation-shrink .d500-mnm2__item::before { transform: scale(1.1); opacity: 0; }
.d500-mnm2__main.e--pointer-framed.e--animation-grow   .d500-mnm2__item:hover::before,
.d500-mnm2__main.e--pointer-framed.e--animation-grow   .d500-mnm2__item.d500-mnm2__item-active::before,
.d500-mnm2__main.e--pointer-framed.e--animation-shrink .d500-mnm2__item:hover::before,
.d500-mnm2__main.e--pointer-framed.e--animation-shrink .d500-mnm2__item.d500-mnm2__item-active::before { transform: scale(1); opacity: 1; }
/* Draw (uses ::before and ::after) */
.d500-mnm2__main.e--pointer-framed.e--animation-draw .d500-mnm2__item::before,
.d500-mnm2__main.e--pointer-framed.e--animation-draw .d500-mnm2__item::after {
	content: '';
	position: absolute;
	border: 0 solid transparent;
	transition: border-color 0s 0.2s, border-width 0.2s;
}
.d500-mnm2__main.e--pointer-framed.e--animation-draw .d500-mnm2__item::before { bottom: 0; left: 0; }
.d500-mnm2__main.e--pointer-framed.e--animation-draw .d500-mnm2__item::after  { top: 0; right: 0; }
.d500-mnm2__main.e--pointer-framed.e--animation-draw .d500-mnm2__item:hover::before,
.d500-mnm2__main.e--pointer-framed.e--animation-draw .d500-mnm2__item.d500-mnm2__item-active::before {
	border-color: currentColor;
	border-bottom-width: 2px;
	border-left-width: 2px;
	transition: border-width 0.2s;
}
.d500-mnm2__main.e--pointer-framed.e--animation-draw .d500-mnm2__item:hover::after,
.d500-mnm2__main.e--pointer-framed.e--animation-draw .d500-mnm2__item.d500-mnm2__item-active::after {
	border-color: currentColor;
	border-top-width: 2px;
	border-right-width: 2px;
	transition: border-color 0s, border-width 0.2s 0.2s;
}

/* Corners — two opposite L-shaped corner brackets (border-width set by pointer_width control) */
.d500-mnm2__main.e--pointer-framed.e--animation-corners .d500-mnm2__item::before,
.d500-mnm2__main.e--pointer-framed.e--animation-corners .d500-mnm2__item::after {
	content: '';
	position: absolute;
	inset: auto;
	width: 30%;
	height: 30%;
	border: 2px solid transparent;
	opacity: 0;
	transition: opacity 0.3s, border-color 0.3s;
}
.d500-mnm2__main.e--pointer-framed.e--animation-corners .d500-mnm2__item::before { top: 0; left: 0; }
.d500-mnm2__main.e--pointer-framed.e--animation-corners .d500-mnm2__item::after  { bottom: 0; right: 0; }
.d500-mnm2__main.e--pointer-framed.e--animation-corners .d500-mnm2__item:hover::before,
.d500-mnm2__main.e--pointer-framed.e--animation-corners .d500-mnm2__item.d500-mnm2__item-active::before,
.d500-mnm2__main.e--pointer-framed.e--animation-corners .d500-mnm2__item:hover::after,
.d500-mnm2__main.e--pointer-framed.e--animation-corners .d500-mnm2__item.d500-mnm2__item-active::after {
	opacity: 1;
	border-color: currentColor;
}

/* ── Background ── */
.d500-mnm2__main.e--pointer-background .d500-mnm2__item::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: currentColor;
	opacity: 0;
}
.d500-mnm2__main.e--pointer-background.e--animation-fade .d500-mnm2__item::before          { transition: opacity 0.3s; }
.d500-mnm2__main.e--pointer-background.e--animation-grow .d500-mnm2__item::before          { transform: scale(0.8); transition: transform 0.3s, opacity 0.3s; }
.d500-mnm2__main.e--pointer-background.e--animation-shrink .d500-mnm2__item::before        { transform: scale(1.2); transition: transform 0.3s, opacity 0.3s; }
.d500-mnm2__main.e--pointer-background.e--animation-sweep-left .d500-mnm2__item::before    { transform-origin: right; transform: scaleX(0); opacity: 1; transition: transform 0.3s; }
.d500-mnm2__main.e--pointer-background.e--animation-sweep-right .d500-mnm2__item::before   { transform-origin: left;  transform: scaleX(0); opacity: 1; transition: transform 0.3s; }
.d500-mnm2__main.e--pointer-background.e--animation-sweep-up .d500-mnm2__item::before      { transform-origin: bottom; transform: scaleY(0); opacity: 1; transition: transform 0.3s; }
.d500-mnm2__main.e--pointer-background.e--animation-sweep-down .d500-mnm2__item::before    { transform-origin: top;    transform: scaleY(0); opacity: 1; transition: transform 0.3s; }

.d500-mnm2__main.e--pointer-background .d500-mnm2__item:hover::before,
.d500-mnm2__main.e--pointer-background .d500-mnm2__item.d500-mnm2__item-active::before {
	opacity: 0.12;
	transform: scale(1) scaleX(1) scaleY(1);
}

/* ── Shutter animations (need ::after for the second half) ──
   "Horizontal" = top/bottom halves (horizontal dividing line)
   "Vertical"   = left/right halves  (vertical dividing line)  */

/* Shutter In Horizontal: both halves slide inward to center */
.d500-mnm2__main.e--pointer-background.e--animation-shutter-in-horizontal .d500-mnm2__item::before {
	inset: 0 0 50% 0;
	transform-origin: bottom;
	transform: scaleY(0);
	opacity: 1;
	transition: transform 0.3s;
}
.d500-mnm2__main.e--pointer-background.e--animation-shutter-in-horizontal .d500-mnm2__item::after {
	content: '';
	position: absolute;
	inset: 50% 0 0 0;
	z-index: -1;
	background-color: currentColor;
	transform-origin: top;
	transform: scaleY(0);
	opacity: 1;
	transition: transform 0.3s;
}

/* Shutter Out Horizontal: both halves slide outward from center */
.d500-mnm2__main.e--pointer-background.e--animation-shutter-out-horizontal .d500-mnm2__item::before {
	inset: 0 0 50% 0;
	transform-origin: top;
	transform: scaleY(0);
	opacity: 1;
	transition: transform 0.3s;
}
.d500-mnm2__main.e--pointer-background.e--animation-shutter-out-horizontal .d500-mnm2__item::after {
	content: '';
	position: absolute;
	inset: 50% 0 0 0;
	z-index: -1;
	background-color: currentColor;
	transform-origin: bottom;
	transform: scaleY(0);
	opacity: 1;
	transition: transform 0.3s;
}

/* Shutter In Vertical: both halves slide inward to center */
.d500-mnm2__main.e--pointer-background.e--animation-shutter-in-vertical .d500-mnm2__item::before {
	inset: 0 50% 0 0;
	transform-origin: right;
	transform: scaleX(0);
	opacity: 1;
	transition: transform 0.3s;
}
.d500-mnm2__main.e--pointer-background.e--animation-shutter-in-vertical .d500-mnm2__item::after {
	content: '';
	position: absolute;
	inset: 0 0 0 50%;
	z-index: -1;
	background-color: currentColor;
	transform-origin: left;
	transform: scaleX(0);
	opacity: 1;
	transition: transform 0.3s;
}

/* Shutter Out Vertical: both halves slide outward from center */
.d500-mnm2__main.e--pointer-background.e--animation-shutter-out-vertical .d500-mnm2__item::before {
	inset: 0 50% 0 0;
	transform-origin: left;
	transform: scaleX(0);
	opacity: 1;
	transition: transform 0.3s;
}
.d500-mnm2__main.e--pointer-background.e--animation-shutter-out-vertical .d500-mnm2__item::after {
	content: '';
	position: absolute;
	inset: 0 0 0 50%;
	z-index: -1;
	background-color: currentColor;
	transform-origin: right;
	transform: scaleX(0);
	opacity: 1;
	transition: transform 0.3s;
}

/* Shared hover: bring all shutter ::after elements to full scale */
.d500-mnm2__main.e--pointer-background[class*="e--animation-shutter"] .d500-mnm2__item:hover::after,
.d500-mnm2__main.e--pointer-background[class*="e--animation-shutter"] .d500-mnm2__item.d500-mnm2__item-active::after {
	transform: scaleX(1) scaleY(1);
	opacity: 0.12;
}

/* ── Text (color-only) ── */
.d500-mnm2__main.e--pointer-text.e--animation-grow   .d500-mnm2__item { transition: letter-spacing 0.3s, color 0.3s; }
.d500-mnm2__main.e--pointer-text.e--animation-shrink .d500-mnm2__item { transition: letter-spacing 0.3s, color 0.3s; }
.d500-mnm2__main.e--pointer-text.e--animation-sink   .d500-mnm2__item { transition: text-shadow 0.3s, color 0.3s; }
.d500-mnm2__main.e--pointer-text.e--animation-float  .d500-mnm2__item { transition: text-shadow 0.3s, transform 0.3s, color 0.3s; }
.d500-mnm2__main.e--pointer-text.e--animation-skew   .d500-mnm2__item { transition: transform 0.3s, color 0.3s; }
.d500-mnm2__main.e--pointer-text.e--animation-rotate .d500-mnm2__item { transition: transform 0.3s, color 0.3s; }

.d500-mnm2__main.e--pointer-text.e--animation-grow   .d500-mnm2__item:hover,
.d500-mnm2__main.e--pointer-text.e--animation-grow   .d500-mnm2__item.d500-mnm2__item-active  { letter-spacing: 2px; }
.d500-mnm2__main.e--pointer-text.e--animation-shrink .d500-mnm2__item:hover,
.d500-mnm2__main.e--pointer-text.e--animation-shrink .d500-mnm2__item.d500-mnm2__item-active  { letter-spacing: -0.5px; }
.d500-mnm2__main.e--pointer-text.e--animation-sink   .d500-mnm2__item:hover,
.d500-mnm2__main.e--pointer-text.e--animation-sink   .d500-mnm2__item.d500-mnm2__item-active  { text-shadow: 0 4px 4px rgba(0,0,0,.15); }
.d500-mnm2__main.e--pointer-text.e--animation-float  .d500-mnm2__item:hover,
.d500-mnm2__main.e--pointer-text.e--animation-float  .d500-mnm2__item.d500-mnm2__item-active  { text-shadow: 0 -4px 4px rgba(0,0,0,.15); transform: translateY(-4px); }
.d500-mnm2__main.e--pointer-text.e--animation-skew   .d500-mnm2__item:hover,
.d500-mnm2__main.e--pointer-text.e--animation-skew   .d500-mnm2__item.d500-mnm2__item-active  { transform: skewX(-8deg); }
.d500-mnm2__main.e--pointer-text.e--animation-rotate .d500-mnm2__item:hover,
.d500-mnm2__main.e--pointer-text.e--animation-rotate .d500-mnm2__item.d500-mnm2__item-active  { transform: rotate(-6deg); }

/* ─────────────────────────────────────────────────────────────────────────────
   8. Sub-menu (desktop dropdown)
   ───────────────────────────────────────────────────────────────────────────── */
.d500-mnm2__main .d500-mnm2__nav-menu li {
	position: relative;
}

/* The <ul> sub-menus added by wp_nav_menu (via handle_sub_menu_classes) */
.d500-mnm2__main .d500-mnm2__dropdown {
	display: none;
	flex-direction: column;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(0,0,0,.12);
	border-radius: 4px;
	z-index: 9999;
	list-style: none;
	margin: 0;
	padding: 0;
}

.d500-mnm2__main .d500-mnm2__nav-menu li:hover > .d500-mnm2__dropdown,
.d500-mnm2__main .d500-mnm2__nav-menu li:focus-within > .d500-mnm2__dropdown {
	display: flex;
}

.d500-mnm2__main .d500-mnm2__dropdown .d500-mnm2__sub-item {
	display: block;
	padding: 10px 18px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. Full-width mobile dropdown  (prefix_class d500-mnm2--stretch)
   ───────────────────────────────────────────────────────────────────────────── */
.d500-mnm2--stretch .d500-mnm2__dropdown.d500-mnm2__container {
	left: 0;
	right: 0;
	width: auto;
}

/* Text-align helpers */
.d500-mnm2__text-align-center .d500-mnm2__dropdown .d500-mnm2__item,
.d500-mnm2__text-align-center .d500-mnm2__dropdown .d500-mnm2__sub-item { text-align: center; }

/* ─────────────────────────────────────────────────────────────────────────────
   10. Mobile hamburger dropdown (outermost .d500-mnm2__dropdown.d500-mnm2__container)
       This is the full-page mobile menu rendered separately from the submenu.
       It is hidden by default; shown when the toggle class is added by JS.
   ───────────────────────────────────────────────────────────────────────────── */
.d500-mnm2__dropdown.d500-mnm2__container {
	display: none;
	flex-direction: column;
	width: 100%;
	position: absolute;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	z-index: 9998;
	top: 100%;
	left: 0;
}

.d500-mnm2--open .d500-mnm2__dropdown.d500-mnm2__container {
	display: flex;
}

.d500-mnm2__dropdown.d500-mnm2__container .d500-mnm2__nav-menu {
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.d500-mnm2__dropdown.d500-mnm2__container .d500-mnm2__item,
.d500-mnm2__dropdown.d500-mnm2__container .d500-mnm2__sub-item {
	display: block;
	padding: 12px 20px;
	white-space: normal;
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. Toggle (hamburger) button
   ───────────────────────────────────────────────────────────────────────────── */
.d500-mnm2__menu-toggle {
	display: none;
	cursor: pointer;
	font-size: var(--d500-mnm2-icon-size, 22px);
	line-height: 1;
	user-select: none;
	padding: 4px;
	border: 1px solid transparent;
	transition: color 0.2s, background-color 0.2s;
}

.d500-mnm2__toggle-icon--open,
.d500-mnm2__toggle-icon--close {
	display: block;
}

.d500-mnm2--open .d500-mnm2__toggle-icon--open  { display: none; }
.d500-mnm2--open .d500-mnm2__toggle-icon--close { display: block; }

/* The hamburger toggle shows only within active breakpoints (see section 13) */

/* ─────────────────────────────────────────────────────────────────────────────
   12. Mobile select element (the NEW feature)
   ───────────────────────────────────────────────────────────────────────────── */
.d500-mnm2__select-wrap {
	display: none; /* Hidden by default – shown via breakpoint classes below */
}

.d500-mnm2__select {
	appearance: auto;
	-webkit-appearance: auto;
	display: block;
	width: 100%;
	border: 1px solid #d1d5db;
	background-color: #ffffff;
	color: #1e293b;
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.5;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.d500-mnm2__select:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}


/* ─────────────────────────────────────────────────────────────────────────────
   13. Responsive breakpoints
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 13a. Hamburger breakpoints (prefix_class d500-mnm2--dropdown-)
         Same naming as Elementor Pro – mirrors its behaviour. ── */

/* Mobile breakpoint: ≤ 767px */
@media (max-width: 767px) {

	.d500-mnm2--dropdown-mobile .d500-mnm2__main { display: none; }
	.d500-mnm2--dropdown-mobile .d500-mnm2__menu-toggle { display: flex; align-items: center; justify-content: center; }

}

/* Tablet breakpoint: ≤ 1024px (Elementor default "tablet") */
@media (max-width: 1024px) {

	.d500-mnm2--dropdown-tablet .d500-mnm2__main { display: none; }
	.d500-mnm2--dropdown-tablet .d500-mnm2__menu-toggle { display: flex; align-items: center; justify-content: center; }
}


/* ── 13b. Mobile Select breakpoints (prefix_class d500-mnm2--select-bp-)
         Replaces BOTH the main nav AND the hamburger toggle. ── */

/* Tablet ≤ 1024px */
@media (max-width: 1024px) {
	.d500-mnm2--select-bp-tablet .d500-mnm2__main                        { display: none !important; }
	.d500-mnm2--select-bp-tablet .d500-mnm2__menu-toggle                  { display: none !important; }
	.d500-mnm2--select-bp-tablet .d500-mnm2__dropdown.d500-mnm2__container { display: none !important; }
	.d500-mnm2--select-bp-tablet .d500-mnm2__select-wrap                  { display: block; }
}

/* Mobile ≤ 767px */
@media (max-width: 767px) {
	.d500-mnm2--select-bp-mobile .d500-mnm2__main                        { display: none !important; }
	.d500-mnm2--select-bp-mobile .d500-mnm2__menu-toggle                  { display: none !important; }
	.d500-mnm2--select-bp-mobile .d500-mnm2__dropdown.d500-mnm2__container { display: none !important; }
	.d500-mnm2--select-bp-mobile .d500-mnm2__select-wrap                  { display: block; }
}