/**
 * Jedi-Robe storefront homepage prototype.
 *
 * Provides the PHP-first homepage layout used to validate the redesigned
 * storefront before rebuilding the approved composition in Elementor.
 * The visual language follows the established Jedi-Robe dark-commerce system:
 * dark technical surfaces, restrained green diagnostics, cool blue depth and
 * gold reserved for the primary commercial action.
 *
 * Responsive layout:
 * - Desktop: full-bleed campaign hero with integrated diagnostic costume stage.
 * - Tablet <= 992px: compact two-column hero with the costume stage retained.
 * - Mobile <= 767px: one layered hero composition with the costume still visible.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      1.4.0
 */

body.jr-dark-commerce .jr-home .jr-page-shell {
    max-width: 1600px;
}

/* ==========================================================================
   Homepage tokens / shell
   ========================================================================== */

body.jr-dark-commerce .jr-home {
	--jr-home-gold: #e2a447;
	--jr-home-gold-light: #f4c66b;
	--jr-home-panel: rgba(7, 13, 21, 0.78);
	--jr-home-panel-strong: rgba(5, 10, 16, 0.95);
	--jr-home-line: rgba(152, 169, 192, 0.18);
	--jr-home-line-strong: rgba(152, 169, 192, 0.3);

	position: relative;
	isolation: isolate;
	width: 100%;
	margin: 0;
	padding: 0;
}

body.jr-dark-commerce .jr-home-shell {
	width: min(
		calc(100% - (var(--jr-page-gutter, clamp(1rem, 3vw, 2.5rem)) * 2)),
		100rem
	);
	margin-inline: auto;
}


/* ==========================================================================
   Shared homepage section heading
   ========================================================================== */

body.jr-dark-commerce .jr-home-section {
	position: relative;
	width: 100%;
	padding-block: clamp(4rem, 4.8vw, 5.25rem);
	border-top: 1px solid rgba(69, 217, 107, 0.08);
}

body.jr-dark-commerce .jr-home-section__header {
	max-width: 52rem;
	margin: 0 0 clamp(1.8rem, 2.5vw, 2.6rem);
}

body.jr-dark-commerce .jr-home-section__header--compact {
	max-width: 64rem;
}

body.jr-dark-commerce .jr-home-section__header--split {
	display: flex;
	max-width: none;
	align-items: end;
	justify-content: space-between;
	gap: 2rem;
}

body.jr-dark-commerce .jr-home-section__header h2 {
	margin: 0;
	color: var(--jr-text);
	font-size: clamp(2rem, 3.4vw, 3.65rem);
	font-weight: 780;
	letter-spacing: -0.035em;
	line-height: 1;
	text-wrap: balance;
	padding-top: 10px;
}

body.jr-dark-commerce .jr-home-section__header > p:last-child,
body.jr-dark-commerce .jr-home-section__header > div > p:last-child {
	max-width: 48rem;
	margin: 1rem 0 0;
	font-size: clamp(0.98rem, 0.95rem + 0.12vw, 1.08rem);
	line-height: 1.7;
}

body.jr-dark-commerce .jr-home-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.1rem;
	color: var(--jr-green-light);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	line-height: 1.25;
	text-transform: uppercase;
}

body.jr-dark-commerce .jr-home-eyebrow::before {
	width: 1.8rem;
	height: 1px;
	flex: 0 0 1.8rem;
	background: linear-gradient(90deg, var(--jr-green-light), transparent);
	content: "";
}

body.jr-dark-commerce .jr-home-text-link {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.65rem;
	padding-bottom: 0.2rem;
	border-bottom: 1px solid rgba(69, 217, 107, 0.45);
	color: var(--jr-text);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.075em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-color 180ms ease, color 180ms ease;
}


/* ==========================================================================
   Homepage hero banner
   ========================================================================== */

/**
 * Jedi-Robe cinematic storefront hero.
 *
 * The campaign side is intentionally open and oversized rather than boxed.
 * Layered directional light, a sparse star field and fine technical traces
 * extend the established dark-commerce visual system across the whole banner.
 * On wide screens the headline is allowed to cross the grid boundary slightly
 * so the campaign and diagnostic costume stage read as one composition.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      1.5.0
 */
body.jr-dark-commerce .jr-home-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;

	width: 100%;
	min-height:
		clamp(
			40rem,
			72svh,
			52rem
		);

	border-bottom: 1px solid rgba(69, 217, 107, 0.14);

	background:
		radial-gradient(
			ellipse at 17% 42%,
			rgba(255, 255, 255, 0.045),
			transparent 28rem
		),
		radial-gradient(
			ellipse at 74% 50%,
			rgba(16, 58, 82, 0.21),
			transparent 32rem
		),
		radial-gradient(
			ellipse at 23% 78%,
			rgba(13, 75, 48, 0.075),
			transparent 27rem
		),
		linear-gradient(
			106deg,
			#010204 0%,
			#020508 43%,
			#030911 100%
		);
}

/**
 * Broad directional light crossing the campaign half of the hero.
 *
 * This is deliberately angular rather than circular so it reads as a distant
 * technical light source instead of another UI panel or decorative ring.
 */
body.jr-dark-commerce .jr-home-hero::before {
	position: absolute;
	top: -20%;
	bottom: -14%;
	left: -10%;
	z-index: 0;

	width: 73%;

	background:
		linear-gradient(
			111deg,
			transparent 0%,
			transparent 30%,
			rgba(255, 255, 255, 0.032) 42%,
			rgba(255, 255, 255, 0.012) 53%,
			transparent 67%
		),
		linear-gradient(
			90deg,
			rgba(69, 217, 107, 0.025),
			transparent 62%
		);

	content: "";

	transform: skewX(-8deg);

	pointer-events: none;
}


/* ==========================================================================
   Space field
   ========================================================================== */

body.jr-dark-commerce .jr-home-hero__space {
	position: absolute;
	inset: -4rem;
	z-index: 0;

	background-image:
		radial-gradient(circle, rgba(241, 246, 250, 0.46) 0 1px, transparent 1.2px),
		radial-gradient(circle, rgba(111, 203, 255, 0.23) 0 1px, transparent 1.15px),
		radial-gradient(circle, rgba(69, 217, 107, 0.15) 0 1px, transparent 1.1px);
	background-position:
		17px 29px,
		91px 133px,
		146px 61px;
	background-size:
		183px 183px,
		257px 257px,
		331px 331px;

	opacity: 0.36;

	animation:
		jr-home-space-drift
		90s
		linear
		infinite;

	pointer-events: none;
}

/**
 * Dark lower fade that grounds both halves of the hero into the page.
 */
body.jr-dark-commerce .jr-home-hero::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;

	height: 11rem;

	background:
		linear-gradient(
			180deg,
			transparent,
			rgba(1, 3, 5, 0.79)
		);

	content: "";

	pointer-events: none;
}


/* ==========================================================================
   Hero layout
   ========================================================================== */

body.jr-dark-commerce .jr-home-hero__inner {
	position: relative;
	z-index: 2;

	display: grid;

	width:
		min(
			calc(
				100%
				-
				(
					var(--jr-page-gutter, clamp(1rem, 3vw, 2.5rem))
					*
					2
				)
			),
			112rem
		);
	min-height: inherit;

	grid-template-columns:
		minmax(0, 0.94fr)
		minmax(31rem, 1.06fr);

	align-items: stretch;
	gap: clamp(0.5rem, 1.1vw, 1.4rem);

	margin-inline: auto;
	padding-block:
		clamp(
			2.25rem,
			4.5vh,
			4rem
		);
}


/* ==========================================================================
   Campaign heading and actions
   ========================================================================== */

/**
 * Homepage transformation campaign.
 *
 * Keeps the site's existing typeface and creates hierarchy through scale,
 * spacing, alignment and technical light traces rather than introducing a new
 * display font. The campaign can overlap the diagnostic side only where there
 * is enough desktop space to support it safely.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      1.6.0
 */
body.jr-dark-commerce .jr-home-hero__content {
	position: relative;
	z-index: 6;

	display: flex;
	min-width: 0;
	align-items: flex-start;
	justify-content: center;

	padding-block: clamp(1rem, 3vh, 2.25rem);
}

body.jr-dark-commerce .jr-home-hero__campaign {
	position: relative;
	z-index: 2;

	width: min(100%, 48rem);
}

/**
 * Static hyperspace / targeting traces behind the campaign message.
 *
 * The layer is deliberately low contrast so the right-side diagnostic stage
 * remains the detailed focal object while both halves still share one sci-fi
 * environment.
 */
body.jr-dark-commerce .jr-home-hero__content::before {
	position: absolute;
	top: -5rem;
	right: -9rem;
	bottom: -5rem;
	left: -6rem;
	z-index: -1;

	background:
		linear-gradient(
			118deg,
			transparent 0 27%,
			rgba(255, 255, 255, 0.035) 27.1%,
			transparent 27.25% 100%
		),
		linear-gradient(
			126deg,
			transparent 0 43%,
			rgba(255, 255, 255, 0.024) 43.1%,
			transparent 43.24% 100%
		),
		linear-gradient(
			134deg,
			transparent 0 58%,
			rgba(69, 217, 107, 0.025) 58.1%,
			transparent 58.24% 100%
		),
		repeating-linear-gradient(
			90deg,
			transparent 0 5.75rem,
			rgba(255, 255, 255, 0.018) 5.75rem calc(5.75rem + 1px)
		);

	content: "";

	mask-image:
		linear-gradient(
			90deg,
			#000 0%,
			#000 62%,
			transparent 94%
		);

	opacity: 0.9;
	pointer-events: none;
}

/**
 * Neutral hero eyebrow with one restrained green system marker.
 */
body.jr-dark-commerce .jr-home-hero__eyebrow {
	position: relative;
	z-index: 3;

	margin: 0 0 clamp(1.15rem, 1.8vw, 1.55rem);

	color: var(--jr-green-light);

	font-size: clamp(0.66rem, 0.63rem + 0.1vw, 0.75rem);
	font-weight: 800;
	letter-spacing: 0.21em;
}

body.jr-dark-commerce .jr-home-hero__eyebrow::before {
	width: 3.5rem;
	flex-basis: 3.5rem;

	background:
		linear-gradient(
			90deg,
			var(--jr-green-light),
			transparent
		);
}

/**
 * Campaign heading hierarchy using the site's existing font family.
 *
 * "Time To" behaves as the setup line; "Transform" is the hero impact line.
 * The visual distinction comes from scale rather than a separate typeface.
 */
body.jr-dark-commerce .jr-home-hero__title {
	position: relative;
	z-index: 4;

	width: max-content;
	max-width: none;
	margin: 0;

	color: #f7f9fb;

	font-size: clamp(6.2rem, 8.35vw, 10.15rem);
	font-weight: 860;
	letter-spacing: -0.068em;
	line-height: 0.78;
	text-transform: uppercase;

	text-shadow:
		0 1.5rem 4rem rgba(0, 0, 0, 0.46),
		0 0 2.6rem rgba(255, 255, 255, 0.022);
}

body.jr-dark-commerce .jr-home-hero__title-line {
	display: block;
	white-space: nowrap;
}

body.jr-dark-commerce .jr-home-hero__title-line--lead {
	position: relative;

	width: fit-content;
	padding-right: clamp(4rem, 6vw, 7rem);

	font-size: 0.57em;
	font-weight: 790;
	letter-spacing: 0.018em;
	line-height: 0.95;
}

/**
 * Thin targeting rail following the setup line into the impact word.
 */
body.jr-dark-commerce .jr-home-hero__title-line--lead::after {
	position: absolute;
	top: 52%;
	right: 0;

	width: clamp(2.6rem, 4.8vw, 5.2rem);
	height: 1px;

	background:
		linear-gradient(
			90deg,
			rgba(235, 241, 245, 0.48),
			rgba(69, 217, 107, 0.28),
			transparent
		);

	content: "";
}

