/*
 * My Account page.
 *
 * Two-column layout mirroring cart.css:
 *   .at-myaccount__nav    nav sidebar (30%)
 *   .at-myaccount__main   content panel (70%)
 *
 * Selectors are prefixed with body#at-theme (rather than wrapped in a CSS
 * nesting block) to keep WC-override specificity explicit and predictable.
 */

body#at-theme .at-myaccount {
	padding-block: var(--at-space-6) var(--at-space-8);
}

/* Kill legacy WC core float layout — WC ships float:left/right + fixed
 * width % on its myaccount nav and content, which fights our CSS grid.
 * Note: WC uses `.woocommerce-account .woocommerce-MyAccount-xxx`, where
 * `.woocommerce-account` is the body class itself. Our prefix `body#at-theme`
 * already matches that body, so we drop the descendant `.woocommerce-account`
 * combinator (which would otherwise look for it as a child of body and miss). */
body#at-theme .woocommerce-MyAccount-navigation,
body#at-theme .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* Card headings — h2 inherits WarText from base.css. */
body#at-theme .at-myaccount__heading {
	font-size: var(--at-fs-display-l);
	color: var(--at-headline);
	margin: 0 0 var(--at-space-4);
	padding-bottom: var(--at-space-3);
	border-bottom: 1px solid var(--at-divider);
}

/* === Layout grid: nav 30% / content 70% === */
body#at-theme .at-myaccount__layout {
	display: grid;
	grid-template-columns: 30% 1fr;
	gap: var(--at-space-6);
	align-items: start;
}
body#at-theme .at-myaccount__nav  { grid-column: 1; }
body#at-theme .at-myaccount__main { grid-column: 2; }

/* === Nav sidebar (left) — no card chrome, like the cart actions column. === */
body#at-theme .at-myaccount__nav {
	background-color: transparent;
	border: 0;
	padding: 0;
	margin-top: 24px; /* aligns nav heading with content heading on the right (offset by .at-myaccount__main padding-top — desktop only, reset in the mobile media query). */
}

body#at-theme .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
body#at-theme .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--at-hairline);
}
body#at-theme .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}
body#at-theme .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: var(--at-space-2);
	padding: var(--at-space-3) 0;
	font-family: var(--at-font-mono);
	font-size: var(--at-fs-body-sm);
	color: var(--at-body);
	text-transform: uppercase;
	letter-spacing: var(--at-tracking-eyebrow);
	text-decoration: none;
	transition: color 120ms ease;
}
body#at-theme .woocommerce-MyAccount-navigation li a:hover {
	color: var(--at-headline);
}
body#at-theme .woocommerce-MyAccount-navigation li.is-active a,
body#at-theme .woocommerce-MyAccount-navigation li a[aria-current="page"] {
	color: var(--at-highlight);
}

/* Iris icon size in the nav. */
body#at-theme .woocommerce-MyAccount-navigation li a .iris-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* === Content panel (right) — surface card. === */
body#at-theme .at-myaccount__main {
	/* Cap h2 token locally — base --at-fs-h2 reaches 3rem (WC renders h2 for
	 * address titles, view-order, etc., which is too large in this panel). */
	--at-fs-h2: clamp(1.5rem, 4vw, 2rem);

	background-color: var(--at-surface);
	border: 1px solid var(--at-hairline);
	border-radius: var(--at-radius-xs);
	padding: var(--at-space-5);
}

body#at-theme .at-myaccount__greeting,
body#at-theme .at-myaccount__desc,
body#at-theme .woocommerce-MyAccount-content p {
	font-family: var(--at-font-body);
	font-size: var(--at-fs-body);
	color: var(--at-body);
	line-height: 1.6;
	margin: 0 0 var(--at-space-3);
}
body#at-theme .at-myaccount__greeting strong {
	color: var(--at-headline);
	font-weight: 500;
}
body#at-theme .woocommerce-MyAccount-content a {
	color: var(--at-headline);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 120ms ease;
}
body#at-theme .woocommerce-MyAccount-content a:hover {
	color: var(--at-highlight);
}

/* === WC buttons — align with .at-btn--ghost from base.css.
 * Targets every WC button-like element rendered inside the content panel
 * (table actions, pagination, form submits, empty-state CTAs, edit-account
 * save, etc.). Same dark-canvas / white-border ghost look as the cart. */
body#at-theme .at-myaccount__main .button,
body#at-theme .at-myaccount__main .woocommerce-Button,
body#at-theme .at-myaccount__main button[type="submit"],
body#at-theme .at-myaccount__main input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--at-space-3) var(--at-space-6);
	font-family: var(--at-font-body);
	font-weight: 700;
	font-size: var(--at-fs-body-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 0;
	border: 2px solid var(--at-highlight);
	background-color: var(--at-canvas);
	color: var(--at-highlight);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--at-trans-fast), color var(--at-trans-fast);
}
body#at-theme .at-myaccount__main .button:hover,
body#at-theme .at-myaccount__main .woocommerce-Button:hover,
body#at-theme .at-myaccount__main button[type="submit"]:hover,
body#at-theme .at-myaccount__main input[type="submit"]:hover {
	background-color: var(--at-highlight);
	color: var(--at-canvas);
}

