/**
 * Jedi-Robe Stormtrooper fitting guide.
 *
 * Provides the page-specific sci-fi presentation for the armour visual guide
 * and Care & Storage modules while reusing the shared instruction-step,
 * page-shell, page-section and button components.
 *
 * @package Jedi_Theme
 * @subpackage Fitting_Guide
 * @since 1.0.0
 */


/* ==========================================================================
   Visual Guide console
   ========================================================================== */

/**
 * This element is also an Elementor .e-con.
 *
 * Set Elementor's container padding variables directly so the console keeps
 * its internal spacing regardless of Elementor's generated logical padding.
 */
body.jr-dark-commerce
	.jr-page-section
	.jr-page-shell.jr-fitting-visual-panel.e-con {
	padding-top: 1.5rem;
	padding-right: 1.5rem;
	padding-bottom: 1.5rem;
	padding-left: 1.5rem;

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

	width: 100%;

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

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.025),
			transparent 32%
		),
		radial-gradient(
			circle at 100% 0,
			rgba(111, 203, 255, 0.07),
			transparent 22rem
		),
		repeating-linear-gradient(
			0deg,
			rgba(255, 255, 255, 0.008) 0,
			rgba(255, 255, 255, 0.008) 1px,
			transparent 1px,
			transparent 8px
		),
		rgba(7, 13, 21, 0.7);

	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-fitting-visual-panel::after {
	position: absolute;
	right: -1px;
	bottom: -1px;
	z-index: 5;

	width: 2.5rem;
	height: 1.25rem;

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

	content: "";

	pointer-events: none;
}


/* ==========================================================================
   Visual Guide heading
   ========================================================================== */

body.jr-dark-commerce
	.jr-fitting-visual-panel
	> .jr-heading_left {
	width: 100%;

	margin: 0;
	padding: 0;
}


