/**
 * My Account page — ported from account.html.
 *
 * Scoped under .account-page so nothing leaks into the rest of the site.
 * Covers the hero, the trust bar, the WooCommerce login/register/lost-password
 * cards (rendered via the woocommerce/myaccount/ template overrides), and the
 * WooCommerce notice styling (light red / green / blue, theme-matched).
 *
 * Palette: blue #1565C0 / #0D47A1 / #1976D2, gold #F9D67B, ink #1a1a2e,
 * muted #5a6a85, borders #D0DEF5, surfaces #f5f8ff / #EEF4FF.
 */

.account-page {
	font-family: 'DM Sans', sans-serif;
	color: #1a1a2e;
}

/* =================== HERO =================== */
.account-hero {
	position: relative;
	overflow: hidden;
	padding: 64px 0;
	background: linear-gradient(135deg, #0D47A1 0%, #1565C0 55%, #1976D2 100%);
}

@media (min-width: 768px) {
	.account-hero {
		padding: 80px 0;
	}
}

.account-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1180px;
}

.account-hero-ring {
	position: absolute;
	border-radius: 9999px;
	pointer-events: none;
}

.account-hero-ring-1 {
	top: 0;
	right: -64px;
	width: 256px;
	height: 256px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.account-hero-ring-2 {
	bottom: 0;
	left: 8%;
	width: 144px;
	height: 144px;
	border: 1px solid rgba(249, 214, 123, 0.2);
}

/* Breadcrumb partial sits on the dark hero — recolour for contrast. */
.account-hero .breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
}

.account-hero .breadcrumb a {
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	transition: color 0.2s;
}

.account-hero .breadcrumb a:hover {
	color: #F9D67B;
}

.account-hero .breadcrumb-sep {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.35);
}

.account-hero .breadcrumb-current {
	font-weight: 600;
	color: #F9D67B;
}

.account-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding: 6px 16px;
	border: 1px solid rgba(249, 214, 123, 0.45);
	border-radius: 9999px;
	background: rgba(249, 214, 123, 0.2);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #F9D67B;
}

.account-badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 9999px;
	background: #F9D67B;
}

.account-hero-title {
	margin: 0 0 16px;
	max-width: 700px;
	font-family: 'Sora', sans-serif;
	font-size: clamp(34px, 5vw, 54px);
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
}

.account-hero-sub {
	max-width: 620px;
	margin: 0;
	font-size: 18px;
	line-height: 1.78;
	color: rgba(255, 255, 255, 0.75);
}

/* =================== SECTION SHELL =================== */
.account-section {
	padding: 64px 0;
	background: #f5f8ff;
}

@media (min-width: 768px) {
	.account-section {
		padding: 80px 0;
	}
}

.account-shell {
	max-width: 1180px;
}

/* Trust bar */
.account-trust {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 32px;
	padding: 20px;
	border: 1px solid #D0DEF5;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.7);
	box-shadow: 0 8px 32px rgba(21, 101, 192, 0.08);
	backdrop-filter: blur(8px);
	font-size: 14px;
	color: #5a6a85;
}

