/**
 * YouBeauty — WooCommerce My Account.
 *
 * The account page is the last WooCommerce surface without a stylesheet of its own. It already
 * inherits the shared chrome — `csl-scope` on `<body>` puts the token layer in reach, `et_no_sidebar`
 * takes back the column Divi reserves and never fills, and `woocommerce.css` supplies buttons,
 * notices, the focus ring, prices and the 1450px content column. This file adds only what is true
 * of the account page: the navigation rail, the classic form markup, and the account tables.
 *
 * Why the form rules are here and not in the checkout sheet. The checkout on this site is a
 * **Blocks** checkout, so `woocommerce-checkout.css` styles `wc-block-components-*` and nothing
 * else. The account page is the one place still rendering WooCommerce's *classic* shortcode
 * markup — `.form-row`, `.form-row-first` / `--last`, `.woocommerce-Input`, `fieldset` / `legend`
 * — and none of those classes appear anywhere else on the site. They belong to this surface, so
 * they live in this file rather than being promoted into the shared sheet where nothing else would
 * ever consume them.
 *
 * Conventions inherited from the sibling sheets, unchanged:
 *
 *   - Every rule is scoped to `#left-area` or to a WooCommerce class, never to bare
 *     `body.woocommerce` — that class is on the body and would reach the Theme Builder header.
 *   - Every heading rule zeroes `padding` as well as `margin`. Divi styles bare `h1`-`h6` with a
 *     `padding-bottom`, and a rule that mentions only margin leaves it in place.
 *   - The sibling sheets allow `!important` where Divi used it first. This file needs none at all:
 *     every rule that had to outrank Divi or WooCommerce wins on specificity instead, and each of
 *     those says out loud which declaration it is beating and by how much. If a future change here
 *     seems to need one, the selector is probably the thing to fix.
 *
 * Panel language is taken from the sheets that already exist rather than invented: a 2px navy
 * border is the emphasised panel (the checkout sidebar and order summary are drawn that way), and
 * a 1px `--csl-rule` border is the quiet one (`wc-block-components-address-card`). The account
 * page uses the first for the login form and the second for address and order-detail panels. The
 * tables follow the wishlist's language exactly — a navy hairline under `thead`, uppercase `2xs`
 * tracked headers, `--csl-rule` between rows — so the two lists read as one component.
 */

/* ------------------------------------------------------------------- layout */

/*
 * The rail and the panel.
 *
 * `:has()` rather than a body class, because the thing that decides this layout is whether the
 * navigation was rendered — `my-account.php` prints it only for a logged-in user. Keying off the
 * DOM says that directly; `body.logged-in` is a proxy that happens to agree today.
 *
 * If `:has()` ever fails to match, the wrapper stays a block and the nav simply sits above the
 * content at full width. That is the mobile layout below, so the fallback is a working page rather
 * than a broken one.
 */
#left-area .woocommerce:has( > .woocommerce-MyAccount-navigation ) {
	display: grid;
	grid-template-columns: 240px minmax( 0, 1fr );
	gap: clamp( 2rem, 4vw, 3.5rem );
	align-items: start;
}

/*
 * Every clearfix this file turns into a flex or grid container, dropped in one place.
 *
 * Divi and WooCommerce clearfix these five elements with `::before` / `::after` set to
 * `content: " "; display: table`. While they are float layouts those are invisible table boxes.
 * The moment one becomes a grid or flex container they become *items*, and each one bites
 * differently — so they are listed together rather than fixed where each was noticed, which is how
 * the first three came to be found one at a time.
 *
 * Measured at 1440px before this rule:
 *
 *   - the account wrapper — `::before` took cell one, pushing the nav into cell two and wrapping
 *     the content onto row two. Each then resolved WooCommerce's own percentage width against the
 *     wrong track: the nav 308.6px (30% of the 1028.8px content column) on the right, the content
 *     163.2px (68% of the 240px rail column) beneath it on the left.
 *   - the address set — billing landed in row one column two and shipping in row two column one,
 *     staggered diagonally down the page instead of sitting side by side.
 *   - the address card's own header — four flex items instead of two, so `space-between` spent a
 *     gap either side: the title sat 22px in from the left edge and the edit link 22px off the
 *     right, making a flush row look centred.
 *
 * This is the same trap `woocommerce.css` documents for `ul.products`, and the same fix. Each
 * selector names only the elements this file re-lays-out, so every other clearfix on the site —
 * including `.woocommerce` blocks on the cart, checkout and shop — keeps the one it still needs.
 */
#left-area .woocommerce:has( > .woocommerce-MyAccount-navigation )::before,
#left-area .woocommerce:has( > .woocommerce-MyAccount-navigation )::after,
#left-area .woocommerce .col2-set::before,
#left-area .woocommerce .col2-set::after,
#left-area .woocommerce-Addresses::before,
#left-area .woocommerce-Addresses::after,
#left-area .woocommerce-customer-details .woocommerce-columns::before,
#left-area .woocommerce-customer-details .woocommerce-columns::after,
#left-area .woocommerce-Address-title::before,
#left-area .woocommerce-Address-title::after {
	content: none;
}

