/**
 * Jedi-Robe terminal highlights.
 *
 * Canonical stylesheet for the JR Terminal Highlights widget inside the
 * Shoptimizer top bar. Owns the terminal message, locale / currency utility,
 * responsive sizing and the existing WP Jedi Toolkit locale popover.
 *
 * @package    Jedi_Theme
 * @subpackage Header_Terminal
 * @since      1.7.3
 * @version    1.7.6
 */


/* ==========================================================================
   Widget reset
   ========================================================================== */

body.jr-dark-commerce
	.top-bar
	.widget.jr-terminal-widget {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}


/* ==========================================================================
   Shoptimizer top-bar container
   ========================================================================== */

/**
 * Keep the top bar full width and allow the locale popover to escape the row.
 *
 * The visible surface remains the original near-black top-bar background. The
 * constrained Shoptimizer wrapper stays transparent so only content alignment
 * is controlled by .col-full.
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce .top-bar {
	position: relative;
	z-index: 300;
	width: 100%;
	overflow: visible;
	box-shadow: none;
}

body.jr-dark-commerce .col-full.topbar-wrapper {
	position: relative;
	z-index: 100;
	isolation: isolate;
	overflow: visible;
	background: transparent;
	box-shadow: none;
}

/**
 * Prevent the retired full-bleed wrapper surface from rendering.
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce .col-full.topbar-wrapper::before {
	display: none;
	content: none;
}

/**
 * Restore the current large-desktop Shoptimizer col-full gutters.
 *
 * 2.617924em is Shoptimizer's normal desktop horizontal gutter. The existing
 * 1650px breakpoint is preserved exactly from the current stylesheet.
 *
 * @package Jedi_Theme
 */
@media (min-width: 1650px) {
	body.jr-dark-commerce .top-bar .col-full {
		padding-right: 2.617924em;
		padding-left: 2.617924em;
	}
}


/* ==========================================================================
   Terminal row
   ========================================================================== */

/**
 * Two-column layout: service message on the left, locale utility on the right.
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce .jr-terminal-bar {
	--jr-terminal-font:
		"Michroma",
		"Eurostile",
		"Microgramma",
		"OCR A Std",
		"OCR A Extended",
		"Lucida Console",
		Monaco,
		Consolas,
		monospace;

	position: relative;
	z-index: 310;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: clamp(1.5rem, 2.5vw, 3rem);
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 4.35rem;
	margin: 0;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	box-shadow: none;
}


/* ==========================================================================
   Terminal message region
   ========================================================================== */

/**
 * Keep the message banner anchored to the left side of the top-bar container.
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce .jr-terminal {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 4.35rem;
	margin: 0;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	box-shadow: none;
}

body.jr-dark-commerce .jr-terminal::before,
body.jr-dark-commerce .jr-terminal::after {
	display: none;
	content: none;
}


/* ==========================================================================
   Recessed message display
   ========================================================================== */

/**
 * Single-border terminal display with a sunken internal cavity.
 *
 * The bright green bezel remains the only visible border. Dark inset shading
 * pushes the screen plane backwards while restrained hero-blue reflections
 * add depth inside the cavity without introducing a second border.
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce .jr-terminal__display {
	position: relative;
	z-index: 3;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	box-sizing: border-box;
	width: min(54rem, 100%);
	min-width: 0;
	min-height: 3.4rem;
	padding: 0.86rem 2.15rem;
	overflow: hidden;
	border: 1px solid rgba(55, 218, 105, 0.62);
	border-radius: 999px;
	background:
		radial-gradient(
			ellipse at 40% 68%,
			rgba(22, 71, 98, 0.60) 0%,
			rgba(8, 25, 35, 62.07) 45%,
			transparent 107%
			),
		#010405;
	box-shadow:
		0 8px 18px -13px rgba(0, 0, 0, 0.95),
		inset 7px 7px 14px rgba(0, 0, 0, 0.7),
		inset -3px -3px 11px rgba(31, 104, 145, 0.2),
		inset 0 0 26px rgba(26, 99, 142, 0.18),
		inset 0 0 8px rgba(63, 145, 181, 0.08);
	font-family: var(--jr-terminal-font);
	font-variant-numeric: tabular-nums;
	text-align: left;
	white-space: nowrap;
}

/**
 * Soft cavity vignette. No border is drawn here, avoiding the previous
 * double-border appearance.
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce .jr-terminal__display::before {
	position: absolute;
	inset: 0;
	z-index: 1;
	border: 0;
	border-radius: inherit;
	background:
		linear-gradient(
			135deg,
			rgba(0, 0, 0, 0.26) 0%,
			transparent 38%,
			transparent 64%,
			rgba(46, 126, 164, 0.075) 100%
		);
	content: "";
	pointer-events: none;
}

/**
 * Restrained blue reflection inside the recessed screen cavity.
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce .jr-terminal__display::after {
	position: absolute;
	right: 1.35rem;
	bottom: 0.4rem;
	left: 1.35rem;
	z-index: 1;
	height: 0.55rem;
	border: 0;
	background:
		radial-gradient(
			ellipse at center,
			rgba(52, 137, 177, 0.12),
			transparent 72%
		);
	filter: blur(4px);
	content: "";
	pointer-events: none;
}


/* ==========================================================================
   Message text and cursor
   ========================================================================== */

