/**
 * Jedi-Robe WooCommerce My Account interface.
 *
 * Restyles the logged-in WooCommerce My Account shell, endpoint navigation
 * and primary content workspace using the existing Jedi-Robe dark-commerce
 * design tokens.
 *
 * Shoptimizer and WooCommerce retain ownership of endpoint structure,
 * navigation URLs and account functionality. This stylesheet controls
 * presentation only.
 *
 * @package Jedi_Theme
 * @subpackage WooCommerce_My_Account
 * @since 1.0.0
 */


/* ==========================================================================
   Account design tokens
   ========================================================================== */

/**
 * Account-specific muted values.
 *
 * Do not change the shared --jr-text-muted token because other approved dark
 * components currently depend on its existing value.
 */
body.jr-dark-commerce.woocommerce-account {
	--jr-account-text-muted: rgba(255, 255, 255, 0.64);
	--jr-account-text-quiet: rgba(255, 255, 255, 0.46);
	--jr-account-border: rgba(152, 169, 192, 0.17);
}


/* ==========================================================================
   WooCommerce account shell
   ========================================================================== */

/**
 * Replace Shoptimizer's desktop float calculations with one explicit account
 * grid.
 *
 * The navigation receives a stable utility width while the endpoint content
 * consumes all remaining horizontal space.
 */
body.jr-dark-commerce.woocommerce-account.logged-in:not(.woocommerce-lost-password)
	.entry-content
	> .woocommerce {
	display: grid;

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

	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;

	width: 100%;

	margin: 0;
	padding: 0;
}


/**
 * Reset Shoptimizer's floated My Account columns.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-navigation,
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content {
	float: none;

	width: auto;

	margin: 0;
}


/* ==========================================================================
   Account navigation
   ========================================================================== */

/**
 * Keep the navigation open rather than surrounding it with another card.
 *
 * Neutral dividers establish structure while the active row uses the existing
 * Jedi-Robe green signal language.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-navigation {
	position: relative;

	padding: 0;

	border-top: 1px solid var(--jr-account-border);
	border-bottom: 1px solid var(--jr-account-border);

	background: transparent;

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


/* ==========================================================================
   Navigation list
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-navigation
	ul {
	display: block;

	width: 100%;

	margin: 0;
	padding: 0;

	list-style: none;
}


body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-navigation
	ul
	li {
	position: relative;

	width: 100%;

	margin: 0;
	padding: 0;

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

	background: transparent;

	list-style: none;
}


body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-navigation
	ul
	li:last-child {
	border-bottom: 0;
}


/* ==========================================================================
   Navigation links
   ========================================================================== */

/**
 * Shoptimizer already supplies endpoint-specific icon masks through ::before.
 * Keep those masks and simply repaint them for the dark interface.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-navigation
	ul
	li
	a {
	position: relative;

	display: flex;

	min-height: 3.4rem;

	align-items: center;

	gap: 0.9rem;

	width: 100%;

	padding:
		0.85rem
		0.9rem;

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

	font-size: clamp(0.875rem, 0.84rem + 0.08vw, 0.94rem);
	font-weight: 560;
	line-height: 1.3;

	text-decoration: none;

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


/* ==========================================================================
   Existing Shoptimizer account icons
   ========================================================================== */

/**
 * Reuse Shoptimizer's SVG masks while replacing the original #111 paint that
 * becomes effectively invisible against the Jedi-Robe dark canvas.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-navigation
	ul
	li
	a::before {
	position: static;
	top: auto;

	display: block;

	flex: 0 0 1.25rem;

	width: 1.25rem;
	height: 1.25rem;

	float: none;

	margin: 0;

	background: currentcolor;

	opacity: 0.68;

	transition:
		opacity 180ms ease,
		transform 180ms ease;
}


/* ==========================================================================
   Active account endpoint
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-navigation
	ul
	li.is-active
	a {
	background:
		linear-gradient(
			90deg,
			rgba(45, 166, 83, 0.085),
			rgba(45, 166, 83, 0.025) 55%,
			transparent 100%
		);

	color: var(--jr-text);

	font-weight: 700;

	box-shadow:
		inset 2px 0 0 var(--jr-green-light);
}


body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-navigation
	ul
	li.is-active
	a::before {
	color: var(--jr-text);

	opacity: 1;
}


/* ==========================================================================
   Navigation hover
   ========================================================================== */

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

	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-navigation
		ul
		li:not(.is-active)
		a:hover {
		background:
			linear-gradient(
				90deg,
				rgba(111, 203, 255, 0.025),
				transparent 78%
			);

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


	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-navigation
		ul
		li:not(.is-active)
		a:hover::before {
		opacity: 0.95;

		transform: translateX(0.1rem);
	}
}


/* ==========================================================================
   Log-out action
   ========================================================================== */

/**
 * Keep Log out neutral at rest and expose its destructive meaning only when
 * deliberately hovered.
 */
