/* =====================================================================
   SOLID MENU — Lattice design system
   Tokens + 4 dropdown patterns: Cascade, Vertical, Inline, Index
   ===================================================================== */



.solidae-solid-menu{
	/* Design tokens */
	--paper: oklch(0.99 0.005 80);
	--paper-2: oklch(0.97 0.008 80);
	--ink: oklch(0.18 0.01 80);
	--ink-2: oklch(0.36 0.01 80);
	--ink-3: oklch(0.55 0.01 80);
	--line: oklch(0.92 0.008 80);
	--line-2: oklch(0.88 0.008 80);
	--accent: oklch(0.55 0.15 30);
	--accent-ink: oklch(0.99 0.005 80);

	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 14px;
	--r-xl: 20px;

	--shadow-md: 0 1px 2px rgba(20,14,8,0.04), 0 8px 24px -6px rgba(20,14,8,0.08), 0 24px 60px -12px rgba(20,14,8,0.10);
	--shadow-lg: 0 1px 2px rgba(20,14,8,0.05), 0 12px 32px -8px rgba(20,14,8,0.10), 0 36px 80px -16px rgba(20,14,8,0.14);

	--solidae-sm-anim-duration: 220ms;
	--solidae-sm-anim-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
	--solidae-sm-submenu-offset: 8px;
	--solidae-sm-active-color: var(--accent);

	position: relative;
	display: block;
	font-family: "Geist", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Allow the menu to shrink in a flex parent (Elementor Flex Container row
	   with logo + menu side-by-side). Without `min-width: 0`, the menu's
	   intrinsic content width pushes it past its allotted column. */
	min-width: 0;
	max-width: 100%;
}



.solidae-solid-menu *{ box-sizing: border-box; }



.solidae-solid-menu__bar{
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
	/* Allow this bar to participate in flex shrinkability when the menu nav
	   itself is a flex child of an Elementor Flex Container with the logo. */
	max-width: 100%;
	position: relative;
	/* gap controlled by Layout → Bar Gap (default 24px). */
}

/* Strict container constraint — when "Constrain to Container" is on, items
   that don't fit in the menu widget's column are physically clipped at the
   right edge instead of being allowed to flow over a sibling logo / cart
   widget. We use overflow-x: clip + overflow-y: visible so submenus can
   still drop down below the bar. Mega templates that explicitly need to
   extend wider than the bar should disable this toggle. */
.solidae-solid-menu.constrained-container > .solidae-solid-menu__bar{
	overflow-x: clip;
	overflow-y: visible;
}

/* Implicit constraint for any active overflow behavior. The user picked
   Scroll / More / Compact specifically because items don't fit — they
   shouldn't be allowed to physically bleed into a neighbour logo widget
   regardless of whether the explicit Constrain toggle is on. */
.solidae-solid-menu.overflow-scroll > .solidae-solid-menu__bar,
.solidae-solid-menu.overflow-more > .solidae-solid-menu__bar,
.solidae-solid-menu.overflow-compact > .solidae-solid-menu__bar{
	overflow-x: clip;
	overflow-y: visible;
}



.solidae-solid-menu__list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	flex: 1;
	min-width: 0;
	/* gap controlled by Layout → Item Gap (default 4px). */
}



.solidae-solid-menu__item{
	position: relative;
	display: flex;
	align-items: center;
}

/* Top-level link — pill nav-trigger style */


.solidae-solid-menu__list > .solidae-solid-menu__item > .solidae-solid-menu__link{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 14px;
	height: 36px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-2);
	border-radius: 999px;
	transition: color 140ms ease, background 140ms ease;
	white-space: nowrap;
	text-decoration: none;
	letter-spacing: -0.005em;
}


.solidae-solid-menu__list > .solidae-solid-menu__item:hover > .solidae-solid-menu__link,
.solidae-solid-menu__list > .solidae-solid-menu__item.is-active > .solidae-solid-menu__link,
.solidae-solid-menu__list > .solidae-solid-menu__item.is-current > .solidae-solid-menu__link,
.solidae-solid-menu__list > .solidae-solid-menu__item.is-open > .solidae-solid-menu__link{
	color: var(--ink);
	background: var(--paper-2);
}



.solidae-solid-menu__link:focus-visible{
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}



.solidae-solid-menu__icon{ display: inline-flex; align-items: center; justify-content: center; line-height: 1; }


.solidae-solid-menu__icon svg{ width: 1em; height: 1em; fill: currentColor; }


.solidae-solid-menu__label{ display: inline-block; }



.solidae-solid-menu__desc{
	display: block;
	font-size: 12.5px;
	color: var(--ink-3);
	margin-top: 1px;
	width: 100%;
	letter-spacing: 0;
	line-height: 1.4;
	font-weight: 400;
}



.solidae-solid-menu__badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	line-height: 1;
	padding: 2px 7px;
	border-radius: 999px;
	/* Solid fallback for Safari ≤16.3 / older browsers without color-mix support. */
	background: var(--paper);
	background: color-mix(in oklch, var(--accent) 16%, var(--paper));
	color: var(--accent);
	border: 1px solid var(--line);
	border: 1px solid color-mix(in oklch, var(--accent) 28%, var(--line));
	margin-left: 6px;
	font-weight: 500;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}

/* Caret */


.solidae-solid-menu__caret{
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 4px;
	flex-shrink: 0;
	opacity: 0.55;
	transition: transform 180ms ease, opacity 140ms ease;
}


.solidae-solid-menu.caret-chevron .solidae-solid-menu__caret{
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}


