/**
 * Public Service Discount page.
 *
 * Provides the Jedi-Robe dark sci-fi presentation for the Blue Light,
 * healthcare, military, education and public service recognition page.
 *
 * This stylesheet is scoped to .ss-public-service-page so it does not alter
 * unrelated WooCommerce, Shoptimizer or Elementor components. Typography,
 * colours, borders and action sizing consume the shared jr-dark-commerce
 * design tokens so this page stays aligned with the wider Jedi-Robe system.
 *
 * @package    Jedi_Theme
 * @subpackage Public_Service_Discount
 * @since      1.0.0
 */


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

body.jr-dark-commerce
	.ss-public-service-page,
body.jr-dark-commerce
	.ss-public-service-page
	* {
	box-sizing: border-box;
}


body.jr-dark-commerce
	.ss-public-service-page {
	overflow: hidden;

	background: transparent;

	color: var(--jr-text);

	font-family: inherit;
}


/* ==========================================================================
   Shared shell
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-wrap,
body.jr-dark-commerce
	.ss-public-hero-inner {
	width: min(
		calc(100% - (var(--jr-page-gutter, clamp(1rem, 3vw, 2.5rem)) * 2)),
		var(--jr-container, 100rem)
	);

	margin-inline: auto;
}


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

body.jr-dark-commerce
	.ss-public-hero {
	position: relative;
	isolation: isolate;

	display: flex;

	min-height: 34rem;

	align-items: center;

	padding:
		clamp(4rem, 7vw, 6.5rem)
		0;

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

	background:
		linear-gradient(
			90deg,
			rgba(2, 7, 11, 0.94) 0%,
			rgba(2, 7, 11, 0.82) 38%,
			rgba(2, 7, 11, 0.28) 76%,
			rgba(2, 7, 11, 0.16) 100%
		),
		url("https://stormtrooper-costumes.com/wp-content/uploads/2026/06/uk-military-discount.png")
		center center / cover
		no-repeat;
}


body.jr-dark-commerce
	.ss-public-hero::before {
	position: absolute;
	z-index: -1;

	inset: 0;

	background:
		radial-gradient(
			circle at 12% 50%,
			rgba(45, 166, 83, 0.08),
			transparent 28rem
		);

	content: "";

	pointer-events: none;
}


/* ==========================================================================
   Hero content
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-hero-content {
	max-width: 46rem;

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


/* ==========================================================================
   Hero kicker
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-kicker {
	display: flex;

	width: fit-content;

	align-items: center;

	gap: 0.75rem;

	margin:
		0
		0
		1.25rem;

	padding: 0;

	border: 0;
	border-radius: 0;

	background: transparent;

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

	font-size: 0.73rem;
	font-weight: 800;
	letter-spacing: 0.17em;
	line-height: 1.2;

	text-transform: uppercase;

	backdrop-filter: none;
}


body.jr-dark-commerce
	.ss-public-kicker::before {
	width: 1.8rem;
	height: 1px;

	flex:
		0
		0
		auto;

	background: currentcolor;

	box-shadow:
		0 0 0.75rem rgba(69, 217, 107, 0.25);

	content: "";
}


/* ==========================================================================
   Hero heading
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-hero
	h1 {
	max-width: 13ch;

	margin:
		0
		0
		1.5rem;

	color: var(--jr-text);

	font-size:
		clamp(
			3.25rem,
			4.4vw,
			4.5rem
		);

	font-weight: 750;
	letter-spacing: -0.05em;
	line-height: 0.98;

	text-wrap: balance;

	text-shadow:
		0 0 1.5rem rgba(255, 255, 255, 0.04),
		0 0 3.5rem rgba(114, 201, 255, 0.055);
}


body.jr-dark-commerce
	.ss-public-hero
	h1::after {
	display: block;

	width: clamp(5rem, 9vw, 9rem);
	height: 2px;

	margin-top: 1.5rem;

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

	box-shadow:
		0 0 1rem rgba(45, 166, 83, 0.2);

	content: "";
}


/* ==========================================================================
   Hero copy
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-hero
	p {
	max-width: 43rem;

	margin:
		0
		0
		1.75rem;

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

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

	line-height: 1.72;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-buttons {
	display: flex;

	gap: 0.75rem;

	flex-wrap: wrap;
}


body.jr-dark-commerce
	.ss-public-btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	display: inline-flex;

	min-height: 3.35rem;

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

	padding:
		0.9rem
		1.45rem;

	border-radius: 0;

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

	text-decoration: none;

	text-transform: uppercase;

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


body.jr-dark-commerce
	.ss-public-btn::after {
	position: absolute;
	right: 0.4rem;
	bottom: 0.35rem;

	width: 0.4rem;
	height: 0.4rem;

	border-right: 1px solid currentcolor;
	border-bottom: 1px solid currentcolor;

	content: "";

	opacity: 0.7;
}


/**
 * Keep keyboard and pressed states aligned with shared Jedi-Robe actions.
 *
 * @package Jedi_Theme
 * @subpackage Public_Service_Discount
 */
