/**
 * My Account page styles — overrides WooCommerce classic account templates.
 *
 * Targets Woo myaccount PHP templates (not block-based).
 * Design source: design-lab/wf-c-account.html
 *
 * Structure: .woocommerce-MyAccount-navigation (left 208px)
 *            .woocommerce-MyAccount-content (right, flex 1)
 *
 * @package Nouthemes
 * @since 2.1.0
 */

/* ================================================================== *
 * VISUALLY HIDDEN LABELS
 *
 * Core ships `.screen-reader-text` only inside the block-library
 * stylesheets, which a classic Woo template cannot count on being
 * enqueued — so define it here rather than inherit it.
 *
 * `position: absolute` is the load-bearing declaration, not the clip:
 * a 1px-clipped element is still IN FLOW and still eats a grid cell.
 * The licence-key row is `grid-template-columns: 1fr auto`; without
 * absolute positioning its hidden <label> takes the first column and
 * shoves the input onto a second line.
 * ================================================================== */

.nou-page-account .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ================================================================== *
 * TWO-COLUMN LAYOUT — nav left 208px + content right
 *
 * 208px matches the filter column on category page — same role
 * (secondary navigation), same width, same vertical rhythm.
 * ================================================================== */

/*
 * `:root` prefix, same reason as catalog.css: WordPress emits
 *   :root :where(.is-layout-flow) > * { margin-block-start: … }
 * at specificity (0,1,0). A bare `.woocommerce` grid loses the tie by source
 * order, and the flow margin then pushes grid children out of their row.
 * Measured: without this the nav items sat ~65px apart instead of 2px.
 */
:root .nou-page-account .woocommerce {
	display: grid;
	grid-template-columns: 208px minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
	max-width: none;
	width: 100%;
}

:root .nou-page-account .woocommerce > *,
:root .nou-page-account .woocommerce-MyAccount-navigation > *,
:root .nou-page-account .woocommerce-MyAccount-navigation ul > *,
:root .nou-page-account .woocommerce-MyAccount-content > * {
	margin-block: 0;
}

/* The notices wrapper is a grid child but carries no content most of the time.
 * Left in flow it takes a whole 208px column and shifts the nav right. */
.nou-page-account .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.nou-page-account .woocommerce-notices-wrapper:empty {
	display: none;
}

@media (max-width: 860px) {
	:root .nou-page-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The explicit column placements on the nav and the content are released at
	 * the end of this file, where source order lets them win. See STACKED LAYOUT. */
}

/* ================================================================== *
 * NAVIGATION — left column
 * ================================================================== */

/* Override Woo defaults: float: right + width: 30% on nav */
:root .nou-page-account .woocommerce-MyAccount-navigation {
	float: none !important;
	width: auto !important;
	grid-column: 1;
	grid-row: 1;
}

.nou-page-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

/* Remove Woo's default list-item padding — the link's own padding:10px 14px
 * provides all the tap-target height needed. Without this reset each <li>
 * adds 20px top + 20px bottom via Woo's stylesheet, making items 82px tall
 * instead of the intended 42px. */
.nou-page-account .woocommerce-MyAccount-navigation li {
	padding: 0;
}

.nou-page-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 2px;
	border-bottom: 1px solid var(--wp--custom--line--soft);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
	text-decoration: none;
	transition: color 160ms var(--wp--custom--easing--base);
}

.nou-page-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--wp--preset--color--contrast);
}

/* Active state — full strength text, no background tint (border-bottom replaces the row) */
.nou-page-account .woocommerce-MyAccount-navigation li.is-active a,
.nou-page-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

/* Active indicator — 2px accent bar on the left edge.
 *
 * Design source: wf-c-account.css `.wf-c-acctnav [aria-current="page"]::before`.
 * padding-left is 2px so left:-10px places the bar outside the 208px nav column.
 * overflow:visible on the <a> is required; the <li> and <ul> ancestors are
 * already visible so no further overrides needed.
 */
.nou-page-account .woocommerce-MyAccount-navigation li.is-active a {
	position: relative;
	overflow: visible;
	border-radius: 0;
}

.nou-page-account .woocommerce-MyAccount-navigation li.is-active a::before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: -10px;
	width: 2px;
	background: var(--wp--preset--color--primary);
	border-radius: 1px;
}