@media (min-width: 640px) {
	.account-trust {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.account-trust-secure {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	color: #1565C0;
}

.account-trust p {
	margin: 0;
}

/* =================== CARD GRID =================== */
.account-grid {
	display: grid;
	gap: 24px;
}

/* WooCommerce core (woocommerce-layout.css) floats the login/register columns
   (.woocommerce .col2-set .col-1/.col-2, specificity 0,3,0) and sizes them 48%.
   Inside our grid those shrink each card to ~200px within its track. Our override
   must out-specify that rule, so scope it to .account-page .account-grid.col2-set
   (0,4,0) — a plain .account-grid .col-1 (0,2,0) loses and the 48% width sticks. */
.account-page .account-grid.col2-set .col-1,
.account-page .account-grid.col2-set .col-2 {
	float: none;
	width: 100%;
}

/* .account-grid also carries .col2-set, whose clearfix (::before/::after{display:table})
   becomes two extra grid items that push the cards into the wrong cells. Remove them. */
.account-grid.col2-set::before,
.account-grid.col2-set::after {
	content: none;
	display: none;
}

@media (min-width: 1024px) {
	.account-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.account-grid-single {
	max-width: 520px;
	margin: 0 auto;
}

@media (min-width: 1024px) {
	.account-grid-single {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Auth cards echo the home-page hero-form / package cards: 20px radius, a soft
   blue-tinted lift, and a primary→accent top stripe (the theme's signature accent,
   mirroring the hero-form header's yellow rule) so this page reads as one system. */
.account-card {
	position: relative;
	overflow: hidden;
	padding: 28px;
	border: 1px solid #E3ECFB;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(21, 101, 192, 0.13);
}

.account-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, #1565C0 0%, #1976D2 55%, #F9D67B 100%);
	z-index: 2;
}

@media (min-width: 768px) {
	.account-card {
		padding: 40px;
	}
}

.account-card-corner {
	position: absolute;
	top: 0;
	right: 0;
	width: 112px;
	height: 112px;
	border-bottom-left-radius: 40px;
	background: rgba(249, 214, 123, 0.13);
	pointer-events: none;
}

.account-card-head {
	position: relative;
	margin-bottom: 28px;
}

.account-card-title {
	margin: 0;
	font-family: 'Sora', sans-serif;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #1a1a2e;
}

/* The auth cards are <article> elements, so custom.css's
   .page-template-default article p (font-size:18px; font-weight:200; 0,2,1) hijacks
   every paragraph inside them — subs, fineprint and WooCommerce's privacy text all
   balloon to 18px. Scope the theme's text styles under .account-card (0,3,0) to win. */
.account-page .account-card .account-card-sub {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: #5a6a85;
}

/* WooCommerce's register-form copy ("A link to set…", the privacy-policy paragraph)
   renders as plain <p>; tame it to quiet fineprint so the card doesn't feel text-heavy. */
.account-page .account-card .woocommerce-privacy-policy-text p,
.account-page .account-card .account-form > p {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	color: #7c8ca8;
}

/* =================== FORM =================== */
/* WooCommerce styles the login/register <form> as a bordered box
   (.woocommerce form.login/.register { border:1px solid #d3ced2; padding:20px;
   border-radius:5px; margin:2em 0 } — 0,2,1). That draws an unwanted card-inside-card
   border. The form already sits inside .account-card, so strip it (0,3,0 to win). */
.account-page .woocommerce .account-form {
	position: relative;
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

.account-field {
	margin: 0 0 20px;
}

.account-label {
	display: block;
	margin-bottom: 8px;
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #1a1a2e;
}

.account-required {
	color: #d14343;
}

.account-input-wrap {
	position: relative;
	display: block;
}

/* WooCommerce core (woocommerce.css) styles form fields via
   .woocommerce form .form-row .input-text (0,3,1) and buttons via
   .woocommerce button.button (0,2,1) — both outrank the login/register template's
   plain .account-input / .account-btn (0,1,0), leaving default borders + grey buttons.
   Scope these under .account-page .woocommerce .account-form (0,4,0) so the theme wins. */
.account-page .woocommerce .account-form .account-input {
	width: 100%;
	padding: 12px 16px;
	/* WooCommerce forces the field border with !important (--wc-form-border-color),
	   so the theme border must also be !important to take effect. */
	border: 1px solid #D0DEF5 !important;
	border-radius: 12px;
	background: #fff;
	font-size: 14px;
	color: #1a1a2e;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.account-page .woocommerce .account-form .account-input::placeholder {
	color: #8ea0bf;
}

.account-page .woocommerce .account-form .account-input:focus {
	border-color: #1565C0 !important;
	box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.1);
}

.account-page .woocommerce .account-input-wrap .account-input {
	padding-right: 48px;
}

.account-pw-toggle {
	position: absolute;
	inset: 0 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	border: 0;
	background: transparent;
	color: #5a6a85;
	cursor: pointer;
	transition: color 0.2s;
}

.account-pw-toggle:hover {
	color: #1565C0;
}

.account-form-meta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
}

@media (min-width: 640px) {
	.account-form-meta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.account-remember {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 14px;
	color: #5a6a85;
}

.account-checkbox {
	width: 16px;
	height: 16px;
	border: 1px solid #D0DEF5;
	border-radius: 4px;
	accent-color: #1565C0;
}

.account-link {
	font-size: 14px;
	font-weight: 600;
	color: #1565C0;
	text-decoration: none;
	transition: color 0.2s;
}

.account-link:hover {
	color: #0D47A1;
	text-decoration: underline;
}

.account-submit-row {
	margin: 0 0 16px;
}

.account-page .woocommerce .account-form .account-btn {
	width: 100%;
	padding: 14px 20px;
	border: 0;
	border-radius: 12px;
	/* WooCommerce forces button background with !important, so match it. */
	background: #1565C0 !important;
	font-size: 14px;
	font-weight: 700;
	color: #fff !important;
	cursor: pointer;
	box-shadow: 0 10px 22px rgba(21, 101, 192, 0.22);
	transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.account-page .woocommerce .account-form .account-btn:hover {
	transform: translateY(-2px);
	background: #0D47A1 !important;
	box-shadow: 0 12px 24px rgba(21, 101, 192, 0.18);
}

/* Scoped under .account-card (0,3,0) to beat custom.css's article p (0,2,1). */
.account-page .account-card .account-fineprint {
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.6;
	color: #7c8ca8;
}

.account-page .account-card .account-fineprint .account-link {
	font-size: 12px;
}

/* =================== WOOCOMMERCE NOTICES =================== */
/* Light, theme-matched shades — printed above the forms via the
   woocommerce_before_customer_login_form hook. */
.account-page .woocommerce-error,
.account-page .woocommerce-message,
.account-page .woocommerce-info {
	list-style: none;
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 1px solid;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.5;
}

.account-page .woocommerce-error {
	border-color: rgba(209, 67, 67, 0.35);
	background: #fdecec;
	color: #a12727;
}

.account-page .woocommerce-message {
	border-color: rgba(34, 139, 87, 0.3);
	background: #e9f7ef;
	color: #1f7a4d;
}

.account-page .woocommerce-info {
	border-color: rgba(21, 101, 192, 0.25);
	background: #EEF4FF;
	color: #1565C0;
}

.account-page .woocommerce-error li,
.account-page .woocommerce-message li,
.account-page .woocommerce-info li {
	list-style: none;
}

.account-page .woocommerce-error a,
.account-page .woocommerce-message a,
.account-page .woocommerce-info a {
	font-weight: 600;
	color: inherit;
	text-decoration: underline;
}

/* =================== MEMBERSHIPS ENDPOINT (ported from account-memberships.html) =================== */
.spm { display: flex; flex-direction: column; gap: 24px; }

.spm-intro {
	border: 1px solid #d0def5;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba( 21, 101, 192, 0.08 );
	padding: 24px;
}
.spm-intro h2 { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 600; color: #1a1a2e; margin: 0; }
.spm-intro p { margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: #5a6a85; }

/* Cards */
.spm-cards { display: grid; gap: 24px; }
@media ( min-width: 1100px ) { .spm-cards { grid-template-columns: 1fr 1fr; } }

.spm-card {
	border: 1px solid #d0def5;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba( 21, 101, 192, 0.1 );
	padding: 24px;
}
.spm-card-active { border: 2px solid rgba( 21, 101, 192, 0.18 ); }

.spm-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.spm-card-id { display: flex; align-items: center; gap: 12px; }
.spm-card-icon {
	flex-shrink: 0;
	width: 48px; height: 48px;
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
	background: #eef4ff; color: #1565c0;
}
.spm-card-icon.is-expired { background: #fff3f2; color: #d14343; }
.spm-card-id h3 { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 600; color: #1a1a2e; margin: 0; }

.spm-badge {
	flex-shrink: 0;
	border-radius: 50px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
}
.spm-badge.is-active { background: #dcfce7; color: #15803d; }
.spm-badge.is-expired { background: #fee2e2; color: #b91c1c; }

.spm-card-meta { display: grid; gap: 8px; margin-bottom: 18px; font-size: 14px; color: #5a6a85; }
@media ( min-width: 480px ) { .spm-card-meta { grid-template-columns: 1fr 1fr; } }
.spm-card-meta span { font-weight: 600; color: #1a1a2e; }

.spm-card-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.spm-btn {
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	transition: all 0.3s ease;
}
.spm-btn-primary { background: #1565c0; color: #fff; border-color: #1565c0; }
.spm-btn-primary:hover { background: #0d47a1; border-color: #0d47a1; transform: translateY( -2px ); }
.spm-btn-outline { background: #fff; color: #1565c0; border-color: #d0def5; }
.spm-btn-outline:hover { border-color: #1565c0; background: #eef4ff; }

/* History */
.spm-history {
	border: 1px solid #d0def5;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba( 21, 101, 192, 0.08 );
	overflow: hidden;
}
.spm-history-head { border-bottom: 1px solid #d0def5; padding: 20px 24px; }
.spm-history-head h3 { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 600; color: #1a1a2e; margin: 0; }
.spm-history-head p { margin: 6px 0 0; font-size: 14px; color: #5a6a85; }

.spm-table-wrap { overflow-x: auto; }
.spm-table { width: 100%; border-collapse: collapse; text-align: left; min-width: 520px; }
.spm-table thead { background: #f8fbff; }
.spm-table th { font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 600; color: #1a1a2e; padding: 16px 24px; }
.spm-table td { font-size: 14px; color: #5a6a85; padding: 16px 24px; border-top: 1px solid #d0def5; }
.spm-table .spm-cell-strong { font-weight: 500; color: #1a1a2e; }

/* Empty state */
.spm-empty {
	border: 1px dashed #d0def5;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba( 21, 101, 192, 0.06 );
	padding: 40px 24px;
	text-align: center;
}
.spm-empty-icon {
	width: 56px; height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
	background: #eef4ff; color: #1565c0;
}
.spm-empty h3 { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 600; color: #1a1a2e; margin: 0; }
.spm-empty p { max-width: 520px; margin: 12px auto 20px; font-size: 14px; line-height: 1.7; color: #5a6a85; }

/* =================== MY ACCOUNT (logged-in): layout + sidebar nav =================== */
/* WooCommerce outputs .woocommerce > nav.navigation + div.content. Make it a grid. */
/* WooCommerce's own clearfix (.woocommerce::before/::after{display:table}) generates
   two extra boxes that become real grid items once display:grid is set below, pushing
   nav into column 2 and content into a second row. Kill them so only nav + content remain. */
.account-page .woocommerce::before,
.account-page .woocommerce::after {
	content: none;
	display: none;
}
.account-page .woocommerce { display: block; }
/* WooCommerce core (woocommerce-layout.css) floats the nav/content and sizes them
   30% / 68% via .woocommerce-account .woocommerce-MyAccount-* (0,2,0). Inside our grid
   those percentages shrink each item within its column (nav → 84px, content → 582px),
   overflowing the avatar and wrapping every label. Scope our override under .woocommerce
   (0,3,0) so it out-specifies that rule instead of relying on source order alone. */
.account-page .woocommerce .woocommerce-MyAccount-navigation,
.account-page .woocommerce .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}
/* Two-column sidebar layout applies ONLY to the logged-in dashboard (the .woocommerce
   that holds the MyAccount navigation). The logged-out .woocommerce wraps the
   notices + login/register grid — turning IT into a 280px/1fr grid dumps the empty
   notices box into column 1 and shoves the forms right, leaving a big left gap.
   :has() scopes the grid to the dashboard only. */
@media ( min-width: 992px ) {
	.account-page .woocommerce:has( > .woocommerce-MyAccount-navigation ) {
		display: grid;
		grid-template-columns: 280px minmax( 0, 1fr );
		gap: 24px;
		align-items: start;
	}
}

/* Sidebar card */
.account-page .woocommerce-MyAccount-navigation {
	border: 1px solid #d0def5;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba( 21, 101, 192, 0.08 );
	padding: 20px;
	margin-bottom: 24px;
}
@media ( min-width: 992px ) { .account-page .woocommerce-MyAccount-navigation { margin-bottom: 0; } }

.account-usercard {
	display: flex; align-items: center; gap: 12px;
	background: #eef4ff; border-radius: 12px; padding: 16px;
	margin-bottom: 20px;
}
.account-usercard-avatar {
	flex-shrink: 0;
	width: 48px; height: 48px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #1565c0; color: #fff;
	font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700;
}
.account-usercard-name { font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700; color: #1a1a2e; margin: 0; }
.account-usercard-email { font-size: 12px; color: #5a6a85; margin: 2px 0 0; word-break: break-word; }

.account-page .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.account-page .woocommerce-MyAccount-navigation li { margin: 0; }
.account-page .woocommerce-MyAccount-navigation li a {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 16px; border-radius: 12px;
	font-size: 14px; font-weight: 500; color: #5a6a85;
	text-decoration: none;
	transition: background .3s ease, color .3s ease;
}
.account-page .woocommerce-MyAccount-navigation li a i { width: 16px; text-align: center; font-size: 14px; }
.account-page .woocommerce-MyAccount-navigation li a:hover { background: #eef4ff; color: #1565c0; }
.account-page .woocommerce-MyAccount-navigation li.is-active a {
	background: #1565c0; color: #fff;
	box-shadow: 0 12px 24px rgba( 21, 101, 192, 0.16 );
}

/* Content column reset so cards sit on the light surface */
.account-page .woocommerce-MyAccount-content { min-width: 0; }

/* =================== MY ACCOUNT: WooCommerce forms (edit-address / edit-account) =================== */
/* Card wrapper for the address + account forms. */
.account-page form.edit-account,
.account-page form.edit-address,
.account-page .woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
.account-page .woocommerce-address-fields {
	border: 1px solid #d0def5;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba( 21, 101, 192, 0.08 );
	padding: 24px;
}
@media ( min-width: 768px ) {
	.account-page form.edit-account,
	.account-page form.edit-address,
	.account-page .woocommerce-address-fields { padding: 32px; }
}

/* Section headings inside the address flow. */
.account-page .woocommerce-MyAccount-content h3,
.account-page .woocommerce-Address-title h3,
.account-page form.edit-address h3 {
	font-family: 'Sora', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #1a1a2e;
	margin: 0 0 18px;
}

/* Labels. */
.account-page .woocommerce-MyAccount-content form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #1a1a2e;
	margin-bottom: 6px;
}
.account-page .woocommerce-MyAccount-content form .required { color: #d14343; border: 0; }

/* Inputs / selects / textarea. */
.account-page .woocommerce-MyAccount-content form .woocommerce-input-wrapper { display: block; }
.account-page .woocommerce-MyAccount-content form input.input-text,
.account-page .woocommerce-MyAccount-content form textarea,
.account-page .woocommerce-MyAccount-content form select,
.account-page .woocommerce-MyAccount-content form .select2-selection {
	width: 100%;
	border: 1.5px solid #d0def5;
	border-radius: 10px;
	padding: 11px 14px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	color: #1a1a2e;
	background: #fbfdff;
	outline: none;
	transition: border-color .25s ease, background .25s ease;
}
.account-page .woocommerce-MyAccount-content form input.input-text:focus,
.account-page .woocommerce-MyAccount-content form textarea:focus,
.account-page .woocommerce-MyAccount-content form select:focus {
	border-color: #1565c0;
	background: #fff;
}

/* Field wrappers stay full width. */
.account-page .woocommerce-address-fields__field-wrapper { display: block; width: 100%; }
.account-page .woocommerce-MyAccount-content form .form-row { display: block; width: 100%; margin-bottom: 16px; }

/* Only first/last name share a row on wider screens. */
@media ( min-width: 768px ) {
	.account-page .woocommerce-MyAccount-content form .form-row-first,
	.account-page .woocommerce-MyAccount-content form .form-row-last {
		display: inline-block;
		vertical-align: top;
		width: 48%;
	}
	.account-page .woocommerce-MyAccount-content form .form-row-first { margin-right: 3%; }
}

/* Submit button. */
.account-page .woocommerce-MyAccount-content form button.button,
.account-page .woocommerce-MyAccount-content form input.button {
	display: inline-flex; align-items: center; justify-content: center;
	background: #1565c0; color: #fff;
	border: 2px solid #1565c0; border-radius: 50px;
	padding: 12px 28px;
	font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
	cursor: pointer;
	transition: all .3s ease;
}
.account-page .woocommerce-MyAccount-content form button.button:hover,
.account-page .woocommerce-MyAccount-content form input.button:hover {
	background: #0d47a1; border-color: #0d47a1; transform: translateY( -2px );
}

/* Address listing (edit-address index) — themed cards. */
.account-page .account-section-head {
	border: 1px solid #d0def5; background: #fff; border-radius: 16px;
	box-shadow: 0 8px 32px rgba( 21, 101, 192, 0.08 );
	padding: 24px; margin-bottom: 24px;
}
.account-page .account-section-head h2 { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 600; color: #1a1a2e; margin: 0; }
.account-page .account-section-head p { margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: #5a6a85; }

.account-page .woocommerce-Addresses { display: grid; gap: 24px; margin: 0; }
@media ( min-width: 768px ) { .account-page .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } }

.account-page .spa-card {
	border: 1px solid #d0def5; background: #fff; border-radius: 14px;
	box-shadow: 0 8px 24px rgba( 21, 101, 192, 0.1 ); padding: 24px;
}
.account-page .spa-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.account-page .spa-card-id { display: flex; align-items: center; gap: 12px; }
.account-page .spa-card-icon {
	flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	background: #eef4ff; color: #1565c0; font-size: 18px;
}
.account-page .spa-card-id h3 { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 600; color: #1a1a2e; margin: 0; }
.account-page .spa-card-sub { margin: 2px 0 0; font-size: 13px; color: #5a6a85; }
.account-page .spa-card-btn {
	flex-shrink: 0; display: inline-flex; align-items: center;
	background: #1565c0; color: #fff; border-radius: 50px;
	padding: 8px 16px; font-size: 12px; font-weight: 600; text-decoration: none;
	transition: all .3s ease;
}
.account-page .spa-card-btn:hover { background: #0d47a1; transform: translateY( -2px ); box-shadow: 0 8px 20px rgba( 21, 101, 192, 0.18 ); }
.account-page .spa-card address {
	font-style: normal; color: #5a6a85; line-height: 1.8; font-size: 14px; margin: 0;
}
.account-page .spa-empty {
	border: 1px dashed #d0def5; background: #f8fbff; border-radius: 12px;
	padding: 20px; text-align: center;
}
.account-page .spa-empty-icon {
	width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #eef4ff; color: #1565c0; font-size: 18px;
}
.account-page .spa-empty-title { font-weight: 500; color: #1a1a2e; margin: 0; }
.account-page .spa-empty-sub { margin: 8px 0 16px; font-size: 14px; line-height: 1.6; color: #5a6a85; }

/* Safety: neutralize default WC heading sizing/centering inside account content
   (legacy .woocommerce h2 rules are gone; keep content headings sane + left). */
.account-page .woocommerce-MyAccount-content h2 {
	font-family: 'Sora', sans-serif;
	font-size: 22px;
	font-weight: 600;
	color: #1a1a2e;
	text-align: left;
	margin: 0 0 16px;
}
.account-page .woocommerce-MyAccount-content > h2,
.account-page .woocommerce-MyAccount-content form > h3 { text-align: left; }

/* =================== DASHBOARD (dashboard.php override) =================== */
.account-dash { display: flex; flex-direction: column; gap: 24px; }
.account-dash-welcome {
	border: 1px solid #d0def5; background: #fff; border-radius: 16px;
	box-shadow: 0 8px 32px rgba( 21, 101, 192, 0.08 ); padding: 24px;
}
@media ( min-width: 768px ) { .account-dash-welcome { padding: 32px; } }
.account-dash-hello {
	font-family: 'Sora', sans-serif; font-size: 24px; font-weight: 700;
	color: #1a1a2e; margin: 0 0 10px;
}
.account-dash-hello span { color: #1565c0; }
.account-dash-intro { font-size: 15px; line-height: 1.8; color: #5a6a85; margin: 0 0 18px; }
.account-dash-intro a { color: #1565c0; font-weight: 600; text-decoration: none; }
.account-dash-intro a:hover { color: #0d47a1; text-decoration: underline; }
.account-dash-logout {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1.5px solid #d0def5; border-radius: 50px;
	padding: 9px 18px; font-size: 13px; font-weight: 600;
	color: #1565c0; text-decoration: none; transition: all .3s ease;
}
.account-dash-logout:hover { border-color: #1565c0; background: #eef4ff; }

/* Generic account content links (greeting text, WC messages, etc.). */
.account-page .woocommerce-MyAccount-content > p a { color: #1565c0; font-weight: 600; }
.account-page .woocommerce-MyAccount-content > p a:hover { color: #0d47a1; }

/* =================== SUBSCRIPTION STATUS (dashboard) =================== */
.account-page .substatus {
	border: 1px solid #d0def5;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba( 21, 101, 192, 0.08 );
	padding: 24px;
}
@media ( min-width: 768px ) { .account-page .substatus { padding: 28px; } }

.account-page .substatus-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.account-page .substatus-icon {
	flex-shrink: 0;
	width: 48px; height: 48px;
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	background: #eef4ff; color: #1565c0;
	font-size: 20px;
}
.account-page .substatus-icon.is-active { background: rgba( 21, 101, 192, 0.12 ); color: #1565c0; }
.account-page .substatus-title {
	margin: 0;
	font-family: 'Sora', sans-serif;
	font-size: 20px; font-weight: 600; color: #1a1a2e;
}
.account-page .substatus-sub { margin: 2px 0 0; font-size: 13px; color: #5a6a85; }

.account-page .substatus-badge {
	margin-left: auto;
	flex-shrink: 0;
	border-radius: 50px;
	padding: 4px 12px;
	font-size: 12px; font-weight: 600;
}
.account-page .substatus-badge.is-active { background: #dcfce7; color: #15803d; }
.account-page .substatus-badge.is-none { background: #eef2f7; color: #64748b; }

.account-page .substatus-text {
	margin: 0 0 18px;
	font-size: 14px; line-height: 1.7; color: #5a6a85;
}

.account-page .substatus-meta {
	display: grid;
	gap: 12px;
	margin-bottom: 20px;
}
@media ( min-width: 560px ) {
	.account-page .substatus-meta { grid-template-columns: repeat(3, 1fr); }
}
.account-page .substatus-meta > div {
	border: 1px solid #d0def5;
	background: #fbfdff;
	border-radius: 12px;
	padding: 14px 16px;
}
.account-page .substatus-meta span {
	display: block;
	font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
	text-transform: uppercase; color: #5a6a85;
	margin-bottom: 4px;
}
.account-page .substatus-meta strong {
	font-family: 'Sora', sans-serif;
	font-size: 16px; font-weight: 600; color: #1a1a2e;
}

.account-page .substatus-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: #1565c0; color: #fff;
	border: 2px solid #1565c0; border-radius: 50px;
	padding: 11px 24px;
	font-size: 14px; font-weight: 600; text-decoration: none;
	transition: all .3s ease;
}
.account-page .substatus-btn:hover {
	background: #0d47a1; border-color: #0d47a1; transform: translateY( -2px );
	box-shadow: 0 8px 20px rgba( 21, 101, 192, 0.18 );
}