/* ============================================================================
   PolarLabs — Account v1 (route-scoped)
   ----------------------------------------------------------------------------
   Loaded ONLY on WooCommerce account pages (is_account_page()), after
   `polarlabs-main` + `polarlabs-woocommerce`. Presentation ONLY. WooCommerce
   remains the single source of truth for authentication, identity, orders,
   order access, addresses, account details, password reset, registration,
   downloads, endpoint routing, form names/nonces, validation and logout. This
   sheet renders that data; it never sends, stores, gates or fabricates it.

   Design language = the shipped PolarLabs system (navy #07182D, electric blue
   #2878F5, icy neutrals, Manrope headings, weight-800 titles, eyebrow + accent
   rule, hairline cards) — the same vocabulary as the Contact and Legal routes,
   so the account area reads as one brand.
   ============================================================================ */

/* ------------------------------------------------------------------ 0. FIX
   The current account grid breaks on desktop because WooCommerce core adds a
   clearfix on `.woocommerce` (::before/::after { content:""; display:table }),
   and in a GRID container those pseudo-elements become phantom grid items —
   pushing the nav into column 2 and squeezing the content into column 1, row 2.
   Neutralise them within the account scope and place the two real children
   explicitly so the layout can never be shifted by an injected pseudo/notice. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { content: none; display: none; }
/* Same defect, nested WooCommerce grid containers (STG-ACCOUNT-001): WooCommerce
   also clearfixes `.col2-set` / `.u-columns`, so the account grids built on them
   — the Addresses cards, the view-order billing/shipping columns, and the
   logged-out login/register columns — staggered until their pseudo-elements are
   neutralised too. Scoped to `.woocommerce-account` ONLY, so Cart/Checkout (which
   also use `.col2-set`/`.u-columns`) keep their own clearfix untouched. */
.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after,
.woocommerce-account .u-columns::before,
.woocommerce-account .u-columns::after,
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after { content: none; display: none; }

/* ------------------------------------------------------------- 1. MASTHEAD
   Compact navy header that gives the account area the same premium "masthead"
   the Contact/Legal routes have (this replaces the bare default "My Account"
   H1). One H1 per page; the endpoint name is the H1. */
.pl-acct-masthead {
	position: relative;
	isolation: isolate;
	background: var(--pl-navy);
	color: #fff;
	padding: clamp(22px, 3vw, 38px) 0 clamp(24px, 3.2vw, 40px);
	overflow: hidden;
}
.pl-acct-masthead::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--pl-z-below);
	/* One quiet depth wash — a faint top-right glow over flat navy. Deliberately
	   NOT a large curved shape or an oversized empty colour field; the masthead
	   stays compact and text-forward (A1). */
	background:
		radial-gradient(90% 130% at 100% -30%, rgba(75, 150, 255, .10), transparent 55%),
		var(--pl-navy);
}
.pl-acct-masthead__crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 clamp(10px, 1.6vw, 16px);
	font-size: .82rem;
	color: var(--pl-icy-200, #b9cdEA);
}
.pl-acct-masthead__crumb a { color: var(--pl-icy-200, #b9cdEA); }
.pl-acct-masthead__crumb a:hover { color: #fff; text-decoration: underline; }
.pl-acct-masthead__crumb .sep { opacity: .5; }
.pl-acct-masthead__crumb [aria-current="page"] { color: #fff; font-weight: 600; }

.pl-acct-masthead__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pl-icy-200, #b9cdEA);
}
.pl-acct-masthead__eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--pl-electric, #4b96ff);
	flex: none;
}
.pl-acct-masthead__title {
	margin: 0;
	color: #fff;
	font-family: var(--pl-font-heading);
	font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	font-weight: 800;
}
.pl-acct-masthead__meta {
	margin: 12px 0 0;
	color: var(--pl-icy-200, #b9cdEA);
	font-size: .95rem;
}
.pl-acct-masthead__meta span + span::before { content: "·"; margin: 0 8px; opacity: .5; }

/* ------------------------------------------------------------ 2. SHELL GRID
   Robust two-column shell: a fixed sidebar + a fluid content column. Explicit
   column placement so no injected node can displace either child. */
.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 264px) minmax(0, 1fr);
	gap: clamp(24px, 3vw, 44px);
	align-items: start;
	padding-block: clamp(26px, 3.4vw, 44px);
}
.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; min-width: 0; }
.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; min-width: 0; }
/* Logged-out (login/register) has no navigation child — let the single column
   span the full width and centre the auth composition (see §9). */
