/*
 * My Account (Phase 3G — docs/MY-ACCOUNT-IMPLEMENTATION.md). Restyles
 * WooCommerce's real classic My Account shortcode templates — verified
 * live that `[woocommerce_my_account]` is the active rendering system
 * (not Blocks) — using their documented, stable class names. Shares
 * `.col2-set`/order-detail-table rules with checkout.css (Phase 3F) rather
 * than duplicating them; see inc/enqueue.php.
 */

/* --- Page heading --- */
/* Font styling is the site-wide default now (base.css); only this page's
   larger bottom margin is overridden here. */
body.woocommerce-account h1 {
	margin: 0 0 var(--space-6);
}

/* --- Real WooCommerce form inputs (login, register, lost/reset password,
   address forms, account-details form all share this markup) --- */
.woocommerce-form-row {
	margin-bottom: var(--space-4);
}
.woocommerce-form-row label {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-1);
}
.woocommerce-form-row .required {
	color: var(--color-error);
	text-decoration: none;
}
.woocommerce-form-row .input-text,
.woocommerce-form-row select,
.woocommerce-address-fields select {
	width: 100%;
	min-height: 48px;
	padding: var(--space-2) var(--space-3);
	border: var(--border-default);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-base);
	background: var(--color-surface);
	color: var(--color-text-primary);
}
.woocommerce-form-row .input-text:focus,
.woocommerce-form-row select:focus {
	outline: none;
	box-shadow: var(--shadow-focus);
	border-color: var(--color-brand-blue);
}

.woocommerce-form-row--first,
.woocommerce-form-row--last { width: 100%; }
@media (min-width: 600px) {
	.woocommerce-form-row--first { float: left; width: calc(50% - var(--space-3)); }
	.woocommerce-form-row--last { float: right; width: calc(50% - var(--space-3)); }
}
.clear { clear: both; }

/* Remember-me checkbox / any plain checkbox row in these forms */
.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	font-weight: var(--font-weight-regular);
}

/* --- Buttons on these forms (Login, Register, Reset password, Save
   address, Save changes) ---
   WooCommerce's own bundled CSS hardcodes `.woocommerce button.button {
   background-color: #e9e6ed }` behind a `:where()`-wrapped selector whose
   *effective* specificity (the :where() parts contribute zero) is still
   higher than a single class selector — confirmed via reading the
   compiled CSS after this rule visibly rendered grey instead of brand
   blue. `!important` is the same, deliberate fix already used in
   Phases 3E/3F for this exact class of conflict. */
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce form.lost_reset_password button[type="submit"],
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-address-fields button[type="submit"],
.woocommerce-ResetPassword button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--space-3) var(--space-6);
	border: none !important;
	border-radius: var(--radius-md) !important;
	background: var(--color-brand-blue) !important;
	color: var(--color-text-on-brand) !important;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: background-color var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-out);
}
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover,
.woocommerce form.lost_reset_password button[type="submit"]:hover,
.woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-address-fields button[type="submit"]:hover,
.woocommerce-ResetPassword button[type="submit"]:hover {
	background: var(--color-brand-bright) !important;
	transform: translateY(-1px);
}
/* !important: the same hardcoded WooCommerce rule above also ships
   `box-shadow: none` unconditionally (all states, not just default) as part
   of that one declaration block — which silently cancels the shared
   `a:focus-visible / button:focus-visible { box-shadow: var(--shadow-focus) }`
   ring from base.css on every one of these buttons, since it wins on the
   same specificity fight. Confirmed via real Tab-key navigation + checking
   `element.matches(':focus-visible')` (true) alongside a computed box-shadow
   of "none". Restoring it here, scoped to :focus-visible so it doesn't
   interfere with the hover state above. */
.woocommerce-form-login__submit:focus-visible,
.woocommerce-form-register__submit:focus-visible,
.woocommerce form.lost_reset_password button[type="submit"]:focus-visible,
.woocommerce-EditAccountForm button[type="submit"]:focus-visible,
.woocommerce-address-fields button[type="submit"]:focus-visible,
.woocommerce-ResetPassword button[type="submit"]:focus-visible {
	outline: none !important;
	box-shadow: var(--shadow-focus) !important;
}

/* --- Logged-out: Login / Register --- */
#customer_login h2 {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	margin: 0 0 var(--space-4);
}
/* Single-column when registration is disabled (no #customer_login wrapper
   at all in that case — verified live; this just styles the standalone
   .woocommerce-form-login when it renders without the two-column shell). */
