/* =========================================================================
   rl-account.css — My Account (P7)

   Loaded ONLY on the account page, its endpoints, /login/ and /register/
   (see inc/rl-account.php §5). Depends on rl-tokens.css for the palette,
   fonts, radii and hard-shadow variables; nothing here re-declares a token.

   PROVENANCE. The source's signed-in account area was never captured —
   raptorlabs.is gates it behind a hard account wall. Every value below comes
   from the MEASURED token contract in spec/DESIGN-TOKENS.md §4.7, not from a
   screenshot of a source account page, because no such screenshot exists.

   THE SITE IS MONOCHROME. --accent (#33FF0A) is declared at source and painted
   on nothing: recon walked every element on /store and the PDP and measured
   accentCount: 0. It is not used here either. --destructive is the one colour
   token that IS painted at source (the out-of-stock chip border) and is used
   only for cancelled / failed / refunded orders.

   LIGHT ONLY. No .dark block exists at source and there is no toggle.

   ── THE THREE OVERRIDE TRAPS THIS FILE EXISTS TO BEAT ────────────────────

   1. `.woocommerce-MyAccount-navigation{float:left;width:30%}`
      (woocommerce-layout.css). Inside a CSS grid the FLOAT is inert but the
      30% is NOT — it is resolved against the grid AREA, so the sidebar
      collapses to a sliver while every structural test still passes. Killed
      explicitly in §2, and the rendered width is measured, not assumed.
      Its sibling `.woocommerce-MyAccount-content{float:right;width:68%}` has
      the same defect and is killed alongside it.

   2. `.woocommerce:where(body:not(...)) a.button` computes (0,2,1) and
      repaints any `.button` as Woo's grey 3px-radius pill. Woo's own account
      templates put that class on the order actions, so it lands here.
      `.rl-account__btn` is therefore written tripled — (0,3,0) — the same
      technique rl-base.css already uses for the product-card CTA.

   3. Woo's form rules are deep (`.woocommerce form .form-row.woocommerce-
      validated input.input-text` = (0,4,2)). Inputs are scoped through
      `.rl-account .rl-account__form` so they win on specificity rather than
      on load order alone.
   ====================================================================== */

/* =========================================================================
   1. PAGE FRAME
   ====================================================================== */
.rl-account,
.rl-auth {
	font-family: var(--font-ui);
	color: hsl(var(--foreground));
}

.rl-account__intro {
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: var(--border-width) solid hsl(var(--foreground));
}

.rl-account__eyebrow {
	display: block;
	font-family: var(--font-ui);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: hsl(var(--muted-foreground));
	margin-bottom: .5rem;
}

.rl-account__hello {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 1rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.rl-account__hello strong {
	font-weight: 700;
}

/* =========================================================================
   2. THE GRID + THE 30% SIDEBAR TRAP
   ====================================================================== */
.rl-account__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.rl-account__grid {
		/*
		 * 260px is a FIXED track, deliberately not a percentage: the longest
		 * label ("Account details") must never wrap, and a percentage track
		 * silently shrinks it as the viewport narrows.
		 */
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 2rem;
	}
}

/* --- TRAP 1: kill Woo's float+percentage on BOTH account columns ---------
   Woo:  .woocommerce-MyAccount-navigation{float:left;width:30%}   (0,1,0)
         .woocommerce-MyAccount-content   {float:right;width:68%}  (0,1,0)
   Ours: (0,3,0) — wins on specificity even if the dependency ordering in
   rl_account_enqueue_assets() is ever dropped by a merge.
   ---------------------------------------------------------------------- */
.rl-account .rl-account__nav.woocommerce-MyAccount-navigation,
.rl-account .rl-account__content.woocommerce-MyAccount-content {
	float: none;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
}

/* =========================================================================
   3. SIDEBAR NAV
   ====================================================================== */
.rl-account__nav {
	background: hsl(var(--background));
	border: var(--border-width) solid hsl(var(--foreground));
	box-shadow: var(--shadow-hard-6);
}

.rl-account__navlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rl-account__navitem {
	margin: 0;
	border-bottom: var(--border-width) solid hsl(var(--foreground));
}

.rl-account__navitem:last-child {
	border-bottom: 0;
}