/* Count badge (e.g. "Downloads 3").
 *
 * Woo wraps the count in a bare <span> inside the <a>:
 *   <a href="…">Downloads <span class="count">(3)</span></a>
 *
 * `.nou-nav-count` was the original selector here, but no PHP hook ever adds
 * that class — it only appears in CSS. Targeting the native `.count` span that
 * Woo actually outputs. The parentheses Woo adds are stripped via content in
 * older templates; in Woo 10.7+ the text is already numeric without parens.
 */
.nou-page-account .woocommerce-MyAccount-navigation li a .count,
.nou-page-account .woocommerce-MyAccount-navigation .nou-nav-count {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--wp--custom--neutral--600);
}

/* Sign out — subtler, separated by extra margin instead of a visible border */
.nou-page-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	margin-top: 8px;
	color: var(--wp--custom--neutral--600);
	font-size: 11px;
}

.nou-page-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	color: #b42318;
}

/* ================================================================== *
 * CONTENT AREA — right column
 * ================================================================== */

/* Override Woo defaults: float: left + width: 68% on content */
:root .nou-page-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	min-width: 0;
	grid-column: 2;
	grid-row: 1;
}

/* Section headings inside content
 *
 * No margin-bottom: the panel is a grid, so a flow margin would ADD to the
 * grid gap. Measured on the wireframe with margin still set: 28px above the
 * heading (gap) but 60px below (gap + margin) — the exact inverse of the
 * intent, leaving the heading closer to the block it does NOT label. Gap
 * alone handles the space below; a small margin-top widens the space above so
 * the heading groups with its own content (Gestalt proximity). */
.nou-page-account .woocommerce-MyAccount-content > h2,
.nou-page-account .woocommerce-MyAccount-content > h3 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(18px, 2.2vw, 22px);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wp--custom--line--soft);
}

.nou-page-account .woocommerce-MyAccount-content > h2:not(:first-child),
.nou-page-account .woocommerce-MyAccount-content > h3:not(:first-child) {
	margin-top: clamp(10px, 1.3vw, 16px);
}


/* ================================================================== *
 * DASHBOARD — stats row + expiring alert + recent downloads
 * ================================================================== */

.nou-acct-dash__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: clamp(22px, 3vw, 32px);
}

@media (max-width: 560px) {
	.nou-acct-dash__stats {
		grid-template-columns: 1fr;
	}
}

.nou-acct-dash__stat {
	padding: 18px 20px;
	border: 1px solid var(--wp--custom--line--soft);
	border-radius: var(--wp--custom--radius--sm);
	text-align: center;
}

.nou-acct-dash__stat-val {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 28px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}

.nou-acct-dash__stat-label {
	display: block;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
}

/* Expiring alert */
.nou-acct-dash__alert {
	padding: 16px 20px;
	margin-bottom: clamp(22px, 3vw, 32px);
	border: 1px solid var(--wp--custom--line--strong);
	border-left: 3px solid #f0b849;
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--custom--surface--soft);
}

.nou-acct-dash__alert-title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.nou-acct-dash__alert-note {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--wp--custom--neutral--600);
}

.nou-acct-dash__alert a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.nou-acct-dash__alert a:hover {
	text-decoration: underline;
}

/* ================================================================== *
 * DOWNLOAD ITEMS — product card with key + download button
 * ================================================================== */

.nou-acct-dl {
	display: grid;
	gap: 20px;
}

.nou-acct-dlitem {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: clamp(14px, 2vw, 20px);
	align-items: start;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--wp--custom--line--soft);
}

.nou-acct-dlitem:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* Product thumbnail */
.nou-acct-dlitem__frame {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid var(--wp--custom--line--soft);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--custom--neutral--100);
}

.nou-acct-dlitem__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

/* Product info */
.nou-acct-dlitem__body {
	display: grid;
	gap: 8px;
}

.nou-acct-dlitem__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.nou-acct-dlitem__name {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.nou-acct-dlitem__ver {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--wp--custom--neutral--600);
}

/* Licence status line */
.nou-acct-lic {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font-size: 12px;
	color: var(--wp--custom--neutral--600);
}

.nou-acct-lic__on {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in srgb, #34a853 12%, transparent);
	color: #1a7431;
}

.nou-acct-lic__warn {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in srgb, #f0b849 12%, transparent);
	color: #92600a;
}

.nou-acct-lic__off {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in srgb, #b42318 10%, transparent);
	color: #b42318;
}

