/* =============================================================================
   Page — WooCommerce My Account (/my-account/ + endpoints)
   ----------------------------------------------------------------------------
   Scoped re-skin of WooCommerce's stock myaccount templates. Layered on top
   of WC's existing markup — we do NOT replace any WC template, only restyle.

   Class prefix for our own wrappers: .sp-account-page__*
   WC's classes are targeted scoped to body.woocommerce-account.

   Mirrors design language from:
     - patterns/page-contact.php       (form scaffolding + sidecard)
     - patterns/page-about.php         (stat / location-card pattern)
     - assets/css/page-contact.css     (input + label + focus ring system)
     - assets/css/buttons.css          (.wp-element-button + peach + outline)
     - assets/css/cards.css            (.sp-card surface + lift)

   Reference: WC 10.8 myaccount templates:
     myaccount/navigation.php          .woocommerce-MyAccount-navigation
     myaccount/dashboard.php           (intro <p> + dashboard hook)
     myaccount/orders.php              .woocommerce-orders-table.*
     myaccount/my-address.php          .woocommerce-Addresses
     myaccount/form-edit-account.php   .woocommerce-EditAccountForm
     myaccount/form-login.php          #customer_login + .woocommerce-form-login

   The WC My Account page may render via either:
     1) The classic shortcode  [woocommerce_my_account]
     2) The newer block        wp:woocommerce/customer-account
   Both ultimately emit the same .woocommerce-MyAccount-* class names, so a
   single body.woocommerce-account scope covers both paths.
   ============================================================================= */

/* --------------------------------------------------------------------------- */
/* SECTION — page-level frame                                                  */
/* The WC page sits inside the same wp-block-group main. Push the WC content   */
/* into our standard wide-bleed framed container with a generous outer pad.    */
/* --------------------------------------------------------------------------- */

body.woocommerce-account .sp-account-page__hero,
body.woocommerce-account .sp-account-page__shell {
	scroll-margin-top: 96px;
}

/* Hero band — small, calm, surface-bg framed card (matches contact hero). */
.sp-account-page__hero {
	background-color: var(--color-surface);
	color: var(--color-text);
	padding-block: clamp(48px, 6vw, 88px);
	padding-inline: clamp(24px, 5vw, 96px);
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	margin-block-end: clamp(24px, 3vw, 48px);
	width: calc(100% - 2 * var(--layout-frame-pad));
	border-radius: var(--radius-lg);
	position: relative;
	overflow: hidden;
}

.sp-account-page__hero-inner {
	max-width: 1320px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
}

.sp-account-page__hero-eyebrow {
	margin: 0;
}

.sp-account-page__hero-headline {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(40px, 5.2vw, 72px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.025em;
	margin: 0;
	max-width: 18ch;
	font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 400;
}

.sp-account-page__hero-headline em {
	color: var(--color-accent);
	font-style: italic;
}

.sp-account-page__hero-lead {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.55;
	color: var(--color-text-muted);
	margin: 0;
	max-width: 56ch;
}

/* --------------------------------------------------------------------------- */
/* SECTION — outer shell wrapping the WC block / shortcode content             */
/* When wrapped via templates/page-my-account.html with .sp-account-page__shell */
/* the WC content sits inside our framed surface like other pages.             */
/* --------------------------------------------------------------------------- */

.sp-account-page__shell {
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-inline: clamp(16px, 3vw, 48px);
	padding-block: clamp(32px, 4vw, 64px);
	margin-block-end: var(--layout-frame-pad);
}

/* Fallback frame when no wrapper template — pad the WC block directly.       */
body.woocommerce-account .woocommerce {
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-inline: clamp(16px, 3vw, 48px);
	padding-block: clamp(24px, 3vw, 48px);
}

body.woocommerce-account .sp-account-page__shell .woocommerce {
	max-width: none;
	width: auto;
	padding: 0;
	margin: 0;
}

/* --------------------------------------------------------------------------- */
/* DASHBOARD LAYOUT — left-rail nav + main content                             */
/* WC ships .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content */
/* as siblings inside .woocommerce. Use CSS grid scoped to the account body.   */
/* --------------------------------------------------------------------------- */

body.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: minmax(240px, 24fr) minmax(0, 76fr);
	gap: clamp(24px, 3vw, 56px);
	align-items: start;
}

