/**
 * My Account
 *
 * Sidebar navigation plus a content card, sharing the header band, glossy card
 * and form-field language already established by the cart and checkout.
 * checkout.css is loaded alongside this, so the field styling (inputs, labels,
 * select2, validation states) is inherited rather than repeated - the rules
 * there are scoped to .ml-checkout-page, and the account equivalents are
 * mirrored below for .ml-account-page.
 */

/* -------------------------------------------------------------------------
 * Header band
 * ---------------------------------------------------------------------- */

.ml-account__head {
	background: linear-gradient(180deg, var(--ml-stage) 0%, var(--ml-stage-soft) 100%);
	padding: 22px 24px 26px;
}

.ml-account__head-inner {
	max-width: var(--ml-container);
	margin: 0 auto;
}

.ml-account__title {
	margin: 0 0 14px;
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ml-navy);
}

.ml-account__sub {
	margin: 0;
	font-size: 15px;
	color: var(--ml-body);
}

/* -------------------------------------------------------------------------
 * Body layout
 * ---------------------------------------------------------------------- */

.ml-account__body {
	padding: 28px 24px 56px;
	background: var(--ml-white);
}

.ml-account__body-inner {
	max-width: var(--ml-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 288px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

/* -------------------------------------------------------------------------
 * Sidebar navigation
 * ---------------------------------------------------------------------- */

.ml-account__nav {
	position: sticky;
	top: 24px;
	padding: 0;
	border-radius: 14px;
	overflow: hidden;
}

/* The nav is a resting surface, not a target - keep the depth, drop the tilt
   and the sheen that .ml-glass would otherwise apply. */
.ml-account__nav.ml-glass:hover,
.ml-account__nav.ml-glass:focus-within {
	transform: none;
}

.ml-account__nav.ml-glass::after {
	display: none;
}

.ml-account__card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 18px;
	background: linear-gradient(135deg, var(--ml-navy) 0%, #14395f 100%);
	color: var(--ml-white);
}

.ml-account__avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ml-cyan);
	color: var(--ml-white);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.ml-account__ident {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ml-account__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--ml-white);
}

.ml-account__email {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.66);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ml-account__nav ul {
	list-style: none;
	margin: 0;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ml-account__nav li {
	margin: 0;
}

.ml-account__nav li a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 12px;
	border-radius: 9px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ml-body);
	text-decoration: none;
	transition: background-color var(--ml-t-base) var(--ml-e-standard), color var(--ml-t-base) var(--ml-e-standard), transform var(--ml-t-base) var(--ml-e-standard);
}

.ml-account__nav li a:hover,
.ml-account__nav li a:focus-visible {
	background: #f1f8fd;
	color: var(--ml-navy);
	transform: translateX(2px);
	outline: none;
}

.ml-account__nav-icon {
	flex: 0 0 auto;
	color: var(--ml-muted);
	transition: color var(--ml-t-base) var(--ml-e-standard);
}

.ml-account__nav li a:hover .ml-account__nav-icon {
	color: var(--ml-cyan);
}

.ml-account__nav li.is-active a {
	background: var(--ml-cyan);
	color: var(--ml-white);
	font-weight: 600;
	box-shadow: 0 10px 20px -12px rgba(0, 175, 240, 0.95);
}

.ml-account__nav li.is-active a .ml-account__nav-icon,
.ml-account__nav li.is-active a:hover .ml-account__nav-icon {
	color: var(--ml-white);
}

/* Log out reads as an exit, not a destination. */
.ml-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--ml-line);
}

.ml-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: #fdecec;
	color: #d33a3a;
}

.ml-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout a:hover .ml-account__nav-icon {
	color: #d33a3a;
}

/* -------------------------------------------------------------------------
 * Content card
 * ---------------------------------------------------------------------- */

.ml-account__content {
	min-width: 0;
	padding: 26px;
	border-radius: 14px;
}

.ml-account__content.ml-glass:hover,
.ml-account__content.ml-glass:focus-within {
	transform: none;
}

.ml-account__content.ml-glass::after {
	display: none;
}

.ml-account__heading {
	margin: 0 0 22px;
	font-size: 20px;
	font-weight: 700;
	color: var(--ml-navy);
}

/* margin-bottom only, (0,2,0): Astra's `.woocommerce-js h2 { margin-bottom: .7em }` (0,1,1) beat the rule above. 22px is the spacing scale (CLAUDE.md). */
.ml-account__heading.ml-account__heading {
	margin-bottom: 22px;
}

.ml-account__heading--spaced {
	margin-top: 34px;
}

.ml-account__lede {
	margin: -8px 0 22px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ml-body);
}

/* (0,2,0): Astra's `.entry-content p { margin-bottom: 1.6em }` (0,1,1) made this 23.2px. With the heading's 22px and the -8px pull above, heading -> lede is 14px. */
.ml-account__lede.ml-account__lede {
	margin-bottom: 22px;
}

/* -------------------------------------------------------------------------
 * Dashboard stat tiles
 * ---------------------------------------------------------------------- */

.ml-account__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
	gap: 14px;
}

.ml-account__stat > a,
.ml-account__stat > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 16px 18px;
	border: 1px solid var(--ml-line);
	border-radius: 12px;
	background: var(--ml-stage-soft);
	text-decoration: none;
	transition: transform var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard), border-color var(--ml-t-base) var(--ml-e-standard), background-color var(--ml-t-base) var(--ml-e-standard);
}

