/**
 * My Account — dashboard, orders, view-order, downloads, addresses, account
 * details, and the logged-out login/register forms.
 *
 * Classic WooCommerce templates (the page runs [woocommerce_my_account]), so
 * this styles WooCommerce's own class names rather than theme markup. No
 * template overrides: the nav, tables and forms all render stock.
 *
 * Builds on wc-page.css for buttons, fields, tables and notices.
 */

/*
 * Two columns once there is a nav rail to put in the first one. WooCommerce
 * only renders the rail for a logged-in customer — logged out, the same
 * container holds just the login form, which is centred below instead.
 */
body.logged-in .wc-page--account .woocommerce {
	display: grid;
	grid-template-columns: var(--wc-account-nav-width) minmax(0, 1fr);
	gap: var(--wc-page-gap);
	align-items: start;
}

/*
 * Placed explicitly rather than left to auto-flow. WooCommerce floats the rail
 * left and the content right, and those floats still decide the order the two
 * land in once the container becomes a grid — which puts the rail in the wide
 * column and the content in the narrow one, i.e. exactly backwards. Naming the
 * columns makes the layout independent of the floats entirely.
 */
body.logged-in .wc-page--account .woocommerce-MyAccount-navigation {
	grid-column: 1;
	grid-row: 1;
}

body.logged-in .wc-page--account .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 1;
}

/* --------------------------------------------------------------- rail --- */

.wc-page--account .woocommerce-MyAccount-navigation {
	background: var(--color-white);
	border: 1px solid var(--color-border-card);
	border-radius: var(--wc-panel-radius);
	padding: 8px;
	box-sizing: border-box;
	float: none; /* WooCommerce floats this at 30% by default. */
	width: auto;
}

.wc-page--account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-page--account .woocommerce-MyAccount-navigation li {
	margin: 0;
	list-style: none;
}

.wc-page--account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	min-height: var(--wc-account-nav-item-height);
	padding: 0 16px;
	border-radius: var(--radius-button);
	font-family: var(--font-body);
	font-size: var(--nav-link);
	font-weight: var(--nav-link-weight);
	line-height: 20px;
	color: var(--color-body-88);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wc-page--account .woocommerce-MyAccount-navigation li a:hover,
.wc-page--account .woocommerce-MyAccount-navigation li a:focus-visible {
	background: var(--color-bg-cream-2);
	color: var(--color-accent);
	text-decoration: none;
	outline: none;
}

.wc-page--account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--color-accent);
	color: var(--color-white);
}

/* Log out is a leaving action, not a section — set it apart from the rest. */
.wc-page--account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--color-border-light);
}

.wc-page--account .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--color-wc-muted);
}

/* ------------------------------------------------------------ content --- */

.wc-page--account .woocommerce-MyAccount-content {
	float: none; /* WooCommerce floats this at 68% by default. */
	width: auto;
	min-width: 0;
	background: var(--color-white);
	border: 1px solid var(--color-border-card);
	border-radius: var(--wc-panel-radius);
	padding: var(--wc-panel-pad);
	box-sizing: border-box;
}

.wc-page--account .woocommerce-MyAccount-content > p:last-child {
	margin-bottom: 0;
}

/* Tables sit flush inside the panel that already provides the frame. */
.wc-page--account .woocommerce-MyAccount-content table.shop_table:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------- orders --- */

.wc-page--account .woocommerce-orders-table__cell-order-actions {
	white-space: nowrap;
	text-align: right;
}

/*
 * Order rows carry up to three actions (View / Pay / Cancel). At full button
 * size they wrap the row; this is the compact variant.
 */
.wc-page--account .woocommerce-orders-table__cell-order-actions .button,
.wc-page--account .woocommerce-orders-table__cell-download-file .button {
	min-height: 36px;
	margin: 2px 0 2px 6px;
	padding: 6px 16px;
	font-size: 12px;
	line-height: 18px;
}

.wc-page--account .woocommerce-orders-table__cell-order-status {
	font-weight: 600;
	color: var(--color-heading);
}

/* ---------------------------------------------------------- view-order --- */

.wc-page--account .woocommerce-order-details,
.wc-page--account .woocommerce-customer-details {
	margin-bottom: 32px;
}

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

.wc-page--account .woocommerce-order-details__title,
.wc-page--account .woocommerce-column__title,
.wc-page--account .woocommerce-Addresses .woocommerce-Address-title h3 {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 400;
	line-height: 30px;
	color: var(--color-heading);
}

.wc-page--account .woocommerce-table--order-details tfoot th,
.wc-page--account .woocommerce-table--order-details tfoot td {
	padding: 14px 18px;
	background: var(--color-bg-card-inner);
	border-top: 1px solid var(--wc-row-border);
	font-size: 14px;
}

.wc-page--account .woocommerce-table--order-details tfoot tr:last-child th,
.wc-page--account .woocommerce-table--order-details tfoot tr:last-child td {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	color: var(--color-heading);
}

/* ----------------------------------------------------------- addresses --- */

.wc-page--account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wc-panel-gap);
	margin: 0;
}