/**
 * Hero impact-line tracking.
 *
 * Keeps the TRANSFORM line compact and cinematic while relaxing the overly
 * tight tracking inherited from the parent hero heading. The explicit value
 * also keeps the impact line consistent across desktop, tablet and mobile.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      1.9.6
 */
body.jr-dark-commerce .jr-home-hero__title-line--impact {
	margin-top: 0.075em;

	font-size: 0.84em;
	letter-spacing: -0.035em;
	line-height: 0.77;
}

/**
 * Supporting line gives the campaign immediate ecommerce context without
 * turning the hero into a paragraph-heavy landing page.
 */
body.jr-dark-commerce .jr-home-hero__lede {
	max-width: 33rem;
	margin: clamp(1.55rem, 2.5vw, 2.1rem) 0 0;

	font-size: clamp(0.94rem, 0.9rem + 0.15vw, 1.05rem);
	font-weight: 450;
	line-height: 1.68;
	color: var(--jr-text);
}

/**
 * Allow only the campaign column to cross into the stage on wide desktops.
 */
@media (min-width: 1440px) {

	body.jr-dark-commerce .jr-home-hero__content {
		margin-right: -3.5rem;
	}
}

@media (min-width: 1600px) {

	body.jr-dark-commerce .jr-home-hero__content {
		margin-right: -5.5rem;
	}
}

/* ==========================================================================
   Hero actions
   ========================================================================== */

/**
 * Reuse the canonical Jedi-Robe editorial button component directly.
 *
 * Visual styling is intentionally NOT duplicated in this homepage stylesheet.
 * The hero markup uses `.jr-actions`, `.jr-button-primary`,
 * `.jr-button-secondary` and `.elementor-button`, so the existing shared
 * dark-commerce component remains the single source of truth for button
 * colour, borders, typography, hover, active and focus states.
 *
 * This block owns hero placement only.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      1.9.3
 */
body.jr-dark-commerce .jr-actions.jr-home-hero__actions {
	position: relative;
	z-index: 5;

	margin-top: clamp(1.75rem, 3vw, 2.35rem);
}

/**
 * Keep the shared button wrappers content-sized on wide screens.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
body.jr-dark-commerce .jr-actions.jr-home-hero__actions .jr-home-hero__action {
	flex: 0 0 auto;
}

/**
 * Homepage hero heritage rail.
 *
 * Turns the previous low-priority signature into a deliberate provenance row.
 * The two trust statements sit above one restrained diagnostic signal, giving
 * EST. 2008 and London / worldwide reach a clear purpose without introducing
 * another card or competing with the primary commerce actions.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      1.9.5
 */
body.jr-dark-commerce .jr-home-hero__signature {
	display: grid;
	width: min(100%, 32rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"heritage-left heritage-right"
		"heritage-signal heritage-signal";
	align-items: center;
	column-gap: 1rem;
	row-gap: 0.58rem;

	margin-top: clamp(1.35rem, 2vw, 1.8rem);

	color: rgba(185, 198, 209, 0.62);

	font-family: "JetBrains Mono", monospace;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.105em;
	line-height: 1.15;
	text-transform: uppercase;
}

/**
 * Keep the two provenance statements balanced above the technical signal.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
body.jr-dark-commerce .jr-home-hero__signature span {
	display: block;
	min-width: 0;
	white-space: nowrap;
}

body.jr-dark-commerce .jr-home-hero__signature span:first-child {
	grid-area: heritage-left;
	justify-self: start;
	text-align: left;
}

body.jr-dark-commerce .jr-home-hero__signature span:last-child {
	grid-area: heritage-right;
	justify-self: end;
	text-align: right;
}

/**
 * Technical heritage signal beneath the trust statements.
 *
 * The line fades at both edges and uses one restrained green system node in
 * the centre so it belongs to the diagnostic visual language without reading
 * like a progress bar or another interactive control.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
body.jr-dark-commerce .jr-home-hero__signature i {
	position: relative;
	grid-area: heritage-signal;
	display: block;
	width: 100%;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(152, 169, 192, 0.16) 9%,
			rgba(69, 217, 107, 0.32) 44%,
			rgba(69, 217, 107, 0.32) 56%,
			rgba(152, 169, 192, 0.16) 91%,
			transparent 100%
		);
}

/**
 * Central heritage node.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
body.jr-dark-commerce .jr-home-hero__signature i::after {
	position: absolute;
	top: 50%;
	left: 50%;

	width: 0.28rem;
	height: 0.28rem;

	background: var(--jr-green-light);
	box-shadow: 0 0 0.48rem rgba(69, 217, 107, 0.42);
	content: "";

	transform:
		translate(-50%, -50%)
		rotate(45deg);
}


/* ==========================================================================
   Open diagnostic costume chamber
   ========================================================================== */

/**
 * Open diagnostic costume chamber.
 *
 * Figure geometry is controlled with local custom properties so desktop,
 * laptop, tablet and mobile can resize the costume without rewriting the
 * scanner or transition logic. The chamber lighting is intentionally brighter
 * than the surrounding space while remaining transparent and unboxed.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      1.8.0
 */
body.jr-dark-commerce .jr-home-costume-stage {
	--jr-home-passive-scan-duration: 3000ms;
	--jr-home-scan-duration: 3000ms;
	--jr-home-passive-passes: 1;
	--jr-home-scan-start: 4%;
	--jr-home-scan-end: 94%;
	--jr-home-figure-width: 76%;
	--jr-home-figure-height: 96%;
	--jr-home-figure-left: 50%;

	position: relative;
	isolation: isolate;
	overflow: hidden;

	min-width: 0;
	min-height:
		clamp(
			35rem,
			63vh,
			46rem
		);

	background: transparent;
}

/**
 * Jedi-Robe seamless diagnostic chamber illumination.
 *
 * Keeps the brighter cyan chamber light while vertically feathering the
 * illumination before it reaches the stage boundaries. The mask applies only
 * to this atmospheric pseudo-element and does not affect the costume, scanner,
 * telemetry or controls.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      1.8.3
 */
body.jr-dark-commerce .jr-home-costume-stage::before {
	position: absolute;
	inset: 0;
	z-index: 0;

	background:
		radial-gradient(
			ellipse 82% 72% at 51% 47%,
			rgba(24, 91, 122, 0.34) 0%,
			rgba(17, 70, 96, 0.28) 24%,
			rgba(12, 52, 73, 0.21) 42%,
			rgba(9, 39, 56, 0.13) 58%,
			rgba(7, 28, 41, 0.055) 70%,
			transparent 84%
		),
		radial-gradient(
			ellipse 96% 84% at 52% 50%,
			rgba(111, 203, 255, 0.085) 0%,
			rgba(20, 62, 82, 0.10) 38%,
			rgba(8, 34, 49, 0.055) 58%,
			transparent 84%
		),
		radial-gradient(
			ellipse 68% 36% at 51% 73%,
			rgba(69, 217, 107, 0.045) 0%,
			rgba(27, 92, 65, 0.028) 42%,
			transparent 78%
		);

	content: "";
	opacity: 1;
	filter: blur(1.2rem);

	-webkit-mask-image:
		linear-gradient(
			180deg,
			transparent 0%,
			#000 10%,
			#000 90%,
			transparent 100%
		);

	mask-image:
		linear-gradient(
			180deg,
			transparent 0%,
			#000 10%,
			#000 90%,
			transparent 100%
		);

	pointer-events: none;
}


/* ==========================================================================
   Diagnostic grid / datum system
   ========================================================================== */

body.jr-dark-commerce .jr-home-costume-stage__grid {
	position: absolute;
	inset: 7% 5% 11%;
	z-index: 0;

	background:
		linear-gradient(
			rgba(111, 203, 255, 0.042) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(111, 203, 255, 0.036) 1px,
			transparent 1px
		);
	background-size: 3rem 3rem;

	opacity: 0.72;

	mask-image:
		linear-gradient(
			90deg,
			transparent,
			#000 13%,
			#000 87%,
			transparent
		);

	pointer-events: none;
}

body.jr-dark-commerce .jr-home-costume-stage__datum {
	position: absolute;
	top: 7%;
	bottom: 12%;
	left: 50%;
	z-index: 1;

	width: 1px;

	background:
		linear-gradient(
			180deg,
			transparent,
			rgba(111, 203, 255, 0.2) 15%,
			rgba(69, 217, 107, 0.27) 50%,
			rgba(111, 203, 255, 0.18) 84%,
			transparent
		);

	opacity: 0.76;

	pointer-events: none;
}

body.jr-dark-commerce .jr-home-costume-stage__rail {
	position: absolute;
	top: 15%;
	bottom: 17%;
	z-index: 2;

	width: 2.4rem;

	background:
		repeating-linear-gradient(
			180deg,
			rgba(111, 203, 255, 0.3) 0 1px,
			transparent 1px 1.15rem
		);

	opacity: 0.48;

	pointer-events: none;
}

body.jr-dark-commerce .jr-home-costume-stage__rail--left {
	left: 4%;

	border-left: 1px solid rgba(111, 203, 255, 0.18);
}

body.jr-dark-commerce .jr-home-costume-stage__rail--right {
	right: 4%;

	border-right: 1px solid rgba(69, 217, 107, 0.18);
}

body.jr-dark-commerce .jr-home-costume-stage__telemetry {
	position: absolute;
	z-index: 2;

	display: flex;
	flex-direction: column;
	gap: 0.45rem;

	color: rgba(111, 203, 255, 0.42);

	font-family: "JetBrains Mono", monospace;
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.15;

	text-transform: uppercase;

	pointer-events: none;
}

body.jr-dark-commerce .jr-home-costume-stage__telemetry--left {
	top: 22%;
	left: 8%;
}

body.jr-dark-commerce .jr-home-costume-stage__telemetry--right {
	top: 16%;
	right: 8%;

	align-items: flex-end;
	color: rgba(69, 217, 107, 0.44);

	text-align: right;
}


/* ==========================================================================
   Live biometric body
   ========================================================================== */

body.jr-dark-commerce .jr-home-costume-stage__diagnostic {
	position: absolute;
	top: 4%;
	bottom: 12%;
	left: 54%;
	z-index: 2;

	width: 68%;

	opacity: 0.21;

	transform:
		translateX(-50%)
		translateY(0)
		scale(1.07);
	transform-origin: 50% 100%;

	animation:
		jr-home-diagnostic-float
		5.5s
		ease-in-out
		infinite,
		jr-home-diagnostic-pulse
		2.2s
		ease-in-out
		infinite;

	pointer-events: none;

	will-change: transform, opacity, filter;
}

body.jr-dark-commerce .jr-home-costume-stage__diagnostic::before {
	position: absolute;
	inset: 0;
	z-index: 2;

	background:
		repeating-linear-gradient(
			180deg,
			rgba(69, 217, 107, 0.09) 0 1px,
			transparent 1px 4px
		);

	content: "";

	opacity: 0.6;

	mask-image:
		linear-gradient(
			90deg,
			transparent 14%,
			#000 29%,
			#000 71%,
			transparent 86%
		);

	pointer-events: none;
}

body.jr-dark-commerce .jr-home-costume-stage__diagnostic::after {
	position: absolute;
	top: 0;
	right: 14%;
	left: 14%;
	z-index: 3;

	height: 13%;

	background:
		linear-gradient(
			180deg,
			transparent,
			rgba(69, 217, 107, 0.12),
			rgba(111, 203, 255, 0.06),
			transparent
		);

	content: "";

	filter: blur(0.3rem);

	animation:
		jr-home-body-scan
		4.1s
		linear
		infinite;

	pointer-events: none;
}

body.jr-dark-commerce .jr-home-costume-stage__diagnostic img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;
	object-position: 50% 100%;

	filter:
		brightness(0.94)
		contrast(1.1)
		drop-shadow(0 0 1.25rem rgba(69, 217, 107, 0.25));
}


