/**
 * Jedi-Robe Returns Policy page.
 *
 * Presents the Returns Policy as an open dark sci-fi editorial interface.
 * The introduction remains unboxed, the assistance area uses one restrained
 * interface panel, warning notices retain their amber treatment, and policy
 * information is displayed as a clean technical list.
 *
 * Existing Elementor HTML, shared Jedi-Robe typography, heading styles and
 * button components are preserved.
 *
 * @package Jedi_Theme
 * @subpackage Pages
 * @since 1.0.0
 */


/* ==========================================================================
   Full-width page layout
   ========================================================================== */

body.jr-dark-commerce .jr-page-section.jr-returns-intro {
    margin: 0;
}

body.jr-dark-commerce
	:is(
		.jr-returns-intro,
		.jr-returns-section
	)
	> .jr-page-shell--full {
	--width: 100%;

	position: relative;
	z-index: 1;

	width: 100%;
	max-width: none;

	margin: 0;
	padding: 0;

	border: 0;

	background: transparent;
	box-shadow: none;
}


/* ==========================================================================
   Open introduction
   ========================================================================== */

/**
 * Keep the introductory copy directly on the shared galactic page canvas.
 */
body.jr-dark-commerce
	.jr-returns-intro
	> .jr-page-shell--full {
	display: flex;

	flex-direction: column;

	gap: clamp(1.5rem, 2.5vw, 2.4rem);
}


body.jr-dark-commerce
	.jr-returns-intro
	> .jr-page-shell--full
	> .elementor-widget-text-editor {
	width: 100%;
	max-width: 70rem;

	margin: 0;
	padding: 0;

	border: 0;

	background: transparent;
	box-shadow: none;
}


body.jr-dark-commerce
	.jr-returns-intro
	> .jr-page-shell--full
	> .elementor-widget-text-editor
	p {
	margin: 0;

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


body.jr-dark-commerce
	.jr-returns-intro
	> .jr-page-shell--full
	> .elementor-widget-text-editor
	p + p {
	margin-top: 0.75rem;
}


/**
 * Returns assistance interface.
 *
 * Uses Elementor's existing Flexbox container structure instead of converting
 * the container to CSS Grid. The panel remains content-driven so its height
 * expands naturally with the help copy while the actions remain vertically
 * centred on desktop.
 *
 * Existing shared Jedi-Robe button styles remain unchanged.
 *
 * @package Jedi_Theme
 * @subpackage Pages
 * @since 1.0.0
 */


/* ==========================================================================
   Returns assistance panel
   ========================================================================== */

body.jr-dark-commerce
	.jr-returns-intro
	> .jr-page-shell--full
	> .e-con.e-flex {
	--min-height: 0px;

	position: relative;
	isolation: isolate;

	display: flex;

	flex-direction: column;
	flex-wrap: nowrap;

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

	gap: 1.15rem;

	width: 100%;
	height: auto;
	min-height: 0;

	margin: 0;

	padding:
		1.35rem
		clamp(1.25rem, 2.5vw, 2rem);

	overflow: visible;

	box-sizing: border-box;

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

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.025),
			transparent 42%
		),
		radial-gradient(
			circle at 100% 0,
			rgba(111, 203, 255, 0.045),
			transparent 18rem
		),
		rgba(8, 14, 22, 0.46);

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


/* ==========================================================================
   Panel upper signal
   ========================================================================== */

body.jr-dark-commerce
	.jr-returns-intro
	> .jr-page-shell--full
	> .e-con.e-flex::before {
	position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    z-index: 2;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(45, 166, 83, 0.12) 0%, rgba(69, 217, 107, 0.68) 18%, var(--jr-green-light) 50%, rgba(69, 217, 107, 0.68) 82%, rgba(45, 166, 83, 0.12) 100%);
    box-shadow: 0 0 1.25rem rgba(45, 166, 83, 0.22);
    content: "";
    pointer-events: none;
}


/* ==========================================================================
   Panel technical corner
   ========================================================================== */

body.jr-dark-commerce
	.jr-returns-intro
	> .jr-page-shell--full
	> .e-con.e-flex::after {
	position: absolute;
	right: 0.65rem;
	bottom: 0.65rem;

	width: 0.75rem;
	height: 0.75rem;

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

	content: "";

	pointer-events: none;
}


/* ==========================================================================
   Returns assistance copy
   ========================================================================== */

/**
 * Keep the text widget in normal document flow so its complete height
 * contributes to the height of the parent assistance panel.
 */
body.jr-dark-commerce
	.jr-returns-intro
	> .jr-page-shell--full
	> .e-con.e-flex
	> .jr-returns-help {
	width: 100%;
	height: auto;
	min-width: 0;
	min-height: 0;

	margin: 0;
	padding: 0;

	overflow: visible;

	border: 0;

	background: transparent;
	box-shadow: none;
}

