/**
 * Jedi-Robe Shoptimizer navigation system.
 *
 * Contains the canonical primary navigation, mega-menu, cart, sticky and
 * mobile-drawer styling for the dark Jedi-Robe interface. Header account
 * and contact actions are owned by layout/header.css. Navigation
 * rules should live here rather than in jr-dark-commerce.css.
 *
 * @package Jedi_Theme
 * @subpackage Navigation
 */

/* ========================================================================== 
   Desktop Shoptimizer mega-menu behaviour
   ========================================================================== */

/**
 * Desktop Shoptimizer mega-menu interaction.
 *
 * Uses a 400ms opening delay and a 300ms closing grace period for Jedi-Robe
 * mega menus. The short closing grace period prevents accidental dismissal
 * while the pointer moves between the parent navigation item and dropdown.
 *
 * @package Jedi_Theme
 * @subpackage Navigation
 */
@media (min-width: 993px) {

	.shoptimizer-primary-navigation
		.main-navigation
		ul.menu
		> li.menu-item
		> .sub-menu-wrapper {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		background: none;
		border: none;
		transition:
			opacity 0.25s ease,
			visibility 0s linear 0.25s;
		box-sizing: border-box;
		width: 100%;
		max-width: var(--jr-mega-menu-max-width);
		margin-left: 0;
		margin-right: auto;
	}

	.shoptimizer-primary-navigation
		.main-navigation
		ul.menu
		> li.menu-item:hover
		> .sub-menu-wrapper {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0.4s;
	}

	/*
	 * Jedi-Robe mega menus remain pointer-active during their 300ms closing
	 * grace period. visibility then switches off after the fade completes.
	 */
	.shoptimizer-primary-navigation
		.main-navigation
		ul.menu
		> li.jr-mega-menu
		> .sub-menu-wrapper {
		pointer-events: auto;
		transition:
			opacity 0.25s ease 0.3s,
			visibility 0s linear 0.55s;
	}

	.shoptimizer-primary-navigation
		.main-navigation
		ul.menu
		> li.jr-mega-menu:hover
		> .sub-menu-wrapper {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition:
			opacity 0.25s ease 0.4s,
			visibility 0s linear 0.4s;
	}

	/**
	 * Keep full-width mega menus aligned with the primary navigation canvas.
	 * Shoptimizer continues to own the nested menu structure while Jedi-Robe
	 * applies component-specific widths to BEM section classes below.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	/**
	 * Keep full-width mega menus inside the actual browser viewport.
	 *
	 * Shoptimizer removes the full-width menu item's own positioning context,
	 * so the dropdown is positioned from the navigation canvas. The wrapper
	 * remains aligned to that canvas's left edge while its width is clamped to
	 * the viewport, preserving the approved menu alignment without allowing the
	 * 1400px panel to overflow on narrower desktop viewports.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	/**
	 * Keep JR mega menus sized from the navigation canvas rather than 100vw.
	 *
	 * The wrapper is absolutely positioned from Shoptimizer's constrained
	 * navigation canvas, not directly from the viewport. Using 100% here keeps
	 * width and positioning in the same coordinate system and prevents the
	 * right edge from overflowing when the panel is shifted inward.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.full-width.jr-mega-menu
		> .sub-menu-wrapper {
		position: absolute;
		left: 0;

		width: min(
			var(--jr-mega-menu-max-width, 87.5rem),
			100%
		);
		max-width: none;
		margin: 0;

		transform: none;
	}

	/**
	 * Add balanced inner gutters only when the mega menu approaches the
	 * available desktop canvas edge.
	 *
	 * The 2rem shift that fixes the left clipping is deducted twice from the
	 * available container width, leaving the same 2rem clearance at the right.
	 * This preserves the approved wide-desktop alignment above 1615px.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	@media (max-width: 1615px) {

		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			#site-navigation.main-navigation
			ul.menu
			> li.full-width.jr-mega-menu
			> .sub-menu-wrapper {
			--jr-mega-edge-gap: 2rem;

			left: var(--jr-mega-edge-gap);

			width: min(
				var(--jr-mega-menu-max-width, 87.5rem),
				calc(
					100%
					- var(--jr-mega-edge-gap)
					- var(--jr-mega-edge-gap)
				)
			);
		}
	}

	.shoptimizer-primary-navigation
		.main-navigation
		ul li.full-width
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li:first-child {
		border-left: 0;
	}

	.shoptimizer-primary-navigation
		.main-navigation
		ul li.full-width
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li:last-child {
		border-right: 0;
	}

}

/* ========================================================================== 
   Primary navigation
   ========================================================================== */

/**
 * Full-width desktop primary-navigation surface.
 *
 * Shoptimizer's .col-full-nav spans the navigation row, while
 * .shoptimizer-primary-navigation is the constrained content canvas.
 * Keeping the surface and horizontal separators on the outer shell prevents
 * visible left/right seams and lets the bottom divider run edge to edge.
 *
 * @package Jedi_Theme
 * @subpackage Navigation
 */
@media (min-width: 993px) {

	body.jr-dark-commerce .col-full-nav {
		border-top: 1px solid rgba(255, 255, 255, 0.035);
		border-bottom: 1px solid var(--jr-border-strong);

		background:
			linear-gradient(
				180deg,
				#030507 0%,
				var(--jr-bg-deep) 100%
			);

		box-shadow:
			0 0.9rem 2.8rem rgba(0, 0, 0, 0.22),
			inset 0 1px 0 rgba(255, 255, 255, 0.015);

		color: var(--jr-text);
	}

	/**
	 * Keep the constrained Shoptimizer navigation canvas transparent.
	 *
	 * The inner element remains responsible for positioning and mega-menu
	 * layering, but no longer paints its own background or horizontal frame.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce .shoptimizer-primary-navigation,
	body.jr-dark-commerce .main-navigation:last-of-type {
		position: relative;
		z-index: 70;

		border: 0;
		background: transparent;
		box-shadow: none;

		color: var(--jr-text);
	}
}

/**
 * Desktop-only navigation geometry.
 *
 * These flex and top-level link rules must not leak into Shoptimizer's
 * mobile accordion. Shoptimizer owns the mobile menu layout below 993px.
 *
 * @package Jedi_Theme
 * @subpackage Navigation
 */
@media (min-width: 993px) {

	body.jr-dark-commerce .shoptimizer-primary-navigation > .col-full,
	body.jr-dark-commerce .main-navigation > .col-full,
	body.jr-dark-commerce .shoptimizer-primary-navigation .col-full,
	body.jr-dark-commerce .main-navigation .col-full {
		display: flex;
		width: calc(100% - var(--jr-gutter));
		max-width: var(--jr-container);
		min-height: 3.625rem;
		align-items: stretch;
		margin-inline: auto;
		padding: 0;
		background: transparent;
	}

	body.jr-dark-commerce .main-navigation ul.menu,
	body.jr-dark-commerce .main-navigation ul.nav-menu,
	body.jr-dark-commerce .shoptimizer-primary-navigation ul.menu {
		display: flex;
		align-items: stretch;
		margin: 0;
		padding: 0;
	}

	body.jr-dark-commerce .main-navigation ul.menu > li > a,
	body.jr-dark-commerce .main-navigation ul.nav-menu > li > a,
	body.jr-dark-commerce .shoptimizer-primary-navigation ul.menu > li > a {
		position: relative;
		display: flex;
		align-items: center;
		min-height: 3.625rem;
		padding-right: clamp(1rem, 1.2vw, 2rem);
		background: transparent;
		color: var(--jr-text-soft);
		font-size: clamp(0.78rem, 0.72rem + 0.12vw, 0.9rem);
		font-weight: 650;
		letter-spacing: 0.015em;
		line-height: 1.2;
		white-space: nowrap;
		text-decoration: none;
		transition:
			color 180ms ease,
			background-color 180ms ease;
	}

	/**
	 * Keep top-level destination text neutral-white on hover.
	 *
	 * Green remains reserved for the navigation underline, targeting markers,
	 * heading rails and other interface signals.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	@media (hover: hover) and (pointer: fine) {
		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			.main-navigation
			ul.menu
			> li:hover
			> a {
			color: var(--jr-text);
			text-shadow: 0 0 0.75rem rgba(45, 166, 83, 0.08);
		}
	}

	body.jr-dark-commerce .main-navigation ul.menu > li:not(.menu-item-has-children) > a::after {
		position: absolute;
		right: 50%;
		bottom: -1px;
		left: 50%;
		height: 2px;
		background: linear-gradient(90deg, transparent, var(--jr-green-light), transparent);
		box-shadow: 0 0 0.85rem rgba(45, 166, 83, 0.38);
		content: "";
		opacity: 0;
		transition:
			right 200ms ease,
			left 200ms ease,
			opacity 180ms ease;
	}

	body.jr-dark-commerce .main-navigation ul.menu .main-menu-link {
		font-size: 0.9375rem;
	}

	body.jr-dark-commerce .main-navigation ul.menu > li:not(.menu-item-has-children):hover > a::after {
		right: 14%;
		left: 14%;
		opacity: 1;
	}

	body.jr-dark-commerce .main-navigation svg,
	body.jr-dark-commerce .main-navigation svg path,
	body.jr-dark-commerce .main-navigation i,
	body.jr-dark-commerce .main-navigation a::before,
	body.jr-dark-commerce .shoptimizer-primary-navigation svg,
	body.jr-dark-commerce .shoptimizer-primary-navigation svg path,
	body.jr-dark-commerce .shoptimizer-primary-navigation i {
		color: currentcolor;
		fill: none;
		stroke: currentcolor;
	}
}

/* ==========================================================================
   Responsive top-level menu grouping
   ========================================================================== */

/**
 * Switch secondary destinations into a single More menu on compact desktops.
 *
 * WordPress should assign:
 *
 * - jr-menu-wide-only    to the original top-level London Store, About Us
 *                        and Help items.
 * - jr-menu-compact-more to the top-level More item.
 *
 * Wide desktops keep the original destinations visible. At 1399px and below,
 * the three originals are removed from the top-level row and More takes their
 * place. This avoids shrinking the principal shopping navigation to
 * uncomfortable sizes and requires no JavaScript or DOM manipulation.
 *
 * @package Jedi_Theme
 * @subpackage Navigation
 */
body.jr-dark-commerce
	.main-navigation
	ul.menu
	> li.jr-menu-compact-more {
	display: none;
}

@media (min-width: 993px) and (max-width: 1399px) {

	body.jr-dark-commerce
		.main-navigation
		ul.menu
		> li.jr-menu-wide-only {
		display: none;
	}

	body.jr-dark-commerce
		.main-navigation
		ul.menu
		> li.jr-menu-compact-more {
		display: block;
	}
}

/* ========================================================================== 
   Dropdown and mega-menu base
   ========================================================================== */

body.jr-dark-commerce .main-navigation
	ul.menu
	> li.menu-item-has-children
	> div.sub-menu-wrapper
	> div.container
	> ul.sub-menu ul {
	background: transparent;
}

body.jr-dark-commerce .main-navigation ul ul li,
body.jr-dark-commerce .main-navigation ul.sub-menu li,
body.jr-dark-commerce .shoptimizer-primary-navigation ul.sub-menu li {
	border-color: rgba(255, 255, 255, 0.06);
	background: transparent ;
}

body.jr-dark-commerce .main-navigation ul ul a,
body.jr-dark-commerce .main-navigation ul.sub-menu a,
body.jr-dark-commerce .shoptimizer-primary-navigation ul.sub-menu a {
	background: transparent;
	color: var(--jr-text-soft);
}

body.jr-dark-commerce .mega-menu-wrapper h2,
body.jr-dark-commerce .mega-menu-wrapper h3,
body.jr-dark-commerce .mega-menu-wrapper h4 {
	color: var(--jr-text);
}

body.jr-dark-commerce .mega-menu-wrapper p {
	color: var(--jr-text-muted);
}

/**
 * Standard desktop dropdown menus.
 *
 * Applies the Jedi-Robe dark navigation surface to top-level Shoptimizer
 * dropdowns that are not full JR mega menus. Standard dropdown links use a
 * restrained targeting marker on hover rather than a filled selection row.
 *
 * @package Jedi_Theme
 * @subpackage Navigation
 */
@media (min-width: 993px) {

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.menu-item-has-children:not(.jr-mega-menu)
		> .sub-menu-wrapper
		> .sub-menu {
		border: 0;
		background: transparent;
	}


	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.menu-item-has-children:not(.jr-mega-menu)
		> .sub-menu-wrapper
		> .container
		> .sub-menu {
		box-sizing: border-box;
		width: max-content;
		min-width: 17rem;
		max-width: 21rem;
		margin: 0;
		padding: 0.4rem;
		border: 1px solid rgba(152, 169, 192, 0.16);
		border-top-color: rgba(69, 217, 107, 0.42);
		background:
			radial-gradient(
				circle at 0 0,
				rgba(45, 166, 83, 0.04),
				transparent 12rem
			),
			linear-gradient(
				180deg,
				#070b11 0%,
				#030609 100%
			);
		box-shadow:
			0 1.35rem 3rem rgba(0, 0, 0, 0.48),
			inset 0 1px 0 rgba(255, 255, 255, 0.025);
	}


	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.menu-item-has-children:not(.jr-mega-menu)
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li {
		width: 100%;
		float: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
	}


	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.menu-item-has-children:not(.jr-mega-menu)
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> a.sub-menu-link {
		position: relative;
		display: block;
		width: 100%;
		margin: 0;

		padding:
			0.48rem
			0.75rem
			0.48rem
			1.15rem;

		border: 0;
		background: transparent;
		color: var(--jr-text-soft, #fff);
		font-size: 0.895rem;
		font-weight: 520;
		letter-spacing: 0;
		line-height: 1.35;
		text-decoration: none;

		transition:
			color 150ms ease,
			text-shadow 150ms ease;
	}


	/*
	 * Small targeting marker.
	 *
	 * Space for the marker is reserved in the normal link padding so the text
	 * does not move when the hover state becomes active.
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.menu-item-has-children:not(.jr-mega-menu)
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> a.sub-menu-link::before {
		position: absolute;
		top: 50%;
		left: 0.42rem;

		width: 0.25rem;
		height: 0.25rem;

		border: 1px solid rgba(69, 217, 107, 0.85);
		background: rgba(69, 217, 107, 0.08);

		content: "";
		opacity: 0;

		transform:
			translateY(-50%)
			rotate(45deg)
			scale(0.7);

		transition:
			opacity 150ms ease,
			transform 150ms ease;

		pointer-events: none;
	}


	@media (hover: hover) and (pointer: fine) {

		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			#site-navigation.main-navigation
			ul.menu
			> li.menu-item-has-children:not(.jr-mega-menu)
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li
			> a.sub-menu-link:hover {
			background: transparent;
			color: #fff;
			box-shadow: none;

			text-shadow:
				0 0 0.65rem rgba(69, 217, 107, 0.08);
		}


		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			#site-navigation.main-navigation
			ul.menu
			> li.menu-item-has-children:not(.jr-mega-menu)
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li
			> a.sub-menu-link:hover::before {
			opacity: 1;

			transform:
				translateY(-50%)
				rotate(45deg)
				scale(1);
		}


	}

	/* ----------------------------------------------------------------------
	   Compact More dropdown
	   ---------------------------------------------------------------------- */

	/**
	 * Compact desktop More navigation.
	 *
	 * More remains a normal hover dropdown on desktop while JavaScript can
	 * also pin the panel open after a click. A second click adds a temporary
	 * force-closed state so the panel can close even while the pointer is
	 * still sitting on the More trigger.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper {
		left: auto;
		right: 0;

		width: 15rem;
		max-width: 15rem;
		margin: 0;

		box-sizing: border-box;

		/**
		 * Keep hidden nested flyouts out of the document scroll area.
		 *
		 * Shoptimizer keeps submenu wrappers in layout while they are visually
		 * hidden. A right-opening third level can therefore enlarge the page even
		 * before More is opened. The wrapper is clipped only while closed; the
		 * open states below restore visible overflow so nested flyouts can render.
		 */
		overflow: hidden;
		overflow: clip;

		border: 1px solid rgba(152, 169, 192, 0.16);
		border-top-color: rgba(69, 217, 107, 0.34);

		background:
			radial-gradient(
				circle at 0 0,
				rgba(45, 166, 83, 0.035),
				transparent 10rem
			),
			linear-gradient(
				180deg,
				#070b11 0%,
				#030609 100%
			);

		box-shadow:
			0 1.35rem 3rem rgba(0, 0, 0, 0.48),
			inset 0 1px 0 rgba(255, 255, 255, 0.025);

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transform: translateY(0.2rem);

		transition:
			opacity 160ms ease,
			transform 160ms ease,
			visibility 0s linear 160ms;
	}

	/**
	 * Open More from either normal desktop hover or the click-pinned state.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more:hover
		> .sub-menu-wrapper,
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more.jr-menu-is-open
		> .sub-menu-wrapper {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		overflow: visible;

		transform: translateY(0);

		transition:
			opacity 160ms ease,
			transform 160ms ease,
			visibility 0s linear 0s;
	}

	/**
	 * Allow a second click to close More while it is still hovered.
	 *
	 * JavaScript removes this temporary state as soon as the pointer leaves the
	 * More item, restoring normal hover behaviour for the next interaction.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more.jr-menu-force-closed:hover
		> .sub-menu-wrapper {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		/*
		 * A click-closed More item can still match :hover. Restore clipping so
		 * its hidden third-level flyouts cannot recreate horizontal overflow.
		 */
		overflow: hidden;
		overflow: clip;

		transform: translateY(0.2rem);
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;

		overflow: visible;
		background: transparent;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu {
		width: 100%;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 0.45rem;

		overflow: visible;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li {
		position: relative;

		width: 100%;
		float: none;
		margin: 0;
		padding: 0;

		border: 0;
		background: transparent;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> a.sub-menu-link {
		position: relative;

		display: block;
		width: 100%;
		margin: 0;
		padding:
			0.62rem
			2.35rem
			0.62rem
			1.15rem;

		border: 0;
		background: transparent;

		color: var(--jr-text-soft, #fff);

		font-size: 0.875rem;
		font-weight: 560;
		line-height: 1.35;

		text-decoration: none;

		transition:
			color 150ms ease,
			background-color 150ms ease;
	}

	/**
	 * Visible nested-menu caret inside More.
	 *
	 * Shoptimizer already outputs a dedicated sibling span.caret for every
	 * menu-item-has-children item. Styling that real element is more robust
	 * than relying on a link pseudo-element that can collide with theme menu
	 * decorations.
	 *
	 * The caret always points right to communicate that another menu level is
	 * available; it does not mirror when collision handling moves the panel left.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.menu-item-has-children
		> span.caret {
		position: absolute;
		z-index: 3;
		top: 0;
		right: 0;

		display: grid;

		width: 2.2rem;
		height: 100%;
		margin: 0;
		padding: 0;

		border: 0;
		background: transparent;

		color: var(--jr-text, #fff);

		opacity: 0.82;

		transform: none;

		place-items: center;

		pointer-events: none;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.menu-item-has-children
		> span.caret::before {
		display: block;

		width: 0.48rem;
		height: 0.48rem;

		border-top: 1.5px solid currentcolor;
		border-right: 1.5px solid currentcolor;

		content: "";

		transform: rotate(45deg);
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.menu-item-has-children
		> span.caret::after {
		display: none;
		content: none;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.menu-item-has-children:hover
		> span.caret,
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.menu-item-has-children:focus-within
		> span.caret {
		opacity: 1;
	}

	/**
	 * Third-level flyout inside More.
	 *
	 * The flyout has its own surface, border and shadow on the wrapper itself.
	 * This avoids Shoptimizer's generic nested-ul background rules making the
	 * child menu appear transparent.
	 *
	 * The parent More panel is right-aligned under the trigger and grows
	 * inward, leaving room for this child panel to open naturally to the right.
	 * A 1px overlap removes the pointer dead-zone between menu levels.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.menu-item-has-children
		> .sub-menu-wrapper {
		--jr-more-flyout-gap: 0.5rem;

		position: absolute;
		z-index: 5;
		top: 0;
		left: calc(100% + var(--jr-more-flyout-gap));
		right: auto;

		display: block;

		width: 13.25rem;
		max-width: 13.25rem;
		margin: 0;

		box-sizing: border-box;
		overflow: visible;

		--jr-more-child-surface: #030609;

		border: 1px solid rgba(152, 169, 192, 0.16);

		/**
		 * Match the child flyout to the established More-menu surface.
		 *
		 * The previous blue/slate treatment introduced a separate visual language.
		 * This layer now uses the same near-black Jedi-Robe palette as the parent
		 * dropdown, while spacing and shadow continue to communicate hierarchy.
		 */
		background-color: var(--jr-more-child-surface);
		background-image: none;
		background-clip: padding-box;

		box-shadow:
			0 1.15rem 2.65rem rgba(0, 0, 0, 0.54),
			inset 0 1px 0 rgba(255, 255, 255, 0.025);

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transform: translateX(-0.15rem);

		transition:
			opacity 160ms ease,
			transform 160ms ease,
			visibility 0s linear 160ms;
	}

	/**
	 * Invisible pointer bridge between More and its child flyout.
	 *
	 * Creates visual breathing room without introducing a dead zone that would
	 * close the nested menu while the pointer moves between the two panels.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.menu-item-has-children
		> .sub-menu-wrapper::before {
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(-1 * var(--jr-more-flyout-gap));

		width: var(--jr-more-flyout-gap);

		content: "";
	}


	/**
	 * Flip a nested More flyout to the left only when the available viewport
	 * space on the right is insufficient.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.menu-item-has-children.jr-more-flyout-left
		> .sub-menu-wrapper {
		left: auto;
		right: calc(100% + var(--jr-more-flyout-gap));

		transform: translateX(0.15rem);
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.menu-item-has-children.jr-more-flyout-left
		> .sub-menu-wrapper::before {
		right: calc(-1 * var(--jr-more-flyout-gap));
		left: auto;
	}

	/**
	 * Paint the nested Shoptimizer container itself.
	 *
	 * Shoptimizer has transparent nested-menu defaults. Giving this intermediary
	 * container the same opaque surface prevents the page beneath the navigation
	 * from showing through between the wrapper and its child list.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.menu-item-has-children
		> .sub-menu-wrapper
		> .container {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;

		background-color: var(--jr-more-child-surface, #030609);
		background-image: none;

		opacity: 1;
		visibility: visible;
	}

	/**
	 * Paint the actual third-level list as an opaque surface too.
	 *
	 * Keeping the same background on all nested Shoptimizer layers makes this
	 * component resilient to parent-theme background resets while preserving
	 * the existing row hover styling.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.menu-item-has-children
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu {
		width: 100%;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 0.38rem;

		border: 0;

		/*
		 * Paint the visible child-menu surface on the actual list so parent-theme
		 * nested-menu backgrounds cannot flatten or override the design.
		 */
		background:
			radial-gradient(
				circle at 0 0,
				rgba(45, 166, 83, 0.035),
				transparent 10rem
			),
			linear-gradient(
				180deg,
				#070b11 0%,
				#030609 100%
			);

		box-shadow: none;

		opacity: 1;
		visibility: visible;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.menu-item-has-children
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li {
		width: 100%;
		float: none;
		margin: 0;
		padding: 0;

		border: 0;
		background: transparent;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.menu-item-has-children
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> a.sub-menu-link {
		position: relative;

		display: block;

		width: 100%;
		margin: 0;
		padding:
			0.58rem
			0.8rem
			0.58rem
			1.25rem;

		border: 0;
		background: transparent;

		color: var(--jr-text-soft, #fff);

		font-size: 0.8125rem;
		font-weight: 500;
		line-height: 1.35;

		text-decoration: none;

		transition:
			color 150ms ease,
			background-color 150ms ease,
			text-shadow 150ms ease;
	}

	/**
	 * Secondary flyout targeting marker.
	 *
	 * A smaller version of the standard Jedi-Robe dropdown marker preserves
	 * the navigation language without giving the third level the same visual
	 * weight as the primary More panel.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.menu-item-has-children
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> a.sub-menu-link::before {
		position: absolute;
		top: 50%;
		left: 0.48rem;

		width: 0.22rem;
		height: 0.22rem;

		border: 1px solid rgba(69, 217, 107, 0.72);
		background: rgba(69, 217, 107, 0.06);

		content: "";
		opacity: 0;

		transform:
			translateY(-50%)
			rotate(45deg)
			scale(0.72);

		transition:
			opacity 150ms ease,
			transform 150ms ease;

		pointer-events: none;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.menu-item-has-children:hover
		> .sub-menu-wrapper,
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-menu-compact-more
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.menu-item-has-children:focus-within
		> .sub-menu-wrapper {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform: translateX(0);

		transition:
			opacity 160ms ease,
			transform 160ms ease,
			visibility 0s linear 0s;
	}

	@media (hover: hover) and (pointer: fine) {

		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			#site-navigation.main-navigation
			ul.menu
			> li.jr-menu-compact-more
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li
			> a.sub-menu-link:hover {
			background: rgba(255, 255, 255, 0.025);
			color: #fff;
		}

		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			#site-navigation.main-navigation
			ul.menu
			> li.jr-menu-compact-more
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li.menu-item-has-children
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li
			> a.sub-menu-link:hover {
			background: rgba(255, 255, 255, 0.025);
			color: #fff;

			text-shadow:
				0 0 0.55rem rgba(69, 217, 107, 0.055);
		}

		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			#site-navigation.main-navigation
			ul.menu
			> li.jr-menu-compact-more
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li.menu-item-has-children
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li
			> a.sub-menu-link:hover::before {
			opacity: 1;

			transform:
				translateY(-50%)
				rotate(45deg)
				scale(1);
		}
	}
}

/* ========================================================================== 
   Header cart and sticky navigation
   ========================================================================== */

body.jr-dark-commerce .site-header-cart,
body.jr-dark-commerce .site-header-cart .cart-contents,
body.jr-dark-commerce .cart-contents {
	background: transparent;
	color: var(--jr-text);
}

body.jr-dark-commerce .site-header-cart .cart-contents:hover,
body.jr-dark-commerce .cart-contents:hover {
	color: var(--jr-text);
	text-shadow: 0 0 0.8rem rgba(45, 166, 83, 0.12);
}

.shoptimizer-cart a.cart-contents:hover .count {
	background-color: var(--jr-text);
}

/**
 * Keep sticky Shoptimizer navigation opaque without backdrop blur.
 *
 * @package Jedi_Theme
 * @subpackage Navigation
 */
body.jr-dark-commerce .shoptimizer-primary-navigation.sticky-d,
body.jr-dark-commerce .shoptimizer-primary-navigation.is-sticky,
body.jr-dark-commerce .main-navigation.sticky-d,
body.jr-dark-commerce .main-navigation.is-sticky {
	border-bottom-color: var(--jr-border-strong);
	background: #020407;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.025),
		0 1rem 3rem rgba(0, 0, 0, 0.42);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/**
 * Primary and dropdown interaction states.
 *
 * Keeps current menu states neutral and uses white destination text on hover.
 * Component-specific mega-menu rules later in this file can refine the
 * background or marker treatment without relying on cascade overrides.
 *
 * @package Jedi_Theme
 * @subpackage Navigation
 */
body.jr-dark-commerce
	.shoptimizer-primary-navigation
	.main-navigation
	ul.menu
	> li:is(
		.current-menu-item,
		.current-menu-parent,
		.current-menu-ancestor,
		.current_page_item
	)
	> a {
	background: transparent;
	color: var(--jr-text-soft, #fff);
}

body.jr-dark-commerce
	.shoptimizer-primary-navigation
	.main-navigation
	ul.sub-menu
	li:is(
		.current-menu-item,
		.current-menu-parent,
		.current-menu-ancestor,
		.current_page_item
	)
	> a {
	background: transparent;
	color: var(--jr-text-soft, #fff);
}

@media (hover: hover) and (pointer: fine) {
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		.main-navigation
		ul.sub-menu
		li
		> a:hover {
		background: #141d29;
		color: #fff;
	}
}

/* ==========================================================================
   Jedi-Robe reusable mega-menu system
   ========================================================================== */

/**
 * Jedi-Robe mega-menu component.
 *
 * BEM structure:
 *
 * - .jr-mega-menu                       Block.
 * - .jr-mega-menu--adult               Adult Costumes block modifier.
 * - .jr-mega-menu--stormtrooper        Stormtrooper Costume Pro modifier.
 * - .jr-mega-menu__section             Department/column element.
 * - .jr-mega-menu__section--*           Section modifiers.
 * - .jr-mega-menu__feature             Featured destination element.
 * - .jr-mega-menu__feature--cosvox     COSVOX featured-card modifier.
 * - .jr-mega-menu__view-all            Terminal catalogue action.
 *
 * Shoptimizer retains its native `full-width`, `col-2` and `nolink` classes.
 * Jedi-Robe classes provide the shared visual system and menu-specific layout
 * refinements without changing the generated WordPress navigation markup.
 *
 * @package Jedi_Theme
 * @subpackage Navigation
 */
@media (min-width: 993px) {

	/**
	 * Compact five-column mega-menu canvas.
	 *
	 * The main site container can remain 1600px wide. JR mega menus use their
	 * own 1400px maximum and are anchored to the left edge of the primary
	 * navigation canvas instead of being centred with margin-inline: auto.
	 * The panel's internal 1.75rem padding then aligns its first heading with
	 * the first primary-navigation label.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu {
		--jr-mega-menu-max-width: 87.5rem;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		> .sub-menu-wrapper
		> .container {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	/* ==========================================================================
	   Command surface
	   ========================================================================== */

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		padding: 1.6rem 1.75rem 1.8rem;
		border: 1px solid rgba(152, 169, 192, 0.16);
		border-top-color: rgba(69, 217, 107, 0.48);
		background:
			radial-gradient(
				circle at 0 0,
				rgba(45, 166, 83, 0.045),
				transparent 25rem
			),
			radial-gradient(
				circle at 100% 5%,
				rgba(111, 203, 255, 0.045),
				transparent 27rem
			),
			linear-gradient(
				180deg,
				#05090e 0%,
				#020609 100%
			);
		box-shadow:
			0 2rem 4.5rem rgba(0, 0, 0, 0.58),
			0 0 1.75rem rgba(45, 166, 83, 0.035),
			inset 0 1px 0 rgba(255, 255, 255, 0.028);
	}

	/* ==========================================================================
	   Section geometry
	   ========================================================================== */

	/**
	 * Five-column section geometry.
	 *
	 * Every JR desktop mega menu is based on five equal 20% tracks. A standard
	 * section occupies one track. Shoptimizer's existing col-2 utility spans
	 * two tracks, which is used by the Adult character directory.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section {
		position: relative;
		width: 20%;
		min-width: 0;
		margin: 0;
		padding: 0 0 0 clamp(1rem, 1.5vw, 1.5rem);
		border: 0;
		background: transparent;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section.col-2 {
		width: 40%;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section:first-child {
		padding-left: 0;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu--adult
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section--characters {
		padding-right: 0;
	}

	/* ==========================================================================
	   Fading section rails
	   ========================================================================== */

	/**
	 * Shared mega-menu section dividers.
	 *
	 * Uses a neutral white fade so green remains reserved for active accents,
	 * heading rails and directional markers.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section:not(:first-child)::before {
		position: absolute;
		top: 0.45rem;
		bottom: 0.45rem;
		left: 0;
		width: 1px;
		background:
			linear-gradient(
				180deg,
				transparent 0%,
				rgba(255, 255, 255, 0.05) 12%,
				rgba(255, 255, 255, 0.14) 35%,
				rgba(255, 255, 255, 0.18) 50%,
				rgba(255, 255, 255, 0.14) 65%,
				rgba(255, 255, 255, 0.05) 88%,
				transparent 100%
			);
		box-shadow: none;
		content: "";
		pointer-events: none;
	}

	/* ==========================================================================
	   Section headings
	   ========================================================================== */

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section.nolink
		> span:not(.caret) {
		display: block;
		margin: 0;
		padding: 0;
		background: transparent;
		color: var(--jr-text, #fff);
		font-size: 0.895rem;
		font-weight: 750;
		letter-spacing: 0.04em;
		line-height: 1.3;
		text-transform: uppercase;
		opacity: 1;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section.nolink
		> span:not(.caret)::after {
		display: block;
		width: 2rem;
		height: 1px;
		margin-top: 0.55rem;
		background:
			linear-gradient(
				90deg,
				rgba(69, 217, 107, 0.85),
				rgba(69, 217, 107, 0)
			);
		box-shadow: 0 0 0.6rem rgba(45, 166, 83, 0.13);
		content: "";
	}

	/*
	 * Section carets are unnecessary on desktop because all mega-menu
	 * department contents are visible simultaneously.
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section
		> span.caret {
		display: none;
	}

	/* ==========================================================================
	   Section content
	   ========================================================================== */

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section
		> .sub-menu-wrapper {
		margin-top: 0.7rem;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu {
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li {
		margin: 0;
		border: 0;
		background: transparent;
		text-transform: none;
	}

	/* ==========================================================================
	   Standard destination links
	   ========================================================================== */

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section:not(.jr-mega-menu__section--specialists)
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li:not(.jr-mega-menu__view-all):not(.jr-mega-menu__feature)
		> a.sub-menu-link {
		position: relative;
		display: block;
		margin: 0;
		padding: 0.32rem 0;
		border: 0;
		background: transparent;
		color: var(--jr-text-soft, #fff);
		font-size: 0.895rem;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 1.35;
		text-decoration: none;
		text-transform: none;
		transition:
			color 150ms ease,
			text-shadow 150ms ease;
	}

	/* Small sci-fi targeting marker rather than a filled hover row. */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section:not(.jr-mega-menu__section--specialists)
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li:not(.jr-mega-menu__view-all):not(.jr-mega-menu__feature)
		> a.sub-menu-link::before {
		position: absolute;
		top: 50%;
		left: -0.7rem;
		width: 0.28rem;
		height: 0.28rem;
		border: 1px solid rgba(69, 217, 107, 0.85);
		background: rgba(69, 217, 107, 0.08);
		content: "";
		opacity: 0;
		transform:
			translateY(-50%)
			rotate(45deg)
			scale(0.7);
		transition:
			opacity 150ms ease,
			transform 150ms ease;
		pointer-events: none;
	}

	@media (hover: hover) and (pointer: fine) {

		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			#site-navigation.main-navigation
			ul.menu
			> li.jr-mega-menu
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li.jr-mega-menu__section:not(.jr-mega-menu__section--specialists)
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li:not(.jr-mega-menu__view-all):not(.jr-mega-menu__feature)
			> a.sub-menu-link:hover {
			background: transparent;
			color: #fff;
			text-shadow: 0 0 0.7rem rgba(69, 217, 107, 0.06);
		}

		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			#site-navigation.main-navigation
			ul.menu
			> li.jr-mega-menu
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li.jr-mega-menu__section:not(.jr-mega-menu__section--specialists)
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li:not(.jr-mega-menu__view-all):not(.jr-mega-menu__feature)
			> a.sub-menu-link:hover::before {
			opacity: 1;
			transform:
				translateY(-50%)
				rotate(45deg)
				scale(1);
		}
	}

	/* ==========================================================================
	   Featured mega-menu links
	   ========================================================================== */

	/**
	 * COSVOX featured destination.
	 *
	 * Gives COSVOX a distinct branded treatment without a separator line or a
	 * boxed-card border. A small targeting diamond, soft directional glow and
	 * resource-centre subtitle provide emphasis while keeping the link visually
	 * integrated with the Accessories navigation list.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu--stormtrooper
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__feature--cosvox {
		width: 100%;
		margin-top: 0.65rem;
		padding: 0;
		border: 0;
		background: transparent;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu--stormtrooper
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__feature--cosvox
		> a.sub-menu-link {
		position: relative;
		display: block;
		width: 95%;
		margin: 0;
		padding: 0.56rem 1.6rem 0.56rem 1.25rem;
		border: 0;
		background: linear-gradient(
			90deg,
			rgba(69, 217, 107, 0.075),
			rgba(69, 217, 107, 0.02) 54%,
			transparent 100%
		);
		color: #fff;
		box-shadow: none;
		font-size: 0.8rem;
		font-weight: 760;
		letter-spacing: 0.045em;
		line-height: 1.25;
		text-decoration: none;
		text-transform: uppercase;
		transition:
			background 170ms ease,
			text-shadow 170ms ease;
	}

	/* Small targeting diamond marks COSVOX as the featured destination. */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu--stormtrooper
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__feature--cosvox
		> a.sub-menu-link::before {
		position: absolute;
		top: 0.75rem;
		left: 0.42rem;
		width: 0.32rem;
		height: 0.32rem;
		border: 1px solid rgba(69, 217, 107, 0.8);
		background: rgba(69, 217, 107, 0.06);
		content: "";
		transform: rotate(45deg);
		transition:
			background 170ms ease,
			box-shadow 170ms ease,
			transform 170ms ease;
		pointer-events: none;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu--stormtrooper
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__feature--cosvox
		> a.sub-menu-link::after {
		position: absolute;
		top: 0.58rem;
		right: 0.25rem;
		color: var(--jr-green-light, #45d96b);
		content: "↗";
		font-size: 0.9rem;
		line-height: 1;
		opacity: 0.78;
		transition:
			opacity 170ms ease,
			transform 170ms ease;
		pointer-events: none;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu--stormtrooper
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__feature--cosvox
		> a.sub-menu-link
		> span::after {
		display: block;
		margin-top: 0.2rem;
		color: var(--jr-text-muted, #98a9c0);
		content: "Voice systems · Resource Centre";
		font-size: 0.67rem;
		font-weight: 560;
		letter-spacing: 0.015em;
		line-height: 1.3;
		text-transform: none;
	}

	@media (hover: hover) and (pointer: fine) {

		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			#site-navigation.main-navigation
			ul.menu
			> li.jr-mega-menu--stormtrooper
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li.jr-mega-menu__feature--cosvox
			> a.sub-menu-link:hover {
			background: linear-gradient(
				90deg,
				rgba(69, 217, 107, 0.12),
				rgba(69, 217, 107, 0.025) 60%,
				transparent 100%
			);
			color: #fff;
			text-shadow: 0 0 0.75rem rgba(69, 217, 107, 0.09);
		}

		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			#site-navigation.main-navigation
			ul.menu
			> li.jr-mega-menu--stormtrooper
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li.jr-mega-menu__feature--cosvox
			> a.sub-menu-link:hover::before {
			background: rgba(69, 217, 107, 0.2);
			box-shadow: 0 0 0.55rem rgba(69, 217, 107, 0.18);
			transform: rotate(45deg) scale(1.08);
		}

		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			#site-navigation.main-navigation
			ul.menu
			> li.jr-mega-menu--stormtrooper
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li.jr-mega-menu__feature--cosvox
			> a.sub-menu-link:hover::after {
			opacity: 1;
			transform: translateX(0.12rem);
		}
	}

	/* ==========================================================================
	   Character directory
	   ========================================================================== */

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu--adult
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section--characters
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu {
		display: block;
		width: 100%;
		column-count: 2;
		column-gap: clamp(1.25rem, 2vw, 2rem);
		column-fill: balance;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu--adult
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section--characters
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li {
		display: block;
		width: 100%;
		float: none;
		break-inside: avoid;
	}

	/* ==========================================================================
	   View All action
	   ========================================================================== */

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		li.jr-mega-menu__view-all {
		position: relative;
		column-span: all;
		width: 100%;
		margin-top: 0.8rem;
		padding-top: 0.8rem;
		border: 0;
		background: transparent;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		li.jr-mega-menu__view-all::before {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background:
			linear-gradient(
				90deg,
				rgba(255, 255, 255, 0.20),
				rgba(255, 255, 255, 0.09) 62%,
				transparent 100%
			);
		content: "";
		pointer-events: none;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		li.jr-mega-menu__view-all
		> a.sub-menu-link {
		display: inline-block;
		width: auto;
		max-width: 100%;
		margin: 0;
		padding: 0.3rem 0;
		border: 0;
		background: transparent;
		background-image: none;
		color: #fff;
		box-shadow: none;
		font-size: 0.76rem;
		font-weight: 750;
		letter-spacing: 0.035em;
		line-height: 1.3;
		text-decoration: none;
		text-transform: uppercase;
		transition:
			color 150ms ease,
			text-shadow 150ms ease;
	}

	/*
	 * View All arrows are generated by CSS for consistent treatment across
	 * Adult and Stormtrooper menus. WordPress menu labels should not include
	 * their own arrow character.
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		li.jr-mega-menu__view-all
		> a.sub-menu-link::before {
		display: none;
		content: none;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		li.jr-mega-menu__view-all
		> a.sub-menu-link::after {
		position: static;
		display: inline-block;
		margin-left: 0.35rem;
		color: var(--jr-green-light, #45d96b);
		content: "→";
		font-size: 0.95rem;
		line-height: 1;
		vertical-align: baseline;
		transition:
			color 150ms ease,
			transform 150ms ease;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		li.jr-mega-menu__view-all
		> a.sub-menu-link
		> span {
		display: inline;
		width: auto;
		border: 0;
		text-decoration: none;
	}

	@media (hover: hover) and (pointer: fine) {

		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			#site-navigation.main-navigation
			ul.menu
			> li.jr-mega-menu
			li.jr-mega-menu__view-all
			> a.sub-menu-link:hover {
			border: 0;
			background: transparent;
			background-image: none;
			color: #fff;
			box-shadow: none;
			text-decoration: none;
			text-shadow: 0 0 0.75rem rgba(69, 217, 107, 0.14);
		}

		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			#site-navigation.main-navigation
			ul.menu
			> li.jr-mega-menu
			li.jr-mega-menu__view-all
			> a.sub-menu-link:hover::after {
			color: var(--jr-green-bright, #b8f6c3);
			transform: translateX(0.15rem);
		}
	}

	/* ==========================================================================
	   Adult Specialist Departments
	   ========================================================================== */

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu--adult
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section--specialists
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu {
		display: grid;
		width: 100%;
		gap: 0.6rem;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu--adult
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section--specialists
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> a.sub-menu-link {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		display: flex;
		box-sizing: border-box;
		width: 100%;
		min-height: 3.75rem;
		align-items: center;
		margin: 0;
		padding: 0.75rem 2.4rem 0.75rem 1rem;
		border: 1px solid rgba(152, 169, 192, 0.18);
		background:
			linear-gradient(
				135deg,
				rgba(111, 203, 255, 0.035),
				transparent 58%
			),
			rgba(7, 14, 22, 0.52);
		color: #fff;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.025);
		font-size: 0.8rem;
		font-weight: 650;
		letter-spacing: 0.005em;
		line-height: 1.35;
		text-decoration: none;
		transform: translateX(0);
		transition:
			border-color 170ms ease,
			background 170ms ease,
			box-shadow 170ms ease,
			transform 170ms ease;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu--adult
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section--specialists
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> a.sub-menu-link::before {
		position: absolute;
		top: 0.65rem;
		bottom: 0.65rem;
		left: 0;
		width: 1px;
		background:
			linear-gradient(
				180deg,
				transparent,
				rgba(69, 217, 107, 0.72),
				transparent
			);
		content: "";
		opacity: 0.48;
		transition: opacity 170ms ease;
		pointer-events: none;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu--adult
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section--specialists
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> a.sub-menu-link::after {
		position: absolute;
		top: 50%;
		right: 0.9rem;
		color: var(--jr-green-light, #45d96b);
		content: "↗";
		font-size: 0.9rem;
		line-height: 1;
		opacity: 0.7;
		transform: translateY(-50%);
		transition:
			opacity 170ms ease,
			transform 170ms ease;
		pointer-events: none;
	}

	@media (hover: hover) and (pointer: fine) {

		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			#site-navigation.main-navigation
			ul.menu
			> li.jr-mega-menu--adult
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li.jr-mega-menu__section--specialists
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li
			> a.sub-menu-link:hover {
			border-color: rgba(69, 217, 107, 0.36);
			background:
				linear-gradient(
					135deg,
					rgba(69, 217, 107, 0.055),
					transparent 58%
				),
				rgba(8, 17, 25, 0.74);
			color: #fff;
			box-shadow:
				0 0 1rem rgba(45, 166, 83, 0.045),
				inset 0 1px 0 rgba(255, 255, 255, 0.035);
			transform: translateX(0.1rem);
		}

		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			#site-navigation.main-navigation
			ul.menu
			> li.jr-mega-menu--adult
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li.jr-mega-menu__section--specialists
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li
			> a.sub-menu-link:hover::before {
			opacity: 0.95;
		}

		body.jr-dark-commerce
			.shoptimizer-primary-navigation
			#site-navigation.main-navigation
			ul.menu
			> li.jr-mega-menu--adult
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li.jr-mega-menu__section--specialists
			> .sub-menu-wrapper
			> .container
			> ul.sub-menu
			> li
			> a.sub-menu-link:hover::after {
			opacity: 1;
			transform:
				translate(0.12rem, -50%);
		}
	}

	/* ==========================================================================
	   Stormtrooper section emphasis
	   ========================================================================== */

	/*
	 * The Shop department is the primary purchase path. It receives a slightly
	 * brighter heading accent without changing the shared navigation geometry.
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu--stormtrooper
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section--shop
		> span:not(.caret)::after {
		width: 2.6rem;
		background:
			linear-gradient(
				90deg,
				var(--jr-green-light, #45d96b),
				rgba(69, 217, 107, 0)
			);
	}

	/*
	 * Explore is intentionally secondary to the purchase/build/support paths.
	 * The links remain fully readable and crawlable but carry slightly less
	 * visual weight at rest.
	 */
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu--stormtrooper
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.jr-mega-menu__section--explore
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> a.sub-menu-link {
		font-weight: 450;
	}

	/* ==========================================================================
	   Keyboard focus
	   ========================================================================== */

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		#site-navigation.main-navigation
		ul.menu
		> li.jr-mega-menu
		a:focus-visible {
		outline: 2px solid var(--jr-blue-light, #a9e1ff);
		outline-offset: 2px;
	}
}


/* ==========================================================================
   Mega-menu page overlay
   ========================================================================== */

/**
 * Desktop mega-menu page overlay.
 *
 * Starts immediately below the Shoptimizer primary navigation bar while the
 * Adult Costumes or Stormtrooper Costume Pro mega menu is active. Opening and
 * closing timing is synchronised with the 400ms open delay and 300ms close
 * grace period defined above.
 *
 * @package Jedi_Theme
 * @subpackage Navigation
 */
@media (min-width: 993px) {

	body.jr-dark-commerce
		.shoptimizer-primary-navigation {
		position: relative;
		isolation: isolate;
		overflow: visible;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation::after {
		position: absolute;
		z-index: -1;
		top: 100%;
		left: 50%;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.58);
		content: "";
		opacity: 0;
		visibility: hidden;
		transform: translateX(-50%);
		transition:
			opacity 220ms ease 300ms,
			visibility 0s linear 520ms;
		pointer-events: none;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation:has(
			#site-navigation.main-navigation
			ul.menu
			> li.jr-mega-menu:hover
		)::after {
		opacity: 1;
		visibility: visible;
		transition:
			opacity 220ms ease 400ms,
			visibility 0s linear 400ms;
	}
}

/* ==========================================================================
   Responsive navigation and cart sizing
   ========================================================================== */

/**
 * Keep the desktop navigation and Shoptimizer cart on one line.
 *
 * The cart is treated as a fixed-width utility while the primary navigation
 * owns the remaining horizontal space. White-space is explicitly prevented
 * inside the cart link so the amount and count/icon cannot split across rows.
 *
 * @package    Jedi_Theme
 * @subpackage Navigation
 */
@media (min-width: 993px) {

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		.main-navigation {
		flex: 1 1 auto;
		min-width: 0;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		.main-navigation
		ul.menu {
		flex-wrap: nowrap;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		.shoptimizer-cart {
		flex: 0 0 auto;
		width: auto;
		min-width: max-content;
		margin-left: auto;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		.shoptimizer-cart
		.cart-contents {
		width: auto;
		min-width: max-content;
		white-space: nowrap;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		.shoptimizer-cart
		.cart-contents
		> .amount,
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		.shoptimizer-cart
		.cart-contents
		> .count {
		white-space: nowrap;
	}
}


/**
 * Mid-desktop navigation rhythm with responsive grouping active.
 *
 * Because London Store, About Us and Help now live under More in this range,
 * the shopping destinations can retain the normal 15px desktop type scale.
 * Only the horizontal breathing room is tightened slightly.
 *
 * @package Jedi_Theme
 * @subpackage Navigation
 */
@media (min-width: 1200px) and (max-width: 1399px) {

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		.main-navigation
		ul.menu
		> li.menu-item
		> a,
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		.main-navigation
		ul.menu
		> li.menu-item
		> a.main-menu-link {
		padding-right: clamp(1rem, 1.2vw, 1.35rem);
		font-size: 0.9375rem;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		.shoptimizer-cart
		.cart-contents {
		font-size: 0.875rem;
	}
}


/**
 * Compact-desktop navigation rhythm.
 *
 * Below 1200px the main header already switches to compact contact/account
 * utilities. The navigation therefore steps down only to 14px rather than
 * the previous 13px/12px treatment, preserving legibility while More keeps
 * the number of top-level destinations under control.
 *
 * @package Jedi_Theme
 * @subpackage Navigation
 */
@media (min-width: 993px) and (max-width: 1199px) {

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		.main-navigation
		ul.menu
		> li.menu-item
		> a,
	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		.main-navigation
		ul.menu
		> li.menu-item
		> a.main-menu-link {
		padding-right: 0.875rem;
		font-size: 0.875rem;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		.shoptimizer-cart
		.cart-contents {
		font-size: 0.8125rem;
	}

	body.jr-dark-commerce
		.shoptimizer-primary-navigation
		.shoptimizer-cart
		a.cart-contents
		.count {
		min-width: 22px;
		height: 22px;
		padding: 0;
	}
}

/* ==========================================================================
   Mobile navigation - Shoptimizer native behaviour
   ========================================================================== */

/**
 * Jedi-Robe mobile treatment for Shoptimizer's native accordion menu.
 *
 * Shoptimizer retains ownership of submenu opening, closing and nested-menu
 * functionality. These rules only apply Jedi-Robe colour, hierarchy and
 * spacing to the existing WordPress/Shoptimizer markup.
 *
 * Mobile surfaces deliberately reuse the established desktop navigation
 * palette:
 *
 * - Mega-menu surface:      #05090e -> #020609
 * - Nested dropdown surface:#070b11 -> #030609
 *
 * @package Jedi_Theme
 * @subpackage Navigation
 */
@media (max-width: 992px) {

	/* ----------------------------------------------------------------------
	   Drawer shell
	   ---------------------------------------------------------------------- */

	body.jr-dark-commerce .col-full-nav {
		left: auto;
		right: -300px;

		background: #020407;
		color: var(--jr-text);
	}

	body.jr-dark-commerce.mobile-toggled .col-full-nav {
		right: 0;
		left: auto;

		width: 100%;
	}

	body.jr-dark-commerce
		.col-full-nav
		.shoptimizer-primary-navigation.col-full {
		margin-top: 54px;

		background: transparent;
	}

	body.jr-dark-commerce
		.menu-primary-menu-container
		> ul
		> li
		> a,
	body.jr-dark-commerce
		.menu-primary-menu-container
		> ul
		> li.nolink {
		padding: 0.45rem 0;
	}

	body.jr-dark-commerce
		.main-navigation
		ul.products {
		margin-top: 0;
	}

	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li:first-child {
		border-top: 1px solid rgba(255, 255, 255, 0.07);
	}

	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
		padding: 0.45rem 0;
	}

	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li
		> a {
		color: var(--jr-text);
	}


	/* ----------------------------------------------------------------------
	   Native Shoptimizer caret colour
	   ---------------------------------------------------------------------- */

	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		ul.menu
		li.menu-item-has-children
		> span.caret {
		color: var(--jr-text);
		height: 50px;
	}

	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		li.menu-item-has-children
		> span.caret::before,
	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		ul.menu
		li.menu-item-has-children
		> span.caret::after {
		border-color: var(--jr-text);
		background: var(--jr-text);
	}


	/* ----------------------------------------------------------------------
	   First child level
	   ---------------------------------------------------------------------- */

	/**
	 * Match the desktop JR mega-menu command surface.
	 *
	 * This level contains headings such as "Shop by Character" and
	 * "Featured Costume Ranges". Some are WordPress `nolink` items and
	 * therefore render their label as a span rather than an anchor, so both
	 * markup forms are intentionally styled.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li
		> .sub-menu-wrapper {
		margin-top: 0.35rem;

		border-top: 1px solid rgba(69, 217, 107, 0.28);
		border-bottom: none;

		background:
			radial-gradient(
				circle at 0 0,
				rgba(45, 166, 83, 0.035),
				transparent 18rem
			),
			linear-gradient(
				180deg,
				#05090e 0%,
				#020609 100%
			);

		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.02);
	}

	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li.menu-item-has-children.dropdown-open 
		> .sub-menu-wrapper {
			border-bottom: none;
			margin-bottom: -0.45rem;
	}

	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li
		> .sub-menu-wrapper
		> .container,
	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu {
		background: transparent;
	}

	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li {
		margin: 0;
		padding: 0;

		border-bottom: 1px solid rgba(255, 255, 255, 0.055);

		background: transparent;
	}

	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li:last-child {
		border-bottom: 0;
	}

	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> a,
	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li.nolink
		> span:not(.caret) {
		display: block;

		margin: 0;
		padding:
			0.72rem
			2.75rem
			0.72rem
			0.9rem;

		background: transparent;
		color: var(--jr-text);

		font-size: 0.9rem;
		font-weight: 600;
		letter-spacing: 0.01em;
		line-height: 1.35;
	}


	/* ----------------------------------------------------------------------
	   Second child level and deeper
	   ---------------------------------------------------------------------- */

	/**
	 * Match the desktop standard-dropdown / nested-flyout surface.
	 *
	 * This is intentionally near-black rather than slate/blue. Increased left
	 * padding communicates hierarchy while retaining Shoptimizer's native
	 * accordion behaviour.
	 *
	 * @package Jedi_Theme
	 * @subpackage Navigation
	 */
	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> .sub-menu-wrapper {
		margin: 0;

		border-top: 1px solid rgba(255, 255, 255, 0.055);
		border-bottom: 1px solid rgba(255, 255, 255, 0.055);

		background:
			radial-gradient(
				circle at 0 0,
				rgba(45, 166, 83, 0.025),
				transparent 12rem
			),
			linear-gradient(
				180deg,
				#070b11 0%,
				#030609 100%
			);

		box-shadow:
			inset 2px 0 0 rgba(255, 255, 255, 0.045);
	}

	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> .sub-menu-wrapper
		> .container,
	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu {
		background: transparent;
	}

	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li {
		margin: 0;
		padding: 0;

		border-bottom: 1px solid rgba(255, 255, 255, 0.05);

		background: transparent;
	}

	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li:last-child {
		border-bottom: 0;
	}

	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		> ul.menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> .sub-menu-wrapper
		> .container
		> ul.sub-menu
		> li
		> a {
		display: block;

		margin: 0;
		padding:
			0.72rem
			1rem
			0.72rem
			1.35rem;

		background: transparent;
		color: var(--jr-text-soft);

		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 1.35;
	}


	/* ----------------------------------------------------------------------
	   Current menu state
	   ---------------------------------------------------------------------- */

	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		.current-menu-item
		> a,
	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		.current-menu-ancestor
		> a {
		background: transparent;
		color: #fff;
	}


	/* ----------------------------------------------------------------------
	   Browse / Mobile Extra
	   ---------------------------------------------------------------------- */

	body.jr-dark-commerce
		.col-full-nav
		.mobile-extra {
		background: transparent;
		color: var(--jr-text-soft);
	}

	body.jr-dark-commerce
		.col-full-nav
		.mobile-extra
		h4 {
		color: var(--jr-text);
		opacity: 1;
		font-weight: 600;
	}

	body.jr-dark-commerce
		.col-full-nav
		.mobile-extra
		a {
		color: var(--jr-text-soft);
	}


	/* ----------------------------------------------------------------------
	   Existing Shoptimizer utility cleanup
	   ---------------------------------------------------------------------- */

	body.jr-dark-commerce
		.main-navigation
		ul.menu
		.sub-menu-wrapper {
		padding-left: 0;
		padding-bottom: 0;
	}

	body.jr-dark-commerce
		.main-navigation
		ul.menu
		ul
		li.loading {
		background: #070b11;

		opacity: 0.75;
		transform: scale(0.99);
	}

	body.jr-dark-commerce
		ul.products
		li.product {
		padding: 10px;
	}
}

@media (max-width: 480px) {

	body.jr-dark-commerce.mobile-toggled
		.col-full-nav {
		width: 100%;
	}
}

/* ==========================================================================
   Mobile cart and drawer controls
   ========================================================================== */

/**
 * Keep Shoptimizer cart and drawer controls within navigation ownership while
 * preserving the existing child-theme geometry.
 *
 * @package    Jedi_Theme
 * @subpackage Navigation
 */
@media (max-width: 992px) {
	.site-header .site-header-cart {
		position: absolute;
		z-index: 2;
		right: 64px;
	}

	.mobile-toggled .mobile-menu.close-drawer {
		z-index: 999999;
        width: 30px;
        height: 30px;
        color: var(--jr-text);
        right: 30px;
		top: 20px;
        left: auto;
	}
}


@media (max-width: 360px) {
	.site-header .site-header-cart {
		right: 54px;
		height: 25px;
	}

	.main-header .site-header-cart {
		top: calc(-14px + 74px / 2);
	}

	.shoptimizer-cart a.cart-contents .count {
		min-width: 24px;
		height: 25px;
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

/**
 * Respect the operating system reduced-motion preference.
 *
 * Removes decorative transitions while keeping all navigation hierarchy,
 * focus states and overlay contrast intact.
 *
 * @package Jedi_Theme
 * @subpackage Navigation
 */
@media (prefers-reduced-motion: reduce) {

	body.jr-dark-commerce
		.main-navigation
		ul.menu
		> li.menu-item
		> .sub-menu-wrapper,
	body.jr-dark-commerce
		.jr-mega-menu
		a,
	body.jr-dark-commerce
		.jr-mega-menu
		a::before,
	body.jr-dark-commerce
		.jr-mega-menu
		a::after,
	body.jr-dark-commerce
		.shoptimizer-primary-navigation::after {
		transition: none;
	}
}

/**
 * Show a pointer cursor across clickable mobile submenu heading rows.
 *
 * Applies only to non-link menu headings that have children. Destination
 * links keep their normal link behaviour while the heading row and caret
 * clearly communicate that they expand/collapse a submenu.
 *
 * @package Jedi_Theme
 * @subpackage Navigation
 */
@media (max-width: 992px) {

	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		li.nolink.menu-item-has-children
		> span:not(.caret),
	body.jr-dark-commerce
		.shoptimizer-mobile-menu
		li.nolink.menu-item-has-children
		> span.caret {
		cursor: pointer;
	}
}

/**
 * Customer Reviews desktop mega-menu feature.
 *
 * The reviews modifier supports reuse in any department. The menu-item ID
 * also supports the existing item without requiring an admin class change.
 * Both selectors override the older COSVOX treatment for this item, including
 * its generated subtitle. ID specificity avoids important declarations.
 * Border-box sizing includes feature padding within the column width.
 *
 * @package Jedi_Theme
 * @subpackage Navigation
 */
@media (min-width: 993px) {
	body.jr-dark-commerce #site-navigation.main-navigation :is(#nav-menu-item-29516, li.jr-mega-menu__feature--reviews) {
		width: 100%;
		margin-top: 0.75rem;
		padding: 0;
		border: 0;
	}

	body.jr-dark-commerce #site-navigation.main-navigation :is(#nav-menu-item-29516, li.jr-mega-menu__feature--reviews) > a.sub-menu-link {
		position: relative;
		display: block;
		box-sizing: border-box;
		width: 100%;
		margin: 0;
		padding: 0.8rem 1.8rem 0.8rem 1.5rem;
		border: 1px solid rgba(69, 217, 107, 0.3);
		border-radius: 3px;
		background: linear-gradient(90deg, rgba(69, 217, 107, 0.16), rgba(69, 217, 107, 0.035));
		color: #fff;
		font-size: 0.82rem;
		font-weight: 700;
		letter-spacing: 0.035em;
		line-height: 1.4;
		text-transform: uppercase;
	}

	body.jr-dark-commerce #site-navigation.main-navigation :is(#nav-menu-item-29516, li.jr-mega-menu__feature--reviews) > a.sub-menu-link::before {
		position: absolute;
		top: 50%;
		left: 0.6rem;
		width: 0.35rem;
		height: 0.35rem;
		border: 1px solid #45d96b;
		background: rgba(69, 217, 107, 0.2);
		content: "";
		opacity: 1;
		transform: translateY(-50%) rotate(45deg);
		pointer-events: none;
	}

	body.jr-dark-commerce #site-navigation.main-navigation :is(#nav-menu-item-29516, li.jr-mega-menu__feature--reviews) > a.sub-menu-link::after {
		position: absolute;
		top: 50%;
		right: 0.6rem;
		content: "↗";
		color: #45d96b;
		opacity: 1;
		transform: translateY(-50%);
		pointer-events: none;
	}

	body.jr-dark-commerce #site-navigation.main-navigation :is(#nav-menu-item-29516, li.jr-mega-menu__feature--reviews) > a.sub-menu-link > span::after {
		display: none;
		content: none;
	}

	body.jr-dark-commerce #site-navigation.main-navigation :is(#nav-menu-item-29516, li.jr-mega-menu__feature--reviews) > a.sub-menu-link:hover,
	body.jr-dark-commerce #site-navigation.main-navigation :is(#nav-menu-item-29516, li.jr-mega-menu__feature--reviews) > a.sub-menu-link:focus-visible {
		border-color: #45d96b;
		background: rgba(69, 217, 107, 0.2);
		color: #fff;
	}

}


/**
 * Size desktop mega menus by their actual number of columns.
 *
 * Standard sections use 14rem; double sections use 28rem. The wrapper
 * reserves 4rem of navigation-canvas clearance and retains existing offsets.
 * Also preserves the Customizer override hiding the COSVOX subtitle.
 *
 * @package Jedi_Theme
 */
@media (min-width: 993px) {
	body.jr-dark-commerce .shoptimizer-primary-navigation #site-navigation.main-navigation ul.menu > li.full-width.jr-mega-menu > .sub-menu-wrapper {
		width: max-content;
		min-width: 0;
		max-width: calc(100% - 4rem);
	}

	body.jr-dark-commerce .shoptimizer-primary-navigation #site-navigation.main-navigation ul.menu > li.jr-mega-menu > .sub-menu-wrapper > .container {
		width: auto;
		min-width: 0;
		max-width: 100%;
		margin: 0;
		padding: 0;
	}

	body.jr-dark-commerce .shoptimizer-primary-navigation #site-navigation.main-navigation ul.menu > li.jr-mega-menu > .sub-menu-wrapper > .container > ul.sub-menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		width: max-content;
		min-width: 0;
		max-width: 100%;
		margin: 0;
		box-sizing: border-box;
	}

	body.jr-dark-commerce .shoptimizer-primary-navigation #site-navigation.main-navigation ul.menu > li.jr-mega-menu > .sub-menu-wrapper > .container > ul.sub-menu > li.jr-mega-menu__section {
		float: none;
		flex: 0 0 auto;
		width: 14rem;
		max-width: 100%;
		box-sizing: border-box;
	}

	body.jr-dark-commerce .shoptimizer-primary-navigation #site-navigation.main-navigation ul.menu > li.jr-mega-menu > .sub-menu-wrapper > .container > ul.sub-menu > li.jr-mega-menu__section.col-2 {
		width: 28rem;
	}

	body.jr-dark-commerce .shoptimizer-primary-navigation #site-navigation.main-navigation ul.menu > li.jr-mega-menu--stormtrooper > .sub-menu-wrapper > .container > ul.sub-menu > li > .sub-menu-wrapper > .container > ul.sub-menu > li.jr-mega-menu__feature--cosvox > a.sub-menu-link > span::after {
		display: none;
	}

}