body.jr-dark-commerce
	.ss-public-btn:focus-visible {
	outline: 2px solid var(--jr-green-light);
	outline-offset: 3px;
}


body.jr-dark-commerce
	.ss-public-btn:active {
	transform: translateY(0) scale(0.985);
}


/* ==========================================================================
   Primary button
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-btn-primary {
	border: 1px solid rgba(239, 196, 109, 0.76);

	background:
		linear-gradient(
			180deg,
			#efc46d 0%,
			#d7a444 48%,
			#c58c2d 100%
		);

	color: #080a0d;

	box-shadow:
		0 0.8rem 2rem rgba(0, 0, 0, 0.3),
		0 0 1.1rem rgba(214, 165, 74, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.34);
}


body.jr-dark-commerce
	.ss-public-btn-primary:hover {
	border-color: #f6d98e;

	color: #05070a;

	filter: brightness(1.07);

	box-shadow:
		0 1rem 2.35rem rgba(0, 0, 0, 0.34),
		0 0 1.45rem rgba(214, 165, 74, 0.26),
		inset 0 1px 0 rgba(255, 255, 255, 0.42);

	transform: translateY(-2px);
}


/* ==========================================================================
   Secondary button
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-btn-secondary {
	border: 1px solid rgba(152, 169, 192, 0.48);

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

	color: var(--jr-text);

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


body.jr-dark-commerce
	.ss-public-btn-secondary:hover {
	border-color: rgba(152, 169, 192, 0.7);

	background:
		linear-gradient(
			135deg,
			rgba(69, 217, 107, 0.08),
			transparent 44%
		),
		linear-gradient(
			180deg,
			rgba(17, 30, 41, 0.98),
			rgba(7, 15, 22, 0.98)
		);

	color: var(--jr-text);

	transform: translateY(-2px);
}


/* ==========================================================================
   Sections
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-section {
	position: relative;

	padding:
		clamp(3rem, 5vw, 4rem)
        0;

	background: transparent;
}


body.jr-dark-commerce
	.ss-public-section-tight {
	padding-top: 1.5rem;
	padding-bottom: 4rem;
}


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

body.jr-dark-commerce
	.ss-public-intro {
	max-width: 54rem;

	margin: 0;

	text-align: left;
}


body.jr-dark-commerce
	.ss-public-intro
	h2,
body.jr-dark-commerce
	.ss-public-split
	h2,
body.jr-dark-commerce
	.ss-public-cta
	h2 {
	position: relative;

	margin:
		0
		0
		1.1rem;

	max-width: 24ch;

	color: var(--jr-text);

	font-size: clamp(2rem, 2.4vw, 3rem);
	font-weight: 760;
	letter-spacing: -0.04em;
	line-height: 1.05;

	text-wrap: balance;
}


body.jr-dark-commerce
	.ss-public-intro
	h2::after,
body.jr-dark-commerce
	.ss-public-split
	h2::after {
	display: block;

	width: clamp(4rem, 6vw, 6rem);
	height: 2px;

	margin-top: 1rem;

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

	box-shadow:
		0 0 1rem rgba(45, 166, 83, 0.2);

	content: "";
}


/* ==========================================================================
   Shared section copy
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-intro
	p {
	margin: 0;

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

	font-size: 0.98rem;
	line-height: 1.72;
}


/* ==========================================================================
   Recognition cards grid
   ========================================================================== */

