/**
 * PWD Elementor Theme Pro - Nav Menu Widget CSS v1.2.1
 *
 * 1.2.1: the mobile panel and overlay live at the end of <body> (moved there
 * by the script) so no header can hold them behind the page. The dropdown is
 * full width under the header, the off-canvas and full-screen panels sit
 * above everything, and their close button has its own row.
 *
 * 1.2.0: desktop hover effects for the top-level items (underline, overline,
 * frame, background sweep, pill, dot, text roll, sliding highlight) and
 * dropdown open animations and item hover effects, all CSS, all with speed
 * controls.
 *
 * 1.1.0: mobile panel rebuilt around transitions (slide from left or right, or
 * fade, with a speed and easing control), scrolling inside the panel, and an
 * animated submenu accordion with its own toggle buttons. Desktop menu is
 * unchanged.
 */

/* ── Wrapper ─────────────────────────────────────────────── */
.pwd-nav-wrap {
	display: flex;
	align-items: center;
	position: relative;

	/* Mobile panel settings. The widget controls override these. */
	--pwd-mob-speed: 300ms;
	--pwd-mob-ease: ease;
	--pwd-mob-width: 300px;
	--pwd-mob-maxh: 80vh;
	--pwd-sub-speed: 300ms;
	--pwd-sub-indent: 16px;
	--pwd-mob-overlay: rgba(0, 0, 0, 0.5);
	--pwd-mob-blur: 0px;
	--pwd-mob-divider: rgba(0, 0, 0, 0.06);
}

/* ── Desktop menu ────────────────────────────────────────── */
.pwd-nav-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 24px;
}

.pwd-nav-layout-vertical .pwd-nav-menu {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.pwd-nav-menu li {
	position: relative;
	margin: 0;
	padding: 0;
}

.pwd-nav-menu li a {
	display: flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, background-color 0.2s ease;
	line-height: 1.4;
}

/* ── Dropdown arrow ──────────────────────────────────────── */
.pwd-nav-arrow-no .pwd-nav-arrow {
	display: none;
}
.pwd-nav-arrow {
	font-size: 0.7em;
	line-height: 1;
	display: inline-block;
	transition: transform 0.2s ease;
}
.pwd-nav-menu li.pwd-open > a .pwd-nav-arrow {
	transform: rotate(180deg);
}

/* ── Dropdown (sub-menu) ─────────────────────────────────── */
.pwd-nav-menu ul.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9999;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	min-width: 200px;
	background: #ffffff;
	box-shadow: 0 4px 20px rgba(0,0,0,0.12);
	border-radius: 4px;
}

.pwd-nav-menu ul.sub-menu li {
	width: 100%;
}

.pwd-nav-menu ul.sub-menu a {
	display: block;
	padding: 10px 20px;
	white-space: nowrap;
}

/* nested dropdowns */
.pwd-nav-menu ul.sub-menu ul.sub-menu {
	top: 0;
	left: 100%;
}

.pwd-nav-menu li.pwd-open > ul.sub-menu,
.pwd-nav-menu li:hover > ul.sub-menu {
	display: block;
	animation: pwdNavFadeIn 0.15s ease;
}

@keyframes pwdNavFadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Vertical layout dropdown ────────────────────────────── */
.pwd-nav-layout-vertical .pwd-nav-menu ul.sub-menu {
	position: static;
	box-shadow: none;
	border-radius: 0;
	padding-left: 16px;
}

/* ══════════════════════════════════════════════════════════
 * Desktop hover effects (top-level items) and dropdown animations
 *
 * Every effect is driven by one custom property, --pwd-hv-on, which is 0 at
 * rest and 1 while the link is hovered, keyboard-focused or (optionally) the
 * current page. The effects draw with ::before / ::after and read that value in
 * a transform or opacity, so the same transition handles the way in and the
 * way out. Colour, thickness, offset, radius, speed and easing are variables
 * set by the Hover Effect controls.
 * ══════════════════════════════════════════════════════════ */

.pwd-nav-menu > li > a,
.pwd-nav-menu ul.sub-menu a {
	--pwd-hv-on: 0;
	position: relative;
}

.pwd-nav-menu > li > a:focus-visible,
.pwd-nav-menu ul.sub-menu a:focus-visible,
.pwd-hv-keep .pwd-nav-menu > li.current-menu-item > a,
.pwd-hv-keep .pwd-nav-menu > li.current-menu-ancestor > a {
	--pwd-hv-on: 1;
}

@media (hover: hover) {
	.pwd-nav-menu > li > a:hover,
	.pwd-nav-menu ul.sub-menu a:hover {
		--pwd-hv-on: 1;
	}
}

/* ── Lines: underline, overline, both ───────────────────── */
.pwd-hv-ul-left .pwd-nav-menu > li > a::after,
.pwd-hv-ul-center .pwd-nav-menu > li > a::after,
.pwd-hv-ul-right .pwd-nav-menu > li > a::after,
.pwd-hv-double .pwd-nav-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--pwd-hv-offset, 0px);
	height: var(--pwd-hv-thick, 2px);
	background: var(--pwd-hv-color, currentColor);
	transform: scaleX(var(--pwd-hv-on));
	transform-origin: left center;
	transition: transform var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
	pointer-events: none;
}

