/**
 * AF Commerce — My Account.
 *
 * WooCommerce renders the navigation and every endpoint; this turns the default
 * two-block stack into a sidebar layout and restyles the tables.
 */

.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--af-space-xl);
	align-items: start;
}

@media (min-width: 782px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
	}

	.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
	.woocommerce-account .af-account-header {
		grid-column: 1 / -1;
	}
}

/* Logged-out state is a centred pair of forms, not a dashboard. */
.woocommerce-account:not(.logged-in) .woocommerce {
	max-width: 900px;
	margin-inline: auto;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 782px) {
	.woocommerce-account:not(.logged-in) .woocommerce:has(.register) {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-MyAccount-navigation {
	min-width: 0;
	padding: var(--af-space-sm);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius-md);
	background: var(--af-surface);
}

.woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 12px;
	border-radius: var(--af-radius-sm);
	color: var(--af-text);
	font-size: var(--af-fs-small);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover {
	background: var(--af-background);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--af-primary);
	color: #fff;
	font-weight: 600;
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--af-error);
}

.woocommerce-MyAccount-content {
	min-width: 0;
}

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

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-size: var(--af-fs-h4);
}

.woocommerce-account .woocommerce-Address {
	padding: var(--af-space-lg);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius-md);
}

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	gap: var(--af-space-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

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

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

.woocommerce-account address {
	margin: var(--af-space-sm) 0 0;
	color: var(--af-secondary);
	font-style: normal;
	line-height: 1.7;
}

.woocommerce-orders-table__cell-order-actions {
	text-align: end;
}

.woocommerce-orders-table__cell-order-actions .button {
	margin-inline-start: 4px;
}

.woocommerce-EditAccountForm fieldset {
	margin-top: var(--af-space-lg);
	padding: var(--af-space-lg);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius-md);
}

.woocommerce-EditAccountForm legend {
	padding-inline: var(--af-space-sm);
	font-weight: 600;
}

.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
}

.woocommerce-LostPassword {
	margin-top: var(--af-space-sm);
	font-size: var(--af-fs-caption);
}

.woocommerce-privacy-policy-text {
	color: var(--af-muted);
	font-size: var(--af-fs-caption);
}

/* Downloads and order details reuse the shop table styling from cart CSS,
   which is not loaded here, so the minimum is repeated. */
.woocommerce-account table.shop_table {
	width: 100%;
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	padding: var(--af-space-md);
	text-align: start;
}

.woocommerce-account table.shop_table th {
	background: var(--af-surface);
	font-size: var(--af-fs-caption);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce-account table.shop_table tbody tr + tr td {
	border-top: 1px solid var(--af-border);
}

@media (max-width: 600px) {
	.woocommerce-account table.shop_table thead {
		display: none;
	}

	.woocommerce-account table.shop_table tr {
		display: grid;
		gap: 4px;
		padding: var(--af-space-md);
		border-bottom: 1px solid var(--af-border);
	}

	.woocommerce-account table.shop_table td {
		display: flex;
		justify-content: space-between;
		gap: var(--af-space-md);
		padding: 0;
		border: 0;
		font-size: var(--af-fs-small);
	}

	/* The stacked rows lose their header, so the label comes from data-title. */
	.woocommerce-account table.shop_table td::before {
		content: attr(data-title);
		color: var(--af-muted);
		font-size: var(--af-fs-caption);
	}

	.woocommerce-orders-table__cell-order-actions {
		text-align: start;
	}
}