/**
 * Yodha Fuel — My Account page styles (Stage 1: native WordPress/WooCommerce
 * account system — no Google/social login; that is Stage 2).
 *
 * IMPORTANT ARCHITECTURE NOTE: unlike Cart and Checkout, this store's My
 * Account page is the CLASSIC WooCommerce shortcode page
 * ([woocommerce_my_account]), not a WooCommerce Block — confirmed live by
 * inspecting the page's actual rendered markup before writing any of this
 * (plain `.woocommerce-form-login` / `.woocommerce-MyAccount-*` classes, no
 * `data-block-name` wrapper). That means every selector in this file
 * targets WooCommerce's classic, long-stable core template class names —
 * some of the oldest, least-changed markup WooCommerce ships — rather than
 * the newer Blocks component classes cart.css/checkout.css restyle.
 *
 * Two parts of this page could not be verified against this store's own
 * live DOM before shipping, and are styled directly against WooCommerce's
 * documented core templates instead:
 *   1) The logged-in account screens (Dashboard, Orders, View Order,
 *      Addresses, Account details) — these only render for a logged-in
 *      customer, and no test customer account existed to inspect live.
 *   2) The two-column Login/Register layout — registration on the My
 *      Account page is currently off in this store's WooCommerce settings
 *      (see the delivery notes), so only the bare Login form currently
 *      renders; the Register column's exact markup is WooCommerce's own
 *      `templates/myaccount/form-login.php`, unchanged in structure for
 *      years, but not something this file could screenshot first.
 * Both are extremely stable, widely-documented WooCommerce core markup
 * (unlike the Blocks components on Cart/Checkout, which is where this
 * project's wrong-class-name bugs have actually happened) — but if anything
 * here doesn't match once tested live, treat it the same way every Cart/
 * Checkout bug so far has been handled: a live DOM inspection and a
 * follow-up fix, not a guess.
 *
 * Loaded only on is_account_page() — see inc/enqueue.php. No account.js:
 * every interaction on this page (login, registration, lost password,
 * address/account editing, order history) is a plain native form
 * submission already handled server-side by WordPress/WooCommerce.
 *
 * Mobile-first: base rules are the 375px default; the one shared breakpoint
 * this file uses for every two-column layout below is 1024px, matching the
 * Cart and Checkout pages' own desktop switch-over, for visual continuity
 * across the three pages of the purchase/account flow.
 */

/* ============================================================
   PAGE HEADER / CONTENT WIDTH — identical fix, identical reasoning, to
   cart.css and checkout.css's own copies of this: layout.css's
   .yf-page__content has a 72ch max-width meant for narrow article reading,
   which would squeeze this page's two-column layouts into a single narrow
   column. Scoped to this page only via WooCommerce's own `woocommerce-
   account` body class (present on every My Account endpoint, not just the
   base page — confirmed via WooCommerce's own is_account_page() check,
   which this body class tracks).
   ============================================================ */
body.woocommerce-account .yf-page__content {
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--container-padding-mobile);
	padding-right: var(--container-padding-mobile);
}

@media (min-width: 480px) {
	body.woocommerce-account .yf-page__content {
		padding-left: var(--container-padding-small);
		padding-right: var(--container-padding-small);
	}
}

@media (min-width: 768px) {
	body.woocommerce-account .yf-page__content {
		padding-left: var(--container-padding-tablet);
		padding-right: var(--container-padding-tablet);
	}
}

@media (min-width: 1024px) {
	body.woocommerce-account .yf-page__content {
		padding-left: var(--container-padding-desktop);
		padding-right: var(--container-padding-desktop);
	}
}

/* Hero-style title band — identical treatment to Cart/Checkout's, for
   visual continuity across all three pages of the purchase/account flow. */
body.woocommerce-account .yf-page__header {
	position: relative;
	margin: 0 0 var(--space-md);
	padding: var(--space-3xl) var(--space-lg);
	background-color: var(--color-bg-alt);
	background-image: linear-gradient(135deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%);
	border-radius: var(--radius-lg);
	text-align: center;
	overflow: hidden;
}

body.woocommerce-account .yf-page__title {
	margin: 0;
	color: var(--color-heading);
}