body.jr-dark-commerce
	.jr-fitting-visual-panel
	> .jr-heading_left
	.elementor-widget-container {
	display: flex;

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

	gap: 1rem;

	padding:
		0
		0
		0.85rem;

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


/* ==========================================================================
   Visual Guide title
   ========================================================================== */

body.jr-dark-commerce
	.jr-fitting-visual-panel
	> .jr-heading_left
	.elementor-heading-title {
	margin: 0;
	padding: 0;

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


/* ==========================================================================
   Technical heading identifier
   ========================================================================== */

body.jr-dark-commerce
	.jr-fitting-visual-panel
	> .jr-heading_left
	.elementor-widget-container::after {
	flex: 0 0 auto;

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

	content: "ARMOUR REFERENCE //";

	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1;

	text-transform: uppercase;
}


/* ==========================================================================
   Visual Guide description
   ========================================================================== */

body.jr-dark-commerce
	.jr-fitting-visual-panel
	> .elementor-widget-text-editor {
	width: 100%;

	margin: 0;
	padding: 0;
}


body.jr-dark-commerce
	.jr-fitting-visual-panel
	.section-header {
	margin: 0;
	padding: 0;
}


body.jr-dark-commerce
	.jr-fitting-visual-panel
	.section-description {
	margin: 0;

	padding: 0;

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


/* ==========================================================================
   Reference display grid
   ========================================================================== */

body.jr-dark-commerce
	.jr-fitting-visual-grid.e-con {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;

	display: grid;

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

	gap: 1rem;

	width: 100%;

	margin-top: 1.4rem;

	align-items: stretch;
}


/* ==========================================================================
   Reference display bay
   ========================================================================== */

body.jr-dark-commerce
	.jr-fitting-visual-card.e-con {
	--padding-top: 0.7rem;
	--padding-right: 0.7rem;
	--padding-bottom: 0.7rem;
	--padding-left: 0.7rem;

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

	display: flex;

	min-width: 0;

	flex-direction: column;

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

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.025),
			transparent 40%
		),
		rgba(2, 6, 9, 0.78);

	box-shadow:
		0 0.75rem 1.75rem rgba(0, 0, 0, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.025);

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


/* ==========================================================================
   Display bay upper-left lock
   ========================================================================== */

body.jr-dark-commerce
	.jr-fitting-visual-card::before {
	position: absolute;
	top: -1px;
	left: -1px;
	z-index: 4;

	width: 2.75rem;
	height: 0.8rem;

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

	content: "";

	pointer-events: none;
}


/* ==========================================================================
   Move display label above artwork
   ========================================================================== */

body.jr-dark-commerce
	.jr-fitting-visual-card
	.elementor-widget-text-editor {
	order: -1;

	width: 100%;

	margin: 0;
	padding: 0;
}


/* ==========================================================================
   Display identification strip
   ========================================================================== */

body.jr-dark-commerce
	.jr-fitting-visual-card
	.elementor-widget-text-editor
	p {
	position: relative;

	display: flex;

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

	gap: 1rem;

	width: 100%;

	margin: 0;

	padding:
		0.25rem
		0.15rem
		0.7rem
		1rem;

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

	color: var(--jr-text);

	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	line-height: 1.25;

	text-align: left;
	text-transform: uppercase;
}


/* Green status diamond. */
body.jr-dark-commerce
	.jr-fitting-visual-card
	.elementor-widget-text-editor
	p::before {
	position: absolute;
	top: 0.55rem;
	left: 0.15rem;

	width: 0.35rem;
	height: 0.35rem;

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

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

	content: "";

	transform: rotate(45deg);
}


/* ==========================================================================
   Display reference number
   ========================================================================== */

body.jr-dark-commerce
	.jr-fitting-visual-card:first-child
	.elementor-widget-text-editor
	p::after {
	color: rgba(111, 203, 255, 0.48);

	content: "VIEW 01";

	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}


body.jr-dark-commerce
	.jr-fitting-visual-card:last-child
	.elementor-widget-text-editor
	p::after {
	color: rgba(111, 203, 255, 0.48);

	content: "VIEW 02";

	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}


/* ==========================================================================
   Image widget
   ========================================================================== */

body.jr-dark-commerce
	.jr-fitting-visual-card
	.elementor-widget-image {
	width: 100%;

	margin:
		0.7rem
		0
		0;
}


body.jr-dark-commerce
	.jr-fitting-visual-card
	.elementor-widget-image
	.elementor-widget-container {
	width: 100%;
}


body.jr-dark-commerce
	.jr-fitting-visual-card
	.elementor-widget-image
	a {
	display: block;

	overflow: hidden;

	width: 100%;

	padding: 0.3rem;

	border: 1px solid rgba(111, 203, 255, 0.14);

	background:
		#050a10;

	cursor: zoom-in;
}


/* ==========================================================================
   Reference artwork
   ========================================================================== */

body.jr-dark-commerce
	.jr-fitting-visual-card
	img {
	display: block;

	width: 100%;
	height: auto;

	margin: 0;

	background-color: #e1e3e5;

	filter:
		brightness(0.9)
		contrast(1.05);

	transition:
		filter 180ms ease;
}


/* ==========================================================================
   Visual Guide hover
   ========================================================================== */

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

	body.jr-dark-commerce
		.jr-fitting-visual-card:hover {
		border-color: rgba(69, 217, 107, 0.38);

		box-shadow:
			0 1rem 2rem rgba(0, 0, 0, 0.2),
			0 0 1.25rem rgba(45, 166, 83, 0.05),
			inset 0 1px 0 rgba(255, 255, 255, 0.03);
	}


	body.jr-dark-commerce
		.jr-fitting-visual-card:hover
		img {
		filter:
			brightness(0.94)
			contrast(1.055);
	}
}


/* ==========================================================================
   Fitting & Assembly Instructions layout
   ========================================================================== */

/**
 * Page-specific layout for the shared instruction-step component.
 *
 * The shared instruction-steps.css file continues to own card surfaces,
 * borders, colours and interaction states. This fitting-guide stylesheet
 * controls only the grid, spacing and scale required by this page.
 *
 * The Elementor-generated class is retained as an immediate fallback. Add the
 * semantic class `jr-fitting-steps-grid` to this Elementor grid when practical
 * so the layout does not depend on Elementor's generated element class.
 *
 * @package    Jedi_Theme
 * @subpackage Fitting_Guide
 * @since      1.1.0
 */
body.jr-dark-commerce
	:is(
		.jr-fitting-steps-grid,
		.elementor-element-a2af479
	).e-grid.e-con {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;

	display: grid;

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

	gap: 1rem;

	width: 100%;

	align-items: stretch;
}


body.jr-dark-commerce
	:is(
		.jr-fitting-steps-grid,
		.elementor-element-a2af479
	)
	> .elementor-widget-text-editor {
	min-width: 0;
	height: 100%;
}


body.jr-dark-commerce
	:is(
		.jr-fitting-steps-grid,
		.elementor-element-a2af479
	)
	> .elementor-widget-text-editor
	> .elementor-widget-container {
	height: 100%;
}


/* ==========================================================================
   Care & Storage layout
   ========================================================================== */

body.jr-dark-commerce
	.jr-fitting-care-grid {
	display: grid;

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

	gap: 1.5rem;

	width: 100%;

	align-items: stretch;
}


/* ==========================================================================
   Care panel
   ========================================================================== */

body.jr-dark-commerce
	.jr-fitting-care-card {
	position: relative;
	isolation: isolate;

	padding:
		1.4rem
		1.5rem;

	border: 1px solid rgba(111, 203, 255, 0.2);
	border-radius: 0.375rem;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.025),
			transparent 44%
		),
		radial-gradient(
			circle at 100% 0,
			rgba(111, 203, 255, 0.045),
			transparent 13rem
		),
		rgba(10, 17, 27, 0.48);

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


