/**
 * My account: woocommerce/account-page.php, woocommerce/myaccount/,
 * template-parts/account/ (frame 2404:1265 at 1660; no mobile frame).
 *
 * From 1280 (2404:1848): 32px under the title card section, the 300px
 * sidebar (navigation card, then the green help card, 16px apart) and the
 * content 32px beside it, 120px under it. Cards white with the line border,
 * radius 30; content blocks 24px apart.
 * Below 1280 (not designed): one column, the navigation folded under the
 * profile at the top (assets/js/account.js), the content, the help card.
 * The orders table from 1024; below that each order is a small card. Below
 * 768 cards radius 20 with 20px side padding, stats and banner stacked.
 */

body.xat-account {
	background: var(--color-white);
}

/* Breadcrumb (2404:1391): 20px above, 24px under, as on the content pages. */
body.xat-account .site-main > .breadcrumb {
	padding-top: 20px;
	padding-bottom: var(--space-md);
}

.account {
	display: grid;
	grid-template-areas:
		"nav"
		"content"
		"help";
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
	padding-bottom: 0; /* client, 19 Oct 2026 */
}

/* Without Buy again under it (every page but the dashboard, or a dashboard
 * with nothing to buy again) the section space stays above the footer. */
.account:not(:has(+ .account-buy-again)) {
	padding-bottom: var(--section-space);
}

.account-nav {
	grid-area: nav;
}

.account__content {
	display: flex;
	grid-area: content;
	flex-direction: column;
	gap: var(--space-md);
	min-width: 0;
}

.account-help {
	grid-area: help;
}

/* WooCommerce's notices box is empty unless there is a message. */
.account__content > .woocommerce-notices-wrapper:empty {
	display: none;
}

/* Cards */

.account-card {
	box-sizing: border-box;
	border: 1px solid var(--color-line);
	border-radius: 20px;
	background: var(--color-white);
}

/* Navigation card (2404:1850): profile, line, the pages, line, Log out. */

.account-nav__details {
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid var(--color-line);
	border-radius: 20px;
	background: var(--color-white);
}

.account-nav__profile {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 0;
	list-style: none;
	cursor: pointer;
}

.account-nav__profile::-webkit-details-marker {
	display: none;
}

.account-nav__details[open] .account-nav__profile {
	padding-bottom: 16px;
}

.account-nav__avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-pill);
	background: var(--color-orange);
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h4);
	line-height: var(--leading-h4);
}

.account-nav__who {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.account-nav__name {
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h4);
	line-height: var(--leading-h4);
}

.account-nav__email {
	overflow: hidden;
	color: var(--color-muted);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-nav__caret {
	flex: none;
	color: var(--color-ink);
	transition: transform 0.2s ease;
}

.account-nav__details[open] .account-nav__caret {
	transform: rotate(180deg);
}

.account-nav__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--color-line);
	list-style: none;
}

.account-nav__link {
	display: flex;
	gap: 12px;
	align-items: center;
	min-height: 44px;
	box-sizing: border-box;
	padding: 12px;
	border-radius: 16px;
	color: var(--color-ink);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
	text-decoration: none;
}

.account-nav__link:hover,
.account-nav__link.is-current {
	background: var(--color-cream);
}

.account-nav__icon {
	flex: none;
}

.account-nav__label {
	flex: 1 1 auto;
}

.account-nav__badge {
	flex: none;
	padding: 2px 8px;
	border-radius: var(--radius-pill);
	background: var(--color-cream);
	font-size: var(--text-label-s);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
}

.account-nav__link:hover .account-nav__badge,
.account-nav__link.is-current .account-nav__badge {
	background: var(--color-white);
}

.account-nav__arrow {
	flex: none;
	color: var(--color-orange);
}

.account-nav__item--logout {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid var(--color-line);
}

.account-nav__link--logout {
	color: var(--color-orange);
}

/* Help card (2404:1894): green dark, yellow icon circle, H4, Body/S, yellow link. */

.account-help {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	box-sizing: border-box;
	padding: 24px 20px;
	border-radius: 20px;
	background: var(--color-green-dark);
	color: var(--color-white);
}

.account-help__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	background: var(--color-yellow);
	color: var(--color-ink);
}

.account-help__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h4);
	line-height: var(--leading-h4);
}

