/* ==========================================================================
 * SPD Account — Phase 9 (mon-compte : orders, favoris, adresses, fidélité,
 * profil) + Auth card (login / register / lost-password / reset).
 *
 * Reproduces the React AccountPage / AuthPage
 * (design-spd/src/pages/AccountPage.tsx + AuthPage.tsx) on top of the
 * NATIVE WooCommerce account markup. Only loaded on is_account_page().
 *
 * Every value below maps 1:1 to a React Tailwind class — the Tailwind
 * class is quoted in each block header. Design tokens come from
 * spd-design-system.css.
 * ========================================================================== */

/* Hide the Astra page title — the SPD shell provides its own
   breadcrumb + account header (same pattern as spd-cart.css /
   spd-order.css). */
body.woocommerce-account .entry-header { display: none; }

/* ============================================================
   1. Page shell — React: max-w-7xl mx-auto px-4 sm:px-6 py-6
      space-y-8 pb-16
   ============================================================ */
#spd-account-page.spd-account {
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
	padding: var(--spd-space-5) var(--spd-space-4) 4rem;
	font-family: var(--spd-font-family);
}
@media (min-width: 640px) {
	#spd-account-page.spd-account {
		padding-left: var(--spd-space-5);
		padding-right: var(--spd-space-5);
	}
}

/* The account page is the only max-w-7xl surface — Astra caps
   .ast-container at 1240px and .woocommerce at 1200px, which left a
   visibly narrower, right-shifted content column vs the React layout
   (and vs the 1280px SPD header). Let the account page use the full
   SPD container width; .spd-account provides its own px padding. */
.woocommerce-account .ast-container {
	max-width: var(--spd-container-max);
	padding-left: 0;
	padding-right: 0;
}
.woocommerce-account .woocommerce {
	max-width: none;
}

/* Guest notices (login/register errors) render outside #spd-auth-page —
   keep their edges aligned with the page padding. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	padding-left: var(--spd-space-4);
	padding-right: var(--spd-space-4);
}
@media (min-width: 640px) {
	.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
		padding-left: var(--spd-space-5);
		padding-right: var(--spd-space-5);
	}
}

/* ============================================================
   2. Account header card — React: bg-white rounded-3xl border
      border-slate-200 p-6 sm:p-8 shadow-xs flex flex-col sm:flex-row
      items-center justify-between gap-6
   ============================================================ */
#spd-account-page .spd-account__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: var(--spd-space-5);
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-2xl);
	padding: var(--spd-space-5);
	box-shadow: var(--spd-shadow-xs);
	margin-bottom: var(--spd-space-6);
}
@media (min-width: 640px) {
	#spd-account-page .spd-account__head {
		flex-direction: row;
		padding: var(--spd-space-6);
	}
}

#spd-account-page .spd-account__head-user {
	display: flex;
	align-items: center;
	gap: var(--spd-space-4);
	text-align: center;
}
@media (min-width: 640px) {
	#spd-account-page .spd-account__head-user { text-align: left; }
}

/* React: w-16 h-16 rounded-full bg-[#EBF3F9] text-[#0F5B94]
   font-black text-xl border-2 border-[#0F5B94]/20 shadow-xs */
#spd-account-page .spd-account__avatar {
	width: 4rem;
	height: 4rem;
	flex-shrink: 0;
	border-radius: var(--spd-radius-full);
	background: var(--spd-ui-blue-soft);
	color: var(--spd-ui-blue);
	font-weight: var(--spd-font-weight-black);
	font-size: var(--spd-font-size-xl);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid rgb(15 91 148 / .2);
	box-shadow: var(--spd-shadow-xs);
}

#spd-account-page .spd-account__name {
	font-size: var(--spd-font-size-xl);
	font-weight: var(--spd-font-weight-extrabold);
	color: var(--spd-text);
	margin: 0;
	line-height: var(--spd-line-height-tight);
}
@media (min-width: 640px) {
	#spd-account-page .spd-account__name { font-size: var(--spd-font-size-2xl); }
}

#spd-account-page .spd-account__contact {
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-muted);
	margin: 2px 0 0;
}

#spd-account-page .spd-account__head-side {
	display: flex;
	align-items: center;
	gap: var(--spd-space-4);
}

/* Loyalty points chip — React: bg-[#EBF3F9] p-3 rounded-2xl
   text-center px-5 */
#spd-account-page .spd-account__points {
	display: block;
	background: var(--spd-ui-blue-soft);
	padding: var(--spd-space-3) var(--spd-space-5);
	border-radius: var(--spd-radius-xl);
	text-align: center;
	text-decoration: none;
	transition: box-shadow var(--spd-transition-fast), transform var(--spd-transition-fast);
}
#spd-account-page .spd-account__points:hover { box-shadow: var(--spd-shadow-sm); }
#spd-account-page .spd-account__points:focus-visible {
	outline: 2px solid var(--spd-ui-blue);
	outline-offset: 2px;
}
#spd-account-page .spd-account__points-label {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-ui-blue);
	letter-spacing: var(--spd-tracking-wide);
}
#spd-account-page .spd-account__points-value {
	display: block;
	font-size: var(--spd-font-size-xl);
	font-weight: var(--spd-font-weight-black);
	color: var(--spd-text);
	line-height: var(--spd-line-height-tight);
}
#spd-account-page .spd-account__points-sub {
	display: block;
	font-size: 10px;
	color: var(--spd-text-muted);
}