.woocommerce-account:not(.logged-in) .woocommerce { display: block; padding-block: 0; }

/* ------------------------------------------------------------- 3. SIDEBAR NAV
   A calm hairline card. Desktop shows the full list; mobile collapses behind an
   accessible "Account menu" disclosure (markup + account.js already shipped). */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 8px;
	display: grid;
	gap: 2px;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius-lg, 18px);
	background: var(--pl-surface, #fff);
	box-shadow: var(--pl-shadow-sm, 0 1px 2px rgba(6,26,58,.05));
}
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 14px;
	border-radius: var(--pl-radius-sm, 8px);
	color: var(--pl-navy);
	font-weight: 600;
	font-size: .96rem;
	transition: background var(--pl-dur, .2s) var(--pl-ease, ease), color var(--pl-dur, .2s) var(--pl-ease, ease);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--pl-surface-3, #eef4fb); color: var(--pl-link); }
/* Active = a restrained tinted row with a blue accent edge and blue label — a
   clear current state without the heavy solid-fill "button" look (A1). The inset
   shadow follows the item radius, so no layout shift and no extra border track. */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--pl-blue-050, #eaf3ff);
	color: var(--pl-blue-600, #1e63d8);
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--pl-blue);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--pl-line); }
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--pl-muted); }
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: var(--pl-danger); background: var(--pl-danger-bg, #fdeaea); }

/* Mobile disclosure trigger (hidden on desktop). */
.pl-account-nav-toggle { display: none; }
.pl-account-nav-toggle__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.pl-account-nav-toggle__label { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--pl-muted); }
.pl-account-nav-toggle__current { font-size: 1rem; color: var(--pl-navy); font-weight: 700; }
.pl-account-nav-toggle__chevron { transition: transform var(--pl-dur, .2s) var(--pl-ease, ease); color: var(--pl-muted); flex: none; }
.pl-account-nav-toggle[aria-expanded="true"] .pl-account-nav-toggle__chevron { transform: rotate(180deg); }

/* --------------------------------------------------------------- 4. CONTENT
   Shared content rhythm: section cards, headings, links. */