/* Breadcrumb — added by inc/account.php via the_content, identical pattern
   to .yf-cart-breadcrumb / .yf-checkout-breadcrumb (class renamed only so
   each page's breadcrumb stays independently stylable; values identical). */
.yf-account-breadcrumb {
	display: block;
	margin: 0 0 var(--space-lg);
	padding: 0 var(--space-lg);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

.yf-account-breadcrumb a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.yf-account-breadcrumb a:hover,
.yf-account-breadcrumb a:focus-visible {
	color: var(--yodha-orange);
}

.yf-account-breadcrumb__sep {
	margin: 0 var(--space-2xs);
	color: var(--color-border);
}

.yf-account-breadcrumb__current {
	color: var(--color-text);
	font-weight: var(--fw-medium);
}

/* ============================================================
   NOTICES — WooCommerce's classic notice markup (plain <ul class=
   "woocommerce-error">/<div class="woocommerce-message">/<div class=
   "woocommerce-info">), used for every native validation/success message on
   this page: invalid login, invalid registration, address saved, details
   saved, password mismatch, etc. Restyled with this theme's existing
   success/danger palette (same colours checkout.css already uses for its
   own notices) rather than WooCommerce's bundled default styling — content
   and visibility are untouched, per the accessibility requirement that
   these messages must never be hidden.
   ============================================================ */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin: 0 0 var(--space-lg);
	padding: var(--space-sm) var(--space-md);
	list-style: none;
	border-radius: var(--radius-md);
	font-size: var(--fs-small);
}

.woocommerce-error {
	background-color: #FBEAEA;
	color: var(--color-danger);
}

.woocommerce-message {
	background-color: #E8F5EA;
	color: var(--color-success);
}

.woocommerce-info {
	background-color: var(--color-bg-alt);
	color: var(--color-text);
}

.woocommerce-error li {
	margin: 0;
}

.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
	font-weight: var(--fw-semibold);
	text-decoration: underline;
}

/* The native "Log in" link WooCommerce adds inside its own messages (e.g.
   "An account is already registered with that email. Please log in.") —
   restyled as a small inline button so it reads as actionable, not as a
   second unrelated link buried in a sentence. */
.woocommerce-message a.button,
.woocommerce-info a.button {
	display: inline-flex;
	align-items: center;
	height: var(--btn-height-sm);
	padding: 0 var(--btn-padding-x-sm);
	background-color: var(--yodha-orange);
	border-radius: var(--btn-radius);
	color: var(--white);
	font-weight: var(--fw-button);
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce-message a.button:hover,
.woocommerce-message a.button:focus-visible,
.woocommerce-info a.button:hover,
.woocommerce-info a.button:focus-visible {
	background-color: var(--yodha-orange-dark);
	color: var(--white);
}

/* ============================================================
   SHARED CARD — every distinct block on this page (the login card, the
   register card, the account-nav card, the account-content card, each
   address card) uses this same white/bordered/shadowed card, matching the
   step-card and sidebar treatment already established on Checkout, so My
   Account reads as a continuation of the same visual system rather than a
   fourth card style of its own.
   ============================================================ */
.yf-account-card {
	background-color: var(--color-bg);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 10px 28px rgba(245, 83, 1, 0.16), 0 2px 8px rgba(39, 47, 50, 0.06);
	padding: var(--space-lg);
}

/* ============================================================
   LOGGED-OUT: LOGIN / REGISTER
   WooCommerce's own templates/myaccount/form-login.php already renders
   exactly the two-column structure this brief asks for whenever
   registration is enabled — a `.u-columns#customer_login` wrapper holding
   `.u-column1.col-1` (Login) and `.u-column2.col-2` (Register) as the two
   columns, in that left-to-right order already — so no template override
   was needed to get Login-left/Register-right. When registration is off
   (this store's current setting — see the delivery notes), WooCommerce
   renders only the bare `.woocommerce-form-login`, with no `.u-columns`
   wrapper at all, which the standalone rule below handles: a single
   centred card rather than an empty half-width gap.
   ============================================================ */

/* Registration OFF (current state): bare login form, no .u-columns
   wrapper — centred single card rather than stretched full width. */
.woocommerce > form.woocommerce-form-login {
	max-width: 480px;
	margin: 0 auto;
}

.woocommerce-form-login,
.woocommerce-form-register {
	background-color: var(--color-bg);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 10px 28px rgba(245, 83, 1, 0.16), 0 2px 8px rgba(39, 47, 50, 0.06);
	padding: var(--space-lg);
	margin: 0;
}

/* Registration ON: WooCommerce's native two-column wrapper. u-columns is a
   WooCommerce/Storefront layout utility class with its own float-based
   rules from the parent theme; overridden here with flex so column height/
   gap behave predictably regardless of which theme styles u-columns
   elsewhere. */
.u-columns#customer_login {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	width: 100%;
}