.rl-account__navlink {
	display: block;
	padding: .875rem 1.125rem;
	font-family: var(--font-ui);
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	/*
	 * The chip step (0.18em) is too wide for a 260px column — "ACCOUNT
	 * DETAILS" wrapped onto two lines in a prior build. The `widest` step
	 * (0.1em, the button/entryId value) fits with room to spare, and nowrap
	 * makes a regression visible as overflow rather than as silent wrapping.
	 */
	letter-spacing: var(--tracking-widest);
	white-space: nowrap;
	text-decoration: none;
	color: hsl(var(--foreground));
	background: hsl(var(--background));
	transition: background .2s, color .2s;
}

.rl-account__navlink:hover,
.rl-account__navlink:focus-visible {
	background: rgb(var(--surface-container));
	color: hsl(var(--foreground));
}

/* Focus ring: hsl(var(--ring)) is the lime #33FF0A, and that IS authentic —
   the source paints `focus-visible:outline-ring outline-dashed outline-2
   outline-offset-2` on 38 elements on its homepage alone (237 across captured
   pages). Recon's "accentCount: 0" measured the RESTING state and never walked
   focus. Interactive controls therefore keep the site's real focus treatment;
   only the non-interactive role="alert" notices below suppress it. */
.rl-account__navlink:focus-visible {
	outline: 2px dashed hsl(var(--ring));
	outline-offset: -4px;
}

/* Active endpoint: the source's own selected-state treatment is an inverted
   block (bg-foreground / text-background), as its coin tab strip does it. */
.rl-account__navitem.is-active > .rl-account__navlink,
.woocommerce-MyAccount-navigation-link.is-active > .rl-account__navlink {
	background: hsl(var(--foreground));
	color: hsl(var(--background));
}

.rl-account__navitem--customer-logout > .rl-account__navlink {
	color: hsl(var(--muted-foreground));
}

.rl-account__navitem--customer-logout > .rl-account__navlink:hover {
	color: hsl(var(--foreground));
}

/* Below the grid breakpoint the sidebar becomes a strip of chips.
   It WRAPS rather than scrolling: a horizontally scrolling strip pushed
   "Account details" and "Logout" off-screen at 390 with nothing to indicate
   they were there. Each chip keeps its own border and its own nowrap label,
   so the list can wrap without any individual label ever wrapping. */
@media (max-width: 1023.98px) {
	.rl-account__nav {
		border: 0;
		box-shadow: none;
		background: none;
	}

	.rl-account__navlist {
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
	}

	.rl-account__navitem {
		border: var(--border-width) solid hsl(var(--foreground));
	}

	.rl-account__navlink {
		padding: .625rem .875rem;
		font-size: .75rem;
	}
}

/* =========================================================================
   4. CONTENT CARD
   ====================================================================== */
.rl-account__content {
	background: hsl(var(--background));
	border: var(--border-width) solid hsl(var(--foreground));
	box-shadow: var(--shadow-hard-6);
	padding: 1.5rem;
}

@media (min-width: 768px) {
	.rl-account__content {
		padding: 2rem;
	}
}

.rl-account__content > :first-child {
	margin-top: 0;
}

.rl-account__content > :last-child {
	margin-bottom: 0;
}

.rl-account__lede {
	margin: 0 0 1.5rem;
	font-family: var(--font-ui);
	font-size: .9375rem;
	line-height: 1.6;
	color: hsl(var(--muted-foreground));
}

.rl-account__link {
	font-family: var(--font-ui);
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: hsl(var(--foreground));
	text-decoration: underline;
	text-underline-offset: 4px;
}

.rl-account__link:hover {
	text-decoration-thickness: 2px;
}

.rl-account__foot-note {
	margin: 2rem 0 0;
	padding-top: 1.25rem;
	border-top: var(--border-width) solid hsl(var(--border));
	font-family: var(--font-ui);
	font-size: .8125rem;
	line-height: 1.6;
	color: hsl(var(--muted-foreground));
}

.rl-account__foot-note a {
	color: hsl(var(--foreground));
	text-decoration: underline;
	text-underline-offset: 3px;
	word-break: break-word;
}

/* =========================================================================
   5. BUTTONS  —  TRAP 2
   Tripled class = (0,3,0), which outranks Woo's (0,2,1) a.button skin. The
   press behaviour is the source's form A (§4.4): shadow appears on hover and
   is removed on press while the element slides 4px into where it was.
   ====================================================================== */