/* WooCommerce ships these as floated .col-1/.col-2 halves. */
.wc-page--account .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	padding: var(--wc-panel-pad-tight);
	background: var(--color-bg-card-inner);
	border: 1px solid var(--color-border-card);
	border-radius: var(--wc-panel-radius);
	box-sizing: border-box;
}

.wc-page--account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.wc-page--account .woocommerce-Address-title h3 {
	margin: 0;
}

.wc-page--account .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	font-size: 14px;
	line-height: 26px;
	color: var(--color-body-80);
}

/* ------------------------------------------- logged-out login/register --- */

/*
 * No nav rail exists here, so the container is a single centred column rather
 * than the two-column grid above.
 */
/*
 * Qualified with `form` deliberately. WooCommerce styles these as
 * `.woocommerce form.login` (0,2,1), which outranks a plain two-class
 * selector — including its `margin: 2em 0`, which is what stops the panel
 * centring. Matching its shape and adding one class wins cleanly.
 */
.wc-page--account .woocommerce form.woocommerce-form-login,
.wc-page--account .woocommerce form.woocommerce-form-register {
	max-width: var(--wc-auth-panel-max);
	margin: 0 auto;
	padding: var(--wc-panel-pad);
	background: var(--color-white);
	border: 1px solid var(--color-border-card);
	border-radius: var(--wc-panel-radius);
	box-sizing: border-box;
}

/*
 * The bare <h2>Login</h2> WooCommerce prints above the form. Only a direct
 * child while registration is off — with it on, each heading moves inside its
 * own column and is styled under `#customer_login` below.
 */
.wc-page--account .woocommerce > h2 {
	max-width: var(--wc-auth-panel-max);
	margin: 0 auto 16px;
	text-align: center;
}

.wc-page--account .woocommerce-form-login__submit,
.wc-page--account .woocommerce-form-register .woocommerce-Button {
	width: 100%;
}

.wc-page--account .woocommerce-form-login__rememberme {
	margin-bottom: 20px;
}

.wc-page--account .woocommerce-LostPassword {
	margin: 16px 0 0;
	text-align: center;
	font-size: 14px;
}

/* Login + Register side by side when registration is enabled. */
.wc-page--account .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wc-panel-gap);
}

/*
 * WooCommerce clears the float layout with `.col2-set::before/::after`
 * (`content: " "; display: table`, woocommerce-layout.css). Those two
 * pseudo-elements become grid items the moment the container is a grid, so
 * they take the first and last cell and push Login into column 2 and Register
 * onto a second row. Nothing floats here, so remove them outright. This also
 * covers the Addresses grid below, which WooCommerce marks up as a col2-set.
 */
.wc-page--account .u-columns.col2-set::before,
.wc-page--account .u-columns.col2-set::after {
	content: none;
}

.wc-page--account .u-columns.col2-set .col-1,
.wc-page--account .u-columns.col2-set .col-2 {
	float: none;
	width: auto;
}

/*
 * Hold the pair to two panels at their single-column width instead of letting
 * each stretch to half the 1376px content area. Scoped to the login container
 * so the Addresses col2-set keeps filling its narrower content panel.
 */
.wc-page--account #customer_login {
	max-width: calc( var(--wc-auth-panel-max) * 2 + var(--wc-panel-gap) );
	margin: 0 auto;
}

/* Equal-height cards, so the two panels share a baseline edge. */
.wc-page--account #customer_login .col-1,
.wc-page--account #customer_login .col-2 {
	display: flex;
	flex-direction: column;
}

/*
 * `margin: 0 auto` above centres the single-column panel, but an auto cross-axis
 * margin on a flex item sizes it to its content instead of stretching it — which
 * left the shorter Login form narrower than its column. Fill the column here.
 */
.wc-page--account #customer_login form.woocommerce-form-login,
.wc-page--account #customer_login form.woocommerce-form-register {
	flex: 1;
	max-width: none;
	margin: 0;
}

/* Each column carries its own heading once registration is on. */
.wc-page--account #customer_login .col-1 > h2,
.wc-page--account #customer_login .col-2 > h2 {
	margin: 0 0 16px;
	text-align: center;
}

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 1024px) {
	body.logged-in .wc-page--account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Single column — release the explicit placement above so the two stack. */
	body.logged-in .wc-page--account .woocommerce-MyAccount-navigation,
	body.logged-in .wc-page--account .woocommerce-MyAccount-content {
		grid-column: 1;
		grid-row: auto;
	}

	/* Rail becomes a horizontal strip of pills above the content. */
	.wc-page--account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}

	.wc-page--account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
		margin-left: auto;
	}
}

@media (max-width: 782px) {
	.wc-page--account .woocommerce-MyAccount-content {
		padding: var(--wc-panel-pad-tight);
	}

	.wc-page--account .woocommerce-Addresses,
	.wc-page--account .u-columns.col2-set {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.wc-page--account .woocommerce-orders-table__cell-order-actions {
		text-align: left;
	}

	.wc-page--account .woocommerce-orders-table__cell-order-actions .button {
		margin-left: 0;
		margin-right: 6px;
	}
}