/**
 * Reuse the established Jedi-Robe category-card rhythm for recognition cards.
 *
 * The public-service cards are informational rather than navigation links, so
 * the visual language is shared without adding the category-card arrow.
 *
 * @package    Jedi_Theme
 * @subpackage Public_Service_Discount
 */
body.jr-dark-commerce
	.ss-public-grid {
	display: grid;

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

	gap:
		clamp(
			1rem,
			1.5vw,
			1.5rem
		);

	margin-top: 2rem;
}


/* ==========================================================================
   Recognition card
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-card {
	position: relative;
	z-index: 1;
	isolation: isolate;
	overflow: hidden;

	display: grid;

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

	grid-template-rows:
		auto
		1fr;

	column-gap:
		clamp(
			0.9rem,
			1.2vw,
			1.2rem
		);

	row-gap: 0.35rem;

	align-items: start;

	min-width: 0;
	min-height: 9.5rem;

	padding:
		clamp(
			1.15rem,
			1.7vw,
			1.5rem
		);

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

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.035),
			transparent 42%
		),
		radial-gradient(
			circle at 100% 0,
			rgba(111, 203, 255, 0.045),
			transparent 15rem
		),
		var(--jr-surface);

	color: var(--jr-text);

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

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


/**
 * Add the short illuminated top trace used by the category information cards.
 *
 * @package    Jedi_Theme
 * @subpackage Public_Service_Discount
 */
body.jr-dark-commerce
	.ss-public-card::before {
	position: absolute;
	top: 0;
	left: 0;

	width:
		clamp(
			3.5rem,
			30%,
			8rem
		);

	height: 1px;

	background:
		linear-gradient(
			90deg,
			var(--jr-green-light),
			rgba(45, 166, 83, 0)
		);

	box-shadow:
		0 0 1rem rgba(45, 166, 83, 0.18);

	content: "";

	opacity: 0.72;

	pointer-events: none;

	transition:
		width 220ms ease,
		opacity 220ms ease;
}


body.jr-dark-commerce
	.ss-public-card
	> * {
	position: relative;
	z-index: 1;
}