/*
 * WooCommerce floats the rail left at 30% and the panel right at 68%. A grid ignores the floats but
 * not the widths, so both are handed back to the track. `min-width: 0` because a grid item defaults
 * to `min-width: auto` and refuses to shrink below its content — the panel holds order tables, and
 * without it a long row pushes the grid wider than the column and the page scrolls sideways.
 */
#left-area .woocommerce-MyAccount-navigation,
#left-area .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
}

/* --------------------------------------------------------------- navigation */

#left-area .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: var( --csl-space-1 );
	margin: 0;
	padding: 0;
	list-style: none;
}

#left-area .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The resting item is quiet: no fill, no border, just the label. The active one takes the navy
 * fill and the asymmetric corners the button family is drawn with, so the rail belongs to the same
 * shape language as `.csl-btn--navy` and the pagination's current page rather than introducing a
 * third treatment for "selected".
 */
#left-area .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.7em 1em;
	border-radius: var( --csl-radius-btn );
	color: var( --csl-ink );
	font-size: var( --csl-text-xs );
	font-weight: var( --csl-weight-semibold );
	letter-spacing: var( --csl-tracking-caps );
	line-height: var( --csl-leading-snug );
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var( --csl-transition ), color var( --csl-transition );
}

#left-area .woocommerce-MyAccount-navigation a:hover,
#left-area .woocommerce-MyAccount-navigation a:focus-visible {
	background-color: var( --csl-surface );
	color: var( --csl-ink );
}

#left-area .woocommerce-MyAccount-navigation .is-active a,
#left-area .woocommerce-MyAccount-navigation .is-active a:hover,
#left-area .woocommerce-MyAccount-navigation .is-active a:focus-visible {
	/* 13.42:1 — the same pairing the navy button is drawn with. */
	background-color: var( --csl-brand-navy );
	color: #ffffff;
}

/*
 * Log out is the one item that leaves the account rather than moving within it, so it is set apart
 * by a rule and turns pink on approach — the same pink the wishlist's remove control uses for the
 * same reason. It stays `--csl-ink-soft` at rest so it never competes with the real destinations.
 */
#left-area .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var( --csl-space-3 );
	padding-top: var( --csl-space-3 );
	border-top: 1px solid var( --csl-rule );
}

#left-area .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var( --csl-ink-soft );
}

#left-area .woocommerce-MyAccount-navigation-link--customer-logout a:hover,
#left-area .woocommerce-MyAccount-navigation-link--customer-logout a:focus-visible {
	background-color: transparent;
	color: var( --csl-brand-pink-deep );
}

/* ---------------------------------------------------------------- headings */

/*
 * Two headings render on this page and neither can be given a class, because both come from
 * WooCommerce's own templates and there is nowhere to add one without an override.
 *
 *   - `.woocommerce > h2` is the "Login" heading on the logged-out page. It is a direct child only
 *     there; on the logged-in page the wrapper's children are the nav and the content panel, and
 *     the address headings sit deeper. So the child combinator is what keeps this off them.
 *   - The content panel's own `h2` / `h3` are the endpoint titles WooCommerce prints inside it.
 *
 * Both take `.yb-section-title` from the shared sheet — sentence case, navy, hairline rule beneath
 * — restated here rather than added as a class for the reason above.
 */
#left-area .woocommerce > h2,
#left-area .woocommerce-MyAccount-content > h2,
#left-area .woocommerce-MyAccount-content > h3 {
	margin: 0 0 var( --csl-space-6 );
	padding: 0 0 var( --csl-space-3 );
	border-bottom: 1px solid var( --csl-ink );
	color: var( --csl-ink );
	font-size: var( --csl-text-2xl );
	font-weight: var( --csl-weight-semibold );
	letter-spacing: var( --csl-tracking-tight );
	line-height: var( --csl-leading-tight );
	text-transform: none;
}

/* The dashboard's greeting and the standing intro paragraphs above each endpoint. */
#left-area .woocommerce-MyAccount-content > p {
	margin: 0 0 var( --csl-space-5 );
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-sm );
	line-height: var( --csl-leading-normal );
}

#left-area .woocommerce-MyAccount-content > p strong {
	color: var( --csl-ink );
	font-weight: var( --csl-weight-semibold );
}

#left-area .woocommerce-MyAccount-content a:not( .button ):not( .woocommerce-Button ) {
	color: var( --csl-ink );
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var( --csl-transition );
}

#left-area .woocommerce-MyAccount-content a:not( .button ):not( .woocommerce-Button ):hover,
#left-area .woocommerce-MyAccount-content a:not( .button ):not( .woocommerce-Button ):focus-visible {
	color: var( --csl-brand-pink-deep );
}

/* ------------------------------------------------------- the logged-out page */

/*
 * The login and register forms (registration on since 2026-09-30) sit as WooCommerce's two-column
 * `.col2-set`, each in the emphasised 2px navy panel — they are the only objects on the page. With
 * registration off the login form stands alone in the same panel.
 */