@media (max-width: 900px) {
	body.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
		gap: var(--sp-xl);
	}
}

/* The logged-out login + register screen is NOT a dashboard — single col.    */
body.woocommerce-account.logged-out .woocommerce,
body.woocommerce-account .woocommerce:has(#customer_login) {
	display: block;
}

/* --------------------------------------------------------------------------- */
/* LEFT RAIL — account navigation                                              */
/* Restyled as a cream sidecard, matching .sp-contact-page__sidecard.          */
/* --------------------------------------------------------------------------- */

body.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(20px, 2vw, 28px) clamp(16px, 1.6vw, 24px);
	position: sticky;
	top: 96px;
}

@media (max-width: 900px) {
	body.woocommerce-account .woocommerce-MyAccount-navigation {
		position: static;
	}
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: var(--sp-md);
	padding: 12px 16px 12px 18px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--color-text);
	text-decoration: none;
	border-radius: var(--radius-md);
	border-left: 3px solid transparent;
	line-height: 1.3;
	transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-account .woocommerce-MyAccount-navigation li a {
		transition: none;
	}
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
	background: var(--color-surface);
	color: var(--color-text);
	outline: none;
}

/* Active item — ink fill, cream text, peach left-accent. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--is-active a {
	background: var(--color-text);
	color: var(--color-bg);
	border-left-color: var(--color-peach);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--is-active a:hover {
	background: var(--color-text);
	color: var(--color-bg);
}

/* Logout — slight separation by border-top. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--sp-sm);
	padding-top: var(--sp-sm);
	border-top: 1px solid var(--color-border);
}

/* Icon hooks — Lucide SVGs injected via ::before for each endpoint type.
   Uses url-encoded inline SVGs so no extra HTTP request. 18px square.         */
body.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
	content: '';
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 18px 18px;
	mask-size: 18px 18px;
}

/* Dashboard → Lucide Home */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>");
}

/* Orders → Lucide Package */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m7.5 4.27 9 5.15'/><path d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><path d='m3.3 7 8.7 5 8.7-5'/><path d='M12 22V12'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m7.5 4.27 9 5.15'/><path d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><path d='m3.3 7 8.7 5 8.7-5'/><path d='M12 22V12'/></svg>");
}

/* Downloads → Lucide Download */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
}

/* Addresses / edit-address → Lucide MapPin */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>");
}

/* Payment methods → Lucide CreditCard */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--payment-methods a::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='14' x='2' y='5' rx='2'/><line x1='2' x2='22' y1='10' y2='10'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='14' x='2' y='5' rx='2'/><line x1='2' x2='22' y1='10' y2='10'/></svg>");
}

/* Account details / edit-account → Lucide User */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}

/* Take-back register (custom endpoint added in inc/my-account.php) → Lucide RefreshCw */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--take-back-register a::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/><path d='M21 3v5h-5'/><path d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/><path d='M8 16H3v5'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/><path d='M21 3v5h-5'/><path d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/><path d='M8 16H3v5'/></svg>");
}

/* Logout → Lucide LogOut */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
}

/* --------------------------------------------------------------------------- */
/* MAIN CONTENT AREA                                                           */
/* --------------------------------------------------------------------------- */

body.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(28px, 3vw, 48px) clamp(24px, 2.6vw, 40px);
	min-width: 0; /* allow inner tables to overflow-scroll cleanly */
}

body.woocommerce-account .woocommerce-MyAccount-content > p {
	font-size: var(--wp--preset--font-size--base);
	color: var(--color-text);
	line-height: 1.6;
	margin: 0 0 var(--sp-lg) 0;
	max-width: 65ch;
}

body.woocommerce-account .woocommerce-MyAccount-content > p + p {
	color: var(--color-text-muted);
}

body.woocommerce-account .woocommerce-MyAccount-content > p a {
	color: var(--color-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.woocommerce-account .woocommerce-MyAccount-content > p a:hover {
	color: var(--color-accent);
}

body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.1;
	margin: 0 0 var(--sp-md) 0;
	color: var(--color-text);
}

body.woocommerce-account .woocommerce-MyAccount-content h2 {
	font-size: clamp(24px, 2.4vw, 32px);
}

body.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-size: clamp(20px, 1.8vw, 24px);
}