/* ==========================================================================
   Costume viewport / figure
   ========================================================================== */

body.jr-dark-commerce .jr-home-costume-stage__viewport {
	position: absolute;
	inset: 3% 4% 5.4rem;
	z-index: 4;

	overflow: hidden;

	/*
	 * Preserve normal pan and pinch zoom while reserving double tap on the
	 * scanner viewport for the collection-navigation gesture.
	 */
	touch-action: pan-x pan-y pinch-zoom;
}

body.jr-dark-commerce .jr-home-costume-stage__scan-field {
	position: absolute;
	top: 4%;
	right: 17%;
	bottom: 3%;
	left: 17%;
	z-index: 0;

	pointer-events: none;
}

body.jr-dark-commerce .jr-home-costume-stage__scan-field::before,
body.jr-dark-commerce .jr-home-costume-stage__scan-field::after {
	position: absolute;
	inset: 0;
	content: "";
	pointer-events: none;
	opacity: 0.38;
}

body.jr-dark-commerce .jr-home-costume-stage__scan-field::before {
	left: 12%;
	right: 12%;

	background:
		linear-gradient(
			180deg,
			rgba(111, 203, 255, 0.02),
			rgba(111, 203, 255, 0.08) 16%,
			rgba(69, 217, 107, 0.06) 48%,
			rgba(111, 203, 255, 0.045) 76%,
			transparent
		);

	opacity: 0.18;
	filter: blur(0.55rem);
}

body.jr-dark-commerce .jr-home-costume-stage__scan-field::after {
	inset: 8% 9% 15%;

	background:
		linear-gradient(rgba(111, 203, 255, 0.22), rgba(111, 203, 255, 0.22)) left top / 1px 100% no-repeat,
		linear-gradient(rgba(69, 217, 107, 0.22), rgba(69, 217, 107, 0.22)) right top / 1px 100% no-repeat,
		linear-gradient(90deg, rgba(111, 203, 255, 0.75), transparent 42%) left top / 3.75rem 1px no-repeat,
		linear-gradient(90deg, rgba(111, 203, 255, 0.75), transparent 42%) left bottom / 3.75rem 1px no-repeat,
		linear-gradient(270deg, rgba(69, 217, 107, 0.8), transparent 42%) right top / 3.75rem 1px no-repeat,
		linear-gradient(270deg, rgba(69, 217, 107, 0.8), transparent 42%) right bottom / 3.75rem 1px no-repeat;

	opacity: 0.36;
	transition: opacity 180ms ease;
}

/**
 * Give the costume itself a restrained holographic texture.
 *
 * The mask introduces extremely light horizontal signal bands while the cool
 * drop shadow separates the transparent artwork from the dark chamber. The
 * effect is intentionally subtle so the costume still reads as a real product
 * rather than a bright neon projection.
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce .jr-home-costume-stage__figure {
	position: absolute;
	top: 2%;
	bottom: 0;
	left: var(--jr-home-figure-left);
	z-index: 5;

	display: block;

	width: var(--jr-home-figure-width);
	height: var(--jr-home-figure-height);

	margin: 0;

	object-fit: contain;
	object-position: 50% 100%;

	-webkit-mask-image:
		repeating-linear-gradient(
			180deg,
			#000 0 3px,
			rgba(0, 0, 0, 0.94) 3px 4px
		);
	mask-image:
		repeating-linear-gradient(
			180deg,
			#000 0 3px,
			rgba(0, 0, 0, 0.94) 3px 4px
		);

	filter:
		brightness(0.97)
		contrast(1.035)
		saturate(0.92)
		drop-shadow(0 1.8rem 1.8rem rgba(0, 0, 0, 0.58))
		drop-shadow(0 0 0.42rem rgba(111, 203, 255, 0.1));

	transform:
		translateX(-50%)
		translateY(0)
		scale(1);
	transform-origin: 50% 100%;

	will-change: transform, opacity, clip-path;
}

body.jr-dark-commerce .jr-home-costume-stage__figure--current {
	clip-path: inset(0 0 0 0);
	opacity: 0.985;

	animation:
		jr-home-costume-idle
		5.8s
		ease-in-out
		infinite,
		jr-home-costume-hologram-signal
		6.4s
		linear
		infinite;
}

body.jr-dark-commerce .jr-home-costume-stage__figure--next {
	clip-path: inset(0 0 100% 0);
	opacity: 1;
}


/* ==========================================================================
   Passive scanner / costume transfer scanner
   ========================================================================== */

body.jr-dark-commerce .jr-home-costume-stage__passive-scan,
body.jr-dark-commerce .jr-home-costume-stage__transition-scan {
	position: absolute;
	top: 4%;
	right: 11%;
	left: 11%;
	z-index: 9;

	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(69, 217, 107, 0.16) 16%,
			rgba(69, 217, 107, 0.72) 50%,
			rgba(111, 203, 255, 0.24) 83%,
			transparent
		);

	box-shadow:
		0 0 0.65rem rgba(69, 217, 107, 0.24);

	pointer-events: none;
}

body.jr-dark-commerce .jr-home-costume-stage__passive-scan {
	opacity: 0;
	visibility: hidden;
	animation: none;
}

/**
 * Run exactly one passive sweep before handing control to the main scanner.
 * The sequence is finite so an extra passive scan can never flash at the top.
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce
	.jr-home-costume-stage.is-passive-scanning
	.jr-home-costume-stage__passive-scan {
	visibility: visible;

	animation-name: jr-home-passive-scan;
	animation-duration: var(--jr-home-passive-scan-duration);
	animation-timing-function: linear;
	animation-iteration-count: var(--jr-home-passive-passes);
	animation-fill-mode: both;
}

/**
 * Pause every visible scanner layer while the visitor is actively holding the
 * mobile viewport or hovering the desktop stage. The transfer animation and
 * costume reveal therefore freeze at the same visual frame as the passive beam.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      2.9.0
 */
body.jr-dark-commerce
	.jr-home-costume-stage.is-autoplay-paused
	.jr-home-costume-stage__passive-scan,
body.jr-dark-commerce
	.jr-home-costume-stage.is-autoplay-paused
	.jr-home-costume-stage__transition-scan,
body.jr-dark-commerce
	.jr-home-costume-stage.is-autoplay-paused
	.jr-home-costume-stage__scan-field::before,
body.jr-dark-commerce
	.jr-home-costume-stage.is-autoplay-paused
	.jr-home-costume-stage__scan-field::after,
body.jr-dark-commerce
	.jr-home-costume-stage.is-autoplay-paused
	.jr-home-costume-stage__figure--current,
body.jr-dark-commerce
	.jr-home-costume-stage.is-autoplay-paused
	.jr-home-costume-stage__figure--next {
	animation-play-state: paused;
}

/**
 * Main costume-transfer scanner.
 *
 * Keeps the same path and speed as the passive scanner but removes the bright
 * white hotspot and oversized bloom. The transfer is stronger than a passive
 * sweep through colour and a short trailing field rather than raw brightness.
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce .jr-home-costume-stage__transition-scan {
	z-index: 12;

	height: 1px;

	opacity: 0;
	visibility: hidden;

	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(111, 203, 255, 0.12) 10%,
			rgba(111, 203, 255, 0.5) 34%,
			rgba(69, 217, 107, 0.62) 52%,
			rgba(111, 203, 255, 0.38) 72%,
			rgba(69, 217, 107, 0.12) 90%,
			transparent 100%
		);

	box-shadow:
		0 0 0.34rem rgba(69, 217, 107, 0.24),
		0 0 0.8rem rgba(111, 203, 255, 0.1);
}

/**
 * Jedi-Robe transfer scanner static white-light effects.
 *
 * Creates a soft white illumination beneath the transfer scanner and a
 * concentrated static star-shaped highlight at its centre. Neither pseudo
 * element has its own animation; both simply travel with the parent scanner.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      1.5.10
 */


/* ==========================================================================
   Static white scanner wash
   ========================================================================== */

/**
 * Soft white light immediately beneath the scanner.
 *
 * Uses only linear gradients. There is no green tint, circular bloom,
 * independent movement or pulse.
 */
body.jr-dark-commerce
	.jr-home-costume-stage__transition-scan::before {
	position: absolute;
	top: 0.15rem;
	right: 3%;
	left: 3%;
	z-index: 2;

	height: 4.25rem;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.24) 0%,
			rgba(255, 255, 255, 0.15) 15%,
			rgba(248, 251, 255, 0.08) 36%,
			rgba(240, 246, 252, 0.035) 62%,
			transparent 100%
		);

	content: "";

	opacity: 1;

	filter: blur(0.36rem);

	mix-blend-mode: screen;

	pointer-events: none;
}

/**
 * Homepage transfer scanner centre glow.
 *
 * Restores the earlier static radial highlight used in the middle of the
 * main scanner beam.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
body.jr-dark-commerce .jr-home-costume-stage__transition-scan::after {
	position: absolute;
	top: -0.85rem;
	left: 50%;

	width: 36%;
	height: 1.8rem;

	content: "";

	background:
		radial-gradient(
			circle at center,
			rgba(248, 255, 255, 0.85),
			rgba(111, 203, 255, 0.28) 38%,
			transparent 75%
		);

	transform: translateX(-50%);
	filter: blur(0.18rem);

	pointer-events: none;
}

body.jr-dark-commerce .jr-home-costume-stage__transition-scan span {
	position: absolute;
	right: 2%;
	bottom: 0.55rem;

	color: rgba(69, 217, 107, 0.88);

	font-family: "JetBrains Mono", monospace;
	font-size: 0.54rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	line-height: 1;

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

body.jr-dark-commerce
	.jr-home-costume-stage.is-scanning
	.jr-home-costume-stage__passive-scan {
	display: none;
	opacity: 0;
	visibility: hidden;
	animation: none;
}

body.jr-dark-commerce
	.jr-home-costume-stage.is-scanning
	.jr-home-costume-stage__scan-field::before {
	animation:
		jr-home-scan-column-pulse
		var(--jr-home-scan-duration)
		linear
		both;
}

body.jr-dark-commerce
	.jr-home-costume-stage.is-scanning
	.jr-home-costume-stage__scan-field::after {
	animation:
		jr-home-scan-frame-flicker
		var(--jr-home-scan-duration)
		linear
		both;
}

body.jr-dark-commerce
	.jr-home-costume-stage.is-scanning
	.jr-home-costume-stage__figure--current {
	animation:
		jr-home-costume-scan-out
		var(--jr-home-scan-duration)
		linear
		both;

	filter:
		brightness(0.96)
		contrast(1.03)
		saturate(0.9)
		drop-shadow(0 1.4rem 1.6rem rgba(0, 0, 0, 0.52))
		drop-shadow(0 0 0.35rem rgba(111, 203, 255, 0.08));
}

body.jr-dark-commerce
	.jr-home-costume-stage.is-scanning
	.jr-home-costume-stage__figure--next {
	animation:
		jr-home-costume-scan-in
		var(--jr-home-scan-duration)
		linear
		both;

	filter:
		brightness(0.99)
		contrast(1.035)
		saturate(0.92)
		drop-shadow(0 1.8rem 2rem rgba(0, 0, 0, 0.6))
		drop-shadow(0 0 0.48rem rgba(111, 203, 255, 0.1));
}

body.jr-dark-commerce
	.jr-home-costume-stage.is-scanning
	.jr-home-costume-stage__transition-scan {
	opacity: 1;
	visibility: visible;

	animation:
		jr-home-transition-scan
		var(--jr-home-scan-duration)
		linear
		both,
		jr-home-transition-line-flicker
		220ms
		steps(2, end)
		infinite;
}


/* ==========================================================================
   Floor / minimal live readout
   ========================================================================== */

