/**
 * Late dark-commerce utilities and Shoptimizer archive load-more controls.
 *
 * Migration-safe extraction from the canonical Jedi-Robe dark-commerce
 * stylesheet. Rule order and declarations are preserved for staging review.
 *
 * @package Jedi_Theme
 * @since   2026-08-25
 */

/* ========================================================================== 
   Section divider
   ========================================================================== */

body.jr-dark-commerce .section-divider {
    width: 100%;
    height: 1px;
    margin: 2rem 0 2.5rem;
    border: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(45, 166, 83, 0.18) 12%, var(--jr-green-light) 50%, rgba(45, 166, 83, 0.18) 88%, transparent 100%);
    box-shadow: 0 0 1rem rgba(45, 166, 83, 0.14);
}

/**
 * Shoptimizer product archive load-more controls.
 *
 * Matches the native Shoptimizer category load-more component to the
 * Jedi-Robe dark sci-fi button language used by the Reviews archive.
 * Shoptimizer remains responsible for product counts, progress and loading.
 *
 * @package    Jedi_Theme
 * @subpackage Product_Archive
 * @since      1.0.0
 */


/* ==========================================================================
   Product archive: load more
   ========================================================================== */

body.jr-dark-commerce
	.shoptimizer-load-more-wrapper {
	display: flex;

	width: 100%;
	max-width: 22rem;

	flex-direction: column;
	align-items: center;

	margin:
		clamp(2.5rem, 5vw, 4rem)
		auto
		0;

	gap: 0.75rem;
}


/* ==========================================================================
   Status
   ========================================================================== */

body.jr-dark-commerce
	.shoptimizer-load-more-wrapper
	.load-more-status {
	margin: 0;

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

	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;

	text-align: center;
}


body.jr-dark-commerce
	.shoptimizer-load-more-wrapper
	.viewed-count {
	color: var(--jr-text);

	font-weight: 700;
}


/* ==========================================================================
   Progress
   ========================================================================== */

body.jr-dark-commerce
	.shoptimizer-load-more-wrapper
	.load-more-progress {
	overflow: hidden;

	width: 100%;
	height: 0.35rem;

	margin: 12px auto;

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

	background:
		rgba(8, 15, 24, 0.82);
}


body.jr-dark-commerce
	.shoptimizer-load-more-wrapper
	.load-more-progress-bar {
	height: 100%;

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

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

	transition:
		width 240ms ease;
}


/* ==========================================================================
   Load-more button
   ========================================================================== */

body.jr-dark-commerce
	#shoptimizer-load-more-btn.button {
	position: relative;

	display: inline-flex;

	width: 100%;
	min-height: 3rem;

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

	margin: 0;
	padding:
		0.8rem
		1.4rem;

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

	background:
		linear-gradient(
			180deg,
			rgba(14, 24, 36, 0.96),
			rgba(6, 12, 20, 0.96)
		);

	color: var(--jr-text);

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

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

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

	cursor: pointer;

	transition:
		border-color 160ms ease,
		background 160ms ease,
		color 160ms ease,
		transform 160ms ease;
}


/* ==========================================================================
   Sci-fi corner
   ========================================================================== */

body.jr-dark-commerce
	#shoptimizer-load-more-btn.button::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;

	pointer-events: none;
}


/* ==========================================================================
   Focus
   ========================================================================== */

body.jr-dark-commerce
	#shoptimizer-load-more-btn.button:focus-visible {
	outline: 2px solid var(--jr-green-light);
	outline-offset: 3px;
}


/* ==========================================================================
   Spinner
   ========================================================================== */

body.jr-dark-commerce
	.shoptimizer-load-more-wrapper
	.load-more-spinner {
	color: var(--jr-text);

	line-height: 0;
}


body.jr-dark-commerce
	.shoptimizer-load-more-wrapper
	.load-more-spinner
	svg {
	display: block;

	width: 2rem;
	height: 2rem;

	fill: currentcolor;
}


/* ==========================================================================
   Hover
   ========================================================================== */

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

	body.jr-dark-commerce
		#shoptimizer-load-more-btn.button:hover {
		border-color: rgba(152, 169, 192, 0.7);

		background:
			linear-gradient(
				180deg,
				rgba(16, 29, 41, 0.98),
				rgba(7, 15, 22, 0.98)
			);

		color: #fff;

		transform: translateY(-1px);
	}
}


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

@media (max-width: 640px) {

	body.jr-dark-commerce
		.shoptimizer-load-more-wrapper {
		max-width: none;
	}


	body.jr-dark-commerce
		#shoptimizer-load-more-btn.button {
		width: 100%;
	}
}


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

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

	body.jr-dark-commerce
		#shoptimizer-load-more-btn.button,
	body.jr-dark-commerce
		.shoptimizer-load-more-wrapper
		.load-more-progress-bar {
		transition: none;
	}


	body.jr-dark-commerce
		#shoptimizer-load-more-btn.button:hover {
		transform: none;
	}
}

/**
 * Hide the theme-generated page heading.
 *
 * Add `.jr-hide-default-heading` to the first Elementor container on any
 * editorial page where Elementor supplies the visible page heading instead.
 *
 * @package    Jedi_Theme
 * @subpackage Editorial_Pages
 */

body.jr-dark-commerce.jr-hide-default-heading
	header.entry-header {
	display: none;