.woocommerce-form-login:not(#customer_login .woocommerce-form-login) h2 {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	margin: 0 0 var(--space-4);
}
.woocommerce-LostPassword {
	font-size: var(--text-sm);
	margin-top: var(--space-2);
}
/* brand-deep, not brand-blue: this link sits directly on the page's sunken
   background (no white card behind it), where brand-blue only measures
   4.44:1 contrast — under the 4.5:1 AA minimum (confirmed via axe-core).
   brand-deep clears it comfortably while staying on-brand. Same reasoning
   applies to every other plain-text link below that isn't inside a white
   card or pill button. */
.woocommerce-LostPassword a { color: var(--color-brand-deep); }

/* --- My Account shell: sidebar navigation + content --- */
/* !important: WooCommerce's own woocommerce-layout.css unconditionally sets
   `.woocommerce-account .woocommerce-MyAccount-navigation{float:left;width:30%}`
   and `.woocommerce-account .woocommerce-MyAccount-content{float:right;width:68%}`
   at every viewport width — its only reset lives in woocommerce-smallscreen.css,
   which WC loads via a `media="only screen and (max-width: 768px)"` attribute
   on the <link> tag itself, not an in-file media query (confirmed by reading
   both stylesheets directly). Between 768px and our own 1024px breakpoint
   those floats would otherwise apply with nothing to counter them, so the
   reset below is unconditional, not scoped to the desktop grid media query. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
	margin-bottom: var(--space-8);
}

@media (min-width: 1024px) {
	/* WooCommerce's own woocommerce.css also puts a clearfix pair,
	   `.woocommerce::before, .woocommerce::after { content:" "; display:table }`,
	   directly on this same `.woocommerce` element. Once it becomes a grid
	   container below, `display:table` blockifies to `display:block` for a
	   grid item (per spec) instead of being suppressed — so the two
	   pseudo-elements silently become two EXTRA grid items interleaved with
	   nav/content in auto-placement order: [::before, nav, content, ::after].
	   That shifted nav into column 2 and wrapped content into row 2/column 1
	   (confirmed via getComputedStyle(el, '::before') showing display:table
	   and getBoundingClientRect showing nav and content in swapped, wrapped
	   positions). Grid layout makes the clearfix unnecessary anyway, so the
	   fix is to remove both pseudo-elements outright rather than work around
	   their placement. */
	.woocommerce-account .woocommerce::before,
	.woocommerce-account .woocommerce::after {
		content: none;
		display: none;
	}
	/* :has() scope is real, not decorative: the logged-out login/register
	   page renders the SAME `.woocommerce` element but with no
	   `.woocommerce-MyAccount-navigation` child at all (no nav to show when
	   there's no account yet). Without this scope, the unconditional
	   `grid-template-columns: 240px minmax(0,1fr)` still applied there, and
	   the login form — its only child — was placed into grid auto-placement
	   column 1, i.e. squeezed to exactly 240px wide flush against the left
	   edge, with the entire ~1016px second column left empty at 1440px
	   (confirmed live via getComputedStyle: gridTemplateColumns "240px
	   1016px", login form getBoundingClientRect width 240). That read as a
	   broken/abandoned page, not a minimal one. Scoping the grid to only
	   when nav is actually present fixes the root cause instead of padding
	   around it. */
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--space-8);
		align-items: start;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 0; }

	/* Logged-out case (no nav child): center the login/register content at
	   a considered width instead of letting it either fall into the 240px
	   nav track (the bug above) or stretch full-bleed across the whole
	   content column. --container-narrow is the existing "comfortable
	   width" token (tokens.css), reused here rather than inventing a new
	   one. #customer_login (login+register, two-column) gets more room
	   than a standalone login form since it has two forms side by side. */
	.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
		max-width: var(--container-narrow);
		margin: 0 auto;
	}
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	border: var(--border-default);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	overflow: hidden;
}
.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
	text-decoration: none;
	border-left: 3px solid transparent;
	transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.woocommerce-MyAccount-navigation-link a:hover {
	background: var(--color-surface-sunken);
	color: var(--color-text-primary);
}
.woocommerce-MyAccount-navigation-link.is-active a {
	background: color-mix(in srgb, var(--color-brand-blue) 8%, white);
	color: var(--color-brand-deep);
	font-weight: var(--font-weight-semibold);
	border-left-color: var(--color-brand-blue);
}
.woocommerce-MyAccount-navigation-link--customer-logout {
	border-top: var(--border-default);
	margin-top: var(--space-1);
}
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--color-error); }

/* --- Dashboard --- */
.woocommerce-MyAccount-content > p:first-child { font-size: var(--text-base); }
/* brand-deep — see the contrast note above the .woocommerce-LostPassword rule. */
.woocommerce-MyAccount-content a { color: var(--color-brand-deep); }