/* ==========================================================================
   Recognition icon
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-icon {
	grid-column: 1;
	grid-row: 1 / span 2;

	display: grid;

	width: 3rem;
	height: 3rem;

	margin: 0;

	place-items: center;

	border: 1px solid transparent;
	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			#141c28,
			#090d14
		)
		padding-box,
		linear-gradient(
			145deg,
			rgba(69, 217, 107, 0.72),
			rgba(45, 166, 83, 0.18) 58%,
			rgba(111, 203, 255, 0.16)
		)
		border-box;

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

	font-size: 1rem;
	font-weight: 700;
	line-height: 1;

	box-shadow:
		0 0.75rem 1.5rem rgba(0, 0, 0, 0.25),
		0 0 1rem rgba(45, 166, 83, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);

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


/* ==========================================================================
   Recognition card typography
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-card
	h3 {
	grid-column: 2;
	grid-row: 1;

	min-width: 0;

	margin:
		0
		0
		0.1rem;

	padding-top: 0.1rem;

	color: var(--jr-text);

	font-size:
		clamp(
			1rem,
			0.94rem + 0.14vw,
			1.12rem
		);

	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.3;

	text-wrap: balance;

	transition:
		color 180ms ease,
		text-shadow 180ms ease;
}


body.jr-dark-commerce
	.ss-public-card
	p {
	grid-column: 2;
	grid-row: 2;

	min-width: 0;

	margin: 0;

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

	font-size:
		clamp(
			0.86rem,
			0.82rem + 0.08vw,
			0.94rem
		);

	line-height: 1.6;

	text-wrap: pretty;

	transition: color 180ms ease;
}


/* ==========================================================================
   Recognition card hover
   ========================================================================== */

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

	body.jr-dark-commerce
		.ss-public-card:hover {
		border-color: rgba(45, 166, 83, 0.48);

		background:
			linear-gradient(
				135deg,
				rgba(111, 203, 255, 0.065),
				transparent 40%
			),
			rgba(11, 19, 30, 0.68);

		box-shadow:
			0 1.75rem 3.5rem rgba(0, 0, 0, 0.34),
			0 0 1.5rem rgba(45, 166, 83, 0.07),
			inset 0 1px 0 rgba(255, 255, 255, 0.04);

		transform: translateY(-0.25rem);
	}


	body.jr-dark-commerce
		.ss-public-card:hover::before {
		width: 62%;
		opacity: 1;
	}


	body.jr-dark-commerce
		.ss-public-card:hover
		.ss-public-icon {
		color: var(--jr-green-bright);

		box-shadow:
			0 1rem 1.8rem rgba(0, 0, 0, 0.3),
			0 0 1.25rem rgba(45, 166, 83, 0.13),
			inset 0 1px 0 rgba(255, 255, 255, 0.055);

		transform: translateY(-0.125rem);
	}


	body.jr-dark-commerce
		.ss-public-card:hover
		h3 {
		color: var(--jr-text);
		text-shadow: 0 0 1rem rgba(45, 166, 83, 0.1);
	}
}


/* ==========================================================================
   Recognition responsive layout
   ========================================================================== */

@media (max-width: 1180px) {

	body.jr-dark-commerce
		.ss-public-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}
}