.u-columns#customer_login .u-column1,
.u-columns#customer_login .u-column2 {
	width: 100%;
	float: none; /* cancels Storefront's own float: left on .u-column1/.u-column2 */
}

.u-columns#customer_login .woocommerce-form-login,
.u-columns#customer_login .woocommerce-form-register {
	height: 100%;
}

@media (min-width: 1024px) {
	.u-columns#customer_login {
		flex-direction: row;
		align-items: stretch;
	}

	.u-columns#customer_login .u-column1,
	.u-columns#customer_login .u-column2 {
		width: 50%;
	}
}

.u-columns#customer_login h2 {
	font-size: var(--fs-h3);
	margin: 0 0 var(--space-md);
}

/* ============================================================
   FORM FIELDS — shared by login, register, address editing, and account
   details: every one of these screens uses the exact same WooCommerce
   `.woocommerce-form-row` / `.woocommerce-Input` markup, so one set of
   rules styles every form on this page consistently (the same approach
   checkout.css takes for its own text inputs/selects).
   ============================================================ */
.woocommerce-form-row {
	margin: 0 0 var(--space-md);
}

.woocommerce-form-row label {
	display: block;
	margin-bottom: var(--space-2xs);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

.woocommerce-form-row .required {
	color: var(--color-danger);
	text-decoration: none;
	border: none;
}

.woocommerce-Input,
.woocommerce-form-row input[type="text"],
.woocommerce-form-row input[type="email"],
.woocommerce-form-row input[type="password"],
.woocommerce-form-row input[type="tel"],
.woocommerce-form-row select,
.woocommerce-form-row textarea {
	width: 100%;
	height: var(--btn-height-md);
	padding: 0 var(--space-sm);
	background-color: var(--color-bg);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body);
	font-family: var(--font-body);
	color: var(--color-text);
	transition: border-color var(--transition-fast);
}

.woocommerce-form-row textarea {
	height: auto;
	min-height: 96px;
	padding-top: var(--space-xs);
	padding-bottom: var(--space-xs);
	resize: vertical;
}

.woocommerce-Input:focus,
.woocommerce-form-row input:focus,
.woocommerce-form-row select:focus,
.woocommerce-form-row textarea:focus {
	border-color: var(--yodha-orange);
	outline: none;
}

/* Native show/hide-password toggle button WooCommerce/WordPress injects
   into password fields — repositioned to sit inside the field at its right
   edge instead of overlapping/trailing the input awkwardly at this input
   height. */
.woocommerce-form-row .show-password-input {
	position: absolute;
	top: 50%;
	right: var(--space-sm);
	transform: translateY(-50%);
	background: transparent;
	border: none;
	padding: 0;
	color: var(--color-text-muted);
	cursor: pointer;
}

.woocommerce-form-row:has(.show-password-input) {
	position: relative;
}

.woocommerce-form-row .show-password-input:hover,
.woocommerce-form-row .show-password-input:focus-visible {
	color: var(--yodha-orange);
}

/* "Remember me" (login) and any other checkbox row on this page — same
   recipe as the Checkout block's own native checkbox, kept visually
   identical across both pages even though this is WooCommerce's plain
   classic <input type="checkbox">, not the Checkout block's custom
   control. */
.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--fs-small);
	color: var(--color-text);
	cursor: pointer;
}

.woocommerce-form__input-checkbox {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--yodha-orange);
}