.solidae-solid-menu.caret-arrow .solidae-solid-menu__caret{
	background:
		linear-gradient(currentColor, currentColor) 50% 100% / 80% 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) 100% 50% / 1.5px 80% no-repeat;
	transform: rotate(45deg);
}


.solidae-solid-menu.caret-plus .solidae-solid-menu__caret{
	background:
		linear-gradient(currentColor, currentColor) 50% 50% / 100% 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) 50% 50% / 1.5px 100% no-repeat;
}


.solidae-solid-menu.caret-none .solidae-solid-menu__caret{ display: none; }



.solidae-solid-menu__item.is-open > .solidae-solid-menu__link .solidae-solid-menu__caret,
.solidae-solid-menu__list > .solidae-solid-menu__item:hover > .solidae-solid-menu__link .solidae-solid-menu__caret{
	transform: rotate(225deg) translateY(-2px);
	opacity: 0.9;
}


.solidae-solid-menu.caret-plus .solidae-solid-menu__item.is-open > .solidae-solid-menu__link .solidae-solid-menu__caret{
	transform: rotate(45deg);
}



.solidae-solid-menu__caret-toggle{
	background: transparent;
	border: 0;
	padding: 0 4px;
	margin: 0 -4px 0 4px;
	cursor: pointer;
	/* Hidden by default — only appears on mobile breakpoints when `mtrigger-caret` is set
	   (see solid-menu-mobile.css). On desktop, the link's own caret span is the visual
	   indicator; the toggle button would just duplicate it. */
	display: none;
	align-items: center;
	color: inherit;
}


.solidae-solid-menu__caret-toggle:focus-visible{
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Per-item image / thumbnail */


.solidae-solid-menu__image{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--r-sm);
	flex-shrink: 0;
}


.solidae-solid-menu__image img{
	display: block;
	width: 28px;
	height: 28px;
	object-fit: cover;
}

/* Hide-on-device */

@media (min-width: 1025px){
.solidae-solid-menu__item.hide-on-desktop{ display: none !important; }
}

@media (min-width: 768px) and (max-width: 1024px){
.solidae-solid-menu__item.hide-on-tablet{ display: none !important; }
}

@media (max-width: 767px){
.solidae-solid-menu__item.hide-on-mobile{ display: none !important; }
}

/* =====================================================================
   SUBMENU — common base
   ===================================================================== */



.solidae-solid-menu__submenu,
.solidae-solid-menu__panel{
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--paper);
	position: absolute;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-8px);
	transition:
		opacity 200ms ease,
		visibility 0s linear 220ms,
		transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}


