/**
 * COSVOX Hub page styles.
 *
 * Provides the page-specific dark sci-fi presentation for the COSVOX hero,
 * benefit cards, original interactive demo, commerce cards, FAQ and closing
 * editorial content. Shared category-hero and information-box components stay
 * reusable; this file contains only COSVOX-specific composition and states.
 *
 * The .sts-cosvox-* demonstration block below is preserved from the original
 * approved COSVOX stylesheet without visual redesign.
 *
 * @package    Jedi_Theme
 * @subpackage Cosvox_Hub
 * @since      1.0.0
 */

/* ========================================================================== 
   Page tokens
   ========================================================================== */

body.jr-dark-commerce {
	--jr-cosvox-panel: rgba(8, 15, 24, 0.58);
	--jr-cosvox-panel-deep: rgba(3, 8, 13, 0.72);
	--jr-cosvox-border: rgba(111, 203, 255, 0.2);
	--jr-cosvox-border-soft: rgba(152, 169, 192, 0.16);
}


/* ========================================================================== 
   COSVOX hero media
   ========================================================================== */

/**
 * Keep the COSVOX video aligned with the shared category-hero component.
 *
 * @package    Jedi_Theme
 * @subpackage Cosvox_Hub
 */
body.jr-dark-commerce .jr-category-hero {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
}

body.jr-dark-commerce .jr-category-hero__image {
	position: relative;
	overflow: hidden;
}

body.jr-dark-commerce .jr-category-hero__image video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 918 / 522;
	object-fit: cover;
}

body.jr-dark-commerce .jr-cosvox-video-sound-toggle {
	position: absolute;
	right: 0.875rem;
	bottom: 0.875rem;
	z-index: 3;

	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;

	padding: 0.625rem 0.875rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 0;

	background: rgba(0, 0, 0, 0.82);
	box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.28);
	color: #fff;

	font: inherit;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
}

body.jr-dark-commerce .jr-cosvox-video-sound-toggle:hover {
	background: #000;
	color: #fff;
}

body.jr-dark-commerce .jr-cosvox-video-sound-toggle:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

body.jr-dark-commerce .jr-cosvox-video-sound-toggle svg {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.jr-dark-commerce .jr-cosvox-video-sound-toggle [hidden] {
	display: none;
}


/* ========================================================================== 
   Hero divider
   ========================================================================== */

/**
 * Match the restrained green divider used by the approved London Store hero.
 *
 * @package    Jedi_Theme
 * @subpackage Cosvox_Hub
 */
body.jr-dark-commerce .reviews-divider {
	width: 100%;
	height: 1px;
	margin: 2rem 0 2.5rem;
	border: 0;
	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(45, 166, 83, 0.18) 12%,
			var(--jr-green-light) 50%,
			rgba(45, 166, 83, 0.18) 88%,
			transparent 100%
		);
	box-shadow: 0 0 1rem rgba(45, 166, 83, 0.14);
}


/* ========================================================================== 
   Shared COSVOX section headers
   ========================================================================== */

/**
 * Use the approved London Store editorial hierarchy for COSVOX sections.
 * Headings and supporting copy are intentionally left aligned at every
 * breakpoint so mobile does not need to undo a desktop-centred layout.
 *
 * @package    Jedi_Theme
 * @subpackage Cosvox_Hub
 */
body.jr-dark-commerce .jr-cosvox-best__header,
body.jr-dark-commerce .jr-cosvox-shop__header,
body.jr-dark-commerce .jr-cosvox-faq__header {
	width: 100%;
	text-align: center;
}

body.jr-dark-commerce .jr-cosvox-best__header,
body.jr-dark-commerce .jr-cosvox-shop__header {
	margin: 0;
}

body.jr-dark-commerce .jr-cosvox-faq__header {
	margin: 0 0 2rem;
}

body.jr-dark-commerce .jr-cosvox-best__eyebrow,
body.jr-dark-commerce .jr-cosvox-shop__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	color: var(--jr-green-light);
	font-size: 0.73rem;
	font-weight: 800;
	letter-spacing: 0.17em;
	line-height: 1.2;
	text-transform: uppercase;
}

body.jr-dark-commerce .jr-cosvox-best__eyebrow::before,
body.jr-dark-commerce .jr-cosvox-shop__eyebrow::before {
	width: 1.8rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(69, 217, 107, 0.9), rgba(69, 217, 107, 0.15));
    content: "";
}

body.jr-dark-commerce .jr-cosvox-best__title,
body.jr-dark-commerce .jr-cosvox-shop__title,
body.jr-dark-commerce .jr-cosvox-faq__title,
body.jr-dark-commerce .jr-cosvox-closing__title {
	position: relative;
	color: var(--jr-text);
	line-height: 1.05;
	text-wrap: balance;
	text-transform: none;
	text-align: left;
}

body.jr-dark-commerce .jr-cosvox-faq__title {
	text-align: center;
}

body.jr-dark-commerce .jr-cosvox-best__title,
body.jr-dark-commerce .jr-cosvox-shop__title,
body.jr-dark-commerce .jr-cosvox-faq__title {
	margin: 0;
}

body.jr-dark-commerce .jr-cosvox-closing__title {
	margin: 0 0 1.35rem;
}

body.jr-dark-commerce .jr-cosvox-best__title::after,
body.jr-dark-commerce .jr-cosvox-shop__title::after,
body.jr-dark-commerce .jr-cosvox-closing__title::after {
	display: block;
	width: clamp(4rem, 6vw, 6rem);
	height: 2px;
	margin: 1rem 0 0;
	background:
		linear-gradient(
			90deg,
			var(--jr-green-light),
			transparent
		);
	box-shadow: 0 0 1rem rgba(45, 166, 83, 0.2);
	content: "";
}

body.jr-dark-commerce h2.jr-cosvox-faq__title::after {
	display: block;
	width: clamp(5rem, 9vw, 9rem);
	height: 2px;
	margin: 1rem auto 0;
    background: linear-gradient(90deg, transparent, var(--jr-green-light), transparent);
    box-shadow: 0 0 1rem rgba(45, 166, 83, 0.18);
	content: "";
}

/* ========================================================================== 
   Why choose COSVOX
   ========================================================================== */

body.jr-dark-commerce .jr-cosvox-best {
	margin: 5rem 0;
}

body.jr-dark-commerce .jr-cosvox-best__intro {
	margin: 1rem 0 0;
	padding: 0;
	color: var(--jr-text-soft);
}


/* ========================================================================== 
   COSVOX benefits grid
   ========================================================================== */

/**
 * Present six benefits as three compact technical columns on desktop.
 * The inherited information-box separator and glow are removed because the
 * section heading already supplies the interface accent.
 *
 * @package    Jedi_Theme
 * @subpackage Cosvox_Hub
 */
body.jr-dark-commerce .jr-info-boxes.jr-info-boxes--cosvox {
	display: grid;
	width: 100%;
	margin: 1.75rem 0 0;
	padding: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	border: 0;
	background: transparent;
}

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

body.jr-dark-commerce .jr-info-boxes--cosvox .jr-info-box {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	min-width: 0;
	min-height: 9.25rem;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 1.1rem;
	border: 1px solid var(--jr-cosvox-border);
	border-radius: 0.375rem;
	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.025),
			transparent 42%
		),
		var(--jr-cosvox-panel);
	box-shadow:
		0 1rem 2rem rgba(0, 0, 0, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.025);
	color: inherit;
	transform: none;
	transition:
		border-color 180ms ease,
		box-shadow 180ms ease,
		transform 180ms ease;
}

body.jr-dark-commerce .jr-info-boxes--cosvox .jr-info-box::before {
	display: none;
	content: none;
}