.ml-account__stat > a:hover,
.ml-account__stat > a:focus-visible {
	transform: perspective(900px) rotateX(1.6deg) translateY(-3px);
	border-color: #bfe3f7;
	background: var(--ml-white);
	box-shadow: 0 20px 34px -24px rgba(10, 37, 64, 0.75);
	outline: none;
}

.ml-account__stat-label {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

.ml-account__stat-value {
	font-size: 22px;
	font-weight: 700;
	color: var(--ml-navy);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.ml-account__stat-meta {
	font-size: 12.5px;
	color: var(--ml-muted);
}

/* -------------------------------------------------------------------------
 * Dashboard shortcuts
 * ---------------------------------------------------------------------- */

.ml-account__shortcuts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ml-account__shortcuts a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 18px;
	border: 1px solid var(--ml-line);
	border-radius: 12px;
	background: var(--ml-white);
	text-decoration: none;
	transition: transform var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard), border-color var(--ml-t-base) var(--ml-e-standard);
}

.ml-account__shortcuts a:hover,
.ml-account__shortcuts a:focus-visible {
	transform: translateY(-2px);
	border-color: #bfe3f7;
	box-shadow: 0 18px 30px -24px rgba(10, 37, 64, 0.75);
	outline: none;
}

.ml-account__shortcuts .ml-account__nav-icon {
	width: 22px;
	height: 22px;
	color: var(--ml-cyan);
}

.ml-account__shortcuts span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ml-account__shortcuts strong {
	font-size: 15px;
	font-weight: 600;
	color: var(--ml-navy);
}

.ml-account__shortcuts em {
	font-style: normal;
	font-size: 13px;
	color: var(--ml-muted);
}

.ml-account__signout {
	margin: 26px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--ml-line);
	font-size: 13.5px;
	color: var(--ml-muted);
}

.ml-account__signout a {
	color: var(--ml-cyan);
	font-weight: 600;
	text-decoration: none;
}

/*
 * Cyan + underline on hover and keyboard focus, like every text link.
 * Astra's inline `.ast-single-post .entry-content .woocommerce a { text-decoration:
 * none }` is (0,3,1) and reaches every link inside a WooCommerce shortcode
 * wrapper - cart, checkout and all account screens. The doubled container
 * class plus [href] makes this (0,4,1), one tier above (2026-09-15).
 */
.ml-account__signout.ml-account__signout a[href]:hover,
.ml-account__signout.ml-account__signout a[href]:focus-visible {
	color: var(--ml-cyan);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Empty states
 * ---------------------------------------------------------------------- */

.ml-account__empty {
	padding: 34px 24px 30px;
	border: 1px dashed #cddce8;
	border-radius: 14px;
	background: var(--ml-stage-soft);
	text-align: center;
}

.ml-account__empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--ml-white);
	color: var(--ml-cyan);
}

.ml-account__empty-title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 700;
	color: var(--ml-navy);
}

.ml-account__empty-text {
	margin: 0 auto 22px;
	max-width: 42ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ml-body);
}

.ml-account__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 26px;
	border-radius: 10px;
	background: var(--ml-cyan);
	color: var(--ml-white);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 14px 26px -16px rgba(var(--ml-shadow-tint), 0.95);
	transition: transform var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

.ml-account__cta:hover,
.ml-account__cta:focus-visible {
	background: var(--ml-cyan-dark);
	transform: translateY(-2px);
	color: var(--ml-white);
	box-shadow: 0 22px 34px -16px rgba(var(--ml-shadow-tint), 1);
}

/* -------------------------------------------------------------------------
 * Orders table, laid out as cards
 * ---------------------------------------------------------------------- */

/*
 * (0,3,1): WooCommerce's `.woocommerce-js table.shop_table` (0,2,1) drew a 1px
 * --ast-border-color frame around the order cards - measured 2026-09-14.
 */
.ml-account__content table.woocommerce-orders-table.ml-orders {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	background: none;
}

.ml-orders thead {
	display: none;
}

.ml-orders tbody {
	display: block;
	width: 100%;
}

.ml-orders tbody tr.order {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	grid-template-areas: "number status total actions";
	align-items: center;
	gap: 6px 16px;
	padding: 16px 18px;
	margin-bottom: 12px;
	border-radius: 14px;
}

.ml-orders tbody tr.order.ml-glass:hover,
.ml-orders tbody tr.order.ml-glass:focus-within {
	transform: perspective(1400px) rotateX(1.1deg) translateY(-3px);
}