/* ==========================================================================
   Eligibility section
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-dark {
	position: relative;
	isolation: isolate;

	padding:
		clamp(4rem, 7vw, 6rem)
		0;

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

	background:
		linear-gradient(
			180deg,
			rgba(8, 16, 25, 0.58),
			rgba(3, 8, 13, 0.36)
		);

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


body.jr-dark-commerce
	.ss-public-dark::before {
	position: absolute;
	z-index: -1;

	inset: 0;

	background:
		radial-gradient(
			circle at 0 50%,
			rgba(45, 166, 83, 0.045),
			transparent 28rem
		),
		radial-gradient(
			circle at 100% 50%,
			rgba(111, 203, 255, 0.035),
			transparent 28rem
		);

	content: "";

	opacity: 1;

	pointer-events: none;
}


/* ==========================================================================
   Eligibility split
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-split {
	display: grid;

	grid-template-columns:
		minmax(0, 0.95fr)
		minmax(0, 1.05fr);

	gap:
		clamp(
			2rem,
			5vw,
			4.5rem
		);

	align-items: start;
}


body.jr-dark-commerce
	.ss-public-split
	p {
	max-width: 36rem;

	margin:
		0
		0
		1rem;

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

	font-size: 0.98rem;
	line-height: 1.72;
}


/* ==========================================================================
   Eligibility list
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-list {
	display: grid;

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

	gap: 0.6rem;

	margin-top: 1.5rem;
}


body.jr-dark-commerce
	.ss-public-list
	div {
	position: relative;

	padding:
		0.7rem
		0.8rem
		0.7rem
		1.8rem;

	border: 1px solid rgba(152, 169, 192, 0.18);
	border-radius: 0.25rem;

	background:
		rgba(8, 15, 24, 0.48);

	color: var(--jr-text);

	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.4;
}


body.jr-dark-commerce
	.ss-public-list
	div::before {
	position: absolute;

	top: 0.75rem;
	left: 0.7rem;

	margin: 0;

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

	content: "✓";

	font-weight: 800;
}


/* ==========================================================================
   Claim steps panel
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-steps {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	padding:
		1.5rem;

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

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

	color: var(--jr-text);

	box-shadow:
		0 1.5rem 3rem rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


body.jr-dark-commerce
	.ss-public-steps::before {
	position: absolute;
	top: -1px;
	left: -1px;

	width: 4rem;
	height: 0.9rem;

	border-top: 1px solid var(--jr-green-light);
	border-left: 1px solid var(--jr-green-light);

	content: "";
}


/* ==========================================================================
   Claim step
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-step {
	display: grid;

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

	gap: 1rem;

	padding:
		1.25rem
		0;

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


body.jr-dark-commerce
	.ss-public-step:first-child {
	padding-top: 0;
}


body.jr-dark-commerce
	.ss-public-step:last-child {
	padding-bottom: 0;

	border-bottom: 0;
}


/* ==========================================================================
   Claim step number
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-number {
	display: grid;

	width: 2.5rem;
	height: 2.5rem;

	border: 1px solid rgba(69, 217, 107, 0.32);
	border-radius: 50%;

	background:
		rgba(69, 217, 107, 0.04);

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

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

	place-items: center;
}


/* ==========================================================================
   Claim step typography
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-step
	h3 {
	margin:
		0
		0
		0.4rem;

	color: var(--jr-text);

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


body.jr-dark-commerce
	.ss-public-step
	p {
	margin: 0;

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

	font-size: 0.95rem;
	line-height: 1.68;
}


/* ==========================================================================
   Proof labels
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-proof {
	display: flex;

	gap: 0.45rem;

	margin-top: 0.8rem;

	flex-wrap: wrap;
}


body.jr-dark-commerce
	.ss-public-proof
	span {
	padding:
		0.38rem
		0.6rem;

	border: 1px solid rgba(152, 169, 192, 0.18);
	border-radius: 0.2rem;

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

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

	font-size: 0.72rem;
	font-weight: 650;
}


/* ==========================================================================
   Trust statistics
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-trust {
	display: grid;

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

	gap: 1rem;

	margin-top: 2rem;
}


body.jr-dark-commerce
	.ss-public-stat {
	position: relative;

	padding:
		1.4rem
		1rem;

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

	background:
		rgba(8, 15, 24, 0.55);

	text-align: left;

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


body.jr-dark-commerce
	.ss-public-stat::after {
	position: absolute;
	right: -1px;
	bottom: -1px;

	width: 0.7rem;
	height: 0.7rem;

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

	content: "";
}


body.jr-dark-commerce
	.ss-public-stat
	strong {
	display: block;

	margin:
		0
		0
		0.4rem;

	color: var(--jr-text);

	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}


body.jr-dark-commerce
	.ss-public-stat
	span {
	color: var(--jr-text-muted);

	font-size: 0.875rem;
	line-height: 1.4;
}


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

body.jr-dark-commerce
	.ss-public-faq {
	width: 100%;

	margin:
		2rem
		0
		0;

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


body.jr-dark-commerce
	.ss-public-faq-item {
	position: relative;

	padding:
		1.25rem
		0;

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

	background: transparent;
}


body.jr-dark-commerce
	.ss-public-faq-item
	h3 {
	margin:
		0
		0
		0.45rem;

	color: var(--jr-text);

	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.45;
}


body.jr-dark-commerce
	.ss-public-faq-item
	p {
	max-width: 58rem;

	margin: 0;

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

	font-size: 0.95rem;
	line-height: 1.72;
}


/* ==========================================================================
   Final CTA
   ========================================================================== */

body.jr-dark-commerce
	.ss-public-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	padding:
		clamp(2.5rem, 5vw, 4rem)
		clamp(1.25rem, 4vw, 3rem);

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

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.025),
			transparent 42%
		),
		radial-gradient(
			circle at 100% 50%,
			rgba(111, 203, 255, 0.06),
			transparent 22rem
		),
		rgba(8, 15, 24, 0.72);

	color: var(--jr-text);

	text-align: left;

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