body.jr-dark-commerce .jr-info-boxes--cosvox .jr-info-box::after {
	position: absolute;
	right: -1px;
	bottom: -1px;
	display: block;
	width: 0.7rem;
	height: 0.7rem;
	border-right: 1px solid rgba(111, 203, 255, 0.4);
	border-bottom: 1px solid rgba(111, 203, 255, 0.4);
	content: "";
	pointer-events: none;
}

/**
 * Lock the benefit icon to an exact square flex-basis so long copy cannot
 * stretch the circular holder into an oval.
 *
 * @package    Jedi_Theme
 * @subpackage Cosvox_Hub
 */
body.jr-dark-commerce .jr-info-boxes--cosvox .jr-info-box__icon {
	display: grid;
	box-sizing: border-box;
	width: 3rem;
	height: 3rem;
	min-width: 3rem;
	min-height: 3rem;
	flex: 0 0 3rem;
	align-self: flex-start;
	margin: 0;
	padding: 0;
	aspect-ratio: 1 / 1;
	border: 1px solid rgba(69, 217, 107, 0.3);
	border-radius: 50%;
	background: rgba(69, 217, 107, 0.035);
	box-shadow: 0 0 1rem rgba(45, 166, 83, 0.055);
	color: var(--jr-green-light);
	line-height: 1;
	place-items: center;
}

body.jr-dark-commerce .jr-info-boxes--cosvox .jr-info-box__icon svg {
	display: block;
	width: 1rem;
	height: 1rem;
	max-width: 1rem;
	max-height: 1rem;
	margin: 0;
	flex: none;
	color: currentcolor;
	stroke: currentcolor;
}