/* Actions row */
.nou-acct-dlitem__acts {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

/* ================================================================== *
 * LICENCE KEY INPUT — readonly + Copy button
 * ================================================================== */

.nou-acct-key {
	display: flex;
	gap: 8px;
	max-width: 380px;
}

.nou-acct-key input {
	flex: 1;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--custom--surface--soft);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--contrast);
}

.nou-acct-key button {
	flex: none;
	padding: 9px 14px;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--xs);
	background: transparent;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: border-color 180ms var(--wp--custom--easing--base);
}

.nou-acct-key button:hover {
	border-color: var(--wp--preset--color--primary);
}

/* ================================================================== *
 * ORDERS LIST
 * ================================================================== */

.nou-acct-orders {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nou-acct-order {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--custom--line--soft);
}

.nou-acct-order:first-child {
	border-top: 1px solid var(--wp--custom--line--soft);
}

@media (max-width: 600px) {
	.nou-acct-order {
		grid-template-columns: 1fr auto;
	}
}

.nou-acct-order__no {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.nou-acct-order__meta {
	font-size: 13px;
	color: var(--wp--custom--neutral--600);
}

.nou-acct-order__sum {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast);
}

.nou-acct-order__act a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.nou-acct-order__act a:hover {
	text-decoration: underline;
}

/* Order status badges */
.nou-acct-ostat {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.nou-acct-ostat--done {
	color: #1a7431;
}

.nou-acct-ostat--wait {
	color: #92600a;
}

/* ================================================================== *
 * ACCOUNT DETAILS FORM
 * ================================================================== */

.nou-page-account .woocommerce-EditAccountForm {
	max-width: 62ch;
}

.nou-page-account .woocommerce-EditAccountForm label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
	margin-bottom: 7px;
}

.nou-page-account .woocommerce-EditAccountForm input[type="text"],
.nou-page-account .woocommerce-EditAccountForm input[type="email"],
.nou-page-account .woocommerce-EditAccountForm input[type="password"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--custom--surface--soft);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	transition: border-color 180ms var(--wp--custom--easing--base);
}

.nou-page-account .woocommerce-EditAccountForm input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--custom--neutral--100);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}

.nou-page-account .woocommerce-EditAccountForm .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 18px;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 180ms var(--wp--custom--easing--base);
}

.nou-page-account .woocommerce-EditAccountForm .woocommerce-Button:hover {
	background: var(--wp--preset--color--secondary);
}

/* ================================================================== *
 * WOO NOTICES (success, error)
 * ================================================================== */

.nou-page-account .woocommerce-message,
.nou-page-account .woocommerce-info {
	padding: 14px 18px;
	margin-bottom: 20px;
	border: 1px solid var(--wp--custom--line--strong);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--xs);
	font-size: 14px;
	color: var(--wp--preset--color--contrast);
}

.nou-page-account .woocommerce-error {
	padding: 14px 18px;
	margin-bottom: 20px;
	border: 1px solid var(--wp--custom--line--strong);
	border-left: 3px solid #b42318;
	border-radius: var(--wp--custom--radius--xs);
	font-size: 14px;
	color: var(--wp--preset--color--contrast);
}

/*
 * Reduced motion: merged into the single @media block at the end of this file
 * to cover login form, register form and account details form in one place.
 */


/* ================================================================== *
 * LOGIN FORM — /my-account/ when not logged in
 *
 * Design source: design-lab/wf-c-login.html
 * Wireframe: narrow form (max 440px), labels mono uppercase,
 * no "Remember me", mono button, "Forgot password?" link,
 * link to register at the bottom.
 *
 * WOO SELECTORS:
 *   .woocommerce-form-login           → form element
 *   .woocommerce-form-row             → each field wrapper
 *   .woocommerce-Input                → input elements
 *   .woocommerce-form-login__submit   → submit button
 *   .woocommerce-form-login__rememberme → remember checkbox (HIDE)
 *   .woocommerce-LostPassword         → "Lost your password?" link
 * ================================================================== */

/* Narrow the form — wireframe uses max 440px, no border box */
:root .nou-page-account .woocommerce-form-login {
	max-width: 440px;
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* Hide the "Login" h2 heading that Woo adds — page title "Account" is enough */
:root .nou-page-account .woocommerce h2,
:root .nou-page-account .woocommerce-MyAccount-content > h2 {
	display: none;
}

/* Field wrappers — spacing */
:root .nou-page-account .woocommerce-form-login .woocommerce-form-row {
	margin-bottom: clamp(16px, 2vw, 22px);
	padding: 0;
}

/* Labels — mono uppercase per wireframe */
:root .nou-page-account .woocommerce-form-login label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
}

