/* ============================================================================
   V80 — WooCommerce "My Account" UI skin (exA-Arcadia)
   Layout skinning only. No endpoint logic is altered; this file styles the
   native WooCommerce account templates rendered by the theme overrides in
   woocommerce/myaccount/. Scoped to body.woocommerce-account.
   ============================================================================ */

.exa-account {
	--exa-acc-primary: #e30613;
	--exa-acc-primary-dark: #c0000c;
	--exa-acc-sidebar: #121212;
	--exa-acc-sidebar-line: rgba(255, 255, 255, 0.10);
	--exa-acc-canvas: #ffffff;
	--exa-acc-ink: #111111;
	--exa-acc-muted: #6b7280;
	--exa-acc-card: #f3f4f6;
	--exa-acc-card-head: #dbdcdd;
	--exa-acc-line: rgba(0, 0, 0, 0.06);
	--exa-acc-font: "Montserrat", "Montserrat-Regular", Helvetica, Arial, sans-serif;
	--exa-acc-radius: 0.625rem;
}

/* --- 1. Break the dashboard out of the Foundation row/columns + dark theme --- */
/* Explicit #fff here (not var(--exa-acc-canvas)) — these elements are ancestors
   of .exa-account, where that custom property is defined, so the variable is out
   of scope on them and would resolve to transparent. */
body.woocommerce-account {
	background: #ffffff !important;
}

body.woocommerce-account #generic-page,
body.woocommerce-account #generic-page > section {
	background: #ffffff !important;
	color: #111111;
	margin: 0;
	padding: 0;
}

/* Contain the full-bleed dashboard so 100vw never introduces a horizontal scrollbar. */
body.woocommerce-account #generic-page {
	overflow-x: hidden;
}

body.woocommerce-account #generic-page > section > .row {
	width: 100%;
	max-width: none;
	margin: 0;
}

body.woocommerce-account #generic-page > section > .row > .columns {
	width: 100%;
	max-width: none;
	float: none;
	padding-left: 0;
	padding-right: 0;
}

/* Hide the redundant page.php <h1>My account</h1> (skin has its own headings). */
body.woocommerce-account #generic-page > section > .row > .columns > h1 {
	display: none !important;
}

/* The WC shortcode wrapper should not add its own chrome. */
body.woocommerce-account .woocommerce {
	margin: 0;
	padding: 0;
}

/* --- 2. Dashboard shell layout ------------------------------------------- */
.exa-account {
	display: grid;
	/* Sidebar bumped 260→300px so "ACCOUNT OVERVIEW" and "PAYMENT METHODS"
	   stay single-line at 1rem/700/uppercase. */
	grid-template-columns: 300px 1fr;
	align-items: stretch;
	min-height: 70vh;
	font-family: var(--exa-acc-font);
	color: var(--exa-acc-ink);
	/* Full width is provided by the body.woocommerce-account .row/.columns
	   breakout above. We deliberately do NOT use a 100vw + negative-margin
	   full-bleed: on desktops with a classic scrollbar, 100vw includes the
	   scrollbar so the element shifts ~8px left, pushing the sidebar's red
	   active/hover border off-screen where #generic-page overflow-x:hidden
	   clips it (the line then only showed on scrollbar-less mobile). */
	width: 100%;
}

.exa-account__sidebar {
	background: var(--exa-acc-sidebar);
	border-right: 1px solid var(--exa-acc-sidebar-line);
	display: flex;
	flex-direction: column;
	/* Allow this grid track to shrink below its content's intrinsic width.
	   Without it the wide nav list forces the (mobile, single-column) grid
	   track open past the viewport, breaking horizontal containment. */
	min-width: 0;
}

/* Sidebar header + main topbar share the SAME box model so their bottom
   dividers land on the exact same baseline (Issue 1). Both: border-box,
   fixed 140px height, top of the grid row, 1px bottom border. */
.exa-account__sidebar-header {
	box-sizing: border-box;
	height: 140px;
	display: flex;
	align-items: center;
	padding: 0 2rem;
	border-bottom: 1px solid var(--exa-acc-sidebar-line);
}