body.woocommerce-account .woocommerce-MyAccount-content fieldset {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: clamp(20px, 2vw, 28px);
	margin-block: var(--sp-lg);
	background: var(--color-bg);
}

body.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent);
	padding: 0 var(--sp-sm);
}

/* --------------------------------------------------------------------------- */
/* ORDERS TABLE                                                                */
/* WC ships .woocommerce-orders-table — hairline borders, monospaced numerics. */
/* --------------------------------------------------------------------------- */

body.woocommerce-account .woocommerce-orders-table,
body.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	margin-block: var(--sp-md);
}

body.woocommerce-account .woocommerce-orders-table thead th,
body.woocommerce-account table.shop_table thead th {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	color: var(--color-accent);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: left;
	padding: 14px 18px;
}

body.woocommerce-account .woocommerce-orders-table tbody td,
body.woocommerce-account .woocommerce-orders-table tbody th,
body.woocommerce-account table.shop_table tbody td,
body.woocommerce-account table.shop_table tbody th {
	padding: 16px 18px;
	border-bottom: 1px solid var(--color-border);
	vertical-align: middle;
	color: var(--color-text);
	background: transparent;
	font-weight: 400;
	text-align: left;
}

body.woocommerce-account .woocommerce-orders-table tbody tr:last-child td,
body.woocommerce-account .woocommerce-orders-table tbody tr:last-child th,
body.woocommerce-account table.shop_table tbody tr:last-child td,
body.woocommerce-account table.shop_table tbody tr:last-child th {
	border-bottom: 0;
}

/* Order number — GC Commune / Fraunces feel, slightly larger. */
body.woocommerce-account .woocommerce-orders-table__cell-order-number a {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 17px;
	color: var(--color-text);
	text-decoration: none;
	font-variant-numeric: tabular-nums lining-nums;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Dates in slate accent, tabular. */
body.woocommerce-account .woocommerce-orders-table__cell-order-date time {
	color: var(--color-accent);
	font-variant-numeric: tabular-nums;
}

/* Totals — tabular nums, ink. */
body.woocommerce-account .woocommerce-orders-table__cell-order-total {
	font-variant-numeric: tabular-nums;
	color: var(--color-text);
}

/* Status chip — pill of surface tone. */
body.woocommerce-account .woocommerce-orders-table__cell-order-status {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

/* Action buttons inside the orders table — make View/View order peach. */
body.woocommerce-account .woocommerce-orders-table .woocommerce-button,
body.woocommerce-account .woocommerce-orders-table .button {
	background: var(--color-peach);
	color: var(--color-text);
	border: 1px solid var(--color-peach);
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -0.005em;
	border-radius: var(--radius-md);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.2;
}

body.woocommerce-account .woocommerce-orders-table .woocommerce-button:hover,
body.woocommerce-account .woocommerce-orders-table .button:hover {
	background: var(--color-bg);
	color: var(--color-text);
	border-color: var(--color-text);
}

body.woocommerce-account .woocommerce-orders-table .woocommerce-button + .woocommerce-button,
body.woocommerce-account .woocommerce-orders-table .button + .button {
	margin-left: var(--sp-sm);
}

/* Responsive table — WC's shop_table_responsive collapses cells with data-title.
   On narrow widths, render as stacked label/value rows.                       */
@media (max-width: 720px) {
	body.woocommerce-account .woocommerce-orders-table,
	body.woocommerce-account table.shop_table {
		border: 0;
	}

	body.woocommerce-account .woocommerce-orders-table thead,
	body.woocommerce-account table.shop_table thead {
		display: none;
	}

	body.woocommerce-account .woocommerce-orders-table tbody tr,
	body.woocommerce-account table.shop_table tbody tr {
		display: block;
		background: var(--color-bg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		margin-bottom: var(--sp-md);
		padding: var(--sp-md);
	}

	body.woocommerce-account .woocommerce-orders-table tbody td,
	body.woocommerce-account .woocommerce-orders-table tbody th,
	body.woocommerce-account table.shop_table tbody td,
	body.woocommerce-account table.shop_table tbody th {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var(--sp-md);
		padding: 8px 0;
		border-bottom: 1px solid var(--color-border);
	}

	body.woocommerce-account .woocommerce-orders-table tbody td:last-child,
	body.woocommerce-account .woocommerce-orders-table tbody th:last-child,
	body.woocommerce-account table.shop_table tbody td:last-child,
	body.woocommerce-account table.shop_table tbody th:last-child {
		border-bottom: 0;
	}

	body.woocommerce-account .woocommerce-orders-table tbody td::before,
	body.woocommerce-account .woocommerce-orders-table tbody th::before,
	body.woocommerce-account table.shop_table tbody td::before,
	body.woocommerce-account table.shop_table tbody th::before {
		content: attr(data-title);
		font-family: var(--wp--preset--font-family--inter);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: 500;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--color-accent);
	}
}

/* Pagination row */
body.woocommerce-account .woocommerce-pagination {
	display: flex;
	gap: var(--sp-md);
	margin-top: var(--sp-lg);
}

/* --------------------------------------------------------------------------- */
/* ADDRESSES — 2-card grid (billing / shipping)                                */
/* --------------------------------------------------------------------------- */

body.woocommerce-account .u-columns.woocommerce-Addresses,
body.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-lg);
	margin-block: var(--sp-md);
}