@media (hover: hover) and (pointer: fine) {

	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-navigation-link--customer-logout
		a:hover {
		background:
			linear-gradient(
				90deg,
				rgba(232, 91, 91, 0.07),
				transparent 72%
			);

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


/* ==========================================================================
   Account content workspace
   ========================================================================== */

/**
 * Treat the current WooCommerce endpoint as a single functional workspace.
 *
 * Individual tables, forms, addresses and order details will be styled inside
 * this surface separately once their live markup has been reviewed.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content {
	position: relative;
	isolation: isolate;

	min-width: 0;

	padding:
		clamp(1.5rem, 2.5vw, 2.25rem);

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

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

	color: var(--jr-text);

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

	font-size: var(--jr-text-size);
}


/* ==========================================================================
   Workspace signal rail
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content::before {
	position: absolute;
	top: -1px;
	left: 0;

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

	background:
		linear-gradient(
			90deg,
			var(--jr-green-light),
			rgba(69, 217, 107, 0.38) 55%,
			transparent
		);

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

	content: "";

	pointer-events: none;
}


/**
 * Restrained lower-right technical marker.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content::after {
	position: absolute;
	right: 0.8rem;
	bottom: 0.8rem;

	width: 0.8rem;
	height: 0.8rem;

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

	content: "";

	pointer-events: none;
}


/* ==========================================================================
   Dashboard copy
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	p {
	color: var(--jr-white);
}


body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	> p:first-of-type {
	margin-top: 0;

	padding-bottom: 1rem;

	border-bottom: 1px solid var(--jr-account-border);

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


body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	> p:last-child {
	margin-bottom: 0;
}


body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	strong {
	color: var(--jr-text);

	font-weight: 750;
}


/* ==========================================================================
   Account links
   ========================================================================== */

/**
 * Keep ordinary account links white rather than theme-default blue.
 * Green appears in the underline/accent instead of colouring every label.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	a {
	color: var(--jr-green-light, #45d96b);
    font-weight: 700;
    text-decoration-color: rgba(69, 217, 107, 0.5);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

/**
 * Keep ordinary account links white rather than theme-default blue.
 * Green appears in the underline/accent instead of colouring every label.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.woocommerce-orders-table
	.woocommerce-orders-table__cell-order-actions
	a {
    font-weight: 700;
    text-decoration-color: rgba(69, 217, 107, 0.5);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
	border-radius: 0;
	box-shadow: 0 0.55rem 1.3rem rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14);
	color: #080a0e;
	background: linear-gradient(135deg, var(--jr-green-light), var(--jr-green));
	padding: 8px;
	min-height: auto;
}

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

	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-content
		a:hover {
		color: var(--jr-green-bright);
        text-decoration-color: currentColor;
	}

	body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.woocommerce-orders-table
	.woocommerce-orders-table__cell-order-actions
	a:hover {
        border-color: var(--jr-green-light);
        background: linear-gradient(135deg, var(--jr-green-light), var(--jr-green));
        color: #080a0e;
        filter: brightness(1.06);
        transform: translateY(-0.0625rem);
        box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.17);
    }
}


/* ==========================================================================
   WooCommerce notices
   ========================================================================== */

/**
 * Establish a dark baseline for notices used by account endpoints.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	:is(
		.woocommerce-message,
		.woocommerce-info,
		.woocommerce-error
	) {
	margin:
		0
		0
		1.5rem;

	padding:
		1rem
		1.15rem;

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

	background:
		rgba(10, 17, 27, 0.62);

	color: var(--jr-text);

	box-shadow: none;
}


body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.woocommerce-message {
	border-left: 2px solid var(--jr-success);
}


body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.woocommerce-info {
	border-left: 2px solid var(--jr-blue);
}


body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.woocommerce-error {
	border-left: 2px solid var(--jr-danger);
}

body.jr-dark-commerce.woocommerce-account .woocommerce-orders-table th {
	color: var(--jr-text);
}

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

/**
 * Collapse to one content column while retaining a compact two-column
 * navigation on medium-width devices.
 */
@media (max-width: 992px) {

	body.jr-dark-commerce.woocommerce-account.logged-in .site-content
		.entry-content
		> .woocommerce {
		grid-template-columns:
			minmax(0, 1fr);

		gap: 1.5rem;
	}


	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-navigation
		ul {
		display: grid;

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


	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-navigation
		ul
		li {
		border-right: 1px solid var(--jr-account-border);
	}


	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-navigation
		ul
		li:nth-child(even) {
		border-right: 0;
	}
}


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

@media (max-width: 620px) {

	body.jr-dark-commerce.woocommerce-account.logged-in
		.entry-content
		> .woocommerce {
		gap: 1.25rem;
	}


	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-navigation
		ul {
		grid-template-columns:
			minmax(0, 1fr);
	}


	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-navigation
		ul
		li,
	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-navigation
		ul
		li:nth-child(even) {
		border-right: 0;
	}


	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-content {
		padding:
			1.25rem
			1rem;
	}
}


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

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

	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-navigation
		a,
	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-navigation
		a::before,
	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-content
		a {
		transition: none;
	}
}

/* ==========================================================================
   Heading
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
h2 {
    color: var(--jr-text);
}


/**
 * Jedi-Robe WooCommerce My Account forms.
 *
 * Adapts WooCommerce and Shoptimizer account forms to the approved
 * Jedi-Robe dark form language established by the shared WPForms component.
 *
 * The WooCommerce markup and functionality remain untouched. This stylesheet
 * mirrors the shared visual system using WooCommerce-specific selectors for
 * labels, fields, Select2 controls, validation and form actions.
 *
 * @package Jedi_Theme
 * @subpackage WooCommerce_My_Account
 * @since 1.0.0
 */


/* ==========================================================================
   Account form
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form {
	width: 100%;

	margin: 0;
	padding: 0;

	color: var(--jr-text);

	background: transparent;
}


/* ==========================================================================
   Form heading
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	h2 {
	margin: 0 0 1.5rem;

	color: var(--jr-text);

	font-size: clamp(1.3rem, 1.2rem + 0.25vw, 1.55rem);
	font-weight: 730;
	letter-spacing: -0.025em;
	line-height: 1.2;
}


/* ==========================================================================
   WooCommerce address field grid
   ========================================================================== */

/**
 * Replace Shoptimizer's floated first/last field widths with the same
 * balanced two-column arrangement used by the Contact form.
 *
 * Wide WooCommerce fields span both tracks automatically.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.woocommerce-address-fields__field-wrapper {
	display: grid;

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

	column-gap: 1rem;
	row-gap: 1rem;

	width: 100%;

	margin: 0;
	padding: 0;
}


/* ==========================================================================
   Form rows
   ========================================================================== */

/**
 * Reset Shoptimizer's float-based account form geometry.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.woocommerce-address-fields__field-wrapper
	.form-row {
	float: none;

	width: 100%;

	margin: 0;
	padding: 0;
}


/**
 * First and last name occupy one column each.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.woocommerce-address-fields__field-wrapper
	.form-row-first,
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.woocommerce-address-fields__field-wrapper
	.form-row-last {
	grid-column: auto;

	width: 100%;

	margin: 0;
}


/**
 * Standard WooCommerce wide fields occupy the complete form width.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.woocommerce-address-fields__field-wrapper
	.form-row-wide {
	grid-column: 1 / -1;
}


/* ==========================================================================
   Input wrapper
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.woocommerce-input-wrapper {
	display: block;

	width: 100%;
	min-width: 0;
}


/* ==========================================================================
   Labels
   ========================================================================== */

/**
 * Match the approved WPForms label hierarchy.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.form-row
	> label {
	display: block;

	margin: 0 0 0.38rem;
	padding: 0;

	color: var(--jr-text);

	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1.35;
}


/* ==========================================================================
   Required indicator
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.form-row
	label
	.required {
	color: var(--jr-danger);

	font-weight: 700;

	text-decoration: none;
}


/* ==========================================================================
   Optional indicator
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.form-row
	label
	.optional {
	color: var(--jr-account-text-quiet);

	font-size: 0.78rem;
	font-weight: 500;
}


/* ==========================================================================
   WooCommerce inputs
   ========================================================================== */

/**
 * Mirror the shared WPForms dark field treatment.
 *
 * All visible account controls receive a consistent 3rem minimum height,
 * dark canvas, restrained blue-grey border and white input text.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	input.input-text,
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	input[type="text"],
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	input[type="email"],
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	input[type="tel"],
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	input[type="password"],
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	select,
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	textarea {
	box-sizing: border-box;

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

	margin: 0;
	padding: 0.75rem 0.85rem;

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

	outline: 0;

	background: rgba(2, 6, 9, 0.84);

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

	font: inherit;
	font-size: 1rem;

	box-shadow: none;

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


/* ==========================================================================
   Placeholder
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	input::placeholder,
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	textarea::placeholder {
	color: rgba(255, 255, 255, 0.46);

	font-size: 1rem;

	opacity: 1;
}


/* ==========================================================================
   Input focus
   ========================================================================== */

/**
 * Reproduce the restrained green focus state from jr-wpforms-dark.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	input.input-text:focus,
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	input[type="text"]:focus,
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	input[type="email"]:focus,
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	input[type="tel"]:focus,
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	input[type="password"]:focus,
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	select:focus,
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	textarea:focus {
	border-color: rgba(69, 217, 107, 0.62);

	outline: 0;

	background: rgba(3, 8, 12, 0.96);

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

	box-shadow:
		0 0 0 3px rgba(69, 217, 107, 0.07);
}


/* ==========================================================================
   Browser autofill
   ========================================================================== */

/**
 * Prevent browser autofill from replacing the approved dark input surface
 * with a light browser-generated fill.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	input:-webkit-autofill,
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	input:-webkit-autofill:hover,
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--jr-text);

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

	box-shadow:
		0 0 0 1000px #020609 inset;

	transition:
		background-color 9999s ease-out 0s;
}


/* ==========================================================================
   WooCommerce Select2
   ========================================================================== */

/**
 * WooCommerce hides the native country/state select and renders Select2.
 *
 * Therefore the generated Select2 control must be styled independently from
 * the original <select>.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.select2-container {
	display: block;

	width: 100%;
	max-width: none;

	margin: 0;
}


/* ==========================================================================
   Select2 visible control
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.select2-container--default
	.select2-selection--single {
	position: relative;

	display: flex;

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

	align-items: center;

	margin: 0;

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

	outline: 0;

	background: rgba(2, 6, 9, 0.84);

	color: var(--jr-text);

	box-shadow: none;

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


/* ==========================================================================
   Select2 selected value
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.select2-container--default
	.select2-selection--single
	.select2-selection__rendered {
	width: 100%;

	padding:
		0.75rem
		3rem
		0.75rem
		0.85rem;

	color: var(--jr-text);

	line-height: 1.45;
}


/* ==========================================================================
   Select2 arrow area
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.select2-container--default
	.select2-selection--single
	.select2-selection__arrow {
	position: absolute;

	top: 0;
	right: 0.85rem;

	display: grid;

	width: 1rem;
	height: 100%;

	place-items: center;
}


/**
 * Neutral white disclosure indicator.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.select2-container--default
	.select2-selection--single
	.select2-selection__arrow
	b {
	position: static;

	width: 0;
	height: 0;

	margin: 0;

	border-width: 5px 4px 0;
	border-style: solid;
	border-color:
		rgba(255, 255, 255, 0.72)
		transparent
		transparent;

	transform: none;
}


/* ==========================================================================
   Select2 focus / open
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.select2-container--default
	.select2-selection--single:focus,
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.select2-container--open
	.select2-selection--single {
	border-color: rgba(69, 217, 107, 0.62);

	outline: 0;

	background: rgba(3, 8, 12, 0.96);

	box-shadow:
		0 0 0 3px rgba(69, 217, 107, 0.07);
}


/**
 * Reverse the disclosure indicator while the country/state list is open.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.select2-container--open
	.select2-selection--single
	.select2-selection__arrow
	b {
	border-width: 0 4px 5px;
	border-color:
		transparent
		transparent
		rgba(255, 255, 255, 0.72);
}


/* ==========================================================================
   Select2 dropdown
   ========================================================================== */

/**
 * Select2 appends its dropdown outside .woocommerce-MyAccount-content.
 *
 * Scope the generated dropdown through the account page body instead.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.select2-container--open
	.select2-dropdown {
	border: 1px solid rgba(152, 169, 192, 0.28);
	border-radius: 0;

	background: #050a10;

	color: var(--jr-text);

	box-shadow:
		0 1rem 2rem rgba(0, 0, 0, 0.32);
}


/* ==========================================================================
   Select2 search
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.select2-container--default
	.select2-search--dropdown {
	padding: 0;
}


body.jr-dark-commerce.woocommerce-account.logged-in
	.select2-container--default
	.select2-search--dropdown
	.select2-search__field {
	width: 100%;
	min-height: 2.75rem;

	margin: 0;
	padding: 0.65rem 0.85rem;

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

	outline: 0;

	background: rgba(2, 6, 9, 0.96);

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

	font-size: 0.88rem;

	box-shadow: none;
}


/* ==========================================================================
   Select2 results
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.select2-container--default
	.select2-results__option {
	padding: 0.65rem 0.85rem;

	background: transparent;

	color: rgba(255, 255, 255, 0.82);

	font-size: 0.86rem;
	line-height: 1.35;
}


body.jr-dark-commerce.woocommerce-account.logged-in
	.select2-container--default
	.select2-results__option[aria-selected="true"] {
	background: rgba(45, 166, 83, 0.06);

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


body.jr-dark-commerce.woocommerce-account.logged-in
	.select2-container--default
	.select2-results__option--highlighted[aria-selected] {
	background: rgba(45, 166, 83, 0.14);

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


/* ==========================================================================
   WooCommerce validation
   ========================================================================== */

/**
 * Keep invalid account controls within the shared Jedi-Robe danger hierarchy.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.form-row.woocommerce-invalid
	input.input-text,
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.form-row.woocommerce-invalid
	.select2-selection--single {
	border-color: rgba(232, 91, 91, 0.72);
}


/* ==========================================================================
   Submit row
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	.woocommerce-address-fields
	> p {
	margin: 1.25rem 0 0;
	padding: 0;
}


/* ==========================================================================
   Form submit
   ========================================================================== */

/**
 * Match the approved Contact/WPForms green action.
 *
 * WooCommerce continues to own submission, nonces and validation.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	form
	button[type="submit"].button,
body.jr-dark-commerce.woocommerce-account.logged-in 
	.woocommerce-MyAccount-content a.button {
	position: relative;

	display: inline-flex;

	min-height: 3rem;

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

	margin: 0;
	padding: 0 1.4rem;

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

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

	color: #080a0e;

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

	box-shadow:
		0 0.55rem 1.3rem rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);

	transform: translateY(0);

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

body.jr-dark-commerce.woocommerce-account.logged-in 
	.woocommerce-MyAccount-content .woocommerce-info a.wc-forward {
	background: none;
    border: none;
    box-shadow: none;
    color: var(--jr-green-light);
    padding: 5px;
    margin: 0;
	min-height: auto;
}

/* ==========================================================================
   Submit interaction
   ========================================================================== */

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

	body.jr-dark-commerce.woocommerce-account.logged-in 
	.woocommerce-MyAccount-content .woocommerce-info a.wc-forward:hover {
		background: none;
		color: var(--jr-green-bright);
        text-decoration-color: currentColor;
		border: none;
        box-shadow: none;
	}

	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-content
		form
		button[type="submit"].button:hover,
	body.jr-dark-commerce.woocommerce-account.logged-in 
		.woocommerce-MyAccount-content a.button:hover {
		border-color: var(--jr-green-light);

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

		color: #080a0e;

		filter: brightness(1.06);

		transform: translateY(-0.0625rem);

		box-shadow:
			0 0.7rem 1.5rem rgba(0, 0, 0, 0.28),
			inset 0 1px 0 rgba(255, 255, 255, 0.17);
	}
}


/* ==========================================================================
   Tablet and mobile
   ========================================================================== */

/**
 * Collapse paired address fields to one track where two compact controls
 * would otherwise become cramped.
 */
@media (max-width: 720px) {

	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-content
		.woocommerce-address-fields__field-wrapper {
		grid-template-columns:
			minmax(0, 1fr);

		column-gap: 0;
	}


	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-content
		.woocommerce-address-fields__field-wrapper
		.form-row-wide {
		grid-column: auto;
	}


	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-content
		form
		button[type="submit"].button {
		width: 100%;
	}
}


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

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

	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-content
		form
		input,
	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-content
		form
		select,
	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-content
		form
		textarea,
	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-content
		.select2-selection--single,
	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-content
		form
		button[type="submit"].button {
		transition: none;
	}


	body.jr-dark-commerce.woocommerce-account.logged-in
		.woocommerce-MyAccount-content
		form
		button[type="submit"].button:hover {
		transform: none;
	}
}