.account-help__text {
	margin: 0;
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.account-help__link {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	min-height: 44px;
	color: var(--color-yellow);
	font-size: var(--text-body-s);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
	text-decoration: none;
}

.account-help__link:hover {
	color: var(--color-white);
}

/* Stats (2404:1905): three cards, icon circle, label, value in Heading/H3, note. */

.account-stats {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Phones: the icon beside the three lines, so the stats stay short. */
.account-stat {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 2px var(--space-sm);
	align-items: center;
	padding: 20px;
}

.account-stat > :not(.account-stat__icon) {
	grid-column: 2;
}

.account-stat__icon {
	display: flex;
	grid-row: 1 / span 3;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-pill);
	color: var(--color-ink);
}

.account-stat__icon--cream {
	background: var(--color-cream);
}

.account-stat__icon--yellow {
	background: var(--color-yellow);
}

.account-stat__icon--orange {
	background: var(--color-orange);
	color: var(--color-white);
}

.account-stat__label,
.account-stat__note {
	color: var(--color-muted);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.account-stat__value {
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h3);
	line-height: var(--leading-h3);
}

/* Free gift banner (2404:1930): cream, orange icon circle, two lines, white pill. */

.account-banner {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: flex-start;
	padding: 20px;
	border-radius: 20px;
	background: var(--color-cream);
}

.account-banner__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	background: var(--color-orange);
	color: var(--color-white);
}

.account-banner__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	margin: 0;
}

.account-banner__title {
	color: var(--color-ink);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
}

.account-banner__note {
	color: var(--color-muted);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.account-banner__button {
	width: 100%;
}

/* Section cards (Recent orders 2404:1941, Addresses 2404:2011, Account details 2404:2041). */

.account-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
	padding: 24px 20px;
}

.account-section__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-sm);
	align-items: center;
	justify-content: space-between;
}

.account-section__title {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h3);
	line-height: var(--leading-h3);
}

.account-more {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	color: var(--color-orange);
	font-size: var(--text-body-s);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
	text-decoration: none;
}

.account-more:hover {
	color: var(--color-ink);
}

/* Phones: a 44px tap target. */
@media (max-width: 767px) {
	.account-more {
		min-height: 44px;
	}
}

.account-empty {
	margin: 0;
	color: var(--color-muted);
}

.account-empty a {
	color: var(--color-ink);
	font-weight: var(--weight-semibold);
}

/* Orders table: below 1024 one card per order. */

.account-orders {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.account-orders thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.account-orders tbody {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.account-orders__row {
	display: grid;
	grid-template-areas:
		"number status"
		"meta meta"
		"total action";
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px 12px;
	align-items: center;
	padding: var(--space-sm);
	border-radius: 16px;
	background: var(--color-cream);
}

.account-orders__row > * {
	padding: 0;
	text-align: left;
}

.account-orders__number {
	grid-area: number;
	color: var(--color-ink);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
}

.account-orders__date,
.account-orders__items {
	grid-row: 2;
	color: var(--color-muted);
	font-size: var(--text-body-m);
	line-height: var(--leading-body-m);
}

.account-orders__date {
	grid-column: 1 / -1;
}

/* Date and items share the second row: "12 Oct 2026 · 3 items". */
.account-orders__items {
	grid-column: 1 / -1;
	justify-self: end;
}

.account-orders__status {
	grid-area: status;
	justify-self: end;
}

.account-orders__total {
	grid-area: total;
	color: var(--color-ink);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
}

.account-orders__action {
	grid-area: action;
	justify-self: end;
}

/* Status pill (2404:1959, 1973, 2001): 6px dot, Label/S. */
.account-status {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
	white-space: nowrap;
}

.account-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill);
	background: currentColor;
}

.account-status--active {
	background: var(--color-yellow);
	color: var(--color-ink);
}

.account-status--done {
	background: color-mix(in srgb, var(--color-green) 14%, transparent);
	color: var(--color-green);
}

.account-status--waiting {
	background: color-mix(in srgb, var(--color-orange) 14%, transparent);
	color: var(--color-orange);
}

.account-status--closed {
	background: var(--color-cream);
	color: var(--color-muted);
}

.account-orders__row .account-status--closed {
	background: var(--color-white);
}

/* "View": ink outline pill (2404:1964). */
.account-pill {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-pill);
	color: var(--color-ink);
	font-size: var(--text-body-s);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
	text-decoration: none;
	white-space: nowrap;
}

.account-pill:hover {
	background: var(--color-ink);
	color: var(--color-white);
}

/* Addresses and Account details (2404:2010). */

.account-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.account-addresses__boxes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.account-address {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	padding: 20px;
	border-radius: 20px;
	background: var(--color-cream);
}

.account-address__top {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0;
	color: var(--color-ink);
}

.account-address__label {
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
	text-transform: uppercase;
}

.account-address__tag {
	padding: 2px 8px;
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-green);
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
}