.ml-orders tbody th,
.ml-orders tbody td {
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.ml-orders .woocommerce-orders-table__cell-order-number {
	grid-area: number;
}

.ml-orders .woocommerce-orders-table__cell-order-number a {
	font-size: 16px;
	font-weight: 700;
	color: var(--ml-navy);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: color var(--ml-t-base) var(--ml-e-standard);
}

.ml-orders .woocommerce-orders-table__cell-order-number a:hover,
.ml-orders .woocommerce-orders-table__cell-order-number a:focus-visible {
	color: var(--ml-cyan);
}

/* The date sits under the order number rather than in its own column. */
.ml-orders .woocommerce-orders-table__cell-order-date {
	grid-area: number;
	align-self: end;
	margin-top: 24px;
	font-size: 12.5px;
	color: var(--ml-muted);
}

.ml-orders .woocommerce-orders-table__cell-order-status {
	grid-area: status;
}

.ml-orders .woocommerce-orders-table__cell-order-total {
	grid-area: total;
	white-space: nowrap;
	font-size: 14.5px;
	color: var(--ml-body);
	font-variant-numeric: tabular-nums;
}

.ml-orders .woocommerce-orders-table__cell-order-actions {
	grid-area: actions;
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

/* ---------- Status pill ---------- */

.ml-orders__status {
	display: inline-flex;
	align-items: center;
	padding: 5px 13px;
	border-radius: 999px;
	background: #eef2f6;
	color: var(--ml-body);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

.ml-orders__status[data-status="completed"] {
	background: #e6f7ec;
	color: #1c8544;
}

.ml-orders__status[data-status="processing"],
.ml-orders__status[data-status="on-hold"] {
	background: #e4f4fd;
	color: #0679a8;
}

.ml-orders__status[data-status="pending"] {
	background: #fdf3e1;
	color: #a5701a;
}

.ml-orders__status[data-status="cancelled"],
.ml-orders__status[data-status="failed"] {
	background: #fdecec;
	color: #c02f2f;
}

.ml-orders__status[data-status="refunded"] {
	background: #f0ecfa;
	color: #5b45a8;
}

/* ---------- Row actions ---------- */

/*
 * (0,3,0) via the `.ml-account__content` ancestor plus `.button`.
 *
 * The markup is `<a class="woocommerce-button button ml-orders__action view">`,
 * so Astra's inline `.woocommerce-js a.button` at (0,2,1) reached it and this
 * block at (0,1,0) lost - the buttons rendered with Astra's 30px radius and
 * 10px/20px padding rather than the 9px radius and 38px height set here. The
 * COLOURS happened to survive scrutiny because this is a ghost button and
 * Astra's outline treatment looks similar; the geometry did not.
 *
 * The ancestor is `.ml-account__content`, not `.ml-orders`: the previous/next
 * pagination buttons carry the same class but sit in `.ml-orders__pagination`,
 * a SIBLING of the table, so an `.ml-orders` ancestor would miss them.
 */
.ml-account__content .ml-orders__action.button {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 18px;
	border: 1px solid var(--ml-cyan);
	border-radius: 9px;
	background: var(--ml-white);
	color: var(--ml-cyan);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--ml-t-base) var(--ml-e-standard), background-color var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

/* (0,4,0), clearing `.woocommerce-js a.button:hover` at (0,3,1). Geometry is
   not restated - the rest rule above still matches while hovered. */
.ml-account__content .ml-orders__action.button:hover,
.ml-account__content .ml-orders__action.button:focus-visible {
	transform: translateY(-2px);
	background: #f1fbff;
	color: var(--ml-cyan);
	box-shadow: 0 12px 22px -14px rgba(var(--ml-shadow-tint), 0.9);
}

/* No author outline existed and Astra's `button:focus { outline: 0 }` (0,1,1)
   suppressed the browser default - see the matching note in cart.css. */
.ml-account__content .ml-orders__action.button:focus-visible {
	outline: 2px solid var(--ml-navy);
	outline-offset: 2px;
}

.ml-orders__pagination {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 18px;
}

/* -------------------------------------------------------------------------
 * Addresses
 * ---------------------------------------------------------------------- */

.ml-addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.ml-address {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: auto;
	float: none;
	padding: 20px;
	border-radius: 14px;
}

.ml-address.ml-glass:hover,
.ml-address.ml-glass:focus-within {
	transform: perspective(1000px) rotateX(1.4deg) translateY(-3px);
}

.ml-address__head h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--ml-navy);
}

.ml-address address {
	flex: 1 1 auto;
	margin: 0;
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--ml-body);
}

.ml-address__none {
	color: var(--ml-muted);
}

.ml-address__edit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 18px;
	border: 1px solid var(--ml-cyan);
	border-radius: 9px;
	background: var(--ml-white);
	color: var(--ml-cyan);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: transform var(--ml-t-base) var(--ml-e-standard), background-color var(--ml-t-base) var(--ml-e-standard);
}

.ml-address__edit:hover,
.ml-address__edit:focus-visible {
	transform: translateY(-2px);
	background: #f1fbff;
	color: var(--ml-cyan);
}

/* -------------------------------------------------------------------------
 * Login / lost password
 * ---------------------------------------------------------------------- */

/*
 * THE LOGGED-OUT SCREEN DOES NOT USE `my-account.php`. WooCommerce's
 * `[woocommerce_my_account]` shortcode renders `form-login.php` directly when
 * nobody is signed in, so there is no `.ml-account__body-inner`, no
 * `.ml-account__content` and no header band here - the chain is
 * `.entry-content > .woocommerce > .ml-login`. That `.woocommerce` DIV is the
 * shortcode's own wrapper, and it is what puts every Astra WooCommerce rule in
 * reach of this form even though `<body>` carries only `woocommerce-page`.
 */
.ml-login {
	max-width: var(--ml-container);
	margin: 0 auto;
	padding: 40px 24px 48px;
}

.ml-login__set {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	max-width: 440px;
	margin: 0 auto;
}

.ml-login--split .ml-login__set {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	max-width: 900px;
}

