/**
 * Jedi-Robe Shoptimizer site header.
 *
 * Canonical owner for the primary header shell, branding, product search,
 * account/contact actions, CommerceKit live search and responsive controls.
 * Primary navigation, mega menus, cart navigation and the mobile drawer
 * are owned by layout/navigation.css. The service strip and locale popover
 * remain separate components.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 */

/* ==========================================================================
   Shared header utilities
   ========================================================================== */

body.jr-dark-commerce .menu-toggle .bar {
	background-color: var(--jr-text);
}

/* Compatibility for legacy secondary-menu image icons, where present. */
.menu-secondary-menu-container .icon-wrapper img {
	width: 24px;
}


/* ==========================================================================
   Original Shoptimizer header compatibility - visual parity
   ========================================================================== */

.jedi-mobile-search-toggle {
    display: none;
}

.jedi-header-locale-btn {
    display: none;
}


/**
 * Preserve the exact pre-organisation header/search geometry.
 *
 * These declarations are intentionally retained with their original values
 * and cascade position. They are compatibility rules from the existing child
 * theme and must not be removed during ownership cleanup because Shoptimizer's
 * search icon is rendered by the form pseudo-element.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 */
.site-search form:before {
    background: #444;
}

.widget_product_search input[type="search"]::placeholder {
    opacity: 1;
	font-size: 1.05rem;
}

.woocommerce-product-search input[type="search"]::placeholder {
    transition:
        opacity 0.6s ease,
        box-shadow 0.6s ease;
}

.woocommerce-product-search input[type="search"].fade-out::placeholder {
    opacity: 0;
}

.woocommerce-product-search input[type="search"].fade-in::placeholder {
    opacity: 1;
}


.site-search form:before {
    margin-top: -16px;
    width: 28px;
    height: 28px;
}

div.site-search input[type="search"] {
    padding-left: 3rem;
    border: 2px solid #f8f8f8;
    height: 58px;
}

header.site-header .site-branding .custom-logo-link img {
    width: 100%;
    height: 64px;
}

.site-header .secondary-navigation {
    display: none;
}

@media (min-width: 993px) {
    .site-header div.site-search {
        margin-left: 2em;
    }

    .site-header .secondary-navigation {
        padding-left: 0.8rem;
    }
}


@media (max-width: 992px) {
    .site-search form:before {
        margin-top: -10px;
        width: 22px;
        height: 22px;
    }

    div.site-search input[type="search"] {
        height: 44px;
        padding-left: 43px;
        border: none;
    }
}


/* ==========================================================================
   Header shell and desktop surface
   ========================================================================== */

/**
 * Own the shared desktop header surface only.
 *
 * Column geometry is intentionally defined later by the 1200px+ and
 * 993px-1199px responsive compositions so this base section does not create
 * competing grid definitions.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 */