/* Real summary cards added via the woocommerce_account_dashboard hook
   (inc/account.php) — real counts only, never invented metrics. */
.bholats-account-summary {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin: var(--space-6) 0;
}
@media (min-width: 600px) {
	.bholats-account-summary { grid-template-columns: repeat(3, 1fr); }
}
.bholats-account-summary__card {
	display: block;
	padding: var(--space-5);
	background: var(--color-surface);
	border: var(--border-default);
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-out);
}
.bholats-account-summary__card:hover { border-color: var(--color-brand-blue); transform: translateY(-2px); }
.bholats-account-summary__value {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
}
.bholats-account-summary__label {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin-top: var(--space-1);
}

/* --- Orders table (real WooCommerce `shop_table_responsive` component) --- */
.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-6);
}
.woocommerce-orders-table__header th {
	text-align: left;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-text-secondary);
	padding-bottom: var(--space-3);
	border-bottom: var(--border-default);
}
.woocommerce-orders-table__row td,
.woocommerce-orders-table__row th {
	padding: var(--space-3) var(--space-2);
	border-bottom: var(--border-default);
	font-size: var(--text-sm);
	vertical-align: middle;
}
/* brand-deep — see the contrast note above the .woocommerce-LostPassword rule. */
.woocommerce-orders-table__cell-order-number a { color: var(--color-brand-deep); font-weight: var(--font-weight-semibold); }
.woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
/* !important: same WooCommerce-hardcoded `.woocommerce button.button` /
   `.woocommerce a.button` rule (background:#e9e6ed) from the buttons block
   above beats a single-class-plus-element selector on specificity — same
   fix, same reason. */
.woocommerce-orders-table__cell-order-actions a {
	display: inline-block;
	padding: var(--space-1) var(--space-3) !important;
	border-radius: var(--radius-sm) !important;
	border: var(--border-default) !important;
	background: var(--color-surface) !important;
	font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold);
	color: var(--color-brand-blue) !important;
	text-decoration: none;
	margin-right: var(--space-2);
}
.woocommerce-orders-table__cell-order-actions a:hover { background: var(--color-surface-sunken) !important; }
/* !important: same box-shadow:none reset described above the login-button
   focus-visible fix — this link matches the identical WC `a.button` rule. */
.woocommerce-orders-table__cell-order-actions a:focus-visible {
	outline: none !important;
	box-shadow: var(--shadow-focus) !important;
}

/* Mobile: WooCommerce's own shop_table_responsive already exposes a
   data-title attribute per cell — convert the table to a stacked card
   layout rather than a horizontally-scrolling table, per the brief.
   768px, not 767px: WooCommerce loads woocommerce-smallscreen.css itself via
   a `media="only screen and (max-width: 768px)"` attribute on the <link>
   (confirmed by reading the rendered page head), which INCLUDES 768. Its
   own `.shop_table_responsive tbody th { display: none }` rule (our order
   number cell is a <th>, not a <td>) would otherwise apply alone at exactly
   768px — one pixel outside our old 767px boundary — silently hiding the
   order number column with nothing to replace it. Matching WC's own
   boundary exactly closes that gap. */
@media (max-width: 768px) {
	.woocommerce-orders-table__header { display: none; }
	/* !important on `display`: WooCommerce's own woocommerce-smallscreen.css
	   ships `.woocommerce table.shop_table_responsive tbody th{display:none}`
	   at (0,2,3) specificity — our order number cell is a <th>, and that
	   beats a single-class selector like this one at (0,1,1), leaving the
	   order number silently hidden with no replacement (confirmed via
	   getComputedStyle after the breakpoint fix above still showed
	   display:none on the <th> alone). */
	.woocommerce-orders-table,
	.woocommerce-orders-table__row,
	.woocommerce-orders-table__row td,
	.woocommerce-orders-table__row th {
		display: block !important;
		width: 100%;
	}
	.woocommerce-orders-table__row {
		margin-bottom: var(--space-4);
		border: var(--border-default);
		border-radius: var(--radius-md);
		padding: var(--space-3) var(--space-4);
	}
	.woocommerce-orders-table__row td,
	.woocommerce-orders-table__row th {
		border-bottom: none;
		padding: var(--space-1) 0;
		display: flex !important;
		justify-content: space-between;
		gap: var(--space-3);
	}
	.woocommerce-orders-table__row td::before,
	.woocommerce-orders-table__row th::before {
		content: attr(data-title);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-secondary);
		flex-shrink: 0;
	}
	.woocommerce-orders-table__cell-order-actions { justify-content: flex-start !important; }
}