.pwd-hv-overline .pwd-nav-menu > li > a::before,
.pwd-hv-double .pwd-nav-menu > li > a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: var(--pwd-hv-offset, 0px);
	height: var(--pwd-hv-thick, 2px);
	background: var(--pwd-hv-color, currentColor);
	transform: scaleX(var(--pwd-hv-on));
	transform-origin: right center;
	transition: transform var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
	pointer-events: none;
}

.pwd-hv-ul-center .pwd-nav-menu > li > a::after { transform-origin: center; }
.pwd-hv-ul-right .pwd-nav-menu > li > a::after { transform-origin: right center; }

/* ── Frame ──────────────────────────────────────────────── */
.pwd-hv-frame .pwd-nav-menu > li > a::before {
	content: "";
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	border: var(--pwd-hv-thick, 2px) solid var(--pwd-hv-color, currentColor);
	border-radius: var(--pwd-hv-radius, 6px);
	opacity: var(--pwd-hv-on);
	transform: scale(calc(0.9 + 0.1 * var(--pwd-hv-on)));
	transition: opacity var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease), transform var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
	pointer-events: none;
}

/* ── Background sweeps and pill (drawn behind the text) ── */
.pwd-hv-sweep-x .pwd-nav-menu > li > a,
.pwd-hv-sweep-y .pwd-nav-menu > li > a,
.pwd-hv-pill .pwd-nav-menu > li > a {
	isolation: isolate;
}

.pwd-hv-sweep-x .pwd-nav-menu > li > a::before,
.pwd-hv-sweep-y .pwd-nav-menu > li > a::before,
.pwd-hv-pill .pwd-nav-menu > li > a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--pwd-hv-color, currentColor);
	border-radius: var(--pwd-hv-radius, 6px);
	pointer-events: none;
	transition: transform var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease), opacity var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
}

.pwd-hv-sweep-x .pwd-nav-menu > li > a::before {
	transform: scaleX(var(--pwd-hv-on));
	transform-origin: left center;
}

.pwd-hv-sweep-y .pwd-nav-menu > li > a::before {
	transform: scaleY(var(--pwd-hv-on));
	transform-origin: center bottom;
}

.pwd-hv-pill .pwd-nav-menu > li > a::before {
	border-radius: 999px;
	opacity: var(--pwd-hv-on);
	transform: scale(calc(0.8 + 0.2 * var(--pwd-hv-on)));
}

/* ── Dot ────────────────────────────────────────────────── */
.pwd-hv-dot .pwd-nav-menu > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: var(--pwd-hv-offset, 0px);
	width: calc(var(--pwd-hv-thick, 2px) * 2);
	height: calc(var(--pwd-hv-thick, 2px) * 2);
	border-radius: 50%;
	background: var(--pwd-hv-color, currentColor);
	transform: translateX(-50%) scale(var(--pwd-hv-on));
	transition: transform var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
	pointer-events: none;
}

/* ── Text roll (the walker prints the label twice) ──────── */
.pwd-hv-roll .pwd-nav-menu > li > a .pwd-nav-label {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.pwd-hv-roll .pwd-nav-menu > li > a .pwd-nav-label-roll {
	display: block;
	transform: translateY(calc(-100% * var(--pwd-hv-on)));
	transition: transform var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
}

.pwd-hv-roll .pwd-nav-menu > li > a .pwd-nav-label-roll::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	white-space: nowrap;
}

/* ── Sliding highlight (CSS anchor positioning) ─────────── */
/* One background element belongs to the whole menu and is tethered to
   whichever item is hovered or focused, so it glides from item to item. Where
   anchor positioning is missing, the item just gets a background fade. */
@supports (anchor-name: --pwd-hv) {
	.pwd-hv-highlight .pwd-nav-menu {
		position: relative;
		isolation: isolate;
	}

	.pwd-hv-highlight .pwd-nav-menu > li > a {
		z-index: 1;
	}

	.pwd-hv-highlight .pwd-nav-menu > li:focus-within > a {
		anchor-name: --pwd-hv;
	}

	.pwd-hv-highlight .pwd-nav-menu::before {
		content: "";
		position: absolute;
		z-index: 0;
		position-anchor: --pwd-hv;
		top: anchor(top);
		bottom: anchor(bottom);
		left: anchor(left);
		right: anchor(right);
		background: var(--pwd-hv-color, rgba(127, 127, 127, 0.18));
		border-radius: var(--pwd-hv-radius, 6px);
		opacity: 0;
		pointer-events: none;
		transition:
			top var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease),
			bottom var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease),
			left var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease),
			right var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease),
			opacity var(--pwd-hv-speed, 300ms) ease;
	}

	.pwd-hv-highlight .pwd-nav-menu:has(> li:focus-within > a)::before {
		opacity: 1;
	}

	@media (hover: hover) {
		.pwd-hv-highlight .pwd-nav-menu > li:hover > a {
			anchor-name: --pwd-hv;
		}

		.pwd-hv-highlight .pwd-nav-menu:has(> li:hover > a)::before {
			opacity: 1;
		}
	}
}

@supports not (anchor-name: --pwd-hv) {
	.pwd-hv-highlight .pwd-nav-menu > li > a {
		border-radius: var(--pwd-hv-radius, 6px);
		transition: background-color var(--pwd-hv-speed, 300ms) var(--pwd-hv-ease, ease);
	}

	.pwd-hv-highlight .pwd-nav-menu > li > a:focus-visible {
		background-color: var(--pwd-hv-color, rgba(127, 127, 127, 0.18));
	}

	@media (hover: hover) {
		.pwd-hv-highlight .pwd-nav-menu > li > a:hover {
			background-color: var(--pwd-hv-color, rgba(127, 127, 127, 0.18));
		}
	}
}