/**
 * Jedi-Robe CommerceKit My Account wishlist.
 *
 * Adapts CommerceKit's existing wishlist product markup to the Jedi-Robe
 * dark-commerce account interface. Catalogue product-card styling remains
 * shared where appropriate, while wishlist-specific controls, layout,
 * product metadata and pagination receive a dedicated account treatment.
 *
 * CommerceKit retains ownership of wishlist persistence, AJAX removal,
 * pagination and add-to-cart behaviour.
 *
 * @package Jedi_Theme
 * @subpackage WooCommerce_My_Account
 * @since 1.0.0
 */


/* ==========================================================================
   Wishlist shell
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode {
	position: relative;

	width: 100%;
	min-width: 0;

	margin: 0;
	padding: 0;

	background: transparent;
}


body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	> .commercekit-wishlist {
	width: 100%;

	margin: 0;
	padding: 0;
}


/* ==========================================================================
   Wishlist heading
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	.woocommerce-MyAccount-content
	> h2 {
	margin: 0 0 1.4rem;

	color: var(--jr-text);

	font-size: clamp(1.35rem, 1.2rem + 0.3vw, 1.65rem);
	font-weight: 740;
	letter-spacing: -0.025em;
	line-height: 1.2;
}


/* ==========================================================================
   Wishlist product grid
   ========================================================================== */