/* ==========================================================================
   Care panel signal rail
   ========================================================================== */

body.jr-dark-commerce
	.jr-fitting-care-card::before {
	position: absolute;
	top: -1px;
	left: 0.75rem;

	width: 3.5rem;
	height: 1px;

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

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

	content: "";

	pointer-events: none;
}


/* ==========================================================================
   Care headings
   ========================================================================== */

body.jr-dark-commerce
    .shoptimizer-archive
	.jr-fitting-care-card
	h3.elementor-icon-box-title {
	margin:
		0
		0
		1rem;

	padding: 0;

	color: var(--jr-text);

	font-size: 1.6rem;
	font-weight: 720;
	line-height: 1.3;
}


/* ==========================================================================
   Care lists
   ========================================================================== */

body.jr-dark-commerce
	.jr-fitting-care-card
	ul {
	margin: 0;
	padding: 0;

	list-style: none;
}


body.jr-dark-commerce
	.jr-fitting-care-card
	li {
	position: relative;

	margin: 0;

	padding:
		0.7rem
		0
		0.7rem
		1.4rem;

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

	color: var(--jr-text);

	font-size: 1rem;
}


body.jr-dark-commerce
	.jr-fitting-care-card
	li:last-child {
	border-bottom: 0;
}


body.jr-dark-commerce
	.jr-fitting-care-card
	li::before {
	position: absolute;
	top: 0.72rem;
	left: 0;

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

	content: "›";

	font-size: 1rem;
	font-weight: 800;
	line-height: 1.4;
}


/* ==========================================================================
   Compact desktop / medium screens
   ========================================================================== */

/**
 * Reduce the fitting instruction cards before the page reaches tablet width.
 * The grid moves from three columns to two so longer instruction titles and
 * body copy retain comfortable line lengths.
 *
 * @package    Jedi_Theme
 * @subpackage Fitting_Guide
 * @since      1.1.0
 */
@media (max-width: 1200px) {

	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		).e-grid.e-con {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 0.85rem;
	}


	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		.step-card {
		padding: 1.35rem;
	}


	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		.step-header {
		gap: 0.9rem;

		margin-bottom: 0.9rem;
	}


	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		.step-number {
		width: 2.75rem;
		height: 2.75rem;

		flex-basis: 2.75rem;

		font-size: 1.2rem;
	}


	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		.step-title {
		font-size:
			clamp(
				1.05rem,
				1rem + 0.2vw,
				1.2rem
			);

		line-height: 1.22;
	}


	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		.step-content {
		font-size: 0.94rem;
		line-height: 1.58;
	}
}


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

/**
 * Tighten both the instruction cards and Visual Guide at Shoptimizer's
 * compact 992px breakpoint while preserving two columns where content still
 * has enough room.
 *
 * @package    Jedi_Theme
 * @subpackage Fitting_Guide
 * @since      1.1.0
 */