/* ── Dropdown item hover effects ────────────────────────── */
.pwd-nav-menu ul.sub-menu a .pwd-nav-label {
	display: inline-block;
}

/* Nudge and accent bar are folded into the Item Hover Animation control
   (pwd-ddfx-*), so they share the --pwd-ddfx-* colour / speed / easing and the
   Keep-on-current-page state. */
.pwd-ddfx-nudge .pwd-nav-menu ul.sub-menu a .pwd-nav-label {
	transform: translateX(calc(8px * var(--pwd-ddfx-on)));
	transition: transform var(--pwd-ddfx-speed, 300ms) var(--pwd-ddfx-ease, ease);
}

.pwd-ddfx-bar .pwd-nav-menu ul.sub-menu a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12%;
	bottom: 12%;
	width: 3px;
	border-radius: 2px;
	background: var(--pwd-ddfx-color, currentColor);
	transform: scaleY(var(--pwd-ddfx-on));
	transition: transform var(--pwd-ddfx-speed, 300ms) var(--pwd-ddfx-ease, ease);
	pointer-events: none;
}

/* ── Dropdown open animations (desktop) ─────────────────── */
/* The default (fade and slide down) is the original rule above. Speed comes
   from --pwd-dd-speed. */
.pwd-nav-wrap .pwd-nav-menu li.pwd-open > ul.sub-menu,
.pwd-nav-wrap .pwd-nav-menu li:hover > ul.sub-menu {
	animation-duration: var(--pwd-dd-speed, 150ms);
}

.pwd-dd-fade .pwd-nav-menu li.pwd-open > ul.sub-menu,
.pwd-dd-fade .pwd-nav-menu li:hover > ul.sub-menu {
	animation-name: pwdDdFade;
}

.pwd-dd-scale .pwd-nav-menu li.pwd-open > ul.sub-menu,
.pwd-dd-scale .pwd-nav-menu li:hover > ul.sub-menu {
	animation-name: pwdDdScale;
	transform-origin: top left;
}

.pwd-dd-wipe .pwd-nav-menu li.pwd-open > ul.sub-menu,
.pwd-dd-wipe .pwd-nav-menu li:hover > ul.sub-menu {
	animation-name: pwdDdWipe;
}

.pwd-dd-flip .pwd-nav-menu li.pwd-open > ul.sub-menu,
.pwd-dd-flip .pwd-nav-menu li:hover > ul.sub-menu {
	animation-name: pwdDdFlip;
	transform-origin: top center;
}

.pwd-dd-none .pwd-nav-menu li.pwd-open > ul.sub-menu,
.pwd-dd-none .pwd-nav-menu li:hover > ul.sub-menu {
	animation: none;
}

.pwd-dd-stagger .pwd-nav-menu li.pwd-open > ul.sub-menu,
.pwd-dd-stagger .pwd-nav-menu li:hover > ul.sub-menu {
	animation-name: pwdDdFade;
}

.pwd-dd-stagger .pwd-nav-menu li.pwd-open > ul.sub-menu > li,
.pwd-dd-stagger .pwd-nav-menu li:hover > ul.sub-menu > li {
	animation: pwdDdItem var(--pwd-dd-speed, 150ms) ease calc(var(--pwd-i, 0) * 45ms) both;
}