/*
 * (0,4,0), AND THIS IS THE WHOLE REASON THE CARD WAS ~170px WIDE.
 *
 * The markup carries WooCommerce's own `u-column1 col-1` classes so its
 * scripts and plugins keep working, and Astra styles those for a real
 * two-column layout:
 *
 *     .woocommerce .col2-set .col-1 { width: 48%; float: left }   (0,3,0)
 *
 * Registration is off, so there is only ONE column - and it was being sized to
 * 48% of the 480px set, i.e. 230px, of which 56px was this rule's own padding.
 * 174px of content, which is exactly why "Username or email address" and
 * "Remember me" both wrapped onto two lines.
 *
 * `width: auto; float: none` was already here and was losing at (0,1,0).
 *
 * (0,3,0) would have been ENOUGH - corrected 2026-09-07. An earlier revision
 * justified the fourth class by claiming a (0,3,0) tie with Astra would be lost
 * on source order; it would not. The child theme's stylesheets load after
 * Astra's inline `<style>`, so ties go to the child theme.
 *
 * The fourth class stays because it costs nothing and states the dependency
 * explicitly - `.woocommerce` is the shortcode wrapper this screen lives in -
 * but it is belt and braces, not a requirement.
 *
 * `.ml-glass` was NOT used for the fourth class on purpose: the lost-password
 * form drops it when it is not standalone, so keying on it would leave that
 * screen at the broken width.
 */
.woocommerce .ml-login .ml-login__set .ml-login__col {
	width: auto;
	float: none;
	padding: 28px;
	border-radius: 14px;
}

/*
 * THE STANDALONE LOST-PASSWORD CARD - the same card as log in.
 *
 * A logged-out visitor gets `form-lost-password.php` directly: the FORM is the
 * card (`ml-login__col ml-glass`) and it sits straight inside `.ml-login`, with
 * no `.ml-login__set` around it. The rule above therefore never reached it, so
 * the card rendered 1312px wide with 0 padding and .ml-glass's 14px corners
 * against log in's 440px / 28px / 14px.
 *
 * (0,4,1), and the width lives here rather than on a wrapper because this
 * template has no wrapper to put it on.
 */
.woocommerce .ml-login > form.ml-login__col.lost_reset_password {
	max-width: 440px;
	margin-inline: auto;
	padding: 28px;
	border-radius: 14px;
}

.ml-login__col.ml-glass:hover,
.ml-login__col.ml-glass:focus-within {
	transform: none;
}

.ml-login__title {
	margin: 0 0 22px;
	font-size: 21px;
	font-weight: 700;
	color: var(--ml-navy);
}

/* margin-bottom only, (0,2,0): Astra's `.woocommerce-js h2 { margin-bottom: .7em }` (0,1,1) beat the rule above. 22px is the spacing scale (CLAUDE.md). */
.ml-login__title.ml-login__title {
	margin-bottom: 22px;
}

/* Lost password: the title is followed by a note, not the form - heading -> text is 14px. */
.ml-login__title.ml-login__title:has(+ .ml-login__note) {
	margin-bottom: 14px;
}

.ml-login__note {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ml-body);
}

/* (0,2,0): Astra's `.entry-content p { margin-bottom: 1.6em }` beat the rule above (22.4px). */
.ml-login__note.ml-login__note {
	margin-bottom: 22px;
}

/*
 * THE SECOND CARD INSIDE THE CARD.
 *
 * Astra's inline CSS ships
 * `body .woocommerce form.login, … form.register { border: 1px solid
 * var(--ast-border-color); padding: 20px; margin: 2em 0; border-radius: 5px }`
 * at (0,2,2) - a full bordered, padded, rounded box on the <form> that sits
 * INSIDE `.ml-login__col`. That is the nested double border.
 *
 * (0,3,1) here, which clears (0,2,2) on class count. The form is a plain flow
 * container; the card around it is the only card.
 */
.ml-login .ml-login__col form.login,
.ml-login .ml-login__col form.register,
.ml-login .ml-login__col form.lost_reset_password {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/*
 * The remember-me / lost-password row. One line: checkbox left, link right.
 *
 * THE THREE `!important`s THAT USED TO BE HERE ARE GONE. They existed to beat
 * WooCommerce's `.form-row label` and Astra's form styling from a single class;
 * scoping to `.ml-login .ml-login__col` reaches (0,3,x) and wins on
 * specificity instead, which is the same move the rest of this pass makes.
 */
.ml-login .ml-login__col .ml-login__actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin: 4px 0 20px;
}

.ml-login .ml-login__col .ml-login__actions label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ml-body);
	cursor: pointer;
	white-space: nowrap;
}

.ml-login .ml-login__col .ml-login__actions label span {
	line-height: 1.3;
}

.ml-login .ml-login__col .ml-login__actions input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--ml-cyan);
}

.ml-login .ml-login__col .ml-login__actions input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ml-navy);
	outline-offset: 2px;
}

/*
 * The password field's show/hide control.
 *
 * WooCommerce emits `<span class="password-input"><input><span
 * class="show-password-input"></span></span>` and Astra positions the toggle
 * `right: 0.7em; top: 50%`. Nothing in this theme sized it or reserved room
 * for it, so the icon sat over the typed characters and its hit area was
 * whatever the icon font happened to paint.
 *
 * The input gets right padding to clear it; the toggle gets a real box,
 * centred on the field, with a focus ring. (0,3,1)+ throughout, above Astra's
 * (0,2,1) `.woocommerce form .show-password-input`.
 *
 * The account-details form carries the same markup and got none of this until
 * 2026-09-14 - its toggle measured 16x18px with Astra's 30px button radius.
 * Every rule below now names both forms.
 */