/* ==========================================================================
   Assistance heading
   ========================================================================== */

body.jr-dark-commerce
	.jr-returns-help
	h6 {
	display: flex;

	align-items: center;

	gap: 0.7rem;

	margin: 0 0 0.5rem;

	color: var(--jr-text);

	font-weight: 750;
	line-height: 1.35;
}


/**
 * Small sci-fi signal beside the heading.
 */
body.jr-dark-commerce
	.jr-returns-help
	h6::before {
	flex: 0 0 auto;

	width: 1.7rem;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			var(--jr-green-light),
			rgba(69, 217, 107, 0.12)
		);

	box-shadow:
		0 0 0.6rem rgba(45, 166, 83, 0.14);

	content: "";
}


/* ==========================================================================
   Assistance paragraphs
   ========================================================================== */

body.jr-dark-commerce
	.jr-returns-help
	p {
	margin: 0;

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

	line-height: 1.55;
}


body.jr-dark-commerce
	.jr-returns-help
	p + p {
	margin-top: 0.35rem;
}


/* ==========================================================================
   Returns actions
   ========================================================================== */

/**
 * Actions occupy only the horizontal space required by the two buttons.
 */
body.jr-dark-commerce
	.jr-returns-intro
	> .jr-page-shell--full
	> .e-con.e-flex
	> .jr-actions {
	display: flex;

	flex: 0 0 auto;
	flex-direction: row;
	flex-wrap: wrap;

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

	gap: 0.75rem;

	width: 100%;
	height: auto;
	min-height: 0;

	margin: 0.1rem 0 0;
	padding: 0;

	overflow: visible;

	border: 0;

	background: transparent;
}

/**
 * Prevent Elementor button widgets from stretching unexpectedly inside the
 * horizontal desktop action group.
 */
body.jr-dark-commerce
	.jr-returns-intro
	.jr-actions
	> .elementor-widget-button {
	flex: 0 0 auto;

	width: auto;

	margin: 0;
}


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

@media (max-width: 960px) {

	body.jr-dark-commerce
		.jr-returns-intro
		> .jr-page-shell--full
		> .e-con.e-flex {
		flex-direction: column;

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

		gap: 1.25rem;
	}


	body.jr-dark-commerce
		.jr-returns-intro
		> .jr-page-shell--full
		> .e-con.e-flex
		> .jr-returns-help {
		align-self: stretch;

		width: 100%;
	}


	body.jr-dark-commerce
		.jr-returns-intro
		> .jr-page-shell--full
		> .e-con.e-flex
		> .jr-actions {
		align-self: stretch;

		width: 100%;

		justify-content: flex-start;
	}
}


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

@media (max-width: 720px) {

	body.jr-dark-commerce
		.jr-returns-intro
		> .jr-page-shell--full
		> .e-con.e-flex {
		gap: 1rem;

		padding:
			1.15rem
			1rem;
	}


	body.jr-dark-commerce
		.jr-returns-intro
		.jr-actions {
		flex-direction: column;

		align-items: stretch;
	}


	body.jr-dark-commerce
		.jr-returns-intro
		.jr-actions
		> .elementor-widget-button {
		width: 100%;
	}
}


/* ==========================================================================
   Policy sections
   ========================================================================== */

/**
 * Keep policy sections open rather than wrapping each section in a card.
 */
body.jr-dark-commerce
	.jr-returns-section {
	position: relative;

	overflow: visible;

	border: 0;

	background: transparent;
	box-shadow: none;
}


body.jr-dark-commerce
	.jr-returns-section
	> .jr-page-shell--full {
	display: flex;

	flex-direction: column;

	gap: clamp(1.15rem, 2vw, 1.8rem);
}


/* ==========================================================================
   Section heading
   ========================================================================== */

/**
 * Heading appearance remains owned by the shared jr-heading_left component.
 */
body.jr-dark-commerce
	.jr-returns-section
	.jr-heading_left {
	width: 100%;

	margin: 0;
	padding: 0;
}


/* ==========================================================================
   Important returns notice
   ========================================================================== */

/**
 * Preserve the approved amber warning treatment.
 */
body.jr-dark-commerce
	.jr-returns-notice {
	--e-icon-list-divider-width: 0;
	--e-icon-list-divider-color: transparent;

	display: block;

	width: 100%;

	margin: 0;
	padding: 0;
}


body.jr-dark-commerce
	.jr-returns-notice
	.elementor-widget-container {
	width: 100%;

	margin: 0;
	padding: 0;
}


body.jr-dark-commerce
	.jr-returns-notice
	.elementor-icon-list-items {
	display: block;

	width: 100%;

	margin: 0;
	padding: 0;

	border: 0;
	border-block: 0;

	list-style: none;
}


/* ==========================================================================
   Notice row
   ========================================================================== */