body.jr-dark-commerce .jr-home-costume-stage__floor {
	position: absolute;
	right: 14%;
	bottom: 10.5%;
	left: 14%;
	z-index: 3;

	height: 4.75rem;

	background:
		linear-gradient(
			180deg,
			rgba(69, 217, 107, 0.075),
			transparent 72%
		),
		repeating-linear-gradient(
			90deg,
			transparent 0 3rem,
			rgba(111, 203, 255, 0.085) 3rem calc(3rem + 1px)
		);

	border-top: 1px solid rgba(69, 217, 107, 0.32);

	clip-path:
		polygon(
			7% 0,
			93% 0,
			100% 100%,
			0 100%
		);

	opacity: 0.82;

	transform:
		perspective(18rem)
		rotateX(62deg);
	transform-origin: 50% 0;

	pointer-events: none;
}

body.jr-dark-commerce .jr-home-costume-stage__status {
	position: absolute;
	bottom: 1rem;
	left: 8%;
	z-index: 14;

	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 0.55rem;

	max-width: 70%;

	color: rgba(207, 219, 229, 0.7);

	font-family: "JetBrains Mono", monospace;
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1;

	text-transform: uppercase;
}

body.jr-dark-commerce .jr-home-costume-stage__status strong {
	overflow: hidden;

	color: rgba(245, 247, 250, 0.96);

	font-family: inherit;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.065em;

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

body.jr-dark-commerce .jr-home-costume-stage__state {
	color: rgba(69, 217, 107, 0.9);
}


/**
 * Active-costume destination exposed as a real anchor.
 *
 * The whole desktop viewport can act as a large click target, but this compact
 * text link remains the explicit keyboard/touch action and communicates that
 * the diagnostic artwork has a shopping destination.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      2.9.0
 */
body.jr-dark-commerce .jr-home-costume-stage__link {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;

	padding-bottom: 0.08rem;
	border-bottom: 1px solid rgba(111, 203, 255, 0.32);

	color: rgba(219, 233, 242, 0.78);

	font-family: inherit;
	font-size: 0.56rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	line-height: 1;

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

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

body.jr-dark-commerce .jr-home-costume-stage__link:focus-visible {
	outline: 2px solid var(--jr-green-light);
	outline-offset: 3px;
}

/**
 * Differentiate a temporary desktop hover preview from the committed costume.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
body.jr-dark-commerce
	.jr-home-costume-stage.is-previewing
	.jr-home-costume-stage__state {
	color: rgba(111, 203, 255, 0.9);
}

body.jr-dark-commerce .jr-home-costume-stage__live-dot {
	width: 0.38rem;
	height: 0.38rem;

	flex: 0 0 0.38rem;

	border-radius: 50%;

	background: var(--jr-green-light);

	box-shadow:
		0 0 0.45rem rgba(69, 217, 107, 0.7),
		0 0 0.9rem rgba(69, 217, 107, 0.3);

	animation:
		jr-home-live-pulse
		2s
		ease-in-out
		infinite;
}

body.jr-dark-commerce .jr-home-costume-stage__indicators {
	position: absolute;
	right: 8%;
	bottom: 1rem;
	z-index: 14;

	display: flex;
	align-items: center;
	gap: 0.45rem;
}

body.jr-dark-commerce .jr-home-costume-stage__indicator {
	position: relative;

	display: block;

	width: 2.25rem;
	height: 1rem;

	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 0;

	background: transparent;

	cursor: pointer;
}

body.jr-dark-commerce .jr-home-costume-stage__indicator::before {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;

	height: 1px;

	background: rgba(152, 169, 192, 0.38);

	content: "";

	transform: translateY(-50%);

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

body.jr-dark-commerce .jr-home-costume-stage__indicator.is-active::before {
	background: var(--jr-green-light);

	box-shadow:
		0 0 0.6rem rgba(69, 217, 107, 0.38);

	transform:
		translateY(-50%)
		scaleY(2);
}

body.jr-dark-commerce
	.jr-home-costume-stage.is-scanning
	.jr-home-costume-stage__state {
	color: rgba(111, 203, 255, 0.82);
}

body.jr-dark-commerce
	.jr-home-costume-stage.is-scanning
	.jr-home-costume-stage__state::before {
	content: "SYNC // ";
}


/* ==========================================================================
   Hero interactions
   ========================================================================== */

/**
 * Costume selector hover remains homepage-specific.
 *
 * Primary and secondary CTA hover/focus states are inherited directly from
 * the shared `.jr-button-primary` and `.jr-button-secondary` component.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
@media (hover: hover) and (pointer: fine) {
	body.jr-dark-commerce .jr-home-costume-stage__viewport {
		cursor: pointer;
	}

	body.jr-dark-commerce
		.jr-home-costume-stage:hover
		.jr-home-costume-stage__link {
		border-color: rgba(69, 217, 107, 0.5);
		color: var(--jr-green-light);
		transform: translateX(0.12rem);
	}

	body.jr-dark-commerce
		.jr-home-costume-stage__viewport:hover
		.jr-home-costume-stage__scan-field::after {
		opacity: 0.52;
	}

	body.jr-dark-commerce
		.jr-home-costume-stage__indicator:hover::before {
		background: rgba(245, 247, 250, 0.56);
	}
}

body.jr-dark-commerce
	.jr-home-costume-stage__indicator:focus-visible {
	outline: 2px solid var(--jr-green-light);
	outline-offset: 3px;
}


/* ==========================================================================
   Hero responsive layout
   ========================================================================== */

/**
 * Responsive Jedi-Robe homepage hero.
 *
 * Breakpoints are based on when the campaign and costume chamber stop fitting
 * comfortably rather than on a specific device model. The live costume remains
 * inside the hero at every width: two columns through tablet, then a dedicated
 * stacked diagnostic chamber on mobile. Figure dimensions are controlled through the stage
 * custom properties so the scanner geometry and 3000ms timing remain untouched.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      1.8.0
 */

/**
 * Compact laptop / small desktop.
 *
 * The previous 1280px overlap started too early for common laptop viewports.
 * This range removes overlap, trims the campaign scale and gives the costume
 * chamber a little more width before the tablet breakpoint is reached.
 */
@media (min-width: 1181px) and (max-width: 1439px) {

	body.jr-dark-commerce .jr-home-hero__inner {
		grid-template-columns:
			minmax(0, 0.96fr)
			minmax(29rem, 1.04fr);

		gap: clamp(0.45rem, 0.8vw, 0.8rem);
	}

	body.jr-dark-commerce .jr-home-hero__content {
		margin-right: 0;
		padding-block: clamp(0.75rem, 2vh, 1.4rem);
	}

	body.jr-dark-commerce .jr-home-hero__campaign {
		width: min(100%, 43rem);
	}

	body.jr-dark-commerce .jr-home-hero__title {
		width: auto;
		max-width: none;

		font-size:
			clamp(
				5.35rem,
				8.65vw,
				8.5rem
			)
	}

	body.jr-dark-commerce .jr-home-hero__lede {
		max-width: 29rem;
		margin-top: 1.45rem;
	}

	body.jr-dark-commerce .jr-actions.jr-home-hero__actions {
		gap: 1rem;
		margin-top: 1.6rem;
	}

	body.jr-dark-commerce .jr-home-hero__signature {
		margin-top: 1.25rem;
	}

	body.jr-dark-commerce .jr-home-costume-stage {
		--jr-home-figure-width: 82%;
		--jr-home-figure-height: 96%;
		--jr-home-figure-left: 50%;
	}

	body.jr-dark-commerce .jr-home-costume-stage__telemetry--left {
		left: 5%;
	}

	body.jr-dark-commerce .jr-home-costume-stage__telemetry--right {
		right: 5%;
	}
}

/**
 * Short laptop viewport.
 *
 * Width alone does not describe compact laptop browsers, especially when the
 * WordPress admin bar and browser chrome reduce usable height. Compress the
 * vertical rhythm without changing the two-column composition.
 */
@media (min-width: 993px) and (max-height: 820px) {

	body.jr-dark-commerce .jr-home-hero {
		min-height:
			clamp(
				34rem,
				68svh,
				39rem
			);
	}

	body.jr-dark-commerce .jr-home-hero__inner {
		padding-block: 1.35rem;
	}

	body.jr-dark-commerce .jr-home-hero__content {
		padding-block: 0.65rem;
	}

	body.jr-dark-commerce .jr-home-hero__title {
		font-size:
			clamp(
				4.9rem,
				8.5vw,
				8rem
			)
	}

	body.jr-dark-commerce .jr-home-hero__lede {
		margin-top: 1.2rem;
	}

	body.jr-dark-commerce .jr-actions.jr-home-hero__actions {
		margin-top: 1.3rem;
	}

	body.jr-dark-commerce .jr-home-hero__signature {
		margin-top: 1rem;
	}

	body.jr-dark-commerce .jr-home-costume-stage {
		min-height: 34rem;
	}
}

@media (min-width: 993px) and (max-width: 1670px) {
	body.jr-dark-commerce .jr-home-costume-stage__status {
		bottom: 2.5rem;
		left: 50%;
		width: max-content;
		max-width: 88%;
		transform: translateX(-50%);
	}

	body.jr-dark-commerce .jr-home-costume-stage__status strong {
		max-width: 10rem;
	}

	body.jr-dark-commerce .jr-home-costume-stage__indicators {
		right: auto;
		bottom: 0.35rem;
		left: 50%;
		gap: 0.34rem;
		transform: translateX(-50%);
	}

	body.jr-dark-commerce .jr-home-costume-stage__indicator {
		width: 1.55rem;
		height: 1.5rem;
	}
}

/**
 * Portrait tablet / small desktop: 993px-1180px.
 *
 * iPad Pro portrait sits just above Shoptimizer's mobile breakpoint. Give the
 * scanner more room, simplify the HUD and stack the hero commands rather than
 * squeezing the full desktop composition into the available width.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      1.9.1
 */
@media (min-width: 993px) and (max-width: 1180px) {
	body.jr-dark-commerce .jr-home-hero {
		min-height: 39rem;
	}

	body.jr-dark-commerce .jr-home-hero__inner {
		grid-template-columns:
			minmax(0, 0.92fr)
			minmax(28rem, 1.08fr);
		gap: clamp(0.9rem, 1.6vw, 1.35rem);
		padding-block: 2rem 1.5rem;
	}

	body.jr-dark-commerce .jr-home-hero__content {
		margin-right: 0;
		padding: 0;
	}

	body.jr-dark-commerce .jr-home-hero__content::before {
		right: -1.25rem;
		opacity: 0.58;
	}

	body.jr-dark-commerce .jr-home-hero__title {
		width: max-content;
		max-width: 100%;
		font-size: clamp(4.85rem, 8.5vw, 8.75rem);
		letter-spacing: -0.06em;
	}

	body.jr-dark-commerce .jr-home-hero__lede {
		max-width: 22rem;
		margin-top: 1.15rem;
		font-size: 1rem;
	}

	body.jr-dark-commerce .jr-actions.jr-home-hero__actions {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.55rem;
		margin-top: 1.25rem;
	}

	body.jr-dark-commerce
		.jr-actions.jr-home-hero__actions
		.jr-home-hero__action,
	body.jr-dark-commerce
		.jr-actions.jr-home-hero__actions
		.jr-home-hero__action
		a.elementor-button {
		width: min(100%, 18rem);
	}


	body.jr-dark-commerce .jr-home-hero__signature {
		width: min(100%, 24rem);
		column-gap: 0.75rem;
		row-gap: 0.48rem;
		margin-top: 1.05rem;
		font-size: 0.5rem;
		letter-spacing: 0.085em;
	}

	body.jr-dark-commerce .jr-home-costume-stage {
		--jr-home-figure-width: 80%;
		--jr-home-figure-height: 92%;
		--jr-home-figure-left: 50.5%;
		min-height: 36.5rem;
	}

	body.jr-dark-commerce .jr-home-costume-stage__figure {
		top: 5%;
	}

	body.jr-dark-commerce .jr-home-costume-stage__rail--left,
	body.jr-dark-commerce .jr-home-costume-stage__telemetry--left {
		display: none;
	}

	body.jr-dark-commerce .jr-home-costume-stage__telemetry--right {
		top: 11%;
		right: 3%;
		font-size: 0.44rem;
	}

	body.jr-dark-commerce .jr-home-costume-stage__viewport {
		inset: 2.5% 1% 5.7rem;
	}
}

/**
 * Tablet: remain two-column.
 *
 * Preserve desktop-like headline authority while lowering the figure slightly
 * inside the diagnostic chamber. The tablet stage remains secondary to the
 * campaign heading without shrinking the costume into a thumbnail.
 */
@media (min-width: 768px) and (max-width: 992px) {

	/**
	 * Tablet composition.
	 *
	 * Keep the desktop split-screen idea, but reduce campaign scale and give the
	 * diagnostic chamber the larger share of the row. Lower-priority telemetry is
	 * reduced before the costume itself so the hero remains balanced at the
	 * Shoptimizer mobile-header breakpoint.
	 *
	 * @package    Jedi_Theme
	 * @subpackage Front_Page
	 */
	body.jr-dark-commerce .jr-home-hero {
		min-height: auto;
	}

	body.jr-dark-commerce .jr-home-hero::before {
		width: 100%;
		opacity: 0.72;
	}

	body.jr-dark-commerce .jr-home-hero__inner {
		grid-template-columns:
			minmax(0, 0.92fr)
			minmax(21.5rem, 1.08fr);
		align-items: center;
		gap: clamp(0.75rem, 1.8vw, 1.25rem);
		padding-block: 2.1rem 1.7rem;
	}

	body.jr-dark-commerce .jr-home-hero__content {
		justify-content: center;
		margin-right: 0;
		padding: 0;
	}

	body.jr-dark-commerce .jr-home-hero__content::before {
		top: -1.25rem;
		right: -1.5rem;
		bottom: -1.5rem;
		left: -1.25rem;
		opacity: 0.58;
	}

	body.jr-dark-commerce .jr-home-hero__eyebrow {
		gap: 0.5rem;
		margin-bottom: 0.8rem;
		font-size: 0.58rem;
		letter-spacing: 0.145em;
	}

	body.jr-dark-commerce .jr-home-hero__eyebrow::before {
		width: 2.15rem;
		flex-basis: 2.15rem;
	}

	body.jr-dark-commerce .jr-home-hero__title {
		width: max-content;
		max-width: 100%;
		font-size: clamp(4.05rem, 8.2vw, 5.05rem);
		letter-spacing: -0.06em;
		line-height: 0.8;
	}

	body.jr-dark-commerce .jr-home-hero__title-line--lead {
		padding-right: 2.4rem;
		font-size: 0.6em;
	}

	body.jr-dark-commerce .jr-home-hero__title-line--lead::after {
		width: 1.85rem;
	}

	body.jr-dark-commerce .jr-home-hero__lede {
		max-width: 19.5rem;
		margin-top: 1.05rem;
		font-size: 0.82rem;
		line-height: 1.5;
	}

	body.jr-dark-commerce .jr-actions.jr-home-hero__actions {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.5rem;
		margin-top: 1.1rem;
	}

	body.jr-dark-commerce
		.jr-actions.jr-home-hero__actions
		.jr-home-hero__action,
	body.jr-dark-commerce
		.jr-actions.jr-home-hero__actions
		.jr-home-hero__action
		a.elementor-button {
		width: min(100%, 17.5rem);
	}


	body.jr-dark-commerce .jr-home-hero__signature {
		width: min(100%, 21rem);
		column-gap: 0.6rem;
		row-gap: 0.42rem;
		margin-top: 0.95rem;
		font-size: 0.47rem;
		letter-spacing: 0.07em;
	}

	body.jr-dark-commerce .jr-home-costume-stage {
		--jr-home-figure-width: 86%;
		--jr-home-figure-height: 93%;
		--jr-home-figure-left: 51%;
		min-height: 32rem;
	}

	body.jr-dark-commerce .jr-home-costume-stage__figure {
		top: 6%;
	}

	body.jr-dark-commerce .jr-home-costume-stage__rail--left,
	body.jr-dark-commerce .jr-home-costume-stage__telemetry--left {
		display: none;
	}

	body.jr-dark-commerce .jr-home-costume-stage__rail--right {
		right: 2.5%;
		opacity: 0.38;
	}

	body.jr-dark-commerce .jr-home-costume-stage__telemetry--right {
		top: 11%;
		right: 3%;
		gap: 0.32rem;
		font-size: 0.43rem;
		opacity: 0.82;
	}

	body.jr-dark-commerce .jr-home-costume-stage__viewport {
		inset: 2.5% 1% 5.65rem;
	}

	body.jr-dark-commerce .jr-home-costume-stage__scan-field {
		right: 11%;
		left: 11%;
	}

	body.jr-dark-commerce .jr-home-costume-stage__floor {
		right: 11%;
		left: 11%;
	}

	body.jr-dark-commerce .jr-home-costume-stage__status {
		bottom: 2.45rem;
		left: 50%;
		gap: 0.34rem;
		width: max-content;
		max-width: 90%;
		font-size: 0.46rem;
		transform: translateX(-50%);
	}

	body.jr-dark-commerce .jr-home-costume-stage__status strong {
		max-width: 9.5rem;
		font-size: 0.54rem;
	}

	body.jr-dark-commerce .jr-home-costume-stage__indicators {
		right: auto;
		bottom: 0.25rem;
		left: 50%;
		gap: 0.32rem;
		transform: translateX(-50%);
	}

	body.jr-dark-commerce .jr-home-costume-stage__indicator {
		width: 1.45rem;
		height: 1.35rem;
	}
}

/**
 * Mobile: one layered hero composition.
 *
 * The campaign remains in normal flow while the costume chamber sits behind
 * the right side. The stage is intentionally narrower than the previous
 * version so the figure remains visible without swallowing the CTA or lede.
 */
@media (max-width: 767px) {

	/**
	 * Mobile composition.
	 *
	 * The campaign becomes the first readable block and the live diagnostic
	 * chamber becomes a dedicated full-width second block below it. This keeps
	 * the desktop visual language without forcing desktop geometry into a phone.
	 *
	 * @package    Jedi_Theme
	 * @subpackage Front_Page
	 */
	body.jr-dark-commerce .jr-home-hero {
		overflow: hidden;
		min-height: 0;
	}

	body.jr-dark-commerce .jr-home-hero::before {
		width: 100%;
		opacity: 0.78;
	}

	body.jr-dark-commerce .jr-home-hero__inner {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0.85rem;
		width: calc(100% - (var(--jr-page-gutter, clamp(1rem, 3vw, 2.5rem)) * 2));
		min-height: 0;
		padding-block: 1.65rem 1.05rem;
	}

	body.jr-dark-commerce .jr-home-hero__content {
		position: relative;
		z-index: 8;
		display: block;
		width: 100%;
		padding: 0;
	}

	body.jr-dark-commerce .jr-home-hero__content::before {
		top: -0.85rem;
		right: -1rem;
		bottom: -1.35rem;
		left: -1rem;
		opacity: 0.48;
	}

	body.jr-dark-commerce .jr-home-hero__eyebrow {
		gap: 0.5rem;
		margin-bottom: 0.72rem;
		font-size: 0.57rem;
		letter-spacing: 0.13em;
	}

	body.jr-dark-commerce .jr-home-hero__eyebrow::before {
		width: 1.9rem;
		flex-basis: 1.9rem;
	}

	body.jr-dark-commerce .jr-home-hero__title {
		width: max-content;
		max-width: 100%;
		font-size: clamp(3.45rem, 18.2vw, 9rem);
		letter-spacing: -0.06em;
		line-height: 0.79;
	}

	body.jr-dark-commerce .jr-home-hero__title-line--lead {
		font-size: 0.57em;
	}

	body.jr-dark-commerce .jr-home-hero__title-line--lead::after {
		width: 3rem;
	}

	body.jr-dark-commerce .jr-home-hero__lede {
		max-width: 31rem;
		margin-top: 1rem;
		font-size: 0.95rem;
		line-height: 1.52;
	}

	body.jr-dark-commerce .jr-actions.jr-home-hero__actions {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.5rem;
		margin-top: 1.05rem;
	}


	body.jr-dark-commerce .jr-home-hero__signature {
		display: grid;
		width: min(100%, 26rem);
		column-gap: 0.5rem;
		row-gap: 0.42rem;
		margin-top: 1.5rem;
		font-size: 0.48rem;
		letter-spacing: 0.065em;
		margin-left: auto;
		margin-right: auto;
	}

	body.jr-dark-commerce .jr-home-costume-stage {
		--jr-home-figure-width: 92%;
		--jr-home-figure-height: 96%;
		--jr-home-figure-left: 50%;
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		z-index: 3;
		width: 100%;
		min-height: clamp(26rem, 112vw, 31.5rem);
		margin: 0;
	}

	body.jr-dark-commerce .jr-home-costume-stage__figure {
		top: 3%;
	}

	body.jr-dark-commerce .jr-home-costume-stage::before {
		inset: 1% 3% 6%;
		opacity: 0.92;
	}

	body.jr-dark-commerce .jr-home-costume-stage__grid {
		inset: 5% 4% 12%;
		opacity: 0.5;
	}

	body.jr-dark-commerce .jr-home-costume-stage__rail {
		top: 12%;
		bottom: 18%;
		opacity: 0.36;
	}

	body.jr-dark-commerce .jr-home-costume-stage__rail--left {
		left: 5%;
	}

	body.jr-dark-commerce .jr-home-costume-stage__rail--right {
		right: 5%;
	}

	body.jr-dark-commerce .jr-home-costume-stage__telemetry {
		display: none;
	}

	body.jr-dark-commerce .jr-home-costume-stage__datum {
		opacity: 0.4;
	}

	body.jr-dark-commerce .jr-home-costume-stage__viewport {
		inset: 1.5% 0 5.6rem;
	}

	body.jr-dark-commerce .jr-home-costume-stage__scan-field {
		right: 10%;
		left: 10%;
	}

	body.jr-dark-commerce .jr-home-costume-stage__passive-scan,
	body.jr-dark-commerce .jr-home-costume-stage__transition-scan {
		right: 8%;
		left: 8%;
	}

	body.jr-dark-commerce .jr-home-costume-stage__transition-scan span {
		display: none;
	}

	body.jr-dark-commerce .jr-home-costume-stage__floor {
		right: 9%;
		bottom: 9%;
		left: 9%;
		height: 4rem;
	}

	body.jr-dark-commerce .jr-home-costume-stage__status {
		bottom: 3.45rem;
		left: 50%;
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr) auto;
		gap: 0.34rem;
		width: max-content;
		max-width: 92%;
		font-size: 0.47rem;
		transform: translateX(-50%);
	}

	body.jr-dark-commerce .jr-home-costume-stage__status strong {
		max-width: 12rem;
		font-size: 0.55rem;
	}


	body.jr-dark-commerce .jr-home-costume-stage__state {
		display: none;
	}

	body.jr-dark-commerce .jr-home-costume-stage__link {
		min-height: 2rem;
		align-items: center;
		padding: 0 0.18rem;
		font-size: 0.53rem;
	}

	body.jr-dark-commerce .jr-home-costume-stage__indicators {
		right: auto;
		bottom: 0.2rem;
		left: 50%;

		display: grid;
		grid-template-columns: repeat(8, 1.2rem);
		column-gap: 0.55rem;
		row-gap: 0.18rem;

		transform: translateX(-50%);
	}

	body.jr-dark-commerce .jr-home-costume-stage__indicator {
		width: 1.2rem;
		height: 1.2rem;
	}
}

/**
 * Narrow mobile.
 */
@media (max-width: 560px) {

	/**
	 * Narrow-mobile tuning.
	 *
	 * Collapse the CTA pair and let the scanner retain enough height for long
	 * robes and weapons without forcing the campaign copy into a narrow column.
	 *
	 * @package    Jedi_Theme
	 * @subpackage Front_Page
	 */

	body.jr-dark-commerce .jr-home-hero__lede {
		max-width: 26rem;
		font-size: 0.79rem;
	}

	body.jr-dark-commerce .jr-actions.jr-home-hero__actions {
		gap: 0.45rem;
	}

	body.jr-dark-commerce .jr-home-costume-stage {
		--jr-home-figure-width: 96%;
		--jr-home-figure-height: 97%;
		min-height: clamp(26rem, 116vw, 30rem);
	}

	body.jr-dark-commerce .jr-home-costume-stage__status {
		grid-template-columns: auto auto minmax(0, 1fr) auto;
		max-width: 94%;
		font-size: 0.45rem;
	}

	body.jr-dark-commerce .jr-home-costume-stage__status strong {
		max-width: 11rem;
		font-size: 0.52rem;
	}

}

/**
 * Very small phones.
 */
@media (max-width: 420px) {

	/**
	 * Very-small-phone tuning.
	 *
	 * Preserve the scanner composition while slightly reducing the stage and
	 * control width so all eight costume selectors remain available without
	 * horizontal overflow.
	 *
	 * @package    Jedi_Theme
	 * @subpackage Front_Page
	 */
	body.jr-dark-commerce .jr-home-hero__inner {
		width: calc(100% - 2rem);
		gap: 1rem;
		padding-top: 1.45rem;
	}

	body.jr-dark-commerce .jr-home-hero__eyebrow {
		font-size: 0.53rem;
		letter-spacing: 0.11em;
	}

	body.jr-dark-commerce .jr-home-hero__title {
		font-size: clamp(3.15rem, 14.5vw, 3.55rem);
	}

	body.jr-dark-commerce .jr-home-hero__title-line--lead {
		padding-right: 2rem;
	}

	/**
	 * Keep both heritage labels readable without collapsing the centre signal.
	 *
	 * @package    Jedi_Theme
	 * @subpackage Front_Page
	 */
	body.jr-dark-commerce .jr-home-hero__signature {
		column-gap: 0.35rem;
		row-gap: 0.38rem;
		font-size: 0.44rem;
		letter-spacing: 0.045em;
	}

	body.jr-dark-commerce .jr-home-hero__title-line--lead::after {
		width: 1.45rem;
	}

	body.jr-dark-commerce .jr-home-hero__lede {
		max-width: 100%;
		margin-top: 0.9rem;
		font-size: 0.76rem;
		line-height: 1.48;
	}

	body.jr-dark-commerce .jr-actions.jr-home-hero__actions {
		margin-top: 0.95rem;
	}


	body.jr-dark-commerce .jr-home-costume-stage {
		--jr-home-figure-width: 100%;
		--jr-home-figure-height: 98%;
		min-height: clamp(25.5rem, 118vw, 28rem);
	}

	body.jr-dark-commerce .jr-home-costume-stage__viewport {
		inset: 1% 0 5.35rem;
	}

	body.jr-dark-commerce .jr-home-costume-stage__scan-field {
		right: 9%;
		left: 9%;
	}

	body.jr-dark-commerce .jr-home-costume-stage__floor {
		right: 8%;
		left: 8%;
	}

	body.jr-dark-commerce .jr-home-costume-stage__status {
		bottom: 3.3rem;
		gap: 0.28rem;
		max-width: 96%;
	}

	body.jr-dark-commerce .jr-home-costume-stage__status strong {
		max-width: 9rem;
	}

	body.jr-dark-commerce .jr-home-costume-stage__indicators {
		grid-template-columns: repeat(4, 1.65rem);
		column-gap: 0.48rem;
	}

	body.jr-dark-commerce .jr-home-costume-stage__indicator {
		width: 1.65rem;
		height: 1.15rem;
	}
}


/* ==========================================================================
   Hero motion
   ========================================================================== */

@keyframes jr-home-space-drift {
	0% {
		transform: translate3d(0, 0, 0);
	}

	100% {
		transform: translate3d(-4rem, 2.5rem, 0);
	}
}

@keyframes jr-home-diagnostic-float {
	0%,
	100% {
		transform:
			translateX(-50%)
			translateY(0)
			scale(1.07);
	}

	50% {
		transform:
			translateX(-50%)
			translateY(-0.5rem)
			scale(1.082);
	}
}

@keyframes jr-home-diagnostic-pulse {
	0%,
	100% {
		opacity: 0.17;
		filter: brightness(0.92);
	}

	50% {
		opacity: 0.29;
		filter: brightness(1.16);
	}
}

@keyframes jr-home-body-scan {
	0% {
		transform: translateY(-75%);
		opacity: 0;
	}

	9% {
		opacity: 0.8;
	}

	86% {
		opacity: 0.55;
	}

	100% {
		transform: translateY(680%);
		opacity: 0;
	}
}

@keyframes jr-home-costume-idle {
	0%,
	100% {
		transform:
			translateX(-50%)
			translateY(0)
			scale(1);
	}

	50% {
		transform:
			translateX(-50%)
			translateY(-0.42rem)
			scale(1.008);
	}
}

@keyframes jr-home-live-pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.45);
		opacity: 0.58;
	}
}

