/**
 * My Account composition (page 10770, [woocommerce_my_account]).
 *
 * Nine endpoints: dashboard, orders, downloads, edit-address, edit-account,
 * purchase-lists, multiaccounts, request-quote, customer-logout. The last four
 * are plugin-owned markup (SMUAC, Addify inside the b2b bundle), so they are
 * styled through their real classes and never template-overridden.
 *
 * inc/woo.php adds body classes hs-account and hs-account--{endpoint}, and
 * emits .hs-acct-hello / .hs-acct-grid / .hs-acct-tile on the dashboard.
 *
 * NO WooCommerce template is overridden. Copying myaccount/navigation.php would
 * take on an @9.3.0 version burden, and hard-calling the hs-header classes from
 * a template would white-screen the account area for 388 people the moment that
 * plugin is deactivated.
 *
 * Load order: tokens -> components -> this.
 */

/* ============================================================== shell ==== */

body.hs-account .woocommerce {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--hs-space-8);
	align-items: start;
	font-family: var(--hs-font-body);
	color: var(--hs-text);
}

body.hs-account .woocommerce::before,
body.hs-account .woocommerce::after {
	content: none; /* clearfix pseudo-elements become phantom grid items */
}

/* =========================================================== navigation == */

body.hs-account .woocommerce-MyAccount-navigation {
	width: auto;
	float: none;
	padding: var(--hs-space-4);
	background: var(--hs-surface);
	border: var(--hs-border);
	border-radius: var(--hs-radius-lg);
	box-shadow: var(--hs-shadow-xs);
	position: sticky;
	top: calc(var(--hs-header-bar-h) + var(--hs-space-4));
}

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

body.hs-account .woocommerce-MyAccount-navigation li {
	margin: 0 0 var(--hs-space-1);
	padding: 0;
	list-style: none;
	border: 0;
}

body.hs-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--hs-space-3) var(--hs-space-4);
	font-family: var(--hs-font-head);
	font-size: var(--hs-text-base);
	color: var(--hs-text);
	text-decoration: none;
	border-radius: var(--hs-radius-sm);
	transition: background var(--hs-fast) var(--hs-ease), color var(--hs-fast) var(--hs-ease);
}

body.hs-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--hs-surface-soft);
	color: var(--hs-accent);
}

body.hs-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--hs-navy);
	color: var(--hs-surface);
}

/* Log out sits apart from the destinations above it. */
body.hs-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--hs-space-4);
	padding-top: var(--hs-space-3);
	border-top: var(--hs-border);
}

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

/* ============================================================= content == */

body.hs-account .woocommerce-MyAccount-content {
	width: auto;
	float: none;
	min-width: 0;
}

body.hs-account .woocommerce-MyAccount-content h2,
body.hs-account .woocommerce-MyAccount-content h3 {
	font-family: var(--hs-font-head);
	font-size: var(--hs-text-xl);
	color: var(--hs-navy);
	text-align: left;
	margin: 0 0 var(--hs-space-5);
}

body.hs-account .woocommerce-MyAccount-content p {
	line-height: var(--hs-leading-normal);
	color: var(--hs-text);
}

body.hs-account .woocommerce-MyAccount-content a:not(.button):not(.hs-btn) {
	color: var(--hs-accent);
}

/* =========================================================== dashboard == */
/* Emitted by hs_theme_account_dashboard() in inc/woo.php. */

body.hs-account .hs-acct-hello {
	margin-bottom: var(--hs-space-7);
	padding-bottom: var(--hs-space-5);
	border-bottom: var(--hs-border);
}

body.hs-account .hs-acct-hello__name {
	font-family: var(--hs-font-head);
	font-size: var(--hs-text-3xl);
	line-height: var(--hs-leading-tight);
	color: var(--hs-navy);
	margin: 0 0 var(--hs-space-3);
}

body.hs-account .hs-acct-hello .hs-chip {
	margin-right: var(--hs-space-2);
}

body.hs-account .hs-acct-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--hs-space-4);
}

body.hs-account .hs-acct-tile {
	display: flex;
	flex-direction: column;
	gap: var(--hs-space-1);
	text-decoration: none;
	transition: border-color var(--hs-fast) var(--hs-ease),
	            box-shadow var(--hs-fast) var(--hs-ease),
	            transform var(--hs-fast) var(--hs-ease);
}

body.hs-account .hs-acct-tile:hover,
body.hs-account .hs-acct-tile:focus-visible {
	border-color: var(--hs-accent);
	box-shadow: var(--hs-shadow-sm);
	transform: translateY(-2px);
}

body.hs-account .hs-acct-tile__label {
	font-family: var(--hs-font-head);
	font-size: var(--hs-text-md);
	color: var(--hs-navy);
}

body.hs-account .hs-acct-tile__meta {
	font-family: var(--hs-font-body);
	font-size: var(--hs-text-sm);
	color: var(--hs-muted);
}

body.hs-account .hs-acct-intro {
	margin-bottom: var(--hs-space-6);
}

/* ============================================================== tables == */
/* Orders, downloads, and the plugin-owned quote / purchase-list tables, which
   all emit .shop_table or .my_account_orders. */

body.hs-account .shop_table,
body.hs-account .woocommerce-orders-table,
body.hs-account .my_account_orders {
	width: 100%;
	border-collapse: collapse;
	border: var(--hs-border);
	border-radius: var(--hs-radius-md);
	overflow: hidden;
	font-family: var(--hs-font-body);
	font-size: var(--hs-text-base);
}