/**
 * Honour CommerceKit's three-column wishlist intention rather than allowing
 * the global four-column catalogue breakpoint to control this account view.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	ul.commercekit-wishlist-list.products {
	display: grid;

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

	align-items: stretch;

	width: 100%;

	margin: 0;
	padding: 0;

	list-style: none;
}


/* ==========================================================================
   Wishlist card
   ========================================================================== */

/**
 * Most card surface styling is intentionally inherited from the established
 * Jedi-Robe WooCommerce product-card system.
 *
 * This block changes only geometry required by the account wishlist.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	ul.commercekit-wishlist-list.products
	> li.product {
	position: relative;

	width: 100%;
	min-width: 0;
	max-width: none;

	padding: 0;
}


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

body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.woocommerce-image__wrapper {
	position: relative;

	width: 100%;
	min-width: 0;

	overflow: hidden;

	border-bottom: 1px solid var(--jr-account-border);

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


body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.shoptimizer-plp-carousel-container,
body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.shoptimizer-plp-image-wrapper {
	display: grid;

	width: 100%;
	aspect-ratio: 1;

	place-items: center;

	margin: 0;
	padding: 0;

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


body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.shoptimizer-plp-image-wrapper
	img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;
}


/* ==========================================================================
   Wishlist remove control
   ========================================================================== */

/**
 * Unlike the catalogue wishlist heart, this is a destructive/remove action.
 *
 * Keep it permanently discoverable rather than revealing it only on hover.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	li.cgkit-wishlist-product
	> .commercekit-wishlist.mini {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	left: auto;
	z-index: 8;

	display: grid;

	width: 2.4rem;
	height: 2.4rem;

	place-items: center;

	margin: 0;
	padding: 0;

	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			rgba(18, 25, 36, 0.96),
			rgba(6, 10, 16, 0.96)
		);

	opacity: 1;
	visibility: visible;

	pointer-events: auto;

	box-shadow:
		0 0.65rem 1.4rem rgba(0, 0, 0, 0.34),
		inset 0 1px 0 rgba(255, 255, 255, 0.07);

	transform: none;

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


/* ==========================================================================
   Remove link
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.commercekit-remove-wishlist2 {
	display: grid;

	width: 100%;
	height: 100%;

	place-items: center;

	margin: 0;
	padding: 0;

	border: 0;
	border-radius: inherit;

	background: transparent;

	color: var(--jr-text);

	text-decoration: none;
}


/* ==========================================================================
   Remove icon
   ========================================================================== */

/**
 * Draw the remove mark without loading another icon library.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.commercekit-remove-wishlist2
	span {
	position: relative;

	display: block;

	width: 0.9rem;
	height: 0.9rem;

	background: none;
}

body.jr-dark-commerce.woocommerce-account.logged-in
a.commercekit-remove-wishlist2.wsl-remove:before {
    background: currentColor;
}


body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.commercekit-remove-wishlist2
	span::before {
	transform:
		translate(-50%, -50%)
		rotate(45deg);
}


body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.commercekit-remove-wishlist2
	span::after {
	transform:
		translate(-50%, -50%)
		rotate(-45deg);
}


/* ==========================================================================
   Remove interaction
   ========================================================================== */

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

	body.jr-dark-commerce.woocommerce-account.logged-in
		#commercekit-wishlist-shortcode
		li.cgkit-wishlist-product
		> .commercekit-wishlist.mini:hover {
		border-color: rgba(232, 91, 91, 0.68);

		background:
			linear-gradient(
				145deg,
				rgba(50, 18, 22, 0.96),
				rgba(13, 7, 10, 0.96)
			);

		box-shadow:
			0 0.75rem 1.6rem rgba(0, 0, 0, 0.38),
			0 0 1rem rgba(232, 91, 91, 0.1);

		transform: translateY(-0.1rem);
	}


	body.jr-dark-commerce.woocommerce-account.logged-in
		#commercekit-wishlist-shortcode
		.commercekit-remove-wishlist2:hover {
		color: var(--jr-danger);
	}
}