.exa-account__sidebar-title {
	margin: 0 !important;
	padding: 0;
	font-family: var(--exa-acc-font);
	font-size: 2rem !important;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #ffffff !important;
}

/* --- 3. Sidebar navigation ----------------------------------------------- */
.exa-account__nav {
	margin: 1.5rem 0 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.exa-account__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.exa-account__nav li {
	margin: 0;
	padding: 0;
}

.exa-account__nav-link {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 56px;
	padding: 0 2rem;
	color: #ffffff;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	border-left: 4px solid transparent;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.exa-account__nav-link:hover,
.exa-account__nav-link:focus-visible {
	background: rgba(255, 255, 255, 0.06);
	border-left-color: var(--exa-acc-primary);
	color: #ffffff;
}

.exa-account__nav .is-active .exa-account__nav-link,
.exa-account__nav-link[aria-current="page"] {
	background: rgba(255, 255, 255, 0.10);
	border-left-color: var(--exa-acc-primary);
}

.exa-account__nav-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

.exa-account__nav-text {
	line-height: 1.2;
	white-space: nowrap;
}

/* Log out sits visually separated at the foot of the list. */
.exa-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--exa-acc-sidebar-line);
}

.exa-account__nav-link--logout:hover {
	color: var(--exa-acc-primary);
}

/* --- 4. Main canvas ------------------------------------------------------ */
.exa-account__main {
	background: var(--exa-acc-canvas);
	padding: 0 40px 56px;
	min-width: 0;
}

.exa-account__content {
	max-width: none;
}

/* --- 5. Main topbar header band (welcome / endpoint title) --------------- */
/* Mirrors .exa-account__sidebar-header exactly so the two dividers align. */
.exa-account__topbar {
	box-sizing: border-box;
	height: 140px;
	display: flex;
	align-items: center;
	gap: 1rem;
	border-bottom: 1px solid var(--exa-acc-line);
	margin-bottom: 2rem;
}

/* Endpoint title (Orders, Addresses, …) — same typography as Account Overview. */
.exa-account__page-title {
	margin: 0 !important;
	font-size: 2.5rem !important;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var(--exa-acc-ink) !important;
}

.exa-account__welcome-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.05);
	color: rgba(0, 0, 0, 0.55);
	flex: 0 0 auto;
}

.exa-account__welcome-avatar svg {
	width: 38px;
	height: 38px;
}

.exa-account__welcome-title {
	margin: 0 !important;
	/* Pin the font-family so the global "#generic-page h2" rule in style.css
	   (which forces "Montserrat-Bold") can't drift the face out of sync with
	   the sub line below. */
	font-family: "Montserrat", "Montserrat-Bold", Helvetica, Arial, sans-serif !important;
	font-size: 2rem !important;
	/* Weight 700 (not 800): at 800 the native Google-Montserrat face renders
	   visibly heavier than the previous synthesized 800 over the local
	   Montserrat-Bold ~700 base; 700 matches the visual weight of the prior
	   render and prevents the "extra bold" effect. */
	font-weight: 700;
	line-height: 1.05;
	color: var(--exa-acc-ink) !important;
	/* Optical compensation for the "W" left side-bearing at this size. The
	   first attempt at -0.05em was too subtle to read as aligned; -0.15em
	   (≈4.8px @ 2rem) actually clears the W glyph's built-in left whitespace
	   and lands the visible stroke on the same vertical baseline as the
	   "N" of "Not your account?" below. Block-level h2 → text-indent only
	   affects the first line, so it can't bleed into the sub line. */
	text-indent: -0.15em;
}

.exa-account__welcome-sub {
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
	color: var(--exa-acc-muted);
}

.exa-account__logout-link {
	color: var(--exa-acc-primary);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.exa-account__logout-link:hover {
	text-decoration: underline;
	color: var(--exa-acc-primary-dark);
}

/* --- 6. Overview heading ------------------------------------------------- */
.exa-account__overview-head {
	margin-bottom: 1.5rem;
}

.exa-account__overview-title {
	margin: 0 !important;
	font-size: 2.5rem !important;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var(--exa-acc-ink) !important;
}

/* --- 7. Cards ------------------------------------------------------------ */
.exa-account__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
}