/* Lost password link (login form) and "Register" / "Login" cross-links. */
.woocommerce-LostPassword {
	margin-top: var(--space-sm);
	font-size: var(--fs-small);
}

.woocommerce-LostPassword a {
	color: var(--yodha-orange);
	font-weight: var(--fw-semibold);
}

.woocommerce-LostPassword a:hover,
.woocommerce-LostPassword a:focus-visible {
	color: var(--yodha-orange-dark);
}

/* Short help copy WooCommerce prints above the Register form (and above
   the lost-password form) — muted, same meta-text treatment used
   elsewhere in this theme. */
.woocommerce-form-register > p:first-child,
.woocommerce-ResetPassword > p:first-child,
.woocommerce-form-row + p.woocommerce-form-row {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

/* ============================================================
   BUTTONS — every primary action on this page (Log in, Register, Save
   address, Save account details, Reset password, Place a new order link,
   View/Pay/Cancel order actions) renders through WooCommerce's generic
   `.woocommerce-button.button` class — restyled once here, consistent with
   the "one generic class, one rule" approach already used for the Checkout
   block's coupon-apply button in checkout.css.
   ============================================================ */
.woocommerce-button.button,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-Button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--btn-height-md);
	padding: 0 var(--btn-padding-x-lg);
	background-color: var(--yodha-orange);
	border: var(--btn-border-width) solid var(--yodha-orange);
	border-radius: var(--btn-radius);
	color: var(--white);
	font-weight: var(--fw-button);
	font-size: var(--fs-button);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.woocommerce-button.button:hover,
.woocommerce-button.button:focus-visible,
.woocommerce-Button.button:hover,
.woocommerce-Button.button:focus-visible {
	background-color: var(--yodha-orange-dark);
	border-color: var(--yodha-orange-dark);
	color: var(--white);
}

.woocommerce-button.button:focus-visible,
.woocommerce-Button.button:focus-visible {
	outline: 3px solid var(--warrior-dark);
	outline-offset: 3px;
}

/* Secondary/lower-emphasis order actions (e.g. "Cancel") get the outline
   treatment instead of a second solid-orange button competing with "Pay"/
   "View" for attention — WooCommerce marks this with its own `.cancel`
   modifier class, native and already present without any code change. */
.woocommerce-button.button.cancel {
	background-color: transparent;
	border-color: var(--color-border);
	color: var(--color-text);
}

.woocommerce-button.button.cancel:hover,
.woocommerce-button.button.cancel:focus-visible {
	background-color: transparent;
	border-color: var(--warrior-dark);
	color: var(--warrior-dark);
}

/* ============================================================
   ACCOUNT NAVIGATION + CONTENT — two-column layout once logged in.
   `.yf-page__content > .woocommerce` is deliberately specific (rather than
   a bare `.woocommerce` selector) because `.woocommerce` alone is also the
   class on this theme's header mini-cart widget
   (`.widget.woocommerce.widget_shopping_cart`, confirmed live) — a bare
   selector would reach into the header on every page and break the cart
   dropdown. The My Account shortcode's own wrapper is confirmed live to be
   a direct child of .yf-page__content (…ARTICLE.yf-page >
   DIV.yf-page__content > DIV.woocommerce), so this selector reaches only
   that element.
   ============================================================ */
body.woocommerce-account .yf-page__content > .woocommerce {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

@media (min-width: 1024px) {
	body.woocommerce-account .yf-page__content > .woocommerce {
		flex-direction: row;
		align-items: flex-start;
	}
}

.woocommerce-MyAccount-navigation {
	flex: 0 0 auto;
	width: 100%;
}

@media (min-width: 1024px) {
	.woocommerce-MyAccount-navigation {
		flex: 0 0 280px;
		position: sticky;
		top: var(--space-lg);
	}
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	margin: 0;
	padding: var(--space-sm);
	list-style: none;
	background-color: var(--color-bg);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 10px 28px rgba(245, 83, 1, 0.16), 0 2px 8px rgba(39, 47, 50, 0.06);
}

/* BUG FIXED HERE: WooCommerce's own My Account nav markup (WC 8.2+) renders
   each link as an inline icon <svg> immediately followed by the label text,
   e.g. <a><svg>…</svg> Dashboard</a> — on a normal inline/block element the
   whitespace between them renders as a real space, which is what was
   providing the gap before this rule existed. Turning the <a> into a flex
   container (needed to vertically center the icon against the text) makes
   the icon and the text two flex items, and a flex container does not
   preserve that whitespace text node as visible space the way inline
   layout does — collapsing the icon and label together with no gap at all,
   which is what the screenshot showed. Fixed with an explicit `gap`
   instead of relying on that whitespace. */
.woocommerce-MyAccount-navigation-link a {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-height: 44px; /* accessible tap target, matches the mobile nav menu elsewhere in this theme */
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-body);
}