/**
 * Bright green terminal message with the existing debossed text treatment.
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce .jr-terminal__message {
	position: relative;
	z-index: 3;
	display: block;
	min-width: 0;
	overflow: hidden;
	color: var(--jr-green-light, #57e981);
	font-family: var(--jr-terminal-font);
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0.055em;
	line-height: 1;
	text-align: left;
	text-overflow: clip;
	text-transform: uppercase;
	text-shadow:
		-1px -1px 1px rgba(0, 0, 0, 0.95),
		1px 1px 0 rgba(71, 153, 190, 0.24),
		0 0 3px rgba(63, 224, 110, 0.12);
	transform: translateY(1px);
	white-space: nowrap;
}

body.jr-dark-commerce .jr-terminal__cursor {
	position: relative;
	z-index: 3;
	flex: 0 0 auto;
	color: var(--jr-green-light, #57e981);
	font-family: var(--jr-terminal-font);
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 0.9;
	text-shadow: 0 0 5px rgba(70, 230, 116, 0.32);
	animation: jrTerminalCursorBlink 1.05s step-end infinite;
}

/**
 * Restrained terminal cursor blink.
 *
 * @package Jedi_Theme
 */
@keyframes jrTerminalCursorBlink {

	0%,
	48% {
		opacity: 1;
	}

	49%,
	100% {
		opacity: 0.16;
	}
}


/* ==========================================================================
   Signal pulse
   ========================================================================== */

body.jr-dark-commerce
	.jr-terminal.is-signal-pulse
	.jr-terminal__message {
	animation:
		jrTerminalSignalPulse
		120ms
		steps(2, end)
		1;
}


/**
 * Brief analogue signal disturbance.
 *
 * Only the text changes opacity so the physical panel itself does not appear
 * to blink or move.
 *
 * @package Jedi_Theme
 */
@keyframes jrTerminalSignalPulse {

	0%,
	100% {
		opacity: 1;
	}

	45% {
		opacity: 0.72;
	}

	70% {
		opacity: 0.94;
	}
}


/* ==========================================================================
   Pause / resume control
   ========================================================================== */

/**
 * Retain the accessibility pause control but visually de-emphasise it.
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce
	.jr-terminal__motion-toggle {
	display: inline-grid;

	flex:
		0
		0
		1.6rem;

	width: 1.6rem;
	height: 1.6rem;

	place-items: center;

	margin:
		0
		0
		0
		0.45rem;

	padding: 0;

	border: 0;

	background: transparent;

	color:
		rgba(
			195,
			207,
			198,
			0.4
		);

	font-family:
		var(--jr-terminal-font);

	font-size: 0.58rem;
	font-weight: 400;
	line-height: 1;

	cursor: pointer;

	opacity: 0;

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


body.jr-dark-commerce
	.jr-terminal:hover
	.jr-terminal__motion-toggle,
body.jr-dark-commerce
	.jr-terminal__motion-toggle:focus-visible {
	opacity: 0.55;
}


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

	body.jr-dark-commerce
		.jr-terminal__motion-toggle:hover {
		color:
			rgba(
				242,
				244,
				239,
				0.9
			);

		opacity: 1;
	}
}


body.jr-dark-commerce
	.jr-terminal__motion-toggle:focus-visible {
	outline:
		1px solid
		rgba(
			86,
			207,
			116,
			0.82
		);

	outline-offset: 2px;
}


/* ==========================================================================
   Locale utility
   ========================================================================== */