body.jr-dark-commerce
	.jr-returns-notice
	.elementor-icon-list-item {
	position: relative;

	display: grid;

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

	gap: 0.9rem;
	align-items: center;

	width: 100%;

	margin: 0;

	padding:
		1rem
		clamp(1rem, 2vw, 1.4rem);

	border-top: 1px solid rgba(226, 164, 71, 0.28);
	border-right: 1px solid rgba(226, 164, 71, 0.08);
	border-bottom: 1px solid rgba(226, 164, 71, 0.2);
	border-left: 2px solid var(--jr-warning);

	background:
		linear-gradient(
			90deg,
			rgba(226, 164, 71, 0.1) 0%,
			rgba(226, 164, 71, 0.04) 48%,
			rgba(226, 164, 71, 0.012) 78%,
			transparent 100%
		);

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

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


/**
 * Disable any Elementor Icon List divider on the notice.
 */
body.jr-dark-commerce
	.jr-returns-notice.elementor-widget-icon-list
	.elementor-icon-list-item::after {
	display: none;

	width: 0;
	height: 0;

	border: 0;
	border-block: 0;

	background: none;

	content: none;
}


/* ==========================================================================
   Notice icon
   ========================================================================== */

body.jr-dark-commerce
	.jr-returns-notice
	.elementor-icon-list-icon {
	display: grid;

	width: 2.25rem;
	height: 2.25rem;

	place-items: center;

	margin: 0;
	padding: 0;

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


body.jr-dark-commerce
	.jr-returns-notice
	.elementor-icon-list-icon
	svg {
	display: block;

	width: 1.15rem;
	height: 1.15rem;

	color: currentcolor;

	fill: currentcolor;
	stroke: none;
}


body.jr-dark-commerce
	.jr-returns-notice
	.elementor-icon-list-icon
	svg
	path {
	fill: currentcolor;
	stroke: none;
}


/* ==========================================================================
   Notice copy
   ========================================================================== */

body.jr-dark-commerce
	.jr-returns-notice
	.elementor-icon-list-text {
	display: block;

	min-width: 0;

	color: var(--jr-text);

	line-height: 1.6;
}


/* ==========================================================================
   Policy technical list
   ========================================================================== */

/**
 * Reset Elementor's Icon List divider system here.
 *
 * Elementor provides its own optional divider for Icon List widgets. These
 * variables and explicit border resets stop that divider from leaking through
 * the custom Returns Policy presentation.
 */
body.jr-dark-commerce
	.jr-returns-grid {
	--e-icon-list-divider-width: 0;
	--e-icon-list-divider-style: none;
	--e-icon-list-divider-color: transparent;

	position: relative;

	width: 100%;

	margin: 0;
	padding: 0;

	border: 0;
	border-block: 0;

	background: transparent;
	box-shadow: none;
}


body.jr-dark-commerce
	.jr-returns-grid
	.elementor-widget-container {
	width: 100%;

	margin: 0;
	padding: 0;

	border: 0;
	border-block: 0;
}


body.jr-dark-commerce
    .shoptimizer-archive
	.jr-returns-grid
	.elementor-icon-list-items {
	display: grid;

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

	gap: 0;

	width: 100%;

	margin: 0;
	padding: 0;

	border: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-left: 0;
	border-block: 0;

	list-style: none;

	background: transparent;
}


/* ==========================================================================
   Individual policy row
   ========================================================================== */

body.jr-dark-commerce
    .shoptimizer-archive
	.jr-returns-grid
    .elementor-icon-list-items
	.elementor-icon-list-item {
	position: relative;
	isolation: isolate;

	display: grid;

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

	gap: 0;
	align-items: start;

	width: 100%;
	min-width: 0;

	margin: 0;

	padding:
		clamp(1rem, 1.5vw, 1.3rem)
		0.5rem;

	border: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-left: 0;
	border-block: 0;

	background: transparent;
	box-shadow: none;

	transition:
		background 180ms ease;
}

body.jr-dark-commerce
    .shoptimizer-archive
	.jr-returns-grid
    .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child) {
    margin-block-start: 5px;
}

/* ==========================================================================
   Policy separator
   ========================================================================== */

/**
 * Fully override Elementor's native Icon List divider.
 *
 * Elementor can draw its divider as a border on the list item's ::after
 * pseudo-element. Setting only a background here is not enough; every logical
 * and physical border property is therefore reset before our own subtle line
 * is rendered.
 */
body.jr-dark-commerce
	.jr-returns-grid.elementor-widget-icon-list
	.elementor-icon-list-item:not(:last-child)::after {
	position: absolute;

	top: auto;
	right: 0;
	bottom: 0;
	left: 0;

	display: block;

	width: 100%;
	height: 1px;

	margin: 0;
	padding: 0;

	border: 0;
	border-width: 0;
	border-style: none;
	border-color: transparent;

	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-left: 0;

	border-block: 0;
	border-block-start: 0;
	border-block-end: 0;

	background:
		linear-gradient(
			90deg,
			rgba(152, 169, 192, 0.05) 0%,
			rgba(152, 169, 192, 0.14) 12%,
			rgba(152, 169, 192, 0.12) 72%,
			rgba(152, 169, 192, 0.035) 100%
		);

	box-shadow: none;

	content: "";

	pointer-events: none;

	transition:
		background 180ms ease;
}


/**
 * Never generate a line after the final policy item.
 */
body.jr-dark-commerce
	.jr-returns-grid.elementor-widget-icon-list
	.elementor-icon-list-item:last-child::after {
	display: none;

	border: 0;
	border-block: 0;

	background: none;

	content: none;
}


/* ==========================================================================
   Policy icons
   ========================================================================== */

/**
 * Keep the actual Elementor / Font Awesome SVG icons.
 *
 * No circle, no box, no green side rail and no coloured background.
 * The icon itself is neutral white so the policy copy remains the focus.
 */
body.jr-dark-commerce
	.jr-returns-grid
	.elementor-icon-list-icon {
	display: grid;

	width: 2.25rem;
	height: 2.25rem;

	place-items: center;

	margin: 0;
	padding: 0;

	border: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-left: 0;
	border-radius: 0;

	background: transparent;

	color: #fff;

	box-shadow: none;

	opacity: 0.92;

	transition:
		opacity 180ms ease;
}


body.jr-dark-commerce
	.jr-returns-grid
	.elementor-icon-list-icon
	svg {
	display: block;

	width: 1rem;
	height: 1rem;

	color: currentcolor;

	fill: currentcolor;
	stroke: none;
}


body.jr-dark-commerce
	.jr-returns-grid
	.elementor-icon-list-icon
	svg
	path {
	fill: currentcolor;
	stroke: none;
}


/* ==========================================================================
   Policy copy
   ========================================================================== */

body.jr-dark-commerce
	.jr-returns-grid
	.elementor-icon-list-text {
	display: block;

	width: 100%;
	min-width: 0;

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

	line-height: 1.6;
}


body.jr-dark-commerce
	.jr-returns-grid
	.elementor-icon-list-text
	h6 {
	margin: 0 0 0.3rem;

	color: var(--jr-text);

	font-weight: 750;
	line-height: 1.4;
}

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

@media (max-width: 960px) {

	body.jr-dark-commerce
		.jr-returns-intro
		> .jr-page-shell--full
		> .e-con {
		grid-template-columns:
			minmax(0, 1fr);

		gap: 1.4rem;

		align-items: start;
	}


	body.jr-dark-commerce
		.jr-returns-intro
		.jr-actions {
		width: 100%;

		justify-content: flex-start;
	}
}


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

@media (max-width: 720px) {

	body.jr-dark-commerce
		:is(
			.jr-returns-intro,
			.jr-returns-section
		) {
		padding-inline: 1rem;
	}


	body.jr-dark-commerce
		.jr-returns-intro
		> .jr-page-shell--full {
		gap: 1.4rem;
	}


	body.jr-dark-commerce
		.jr-returns-intro
		> .jr-page-shell--full
		> .e-con {
		padding: 1.2rem;
	}


	body.jr-dark-commerce
		.jr-returns-intro
		.jr-actions {
		flex-direction: column;

		align-items: stretch;
	}


	body.jr-dark-commerce
		.jr-returns-notice
		.elementor-icon-list-item {
		grid-template-columns:
			2rem
			minmax(0, 1fr);

		gap: 0.75rem;

		padding: 0.95rem;
	}


	body.jr-dark-commerce
		.jr-returns-notice
		.elementor-icon-list-icon {
		width: 2rem;
		height: 2rem;
	}


	body.jr-dark-commerce
		.jr-returns-grid
		.elementor-icon-list-item {
		grid-template-columns:
			2rem
			minmax(0, 1fr);

		gap: 0.7rem;

		padding:
			1rem
			0.15rem;
	}


	body.jr-dark-commerce
		.jr-returns-grid
		.elementor-icon-list-icon {
		width: 2rem;
		height: 2rem;
	}
}


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

/**
 * Respect the visitor's reduced-motion preference.
 */
@media (prefers-reduced-motion: reduce) {

	body.jr-dark-commerce
		.jr-returns-grid
		.elementor-icon-list-item,
	body.jr-dark-commerce
		.jr-returns-grid.elementor-widget-icon-list
		.elementor-icon-list-item::after,
	body.jr-dark-commerce
		.jr-returns-grid
		.elementor-icon-list-icon {
		transition: none;
	}
}

body.jr-dark-commerce .jr-page-section.jr-returns-section:last-of-type {
    margin-bottom: 0;
}