/**
 * Jedi-Robe Stormtrooper package comparison.
 *
 * Provides the shared dark sci-fi presentation for the desktop comparison
 * matrix and mobile swipe-card interface.
 *
 * The component preserves the existing shortcode markup and WooCommerce
 * product data while matching the established Jedi-Robe dark interface:
 * technical borders, diagnostic green accents, restrained blue-grey surfaces,
 * readable typography and a gold primary action for the featured package.
 *
 * @package Jedi_Theme
 * @subpackage Package_Comparison
 * @since 1.0.0
 */


/* ==========================================================================
   Component tokens
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare {
	--jr-compare-panel: rgba(7, 13, 21, 0.72);
	--jr-compare-panel-deep: rgba(2, 6, 9, 0.84);
	--jr-compare-row: rgba(255, 255, 255, 0.012);
	--jr-compare-row-alt: rgba(111, 203, 255, 0.025);
	--jr-compare-line: rgba(152, 169, 192, 0.15);
	--jr-compare-line-strong: rgba(111, 203, 255, 0.24);
	--jr-compare-featured: rgba(69, 217, 107, 0.035);
	--jr-compare-featured-strong: rgba(69, 217, 107, 0.075);

	position: relative;

	width: 100%;
	min-width: 0;

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


/* ==========================================================================
   Desktop comparison console
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table-wrapper {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	width: 100%;

	margin: 0;

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

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.025),
			transparent 34%
		),
		radial-gradient(
			circle at 100% 0,
			rgba(111, 203, 255, 0.06),
			transparent 25rem
		),
		var(--jr-compare-panel);

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


/* ==========================================================================
   Console lower-right bracket
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table-wrapper::after {
	position: absolute;
	right: -1px;
	bottom: -1px;
	z-index: 10;

	width: 2.25rem;
	height: 1.15rem;

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

	content: "";

	pointer-events: none;
}


/* ==========================================================================
   Comparison table
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table {
	width: 100%;

	margin: 0;

	border: 0;
	border-collapse: collapse;
	border-spacing: 0;

	table-layout: fixed;

	background: transparent;

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


/* ==========================================================================
   Header cells
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table
	thead
	th {
	position: relative;

	padding:
		1.5rem
		1.3rem;

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

	background:
		linear-gradient(
			180deg,
			rgba(15, 22, 32, 0.82),
			rgba(7, 13, 21, 0.65)
		);

	color: var(--jr-text);

	vertical-align: top;
}


/* ==========================================================================
   Product header cells
   ========================================================================== */

/**
 * Reserve a dedicated technical-status row above every package title.
 *
 * This prevents the Best Value marker from colliding with Complete Package.
 */
body.jr-dark-commerce
	.jr-package-compare
	.package-table
	thead
	th:not(.feature-col) {
	padding:
		3.45rem
		1.3rem
		1.65rem;
}