/**
 * Locale controls occupy the right-hand grid column.
 *
 * No absolute positioning is needed, so the banner can remain naturally
 * anchored to the left side.
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce
	.jr-terminal-locale {
	position: relative;
	z-index: 320;

	display: flex;

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

	min-width: max-content;

	overflow: visible;
}


/* ==========================================================================
   Locale separator
   ========================================================================== */

body.jr-dark-commerce
	.jr-terminal-locale::before {
	position: absolute;

	top: 50%;
	left: -1rem;

	width: 1px;
	height: 1.55rem;

	background:
		linear-gradient(
			180deg,
			transparent,
			rgba(
				255,
				255,
				255,
				0.11
			),
			transparent
		);

	content: "";

	transform:
		translateY(-50%);

	pointer-events: none;
}


/* ==========================================================================
   Locale trigger
   ========================================================================== */

body.jr-dark-commerce
	.jr-terminal-locale__trigger {
	display: inline-flex;

	align-items: center;

	gap: 0.5rem;

	min-height: 4.35rem;

	margin: 0;
	padding: 0;

	border: 0;

	background: transparent;

	color:
		rgba(
			242,
			243,
			240,
			0.9
		);

	text-decoration: none;

	box-shadow: none;

	transition:
		color 150ms ease;
}


body.jr-dark-commerce
	.jr-terminal-locale__trigger:hover {
	color: #fff;
}


/* ==========================================================================
   Combined flag-strip image
   ========================================================================== */

body.jr-dark-commerce
	.jr-terminal-locale__flag-strip {
	display: inline-flex;

	flex: 0 0 auto;

	align-items: center;
	justify-content: flex-end;
}


body.jr-dark-commerce
	.jr-terminal-locale__flag-strip-image {
	display: block;

	width: auto;
	max-width: 13.125rem;

	height: auto;
	max-height: 1.875rem;

	margin: 0;

	object-fit: contain;

	filter: none;

	opacity: 0.98;

	transition:
		opacity 150ms ease;
}


body.jr-dark-commerce
	.jr-terminal-locale__trigger:hover
	.jr-terminal-locale__flag-strip-image {
	opacity: 1;
}


/* ==========================================================================
   Currency
   ========================================================================== */

/**
 * Currency stays in normal site UI typography rather than inheriting the
 * computer-display font.
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce
	.jr-terminal-locale__currency {
	display: inline-flex;

	align-items: center;

	flex: 0 0 auto;

	margin-left: 0.2rem;
	padding: 0;

	border: 0;

	color:
		rgba(
			241,
			242,
			239,
			0.86
		);

	font-family: inherit;

	font-size: 0.75rem;
	font-weight: 600;

	letter-spacing: 0.01em;
	line-height: 1;

	text-transform: uppercase;
}


/* ==========================================================================
   Locale caret
   ========================================================================== */

body.jr-dark-commerce
	.jr-terminal-locale__caret {
	box-sizing: border-box;

	width: 0.38rem;
	height: 0.38rem;

	margin:
		-0.18rem
		0
		0
		0.08rem;

	border-right:
		1px solid
		currentColor;

	border-bottom:
		1px solid
		currentColor;

	opacity: 0.62;

	transform:
		rotate(45deg);

	transform-origin: center;
}


/**
 * JR Terminal locale popup - restored original design.
 *
 * Restores the previous two-column Location Preferences panel while retaining
 * the current JR Terminal flag-strip / GBP trigger in the top bar.
 *
 * The popup remains a desktop-only enhancement because the mobile header owns
 * location preferences below the Shoptimizer mobile breakpoint.
 *
 * @package    Jedi_Theme
 * @subpackage Header_Terminal
 * @since      1.7.6
 */


/* ==========================================================================
   Locale popup positioning
   ========================================================================== */