.woocommerce-MyAccount-navigation-link a svg,
.woocommerce-MyAccount-navigation-link a img {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-MyAccount-navigation-link a:focus-visible {
	background-color: var(--color-bg-alt);
	color: var(--warrior-dark);
}

.woocommerce-MyAccount-navigation-link.is-active a {
	background-color: var(--yodha-orange);
	color: var(--white);
}

.woocommerce-MyAccount-navigation-link.is-active a:hover,
.woocommerce-MyAccount-navigation-link.is-active a:focus-visible {
	background-color: var(--yodha-orange-dark);
	color: var(--white);
}

/* Logout sits visually apart from the rest of the tabs — a hairline
   divider above it rather than a different colour, so it still reads as
   part of the same nav (and stays just as reachable by keyboard/screen
   reader) rather than looking like a warning action. */
.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--space-xs);
	padding-top: var(--space-sm);
	border-top: var(--border-width) solid var(--color-border);
}

.woocommerce-MyAccount-content {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	background-color: var(--color-bg);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 10px 28px rgba(245, 83, 1, 0.16), 0 2px 8px rgba(39, 47, 50, 0.06);
	padding: var(--space-lg);
}

.woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	color: var(--color-heading);
}

.woocommerce-MyAccount-content a {
	color: var(--yodha-orange);
	font-weight: var(--fw-semibold);
}

.woocommerce-MyAccount-content a:hover,
.woocommerce-MyAccount-content a:focus-visible {
	color: var(--yodha-orange-dark);
}

/* ============================================================
   DASHBOARD — plain paragraphs WooCommerce renders directly into
   .woocommerce-MyAccount-content (the "Hello X (not X? Log out)" greeting
   and the "From your account dashboard you can view…" intro text). No
   dedicated class exists for either — typography inherits from the
   .woocommerce-MyAccount-content rules above; nothing extra required.
   ============================================================ */

/* ============================================================
   ORDERS — the "My orders" table. Responsive technique: WooCommerce's own
   orders-table template writes a `data-title` attribute onto every <td>
   (one per column heading) specifically so themes can turn each row into a
   stacked, labelled card below a chosen breakpoint purely with CSS, no JS
   and no horizontal scrolling — this uses that built-in mechanism rather
   than inventing a separate responsive table pattern.
   ============================================================ */
.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-orders-table thead {
	display: table-header-group;
}

.woocommerce-orders-table th {
	padding: var(--space-sm);
	text-align: left;
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	color: var(--color-text-muted);
	border-bottom: var(--border-width-thick) solid var(--color-border);
}

.woocommerce-orders-table__row {
	border-bottom: var(--border-width) solid var(--color-border);
}

.woocommerce-orders-table__cell {
	padding: var(--space-sm);
	font-size: var(--fs-small);
	color: var(--color-text);
}

.woocommerce-orders-table__cell-order-number {
	font-weight: var(--fw-bold);
	color: var(--color-heading);
}

.woocommerce-orders-table__cell-order-status {
	white-space: nowrap;
}

/* Order status — a plain <mark> in WooCommerce's own markup. Neutral pill
   by default, colour-coded for the two states a customer cares most about
   (completed vs. cancelled/failed/refunded) via WooCommerce's own status
   slug classes (`.status-completed`, `.status-cancelled`, etc. — native,
   not something this theme adds). */