.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(1) { --pwd-i: 0; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(2) { --pwd-i: 1; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(3) { --pwd-i: 2; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(4) { --pwd-i: 3; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(5) { --pwd-i: 4; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(6) { --pwd-i: 5; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(7) { --pwd-i: 6; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(8) { --pwd-i: 7; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(9) { --pwd-i: 8; }
.pwd-dd-stagger .pwd-nav-menu ul.sub-menu > li:nth-child(n+10) { --pwd-i: 9; }

@keyframes pwdDdFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes pwdDdScale {
	from { opacity: 0; transform: scale(0.92); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes pwdDdWipe {
	from { clip-path: inset(0 -40px 100% -40px); }
	to   { clip-path: inset(0 -40px -60px -40px); }
}

@keyframes pwdDdFlip {
	from { opacity: 0; transform: perspective(600px) rotateX(-18deg); }
	to   { opacity: 1; transform: perspective(600px) rotateX(0); }
}

@keyframes pwdDdItem {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: effects still show their end state, without moving. */
@media (prefers-reduced-motion: reduce) {
	.pwd-nav-wrap .pwd-nav-menu *,
	.pwd-nav-wrap .pwd-nav-menu *::before,
	.pwd-nav-wrap .pwd-nav-menu *::after,
	.pwd-nav-wrap .pwd-nav-menu::before {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		transition-duration: 0.01ms !important;
	}
}

/* ── Hamburger button ────────────────────────────────────── */
.pwd-nav-hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	border-radius: 4px;
	transition: background-color 0.2s ease;
	z-index: 1001;
}

.pwd-ham-bar {
	display: block;
	width: 22px;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Animated X on open */
.pwd-nav-hamburger.pwd-is-open .pwd-ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pwd-nav-hamburger.pwd-is-open .pwd-ham-bar:nth-child(2) { opacity: 0; }
.pwd-nav-hamburger.pwd-is-open .pwd-ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* dots */
.pwd-ham-dot {
	display: block;
	width: 5px;
	height: 5px;
	background: currentColor;
	border-radius: 50%;
}

/* ══════════════════════════════════════════════════════════
 * Mobile panel
 *
 * One set of rules for all three styles. The panel is always laid out while
 * the menu is in mobile mode and is hidden with visibility, so a closed panel
 * can never be reached by keyboard. Opening and closing are transitions on
 * opacity, transform and clip-path, timed by --pwd-mob-speed / --pwd-mob-ease.
 * The widget's colour, shadow and padding controls set the plain properties
 * below at a higher specificity, so the visual defaults here stay single-class.
 * ══════════════════════════════════════════════════════════ */

.pwd-nav-mobile-panel {
	background: #fff;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* ── Portal host ────────────────────────────────────────── */
/* The script moves the panel and overlay to the end of <body>, inside copies
   of the widget's wrappers, so a header's z-index, transform or
   backdrop-filter (sticky header blur, hide on scroll) cannot trap them
   behind the page or inside the header box. The copies generate no box of
   their own; they only keep the widget's style selectors and variables. */
.pwd-nav-portal-host,
.pwd-nav-wrap.pwd-nav-portal {
	display: contents !important;
}

/* The copies leave out Elementor's "elementor" class (Elementor reads every
   such element as a document), so restore the base rules it brought. */
.pwd-nav-portal-host *,
.pwd-nav-portal-host *::before,
.pwd-nav-portal-host *::after {
	box-sizing: border-box;
}
.pwd-nav-portal-host a {
	box-shadow: none;
	text-decoration: none;
}
.pwd-nav-portal-host img {
	height: auto;
	max-width: 100%;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

/* ── Dropdown style: hangs below the header ─────────────── */
/* Fixed to the viewport, full width, its top kept on the bottom edge of the
   header by the script (--pwd-mob-top). */
.pwd-nav-wrap .pwd-nav-mobile-panel {
	position: fixed;
	top: var(--pwd-mob-top, 0px);
	left: 0;
	right: 0;
	z-index: 9990;
	max-height: var(--pwd-mob-maxh);
	max-height: min(var(--pwd-mob-maxh), calc(100vh - var(--pwd-mob-top, 0px)));
	max-height: min(var(--pwd-mob-maxh), calc(100dvh - var(--pwd-mob-top, 0px)));
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--pwd-mob-speed) var(--pwd-mob-ease),
		transform var(--pwd-mob-speed) var(--pwd-mob-ease),
		clip-path var(--pwd-mob-speed) var(--pwd-mob-ease),
		visibility 0s linear var(--pwd-mob-speed);
}

/* Slide down: reveal from the top edge (the extra inset leaves room for the shadow). */
.pwd-nav-wrap.pwd-mob-dropdown.pwd-mob-anim-slide .pwd-nav-mobile-panel {
	clip-path: inset(0 -40px 100% -40px);
}

.pwd-nav-wrap .pwd-nav-mobile-panel.pwd-is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition-delay: 0s;
}

.pwd-nav-wrap.pwd-mob-dropdown.pwd-mob-anim-slide .pwd-nav-mobile-panel.pwd-is-open {
	clip-path: inset(0 -40px -60px -40px);
}

/* ── Off-canvas style: slides in from the left or right ─── */
.pwd-nav-wrap.pwd-mob-sidebar .pwd-nav-mobile-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: auto;
	z-index: 100001;
	width: var(--pwd-mob-width);
	max-width: 90vw;
	max-height: none;
	transform: translateX(-100%);
}

/* Off-canvas and full-screen: the close button is its own row at the top, so
   it sits above the menu, never covers the first item's arrow and never
   scrolls away. Only the menu list scrolls. */
.pwd-nav-wrap.pwd-mob-sidebar .pwd-nav-mobile-panel,
.pwd-nav-wrap.pwd-mob-fullscreen .pwd-nav-mobile-panel {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.pwd-nav-wrap.pwd-mob-sidebar .pwd-nav-menu-mobile,
.pwd-nav-wrap.pwd-mob-fullscreen .pwd-nav-menu-mobile {
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.pwd-nav-wrap.pwd-mob-sidebar .pwd-nav-menu-mobile {
	flex: 1 1 auto;
}

.pwd-nav-wrap.pwd-mob-sidebar.pwd-mob-side-right .pwd-nav-mobile-panel {
	left: auto;
	right: 0;
	transform: translateX(100%);
}

.pwd-nav-wrap.pwd-mob-sidebar .pwd-nav-mobile-panel.pwd-is-open,
.pwd-nav-wrap.pwd-mob-sidebar.pwd-mob-side-right .pwd-nav-mobile-panel.pwd-is-open {
	transform: none;
}

/* Fade: the panel stays put and only its opacity changes. */
.pwd-nav-wrap.pwd-mob-sidebar.pwd-mob-anim-fade .pwd-nav-mobile-panel,
.pwd-nav-wrap.pwd-mob-sidebar.pwd-mob-anim-fade.pwd-mob-side-right .pwd-nav-mobile-panel {
	transform: none;
}

/* ── Full-screen style ──────────────────────────────────── */
.pwd-nav-wrap.pwd-mob-fullscreen .pwd-nav-mobile-panel {
	position: fixed;
	inset: 0;
	z-index: 100001;
	max-height: none;
}

.pwd-nav-wrap.pwd-mob-fullscreen.pwd-mob-anim-slide .pwd-nav-mobile-panel {
	transform: translateX(-100%);
}

.pwd-nav-wrap.pwd-mob-fullscreen.pwd-mob-anim-slide.pwd-mob-side-right .pwd-nav-mobile-panel {
	transform: translateX(100%);
}

.pwd-nav-wrap.pwd-mob-fullscreen.pwd-mob-anim-slide .pwd-nav-mobile-panel.pwd-is-open,
.pwd-nav-wrap.pwd-mob-fullscreen.pwd-mob-anim-slide.pwd-mob-side-right .pwd-nav-mobile-panel.pwd-is-open {
	transform: none;
}

/* Centred when short, scrolls normally when tall. */
.pwd-nav-wrap.pwd-mob-fullscreen .pwd-nav-menu-mobile {
	flex: 0 1 auto;
	width: 100%;
	max-width: 560px;
	margin: auto;
	box-sizing: border-box;
}

/* Long menus: room after the last item (set by "Space Below Last Item") and a
   scrollbar that stays visible on phones, where the default one hides at once.
   The Style controls override width and colours. */
.pwd-nav-wrap .pwd-nav-menu-mobile::after {
	content: "";
	display: block;
	height: var(--pwd-mob-clear, 0px);
}

.pwd-nav-wrap .pwd-nav-menu-mobile::-webkit-scrollbar,
.pwd-nav-wrap.pwd-mob-dropdown .pwd-nav-mobile-panel::-webkit-scrollbar {
	width: 6px;
}

.pwd-nav-wrap .pwd-nav-menu-mobile::-webkit-scrollbar-thumb,
.pwd-nav-wrap.pwd-mob-dropdown .pwd-nav-mobile-panel::-webkit-scrollbar-thumb {
	background-color: rgba(128, 128, 128, 0.6);
	border-radius: 3px;
}

.pwd-nav-wrap .pwd-nav-menu-mobile::-webkit-scrollbar-track,
.pwd-nav-wrap.pwd-mob-dropdown .pwd-nav-mobile-panel::-webkit-scrollbar-track {
	background-color: transparent;
}

/* Page scroll lock while an off-canvas or full-screen menu is open. */
body.pwd-nav-lock {
	overflow: hidden;
}

/* ── Overlay ─────────────────────────────────────────────── */
.pwd-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: var(--pwd-mob-overlay);
	-webkit-backdrop-filter: blur(var(--pwd-mob-blur));
	backdrop-filter: blur(var(--pwd-mob-blur));
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--pwd-mob-speed) ease, visibility 0s linear var(--pwd-mob-speed);
}
.pwd-nav-overlay.pwd-is-open {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

/* ── Close button ────────────────────────────────────────── */
.pwd-nav-close {
	position: relative;
	z-index: 2;
	flex: none;
	align-self: flex-end;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 12px 12px 0 auto;
	font-size: 1.4rem;
	cursor: pointer;
	line-height: 1;
}

/* Scoped so a theme's button styles (background, border, colours) do not
   repaint the close button. The colour comes from a variable the widget's
   Close Button Colour control sets. */
.pwd-nav-wrap .pwd-nav-close,
.pwd-nav-wrap .pwd-nav-close:hover,
.pwd-nav-wrap .pwd-nav-close:focus {
	padding: 8px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--pwd-nav-close-color, inherit);
}

/* ── Mobile menu list ────────────────────────────────────── */
/* Lists, items and links are scoped under .pwd-nav-wrap so a theme's rules for
   bare ul, li and a elements (bullets, margins, underlines) cannot undo them.
   Padding and colour stay at lower specificity on purpose: the widget's own
   controls set those. */
.pwd-nav-wrap .pwd-nav-menu-mobile {
	list-style: none;
	margin: 0;
	padding: 16px 0;
}
.pwd-nav-wrap .pwd-nav-menu-mobile li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.pwd-nav-menu-mobile a {
	display: block;
	padding: 12px 20px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.pwd-nav-wrap .pwd-nav-menu-mobile li a {
	text-decoration: none;
	border-bottom: 1px solid var(--pwd-mob-divider);
}

/* Rows with a submenu: link on the left, toggle button on the right. */
.pwd-nav-menu-mobile li.menu-item-has-children {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
}

.pwd-nav-menu-mobile .pwd-sub-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--pwd-mob-divider);
	border-radius: 0;
	color: inherit;
	cursor: pointer;
}

.pwd-nav-menu-mobile .pwd-sub-toggle svg {
	display: block;
	width: 16px;
	height: 16px;
	transition: transform var(--pwd-sub-speed) var(--pwd-mob-ease);
}

.pwd-nav-menu-mobile li.pwd-open > .pwd-sub-toggle svg {
	transform: rotate(180deg);
}

/* Submenu: the wrapper animates its row height from 0fr to 1fr, so any
   amount of content opens smoothly without measuring it in script. */
.pwd-nav-menu-mobile .pwd-sub-wrap {
	grid-column: 1 / -1;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--pwd-sub-speed) var(--pwd-mob-ease);
}

.pwd-nav-menu-mobile li.pwd-open > .pwd-sub-wrap {
	grid-template-rows: 1fr;
}

.pwd-nav-menu-mobile .pwd-sub-inner {
	min-height: 0;
	overflow: hidden;
	padding-left: var(--pwd-sub-indent);
	visibility: hidden;
	transition: visibility 0s linear var(--pwd-sub-speed);
}

.pwd-nav-menu-mobile li.pwd-open > .pwd-sub-wrap > .pwd-sub-inner {
	visibility: visible;
	transition-delay: 0s;
}

.pwd-nav-wrap .pwd-nav-menu-mobile ul.sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A theme's button hover and focus colours must not repaint the arrow button. */
.pwd-nav-wrap .pwd-nav-menu-mobile .pwd-sub-toggle:hover,
.pwd-nav-wrap .pwd-nav-menu-mobile .pwd-sub-toggle:focus {
	background-color: transparent;
	border-top-width: 0;
	box-shadow: none;
}

/* Keyboard focus */
.pwd-nav-hamburger:focus-visible,
.pwd-nav-close:focus-visible,
.pwd-nav-menu-mobile .pwd-sub-toggle:focus-visible,
.pwd-nav-menu-mobile a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* ── Responsive visibility (JS driven via data-breakpoint) ── */
/* JS adds class pwd-nav-mobile-mode to .pwd-nav-wrap when below breakpoint */
.pwd-nav-wrap.pwd-nav-mobile-mode .pwd-nav-menu { display: none; }
.pwd-nav-wrap.pwd-nav-mobile-mode .pwd-nav-hamburger { display: flex; }
.pwd-nav-wrap:not(.pwd-nav-mobile-mode) .pwd-nav-hamburger { display: none; }
.pwd-nav-wrap:not(.pwd-nav-mobile-mode) .pwd-nav-mobile-panel { display: none !important; }
.pwd-nav-wrap:not(.pwd-nav-mobile-mode) .pwd-nav-overlay { display: none !important; }

/* Before the script has run (no data-pwd-nav-ready yet) the same swap is made
   by media query, so the full menu never flashes on a phone. Once the script
   has initialised, the .pwd-nav-mobile-mode rules above take over. */
@media (max-width: 1025px) {
	.pwd-nav-wrap.pwd-bp-1025:not([data-pwd-nav-ready]) .pwd-nav-menu { display: none; }
	.pwd-nav-wrap.pwd-bp-1025:not([data-pwd-nav-ready]) .pwd-nav-hamburger { display: flex; }
}
@media (max-width: 768px) {
	.pwd-nav-wrap.pwd-bp-768:not([data-pwd-nav-ready]) .pwd-nav-menu { display: none; }
	.pwd-nav-wrap.pwd-bp-768:not([data-pwd-nav-ready]) .pwd-nav-hamburger { display: flex; }
}
@media (max-width: 480px) {
	.pwd-nav-wrap.pwd-bp-480:not([data-pwd-nav-ready]) .pwd-nav-menu { display: none; }
	.pwd-nav-wrap.pwd-bp-480:not([data-pwd-nav-ready]) .pwd-nav-hamburger { display: flex; }
}

/* Reduced motion: no sliding or fading, the panel just appears. */
@media (prefers-reduced-motion: reduce) {
	.pwd-nav-wrap .pwd-nav-mobile-panel,
	.pwd-nav-wrap .pwd-nav-overlay,
	.pwd-nav-menu-mobile .pwd-sub-wrap,
	.pwd-nav-menu-mobile .pwd-sub-toggle svg {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}

/* ══════════════════════════════════════════════════════════
 * SUB-ITEM HOVER EFFECTS — parity with the main-menu Hover Effect
 * ----------------------------------------------------------
 * The same effect family as the top-level menu, ported to the
 * dropdown (ul.sub-menu links, prefix pwd-ddfx-, vars --pwd-ddfx-*)
 * and the mobile panel (.pwd-nav-mobile-panel links, prefix
 * pwd-pnfx-, vars --pwd-pnfx-*). Each is driven by its own
 * --*-on toggle (0 at rest, 1 on hover/focus) so the way in and the
 * way out share one transition. The horizontal-only effects (roll,
 * highlight) are intentionally not ported — they do not suit a
 * vertical list.
 * ══════════════════════════════════════════════════════════ */

/* ── Dropdown (sub-menu) ─────────────────────────────────── */
.pwd-nav-menu ul.sub-menu a { --pwd-ddfx-on: 0; }
.pwd-nav-menu ul.sub-menu a:focus-visible { --pwd-ddfx-on: 1; }
@media (hover: hover) {
	.pwd-nav-menu ul.sub-menu a:hover { --pwd-ddfx-on: 1; }
}
/* Keep Effect on Current Page: the dropdown item for the page being viewed
   stays in its hovered (active) state. */
.pwd-ddfx-keep .pwd-nav-menu ul.sub-menu li.current-menu-item > a,
.pwd-ddfx-keep .pwd-nav-menu ul.sub-menu li.current-menu-ancestor > a {
	--pwd-ddfx-on: 1;
}

.pwd-ddfx-ul-left .pwd-nav-menu ul.sub-menu a::after,
.pwd-ddfx-ul-center .pwd-nav-menu ul.sub-menu a::after,
.pwd-ddfx-ul-right .pwd-nav-menu ul.sub-menu a::after,
.pwd-ddfx-double .pwd-nav-menu ul.sub-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--pwd-ddfx-offset, 0px);
	height: var(--pwd-ddfx-thick, 2px);
	background: var(--pwd-ddfx-color, currentColor);
	transform: scaleX(var(--pwd-ddfx-on));
	transform-origin: left center;
	transition: transform var(--pwd-ddfx-speed, 300ms) var(--pwd-ddfx-ease, ease);
	pointer-events: none;
}
.pwd-ddfx-ul-center .pwd-nav-menu ul.sub-menu a::after { transform-origin: center; }
.pwd-ddfx-ul-right .pwd-nav-menu ul.sub-menu a::after { transform-origin: right center; }

.pwd-ddfx-overline .pwd-nav-menu ul.sub-menu a::before,
.pwd-ddfx-double .pwd-nav-menu ul.sub-menu a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: var(--pwd-ddfx-offset, 0px);
	height: var(--pwd-ddfx-thick, 2px);
	background: var(--pwd-ddfx-color, currentColor);
	transform: scaleX(var(--pwd-ddfx-on));
	transform-origin: right center;
	transition: transform var(--pwd-ddfx-speed, 300ms) var(--pwd-ddfx-ease, ease);
	pointer-events: none;
}

.pwd-ddfx-frame .pwd-nav-menu ul.sub-menu a::before {
	content: "";
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	border: var(--pwd-ddfx-thick, 2px) solid var(--pwd-ddfx-color, currentColor);
	border-radius: var(--pwd-ddfx-radius, 6px);
	opacity: var(--pwd-ddfx-on);
	transform: scale(calc(0.9 + 0.1 * var(--pwd-ddfx-on)));
	transition: opacity var(--pwd-ddfx-speed, 300ms) var(--pwd-ddfx-ease, ease), transform var(--pwd-ddfx-speed, 300ms) var(--pwd-ddfx-ease, ease);
	pointer-events: none;
}

.pwd-ddfx-sweep-x .pwd-nav-menu ul.sub-menu a,
.pwd-ddfx-sweep-y .pwd-nav-menu ul.sub-menu a,
.pwd-ddfx-pill .pwd-nav-menu ul.sub-menu a {
	isolation: isolate;
}
.pwd-ddfx-sweep-x .pwd-nav-menu ul.sub-menu a::before,
.pwd-ddfx-sweep-y .pwd-nav-menu ul.sub-menu a::before,
.pwd-ddfx-pill .pwd-nav-menu ul.sub-menu a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--pwd-ddfx-color, currentColor);
	border-radius: var(--pwd-ddfx-radius, 6px);
	pointer-events: none;
	transition: transform var(--pwd-ddfx-speed, 300ms) var(--pwd-ddfx-ease, ease), opacity var(--pwd-ddfx-speed, 300ms) var(--pwd-ddfx-ease, ease);
}
.pwd-ddfx-sweep-x .pwd-nav-menu ul.sub-menu a::before { transform: scaleX(var(--pwd-ddfx-on)); transform-origin: left center; }
.pwd-ddfx-sweep-y .pwd-nav-menu ul.sub-menu a::before { transform: scaleY(var(--pwd-ddfx-on)); transform-origin: center bottom; }
.pwd-ddfx-pill .pwd-nav-menu ul.sub-menu a::before { border-radius: 999px; opacity: var(--pwd-ddfx-on); transform: scale(calc(0.8 + 0.2 * var(--pwd-ddfx-on))); }

.pwd-ddfx-dot .pwd-nav-menu ul.sub-menu a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: var(--pwd-ddfx-offset, 0px);
	width: calc(var(--pwd-ddfx-thick, 2px) * 2);
	height: calc(var(--pwd-ddfx-thick, 2px) * 2);
	border-radius: 50%;
	background: var(--pwd-ddfx-color, currentColor);
	transform: translateX(-50%) scale(var(--pwd-ddfx-on));
	transition: transform var(--pwd-ddfx-speed, 300ms) var(--pwd-ddfx-ease, ease);
	pointer-events: none;
}

/* ── Mobile panel ────────────────────────────────────────── */
.pwd-nav-mobile-panel a { --pwd-pnfx-on: 0; position: relative; }
.pwd-nav-mobile-panel a:focus-visible { --pwd-pnfx-on: 1; }
@media (hover: hover) {
	.pwd-nav-mobile-panel a:hover { --pwd-pnfx-on: 1; }
}
/* Keep Effect on Current Page: the panel item for the page being viewed stays
   in its hovered (active) state. */
.pwd-pnfx-keep .pwd-nav-mobile-panel li.current-menu-item > a,
.pwd-pnfx-keep .pwd-nav-mobile-panel li.current-menu-ancestor > a {
	--pwd-pnfx-on: 1;
}

.pwd-pnfx-ul-left .pwd-nav-mobile-panel a::after,
.pwd-pnfx-ul-center .pwd-nav-mobile-panel a::after,
.pwd-pnfx-ul-right .pwd-nav-mobile-panel a::after,
.pwd-pnfx-double .pwd-nav-mobile-panel a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--pwd-pnfx-offset, 0px);
	height: var(--pwd-pnfx-thick, 2px);
	background: var(--pwd-pnfx-color, currentColor);
	transform: scaleX(var(--pwd-pnfx-on));
	transform-origin: left center;
	transition: transform var(--pwd-pnfx-speed, 300ms) var(--pwd-pnfx-ease, ease);
	pointer-events: none;
}
.pwd-pnfx-ul-center .pwd-nav-mobile-panel a::after { transform-origin: center; }
.pwd-pnfx-ul-right .pwd-nav-mobile-panel a::after { transform-origin: right center; }

.pwd-pnfx-overline .pwd-nav-mobile-panel a::before,
.pwd-pnfx-double .pwd-nav-mobile-panel a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: var(--pwd-pnfx-offset, 0px);
	height: var(--pwd-pnfx-thick, 2px);
	background: var(--pwd-pnfx-color, currentColor);
	transform: scaleX(var(--pwd-pnfx-on));
	transform-origin: right center;
	transition: transform var(--pwd-pnfx-speed, 300ms) var(--pwd-pnfx-ease, ease);
	pointer-events: none;
}