#left-area .woocommerce-form-login,
#left-area .woocommerce-form-register,
#left-area .woocommerce-ResetPassword {
	max-width: 30rem;
	margin: 0;
	padding: clamp( 1.25rem, 3vw, 2rem );
	border: 2px solid var( --csl-brand-navy );
	border-radius: 0;
	background-color: var( --csl-ground );
}

#left-area .woocommerce-form-login .form-row,
#left-area .woocommerce-form-register .form-row,
#left-area .woocommerce-ResetPassword .form-row {
	margin-bottom: var( --csl-space-4 );
}

/*
 * The submit sits on its own line under Remember me, so it should not be squeezed beside it. The
 * register submit takes the same treatment so the two panels' buttons match.
 */
#left-area .woocommerce-form-login__submit,
#left-area .woocommerce-form-register__submit {
	width: 100%;
	margin-top: var( --csl-space-3 );
}

#left-area .woocommerce-LostPassword {
	margin: var( --csl-space-4 ) 0 0;
	font-size: var( --csl-text-xs );
}

#left-area .woocommerce-LostPassword a {
	color: var( --csl-ink-soft );
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

#left-area .woocommerce-LostPassword a:hover,
#left-area .woocommerce-LostPassword a:focus-visible {
	color: var( --csl-brand-pink-deep );
}

/* ------------------------------------------------------ login / register split */

/*
 * Hallmark · component: account entry (login + register split) · genre: editorial (brand-led)
 * pre-emit critique: P4 H5 E5 S4 R5 V4
 * theme: YouBeauty CSL tokens · states: default · hover · focus · active · disabled
 * (error and success arrive as WooCommerce notices above the frame, styled in woocommerce.css)
 * contrast: pass — navy on white 13.42:1, neutral on navy 11.57:1, navy on orange 5.59:1
 * (4.70:1 on hover), yellow link and focus ring on navy 7.73:1
 *
 * With registration on, the two forms are one decision — "I have an account" or "I don't" — so they
 * sit in one frame rather than as two boxes floating half a page apart. The frame is the emphasised
 * 2px navy panel this sheet already uses; the register half takes the navy band from the confirmed
 * style guide ("Version 4"), so the two jobs read as two different grounds without any extra copy.
 *
 * Scoped to `#customer_login`, which WooCommerce renders only when registration is on. With it off,
 * the login form stands alone in the panel above, and the lost-password form is untouched.
 *
 * Two ids, so every rule here outranks the generic panel and form rules above (one id) without
 * `!important`.
 */
#left-area #customer_login {
	/* Hover tint of brand orange, as the shared `.button.alt` uses. */
	--yb-entry-cta-hover: #ec7a15;

	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0;
	max-width: 64rem;
	margin-bottom: var( --csl-space-12 );
	border: 2px solid var( --csl-brand-navy );
	background-color: var( --csl-ground );
}

#left-area #customer_login > .u-column1,
#left-area #customer_login > .u-column2 {
	display: flex;
	flex-direction: column;
	padding: clamp( 1.5rem, 4vw, 3rem );
}

#left-area #customer_login > .u-column2 {
	background-color: var( --csl-brand-navy );
	color: var( --csl-brand-neutral );
}

/* The panel is now the column; the forms inside it lose their own box. */
#left-area #customer_login .woocommerce-form-login,
#left-area #customer_login .woocommerce-form-register {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var( --csl-space-5 );
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/*
 * The rows take their rhythm from the gap. The shared `.woocommerce-form .form-row` rule zeroes
 * their margins at the same specificity as the panel rule that spaced them, and wins on order, so
 * without this the labels sat flush under the field above. Everything WooCommerce spaces with its
 * own margin is zeroed here so the gap is the only spacing.
 */
#left-area #customer_login .form-row,
#left-area #customer_login .woocommerce-LostPassword {
	margin: 0;
}

/*
 * WooCommerce's order-attribution element holds only hidden inputs, but as an empty flex item it
 * would still take a gap of its own. `contents` removes its box and leaves the inputs in the form,
 * so they still submit.
 */
#left-area #customer_login wc-order-attribution-inputs {
	display: contents;
}

/*
 * The Turnstile plugin follows its widget with a spacer `<br>` (shown only when a challenge is
 * visible). In these flex forms the gap already spaces the widget, so the spacer would add a blank
 * line between it and the next row.
 */
#left-area #customer_login .cf-turnstile-br {
	display: none;
}

/* Column heads in the title face, each with a short bar in its band's accent. */
#left-area #customer_login h2 {
	margin: 0 0 var( --csl-space-8 );
	padding: 0;
	color: var( --csl-ink );
	font-family: var( --csl-font-heading );
	font-size: var( --csl-text-2xl );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-tight );
	line-height: var( --csl-leading-tight );
}

#left-area #customer_login h2::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: var( --csl-space-3 );
	background-color: var( --csl-brand-pink );
}

#left-area #customer_login > .u-column2 h2 {
	color: var( --csl-on-accent );
}

#left-area #customer_login > .u-column2 h2::after {
	background-color: var( --csl-brand-yellow );
}

/* --- the register half, on navy --- */