/* --- Order details (view-order.php) --- */
mark.order-number,
mark.order-date,
mark.order-status {
	background: none;
	color: var(--color-text-primary);
	font-weight: var(--font-weight-semibold);
}
.woocommerce-OrderUpdates { list-style: none; margin: var(--space-4) 0; padding: 0; }
.woocommerce-OrderUpdate { padding: var(--space-3) 0; border-bottom: var(--border-default); }
.woocommerce-OrderUpdate-meta { font-size: var(--text-xs); color: var(--color-text-secondary); margin: 0 0 var(--space-1); }

/* --- Downloads --- */
.woocommerce-Downloads {
	list-style: none;
	margin: var(--space-4) 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.woocommerce-Downloads li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border: var(--border-default);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
}
.woocommerce-Downloads .count { color: var(--color-text-secondary); font-size: var(--text-xs); }
/* brand-deep — see the contrast note above the .woocommerce-LostPassword rule. */
.woocommerce-Downloads a { color: var(--color-brand-deep); font-weight: var(--font-weight-semibold); }

/* --- Addresses overview (my-address.php) --- */
.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-2);
}
.woocommerce-Address-title h2 { font-size: var(--text-h5); margin: 0; }
/* brand-deep — see the contrast note above the .woocommerce-LostPassword rule. */
.woocommerce-Address-title .edit {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-brand-deep);
	text-decoration: none;
}
.woocommerce-Address address {
	font-style: normal;
	line-height: var(--leading-relaxed);
	color: var(--color-text-secondary);
	background: var(--color-surface);
	border: var(--border-default);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	min-height: 60px;
}

/* --- Account-details form fieldset (password change) --- */
.woocommerce-EditAccountForm fieldset {
	border: var(--border-default);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin: var(--space-4) 0;
}
.woocommerce-EditAccountForm fieldset legend {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	padding: 0 var(--space-2);
}
#account_display_name_description {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
	margin-top: var(--space-1);
}

/* --- Account-details / Address-edit form width ---
   Both forms share the same real WooCommerce `.woocommerce-form-row`
   markup. On desktop, every single-column row (Display name, Email
   address, the three password fields on Account details; Country, Street
   address, Town/City, Province, Postcode, Phone, Email on the address
   form) was stretching edge-to-edge across the full ~1016px content
   column at 1440px — confirmed live: a 4-character Postcode field
   rendered in a text box ~1010px wide. Only First/Last name split 50/50
   via the existing --first/--last rules above. Capping the form to the
   existing --container-narrow token (already defined in tokens.css for
   "comfortable width") fixes the worst of it without inventing a new
   token; First/Last name stay proportional 50/50 within the capped width. */
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
	max-width: var(--container-narrow);
}

/* Pair the naturally-short address fields (Town/City + Province,
   Postcode + Phone) into 2-up rows the same way First/Last name already
   pairs — WooCommerce's own address locale for this store (South Africa)
   ships every one of these as `form-row-wide` with no built-in pairing
   (confirmed via live DOM inspection: #billing_city_field,
   #billing_state_field, #billing_postcode_field, #billing_phone_field —
   and their #shipping_ equivalents — all carry `form-row-wide`, never
   `form-row-first`/`form-row-last`). Scoped to real WooCommerce field IDs,
   not new markup. */
@media (min-width: 600px) {
	#billing_city_field, #shipping_city_field,
	#billing_postcode_field, #shipping_postcode_field {
		float: left;
		width: calc(50% - var(--space-3));
		clear: left;
	}
	#billing_state_field, #shipping_state_field,
	#billing_phone_field, #shipping_phone_field {
		float: right;
		width: calc(50% - var(--space-3));
		/* WooCommerce's own `.form-row-wide` class ships `clear: both` —
		   left un-overridden here, that made these drop below the paired
		   left-side float onto their own line instead of sitting beside it
		   (confirmed via getComputedStyle showing clear:"both" on this
		   field with nothing in this stylesheet setting it). */
		clear: none;
	}
	#billing_email_field, #shipping_email_field {
		clear: both;
	}
}

/* --- Responsive ---
   Below 1024px the navigation stays a single vertical stacked list (the
   same list used in the sidebar, just full-width) rather than switching
   to a horizontal tab row — the brief explicitly prefers this over "a
   cramped horizontal tab row", and a plain stacked list needs no
   additional JavaScript (no dropdown/drawer component to build or test)
   while remaining fully readable for all 6 real menu items, including the
   longer "Account details" label. */