@media (max-width: 720px) {
	body.woocommerce-account .u-columns.woocommerce-Addresses,
	body.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
}

body.woocommerce-account .woocommerce-Address {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 2.4vw, 36px);
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
}

body.woocommerce-account .woocommerce-Address-title {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sp-md);
	margin: 0;
}

body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 400;
	letter-spacing: -0.015em;
	margin: 0;
	line-height: 1.1;
}

body.woocommerce-account .woocommerce-Address-title .edit {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--color-text);
	text-decoration: none;
	border: 1px solid var(--color-text);
	border-radius: var(--radius-md);
	padding: 8px 14px;
	line-height: 1.2;
	background: transparent;
	transition: background 160ms ease-out, color 160ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-account .woocommerce-Address-title .edit {
		transition: none;
	}
}

body.woocommerce-account .woocommerce-Address-title .edit:hover,
body.woocommerce-account .woocommerce-Address-title .edit:focus-visible {
	background: var(--color-text);
	color: var(--color-bg);
	outline: none;
}

body.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 1.65;
	color: var(--color-text);
	margin: 0;
}

/* --------------------------------------------------------------------------- */
/* FORMS — login, register, edit-account, edit-address                         */
/* Mirror .sp-contact-page__input / __label tokens.                            */
/* --------------------------------------------------------------------------- */

body.woocommerce-account .woocommerce-form-row,
body.woocommerce-account .form-row,
body.woocommerce-account .woocommerce-EditAccountForm .form-row,
body.woocommerce-account .woocommerce-address-fields .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--sp-xs);
	margin: 0 0 var(--sp-md) 0;
}

body.woocommerce-account .woocommerce-form-row label,
body.woocommerce-account .form-row label,
body.woocommerce-account .woocommerce-EditAccountForm label {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	display: block;
}

body.woocommerce-account label .required {
	color: var(--color-accent);
	margin-left: 2px;
	text-decoration: none;
	border: 0;
}