/* Required asterisk */
:root .nou-page-account .woocommerce-form-login .required {
	color: var(--wp--preset--color--primary);
	visibility: visible;
}

/* Input fields */
:root .nou-page-account .woocommerce-form-login .woocommerce-Input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--custom--surface--soft);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	transition: border-color 180ms var(--wp--custom--easing--base);
}

:root .nou-page-account .woocommerce-form-login .woocommerce-Input:hover {
	border-color: var(--wp--custom--neutral--400);
}

:root .nou-page-account .woocommerce-form-login .woocommerce-Input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--custom--neutral--100);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}

/* Hide "Remember me" — wireframe decision: session default 48h is enough */
:root .nou-page-account .woocommerce-form-login__rememberme {
	display: none !important;
}

/* Submit button — full-width accent, mono uppercase */
:root .nou-page-account .woocommerce-form-login__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: auto;
	margin-top: 4px;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 180ms var(--wp--custom--easing--base);
}

:root .nou-page-account .woocommerce-form-login__submit:hover {
	background: var(--wp--preset--color--secondary);
}

/* "Lost your password?" link */
:root .nou-page-account .woocommerce-LostPassword {
	margin-top: 18px;
}

:root .nou-page-account .woocommerce-LostPassword a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--wp--custom--neutral--600);
	text-decoration: underline;
	text-underline-offset: 3px;
}

:root .nou-page-account .woocommerce-LostPassword a:hover {
	color: var(--wp--preset--color--primary);
}

/* Password visibility toggle — keep functional but restyle */
:root .nou-page-account .woocommerce-form-login .show-password-input {
	top: 50%;
	transform: translateY(-50%);
	right: 12px;
	color: var(--wp--custom--neutral--600);
}

/* ================================================================== *
 * REGISTER FORM — /my-account/ registration tab
 *
 * Design source: design-lab/wf-c-login.html (the "Create an account" section).
 * Wireframe decision: email + password only. No confirm-password field — typing
 * blind twice doesn't reduce mistakes; a show/hide toggle does. Name and billing
 * details are collected at checkout, not at signup, to minimise friction.
 *
 * WOO SELECTORS (classic template, not block-based):
 *   .woocommerce-form.woocommerce-form-register  → <form> wrapper
 *   .woocommerce-form-register .woocommerce-form-row → each field row
 *   .woocommerce-form-register .woocommerce-Input    → all inputs
 *   .woocommerce-form-register__submit              → submit button
 *   .woocommerce-privacy-policy-text               → privacy note below form
 *
 * Most declarations are shared with the login form (same design language),
 * but they are repeated here rather than placed on a shared ancestor so each
 * form remains independently movable without carrying the other's rules.
 * ================================================================== */

/* Container — narrow, same max-width as login form */
:root .nou-page-account .woocommerce-form-register {
	max-width: 440px;
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* Field rows */
:root .nou-page-account .woocommerce-form-register .woocommerce-form-row {
	margin-bottom: clamp(16px, 2vw, 22px);
	padding: 0;
}

/* Labels — mono uppercase */
:root .nou-page-account .woocommerce-form-register label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
}

:root .nou-page-account .woocommerce-form-register .required {
	color: var(--wp--preset--color--primary);
	visibility: visible;
}

/* Inputs */
:root .nou-page-account .woocommerce-form-register .woocommerce-Input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--custom--surface--soft);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	transition: border-color 180ms var(--wp--custom--easing--base);
}

:root .nou-page-account .woocommerce-form-register .woocommerce-Input:hover {
	border-color: var(--wp--custom--neutral--400);
}

:root .nou-page-account .woocommerce-form-register .woocommerce-Input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--custom--neutral--100);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}

/* Submit button */
:root .nou-page-account .woocommerce-form-register__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: auto;
	margin-top: 4px;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 180ms var(--wp--custom--easing--base);
}

:root .nou-page-account .woocommerce-form-register__submit:hover {
	background: var(--wp--preset--color--secondary);
}

/* Privacy policy note — smaller, muted, below the button */
.nou-page-account .woocommerce-privacy-policy-text {
	margin-top: 14px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--wp--custom--neutral--600);
}

