/**
 * COSVOX Hub page styles.
 *
 * Contains the page-specific presentation for the COSVOX hero, benefit cards,
 * interactive remote and speaker, commerce cards, FAQ and closing content.
 * Functional behaviour remains in WP Jedi Toolkit.
 *
 * @package    Jedi_Theme
 * @subpackage Cosvox_Hub
 * @since      1.0.0
 */
body .jr-category-hero { grid-template-columns: 1.2fr 0.9fr; }
	.jr-category-hero__image { position: relative; overflow: hidden; }
	.jr-category-hero__image video { display: block; width: 100%; height: auto; aspect-ratio: 918 / 522; object-fit: cover; }
	.jr-cosvox-video-sound-toggle { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: inline-flex; min-height: 44px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 0; background: rgba(0, 0, 0, .82); box-shadow: 0 4px 14px rgba(0, 0, 0, .28); color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1; gap: 8px; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
	.jr-cosvox-video-sound-toggle:hover { background: #000; color: #fff; }
	.jr-cosvox-video-sound-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
	.jr-cosvox-video-sound-toggle svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
	.jr-cosvox-video-sound-toggle [hidden] { display: none !important; }
	@media (max-width: 480px) { .jr-cosvox-video-sound-toggle { right: 10px; bottom: 10px; min-height: 40px; padding: 9px 11px; font-size: 12px; } }

.jr-cosvox-best { margin: 40px 0 30px; }
	.jr-cosvox-best__header { max-width: 820px; margin: 0 auto; text-align: center; }
	.jr-cosvox-best__eyebrow { display: block; margin: 0 0 10px; color: #666; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
	body .jr-cosvox-best__title { margin: 0 0 16px; color: #111; text-transform: uppercase; }
	.jr-cosvox-best__intro { 
    margin: 0 auto;
    color: #555;
    font-size: 17px;
    line-height: 1.7;
    text-align: center;
    padding: 0 40px 40px 40px; }
	.jr-info-boxes.jr-info-boxes--cosvox { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; margin-bottom: 0; }
	.jr-info-boxes--cosvox .jr-info-box { position: relative; display: flex; min-height: 140px; padding: 16px; gap: 14px; align-items: flex-start; overflow: hidden; border: 1px solid #e5e5e5; border-radius: 14px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .12); color: inherit; transition: transform .25s ease, box-shadow .25s ease; }
	.jr-info-boxes--cosvox .jr-info-box:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
	.jr-info-boxes--cosvox .jr-info-box h3 { margin: 0 0 7px; color: #111; font-size: 17px; line-height: 1.3; }
	.jr-info-boxes--cosvox .jr-info-box p { margin: 0; color: #666; font-size: 14px; line-height: 1.6; }
	.jr-info-boxes--cosvox .jr-info-box__icon { color: #fff; }
    .jr-info-box__icon svg { stroke: #000; }
	@media (max-width: 768px) { body .jr-category-hero { grid-template-columns: 1fr; } .jr-cosvox-best { margin: 45px 0 0; } .jr-cosvox-best__header { text-align: left; } .jr-cosvox-best__intro { text-align: left; padding: 0; margin-bottom: 24px; } .jr-info-boxes.jr-info-boxes--cosvox { grid-template-columns: 1fr; } }
	@media (prefers-reduced-motion: reduce) { .jr-info-boxes--cosvox .jr-info-box { transition: none; } .jr-info-boxes--cosvox .jr-info-box:hover { transform: none; } }

/**
	* 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 !important;
		}
	}

	@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;
		}
	}

	.jr-cosvox-shop {
		margin: 40px 0 0;
		padding: 44px 0 72px;
		border-top: 1px solid #e5e5e5;
		background: #f7f7f7;
		box-shadow: 0 0 0 100vmax #f7f7f7;
		clip-path: inset(0 -100vmax);
	}

	.jr-cosvox-shop__header {
		max-width: 780px;
		margin: 0 auto;
		text-align: center;
	}

	.jr-cosvox-shop__eyebrow,
	.jr-cosvox-shop-card__eyebrow {
		display: block;
		color: #686868;
		font-size: 12px;
		font-weight: 800;
		letter-spacing: .14em;
		text-transform: uppercase;
	}

	.jr-cosvox-shop__eyebrow {
		margin-bottom: 10px;
	}

	body .jr-cosvox-shop__title {
		margin: 0 0 15px;
		color: #111;
		text-transform: uppercase;
	}

	.jr-cosvox-shop__intro {
		max-width: 700px;
		margin: 0 auto;
		color: #555;
		font-size: 17px;
		line-height: 1.7;
	}

	.jr-cosvox-shop__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.jr-cosvox-shop-card {
		display: flex;
		min-width: 0;
		overflow: hidden;
		border: 1px solid #e4e4e4;
		background: #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
		flex-direction: column;
		transition: transform .24s ease, box-shadow .24s ease;
	}

	.jr-cosvox-shop-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
	}

	.jr-cosvox-shop-card__media {
		display: grid;
		min-height: 300px;
		padding: 24px;
		background: #fff;
		place-items: center;
		position: relative;
	}

	/**
	* Display a promotional label over selected COSVOX shop-card images.
	*
	* The badge is rendered only when the card data contains a non-empty
	* badge value.
	*
	* @package    Jedi_Theme
	* @subpackage Cosvox_Hub
	*/
	.jr-cosvox-shop-card__badge {
		position: absolute;
		z-index: 2;
		top: 8px;
		right: 8px;
		display: inline-flex;
		min-height: 30px;
		padding: 7px 12px;
		border: 1px solid rgba(236, 160, 31, 0.45);
		border-radius: 999px;
		background: #c90000;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
		color: #fff;
		font-size: 10px;
		font-weight: 900;
		letter-spacing: 0.1em;
		line-height: 1;
		text-transform: uppercase;
		align-items: center;
		justify-content: center;
	}

	.jr-cosvox-shop-card__image {
		display: block;
		width: 100%;
		height: 252px;
		margin: 0;
		object-fit: contain;
	}

	.jr-cosvox-shop-card__content {
		display: flex;
		padding: 24px;
		border-top: 1px solid #ededed;
		flex: 1;
		flex-direction: column;
	}

	.jr-cosvox-shop-card__eyebrow {
		margin-bottom: 9px;
	}

	body .jr-cosvox-shop-card__title {
		margin: 0 0 12px;
		font-size: 21px;
		line-height: 1.25;
	}

	.jr-cosvox-shop-card__title a {
		color: #111;
		text-decoration: none;
	}

	.jr-cosvox-shop-card__description {
		margin: 0 0 18px;
		color: #666;
		font-size: 14px;
		line-height: 1.65;
	}

	.jr-cosvox-shop-card__price,
	.jr-cosvox-shop-card__meta {
		margin: auto 0 18px;
		color: #111;
		font-size: 19px;
		font-weight: 800;
		line-height: 1.3;
	}

	.jr-cosvox-shop-card__price del {
		margin-right: 6px;
		color: #777;
		font-size: .82em;
		font-weight: 500;
	}

	.jr-cosvox-shop .jr-cosvox-shop-card__button,
	.jr-cosvox-shop .jr-cosvox-shop-card__button:hover,
	.jr-cosvox-shop .jr-cosvox-shop-card__button,
	.jr-cosvox-shop .jr-cosvox-shop__final-button:hover {
		display: inline-flex;
		min-height: 48px;
		padding: 13px 18px;
		text-align: center;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: #000;
	}

	.jr-cosvox-shop-card__button {
		width: 100%;
	}

	.jr-cosvox-shop__final-actions {
		display: flex;
		margin-top: 34px;
		gap: 12px;
		flex-wrap: wrap;
		justify-content: center;
	}

	.jr-cosvox-shop__final-button {
		min-width: 220px;
	}

	.jr-cosvox-shop__final-button--secondary {
		border: 1px solid #111 !important;
		background: #fff !important;
		color: #111 !important;
	}

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

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

	@media (max-width: 620px) {
		.jr-cosvox-shop {
			padding: 48px 0 54px;
		}

		.jr-cosvox-shop__header {
			margin-bottom: 26px;
			text-align: left;
		}

		.jr-cosvox-shop__grid {
			grid-template-columns: 1fr;
		}

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

		.jr-cosvox-shop-card__media {
			min-height: 260px;
			padding: 20px;
		}

		.jr-cosvox-shop-card__image {
			height: 220px;
		}

		.jr-cosvox-shop__final-actions {
			align-items: stretch;
			flex-direction: column;
		}

		.jr-cosvox-shop__final-button {
			width: 100%;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.jr-cosvox-shop-card {
			transition: none;
		}

		.jr-cosvox-shop-card:hover {
			transform: none;
		}
	}

	/**
	* COSVOX frequently asked questions.
	*
	* The layout recreates the narrow Elementor accordion used elsewhere on the
	* site while using native details and summary elements.
	*
	* @package    Jedi_Theme
	* @subpackage Cosvox_Hub
	*/
	.jr-cosvox-faq {
		width: min(100%, 888px);
		margin: 40px auto;
	}

	.jr-cosvox-faq__header {
		margin: 0 0 30px;
		text-align: center;
	}

	body .jr-cosvox-faq__title {
		margin: 0;
		color: #222;
		font-size: clamp(28px, 3vw, 32px);
		font-weight: 700;
		line-height: 1.25;
	}

	/**
	* COSVOX FAQ accordion items.
	*
	* JavaScript animates each details element between the summary height and its
	* complete expanded height. The answer also fades and moves slightly to make
	* the interaction feel natural rather than abruptly appearing.
	*
	* @package    Jedi_Theme
	* @subpackage Cosvox_Hub
	*/
	.jr-cosvox-faq__item {
		box-sizing: border-box;
		margin: 0;
		border-bottom: 1px solid #d1d5d8;
	}

	/**
	* Prevent content from escaping while the details height is animated.
	*/
	.jr-cosvox-faq__item.is-animating {
		overflow: hidden;
	}

	.jr-cosvox-faq__question {
		position: relative;
		display: flex;
		width: 100%;
		min-height: 57px;
		padding: 16px 42px 16px 0;
		font-size: 16px;
		font-weight: 400;
		line-height: 1.5;
		list-style: none;
		cursor: pointer;
		align-items: center;
	}

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

	.jr-cosvox-faq__question::after {
		position: absolute;
		top: 50%;
		right: 3px;
		width: 9px;
		height: 9px;
		border-right: 2px solid #222;
		border-bottom: 2px solid #222;
		content: "";
		transform: translateY(-65%) rotate(45deg);
		transition:
			transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	/**
	* Use the JavaScript-controlled state instead of the native open attribute.
	*
	* The native open attribute remains present during the closing animation,
	* allowing the answer to remain visible until the movement has completed.
	*/
	.jr-cosvox-faq__item.is-expanded .jr-cosvox-faq__question::after {
		transform: translateY(-25%) rotate(225deg);
	}

	.jr-cosvox-faq__question:focus-visible {
		outline: 2px solid #111;
		outline-offset: 4px;
	}

	.jr-cosvox-faq__answer {
		padding: 7px 14px 14px;
		font-size: 16px;
		line-height: 1.7;
		opacity: 0;
		transform: translateY(-6px);
		transition:
			opacity 220ms ease,
			transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.jr-cosvox-faq__item.is-expanded .jr-cosvox-faq__answer {
		opacity: 1;
		transform: translateY(0);
	}

	.jr-cosvox-faq__answer p {
		margin: 0;
	}

	/**
	* COSVOX closing resource-centre content.
	*
	* This recreates the bordered long-form category description used by the
	* Shoptimizer product-category layout.
	*
	* @package    Jedi_Theme
	* @subpackage Cosvox_Hub
	*/
	.jr-cosvox-closing {
		width: min(100%, 1170px);
		margin: 0 auto 72px;
		padding: 28px 24px 10px;
		border: 1px solid #d4d4d4;
		background: #fff;
		color: #4d4d4d;
	}

	body .jr-cosvox-closing__title {
		margin: 0 0 20px;
		color: #222;
		font-size: clamp(24px, 2.5vw, 30px);
		line-height: 1.3;
	}

	.jr-cosvox-closing__content p {
		margin: 0 0 20px;
		font-size: 16px;
		line-height: 1.45;
	}

	@media (max-width: 620px) {
		.jr-cosvox-faq {
			margin: 54px auto;
		}

		.jr-cosvox-faq__header {
			margin-bottom: 22px;
			text-align: left;
		}

		.jr-cosvox-faq__question {
			padding-right: 36px;
			font-size: 15px;
		}

		.jr-cosvox-faq__answer {
			padding: 6px 30px 16px 0;
			font-size: 15px;
		}

		.jr-cosvox-closing {
			margin-bottom: 54px;
			padding: 22px 18px 4px;
		}

		.jr-cosvox-closing__content p {
			font-size: 15px;
			line-height: 1.6;
		}
	}

	/**
	* Remove FAQ movement when reduced motion is requested.
	*
	* @package    Jedi_Theme
	* @subpackage Cosvox_Hub
	*/
	@media (prefers-reduced-motion: reduce) {

		.jr-cosvox-faq__question::after,
		.jr-cosvox-faq__answer {
			transition: none;
		}
	}