#left-area #customer_login > .u-column2 .form-row > label {
	color: var( --csl-on-accent );
}

#left-area #customer_login > .u-column2 .required {
	color: var( --csl-brand-yellow );
}

/* "A link to set a new password will be sent…" and the privacy notice: quiet, but readable. */
#left-area #customer_login .woocommerce-form-register > p:not( .form-row ),
#left-area #customer_login .woocommerce-privacy-policy-text p {
	margin: 0;
	color: var( --csl-brand-neutral );
	font-size: var( --csl-text-sm );
	line-height: var( --csl-leading-normal );
}

#left-area #customer_login .woocommerce-privacy-policy-text p {
	font-size: var( --csl-text-xs );
}

#left-area #customer_login .woocommerce-privacy-policy-link {
	color: var( --csl-brand-yellow );
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

#left-area #customer_login .woocommerce-privacy-policy-link:hover {
	color: var( --csl-on-accent );
}

/* The submit settles at the foot of the half, under the notices. */
#left-area #customer_login .woocommerce-form-register > .form-row:last-child {
	margin: auto 0 0;
	padding-top: var( --csl-space-3 );
}

/*
 * Register is the new customer's primary action, so it takes the primary-action orange rather than
 * the default yellow — and on navy the two would otherwise read as the same button twice. Pink
 * was measured and rejected: 3.51:1 under navy and 3.83:1 under white, below AA at this size.
 */
#left-area #customer_login .woocommerce-form-register__submit {
	background-color: var( --csl-brand-orange );
}

#left-area #customer_login .woocommerce-form-register__submit:hover,
#left-area #customer_login .woocommerce-form-register__submit:focus-visible {
	background-color: var( --yb-entry-cta-hover );
}

#left-area #customer_login .button:active {
	transform: translateY( 1px );
}

/* The shared ring is navy, which vanishes on the navy half. Instant, never animated. */
#left-area #customer_login > .u-column2 :focus-visible {
	outline: 2px solid var( --csl-brand-yellow );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	#left-area #customer_login .button:active {
		transform: none;
	}
}

@media ( max-width: 767px ) {
	#left-area #customer_login {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/*
 * The two-column sets, all three of them at once: the login/register pair if registration is ever
 * switched back on, the billing/shipping addresses, and the customer details under a single order.
 * Every one is a `col2-set` of floated halves with a clearfix, so they take the same treatment —
 * and they are described together because they *are* the same object, rendered by three templates.
 *
 * Their clearfixes are removed with the rest, up in the layout section.
 *
 * `auto-fit` with a `min( 100%, 18rem )` floor rather than a fixed pair of columns, so a single
 * card (an order with no shipping address) fills the row instead of leaving a hole beside it.
 */
#left-area .woocommerce .col2-set,
#left-area .woocommerce-Addresses,
#left-area .woocommerce-customer-details .woocommerce-columns {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 18rem ), 1fr ) );
	gap: var( --csl-space-5 );
	margin: 0;
}

/*
 * Float and width only. `padding` is deliberately not reset here: on the address set these same
 * elements *are* the cards, and a `padding: 0` at this specificity (one id, three classes) outranks
 * the card's own padding (one id, one class) and pushes the address text hard against its border.
 */
#left-area .woocommerce .col2-set > .col-1,
#left-area .woocommerce .col2-set > .col-2,
#left-area .woocommerce-customer-details .col-1,
#left-area .woocommerce-customer-details .col-2 {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
}

/* ----------------------------------------------------------- classic forms */

/*
 * WooCommerce lays these forms out with floats: `.form-row-first` and `.form-row-last` are 47%
 * wide and floated opposite ways, and an empty `<div class="clear">` follows each pair. A grid
 * does the same job without the floats, so the clears become inert — they are removed rather than
 * left to occupy a cell.
 *
 * `align-items: start` because the rows are not the same height: a field carrying a description
 * (`account_display_name`) is taller than its neighbour, and stretched rows would drag the shorter
 * field's input to the bottom of its cell.
 */
#left-area .woocommerce-EditAccountForm,
#left-area .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --csl-space-4 ) var( --csl-space-5 );
	align-items: start;
}

#left-area .woocommerce-EditAccountForm > .clear,
#left-area .woocommerce-address-fields__field-wrapper > .clear,
#left-area .woocommerce-EditAccountForm > .woocommerce-privacy-policy-text {
	display: none;
}

/*
 * Everything spans both columns unless it is explicitly one of a first/last pair. Stated this way
 * round — span by default, narrow by exception — because WooCommerce's own field set is mostly
 * full-width rows and a plugin adding a field without a width class should get a sane one.
 */
#left-area .woocommerce-EditAccountForm > *,
#left-area .woocommerce-address-fields__field-wrapper > * {
	grid-column: 1 / -1;
	min-width: 0;
}

#left-area .form-row-first {
	grid-column: 1 / 2;
}

#left-area .form-row-last {
	grid-column: 2 / -1;
}