.pwd-pnfx-frame .pwd-nav-mobile-panel a::before {
	content: "";
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	border: var(--pwd-pnfx-thick, 2px) solid var(--pwd-pnfx-color, currentColor);
	border-radius: var(--pwd-pnfx-radius, 6px);
	opacity: var(--pwd-pnfx-on);
	transform: scale(calc(0.9 + 0.1 * var(--pwd-pnfx-on)));
	transition: opacity var(--pwd-pnfx-speed, 300ms) var(--pwd-pnfx-ease, ease), transform var(--pwd-pnfx-speed, 300ms) var(--pwd-pnfx-ease, ease);
	pointer-events: none;
}

.pwd-pnfx-sweep-x .pwd-nav-mobile-panel a,
.pwd-pnfx-sweep-y .pwd-nav-mobile-panel a,
.pwd-pnfx-pill .pwd-nav-mobile-panel a {
	isolation: isolate;
}
.pwd-pnfx-sweep-x .pwd-nav-mobile-panel a::before,
.pwd-pnfx-sweep-y .pwd-nav-mobile-panel a::before,
.pwd-pnfx-pill .pwd-nav-mobile-panel a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--pwd-pnfx-color, currentColor);
	border-radius: var(--pwd-pnfx-radius, 6px);
	pointer-events: none;
	transition: transform var(--pwd-pnfx-speed, 300ms) var(--pwd-pnfx-ease, ease), opacity var(--pwd-pnfx-speed, 300ms) var(--pwd-pnfx-ease, ease);
}
.pwd-pnfx-sweep-x .pwd-nav-mobile-panel a::before { transform: scaleX(var(--pwd-pnfx-on)); transform-origin: left center; }
.pwd-pnfx-sweep-y .pwd-nav-mobile-panel a::before { transform: scaleY(var(--pwd-pnfx-on)); transform-origin: center bottom; }
.pwd-pnfx-pill .pwd-nav-mobile-panel a::before { border-radius: 999px; opacity: var(--pwd-pnfx-on); transform: scale(calc(0.8 + 0.2 * var(--pwd-pnfx-on))); }