/* Logout — React: p-3 rounded-2xl border border-slate-200
   text-slate-500 hover:text-[#D93829] hover:bg-[#FDECEB] */
#spd-account-page .spd-account__logout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--spd-space-3);
	border-radius: var(--spd-radius-xl);
	border: 1px solid var(--spd-border);
	color: var(--spd-text-muted);
	background: var(--spd-surface);
	transition: color var(--spd-transition-fast), background-color var(--spd-transition-fast), border-color var(--spd-transition-fast);
}
#spd-account-page .spd-account__logout .spd-icon { width: 1.25rem; height: 1.25rem; }
#spd-account-page .spd-account__logout:hover {
	color: var(--spd-ui-red);
	background: #FDECEB;
	border-color: #F5C6C3;
}
#spd-account-page .spd-account__logout:focus-visible {
	outline: 2px solid var(--spd-ui-blue);
	outline-offset: 2px;
}

/* ============================================================
   3. Grid — React: grid grid-cols-1 lg:grid-cols-12 gap-8
      items-start (sidebar 3 / content 9)
   ============================================================ */
#spd-account-page .spd-account__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* minmax(0) — let the mobile nav scroller shrink below its content width */
	gap: var(--spd-space-6);
	align-items: start;
}
@media (min-width: 1024px) {
	#spd-account-page .spd-account__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	#spd-account-page .spd-account__grid .spd-account-nav { grid-column: span 3 / span 3; }
	#spd-account-page .spd-account__grid .spd-account__content { grid-column: span 9 / span 9; }
}

/* ============================================================
   4. Sidebar nav — React: bg-white rounded-3xl border
      border-slate-200 p-3 shadow-xs space-y-1
      items: w-full flex items-center gap-3 px-4 py-3 rounded-2xl
      text-sm font-bold — active bg-[#0F5B94] text-white shadow-xs,
      idle text-slate-600 hover:bg-slate-50
   ============================================================ */
#spd-account-page .spd-account-nav {
	/* Reset Astra's woocommerce-layout compat: .woocommerce-account
	   .woocommerce-MyAccount-navigation { float:left; width:30% } would
	   otherwise collapse the card into a ~80px rail inside its grid cell. */
	float: none;
	width: auto;
	min-width: 0; /* grid item must be allowed to shrink so the mobile scroller can overflow internally */
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-2xl);
	padding: var(--spd-space-3);
	box-shadow: var(--spd-shadow-xs);
}
#spd-account-page .spd-account-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-1);
}
#spd-account-page .spd-account-nav__list li {
	margin: 0;
	/* Astra customizer draws a 1px bordered box around each
	   .woocommerce-MyAccount-navigation-link — remove it; the React
	   sidebar is bare rows, the pill is on the link itself. */
	border: 0;
}

#spd-account-page .spd-account-nav__link {
	display: flex;
	align-items: center;
	gap: var(--spd-space-3);
	width: 100%;
	padding: var(--spd-space-3) var(--spd-space-4);
	border-radius: var(--spd-radius-xl);
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--spd-transition-fast), color var(--spd-transition-fast);
}
#spd-account-page .spd-account-nav__link .spd-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}
#spd-account-page .spd-account-nav__link:hover {
	background: var(--spd-bg);
	color: var(--spd-text);
}
#spd-account-page .spd-account-nav__link.is-active {
	background: var(--spd-ui-blue);
	color: #fff;
	box-shadow: var(--spd-shadow-xs);
}
#spd-account-page .spd-account-nav__link:focus-visible {
	outline: 2px solid var(--spd-ui-blue);
	outline-offset: 2px;
}

/* Logout item — React keeps it in the header, but the native menu
   still carries it: visually de-emphasised. */
#spd-account-page .spd-account-nav .woocommerce-MyAccount-navigation-link--customer-logout .spd-account-nav__link:hover {
	color: var(--spd-ui-red);
	background: #FDECEB;
}

/* React nav labels: text-xs sm:text-sm */
@media (max-width: 639.98px) {
	#spd-account-page .spd-account-nav__link { font-size: var(--spd-font-size-xs); }
}

/* Mobile: the sidebar becomes a horizontal scroller (compact
   equivalent of React's stacked buttons — keeps one-tap access
   without pushing the content below the fold). */
@media (max-width: 1023.98px) {
	#spd-account-page .spd-account-nav { padding: var(--spd-space-2); }
	#spd-account-page .spd-account-nav__list {
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 2px;
	}
	#spd-account-page .spd-account-nav__list li { flex: 0 0 auto; }
}

/* ============================================================
   5. Content card — React: lg:col-span-9 bg-white rounded-3xl
      border border-slate-200 p-6 sm:p-8 shadow-xs
   ============================================================ */