#left-area .woocommerce-EditAccountForm .form-row,
#left-area .woocommerce-address-fields .form-row,
#left-area .woocommerce-form .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/*
 * The field label, in the shared in-column label voice (`.yb-panel-title`): small, uppercase,
 * wide-tracked. Restated rather than classed for the same reason as the headings above.
 */
#left-area .woocommerce-form .form-row > label,
#left-area .woocommerce-EditAccountForm .form-row > label,
#left-area .woocommerce-address-fields .form-row > label {
	display: block;
	margin: 0 0 var( --csl-space-2 );
	padding: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-2xs );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-caps );
	line-height: var( --csl-leading-snug );
	text-transform: uppercase;
}

/*
 * Border, ground, radius and focus come from the shared sheet's control rule; only the width is
 * set here. `100%` with `border-box` from the token layer, so the field fills its grid cell
 * whatever the padding.
 */
#left-area .woocommerce-MyAccount-content input.input-text,
#left-area .woocommerce-MyAccount-content textarea,
#left-area .woocommerce-MyAccount-content select,
#left-area .woocommerce-form input.input-text,
#left-area .woocommerce-form select {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
}

#left-area .woocommerce-form .form-row .required,
#left-area .woocommerce-EditAccountForm .required,
#left-area .woocommerce-address-fields .required {
	border: 0;
	color: var( --csl-brand-pink-deep );
	text-decoration: none;
}

/* The italic hint under Display name. */
#left-area .woocommerce-MyAccount-content .form-row span em,
#left-area .woocommerce-MyAccount-content .form-row > span:not( .required ):not( .woocommerce-input-wrapper ) {
	display: block;
	margin-top: var( --csl-space-2 );
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-xs );
	font-style: normal;
	line-height: var( --csl-leading-snug );
}

/*
 * The Remember me row — a checkbox beside its own label, not stacked like a field.
 *
 * Written as `.form-row > label.woocommerce-form__label-for-checkbox` rather than on the class
 * alone, because the field-label rule above is `#left-area .woocommerce-form .form-row > label`
 * (one id, three classes) and would otherwise outrank it and set this in uppercase small caps.
 */
#left-area .woocommerce-form .form-row > label.woocommerce-form__label-for-checkbox,
#left-area .woocommerce-MyAccount-content .form-row > label.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: var( --csl-space-2 );
	margin: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-sm );
	font-weight: var( --csl-weight-regular );
	letter-spacing: var( --csl-tracking-normal );
	text-transform: none;
}

#left-area .woocommerce-form__input-checkbox {
	width: auto;
	min-height: 0;
	margin: 0;
}

/*
 * The Password change block. `fieldset` is a replaced-ish element with a default border and inline
 * padding that no other panel on the site carries, and `legend` sits inside that border by
 * default; both are cleared so the block reads as a labelled section, which is what it is.
 */
#left-area .woocommerce-EditAccountForm fieldset {
	margin: var( --csl-space-4 ) 0 0;
	padding: 0;
	border: 0;
}

#left-area .woocommerce-EditAccountForm legend {
	display: block;
	width: 100%;
	margin: 0 0 var( --csl-space-4 );
	padding: 0 0 var( --csl-space-3 );
	border-bottom: 1px solid var( --csl-rule );
	color: var( --csl-ink );
	font-size: var( --csl-text-xs );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-caps );
	line-height: var( --csl-leading-snug );
	text-transform: uppercase;
}

#left-area .woocommerce-EditAccountForm fieldset .form-row {
	margin-bottom: var( --csl-space-4 );
}

#left-area .woocommerce-EditAccountForm fieldset .form-row:last-child {
	margin-bottom: 0;
}

/* The save row, set apart from the fields it commits. */
#left-area .woocommerce-EditAccountForm > p:last-of-type,
#left-area .woocommerce-address-fields ~ p,
#left-area .woocommerce-address-fields p:last-child {
	margin: var( --csl-space-2 ) 0 0;
	padding-top: var( --csl-space-5 );
	border-top: 1px solid var( --csl-rule );
}

/* -------------------------------------------------------------- addresses */

/* The set itself is laid out with the other two-column sets above. */

/*
 * The quiet panel — the same 1px rule and `--csl-space-4` padding the checkout draws its saved
 * address card with, so an address looks the same object in both places.
 */
#left-area .woocommerce-Address {
	display: flex;
	flex-direction: column;
	gap: var( --csl-space-3 );
	padding: var( --csl-space-4 );
	border: 1px solid var( --csl-rule );
	background-color: var( --csl-ground );
}

#left-area .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --csl-space-2 );
	margin: 0;
	padding: 0 0 var( --csl-space-3 );
	border-bottom: 1px solid var( --csl-rule );
}

#left-area .woocommerce-Address-title h2,
#left-area .woocommerce-Address-title h3 {
	margin: 0;
	padding: 0;
	border: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-xs );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-caps );
	line-height: var( --csl-leading-snug );
	text-transform: uppercase;
}

#left-area .woocommerce-Address-title .edit {
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-xs );
	font-weight: var( --csl-weight-semibold );
	text-decoration: underline;
	text-underline-offset: 0.15em;
	white-space: nowrap;
}