@keyframes jr-home-passive-scan {
	0% {
		top: var(--jr-home-scan-start);
		opacity: 0;
	}

	8% {
		opacity: 0.3;
	}

	88% {
		opacity: 0.18;
	}

	100% {
		top: var(--jr-home-scan-end);
		opacity: 0;
	}
}

@keyframes jr-home-transition-scan {
	0% {
		top: var(--jr-home-scan-start);
		opacity: 0;
	}

	8% {
		opacity: 1;
	}

	88% {
		opacity: 0.96;
	}

	100% {
		top: var(--jr-home-scan-end);
		opacity: 0;
	}
}

/**
 * Small signal variation on the transfer beam.
 *
 * The brightness shift is deliberately tiny; the scanner should read as an
 * electronic signal rather than a camera flash.
 */
@keyframes jr-home-transition-line-flicker {
	0%,
	100% {
		filter: brightness(0.96);
	}

	50% {
		filter: brightness(1.04);
	}
}

/**
 * Subtle hologram instability applied only to the visible costume artwork.
 *
 * Two very short opacity drops across a long cycle create electronic signal
 * behaviour without making the product image flicker continuously.
 */
@keyframes jr-home-costume-hologram-signal {
	0%,
	18%,
	20%,
	58%,
	60%,
	100% {
		opacity: 0.985;
	}

	19% {
		opacity: 0.945;
	}

	59% {
		opacity: 0.965;
	}
}