@media (min-width: 993px) {

	body.jr-dark-commerce .site-header {
		position: relative;
		z-index: 60;
		overflow: visible;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
		background:
			radial-gradient(
				circle at 12% 0,
				rgba(45, 166, 83, 0.075),
				transparent 25rem
			),
			radial-gradient(
				circle at 80% 0,
				rgba(71, 148, 205, 0.075),
				transparent 28rem
			),
			linear-gradient(180deg, #0b1018, #06090f) !important;
		box-shadow:
			0 1px 0 rgba(255, 255, 255, 0.025),
			0 1.25rem 3rem rgba(0, 0, 0, 0.18);
		color: var(--jr-text);
	}

	body.jr-dark-commerce .site-header::before {
		position: absolute;
		z-index: 0;
		inset: 0;
		background-image:
			radial-gradient(
				circle,
				rgba(255, 255, 255, 0.38) 0 1px,
				transparent 1.35px
			),
			radial-gradient(
				circle,
				rgba(111, 203, 255, 0.18) 0 1px,
				transparent 1.4px
			);
		background-position: 0 0, 47px 31px;
		background-size: 154px 154px, 239px 239px;
		content: "";
		opacity: 0.13;
		pointer-events: none;
	}
}


/* ==========================================================================
   Branding and logo
   ========================================================================== */

body.jr-dark-commerce .site-header .custom-logo,
body.jr-dark-commerce
	header.site-header
	.site-branding
	.custom-logo-link
	img {
	filter:
		drop-shadow(0 0 1.2rem rgba(255, 255, 255, 0.025))
		drop-shadow(0 0 2rem rgba(111, 203, 255, 0.025));
}


/* ==========================================================================
   Product search
   ========================================================================== */

body.jr-dark-commerce .site-search .widget_product_search {
	border: 0;
	border-radius: 0.25rem;
}

body.jr-dark-commerce .site-search,
body.jr-dark-commerce .site-search form,
body.jr-dark-commerce .site-search .widget,
body.jr-dark-commerce .main-header .search-form {
	background: transparent !important;
}

body.jr-dark-commerce .site-search form,
body.jr-dark-commerce .main-header .search-form {
	position: relative;
	width: 100%;
	margin: 0;
}

/**
 * Paint a green gradient through a transparent one-pixel input border.
 *
 * These selectors retain compatibility with Shoptimizer, CommerceKit and
 * alternative WooCommerce search implementations currently used by the site.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 */
body.jr-dark-commerce .site-search input[type="search"],
body.jr-dark-commerce .site-search .search-field,
body.jr-dark-commerce .main-header input[type="search"],
body.jr-dark-commerce .commercekit-ajs-input,
body.jr-dark-commerce .aws-search-field {
	width: 100%;
	height: 4rem;
	padding-right: 3.75rem;
	padding-left: 3.25rem;
	border: 1px solid transparent !important;
	border-radius: 0.25rem;
		background:
		linear-gradient(
			180deg,
			#131a25,
			#0e141e
		)
		padding-box,

		linear-gradient(
			90deg,
			rgba(45, 166, 83, 0.34) 0%,
			rgba(59, 194, 92, 0.72) 25%,
			rgba(69, 217, 107, 0.92) 50%,
			rgba(59, 194, 92, 0.72) 75%,
			rgba(45, 166, 83, 0.34) 100%
		)
		border-box !important;
	color: var(--jr-text) !important;
	font-size: 1.05rem;
	transition:
		background 180ms ease,
		box-shadow 180ms ease;
}

body.jr-dark-commerce .site-search input[type="search"]:hover,
body.jr-dark-commerce .site-search .search-field:hover,
body.jr-dark-commerce .main-header input[type="search"]:hover,
body.jr-dark-commerce .commercekit-ajs-input:hover,
body.jr-dark-commerce .aws-search-field:hover {
	background:
		linear-gradient(180deg, #151d29, #101721) padding-box,
		linear-gradient(
			90deg,
			rgba(45, 166, 83, 0.48) 0%,
			rgba(69, 217, 107, 0.92) 25%,
			var(--jr-green-bright) 50%,
			rgba(69, 217, 107, 0.92) 75%,
			rgba(45, 166, 83, 0.48) 100%
		) border-box !important;
}

/**
 * Use a single emerald focus edge for the product-search field.
 *
 * The active field keeps the same dark surface as the header while its
 * existing one-pixel border becomes a saturated Jedi green gradient. A soft
 * green bloom and brighter search icon reinforce focus without adding a
 * second outline or pale/white frame.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 */
body.jr-dark-commerce .site-search input[type="search"]:focus,
body.jr-dark-commerce .site-search .search-field:focus,
body.jr-dark-commerce .main-header input[type="search"]:focus,
body.jr-dark-commerce .commercekit-ajs-input:focus,
body.jr-dark-commerce .aws-search-field:focus {
	border: 1px solid transparent !important;
	outline: 0;

	background:
		linear-gradient(180deg, #151e2a, #0f1620) padding-box,
		linear-gradient(
			90deg,
			rgba(45, 166, 83, 0.58) 0%,
			rgba(59, 194, 92, 0.82) 24%,
			rgba(69, 217, 107, 0.98) 50%,
			rgba(59, 194, 92, 0.82) 76%,
			rgba(45, 166, 83, 0.58) 100%
		) border-box !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 0 1.25rem rgba(45, 166, 83, 0.11),
		0 0.95rem 2.4rem rgba(0, 0, 0, 0.28);
}

/**
 * Reinforce search focus through the icon rather than another border ring.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 */
body.jr-dark-commerce .site-search:focus-within form::before {
	color: var(--jr-green-light) !important;
	background: var(--jr-green-light) !important;
	opacity: 0.92;
}

body.jr-dark-commerce .site-search input::placeholder,
body.jr-dark-commerce .main-header input::placeholder,
body.jr-dark-commerce .commercekit-ajs-input::placeholder,
body.jr-dark-commerce .aws-search-field::placeholder {
	color: var(--jr-text-muted);;
	opacity: 1;
}

/**
 * Hide rotating search suggestions while the customer is interacting.
 *
 * The input keeps its visible focus treatment; only placeholder copy fades so
 * typed queries never compete with the rotating suggestion text.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 */
body.jr-dark-commerce .site-search input[type="search"]:focus::placeholder,
body.jr-dark-commerce .site-search .search-field:focus::placeholder,
body.jr-dark-commerce .main-header input[type="search"]:focus::placeholder,
body.jr-dark-commerce .commercekit-ajs-input:focus::placeholder,
body.jr-dark-commerce .aws-search-field:focus::placeholder {
	opacity: 0;
}

body.jr-dark-commerce .site-search button,
body.jr-dark-commerce .site-search .search-submit,
body.jr-dark-commerce .main-header .search-submit {
	color: var(--jr-text-soft) !important;
	background: transparent !important;
}

body.jr-dark-commerce .site-search button:hover,
body.jr-dark-commerce .site-search .search-submit:hover,
body.jr-dark-commerce .main-header .search-submit:hover {
	color: var(--jr-green-light) !important;
}

body.jr-dark-commerce .site-search svg,
body.jr-dark-commerce .site-search svg path,
body.jr-dark-commerce .site-search button svg,
body.jr-dark-commerce .site-search .search-submit svg {
	color: currentcolor;
	fill: none;
	stroke: currentcolor;
}

body.jr-dark-commerce .site-search form::before {
	color: var(--jr-text-muted);
    background: var(--jr-text-muted);
}


/* ==========================================================================
   CommerceKit AJAX search results
   ========================================================================== */

/**
 * Integrate CommerceKit live search with the Jedi-Robe dark header.
 *
 * The results surface deliberately uses the shared Jedi-Robe design tokens
 * for surfaces, borders and text rather than introducing a separate palette.
 * Primary result copy stays white while supporting copy uses the canonical
 * muted-text token.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 */
body.jr-dark-commerce .site-search .commercekit-ajs-results {
	z-index: 9999;
	overflow: hidden;

	width: 100% !important;
	height: auto;
	min-height: 0;

	box-sizing: border-box;

	border: 0;
	border-radius: 0 0 0.375rem 0.375rem;

	background: var(--jr-surface);

	box-shadow:
		0 1.5rem 3.5rem rgba(0, 0, 0, 0.55);

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

body.jr-dark-commerce .site-search .commercekit-ajs-suggestions {
	overflow-x: hidden;
	overflow-y: auto;

	height: auto;
	min-height: 0;

	border: 0;
	outline: 0;

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

	scrollbar-width: thin;
	scrollbar-color: var(--jr-border) transparent;
}


/* Result rows
   -------------------------------------------------------------- */

body.jr-dark-commerce
	.site-search
	.commercekit-ajs-suggestions
	.autocomplete-suggestion {
	position: relative;
	overflow: hidden;

	margin: 0;
	padding: 0;

	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	background: transparent;

	color: var(--jr-text);

	transition: background-color 150ms ease;
}

body.jr-dark-commerce
	.site-search
	.commercekit-ajs-suggestions
	.autocomplete-suggestion:hover,
body.jr-dark-commerce
	.site-search
	.commercekit-ajs-suggestions
	.autocomplete-selected {
	background: var(--jr-surface-hover);
}


/* Product suggestions
   -------------------------------------------------------------- */

/**
 * Keep product results compact and predictable.
 *
 * The image track is fixed while the text track is allowed to shrink. This
 * prevents long legacy product names and descriptions from overlapping
 * thumbnails or escaping the live-search panel.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 */
body.jr-dark-commerce .site-search .commercekit-ajs-product {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: 0.75rem;
	align-items: center;

	width: 100%;
	min-width: 0;
	min-height: 4.75rem;
	padding: 0.625rem 0.875rem;

	box-sizing: border-box;

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

body.jr-dark-commerce
	.site-search
	.commercekit-ajs-product:not(:has(.commercekit-ajs-product-image)) {
	grid-template-columns: minmax(0, 1fr);
}

body.jr-dark-commerce .site-search .commercekit-ajs-product-image {
	position: static;
	float: none;
	overflow: hidden;

	display: grid;

	width: 3.5rem;
	height: 3.5rem;
	margin: 0;
	padding: 0;

	border: 1px solid var(--jr-border);
	border-radius: 0.25rem;
	background: var(--jr-image-bg);

	place-items: center;
}

body.jr-dark-commerce .site-search .commercekit-ajs-product-image img {
	display: block;

	width: 100%;
	height: 100%;
	max-width: 100%;
	margin: 0;

	object-fit: contain;
}

body.jr-dark-commerce .site-search .commercekit-ajs-product-desc {
	position: static;
	overflow: hidden;

	display: grid;
	gap: 0.18rem;

	width: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.jr-dark-commerce .site-search .commercekit-ajs-product-title {
	overflow: hidden;

	display: -webkit-box;

	margin: 0;

	color: var(--jr-text);

	font-size: 0.875rem;
	font-weight: 650;
	line-height: 1.3;

	white-space: normal;
	overflow-wrap: anywhere;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

body.jr-dark-commerce .site-search .commercekit-ajs-product-price,
body.jr-dark-commerce
	.site-search
	.commercekit-ajs-product-price
	.product-short-desc {
	overflow: hidden;

	display: block;

	margin: 0;

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

	font-size: 0.78125rem;
	font-weight: 400;
	line-height: 1.35;

	white-space: nowrap;
	text-overflow: ellipsis;
}

/**
 * Keep matched query text within the normal white result hierarchy.
 *
 * The search field already carries the green accent, so matched characters
 * use weight rather than another colour to avoid making the panel noisy.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 */
body.jr-dark-commerce .site-search .commercekit-ajs-results .match-text {
	color: var(--jr-text);
	font-weight: 750;
}


/* Result-group actions
   -------------------------------------------------------------- */

body.jr-dark-commerce .site-search .commercekit-ajs-view-all-holder {
	margin: 0;

	border-top: 1px solid rgba(255, 255, 255, 0.07);
	background: var(--jr-surface);
}

body.jr-dark-commerce
	.site-search
	.commercekit-ajs-view-all-holder
	> .commercekit-ajs-view-all {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 2.75rem;
	padding: 0.7rem 1rem;

	box-sizing: border-box;

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

	font-size: 0.71875rem;
	font-weight: 700;
	letter-spacing: 0.055em;
	line-height: 1.2;

	text-align: center;
	text-decoration: none;
	text-transform: uppercase;

	transition: background-color 150ms ease;
}

body.jr-dark-commerce
	.site-search
	.commercekit-ajs-view-all-holder
	> .commercekit-ajs-view-all:hover {
	background: var(--jr-surface-hover);
	color: var(--jr-text);
}

body.jr-dark-commerce .site-search .commercekit-ajs-other-result {
	margin: 0;
	padding: 0.6rem 0.875rem;

	border-top: 1px solid rgba(255, 255, 255, 0.07);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	background: var(--jr-surface);

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

	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;

	text-transform: uppercase;
}


/* Pages, reviews and other content
   -------------------------------------------------------------- */

body.jr-dark-commerce .site-search .commercekit-ajs-post {
	display: block;

	width: 100%;
	padding: 0.72rem 0.875rem;

	box-sizing: border-box;

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

body.jr-dark-commerce .site-search .commercekit-ajs-post-title {
	display: flex;
	gap: 0.8rem;
	align-items: center;

	min-width: 0;

	color: var(--jr-text);

	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.3;
}

body.jr-dark-commerce .site-search .commercekit-ajs-post-title .post-type {
	margin-left: auto;

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

	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.2;

	text-transform: uppercase;
	white-space: nowrap;

	flex: 0 0 auto;
}


/* Empty state
   -------------------------------------------------------------- */

/**
 * Collapse CommerceKit's fast-search empty state to its content height.
 *
 * Primary empty-state messaging remains white; any supporting labels/results
 * continue to use the same normal and muted text hierarchy as populated
 * search results.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 */
body.jr-dark-commerce
	.site-search
	.commercekit-ajs-results:has(.autocomplete-no-suggestion),
body.jr-dark-commerce
	.site-search
	.commercekit-ajs-suggestions:has(.autocomplete-no-suggestion) {
	height: auto;
	min-height: 0;
}

body.jr-dark-commerce .site-search .autocomplete-no-suggestion {
	position: static;
	display: block;

	height: auto;
	min-height: 0;
	margin: 0;
	padding: 1rem 1.125rem;

	border: 0;
	background: var(--jr-surface);

	color: var(--jr-text);

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

	text-align: center;
}

body.jr-dark-commerce
	.site-search
	.autocomplete-no-suggestion
	+ .autocomplete-no-suggestion {
	display: none;
}


/* Keyboard focus
   -------------------------------------------------------------- */

body.jr-dark-commerce
	.site-search
	.commercekit-ajs-suggestions
	a:focus-visible {
	position: relative;
	z-index: 1;

	outline: 2px solid var(--jr-text);
	outline-offset: -3px;
}


/* ==========================================================================
   Account and contact actions
   ========================================================================== */

body.jr-dark-commerce .secondary-navigation {
	color: var(--jr-text);
}

body.jr-dark-commerce .secondary-navigation ul,
body.jr-dark-commerce .secondary-navigation .menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.jr-dark-commerce .secondary-navigation .menu > li {
	position: relative;
	margin: 0;
	padding: 0;
}

body.jr-dark-commerce .secondary-navigation .menu > li + li::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 2.5rem;
	background: var(--jr-border);
	content: "";
	transform: translateY(-50%);
}

body.jr-dark-commerce .secondary-navigation .menu > li > a {
	color: var(--jr-text-soft);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: color 180ms ease;
}

body.jr-dark-commerce .secondary-navigation .menu > li:first-child > a {
	padding-left: 0;
}

body.jr-dark-commerce .secondary-navigation .menu > li:last-child > a {
	padding-right: 0;
}

/**
 * Keep secondary header utility interactions neutral.
 *
 * Account/contact links stay white on hover rather than inheriting the green
 * accent used by the product-search treatment.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 */
body.jr-dark-commerce .secondary-navigation .menu > li > a:hover {
	color: var(--jr-text);
	text-shadow: none;
}

body.jr-dark-commerce .secondary-navigation a::before,
body.jr-dark-commerce .secondary-navigation a::after,
body.jr-dark-commerce .secondary-navigation i,
body.jr-dark-commerce .secondary-navigation svg,
body.jr-dark-commerce .secondary-navigation svg path,
body.jr-dark-commerce .site-header svg,
body.jr-dark-commerce .site-header svg path {
	color: currentcolor;
	fill: none;
	stroke: currentcolor;
	opacity: 1;
}

body.jr-dark-commerce .secondary-navigation .jr-contact-menu-icon {
	display: inline-block;
	width: 1.375rem;
	height: 1.375rem;
	margin-bottom: 0.35rem;
	vertical-align: middle;
	flex: 0 0 1.375rem;
	color: currentcolor;
	fill: none;
	stroke: currentcolor;
	pointer-events: none;
}

body.jr-dark-commerce
	.secondary-navigation
	.jr-contact-menu-icon
	+ .jr-contact-menu-icon {
	margin-left: 0.45rem;
}


/* ==========================================================================
   Mobile header controls
   ========================================================================== */

/**
 * Preserve the existing Shoptimizer mobile-header geometry. Cart and drawer
 * positioning are intentionally owned by navigation.css.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 */
@media (max-width: 992px) {

	/**
	 * Shared mobile wordmark width.
	 *
	 * The same responsive value is used by the visible logo and by the
	 * menu-open locale control so the flag tracks the logo instead of relying
	 * on device-specific left offsets.
	 *
	 * @package    Jedi_Theme
	 * @subpackage Header
	 */
	body.jr-dark-commerce {
		--jr-mobile-shell-gutter: 1rem;
	}

	body.jr-dark-commerce .site-header {
		--jr-mobile-logo-width: clamp(12rem, 36vw, 17rem);
	}


	.site-header .site-branding button.menu-toggle {
		position: absolute;
		right: 6px;
		left: auto;
		display: block;
		width: 38px;
		height: 30px;
		padding: 0;
		background-color: transparent;
	}

	.site-header .site-branding button.menu-toggle:hover {
		background-color: transparent;
	}

	.site-branding button.menu-toggle .bar-text {
		display: none;
	}

	body.jr-dark-commerce .menu-toggle {
		color: var(--jr-text);
	}

	/**
	 * Keep the mobile logo compact, proportional and left aligned.
	 *
	 * The Jedi-Robe wordmark is approximately 6.1:1, so a fixed height makes
	 * it consume too much horizontal space. Mobile sizing is therefore driven
	 * by width while the image keeps its intrinsic aspect ratio.
	 *
	 * @package    Jedi_Theme
	 * @subpackage Header
	 */
	body.jr-dark-commerce .site-header .site-branding {
		text-align: left;
		align-items: flex-start;
	}

	body.jr-dark-commerce
		.site-header
		.site-branding
		.custom-logo-link {
		display: inline-block;
		width: auto;
		max-width: none;
		margin: 0;

		text-align: left;
	}

	body.jr-dark-commerce
		.site-header
		.site-branding
		.custom-logo-link
		img.custom-logo {
		display: block;

		width: var(--jr-mobile-logo-width);
		max-width: 100%;
		height: auto;
		margin: 0;

		align-self: auto;
	}

	.jedi-mobile-search-toggle {
		position: absolute;
		top: 50%;
		right: 106px;
		z-index: 20;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		padding: 0;
		border: none;
		border-radius: 50%;
		background: transparent;
		cursor: pointer;
		transform: translateY(-50%);
		transition: all 0.2s ease;
		pointer-events: auto;
	}

	.jedi-mobile-search-toggle:active {
		background: rgba(0, 0, 0, 0.05);
		transform: translateY(-50%) scale(0.95);
	}

	.jedi-mobile-search-toggle svg {
		color: #111;
		opacity: 0.78;
		pointer-events: none;
	}

	/**
	 * Anchor the menu-open wordmark to the same mobile gutter as the drawer.
	 *
	 * @package    Jedi_Theme
	 * @subpackage Header
	 */
	.menu-open-logo {
		position: fixed;
		top: 0.6rem;
		left: var(--jr-mobile-shell-gutter);
		right: auto;
		z-index: 999999;
		margin: 0;
	}

	/**
	 * Position the menu-open locale control relative to the responsive logo.
	 *
	 * This replaces the previous 330/300/270/232/242px left offsets. The flag
	 * now follows the actual wordmark width at every mobile viewport while the
	 * close control remains independently anchored to the drawer's right edge.
	 *
	 * @package    Jedi_Theme
	 * @subpackage Header
	 */
	body.mobile-toggled .jedi-header-locale-btn {
		position: fixed;
		top: 0.35rem;
		left: calc(
			var(--jr-mobile-shell-gutter)
			+ var(--jr-mobile-logo-width)
			+ clamp(0.7rem, 1.8vw, 1rem)
		);
		right: auto;
		z-index: 999999;

		flex-direction: column;
		align-items: center;
		justify-content: center;

		width: 3rem;
		height: 3rem;
		margin: 0;
		padding: 0;

		transform: none;

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

	body.mobile-toggled .jedi-header-locale-btn.menu-open-flag {
		display: inline-flex;
	}

	/**
	 * Keep the open-menu flag visibly useful without letting it compete with
	 * the wordmark or close control.
	 *
	 * @package    Jedi_Theme
	 * @subpackage Header
	 */
	.jedi-header-locale-btn img {
		display: block;

		width: clamp(2.125rem, 4vw, 2.375rem);
		height: auto;

		border-radius: 2px;

		object-fit: cover;
	}

	.jedi-header-locale-btn .locale-caret {
		margin-top: -0.15rem;

		color: var(--jr-text);

		font-size: 0.7rem;
		line-height: 1;
	}
}


@media (max-width: 360px) {
	.site-branding button.menu-toggle {
		right: 0;
	}

	.menu-toggle .bar {
		width: 18px;
	}

	.jedi-mobile-search-toggle {
		right: 88px;
		width: 24px;
	}

}


/* ==========================================================================
   Mobile dark header surface
   ========================================================================== */

@media (max-width: 992px) {

	/**
	 * Give the mobile masthead the same clear end-point as the desktop header.
	 *
	 * Mobile header and page content are both dark, so the desktop-style
	 * neutral divider is strengthened slightly and paired with a restrained
	 * shadow. This creates a visible boundary without introducing a green line
	 * or changing the existing header layout.
	 *
	 * @package    Jedi_Theme
	 * @subpackage Header
	 */
	body.jr-dark-commerce .site-header {
		border-bottom: 1px solid rgba(190, 207, 222, 0.24);

		background: linear-gradient(180deg, #0b1018, #06090f) !important;
		color: var(--jr-text) !important;

		box-shadow:
			0 1px 0 rgba(0, 0, 0, 0.82),
			0 0.7rem 1.5rem rgba(0, 0, 0, 0.18);
	}

	body.jr-dark-commerce .mobile-header,
	body.jr-dark-commerce .mobile-header .col-full,
	body.jr-dark-commerce .mobile-search {
		border-color: var(--jr-border);
		background: linear-gradient(180deg, #0b1018, #06090f) !important;
		color: var(--jr-text) !important;
	}

	body.jr-dark-commerce .mobile-header a {
		color: var(--jr-text) !important;
	}
}

/* ==========================================================================
   Desktop commerce header - 1200px+
   ========================================================================== */

/**
 * Jedi-Robe desktop header composition.
 *
 * Keeps branding, product search and customer support in one predictable
 * desktop grid. The customer-support component uses one telephone action and
 * one disclosure for secondary numbers; obsolete phone/email utility markup is
 * intentionally not styled here.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 * @since      1.7.1
 */

.jr-header-support {
	display: none;
}

body.jr-dark-commerce .jr-header-support__compact-contact {
	display: none;
}

@media (min-width: 1200px) {

	body.jr-dark-commerce .site-header > .col-full {
		--jr-header-column-gap: clamp(1.25rem, 1.6vw, 2rem);
		--jr-header-account-divider-gap: clamp(1rem, 1.15vw, 1.25rem);

		display: grid !important;
		grid-template-columns:
			minmax(19rem, 22.75rem)
			minmax(28rem, 1fr)
			max-content;
		column-gap: var(--jr-header-column-gap);
		align-items: center;
		justify-content: stretch;
		min-height: 6.5rem;
		padding-block: 1.5rem;
	}

	body.jr-dark-commerce .site-branding {
		grid-column: 1;
		width: 100%;
		max-width: 22.75rem;
		justify-self: start;
	}

	body.jr-dark-commerce .site-search {
		grid-column: 2;
		width: 100%;
		min-width: 0;
		margin: 0;
		justify-self: stretch;
	}

	body.jr-dark-commerce .site-header .site-search,
	body.jr-dark-commerce .site-header div.site-search {
		margin-left: 0;
	}

	body.jr-dark-commerce .site-search input[type="search"],
	body.jr-dark-commerce .site-search .search-field,
	body.jr-dark-commerce .main-header input[type="search"],
	body.jr-dark-commerce .commercekit-ajs-input,
	body.jr-dark-commerce .aws-search-field {
		height: 3.5rem;
	}


	/* --------------------------------------------------------------
	   Customer support
	   -------------------------------------------------------------- */

	/**
	 * Present one direct call action and one disclosure trigger.
	 *
	 * The phone icon and disclosure caret use the Jedi green accent while the
	 * support copy remains neutral so the search stays the dominant header task.
	 *
	 * @package    Jedi_Theme
	 * @subpackage Header
	 */
	body.jr-dark-commerce .jr-header-support {
		position: relative;
		z-index: 80;

		grid-column: 3;

		display: inline-flex;
		align-items: center;

		width: max-content;
		min-width: 0;
		margin: 0;
		padding: 0;

		border: 0;
		background: transparent;
		color: var(--jr-text);
		white-space: nowrap;

		justify-self: end;
	}

	body.jr-dark-commerce .jr-header-support__call {
		display: inline-flex;
		gap: 0.8rem;
		align-items: center;

		min-height: 3rem;
		margin: 0;
		padding: 0;

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

		color: inherit;
		text-decoration: none;
	}

	body.jr-dark-commerce .jr-header-support__call:hover,
	body.jr-dark-commerce .jr-header-support__call:focus {
		color: inherit;
		text-decoration: none;
	}

	body.jr-dark-commerce .jr-header-support__phone-icon {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;

		width: 2rem;
		height: 2rem;

		color: var(--jr-green-light, #57e981);

		transition:
			color 150ms ease,
			transform 150ms ease;
	}

	body.jr-dark-commerce .jr-header-support__phone-icon svg {
		display: block;
		width: 100%;
		height: 100%;
		fill: currentcolor;
	}

	body.jr-dark-commerce .jr-header-support__content {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		align-items: flex-start;
		min-width: 0;
		line-height: 1;
	}

	body.jr-dark-commerce .jr-header-support__label {
		display: block;
		color: var(--jr-text-muted);
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.075em;
		line-height: 1;
		text-transform: uppercase;
	}

	body.jr-dark-commerce .jr-header-support__number {
		display: block;
		color: rgba(255, 255, 255, 0.98);
		font-size: 1.36rem;
		font-weight: 700;
		letter-spacing: 0.015em;
		line-height: 1.05;
		white-space: nowrap;
		transition: color 150ms ease;
	}

	body.jr-dark-commerce
		.jr-header-support__call:hover
		.jr-header-support__number {
		color: #fff;
	}


	/* Disclosure trigger
	   -------------------------------------------------------------- */

	body.jr-dark-commerce .jr-header-support__details {
		position: relative;
		flex: 0 0 auto;
		margin-left: 0.25rem;
	}

	body.jr-dark-commerce .jr-header-support__toggle {
		display: grid;
		box-sizing: border-box;
		width: 2.7rem;
		height: 2.7rem;
		margin: 0;
		padding: 0;

		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--jr-green-light, #57e981);

		cursor: pointer;
		list-style: none;
		place-items: center;

		transition: color 150ms ease;
	}

	body.jr-dark-commerce .jr-header-support__toggle::-webkit-details-marker {
		display: none;
	}

	body.jr-dark-commerce .jr-header-support__toggle::marker {
		content: "";
	}

	body.jr-dark-commerce .jr-header-support__caret {
		display: block;
		width: 1.4rem;
		height: 1.4rem;
		overflow: visible;
		stroke: currentcolor;

		transition:
			transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	body.jr-dark-commerce
		.jr-header-support__details[open]
		.jr-header-support__caret {
		transform: rotate(180deg);
	}


	/* International number popover
	   -------------------------------------------------------------- */

	body.jr-dark-commerce .jr-header-support__popover {
		position: absolute;
		top: calc(100% + 0.65rem);
		right: 0;
		z-index: 1000;

		display: grid;
		gap: 0.35rem;

		box-sizing: border-box;
		width: 17rem;
		padding: 0.6rem;

		border: 1px solid rgba(119, 142, 158, 0.22);
		border-radius: 0.25rem;
		background: linear-gradient(180deg, #0d151f, #080e15);
		box-shadow:
			0 1rem 2.4rem rgba(0, 0, 0, 0.52),
			inset 0 1px 0 rgba(255, 255, 255, 0.025);
		color: var(--jr-text);
	}

	body.jr-dark-commerce .jr-header-support__popover::before {
		position: absolute;
		top: -0.3rem;
		right: 0.75rem;

		width: 0.55rem;
		height: 0.55rem;

		border-top: 1px solid rgba(119, 142, 158, 0.22);
		border-left: 1px solid rgba(119, 142, 158, 0.22);
		background: #0d151f;
		content: "";
		transform: rotate(45deg);
	}

	body.jr-dark-commerce .jr-header-support__popover-title {
		display: block;
		margin: 0 0 0.35rem;
		padding: 0.3rem 0.45rem 0.55rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		color: var(--jr-text);
		font-size: 0.72rem;
		font-weight: 650;
		letter-spacing: 0.08em;
		line-height: 1.2;
		text-transform: uppercase;
	}

	body.jr-dark-commerce .jr-header-support__option {
		display: flex;
		gap: 1rem;
		align-items: center;
		justify-content: space-between;

		padding: 0.2rem 0.55rem;
		border-radius: 2px;
		color: #fff;
		text-decoration: none;

		transition: background-color 150ms ease;
	}

	body.jr-dark-commerce .jr-header-support__option-label {
		color: var(--jr-text);
		font-size: 0.8rem;
		font-weight: 500;
	}

	body.jr-dark-commerce .jr-header-support__option-number {
		color: #fff;
		font-size: 0.82rem;
		font-weight: 650;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	body.jr-dark-commerce .jr-header-support__contact {
		display: flex;
		align-items: center;
		justify-content: space-between;

		margin-top: 0.35rem;
		padding: 0.65rem 0.55rem 0.4rem;
		border-top: 1px solid rgba(255, 255, 255, 0.08);

		color: var(--jr-green-light, #57e981);
		font-size: 0.8rem;
		font-weight: 650;
		text-decoration: none;
	}


	/* Support interactions
	   -------------------------------------------------------------- */

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

		body.jr-dark-commerce
			.jr-header-support__call:hover
			.jr-header-support__phone-icon,
		body.jr-dark-commerce .jr-header-support__toggle:hover,
		body.jr-dark-commerce .jr-header-support__contact:hover {
			color: #6af190;
		}

		body.jr-dark-commerce
			.jr-header-support__call:hover
			.jr-header-support__phone-icon {
			transform: translateY(-1px);
		}

		body.jr-dark-commerce .jr-header-support__option:hover {
			background: rgba(255, 255, 255, 0.045);
			color: #fff;
		}
	}

	body.jr-dark-commerce .jr-header-support__call:focus-visible,
	body.jr-dark-commerce .jr-header-support__toggle:focus-visible,
	body.jr-dark-commerce .jr-header-support__option:focus-visible,
	body.jr-dark-commerce .jr-header-support__contact:focus-visible {
		outline: 2px solid rgba(255, 255, 255, 0.82);
		outline-offset: 0.2rem;
		border-radius: 0.15rem;
	}


	/* --------------------------------------------------------------
	   Account utility
	   -------------------------------------------------------------- */

	/**
	 * Preserve the existing Shoptimizer secondary-navigation treatment when a
	 * secondary menu is enabled. No menu item is hidden by this stylesheet.
	 *
	 * @package    Jedi_Theme
	 * @subpackage Header
	 */
	body.jr-dark-commerce .secondary-navigation {
		position: relative;
		grid-column: 4;

		width: max-content;
		min-width: 0;
		margin: 0;
		margin-left: calc(
			var(--jr-header-account-divider-gap) - var(--jr-header-column-gap)
		);
		padding-left: var(--jr-header-account-divider-gap);

		border-left: 0;
		justify-self: end;
	}

	body.jr-dark-commerce .secondary-navigation::before {
		position: absolute;
		top: 50%;
		left: 0;

		width: 1px;
		height: 3rem;
		background: rgba(255, 255, 255, 0.28);
		content: "";
		transform: translateY(-50%);
		pointer-events: none;
	}

	body.jr-dark-commerce
		.secondary-navigation
		.menu
		> li::before {
		display: none;
		content: none;
	}

	body.jr-dark-commerce
		.secondary-navigation
		.menu
		> li
		> a {
		display: flex;
		flex-direction: row-reverse;
		gap: 0.6rem;
		align-items: center;

		padding: 0;
		color: var(--jr-text-soft);
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.1;
		white-space: nowrap;
		text-decoration: none;
	}

	body.jr-dark-commerce
		.secondary-navigation
		.menu
		> li
		> a:hover {
		color: var(--jr-text);
		text-shadow: none;
	}

	body.jr-dark-commerce
		.secondary-navigation
		.icon-wrapper {
		position: static;
		left: auto;

		display: flex;
		align-items: center;
		justify-content: center;

		width: 1.625rem;
		height: 1.625rem;
		margin: 0;
		padding: 0;
		transform: none;
	}

	body.jr-dark-commerce
		.secondary-navigation
		.icon-wrapper
		svg {
		display: block;
		width: 1.625rem;
		height: 1.625rem;
	}


	/* --------------------------------------------------------------
	   Header cart ownership
	   -------------------------------------------------------------- */

	/**
	 * Keep the Shoptimizer cart exclusively in the primary navigation for this
	 * desktop composition.
	 *
	 * @package    Jedi_Theme
	 * @subpackage Header
	 */
	body.jr-dark-commerce
		.site-header
		.main-header
		> .site-header-cart {
		display: none;
	}
}


/* ==========================================================================
   Compact desktop refinement - 1200px to 1439px
   ========================================================================== */

/**
 * Give product search priority while keeping the primary phone number visible.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 */
@media (min-width: 1200px) and (max-width: 1439px) {

	body.jr-dark-commerce .site-header > .col-full {
		--jr-header-column-gap: 1rem;
		--jr-header-account-divider-gap: 0.875rem;

		grid-template-columns:
			minmax(16rem, 19.5rem)
			minmax(22rem, 1fr)
			max-content
			max-content;
	}

	body.jr-dark-commerce .site-branding {
		max-width: 19.5rem;
	}

	body.jr-dark-commerce .jr-header-support__call {
		gap: 0.6rem;
	}

	body.jr-dark-commerce .jr-header-support__phone-icon {
		width: 1.6rem;
		height: 1.6rem;
	}

	body.jr-dark-commerce .jr-header-support__number {
		font-size: 1.05rem;
	}

	body.jr-dark-commerce
		.secondary-navigation
		.menu
		> li
		> a {
		font-size: 1rem;
	}

	body.jr-dark-commerce
		.secondary-navigation
		.icon-wrapper,
	body.jr-dark-commerce
		.secondary-navigation
		.icon-wrapper
		svg {
		width: 1.625rem;
		height: 1.625rem;
	}
}

/**
 * Hide only the support label at the tightest full-phone desktop range.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 */
@media (min-width: 1200px) and (max-width: 1259px) {

	body.jr-dark-commerce .jr-header-support__label {
		display: none;
	}
}


/* ==========================================================================
   Compact desktop utility header - 993px to 1199px
   ========================================================================== */

/**
 * Collapse customer support to the compact Contact Us icon pair.
 *
 * Product search keeps priority at compact-desktop widths while the full
 * telephone label, number and overseas-number disclosure remain reserved for
 * 1200px and above. The compact phone + message SVG pair links to Contact Us.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 * @since      1.7.3
 */
@media (min-width: 993px) and (max-width: 1199px) {

	body.jr-dark-commerce .site-header > .col-full {
		--jr-compact-header-gap: 1.25rem;

		display: grid !important;
		grid-template-columns:
			minmax(15rem, 19rem)
			minmax(18rem, 1fr)
			4rem;
		column-gap: var(--jr-compact-header-gap);
		align-items: center;
		justify-content: stretch;

		min-height: 5.75rem;
		padding-block: 1.25rem;
	}

	body.jr-dark-commerce .site-branding {
		grid-column: 1;
		width: 100%;
		max-width: 19rem;
		min-width: 0;
		margin: 0;
		justify-self: start;
	}

	body.jr-dark-commerce .site-branding .custom-logo-link {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	body.jr-dark-commerce .site-header .custom-logo,
	body.jr-dark-commerce
		header.site-header
		.site-branding
		.custom-logo-link
		img {
		display: block;
		width: 100%;
		max-width: 100% !important;
		height: auto;
	}

	body.jr-dark-commerce .site-search,
	body.jr-dark-commerce .site-header .site-search,
	body.jr-dark-commerce .site-header div.site-search {
		grid-column: 2;
		width: 100%;
		min-width: 0;
		margin: 0;
		justify-self: stretch;
	}

	body.jr-dark-commerce .site-search input[type="search"],
	body.jr-dark-commerce .site-search .search-field,
	body.jr-dark-commerce .main-header input[type="search"],
	body.jr-dark-commerce .commercekit-ajs-input,
	body.jr-dark-commerce .aws-search-field {
		height: 3.5rem;
	}


	/* Compact Contact Us utility
	   -------------------------------------------------------------- */

	body.jr-dark-commerce .jr-header-support {
		position: relative;
		grid-column: 3;

		display: flex;
		align-items: center;
		justify-content: center;

		width: 4rem;
		height: 3rem;
		min-width: 0;
		margin: 0;
		padding: 0;

		border: 0;
		background: transparent;
		justify-self: end;
	}

	/* Full telephone presentation belongs to 1200px and above. */
	body.jr-dark-commerce .jr-header-support__call,
	body.jr-dark-commerce .jr-header-support__details {
		display: none;
	}

	body.jr-dark-commerce .jr-header-support__compact-contact {
		display: flex;
		box-sizing: border-box;

		width: 4rem;
		height: 3rem;

		align-items: center;
		justify-content: center;

		margin: 0;
		padding: 0;

		border: 0;
		border-radius: 0.25rem;
		background: transparent;
		color: var(--jr-green-light, #57e981);
		text-decoration: none;

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

	body.jr-dark-commerce .jr-header-support__compact-icons {
		display: inline-flex;
		gap: 0.3rem;
		align-items: center;
		justify-content: center;

		color: currentcolor;
		pointer-events: none;
	}

	body.jr-dark-commerce .jr-header-support__compact-icon {
		display: block;
		flex: 0 0 1.6rem;

		width: 1.6rem;
		height: 1.6rem;
		margin: 0;
		padding: 0;

		fill: none;
		stroke: currentcolor;
		stroke-width: 2;
		transform: none;
	}


	/* Compact My Account utility
	   -------------------------------------------------------------- */

	body.jr-dark-commerce .secondary-navigation {
		position: relative;
		grid-column: 4;

		width: 3.5rem;
		min-width: 0;
		margin: 0;
		padding: 0 0 0 0.75rem;

		border: 0;
		justify-self: end;
	}

	body.jr-dark-commerce .secondary-navigation::before {
		position: absolute;
		top: 50%;
		left: 0;

		width: 1px;
		height: 2rem;
		background: rgba(255, 255, 255, 0.22);
		content: "";
		transform: translateY(-50%);
		pointer-events: none;
	}

	body.jr-dark-commerce .secondary-navigation ul,
	body.jr-dark-commerce .secondary-navigation .menu {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	body.jr-dark-commerce
		.secondary-navigation
		.menu
		> li::before {
		display: none;
		content: none;
	}

	body.jr-dark-commerce
		.secondary-navigation
		.menu
		> li
		> a {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 2.75rem;
		height: 2.75rem;
		padding: 0;

		color: var(--jr-text);
		font-size: 0;
		line-height: 1;
		text-decoration: none;
	}

	body.jr-dark-commerce
		.secondary-navigation
		.icon-wrapper {
		position: static;
		left: auto;

		display: flex;
		align-items: center;
		justify-content: center;

		width: 1.75rem;
		height: 1.75rem;
		margin: 0;
		padding: 0;
		transform: none;
	}

	body.jr-dark-commerce
		.secondary-navigation
		.icon-wrapper
		svg {
		display: block;
		width: 1.75rem;
		height: 1.75rem;
	}


	/* Compact utility interactions
	   -------------------------------------------------------------- */

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

		body.jr-dark-commerce .jr-header-support__compact-contact:hover {
			background: rgba(87, 233, 129, 0.055);
			color: #6af190;
		}

		body.jr-dark-commerce
			.secondary-navigation
			.menu
			> li
			> a:hover {
			background: transparent;
			color: var(--jr-text);
			text-shadow: none;
		}
	}

	body.jr-dark-commerce .jr-header-support__compact-contact:focus-visible {
		outline: 2px solid var(--jr-green-light, #57e981);
		outline-offset: 2px;
	}

	body.jr-dark-commerce
		.secondary-navigation
		.menu
		> li
		> a:focus-visible {
		outline: 2px solid rgba(255, 255, 255, 0.82);
		outline-offset: 0.15rem;
		border-radius: 0.25rem;
	}
}


/* ==========================================================================
   Shoptimizer compact-desktop search-width override
   ========================================================================== */

/**
 * Override Shoptimizer's parent-theme 100px search width at 993px-1060px.
 *
 * Shoptimizer 2.9.5 applies:
 *
 * body:not(.header-4):not(.header-5) .site-header .site-search {
 *     width: 100px;
 * }
 *
 * The additional .jr-dark-commerce class gives this child-theme selector
 * greater specificity without using !important, allowing the search field to
 * keep the full width of its compact-desktop grid column.
 *
 * @package    Jedi_Theme
 * @subpackage Header
 */
@media (min-width: 993px) and (max-width: 1060px) {

	body.jr-dark-commerce:not(.header-4):not(.header-5)
		.site-header
		.site-search {
		width: 100%;
		max-width: none;
		min-width: 0;
	}
}


/**
 * Prepare the single mobile logo for smooth menu-position transitions.
 *
 * Actual open/closed placement remains controlled by the existing header
 * rules. JavaScript animates only transform between those two real positions.
 *
 * @package Jedi_Theme
 * @subpackage Header
 */
@media (max-width: 992px) {

	body.jr-dark-commerce
		.site-header
		.custom-logo.jr-logo-is-moving {
		transform-origin: left top;
		will-change: transform;
	}
}

/**
 * Hide the fixed mobile-menu logo once the drawer has been scrolled.
 *
 * The logo returns when the drawer is returned to the top. Only opacity is
 * animated; the menu layout and Shoptimizer drawer behaviour are untouched.
 *
 * @package Jedi_Theme
 * @subpackage Header
 */
@media (max-width: 992px) {

	body.jr-dark-commerce
		.site-header
		.custom-logo-link
		img.custom-logo.menu-open-logo {
		transition: opacity 120ms ease;
	}

	body.jr-dark-commerce
		.site-header
		.custom-logo-link
		img.custom-logo.menu-open-logo.jr-menu-logo-scrolled {
		opacity: 0;
		pointer-events: none;
	}
}


/**
 * Mobile search shortcut — preserve the original SVG independently of menu-toggle.
 * Give the magnifier an explicit size and light colour on the dark header.
 *
 * @package Jedi_Theme
 */
@media (max-width: 992px) {
	body.jr-dark-commerce .site-header .jedi-mobile-search-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--jr-text, #fff);
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	body.jr-dark-commerce .site-header .jedi-mobile-search-toggle svg {
		display: block;
		flex: 0 0 auto;
		width: 28px;
		height: 28px;
		color: inherit;
		opacity: 1;
	}
}