#spd-account-page .spd-account__content {
	/* Reset Astra's .woocommerce-MyAccount-content { float:right; width:68% } —
	   the grid cell already defines the width; the float shrank the card. */
	float: none;
	width: auto;
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-2xl);
	padding: var(--spd-space-5);
	box-shadow: var(--spd-shadow-xs);
	min-width: 0; /* grid overflow guard */
}
@media (min-width: 640px) {
	#spd-account-page .spd-account__content { padding: var(--spd-space-6); }
}

/* ============================================================
   6. Section header — React: flex items-center justify-between
      border-b border-slate-100 pb-4
   ============================================================ */
#spd-account-page .spd-account-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spd-space-3);
	border-bottom: 1px solid var(--spd-surface-muted);
	padding-bottom: var(--spd-space-4);
	margin-bottom: var(--spd-space-4);
}
#spd-account-page .spd-account-section__header--column {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}
#spd-account-page .spd-account-section__title {
	font-size: var(--spd-font-size-lg);
	font-weight: var(--spd-font-weight-extrabold);
	color: var(--spd-text);
	margin: 0;
}
#spd-account-page .spd-account-section__count {
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-light);
	white-space: nowrap;
}
#spd-account-page .spd-account-section__desc {
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-muted);
	margin: 0;
}
#spd-account-page .spd-account-section__hint {
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-muted);
	margin: 0 0 var(--spd-space-4);
}

/* ============================================================
   7. Orders list — React: order card p-4 rounded-2xl border
      border-slate-200 hover:border-slate-300 flex justify-between
   ============================================================ */
#spd-account-page .spd-account-orders__list {
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-3);
}
#spd-account-page .spd-order-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--spd-space-4);
	padding: var(--spd-space-4);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-xl);
	background: var(--spd-surface);
	transition: border-color var(--spd-transition-fast);
}
#spd-account-page .spd-order-card:hover { border-color: var(--spd-border-dark); }
@media (min-width: 640px) {
	#spd-account-page .spd-order-card {
		flex-direction: row;
		align-items: center;
	}
}
#spd-account-page .spd-order-card__top {
	display: flex;
	align-items: center;
	gap: var(--spd-space-2);
	flex-wrap: wrap;
}
#spd-account-page .spd-order-card__number {
	font-weight: var(--spd-font-weight-extrabold);
	font-size: var(--spd-font-size-sm);
	color: var(--spd-ui-blue);
}
#spd-account-page .spd-order-card__status {
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	padding: 2px var(--spd-space-2);
	border-radius: var(--spd-radius-sm);
}
#spd-account-page .spd-order-card__status.is-done {
	background: #D1FAE5; /* emerald-100 */
	color: #065F46;      /* emerald-800 */
}
#spd-account-page .spd-order-card__status.is-current {
	background: var(--spd-ui-blue-soft);
	color: var(--spd-ui-blue);
}
#spd-account-page .spd-order-card__status.is-halted {
	background: var(--spd-surface-muted);
	color: var(--spd-text-muted);
}
#spd-account-page .spd-order-card__meta {
	display: block;
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-light);
	margin-top: var(--spd-space-1);
}
#spd-account-page .spd-order-card__side {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spd-space-4);
	width: 100%;
}
@media (min-width: 640px) {
	#spd-account-page .spd-order-card__side { width: auto; }
}
#spd-account-page .spd-order-card__total {
	font-weight: var(--spd-font-weight-black);
	font-size: var(--spd-font-size-sm);
	color: var(--spd-text);
}
#spd-account-page .spd-order-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	white-space: nowrap; /* "Suivre / Détails" stays on one line like React */
	padding: var(--spd-space-2) 0.875rem;
	background: var(--spd-surface-muted);
	color: var(--spd-text-muted);
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	border-radius: var(--spd-radius-lg);
	text-decoration: none;
	transition: background-color var(--spd-transition-fast), color var(--spd-transition-fast);
}
#spd-account-page .spd-order-card__cta:hover {
	background: var(--spd-ui-blue-soft);
	color: var(--spd-ui-blue);
}
#spd-account-page .spd-order-card__cta:focus-visible {
	outline: 2px solid var(--spd-ui-blue);
	outline-offset: 2px;
}

/* Orders pagination — match the shop pill style. */
#spd-account-page .spd-account-orders__pagination {
	margin-top: var(--spd-space-5);
	display: flex;
	justify-content: center;
	gap: var(--spd-space-3);
}

/* ============================================================
   8. Order detail (view-order) — reuses the Phase 8 patterns
   ============================================================ */
#spd-account-page .spd-order-detail__back {
	display: inline-flex;
	align-items: center;
	gap: var(--spd-space-1);
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-ui-blue);
	text-decoration: none;
	margin-bottom: var(--spd-space-4);
}
#spd-account-page .spd-order-detail__back .spd-icon { width: 1rem; height: 1rem; }
#spd-account-page .spd-order-detail__back:hover { text-decoration: underline; }
#spd-account-page .spd-order-detail__back:focus-visible {
	outline: 2px solid var(--spd-ui-blue);
	outline-offset: 2px;
}