.rl-account__btn.rl-account__btn.rl-account__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	white-space: nowrap;
	border: var(--border-width) solid transparent;
	border-radius: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .8125rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	padding: .75rem 1.25rem;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	transition: all .2s;
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.rl-account__btn.rl-account__btn.rl-account__btn:hover {
	background: hsl(var(--primary-foreground));
	color: hsl(var(--primary));
	border-color: hsl(var(--foreground));
	box-shadow: var(--shadow-hard-4);
}

.rl-account__btn.rl-account__btn.rl-account__btn:active {
	box-shadow: none;
	transform: translate(4px, 4px);
}

.rl-account__btn.rl-account__btn.rl-account__btn:focus-visible {
	outline: 2px dashed hsl(var(--ring));
	outline-offset: 2px;
}

.rl-account__btn.rl-account__btn.rl-account__btn::after {
	display: none;
}

/* Secondary — the source's `pill` variant at commerce size, measured on the
   PDP's "VIEW LABS TEST": #ECEDEF on 2px zinc-200, Space Grotesk 700/0.2em. */
.rl-account__btn--ghost.rl-account__btn--ghost.rl-account__btn--ghost {
	background: rgb(var(--surface-container-lowest));
	color: hsl(var(--primary));
	border-color: var(--rl-zinc-200);
	font-family: var(--font-ui);
	letter-spacing: var(--tracking-pill);
}

.rl-account__btn--ghost.rl-account__btn--ghost.rl-account__btn--ghost:hover {
	background: rgb(var(--surface-dim));
	color: hsl(var(--primary));
	border-color: hsl(var(--foreground));
	box-shadow: var(--shadow-hard-4);
}

.rl-account__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 1.5rem 0 0;
}

/* =========================================================================
   6. STATUS CHIPS + BANNERS

   ON-HOLD IS THE NORMAL STATE ON THIS STORE. It gets the same neutral,
   confident treatment as any other in-progress state — a black-on-white chip
   in the house chip geometry (px-2.5 py-1.5, 2px border, 0 radius). No red,
   no warning triangle, no error colouring.
   ====================================================================== */
.rl-account__chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--font-ui);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-chip);
	line-height: 1.2;
	padding: .375rem .625rem;
	border: var(--border-width) solid hsl(var(--foreground));
	border-radius: 0;
	background: hsl(var(--background));
	color: hsl(var(--foreground));
}

/* waiting on us / on the customer — neutral, not alarming */
.rl-account__chip--wait {
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	border-color: hsl(var(--foreground));
	box-shadow: var(--shadow-hard-2);
}

/* done — the inverted selected-state treatment */
.rl-account__chip--good {
	background: hsl(var(--foreground));
	color: hsl(var(--background));
	border-color: hsl(var(--foreground));
}

/* genuinely dead orders only: cancelled / failed / refunded */
.rl-account__chip--stop {
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	border-color: hsl(var(--destructive));
}

.rl-account__banner {
	border: var(--border-width) solid hsl(var(--foreground));
	background: rgb(var(--surface-container));
	padding: 1.25rem;
	margin: 0 0 1.75rem;
}

.rl-account__banner--stop {
	border-color: hsl(var(--destructive));
}

.rl-account__banner-text {
	margin: .75rem 0 0;
	font-family: var(--font-ui);
	font-size: .9375rem;
	line-height: 1.6;
}

.rl-account__banner-text a {
	color: hsl(var(--foreground));
	text-decoration: underline;
	text-underline-offset: 3px;
	word-break: break-word;
}

/* =========================================================================
   7. DASHBOARD
   ====================================================================== */
.rl-dash__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.rl-dash__stat {
	border: var(--border-width) solid hsl(var(--foreground));
	background: hsl(var(--background));
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.rl-dash__stat-label {
	font-family: var(--font-ui);
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-chip);
	color: hsl(var(--muted-foreground));
}

.rl-dash__stat-figure {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 2rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.rl-dash__stat-figure--text {
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking-title);
}

.rl-dash__section {
	margin-bottom: 2rem;
}

.rl-dash__title,
.rl-account__formtitle {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 1.375rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: var(--tracking-title);
	margin: 0 0 1rem;
}

.rl-dash__orders {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.rl-dash__order {
	border: var(--border-width) solid hsl(var(--foreground));
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	align-items: flex-start;
}

.rl-dash__order-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}

.rl-dash__order-number {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
	color: hsl(var(--foreground));
	text-decoration: none;
}