body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.commercekit-remove-wishlist2:focus-visible {
	outline: 2px solid var(--jr-blue-light);
	outline-offset: 3px;
}


/* ==========================================================================
   Product content
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.woocommerce-card__header {
	display: flex;

	flex: 1 1 auto;
	flex-direction: column;

	width: 100%;
	min-width: 0;

	margin: 0;

	padding:
		1rem
		1rem
		1.1rem;
}


/* ==========================================================================
   Categories
   ========================================================================== */

/**
 * Categories add little value in the saved-products workspace and make long
 * costume cards unnecessarily noisy.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.product__categories {
	display: none;
}


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

body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.woocommerce-loop-product__title {
	display: -webkit-box;

	overflow: hidden;

	min-height: calc(1.42em * 3);

	margin: 0;

	color: var(--jr-text);

	font-size: clamp(0.95rem, 0.9rem + 0.12vw, 1.05rem);
	font-weight: 680;
	line-height: 1.42;

	text-wrap: pretty;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}


body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.woocommerce-loop-product__title
	a {
	color: inherit;

	text-decoration: none;
}


/* ==========================================================================
   Product price
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.cgkit-as-variation-price {
	width: 100%;

	margin: 0.75rem 0 0;
	padding: 0;
}


body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.price {
	margin:
		0
		0
		0.85rem;

	color: var(--jr-text);

	font-size: clamp(1.05rem, 1rem + 0.1vw, 1.18rem);
	font-weight: 800;
	line-height: 1.25;
}


/* ==========================================================================
   Add-to-basket action
   ========================================================================== */

/**
 * The shared catalogue system continues to own the button colours.
 *
 * Wishlist-specific CSS controls only its geometry.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	a.add_to_cart_button {
	display: flex;

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

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

	padding-inline: 1rem;

	text-align: center;
}

body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	a.added_to_cart {
	display: none;
}


/* ==========================================================================
   Wishlist footer / item count
   ========================================================================== */

/**
 * Turn CommerceKit's detached "3 items" output into a deliberate list status
 * footer rather than leaving it underneath the first product card.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.commercekit-wishlist-pages {
	display: flex;

	width: 100%;

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

	gap: 1rem;

	margin: 1.25rem 0 0;
	padding: 0.9rem 0 0;

	border-top: 1px solid var(--jr-account-border);

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


body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.commercekit-wishlist-pages
	.displaying-num {
	color: var(--jr-account-text-quiet);

	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;

	text-transform: uppercase;
}


/* ==========================================================================
   Wishlist pagination
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.commercekit-wishlist-pages
	> div {
	display: flex;

	align-items: center;

	gap: 0.5rem;
}


body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.commercekit-wishlist-pages
	a {
	display: grid;

	min-width: 2.25rem;
	height: 2.25rem;

	place-items: center;

	padding-inline: 0.65rem;

	border: 1px solid var(--jr-account-border);

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

	color: var(--jr-text);

	font-size: 0.78rem;
	font-weight: 700;

	text-decoration: none;

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


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

	body.jr-dark-commerce.woocommerce-account.logged-in
		#commercekit-wishlist-shortcode
		.commercekit-wishlist-pages
		a:hover {
		border-color: rgba(69, 217, 107, 0.48);

		background: rgba(45, 166, 83, 0.06);
	}
}


/* ==========================================================================
   Empty wishlist
   ========================================================================== */

/**
 * CommerceKit exposes wsl-no-products for its empty wishlist state.
 */
body.jr-dark-commerce.woocommerce-account.logged-in
	#commercekit-wishlist-shortcode
	.wsl-no-products {
	width: 100%;

	margin: 0;
	padding: 2rem;

	border: 1px solid var(--jr-account-border);

	background:
		linear-gradient(
			90deg,
			rgba(45, 166, 83, 0.03),
			transparent 65%
		);

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

	text-align: center;
}


/* ==========================================================================
   Medium desktop / tablet
   ========================================================================== */

@media (max-width: 1200px) {

	body.jr-dark-commerce.woocommerce-account.logged-in
		#commercekit-wishlist-shortcode
		ul.commercekit-wishlist-list.products {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}
}


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

@media (max-width: 620px) {

	body.jr-dark-commerce.woocommerce-account.logged-in
		#commercekit-wishlist-shortcode
		ul.commercekit-wishlist-list.products {
		grid-template-columns:
			minmax(0, 1fr);
	}


	body.jr-dark-commerce.woocommerce-account.logged-in
		#commercekit-wishlist-shortcode
		.commercekit-wishlist-pages {
		align-items: flex-start;
		flex-direction: column;
	}


	body.jr-dark-commerce.woocommerce-account.logged-in
		#commercekit-wishlist-shortcode
		li.cgkit-wishlist-product
		> .commercekit-wishlist.mini {
		top: 0.65rem;
		right: 0.65rem;
	}
}


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

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

	body.jr-dark-commerce.woocommerce-account.logged-in
		#commercekit-wishlist-shortcode
		li.cgkit-wishlist-product
		> .commercekit-wishlist.mini,
	body.jr-dark-commerce.woocommerce-account.logged-in
		#commercekit-wishlist-shortcode
		.commercekit-wishlist-pages
		a {
		transition: none;
	}


	body.jr-dark-commerce.woocommerce-account.logged-in
		#commercekit-wishlist-shortcode
		li.cgkit-wishlist-product
		> .commercekit-wishlist.mini:hover {
		transform: none;
	}
}

/**
 * Jedi-Robe WooCommerce logged-out My Account interface.
 *
 * Styles WooCommerce's native Login and Register forms using the established
 * Jedi-Robe dark form language while preserving WooCommerce authentication,
 * registration, validation, nonce and password-visibility behaviour.
 *
 * The presence of #customer_login is used as the logged-out account-state
 * hook rather than relying on WordPress body authentication classes.
 *
 * @package Jedi_Theme
 * @subpackage WooCommerce_My_Account
 * @since 1.0.0
 */


/* ==========================================================================
   Logged-out account layout
   ========================================================================== */

/**
 * Replace Shoptimizer's legacy floated 41/53 percent columns with two equal
 * functional panels.
 */
body.jr-dark-commerce.woocommerce-account
	#customer_login {
	display: grid;

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

	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: stretch;

	width: 100%;

	margin: 0;
	padding: 0;
}