.pwd-pnfx-dot .pwd-nav-mobile-panel a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: var(--pwd-pnfx-offset, 0px);
	width: calc(var(--pwd-pnfx-thick, 2px) * 2);
	height: calc(var(--pwd-pnfx-thick, 2px) * 2);
	border-radius: 50%;
	background: var(--pwd-pnfx-color, currentColor);
	transform: translateX(-50%) scale(var(--pwd-pnfx-on));
	transition: transform var(--pwd-pnfx-speed, 300ms) var(--pwd-pnfx-ease, ease);
	pointer-events: none;
}

/* ── Mobile panel content: logo, account / cart / search icons, button ─── */
.pwd-nav-wrap .pwd-nav-panel-logo,
.pwd-nav-wrap .pwd-nav-panel-icons,
.pwd-nav-wrap .pwd-nav-panel-cta-wrap {
	flex: none;
	box-sizing: border-box;
}

.pwd-nav-wrap .pwd-nav-panel-logo {
	margin: 10px 20px;
	line-height: 1;
}

.pwd-nav-wrap .pwd-nav-panel-logo a {
	display: inline-block;
	max-width: 100%;
	text-decoration: none;
}

.pwd-nav-wrap .pwd-nav-panel-logo img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* The item padding, colour, hover background and hover animations belong to
   the menu links; the logo link and the button must not pick them up. */
.pwd-nav-mobile-panel .pwd-nav-panel-logo a {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}
.pwd-nav-mobile-panel .pwd-nav-panel-logo a::before,
.pwd-nav-mobile-panel .pwd-nav-panel-logo a::after,
.pwd-nav-mobile-panel .pwd-nav-panel-cta::before,
.pwd-nav-mobile-panel .pwd-nav-panel-cta::after {
	content: none !important;
}

.pwd-nav-wrap .pwd-nav-panel-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin: 0 20px;
}

/* Each embedded Elementor widget wrapper shrinks to its icon. */
.pwd-nav-wrap .pwd-nav-panel-icons > .elementor-element,
.pwd-nav-wrap .pwd-nav-panel-icons .elementor-widget-container {
	width: auto;
	margin: 0;
}

.pwd-nav-panel-icons .pwd-ehe-account-trigger svg,
.pwd-nav-panel-icons .pwd-ehe-cart-trigger svg,
.pwd-nav-panel-icons .pwd-ehe-search-trigger svg {
	width: 1em;
	height: 1em;
}

.pwd-nav-wrap .pwd-nav-panel-cta-wrap {
	margin: 0 20px 20px;
}

.pwd-nav-wrap .pwd-nav-panel-cta {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.2;
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}