.ml-login .ml-login__col .password-input,
.ml-account-page .woocommerce-EditAccountForm .password-input {
	display: block;
	position: relative;
}

.ml-login .ml-login__col .password-input input.input-text,
.ml-account-page .woocommerce-EditAccountForm .password-input input.input-text {
	width: 100%;
	padding-right: 46px;
}

.ml-login .ml-login__col .password-input .show-password-input,
.ml-account-page .woocommerce-EditAccountForm .password-input .show-password-input {
	position: absolute;
	top: 50%;
	right: 8px;
	translate: 0 -50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--ml-muted);
	cursor: pointer;
}

.ml-login .ml-login__col .password-input .show-password-input:hover,
.ml-login .ml-login__col .password-input .show-password-input.display-password,
.ml-account-page .woocommerce-EditAccountForm .password-input .show-password-input:hover,
.ml-account-page .woocommerce-EditAccountForm .password-input .show-password-input.display-password {
	color: var(--ml-cyan);
}

.ml-login .ml-login__col .password-input .show-password-input:focus-visible,
.ml-account-page .woocommerce-EditAccountForm .password-input .show-password-input:focus-visible {
	outline: 2px solid var(--ml-navy);
	outline-offset: 2px;
}

.ml-login__lost {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ml-cyan);
	text-decoration: none;
}

.ml-login__lost:hover,
.ml-login__lost:focus-visible {
	text-decoration: underline;
}

/*
 * (0,3,0) rest, (0,4,0) states - the same lock the other four WooCommerce
 * buttons carry, and for the same reason.
 *
 * The markup is `<button class="woocommerce-button button
 * woocommerce-form-login__submit ml-login__submit">`, and the shortcode's
 * `.woocommerce` wrapper DIV puts `.woocommerce button.button` (0,2,1) in
 * reach. At (0,1,0) this rule lost it entirely: the button rendered
 * transparent with `--ast-global-color-0` text and a 30px pill, and only
 * filled in on hover - Astra owning both states.
 *
 * NOTE, because an earlier revision of CLAUDE.md got this wrong: this control
 * was recorded as NOT exposed on the grounds that `<body>` carries only
 * `woocommerce-page`. **Ancestry is not just the body.** The shortcode wraps
 * its output in `<div class="woocommerce">`, and that satisfies the selector.
 */
.ml-login .ml-login__col .ml-login__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--ml-cyan);
	color: var(--ml-white);
	font-family: var(--ml-font);
	font-size: 15px;
	line-height: 1;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 14px 26px -16px rgba(var(--ml-shadow-tint), 0.95);
	transition: transform var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

/* Geometry is not restated - the rest rule keeps matching while hovered, so
   there is no size jump. */
.ml-login .ml-login__col .ml-login__submit:hover,
.ml-login .ml-login__col .ml-login__submit:focus-visible {
	background: var(--ml-cyan-dark);
	color: var(--ml-white);
	transform: translateY(-2px);
	box-shadow: 0 22px 34px -16px rgba(var(--ml-shadow-tint), 1);
}

/* Astra's `button:focus { outline: 0 }` suppresses the browser default, and
   there was no author outline here either. */
.ml-login .ml-login__col .ml-login__submit:focus-visible {
	outline: 2px solid var(--ml-navy);
	outline-offset: 2px;
}

.ml-login .ml-login__col .ml-login__lost:focus-visible,
.ml-login .ml-login__guest a:focus-visible {
	outline: 2px solid var(--ml-navy);
	outline-offset: 2px;
	border-radius: 3px;
}

.ml-login__guest {
	margin: 22px 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--ml-muted);
}

.ml-login__guest a {
	color: var(--ml-cyan);
	font-weight: 600;
	text-decoration: none;
	/* Colour only: Astra's a { transition: all } faded the 2px navy keyboard ring in (2026-09-15). */
	transition: color var(--ml-t-base) var(--ml-e-standard);
}

/* Cyan + underline on hover and keyboard focus - see .ml-account__signout for the (0,4,1). */
.ml-login__guest.ml-login__guest a[href]:hover,
.ml-login__guest.ml-login__guest a[href]:focus-visible {
	color: var(--ml-cyan);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Forms inside the account area
 *
 * Mirrors the field styling checkout.css defines for .ml-checkout-page.
 * ---------------------------------------------------------------------- */

.ml-account-page .form-row {
	display: flex;
	flex-direction: column;
	margin: 0 0 16px;
	padding: 0;
}

.ml-account-page .form-row label {
	margin-bottom: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ml-navy);
}

.ml-account-page .form-row .required {
	color: #d33a3a;
	text-decoration: none;
}

.ml-account-page .form-row input.input-text,
.ml-account-page .form-row input[type="password"],
.ml-account-page .form-row textarea,
.ml-account-page .form-row select,
.ml-account-page .select2-container .select2-selection--single {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--ml-line);
	border-radius: 9px;
	background: var(--ml-white);
	font-family: var(--ml-font);
	font-size: 15px;
	color: var(--ml-navy);
	transition: border-color var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