.exa-account__card {
	background: linear-gradient(to bottom right, #f3f4f6 0%, #ffffff 100%);
	border: 1px solid var(--exa-acc-line);
	border-radius: var(--exa-acc-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.exa-account__card--orders {
	margin-top: 2rem;
}

.exa-account__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 2rem;
	background: transparent;
	border-bottom: 4px solid #2b2b2b;
}

/* Card titles ("Your Information" / "Payment Details" / "Recent Orders").
   Use the SAME font source + priority as "Account Overview": Google "Montserrat"
   first (enqueued on account pages), with the local Montserrat names only as a
   fallback. This avoids the Firefox-only weight/density drift caused when the
   local "Montserrat-Bold" .ttf is preferred (Issue 1b). */
.exa-account__card-title {
	margin: 0 !important;
	font-family: "Montserrat", "Montserrat-Bold", Helvetica, Arial, sans-serif !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.35;
	color: #2b2b2b !important;
}

.exa-account__card-action {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--exa-acc-primary);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
}

/* Persistent underline on the card link labels (Update Details / Manage / View All). */
.exa-account__card-action span {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.exa-account__chevron {
	width: 1.05rem;
	height: 1.05rem;
	transition: transform 0.18s ease;
}

.exa-account__card-action:hover .exa-account__chevron {
	transform: translateX(3px);
}

.exa-account__card-body {
	flex: 1 1 auto;
	padding: 2rem;
	background: transparent;
}

/* --- 7a. Your Information fields ----------------------------------------- */
.exa-account__field-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	margin-bottom: 1.5rem;
}

.exa-account__field {
	margin-bottom: 1.5rem;
}

.exa-account__field-row .exa-account__field,
.exa-account__field:last-child {
	margin-bottom: 0;
}

.exa-account__field-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--exa-acc-muted);
	margin-bottom: 0.35rem;
}

.exa-account__field-value {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: var(--exa-acc-ink);
	word-break: break-word;
}

.exa-account__field-add {
	font-size: 1rem;
	font-weight: 700;
	color: var(--exa-acc-primary);
	text-decoration: none;
}

.exa-account__field-add:hover {
	text-decoration: underline;
}

/* --- 7b. Payment tokens + empty states ----------------------------------- */
.exa-account__token-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.exa-account__token {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	background: #ffffff;
	border: 1px solid var(--exa-acc-line);
	border-radius: 0.5rem;
}

.exa-account__token-icon svg {
	width: 26px;
	height: 26px;
	color: var(--exa-acc-ink);
}

.exa-account__token-label {
	font-weight: 600;
	color: var(--exa-acc-ink);
}

.exa-account__token-default {
	margin-left: auto;
	font-size: 0.625rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #ffffff;
	background: var(--exa-acc-primary);
	padding: 0.2rem 0.5rem;
	border-radius: 0.25rem;
}

.exa-account__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 240px;
	gap: 1rem;
}

.exa-account__empty-icon svg {
	width: 44px;
	height: 44px;
	color: rgba(0, 0, 0, 0.25);
}

.exa-account__empty-text {
	margin: 0;
	color: var(--exa-acc-muted);
	font-size: 1rem;
}

.exa-account__empty-cta {
	color: var(--exa-acc-primary);
	font-weight: 700;
	text-decoration: none;
}

.exa-account__empty-cta:hover {
	text-decoration: underline;
}

/* --- 7c. Recent orders table --------------------------------------------- */
.exa-account__table-wrap {
	flex: 1 1 auto;
	overflow-x: auto;
	background: transparent;
}

.exa-account__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.exa-account__table thead tr {
	background: #2b2b2b;
}

.exa-account__table th {
	padding: 1rem 2rem;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #f3f4f6;
	text-align: left;
}

.exa-account__table td {
	padding: 1.25rem 2rem;
	font-size: 0.875rem;
	border-top: 1px solid var(--exa-acc-line);
	vertical-align: middle;
}