.account-address__lines {
	margin: 0;
	color: var(--color-ink);
	font-size: var(--text-body-m);
	font-style: normal;
	line-height: var(--leading-body-m);
}

.account-address__lines--empty {
	color: var(--color-muted);
}

.account-details {
	gap: 14px;
}

.account-details__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

.account-details__list div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.account-details__list dt {
	color: var(--color-muted);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.account-details__list dd {
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--color-ink);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
}

.account-details__button {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 12px 20px;
	border-radius: var(--radius-pill);
	background: var(--color-black);
	color: var(--color-white);
	font-size: var(--text-body-s);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
	text-decoration: none;
}

.account-details__button:hover {
	background: var(--color-green);
}

/* Endpoints (not designed): leads, sub headings, pagination, one order, notes. */

.account-lead {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--text-body-m);
	line-height: var(--leading-body-m);
}

.account-subtitle {
	margin: var(--space-xs) 0 0;
	padding: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h4);
	line-height: var(--leading-h4);
}

.account-pagination {
	display: flex;
	gap: var(--space-xs);
	justify-content: space-between;
}

.account-pagination .account-pill:only-child {
	margin-left: auto;
}

.account-facts {
	margin: 0;
}

.account-notes {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.account-notes__item {
	padding: var(--space-sm) 20px;
	border-radius: var(--radius-md);
	background: var(--color-cream);
}

.account-notes__date {
	color: var(--color-muted);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.account-notes__text p {
	margin: 4px 0 0;
}

/* One order: the summary after the order and address cards (the checkout
 * puts it first on phones and makes it sticky). */
.account__content > .cart-summary {
	position: static;
	order: 0;
	margin: 0;
}

/* Forms: the checkout's fields (checkout.css .checkout-fields), the rows here. */

.account-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin: 0;
}

.account-form .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
	margin: 0;
	padding: 0;
}

.account-form__hint {
	color: var(--color-muted);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.account-form__fieldset {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.account-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-md);
	align-items: center;
}

.account-form__privacy:empty {
	display: none;
}

.account-form__privacy,
.account-form__privacy p {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.account-form__privacy a {
	color: var(--color-ink);
}

/* Log in and Create an account: side by side from 1024. */
.account-auth {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
	align-items: start;
	padding-bottom: var(--section-space);
}

/* WooCommerce prints the visitor pages' notices above the cards. */
body.xat-account .woocommerce > .woocommerce-notices-wrapper:not(:empty),
body.xat-account .woocommerce > .woocommerce-error,
body.xat-account .woocommerce > .woocommerce-message,
body.xat-account .woocommerce > .woocommerce-info {
	box-sizing: content-box;
	max-width: var(--container-max);
	margin: 0 auto var(--space-md);
	padding-inline: var(--container-gutter);
}

.xat-account .woocommerce-error,
.xat-account .woocommerce-message,
.xat-account .woocommerce-info {
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-cream);
	color: var(--color-ink);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
	list-style: none;
}

.xat-account .woocommerce-error {
	border-color: var(--color-orange);
}

.xat-account .woocommerce-error li + li {
	margin-top: 4px;
}

/* A notice with a button (e.g. WooCommerce's "Confirm email address" to link
 * past guest orders): the text, then the button as an outline pill. */
.xat-account .woocommerce-info:has(.button),
.xat-account .woocommerce-message:has(.button) {
	display: flex;
	flex-wrap: wrap;
	gap: 12px var(--space-sm);
	align-items: center;
	justify-content: space-between;
}

.xat-account .woocommerce-info .button,
.xat-account .woocommerce-message .button {
	display: inline-flex;
	order: 1;
	align-items: center;
	min-height: 44px;
	box-sizing: border-box;
	padding: 10px 16px;
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
	text-decoration: none;
	white-space: nowrap;
}

.xat-account .woocommerce-info .button:hover,
.xat-account .woocommerce-message .button:hover {
	background: var(--color-ink);
	color: var(--color-white);
}

.xat-account .woocommerce-notices-wrapper .woocommerce-error,
.xat-account .woocommerce-notices-wrapper .woocommerce-message,
.xat-account .woocommerce-notices-wrapper .woocommerce-info {
	box-sizing: border-box;
}

.xat-account .woocommerce-message a,
.xat-account .woocommerce-error a,
.xat-account .woocommerce-info a {
	color: var(--color-ink);
	font-weight: var(--weight-semibold);
}

/* Lists: saved payment methods and vouchers, cream boxes as the address boxes. */

