/*
 * My Account (master plan §11.14, Operate mode): WooCommerce's own account templates in our
 * components. Buttons and fields use the component rules in components.css (their selectors include
 * `.woocommerce-account .woocommerce .button` and the account inputs); this file sets the layout.
 * WooCommerce's generic shop CSS is not loaded here.
 */

/* ================================================================ Layout: menu + content */
.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--v-space-7);
	margin-bottom: var(--v-section-y);
}
@media (min-width: 1024px) {
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2.618fr);   /* φ² : 1 */
		gap: var(--v-space-10);
		align-items: start;
	}
}

/* Menu: a column of links on desktop, a scrolling row on phones. The current page is marked in
   Hide (a selected state, §3) and by weight, never by colour alone. */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	gap: var(--v-space-1) var(--v-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: var(--v-hairline) solid var(--v-border);
}
.woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-height: var(--v-hit-min);
	white-space: nowrap;
	color: var(--v-text-muted);
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	text-decoration: none;
}
.woocommerce-MyAccount-navigation a:hover { color: var(--v-text); }
.woocommerce-MyAccount-navigation .is-active a {
	color: var(--v-action);
	box-shadow: inset 0 calc(var(--v-hairline-strong) * -1) 0 var(--v-action);
}
@media (min-width: 1024px) {
	.woocommerce-MyAccount-navigation {
		position: sticky;
		top: calc(var(--v-header-h) + var(--wp-admin--admin-bar--height, 0px) + var(--v-space-6));
	}
	.woocommerce-MyAccount-navigation ul { flex-direction: column; overflow: visible; border-bottom: 0; }
	.woocommerce-MyAccount-navigation .is-active a { box-shadow: inset var(--v-hairline-strong) 0 0 var(--v-action); padding-left: var(--v-space-4); }
}

.woocommerce-MyAccount-content { display: grid; gap: var(--v-space-5); min-width: 0; align-content: start; }
.woocommerce-MyAccount-content > p { margin: 0; max-width: var(--v-measure); }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	margin: var(--v-space-4) 0 0;
	font-family: var(--v-font-body);
	font-size: var(--v-text-h4);
	font-weight: var(--v-weight-bold);
	line-height: var(--v-lh-ui);
}
.woocommerce-account mark { background: none; color: inherit; font-weight: var(--v-weight-semibold); }

/* ================================================================ Tables (orders, order details) */
.woocommerce-account .shop_table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.woocommerce-account .shop_table :is(th, td) {
	padding: var(--v-space-4) var(--v-space-3) var(--v-space-4) 0;
	border-bottom: var(--v-hairline) solid var(--v-border);
	text-align: left;
	vertical-align: top;
}
.woocommerce-account .shop_table thead th { font-size: var(--v-text-small); color: var(--v-text-muted); font-weight: var(--v-weight-semibold); }
.woocommerce-account .shop_table tfoot :is(th, td) { font-weight: var(--v-weight-semibold); }
.woocommerce-account .shop_table .wc-item-meta { margin: var(--v-space-2) 0 0; padding: 0; list-style: none; font-size: var(--v-text-small); color: var(--v-text-muted); }
.woocommerce-account .shop_table .wc-item-meta :is(strong, p) { display: inline; margin: 0; font-weight: var(--v-weight-regular); }
.woocommerce-orders-table .button { min-height: var(--v-control-h); }
.woocommerce-orders-table .button + .button { margin-left: var(--v-space-2); }
/* Phones: each order is a block of label: value rows (WooCommerce's data-title). */
@media (max-width: 767px) {
	.woocommerce-orders-table thead { display: none; }
	.woocommerce-orders-table :is(tr, td) { display: block; }
	.woocommerce-orders-table tr { padding: var(--v-space-4) 0; border-bottom: var(--v-hairline) solid var(--v-border); }
	.woocommerce-orders-table td { padding: var(--v-space-1) 0; border: 0; }
	.woocommerce-orders-table td[data-title]::before { content: attr(data-title) ": "; color: var(--v-text-muted); }
}

/* ================================================================ Addresses */
.woocommerce-Addresses { display: grid; gap: var(--v-space-6); }
@media (min-width: 768px) { .woocommerce-Addresses { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.woocommerce-Address { padding: var(--v-space-5); border: var(--v-hairline) solid var(--v-border); }
.woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--v-space-4); }
.woocommerce-Address-title h2 { margin: 0; }
.woocommerce-Address address,
.woocommerce-customer-details address { font-style: normal; line-height: var(--v-lh-body); }
.woocommerce-customer-details--phone,
.woocommerce-customer-details--email { margin: var(--v-space-2) 0 0; }

/* ================================================================ Forms (address, account details, sign in) */
.woocommerce-account .woocommerce :is(form.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper, form.login, form.register, form.lost_reset_password) {
	display: grid;
	gap: var(--v-space-5);
	max-width: 40rem;
}
.woocommerce-account .woocommerce .form-row { display: grid; gap: var(--v-space-2); margin: 0; }
.woocommerce-account .woocommerce .form-row label:not(.woocommerce-form__label-for-checkbox) {
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
}
.woocommerce-account .woocommerce .form-row .required { color: var(--v-text-muted); text-decoration: none; }
.woocommerce-account .woocommerce .form-row .description,
.woocommerce-account .woocommerce .form-row em { font-size: var(--v-text-small); color: var(--v-text-muted); font-style: normal; }
.woocommerce-account .woocommerce fieldset { display: grid; gap: var(--v-space-5); margin: var(--v-space-4) 0 0; padding: 0; border: 0; }
.woocommerce-account .woocommerce legend { margin-bottom: var(--v-space-2); font-weight: var(--v-weight-bold); font-size: var(--v-text-h4); }
.woocommerce-account .woocommerce .password-input { display: block; position: relative; }
.woocommerce-account .woocommerce .show-password-input { position: absolute; top: 0; right: 0; min-width: var(--v-hit-min); min-height: var(--v-field-h); background: none; border: 0; cursor: pointer; }
.woocommerce-account .woocommerce .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: var(--v-space-2); min-height: var(--v-hit-min); }
.woocommerce-account .woocommerce .lost_password { margin: 0; font-size: var(--v-text-small); }
/* Signed out: sign in and (if enabled) register side by side from 1024 px. */
.woocommerce-account #customer_login { display: grid; gap: var(--v-space-9); }
@media (min-width: 1024px) { .woocommerce-account #customer_login { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.woocommerce-account #customer_login h2 { margin: 0 0 var(--v-space-5); font-family: var(--v-font-body); font-size: var(--v-text-h4); font-weight: var(--v-weight-bold); }

/* ================================================================ Notices */
.woocommerce-account :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--v-space-3) var(--v-space-5);
	margin: 0;
	padding: var(--v-space-4) var(--v-space-5);
	list-style: none;
	background: var(--v-surface-alt);
	border: 0;
	border-left: var(--v-hairline-strong) solid var(--v-text);
}
/* WooCommerce puts a notice's button before its text: the text reads first, the button follows. */
.woocommerce-account :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) > .button { order: 2; }
.woocommerce-account .woocommerce-error { border-left-color: var(--v-negative); }
.woocommerce-account .woocommerce-message { border-left-color: var(--v-positive); }
.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; }