.exa-account__table-right {
	text-align: right;
}

.exa-account__order-id {
	font-weight: 700;
	color: var(--exa-acc-ink);
}

.exa-account__order-date {
	color: #555;
}

.exa-account__table tbody tr:hover {
	background: rgba(0, 0, 0, 0.02);
}

.exa-account__status {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.7rem;
	border-radius: 0.25rem;
	font-size: 0.625rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--exa-acc-primary);
	color: #ffffff;
}

.exa-account__status--completed {
	background: #1f9d55;
}

.exa-account__status--cancelled,
.exa-account__status--failed,
.exa-account__status--refunded {
	background: #6b7280;
}

.exa-account__status--on-hold,
.exa-account__status--pending {
	background: #d97706;
}

.exa-account__order-view {
	display: inline-flex;
	color: var(--exa-acc-primary);
}

.exa-account__order-view .exa-account__chevron {
	width: 1.25rem;
	height: 1.25rem;
	stroke-width: 2.4;
}

.exa-account__order-view:hover .exa-account__chevron {
	transform: translateX(3px);
}

/* ============================================================================
   7d. Top-nav dropdown over the account header (Issue 2)
   RCA: the global main-menu dropdown uses a translucent glass background
   (rgba(10,10,12,0.75) + backdrop-filter). It already stacks above the page
   (its .top-bar ancestor is z-index:2000), but over the bright-white welcome
   banner the bold dark text bleeds straight through the see-through panel.
   Fix: make the dropdown effectively opaque on the account page only, so the
   menu always reads as solid on top — without altering the glass aesthetic
   used elsewhere on the site.
   ============================================================================ */
body.woocommerce-account .top-bar-section .dropdown {
	background: rgba(11, 13, 18, 0.98) !important;
}

/* ============================================================================
   8. Native endpoint pages (orders list, addresses, account details, etc.)
   These render inside .exa-account__content. We restyle the native markup
   without touching its structure or form logic.
   ============================================================================ */
/* Native page headings (e.g. on edit-address / orders) */
.exa-account__content > h1,
.exa-account__content > h2,
.exa-account__content > h3 {
	margin: 0 0 1.25rem !important;
	font-size: 1.5rem !important;
	font-weight: 800;
	color: var(--exa-acc-ink) !important;
}

/* WooCommerce notices */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
	border-radius: 0.5rem;
	border-top: 3px solid var(--exa-acc-primary);
	background: var(--exa-acc-card);
	color: var(--exa-acc-ink);
	font-family: var(--exa-acc-font);
}

/* Native account tables */
body.woocommerce-account .shop_table:not(.woocommerce-table--order-details):not(.woocommerce-orders-table) {
	border-collapse: collapse;
	width: 100%;
	/* Subtle dark-grey outline stroke around the outer order box. */
	border: 1px solid #555555;
	border-radius: var(--exa-acc-radius);
	overflow: hidden;
}

/* Orders endpoint should use a light frame, not the darker generic account-table
   outline used elsewhere. This keeps the desktop orders canvas visually aligned
   with the white-shell account layout. */
body.woocommerce-account .woocommerce-orders-table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	border: none;
	border-radius: 0.75rem;
	overflow: hidden;
	background: #ffffff;
	box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.16);
	outline: none;
}

/* Scope the grey-band fill to <thead> only. WooCommerce renders the order
   number cell as <th scope="row">, so an unscoped `th` rule would also paint
   the order-number column body grey — the "custom fill on order sequence
   values" the directive asks us to revert (Issue 2E). */
body.woocommerce-account .woocommerce-orders-table thead th,
body.woocommerce-account .shop_table thead th {
	background: var(--exa-acc-card-head);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #555555;
	padding: 1rem 1.25rem;
	text-align: left;
}

body.woocommerce-account .woocommerce-orders-table thead th {
	background: #2b2b2b;
	color: #f3f4f6;
}

body.woocommerce-account .woocommerce-orders-table tbody th,
body.woocommerce-account .shop_table tbody th {
	background: transparent;
	font-weight: 700;
	color: var(--exa-acc-ink);
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--exa-acc-line);
	text-align: left;
}