body.jr-dark-commerce .jr-info-boxes--cosvox .jr-info-box h3 {
	margin: 0 0 0.4rem;
	color: var(--jr-text);
	font-size: clamp(1rem, 0.94rem + 0.14vw, 1.12rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

body.jr-dark-commerce .jr-info-boxes--cosvox .jr-info-box p {
	margin: 0;
	color: var(--jr-text-muted);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.6;
}

@media (hover: hover) and (pointer: fine) {
	body.jr-dark-commerce .jr-info-boxes--cosvox .jr-info-box:hover {
		border-color: rgba(69, 217, 107, 0.34);
		box-shadow:
			0 1.2rem 2.4rem rgba(0, 0, 0, 0.2),
			0 0 1rem rgba(45, 166, 83, 0.04);
		transform: translateY(-2px);
	}
}


/* ========================================================================== 
   Original COSVOX interactive demo
   ========================================================================== */

/**
	* COSVOX hub-page sound emulator.
	*
	* The outer section follows the light Stormtrooper Costumes design system,
	* while the remote and speaker stages remain black to preserve the physical
	* product presentation and control contrast.
	*
	* @package    Jedi_Theme
	* @subpackage Cosvox_Hub
	*/
	/**
	* COSVOX combined remote and speaker demonstration styles.
	*
		 * @package    Jedi_Theme
		 * @subpackage Cosvox_Demo
		 */
	.sts-cosvox-system,
	.sts-cosvox-system * {
		box-sizing: border-box;
	}

	.sts-cosvox-system {
		--bg: #07090c;
		--panel: #0c0f13;
		--text: #111111;
		--panel-text: #f7f4ed;
		--muted: #5b5b5b;
		--accent: #eca01f;
		--accent-light: #ffc35a;
		--cosvox-accent: #eca01f;
		--cosvox-accent-light: #ffc35a;
		--green: #62df72;
		--red: #df3b34;
		--blue: #3156c8;
		--wire-green: #14824c;
		--orange: #ef8b24;
		position: relative;
		isolation: isolate;
		overflow: hidden;
		width: 100%;
		margin: 0;
		color: var(--text);
		font-family: inherit;
	}


	.sts-cosvox-system::before {
		display: none;
	}

	.sts-cosvox-system button,
	.sts-cosvox-system a {
		font: inherit;
	}

	.sts-cosvox-system__inner {
		width: min(100%, 1180px);
		margin-inline: auto;
	}

	.sts-cosvox-system__header {
		max-width: 820px;
		margin-inline: auto;
		text-align: center;
	}

	.sts-cosvox-system__eyebrow {
		margin: 0 0 11px;
		color: #666666;
		font-size: 10px;
		font-weight: 850;
		letter-spacing: 0.22em;
		text-transform: uppercase;
	}

	.sts-cosvox-system__title {
		margin: 0;
		color: #111111;
		text-transform: uppercase;
	}

	.sts-cosvox-system__description {
		max-width: 700px;
		margin: 17px auto 0;
		color: #555555;
		font-size: clamp(14px, 1.45vw, 17px);
		line-height: 1.68;
	}

	.sts-cosvox-system__grid {
		display: grid;
		margin-top: 10px;
		grid-template-columns: minmax(330px, 0.82fr) minmax(500px, 1.18fr);
		gap: clamp(25px, 4vw, 52px);
		align-items: stretch;
	}

	/**
	 * Give both the remote and speaker panels the same dark COSVOX backdrop.
	 *
	 * The page itself remains on the light site background. The shared layered
	 * gradient and star texture are applied only inside the two hardware panels.
	 *
	 * @package    Jedi_Theme
	 * @subpackage Cosvox_Hub
	 */
	.sts-cosvox-panel {
		position: relative;
		isolation: isolate;
		min-width: 0;
		overflow: hidden;
		padding: clamp(22px, 3vw, 32px);
		border: 1px solid rgba(255, 255, 255, 0.085);
		border-radius: 14px;
		background:
			radial-gradient(circle at 72% 48%, rgba(236, 160, 31, 0.10), transparent 34%),
			linear-gradient(145deg, #101318 0%, #07090c 58%, #040506 100%);
		box-shadow:
			0 18px 42px rgba(0, 0, 0, 0.24),
			inset 0 1px 0 rgba(255, 255, 255, 0.055);
		color: var(--panel-text);
	}

	.sts-cosvox-panel::before {
		position: absolute;
		z-index: 0;
		inset: 0;
		background-image:
			radial-gradient(circle, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
			radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
		background-position: 0 0, 47px 39px;
		background-size: 108px 108px, 156px 156px;
		content: "";
		opacity: 0.09;
		pointer-events: none;
	}

	.sts-cosvox-panel>* {
		position: relative;
		z-index: 1;
	}

	.sts-cosvox-panel__heading {
		display: flex;
		margin-bottom: 20px;
		gap: 13px;
		align-items: center;
		justify-content: space-between;
	}

	.sts-cosvox-panel__kicker {
		display: block;
		margin-bottom: 4px;
		color: var(--cosvox-accent-light);
		font-size: 16px;
		font-weight: 850;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	body .sts-cosvox-panel__title {
		margin: 0;
		font-size: clamp(18px, 2vw, 25px);
		font-weight: 850;
		letter-spacing: -0.02em;
		line-height: 1.14;
		text-transform: uppercase;
		color: #ffffff;
	}

	.sts-cosvox-panel__badge {
		display: inline-flex;
		min-height: 27px;
		padding: 6px 9px;
		border: 1px solid rgba(255, 255, 255, 0.09);
		border-radius: 999px;
		background: rgba(0, 0, 0, 0.23);
		color: rgba(255, 255, 255, 0.54);
		font-size: 8px;
		font-weight: 800;
		letter-spacing: 0.11em;
		text-transform: uppercase;
		align-items: center;
	}

	/* Remote */
	.sts-cosvox-controller-wrap {
		position: relative;
		isolation: isolate;
		width: min(100%, 340px);
		margin: 0 auto;
		padding: 74px 35px 24px;
	}

	.sts-cosvox-controller-wrap::after {
		position: absolute;
		z-index: -1;
		right: 13%;
		bottom: 10px;
		left: 13%;
		height: 38px;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.62);
		content: "";
		filter: blur(17px);
	}

	.sts-cosvox-wires {
		position: absolute;
		z-index: 0;
		top: -3px;
		left: 50%;
		width: 190px;
		height: 120px;
		overflow: visible;
		transform: translateX(-50%);
		pointer-events: none;
	}

	.sts-cosvox-wire-path {
		fill: none;
		stroke: currentColor;
		stroke-width: 4.5;
		stroke-linecap: round;
		stroke-linejoin: round;
		filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));
	}

	.sts-cosvox-wire-path--red {
		color: var(--red);
	}

	.sts-cosvox-wire-path--blue {
		color: var(--blue);
	}

	.sts-cosvox-wire-path--green {
		color: var(--wire-green);
	}

	.sts-cosvox-wire-path--orange {
		color: var(--orange);
	}

	.sts-cosvox-connector {
		position: absolute;
		z-index: 3;
		top: 66px;
		left: 50%;
		width: 105px;
		height: 13px;
		border: 1px solid #d8d8d8;
		border-radius: 3px 3px 1px 1px;
		background: repeating-linear-gradient(90deg, #f2f2f2 0 12px, #c9c9c9 12px 13px);
		box-shadow: 0 3px 4px rgba(0, 0, 0, 0.38), inset 0 1px 0 #fff;
		transform: translateX(-50%);
	}

	.sts-cosvox-controller {
		position: relative;
		z-index: 2;
		width: min(100%, 266px);
		margin-inline: auto;
		padding: 47px 32px 30px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 24px 24px 18px 18px;
		background: linear-gradient(150deg, #363a3f 0%, #202328 31%, #121417 73%, #090a0c 100%);
		box-shadow: 0 21px 32px rgba(0, 0, 0, 0.63), inset 2px 2px 2px rgba(255, 255, 255, 0.09), inset -5px -7px 13px rgba(0, 0, 0, 0.7);
	}

	.sts-cosvox-controller::before {
		position: absolute;
		inset: 9px;
		border: 1px solid rgba(255, 255, 255, 0.028);
		border-radius: 18px 18px 13px 13px;
		content: "";
		pointer-events: none;
	}

	.sts-cosvox-controller__top-numbers {
		position: absolute;
		top: 14px;
		left: 50%;
		color: rgba(255, 255, 255, 0.4);
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.24em;
		text-shadow: 0 1px 1px #000, 0 -1px 0 rgba(255, 255, 255, 0.05);
		transform: translateX(-50%);
	}


	.sts-cosvox-controller__buttons {
		position: relative;
		z-index: 2;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 8px;
	}

	/**
		 * Form the moulded cavity around each physical remote button.
		 *
		 * The cavity is a separate wrapper, allowing the button itself to keep
		 * a visible inner border while remaining dropped into the controller.
		 *
		 * @package    Jedi_Theme
		 * @subpackage Cosvox_Demo
		 */
	.sts-cosvox-key-well {
		--button-rotation: 0deg;

		position: relative;
		display: grid;
		width: 116px;
		height: 80px;
		margin-inline: auto;
		border: 0;
		border-radius: 58%;
		background:
			radial-gradient(ellipse at 50% 47%,
				#08090a 0%,
				#090b0d 57%,
				#191c20 72%,
				#090a0c 100%);
		box-shadow:
			inset 0 10px 13px rgba(0, 0, 0, 0.98),
			inset 0 -3px 3px rgba(255, 255, 255, 0.045),
			0 0 10px 4px rgba(0, 0, 0, 0.42),
			0 0 3px 1px rgba(255, 255, 255, 0.018);
		place-items: center;
		transform: rotate(var(--button-rotation));
	}

	.sts-cosvox-key-well:nth-child(1) {
		--button-rotation: 46deg;
	}

	.sts-cosvox-key-well:nth-child(2) {
		--button-rotation: -46deg;
	}

	.sts-cosvox-key-well:nth-child(3) {
		--button-rotation: -46deg;
	}

	.sts-cosvox-key-well:nth-child(4) {
		--button-rotation: 46deg;
	}

	.sts-cosvox-trigger {
		position: relative;
		display: grid;
		width: 93px;
		height: 55px;
		padding: 0;
		border: 0;
		border-radius: 58%;
		background:
			radial-gradient(ellipse at 36% 28%,
				#4c5055 0%,
				#303338 29%,
				#191b1e 68%,
				#0b0c0e 100%);
		box-shadow:
			0 0 7px 3px rgba(0, 0, 0, 0.62),
			inset 0 3px 3px rgba(255, 255, 255, 0.11),
			inset 0 -6px 9px rgba(0, 0, 0, 0.9),
			0 1px 1px rgba(255, 255, 255, 0.025);
		color: rgba(255, 255, 255, 0.58);
		cursor: pointer;
		place-items: center;
		transition:
			background 145ms ease,
			box-shadow 145ms ease,
			filter 145ms ease,
			transform 145ms ease;
	}

	.sts-cosvox-trigger__number {
		position: relative;
		z-index: 2;
		font-size: 21px;
		font-weight: 900;
		text-shadow:
			0 1px 1px #000,
			0 -1px 0 rgba(255, 255, 255, 0.12);
		transform: rotate(calc(var(--button-rotation) * -1));
	}

	.sts-cosvox-trigger:hover {
		filter: brightness(1.08);
		transform: translateY(-1px);
	}

	.sts-cosvox-trigger:active,
	.sts-cosvox-trigger[aria-pressed="true"] {
		background:
			radial-gradient(ellipse at 50% 45%,
				#292c30 0%,
				#191b1e 56%,
				#090a0c 100%);
		box-shadow:
			0 0 5px 2px rgba(0, 0, 0, 0.72),
			inset 0 8px 12px rgba(0, 0, 0, 0.95),
			inset 0 -2px 2px rgba(255, 255, 255, 0.035);
		transform: translateY(3px) scale(0.985);
	}

	.sts-cosvox-trigger[aria-pressed="true"] {
		outline: 2px solid var(--cosvox-accent);
		outline-offset: 4px;
	}

	.sts-cosvox-trigger:focus-visible {
		outline: 3px solid #fff;
		outline-offset: 5px;
	}

	.sts-cosvox-controller__lower {
		display: grid;
		margin-top: 4px;
		gap: 10px;
		place-items: center;
	}

	.sts-cosvox-led {
		width: 15px;
		height: 15px;
		border: 3px solid #090b0c;
		border-radius: 50%;
		background: radial-gradient(circle at 37% 31%, #70e77e, #1d8536 63%, #0d4b20);
		box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.36), 0 0 0 2px rgba(255, 255, 255, 0.03);
	}

	.sts-cosvox-system.is-playing .sts-cosvox-led {
		box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 0 0 9px rgba(98, 223, 114, 0.92), 0 0 18px rgba(98, 223, 114, 0.42);
	}

	.sts-cosvox-controller__switch {
		position: relative;
		width: 57px;
		height: 24px;
		border: 2px solid #08090a;
		border-radius: 7px;
		background: linear-gradient(#282b2f, #111315);
		box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.07);
	}

	.sts-cosvox-controller__switch::before,
	.sts-cosvox-controller__switch::after {
		position: absolute;
		top: 3px;
		color: rgba(255, 255, 255, 0.44);
		font-size: 10px;
		font-weight: 800;
	}

	.sts-cosvox-controller__switch::before {
		left: 4px;
		content: "I";
	}

	.sts-cosvox-controller__switch::after {
		right: 3px;
		content: "0";
	}

	.sts-cosvox-controller__switch-knob {
		position: absolute;
		top: 5px;
		left: 18px;
		width: 18px;
		height: 10px;
		border-radius: 2px;
		background: linear-gradient(#3d4146, #16181b);
		box-shadow: 0 1px 2px #000, inset 0 1px 0 rgba(255, 255, 255, 0.13);
	}

	.sts-cosvox-controller__brand {
		display: block;
		width: 100%;
		margin-top: 2px;
		color: rgba(3, 5, 7, 0.86);
		font-family:
			"Michroma",
			"Eurostile Extended",
			"Arial Black",
			Arial,
			sans-serif;
		font-size: 30px;
		font-style: normal;
		font-weight: 400;
		letter-spacing: 0.14em;
		line-height: 1.08;
		text-align: center;
		text-shadow:
			0 1px 0 rgba(255, 255, 255, 0.085),
			0 -1px 1px rgba(0, 0, 0, 0.98),
			0 0 1px rgba(0, 0, 0, 0.88);
		text-transform: uppercase;
		transform: scale(1.3, 1);
		transform-origin: center;
		-webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.7);
	}

	.sts-cosvox-sound-cards {
		display: grid;
		margin-top: 18px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.sts-cosvox-sound-card {
		--card-accent: var(--accent);
		position: relative;
		display: block;
		min-width: 0;
		padding: 13px 12px 12px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.025);
		color: inherit;
		text-align: left;
		cursor: pointer;
		transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
	}

	.sts-cosvox-sound-card::before {
		position: absolute;
		top: 0;
		right: 11px;
		left: 11px;
		height: 2px;
		border-radius: 0 0 999px 999px;
		background: var(--card-accent);
		content: "";
		opacity: 0.62;
	}

	.sts-cosvox-sound-card:hover,
	.sts-cosvox-sound-card[aria-pressed="true"] {
		border-color: var(--card-accent);
		background: rgba(255, 255, 255, 0.052);
		transform: translateY(-2px);
	}

	.sts-cosvox-sound-card:focus-visible {
		outline: 3px solid #fff;
		outline-offset: 3px;
	}

	.sts-cosvox-sound-card__button {
		display: block;
		margin-bottom: 6px;
		color: var(--card-accent);
		font-size: 9px;
		font-weight: 900;
		letter-spacing: 0.13em;
		text-transform: uppercase;
	}

	.sts-cosvox-sound-card__title {
		display: block;
		font-size: 11px;
		font-weight: 820;
		letter-spacing: 0.035em;
		line-height: 1.35;
		text-transform: uppercase;
	}

	.sts-cosvox-sound-card__samples {
		display: flex;
		margin-top: 9px;
		gap: 5px;
		align-items: center;
	}

	.sts-cosvox-sound-card__dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.16);
	}

	.sts-cosvox-sound-card__dot.is-next {
		background: var(--card-accent);
		box-shadow: 0 0 7px var(--card-accent);
	}

	.sts-cosvox-sound-card__next {
		margin-left: 2px;
		color: rgba(255, 255, 255, 0.43);
		font-size: 8px;
		font-weight: 750;
		letter-spacing: 0.07em;
		text-transform: uppercase;
	}


	/* --------------------------------------------------------------
		 * COSVOX speaker unit based on the supplied physical reference
		 * ----------------------------------------------------------- */

	.sts-cosvox-speaker-unit {
		position: relative;
		width: min(100%, 505px);
		margin: 7px auto 0;
		padding: 20px 22px 23px;
		border: 1px solid rgba(255, 255, 255, 0.09);
		border-radius: 25px 25px 20px 20px;
		background:
			linear-gradient(150deg,
				#42464b 0%,
				#292d31 24%,
				#171a1e 67%,
				#0d0f11 100%);
		box-shadow:
			0 25px 43px rgba(0, 0, 0, 0.55),
			inset 2px 2px 2px rgba(255, 255, 255, 0.085),
			inset -7px -9px 17px rgba(0, 0, 0, 0.6);
	}

	.sts-cosvox-speaker-unit::before {
		position: absolute;
		inset: 10px;
		border: 1px solid rgba(255, 255, 255, 0.03);
		border-radius: 19px 19px 15px 15px;
		content: "";
		pointer-events: none;
	}

	.sts-cosvox-speaker__top-labels {
		position: relative;
		z-index: 2;
		display: grid;
		width: calc(100% - 62px);
		margin: 0 50px 8px 10px;
		grid-template-columns: 0.25fr 0.2fr 0.2fr;
		gap: 13px;
		color: rgba(4, 6, 8, 0.82);
		font-size: 12px;
		font-weight: 900;
		letter-spacing: 0.075em;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.095);
		text-transform: uppercase;
	}

	.sts-cosvox-speaker__control-row {
		position: relative;
		z-index: 2;
		display: grid;
		grid-template-columns: 18px minmax(0, 1fr) 18px;
		gap: 8px;
		align-items: center;
	}

	.sts-cosvox-speaker__control-border {
		display: grid;
		min-height: 72px;
		padding: 9px 11px;
		border: 2px solid #111417;
		border-radius: 15px;
		background:
			linear-gradient(180deg,
				rgba(255, 255, 255, 0.045),
				rgba(0, 0, 0, 0.14));
		box-shadow:
			inset 0 4px 9px rgba(0, 0, 0, 0.73),
			inset 0 -2px 2px rgba(255, 255, 255, 0.04);
		grid-template-columns: minmax(145px, 1fr) repeat(2, 84px);
		gap: 10px;
		align-items: center;
	}

	.sts-cosvox-speaker__usb-label {
		color: rgba(4, 6, 8, 0.8);
		font-size: 10px;
		font-weight: 900;
		letter-spacing: 0.08em;
		text-align: center;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.09);
		text-transform: uppercase;
		writing-mode: vertical-rl;
	}

	.sts-cosvox-speaker__brand {
		display: flex;
		width: 100%;
		min-width: 0;
		overflow: hidden;
		color: rgba(4, 6, 8, 0.84);
		font-family: "Michroma", "Eurostile Extended", "Arial Black", Arial, sans-serif;
		font-size: clamp(18px, 1.8vw, 25px);
		font-weight: 400;
		line-height: 1;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.11), 0 -1px 1px rgba(0, 0, 0, 0.98);
		text-transform: uppercase;
		white-space: nowrap;
		gap: clamp(3px, 1vw, 12px);
		align-items: center;
		justify-content: flex-start;
		transform: none;
		padding: 4px;
	}

	.sts-cosvox-speaker__brand>span {
		display: block;
		flex: 0 0 auto;
		transform: scale(1.5, 1.1);
	}

	/**
		 * Recessed wells for the physical VOICE and ECHO buttons.
		 *
		 * The shadow treatment mirrors the remote button cavities so the two
		 * controls look pressed into the speaker housing.
		 *
		 * @package    Jedi_Theme
		 * @subpackage Cosvox_Demo
		 */
	.sts-cosvox-effect-well {
		display: grid;
		width: 84px;
		height: 51px;
		border-radius: 10px;
		background:
			radial-gradient(ellipse at 50% 47%,
				#08090a 0%,
				#090b0d 57%,
				#191c20 72%,
				#090a0c 100%);
		box-shadow:
			inset 0 8px 11px rgba(0, 0, 0, 0.98),
			inset 0 -2px 3px rgba(255, 255, 255, 0.04),
			0 0 8px 3px rgba(0, 0, 0, 0.4);
		place-items: center;
	}

	.sts-cosvox-system .sts-cosvox-effect-button {
		position: relative;
		display: inline-flex;
		width: 68px;
		height: 37px;
		padding: 0;
		border: 0;
		border-radius: 7px;
		background:
			linear-gradient(180deg,
				#45494e 0%,
				#292c30 37%,
				#151719 100%);
		box-shadow:
			0 0 6px 2px rgba(0, 0, 0, 0.62),
			inset 0 3px 3px rgba(255, 255, 255, 0.105),
			inset 0 -5px 7px rgba(0, 0, 0, 0.88);
		color: rgba(255, 255, 255, 0.64);
		font-size: 9px;
		font-weight: 900;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		cursor: pointer;
		align-items: center;
		justify-content: center;
		transition:
			background 150ms ease,
			box-shadow 150ms ease,
			color 150ms ease,
			transform 150ms ease;
	}

	.sts-cosvox-effect-button:hover {
		color: #fff;
		filter: brightness(1.08);
	}

	.sts-cosvox-effect-button[aria-pressed="true"] {
		background:
			linear-gradient(180deg,
				#25282c 0%,
				#17191c 58%,
				#090a0c 100%);
		box-shadow:
			0 0 4px 2px rgba(0, 0, 0, 0.7),
			inset 0 7px 10px rgba(0, 0, 0, 0.94),
			inset 0 -2px 2px rgba(255, 255, 255, 0.03);
		color: var(--cosvox-accent-light);
		transform: translateY(2px) scale(0.985);
	}

	.sts-cosvox-effect-button[aria-pressed="true"]::after {
		border-color: rgba(236, 160, 31, 0.7);
		box-shadow:
			0 0 5px rgba(236, 160, 31, 0.24),
			inset 0 0 4px rgba(236, 160, 31, 0.12);
	}

	.sts-cosvox-effect-button:focus-visible {
		outline: 3px solid #fff;
		outline-offset: 4px;
	}

	.sts-cosvox-speaker__grille-frame {
		position: relative;
		z-index: 2;
		margin-top: 22px;
		padding: 23px 30px;
	}

	.sts-cosvox-speaker__grille {
		position: relative;
		overflow: hidden;
		min-height: 188px;
		border: 4px solid #15181b;
		background-color: #171a1d;
		background-image:
			radial-gradient(circle at center,
				#050607 0 3px,
				#292d31 3.5px 4.9px,
				transparent 5.4px);
		background-size: 17px 17px;
		box-shadow:
			inset 0 12px 19px rgba(0, 0, 0, 0.88),
			inset 0 -3px 4px rgba(255, 255, 255, 0.035),
			0 1px 0 rgba(255, 255, 255, 0.04);
		clip-path: polygon(7% 0,
				93% 0,
				100% 50%,
				93% 100%,
				7% 100%,
				0 50%);
	}

	.sts-cosvox-speaker__grille::before {
		position: absolute;
		inset: 0;
		background:
			linear-gradient(180deg,
				rgba(255, 255, 255, 0.05),
				transparent 28%,
				rgba(0, 0, 0, 0.14));
		content: "";
		pointer-events: none;
	}

	.sts-cosvox-speaker__screw {
		position: absolute;
		z-index: 4;
		width: 18px;
		height: 18px;
		border: 2px solid #090a0b;
		border-radius: 50%;
		background:
			radial-gradient(circle at 38% 34%,
				#5a5e62,
				#151719 62%);
		box-shadow:
			0 1px 2px rgba(0, 0, 0, 0.8),
			inset 0 1px 1px rgba(255, 255, 255, 0.1);
	}

	.sts-cosvox-speaker__screw::after {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 9px;
		height: 2px;
		background: #070809;
		content: "";
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.sts-cosvox-speaker__screw--tl {
		top: 2px;
		left: 2px;
	}

	.sts-cosvox-speaker__screw--tr {
		top: 2px;
		right: 2px;
	}

	.sts-cosvox-speaker__screw--bl {
		bottom: 2px;
		left: 2px;
	}

	.sts-cosvox-speaker__screw--br {
		right: 2px;
		bottom: 2px;
	}

	.sts-cosvox-waveform {
		position: absolute;
		z-index: 2;
		right: 28px;
		bottom: 18px;
		left: 28px;
		display: flex;
		height: 100px;
		gap: clamp(3px, 0.55vw, 6px);
		align-items: center;
		justify-content: center;
		pointer-events: none;
	}

	.sts-cosvox-waveform span {
		width: clamp(3px, 0.48vw, 5px);
		height: 7px;
		border-radius: 999px;
		background: rgba(236, 160, 31, 0.22);
		box-shadow: 0 0 5px rgba(236, 160, 31, 0.07);
		transform-origin: center;
	}

	.sts-cosvox-system.is-playing .sts-cosvox-waveform span {
		animation: stsCosvoxSpeakerWave 690ms ease-in-out infinite alternate;
	}

	.sts-cosvox-system.is-voice-active .sts-cosvox-waveform span {
		background: rgba(49, 86, 200, 0.66);
		box-shadow: 0 0 8px rgba(49, 86, 200, 0.34);
	}

	.sts-cosvox-system.is-echo-active .sts-cosvox-waveform span {
		background: rgba(236, 160, 31, 0.62);
		box-shadow: 0 0 8px rgba(236, 160, 31, 0.31);
		animation-duration: 960ms;
	}

	.sts-cosvox-waveform span:nth-child(2n) {
		animation-delay: -150ms;
	}

	.sts-cosvox-waveform span:nth-child(3n) {
		animation-delay: -290ms;
	}

	.sts-cosvox-waveform span:nth-child(4n) {
		animation-delay: -430ms;
	}

	.sts-cosvox-effects-status {
		display: flex;
		margin-top: 19px;
		gap: 10px;
		flex-wrap: wrap;
		justify-content: center;
	}

	.sts-cosvox-status-chip {
		display: inline-flex;
		min-height: 30px;
		padding: 7px 10px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 999px;
		background: rgba(0, 0, 0, 0.22);
		color: rgba(255, 255, 255, 0.48);
		font-size: 9px;
		font-weight: 800;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		align-items: center;
	}

	.sts-cosvox-system.is-voice-active .sts-cosvox-status-chip--voice,
	.sts-cosvox-system.is-echo-active .sts-cosvox-status-chip--echo {
		border-color: rgba(236, 160, 31, 0.4);
		color: var(--cosvox-accent-light);
	}

	.sts-cosvox-system__note {
		max-width: 780px;
		margin: 24px auto 0;
		color: #666666;
		font-size: 11px;
		line-height: 1.55;
		text-align: center;
	}

	.sts-cosvox-actions {
		display: flex;
		margin-top: 27px;
		gap: 12px;
		flex-wrap: wrap;
		justify-content: center;
	}

	.sts-cosvox-action {
		display: inline-flex;
		min-height: 48px;
		padding: 13px 22px;
		border: 1px solid var(--accent);
		border-radius: 4px;
		background: var(--accent);
		color: #111;
		font-size: 11px;
		font-weight: 900;
		letter-spacing: 0.1em;
		text-decoration: none;
		text-transform: uppercase;
		align-items: center;
		justify-content: center;
	}

	.sts-cosvox-action--secondary {
		border-color: rgba(255, 255, 255, 0.19);
		background: transparent;
		color: #fff;
	}

	.sts-cosvox-action:focus-visible {
		outline: 3px solid #fff;
		outline-offset: 4px;
	}

	.sts-cosvox-live-status {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	@keyframes stsCosvoxSpeakerWave {
		from {
			height: 8px;
			transform: scaleY(0.72);
		}

		to {
			height: 95px;
			transform: scaleY(1);
		}
	}

	@media (max-width: 980px) {
		.sts-cosvox-system__grid {
			grid-template-columns: 1fr;
		}

		.sts-cosvox-panel {
			width: min(100%, 700px);
			margin-inline: auto;
		}
	}

	@media (max-width: 620px) {
		.sts-cosvox-system {
			margin: 0;
			padding: 34px 14px;
			border-radius: 12px;
		}

		.sts-cosvox-panel {
			padding: 19px 14px;
			border-radius: 18px;
		}

		.sts-cosvox-speaker-unit {
			padding: 20px 16px 21px;
			border-radius: 21px;
		}
	}

	/**
		 * Attract attention to each COSVOX control group while it is idle.
		 *
		 * The remote and speaker are treated as two independent groups:
		 * - Activating any remote sound stops all four remote-number animations.
		 * - Activating Voice or Echo stops both speaker-effect animations.
		 * - Each group restarts automatically when that group becomes inactive.
		 *
		 * @package    Jedi_Theme
		 * @subpackage Cosvox_Demo
		 */
	.sts-cosvox-system:not(.is-playing) .sts-cosvox-trigger__number {
		animation:
			stsCosvoxButtonLight 2.4s ease-in-out infinite;
		will-change: color, text-shadow, filter;
	}

	.sts-cosvox-key-well:nth-child(1) .sts-cosvox-trigger__number {
		animation-delay: 0s;
	}

	.sts-cosvox-key-well:nth-child(2) .sts-cosvox-trigger__number {
		animation-delay: 0.6s;
	}

	.sts-cosvox-key-well:nth-child(3) .sts-cosvox-trigger__number {
		animation-delay: 1.2s;
	}

	.sts-cosvox-key-well:nth-child(4) .sts-cosvox-trigger__number {
		animation-delay: 1.8s;
	}

	.sts-cosvox-system.is-playing .sts-cosvox-trigger__number {
		animation: none;
		color: rgba(255, 255, 255, 0.58);
		filter: none;
		text-shadow:
			0 1px 1px #000000,
			0 -1px 0 rgba(255, 255, 255, 0.12);
		will-change: auto;
	}

	.sts-cosvox-system.is-playing .sts-cosvox-trigger[aria-pressed="true"] .sts-cosvox-trigger__number {
		color: var(--accent-light);
		filter: brightness(1.08);
		text-shadow:
			0 0 5px rgba(255, 195, 90, 0.72),
			0 0 13px rgba(236, 160, 31, 0.45),
			0 1px 1px #000000;
	}

	@keyframes stsCosvoxButtonLight {

		0%,
		20%,
		100% {
			color: rgba(255, 255, 255, 0.58);
			filter: brightness(1);
			text-shadow:
				0 1px 1px #000000,
				0 -1px 0 rgba(255, 255, 255, 0.12);
		}

		7% {
			color: #ffffff;
			filter: brightness(1.18);
			text-shadow:
				0 0 4px rgba(255, 255, 255, 0.85),
				0 0 10px rgba(236, 160, 31, 0.72),
				0 0 18px rgba(236, 160, 31, 0.36),
				0 1px 1px #000000;
		}

		13% {
			color: var(--accent-light);
			filter: brightness(1.08);
			text-shadow:
				0 0 5px rgba(255, 195, 90, 0.72),
				0 0 13px rgba(236, 160, 31, 0.45),
				0 1px 1px #000000;
		}
	}

	/**
 * Alternate the Voice and Echo attention animation.
 *
 * Both animations stop whenever either effect is active. The remote animation
 * remains independent and continues to use the is-playing state.
 *
 * @package    Jedi_Theme
 * @subpackage Cosvox_Hub
 */
	.sts-cosvox-system:not(.is-voice-active):not(.is-echo-active) .sts-cosvox-effect-button {
		animation-name: stsCosvoxEffectButtonLight;
		animation-duration: 1.8s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
	}

	/**
 * Start the Voice animation at the beginning of the cycle.
 */
	.sts-cosvox-system:not(.is-voice-active):not(.is-echo-active) .sts-cosvox-effect-button[data-cosvox-effect="voice"] {
		animation-delay: 0s;
	}

	/**
 * Start Echo halfway through the cycle.
 */
	.sts-cosvox-system:not(.is-voice-active):not(.is-echo-active) .sts-cosvox-effect-button[data-cosvox-effect="echo"] {
		animation-delay: -0.9s;
	}

	/**
 * Stop both speaker animations when either effect is active.
 */
	.sts-cosvox-system.is-voice-active .sts-cosvox-effect-button,
	.sts-cosvox-system.is-echo-active .sts-cosvox-effect-button {
		animation: none;
	}

	/**
 * Briefly illuminate one speaker-effect button during its half of the cycle.
 */
	@keyframes stsCosvoxEffectButtonLight {

		0%,
		42%,
		100% {
			color: rgba(255, 255, 255, 0.64);
			filter: brightness(1);
			box-shadow:
				0 0 6px 2px rgba(0, 0, 0, 0.62),
				inset 0 3px 3px rgba(255, 255, 255, 0.105),
				inset 0 -5px 7px rgba(0, 0, 0, 0.88);
		}

		12%,
		24% {
			color: #ffc35a;
			filter: brightness(1.28);
			box-shadow:
				0 0 8px rgba(236, 160, 31, 0.9),
				0 0 18px rgba(236, 160, 31, 0.55),
				inset 0 3px 3px rgba(255, 255, 255, 0.16),
				inset 0 -5px 7px rgba(0, 0, 0, 0.72);
		}
	}

	/**
 * Disable attention animations for visitors who request reduced motion.
 */
	@media (prefers-reduced-motion: reduce) {
		.sts-cosvox-effect-button {
			animation: none;
		}
	}

	@media (prefers-reduced-motion: reduce) {

		.sts-cosvox-trigger__number,
		.sts-cosvox-effect-button {
			animation: none;
			will-change: auto;
		}
	}

	/**
 * Keep the speaker controls usable on narrow mobile screens.
 *
 * Desktop hardware dimensions remain unchanged. Only the control strip is
 * allowed to contract when the available viewport is smaller than the
 * original physical mock-up.
 *
 * @package    Jedi_Theme
 * @subpackage Cosvox_Hub
 */
	@media (max-width: 480px) {
		.sts-cosvox-speaker__control-border {
			grid-template-columns: minmax(82px, 1fr) repeat(2, minmax(54px, 64px));
			gap: 6px;
			padding: 8px;
			min-height: 60px;
		}

		.sts-cosvox-effect-well {
			width: 100%;
			height: 42px;
		}

		.sts-cosvox-effect-button {
			width: calc(100% - 10px);
			height: 34px;
			font-size: 8px;
		}

		.sts-cosvox-system .sts-cosvox-effect-button {
			width: 47px;
			height: 26px;
		}

		.sts-cosvox-speaker__grille {
			min-height: 120px;
		}

		.sts-cosvox-speaker__brand {
			font-size: clamp(11px, 3.5vw, 18px);
			gap: 3px;
		}

		.sts-cosvox-speaker__brand>span {
			transform: scale(1.25, 1.05);
		}

		.sts-cosvox-speaker__top-labels {
			grid-template-columns: 0.3fr 0.2fr 0.2fr;
		}
	}

	@media (max-width: 375px) {
		.sts-cosvox-speaker__top-labels {
			grid-template-columns: 1fr 0.2fr 0.2fr;
		}

		.sts-cosvox-speaker__control-row {
			grid-template-columns: 13px minmax(0, 1fr) 18px;
		}

		.sts-cosvox-speaker__control-border {
			grid-template-columns: minmax(86px, 1fr) repeat(2, minmax(38px, 64px));
			gap: 6px;
			padding: 6px;
			min-height: 52px;
		}

		.sts-cosvox-effect-well {
			height: 30px;
			width: 44px;
		}

		.sts-cosvox-system .sts-cosvox-effect-button {
			width: 36px;
			height: 18px;
		}

		.sts-cosvox-speaker__grille {
			min-height: 85px;
		}

		.sts-cosvox-controller__buttons {
			margin-left: -10px;
		}

		.sts-cosvox-key-well {
			width: 90px;
			height: 62px;
		}

		.sts-cosvox-trigger {
			width: 70px;
			height: 42px;
		}

		.sts-cosvox-controller__lower {
			margin-left: -10px;
		}

		.sts-cosvox-controller__brand {
			font-size: 24px;
		}
	}


/* ==========================================================================
   Build your complete audio system
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-shop {
	position: relative;

	margin:
		4rem
		0
		0;

	padding:
		3.5rem
		0
		2rem;

	border: 0;

	background: transparent;

	box-shadow: none;

	clip-path: none;
}


/* ==========================================================================
   Shop introduction
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-shop
	.jr-cosvox-best__intro {
	margin: 1rem 0 2rem;
	padding: 0;
	color: var(--jr-text-soft);
	line-height: 1.72;
	text-align: left;
}


/* ==========================================================================
   Shop grid
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-shop__grid {
	display: grid;

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

	gap: 1.25rem;

	width: 100%;

	margin: 0;
}


/* ==========================================================================
   Shop card
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-shop-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	display: flex;

	min-width: 0;

	flex-direction: column;

	border: 1px solid var(--jr-cosvox-border);
	border-radius: 0.375rem;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.025),
			transparent 42%
		),
		rgba(8, 15, 24, 0.58);

	color: var(--jr-text);

	box-shadow:
		0 1rem 2.5rem rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.025);

	transition:
		border-color 180ms ease,
		box-shadow 180ms ease,
		transform 180ms ease;
}


/* ==========================================================================
   Shop card technical corner
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-shop-card::after {
	position: absolute;
	right: -1px;
	bottom: -1px;
	z-index: 3;

	width: 0.8rem;
	height: 0.8rem;

	border-right: 1px solid rgba(111, 203, 255, 0.42);
	border-bottom: 1px solid rgba(111, 203, 255, 0.42);

	content: "";

	pointer-events: none;
}


/* ==========================================================================
   Product media
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-shop-card__media {
	position: relative;

	display: grid;

	min-height: 17rem;

	padding: 1rem;

	border: 0;
	border-bottom: 1px solid var(--jr-cosvox-border-soft);

	background:
		var(--jr-image-bg, #e4e6e8);

	color: inherit;
	text-decoration: none;

	place-items: center;
}




/* ========================================================================== 
   Product special-offer badge
   ========================================================================== */

/**
 * Keep the promotional label over the product image and independent of link
 * typography inherited by the media anchor.
 *
 * @package    Jedi_Theme
 * @subpackage Cosvox_Hub
 */
body.jr-dark-commerce
	.jr-cosvox-shop-card__media
	> .jr-cosvox-shop-card__badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 5;

	display: inline-flex;
	width: auto;
	min-width: 0;
	min-height: 1.8rem;
	align-items: center;
	justify-content: center;

	margin: 0;
	padding: 0.4rem 0.7rem;

	border: 1px solid rgba(239, 196, 109, 0.7);
	border-radius: 999px;
	background: #c90000;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.28);

	color: #fff;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;

	pointer-events: none;
}

/* ==========================================================================
   Product image
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-shop-card__image {
	display: block;

	width: 100%;
	height: 14.5rem;

	margin: 0;

	object-fit: contain;
}


/* ==========================================================================
   Product card content
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-shop-card__content {
	display: flex;

	flex: 1;

	flex-direction: column;

	padding:
		1.2rem;

	border: 0;

	background: transparent;
}


/* ==========================================================================
   Product eyebrow
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-shop-card__eyebrow {
	display: block;

	margin-bottom: 0.5rem;

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

	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	line-height: 1.35;

	text-transform: uppercase;
}


/* ==========================================================================
   Product title
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-shop-card__title {
	margin:
		0
		0
		0.75rem;

	color: var(--jr-text);

	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.35;
}


body.jr-dark-commerce
	.jr-cosvox-shop-card__title
	a {
	color: inherit;

	text-decoration: none;
}


/* ==========================================================================
   Product description
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-shop-card__description {
	margin:
		0
		0
		1rem;

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

	font-size: 0.9rem;
	line-height: 1.6;
}


/* ==========================================================================
   Product price
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-shop-card__price,
body.jr-dark-commerce
	.jr-cosvox-shop-card__meta {
	margin:
		auto
		0
		1rem;

	color: var(--jr-text);

	font-size: 1.05rem;
	font-weight: 780;
	line-height: 1.3;
}


/* ==========================================================================
   Product action
   ========================================================================== */

/**
 * COSVOX product-card action button.
 *
 * Matches the canonical Jedi-Robe secondary dark action from
 * jr-editorial-components.css while preserving the existing COSVOX HTML:
 * <a class="button jr-cosvox-shop-card__button">.
 *
 * No markup changes are required. The COSVOX selector is intentionally more
 * specific than the generic WooCommerce/Shoptimizer .button selector so this
 * page can use the shared dark-commerce visual language without !important.
 *
 * @package    Jedi_Theme
 * @subpackage Cosvox_Hub
 * @since      1.1.0
 */
body.jr-dark-commerce
	.jr-cosvox-shop
	a.button.jr-cosvox-shop-card__button {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	display: inline-flex;
	box-sizing: border-box;

	width: 100%;
	min-height: 3.35rem;

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

	padding: 0.9rem 1.45rem;

	border: 1px solid rgba(152, 169, 192, 0.48);
	border-radius: 0;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.045),
			transparent 42%
		),
		linear-gradient(
			180deg,
			rgba(14, 24, 36, 0.96),
			rgba(6, 12, 20, 0.96)
		);

	color: #f7f9fc;

	box-shadow:
		0 0.65rem 1.5rem rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.07),
		inset 0 -1px 0 rgba(69, 217, 107, 0.08);

	font: inherit;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.065em;
	line-height: 1.1;

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

	transform: translateY(0);

	transition:
		transform 180ms ease,
		border-color 180ms ease,
		background 180ms ease,
		box-shadow 180ms ease,
		color 180ms ease,
		filter 180ms ease;
}


/* ==========================================================================
   Product action corner
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-shop
	a.button.jr-cosvox-shop-card__button::after {
	position: absolute;
	right: 0.45rem;
	bottom: 0.4rem;
	z-index: 2;

	width: 0.42rem;
	height: 0.42rem;

	border-right: 1px solid rgba(247, 249, 252, 0.62);
	border-bottom: 1px solid rgba(247, 249, 252, 0.62);

	content: "";

	pointer-events: none;

	transition:
		border-color 180ms ease;
}


/* ==========================================================================
   Shop interaction
   ========================================================================== */

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

	body.jr-dark-commerce
		.jr-cosvox-shop-card:hover {
		border-color: rgba(69, 217, 107, 0.34);

		box-shadow:
			0 1.35rem 3rem rgba(0, 0, 0, 0.25),
			0 0 1rem rgba(45, 166, 83, 0.045);

		transform: translateY(-2px);
	}


	body.jr-dark-commerce
		.jr-cosvox-shop
		a.button.jr-cosvox-shop-card__button:hover {
		border-color: rgba(69, 217, 107, 0.68);

		background:
			linear-gradient(
				135deg,
				rgba(69, 217, 107, 0.1),
				transparent 58%
			),
			linear-gradient(
				135deg,
				rgba(255, 255, 255, 0.045),
				transparent 42%
			),
			linear-gradient(
				180deg,
				rgba(14, 24, 36, 0.96),
				rgba(6, 12, 20, 0.96)
			);

		color: #fff;

		filter: brightness(1.1);

		box-shadow:
			0 1rem 2.2rem rgba(0, 0, 0, 0.32),
			0 0 1.2rem rgba(45, 166, 83, 0.16),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);

		transform: translateY(-2px);
	}


	body.jr-dark-commerce
		.jr-cosvox-shop
		a.button.jr-cosvox-shop-card__button:hover::after {
		border-right-color: rgba(69, 217, 107, 0.95);
		border-bottom-color: rgba(69, 217, 107, 0.95);
	}
}


/* ==========================================================================
   Product action active / focus
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-shop
	a.button.jr-cosvox-shop-card__button:active {
	transform: translateY(0) scale(0.985);
}

body.jr-dark-commerce
	.jr-cosvox-shop
	a.button.jr-cosvox-shop-card__button:focus-visible {
	outline: 2px solid var(--jr-blue-light);
	outline-offset: 3px;
}


/* ==========================================================================
   FAQ
   ========================================================================== */

/**
 * Recreate the established Jedi-Robe FAQ treatment using the existing native
 * COSVOX <details> markup.
 */
body.jr-dark-commerce
	.jr-cosvox-faq {
	width: 100%;
	max-width: 74rem;

	margin:
		4.5rem
		auto;

	padding: 0;
}


/* ==========================================================================
   FAQ list
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-faq__items {
	width: 100%;

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


/* ==========================================================================
   FAQ item
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-faq__item {
	position: relative;

	box-sizing: border-box;

	margin: 0;

	border: 0;
	border-bottom: 1px solid rgba(152, 169, 192, 0.18);

	border-radius: 0;

	background: transparent;

	box-shadow: none;

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


/* ==========================================================================
   FAQ animation containment
   ========================================================================== */

/**
 * Required by the existing FAQ closing animation.
 */
body.jr-dark-commerce
	.jr-cosvox-faq__item.is-animating {
	overflow: hidden;
}


/* ==========================================================================
   FAQ expanded state
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-faq__item.is-expanded {
	border-bottom-color: rgba(69, 217, 107, 0.34);

	background:
		linear-gradient(
			90deg,
			rgba(45, 166, 83, 0.045),
			transparent 50%
		);
}


/* ==========================================================================
   FAQ question
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-faq__question {
	position: relative;

	display: flex;

	width: 100%;
	min-height: 5rem;

	align-items: center;

	padding:
		1rem
		3rem
		1rem
		1rem;

	color: var(--jr-text);

	font-size:
		clamp(
			1rem,
			0.96rem + 0.12vw,
			1.12rem
		);

	font-weight: 720;
	line-height: 1.4;

	list-style: none;

	cursor: pointer;

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


body.jr-dark-commerce
	.jr-cosvox-faq__question::-webkit-details-marker {
	display: none;
}


/* ==========================================================================
   FAQ arrow
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-faq__question::after {
	position: absolute;
	top: 50%;
	right: 1rem;

	width: 0.55rem;
	height: 0.55rem;

	border-right: 2px solid var(--jr-green-light);
	border-bottom: 2px solid var(--jr-green-light);

	content: "";

	transform:
		translateY(-65%)
		rotate(45deg);

	transition:
		transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================================
   FAQ arrow open
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-faq__item.is-expanded
	.jr-cosvox-faq__question::after {
	transform:
		translateY(-25%)
		rotate(225deg);
}


/* ==========================================================================
   FAQ hover
   ========================================================================== */

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

	body.jr-dark-commerce
		.jr-cosvox-faq__question:hover {
		background:
			linear-gradient(
				90deg,
				rgba(45, 166, 83, 0.025),
				transparent 48%
			);
	}
}


/* ==========================================================================
   FAQ keyboard focus
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-faq__question:focus-visible {
	outline: 3px solid var(--jr-blue-light);
	outline-offset: 3px;
}


/* ==========================================================================
   FAQ answer
   ========================================================================== */

/**
 * Closed state must remain present because the existing JavaScript animates
 * the height before removing the native details open attribute.
 */
body.jr-dark-commerce
	.jr-cosvox-faq__answer {
	padding:
		0
		3rem
		1.5rem
		1.5rem;

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

	font-size:
		clamp(
			0.96rem,
			0.92rem + 0.08vw,
			1.04rem
		);

	line-height: 1.75;

	opacity: 0;

	transform:
		translateY(-6px);

	transition:
		opacity 220ms ease,
		transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================================
   FAQ expanded answer
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-faq__item.is-expanded
	.jr-cosvox-faq__answer {
	opacity: 1;

	transform:
		translateY(0);
}


body.jr-dark-commerce
	.jr-cosvox-faq__answer
	p {
	margin: 0;

	color: inherit;
}


/* ==========================================================================
   Future of Stormtrooper Audio
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-closing {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	box-sizing: border-box;

	width: 100%;
	max-width: none;

	margin:
		0
		0
		4.5rem;

	padding:
		1.75rem
		1.75rem
		0.6rem;

	border: 1px solid var(--jr-cosvox-border);
	border-radius: 0;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.022),
			transparent 40%
		),
		radial-gradient(
			circle at 100% 0,
			rgba(111, 203, 255, 0.05),
			transparent 18rem
		),
		rgba(8, 15, 24, 0.58);

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

	box-shadow:
		0 1.25rem 2.75rem rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


/* ==========================================================================
   Closing panel technical corner
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-closing::after {
	position: absolute;
	right: -1px;
	bottom: -1px;

	width: 1rem;
	height: 1rem;

	border-right: 1px solid rgba(111, 203, 255, 0.42);
	border-bottom: 1px solid rgba(111, 203, 255, 0.42);

	content: "";

	pointer-events: none;
}


/* ==========================================================================
   Closing copy
   ========================================================================== */

body.jr-dark-commerce
	.jr-cosvox-closing__content {
	width: 100%;

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


body.jr-dark-commerce
	.jr-cosvox-closing__content
	p {
	margin:
		0
		0
		1.15rem;

	color: inherit;
}


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

@media (max-width: 1100px) {
	body.jr-dark-commerce .jr-info-boxes.jr-info-boxes--cosvox {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	body.jr-dark-commerce .jr-cosvox-shop__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.jr-dark-commerce .jr-cosvox-shop-card:last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {
	body.jr-dark-commerce .jr-category-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	body.jr-dark-commerce .jr-cosvox-video-sound-toggle {
		right: 0.625rem;
		bottom: 0.625rem;
		min-height: 2.5rem;
		padding: 0.55rem 0.7rem;
		font-size: 0.75rem;
	}

	body.jr-dark-commerce .reviews-divider {
		margin: 1.5rem 0 2rem;
	}

	body.jr-dark-commerce .jr-cosvox-best {
		margin: 2rem 0 3rem;
	}

	body.jr-dark-commerce .jr-info-boxes.jr-info-boxes--cosvox {
		grid-template-columns: minmax(0, 1fr);
	}

	body.jr-dark-commerce .jr-info-boxes--cosvox .jr-info-box {
		min-height: 0;
	}

	body.jr-dark-commerce .jr-cosvox-faq__question {
		min-height: 4.75rem;
		padding: 1rem 2.5rem 1rem 0;
	}

	body.jr-dark-commerce .jr-cosvox-faq__question::after {
		right: 0.25rem;
	}

	body.jr-dark-commerce .jr-cosvox-faq__answer {
		padding: 0 0 1.25rem;
	}

	body.jr-dark-commerce .jr-cosvox-closing {
		padding: 1.5rem 1.25rem 0.4rem;
	}
}

@media (max-width: 620px) {
	body.jr-dark-commerce .jr-cosvox-shop {
		padding: 3rem 0 3.5rem;
	}

	body.jr-dark-commerce .jr-cosvox-shop__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	body.jr-dark-commerce .jr-cosvox-shop-card:last-child {
		grid-column: auto;
	}

	body.jr-dark-commerce .jr-cosvox-shop-card__media {
		min-height: 15rem;
	}

	body.jr-dark-commerce .jr-cosvox-shop-card__image {
		height: 12.75rem;
	}

	body.jr-dark-commerce .jr-cosvox-faq {
		margin: 3.5rem auto;
	}

	body.jr-dark-commerce .jr-cosvox-closing {
		margin-bottom: 3.5rem;
		padding: 1.3rem 1rem 0.25rem;
	}
}


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

@media (prefers-reduced-motion: reduce) {
	body.jr-dark-commerce .jr-info-boxes--cosvox .jr-info-box,
	body.jr-dark-commerce .jr-cosvox-shop-card,
	body.jr-dark-commerce .jr-cosvox-shop a.button.jr-cosvox-shop-card__button,
	body.jr-dark-commerce .jr-cosvox-faq__question,
	body.jr-dark-commerce .jr-cosvox-faq__question::after,
	body.jr-dark-commerce .jr-cosvox-faq__answer {
		transition: none;
	}

	body.jr-dark-commerce .jr-info-boxes--cosvox .jr-info-box:hover,
	body.jr-dark-commerce .jr-cosvox-shop-card:hover,
	body.jr-dark-commerce .jr-cosvox-shop a.button.jr-cosvox-shop-card__button:hover {
		transform: none;
	}
}