.woocommerce-orders-table__cell-order-status mark {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2xs) var(--space-sm);
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-full);
	color: var(--color-text);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
}

mark.order-status.status-completed {
	background-color: #E8F5EA;
	color: var(--color-success);
}

mark.order-status.status-cancelled,
mark.order-status.status-failed,
mark.order-status.status-refunded {
	background-color: #FBEAEA;
	color: var(--color-danger);
}

.woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	justify-content: flex-end;
}

.woocommerce-orders-table__cell-order-actions .button {
	height: var(--btn-height-sm);
	padding: 0 var(--btn-padding-x-sm);
	font-size: var(--fs-small);
}

/* No-orders-yet empty state — plain <a> link to the shop inside a <p>,
   same muted/centred treatment as the empty-cart message on Cart. */
.woocommerce-MyAccount-content > p a.button {
	display: inline-flex;
}

/* Below 768px: each row becomes its own labelled card instead of a
   horizontally-scrolling table, using the data-title attribute WooCommerce
   already writes onto every cell. */
@media (max-width: 767px) {
	.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce-orders-table,
	.woocommerce-orders-table tbody,
	.woocommerce-orders-table__row,
	.woocommerce-orders-table__cell {
		display: block;
		width: 100%;
	}

	.woocommerce-orders-table__row {
		margin-bottom: var(--space-md);
		padding: var(--space-sm);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
	}

	.woocommerce-orders-table__row:last-child {
		margin-bottom: 0;
	}

	.woocommerce-orders-table__cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-md);
		padding: var(--space-xs) 0;
		border-bottom: var(--border-width) solid var(--color-border);
		text-align: right;
	}

	.woocommerce-orders-table__cell:last-child {
		border-bottom: none;
	}

	.woocommerce-orders-table__cell::before {
		content: attr(data-title);
		flex: 0 0 auto;
		font-size: var(--fs-small);
		font-weight: var(--fw-bold);
		text-transform: uppercase;
		letter-spacing: var(--ls-label);
		color: var(--color-text-muted);
		text-align: left;
	}

	.woocommerce-orders-table__cell-order-actions {
		justify-content: flex-end;
	}

	.woocommerce-orders-table__cell-order-actions::before {
		content: "";
	}
}

/* ============================================================
   VIEW ORDER — single order detail (My Account → Orders → View) and the
   same order-received markup style used on this endpoint.
   ============================================================ */
.woocommerce-order-details,
.woocommerce-customer-details {
	margin-bottom: var(--space-xl);
}

.woocommerce-order-details:last-child,
.woocommerce-customer-details:last-child {
	margin-bottom: 0;
}

.woocommerce-order-details__title,
.woocommerce-column__title {
	font-size: var(--fs-h3);
	margin: 0 0 var(--space-md);
}

table.woocommerce-table,
table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--space-md);
	font-size: var(--fs-small);
}

table.woocommerce-table th,
table.shop_table th {
	padding: var(--space-sm);
	text-align: left;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	font-size: var(--fs-label);
	color: var(--color-text-muted);
	border-bottom: var(--border-width-thick) solid var(--color-border);
}

table.woocommerce-table td,
table.shop_table td {
	padding: var(--space-sm);
	border-bottom: var(--border-width) solid var(--color-border);
}

table.woocommerce-table tfoot th,
table.woocommerce-table tfoot td,
table.shop_table tfoot th,
table.shop_table tfoot td {
	border-bottom: none;
}

table.woocommerce-table tfoot tr:last-child th,
table.woocommerce-table tfoot tr:last-child td,
table.shop_table tfoot tr:last-child th,
table.shop_table tfoot tr:last-child td {
	padding-top: var(--space-md);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	color: var(--color-heading);
}

address {
	font-style: normal;
	line-height: var(--lh-body);
	color: var(--color-text);
}

/* Customer details (billing/shipping/email/phone recap at the bottom of
   View Order) — same two-column treatment as Addresses below, for visual
   consistency between the two places this information appears. */
