/**
 * My Account: authentication and dashboard.
 *
 * Mobile-first. The dashboard is a single column on phones with the identity
 * card first, becoming a sidebar layout at 900px.
 */

/* ==========================================================================
   Auth (sign in / register)
   ========================================================================== */

.ac-auth {
	max-width: 460px;
	margin: 0 auto;
	padding: 26px 20px 40px;
}

.ac-auth__head { margin-bottom: 20px; text-align: center; }

.ac-auth__title {
	margin: 0 0 8px;
	font-size: clamp(22px, 5vw, 28px);
	line-height: 1.2;
	text-wrap: balance;
}

.ac-auth__sub {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0;
	font-size: 13.5px;
	opacity: .75;
}

.ac-auth__sub svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; color: #8a6d1f; }

.ac-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	margin-bottom: 20px;
	border-radius: 10px;
	background: rgba(0, 0, 0, .05);
}

.ac-tab {
	padding: 10px 12px;
	border: 0;
	border-radius: 7px;
	background: none;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
	opacity: .65;
	transition: background .16s ease, opacity .16s ease;
}

.ac-tab.is-active { background: #fff; opacity: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, .09); }
.ac-tab:focus-visible { outline: 2px solid #c9a227; outline-offset: 2px; }

.ac-panel[hidden] { display: none; }

.ac-field { display: block; margin: 0 0 15px; }

.ac-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
}

.ac-field .input-text,
.ac-field input[type="text"],
.ac-field input[type="email"],
.ac-field input[type="password"] {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 9px;
	/* 15px+ avoids iOS zooming the page on focus. */
	font-size: 15px;
	background: #fff;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.ac-field .input-text:focus,
.ac-field input:focus {
	border-color: #c9a227;
	box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
	outline: none;
}

.ac-field .required { color: #8d2020; text-decoration: none; }

/* Password reveal ---------------------------------------------------------
   The input keeps its full width; the button sits over it, so revealing does
   not resize or reflow the field. */

.ac-pw { position: relative; display: block; }
.ac-pw input { padding-right: 46px !important; }

.ac-eye {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 7px;
	background: none;
	cursor: pointer;
	opacity: .5;
	color: inherit;
}

.ac-eye:hover { opacity: 1; }
.ac-eye.is-on { opacity: 1; color: #8a6d1f; }
.ac-eye svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ac-eye:focus-visible { outline: 2px solid #c9a227; outline-offset: 1px; }

/* Strength meter ---------------------------------------------------------- */

.ac-strength { display: block; margin-top: 8px; }
.ac-strength[hidden] { display: none; }

.ac-strength__bar {
	display: block;
	height: 4px;
	border-radius: 99px;
	background: rgba(0, 0, 0, .1);
	overflow: hidden;
}

.ac-strength__bar > span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: #8d2020;
	transition: width .25s ease, background .25s ease;
}

.ac-strength.is-2 .ac-strength__bar > span { background: #b8791c; }
.ac-strength.is-3 .ac-strength__bar > span { background: #2e6f4e; }
.ac-strength.is-4 .ac-strength__bar > span { background: #1f7a4d; }

.ac-strength__label { display: block; margin-top: 5px; font-size: 12px; opacity: .7; }

.ac-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.ac-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.ac-check input { width: 17px; height: 17px; accent-color: #c9a227; }

.ac-link { font-size: 13.5px; color: inherit; opacity: .75; }
.ac-link:hover { opacity: 1; }

.ac-submit {
	display: block;
	width: 100%;
	padding: 14px 20px;
	border: 0;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}

.ac-note { margin: 0 0 16px; font-size: 13px; opacity: .7; }

/* ==========================================================================
   Dashboard
   ========================================================================== */

.woocommerce-account .woocommerce {
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 16px 64px;
	display: grid;
	gap: 22px;
}

.ac-side__card {
	padding: 18px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	background: #fff;
}

.ac-side__user { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

.ac-side__avatar {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	background: #14100c;
	color: #e3c765;
	font-weight: 700;
	font-size: 18px;
}

.ac-side__id { display: grid; min-width: 0; }
.ac-side__hi { font-weight: 700; font-size: 15px; }
.ac-side__since { font-size: 12px; opacity: .6; }

.ac-side__rewards {
	padding: 13px 14px;
	margin-bottom: 16px;
	border-radius: 10px;
	border: 1px solid rgba(201, 162, 39, .3);
	background: linear-gradient(180deg, rgba(201, 162, 39, .11), rgba(201, 162, 39, .04));
}

.ac-side__rewards-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.ac-side__rewards-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	opacity: .8;
}

.ac-side__rewards-label svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.9; color: #8a6d1f; }

.ac-side__rewards-val { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ac-side__worth { margin: 2px 0 9px; font-size: 12px; opacity: .68; }

.ac-side__bar { height: 5px; border-radius: 99px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.ac-side__bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #c9a227, #e3c765); transition: width .4s ease; }
.ac-side__milestone { margin: 7px 0 0; font-size: 11.5px; opacity: .65; }

.ac-side__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.ac-side__nav a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 14px;
	text-decoration: none;
	color: inherit;
	transition: background .14s ease;
}

.ac-side__nav a:hover { background: rgba(0, 0, 0, .05); }

.ac-side__nav .is-active > a,
.ac-side__nav .woocommerce-MyAccount-navigation-link.is-active > a {
	background: #14100c;
	color: #fff;
	font-weight: 600;
}

/* Dashboard main ---------------------------------------------------------- */

.ac-welcome { margin-bottom: 18px; }
.ac-welcome__title { margin: 0 0 5px; font-size: clamp(20px, 4vw, 26px); }
.ac-welcome__sub { margin: 0; font-size: 14px; opacity: .72; }

.ac-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 24px; }

.ac-stat {
	display: grid;
	gap: 3px;
	padding: 15px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 12px;
	background: #fff;
}

.ac-stat__ic {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-bottom: 4px;
	border-radius: 8px;
	background: rgba(0, 0, 0, .05);
}

.ac-stat__ic svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.ac-stat--rewards .ac-stat__ic { background: rgba(201, 162, 39, .18); color: #8a6d1f; }

.ac-stat__val { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ac-stat__label { font-size: 12px; opacity: .62; }

.ac-recent__title { margin: 0 0 10px; font-size: 16px; }

.ac-recent__card {
	padding: 15px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 12px;
	background: #fff;
}

.ac-recent__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ac-recent__num { font-weight: 700; font-size: 14.5px; }
.ac-recent__date { font-size: 12.5px; opacity: .6; }

.ac-recent__status {
	padding: 3px 9px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: rgba(0, 0, 0, .07);
}

.ac-recent__status.status-completed { background: #e4efe7; color: #2e6f4e; }
.ac-recent__status.status-processing { background: #e3e7f2; color: #4a5a8c; }
.ac-recent__status.status-on-hold { background: #f7e7d8; color: #a8571e; }

.ac-recent__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ac-recent__total { font-size: 17px; font-weight: 700; }

.ac-recent__view { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: inherit; text-decoration: none; }
.ac-recent__view svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.ac-empty { text-align: center; padding: 40px 20px; }
.ac-empty__ic { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: rgba(0, 0, 0, .05); }
.ac-empty__ic svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.ac-empty p { margin: 0 0 18px; opacity: .7; }

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 900px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 290px minmax(0, 1fr);
		gap: 32px;
		align-items: start;
	}

	/*
	 * Explicit placement, not source order.
	 *
	 * Auto-placement was putting the sidebar in column 2 and the content in
	 * column 1 — measured: nav left=468 w=826, content left=146 w=197, i.e. the
	 * sidebar rendering full width on the right with the dashboard squeezed
	 * narrow beneath it. WooCommerce also injects .woocommerce-notices-wrapper
	 * as a sibling on some requests, which shifts every auto-placed item along
	 * by one cell. Naming the cells makes the layout independent of both.
	 */
	.ac-side {
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: 96px;
	}

	.woocommerce-MyAccount-content {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
	}

	/* Notices span both columns rather than consuming a grid cell. */
	.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
		grid-row: auto;
	}
	.ac-stats { grid-template-columns: repeat(3, 1fr); }
}


@media (prefers-reduced-motion: reduce) {
	.ac-side__bar > span,
	.ac-strength__bar > span,
	.ac-tab { transition: none; }
}

/* ==========================================================================
   Password recovery
   ========================================================================== */

/* The confirmation screen leads with an icon rather than a notice bar, so the
   page reads as a destination rather than as an error state. */
.ac-sent__ic {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: rgba(201, 162, 39, .16);
	color: #8a6d1f;
}

.ac-sent__ic svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.ac-note--center { text-align: center; line-height: 1.55; }

/* Recovery is a dead end without a way back to sign in. */
.ac-back { margin: 18px 0 0; text-align: center; }

/* The strength meter sits inside a <p class="ac-field">, which is a block, so
   the reveal button and the meter need the field to stack rather than inline. */
.ac-field--password .ac-strength { margin-top: 9px; }

/* ==========================================================================
   Signed-out account screens
   ========================================================================== */

/*
 * The dashboard grid below (290px sidebar + content) is applied to every
 * .woocommerce-account page. Signed out there IS no sidebar — sign in, register,
 * lost password and reset password render a single card — so the card was
 * landing in the 290px sidebar track and rendering 290px wide on a 1440px
 * screen, hard against the left margin. Measured before this rule: .ac-auth
 * left=146 width=290.
 *
 * Scoped on `logged-in`, the body class WordPress adds, so the dashboard layout
 * is untouched for signed-in customers.
 */
.woocommerce-account:not(.logged-in) .woocommerce {
	display: block;
	max-width: 620px;
}

/* ==========================================================================
   Order received and view order
   ==========================================================================
   These screens are styled rather than overridden wherever WooCommerce's own
   markup allows it. Only two templates are overridden in this area — the
   thank-you page (core hard-codes its structure and branches on one status) and
   the order line item (to add a thumbnail without using a hook that also fires
   inside emails). Everything below is presentation on core markup.
   ========================================================================== */

.ord { max-width: 820px; margin: 0 auto; }

.ord__head {
	padding: 28px 22px 24px;
	margin-bottom: 20px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 16px;
	background: #fff;
	text-align: center;
}

.ord__icon {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .05);
}

.ord__icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* The four outcomes read differently at a glance, so a customer whose payment
   failed is not met with the same green tick as one whose order is confirmed. */
.ord__head.is-ok .ord__icon      { background: #e4efe7; color: #2e6f4e; }
.ord__head.is-waiting .ord__icon { background: #f7e7d8; color: #a8571e; }
.ord__head.is-error .ord__icon   { background: #f6e2e2; color: #8d2020; }
.ord__head.is-neutral .ord__icon { background: rgba(0, 0, 0, .06); }

.ord__title { margin: 0 0 8px; font-size: clamp(21px, 4.6vw, 28px); line-height: 1.2; text-wrap: balance; }
.ord__lede { margin: 0; font-size: 15px; line-height: 1.55; opacity: .8; }
.ord__lede p { margin: 0; }
.ord__note { margin: 10px 0 0; font-size: 14px; line-height: 1.55; opacity: .72; }

.ord__actions--pay { margin: 0 0 20px; text-align: center; }
.ord__pay { display: inline-block; min-height: 46px; padding: 13px 26px; }

/* Order facts ------------------------------------------------------------- */

.ord__facts {
	list-style: none;
	display: grid;
	gap: 1px;
	margin: 0 0 22px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	background: rgba(0, 0, 0, .09);
	overflow: hidden;
}

.ord__facts > li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin: 0;
	padding: 13px 16px;
	background: #fff;
	font-size: 14.5px;
}

.ord__fact-label { flex: none; opacity: .62; font-size: 13px; }
.ord__facts strong { text-align: right; font-weight: 700; word-break: break-word; }

@media (min-width: 620px) {
	.ord__facts { grid-template-columns: 1fr 1fr; }
}

/* Order table ------------------------------------------------------------- */

.woocommerce-table--order-details {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
	padding: 13px 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.woocommerce-table--order-details thead th {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	opacity: .6;
	background: rgba(0, 0, 0, .02);
}

.woocommerce-table--order-details .product-total,
.woocommerce-table--order-details tfoot td { text-align: right; white-space: nowrap; }

.woocommerce-table--order-details tfoot th { font-weight: 600; opacity: .75; }
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td { font-size: 16px; font-weight: 800; opacity: 1; }
.woocommerce-table--order-details tbody tr:last-child td { border-bottom-width: 1px; }

/* Line item with thumbnail */

.ord__line { display: flex; align-items: flex-start; gap: 12px; }

.ord__thumb {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--pearl, rgba(0, 0, 0, .04));
}

.ord__thumb img,
.ord__thumb .ord__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ord__line-body { min-width: 0; }
.ord__line-body a { color: inherit; text-decoration: none; }
.ord__line-body a:hover { text-decoration: underline; }
.ord__line-body .product-quantity { opacity: .6; font-weight: 600; }
.ord__line-body .wc-item-meta { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12.5px; opacity: .7; }
.ord__line-body .wc-item-meta li { margin: 0; }
.ord__line-body .wc-item-meta p { margin: 0; display: inline; }

/* Next steps -------------------------------------------------------------- */

.ord__next { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ord__next-btn { flex: 1 1 200px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }

/* Customer addresses on the order ----------------------------------------- */

.woocommerce-customer-details { margin-top: 4px; }

.woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	gap: 14px;
	margin: 0;
}

@media (min-width: 620px) {
	.woocommerce-customer-details .woocommerce-columns--addresses { grid-template-columns: 1fr 1fr; }
}

.woocommerce-customer-details .woocommerce-column {
	padding: 16px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 12px;
	background: #fff;
}

.woocommerce-customer-details h2,
.woocommerce-customer-details .woocommerce-column__title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	opacity: .6;
}

.woocommerce-customer-details address {
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.6;
}

/* ==========================================================================
   Orders listing
   ==========================================================================
   No template override: WooCommerce already emits data-title on every cell and
   tags the table `shop_table_responsive`, which is everything a card layout
   needs.
   ========================================================================== */

.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	overflow: hidden;
}

.woocommerce-orders-table th,
.woocommerce-orders-table td {
	padding: 13px 15px;
	text-align: left;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	font-size: 14.5px;
	vertical-align: middle;
}

.woocommerce-orders-table thead th {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	opacity: .6;
	background: rgba(0, 0, 0, .02);
}

.woocommerce-orders-table tbody tr:last-child td { border-bottom: 0; }
.woocommerce-orders-table__cell-order-number a { font-weight: 700; color: inherit; text-decoration: none; }
.woocommerce-orders-table__cell-order-number a:hover { text-decoration: underline; }

.woocommerce-orders-table__cell-order-actions { text-align: right; white-space: nowrap; }

.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-orders-table__cell-order-actions .woocommerce-button {
	display: inline-flex;
	align-items: center;
	/* 44px, not 38: this is the primary action on a phone. */
	min-height: 44px;
	padding: 11px 16px;
	margin-left: 6px;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}

.woocommerce-orders-table__cell-order-actions .button:hover { border-color: #c9a227; }

/* Status pill, reusing the dashboard's vocabulary. */
.woocommerce-orders-table__cell-order-status { text-transform: capitalize; }

/*
 * Below 720px each row becomes a card. The column heading is re-created from
 * the cell's own data-title, so no markup change is needed and nothing has to
 * be kept in sync with core's column list.
 */
@media (max-width: 719px) {
	.woocommerce-orders-table { border: 0; background: none; }
	.woocommerce-orders-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

	.woocommerce-orders-table tbody tr {
		display: grid;
		gap: 8px;
		padding: 15px;
		margin-bottom: 12px;
		border: 1px solid rgba(0, 0, 0, .1);
		border-radius: 12px;
		background: #fff;
	}

	.woocommerce-orders-table tbody td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		padding: 0;
		border: 0;
	}

	.woocommerce-orders-table tbody td::before {
		content: attr(data-title);
		flex: none;
		font-size: 12px;
		font-weight: 600;
		opacity: .55;
	}

	.woocommerce-orders-table__cell-order-actions { text-align: left; }
	.woocommerce-orders-table__cell-order-actions .button { margin: 0 6px 0 0; }
}

/* Pagination */
.woocommerce-pagination { display: flex; gap: 8px; margin-top: 16px; }

.woocommerce-pagination .button,
.woocommerce-pagination a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 10px 16px;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	font-size: 13.5px;
}

/* ==========================================================================
   View order
   ========================================================================== */

.woocommerce-MyAccount-content > p:first-child mark.order-number,
.woocommerce-MyAccount-content > p:first-child mark.order-date,
.woocommerce-MyAccount-content > p:first-child mark.order-status {
	background: rgba(201, 162, 39, .16);
	color: inherit;
	padding: 1px 7px;
	border-radius: 5px;
	font-weight: 700;
}

.woocommerce-order-details__title,
.woocommerce-column__title { margin: 0 0 12px; font-size: 17px; }

.woocommerce-customer-details--phone,
.woocommerce-customer-details--email { margin: 6px 0 0; font-size: 14px; opacity: .8; }

/* ==========================================================================
   Addresses
   ========================================================================== */

.woocommerce-Addresses {
	display: grid;
	gap: 14px;
	margin-top: 4px;
}

@media (min-width: 620px) {
	.woocommerce-Addresses { grid-template-columns: 1fr 1fr; }
}

.woocommerce-Address {
	padding: 18px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	background: #fff;
	width: auto;
	float: none;
}

.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 { margin: 0; font-size: 15px; }

.woocommerce-Address-title .edit {
	font-size: 13px;
	font-weight: 600;
	color: inherit;
	opacity: .7;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.woocommerce-Address-title .edit:hover { opacity: 1; }
.woocommerce-Address address { font-style: normal; font-size: 14.5px; line-height: 1.65; opacity: .85; }

/* ==========================================================================
   Account forms — edit address, edit account
   ==========================================================================
   Styled, not overridden: both are built from woocommerce_form_field(), so the
   markup already carries .form-row plus the -first/-last/-wide modifiers. That
   is enough to build the two-column grid, and it means new fields added by a
   plugin inherit the styling automatically.
   ========================================================================== */

.woocommerce-MyAccount-content form .woocommerce-form-row,
.woocommerce-MyAccount-content form .form-row {
	display: block;
	margin: 0 0 15px;
	padding: 0;
	width: auto;
	float: none;
}

.woocommerce-MyAccount-content form label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
}

.woocommerce-MyAccount-content form .required { color: #8d2020; text-decoration: none; }

.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-MyAccount-content form input[type="password"],
.woocommerce-MyAccount-content form select,
.woocommerce-MyAccount-content form .select2-selection {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 9px;
	/* 15px keeps iOS from zooming the page when the field takes focus. */
	font-size: 15px;
	background: #fff;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.woocommerce-MyAccount-content form input:focus,
.woocommerce-MyAccount-content form select:focus {
	border-color: #c9a227;
	box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
	outline: none;
}

.woocommerce-MyAccount-content form fieldset {
	margin: 22px 0 0;
	padding: 18px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 12px;
}

.woocommerce-MyAccount-content form legend { padding: 0 6px; font-size: 14px; font-weight: 700; }

.woocommerce-MyAccount-content form .woocommerce-Button,
.woocommerce-MyAccount-content form button[type="submit"] {
	min-height: 48px;
	padding: 13px 26px;
	margin-top: 6px;
	border: 0;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	/*
	 * The site's gold CTA. Without a background here the button kept
	 * WooCommerce's default `.woocommerce button.button` lilac (#e9e6ed on grey
	 * text), so "Save address" and "Save changes" read as disabled. No sheen or
	 * lifting shadow: those belong to marketing buttons, not a form submit.
	 */
	background: linear-gradient(135deg, var(--gold), var(--gold-cta));
	color: var(--ink);
	transition: filter .16s ease;
}

/* Core's `.woocommerce button.button:hover` (0,3,1) would put the lilac back. */
.woocommerce-MyAccount-content form .woocommerce-Button:hover,
.woocommerce-MyAccount-content form button[type="submit"]:hover {
	background: linear-gradient(135deg, var(--gold), var(--gold-cta));
	color: var(--ink);
	filter: brightness(.95);
}

.woocommerce-MyAccount-content form button[type="submit"]:focus-visible {
	outline: 2px solid #c9a227;
	outline-offset: 2px;
}

.woocommerce-MyAccount-content form em,
.woocommerce-MyAccount-content form .description { display: block; margin-top: 5px; font-size: 12.5px; opacity: .65; font-style: normal; }

@media (min-width: 620px) {
	.woocommerce-MyAccount-content form .form-row-first,
	.woocommerce-MyAccount-content form .form-row-last {
		display: inline-block;
		width: calc(50% - 7px);
		vertical-align: top;
	}

	.woocommerce-MyAccount-content form .form-row-first { margin-right: 12px; }

	/*
	 * Account details: core's form-edit-account.php has a line break between the
	 * first- and last-name rows. Between two inline-blocks that newline renders as
	 * a ~4px space, so calc(50% - 7px) + 12px + the space overflowed the line and
	 * "Last name" dropped under "First name". Flex items have no whitespace
	 * between them. The address form is built by woocommerce_form_field() with no
	 * whitespace between rows, so it never wrapped and is left alone.
	 */
	.woocommerce-MyAccount-content .woocommerce-EditAccountForm {
		display: flex;
		flex-wrap: wrap;
		column-gap: 12px;
	}

	.woocommerce-MyAccount-content .woocommerce-EditAccountForm > * {
		flex: 0 0 100%;
		min-width: 0;
	}

	.woocommerce-MyAccount-content .woocommerce-EditAccountForm > .form-row-first,
	.woocommerce-MyAccount-content .woocommerce-EditAccountForm > .form-row-last {
		flex-basis: calc(50% - 6px);
		width: auto;
		margin-right: 0;
	}
}

/* ==========================================================================
   Notices and empty states inside the account
   ========================================================================== */

.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-MyAccount-content .woocommerce-info,
.ord .woocommerce-message,
.ord .woocommerce-info {
	list-style: none;
	margin: 0 0 18px;
	padding: 13px 16px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-left-width: 3px;
	border-radius: 10px;
	background: #fff;
	font-size: 14.5px;
}

.woocommerce-MyAccount-content .woocommerce-message,
.ord .woocommerce-message { border-left-color: #2e6f4e; background: #f2f8f4; }
.woocommerce-MyAccount-content .woocommerce-error { border-left-color: #8d2020; background: #fbf3f3; }
.woocommerce-MyAccount-content .woocommerce-info,
.ord .woocommerce-info { border-left-color: #c9a227; background: #fdfaf1; }

.woocommerce-MyAccount-content .woocommerce-error li { margin: 0; }

/*
 * The downloads endpoint can only ever show its empty state on this store —
 * there are no downloadable products. If any are added, its table has no
 * data-title attributes, so it would need the same treatment as the orders
 * table before it is usable on a phone.
 */
.woocommerce-MyAccount-content .woocommerce-info a.button,
.woocommerce-MyAccount-content .woocommerce-message a.button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 12px 20px;
	margin-left: 10px;
	border-radius: 9px;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
}

/*
 * WooCommerce injects its own password reveal control on the account-details
 * form. It ships at 22px square — half the minimum comfortable tap target, and
 * the smallest control anywhere in the account area. Restyled to match the
 * theme's own .ac-eye toggle rather than replaced, so WooCommerce's script keeps
 * owning the behaviour.
 */
.woocommerce-MyAccount-content .password-input,
.woocommerce-MyAccount-content .woocommerce-password-input { position: relative; display: block; }

.woocommerce-MyAccount-content .password-input input { padding-right: 50px; }

.woocommerce-MyAccount-content .show-password-input {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	cursor: pointer;
	opacity: .5;
}

/*
 * The same duplicate-icon fault the checkout had: WooCommerce already draws a
 * state-aware glyph on `::before` — struck-through while the password is
 * hidden, open while it is shown — and a second one of ours sat under it,
 * stuck in one state. Theirs is sized here and nothing else is added.
 */
.woocommerce-MyAccount-content .show-password-input::before {
	width: 19px;
	height: 19px;
	background-size: contain;
	background-position: center;
}

.woocommerce-MyAccount-content .show-password-input:hover,
.woocommerce-MyAccount-content .show-password-input.display-password { opacity: 1; color: #8a6d1f; }

.woocommerce-MyAccount-content .show-password-input:focus-visible { outline: 2px solid #c9a227; outline-offset: 1px; }



/*
 * order-details-customer.php emits two different shapes:
 *
 *   - shipping shown  -> <section class="woocommerce-columns--addresses">
 *                          <div class="woocommerce-column"> … billing …
 *                          <div class="woocommerce-column"> … shipping …
 *   - shipping hidden -> the billing heading and <address> sit directly inside
 *                        .woocommerce-customer-details, with no wrapper and no
 *                        column at all.
 *
 * The second shape happens whenever the order needs no shipping address, and it
 * was falling through unstyled. Both are handled here.
 */
.woocommerce-customer-details > h2,
.woocommerce-customer-details > address {
	display: block;
}

.woocommerce-customer-details > address {
	margin: 0;
	padding: 16px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 12px;
	background: #fff;
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.6;
}

.woocommerce-customer-details > h2 {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	opacity: .6;
}

/*
 * Order-details table: fixed layout so it cannot outgrow the screen.
 *
 * With automatic layout the table sizes to its content, and the content here is
 * a product name plus a `white-space: nowrap` price. Two line items with long
 * names pushed the table to 430px inside a 390px viewport — measured on the
 * order-received page. `width: 100%` alone does not help, because an auto table
 * treats that as a minimum rather than a cap.
 *
 * Fixed layout makes the declared widths authoritative, and the name cell is
 * allowed to break so a long unbroken product code cannot reintroduce the
 * problem. The price column keeps nowrap, which is now safe because it has a
 * reserved share rather than an unbounded one.
 */
.woocommerce-table--order-details {
	table-layout: fixed;
}

.woocommerce-table--order-details .woocommerce-table__product-name,
.woocommerce-table--order-details thead th:first-child,
.woocommerce-table--order-details tfoot th {
	width: 62%;
}

.woocommerce-table--order-details .product-total,
.woocommerce-table--order-details thead th:last-child,
.woocommerce-table--order-details tfoot td {
	width: 38%;
}

.ord__line-body,
.woocommerce-table--order-details .woocommerce-table__product-name {
	overflow-wrap: anywhere;
}

/*
 * Footer rows must wrap, line items need not.
 *
 * `white-space: nowrap` is right for a line-item price ("$389.00") but wrong for
 * the totals rows, whose values carry a tax suffix ("$1,138.00 (includes $148.44
 * GST)") or a gateway name. Inside a fixed-layout column those were clipped
 * mid-word at 390px — the page reported no overflow because the text was cut
 * off rather than pushing the layout.
 */
.woocommerce-table--order-details tfoot td {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Give the totals rows more room than a line item needs. */
.woocommerce-table--order-details tfoot th { width: 46%; }
.woocommerce-table--order-details tfoot td { width: 54%; }

/* ---------------------------------------------------------------------------
 * Registration additions: name pair, confirmation, consent.
 * ------------------------------------------------------------------------ */

.ac-row--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (max-width: 420px) {
	.ac-row--split {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.ac-note--inline {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: var(--muted);
}

.ac-match {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	font-weight: 600;
	min-height: 1em;
}

.ac-match:empty {
	display: none;
}

.ac-match.is-ok {
	color: var(--pounamu);
}

.ac-match.is-error {
	color: var(--garnet);
}

.ac-field--check {
	margin-top: 4px;
}

.ac-field--check .ac-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink);
	cursor: pointer;
}

.ac-field--check .ac-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	flex: none;
	accent-color: var(--pounamu);
	cursor: pointer;
}

.ac-field--check a {
	color: var(--pounamu);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The account CTA matches the cart, drawer and checkout. */
.ac-auth .ac-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	min-height: 52px;
	border: 0;
	border-radius: 999px;
	background: var(--pounamu);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background .18s var(--ease);
}

.ac-auth .ac-submit:hover {
	background: #1a4031;
	color: #fff;
}


/* ---------------------------------------------------------------------
   Touch floor for the account forms.

   This file loads after stonex.css, so the shared 44px block there cannot
   reach these controls — the sizes have to be raised where they are set.
   Scope matches the shared block, so a desktop with a mouse is unchanged.
   --------------------------------------------------------------------- */

@media (max-width: 900px), (hover: none) {
	.ac-eye {
		width: 44px;
		height: 44px;
	}

	/*
	 * WooCommerce ships its own password reveal, and the theme adds `.ac-eye`
	 * on top of it. Both were rendering, stacked, so the 22px core button sat
	 * under the theme's icon and could not be tapped at all — the audit found
	 * it as a control covered by an svg. One control, so the core one goes.
	 */
	.woocommerce-form .show-password-input,
	.woocommerce-MyAccount-content .show-password-input {
		display: none;
	}

	/* A 17px box is below the floor even inside a 44px label. 22px keeps the
	   proportion of the row while being visible enough to aim at. */
	.ac-check input[type="checkbox"],
	.woocommerce-form__input-checkbox {
		width: 22px;
		height: 22px;
		flex: none;
	}
}


/* ==========================================================================
   One rhythm down the account column
   ==========================================================================
   Everything on these pages is a box — the navigation card, the two statistic
   tiles, the address panel — except the two pieces that sit between them: the
   welcome heading and the empty state. Those were spaced by their own margins,
   so reading down the dashboard the gaps went 22 (the grid) / 18 / 24, and the
   empty state then opened 40px of its own padding on top of that. Four
   different gaps between four things that all read as the same kind of block.

   The grid's own 22px is the page's gap, so it is the one the rest follow.
   ========================================================================== */

.ac-dash {
	--ac-gap: 22px;
}

.ac-welcome,
.ac-stats {
	margin-bottom: var(--ac-gap);
}

/*
 * The empty state is a card like everything around it.
 *
 * On the orders endpoint it is the whole of the content, and as bare centred
 * text it left the page looking like it had failed to load — a mark, a
 * sentence and a button floating in a column of cream with the footer a long
 * way below. Given the same ground and border as the navigation card beside
 * it, the same space reads as a panel that has nothing in it yet, which is
 * what it is.
 */
.ac-empty {
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	background: #fff;
	padding: 36px 20px;
}


/* ==========================================================================
   Orders, as cards
   ==========================================================================
   Replaces the styling of core's `shop_table`. See
   woocommerce/myaccount/orders.php for why the table went: on a phone its
   responsive mode omitted the order number entirely, which is the one column
   a customer is looking for.

   The card reuses the family already on these pages — white, hairline border,
   14px radius — so the order list, the navigation card beside it and the
   statistic tiles above it read as one set.
   ========================================================================== */

.ac-orders {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.ac-order {
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	background: #fff;
	padding: 16px 18px;
	display: grid;
	gap: 12px;
}

.ac-order__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.ac-order__num {
	font-size: 16px;
	font-weight: 800;
	color: var(--ink);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.ac-order__num:hover { text-decoration: underline; }

/*
 * The status is a pill, not a word in a column.
 *
 * Colour carries the meaning at a glance — which is the whole reason to look
 * at this list — and the three that matter are already defined for the
 * dashboard's "most recent order" card. Same values, so the two surfaces
 * cannot drift apart.
 */
.ac-order__status {
	padding: 4px 10px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: rgba(0, 0, 0, .07);
	color: var(--ink);
	white-space: nowrap;
}

.ac-order__status.status-completed  { background: #e4efe7; color: #2e6f4e; }
.ac-order__status.status-processing { background: #e3e7f2; color: #4a5a8c; }
.ac-order__status.status-on-hold    { background: #f7e7d8; color: #a8571e; }
.ac-order__status.status-cancelled,
.ac-order__status.status-failed     { background: #f3e3e5; color: #8e2b3a; }
.ac-order__status.status-refunded   { background: #eceaf3; color: #5a4a7a; }

/* Three facts on one line, wrapping to two on a narrow phone. */
.ac-order__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 28px;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid rgba(0, 0, 0, .07);
}

.ac-order__facts > div { display: grid; gap: 2px; }

.ac-order__facts dt {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .55;
}

.ac-order__facts dd {
	margin: 0;
	font-size: 14px;
	color: var(--ink);
}

.ac-order__total {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ac-order__total .amount { font-weight: 700; }

.ac-order__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * A real button.
 *
 * The View action inherited WooCommerce's `.button`, which on this install
 * rendered pale grey on near-white — it read as disabled, on the only control
 * in the row. Ink outline resting, ink filled on hover, and 44px tall so it is
 * a thumb target rather than a link that happens to have padding.
 */
.ac-order__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--ink);
	border-radius: 9px;
	background: #fff;
	color: var(--ink);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.ac-order__btn:hover,
.ac-order__btn:focus-visible {
	background: var(--ink);
	color: #fff;
}

/* Pay is the one action with urgency, so it is the one that is filled. */
.ac-order__btn--pay {
	background: #c9a227;
	border-color: #c9a227;
	color: #1c1a17;
}

.ac-order__btn--pay:hover,
.ac-order__btn--pay:focus-visible {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

.ac-orders__pagination {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}

@media (max-width: 480px) {
	.ac-order { padding: 14px; }
	.ac-order__facts { gap: 6px 20px; }
	.ac-order__actions .ac-order__btn { flex: 1 1 auto; }
}


/* ==========================================================================
   Viewing one order
   ==========================================================================
   WooCommerce opens this screen with a bare paragraph — "Order #17518 was
   placed on 8 September 2026 and is currently Processing." — as unstyled body
   text with nothing above it. It is the only place on the page that says which
   order is being looked at and what state it is in, and it read as a sentence
   someone forgot to design.

   It carries three spans (.order-number, .order-date, .order-status), which is
   enough to make a header out of without overriding the template.
   ========================================================================== */

/* Not `:first-child` — an empty notices wrapper precedes it. */
.woocommerce-MyAccount-content > p:has(.order-number) {
	margin: 0 0 18px;
	padding: 16px 18px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	background: #fff;
	font-size: 14px;
	line-height: 1.9;
	color: var(--muted);
}

.woocommerce-MyAccount-content .order-number {
	font-size: 17px;
	font-weight: 800;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.woocommerce-MyAccount-content .order-date {
	font-weight: 600;
	color: var(--ink);
}

/*
 * The status as a pill, matching the order list.
 *
 * Core prints the label with no status class, so this cannot be coloured per
 * state the way `.ac-order__status` is — a neutral pill that says the same
 * thing is the honest version rather than guessing a colour from the text.
 */
.woocommerce-MyAccount-content .order-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 99px;
	background: rgba(0, 0, 0, .07);
	color: var(--ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* The two section headings, in the face the rest of the site uses. */
.woocommerce-order-details__title,
.woocommerce-customer-details .woocommerce-column__title,
.woocommerce-customer-details h2 {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 12px;
	text-transform: none;
	letter-spacing: 0;
}

/*
 * The order total wraps, and it must not orphan its last word.
 *
 * WooCommerce returns "$1,138.00 (includes $148.44 GST)" as one string in one
 * cell. In a right-aligned cell about 210px wide that breaks after "$148.44"
 * and leaves "GST)" alone on a second line — the same orphan the thank-you
 * page had, in the same string, from the same source.
 */
.woocommerce-table--order-details tfoot tr:last-child td {
	text-wrap: pretty;
	line-height: 1.45;
}

/* The address block is a card like everything else on these pages. */
.woocommerce-customer-details address {
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	background: #fff;
	padding: 16px 18px;
	font-style: normal;
	line-height: 1.7;
}

@media (max-width: 560px) {
	.woocommerce-MyAccount-content > p:has(.order-number) {
		padding: 14px;
		line-height: 1.8;
	}

	.woocommerce-table--order-details th,
	.woocommerce-table--order-details td {
		padding: 11px 12px;
	}
}


/*
 * The order table's product column, on a phone.
 *
 * The name and the amount were sharing a narrow row and the name lost: "ALBA
 * Green Dial Men's Watch" came down four words to a line beside a price that
 * needed none of the space it was holding. The amount is short and fixed, so
 * it takes only what it needs and the name gets the rest.
 */
@media (max-width: 560px) {
	/*
	 * `width: 1%` on the amount column plus `overflow-wrap: anywhere` on the
	 * product link was a disaster: `anywhere` made the name's minimum width one
	 * CHARACTER, so the auto table happily gave the name column one character
	 * and the product came down the page vertically, one letter per line.
	 *
	 * `anywhere` is for a URL or an unbroken SKU. A product name is words, and
	 * words already know where to break. So the name keeps normal wrapping and
	 * simply gets a floor, and the amount takes what it needs and no more.
	 */
	.woocommerce-table--order-details .product-total,
	.woocommerce-table--order-details tfoot td {
		width: 1px;
		white-space: nowrap;
	}

	.woocommerce-table--order-details .product-name,
	.woocommerce-table--order-details tfoot th {
		min-width: 55%;
		overflow-wrap: normal;
		word-break: normal;
	}

	/* The total is the one cell that must wrap: it carries the GST note, which
	   is a phrase rather than a figure. */
	.woocommerce-table--order-details tfoot tr:last-child td {
		white-space: normal;
		min-width: 120px;
	}
}

/*
 * Addresses: out-rank WooCommerce's two-column float layout.
 *
 * The page uses core's my-address.php, whose wrapper also carries `col2-set`
 * and whose cards carry `col-1` / `col-2`. WooCommerce's stylesheet gives those
 * `float` and `width: 48%` at (0,3,0), which beat the card rules above at
 * (0,1,0) — so each card shrank to half of its grid cell. Its clearfix also
 * adds `::before` / `::after` to `col2-set`, and inside a grid a pseudo-element
 * is a grid item: the `::before` took the first cell and pushed Billing into the
 * second column and Shipping onto a new row. Both are neutralised here.
 */
.woocommerce .woocommerce-Addresses.col2-set::before,
.woocommerce .woocommerce-Addresses.col2-set::after {
	content: none;
	display: none;
}

/*
 * Two cards only when each gets at least 320px — the width "Edit Shipping
 * address" needs beside its heading. Below that (the 626px column at a 1024px
 * viewport) one card kept the link beside its title and the other dropped it
 * underneath, so the pair looked mismatched; they now stack at full width.
 * min() stops the track overflowing a column narrower than 320px.
 */
.woocommerce .woocommerce-Addresses.col2-set {
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.woocommerce .woocommerce-Addresses.col2-set > .woocommerce-Address {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

.woocommerce .woocommerce-Address-title.title::before,
.woocommerce .woocommerce-Address-title.title::after {
	content: none;
	display: none;
}

.woocommerce .woocommerce-Address-title.title h2,
.woocommerce .woocommerce-Address-title.title h3 {
	float: none;
}

.woocommerce .woocommerce-Address-title.title .edit {
	float: none;
	white-space: nowrap;
}

/*
 * Account content: fill the whole second track.
 *
 * WooCommerce's stylesheet floats `.woocommerce-MyAccount-content` at
 * `width: 68%` (0,2,0) for its own float layout, and only resets it below 769px.
 * Inside this theme's grid that shrank every signed-in account page to 68% of its
 * column — measured at 1440px: track 826px, content 562px — which is what
 * squeezed the address cards until their titles broke.
 */
.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/*
 * Keep each card title on one line. Where a card is too narrow for the heading
 * and "Edit Billing address" to share a row, the row wraps and the edit link
 * drops under the title instead of the heading breaking in two.
 */
.woocommerce .woocommerce-Address-title.title {
	flex-wrap: wrap;
	row-gap: 4px;
}

.woocommerce .woocommerce-Address-title.title h2,
.woocommerce .woocommerce-Address-title.title h3 {
	white-space: nowrap;
}