@keyframes jr-home-scan-column-pulse {
	0% {
		opacity: 0.14;
		transform: scaleX(0.98);
	}

	18% {
		opacity: 0.28;
		transform: scaleX(1);
	}

	60% {
		opacity: 0.24;
		transform: scaleX(1.01);
	}

	100% {
		opacity: 0.15;
		transform: scaleX(0.99);
	}
}

@keyframes jr-home-scan-frame-flicker {
	0%,
	100% {
		opacity: 0.26;
	}

	15% {
		opacity: 0.46;
	}

	22% {
		opacity: 0.31;
	}

	48% {
		opacity: 0.42;
	}

	72% {
		opacity: 0.3;
	}
}

/**
 * The current and next costumes exchange exactly at the scan frontier. Above
 * the scanner the new costume has been revealed; below it the old costume is
 * still visible. This avoids a disconnected image fade followed by a scanner.
 */
@keyframes jr-home-costume-scan-in {
	0% {
		clip-path: inset(0 0 100% 0);
		opacity: 1;
	}

	100% {
		clip-path: inset(0 0 0 0);
		opacity: 1;
	}
}

@keyframes jr-home-costume-scan-out {
	0% {
		clip-path: inset(0 0 0 0);
		opacity: 1;
	}

	100% {
		clip-path: inset(100% 0 0 0);
		opacity: 1;
	}
}


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

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

	body.jr-dark-commerce .jr-home-hero__space,
	body.jr-dark-commerce .jr-home-costume-stage__diagnostic,
	body.jr-dark-commerce .jr-home-costume-stage__diagnostic::after,
	body.jr-dark-commerce .jr-home-costume-stage__figure--current,
	body.jr-dark-commerce .jr-home-costume-stage__passive-scan,
	body.jr-dark-commerce .jr-home-costume-stage__transition-scan,
	body.jr-dark-commerce .jr-home-costume-stage__live-dot {
		animation: none;
	}

	body.jr-dark-commerce .jr-home-costume-stage__passive-scan,
	body.jr-dark-commerce .jr-home-costume-stage__transition-scan {
		display: none;
	}
}

/* ==========================================================================
   Homepage costume collection gateways
   ========================================================================== */

/**
 * Text-only collection gateways using the Character-card visual system.
 *
 * Adult and Kids are broader collection routes, but they now use the same
 * clipped technical frame, cool panel surface, shadow, lift interaction and
 * boxed arrow as the canonical Character cards below. Typography mirrors the
 * Character-card metadata/title hierarchy while retaining one supporting line.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      2.8.0
 */
body.jr-dark-commerce .jr-home-category-gateways {
	--jr-home-gateway-frame: rgba(111, 203, 255, 0.24);
	--jr-home-gateway-panel: rgba(8, 14, 22, 0.38);

	display: grid;
	width: 100%;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.9rem, 1.25vw, 1.25rem);
	margin: 0 0 clamp(1.5rem, 2vw, 2rem);
	padding: 0 0.5rem;
}