@media (max-width: 992px) {

	body.jr-dark-commerce .jr-fitting-visual-grid.e-con {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	/* ------------------------------------------------------------------
	   Fitting & Assembly Instructions
	   ------------------------------------------------------------------ */

	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		.step-card {
		padding: 1.15rem;
	}


	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		.step-header {
		gap: 0.8rem;

		margin-bottom: 0.75rem;
	}


	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		.step-number {
		width: 2.5rem;
		height: 2.5rem;

		flex: 0 0 2.5rem;

		font-size: 1.08rem;
	}


	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		.step-title {
		font-size: 1.05rem;
		line-height: 1.2;
	}


	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		.step-content {
		font-size: 0.9rem;
		line-height: 1.52;
	}


	/* ------------------------------------------------------------------
	   Visual Guide
	   ------------------------------------------------------------------ */

	body.jr-dark-commerce
		.jr-page-section
		.jr-page-shell.jr-fitting-visual-panel.e-con {
		padding-top: 1.25rem;
		padding-right: 1.25rem;
		padding-bottom: 1.25rem;
		padding-left: 1.25rem;
	}


	body.jr-dark-commerce
		.jr-fitting-visual-grid.e-con {
		gap: 0.85rem;

		margin-top: 1.2rem;
	}


	body.jr-dark-commerce
		.jr-fitting-visual-card.e-con {
		--padding-top: 0.65rem;
		--padding-right: 0.65rem;
		--padding-bottom: 0.65rem;
		--padding-left: 0.65rem;
	}


	body.jr-dark-commerce
		.jr-fitting-visual-panel
		> .jr-heading_left
		.elementor-heading-title {
		font-size:
			clamp(
				1.45rem,
				2.8vw,
				2rem
			);

		line-height: 1.1;
	}


	body.jr-dark-commerce
		.jr-fitting-visual-card
		.elementor-widget-text-editor
		p {
		font-size: 0.68rem;
		letter-spacing: 0.065em;
	}
}


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

/**
 * Collapse the Visual Guide and fitting instructions to a single column on
 * phones. Instruction cards return to content-driven height and use a smaller
 * marker, tighter header and reduced padding so short steps do not appear
 * oversized.
 *
 * @package    Jedi_Theme
 * @subpackage Fitting_Guide
 * @since      1.1.0
 */
@media (max-width: 768px) {

	/* ------------------------------------------------------------------
	   Fitting & Assembly Instructions
	   ------------------------------------------------------------------ */

	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		).e-grid.e-con {
		grid-template-columns:
			minmax(0, 1fr);

		gap: 0.7rem;
	}


	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		> .elementor-widget-text-editor,
	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		> .elementor-widget-text-editor
		> .elementor-widget-container {
		height: auto;
	}


	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		.step-card {
		padding:
			1rem
			1rem
			1.05rem;
	}


	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		.step-header {
		gap: 0.75rem;

		margin-bottom: 0.7rem;
	}


	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		.step-number {
		width: 2.4rem;
		height: 2.4rem;

		flex: 0 0 2.4rem;

		font-size: 1rem;
	}


	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		.step-title {
		font-size:
			clamp(
				1rem,
				4.6vw,
				1.12rem
			);

		line-height: 1.2;
	}


	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		.step-content {
		font-size:
			clamp(
				0.9rem,
				3.7vw,
				0.96rem
			);

		line-height: 1.5;
	}


	body.jr-dark-commerce
		:is(
			.jr-fitting-steps-grid,
			.elementor-element-a2af479
		)
		.step-check {
		top: 0.9rem;
		right: 0.9rem;

		width: 1.75rem;
		height: 1.75rem;

		font-size: 1rem;
	}


	/* ------------------------------------------------------------------
	   Visual Guide
	   ------------------------------------------------------------------ */

	body.jr-dark-commerce
		.jr-page-section
		.jr-page-shell.jr-fitting-visual-panel.e-con {
		padding-top: 1.2rem;
		padding-right: 1rem;
		padding-bottom: 1rem;
		padding-left: 1rem;
	}


	body.jr-dark-commerce
		.jr-fitting-visual-panel
		> .jr-heading_left
		.elementor-widget-container::after {
		display: none;
	}


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


	body.jr-dark-commerce
		.jr-fitting-visual-grid {
		gap: 1rem;

		margin-top: 1.15rem;
	}


	body.jr-dark-commerce
		.jr-fitting-visual-card.e-con {
		--padding-top: 0.6rem;
		--padding-right: 0.6rem;
		--padding-bottom: 0.6rem;
		--padding-left: 0.6rem;
	}


	body.jr-dark-commerce
		.jr-fitting-visual-panel
		> .jr-heading_left
		.elementor-heading-title {
		font-size:
			clamp(
				1.3rem,
				6vw,
				1.65rem
			);
	}


	body.jr-dark-commerce
		.jr-fitting-visual-card
		.elementor-widget-text-editor
		p {
		font-size: 0.66rem;
		letter-spacing: 0.055em;
	}


	/* ------------------------------------------------------------------
	   Care & Storage
	   ------------------------------------------------------------------ */

	body.jr-dark-commerce
		.jr-fitting-care-card {
		padding:
			1.2rem
			1rem;
	}
}


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

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

	body.jr-dark-commerce
		.jr-fitting-visual-card,
	body.jr-dark-commerce
		.jr-fitting-visual-card
		img {
		transition: none;
	}
}