body.woocommerce-account .woocommerce-orders-table td,
body.woocommerce-account .shop_table td {
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--exa-acc-line);
	font-size: 0.875rem;
}

/* Addresses grid */
body.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	margin: 0;
}

body.woocommerce-account .woocommerce-Address {
	background: linear-gradient(to bottom right, #f3f4f6 0%, #ffffff 100%);
	border: 1px solid var(--exa-acc-line);
	border-radius: var(--exa-acc-radius);
	padding: 1.75rem;
}

body.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
	color: var(--exa-acc-ink);
}

/* Forms (edit-address / edit-account) — styling only, fields untouched */
body.woocommerce-account .woocommerce-EditAccountForm label,
body.woocommerce-account .woocommerce-address-fields label,
body.woocommerce-account form .form-row label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--exa-acc-muted);
	margin-bottom: 0.4rem;
}

body.woocommerce-account form .input-text,
body.woocommerce-account form input[type="text"],
body.woocommerce-account form input[type="email"],
body.woocommerce-account form input[type="tel"],
body.woocommerce-account form input[type="password"],
body.woocommerce-account form select,
body.woocommerce-account form textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid #cfcfcf;
	border-radius: 0.5rem;
	background: #ffffff;
	color: var(--exa-acc-ink);
	font-family: var(--exa-acc-font);
	font-size: 1rem;
}

body.woocommerce-account form .input-text:focus,
body.woocommerce-account form select:focus,
body.woocommerce-account form textarea:focus {
	outline: none;
	border-color: var(--exa-acc-primary);
	box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12);
}

/* Buttons */
body.woocommerce-account .woocommerce-Button,
body.woocommerce-account .button,
body.woocommerce-account button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--exa-acc-primary);
	color: #ffffff;
	border: none;
	border-radius: 0.5rem;
	padding: 0.8rem 1.6rem;
	font-family: var(--exa-acc-font);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

body.woocommerce-account .woocommerce-Button:hover,
body.woocommerce-account .button:hover,
body.woocommerce-account button[type="submit"]:hover {
	background: var(--exa-acc-primary-dark);
	color: #ffffff;
}

/* ============================================================================
   9. Responsive — mobile / tablet parity
   ============================================================================ */