/* Order head — number + status + tracking CTA */
#spd-account-page .spd-order-detail__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spd-space-3);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-xl);
	padding: var(--spd-space-4);
	margin-bottom: var(--spd-space-5);
	background: var(--spd-bg);
}
#spd-account-page .spd-order-detail__head-main { min-width: 0; }
#spd-account-page .spd-order-detail__number {
	font-size: var(--spd-font-size-lg);
	font-weight: var(--spd-font-weight-extrabold);
	color: var(--spd-text);
	margin: 0;
}
#spd-account-page .spd-order-detail__track {
	display: inline-flex;
	align-items: center;
	gap: var(--spd-space-2);
	padding: var(--spd-space-2) var(--spd-space-4);
	background: var(--spd-ui-blue);
	color: #fff;
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	border-radius: var(--spd-radius-lg);
	text-decoration: none;
	transition: background-color var(--spd-transition-fast);
}
#spd-account-page .spd-order-detail__track .spd-icon { width: 1rem; height: 1rem; }
#spd-account-page .spd-order-detail__track:hover { background: var(--spd-ui-blue-dark); color: #fff; }
#spd-account-page .spd-order-detail__track:focus-visible {
	outline: 2px solid var(--spd-ui-blue);
	outline-offset: 2px;
}

/* Section blocks inside the detail view */
#spd-account-page .spd-order-detail__block {
	margin-bottom: var(--spd-space-5);
}
#spd-account-page .spd-order-detail__block-title {
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-extrabold);
	color: var(--spd-text);
	margin: 0 0 var(--spd-space-3);
}
#spd-account-page .spd-order-detail__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spd-space-4);
}
@media (min-width: 640px) {
	#spd-account-page .spd-order-detail__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#spd-account-page .spd-order-detail__cols .spd-order-detail__block {
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-xl);
	padding: var(--spd-space-4);
	margin-bottom: 0;
}
#spd-account-page .spd-order-detail__lines p {
	margin: 0 0 var(--spd-space-2);
	font-size: var(--spd-font-size-xs);
	line-height: var(--spd-line-height-relaxed);
	color: var(--spd-text);
}
#spd-account-page .spd-order-detail__lines p:last-child { margin-bottom: 0; }
#spd-account-page .spd-order-detail__lines strong { color: var(--spd-text-muted); font-weight: var(--spd-font-weight-semibold); }
#spd-account-page .spd-order-detail__paid {
	display: inline-flex;
	align-items: center;
	gap: var(--spd-space-1);
	color: #059669;
	font-weight: var(--spd-font-weight-bold);
}
#spd-account-page .spd-order-detail__paid .spd-icon { width: 0.875rem; height: 0.875rem; }
#spd-account-page .spd-order-detail__address { font-style: normal; }

/* Customer order notes */
#spd-account-page .spd-order-detail__notes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-3);
}
#spd-account-page .spd-order-detail__note {
	border-left: 2px solid var(--spd-ui-blue-soft);
	padding-left: var(--spd-space-3);
}
#spd-account-page .spd-order-detail__note-date {
	display: block;
	font-size: 10px;
	font-weight: var(--spd-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--spd-tracking-wide);
	color: var(--spd-text-light);
	margin-bottom: 2px;
}
#spd-account-page .spd-order-detail__note-body {
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-muted);
}
#spd-account-page .spd-order-detail__note-body p { margin: 0; }

#spd-account-page .spd-order-detail__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
#spd-account-page .spd-order-detail__item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--spd-space-3);
	padding: var(--spd-space-3) 0;
	border-bottom: 1px solid var(--spd-surface-muted);
	font-size: var(--spd-font-size-sm);
}
#spd-account-page .spd-order-detail__item:last-child { border-bottom: 0; }
#spd-account-page .spd-order-detail__item-info { min-width: 0; }
#spd-account-page .spd-order-detail__item-name { color: var(--spd-text); font-weight: var(--spd-font-weight-medium); }
#spd-account-page .spd-order-detail__item-name a { color: inherit; text-decoration: none; }
#spd-account-page .spd-order-detail__item-name a:hover { color: var(--spd-ui-blue); text-decoration: underline; }
#spd-account-page .spd-order-detail__item-qty { color: var(--spd-text-light); font-size: var(--spd-font-size-xs); margin-left: var(--spd-space-1); }
#spd-account-page .spd-order-detail__item .wc-item-meta {
	margin: 2px 0 0;
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-muted);
	list-style: none;
	padding: 0;
}
#spd-account-page .spd-order-detail__item .wc-item-meta li { display: inline; }
#spd-account-page .spd-order-detail__item-total {
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text);
	white-space: nowrap;
}

/* Totals — native get_order_item_totals() rows (dl > div > dt/dd);
   the last row (order total) gets the grand-total emphasis. */