.woocommerce-customer-details .u-columns,
.woocommerce-columns--addresses {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

@media (min-width: 768px) {
	.woocommerce-customer-details .u-columns,
	.woocommerce-columns--addresses {
		flex-direction: row;
	}

	.woocommerce-customer-details .u-columns > *,
	.woocommerce-columns--addresses > * {
		flex: 1 1 0;
	}
}

/* ============================================================
   ADDRESSES — Billing + Shipping, native `.woocommerce-Addresses` two-
   column layout (already native markup, same u-columns mechanism as the
   login/register split above) plus the edit-address form (which reuses
   every form-field rule already defined above — nothing extra needed for
   its inputs).
   ============================================================ */
.woocommerce-Addresses.u-columns {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	width: 100%;
}

.woocommerce-Addresses .u-column1,
.woocommerce-Addresses .u-column2 {
	width: 100%;
	float: none;
}

@media (min-width: 768px) {
	.woocommerce-Addresses.u-columns {
		flex-direction: row;
	}

	.woocommerce-Addresses .u-column1,
	.woocommerce-Addresses .u-column2 {
		width: 50%;
	}
}

.woocommerce-Address {
	height: 100%;
	padding: var(--space-md);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-bg-alt);
}

.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0;
	font-size: var(--fs-h3);
}

.woocommerce-Address-title .edit {
	display: inline-flex;
	align-items: center;
	height: var(--btn-height-sm);
	padding: 0 var(--btn-padding-x-sm);
	background-color: transparent;
	border: var(--border-width) solid var(--yodha-orange);
	border-radius: var(--btn-radius);
	color: var(--yodha-orange);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-small);
	white-space: nowrap;
}

.woocommerce-Address-title .edit:hover,
.woocommerce-Address-title .edit:focus-visible {
	background-color: var(--yodha-orange);
	color: var(--white);
}

.woocommerce-Address address {
	font-size: var(--fs-small);
}

/* Edit-address form's First/Last name, City/State/PIN side-by-side layout
   from tablet up — same grid treatment Checkout already uses for its own
   address form, so the two feel identical even though they're two
   separate, independent forms (native WooCommerce `woocommerce_form_field`
   output on this page vs. the Checkout block's own component). */
.woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

@media (min-width: 480px) {
	.woocommerce-address-fields__field-wrapper {
		grid-template-columns: repeat(2, 1fr);
	}

	.woocommerce-address-fields__field-wrapper #billing_country_field,
	.woocommerce-address-fields__field-wrapper #shipping_country_field,
	.woocommerce-address-fields__field-wrapper #billing_address_1_field,
	.woocommerce-address-fields__field-wrapper #shipping_address_1_field,
	.woocommerce-address-fields__field-wrapper #billing_address_2_field,
	.woocommerce-address-fields__field-wrapper #shipping_address_2_field,
	.woocommerce-address-fields__field-wrapper #billing_city_field,
	.woocommerce-address-fields__field-wrapper #shipping_city_field {
		grid-column: 1 / -1;
	}
}

/* ============================================================
   ACCOUNT DETAILS — first/last name, display name, email, password
   change. Same field grid as Addresses; the password-change fieldset is
   plain `.woocommerce-form-row` paragraphs WooCommerce already renders
   conditionally (only once "Change password" is actually wanted), so
   nothing extra is required to show/hide it correctly.
   ============================================================ */
.woocommerce-EditAccountForm .woocommerce-form-row {
	max-width: 480px;
}

.woocommerce-EditAccountForm fieldset {
	margin: var(--space-lg) 0 0;
	padding: var(--space-lg) 0 0;
	border: none;
	border-top: var(--border-width) solid var(--color-border);
}

.woocommerce-EditAccountForm legend {
	padding: 0;
	margin-bottom: var(--space-md);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	color: var(--color-heading);
}

/* ============================================================
   RESET / LOST PASSWORD — /my-account/lost-password/, native WordPress
   flow. Reuses the same centred single-card treatment as the bare login
   form above (no `.u-columns` wrapper on this screen either).
   ============================================================ */
.woocommerce-ResetPassword {
	max-width: 480px;
	margin: 0 auto;
	background-color: var(--color-bg);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 10px 28px rgba(245, 83, 1, 0.16), 0 2px 8px rgba(39, 47, 50, 0.06);
	padding: var(--space-lg);
}