@media (max-width: 960px) {
	.exa-account__grid {
		grid-template-columns: 1fr;
	}

	body.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.exa-account {
		grid-template-columns: 1fr;
		border-top: none;
		min-height: 0;
	}

	.exa-account__sidebar {
		border-right: none;
		border-bottom: none;
	}

	.exa-account__sidebar-header {
		height: auto;
		padding: 1.25rem 1.25rem 0.75rem;
		border-bottom: none;
	}

	.exa-account__sidebar-title {
		font-size: 1.5rem !important;
	}

	/* Nav becomes a horizontal, swipeable strip of chips. */
	.exa-account__nav {
		margin-top: 0.25rem;
		padding-bottom: 0;
		flex: 0 0 auto;
	}

	.exa-account__nav ul {
		display: flex;
		overflow-x: auto;
		gap: 0.5rem;
		margin: 0;
		padding: 0 1.25rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 50%;
	}

	.exa-account__nav ul::-webkit-scrollbar {
		display: none;
	}

	.exa-account__nav li {
		flex: 0 0 auto;
	}

	.exa-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
	}

	.exa-account__nav-link {
		min-height: 0;
		padding: 0.6rem 1rem;
		background: #555555;
		color: #ffffff;
		border-left: none;
		border-bottom: 3px solid transparent;
		border-radius: 0.5rem 0.5rem 0 0;
		font-size: 0.875rem;
		white-space: nowrap;
	}

	.exa-account__nav li {
		scroll-snap-align: center;
	}

	.exa-account__nav-link:hover,
	.exa-account__nav-link:focus-visible,
	.exa-account__nav .is-active .exa-account__nav-link,
	.exa-account__nav-link[aria-current="page"] {
		background: #555555;
		color: #ffffff;
		border-left: none;
		border-bottom-color: var(--exa-acc-primary);
	}

	body.woocommerce-account .exa-account__table-scroll {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	body.woocommerce-account .exa-account__table-scroll > table {
		min-width: 640px;
	}

	.exa-account__nav-icon {
		width: 18px;
		height: 18px;
	}

	.exa-account__main {
		padding: 0 1.25rem 2.5rem;
	}

	/* On mobile the sidebar stacks above the canvas, so the fixed 140px header
	   band is no longer needed for cross-column alignment — let it shrink. */
	.exa-account__topbar {
		height: auto;
		min-height: 0;
		padding: 1.5rem 0;
		gap: 0.85rem;
	}

	.exa-account__welcome-avatar {
		width: 56px;
		height: 56px;
	}

	.exa-account__welcome-avatar svg {
		width: 28px;
		height: 28px;
	}

	.exa-account__welcome-title {
		font-size: 1.5rem !important;
	}

	.exa-account__page-title {
		font-size: 1.875rem !important;
	}

	.exa-account__overview-title {
		font-size: 1.875rem !important;
	}

	.exa-account__card-head,
	.exa-account__card-body {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.exa-account__field-row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.exa-account__field-row .exa-account__field {
		margin-bottom: 1.5rem;
	}

	.exa-account__table th,
	.exa-account__table td {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

/* ============================================================================
   V86 — Endpoint refinements (Account Details / Addresses / View Order /
   Downloads / Payment Methods). Pure presentational layer; no template logic
   is bypassed. Anchored on body.woocommerce-account so theme-wide styles are
   never broadened.
   ============================================================================ */

/* --- 10. Account Details form ---------------------------------------------
   Cap text/email/password inputs to ~65% of the canvas content track. The
   directive's 60–70% range is honoured on viewports ≥768px; on small screens
   the cap relaxes to 100% so labels and inputs never clip.
   -------------------------------------------------------------------------- */
body.woocommerce-account .exa-account__edit-account .form-row .input-text,
body.woocommerce-account .exa-account__edit-account .form-row input[type="text"],
body.woocommerce-account .exa-account__edit-account .form-row input[type="email"],
body.woocommerce-account .exa-account__edit-account .form-row input[type="tel"],
body.woocommerce-account .exa-account__edit-account .form-row input[type="password"] {
	width: 100%;
	max-width: 50%;
}

/* Password-change fieldset: cap the same way so the box outline ends with the
   inputs instead of sprawling to the canvas edge. */
body.woocommerce-account .exa-account__edit-account fieldset {
	max-width: 50%;
	box-sizing: border-box;
}

/* Display-name description: grey + slightly tighter; remains italic via the
   native <em> wrapper. */
body.woocommerce-account .exa-account__hint-muted {
	display: block;
	margin-top: 0.4rem;
	color: var(--exa-acc-muted);
	font-size: 0.8125rem;
	font-style: normal; /* The native <em> inside provides italics. */
}

/* Password parenthetical: normal weight, lighter colour. Labels in the
   account skin are bold/uppercase (see rule above on form .form-row label);
   this strips that emphasis from the hint portion only. */
body.woocommerce-account .exa-account__hint-soft {
	font-weight: normal;
	text-transform: none;
	letter-spacing: 0;
	color: var(--exa-acc-muted);
}

@media (max-width: 768px) {
	body.woocommerce-account .exa-account__edit-account .form-row .input-text,
	body.woocommerce-account .exa-account__edit-account .form-row input[type="text"],
	body.woocommerce-account .exa-account__edit-account .form-row input[type="email"],
	body.woocommerce-account .exa-account__edit-account .form-row input[type="tel"],
	body.woocommerce-account .exa-account__edit-account .form-row input[type="password"],
	body.woocommerce-account .exa-account__edit-account fieldset {
		max-width: 100%;
	}
}

/* --- 11. Addresses page (my-address) ---------------------------------------
   Native my-address.php gates the shipping card on store-wide settings; we
   do NOT override that behaviour. The colour fixes below apply whether the
   card renders or not.
   -------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address .title h2 {
	color: #000000 !important;
	font-weight: 800;
}

/* --- 12. View Order (woocommerce/order/order-details + customer details) --
   Headers (Product, Total, Subtotal, Shipping, Payment method, Total) get
   a size bump; their dynamic values lose bold so the headers read as the
   primary visual weight, per the directive.
   -------------------------------------------------------------------------- */
/* Light-grey outline on the items table itself.
   border-collapse:separate is required so the rounded corners + outer border
   don't get clipped by cell-level borders. */
body.woocommerce-account .woocommerce-table--order-details {
	width: 100%;
	border: 1px solid #cccccc;
	border-radius: 0.5rem;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

/* With border-collapse:separate, cell borders no longer share edges — re-add
   row separators using a top border on every cell except the first row. */
body.woocommerce-account .woocommerce-table--order-details tbody tr + tr td,
body.woocommerce-account .woocommerce-table--order-details tbody tr + tr th,
body.woocommerce-account .woocommerce-table--order-details tfoot tr td,
body.woocommerce-account .woocommerce-table--order-details tfoot tr th {
	border-top: 1px solid var(--exa-acc-line);
}

body.woocommerce-account .woocommerce-table--order-details thead th,
body.woocommerce-account .woocommerce-table--order-details tfoot th {
	font-size: 1rem;
	font-weight: 700;
	color: var(--exa-acc-ink);
}

/* Tfoot label cells ("Subtotal:", "Shipping:", "Payment method:", "Total:")
   right-align flush against their value cell on the right. */
body.woocommerce-account .woocommerce-table--order-details tfoot th {
	text-align: right;
}

/* Bold the dynamic value outputs: product name link, quantity strong, the
   payment-method / shipping / subtotal / total amount cells. */
body.woocommerce-account .woocommerce-table--order-details td,
body.woocommerce-account .woocommerce-table--order-details tfoot td,
body.woocommerce-account .woocommerce-table--order-details .product-name,
body.woocommerce-account .woocommerce-table--order-details .product-name a,
body.woocommerce-account .woocommerce-table--order-details .product-quantity,
body.woocommerce-account .woocommerce-table--order-details .product-total,
body.woocommerce-account .woocommerce-table--order-details .product-total .amount,
body.woocommerce-account .woocommerce-table--order-details td .amount,
body.woocommerce-account .woocommerce-table--order-details tfoot td .amount,
body.woocommerce-account .woocommerce-table--order-details .woocommerce-table__product-name,
body.woocommerce-account .woocommerce-table--order-details .woocommerce-table__product-total {
	font-weight: 700;
}

/* Address h2s on the order details panel — match the addresses page rule. */
body.woocommerce-account .woocommerce-customer-details .woocommerce-column__title {
	font-size: 1.25rem;
	font-weight: 800;
	color: #000000;
	margin-bottom: 0.75rem;
}

/* --- 13. Downloads & Payment Methods endpoint empty states ----------------
   The native templates render the empty state as a WooCommerce notice
   (`.woocommerce-message`/`.woocommerce-info`) with an inline "Browse
   products" / equivalent button. The overrides emit a clean block instead;
   these rules style that block and inject the spacing row the directive
   requested between text and CTA.
   -------------------------------------------------------------------------- */
body.woocommerce-account .exa-account__endpoint-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.75rem;
	padding: 2rem 0;
	border: none;
	background: transparent;
}

body.woocommerce-account .exa-account__endpoint-empty .exa-account__endpoint-empty-text {
	margin: 0;
	font-size: 1rem;
	color: var(--exa-acc-muted);
}

body.woocommerce-account .exa-account__endpoint-empty .exa-account__endpoint-empty-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--exa-acc-primary);
	color: #ffffff;
	border-radius: 0.5rem;
	padding: 0.8rem 1.6rem;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: background-color 0.18s ease;
}

body.woocommerce-account .exa-account__endpoint-empty .exa-account__endpoint-empty-cta:hover {
	background: var(--exa-acc-primary-dark);
	color: #ffffff;
}