/*
 * The two long lines are load-bearing - 2026-09-14. Astra's inline
 * `.woocommerce .woocommerce-MyAccount-content .woocommerce-EditAccountForm
 * .woocommerce-form-row .woocommerce-Input.input-text:focus { border-color: inherit }`
 * is (0,7,0) and gave the account-details fields a NAVY focus border while login
 * and track-order fields went cyan. (0,8,1) / (0,7,1) clear it.
 */
.ml-account-page .form-row input.input-text:focus,
.ml-account-page .woocommerce .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row input.input-text.woocommerce-Input:focus,
.ml-account-page .woocommerce .woocommerce-MyAccount-content .woocommerce-address-fields .form-row input.input-text:focus,
.ml-account-page .form-row input[type="password"]:focus,
.ml-account-page .form-row textarea:focus,
.ml-account-page .form-row select:focus,
.ml-account-page .select2-container--focus .select2-selection--single,
.ml-account-page .select2-container--open .select2-selection--single {
	outline: none;
	border-color: var(--ml-cyan);
	box-shadow: 0 0 0 3px rgba(0, 175, 240, 0.16);
}

.ml-account-page .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

.ml-account-page .select2-container .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--ml-navy);
}

.ml-account-page .select2-container .select2-selection__arrow {
	height: 46px;
	right: 8px;
}

.ml-account-page .woocommerce-invalid input.input-text,
.ml-account-page .woocommerce-invalid select,
.ml-account-page .woocommerce-invalid .select2-selection--single {
	border-color: #e08a8a;
	box-shadow: 0 0 0 3px rgba(211, 58, 58, 0.12);
}

/* Address and account-details forms use a two-column grid like checkout. */
.ml-account-page .woocommerce-address-fields__field-wrapper,
.ml-account-page .woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

.ml-account-page .woocommerce-address-fields__field-wrapper .form-row-wide,
.ml-account-page .woocommerce-EditAccountForm .form-row-wide,
.ml-account-page .woocommerce-EditAccountForm fieldset,
.ml-account-page .woocommerce-EditAccountForm > p:last-of-type,
.ml-account-page .woocommerce-address-fields > p {
	grid-column: 1 / -1;
}

.ml-account-page .woocommerce-EditAccountForm fieldset {
	margin: 10px 0 0;
	padding: 20px 0 0;
	border: 0;
	border-top: 1px solid var(--ml-line);
}

.ml-account-page .woocommerce-EditAccountForm fieldset legend {
	padding: 0;
	margin-bottom: 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ml-navy);
}

.ml-account-page .woocommerce-EditAccountForm em {
	font-style: normal;
	font-size: 12.5px;
	color: var(--ml-muted);
}

/* Save buttons across the account forms. */
.ml-account-page .woocommerce-Button,
.ml-account-page button[name="save_address"],
.ml-account-page button[name="save_account_details"] {
	height: 50px;
	padding: 0 30px;
	border: 0;
	border-radius: 8px;
	background: var(--ml-cyan);
	color: var(--ml-white);
	font-family: var(--ml-font);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 14px 26px -16px rgba(var(--ml-shadow-tint), 0.95);
	transition: transform var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

.ml-account-page .woocommerce-Button:hover,
.ml-account-page button[name="save_address"]:hover,
.ml-account-page button[name="save_account_details"]:hover {
	background: var(--ml-cyan-dark);
	transform: translateY(-2px);
	box-shadow: 0 22px 34px -16px rgba(var(--ml-shadow-tint), 1);
}

/* -------------------------------------------------------------------------
 * View order
 * ---------------------------------------------------------------------- */

.ml-account-page .woocommerce-order-details,
.ml-account-page .woocommerce-customer-details {
	margin-top: 24px;
}

.ml-account-page .woocommerce-order-details__title,
.ml-account-page .woocommerce-column__title,
.ml-account-page .woocommerce-customer-details h2 {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ml-navy);
}

.ml-account-page table.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.ml-account-page table.woocommerce-table--order-details th,
.ml-account-page table.woocommerce-table--order-details td {
	padding: 11px 0;
	border: 0;
	border-bottom: 1px solid var(--ml-line);
	text-align: left;
	color: var(--ml-navy);
}

.ml-account-page table.woocommerce-table--order-details td:last-child,
.ml-account-page table.woocommerce-table--order-details th:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.ml-account-page .woocommerce-customer-details address {
	font-style: normal;
	padding: 18px;
	border: 1px solid var(--ml-line);
	border-radius: 12px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--ml-body);
}

/* -------------------------------------------------------------------------
 * Notices
 * ---------------------------------------------------------------------- */

.ml-account-page .woocommerce-message,
.ml-account-page .woocommerce-info,
.ml-account-page .woocommerce-error {
	max-width: var(--ml-container);
	margin: 0 auto 20px;
	border-radius: 10px;
	font-size: 14.5px;
}

/* -------------------------------------------------------------------------
 * Astra reset
 * ---------------------------------------------------------------------- */

.ml-account-page .site-content > .ast-container {
	padding-left: 0;
	padding-right: 0;
	max-width: 100%;
}

.ml-account-page #primary,
.ml-account-page .ast-article-single {
	margin: 0;
	padding: 0;
	border: 0;
}