.rl-dash__order-number:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.rl-dash__order-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	font-family: var(--font-ui);
	font-size: .8125rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: hsl(var(--muted-foreground));
}

.rl-dash__more {
	margin: 1rem 0 0;
}

.rl-dash__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}

.rl-dash__link {
	display: flex;
	flex-direction: column;
	gap: .375rem;
	padding: 1rem;
	border: var(--border-width) solid hsl(var(--foreground));
	background: hsl(var(--background));
	text-decoration: none;
	color: hsl(var(--foreground));
	/* Source form B: cards lift on hover. */
	box-shadow: none;
	transition: all .2s;
}

.rl-dash__link:hover {
	box-shadow: var(--shadow-hard-8);
	background: rgb(var(--surface-container));
}

.rl-dash__link-title {
	font-family: var(--font-ui);
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
}

.rl-dash__link-text {
	font-family: var(--font-ui);
	font-size: .8125rem;
	line-height: 1.5;
	color: hsl(var(--muted-foreground));
}

/* =========================================================================
   8. ORDERS TABLE

   ⚠ The `shop_table_responsive` class is deliberately NOT on this table.
   woocommerce-smallscreen.css hides `tbody th` at ≤768px, and the order
   NUMBER lives in a <th scope="row"> — so Woo's own responsive treatment
   silently deletes the most useful column on a phone. We keep the semantic
   header cell and do the stacking ourselves below, where it stays visible.
   ====================================================================== */
.rl-orders__table {
	width: 100%;
	border-collapse: collapse;
	border: var(--border-width) solid hsl(var(--foreground));
	margin: 0;
}

.rl-orders__table thead th {
	text-align: left;
	padding: .75rem 1rem;
	background: hsl(var(--foreground));
	color: hsl(var(--background));
	font-family: var(--font-ui);
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-chip);
	border: 0;
}

.rl-orders__cell {
	padding: 1rem;
	border-top: var(--border-width) solid hsl(var(--border));
	vertical-align: middle;
	font-family: var(--font-ui);
	font-size: .875rem;
	text-align: left;
}

.rl-orders__row:first-child .rl-orders__cell {
	border-top: 0;
}

.rl-orders__number {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	color: hsl(var(--foreground));
	text-decoration: none;
	white-space: nowrap;
}

.rl-orders__number:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.rl-orders__total {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Woo wraps prices in .woocommerce-Price-amount — keep it inheriting. */
.rl-orders__total .woocommerce-Price-amount,
.rl-dash__order-meta .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

.rl-orders__cell--actions {
	display: table-cell;
	white-space: nowrap;
}

.rl-orders__cell--actions .rl-account__btn {
	margin: .125rem .25rem .125rem 0;
	padding: .5rem .875rem;
	font-size: .6875rem;
}

.rl-orders__pagination {
	display: flex;
	gap: .75rem;
	margin-top: 1.5rem;
}

/* --- stacked cards below md: our own, with the order number kept --------- */
@media (max-width: 767.98px) {
	.rl-orders__table,
	.rl-orders__table tbody,
	.rl-orders__table tr,
	.rl-orders__table td,
	.rl-orders__table th {
		display: block;
	}

	.rl-orders__table thead {
		display: none;
	}

	.rl-orders__table {
		border: 0;
	}

	.rl-orders__row {
		border: var(--border-width) solid hsl(var(--foreground));
		margin-bottom: 1rem;
		padding: .25rem 0;
	}

	.rl-orders__cell {
		border-top: 0;
		padding: .5rem 1rem;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
	}

	/* The label that Woo's own smallscreen sheet would have printed — except
	   it skips <th> cells, which is the defect noted above. */
	.rl-orders__cell::before {
		content: attr(data-title);
		font-size: .6875rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: var(--tracking-chip);
		color: hsl(var(--muted-foreground));
		flex: 0 0 auto;
	}

	.rl-orders__cell--number::before {
		content: attr(data-title);
	}

	.rl-orders__cell--actions {
		display: block;
	}

	.rl-orders__cell--actions::before {
		display: none;
	}

	.rl-orders__cell--actions .rl-account__btn {
		width: 100%;
		margin: .25rem 0 0;
	}
}

/* =========================================================================
   9. SINGLE ORDER
   ====================================================================== */
.rl-vieworder__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: var(--border-width) solid hsl(var(--foreground));
	margin-bottom: 1rem;
}