body.hs-account .shop_table thead th,
body.hs-account .my_account_orders thead th {
	padding: var(--hs-space-3) var(--hs-space-4);
	font-family: var(--hs-font-head);
	font-size: var(--hs-text-xs);
	letter-spacing: var(--hs-tracking-wide);
	text-transform: uppercase;
	color: var(--hs-muted);
	background: var(--hs-surface-soft);
	border-bottom: var(--hs-border);
	text-align: left;
}

body.hs-account .shop_table tbody td,
body.hs-account .my_account_orders tbody td {
	padding: var(--hs-space-4);
	border-bottom: var(--hs-border);
	color: var(--hs-text);
	vertical-align: middle;
}

body.hs-account .shop_table tbody tr:last-child td {
	border-bottom: 0;
}

body.hs-account .woocommerce-orders-table__cell-order-number a {
	font-family: var(--hs-font-head);
	color: var(--hs-navy);
	text-decoration: none;
}

/* ============================================================= buttons == */

body.hs-account .woocommerce-MyAccount-content .button,
body.hs-account .woocommerce-Button,
body.hs-account button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--hs-control-h-sm);
	padding: 0 var(--hs-space-6);
	font-family: var(--hs-font-head);
	font-size: var(--hs-text-base);
	line-height: 1;
	color: var(--hs-surface);
	background: var(--hs-navy);
	border: 1px solid var(--hs-navy);
	border-radius: var(--hs-radius-pill);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--hs-fast) var(--hs-ease), box-shadow var(--hs-fast) var(--hs-ease);
}

body.hs-account .woocommerce-MyAccount-content .button:hover,
body.hs-account .woocommerce-Button:hover,
body.hs-account button[type="submit"]:hover {
	background: var(--hs-accent-hover);
	border-color: var(--hs-accent-hover);
	box-shadow: var(--hs-shadow-sm);
}

/* ========================================================= addresses ==== */

body.hs-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--hs-space-5);
}

body.hs-account .woocommerce-Address {
	width: auto;
	float: none;
	padding: var(--hs-space-5);
	background: var(--hs-surface);
	border: var(--hs-border);
	border-radius: var(--hs-radius-md);
}

body.hs-account .woocommerce-Address-title h3 {
	font-size: var(--hs-text-lg);
	margin-bottom: var(--hs-space-3);
}

body.hs-account .woocommerce-Address address {
	font-style: normal;
	line-height: var(--hs-leading-normal);
	color: var(--hs-muted);
}

/* ======================================================== forms ========= */
/* Login / register (logged out) and edit-account. */

body.hs-account .woocommerce-form,
body.hs-account form.login,
body.hs-account form.register,
body.hs-account form.edit-account {
	padding: var(--hs-space-6);
	background: var(--hs-surface);
	border: var(--hs-border);
	border-radius: var(--hs-radius-lg);
	box-shadow: var(--hs-shadow-xs);
}

body.hs-account .form-row label,
body.hs-account .woocommerce-form-row label {
	display: block;
	font-family: var(--hs-font-body);
	font-size: var(--hs-text-base);
	font-weight: 600;
	color: var(--hs-text);
	margin-bottom: var(--hs-space-2);
}

body.hs-account .input-text,
body.hs-account input[type="text"],
body.hs-account input[type="email"],
body.hs-account input[type="password"],
body.hs-account input[type="tel"],
body.hs-account select {
	width: 100%;
	height: 48px;
	padding: 0 var(--hs-space-4);
	font-family: var(--hs-font-body);
	font-size: var(--hs-text-md);
	color: var(--hs-text);
	background: var(--hs-surface);
	border: var(--hs-border);
	border-radius: var(--hs-radius-sm);
	transition: border-color var(--hs-fast) var(--hs-ease), box-shadow var(--hs-fast) var(--hs-ease);
}

body.hs-account .input-text:focus,
body.hs-account input:focus,
body.hs-account select:focus {
	outline: none;
	border-color: var(--hs-accent);
	box-shadow: var(--hs-ring);
}

/* When logged out the page is a single column - the nav does not render. */
body.hs-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
	display: block;
	max-width: 520px;
	margin: 0 auto;
}

/* ============================================================== notices = */

body.hs-account .woocommerce-message,
body.hs-account .woocommerce-info,
body.hs-account .woocommerce-error {
	padding: var(--hs-space-4) var(--hs-space-5);
	font-family: var(--hs-font-body);
	background: var(--hs-surface-soft);
	border: var(--hs-border);
	border-radius: var(--hs-radius-md);
	color: var(--hs-text);
	list-style: none;
}

body.hs-account .woocommerce-message::before,
body.hs-account .woocommerce-info::before,
body.hs-account .woocommerce-error::before {
	content: none;
}

body.hs-account .woocommerce-error {
	background: #fdf3f3;
	border-color: #f3d6d6;
	color: #7a2020;
}

/* ============================================================== mobile == */

@media (max-width: 991.98px) {
	body.hs-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hs-space-5);
	}
	body.hs-account .woocommerce-MyAccount-navigation {
		position: static;
	}
	body.hs-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--hs-space-1);
	}
	body.hs-account .woocommerce-MyAccount-navigation li {
		margin: 0;
	}
	body.hs-account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
	body.hs-account .hs-acct-hello__name {
		font-size: var(--hs-text-2xl);
	}
}