body.jr-dark-commerce
	.ss-public-cta::before {
	position: absolute;

	top: -1px;
	left: -1px;

	width: 5rem;
	height: 1rem;

	border-top: 1px solid var(--jr-green-light);
	border-left: 1px solid var(--jr-green-light);

	background: transparent;

	content: "";
}


body.jr-dark-commerce
	.ss-public-cta::after {
	position: absolute;

	right: -1px;
	bottom: -1px;

	width: 1rem;
	height: 1rem;

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

	content: "";
}


body.jr-dark-commerce
	.ss-public-cta
	h2 {
	max-width: none;

	margin-bottom: 0.9rem;

	text-align: left;
}


body.jr-dark-commerce
	.ss-public-cta
	p {
	max-width: 48rem;

	margin:
		0
		0
		1.5rem;

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

	font-size: 0.98rem;
	line-height: 1.72;

	text-align: left;
}


body.jr-dark-commerce
	.ss-public-cta
	h2,
body.jr-dark-commerce
	.ss-public-cta
	p,
body.jr-dark-commerce
	.ss-public-cta
	a {
	position: relative;
	z-index: 2;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 980px) {

	body.jr-dark-commerce
		.ss-public-grid,
	body.jr-dark-commerce
		.ss-public-trust {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


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


	body.jr-dark-commerce
		.ss-public-hero {
		background:
			linear-gradient(
				90deg,
				rgba(2, 7, 11, 0.94) 0%,
				rgba(2, 7, 11, 0.78) 58%,
				rgba(2, 7, 11, 0.35) 100%
			),
			url("https://stormtrooper-costumes.com/wp-content/uploads/2026/06/uk-military-discount.png")
			center center / cover
			no-repeat;
	}
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 640px) {

	body.jr-dark-commerce
		.ss-public-wrap,
	body.jr-dark-commerce
		.ss-public-hero-inner {
		width:
			calc(
				100% - 2rem
			);
	}


	body.jr-dark-commerce
		.ss-public-hero {
		min-height: 33rem;

		padding:
			3.5rem
			0;

		background:
			linear-gradient(
				90deg,
				rgba(2, 7, 11, 0.92),
				rgba(2, 7, 11, 0.72)
			),
			url("https://stormtrooper-costumes.com/wp-content/uploads/2026/06/uk-military-discount.png")
			center center / cover
			no-repeat;
	}


	body.jr-dark-commerce
		.ss-public-hero
		h1 {
		font-size:
			clamp(
				2.75rem,
				13vw,
				4rem
			);
	}


	body.jr-dark-commerce
		.ss-public-grid,
	body.jr-dark-commerce
		.ss-public-trust,
	body.jr-dark-commerce
		.ss-public-list {
		grid-template-columns:
			minmax(0, 1fr);
	}


	body.jr-dark-commerce
		.ss-public-buttons {
		align-items: stretch;

		flex-direction: column;
	}


	body.jr-dark-commerce
		.ss-public-btn {
		width: 100%;
	}


	body.jr-dark-commerce
		.ss-public-step {
		grid-template-columns:
			2.35rem
			minmax(0, 1fr);
	}


	body.jr-dark-commerce
		.ss-public-number {
		width: 2.35rem;
		height: 2.35rem;
	}


	body.jr-dark-commerce
		.ss-public-steps {
		padding:
			1.25rem
			1rem;
	}


	body.jr-dark-commerce
		.ss-public-cta {
		padding:
			2rem
			1.25rem;
	}
}


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

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

	body.jr-dark-commerce
		.ss-public-card,
	body.jr-dark-commerce
		.ss-public-btn {
		transition: none;
	}


	body.jr-dark-commerce
		.ss-public-card:hover,
	body.jr-dark-commerce
		.ss-public-btn:hover {
		transform: none;
	}
}