.account-list,
.account-vouchers {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.account-list__item,
.account-voucher {
	display: flex;
	flex-wrap: wrap;
	gap: 12px var(--space-sm);
	align-items: center;
	padding: 20px;
	border-radius: 20px;
	background: var(--color-cream);
}

.account-list__main {
	flex: 1 1 auto;
	color: var(--color-ink);
	font-weight: var(--weight-semibold);
}

.account-list__note {
	color: var(--color-muted);
	font-size: var(--text-body-s);
}

.account-list__actions {
	display: flex;
	gap: var(--space-xs);
}

.account-voucher__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	background: var(--color-orange);
	color: var(--color-white);
}

.account-voucher__body {
	display: flex;
	flex: 1 1 160px;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.account-voucher__amount {
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h4);
	line-height: var(--leading-h4);
}

.account-voucher__note {
	color: var(--color-muted);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.account-voucher__code {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) 12px;
	align-items: center;
}

.account-voucher__code code {
	padding: 8px 14px;
	border: 1px dashed var(--color-ink);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-m);
}

.account-voucher .account-pill {
	background: var(--color-white);
}

.account-voucher .account-pill:hover {
	background: var(--color-ink);
}

/* Buy again (2404:1513): the product slider with its heading. */

/* The account section's 120px already sit above it. */
.account-buy-again {
	padding-top: 0;
}

@media (min-width: 768px) {
	.account-card,
	.account-nav__details,
	.account-help {
		border-radius: 30px;
	}

	.account-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.account-stat {
		display: flex;
		flex-direction: column;
		gap: 4px;
		align-items: flex-start;
		padding: 24px;
	}

	.account-stat__icon {
		margin-bottom: 12px;
	}

	.account-banner {
		flex-direction: row;
		align-items: center;
		padding: 20px 24px;
		border-radius: 24px;
	}

	.account-banner__button {
		width: auto;
	}

	.account-section {
		padding: 28px;
	}

	.account-addresses__boxes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.account-help {
		padding: 24px;
	}
}

/* The orders table (2404:1948): cream head row, columns 150 / 150 / 110 / 170 / 110, the button at the end. */
@media (min-width: 1024px) {
	.account-orders thead {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}

	/* 16px between the rows under each line, as the frame's 16px gap; the
	 * outer spacing is taken back so the card keeps its 16px and 28px. */
	.account-orders {
		margin: -16px 0;
		border-spacing: 0 16px;
	}

	.account-orders tbody {
		display: table-row-group;
	}

	.account-orders__head th {
		padding: 12px 16px;
		background: var(--color-cream);
		color: var(--color-muted);
		font-size: var(--text-label-s);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-label-s);
		line-height: var(--leading-label-s);
		text-align: left;
		text-transform: uppercase;
	}

	.account-orders__head th:first-child {
		border-radius: 12px 0 0 12px;
	}

	.account-orders__head th:last-child {
		border-radius: 0 12px 12px 0;
	}

	.account-orders__head th:nth-child(1),
	.account-orders__head th:nth-child(2) {
		width: 150px;
	}

	.account-orders__head th:nth-child(3),
	.account-orders__head th:nth-child(5) {
		width: 110px;
	}

	.account-orders__head th:nth-child(4) {
		width: 170px;
	}

	.account-orders__row {
		display: table-row;
		background: none;
	}

	.account-orders__row > * {
		padding: 16px;
		border-bottom: 1px solid var(--color-line);
		vertical-align: middle;
	}

	.account-orders__action {
		text-align: right;
	}

	.account-orders__row .account-pill {
		min-height: 0;
	}

	.account-orders__row .account-status--closed {
		background: var(--color-cream);
	}

	.account-row {
		flex-direction: row;
		align-items: stretch;
	}

	.account-auth {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.account-auth--single {
		grid-template-columns: minmax(0, 640px);
	}

	/* As framed: the addresses card as tall as its boxes, the details card the row's height. */
	.account-row .account-addresses {
		flex: 1 1 0;
		align-self: flex-start;
	}

	.account-row .account-details {
		flex: none;
		width: 340px;
	}
}

/* Two columns as framed: the 300px sidebar, 32px gap. */
@media (min-width: 1280px) {
	.account {
		grid-template-areas:
			"nav content"
			"help content";
		grid-template-columns: 300px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		gap: var(--space-sm) 32px;
		padding-top: 32px;
	}

	.account-help {
		align-self: start;
	}

	.account-help__link {
		min-height: 0;
	}

	.account-nav__profile {
		padding: 8px 0 16px 8px;
		cursor: default;
		pointer-events: none;
	}

	.account-nav__caret {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.account-nav__caret {
		transition: none;
	}
}