#left-area .woocommerce-Address-title .edit:hover,
#left-area .woocommerce-Address-title .edit:focus-visible {
	color: var( --csl-brand-pink-deep );
}

#left-area .woocommerce-Address address {
	margin: 0;
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-sm );
	font-style: normal;
	line-height: var( --csl-leading-normal );
}

/* ------------------------------------------------------------------ tables */

/*
 * Orders, downloads, saved payment methods and the order-details table, in the wishlist's table
 * language: a navy hairline under the head, uppercase `2xs` tracked headers, `--csl-rule` between
 * rows. One selector list rather than four, because these are the same object rendered by four
 * templates and any difference between them would read as a mistake.
 */
#left-area .woocommerce-MyAccount-content table.shop_table,
#left-area table.woocommerce-orders-table,
#left-area table.woocommerce-table--order-details,
#left-area table.woocommerce-MyAccount-paymentMethods,
#left-area table.woocommerce-table--downloads {
	width: 100%;
	margin: 0 0 var( --csl-space-6 );
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	background: transparent;
}

#left-area .woocommerce-MyAccount-content table.shop_table thead tr,
#left-area table.woocommerce-table--order-details thead tr {
	border-bottom: 1px solid var( --csl-ink );
}

#left-area .woocommerce-MyAccount-content table.shop_table thead th,
#left-area table.woocommerce-table--order-details thead th {
	padding: 0 var( --csl-space-3 ) var( --csl-space-3 ) 0;
	border: 0;
	background: transparent;
	color: var( --csl-ink );
	font-size: var( --csl-text-2xs );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-caps );
	line-height: var( --csl-leading-snug );
	text-align: left;
	text-transform: uppercase;
	vertical-align: bottom;
}

#left-area .woocommerce-MyAccount-content table.shop_table tbody tr,
#left-area table.woocommerce-table--order-details tbody tr {
	border-bottom: 1px solid var( --csl-rule );
}

#left-area .woocommerce-MyAccount-content table.shop_table tbody th,
#left-area .woocommerce-MyAccount-content table.shop_table tbody td,
#left-area table.woocommerce-table--order-details tbody th,
#left-area table.woocommerce-table--order-details tbody td {
	padding: var( --csl-space-4 ) var( --csl-space-3 ) var( --csl-space-4 ) 0;
	border: 0;
	background: transparent;
	color: var( --csl-ink );
	font-size: var( --csl-text-sm );
	font-weight: var( --csl-weight-regular );
	line-height: var( --csl-leading-snug );
	text-align: left;
	vertical-align: middle;
}

/* The order number is a `<th scope="row">`; it is a row label, so it carries the row's weight. */
#left-area table.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number,
#left-area table.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-number {
	font-weight: var( --csl-weight-semibold );
}

#left-area .woocommerce-MyAccount-content table.shop_table .woocommerce-orders-table__cell-order-date,
#left-area .woocommerce-MyAccount-content table.shop_table time {
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-xs );
	white-space: nowrap;
}

/*
 * The order-total column carries a price, and prices read sale-first in pink across the site. Here
 * there is nothing to strike through — it is one figure — so it only takes the weight.
 */
#left-area .woocommerce-MyAccount-content table.shop_table .woocommerce-Price-amount {
	font-weight: var( --csl-weight-bold );
}

#left-area .woocommerce-MyAccount-content table.shop_table .woocommerce-orders-table__cell-order-actions,
#left-area .woocommerce-MyAccount-content table.shop_table td.download-actions {
	text-align: right;
}

/* Table actions are secondary to the page's own buttons, so they are drawn a size down. */
#left-area .woocommerce-MyAccount-content table.shop_table .button {
	padding: 0.5em 1em;
	font-size: var( --csl-text-xs );
}

#left-area .woocommerce-MyAccount-content table.shop_table .button + .button {
	margin-left: var( --csl-space-2 );
}

/* -------------------------------------------------------------- order status */

/*
 * The order status, as coloured small caps rather than a chip.
 *
 * This follows the wishlist's stock line, which is the precedent already set for "a short piece of
 * state in a table cell": `in-stock` is `--csl-ink-soft`, `out-of-stock` is pink, and neither is
 * boxed. A bordered chip here would be a third badge-like object in a page that already has the
 * discount flag's two documented forms, and at a glance it would read as one of them.
 *
 * WooCommerce prints the status as bare text with no class of its own, so the colour has to come
 * from the row's `--status-*` modifier. Every status WooCommerce ships is covered; a status a
 * plugin adds falls through to the base cell colour, which is legible rather than invisible.
 */
/*
 * Every selector here carries the full `table.shop_table tbody td` prefix rather than the short
 * `.row--status-x .cell-order-status` it reads as. The generic cell rule above is
 * `#left-area .woocommerce-MyAccount-content table.shop_table tbody td` — one id, two classes,
 * three elements — and the short form is one id and two classes, so it loses on specificity and
 * every status came back `--csl-ink`. Measured before this: completed, processing, cancelled and
 * on-hold all rendered `rgb(20, 50, 66)`, which made the colour look deliberate on the one status
 * that happens to be navy anyway.
 */