/* ==========================================================================
   Technical package identifiers
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table
	thead
	th:not(.feature-col)::before {
	position: absolute;
	top: 1rem;
	left: 1.3rem;

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

	font-size: 0.68rem;
	font-weight: 750;
	letter-spacing: 0.13em;
	line-height: 1;

	text-transform: uppercase;
}


body.jr-dark-commerce
	.jr-package-compare
	.package-table
	thead
	th:nth-child(2)::before {
	content: "PACKAGE 01";
}


body.jr-dark-commerce
	.jr-package-compare
	.package-table
	thead
	th:nth-child(3)::before {
	content: "PACKAGE 02";
}


body.jr-dark-commerce
	.jr-package-compare
	.package-table
	thead
	th:nth-child(4)::before {
	color: rgba(69, 217, 107, 0.7);

	content: "PACKAGE 03";
}


/* ==========================================================================
   Feature column
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table
	th.feature-col {
	width: 24%;

	padding-left: 1.5rem;

	color: var(--jr-text);

	text-align: left;
}


/* ==========================================================================
   Comparison introduction
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.compare-intro {
	display: flex;

	min-height: 22rem;

	flex-direction: column;

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

	margin: 0;
	padding:
		1.25rem
		0.75rem
		1.25rem
		0;

	text-align: left;
}


/* ==========================================================================
   Introduction eyebrow
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.compare-intro__eyebrow {
	margin:
		0
		0
		0.65rem;

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

	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1.2;

	text-transform: uppercase;
}


/* ==========================================================================
   Introduction title
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.compare-intro__title {
	max-width: 9ch;

	color: var(--jr-text);

	font-size: clamp(1.8rem, 1.6rem + 0.55vw, 2.15rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.02;
}


/* ==========================================================================
   Introduction signal rail
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.compare-intro__line {
	width: 3.75rem;
	height: 1px;

	margin:
		1.1rem
		0;

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

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


/* ==========================================================================
   Introduction description
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.compare-intro__text {
	max-width: 15rem;

	margin: 0;

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

	font-size: 0.92rem;
	font-weight: 450;
	line-height: 1.6;
}


/* ==========================================================================
   Package header
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-head {
	display: flex;

	width: 100%;

	flex-direction: column;

	align-items: center;

	gap: 0;

	margin: 0;

	text-align: center;
}


/* ==========================================================================
   Package heading
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-heading {
	margin: 0;
	padding: 0;

	color: var(--jr-text);

	font-size: clamp(1.05rem, 0.98rem + 0.2vw, 1.2rem);
	font-weight: 780;
	letter-spacing: 0.055em;
	line-height: 1.25;

	text-transform: uppercase;
}


/* ==========================================================================
   Package subtitle
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.sub-title {
	margin:
		0.4rem
		0
		1rem;

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

	font-size: 0.84rem;
	font-weight: 500;
	line-height: 1.45;
}


/* ==========================================================================
   Product display bay
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-image {
	position: relative;
	overflow: hidden;

	display: flex;

	width: 100%;
	height: clamp(13.5rem, 16vw, 16rem);

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

	margin:
		0
		auto
		1rem;

	padding: 0.7rem;

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

	background:
		var(--jr-image-bg);

	text-decoration: none;

	box-shadow:
		0 0.75rem 1.75rem rgba(0, 0, 0, 0.16);

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


/* ==========================================================================
   Product display bay technical lock
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-image::before {
	position: absolute;
	top: -1px;
	left: -1px;
	z-index: 2;

	width: 2.5rem;
	height: 0.8rem;

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

	content: "";

	pointer-events: none;
}


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

body.jr-dark-commerce
	.jr-package-compare
	.package-image
	img {
	display: block;

	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;

	margin: 0;

	object-fit: contain;

	transform: scale(1);

	transition:
		transform 180ms ease;
}


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

body.jr-dark-commerce
	.jr-package-compare
	.package-title {
	display: flex;

	min-height: 5rem;

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

	margin:
		0
		0
		0.85rem;

	color: var(--jr-text);

	font-size: 0.92rem;
	font-weight: 650;
	line-height: 1.45;

	text-align: center;
}


body.jr-dark-commerce
	.jr-package-compare
	.package-title
	a {
	color: inherit;

	text-decoration: none;

	transition:
		color 180ms ease;
}


/* ==========================================================================
   Package price
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-price {
	margin-top: auto;

	color: var(--jr-text);

	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.3;
}


/* ==========================================================================
   Product column dividers
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table
	th:not(.feature-col),
body.jr-dark-commerce
	.jr-package-compare
	.package-table
	td:not(.feature-col) {
	border-left: 1px solid var(--jr-compare-line);

	text-align: center;
}


/* ==========================================================================
   Featured column
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table
	.featured-column {
	background:
		linear-gradient(
			180deg,
			var(--jr-compare-featured-strong),
			var(--jr-compare-featured)
		);
}


body.jr-dark-commerce
	.jr-package-compare
	.package-table
	thead
	th.featured-column {
	box-shadow:
		inset 0 2px 0 rgba(69, 217, 107, 0.72);
}


/* ==========================================================================
   Best Value status
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table
	thead
	th.featured-column::after {
	position: absolute;
	top: 0.7rem;
	right: 0.8rem;

	padding:
		0.4rem
		0.65rem;

	border: 1px solid rgba(69, 217, 107, 0.48);
	border-radius: 0;

	background:
		rgba(4, 14, 11, 0.94);

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

	content: "BEST VALUE";

	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	line-height: 1;

	text-transform: uppercase;

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


/* ==========================================================================
   Feature rows
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table
	tbody
	th,
body.jr-dark-commerce
	.jr-package-compare
	.package-table
	tbody
	td {
	height: 3.6rem;

	padding:
		0.8rem
		1.15rem;

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

	background-color: var(--jr-compare-row);

	color: var(--jr-text);

	vertical-align: middle;

	transition:
		background-color 160ms ease;
}


/* ==========================================================================
   Alternating feature rows
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table
	tbody
	tr:nth-child(even)
	> :not(.featured-column) {
	background-color: var(--jr-compare-row-alt);
}


/* ==========================================================================
   Feature labels
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table
	tbody
	th.feature-col {
	color: var(--jr-text-soft);

	font-size: 0.92rem;
	font-weight: 650;
	letter-spacing: 0.005em;
	line-height: 1.35;
}


/* ==========================================================================
   Tick icon
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table
	td.tick::before,
body.jr-dark-commerce
	.jr-package-compare
	.package-card__list
	.tick::before {
	display: inline-block;

	width: 1.3rem;
	height: 1.3rem;

	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345d96b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17L4 12'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;

	content: "";

	filter:
		drop-shadow(0 0 0.35rem rgba(69, 217, 107, 0.15));

	vertical-align: middle;
}


/* ==========================================================================
   Cross icon
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table
	td.cross::before,
body.jr-dark-commerce
	.jr-package-compare
	.package-card__list
	.cross::before {
	display: inline-block;

	width: 1.15rem;
	height: 1.15rem;

	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e85b5b' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18'/%3E%3Cpath d='M6 6L18 18'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;

	content: "";

	opacity: 0.82;

	vertical-align: middle;
}


/* ==========================================================================
   Row hover
   ========================================================================== */

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

	body.jr-dark-commerce
		.jr-package-compare
		.package-table
		tbody
		tr:hover
		> :not(.featured-column) {
		background-color: rgba(111, 203, 255, 0.045);
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-table
		tbody
		tr:hover
		> .featured-column {
		background-color: rgba(69, 217, 107, 0.08);
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-image:hover {
		border-color: rgba(69, 217, 107, 0.36);

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


	body.jr-dark-commerce
		.jr-package-compare
		.package-image:hover
		img {
		transform: scale(1.025);
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-title
		a:hover {
		color: var(--jr-green-light);
	}
}


/* ==========================================================================
   Table footer
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table
	tfoot
	th,
body.jr-dark-commerce
	.jr-package-compare
	.package-table
	tfoot
	td {
	padding:
		1.25rem
		1rem;

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

	background:
		rgba(4, 9, 15, 0.72);
}


/* ==========================================================================
   Package action buttons
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table__action
	a.button,
body.jr-dark-commerce
	.jr-package-compare
	.package-card__action {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	display: inline-flex;

	min-height: 3rem;

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

	padding:
		0.8rem
		1.4rem;

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

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

	color: #f7f9fc;

	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	line-height: 1.1;

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

	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);

	transform: translateY(0);

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


/* ==========================================================================
   Button technical corner
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table__action
	a.button::after,
body.jr-dark-commerce
	.jr-package-compare
	.package-card__action::after {
	position: absolute;
	right: 0.4rem;
	bottom: 0.35rem;

	width: 0.4rem;
	height: 0.4rem;

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

	content: "";

	pointer-events: none;
}


/* ==========================================================================
   Featured primary action
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-table__action.featured-column
	a.button,
body.jr-dark-commerce
	.jr-package-compare
	.package-card--featured
	.package-card__action {
	border-color: rgba(239, 196, 109, 0.78);

	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
	.jr-package-compare
	.package-table__action.featured-column
	a.button::after,
body.jr-dark-commerce
	.jr-package-compare
	.package-card--featured
	.package-card__action::after {
	border-right-color: rgba(5, 7, 10, 0.62);
	border-bottom-color: rgba(5, 7, 10, 0.62);
}


/* ==========================================================================
   Button hover
   ========================================================================== */

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

	body.jr-dark-commerce
		.jr-package-compare
		.package-table__action:not(.featured-column)
		a.button:hover,
	body.jr-dark-commerce
		.jr-package-compare
		.package-card:not(.package-card--featured)
		.package-card__action:hover {
		border-color: rgba(69, 217, 107, 0.68);

		color: #fff;

		filter: brightness(1.08);

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

		transform: translateY(-2px);
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-table__action.featured-column
		a.button:hover,
	body.jr-dark-commerce
		.jr-package-compare
		.package-card--featured
		.package-card__action: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);
	}
}


/* ==========================================================================
   Keyboard focus
   ========================================================================== */

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


/* ==========================================================================
   Mobile comparison hidden by default
   ========================================================================== */

body.jr-dark-commerce
	.jr-package-compare
	.package-mobile {
	display: none;
}


/* ==========================================================================
   Tablet / mobile layout
   ========================================================================== */

@media (max-width: 900px) {

	body.jr-dark-commerce
		.jr-package-compare
		.package-table-wrapper {
		display: none;
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-mobile {
		position: relative;

		display: block;

		width: 100%;
	}
}


/* ==========================================================================
   Mobile slider track
   ========================================================================== */

@media (max-width: 900px) {

	body.jr-dark-commerce
		.jr-package-compare
		.package-mobile__track {
		display: grid;

		grid-auto-flow: column;
		grid-auto-columns: minmax(18rem, 88%);

		gap: 14px;

		overflow-x: auto;
		overscroll-behavior-inline: contain;

		width: 100%;

		margin: 0;

		padding:
			0.75rem
			1rem
			1.35rem;

		scroll-padding-left: 1rem;
		scroll-snap-type: inline mandatory;

		scrollbar-width: none;

		-webkit-overflow-scrolling: touch;
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-mobile__track::-webkit-scrollbar {
		display: none;
	}
}


/* ==========================================================================
   Recommended package first on mobile
   ========================================================================== */

@media (max-width: 900px) {

	body.jr-dark-commerce
		.jr-package-compare
		.package-mobile__track
		.package-card:nth-child(1) {
		order: 3;
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-mobile__track
		.package-card:nth-child(2) {
		order: 2;
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-mobile__track
		.package-card:nth-child(3) {
		order: 1;
	}
}


/* ==========================================================================
   Mobile package card
   ========================================================================== */

@media (max-width: 900px) {

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

		scroll-snap-align: start;

		border: 1px solid rgba(111, 203, 255, 0.24);
		border-radius: 0;

		background:
			linear-gradient(
				135deg,
				rgba(255, 255, 255, 0.025),
				transparent 38%
			),
			radial-gradient(
				circle at 100% 0,
				rgba(111, 203, 255, 0.055),
				transparent 17rem
			),
			rgba(7, 13, 21, 0.78);

		color: var(--jr-text);

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


	body.jr-dark-commerce
		.jr-package-compare
		.package-card::before {
		position: absolute;
		top: -1px;
		left: -1px;
		z-index: 3;

		width: 4rem;
		height: 1rem;

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

		content: "";

		pointer-events: none;
	}


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

		width: 1rem;
		height: 1rem;

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

		content: "";

		pointer-events: none;
	}
}


/* ==========================================================================
   Featured mobile package
   ========================================================================== */

@media (max-width: 900px) {

	body.jr-dark-commerce
		.jr-package-compare
		.package-card--featured {
		border-color: rgba(69, 217, 107, 0.38);

		background:
			linear-gradient(
				135deg,
				rgba(69, 217, 107, 0.055),
				transparent 40%
			),
			radial-gradient(
				circle at 100% 0,
				rgba(111, 203, 255, 0.055),
				transparent 17rem
			),
			rgba(7, 13, 21, 0.82);
	}
}


/* ==========================================================================
   Mobile card header
   ========================================================================== */

@media (max-width: 900px) {

	body.jr-dark-commerce
		.jr-package-compare
		.package-card__head {
		position: relative;

		padding:
			3.25rem
			1.15rem
			1.25rem;

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

		background: transparent;

		text-align: center;
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-card
		.package-image {
		height: 17rem;
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-card
		.package-title {
		min-height: 0;

		margin-bottom: 0.9rem;

		font-size: 0.95rem;
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-card
		.package-price {
		font-size: 1.3rem;
	}
}


/* ==========================================================================
   Mobile package identifiers
   ========================================================================== */

@media (max-width: 900px) {

	body.jr-dark-commerce
		.jr-package-compare
		.package-card__head::before {
		position: absolute;
		top: 1rem;
		left: 1rem;

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

		font-size: 0.68rem;
		font-weight: 750;
		letter-spacing: 0.13em;
		line-height: 1;

		text-transform: uppercase;
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-card:nth-child(1)
		.package-card__head::before {
		content: "PACKAGE 01";
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-card:nth-child(2)
		.package-card__head::before {
		content: "PACKAGE 02";
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-card:nth-child(3)
		.package-card__head::before {
		color: rgba(69, 217, 107, 0.7);

		content: "PACKAGE 03";
	}
}


/* ==========================================================================
   Mobile Best Value badge
   ========================================================================== */

@media (max-width: 900px) {

	body.jr-dark-commerce
		.jr-package-compare
		.package-card__badge {
		position: absolute;
		top: 0.7rem;
		right: 0.75rem;
		z-index: 4;

		padding:
			0.4rem
			0.6rem;

		border: 1px solid rgba(69, 217, 107, 0.48);
		border-radius: 0;

		background:
			rgba(4, 14, 11, 0.94);

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

		font-size: 0.62rem;
		font-weight: 800;
		letter-spacing: 0.1em;
		line-height: 1;

		text-transform: uppercase;

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


/* ==========================================================================
   Mobile feature list
   ========================================================================== */

@media (max-width: 900px) {

	body.jr-dark-commerce
		.jr-package-compare
		.package-card__list {
		margin: 0;
		padding: 0;

		list-style: none;
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-card__list
		li {
		display: flex;

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

		gap: 1rem;

		margin: 0;

		padding:
			0.9rem
			1.1rem;

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

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

		font-size: 0.92rem;
		font-weight: 600;
		line-height: 1.35;
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-card__list
		li:nth-child(even) {
		background:
			rgba(111, 203, 255, 0.018);
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-card--featured
		.package-card__list
		li {
		background:
			rgba(69, 217, 107, 0.018);
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-card__list
		li:last-child {
		padding:
			1.1rem;

		border-bottom: 0;

		background:
			rgba(2, 6, 9, 0.46);
	}
}


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

@media (max-width: 900px) {

	body.jr-dark-commerce
		.jr-package-compare
		.package-card__action {
		width: 100%;
	}
}


/* ==========================================================================
   Slider navigation arrows
   ========================================================================== */

@media (max-width: 900px) {

	body.jr-dark-commerce
		.jr-package-compare
		.package-arrow {
		position: absolute;
		top: 14rem;
		z-index: 8;

		display: grid;

		width: 2.75rem;
		height: 2.75rem;

		place-items: center;

		padding: 0;

		border: 1px solid rgba(152, 169, 192, 0.46);
		border-radius: 50%;

		background:
			linear-gradient(
				145deg,
				rgba(20, 28, 40, 0.97),
				rgba(5, 10, 16, 0.97)
			);

		color: var(--jr-text);

		box-shadow:
			0 0.75rem 1.5rem rgba(0, 0, 0, 0.32),
			inset 0 1px 0 rgba(255, 255, 255, 0.06);

		cursor: pointer;

		transform: translateY(-50%);

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


	body.jr-dark-commerce
		.jr-package-compare
		.package-arrow
		svg {
		display: block;

		width: 1rem;
		height: 1rem;

		color: currentcolor;
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-arrow--left {
		left: 0.35rem;
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-arrow--right {
		right: 0.35rem;
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-arrow.disabled {
		display: none;
	}
}


/* ==========================================================================
   Slider navigation hover
   ========================================================================== */

@media (max-width: 900px) and (hover: hover) and (pointer: fine) {

	body.jr-dark-commerce
		.jr-package-compare
		.package-arrow:hover {
		border-color: rgba(69, 217, 107, 0.62);

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

		box-shadow:
			0 0.85rem 1.7rem rgba(0, 0, 0, 0.34),
			0 0 1rem rgba(45, 166, 83, 0.12);
	}
}


/* ==========================================================================
   Small mobile
   ========================================================================== */

@media (max-width: 480px) {

	body.jr-dark-commerce
		.jr-package-compare
		.package-mobile__track {
		grid-auto-columns: 92%;

		padding-inline: 0;

		scroll-padding-left: 0.75rem;
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-card
		.package-image {
		height: 14.5rem;
	}


	body.jr-dark-commerce
		.jr-package-compare
		.package-arrow {
		top: 12.75rem;
	}
}


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

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

	body.jr-dark-commerce
		.jr-package-compare
		.package-image,
	body.jr-dark-commerce
		.jr-package-compare
		.package-image
		img,
	body.jr-dark-commerce
		.jr-package-compare
		.package-title
		a,
	body.jr-dark-commerce
		.jr-package-compare
		.package-table__action
		a.button,
body.jr-dark-commerce
		.jr-package-compare
		.package-card__action,
	body.jr-dark-commerce
		.jr-package-compare
		.package-arrow {
		transition: none;
	}
}

body.jr-dark-commerce.jr-page-package-compare .entry-header::after {
	content: none;
}