/**
 * Compact text-only adaptation of the canonical Character card.
 *
 * The clip-path, technical inset frame, base shadow and hover lift intentionally
 * match the card system beneath this row. The panel contains text only; no
 * separate top-line or decorative side rail is introduced.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
body.jr-dark-commerce .jr-home-category-gateway {
	position: relative;
	isolation: isolate;
	display: grid;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 6.15rem;
	grid-template-columns: minmax(0, 1fr) 2rem;
	align-items: center;
	gap: 0.9rem;
	margin: 0;
	padding: clamp(0.8rem, 2.2vw, 2rem);
	border: 0;
	clip-path:
		polygon(
			0 0,
			calc(100% - 0.8rem) 0,
			100% 0.8rem,
			100% 100%,
			0.8rem 100%,
			0 calc(100% - 0.8rem)
		);
	background:
		linear-gradient(
			135deg,
			rgba(111, 203, 255, 0.026),
			transparent 42%
		),
		rgba(6, 11, 17, 0.97);
	color: var(--jr-text);
	text-decoration: none;
	box-shadow: 0 1.25rem 2.7rem rgba(0, 0, 0, 0.25);
	transform: translateZ(0);
	transition:
		transform 220ms cubic-bezier(0.2, 0.75, 0.25, 1),
		box-shadow 220ms ease;
}

/**
 * Reproduce the canonical Character-card technical inset frame.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
body.jr-dark-commerce .jr-home-category-gateway::before {
	position: absolute;
	z-index: 6;
	inset: 0;
	background: none;
	box-shadow: inset 0 0 0 1px var(--jr-home-gateway-frame);
	content: "";
	pointer-events: none;
}

body.jr-dark-commerce .jr-home-category-gateway::after {
	content: none;
}

body.jr-dark-commerce .jr-home-category-gateway__copy {
	position: relative;
	z-index: 2;
	display: flex;
	box-sizing: border-box;
	min-width: 0;
	flex-direction: column;
	align-self: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
}

/**
 * Match the Character-card metadata treatment.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
body.jr-dark-commerce .jr-home-category-gateway__kicker {
	margin: 0;
	color: rgba(69, 217, 107, 0.82);
	font-size: 0.67rem;
	font-weight: 750;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

/**
 * Match the Character-card title hierarchy.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
body.jr-dark-commerce .jr-home-category-gateway__title {
	margin: 0;
	color: #f5f7fa;
	font-size: clamp(1.12rem, 1.2rem + 0.22vw, 1.64rem);
	font-weight: 740;
	letter-spacing: -0.02em;
	line-height: 1.13;
}

body.jr-dark-commerce .jr-home-category-gateway__description {
	max-width: 40rem;
	margin: 0;
	color: rgba(185, 198, 209, 0.68);
	font-size: clamp(0.76rem, 0.73rem + 0.08vw, 0.82rem);
	line-height: 1.4;
}

/**
 * Reuse the canonical Character-card boxed arrow geometry.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
body.jr-dark-commerce .jr-home-category-gateway__arrow {
	position: relative;
	z-index: 2;
	display: grid;
	overflow: hidden;
	box-sizing: border-box;
	width: 3rem;
	min-width: 3rem;
	max-width: 3rem;
	height: 3rem;
	min-height: 3rem;
	max-height: 3rem;
	align-self: center;
	justify-self: end;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 1px solid var(--jr-border);
	background: rgba(255, 255, 255, 0.018);
	color: var(--jr-text);
	font-size: 1.83rem;
	font-weight: normal;
	line-height: 1;
	transform: translateX(0);
	transition:
		border-color 200ms ease,
		background 200ms ease,
		color 200ms ease,
		transform 200ms ease;
	border-color: rgba(45, 166, 83, 0.48);
    background: rgba(45, 166, 83, 0.07);
    color: var(--jr-green-light);
}

/**
 * Copy the Character-card desktop hover: lift the whole card, deepen its shadow
 * and move the boxed arrow into the existing green interaction state.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
@media (hover: hover) and (pointer: fine) {
	body.jr-dark-commerce .jr-home-category-gateway:hover {
		box-shadow: 0 1.8rem 3.8rem rgba(0, 0, 0, 0.38);
		background:
			linear-gradient(115deg, rgba(45, 166, 83, 0.045), transparent 42%),  
			linear-gradient(180deg, rgba(9, 15, 23, 0.84), rgba(4, 9, 15, 0.9));
		transform: translateY(-0.16rem);
	}

	body.jr-dark-commerce .jr-home-category-gateway:hover .jr-home-category-gateway__arrow {
		border-color: rgba(45, 166, 83, 0.48);
		background: rgba(45, 166, 83, 0.07);
		color: var(--jr-green-light);
		transform: translateX(0.22rem);
	}
}

/**
 * Match the Character-card keyboard focus treatment.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
body.jr-dark-commerce .jr-home-category-gateway:focus-visible {
	outline: 3px solid var(--jr-blue-light);
	outline-offset: 4px;
}

body.jr-dark-commerce .jr-home-category-gateway:active {
	box-shadow: 0 1.35rem 2.9rem rgba(0, 0, 0, 0.34);
	transform: translateY(-0.08rem) scale(0.995);
}

@media (max-width: 767px) {
	body.jr-dark-commerce .jr-home-category-gateways {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
		margin-bottom: 1.5rem;
		padding: 0;
	}

	body.jr-dark-commerce .jr-home-category-gateway {
		min-height: 5.7rem;
		grid-template-columns: minmax(0, 1fr) 1.75rem;
		gap: 0.7rem;
		padding: 1.6rem 1rem;
		box-shadow: 0 1.8rem 3.8rem rgba(0, 0, 0, 0.38);
		background:
			linear-gradient(115deg, rgba(45, 166, 83, 0.045), transparent 42%),  
			linear-gradient(180deg, rgba(9, 15, 23, 0.84), rgba(4, 9, 15, 0.9));
		transform: translateY(-0.16rem);
	}

	body.jr-dark-commerce .jr-home-category-gateway__title {
		font-size: clamp(0.95rem, 3.6vw, 1.2rem);
	}

	body.jr-dark-commerce .jr-home-category-gateway__arrow {
        width: 2rem;
        min-width: 1.75rem;
        max-width: 2rem;
        height: 2rem;
        min-height: 1.75rem;
        max-height: 2rem;
        font-size: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
	body.jr-dark-commerce .jr-home-category-gateway,
	body.jr-dark-commerce .jr-home-category-gateway__arrow {
		transition: none;
	}

	body.jr-dark-commerce .jr-home-category-gateway:hover {
		transform: none;
	}
}

/* ==========================================================================
   WooCommerce Bestsellers
   ========================================================================== */

/**
 * Homepage Bestsellers bridge for the native WooCommerce / Shoptimizer loop.
 *
 * The catalogue remains the source of truth for product-card typography and
 * pricing. Homepage-only rules normalise the four card heights and image stages
 * while removing purchase, wishlist and variation controls from this discovery
 * section. Shop and category archives remain unchanged.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      2.1.0
 */
body.jr-dark-commerce .jr-home .jr-home-products { 
	margin: var(--jr-page-section-space) auto; 
}

body.jr-dark-commerce .jr-home-products__grid,
body.jr-dark-commerce .jr-home-products__grid.woocommerce {
	width: 100%;
}

body.jr-dark-commerce .jr-home-products__grid ul.products {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: clamp(0.9rem, 1.25vw, 1.25rem);
	margin: 0;
	padding: 0;
}

body.jr-dark-commerce .jr-home-products__grid ul.products::before,
body.jr-dark-commerce .jr-home-products__grid ul.products::after {
	display: none;
	content: none;
}

body.jr-dark-commerce .jr-home-products__grid ul.products li.product {
	float: none;
	display: flex;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	min-width: 0;
	min-height: 100%;
	flex-direction: column;
	align-self: stretch;
	margin: 0;
	padding-bottom: 0;
}

/**
 * Match the canonical catalogue image stage.
 *
 * The existing ecommerce component uses a 390px desktop stage. Controlling the
 * wrapper instead of the source image prevents portrait and landscape files
 * from creating different card geometry. The image itself is proportionally
 * contained inside the shared stage.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      2.1.0
 */
body.jr-dark-commerce
	.jr-home-products__grid
	ul.products
	li.product
	.woocommerce-image__wrapper {
	position: relative;
	display: flex;
	float: none;
	width: 100%;
	height: 390px;
	min-height: 390px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-right: 0;
	background: #fff;
    margin-top: 15px;
}

body.jr-dark-commerce
	.jr-home-products__grid
	ul.products
	li.product
	.shoptimizer-plp-image-wrapper {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

body.jr-dark-commerce
	.jr-home-products__grid
	ul.products
	li.product
	.woocommerce-image__wrapper img.wp-post-image,
body.jr-dark-commerce
	.jr-home-products__grid
	ul.products
	li.product
	.woocommerce-image__wrapper img.wp-post-image-cgas {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
}

body.jr-dark-commerce
	.jr-home-products__grid
	ul.products
	li.product
	.product-wrapper {
	display: flex;
	width: 100%;
	height: 100%;
	min-height: 100%;
	flex: 1 1 auto;
	flex-direction: column;
}

body.jr-dark-commerce
	.jr-home-products__grid
	ul.products
	li.product
	.woocommerce-card__header {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

/**
 * Keep Bestsellers as a discovery grid instead of an inline purchase grid.
 *
 * WooCommerce / CommerceKit controls are suppressed only inside this homepage
 * component. The normal catalogue continues to expose its configured Add to
 * Cart, attribute-swatch and wishlist interactions.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      2.1.0
 */
body.jr-dark-commerce .jr-home-products__grid ul.products li.product > .button,
body.jr-dark-commerce .jr-home-products__grid ul.products li.product .add_to_cart_button,
body.jr-dark-commerce .jr-home-products__grid ul.products li.product .added_to_cart,
body.jr-dark-commerce .jr-home-products__grid ul.products li.product .cgkit-as-loop-atc-wrap,
body.jr-dark-commerce .jr-home-products__grid ul.products li.product .cgkit-as-empty-atc-wrap,
body.jr-dark-commerce .jr-home-products__grid ul.products li.product .ckit-attributes-wrap,
body.jr-dark-commerce .jr-home-products__grid ul.products li.product .cgkit-as-wrap-plp,
body.jr-dark-commerce .jr-home-products__grid ul.products li.product .cgkit-swatch-form,
body.jr-dark-commerce
	.jr-home-products__grid
	ul.products:not(.commercekit-wishlist-list)
	li.product
	.commercekit-wishlist.mini {
	display: none;
}

@media (max-width: 992px) {
	body.jr-dark-commerce .jr-home-products__grid ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 662px) {
	body.jr-dark-commerce .jr-home-products__grid ul.products li.product .woocommerce-image__wrapper {
		height: 290px;
		min-height: 290px;
	}
}

/**
 * Match the existing ecommerce component's compact mobile image stage.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
@media (max-width: 480px) {
	body.jr-dark-commerce .jr-home-products__grid ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
	body.jr-dark-commerce
		.jr-home-products__grid
		ul.products
		li.product
		.woocommerce-image__wrapper {
		height: 330px;
		min-height: 330px;
	}
}


/* ==========================================================================
   Trust + Customer Proof
   ========================================================================== */

/**
 * Closing customer-proof section for the storefront homepage.
 *
 * The section deliberately reuses the canonical `--jr-page-section-space`
 * token instead of maintaining a second homepage-only spacing system. The
 * preceding Bestsellers section therefore hands directly into this surface,
 * while equal internal spacing is retained above and below the proof content.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      2.3.0
 */
body.jr-dark-commerce .jr-page-section.jr-home-proof {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--jr-page-section-space);
	border-top: 1px solid rgba(69, 217, 107, 0.1);
	border-bottom: 1px solid rgba(152, 169, 192, 0.12);
	background:
		radial-gradient(
			circle at 11% 12%,
			rgba(45, 166, 83, 0.065),
			transparent 27rem
		),
		radial-gradient(
			circle at 88% 82%,
			rgba(111, 203, 255, 0.055),
			transparent 31rem
		),
		linear-gradient(180deg, #060b11 0%, #03070b 100%);
}

/**
 * Avoid double-counting the shared inter-section gap above the proof surface.
 *
 * The trust section owns one canonical spacing unit internally, so the normal
 * adjacent `.jr-page-section` margin is removed only at this transition.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
body.jr-dark-commerce
	.jr-home-products
	+ .jr-page-section.jr-home-proof {
	margin-top: 0;
}

/**
 * Faint technical traces keep the proof area within the Jedi-Robe visual
 * language without turning the section into another decorative dashboard.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
body.jr-dark-commerce .jr-home-proof::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			115deg,
			transparent 0 36%,
			rgba(255, 255, 255, 0.018) 36.1%,
			transparent 36.2% 100%
		),
		repeating-linear-gradient(
			90deg,
			transparent 0 12rem,
			rgba(255, 255, 255, 0.012) 12rem calc(12rem + 1px)
		);
	content: "";
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Proof introduction
   -------------------------------------------------------------------------- */

/**
 * Match the left-aligned heading rhythm used by the other homepage sections.
 *
 * The shared `.jr-home-section__header` owns typography. This selector only
 * widens the proof introduction slightly and sets its separation from the
 * showcase below.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
body.jr-dark-commerce .jr-home-proof__header {
	max-width: 64rem;
	margin: 0 0 clamp(2rem, 3vw, 3rem);
	text-align: left;
}

/* --------------------------------------------------------------------------
   Customer story + business proof
   -------------------------------------------------------------------------- */

/**
 * Give the customer story the dominant width while the proof rail fills the
 * same grid-row height. The right side is divided into four shallow rows, so
 * equal outer height no longer creates oversized empty boxes.
 *
 * Desktop proportion: 1.58fr + 0.72fr = roughly 69% / 31% before the gap.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      2.4.0
 */
body.jr-dark-commerce .jr-home-proof__showcase {
	display: grid;
	grid-template-columns: minmax(0, 1.58fr) minmax(20rem, 0.72fr);
	align-items: stretch;
	gap: clamp(1rem, 1.5vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   Featured customer review
   -------------------------------------------------------------------------- */

body.jr-dark-commerce .jr-home-proof__review-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-width: 0;
	min-height: clamp(22rem, 22vw, 24.5rem);
	border: 1px solid rgba(152, 169, 192, 0.2);
	background: #03070b;
}

body.jr-dark-commerce .jr-home-proof__review-card::before {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			90deg,
			rgba(1, 4, 7, 0.97) 0%,
			rgba(2, 6, 10, 0.9) 34%,
			rgba(2, 7, 11, 0.7) 58%,
			rgba(2, 7, 11, 0.34) 82%,
			rgba(2, 7, 11, 0.48) 100%
		),
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.08),
			rgba(0, 0, 0, 0.28) 54%,
			rgba(0, 0, 0, 0.74) 100%
		);
	content: "";
	pointer-events: none;
}