.rl-vieworder__number {
	display: block;
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 1.75rem;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.rl-vieworder__placed {
	margin: 0 0 1.5rem;
	font-family: var(--font-ui);
	font-size: .8125rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: hsl(var(--muted-foreground));
}

.rl-vieworder__steps {
	margin: 1rem 0 0;
	padding-left: 1.25rem;
	font-family: var(--font-ui);
	font-size: .875rem;
	line-height: 1.7;
}

.rl-vieworder__steps li {
	margin-bottom: .375rem;
}

.rl-vieworder__steps a {
	color: hsl(var(--foreground));
	text-decoration: underline;
	text-underline-offset: 3px;
	word-break: break-word;
}

.rl-vieworder__coin {
	margin: 1rem 0 .25rem;
	font-family: var(--font-ui);
	font-size: .875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.rl-vieworder__warn {
	margin: 0;
	font-family: var(--font-ui);
	font-size: .8125rem;
	line-height: 1.6;
	font-weight: 700;
	color: hsl(var(--foreground));
	border-left: var(--border-width) solid hsl(var(--destructive));
	padding-left: .75rem;
}

.rl-vieworder__mailhint {
	margin: 1rem 0 0;
	font-family: var(--font-ui);
	font-size: .8125rem;
	line-height: 1.6;
	color: hsl(var(--muted-foreground));
}

.rl-vieworder__section {
	margin-top: 2rem;
}

.rl-vieworder__notes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .75rem;
}

.rl-vieworder__note {
	border: var(--border-width) solid hsl(var(--border));
	padding: .875rem 1rem;
	font-family: var(--font-ui);
	font-size: .875rem;
	line-height: 1.6;
}

.rl-vieworder__note .meta {
	margin: 0 0 .25rem;
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-chip);
	color: hsl(var(--muted-foreground));
}

.rl-vieworder__note p:last-child {
	margin-bottom: 0;
}

.rl-vieworder__back {
	margin: 2rem 0 0;
}

/* Woo's order-details + customer-details tables (rendered by the
   woocommerce_view_order hook, so their markup is not ours to change). */
.rl-vieworder__details h2,
.rl-vieworder__details h3 {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking-title);
	margin: 0 0 1rem;
}

.rl-vieworder__details table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: var(--border-width) solid hsl(var(--foreground));
	margin: 0 0 1.5rem;
	font-family: var(--font-ui);
	font-size: .875rem;
}

.rl-vieworder__details table.shop_table th,
.rl-vieworder__details table.shop_table td {
	padding: .75rem 1rem;
	text-align: left;
	border-top: var(--border-width) solid hsl(var(--border));
	vertical-align: top;
}

.rl-vieworder__details table.shop_table thead th {
	background: hsl(var(--foreground));
	color: hsl(var(--background));
	border-top: 0;
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-chip);
}

.rl-vieworder__details table.shop_table tfoot th,
.rl-vieworder__details table.shop_table tfoot td {
	font-weight: 700;
}

.rl-vieworder__details table.shop_table .woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}

.rl-vieworder__details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}

.rl-vieworder__details address {
	font-style: normal;
	font-family: var(--font-ui);
	font-size: .875rem;
	line-height: 1.7;
}

@media (max-width: 767.98px) {
	.rl-vieworder__details table.shop_table th,
	.rl-vieworder__details table.shop_table td {
		padding: .625rem .75rem;
	}
}

/* =========================================================================
   10. ADDRESSES
   ====================================================================== */
.rl-addresses__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
}

/* ⚠ THE CLEARFIX-AS-GRID-ITEM TRAP, SECOND INSTANCE ON THIS SITE.
   woocommerce-layout.css ships
       .woocommerce .col2-set::after, .woocommerce .col2-set::before
       { content:" "; display:table }
   — a float clearfix from the pre-grid era. Inside a display:grid container
   those two pseudo-elements become REAL GRID ITEMS and occupy the first two
   cells, so the billing card rendered in TRACK 3 and looked mysteriously
   centred. Same defect class rl-base.css already neutralises on
   `ul.products::before`. Caught on the 1440 screenshot, not by any count-based
   test — the card count was correct throughout.
   Woo's is (0,2,1); the extra class below makes this (0,3,1). */
.rl-addresses .rl-addresses__grid.col2-set::before,
.rl-addresses .rl-addresses__grid.col2-set::after {
	content: none;
	display: none;
}