.solidae-solid-menu .solidae-solid-menu__item.is-open > .solidae-solid-menu__submenu,
.solidae-solid-menu .solidae-solid-menu__item.is-open > .solidae-solid-menu__panel,
.solidae-solid-menu.trigger-hover .solidae-solid-menu__list > .solidae-solid-menu__item:hover > .solidae-solid-menu__submenu,
.solidae-solid-menu.trigger-hover .solidae-solid-menu__list > .solidae-solid-menu__item:hover > .solidae-solid-menu__panel{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition:
		opacity 200ms ease,
		transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Top-level submenu container — centered under parent */


.solidae-solid-menu__list > .solidae-solid-menu__item > .solidae-solid-menu__submenu{
	top: calc(100% - 4px);
	left: 50%;
	transform: translate(-50%, -8px);
	margin-top: 8px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
}


.solidae-solid-menu__list > .solidae-solid-menu__item.is-open > .solidae-solid-menu__submenu,
.solidae-solid-menu.trigger-hover .solidae-solid-menu__list > .solidae-solid-menu__item:hover > .solidae-solid-menu__submenu{
	transform: translate(-50%, 0);
}



.solidae-solid-menu__item > .solidae-solid-menu__submenu .solidae-solid-menu__item{ display: block; }


.solidae-solid-menu__item > .solidae-solid-menu__submenu .solidae-solid-menu__link{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	text-decoration: none;
}

/* =====================================================================
   DESIGN: CASCADE — multi-level side-by-side panels
   ===================================================================== */

/* Nested cascade: render inline as child column */

/* =====================================================================
   DESIGN: VERTICAL — narrow vertical list with submenu fly-out
   ===================================================================== */

/* Nested fly-out — appears to the right of the parent submenu */

/* =====================================================================
   DESIGN: INLINE — single column, accordion expand-in-place
   ===================================================================== */

/* Nested inline — animated expand-in-place */

/* =====================================================================
   DESIGN: INDEX — two-column compact list with numbered prefix
   ===================================================================== */

/* Animated underline on hover */

/* =====================================================================
   Top-level item active underline indicator
   ===================================================================== */


.solidae-solid-menu.active-underline > .solidae-solid-menu__bar > .solidae-solid-menu__list > .solidae-solid-menu__item.is-current > .solidae-solid-menu__link::after,
.solidae-solid-menu.active-underline > .solidae-solid-menu__bar > .solidae-solid-menu__list > .solidae-solid-menu__item.is-active > .solidae-solid-menu__link::after{
	content: "";
	position: absolute;
	left: 14px; right: 14px;
	bottom: 4px;
	height: 2px;
	background: var(--solidae-sm-active-color, var(--accent));
	border-radius: 2px;
}

/* Pill — accent-tinted background on the link itself. */
.solidae-solid-menu.active-pill > .solidae-solid-menu__bar > .solidae-solid-menu__list > .solidae-solid-menu__item.is-current > .solidae-solid-menu__link,
.solidae-solid-menu.active-pill > .solidae-solid-menu__bar > .solidae-solid-menu__list > .solidae-solid-menu__item.is-active > .solidae-solid-menu__link{
	background: var(--solidae-sm-active-color, var(--paper-2));
	color: var(--ink);
}

/* Box — bordered outline, matches a "tab"-style active look. */
.solidae-solid-menu.active-box > .solidae-solid-menu__bar > .solidae-solid-menu__list > .solidae-solid-menu__item.is-current > .solidae-solid-menu__link,
.solidae-solid-menu.active-box > .solidae-solid-menu__bar > .solidae-solid-menu__list > .solidae-solid-menu__item.is-active > .solidae-solid-menu__link{
	box-shadow: inset 0 0 0 1px var(--solidae-sm-active-color, var(--line));
	color: var(--ink);
}

/* =====================================================================
   Item state hooks — wired to compute_item_classes()
   ===================================================================== */

/* Highlight — for pinned/featured items the user wants emphasised. Uses the accent
   color for a subtle pill effect on the link. */
.solidae-solid-menu .solidae-solid-menu__item.is-highlighted > .solidae-solid-menu__link{
	background: var(--paper-2);
	color: var(--ink);
	font-weight: 600;
}

/* Hide-on-* — responsive hide flags from per-item controls. */
@media (min-width: 1025px){
	.solidae-solid-menu .solidae-solid-menu__item.hide-on-desktop{ display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px){
	.solidae-solid-menu .solidae-solid-menu__item.hide-on-tablet{ display: none !important; }
}
@media (max-width: 767px){
	.solidae-solid-menu .solidae-solid-menu__item.hide-on-mobile{ display: none !important; }
	.solidae-drawer__row.hide-on-mobile{ display: none !important; }
}

/* =====================================================================
   Top-level layout hooks
   ===================================================================== */

/* Show Separator Between Items — when on, draw a hairline between top-level items. */
.solidae-solid-menu.has-separator > .solidae-solid-menu__bar > .solidae-solid-menu__list > .solidae-solid-menu__item + .solidae-solid-menu__item{
	border-inline-start: 1px solid var(--line);
}

/* Icon Position = "Above" — the top icon variant stacks vertically. */
.solidae-solid-menu .solidae-solid-menu__item.icon-top > .solidae-solid-menu__link,
.solidae-solid-menu .solidae-solid-menu__link.icon-top{
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

/* =====================================================================
   Sticky state — hooks for is-sticky-active (scrolled past) + sticky-shrink.
   ===================================================================== */
.solidae-solid-menu.has-sticky.is-sticky-active{
	box-shadow: 0 6px 20px -10px rgba(20, 14, 8, 0.18);
}
.solidae-solid-menu.has-sticky.sticky-shrink.is-sticky-active{
	padding-block: 4px;
	transition: padding 220ms ease, box-shadow 220ms ease;
}
.solidae-solid-menu.has-sticky.sticky-shrink.is-sticky-active > .solidae-solid-menu__bar > .solidae-solid-menu__list > .solidae-solid-menu__item > .solidae-solid-menu__link{
	height: 32px;
	padding-block: 6px;
}

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


.solidae-solid-menu__hamburger{
	display: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	/* width/height intentionally unset — padding + icon size determine the tap area
	   so users can tune them independently via the Style → Hamburger controls. */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	color: var(--ink);
	line-height: 1;
}


.solidae-solid-menu__hamburger span{
	display: block;
	height: 1.5px;
	/* Width comes from the Icon Size control (Style → Hamburger). */
	background: currentColor;
	border-radius: 1px;
	transition: transform var(--solidae-sm-anim-duration) ease, opacity var(--solidae-sm-anim-duration) ease;
}
.solidae-solid-menu__hamburger i,
.solidae-solid-menu__hamburger svg{
	color: inherit;
	fill: currentColor;
}



@media (prefers-reduced-motion: reduce){
.solidae-solid-menu *{ transition: none !important; animation: none !important; }
}



.solidae-solid-menu.has-sticky.is-sticky{
	position: sticky;
	top: 0;
	z-index: 999;
	/* Solid fallback for browsers without color-mix support. */
	background: var(--paper);
	background: color-mix(in oklch, var(--paper) 92%, transparent);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	/* Do not let the menu grow beyond its column when sticky activates and a
	   new stacking context is created — without these constraints some themes
	   reflow the sticky element to full container width, which makes items
	   visually slide left into the logo's space on scroll. */
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}
/* When sticky becomes active (user has scrolled past the menu's natural
   position), continue to enforce these boundaries and prevent any horizontal
   overflow that would let items spill into a sibling logo widget. */
.solidae-solid-menu.has-sticky.is-sticky-active{
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}
.solidae-solid-menu.has-sticky.is-sticky-active > .solidae-solid-menu__bar{
	min-width: 0;
	max-width: 100%;
}




/* Item type: heading & divider */


.solidae-solid-menu__item.is-heading{ pointer-events: none; }


.solidae-solid-menu__heading{
	display: inline-block;
	padding: 8px 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
}


.solidae-solid-menu__item.is-divider{ pointer-events: none; }


.solidae-solid-menu__divider{ display: block; background: var(--line); }


.solidae-solid-menu.orientation-horizontal .solidae-solid-menu__list > .solidae-solid-menu__item.is-divider .solidae-solid-menu__divider{
	width: 1px; height: 1.4em;
}

/* =====================================================================
   LATTICE FORCE-OVERRIDE — ONLY for widgets saved on plugin v1.6.x–1.7.3
   These rules apply with !important to wash out per-widget Elementor styles
   that those legacy versions stamped into the database.
   Render() adds the `legacy-overrides` class only when one of the hidden
   legacy settings (use_custom_design, design_preset, submenu_style,
   nested_levels_inline) carries a non-empty value, so widgets saved on
   current versions can be styled freely via Elementor controls again.
   ===================================================================== */

.solidae-solid-menu.legacy-overrides .solidae-solid-menu__list > .solidae-solid-menu__item > .solidae-solid-menu__link{
	color: var(--ink-2) !important;
	background: transparent !important;
	border-radius: 999px !important;
	padding: 8px 14px !important;
	height: 36px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: -0.005em !important;
}


.solidae-solid-menu.legacy-overrides .solidae-solid-menu__list > .solidae-solid-menu__item:hover > .solidae-solid-menu__link,
.solidae-solid-menu.legacy-overrides .solidae-solid-menu__list > .solidae-solid-menu__item.is-active > .solidae-solid-menu__link,
.solidae-solid-menu.legacy-overrides .solidae-solid-menu__list > .solidae-solid-menu__item.is-current > .solidae-solid-menu__link,
.solidae-solid-menu.legacy-overrides .solidae-solid-menu__list > .solidae-solid-menu__item.is-open > .solidae-solid-menu__link{
	color: var(--ink) !important;
	background: var(--paper-2) !important;
}


.solidae-solid-menu.legacy-overrides .solidae-solid-menu__list > .solidae-solid-menu__item > .solidae-solid-menu__submenu{
	background: var(--paper) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--r-lg) !important;
	box-shadow: var(--shadow-lg) !important;
}


.solidae-solid-menu.legacy-overrides .solidae-solid-menu__submenu .solidae-solid-menu__link{
	color: var(--ink-2) !important;
	background: transparent !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}


.solidae-solid-menu.legacy-overrides .solidae-solid-menu__submenu .solidae-solid-menu__link:hover,
.solidae-solid-menu.legacy-overrides .solidae-solid-menu__submenu .solidae-solid-menu__item.is-current > .solidae-solid-menu__link,
.solidae-solid-menu.legacy-overrides .solidae-solid-menu__submenu .solidae-solid-menu__item.is-active > .solidae-solid-menu__link,
.solidae-solid-menu.legacy-overrides .solidae-solid-menu__submenu .solidae-solid-menu__item.is-open > .solidae-solid-menu__link{
	color: var(--ink) !important;
	background: var(--paper-2) !important;
}


.solidae-solid-menu.legacy-overrides .solidae-solid-menu__caret{
	width: 8px !important;
	height: 8px !important;
	opacity: 0.55 !important;
}

/* =====================================================================
   CASCADE design — structure only (positioning, layout, animation).
   All visual styling (colors, padding, radius, shadow) is set by Elementor controls.
   Mirrors the Lattice Solutions cascade design 1:1.
   ===================================================================== */

/* Columns */

/* Italic label at top of each column */

/* Row (button or link) */

/* Chevron sits on the right side of root + mid rows */

/* Leaf rows — arrow appears on hover */

/* Hover-driven group visibility — handled by .active class via JS */

/* Promo card — styled mostly via Elementor controls */

/* Cascade design hides the regular submenu (it's not used for cascade items) */

/* =====================================================================
   VERTICAL design — Pages-style: stacked list with side fly-out submenu.
   ===================================================================== */

/* Hide the regular submenu when vertical is the selected design */

/* =====================================================================
   INLINE design — More-style: single column accordion expand-in-place.
   ===================================================================== */

/* Plus / minus glyph */

/* Plus icon morphs to minus when ITS OWN li is expanded — scoped to direct child to avoid cascading into nested levels. */

/* Children (animated expand) */

/* =====================================================================
   INDEX design — Help-style: 2-column compact list with auto-numbered prefix.
   ===================================================================== */

/* Animated underline on hover */

/* =====================================================================
   RESPONSIVE — mirrors the Lattice design's responsive rules
   ===================================================================== */

/* Compact desktop (≤1080px): shrink wide panels */

/* Mobile mode: drawer breakpoint — collapse panels into the drawer's accordion */

/* Smaller mobile: same handling for mbreak-mobile users (drawer at <768px) */

/* Very small (≤520px): tighter top-level padding */

@media (max-width: 520px) {
.solidae-solid-menu__list > .solidae-solid-menu__item > .solidae-solid-menu__link{
		padding: 8px 10px;
		font-size: 13.5px;
	}
}

/* =====================================================================
   LATTICE MOBILE DRAWER
   Slide-in panel with logo + close + accordion + foot CTAs.
   ===================================================================== */


.solidae-drawer{
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
	pointer-events: none;
	display: none;
}


.solidae-drawer.is-open{
	visibility: visible;
	pointer-events: auto;
}


.solidae-drawer__scrim{
	position: absolute;
	inset: 0;
	background: rgba(20, 14, 8, 0.35);
	opacity: 0;
	transition: opacity 220ms ease;
}


.solidae-drawer.is-open .solidae-drawer__scrim{ opacity: 1; }


.solidae-drawer__panel{
	position: absolute;
	top: 0; bottom: 0;
	height: 100%;
	/* dvh accounts for iOS URL bar so the panel doesn't extend below visible area. */
	max-height: 100vh;
	max-height: 100dvh;
	width: min(90vw, 380px);
	background: var(--paper, #FBFAF7);
	/* The panel itself is the scrollable container — head + foot use position:sticky
	   so they stay pinned. This is more reliable across iOS Safari than the older
	   flex+nav-overflow pattern, which has documented bugs with position:fixed parents. */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-y;
	display: flex;
	flex-direction: column;
	transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
	box-shadow: var(--shadow-lg, 0 36px 80px -16px rgba(20,14,8,0.14));
}

/* Drawer side — driven by `mobile-drawer-left` / `mobile-drawer-right` root class
   which mirrors the user's "Drawer Side" SELECT (Layout-or-Mobile section). */
.solidae-solid-menu.mobile-drawer-right .solidae-drawer__panel{
	right: 0; left: auto;
	transform: translateX(100%);
}
.solidae-solid-menu.mobile-drawer-left .solidae-drawer__panel{
	left: 0; right: auto;
	transform: translateX(-100%);
}
.solidae-drawer.is-open .solidae-drawer__panel{ transform: translateX(0); }


.solidae-drawer__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line, #E8E5DD);
	flex-shrink: 0;
	/* Sticky inside the scrolling panel. */
	position: sticky;
	top: 0;
	z-index: 2;
	background: inherit;
}


.solidae-drawer__logo{
	display: inline-flex;
	align-items: center;
	min-width: 0;
}
.solidae-drawer__logo img{ height: 32px; width: auto; max-width: 100%; display: block; }


.solidae-drawer__logo-placeholder{ width: 32px; height: 32px; }


.solidae-drawer__close{
	/* Width/height intentionally unset — Style → Mobile Drawer → Close Icon controls
	   Icon Size + Button Padding to drive the actual tap area. */
	background: transparent;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-2, #5B544A);
	line-height: 1;
	transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}


.solidae-drawer__close:hover,
.solidae-drawer__close:focus-visible{
	background: var(--paper-2, #F4F1EA);
	color: var(--ink, #1F1A14);
}


.solidae-drawer__close i,
.solidae-drawer__close svg{ width: 20px; height: 20px; fill: currentColor; color: inherit; }



.solidae-drawer__nav{
	/* Panel is the scroller now — nav is just a vertical content container. */
	flex: 0 0 auto;
	padding: 8px 12px;
}


.solidae-drawer__row{
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 12px;
	font-size: 16px;
	font-weight: 500;
	color: var(--ink, #1F1A14);
	border-radius: 10px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	transition: background 140ms ease, color 140ms ease;
}


.solidae-drawer__row:hover{ background: var(--paper-2, #F4F1EA); }


.solidae-drawer__row--plain{ color: var(--ink-2, #5B544A); }


.solidae-drawer__chev{
	font-size: 16px;
	line-height: 0;
	color: var(--ink-2, #5B544A);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 200ms ease, color 140ms ease;
}

/* Default + custom icons get sized from the chev wrapper's font-size.
   `display: block` removes the inline baseline gap that pushes inline-block
   elements down by ~3px (descender space) — the cause of the chevron
   appearing slightly low inside the button. */
.solidae-drawer__chev > svg,
.solidae-drawer__chev i,
.solidae-drawer__chev svg{
	width: 1em;
	height: 1em;
	display: block;
	color: inherit;
	fill: currentColor;
	vertical-align: middle;
}

/* Hover/open colour. */
.solidae-drawer__row:hover .solidae-drawer__chev,
.solidae-drawer__row.is-open .solidae-drawer__chev{
	color: var(--ink, #1F1A14);
}

/* Rotate-on-open ONLY when the chev is in single-icon mode (no swap variants). */
.solidae-drawer__row.is-open .solidae-drawer__chev:not(.solidae-drawer__chev--swap){
	transform: rotate(180deg);
}

/* Swap mode (Closed Icon + Open Icon both set): hide expanded variant by default,
   reveal it on .is-open while hiding the collapsed variant. No rotation. */
.solidae-drawer__chev--swap > .solidae-drawer__chev-expanded{ display: none; }
.solidae-drawer__row.is-open .solidae-drawer__chev--swap > .solidae-drawer__chev-collapsed,
.solidae-drawer__sub-item.is-open > .solidae-drawer__chev--swap > .solidae-drawer__chev-collapsed{ display: none; }
.solidae-drawer__row.is-open .solidae-drawer__chev--swap > .solidae-drawer__chev-expanded,
.solidae-drawer__sub-item.is-open > .solidae-drawer__chev--swap > .solidae-drawer__chev-expanded{ display: inline-flex; }


.solidae-drawer__sub{
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 280ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 220ms ease;
}


.solidae-drawer__sub.is-open{
	max-height: 2000px;
	padding: 4px 0 12px 12px;
}


/* Mega Template inside the drawer — give the saved Elementor template room to breathe.
   When open, allow tall templates (the cap is high; user templates rarely exceed it).
   Reset the indent padding so the template's own internal padding governs the layout. */
/* Mega Template inside the drawer — no max-height cap so any template length renders.
   The CSS transition can't animate to `none`, so the height swap is instant; padding
   still animates which keeps a small visual cue. The drawer's nav is the scroller. */
.solidae-drawer__sub--template{ padding: 0; }
.solidae-drawer__sub--template.is-open{
	padding: 8px 0 16px;
	max-height: none;
}


.solidae-drawer__sub-group + .solidae-drawer__sub-group{ margin-top: 4px; }


.solidae-drawer__sub-label{
	font-family: "Instrument Serif", serif;
	font-style: italic;
	font-size: 12px;
	color: var(--ink-3, #8C8478);
	padding: 12px 12px 6px;
}

/* Sub-group toggle (L2) — when the L2 has its own children (L3) we render
   it as a button that collapses/expands the L3 list. Inherits .__sub-label
   typography and adds button affordances + a chevron. */
.solidae-drawer__sub-group-toggle{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	background: transparent;
	border: 0 !important;
	box-shadow: none !important;
	outline: none;
	border-radius: 0;
	cursor: pointer;
	text-align: left;
	color: inherit;
	font: inherit;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.solidae-drawer__sub-group-toggle:focus{ outline: none; }
.solidae-drawer__sub-group-toggle:focus-visible{
	outline: 2px solid currentColor;
	outline-offset: -2px;
}
.solidae-drawer__sub-group-toggle .solidae-drawer__sub-label-text{
	flex: 1 1 auto;
	min-width: 0;
}
.solidae-drawer__sub-group-toggle .solidae-drawer__chev{
	flex: 0 0 auto;
	margin-left: 8px;
	transition: transform 200ms ease;
}
.solidae-drawer__sub-group.is-open > .solidae-drawer__sub-group-toggle .solidae-drawer__chev{
	transform: rotate(180deg);
}
/* L3 content — collapsed by default, expands on .is-open (parent). */
.solidae-drawer__sub-group-content{
	max-height: 0;
	overflow: hidden;
	transition: max-height 240ms ease;
}
.solidae-drawer__sub-group.is-open > .solidae-drawer__sub-group-content{
	max-height: 1000px;
}


.solidae-drawer__sub-item{
	display: block;
	padding: 9px 12px;
	font-size: 14px;
	color: var(--ink-2, #5B544A);
	border-radius: 6px;
	text-decoration: none;
	transition: background 140ms ease, color 140ms ease;
}


.solidae-drawer__sub-item:hover{
	background: var(--paper-2, #F4F1EA);
	color: var(--ink, #1F1A14);
}


.solidae-drawer__heading{
	padding: 12px 12px 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3, #8C8478);
}


.solidae-drawer__divider{
	height: 1px;
	background: var(--line, #E8E5DD);
	margin: 8px 0;
}



.solidae-drawer__foot{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 20px;
	border-top: 1px solid var(--line, #E8E5DD);
	flex-shrink: 0;
	/* Sticky inside the scrolling panel. `margin-top: auto` pushes it to the bottom
	   of the flex column when nav content is short. */
	position: sticky;
	bottom: 0;
	z-index: 2;
	margin-top: auto;
	background: inherit;
}


.solidae-drawer__link{
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-2, #5B544A);
	padding: 8px 12px;
	text-decoration: none;
	transition: color 140ms ease;
}


.solidae-drawer__link:hover{ color: var(--ink, #1F1A14); }


.solidae-drawer__cta{
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	background: var(--accent, #C25A3D);
	color: var(--accent-ink, #FBFAF7);
	text-decoration: none;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 1px 2px rgba(20,14,8,0.15);
	transition: transform 120ms ease, box-shadow 140ms ease;
}


.solidae-drawer__cta:hover{
	transform: translateY(-1px);
	box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 4px 12px rgba(20,14,8,0.18);
}

/* Show drawer only on mobile and hide the existing inline list pattern */

@media (max-width: 1024px){
.solidae-solid-menu.mbreak-tablet .solidae-drawer{ display: block; }
.solidae-solid-menu.mbreak-tablet .solidae-solid-menu__list{ display: none !important; }
}

@media (max-width: 767px){
.solidae-solid-menu.mbreak-mobile .solidae-drawer{ display: block; }
.solidae-solid-menu.mbreak-mobile .solidae-solid-menu__list{ display: none !important; }
}

/* =====================================================================
   VERTICAL — 3-level structure (sub-sections inside the fly-out)
   ===================================================================== */

/* =====================================================================
   INLINE — 3-level structure (nested accordion within children)
   ===================================================================== */

/* =====================================================================
   DRAWER — 3-level: nested sub-sub items via recursive expansion
   ===================================================================== */


.solidae-solid-menu .solidae-drawer__sub-item.has-sub{
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 9px 12px;
	font-size: 14px;
	color: var(--ink-2, #5B544A);
	border-radius: 6px;
	/* !important here intentionally — themes commonly add bottom borders to
	   <button> elements via generic selectors, and `all: unset` doesn't beat
	   them when the theme rule has higher specificity. */
	border: 0 !important;
	box-shadow: none !important;
	outline: none;
	cursor: pointer;
	font-family: inherit;
	transition: background 140ms ease;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.solidae-solid-menu .solidae-drawer__sub-item.has-sub:focus{ outline: none; }
.solidae-solid-menu .solidae-drawer__sub-item.has-sub:focus-visible{
	outline: 2px solid currentColor;
	outline-offset: -2px;
}


.solidae-solid-menu .solidae-drawer__sub-item.has-sub:hover{
	background: var(--paper-2, #F4F1EA);
}


.solidae-solid-menu .solidae-drawer__sub-item.has-sub > .solidae-drawer__chev{
	font-size: 16px;
	line-height: 1;
	color: var(--ink-2, #5B544A);
	transition: transform 200ms ease;
}

.solidae-solid-menu .solidae-drawer__sub-item.has-sub:hover > .solidae-drawer__chev{
	color: var(--ink, #1F1A14);
}


.solidae-solid-menu .solidae-drawer__sub-item.has-sub.is-open > .solidae-drawer__chev:not(.solidae-drawer__chev--swap){
	transform: rotate(180deg);
}


.solidae-solid-menu .solidae-drawer__sub-sub{
	max-height: 0;
	overflow: hidden;
	transition: max-height 220ms ease, padding 200ms ease;
	padding: 0;
}


.solidae-solid-menu .solidae-drawer__sub-sub.is-open{
	max-height: 1500px;
	padding: 4px 0 8px 12px;
}


.solidae-solid-menu .solidae-drawer__sub-sub-item{
	display: block;
	padding: 7px 12px;
	font-size: 13px;
	color: var(--ink-3, #8C8478);
	border-radius: 6px;
	text-decoration: none;
	transition: background 140ms ease, color 140ms ease;
}


.solidae-solid-menu .solidae-drawer__sub-sub-item:hover{
	background: var(--paper-2, #F4F1EA);
	color: var(--ink, #1F1A14);
}

/* =====================================================================
   VERTICAL — 3-level (3rd column appears when L2 row with children is hovered)
   ===================================================================== */

/* L2 row with children gets a chevron on the right, like L1 */

/* Inner expands the panel to 3 columns when L2 with children is hovered */

/* 3-column grid only when L3 is actively shown (an L2-with-children is hovered).
   Default layout stays 2-column so the 3rd column doesn't take empty space. */

/* Width animations: 260 → 540 (L2 open) → 820 (L3 open) */

/* =====================================================================
   Universal list-style reset inside all dropdown panels.
   Prevents theme/browser default bullets at any nesting depth.
   ===================================================================== */

/* =====================================================================
   SMALL-DESKTOP OVERFLOW HANDLING (B / D / E)
   Active above the mobile breakpoint only — once mobile mode kicks in,
   the drawer takes over and these rules become moot.
   ===================================================================== */

/* --- B. Horizontal scroll mode -------------------------------------- */
.solidae-solid-menu.overflow-scroll .solidae-solid-menu__bar{
	min-width: 0;
	position: relative;
}
.solidae-solid-menu.overflow-scroll .solidae-solid-menu__list{
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	scroll-padding-inline: 12px;
}
.solidae-solid-menu.overflow-scroll .solidae-solid-menu__list::-webkit-scrollbar{
	display: none;
}
.solidae-solid-menu.overflow-scroll .solidae-solid-menu__item{
	flex: 0 0 auto;
	scroll-snap-align: start;
}
/* Soft fade mask on the right edge to hint that more items are scrollable.
   We hide it once the user has scrolled to the end via JS-toggled class. */
.solidae-solid-menu.overflow-scroll .solidae-solid-menu__bar::after{
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	right: 0;
	width: 36px;
	pointer-events: none;
	background: linear-gradient(to right, rgba(0,0,0,0), var(--solidae-sm-fade-color, rgba(255,255,255,0.95)));
	opacity: 1;
	transition: opacity 160ms linear;
}
.solidae-solid-menu.overflow-scroll.is-scroll-end .solidae-solid-menu__bar::after{
	opacity: 0;
}

/* Visible scroll affordance — small chevron button on the right edge that
   gently pulses to draw attention. Clicking it scrolls the list ~80% of its
   width to the right. JS toggles the [hidden] attribute based on scroll state. */
.solidae-solid-menu__scroll-hint{
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var(--solidae-sm-hint-bg, rgba(20,14,8,0.85));
	color: var(--solidae-sm-hint-color, #fff);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	z-index: 2;
	box-shadow: 0 4px 12px -4px rgba(0,0,0,0.25);
	animation: solidae-sm-scroll-bounce 1.6s ease-in-out infinite;
	transition: opacity 200ms ease;
}
.solidae-solid-menu__scroll-hint:hover{ opacity: 0.9; }
.solidae-solid-menu__scroll-hint:focus-visible{
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.solidae-solid-menu.overflow-scroll.is-scroll-end .solidae-solid-menu__scroll-hint{
	opacity: 0;
	pointer-events: none;
}
@keyframes solidae-sm-scroll-bounce{
	0%, 100% { transform: translateY(-50%) translateX(0); }
	50%      { transform: translateY(-50%) translateX(4px); }
}
@media (prefers-reduced-motion: reduce){
	.solidae-solid-menu__scroll-hint{ animation: none; }
}

/* --- D. More menu mode ---------------------------------------------- */
/* The more item is rendered hidden by PHP and JS reveals it once at least
   one item has overflowed. Visibility is gated on `.has-overflow` so the
   button only appears when actually needed. */
.solidae-solid-menu .solidae-solid-menu__item.is-more{
	display: none;
	position: relative;
}
.solidae-solid-menu.overflow-more.has-overflow .solidae-solid-menu__item.is-more{
	display: inline-flex;
	align-items: center;
}

/* Pill-style toggle button so it stands out from regular menu items as a UI
   affordance rather than a navigation entry. */
.solidae-solid-menu .solidae-solid-menu__more-toggle{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	cursor: pointer;
	background: var(--solidae-sm-more-bg, rgba(20,14,8,0.06));
	border: 1px solid var(--solidae-sm-more-border, rgba(20,14,8,0.10));
	border-radius: 999px;
	font: inherit;
	color: inherit;
	line-height: 1.2;
	transition: background-color 160ms ease, border-color 160ms ease;
}
.solidae-solid-menu .solidae-solid-menu__more-toggle:hover,
.solidae-solid-menu .solidae-solid-menu__more-toggle:focus-visible{
	background: var(--solidae-sm-more-bg-hover, rgba(20,14,8,0.10));
	border-color: var(--solidae-sm-more-border-hover, rgba(20,14,8,0.18));
	outline: none;
}
/* Override the global caret-chevron / caret-arrow / caret-plus rules that
   paint a CSS-border chevron on `.solidae-solid-menu__caret` — those would
   render *on top of* our SVG, producing a small extra bar/line. We want
   only the SVG to be visible inside the More toggle and inside cloned
   collapsible toggles. */
.solidae-solid-menu .solidae-solid-menu__more-toggle .solidae-solid-menu__caret,
.solidae-solid-menu .solidae-solid-menu__more-sub-toggle .solidae-solid-menu__caret{
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	width: 12px;
	height: 8px;
	border: 0 !important;
	background: transparent !important;
	transform: none;
	transition: transform 160ms ease;
}
.solidae-solid-menu .solidae-solid-menu__more-toggle .solidae-solid-menu__caret svg,
.solidae-solid-menu .solidae-solid-menu__more-sub-toggle .solidae-solid-menu__caret svg{
	display: block;
	width: 12px;
	height: 8px;
}
/* Make the entire button surface receive clicks — without this, clicks on
   the inner <svg> path or label span can become the event target and some
   themes / Elementor link wrappers swallow them. With pointer-events: none
   on children, every click resolves to the button element. */
.solidae-solid-menu .solidae-solid-menu__more-toggle > *,
.solidae-solid-menu .solidae-solid-menu__more-sub-toggle > *{
	pointer-events: none;
}
.solidae-solid-menu .solidae-solid-menu__list > .solidae-solid-menu__item.is-more:hover > .solidae-solid-menu__more-toggle .solidae-solid-menu__caret,
.solidae-solid-menu .solidae-solid-menu__item.is-more.is-open > .solidae-solid-menu__more-toggle .solidae-solid-menu__caret{
	transform: rotate(180deg);
}

/* The dropdown itself — absolute-positioned card, hidden by default, shown
   when the More item is hovered/open. High z-index so it floats above the
   site logo, sticky bars, etc. */
.solidae-solid-menu .solidae-solid-menu__more-list{
	position: absolute;
	top: calc(100% + var(--solidae-sm-submenu-offset, 8px));
	right: 0;
	left: auto;
	min-width: 240px;
	max-width: min(320px, 90vw);
	margin: 0;
	padding: 6px;
	background: var(--solidae-sm-panel-bg, #ffffff);
	color: var(--solidae-sm-panel-color, #14110D);
	border: 1px solid rgba(20,14,8,0.08);
	border-radius: 10px;
	box-shadow: 0 12px 32px -8px rgba(20,14,8,0.18);
	list-style: none;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
.solidae-solid-menu .solidae-solid-menu__list > .solidae-solid-menu__item.is-more:hover > .solidae-solid-menu__more-list,
.solidae-solid-menu .solidae-solid-menu__item.is-more.is-open > .solidae-solid-menu__more-list{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 0s;
}
.solidae-solid-menu .solidae-solid-menu__more-list > li{
	display: block;
}

/* Parent row of a collapsible group inside More. */
.solidae-solid-menu .solidae-solid-menu__more-sub-toggle{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 8px 12px;
	background: transparent;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
	border-radius: 6px;
}
.solidae-solid-menu .solidae-solid-menu__more-sub-toggle:hover,
.solidae-solid-menu .solidae-solid-menu__more-sub-toggle:focus-visible{
	background: rgba(0,0,0,0.04);
	outline: none;
}
.solidae-solid-menu .solidae-solid-menu__more-sub-toggle .solidae-solid-menu__caret{
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	transition: transform 160ms ease;
}
.solidae-solid-menu .solidae-solid-menu__more-list .is-collapsible.is-open > .solidae-solid-menu__more-sub-toggle .solidae-solid-menu__caret{
	transform: rotate(180deg);
}

/* Nested sub-list — collapsed by default, expands on .is-open. */
.solidae-solid-menu__more-sub{
	list-style: none;
	margin: 0;
	padding: 0 0 4px 14px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 200ms ease;
}
.solidae-solid-menu .solidae-solid-menu__more-list .is-collapsible.is-open > .solidae-solid-menu__more-sub{
	max-height: 60vh;
	overflow: auto;
}
.solidae-solid-menu__more-sub > li > .solidae-solid-menu__link{
	display: block;
	padding: 6px 10px;
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
	font-size: 0.95em;
	line-height: 1.4;
}
.solidae-solid-menu__more-sub > li > .solidae-solid-menu__link:hover,
.solidae-solid-menu__more-sub > li > .solidae-solid-menu__link:focus-visible{
	background: rgba(0,0,0,0.04);
	outline: none;
}
/* The first entry in a collapsible group links to the parent item's own URL —
   give it a subtle weight so users see it as the "main" page. */
.solidae-solid-menu__more-sub > li.is-parent-link > .solidae-solid-menu__link{
	font-weight: 600;
}

/* --- E. Compact preset ---------------------------------------------- */
/* Tightens padding + font-size for top-level items in the laptop range
   above the mobile breakpoint. The base ratio mirrors Elementor's tablet
   responsive ranges so it kicks in roughly between 769–1280px. */
@media (min-width: 769px) and (max-width: 1280px){
	.solidae-solid-menu.overflow-compact .solidae-solid-menu__list{
		gap: max(2px, calc(var(--solidae-sm-item-gap, 4px) * 0.6));
	}
	.solidae-solid-menu.overflow-compact .solidae-solid-menu__list > .solidae-solid-menu__item > .solidae-solid-menu__link{
		padding-inline: max(6px, calc(var(--solidae-sm-link-px, 14px) * 0.65));
		padding-block:  max(4px, calc(var(--solidae-sm-link-py, 10px) * 0.7));
		font-size: max(12px, calc(1em * 0.92));
		letter-spacing: 0;
	}
}
/* Overflow safety — only kicks in when items don't fit even after the
   compact tightening / scroll mode allows. JS detects the actual overflow
   and adds `.has-natural-overflow` to the root; we then fall back to
   flex-start so the leading items stay fully visible (overflow goes to
   the right where it can be scrolled to or clipped cleanly). When items
   DO fit, the user's chosen Alignment (center / flex-end / space-*) is
   respected — that's why we don't force this unconditionally. */
.solidae-solid-menu.has-natural-overflow .solidae-solid-menu__list{
	justify-content: flex-start !important;
}