.nou-page-account .woocommerce-privacy-policy-text a {
	color: var(--wp--custom--neutral--700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nou-page-account .woocommerce-privacy-policy-text a:hover {
	color: var(--wp--preset--color--primary);
}

/* "Already have an account?" link below register form.
 * Woo renders this as a paragraph after the <form> element. */
.nou-page-account .u-column2 p,
.nou-page-account .woocommerce-form-register + p {
	margin-top: 20px;
	font-size: 14px;
	color: var(--wp--custom--neutral--600);
}

.nou-page-account .u-column2 p a,
.nou-page-account .woocommerce-form-register + p a {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary);
	text-underline-offset: 3px;
}

/* Two-column layout Woo uses on /my-account/ when logged out:
 * .u-column1 = login, .u-column2 = register.
 * Woo wraps both in .woocommerce .col2-set. Remove the float-based layout
 * so the columns stack vertically — same narrow-form approach as the wireframe. */
.nou-page-account .woocommerce .col2-set {
	display: block;
}

.nou-page-account .woocommerce .col2-set .col-1,
.nou-page-account .woocommerce .col2-set .col-2 {
	float: none;
	width: 100%;
	padding: 0;
}

/* Heading above each form — "Returning customer" / "New customer".
 * Keep them but restyle to match the page's heading hierarchy. */
.nou-page-account .woocommerce .col2-set h2 {
	display: block; /* override the hide rule that applies inside content area */
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(15px, 1.6vw, 17px);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wp--custom--line--soft);
}

/* Password visibility toggle */
.nou-page-account .woocommerce-form-register .show-password-input {
	top: 50%;
	transform: translateY(-50%);
	right: 12px;
	color: var(--wp--custom--neutral--600);
}

/* ================================================================== *
 * RESET PASSWORD — /my-account/lost-password/
 *
 * Design source: design-lab/wf-c-reset.html
 * The flow has four states, all rendered by WooCommerce/WordPress core,
 * which already owns the security: token validation on the action=rp&key
 * link, no account-enumeration in the "check your inbox" message, and the
 * re-enter-password field on the final form. The theme only needs to dress
 * the two forms in the same language as the login form; the two
 * confirmation states are core notices, styled with the shared notice rules.
 *
 * WOO SELECTORS (both forms share the wrapper):
 *   .woocommerce-ResetPassword            → lost-password AND reset form
 *   #user_login                           → state 1, email/username field
 *   #password_1 / #password_2             → state 3, new + confirm password
 *   .woocommerce-Input                    → input elements
 *   .woocommerce-Button                   → submit button
 * ================================================================== */

:root .nou-page-account .woocommerce-ResetPassword {
	max-width: 440px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* Intro line Woo prints above the lost-password field. */
:root .nou-page-account .woocommerce-ResetPassword > p:first-child {
	margin-bottom: clamp(18px, 2.4vw, 26px);
	max-width: 54ch;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--custom--neutral--600);
}

:root .nou-page-account .woocommerce-ResetPassword .woocommerce-form-row {
	margin-bottom: clamp(16px, 2vw, 22px);
	padding: 0;
}

:root .nou-page-account .woocommerce-ResetPassword label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
}

:root .nou-page-account .woocommerce-ResetPassword .required {
	color: var(--wp--preset--color--primary);
	visibility: visible;
}

:root .nou-page-account .woocommerce-ResetPassword .woocommerce-Input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--custom--surface--soft);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	transition: border-color 180ms var(--wp--custom--easing--base);
}

:root .nou-page-account .woocommerce-ResetPassword .woocommerce-Input:hover {
	border-color: var(--wp--custom--neutral--400);
}

:root .nou-page-account .woocommerce-ResetPassword .woocommerce-Input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--custom--neutral--100);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}

:root .nou-page-account .woocommerce-ResetPassword .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: auto;
	margin-top: 4px;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 180ms var(--wp--custom--easing--base);
}

:root .nou-page-account .woocommerce-ResetPassword .woocommerce-Button:hover {
	background: var(--wp--preset--color--secondary);
}