body.jr-dark-commerce .jr-home-proof__review-card::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	height: 1px;
	background: linear-gradient(90deg, var(--jr-green-light), transparent 66%);
	content: "";
	opacity: 0.72;
	pointer-events: none;
}

body.jr-dark-commerce .jr-home-proof__review-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

body.jr-dark-commerce .jr-home-proof__review-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: saturate(0.72) contrast(1.05) brightness(0.72);
	transform: scale(1.015);
	transition: transform 500ms ease, filter 500ms ease;
}

body.jr-dark-commerce .jr-home-proof__review-content {
	position: relative;
	z-index: 2;
	display: flex;
	width: min(100%, 46rem);
	min-height: inherit;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(1.75rem, 3vw, 3rem);
}

body.jr-dark-commerce .jr-home-proof__review-kicker {
	margin: 0 0 1.05rem;
	color: var(--jr-green-light);
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
}

body.jr-dark-commerce .jr-home-proof__quote {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
}

body.jr-dark-commerce .jr-home-proof__quote::before {
	display: block;
	margin: 0 0 0.2rem -0.08em;
	color: rgba(111, 203, 255, 0.46);
	content: "“";
	font-family: Georgia, serif;
	font-size: clamp(3rem, 4vw, 4.5rem);
	font-weight: 400;
	line-height: 0.54;
}

body.jr-dark-commerce .jr-home-proof__quote p {
	max-width: 31ch;
	margin: 0;
	color: rgba(246, 249, 251, 0.96);
	font-size: clamp(1.25rem, 1.08rem + 0.55vw, 1.75rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.36;
	text-wrap: balance;
}

body.jr-dark-commerce .jr-home-proof__quote cite {
	display: block;
	margin-top: 1.1rem;
	font-style: normal;
}

body.jr-dark-commerce .jr-home-proof__quote cite a {
	color: rgba(197, 209, 219, 0.72);
	font-size: 0.68rem;
	font-weight: 760;
	letter-spacing: 0.085em;
	line-height: 1.35;
	text-decoration: none;
	text-transform: uppercase;
}

body.jr-dark-commerce .jr-home-proof__review-link {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.5rem;
	padding-bottom: 0.22rem;
	border-bottom: 1px solid rgba(69, 217, 107, 0.46);
	color: var(--jr-text);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-color 180ms ease, color 180ms ease;
}

body.jr-dark-commerce .jr-home-proof__review-link span {
	transition: transform 180ms ease;
}

/* --------------------------------------------------------------------------
   Business facts
   -------------------------------------------------------------------------- */

/**
 * Balance the compact proof facts against the featured review.
 *
 * On wide screens the facts form one four-row rail and stretch to exactly the
 * same height as the review card. Four shallow rows use the available height
 * efficiently without creating oversized 2 x 2 boxes around very short copy.
 * All four facts are informational, so none receives a navigation arrow.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      2.4.0
 */
body.jr-dark-commerce .jr-home-proof__facts {
	display: grid;
	min-width: 0;
	height: 100%;
	align-self: stretch;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid rgba(152, 169, 192, 0.2);
	background:
		linear-gradient(135deg, rgba(111, 203, 255, 0.018), transparent 42%),
		rgba(5, 10, 16, 0.52);
}

body.jr-dark-commerce .jr-home-proof__fact {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 0;
}

body.jr-dark-commerce .jr-home-proof__fact:not(:last-child) {
	border-bottom: 1px solid var(--jr-home-line);
}

/**
 * Make every proof row a consistent full-area navigation target.
 *
 * Padding is owned by the anchor so the complete visual row is clickable and
 * keyboard focus maps to the same region users perceive as the control.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      2.5.0
 */
body.jr-dark-commerce .jr-home-proof__fact-link {
	position: relative;
	display: flex;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 0;
	flex-direction: column;
	justify-content: center;
	padding:
		clamp(1rem, 1.35vw, 1.35rem)
		clamp(3rem, 3.4vw, 3.5rem)
		clamp(1rem, 1.35vw, 1.35rem)
		clamp(1.1rem, 1.5vw, 1.5rem);
	color: inherit;
	text-decoration: none;
	transition: background 180ms ease;
}

/**
 * Shared navigation cue for all four proof rows.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 */
body.jr-dark-commerce .jr-home-proof__fact-link::after {
	position: absolute;
	top: 50%;
	right: clamp(1rem, 1.35vw, 1.35rem);
	color: rgba(69, 217, 107, 0.58);
	content: "→";
	font-size: 0.95rem;
	line-height: 1;
	transform: translateY(-50%);
	transition: color 180ms ease, transform 180ms ease;
}

body.jr-dark-commerce .jr-home-proof__fact-link strong,
body.jr-dark-commerce .jr-home-proof__fact-link span {
	display: block;
}

body.jr-dark-commerce .jr-home-proof__fact-link strong {
	max-width: 18ch;
	color: #f4f7fa;
	font-size: clamp(1rem, 0.94rem + 0.16vw, 1.15rem);
	font-weight: 820;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

body.jr-dark-commerce .jr-home-proof__fact-link span {
	margin-top: 0.35rem;
	color: rgba(176, 189, 201, 0.7);
	font-size: 0.64rem;
	font-weight: 720;
	letter-spacing: 0.07em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Trust responsive layout
   -------------------------------------------------------------------------- */

/**
 * When the two-column showcase no longer fits comfortably, stack the review
 * above a compact four-column proof rail.
 *
 * @package    Jedi_Theme
 * @subpackage Front_Page
 * @since      2.4.0
 */
@media (max-width: 1100px) {
	body.jr-dark-commerce .jr-home-proof__showcase {
		grid-template-columns: minmax(0, 1fr);
	}

	body.jr-dark-commerce .jr-home-proof__review-card {
		min-height: clamp(22rem, 42vw, 24.5rem);
	}

	body.jr-dark-commerce .jr-home-proof__facts {
		height: auto;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: minmax(7rem, auto);
	}

	body.jr-dark-commerce .jr-home-proof__fact:not(:last-child) {
		border-right: 1px solid var(--jr-home-line);
		border-bottom: 0;
	}

	body.jr-dark-commerce .jr-home-proof__fact-link {
		min-height: 7rem;
	}
}

@media (max-width: 767px) {
	body.jr-dark-commerce .jr-home-proof__header {
		margin-bottom: 2rem;
	}

	body.jr-dark-commerce .jr-home-proof__review-card {
		min-height: 23rem;
	}

	body.jr-dark-commerce .jr-home-proof__review-card::before {
		background:
			linear-gradient(
				180deg,
				rgba(1, 4, 7, 0.34) 0%,
				rgba(1, 4, 7, 0.6) 38%,
				rgba(1, 4, 7, 0.94) 100%
			);
	}

	body.jr-dark-commerce .jr-home-proof__review-content {
		justify-content: flex-end;
		padding: 1.5rem;
	}

	body.jr-dark-commerce .jr-home-proof__quote p {
		max-width: 28ch;
		font-size: clamp(1.15rem, 4.5vw, 1.45rem);
	}

	body.jr-dark-commerce .jr-home-proof__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(6.75rem, auto));
	}

	body.jr-dark-commerce .jr-home-proof__fact:not(:last-child) {
		border-right: 0;
	}

	body.jr-dark-commerce .jr-home-proof__fact:nth-child(odd) {
		border-right: 1px solid var(--jr-home-line);
	}

	body.jr-dark-commerce .jr-home-proof__fact:nth-child(n + 3) {
		border-top: 1px solid var(--jr-home-line);
	}

	body.jr-dark-commerce .jr-home-proof__fact-link {
		min-height: 6.75rem;
		padding: 1rem 2.75rem 1rem 1rem;
	}
}

@media (max-width: 420px) {
	body.jr-dark-commerce .jr-home-proof__review-card {
		min-height: 22rem;
	}

	body.jr-dark-commerce .jr-home-proof__review-content {
		padding: 1.25rem;
	}

	body.jr-dark-commerce .jr-home-proof__review-kicker {
		font-size: 0.59rem;
		letter-spacing: 0.125em;
	}

	body.jr-dark-commerce .jr-home-proof__fact-link strong {
		font-size: 0.94rem;
	}

	body.jr-dark-commerce .jr-home-proof__fact-link span {
		font-size: 0.59rem;
		letter-spacing: 0.055em;
	}
}


/* ==========================================================================
   Shared homepage interaction states
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
	body.jr-dark-commerce .jr-home-text-link:hover,
	body.jr-dark-commerce .jr-home-proof__review-link:hover {
		border-color: rgba(69, 217, 107, 0.72);
		color: var(--jr-green-light);
	}

	body.jr-dark-commerce .jr-home-proof__review-link:hover span {
		transform: translateX(0.18rem);
	}

	body.jr-dark-commerce .jr-home-proof__review-card:hover .jr-home-proof__review-image {
		filter: saturate(0.82) contrast(1.06) brightness(0.78);
		transform: scale(1.035);
	}

	body.jr-dark-commerce .jr-home-proof__fact-link:hover {
		background: rgba(45, 166, 83, 0.045);
	}

	body.jr-dark-commerce .jr-home-proof__fact-link:hover::after {
		color: var(--jr-green-light);
		transform: translate(0.18rem, -50%);
	}

}

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

@media (max-width: 767px) {
	body.jr-dark-commerce .jr-home-section__header--split {
		align-items: flex-start;
		flex-direction: column;
		gap: 1rem;
	}

	body.jr-dark-commerce .jr-home-eyebrow {
		font-size: 0.64rem;
		letter-spacing: 0.13em;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.jr-dark-commerce .jr-home-category-gateway,
	body.jr-dark-commerce .jr-home-category-gateway__arrow,
	body.jr-dark-commerce .jr-home-proof__review-image,
	body.jr-dark-commerce .jr-home-proof__review-link,
	body.jr-dark-commerce .jr-home-proof__review-link span {
		transition: none;
	}
}


.archive-header {
	display: none;
}