#spd-account-page .spd-order-detail__totals {
	margin: var(--spd-space-4) 0 0;
	border-top: 1px solid var(--spd-border);
	padding-top: var(--spd-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--spd-space-2);
}
#spd-account-page .spd-order-detail__total-row {
	display: flex;
	justify-content: space-between;
	gap: var(--spd-space-3);
	font-size: var(--spd-font-size-sm);
	color: var(--spd-text-muted);
}
#spd-account-page .spd-order-detail__total-row dt,
#spd-account-page .spd-order-detail__total-row dd { margin: 0; }
#spd-account-page .spd-order-detail__total-row dd { font-weight: var(--spd-font-weight-semibold); color: var(--spd-text); text-align: right; }
#spd-account-page .spd-order-detail__total-row--payment dd { font-weight: var(--spd-font-weight-medium); }
#spd-account-page .spd-order-detail__total-row:last-child {
	font-weight: var(--spd-font-weight-black);
	font-size: var(--spd-font-size-base);
	color: var(--spd-text);
	padding-top: var(--spd-space-2);
	border-top: 1px dashed var(--spd-border);
}
#spd-account-page .spd-order-detail__total-row:last-child dd { font-weight: var(--spd-font-weight-black); }

/* ============================================================
   9. Addresses — React: grid sm:grid-cols-2 gap-4; default card
      border-2 border-[#0F5B94] bg-[#EBF3F9]/30
   ============================================================ */
#spd-account-page .spd-account-addresses__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spd-space-4);
}
@media (min-width: 640px) {
	#spd-account-page .spd-account-addresses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#spd-account-page .spd-address-card {
	position: relative;
	padding: var(--spd-space-4);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-xl);
	background: var(--spd-surface);
	transition: border-color var(--spd-transition-fast);
}
#spd-account-page .spd-address-card:hover { border-color: var(--spd-border-dark); }
#spd-account-page .spd-address-card--default {
	border: 2px solid var(--spd-ui-blue);
	background: rgb(235 243 249 / .3);
}
#spd-account-page .spd-address-card__badge {
	position: absolute;
	top: var(--spd-space-3);
	right: var(--spd-space-3);
	font-size: 10px;
	font-weight: var(--spd-font-weight-black);
	text-transform: uppercase;
	background: var(--spd-ui-blue);
	color: #fff;
	padding: 2px var(--spd-space-2);
	border-radius: var(--spd-radius-sm);
	letter-spacing: var(--spd-tracking-wide);
}
#spd-account-page .spd-address-card__title {
	font-weight: var(--spd-font-weight-bold);
	font-size: var(--spd-font-size-sm);
	color: var(--spd-text);
	margin: 0 0 var(--spd-space-1);
	padding-right: 5rem; /* clear the badge */
}
#spd-account-page .spd-address-card__body {
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-muted);
	font-style: normal;
	line-height: var(--spd-line-height-relaxed);
	margin-bottom: var(--spd-space-3);
}
#spd-account-page .spd-address-card__edit {
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-ui-blue);
	text-decoration: none;
}
#spd-account-page .spd-address-card__edit:hover { text-decoration: underline; }
#spd-account-page .spd-address-card__edit:focus-visible {
	outline: 2px solid var(--spd-ui-blue);
	outline-offset: 2px;
}

/* ============================================================
   10. Forms (edit-account / edit-address) — React: label
       font-bold text-slate-700 text-xs; input px-3 py-2 border
       border-slate-200 rounded-xl
   ============================================================ */
#spd-account-page .spd-account-form .form-row,
#spd-account-page .spd-account__content .form-row {
	padding: 0; /* WC .woocommerce form .form-row adds padding:3px */
	margin-bottom: var(--spd-space-4);
}
#spd-account-page .spd-account-form .form-row label,
#spd-account-page .spd-account__content .woocommerce-address-fields .form-row label,
#spd-account-page .spd-account__content .woocommerce-EditAccountForm .form-row label {
	display: block;
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	color: #334155; /* slate-700 — React label color */
	line-height: var(--spd-line-height-normal); /* WC sets line-height:2 */
	margin-bottom: var(--spd-space-1);
}
#spd-account-page .spd-account-form .form-row .required,
#spd-account-page .spd-account__content .form-row .required {
	color: var(--spd-ui-red);
}
#spd-account-page .spd-account-form .input-text,
#spd-account-page .spd-account-form select,
#spd-account-page .spd-account__content .woocommerce-address-fields .input-text,
#spd-account-page .spd-account__content .woocommerce-address-fields select,
#spd-account-page .spd-account__content .woocommerce-EditAccountForm .input-text {
	width: 100%;
	padding: var(--spd-space-2) var(--spd-space-3);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-lg);
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-medium);
	color: var(--spd-text);
	background: var(--spd-surface);
	transition: border-color var(--spd-transition-fast), box-shadow var(--spd-transition-fast);
}
#spd-account-page .spd-account-form .input-text:focus,
#spd-account-page .spd-account-form select:focus,
#spd-account-page .spd-account__content .woocommerce-address-fields .input-text:focus,
#spd-account-page .spd-account__content .woocommerce-address-fields select:focus,
#spd-account-page .spd-account__content .woocommerce-EditAccountForm .input-text:focus {
	border-color: var(--spd-ui-blue);
	box-shadow: 0 0 0 3px rgb(15 91 148 / .1);
	outline: none;
}
/* WC server-side validation: aria-invalid + .woocommerce-invalid */
#spd-account-page .spd-account-form .woocommerce-invalid .input-text,
#spd-account-page .spd-account__content .woocommerce-invalid .input-text {
	border-color: var(--spd-error);
}
#spd-account-page .spd-account-form .woocommerce-invalid label,
#spd-account-page .spd-account__content .woocommerce-invalid label {
	color: var(--spd-error);
}