/* Inputs — match .sp-contact-page__input system. */
body.woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="password"],
body.woocommerce-account input[type="tel"],
body.woocommerce-account input[type="url"],
body.woocommerce-account input[type="number"],
body.woocommerce-account textarea,
body.woocommerce-account select,
body.woocommerce-account .woocommerce-Input,
body.woocommerce-account .input-text,
body.woocommerce-account .select2-container .select2-selection--single {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	line-height: 1.4;
	padding: 14px 16px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	width: 100%;
	box-sizing: border-box;
	transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

body.woocommerce-account input[type="text"]::placeholder,
body.woocommerce-account input[type="email"]::placeholder,
body.woocommerce-account input[type="password"]::placeholder,
body.woocommerce-account textarea::placeholder {
	color: var(--color-text-muted);
	opacity: 0.6;
}

body.woocommerce-account input[type="text"]:focus,
body.woocommerce-account input[type="email"]:focus,
body.woocommerce-account input[type="password"]:focus,
body.woocommerce-account input[type="tel"]:focus,
body.woocommerce-account input[type="url"]:focus,
body.woocommerce-account input[type="number"]:focus,
body.woocommerce-account textarea:focus,
body.woocommerce-account select:focus,
body.woocommerce-account input[type="text"]:focus-visible,
body.woocommerce-account input[type="email"]:focus-visible,
body.woocommerce-account input[type="password"]:focus-visible,
body.woocommerce-account textarea:focus-visible {
	outline: none;
	border-color: var(--color-text);
	box-shadow: 0 0 0 3px rgba(90, 107, 122, 0.45);
	background: var(--color-bg);
}

/* Select chevron — re-use the slate chevron from page-contact.css. */
body.woocommerce-account select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A6B7A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 44px;
	cursor: pointer;
}

/* Remember-me + other inline checkboxes. */
body.woocommerce-account .woocommerce-form-login__rememberme,
body.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sp-sm);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-text-muted);
	cursor: pointer;
}

body.woocommerce-account .woocommerce-form__input-checkbox,
body.woocommerce-account input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	accent-color: var(--color-accent);
	cursor: pointer;
	margin: 0;
}

/* Lost-password link */
body.woocommerce-account .woocommerce-LostPassword a {
	color: var(--color-accent);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

body.woocommerce-account .woocommerce-LostPassword a:hover {
	color: var(--color-text);
}

/* Submit buttons — peach primary on login/register, peach on save changes. */
body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-register__submit,
body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"],
body.woocommerce-account .woocommerce-address-fields button[type="submit"],
body.woocommerce-account form button[name="save_account_details"],
body.woocommerce-account form button[name="save_address"] {
	background: var(--color-peach);
	color: var(--color-text);
	border: 1px solid var(--color-peach);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	letter-spacing: -0.005em;
	padding: var(--sp-md) var(--sp-xl);
	border-radius: var(--radius-md);
	cursor: pointer;
	line-height: 1.2;
	transition: background 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
	margin-top: var(--sp-md);
}

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

body.woocommerce-account .woocommerce-form-login__submit:hover,
body.woocommerce-account .woocommerce-form-register__submit:hover,
body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover,
body.woocommerce-account form button[name="save_account_details"]:hover,
body.woocommerce-account form button[name="save_address"]:hover {
	background: var(--color-bg);
	color: var(--color-text);
	border-color: var(--color-text);
}

/* Password strength meter — WC injects this dynamically; keep it readable. */
body.woocommerce-account .woocommerce-password-strength {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	padding: 8px 12px;
	border-radius: var(--radius-md);
	margin-top: var(--sp-sm);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
}

body.woocommerce-account .woocommerce-password-strength.strong { border-color: var(--color-accent-tech); color: var(--color-accent-tech); }
body.woocommerce-account .woocommerce-password-strength.good   { border-color: var(--color-accent); color: var(--color-accent); }
body.woocommerce-account .woocommerce-password-strength.short,
body.woocommerce-account .woocommerce-password-strength.bad {
	border-color: var(--color-destructive);
	color: var(--color-destructive);
}

body.woocommerce-account .woocommerce-password-hint {
	font-size: 12px;
	color: var(--color-text-muted);
	font-style: italic;
	margin-top: 4px;
	display: block;
}

/* --------------------------------------------------------------------------- */
/* LOGGED-OUT — login + register 2-col layout                                  */
/* WC ships #customer_login.u-columns.col2-set with .col-1 / .col-2 children. */
/* --------------------------------------------------------------------------- */

body.woocommerce-account #customer_login.u-columns,
body.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 64px);
	margin-block: 0;
}

@media (max-width: 720px) {
	body.woocommerce-account #customer_login.u-columns,
	body.woocommerce-account #customer_login {
		grid-template-columns: 1fr;
		gap: var(--sp-2xl);
	}
}

body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2,
body.woocommerce-account #customer_login .col-1,
body.woocommerce-account #customer_login .col-2 {
	width: 100%;
	float: none;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(28px, 3vw, 44px) clamp(24px, 2.6vw, 36px);
}