.ml-account-page .entry-content {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 980px) {
	.ml-account__body-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.ml-account__nav {
		position: static;
	}

	.ml-account__nav ul {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.ml-account__nav li a {
		padding: 10px 14px;
	}
}

@media (max-width: 720px) {
	.ml-orders tbody tr.order {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"number status"
			"total  total"
			"actions actions";
		gap: 10px 14px;
	}

	.ml-orders .woocommerce-orders-table__cell-order-date {
		margin-top: 22px;
	}

	.ml-orders .woocommerce-orders-table__cell-order-actions {
		justify-content: flex-start;
	}

	.ml-account-page .woocommerce-address-fields__field-wrapper,
	.ml-account-page .woocommerce-EditAccountForm {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 520px) {
	.ml-account__head,
	.ml-account__body,
	.ml-login {
		padding-left: 16px;
		padding-right: 16px;
	}

	.ml-account__content {
		padding: 20px;
	}

	.woocommerce .ml-login .ml-login__set .ml-login__col,
	.woocommerce .ml-login > form.ml-login__col.lost_reset_password {
		padding: 22px;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ml-account__nav li a:hover,
	.ml-account__nav li a:focus-visible,
	.ml-account__stat > a:hover,
	.ml-account__stat > a:focus-visible,
	.ml-account__shortcuts a:hover,
	.ml-account__shortcuts a:focus-visible,
	.ml-account__cta:hover,
	.ml-account__cta:focus-visible,
	.ml-orders tbody tr.order.ml-glass:hover,
	.ml-orders tbody tr.order.ml-glass:focus-within,
	.ml-account__content .ml-orders__action.button:hover,
	.ml-account__content .ml-orders__action.button:focus-visible,
	.ml-address.ml-glass:hover,
	.ml-address.ml-glass:focus-within,
	.ml-address__edit:hover,
	.ml-address__edit:focus-visible,
	.ml-login .ml-login__col .ml-login__submit:hover,
	.ml-login .ml-login__col .ml-login__submit:focus-visible,
	.ml-account-page .woocommerce-Button:hover,
	.ml-account-page button[name="save_address"]:hover,
	.ml-account__stat > div,
	.ml-account__stat:hover > div,
	.ml-account-page button[name="save_account_details"]:hover {
		transform: none;
	}

	.ml-account__nav li a,
	.ml-account__nav-icon,
	.ml-account__stat > a,
	.ml-account__shortcuts a,
	.ml-account__cta,
	.ml-account__content .ml-orders__action.button,
	.ml-address__edit,
	.ml-login .ml-login__col .ml-login__submit,
	.ml-account-page .woocommerce-Button,
	.ml-account-page .form-row input.input-text,
	.ml-account__stat > div,
	.ml-account-page .form-row select {
		transition: none;
	}
}

/*
 * POINTER FOCUS - ASTRA a:focus { outline: thin dotted } (main.min.css L3).
 * A mouse click leaves :focus set, so every anchor that names no outline of its
 * own kept a thin dotted ring until focus moved. Measured 2026-09-13 by the
 * sitewide anchor sweep (CLAUDE.md, "Anchor pointer-focus sweep").
 *
 * :not(:focus-visible) IS LOAD-BEARING: this only ever applies to pointer focus,
 * so the keyboard ring each family already has is untouched. Outline only -
 * nothing moves, so there is no reduced-motion twin.
 */
.woocommerce-MyAccount-navigation-link a:focus:not(:focus-visible),
.ml-account__shortcuts a:focus:not(:focus-visible),
.ml-account__stat a:focus:not(:focus-visible),
.ml-login__guest a:focus:not(:focus-visible),
a.ml-login__lost:focus:not(:focus-visible),
.ml-account__signout a:focus:not(:focus-visible),
.woocommerce-orders-table__cell a:focus:not(:focus-visible),
.woocommerce-account a.edit:focus:not(:focus-visible) {
	outline: none;
}

/*
 * KEYBOARD RINGS - 2026-09-14. These families had NO focus ring of their own:
 * keyboard focus showed only Astra's a:focus-visible 1px dotted in the text
 * colour, or nothing at all where a theme rule said outline: none. Measured by
 * the sitewide anchor sweep (CLAUDE.md, "Keyboard ring pass").
 *
 * Light surface: 3px --ml-cyan offset 3px. Navy surface: 2px. border-radius is
 * RESTATED on every ring - a rule wins only the properties it names, and a
 * shared focus rule has squared a round control on this site before. Text links
 * take 4px corners; boxed controls keep their own radius.
 *
 * The pointer pin (:focus:not(:focus-visible)) above is untouched - the two
 * selectors can never match the same state. Contrast: cyan on white 2.50:1 is
 * the owner's recorded decision (CLAUDE.md, "THE FOCUS-RING RULE").
 */
.ml-account__signout a:focus-visible,
.woocommerce-orders-table__cell a:focus-visible {
	outline: 3px solid var(--ml-cyan);
	outline-offset: 3px;
	border-radius: 4px;
}
.woocommerce-account a.edit:focus-visible,
.woocommerce .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:focus-visible {
	outline: 3px solid var(--ml-cyan);
	outline-offset: 3px;
	border-radius: 9px;
}
/*
 * THE TWO DASHBOARD CARDS HAD outline: none ON :focus-visible - grouped with
 * :hover in their lift rules (.ml-account__stat > a:focus-visible and
 * .ml-account__shortcuts a:focus-visible, both (0,2,1)). The lift and shadow
 * were the only keyboard cue: a WCAG 2.4.7 failure. One class deeper, (0,3,1),
 * restores the ring without touching the lift.
 */
.woocommerce-MyAccount-content .ml-account__stat > a:focus-visible,
.woocommerce-MyAccount-content .ml-account__shortcuts a:focus-visible {
	outline: 3px solid var(--ml-cyan);
	outline-offset: 3px;
	border-radius: 12px;
}

/*
 * RING FADE - ASTRA'S INLINE `a { transition: all .2s linear }`. "all" includes
 * outline, so these families' keyboard rings slid and faded in over 200ms
 * instead of appearing at once. Each family now names exactly what its hover /
 * focus-visible state really changes, measured 2026-09-14 (CLAUDE.md, "Ring fade
 * pass"): colour where Astra's a:hover repaints the ink, nothing at all where
 * only the (discrete) underline changes or nothing visible changes.
 * Outline is never in the list. Colour-only fades need no reduced-motion twin.
 */
.ml-account__signout a {
	transition: none;
}

/* =========================================================================
 * MY ACCOUNT LAYOUT (2026-09-23)
 *
 * THE SIDEBAR WAS 86.39px, AND THE CAUSE IS ONE WOOCOMMERCE DECLARATION.
 *
 * Measured at 1440 before anything was written: the grid track really was
 * `288px 1044px` - the theme's own rule was winning on the CONTAINER - but
 * `.woocommerce-MyAccount-navigation` computed `width: 86.3906px` with
 * `float: left`, and the content `709.906px` with `float: right`.
 *
 * Those are WooCommerce's `width: 30%` and `width: 68%`, applied to the grid
 * ITEMS. A percentage width on a grid item resolves against its TRACK, not
 * the page: 288 x 0.30 = 86.4 and 1044 x 0.68 = 709.9, both to the decimal.
 * The float is inert on a grid item, which is why nothing looked floated -
 * it just silently sat at 30% of its own column.
 *
 * That is also the whole clipping story, so it is one fix and not three:
 *   - the six menu links needed 91-124px of text in a 62px box (all six clipped)
 *   - the name and the email measured clientWidth 0 inside an 86px card
 * Nothing needed truncating; the box needed to be its real width.
 * ====================================================================== */

/* (0,3,0) beats WooCommerce's `.woocommerce-account .woocommerce-MyAccount-navigation`
   (0,2,0) on class count, so this does not depend on load order. */
.ml-account__body .ml-account__body-inner > .woocommerce-MyAccount-navigation,
.ml-account__body .ml-account__body-inner > .woocommerce-MyAccount-content {
	width: auto;
	float: none;
}

.ml-account__body .ml-account__body-inner {
	/* 256px, down from 288: the brief's 240-260 band, and the labels' longest
	   ("Account details", 103px) clears it with room for the icon and padding. */
	grid-template-columns: 256px minmax(0, 1fr);
}

/*
 * ONE LINE EACH, ELLIPSIS ONLY IF IT REALLY OVERFLOWS. `min-width: 0` on the
 * flex child is what actually permits this: without it the ident block's
 * min-content width keeps the text at full length and the ellipsis never
 * triggers, which is the usual reason text-overflow "does nothing".
 */
.ml-account__ident {
	min-width: 0;
}

.ml-account__name,
.ml-account__email {
	display: block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Labels are never truncated now that the box is real; stated so a narrow
   track in future wraps rather than clips. */
.ml-account__nav-label {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ---------- Mobile ---------- */

@media (max-width: 980px) {
	/*
	 * THE STACK OVERRIDE HAD TO BE RAISED WITH THE BASE RULE.
	 *
	 * The existing `.ml-account__body-inner { grid-template-columns:
	 * minmax(0, 1fr) }` in this tier is (0,1,0). Once the desktop track moved
	 * to (0,3,0) above, this lost - and the sidebar kept its 256px column on a
	 * phone, leaving the content 59px wide. Measured, not predicted: that is
	 * exactly what the first run of this fix produced.
	 *
	 * This is the checklist item this file already states in full - raising a
	 * selector strands its responsive twin - hit on the very next rule.
	 */
	.ml-account__body .ml-account__body-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * A CLEAN 2-COLUMN GRID, not a wrapping flex row. Wrapping gave rows of
	 * unequal pills - "Dashboard | Orders" then "Addresses | Account details"
	 * - each sized to its own label, with the gaps falling wherever the line
	 * broke. A grid gives six equal cells and one gap value on both axes.
	 */
	.ml-account__nav ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.ml-account__nav li {
		margin: 0;
		min-width: 0;
	}

	.ml-account__nav li a {
		height: 100%;
		min-height: 48px;
		justify-content: flex-start;
	}

	/* The logout item is the seventh cell in a six-cell grid; let it keep the
	   row to itself rather than sitting half-width beside nothing. */
	.ml-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout {
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {
	/* Overview cards two across. `minmax(0, 1fr)` rather than auto-fit: at
	   375 the auto-fit minimum of 168px only ever fitted one. */
	.ml-account__body .ml-account__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	/*
	 * THE BOTTOM NAV IS 60px AND THIS PADDING WAS 56px, so the bar sat on the
	 * last of the content. 60 + the safe-area inset + 24px of breathing room.
	 */
	.ml-account__body.ml-account__body {
		padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 24px);
	}
}