/* ==========================================================================
   Login / register panels
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	#customer_login
	> .u-column1,
body.jr-dark-commerce.woocommerce-account
	#customer_login
	> .u-column2 {
	position: relative;
	isolation: isolate;

	float: none;

	width: auto;
	min-width: 0;

	margin: 0;

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

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

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.026),
			transparent 42%
		),
		radial-gradient(
			circle at 100% 0,
			rgba(111, 203, 255, 0.045),
			transparent 20rem
		),
		rgba(5, 10, 16, 0.64);

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


/* ==========================================================================
   Panel interface corners
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	#customer_login
	> .u-column1::before,
body.jr-dark-commerce.woocommerce-account
	#customer_login
	> .u-column2::before {
	position: absolute;
	top: -1px;
	left: -1px;

	width: 1.35rem;
	height: 1.35rem;

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

	content: "";

	pointer-events: none;
}


body.jr-dark-commerce.woocommerce-account
	#customer_login
	> .u-column1::after,
body.jr-dark-commerce.woocommerce-account
	#customer_login
	> .u-column2::after {
	position: absolute;
	right: -1px;
	bottom: -1px;

	width: 1.35rem;
	height: 1.35rem;

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

	content: "";

	pointer-events: none;
}


/* ==========================================================================
   Panel headings
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	#customer_login
	h2 {
	margin: 0 0 1.4rem;

	color: var(--jr-text);

	font-size: clamp(1.35rem, 1.2rem + 0.3vw, 1.65rem);
	font-weight: 740;
	letter-spacing: -0.025em;
	line-height: 1.2;
}


/* ==========================================================================
   Login / register forms
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	#customer_login
	form {
	display: flex;

	width: 100%;

	flex-direction: column;

	margin: 0;
	padding: 0;

	background: transparent;

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


/* ==========================================================================
   Form rows
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	#customer_login
	.form-row {
	float: none;

	width: 100%;

	margin: 0 0 1rem;
	padding: 0;
}


body.jr-dark-commerce.woocommerce-account
	#customer_login
	.form-row:last-child {
	margin-bottom: 0;
}


/* ==========================================================================
   Labels
   ========================================================================== */

/**
 * Match the established jr-wpforms-dark label treatment.
 */
body.jr-dark-commerce.woocommerce-account
	#customer_login
	.form-row
	> label:not(.woocommerce-form-login__rememberme) {
	display: block;

	margin: 0 0 0.38rem;
	padding: 0;

	color: var(--jr-text);

	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1.35;
}


body.jr-dark-commerce.woocommerce-account
	#customer_login
	label
	.required {
	color: var(--jr-danger);

	text-decoration: none;
}


/* ==========================================================================
   Text controls
   ========================================================================== */

/**
 * Use the exact input geometry established by the Contact Us form.
 */
body.jr-dark-commerce.woocommerce-account
	#customer_login
	input[type="text"],
body.jr-dark-commerce.woocommerce-account
	#customer_login
	input[type="email"],
body.jr-dark-commerce.woocommerce-account
	#customer_login
	input[type="password"] {
	box-sizing: border-box;

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

	margin: 0;
	padding: 0.75rem 0.85rem;

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

	outline: 0;

	background: rgba(2, 6, 9, 0.84);

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

	font: inherit;
	font-size: 1rem;

	box-shadow: none;

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


/* ==========================================================================
   Input focus
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	#customer_login
	input[type="text"]:focus,
body.jr-dark-commerce.woocommerce-account
	#customer_login
	input[type="email"]:focus,
body.jr-dark-commerce.woocommerce-account
	#customer_login
	input[type="password"]:focus {
	border-color: rgba(69, 217, 107, 0.62);

	outline: 0;

	background: rgba(3, 8, 12, 0.96);

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

	box-shadow:
		0 0 0 3px rgba(69, 217, 107, 0.07);
}


/* ==========================================================================
   Browser autofill
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	#customer_login
	input:-webkit-autofill,
body.jr-dark-commerce.woocommerce-account
	#customer_login
	input:-webkit-autofill:hover,
body.jr-dark-commerce.woocommerce-account
	#customer_login
	input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--jr-text);

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

	box-shadow:
		0 0 0 1000px #020609 inset;

	transition:
		background-color 9999s ease-out 0s;
}


/* ==========================================================================
   Password wrapper
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	#customer_login
	.password-input {
	position: relative;

	display: block;

	width: 100%;
}


/**
 * Reserve room for WooCommerce/Shoptimizer's password visibility action.
 */
body.jr-dark-commerce.woocommerce-account
	#customer_login
	.password-input
	input {
	padding-right: 3rem;
}


/* ==========================================================================
   Password visibility button
   ========================================================================== */

/**
 * Keep Shoptimizer's existing eye-mask functionality but repaint and position
 * it for the dark form.
 */
body.jr-dark-commerce.woocommerce-account
	#customer_login
	button.show-password-input {
	position: absolute;
	top: 0;
	right: 0;

	display: grid;

	width: 3rem;
	height: 3rem;

	place-items: center;

	margin: 0;
	padding: 0;

	border: 0;

	background: transparent;

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

	cursor: pointer;

	box-shadow: none;

	transition:
		color 150ms ease;
}


body.jr-dark-commerce.woocommerce-account
	#customer_login
	button.show-password-input::after {
	position: static;

	display: block;

	min-width: 1.15rem;
	min-height: 1.15rem;

	margin: 0;

	background: currentcolor;
}


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

	body.jr-dark-commerce.woocommerce-account
		#customer_login
		button.show-password-input:hover {
		color: var(--jr-text);
	}
}


body.jr-dark-commerce.woocommerce-account
	#customer_login
	button.show-password-input:focus-visible {
	outline: 2px solid var(--jr-blue-light);
	outline-offset: -4px;
}


/* ==========================================================================
   Remember-me row
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	#customer_login
	.woocommerce-form-login__rememberme {
	display: inline-flex;

	align-items: center;

	gap: 0.65rem;

	margin: 0;

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

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

	cursor: pointer;
}


body.jr-dark-commerce.woocommerce-account
	#customer_login
	.woocommerce-form-login__rememberme
	span {
	margin: 0;
}


/* ==========================================================================
   Remember-me checkbox
   ========================================================================== */

/**
 * Mirror the approved dark WPForms checkbox rather than retaining the native
 * light Shoptimizer checkbox.
 */