/* Woo's u-columns/col2-set scaffolding is float-based; the grid above replaces
   it, so the floats have to go or the second card sits on the first. */
.rl-addresses .rl-addresses__grid > .rl-addresses__card,
.rl-addresses .u-columns > .woocommerce-Address {
	float: none;
	width: auto;
	margin: 0;
}

.rl-addresses__card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
	border: var(--border-width) solid hsl(var(--foreground));
	background: hsl(var(--background));
	padding: 1.25rem;
	box-shadow: var(--shadow-hard-6-soft);
}

.rl-addresses__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking-title);
}

.rl-addresses__body {
	margin: 0;
	font-style: normal;
	font-family: var(--font-ui);
	font-size: .875rem;
	line-height: 1.7;
	flex: 1 1 auto;
}

.rl-addresses__empty {
	color: hsl(var(--muted-foreground));
	text-transform: uppercase;
	font-size: .8125rem;
	letter-spacing: var(--tracking-wider);
}

/* =========================================================================
   11. FORMS  —  TRAP 3
   Scoped so these beat `.woocommerce form .form-row … input.input-text`.
   ====================================================================== */
.rl-account__form {
	margin: 0;
}

.rl-account__fieldset,
.rl-account__form fieldset {
	border: var(--border-width) solid hsl(var(--border));
	padding: 1.25rem;
	margin: 0 0 1.5rem;
}

.rl-account__legend,
.rl-account__form legend {
	font-family: var(--font-ui);
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-chip);
	padding: 0 .5rem;
	color: hsl(var(--muted-foreground));
}

.rl-account__fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 1rem;
}

@media (min-width: 640px) {
	.rl-account__fields--two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.rl-account .rl-account__form .form-row,
.rl-auth .rl-account__form .form-row {
	display: block;
	float: none;
	width: auto;
	padding: 0;
	margin: 0 0 1.25rem;
}

.rl-account .rl-account__form .form-row label,
.rl-auth .rl-account__form .form-row label {
	display: block;
	margin-bottom: .375rem;
	line-height: 1.4;
	font-family: var(--font-ui);
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-chip);
	color: hsl(var(--foreground));
}

.rl-account .rl-account__form .form-row .required,
.rl-auth .rl-account__form .form-row .required {
	color: hsl(var(--foreground));
	text-decoration: none;
	border: 0;
}

.rl-account .rl-account__form .form-row input.input-text,
.rl-account .rl-account__form .form-row textarea,
.rl-account .rl-account__form .form-row select,
.rl-auth .rl-account__form .form-row input.input-text,
.rl-auth .rl-account__form .form-row textarea,
.rl-auth .rl-account__form .form-row select {
	width: 100%;
	box-sizing: border-box;
	padding: .75rem .875rem;
	background: hsl(var(--background));
	border: var(--border-width) solid hsl(var(--foreground));
	border-radius: 0;
	font-family: var(--font-ui);
	font-size: .9375rem;
	line-height: 1.4;
	color: hsl(var(--foreground));
	box-shadow: none;
	transition: box-shadow .2s;
}

.rl-account .rl-account__form .form-row input.input-text:focus,
.rl-account .rl-account__form .form-row textarea:focus,
.rl-account .rl-account__form .form-row select:focus,
.rl-auth .rl-account__form .form-row input.input-text:focus,
.rl-auth .rl-account__form .form-row textarea:focus,
.rl-auth .rl-account__form .form-row select:focus {
	outline: none;
	box-shadow: var(--shadow-hard-4);
}

/* The checkbox row is the one place a label must NOT become a block. */
.rl-account .rl-account__form .form-row label.woocommerce-form__label-for-checkbox,
.rl-auth .rl-account__form .form-row label.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: 0;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	font-size: .75rem;
}

.rl-account__hint,
.rl-account__form .form-row span em {
	display: block;
	margin-top: .375rem;
	font-family: var(--font-ui);
	font-size: .75rem;
	font-style: normal;
	line-height: 1.5;
	color: hsl(var(--muted-foreground));
}

/* Woo prints select2 boxes for country/state on the address form. */
.rl-account .select2-container .select2-selection--single {
	height: auto;
	border: var(--border-width) solid hsl(var(--foreground));
	border-radius: 0;
	padding: .5rem .25rem;
}

.rl-account .select2-container--default .select2-selection--single .select2-selection__rendered {
	font-family: var(--font-ui);
	font-size: .9375rem;
	line-height: 1.6;
	color: hsl(var(--foreground));
}