#left-area .woocommerce-MyAccount-content table.shop_table tbody td.woocommerce-orders-table__cell-order-status {
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-2xs );
	font-weight: var( --csl-weight-bold );
	letter-spacing: var( --csl-tracking-caps );
	text-transform: uppercase;
	white-space: nowrap;
}

#left-area .woocommerce-MyAccount-content table.shop_table tbody tr.woocommerce-orders-table__row--status-completed td.woocommerce-orders-table__cell-order-status {
	color: var( --csl-brand-navy );
}

#left-area .woocommerce-MyAccount-content table.shop_table tbody tr.woocommerce-orders-table__row--status-cancelled td.woocommerce-orders-table__cell-order-status,
#left-area .woocommerce-MyAccount-content table.shop_table tbody tr.woocommerce-orders-table__row--status-failed td.woocommerce-orders-table__cell-order-status,
#left-area .woocommerce-MyAccount-content table.shop_table tbody tr.woocommerce-orders-table__row--status-refunded td.woocommerce-orders-table__cell-order-status {
	color: var( --csl-brand-pink-deep );
}

/* --------------------------------------------------------------- view order */

/*
 * The single order view: the status line WooCommerce prints above the table, the order-detail
 * table's foot, the customer address panels beneath it and the order notes.
 */
#left-area .woocommerce-order-details,
#left-area .woocommerce-customer-details {
	margin: 0 0 var( --csl-space-8 );
}

#left-area .woocommerce-order-details__title,
#left-area .woocommerce-column__title {
	margin: 0 0 var( --csl-space-4 );
	padding: 0 0 var( --csl-space-3 );
	border-bottom: 1px solid var( --csl-ink );
	color: var( --csl-ink );
	font-size: var( --csl-text-xl );
	font-weight: var( --csl-weight-semibold );
	letter-spacing: var( --csl-tracking-tight );
	line-height: var( --csl-leading-tight );
	text-transform: none;
}

#left-area table.woocommerce-table--order-details tfoot tr:last-child {
	border-top: 1px solid var( --csl-ink );
}

#left-area table.woocommerce-table--order-details tfoot th,
#left-area table.woocommerce-table--order-details tfoot td {
	padding: var( --csl-space-3 ) var( --csl-space-3 ) var( --csl-space-3 ) 0;
	border: 0;
	color: var( --csl-ink );
	font-size: var( --csl-text-sm );
	text-align: left;
}

#left-area table.woocommerce-table--order-details tfoot th {
	font-weight: var( --csl-weight-semibold );
}

#left-area table.woocommerce-table--order-details tfoot tr:last-child td,
#left-area table.woocommerce-table--order-details tfoot tr:last-child th {
	font-size: var( --csl-text-base );
	font-weight: var( --csl-weight-bold );
}

/*
 * The columns themselves are laid out with the other two-column sets above; these two are the
 * quiet panel each half is drawn as, the same one an address card takes.
 */
#left-area .woocommerce-customer-details .col-1,
#left-area .woocommerce-customer-details .col-2 {
	padding: var( --csl-space-4 );
	border: 1px solid var( --csl-rule );
}

#left-area .woocommerce-customer-details address {
	margin: 0;
	padding: 0;
	border: 0;
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-sm );
	font-style: normal;
	line-height: var( --csl-leading-normal );
}

/* Order notes — WooCommerce renders them as a comment list, which Divi styles as one. */
#left-area .woocommerce-OrderUpdates {
	margin: 0 0 var( --csl-space-8 );
	padding: 0;
	list-style: none;
}

#left-area .woocommerce-OrderUpdate {
	margin: 0 0 var( --csl-space-3 );
	padding: var( --csl-space-4 );
	border: 1px solid var( --csl-rule );
	list-style: none;
}

#left-area .woocommerce-OrderUpdate-meta {
	margin: 0 0 var( --csl-space-2 );
	color: var( --csl-ink-soft );
	font-size: var( --csl-text-xs );
	letter-spacing: var( --csl-tracking-wide );
	text-transform: uppercase;
}

#left-area .woocommerce-OrderUpdate-description p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------- pagination */

/*
 * The orders list paginates with Previous / Next buttons rather than numbers, so the shared
 * `.woocommerce-pagination` rule — built for a row of numbered cells — has nothing to place here.
 */
#left-area .woocommerce-pagination--without-numbers {
	display: flex;
	justify-content: space-between;
	gap: var( --csl-space-3 );
	margin: var( --csl-space-6 ) 0 0;
}

#left-area .woocommerce-pagination--without-numbers .woocommerce-button--next {
	margin-left: auto;
}

/* ------------------------------------------------------------------ mobile */

/*
 * Below 900px the rail no longer earns a 240px column beside the panel, so the navigation moves
 * above the content and becomes a wrapping row of chips.
 *
 * Chips rather than a stacked list because seven full-width rows push the content most of a screen
 * down the page, and rather than a sideways scroller because a scroller clips its last item at the
 * screen edge — which is exactly the fault the product row was rebuilt to remove. A wrapping row
 * has neither problem: every chip is sized to its own label, so nothing is ever cut off and no
 * label breaks onto a second line.
 */