@media (min-width: 993px) {

	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher-container {
		position: absolute;

		top: calc(100% - 0.1rem);
		right: 0;
		z-index: 500;

		display: block;

		box-sizing: border-box;

		width:
			min(
				28rem,
				calc(100vw - 2rem)
			);

		padding-top: 0.65rem;

		opacity: 0;
		visibility: hidden;

		transform:
			translate3d(
				0,
				0.4rem,
				0
			);

		pointer-events: none;

		transition:
			opacity 150ms ease,
			transform 180ms
				cubic-bezier(
					0.16,
					1,
					0.3,
					1
				),
			visibility 0s linear 180ms;
	}


	body.jr-dark-commerce
		.jr-terminal-locale:hover
		.locale-switcher-container,
	body.jr-dark-commerce
		.jr-terminal-locale:focus-within
		.locale-switcher-container {
		opacity: 1;
		visibility: visible;

		transform:
			translate3d(
				0,
				0,
				0
			);

		pointer-events: auto;

		transition-delay: 0s;
	}


	/* ==========================================================================
	   Popup panel
	   ========================================================================== */

	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher {
		position: relative;

		display: grid;

		grid-template-columns:
			minmax(
				0,
				1.08fr
			)
			minmax(
				0,
				1fr
			);

		box-sizing: border-box;

		width: 100%;

		padding: 0.55rem;

		border:
			1px solid
			var(
				--jr-border,
				rgba(
					152,
					169,
					192,
					0.22
				)
			);

		border-radius: 0.25rem;

		background:
			linear-gradient(
				180deg,
				var(
					--jr-surface-raised,
					#0d141e
				),
				var(
					--jr-surface,
					#080d15
				)
			);

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

		box-shadow:
			0 1rem 2.6rem
				rgba(
					0,
					0,
					0,
					0.52
				),

			inset 0 1px 0
				rgba(
					255,
					255,
					255,
					0.03
				);
	}


	/* ==========================================================================
	   Popup pointer
	   ========================================================================== */

	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher::before {
		position: absolute;

		top: -0.38rem;
		right: 2rem;

		width: 0.7rem;
		height: 0.7rem;

		border-top:
			1px solid
			rgba(
				152,
				169,
				192,
				0.22
			);

		border-left:
			1px solid
			rgba(
				152,
				169,
				192,
				0.22
			);

		background:
			var(
				--jr-surface-raised,
				#0d141e
			);

		content: "";

		transform: rotate(45deg);

		pointer-events: none;
	}


	/* ==========================================================================
	   Popup columns
	   ========================================================================== */

	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		> div {
		min-width: 0;

		padding:
			0.65rem
			0.7rem;
	}


	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.region-section {
		border-right:
			1px solid
			var(
				--jr-border,
				rgba(
					152,
					169,
					192,
					0.18
				)
			);
	}


	/* ==========================================================================
	   Popup headings
	   ========================================================================== */

	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		h5 {
		margin:
			0
			0
			0.55rem;

		padding:
			0
			0
			0.45rem;

		border-bottom:
			1px solid
			var(
				--jr-border,
				rgba(
					152,
					169,
					192,
					0.16
				)
			);

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

		font-size: 0.9rem;
		font-weight: 650;

		letter-spacing: 0.025em;

		text-transform: none;
	}


	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		h6 {
		margin: 0;

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

		font-size: 0.75rem;
		font-weight: 650;

		letter-spacing: 0.025em;

		text-transform: none;
	}


	/* ==========================================================================
	   Region selector
	   ========================================================================== */

	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.region-switcher
		a {
		display: flex;

		box-sizing: border-box;

		width: 100%;

		gap: 0.55rem;

		align-items: center;

		margin:
			0
			0
			0.1rem;

		padding: 0.5rem;

		border:
			1px solid
			transparent;

		border-radius: 2px;

		background: transparent;

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

		font-size: 0.78rem;
		font-weight: 500;

		text-decoration: none;
		text-transform: none;

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


	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.region-switcher
		a:hover {
		background:
			rgba(
				255,
				255,
				255,
				0.045
			);

		color: #fff;
	}


	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.region-switcher
		a.active {
		border-color:
			rgba(
				69,
				217,
				107,
				0.42
			);

		background:
			rgba(
				45,
				166,
				83,
				0.12
			);

		color:
			var(
				--jr-green-light,
				#69c986
			);
	}


	/* ==========================================================================
	   Region flags
	   ========================================================================== */

	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.flag-image {
		display: inline-flex;

		flex:
			0
			0
			2rem;

		width: 2rem;
		height: auto;

		align-items: center;
	}


	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.flag-image
		img {
		display: block;

		width: 100%;
		height: auto;

		filter: none;
	}


	/* ==========================================================================
	   Currency preferences
	   ========================================================================== */

	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.currency-section {
		margin: 0;

		padding:
			0.2rem
			0;
	}


	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.currency-switcher {
		display: flex;

		flex-wrap: wrap;

		gap: 0.35rem;

		padding-top: 0.45rem;
	}


	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.currency-switcher
		a {
		display: inline-flex;

		min-height: 2rem;

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

		margin: 0;

		padding:
			0.4rem
			0.55rem;

		border:
			1px solid
			var(
				--jr-border,
				rgba(
					152,
					169,
					192,
					0.2
				)
			);

		border-radius: 2px;

		background:
			rgba(
				255,
				255,
				255,
				0.012
			);

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

		font-size: 0.7rem;
		font-weight: 600;

		line-height: 1;

		text-decoration: none;
		text-transform: none;

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


	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.currency-switcher
		a:hover {
		border-color:
			rgba(
				255,
				255,
				255,
				0.25
			);

		background:
			rgba(
				255,
				255,
				255,
				0.05
			);

		color: #fff;
	}


	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.currency-switcher
		a.active,
	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.secondary-currency-section
		button.active {
		border-color:
			rgba(
				69,
				217,
				107,
				0.42
			);

		background:
			rgba(
				45,
				166,
				83,
				0.12
			);

		color:
			var(
				--jr-green-light,
				#69c986
			);
	}


	/* ==========================================================================
	   Secondary currency selector
	   ========================================================================== */

	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.secondary-currency-section {
		margin-top: 0;

		padding-top: 0.65rem;
	}


	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.secondary-currency-dropdown {
		position: relative;
	}


	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.secondary-currency-trigger {
		display: flex;

		box-sizing: border-box;

		width: 100%;
		height: 2.125rem;

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

		padding:
			0
			0.7rem;

		border:
			1px solid
			var(
				--jr-border,
				rgba(
					152,
					169,
					192,
					0.2
				)
			);

		border-radius: 2px;

		background:
			rgba(
				255,
				255,
				255,
				0.015
			);

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

		font-size: 0.75rem;
		font-weight: 600;

		cursor: pointer;
	}


	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.secondary-currency-menu {
		position: absolute;

		top: calc(100% + 0.2rem);
		left: 0;
		z-index: 40;

		width: 100%;

		border:
			1px solid
			var(
				--jr-border,
				rgba(
					152,
					169,
					192,
					0.2
				)
			);

		border-radius: 2px;

		background:
			var(
				--jr-surface-raised,
				#0d141e
			);

		box-shadow:
			0 0.8rem 1.8rem
			rgba(
				0,
				0,
				0,
				0.42
			);

		opacity: 0;
		visibility: hidden;

		transform:
			translateY(
				0.2rem
			);

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


	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.secondary-currency-dropdown:hover
		.secondary-currency-menu,
	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.secondary-currency-dropdown:focus-within
		.secondary-currency-menu {
		opacity: 1;
		visibility: visible;

		transform: none;

		transition-delay: 0s;
	}


	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.secondary-currency-menu
		a {
		display: block;

		padding:
			0.45rem
			0.65rem;

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

		font-size: 0.74rem;

		text-decoration: none;
	}


	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.secondary-currency-menu
		a:hover {
		background:
			rgba(
				255,
				255,
				255,
				0.045
			);

		color: #fff;
	}


	body.jr-dark-commerce
		.jr-terminal-locale
		.locale-switcher
		.secondary-currency-menu
		a.active {
		background:
			rgba(
				45,
				166,
				83,
				0.12
			);

		color:
			var(
				--jr-green-light,
				#69c986
			);
	}

}


/* ==========================================================================
   Responsive layout
   ========================================================================== */

/**
 * Progressively adapt the terminal strip before the Shoptimizer mobile
 * breakpoint. Desktop retains the locale / currency utility; mobile becomes
 * a message-only presentation. The shared `.jr-terminal` child structure is
 * reused by the JavaScript-created mobile presentation, so the responsive
 * rules remain focused on the terminal elements themselves.
 *
 * @package    Jedi_Theme
 * @subpackage Header_Terminal
 * @since      1.7.5
 */


/* ==========================================================================
   Medium desktop - 1260px to 1439px
   ========================================================================== */

@media (min-width: 1260px) and (max-width: 1439px) {
	body.jr-dark-commerce .jr-terminal-bar {
		column-gap: 1.75rem;
	}

	body.jr-dark-commerce .jr-terminal__display {
		width: min(48rem, 100%);
	}

	body.jr-dark-commerce .jr-terminal-locale__flag-strip-image {
		max-width: 11rem;
	}
}


/* ==========================================================================
   Compact desktop - 1100px to 1259px
   ========================================================================== */

@media (min-width: 1100px) and (max-width: 1259px) {
	body.jr-dark-commerce .jr-terminal-bar,
	body.jr-dark-commerce .jr-terminal,
	body.jr-dark-commerce .jr-terminal-locale__trigger {
		min-height: 4rem;
	}

	body.jr-dark-commerce .jr-terminal-bar {
		column-gap: 1.25rem;
	}

	body.jr-dark-commerce .jr-terminal__display {
		width: min(41rem, 100%);
		min-height: 2.9rem;
		padding: 0.68rem 1.4rem;
	}

	body.jr-dark-commerce .jr-terminal__message {
		font-size: 0.76rem;
		letter-spacing: 0.035em;
	}

	body.jr-dark-commerce .jr-terminal__cursor {
		font-size: 0.9rem;
	}

	body.jr-dark-commerce .jr-terminal-locale__trigger {
		gap: 0.4rem;
	}

	body.jr-dark-commerce .jr-terminal-locale__flag-strip-image {
		max-width: 8.5rem;
		max-height: 1.35rem;
	}

	body.jr-dark-commerce .jr-terminal-locale__currency {
		font-size: 0.7rem;
	}
}


/* ==========================================================================
   Narrow desktop - 993px to 1099px
   ========================================================================== */

@media (min-width: 993px) and (max-width: 1099px) {
	body.jr-dark-commerce .jr-terminal-bar,
	body.jr-dark-commerce .jr-terminal,
	body.jr-dark-commerce .jr-terminal-locale__trigger {
		min-height: 3.7rem;
	}

	body.jr-dark-commerce .jr-terminal-bar {
		column-gap: 0.75rem;
	}

	body.jr-dark-commerce .jr-terminal__display {
		width: min(40rem, 100%);
		min-height: 2.65rem;
		padding: 0.58rem 1rem;
	}

	body.jr-dark-commerce .jr-terminal__message {
		font-size: 0.66rem;
		letter-spacing: 0.02em;
	}

	body.jr-dark-commerce .jr-terminal__cursor {
		font-size: 0.72rem;
	}

	body.jr-dark-commerce .jr-terminal__motion-toggle {
		display: none;
	}

	body.jr-dark-commerce .jr-terminal-locale::before {
		left: -0.4rem;
	}

	body.jr-dark-commerce .jr-terminal-locale__trigger {
		gap: 0.3rem;
	}

	body.jr-dark-commerce .jr-terminal-locale__flag-strip-image {
		max-width: 8.5rem;
		max-height: 1.35rem;
	}

	body.jr-dark-commerce .jr-terminal-locale__currency {
		font-size: 0.65rem;
	}
}


/* ==========================================================================
   Mobile / tablet - 992px and below
   ========================================================================== */

/**
 * Convert the terminal presentation into a centred, message-only mobile row.
 *
 * The JavaScript mobile clone reuses `.jr-terminal`, `.jr-terminal__display`,
 * `.jr-terminal__message` and `.jr-terminal__cursor`, so those shared selectors
 * style both presentations. Locale controls and the motion toggle are removed
 * from the mobile presentation.
 *
 * @package    Jedi_Theme
 * @subpackage Header_Terminal
 */
@media (max-width: 992px) {
	body.jr-dark-commerce .top-bar .col-full {
		box-sizing: border-box;
		width: 100%;
		padding-block: 0.4rem;
		padding-inline: clamp(0.75rem, 3vw, 1.25rem);
	}

	body.jr-dark-commerce .jr-terminal-bar {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
		align-items: center;
		width: 100%;
		min-height: 0;
		padding: 1rem;
	}

	body.jr-dark-commerce .jr-terminal-locale {
		display: none;
	}

	body.jr-dark-commerce .jr-terminal {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 0;
		margin: 0;
		padding: 0;
	}

	body.jr-dark-commerce .jr-terminal__display {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-width: 0;
		min-height: 2.55rem;
		gap: 0.3rem;
		margin-inline: auto;
		padding: 0.52rem clamp(0.75rem, 2.8vw, 1rem);
		text-align: center;
		box-shadow:
			0 7px 15px -12px rgba(0, 0, 0, 0.92),
			inset 6px 6px 11px rgba(0, 0, 0, 0.58),
			inset -3px -3px 9px rgba(31, 104, 145, 0.15),
			inset 0 0 17px rgba(26, 99, 142, 0.13);
	}

	body.jr-dark-commerce .jr-terminal__message {
		flex: 0 1 auto;
		width: auto;
		max-width: 100%;
		min-width: 0;
		font-size: clamp(0.58rem, 1.5vw, 1rem);
		letter-spacing: 0.018em;
		line-height: 1.1;
		text-align: center;
		white-space: nowrap;
	}

	body.jr-dark-commerce .jr-terminal__cursor {
		flex: 0 0 auto;
		font-size: 1.12rem;
	}

	body.jr-dark-commerce .jr-terminal__motion-toggle {
		display: none;
	}
}


/* ==========================================================================
   Standard phone - 480px and below
   ========================================================================== */

/**
 * Reduce the physical pill width and internal spacing on normal phone widths.
 *
 * @package    Jedi_Theme
 * @subpackage Header_Terminal
 */
@media (max-width: 480px) {

	body.jr-dark-commerce .jr-terminal-bar {
		padding: 0.5rem;
	}

	body.jr-dark-commerce .top-bar .col-full {
		padding-block: 0.35rem;
		padding-inline: 0.65rem;
	}

	body.jr-dark-commerce .jr-terminal__display {
		width: min(100%, 23.5rem);
		min-height: 2.35rem;
		gap: 0.26rem;
		padding: 0.46rem 0.65rem;
	}

	body.jr-dark-commerce .jr-terminal__message {
		font-size: clamp(0.54rem, 2.15vw, 0.62rem);
		letter-spacing: 0.01em;
	}

	body.jr-dark-commerce .jr-terminal__cursor {
		font-size: 0.85rem;
	}
}


/* ==========================================================================
   Small phone - 390px and below
   ========================================================================== */

/**
 * Keep the terminal visually compact on narrow phones without changing the
 * existing one-line terminal behaviour.
 *
 * @package    Jedi_Theme
 * @subpackage Header_Terminal
 */
@media (max-width: 390px) {
	body.jr-dark-commerce .top-bar .col-full {
		padding-inline: 0.5rem;
	}

	body.jr-dark-commerce .jr-terminal__display {
		width: min(100%, 20rem);
		min-height: 2.2rem;
		gap: 0.22rem;
		padding: 0.4rem 0.55rem;
	}

	body.jr-dark-commerce .jr-terminal__message {
		font-size: 0.52rem;
		letter-spacing: 0.008em;
	}

	body.jr-dark-commerce .jr-terminal__cursor {
		font-size: 0.75rem;
	}
}


/* ==========================================================================
   Very small phone - 340px and below
   ========================================================================== */

/**
 * Final compact treatment for very narrow phone viewports.
 *
 * @package    Jedi_Theme
 * @subpackage Header_Terminal
 */
@media (max-width: 340px) {
	body.jr-dark-commerce .top-bar .col-full {
		padding-inline: 0.4rem;
	}

	body.jr-dark-commerce .jr-terminal__display {
		width: min(100%, 18.5rem);
		min-height: 2.1rem;
		gap: 0.18rem;
		padding: 0.36rem 0.48rem;
	}

	body.jr-dark-commerce .jr-terminal__message {
		font-size: 0.49rem;
		letter-spacing: 0.004em;
	}

	body.jr-dark-commerce .jr-terminal__cursor {
		font-size: 0.6rem;
	}
}


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

/**
 * Respect the visitor's operating-system reduced-motion preference.
 *
 * @package    Jedi_Theme
 * @subpackage Header_Terminal
 */
@media (prefers-reduced-motion: reduce) {
	body.jr-dark-commerce .jr-terminal__cursor,
	body.jr-dark-commerce
		.jr-terminal.is-signal-pulse
		.jr-terminal__message {
		animation: none;
	}

	body.jr-dark-commerce .jr-terminal__cursor {
		opacity: 0.7;
	}
}