/* two-column rows (first/last name, password rows) */
#spd-account-page .spd-account-form__fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--spd-space-4);
}
@media (min-width: 640px) {
	#spd-account-page .spd-account-form__fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	#spd-account-page .spd-account-form__fields .form-row-wide,
	#spd-account-page .spd-account-form__fields .form-row.first,
	#spd-account-page .spd-account-form__fields .form-row-last {
		grid-column: 1 / -1;
	}
	#spd-account-page .spd-account-form__fields .form-row-first { grid-column: 1; }
	#spd-account-page .spd-account-form__fields .form-row-last { grid-column: 2; }
	#spd-account-page .spd-account-form__fields .form-row-wide { grid-column: 1 / -1; }
}

#spd-account-page .spd-account-form__note {
	display: block;
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-light);
	margin-top: 2px;
}
#spd-account-page .spd-account-form__legend {
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-extrabold);
	color: var(--spd-text);
	margin: var(--spd-space-5) 0 var(--spd-space-3);
	padding: 0;
}
#spd-account-page .spd-account-form__passwords {
	border: 0;
	padding: 0;
	margin: 0;
}
#spd-account-page .spd-account-form__actions {
	margin-top: var(--spd-space-4);
}
#spd-account-page .spd-account-form__actions .button,
#spd-account-page .spd-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spd-space-2);
	background: var(--spd-ui-blue);
	color: #fff;
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-bold);
	padding: var(--spd-space-3) var(--spd-space-5);
	border: 0;
	border-radius: var(--spd-radius-lg);
	cursor: pointer;
	transition: background-color var(--spd-transition-fast);
}
#spd-account-page .spd-account-form__actions .button:hover,
#spd-account-page .spd-btn-primary:hover {
	background: var(--spd-ui-blue-dark);
	color: #fff;
}
#spd-account-page .spd-account-form__actions .button:focus-visible,
#spd-account-page .spd-btn-primary:focus-visible {
	outline: 2px solid var(--spd-ui-blue);
	outline-offset: 2px;
}

/* ============================================================
   11. Loyalty — React: gradient card from-[#0F5B94] to-[#0A436D]
       + 3-step explainer + history
   ============================================================ */
#spd-account-page .spd-loyalty__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--spd-space-4);
	background: linear-gradient(to right, var(--spd-ui-blue), var(--spd-ui-blue-dark));
	color: #fff;
	padding: var(--spd-space-5);
	border-radius: var(--spd-radius-xl);
	box-shadow: var(--spd-shadow-md);
	margin-bottom: var(--spd-space-5);
}
@media (min-width: 640px) {
	#spd-account-page .spd-loyalty__card {
		flex-direction: row;
		align-items: center;
	}
}
#spd-account-page .spd-loyalty__card-eyebrow {
	display: block;
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--spd-tracking-wider);
	color: var(--spd-ui-gold);
}
#spd-account-page .spd-loyalty__card-balance {
	display: block;
	font-size: var(--spd-font-size-3xl);
	font-weight: var(--spd-font-weight-black);
	margin-top: var(--spd-space-1);
	line-height: var(--spd-line-height-tight);
}
#spd-account-page .spd-loyalty__card-value {
	display: block;
	font-size: var(--spd-font-size-xs);
	color: #E0F2FE; /* sky-100 */
	margin-top: var(--spd-space-1);
}
#spd-account-page .spd-loyalty__convert-btn {
	background: var(--spd-ui-gold);
	color: #0F172A;
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-black);
	padding: 0.625rem var(--spd-space-4);
	border: 0;
	border-radius: var(--spd-radius-lg);
	cursor: pointer;
	box-shadow: var(--spd-shadow-xs);
	transition: background-color var(--spd-transition-fast);
}
#spd-account-page .spd-loyalty__convert-btn:hover { background: var(--spd-gold-dark); }
#spd-account-page .spd-loyalty__convert-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
#spd-account-page .spd-loyalty__convert-hint {
	font-size: var(--spd-font-size-xs);
	color: #E0F2FE;
	font-style: italic;
}

#spd-account-page .spd-loyalty__steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spd-space-3);
	margin-bottom: var(--spd-space-5);
}
@media (min-width: 640px) {
	#spd-account-page .spd-loyalty__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#spd-account-page .spd-loyalty__step {
	padding: var(--spd-space-3);
	background: var(--spd-bg);
	border: 1px solid var(--spd-surface-muted);
	border-radius: var(--spd-radius-lg);
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-muted);
}
#spd-account-page .spd-loyalty__step strong {
	display: block;
	color: var(--spd-text);
	margin-bottom: 2px;
}
#spd-account-page .spd-loyalty__step p { margin: 0; color: var(--spd-text-muted); }