@media ( max-width: 899px ) {
	#left-area .woocommerce:has( > .woocommerce-MyAccount-navigation ) {
		display: block;
	}

	#left-area .woocommerce-MyAccount-navigation {
		margin: 0 0 var( --csl-space-6 );
		padding: 0 0 var( --csl-space-5 );
		border-bottom: 1px solid var( --csl-rule );
	}

	#left-area .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var( --csl-space-2 );
	}

	#left-area .woocommerce-MyAccount-navigation a {
		border: 1px solid var( --csl-rule );
		padding: 0.6em 0.9em;
	}

	#left-area .woocommerce-MyAccount-navigation .is-active a {
		border-color: var( --csl-brand-navy );
	}

	/* The rule and the spacing above it belong to the column layout, not to this one. */
	#left-area .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	#left-area .woocommerce-MyAccount-navigation-link--customer-logout a {
		border-color: var( --csl-rule );
	}
}

/*
 * 768px, not the 767px the rest of this file would suggest, because WooCommerce's own
 * `shop_table_responsive` rules are `@media screen and ( max-width: 768px )`. Matching its
 * breakpoint exactly means one set of rules governs at every width; being one pixel narrower left
 * a gap at 768 where Woo's stacking was live and this file's was not — and Woo's version sets
 * `tbody th { display: none }`, which silently dropped the order number, the one cell in the row
 * a shopper actually looks for. Measured before this fix: the number cell was 0px wide at 768.
 */
@media ( max-width: 768px ) {
	/*
	 * The tables stop being tables. WooCommerce puts the column name on every cell as
	 * `data-title`, so each row can be rebuilt as a stack of label/value pairs without an override
	 * — the same move the wishlist makes at this width, and for the same reason: five columns
	 * cannot survive a 320px column.
	 */
	#left-area .woocommerce-MyAccount-content table.shop_table_responsive,
	#left-area .woocommerce-MyAccount-content table.shop_table_responsive tbody,
	#left-area .woocommerce-MyAccount-content table.shop_table_responsive tbody tr,
	#left-area .woocommerce-MyAccount-content table.shop_table_responsive tbody th,
	#left-area .woocommerce-MyAccount-content table.shop_table_responsive tbody td {
		display: block;
		width: 100%;
	}

	#left-area .woocommerce-MyAccount-content table.shop_table_responsive thead {
		display: none;
	}

	#left-area .woocommerce-MyAccount-content table.shop_table_responsive tbody tr {
		padding: var( --csl-space-4 ) 0;
	}

	#left-area .woocommerce-MyAccount-content table.shop_table_responsive tbody th,
	#left-area .woocommerce-MyAccount-content table.shop_table_responsive tbody td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var( --csl-space-4 );
		padding: var( --csl-space-1 ) 0;
		text-align: right;
	}

	/*
	 * `float: none` because WooCommerce draws this same label as `content: attr( data-title ) ": "`
	 * with `float: left`. The content is replaced here, but a float left in place would take the
	 * label out of the flex row it is supposed to be the first item of.
	 */
	#left-area .woocommerce-MyAccount-content table.shop_table_responsive tbody th::before,
	#left-area .woocommerce-MyAccount-content table.shop_table_responsive tbody td::before {
		content: attr( data-title );
		float: none;
		flex: 0 0 auto;
		color: var( --csl-ink-soft );
		font-size: var( --csl-text-2xs );
		font-weight: var( --csl-weight-bold );
		letter-spacing: var( --csl-tracking-caps );
		text-align: left;
		text-transform: uppercase;
	}

	/*
	 * The actions cell has no useful label — "Actions" beside a button says nothing — so it drops
	 * the `data-title` and the buttons take the full width of the row instead.
	 */
	#left-area .woocommerce-MyAccount-content table.shop_table_responsive tbody td.woocommerce-orders-table__cell-order-actions,
	#left-area .woocommerce-MyAccount-content table.shop_table_responsive tbody td.download-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var( --csl-space-2 );
		justify-content: flex-start;
		margin-top: var( --csl-space-3 );
	}

	#left-area .woocommerce-MyAccount-content table.shop_table_responsive tbody td.woocommerce-orders-table__cell-order-actions::before,
	#left-area .woocommerce-MyAccount-content table.shop_table_responsive tbody td.download-actions::before {
		content: none;
	}

	#left-area .woocommerce-MyAccount-content table.shop_table_responsive tbody td.woocommerce-orders-table__cell-order-actions .button + .button,
	#left-area .woocommerce-MyAccount-content table.shop_table_responsive tbody td.download-actions .button + .button {
		margin-left: 0;
	}

	/* A two-column field pair has no room left; the fields stack. */
	#left-area .woocommerce-EditAccountForm,
	#left-area .woocommerce-address-fields__field-wrapper {
		grid-template-columns: minmax( 0, 1fr );
	}

	#left-area .form-row-first,
	#left-area .form-row-last {
		grid-column: 1 / -1;
	}
}