/* ================================================================== *
 * ACTION BUTTONS — shared by downloads, licences, devices
 *
 * `.nou-acct-btn` is the theme's own small button. Woo's own buttons on this
 * page (`.woocommerce-button.button`, `.button`) get the same treatment further
 * down, so a row does not change shape depending on who printed it.
 *
 * min-height rather than fixed padding: 10px text plus 7px padding can still
 * fall under 24px if the font changes, and a floor cannot. 24px is the WCAG
 * 2.5.8 minimum — "Cancel" sits next to "Pay", and a mis-tap there cancels an
 * order nobody meant to cancel.
 * ================================================================== */

.nou-acct-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 24px;
	padding: 9px 14px;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transition: background-color 180ms var(--wp--custom--easing--base), border-color 180ms var(--wp--custom--easing--base), color 180ms var(--wp--custom--easing--base);
}

.nou-acct-btn:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Secondary: same box, outline only. For the action that is not the one the
 * buyer came for — Changelog next to Download, Extend on a licence still valid. */
.nou-acct-btn--secondary {
	border-color: var(--wp--custom--line--strong);
	background: transparent;
	color: var(--wp--custom--neutral--700);
}

.nou-acct-btn--secondary:hover {
	border-color: var(--wp--preset--color--primary);
	background: transparent;
	color: var(--wp--preset--color--primary);
}

/* ================================================================== *
 * LICENCE CARDS — /my-account/licenses/
 *
 * The nouthemes-license plugin's five-column table is replaced by these cards
 * in inc/integrations/woocommerce/account-licenses.php. The key column alone is
 * 24 mono characters, which is what pushed the table off a 375px screen.
 * ================================================================== */

.nou-acct-liclist {
	display: grid;
	gap: clamp(12px, 1.6vw, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nou-acct-licrow {
	display: grid;
	gap: 10px;
	padding: clamp(15px, 1.9vw, 19px);
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--md);
}

.nou-acct-licrow__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 14px;
}

.nou-acct-licrow__name {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--contrast);
}

.nou-acct-licrow__meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.7;
	color: var(--wp--custom--neutral--600);
}

.nou-acct-licrow__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Copy feedback. The input and the button both flash so the confirmation is
 * where the eye already is, whichever one was clicked. */
.nou-acct-key input[data-copy].is-copied {
	border-color: var(--wp--preset--color--primary);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
	color: var(--wp--preset--color--primary);
}

.nou-acct-key button.is-copied {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* ================================================================== *
 * ACTIVATED DEVICES — seats under a licence card
 * ================================================================== */

.nou-acct-devices {
	display: grid;
	gap: 8px;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid var(--wp--custom--line--soft);
}

.nou-acct-devices__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--700);
}

.nou-acct-devlist {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nou-acct-dev {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 6px 14px;
	font-size: 13px;
	color: var(--wp--custom--neutral--700);
}

@media (max-width: 600px) {
	.nou-acct-dev {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}
}

.nou-acct-dev__name {
	min-width: 0;
	color: var(--wp--preset--color--contrast);
}

.nou-acct-dev__plat {
	color: var(--wp--custom--neutral--500);
}

.nou-acct-dev__seen {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
}

.nou-acct-dev__act form {
	margin: 0;
}

/* ================================================================== *
 * HINT — small print under a field or above a list
 * ================================================================== */

.nou-acct-hint {
	display: block;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--custom--neutral--600);
}

/* ================================================================== *
 * ADDRESSES — /my-account/edit-address/
 *
 * Shipping is off in this shop, so my-address.php takes its else branch: one
 * Billing card, and NO `.col2-set` / `.woocommerce-Addresses` wrapper. The card
 * is therefore styled directly — keying off a wrapper that is not printed would
 * leave the panel unstyled.
 *
 * The heading is Woo's `<h2>`; `h3` is matched too so a filter that changes the
 * level does not lose the style.
 * ================================================================== */

.nou-page-account .woocommerce-Addresses {
	display: grid;
	gap: clamp(14px, 1.8vw, 18px);
}

.nou-page-account .woocommerce-Address {
	display: grid;
	gap: 10px;
	padding: clamp(15px, 1.9vw, 19px);
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--md);
}

.nou-page-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 14px;
}

/* Beats the generic `.woocommerce-MyAccount-content > h2` rule above only for
 * the heading inside a card, which is a card title rather than a section head. */
.nou-page-account .woocommerce-Address-title h2,
.nou-page-account .woocommerce-Address-title h3 {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--contrast);
}

/* Woo prints this <a> inside the card header — a link standing alone, not one
 * inside a sentence, so it needs a 24px target of its own. */