body.jr-dark-commerce.woocommerce-account
	#customer_login
	input.woocommerce-form__input-checkbox {
	-webkit-appearance: none;
	appearance: none;

	display: inline-grid;
	float: none;

	width: 1.05rem;
	height: 1.05rem;

	flex: 0 0 1.05rem;

	place-content: center;

	margin: 0;
	padding: 0;

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

	background: rgba(2, 6, 9, 0.92);

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

	cursor: pointer;

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


body.jr-dark-commerce.woocommerce-account
	#customer_login
	input.woocommerce-form__input-checkbox::before {
	display: block;

	margin: 0;

	background: none;

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

	content: "✓";

	font-family: Arial, sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;

	opacity: 0;
}


body.jr-dark-commerce.woocommerce-account
	#customer_login
	input.woocommerce-form__input-checkbox:checked {
	border-color: var(--jr-green-light);

	background: rgba(3, 10, 7, 0.96);

	box-shadow:
		inset 0 0 0 1px rgba(69, 217, 107, 0.08);
}


body.jr-dark-commerce.woocommerce-account
	#customer_login
	input.woocommerce-form__input-checkbox:checked::before {
	opacity: 1;
}


body.jr-dark-commerce.woocommerce-account
	#customer_login
	input.woocommerce-form__input-checkbox:focus-visible {
	border-color: var(--jr-green-light);

	outline: 0;

	box-shadow:
		0 0 0 3px rgba(69, 217, 107, 0.1),
		inset 0 0 0 1px rgba(69, 217, 107, 0.08);
}


/* ==========================================================================
   Login action row
   ========================================================================== */

/**
 * WooCommerce puts Remember me and the Log in button inside the same <p>.
 * Stack them intentionally instead of relying on Shoptimizer's inline flow.
 */
body.jr-dark-commerce.woocommerce-account
	#customer_login
	.woocommerce-form-login
	> .form-row:not(.form-row-wide) {
	display: flex;

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

	gap: 1rem;

	margin-top: 0.15rem;
}


/* ==========================================================================
   Form buttons
   ========================================================================== */

/**
 * Match the established Contact Us primary action.
 */
body.jr-dark-commerce.woocommerce-account
	#customer_login
	button[type="submit"].button {
	position: relative;

	display: inline-flex;

	width: auto;
	min-width: 8.5rem;
	min-height: 3rem;

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

	margin: 0;
	padding: 0 1.4rem;

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

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

	color: #080a0e;

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

	box-shadow:
		0 0.55rem 1.3rem rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);

	transform: translateY(0);

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


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

	body.jr-dark-commerce.woocommerce-account
		#customer_login
		button[type="submit"].button:hover {
		filter: brightness(1.06);

		transform: translateY(-0.0625rem);

		box-shadow:
			0 0.7rem 1.5rem rgba(0, 0, 0, 0.28),
			inset 0 1px 0 rgba(255, 255, 255, 0.17);
	}
}


/* ==========================================================================
   Register guidance
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	#customer_login
	.woocommerce-form-register
	> p:not(.form-row) {
	margin:
		0
		0
		1.25rem;

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

	font-size: 0.9rem;
	line-height: 1.6;
}


/* ==========================================================================
   Lost password
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	#customer_login
	.lost_password {
	margin:
		1.2rem
		0
		0;

	padding:
		1rem
		0
		0;

	border-top: 1px solid var(--jr-account-border);
}


body.jr-dark-commerce.woocommerce-account
	#customer_login
	.lost_password
	a {
	color: var(--jr-green-light);

	font-size: 0.84rem;
	font-weight: 700;

	text-decoration: underline;
	text-decoration-color: rgba(69, 217, 107, 0.48);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}


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

	body.jr-dark-commerce.woocommerce-account
		#customer_login
		.lost_password
		a:hover {
		color: var(--jr-green-bright);

		text-decoration-color: currentcolor;
	}
}


/* ==========================================================================
   WooCommerce account notices
   ========================================================================== */

/**
 * Replace Shoptimizer/WooCommerce's bright light-theme notice surfaces with
 * the established dark account notification language.
 */
body.jr-dark-commerce.woocommerce-account
	:is(
		.woocommerce-error,
		.woocommerce-message,
		.woocommerce-info
	) {
	position: relative;

	margin:
		0
		0
		1.5rem;

	padding:
		1rem
		1.15rem;

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

	background: rgba(10, 17, 27, 0.82);

	color: var(--jr-text);

	box-shadow: none;

	font-size: 0.88rem;
	line-height: 1.55;
}


/* Error */
body.jr-dark-commerce.woocommerce-account
	.woocommerce-error {
	border-left: 2px solid var(--jr-danger);

	background:
		linear-gradient(
			90deg,
			rgba(232, 91, 91, 0.09),
			rgba(232, 91, 91, 0.025) 48%,
			rgba(10, 17, 27, 0.82) 100%
		);
}


/* Success */
body.jr-dark-commerce.woocommerce-account
	.woocommerce-message {
	border-left: 2px solid var(--jr-success);
}


/* Information */
body.jr-dark-commerce.woocommerce-account
	.woocommerce-info {
	border-left: 2px solid var(--jr-blue);
}


body.jr-dark-commerce.woocommerce-account
	:is(
		.woocommerce-error,
		.woocommerce-message,
		.woocommerce-info
	)
	li {
	color: inherit;
}


/* ==========================================================================
   Privacy content
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	#customer_login
	.woocommerce-privacy-policy-text {
	color: var(--jr-account-text-muted);

	font-size: 0.8rem;
	line-height: 1.55;
}


body.jr-dark-commerce.woocommerce-account
	#customer_login
	.woocommerce-privacy-policy-text
	p {
	margin:
		0
		0
		1rem;
}


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

@media (max-width: 900px) {

	body.jr-dark-commerce.woocommerce-account
		#customer_login {
		grid-template-columns:
			minmax(0, 1fr);

		gap: 1.5rem;
	}


	/**
	 * Cancel Shoptimizer's mobile margin on the second column because the
	 * grid gap now owns vertical separation.
	 */
	body.jr-dark-commerce.woocommerce-account
		#customer_login
		.u-column2.col-2 {
		margin-top: 0;
	}
}


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

@media (max-width: 620px) {

	body.jr-dark-commerce.woocommerce-account
		#customer_login
		> .u-column1,
	body.jr-dark-commerce.woocommerce-account
		#customer_login
		> .u-column2 {
		padding:
			1.25rem
			1rem;
	}


	body.jr-dark-commerce.woocommerce-account
		#customer_login
		button[type="submit"].button {
		width: 100%;
	}
}


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

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

	body.jr-dark-commerce.woocommerce-account
		#customer_login
		input,
	body.jr-dark-commerce.woocommerce-account
		#customer_login
		button {
		transition: none;
	}


	body.jr-dark-commerce.woocommerce-account
		#customer_login
		button[type="submit"].button:hover {
		transform: none;
	}
}