#spd-account-page .spd-loyalty__history-title {
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-extrabold);
	color: var(--spd-text);
	margin: 0 0 var(--spd-space-3);
}
#spd-account-page .spd-loyalty__history-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-lg);
	overflow: hidden;
}
#spd-account-page .spd-loyalty__history-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spd-space-3);
	padding: var(--spd-space-3) var(--spd-space-4);
	font-size: var(--spd-font-size-xs);
	border-bottom: 1px solid var(--spd-surface-muted);
}
#spd-account-page .spd-loyalty__history-item:last-child { border-bottom: 0; }
#spd-account-page .spd-loyalty__history-label { color: var(--spd-text-muted); }
#spd-account-page .spd-loyalty__history-points {
	font-weight: var(--spd-font-weight-black);
	white-space: nowrap;
}
#spd-account-page .spd-loyalty__history-item.is-earn .spd-loyalty__history-points { color: #059669; }
#spd-account-page .spd-loyalty__history-item.is-spend .spd-loyalty__history-points { color: var(--spd-ui-red); }

/* ============================================================
   12. Wishlist grid — canonical product cards, React:
       grid sm:grid-cols-2 md:grid-cols-3 gap-4
   ============================================================ */
#spd-account-page .spd-wishlist-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spd-space-4);
}
@media (min-width: 640px) {
	#spd-account-page .spd-wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
	#spd-account-page .spd-wishlist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   13. Auth card — React AuthPage: centered card, brand, title +
       subtitle, icon inputs, full-width submit, footer toggle
   ============================================================ */
/* React: max-w-md mx-auto px-4 py-12 pb-20 — the card itself is w-full
   inside that padded column (416px rendered at desktop). */
#spd-auth-page.spd-auth {
	max-width: 28rem; /* max-w-md */
	margin-left: auto;
	margin-right: auto;
	padding: 3rem var(--spd-space-4) 5rem; /* py-12 pb-20 */
	font-family: var(--spd-font-family);
}
#spd-auth-page .spd-auth__card {
	width: 100%;
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-2xl);
	box-shadow: var(--spd-shadow-xl);
	padding: var(--spd-space-5);
}
@media (min-width: 640px) {
	#spd-auth-page .spd-auth__card { padding: var(--spd-space-6); }
}

#spd-auth-page .spd-auth__brand {
	display: flex;
	justify-content: center;
	margin-bottom: var(--spd-space-5);
}
#spd-auth-page .spd-auth__brand .spd-brand { text-decoration: none; }

#spd-auth-page .spd-auth__head { text-align: center; margin-bottom: var(--spd-space-5); }
#spd-auth-page .spd-auth__title {
	font-size: var(--spd-font-size-2xl);
	font-weight: var(--spd-font-weight-extrabold);
	color: var(--spd-text);
	margin: 0 0 var(--spd-space-1);
	line-height: var(--spd-line-height-tight);
}
#spd-auth-page .spd-auth__subtitle {
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-muted);
	margin: 0;
	line-height: var(--spd-line-height-relaxed);
}

/* Astra draws a boxed border + 20px padding around form.login —
   the React card already owns the chrome; the form must be flat. */
#spd-auth-page .spd-auth__form {
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
}

/* React form: space-y-4 text-xs — WC's .woocommerce form .form-row
   adds padding:3px + margin:6px; zero both and own the rhythm. */
#spd-auth-page .spd-auth__row {
	padding: 0;
	margin: 0 0 var(--spd-space-4);
}
/* WC's .form-row-first/.form-row-last classes (kept for the native
   contract) float rows at ~47% — the React card wants full-width rows. */
#spd-auth-page .spd-auth__row.form-row-first,
#spd-auth-page .spd-auth__row.form-row-last {
	float: none;
	width: 100%;
}
#spd-auth-page .spd-auth__row label,
#spd-auth-page .spd-auth__label-row label {
	display: block;
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	color: #334155; /* slate-700 — React label color */
	line-height: var(--spd-line-height-normal);
	margin-bottom: var(--spd-space-1);
}
#spd-auth-page .spd-auth__row .required { color: var(--spd-ui-red); }
#spd-auth-page .spd-auth__label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--spd-space-1);
}
#spd-auth-page .spd-auth__forgot {
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-ui-blue);
	text-decoration: none;
}
#spd-auth-page .spd-auth__forgot:hover { text-decoration: underline; }

#spd-auth-page .spd-auth__input-wrap {
	position: relative;
	display: block;
}
#spd-auth-page .spd-auth__input-icon {
	position: absolute;
	left: 0.875rem; /* React: left-3.5 — 14px */
	top: 50%;
	transform: translateY(-50%);
	color: var(--spd-text-light);
	display: inline-flex;
	pointer-events: none;
}
#spd-auth-page .spd-auth__input-icon .spd-icon { width: 1rem; height: 1rem; }
/* React: w-full pl-10 pr-3.5 py-2.5 rounded-xl border-slate-200
   (text-xs inherited from the form). pl-10 clears the 14px+16px icon. */