.nou-page-account .woocommerce-Address-title .edit {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 180ms var(--wp--custom--easing--base);
}

.nou-page-account .woocommerce-Address-title .edit:hover {
	color: var(--wp--preset--color--primary);
}

.nou-page-account .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	font-size: 14px;
	line-height: var(--wp--custom--line-height--medium);
	color: var(--wp--custom--neutral--700);
}

/* ================================================================== *
 * PAYMENT METHODS — /my-account/payment-methods/
 *
 * Woo's markup is kept here: three columns plus buttons fit, and every <td>
 * already carries `data-title`, which is the hook `shop_table_responsive` uses
 * to tear the table into blocks. Below 620px the header is hidden and each cell
 * labels itself from that attribute — Woo's own mechanism, not a second one.
 * ================================================================== */

.nou-page-account .woocommerce-MyAccount-paymentMethods {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.nou-page-account .woocommerce-MyAccount-paymentMethods th,
.nou-page-account .woocommerce-MyAccount-paymentMethods td {
	padding: 12px 14px 12px 0;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--wp--custom--line--soft);
}

.nou-page-account .woocommerce-MyAccount-paymentMethods thead th {
	border-bottom: 1px solid var(--wp--custom--line--strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--600);
}

.nou-page-account .woocommerce-MyAccount-paymentMethods td {
	color: var(--wp--custom--neutral--800);
}

.nou-page-account .woocommerce-MyAccount-paymentMethods .payment-method-expires {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Default card: accent rule on the left, the same language as the active nav
 * item, so "default" is marked the same way "current" is marked.
 *
 * On ::after, not ::before: Woo's responsive teardown puts the cell's own
 * `data-title` label in ::before, and one element has only one of each. */
.nou-page-account .woocommerce-MyAccount-paymentMethods .default-payment-method td:first-child {
	position: relative;
	padding-left: 12px;
}

.nou-page-account .woocommerce-MyAccount-paymentMethods .default-payment-method td:first-child::after {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 0;
	width: 2px;
	background: var(--wp--preset--color--primary);
}

.nou-page-account .woocommerce-MyAccount-paymentMethods .payment-method-actions {
	text-align: right;
	white-space: nowrap;
}

/* ================================================================== *
 * WOO'S OWN SMALL BUTTONS — orders actions, payment method actions
 *
 * orders.php prints `<a class="woocommerce-button button view">`, and
 * payment-methods.php prints `<a class="button delete">`. Woo treats both as
 * BUTTONS, so they are drawn as buttons rather than as underlined text.
 * ================================================================== */

.nou-acct-order__act a,
.nou-page-account .woocommerce-MyAccount-paymentMethods .payment-method-actions a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 4px 11px;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--xs);
	background: transparent;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--wp--custom--neutral--700);
	transition: border-color 160ms var(--wp--custom--easing--base), color 160ms var(--wp--custom--easing--base);
}

.nou-acct-order__act a:hover,
.nou-page-account .woocommerce-MyAccount-paymentMethods .payment-method-actions a:hover {
	border-color: var(--wp--preset--color--primary);
	background: transparent;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}

.nou-acct-order__act {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
}

@media (max-width: 600px) {
	.nou-acct-order__act {
		justify-content: flex-start;
	}
}

/* "Add payment method" stands alone under the table. */
.nou-page-account .woocommerce-MyAccount-content > .button {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	margin-top: clamp(16px, 2vw, 22px);
	padding: 10px 16px;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--xs);
	background: transparent;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--custom--neutral--900);
	transition: border-color 180ms var(--wp--custom--easing--base), color 180ms var(--wp--custom--easing--base);
}

.nou-page-account .woocommerce-MyAccount-content > .button:hover {
	border-color: var(--wp--preset--color--primary);
	background: transparent;
	color: var(--wp--preset--color--primary);
}

/* Below 620px the table becomes labelled blocks — but WooCommerce already does
 * that. woocommerce-smallscreen.css hides the thead, sets `tr`/`td` to block and
 * prints `attr(data-title) ": "` in a ::before, all under
 * `.woocommerce-page table.shop_table_responsive tr td` — specificity (0,2,2),
 * which outweighs a `.nou-page-account .woocommerce-MyAccount-paymentMethods td`
 * of (0,2,1). Re-declaring the teardown here lost that fight silently.
 *
 * So this block only restyles what Woo leaves ugly: the label typography, the
 * right-aligned text, and the accent rule that has to move from the first cell
 * to the whole row once the cells stack. `table.shop_table_responsive` is
 * carried in each selector to match Woo's weight. */