/**
 * Jedi-Robe WooCommerce Lost Password interface.
 *
 * Styles WooCommerce's native lost-password form as a compact account
 * recovery panel using the established Jedi-Robe dark form language.
 *
 * WooCommerce retains ownership of password-reset processing, validation,
 * nonce handling and endpoint behaviour.
 *
 * @package Jedi_Theme
 * @subpackage WooCommerce_My_Account
 * @since 1.0.0
 */


/* ==========================================================================
   Lost-password form shell
   ========================================================================== */

/**
 * Keep the recovery form deliberately compact.
 *
 * The main page heading remains supplied by Shoptimizer / WooCommerce above
 * this form, so the form itself acts only as the recovery workspace.
 */
body.jr-dark-commerce.woocommerce-account
	.woocommerce-ResetPassword.lost_reset_password {
	position: relative;
	isolation: isolate;

	display: flex;

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

	flex-direction: column;

	gap: 1.2rem;

	margin: 0;
	padding:
		clamp(1.4rem, 2.5vw, 2rem);

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

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.026),
			transparent 42%
		),
		radial-gradient(
			circle at 100% 0,
			rgba(111, 203, 255, 0.045),
			transparent 18rem
		),
		rgba(5, 10, 16, 0.64);

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


/* ==========================================================================
   Interface corners
   ========================================================================== */

/**
 * Green upper-left interface lock.
 */
body.jr-dark-commerce.woocommerce-account
	.woocommerce-ResetPassword.lost_reset_password::before {
	position: absolute;
	top: -1px;
	left: -1px;

	width: 1.35rem;
	height: 1.35rem;

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

	content: "";

	pointer-events: none;
}


/**
 * Blue-grey lower-right interface lock.
 */
body.jr-dark-commerce.woocommerce-account
	.woocommerce-ResetPassword.lost_reset_password::after {
	position: absolute;
	right: -1px;
	bottom: -1px;

	width: 1.35rem;
	height: 1.35rem;

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

	content: "";

	pointer-events: none;
}


/* ==========================================================================
   Recovery introduction
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	.woocommerce-ResetPassword.lost_reset_password
	> p:first-child {
	margin: 0;
	padding: 0 0 1.1rem;

	border-bottom: 1px solid var(--jr-account-border);

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

	font-size: 0.94rem;
	line-height: 1.65;
}


/* ==========================================================================
   WooCommerce form rows
   ========================================================================== */

/**
 * Remove Shoptimizer's float-based form-row sizing.
 */
body.jr-dark-commerce.woocommerce-account
	.woocommerce-ResetPassword.lost_reset_password
	.form-row {
	float: none;

	width: 100%;

	margin: 0;
	padding: 0;
}


body.jr-dark-commerce.woocommerce-account
	.woocommerce-ResetPassword.lost_reset_password
	.form-row-first {
	float: none;

	width: 100%;
}


/**
 * The old WooCommerce clear helper is unnecessary because the recovery form
 * no longer contains floated fields.
 */
body.jr-dark-commerce.woocommerce-account
	.woocommerce-ResetPassword.lost_reset_password
	.clear {
	display: none;
}


/* ==========================================================================
   Label
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	.woocommerce-ResetPassword.lost_reset_password
	label {
	display: block;

	margin: 0 0 0.38rem;
	padding: 0;

	color: var(--jr-text);

	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1.35;
}


body.jr-dark-commerce.woocommerce-account
	.woocommerce-ResetPassword.lost_reset_password
	label
	.required {
	color: var(--jr-danger);

	text-decoration: none;
}


/* ==========================================================================
   Email input
   ========================================================================== */

/**
 * Match the established Contact Us / My Account field treatment.
 */
body.jr-dark-commerce.woocommerce-account
	.woocommerce-ResetPassword.lost_reset_password
	input.input-text {
	box-sizing: border-box;

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

	margin: 0;
	padding: 0.75rem 0.85rem;

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

	outline: 0;

	background: rgba(2, 6, 9, 0.84);

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

	font: inherit;
	font-size: 1rem;

	box-shadow: none;

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


/* ==========================================================================
   Input focus
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	.woocommerce-ResetPassword.lost_reset_password
	input.input-text:focus {
	border-color: rgba(69, 217, 107, 0.62);

	outline: 0;

	background: rgba(3, 8, 12, 0.96);

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

	box-shadow:
		0 0 0 3px rgba(69, 217, 107, 0.07);
}


/* ==========================================================================
   Browser autofill
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	.woocommerce-ResetPassword.lost_reset_password
	input:-webkit-autofill,
body.jr-dark-commerce.woocommerce-account
	.woocommerce-ResetPassword.lost_reset_password
	input:-webkit-autofill:hover,
body.jr-dark-commerce.woocommerce-account
	.woocommerce-ResetPassword.lost_reset_password
	input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--jr-text);

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

	box-shadow:
		0 0 0 1000px #020609 inset;

	transition:
		background-color 9999s ease-out 0s;
}


/* ==========================================================================
   Submit action
   ========================================================================== */

body.jr-dark-commerce.woocommerce-account
	.woocommerce-ResetPassword.lost_reset_password
	button[type="submit"].button {
	position: relative;

	display: inline-flex;

	width: auto;
	min-width: 10rem;
	min-height: 3rem;

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

	margin: 0;
	padding: 0 1.4rem;

	align-self: flex-start;

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

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

	color: #080a0e;

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

	box-shadow:
		0 0.55rem 1.3rem rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);

	transform: translateY(0);

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


/* ==========================================================================
   Submit hover
   ========================================================================== */

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

	body.jr-dark-commerce.woocommerce-account
		.woocommerce-ResetPassword.lost_reset_password
		button[type="submit"].button:hover {
		border-color: var(--jr-green-light);

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

		color: #080a0e;

		filter: brightness(1.06);

		transform: translateY(-0.0625rem);

		box-shadow:
			0 0.7rem 1.5rem rgba(0, 0, 0, 0.28),
			inset 0 1px 0 rgba(255, 255, 255, 0.17);
	}
}


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

@media (max-width: 620px) {

	body.jr-dark-commerce.woocommerce-account
		.woocommerce-ResetPassword.lost_reset_password {
		max-width: none;

		padding:
			1.25rem
			1rem;
	}


	body.jr-dark-commerce.woocommerce-account
		.woocommerce-ResetPassword.lost_reset_password
		button[type="submit"].button {
		width: 100%;
	}
}


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

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

	body.jr-dark-commerce.woocommerce-account
		.woocommerce-ResetPassword.lost_reset_password
		input.input-text,
	body.jr-dark-commerce.woocommerce-account
		.woocommerce-ResetPassword.lost_reset_password
		button[type="submit"].button {
		transition: none;
	}


	body.jr-dark-commerce.woocommerce-account
		.woocommerce-ResetPassword.lost_reset_password
		button[type="submit"].button:hover {
		transform: none;
	}
}