/* === Edit account form.
 * Main grid (4-col): auto, fr, auto, fr — for First/Last name pairs etc.
 * Password fieldset uses --stacked (2-col: auto, fr) because its labels
 * ("Current password (leave blank to leave unchanged)") are too long for
 * a 4-col layout to stay readable.
 * minmax(0, 1fr) on the fr columns is critical: without it, the column
 * min-content (input intrinsic width) overflows the parent. */
body#at-theme .at-edit-account__grid {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
	gap: var(--at-space-3) var(--at-space-4);
	align-items: center;
}
/* Password fields don't fit the 4-col grid (labels like "Current password
 * (leave blank to leave unchanged)" are too long). Use a simple vertical
 * stack: label above, input below, each row gap-separated. */
body#at-theme .at-edit-account__stack {
	display: flex;
	flex-direction: column;
	gap: var(--at-space-2);
}
body#at-theme .at-edit-account__stack > label {
	margin-top: var(--at-space-2);
}
body#at-theme .at-edit-account__stack > label:first-child {
	margin-top: 0;
}

/* WC injects a <span class="password-input"> wrapper around each password
 * field (input + show-password button) via JS after render. Make sure the
 * span behaves as a block to keep the stack layout consistent. */
body#at-theme .at-edit-account__stack .password-input {
	display: block;
	position: relative;
	width: 100%;
}
body#at-theme .at-edit-account__stack .password-input .at-edit-account__input {
	padding-right: var(--at-space-7); /* room for the show-password button */
}
body#at-theme .at-edit-account__stack .show-password-input {
	position: absolute;
	right: var(--at-space-2);
	top: 50%;
	transform: translateY(-50%);
}
body#at-theme .at-edit-account__label {
	font-family: var(--at-font-mono);
	font-size: var(--at-fs-body-sm);
	color: var(--at-body);
	text-transform: uppercase;
	letter-spacing: var(--at-tracking-eyebrow);
	margin: 0;
}
body#at-theme .at-edit-account__label .required {
	color: var(--at-stock-out);
	margin-left: 2px;
}
body#at-theme .at-edit-account__input {
	height: 40px;
	padding: 0 var(--at-space-3);
	background-color: var(--at-canvas);
	color: var(--at-headline);
	border: 1px solid var(--at-divider);
	border-radius: var(--at-radius-xs);
	font-family: var(--at-font-body);
	font-size: var(--at-fs-body-sm);
	width: 100%;
	min-width: 0; /* allow shrink within the grid track */
	box-sizing: border-box;
}
body#at-theme .at-edit-account__input:focus {
	border-color: var(--at-highlight);
	outline: none;
}
body#at-theme .at-edit-account__input--span3 {
	grid-column: span 3;
}
body#at-theme .at-edit-account__help {
	font-family: var(--at-font-body);
	font-size: var(--at-fs-body-sm);
	color: var(--at-muted);
	line-height: 1.4;
	margin: 0;
}
body#at-theme .at-edit-account__help--span2 {
	grid-column: span 2;
}

body#at-theme .at-edit-account__fieldset {
	margin: var(--at-space-5) 0 0;
	padding: var(--at-space-4) 0 0;
	border: 0;
	border-top: 1px solid var(--at-divider);
}
body#at-theme .at-edit-account__legend {
	font-family: var(--at-font-mono);
	font-size: var(--at-fs-body-sm);
	color: var(--at-body);
	text-transform: uppercase;
	letter-spacing: var(--at-tracking-eyebrow);
	padding: 0 var(--at-space-2) 0 0;
	margin: 0 0 var(--at-space-3);
}
body#at-theme .at-edit-account__submit {
	margin-top: var(--at-space-7);
}

/* Mobile: collapse the 4-col grid into a single column (the password stack
 * is already linear, no change needed there). */
@media (max-width: 760px) {
	body#at-theme .at-edit-account__grid {
		grid-template-columns: 1fr;
	}
	body#at-theme .at-edit-account__input--span3,
	body#at-theme .at-edit-account__help--span2 {
		grid-column: 1;
	}
}

/* === Responsive === */
@media (max-width: 980px) {
	body#at-theme .at-myaccount__layout {
		grid-template-columns: 1fr;
	}
	body#at-theme .at-myaccount__nav,
	body#at-theme .at-myaccount__main {
		grid-column: 1;
	}
	body#at-theme .at-myaccount__nav {
		margin-top: 0;
	}
}