#spd-auth-page .spd-auth__input {
	width: 100%;
	padding: 0.625rem 0.875rem 0.625rem 2.5rem;
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-lg);
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-medium);
	line-height: 1.333; /* ~16px → 38px input height like React */
	color: var(--spd-text);
	transition: border-color var(--spd-transition-fast), box-shadow var(--spd-transition-fast);
}
/* No show-password control exists in React — hide both the native
   reveal affordance (Edge ::-ms-reveal) and the button WooCommerce
   injects into .password-input spans (it rendered misaligned). */
#spd-auth-page .spd-auth__input[type="password"]::-ms-reveal,
#spd-auth-page .spd-auth__input[type="password"]::-ms-clear {
	display: none;
}
#spd-auth-page .password-input .show-password-input,
#spd-account-page .password-input .show-password-input {
	display: none;
}
/* WC wraps password inputs in .password-input — keep it a plain block
   so the icon overlay math (left:14px) still holds. */
#spd-auth-page .password-input,
#spd-account-page .password-input {
	display: block;
	padding: 0;
}
#spd-auth-page .spd-auth__input:focus {
	border-color: var(--spd-ui-blue);
	box-shadow: 0 0 0 3px rgb(15 91 148 / .1);
	outline: none;
}
#spd-auth-page .spd-auth__input::placeholder { color: var(--spd-text-light); }

#spd-auth-page .spd-auth__row--inline {
	display: flex;
	align-items: center;
}
#spd-auth-page .spd-auth__row--inline .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--spd-space-2);
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-medium);
	color: var(--spd-text-muted);
	margin: 0;
	cursor: pointer;
}
/* React has no remember-me control; keep the native field but render it
   as a styled control (rounded square, blue check) instead of the raw
   browser checkbox. */
#spd-auth-page .spd-auth__row--inline .woocommerce-form__input-checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
	margin: 0;
	border: 1px solid var(--spd-border-dark);
	border-radius: var(--spd-radius-sm);
	background: var(--spd-surface) center / 0.625rem no-repeat;
	cursor: pointer;
	vertical-align: middle;
}
#spd-auth-page .spd-auth__row--inline .woocommerce-form__input-checkbox:checked {
	background-color: var(--spd-ui-blue);
	border-color: var(--spd-ui-blue);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
#spd-auth-page .spd-auth__row--inline .woocommerce-form__input-checkbox:focus-visible {
	outline: 2px solid var(--spd-ui-blue);
	outline-offset: 2px;
}

#spd-auth-page .spd-auth__note {
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-muted);
	background: var(--spd-bg);
	border: 1px solid var(--spd-surface-muted);
	border-radius: var(--spd-radius-md);
	padding: var(--spd-space-2) var(--spd-space-3);
	margin: 0 0 var(--spd-space-4);
}

#spd-auth-page .spd-auth__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spd-space-2);
	width: 100%;
	background: var(--spd-ui-blue);
	color: #fff;
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-bold);
	line-height: 1.25rem; /* 48px CTA height like React */
	padding: 0.875rem var(--spd-space-4); /* React: py-3.5 */
	border: 0;
	border-radius: var(--spd-radius-lg);
	box-shadow: var(--spd-shadow-md); /* React: shadow-md on the CTA */
	cursor: pointer;
	transition: background-color var(--spd-transition-fast);
}
#spd-auth-page .spd-auth__submit .spd-icon { width: 1rem; height: 1rem; }
#spd-auth-page .spd-auth__submit:hover { background: var(--spd-ui-blue-dark); color: #fff; }
#spd-auth-page .spd-auth__submit:focus-visible {
	outline: 2px solid var(--spd-ui-blue);
	outline-offset: 2px;
}

/* React: text-center pt-2 border-t border-slate-100 (space-y-6 rhythm) */
#spd-auth-page .spd-auth__toggle {
	text-align: center;
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-muted);
	border-top: 1px solid var(--spd-surface-muted);
	padding-top: var(--spd-space-2);
	margin: var(--spd-space-5) 0 0;
}
#spd-auth-page .spd-auth__toggle-btn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-ui-blue);
	cursor: pointer;
	text-decoration: none;
}
#spd-auth-page .spd-auth__toggle-btn:hover { text-decoration: underline; }
#spd-auth-page .spd-auth__toggle-btn:focus-visible {
	outline: 2px solid var(--spd-ui-blue);
	outline-offset: 2px;
	border-radius: var(--spd-radius-sm);
}

/* Panel visibility — JS adds [hidden]; belt & braces CSS too. */
#spd-auth-page .spd-auth__panel[hidden] { display: none; }

/* ============================================================
   14. WooCommerce notices on the account page — match the
       checkout pill style
   ============================================================ */
.woocommerce-account .woocommerce-notices-wrapper {
	margin-bottom: var(--spd-space-4);
}
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-sm);
	border-radius: var(--spd-radius-lg);
}

/* ============================================================
   15. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	#spd-account-page .spd-account *,
	#spd-auth-page .spd-auth *,
	.spd-toast {
		transition-duration: 0.01ms !important;
	}
}