body.woocommerce-account #customer_login h2 {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0 0 var(--sp-lg) 0;
}

body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
}

body.woocommerce-account .woocommerce-form-login .form-row:last-child,
body.woocommerce-account .woocommerce-form-register .form-row:last-child {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-md);
}

/* Logged-out reassurance line — added by template wrapper, see template. */
.sp-account-page__reassurance {
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-inline: clamp(16px, 3vw, 48px);
	margin-block-end: var(--layout-frame-pad);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	color: var(--color-text-muted);
	text-align: center;
	line-height: 1.55;
}

.sp-account-page__reassurance a {
	color: var(--color-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	font-weight: 500;
}

.sp-account-page__reassurance a:hover {
	color: var(--color-accent);
}

/* --------------------------------------------------------------------------- */
/* DASHBOARD QUICK-ACTION CARDS                                                */
/* Optional decorative tile row, surfaced inside .woocommerce-MyAccount-content */
/* via the woocommerce_account_dashboard hook (recommend wiring in PHP).       */
/* --------------------------------------------------------------------------- */

.sp-account-page__quick {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-md);
	margin-top: var(--sp-lg);
}

@media (max-width: 720px) {
	.sp-account-page__quick {
		grid-template-columns: 1fr;
	}
}

.sp-account-page__quick-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(20px, 2vw, 28px);
	display: flex;
	flex-direction: column;
	gap: var(--sp-sm);
	text-decoration: none;
	color: var(--color-text);
	transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

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

.sp-account-page__quick-card:hover,
.sp-account-page__quick-card:focus-visible {
	transform: translateY(-3px);
	box-shadow:
		0 4px 12px rgba(28, 26, 23, 0.08),
		0 2px 4px rgba(28, 26, 23, 0.04);
	outline: none;
}

.sp-account-page__quick-card-icon {
	width: 28px;
	height: 28px;
	color: var(--color-accent);
}

.sp-account-page__quick-card-label {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0;
}

.sp-account-page__quick-card-title {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(20px, 1.6vw, 24px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0;
	color: var(--color-text);
}

.sp-account-page__quick-card-meta {
	font-size: 13px;
	color: var(--color-text-muted);
	line-height: 1.5;
	margin: 0;
}

/* --------------------------------------------------------------------------- */
/* NOTICES — woocommerce-info / woocommerce-message / woocommerce-error        */
/* --------------------------------------------------------------------------- */

body.woocommerce-account .woocommerce-notices-wrapper:empty {
	display: none;
}

body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--radius-md);
	padding: var(--sp-md) var(--sp-lg);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	color: var(--color-text);
	line-height: 1.5;
	margin-block: var(--sp-md);
	list-style: none;
}

body.woocommerce-account .woocommerce-message {
	border-left-color: var(--color-accent-tech);
}

body.woocommerce-account .woocommerce-error {
	border-left-color: var(--color-destructive);
	background: rgba(192, 57, 43, 0.04);
}

/* --------------------------------------------------------------------------- */
/* CLEARS — WC injects .clear divs; collapse them inside our grid layouts.     */
/* --------------------------------------------------------------------------- */

body.woocommerce-account .clear {
	clear: none;
	display: none;
}

body.woocommerce-account .woocommerce-EditAccountForm .form-row-first,
body.woocommerce-account .woocommerce-EditAccountForm .form-row-last,
body.woocommerce-account .woocommerce-address-fields .form-row-first,
body.woocommerce-account .woocommerce-address-fields .form-row-last {
	width: 100%;
	float: none;
}

/* Two-up first/last name layout on edit-account + edit-address forms. */
@media (min-width: 720px) {
	body.woocommerce-account .woocommerce-EditAccountForm,
	body.woocommerce-account .woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-md);
	}
	body.woocommerce-account .woocommerce-EditAccountForm > .form-row-wide,
	body.woocommerce-account .woocommerce-EditAccountForm > fieldset,
	body.woocommerce-account .woocommerce-EditAccountForm > p:has(button),
	body.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-wide {
		grid-column: 1 / -1;
	}
}