/* =========================================================================
   12. AUTH SCREENS (/login/, /register/, password reset)
   ====================================================================== */
/* Left-aligned, not centred: page.php renders a left-aligned <h1> above this,
   and a centred card block under a left-aligned heading reads as a mistake. */
.rl-auth {
	max-width: 62rem;
	margin-inline: 0;
}

.rl-auth--narrow {
	max-width: 34rem;
}

/* Woo prints the privacy-policy paragraph inside the register form via
   woocommerce_register_form. Demote it to hint type so it does not compete
   with the field labels. */
.rl-auth .woocommerce-privacy-policy-text p,
.rl-auth .woocommerce-privacy-policy-text {
	margin: 0 0 1.25rem;
	font-family: var(--font-ui);
	font-size: .75rem;
	line-height: 1.5;
	color: hsl(var(--muted-foreground));
}

.rl-auth .woocommerce-privacy-policy-text a {
	color: hsl(var(--foreground));
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rl-auth__intro {
	margin-bottom: 1.5rem;
}

.rl-auth__heading {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 1.75rem;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: var(--tracking-title);
	margin: 0 0 .75rem;
}

.rl-auth__lede {
	margin: 0;
	font-family: var(--font-ui);
	font-size: .9375rem;
	line-height: 1.6;
	color: hsl(var(--muted-foreground));
}

.rl-auth__lede strong {
	color: hsl(var(--foreground));
}

.rl-auth__tabs {
	display: inline-flex;
	border: var(--border-width) solid hsl(var(--foreground));
	margin-bottom: 1.5rem;
}

.rl-auth__tab {
	padding: .625rem 1.125rem;
	font-family: var(--font-ui);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	text-decoration: none;
	color: hsl(var(--foreground));
	background: hsl(var(--background));
	white-space: nowrap;
	transition: background .2s, color .2s;
}

.rl-auth__tab + .rl-auth__tab {
	border-left: var(--border-width) solid hsl(var(--foreground));
}

.rl-auth__tab.is-active {
	background: hsl(var(--foreground));
	color: hsl(var(--background));
}

.rl-auth__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

@media (min-width: 768px) {
	.rl-auth__grid:not(.rl-auth__grid--single) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Woo's own float scaffolding on #customer_login. */
.rl-auth .u-column1,
.rl-auth .u-column2 {
	float: none;
	width: auto;
}

.rl-auth__card {
	border: var(--border-width) solid hsl(var(--foreground));
	background: hsl(var(--background));
	box-shadow: var(--shadow-hard-6);
	padding: 1.5rem;
}

@media (min-width: 768px) {
	.rl-auth__card {
		padding: 2rem;
	}
}

/* The card the tab did NOT select stays fully usable — just visually quieter,
   so nobody has to hunt for the other form. */
.rl-auth__card--secondary {
	box-shadow: var(--shadow-hard-6-soft);
	background: rgb(var(--surface-container));
}

.rl-auth__cardtitle {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking-title);
	margin: 0 0 1.25rem;
}

.rl-auth__submitrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.rl-auth__remember {
	margin: 0;
}

.rl-auth__lost {
	margin: 0;
}

.rl-auth__pwnote {
	margin: 0 0 1.25rem;
}

/* =========================================================================
   13. EMPTY STATES + WOO NOTICES
   ====================================================================== */
.rl-account__empty {
	border: var(--border-width) dashed hsl(var(--foreground));
	padding: 2rem 1.5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.rl-account__empty-text {
	margin: 0;
	font-family: var(--font-ui);
	font-size: .9375rem;
	line-height: 1.6;
	color: hsl(var(--muted-foreground));
	max-width: 34rem;
}

/* Woo notices render inside the content column (woocommerce_account_content @5)
   and on the login screen (woocommerce_before_customer_login_form @10). Woo's
   default skin is a grey box with a coloured left rule and a webfont icon —
   repainted here into the house system. */
.rl-account .woocommerce-message,
.rl-account .woocommerce-info,
.rl-account .woocommerce-error,
.rl-auth .woocommerce-message,
.rl-auth .woocommerce-info,
.rl-auth .woocommerce-error {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	background: rgb(var(--surface-container));
	border: var(--border-width) solid hsl(var(--foreground));
	border-radius: 0;
	font-family: var(--font-ui);
	font-size: .875rem;
	line-height: 1.6;
	color: hsl(var(--foreground));
}

.rl-account .woocommerce-error,
.rl-auth .woocommerce-error {
	border-color: hsl(var(--destructive));
}

/* ⚠ WooCommerce's own JS (assets/js/frontend/woocommerce.js:239) sets
   tabindex="-1" on the first notice and focuses it, so the sitewide
   `:focus-visible{outline:2px dashed hsl(var(--ring))}` in rl-tokens.css:174
   fired on it — and --ring IS the lime #33FF0A. The result was a bright green
   dashed box around "Address changed successfully.", which reads as a
   validation error on a SUCCESS message, and paints the one token recon says
   is never painted. These notices are role="alert" and non-interactive, so
   suppressing the ring here costs no keyboard affordance; real controls keep
   theirs. (The sitewide rule itself belongs to rl-tokens.css — flagged to the
   orchestrator rather than changed from this lane.) */
.rl-account .woocommerce-message:focus,
.rl-account .woocommerce-message:focus-visible,
.rl-account .woocommerce-info:focus,
.rl-account .woocommerce-info:focus-visible,
.rl-account .woocommerce-error:focus,
.rl-account .woocommerce-error:focus-visible,
.rl-account .woocommerce-notices-wrapper:focus,
.rl-account .woocommerce-notices-wrapper:focus-visible,
.rl-auth .woocommerce-message:focus,
.rl-auth .woocommerce-message:focus-visible,
.rl-auth .woocommerce-info:focus,
.rl-auth .woocommerce-info:focus-visible,
.rl-auth .woocommerce-error:focus,
.rl-auth .woocommerce-error:focus-visible {
	outline: none;
}

.rl-account .woocommerce-message::before,
.rl-account .woocommerce-info::before,
.rl-account .woocommerce-error::before,
.rl-auth .woocommerce-message::before,
.rl-auth .woocommerce-info::before,
.rl-auth .woocommerce-error::before {
	content: none;
}

.rl-account .woocommerce-error li,
.rl-auth .woocommerce-error li {
	list-style: none;
	margin: 0;
}

/* Buttons INSIDE a notice.
   Woo 11's customer-email-verification prompt (VerificationController::
   render_prompt) injects `<a class="button wc-forward">Confirm email address</a>`
   into the Orders panel — kept, because guest checkout is allowed here and
   linking guest orders to an account is genuinely useful, but it arrives
   wearing Woo's grey pill. `.woocommerce:where(…) a.button` is (0,2,1); the
   selector below is (0,3,1) and wins. Woo also floats it right. */
.rl-account .woocommerce-message .button,
.rl-account .woocommerce-info .button,
.rl-account .woocommerce-error .button,
.rl-auth .woocommerce-message .button,
.rl-auth .woocommerce-info .button,
.rl-auth .woocommerce-error .button {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 .5rem;
	padding: .5rem .875rem;
	background: rgb(var(--surface-container-lowest));
	color: hsl(var(--primary));
	border: var(--border-width) solid var(--rl-zinc-200);
	border-radius: 0;
	font-family: var(--font-ui);
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: var(--tracking-pill);
	text-decoration: none;
	text-shadow: none;
	transition: all .2s;
}

.rl-account .woocommerce-message .button:hover,
.rl-account .woocommerce-info .button:hover,
.rl-auth .woocommerce-message .button:hover,
.rl-auth .woocommerce-info .button:hover {
	background: rgb(var(--surface-dim));
	border-color: hsl(var(--foreground));
	box-shadow: var(--shadow-hard-4);
}

.rl-account .woocommerce-message .button::after,
.rl-account .woocommerce-info .button::after,
.rl-auth .woocommerce-message .button::after,
.rl-auth .woocommerce-info .button::after {
	content: none;
}

/* =========================================================================
   14. PAGE-LEVEL TIDY

   The account page renders through page.php, which wraps the content in
   .rl-seozone / .rl-seozone__inner. Those rules live in rl-home.css and are
   NOT loaded off the homepage, so the wrapper is inert — but the wrapper is
   pinned to full width here explicitly so a future change to that sheet
   cannot silently squeeze the account grid into a 48rem prose column.
   ====================================================================== */
body.woocommerce-account .rl-seozone,
body.woocommerce-account .rl-seozone__inner {
	max-width: none;
	padding-inline: 0;
	padding-block: 0;
	background: none;
}