@media (max-width: 620px) {
	.nou-page-account table.shop_table_responsive.woocommerce-MyAccount-paymentMethods tr {
		padding-block: 12px;
		border-bottom: 1px solid var(--wp--custom--line--soft);
	}

	/* Woo forces `text-align: right !important` on these cells, which reads as a
	 * column alignment left over from the table. */
	.nou-page-account table.shop_table_responsive.woocommerce-MyAccount-paymentMethods tr td {
		padding: 3px 0;
		border: 0;
		text-align: left !important;
	}

	.nou-page-account table.shop_table_responsive.woocommerce-MyAccount-paymentMethods tr:nth-child(2n) td {
		background-color: transparent;
	}

	/* Woo's label is bold body text, floated left, with a trailing colon. */
	.nou-page-account table.shop_table_responsive.woocommerce-MyAccount-paymentMethods tr td::before {
		content: attr(data-title);
		float: none;
		display: block;
		font-family: var(--wp--preset--font-family--mono);
		font-size: 10px;
		font-weight: 400;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--wp--custom--neutral--600);
	}

	/* The accent rule moves to the row: with the cells stacked, a bar on the
	 * first one would mark only the card number instead of the whole card. */
	.nou-page-account table.shop_table_responsive.woocommerce-MyAccount-paymentMethods .default-payment-method td:first-child {
		padding-left: 0;
	}

	.nou-page-account table.shop_table_responsive.woocommerce-MyAccount-paymentMethods .default-payment-method td:first-child::after {
		content: none;
	}

	.nou-page-account table.shop_table_responsive.woocommerce-MyAccount-paymentMethods .default-payment-method {
		padding-left: 12px;
		border-left: 2px solid var(--wp--preset--color--primary);
	}
}

/* ================================================================== *
 * PAGINATION — orders, Previous/Next only
 *
 * orders.php prints this without page numbers (`--without-numbers`), so there
 * is nothing to style beyond the two buttons.
 * ================================================================== */

.nou-page-account .woocommerce-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: clamp(18px, 2.4vw, 26px);
}

.nou-page-account .woocommerce-pagination .button {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 9px 14px;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--xs);
	background: transparent;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--custom--neutral--900);
	transition: border-color 180ms var(--wp--custom--easing--base), color 180ms var(--wp--custom--easing--base);
}

.nou-page-account .woocommerce-pagination .button:hover {
	border-color: var(--wp--preset--color--primary);
	background: transparent;
	color: var(--wp--preset--color--primary);
}

/* ================================================================== *
 * STACKED LAYOUT — one column below 860px
 *
 * Last in the file on purpose. The nav is pinned to `grid-column: 1` and the
 * content to `grid-column: 2` further up; collapsing `grid-template-columns` to
 * a single track does not undo those, because `grid-column: 2` on a one-column
 * grid creates an implicit second column. The nav then got 0px of the 375px row
 * and the content sat beside it — measured on all seven endpoints before this
 * block existed.
 *
 * The reset has the same specificity as the rules it undoes, so it has to come
 * after them: a media query adds no weight of its own.
 * ================================================================== */

@media (max-width: 860px) {
	:root .nou-page-account .woocommerce-MyAccount-navigation,
	:root .nou-page-account .woocommerce-MyAccount-content {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ================================================================== *
 * REDUCED MOTION (register + login combined)
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.nou-page-account .woocommerce-MyAccount-navigation li a,
	.nou-page-account .woocommerce-EditAccountForm input,
	.nou-page-account .woocommerce-EditAccountForm .woocommerce-Button,
	.nou-acct-key button,
	.nou-acct-btn,
	.nou-acct-order__act a,
	.nou-page-account .woocommerce-Address-title .edit,
	.nou-page-account .woocommerce-MyAccount-paymentMethods .payment-method-actions a,
	.nou-page-account .woocommerce-MyAccount-content > .button,
	.nou-page-account .woocommerce-pagination .button,
	.nou-page-account .woocommerce-form-register .woocommerce-Input,
	.nou-page-account .woocommerce-form-register__submit,
	.nou-page-account .woocommerce-ResetPassword .woocommerce-Input,
	.nou-page-account .woocommerce-ResetPassword .woocommerce-Button {
		transition: none;
	}
}