.woocommerce-account .woocommerce-MyAccount-content { color: var(--pl-navy); }
.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.pl-acct-card {
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius-lg, 18px);
	background: var(--pl-surface, #fff);
	padding: clamp(18px, 2.4vw, 26px);
}
.pl-acct-card + .pl-acct-card { margin-top: 18px; }
.pl-acct-sectionhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.pl-acct-sectionhead h2, .pl-acct-sectionhead h3 { margin: 0; font-family: var(--pl-font-heading); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; color: var(--pl-navy); }
.pl-acct-link { color: var(--pl-link); font-weight: 600; font-size: .92rem; text-decoration: underline; text-underline-offset: 2px; }
.pl-acct-link:hover { color: var(--pl-blue-600, #1e63d8); }

/* ------------------------------------------------------------- 5. DASHBOARD
   The branded dashboard block (`.pl-account`, output by inc/account.php). The
   stock "Hello …/ From your account dashboard" intro is suppressed at the
   template level so this is the only welcome. */
.pl-account { display: grid; gap: 18px; }
.pl-account__card {
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius-lg, 18px);
	background: var(--pl-surface, #fff);
	padding: clamp(18px, 2.4vw, 24px);
}
.pl-account__cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pl-account__cardtitle { font-family: var(--pl-font-heading); font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; margin: 0; color: var(--pl-navy); }
.pl-account__cardhead .pl-account__cardtitle { margin: 0; }

/* Recent-order rows */
.pl-account__orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-account__order a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
	gap: 16px;
	align-items: center;
	padding: 13px 16px;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius, 12px);
	background: var(--pl-surface-2, #f7fafd);
	color: var(--pl-navy);
	min-height: 44px;
	transition: border-color var(--pl-dur, .2s) var(--pl-ease, ease), background var(--pl-dur, .2s) var(--pl-ease, ease);
}
.pl-account__order a:hover { border-color: var(--pl-line-strong); background: var(--pl-surface-3, #eef4fb); }
.pl-account__ordernum { font-weight: 700; }
.pl-account__orderdate { color: var(--pl-muted); font-size: .88rem; white-space: nowrap; }
.pl-account__orderstatus { font-size: .88rem; }
.pl-account__orderitems { color: var(--pl-muted); font-size: .88rem; white-space: nowrap; }
.pl-account__ordertotal { font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-account__orderview { color: var(--pl-link); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.pl-account__empty { text-align: center; padding: 22px; color: var(--pl-muted); }
.pl-account__emptytitle { font-family: var(--pl-font-heading); font-weight: 800; font-size: 1.05rem; color: var(--pl-navy); margin: 0 0 6px; }
.pl-account__empty p { margin: 0 0 14px; }

/* Quick links (Orders / Addresses / Account details) */
.pl-acct-quick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pl-acct-quick a {
	display: flex; flex-direction: column; gap: 4px;
	padding: 16px; min-height: 44px;
	border: 1px solid var(--pl-line); border-radius: var(--pl-radius, 12px);
	background: var(--pl-surface, #fff); color: var(--pl-navy);
	transition: border-color var(--pl-dur,.2s) var(--pl-ease,ease), background var(--pl-dur,.2s) var(--pl-ease,ease);
}
.pl-acct-quick a:hover { border-color: var(--pl-line-strong); background: var(--pl-surface-2, #f7fafd); }
.pl-acct-quick__label { font-weight: 700; }
.pl-acct-quick__desc { color: var(--pl-muted); font-size: .86rem; }

/* Support CTA → Contact (no support@, no SLA promise) */
.pl-account__support {
	display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
	border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg, 18px);
	padding: clamp(18px, 2.4vw, 24px); background: var(--pl-surface-2, #f7fafd);
}
.pl-account__supporttext { color: var(--pl-muted); margin: 4px 0 0; max-width: 52ch; }

/* Account services (only rendered when a provider marks one available) */
.pl-account__services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pl-account__service { border: 1px solid var(--pl-line); border-radius: var(--pl-radius, 12px); padding: 14px; background: var(--pl-surface-2, #f7fafd); }
.pl-account__servicetitle { font-weight: 700; color: var(--pl-navy); }
.pl-account__servicedesc { color: var(--pl-muted); font-size: .85rem; margin-top: 4px; }

/* ------------------------------------------------- 6. STATUS PILL (neutral)
   Calm, non-celebratory status chips (no green "trust tick" styling). */
/* Class suffix = the real WooCommerce status slug from get_status() (processing,
   completed, on-hold, pending, cancelled, refunded, failed …). Any unmapped real
   status still reads as a neutral pill via the base rule — never a fake status. */
.pl-acct-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--pl-radius-pill, 999px); font-size: .78rem; font-weight: 700; letter-spacing: .01em; line-height: 1.4; border: 1px solid var(--pl-line); background: var(--pl-surface-3, #eef4fb); color: var(--pl-navy); white-space: nowrap; }
/* Design-system adoption — account status chips bound to the shared semantic tokens
   (was a parallel off-token palette: #2f6b46 green, #8a5a12 amber, #c43d3d/#8a2b2b red,
   with drifted borders). One status system site-wide; green stays success-only. */
.pl-acct-status--processing { background: var(--pl-blue-050); color: var(--pl-blue-600); border-color: var(--pl-info-border); }
.pl-acct-status--completed { background: var(--pl-success-bg); color: var(--pl-success); border-color: var(--pl-success-border); }
.pl-acct-status--on-hold, .pl-acct-status--pending { background: var(--pl-pending-bg); color: var(--pl-pending); border-color: var(--pl-pending-border); }
.pl-acct-status--cancelled, .pl-acct-status--failed, .pl-acct-status--refunded { background: var(--pl-danger-bg); color: var(--pl-danger); border-color: var(--pl-danger-border); }

/* ----------------------------------------------------------- 7. ORDERS TABLE
   Desktop = a clean hairline table (Order · Date · Status · Items · Total · View);
   Total + the View action carry the right-edge emphasis. Mobile (≤640) reflows
   each row into a compact three-line card (§13) — never boxed table-like cells. */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%; border-collapse: separate; border-spacing: 0;
	border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg, 18px); overflow: hidden;
	background: var(--pl-surface, #fff);
}
.woocommerce-account table.shop_table th { background: var(--pl-surface-2, #f7fafd); color: var(--pl-navy); text-align: left; padding: 13px 16px; font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.woocommerce-account table.shop_table td { padding: 15px 16px; border-top: 1px solid var(--pl-line); vertical-align: middle; }
.woocommerce-account .woocommerce-orders-table__cell-order-number a { font-weight: 700; color: var(--pl-link); }
.woocommerce-account .woocommerce-orders-table__cell-order-items { color: var(--pl-muted); white-space: nowrap; }
/* Total + View sit at the right edge and carry the most weight. */
.woocommerce-account .woocommerce-orders-table__header-order-total,
.woocommerce-account .woocommerce-orders-table__cell-order-total,
.woocommerce-account .woocommerce-orders-table__header-order-actions,
.woocommerce-account .woocommerce-orders-table__cell-order-actions { text-align: right; }
.woocommerce-account .woocommerce-orders-table__cell-order-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button,
.woocommerce-account .woocommerce-MyAccount-content .button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 9px 16px; border-radius: var(--pl-radius, 12px);
	background: transparent; border: 1.5px solid var(--pl-line-strong); color: var(--pl-navy);
	font-weight: 600; font-size: .92rem; text-align: center;
	transition: border-color var(--pl-dur,.2s) var(--pl-ease,ease), color var(--pl-dur,.2s) var(--pl-ease,ease);
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover { border-color: var(--pl-blue); color: var(--pl-blue); }
/* The single primary action (Save changes / Log in / Register) = solid navy. */
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-form-login button.button,
.woocommerce-account .woocommerce-form-register button.button {
	background: var(--pl-navy); border-color: var(--pl-navy); color: #fff;
}
.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
.woocommerce-account .woocommerce-form-login button.button:hover,
.woocommerce-account .woocommerce-form-register button.button:hover { background: var(--pl-blue); border-color: var(--pl-blue); color: #fff; }

/* ------------------------------------------------------------ 8. VIEW ORDER
   Order summary strip + line items + totals + address cards. */
.woocommerce-account .woocommerce-order-overview,
.woocommerce-account ul.order_details {
	list-style: none; margin: 0 0 22px; padding: 18px; display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px 20px;
	border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg, 18px); background: var(--pl-surface-2, #f7fafd);
}
.woocommerce-account ul.order_details li {
	display: flex; flex-direction: column; gap: 3px; border: 0; padding: 0; margin: 0;
	font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pl-muted); font-weight: 700;
}
.woocommerce-account ul.order_details li strong { font-size: 1.02rem; text-transform: none; letter-spacing: 0; color: var(--pl-navy); font-weight: 700; }
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title { font-family: var(--pl-font-heading); font-weight: 800; font-size: 1.12rem; color: var(--pl-navy); margin: 0 0 12px; }
.woocommerce-account .woocommerce-customer-details .col2-set { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-top: 22px; }
.woocommerce-account .woocommerce-customer-details address { font-style: normal; line-height: 1.6; color: var(--pl-navy); border: 1px solid var(--pl-line); border-radius: var(--pl-radius, 12px); padding: 16px; background: var(--pl-surface, #fff); }
.woocommerce-account table.order_details tfoot th { text-transform: none; letter-spacing: 0; font-size: .95rem; background: transparent; }
/* Line-item variation (the customer's selected strength) printed by WooCommerce's
   own wc_display_item_meta() — real order data, never computed here. */
.woocommerce-account .wc-item-meta { list-style: none; margin: 5px 0 0; padding: 0; font-size: .86rem; color: var(--pl-muted); }
.woocommerce-account .wc-item-meta li { margin: 0; }
.woocommerce-account .wc-item-meta-label { font-weight: 600; color: var(--pl-navy); }

/* ------------------------------------------------------------- 9. ADDRESSES */
.woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-top: 8px; }
.woocommerce-account .woocommerce-Address {
	border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg, 18px); background: var(--pl-surface, #fff);
	padding: clamp(18px, 2.2vw, 24px);
}
.woocommerce-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.woocommerce-account .woocommerce-Address-title h3 { margin: 0; font-family: var(--pl-font-heading); font-weight: 800; font-size: 1.08rem; color: var(--pl-navy); }
.woocommerce-account .woocommerce-Address-title .edit { color: var(--pl-link); font-weight: 600; font-size: .9rem; text-decoration: underline; text-underline-offset: 2px; }
.woocommerce-account .woocommerce-Address address { font-style: normal; line-height: 1.65; color: var(--pl-navy); }

/* -------------------------------------------------------- 10. FORMS (fields)
   Account details + address + login/register share these field primitives,
   scoped so checkout/cart keep their own woocommerce.css styling (L10). */
.woocommerce-account .woocommerce-MyAccount-content form,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register { display: block; }
.woocommerce-account .form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.woocommerce-account .form-row label { font-weight: 700; color: var(--pl-navy); font-size: .95rem; }
.woocommerce-account .form-row .required { color: var(--pl-blue); text-decoration: none; border: 0; }
.woocommerce-account .form-row .optional { color: var(--pl-muted); font-weight: 500; }
.woocommerce-account .woocommerce-input-wrapper { display: block; }
.woocommerce-account .input-text,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"] {
	width: 100%; min-height: 50px; padding: 12px 14px;
	/* Design-system adoption — the approved WCAG-1.4.11 control boundary (was --pl-line-strong
	   ~1.45:1, which its own token comment forbids for controls). */
	border: 1.5px solid var(--pl-field-border); border-radius: var(--pl-radius, 12px);
	background: var(--pl-surface, #fff); color: var(--pl-navy); font-size: 1rem;
	transition: border-color var(--pl-dur,.2s) var(--pl-ease,ease), box-shadow var(--pl-dur,.2s) var(--pl-ease,ease);
}
.woocommerce-account .input-text:focus,
.woocommerce-account input:focus { border-color: var(--pl-blue); box-shadow: var(--pl-ring); outline: none; }
.woocommerce-account .woocommerce-EditAccountForm .col2-set,
.woocommerce-account .woocommerce-address-fields .col2-set { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 20px; }
.woocommerce-account fieldset { border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg, 18px); padding: clamp(16px,2vw,22px); margin: 8px 0 20px; }
.woocommerce-account fieldset legend { font-family: var(--pl-font-heading); font-weight: 800; font-size: 1rem; color: var(--pl-navy); padding: 0 8px; }
.woocommerce-account .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.woocommerce-account .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; }
.woocommerce-account .woocommerce-password-strength { margin-top: 6px; font-size: .85rem; }
.woocommerce-account .woocommerce-LostPassword a { color: var(--pl-link); text-decoration: underline; text-underline-offset: 2px; }

/* Error/notice styling (WooCommerce inline). Colour + border, never colour
   alone. */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
	list-style: none; margin: 0 0 20px; padding: 14px 16px; border-radius: var(--pl-radius, 12px);
	border: 1px solid var(--pl-line); background: var(--pl-surface-2, #f7fafd); color: var(--pl-navy); font-size: .95rem;
}
.woocommerce-account .woocommerce-error { background: var(--pl-danger-bg); border-color: var(--pl-danger-border); color: var(--pl-danger); }
.woocommerce-account .woocommerce-message { background: var(--pl-success-bg); border-color: var(--pl-success-border); color: var(--pl-success); }

/* --------------------------------------------------- 11. LOGGED-OUT (auth)
   Masthead + an intentional desktop composition (auth card + a quiet
   supporting rail — never a lone centred column, per L3). Login + Register
   sit side by side on desktop and stack on mobile. */
.woocommerce-account:not(.logged-in) .u-columns.col2-set,
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns {
	display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(20px, 3vw, 36px);
	max-width: 960px; margin: 0 auto; padding: clamp(30px, 5vw, 60px) 0;
}
.woocommerce-account:not(.logged-in) h2 { font-family: var(--pl-font-heading); font-weight: 800; font-size: 1.4rem; letter-spacing: -.01em; color: var(--pl-navy); margin: 0 0 16px; }
.woocommerce-account:not(.logged-in) .woocommerce-form {
	border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg, 18px);
	background: var(--pl-surface, #fff); box-shadow: var(--pl-shadow-sm, 0 1px 2px rgba(6,26,58,.05));
	padding: clamp(22px, 3vw, 34px);
}

/* --------------------------------------------------------- 12. FOCUS (a11y)
   Buttons that set their own background/box-shadow need an explicit OUTLINE
   focus ring (L15) — the global box-shadow ring is otherwise defeated. */
.woocommerce-account a:focus-visible,
.woocommerce-account button:focus-visible,
.woocommerce-account input:focus-visible,
.woocommerce-account select:focus-visible,
.woocommerce-account textarea:focus-visible,
.woocommerce-account .button:focus-visible,
.woocommerce-account .pl-account-nav-toggle:focus-visible {
	outline: 3px solid var(--pl-blue);
	outline-offset: 3px;
	border-radius: 8px;
}
.pl-acct-masthead a:focus-visible { outline-color: #fff; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:focus-visible { outline-offset: 2px; }

/* ---------------------------------------------------------- 13. RESPONSIVE */
@media (max-width: 900px) {
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 16px; }
	.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; }
	.woocommerce-account .woocommerce-MyAccount-content { grid-column: 1; }
	/* Collapse the sidebar behind the disclosure button. */
	.pl-account-nav-toggle {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		width: 100%; min-height: 48px; padding: 10px 16px;
		border: 1px solid var(--pl-line-strong); border-radius: var(--pl-radius, 12px);
		background: var(--pl-surface, #fff); cursor: pointer;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul { display: none; margin-top: 8px; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul.is-open { display: grid; }
}
@media (max-width: 720px) {
	.woocommerce-account .woocommerce-Addresses,
	.woocommerce-account .woocommerce-customer-details .col2-set,
	.woocommerce-account:not(.logged-in) .u-columns.col2-set { grid-template-columns: 1fr; }
	.woocommerce-account .woocommerce-EditAccountForm .col2-set,
	.woocommerce-account .woocommerce-address-fields .col2-set { grid-template-columns: 1fr; }
}
/* Compact the masthead substantially on phones — tighter padding, gaps and meta
   so the navy header takes far less of the mobile viewport (A1). */
@media (max-width: 600px) {
	.pl-acct-masthead { padding: 16px 0 18px; }
	.pl-acct-masthead__crumb { margin-bottom: 10px; }
	.pl-acct-masthead__eyebrow { margin-bottom: 8px; font-size: .72rem; }
	.pl-acct-masthead__meta { margin-top: 8px; font-size: .86rem; }
}

/* Orders (endpoint table) + the dashboard "Recent orders" list reflow to the SAME
   compact three-line rows on mobile — see the A1 consolidated block near the end
   of this sheet. It carries the elevated `table.woocommerce-orders-table`
   specificity needed to out-rank the generic responsive `shop_table` rules in
   woocommerce.css, and places the dashboard + endpoint rows identically. */

/* No-JS fallback. The mobile nav disclosure needs account.js to add `.is-open`;
   with scripting off that class is never set, so on mobile the collapsed list
   (and Log out) would be unreachable. The theme flags no-JS on <html> (header.php
   sets `no-js`, inc/enqueue.php swaps it to `js`), so when JS is absent: hide the
   inert toggle and always show the full list. Higher specificity beats the
   `ul{display:none}` mobile rule regardless of source order. */
.no-js .pl-account-nav-toggle { display: none; }
.no-js .woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid; }

/* --------------------------------------------------- 14. MOTION / PRINT */
@media (prefers-reduced-motion: reduce) {
	.woocommerce-account * { transition: none !important; }
}
@media print {
	.pl-acct-masthead::before { display: none; }
	.pl-acct-masthead { background: #fff; color: #000; }
	.pl-acct-masthead__title, .pl-acct-masthead__crumb, .pl-acct-masthead__meta, .pl-acct-masthead__eyebrow { color: #000; }
	.woocommerce-account .woocommerce-MyAccount-navigation { display: none; }
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Bug-fix pass (fix/site-bugfix-redesign-v1) — Account center premium polish.
   Additive only: elevation, aligned numerics, clearer row affordances, and
   per-order mobile cards. Scoped to .woocommerce-account; no markup, status,
   data, one-H1, nav, or route-scoping change (Account V1 invariants preserved).
   =========================================================================== */
/* Elevation — the account cards shipped border-only; adopt the house shadow. */
.pl-account__card,
.pl-account__support,
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
.woocommerce-account .woocommerce-order-overview,
.woocommerce-account ul.order_details,
.woocommerce-account .woocommerce-customer-details address,
.woocommerce-account .woocommerce-Address { box-shadow: var(--pl-shadow-sm); }

/* Aligned money — tabular figures so totals line up cleanly. */
.pl-account__ordertotal,
.woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-total,
.woocommerce-account table.order_details tfoot .amount { font-variant-numeric: tabular-nums; }

/* Orders table — a quiet row hover (there was none) for a more interactive feel. */
.woocommerce-account table.shop_table tbody tr { transition: background var(--pl-dur,.2s) var(--pl-ease,ease); }
.woocommerce-account table.shop_table tbody tr:hover { background: var(--pl-surface-2, #f7fafd); }

/* Dashboard recent-order row — a trailing chevron so "View order" reads clickable. */
.pl-account__orderview { display: inline-flex; align-items: center; gap: 4px; }
.pl-account__orderview::after { content: "\203A"; font-weight: 700; line-height: 1; }

/* ===========================================================================
   A1 — Orders on mobile (≤640): compact three-line rows, never table-like cells.
   Both the Orders endpoint (native WooCommerce table) and the dashboard "Recent
   orders" list reflow to ONE anatomy:
       line 1:  #order          ·  status (right)
       line 2:  date            ·  N items (right)
       line 3:  total (weight)  ·  View order (right)
   The orders-table selectors carry the `table` element (specificity 0,3,2) so
   they out-rank the generic responsive `table.shop_table` rules in woocommerce.css
   (0,2,2) that would otherwise force a two-column `data-title` cell layout. The
   View-Order line-items table (.woocommerce-table--order-details) is deliberately
   NOT matched here, so it keeps its shared stacked treatment (also used on the
   order-received / thankyou page, where this sheet does not load).
   =========================================================================== */
@media (max-width: 640px) {
	/* --- Orders endpoint: block reflow of the native table into compact rows --- */
	.woocommerce-account table.woocommerce-orders-table { display: block; border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; }
	/* Visible column headers are dropped on mobile; every cell is self-describing
	   (#order · status · date · N items · total · View) and reads in a logical
	   order. Full table semantics remain on desktop (≥641px). Matches WooCommerce's
	   own responsive orders-table behaviour, minus the data-title cell labels. */
	.woocommerce-account table.woocommerce-orders-table thead { display: none; }
	.woocommerce-account table.woocommerce-orders-table tbody { display: block; }
	.woocommerce-account table.woocommerce-orders-table tr {
		display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px;
		padding: 14px 16px; margin: 0 0 10px;
		border: 1px solid var(--pl-line); border-radius: var(--pl-radius, 12px);
		background: var(--pl-surface, #fff); box-shadow: var(--pl-shadow-sm);
	}
	.woocommerce-account table.woocommerce-orders-table tr:last-child { margin-bottom: 0; }
	/* Neutralise the generic td flex + data-title label, then place cells by line. */
	.woocommerce-account table.woocommerce-orders-table td { display: block; padding: 0; border: 0; min-width: 0; font-size: .9rem; }
	.woocommerce-account table.woocommerce-orders-table td::before { content: none; }
	.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number { grid-column: 1; grid-row: 1; }
	.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status { grid-column: 2; grid-row: 1; justify-self: end; }
	.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-date { grid-column: 1; grid-row: 2; color: var(--pl-muted); }
	.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-items { grid-column: 2; grid-row: 2; justify-self: end; color: var(--pl-muted); }
	.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total { grid-column: 1; grid-row: 3; text-align: left; font-weight: 700; }
	.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { grid-column: 2; grid-row: 3; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end !important; }
	.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions a.button { width: auto; min-width: 0; }

	/* --- Dashboard "Recent orders" rows: identical three-line anatomy --- */
	.pl-account__order a { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: baseline; padding: 14px 16px; }
	.pl-account__ordernum { grid-column: 1; grid-row: 1; }
	.pl-account__orderstatus { grid-column: 2; grid-row: 1; justify-self: end; }
	.pl-account__orderdate { grid-column: 1; grid-row: 2; }
	.pl-account__orderitems { grid-column: 2; grid-row: 2; justify-self: end; }
	.pl-account__ordertotal { grid-column: 1; grid-row: 3; }
	.pl-account__orderview { grid-column: 2; grid-row: 3; justify-self: end; }

	/* View Order line-items/totals table: block reflow SCOPED TO THE ACCOUNT so it
	   can never force a min table-width overflow at 320 (the woocommerce.css rows
	   keep their 1fr/auto label-value stack; the shared order-received / thankyou
	   copy of this table, styled only by woocommerce.css, is deliberately untouched). */
	.woocommerce-account .woocommerce-table--order-details,
	.woocommerce-account .woocommerce-table--order-details tbody,
	.woocommerce-account .woocommerce-table--order-details tfoot { display: block; width: 100%; }
	.woocommerce-account .woocommerce-table--order-details td,
	.woocommerce-account .woocommerce-table--order-details th { min-width: 0; overflow-wrap: anywhere; }
}

/* ===========================================================================
   Cycle 2 — View Order card system (theme override:
   woocommerce/myaccount/view-order.php): summary card + order-update notes +
   support row. The WooCommerce items/totals/customer-address templates that
   follow are NOT overridden (they are shared with the order-received page) and
   keep their existing §7/§8 styling.
   =========================================================================== */
.pl-vieworder__summary, .pl-vieworder__updates { box-shadow: var(--pl-shadow-sm); }
.pl-vieworder__summary .pl-acct-sectionhead { align-items: center; flex-wrap: wrap; }
.pl-vieworder__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 14px 22px; margin: 0; }
.pl-vieworder__metaitem { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pl-vieworder__metaitem dt { margin: 0; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--pl-muted); }
.pl-vieworder__metaitem dd { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--pl-navy); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pl-vieworder__updates { margin-top: 18px; }
.pl-vieworder__notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pl-vieworder__note { border-left: 3px solid var(--pl-line-strong); padding-left: 14px; }
.pl-vieworder__notedate { margin: 0 0 4px; font-size: .78rem; font-weight: 600; color: var(--pl-muted); }
.pl-vieworder__notebody p { margin: 0; }
.pl-vieworder__notebody p + p { margin-top: 8px; }
.pl-vieworder__support { margin-top: 22px; }
/* Rhythm between the summary card and WooCommerce's own order-details block. */
.woocommerce-account .woocommerce-order-details { margin-top: 18px; }