/* Fanki — My Account pages. Depends on tokens.css + base.css. */

.fanki-account-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--fanki-space-6);
	align-items: start;
	padding-bottom: var(--fanki-space-9);
}

.fanki-account-card {
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	padding: var(--fanki-space-5);
	margin-bottom: var(--fanki-space-5);
}

.fanki-account-card__title {
	font-size: var(--fanki-font-size-lg);
}

.fanki-account-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--fanki-space-4);
	margin-bottom: var(--fanki-space-6);
}

.fanki-stat-card {
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	padding: var(--fanki-space-5);
}

.fanki-stat-card__value {
	font-size: var(--fanki-font-size-2xl);
	font-weight: var(--fanki-font-weight-bold);
}

.fanki-stat-card__label {
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-text-muted);
}

.fanki-orders-table {
	width: 100%;
	border-collapse: collapse;
}

.fanki-orders-table th {
	text-align: left;
	font-size: var(--fanki-font-size-xs);
	text-transform: uppercase;
	letter-spacing: var(--fanki-letter-spacing-wide);
	color: var(--fanki-color-text-muted);
	padding-bottom: var(--fanki-space-3);
	border-bottom: 1px solid var(--fanki-color-border);
}

.fanki-orders-table td {
	padding-block: var(--fanki-space-4);
	border-bottom: 1px solid var(--fanki-color-border);
	font-size: var(--fanki-font-size-sm);
}

.fanki-addresses-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fanki-space-5);
}

.fanki-address-card {
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	padding: var(--fanki-space-5);
}

.fanki-address-card__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--fanki-space-3);
}

.fanki-address-card__body {
	color: var(--fanki-color-text-muted);
	font-size: var(--fanki-font-size-sm);
	line-height: var(--fanki-line-height-relaxed);
	margin-bottom: var(--fanki-space-4);
}

@media (max-width: 1024px) {
	.fanki-account-layout {
		grid-template-columns: 1fr;
	}

	.woocommerce-MyAccount-navigation {
		position: static;
	}

	.fanki-account-stats,
	.fanki-addresses-grid {
		grid-template-columns: 1fr;
	}

	.fanki-orders-table thead {
		display: none;
	}

	.fanki-orders-table td {
		display: block;
		border-bottom: none;
	}

	.fanki-orders-table tr {
		display: block;
		border-bottom: 1px solid var(--fanki-color-border);
		padding-block: var(--fanki-space-3);
	}
}

/* WooCommerce's real My Account output (myaccount.php only wraps the
   navigation/content dispatch in .fanki-account-layout — the endpoint
   templates themselves are intentionally left un-overridden; see CLAUDE.md's
   Phase 5 notes), re-skinned against its real class names. */

.woocommerce-MyAccount-navigation {
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	overflow: hidden;
	position: sticky;
	top: calc(var(--fanki-header-height) + var(--fanki-space-4));
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation-link a {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-3);
	padding: var(--fanki-space-4);
	font-size: var(--fanki-font-size-sm);
	border-bottom: 1px solid var(--fanki-color-border);
}

.woocommerce-MyAccount-navigation-link:last-child a {
	border-bottom: 0;
}

.woocommerce-MyAccount-navigation-link a:hover {
	background: var(--fanki-color-surface-alt);
}

.woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--fanki-color-primary-light);
	color: var(--fanki-color-primary);
	font-weight: var(--fanki-font-weight-semibold);
}

/* Endpoint icons. WooCommerce has no icon hook on its nav labels (they're
   esc_html'd, so raw <svg> can't be injected via woocommerce_account_menu_items),
   so these are CSS-masked copies of the same icons used in
   assets/design-reference/my-account.html, keyed on WC's own stable
   per-endpoint classes (wc_get_account_menu_item_classes()). background-color:
   currentColor keeps them in sync with the link's own text color (including
   the .is-active primary-color state) with no extra rules needed. */

.woocommerce-MyAccount-navigation-link a::before {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.woocommerce-MyAccount-navigation-link--dashboard a::before {
	--fanki-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--orders a::before {
	--fanki-icon: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M6 8h12l-1 12H7L6 8Z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--downloads a::before {
	--fanki-icon: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4M4 21h16'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-address a::before {
	--fanki-icon: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M12 21s-7-5-7-11a7 7 0 0 1 14 0c0 6-7 11-7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-account a::before {
	--fanki-icon: url("data:image/svg+xml,%3Csvg 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'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.5-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--customer-logout a::before {
	--fanki-icon: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--dashboard a::before,
.woocommerce-MyAccount-navigation-link--orders a::before,
.woocommerce-MyAccount-navigation-link--downloads a::before,
.woocommerce-MyAccount-navigation-link--edit-address a::before,
.woocommerce-MyAccount-navigation-link--edit-account a::before,
.woocommerce-MyAccount-navigation-link--customer-logout a::before {
	-webkit-mask-image: var(--fanki-icon);
	mask-image: var(--fanki-icon);
}

.woocommerce-MyAccount-content > p {
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	padding: var(--fanki-space-5);
	margin-bottom: var(--fanki-space-5);
}

.woocommerce-MyAccount-content mark {
	background: none;
	color: inherit;
}

/* Orders table */

table.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--fanki-color-border);
}

table.woocommerce-orders-table th:first-child,
table.woocommerce-orders-table td:first-child {
	padding-left: var(--fanki-space-4);
}

table.woocommerce-orders-table th:last-child,
table.woocommerce-orders-table td:last-child {
	padding-right: var(--fanki-space-4);
}

table.woocommerce-orders-table th {
	text-align: left;
	font-size: var(--fanki-font-size-xs);
	text-transform: uppercase;
	letter-spacing: var(--fanki-letter-spacing-wide);
	color: var(--fanki-color-text-muted);
	padding-bottom: var(--fanki-space-3);
	border-bottom: 1px solid var(--fanki-color-border);
}

table.woocommerce-orders-table td {
	padding-block: var(--fanki-space-4);
	border-bottom: 1px solid var(--fanki-color-border);
	font-size: var(--fanki-font-size-sm);
}

@media (max-width: 1024px) {
	table.woocommerce-orders-table thead {
		display: none;
	}

	table.woocommerce-orders-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--fanki-space-4);
		border-bottom: none;
	}

	table.woocommerce-orders-table td::before {
		content: attr(data-title);
		font-size: var(--fanki-font-size-xs);
		text-transform: uppercase;
		letter-spacing: var(--fanki-letter-spacing-wide);
		color: var(--fanki-color-text-muted);
	}

	table.woocommerce-orders-table tr {
		display: block;
		border-bottom: 1px solid var(--fanki-color-border);
		padding-block: var(--fanki-space-3);
	}
}

table.woocommerce-orders-table .order-status {
	display: inline-flex;
	align-items: center;
	padding: var(--fanki-space-1) var(--fanki-space-3);
	border-radius: var(--fanki-radius-full);
	background: var(--fanki-color-surface-alt);
	color: var(--fanki-color-text-muted);
	font-size: var(--fanki-font-size-xs);
	font-weight: var(--fanki-font-weight-semibold);
}

table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--fanki-space-2) var(--fanki-space-4);
	font-size: var(--fanki-font-size-xs);
	font-weight: var(--fanki-font-weight-semibold);
	border: 1px solid var(--fanki-color-border);
	/* --fanki-button-radius, not a hardcoded -radius-md, so Corner Style
	   reaches these row-action buttons too (2026-08-19 button-style
	   chronology audit). */
	border-radius: var(--fanki-button-radius);
	color: var(--fanki-color-text);
}

table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button:hover {
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary);
}

/* Downloads table (order/order-downloads.php, hooked to
   woocommerce_available_downloads by WC core's own
   woocommerce_order_downloads_table() — un-overridden, same reasoning as
   the Orders table above). Same table pattern/responsive collapse as
   .woocommerce-orders-table, plus a styled download button matching that
   table's own row-action buttons. */

table.woocommerce-table--order-downloads {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--fanki-color-border);
}

table.woocommerce-table--order-downloads th:first-child,
table.woocommerce-table--order-downloads td:first-child {
	padding-left: var(--fanki-space-4);
}

table.woocommerce-table--order-downloads th:last-child,
table.woocommerce-table--order-downloads td:last-child {
	padding-right: var(--fanki-space-4);
}

table.woocommerce-table--order-downloads th {
	text-align: left;
	font-size: var(--fanki-font-size-xs);
	text-transform: uppercase;
	letter-spacing: var(--fanki-letter-spacing-wide);
	color: var(--fanki-color-text-muted);
	padding-bottom: var(--fanki-space-3);
	border-bottom: 1px solid var(--fanki-color-border);
}

table.woocommerce-table--order-downloads td {
	padding-block: var(--fanki-space-4);
	border-bottom: 1px solid var(--fanki-color-border);
	font-size: var(--fanki-font-size-sm);
}

table.woocommerce-table--order-downloads tr:last-child td {
	border-bottom: 0;
}

.woocommerce-MyAccount-downloads-file {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--fanki-space-2) var(--fanki-space-4);
	font-size: var(--fanki-font-size-xs);
	font-weight: var(--fanki-font-weight-semibold);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	color: var(--fanki-color-text);
}

.woocommerce-MyAccount-downloads-file:hover {
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary);
}

@media (max-width: 1024px) {
	table.woocommerce-table--order-downloads thead {
		display: none;
	}

	table.woocommerce-table--order-downloads td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--fanki-space-4);
		border-bottom: none;
	}

	table.woocommerce-table--order-downloads td::before {
		content: attr(data-title);
		font-size: var(--fanki-font-size-xs);
		text-transform: uppercase;
		letter-spacing: var(--fanki-letter-spacing-wide);
		color: var(--fanki-color-text-muted);
	}

	table.woocommerce-table--order-downloads tr {
		display: block;
		border-bottom: 1px solid var(--fanki-color-border);
		padding-block: var(--fanki-space-3);
	}
}

/* Order detail (view-order) */

.woocommerce-order-details,
.woocommerce-customer-details {
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	padding: var(--fanki-space-5);
	margin-bottom: var(--fanki-space-5);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
	font-size: var(--fanki-font-size-lg);
	margin-bottom: var(--fanki-space-4);
}

/* Addresses */

.woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fanki-space-5);
}

.woocommerce-Address {
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	padding: var(--fanki-space-5);
}

.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--fanki-space-3);
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	font-size: var(--fanki-font-size-md);
}

.woocommerce-Address-title a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--fanki-space-2) var(--fanki-space-4);
	font-size: var(--fanki-font-size-xs);
	font-weight: var(--fanki-font-weight-semibold);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	color: var(--fanki-color-text);
}

.woocommerce-Address address {
	color: var(--fanki-color-text-muted);
	font-size: var(--fanki-font-size-sm);
	line-height: var(--fanki-line-height-relaxed);
	font-style: normal;
}

/* Edit-account / edit-address forms */

.woocommerce-EditAccountForm,
.woocommerce-address-fields {
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	padding: var(--fanki-space-5);
}

.woocommerce-EditAccountForm fieldset,
.woocommerce-address-fields fieldset {
	border: 0;
	padding: 0;
	margin-top: var(--fanki-space-5);
}

.woocommerce-EditAccountForm legend {
	font-size: var(--fanki-font-size-md);
	margin-bottom: var(--fanki-space-4);
	padding: 0;
}

/* [type="submit"] specifically — not a bare "button" tag selector.
   WooCommerce core's own woocommerce.js (unrelated to this theme, always
   loaded) injects a second, real <button type="button" class="show-
   password-input"> after every password field for the show/hide toggle.
   A bare "button" selector here used to also catch that injected button
   and fill it with this same primary-pill treatment — but it has no text
   or icon in its own markup (WooCommerce's own disabled stylesheet
   normally draws its icon), so it rendered as an empty solid pill next to
   "Save changes". See .show-password-input below for its real styling. */
/* Routed through the real --fanki-btn-primary-* tokens (same pattern as
   product.css's .single_add_to_cart_button) instead of hardcoded
   --fanki-color-primary/-radius-md, so these respond to Button Style
   preset/Advanced Styling/Corner Style like every other primary CTA
   (2026-08-19 button-style chronology audit). */
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-address-fields button[type="submit"],
.woocommerce-Address-title .edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--fanki-space-3) var(--fanki-space-5);
	font-size: var(--fanki-button-font-size);
	font-weight: var(--fanki-btn-primary-font-weight);
	border-radius: var(--fanki-button-radius);
	border-width: var(--fanki-btn-primary-border-width);
	border-style: solid;
	background: var(--fanki-btn-primary-bg);
	color: var(--fanki-btn-primary-color);
	border-color: var(--fanki-btn-primary-border-color);
	box-shadow: var(--fanki-btn-primary-shadow);
}

.woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-address-fields button[type="submit"]:hover {
	background: var(--fanki-btn-primary-hover-bg);
	border-color: var(--fanki-btn-primary-hover-border-color);
	/* Set explicitly, not left to the base rule above — the generic
	   .button:not(.fanki-btn):hover rule (base.css) also sets color on
	   hover and has higher specificity than this rule for that one
	   property, so without this line the text would silently flip to
	   primary-colored on this now-primary-dark background (near-unreadable)
	   on hover — same class of bug the Add to Cart button had earlier
	   this session. */
	color: var(--fanki-btn-primary-hover-color);
}

/* Password show/hide toggle (woocommerce.js wraps each password field in
   .password-input and appends .show-password-input after it). Reuses this
   theme's own currentColor + mask-image icon technique (same as the
   account nav icons above) rather than relying on WooCommerce's own
   disabled default stylesheet, which normally supplies this icon. */
.password-input {
	position: relative;
}

/* input.input-text (not just .input-text) to match .form-row
   input.input-text's own specificity in base.css exactly — this rule loads
   after base.css (account.css depends on fanki-base), so the tie correctly
   resolves in its favor; a lower-specificity override here would silently
   lose to that shorthand `padding` declaration instead. */
.password-input input.input-text {
	padding-right: var(--fanki-space-8);
}

.show-password-input {
	position: absolute;
	top: 50%;
	right: var(--fanki-space-3);
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--fanki-color-text-muted);
}

.show-password-input:hover {
	color: var(--fanki-color-primary);
}

.show-password-input::before {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.show-password-input.display-password::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M3 3l18 18M10.58 10.58a2 2 0 0 0 2.83 2.83M9.88 4.6A9.77 9.77 0 0 1 12 4.5c6 0 10 7 10 7a12.9 12.9 0 0 1-3.16 3.94M6.6 6.1C3.87 7.9 2 12 2 12s4 8 10 8a9.5 9.5 0 0 0 4.7-1.24'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M3 3l18 18M10.58 10.58a2 2 0 0 0 2.83 2.83M9.88 4.6A9.77 9.77 0 0 1 12 4.5c6 0 10 7 10 7a12.9 12.9 0 0 1-3.16 3.94M6.6 6.1C3.87 7.9 2 12 2 12s4 8 10 8a9.5 9.5 0 0 0 4.7-1.24'/%3E%3C/svg%3E");
}

/* Login / register (rendered for a logged-out visitor to the My Account page) */

#customer_login {
	max-width: 800px;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--fanki-space-8);
}

#customer_login > div {
	flex: 1 1 320px;
}

.woocommerce-form-login h2,
.woocommerce-form-register h2 {
	font-size: var(--fanki-font-size-lg);
	margin-bottom: var(--fanki-space-4);
}

.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-2);
	font-size: var(--fanki-font-size-sm);
}

/* Routed through the real --fanki-btn-primary-* tokens, same reasoning as
   the Save changes/Edit Address buttons above (2026-08-19 button-style
   chronology audit). */
.woocommerce-form-login .button,
.woocommerce-form-register .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--fanki-space-3) var(--fanki-space-5);
	font-size: var(--fanki-button-font-size);
	font-weight: var(--fanki-btn-primary-font-weight);
	border-radius: var(--fanki-button-radius);
	border-width: var(--fanki-btn-primary-border-width);
	border-style: solid;
	border-color: var(--fanki-btn-primary-border-color);
	background: var(--fanki-btn-primary-bg);
	color: var(--fanki-btn-primary-color);
	box-shadow: var(--fanki-btn-primary-shadow);
}

.woocommerce-form-login .button:hover,
.woocommerce-form-register .button:hover {
	background: var(--fanki-btn-primary-hover-bg);
	color: var(--fanki-btn-primary-hover-color);
	border-color: var(--fanki-btn-primary-hover-border-color);
}

.woocommerce-LostPassword {
	font-size: var(--fanki-font-size-sm);
	margin-top: var(--fanki-space-3);
}

.woocommerce-privacy-policy-text {
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-muted);
	margin-top: var(--fanki-space-3);
}

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

/* ---------- Branded login/register split screen ---------- */
/* Wraps WooCommerce's real, un-overridden login/register forms (page.php's
   $fanki_is_logged_out_account_page branch) — #customer_login above is
   re-narrowed and stacked to fit the .fanki-auth-layout__form column
   instead of the plain 800px centered layout it uses everywhere else. */

.fanki-auth-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 560px;
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-lg);
	overflow: hidden;
}

.fanki-auth-layout__brand {
	display: flex;
	align-items: flex-end;
	background-color: var(--fanki-color-secondary);
	background-size: cover;
	background-position: center;
	padding: var(--fanki-space-8);
	color: var(--fanki-color-secondary-contrast);
	position: relative;
}

.fanki-auth-layout__brand::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--fanki-overlay-dark-medium), var(--fanki-overlay-dark-subtle));
}

.fanki-auth-layout__brand-content {
	position: relative;
	max-width: 380px;
}

.fanki-auth-layout__logo {
	color: var(--fanki-color-secondary-contrast);
	margin-bottom: var(--fanki-space-5);
}

.fanki-auth-layout__brand-content h2 {
	font-size: var(--fanki-font-size-2xl);
	margin-bottom: var(--fanki-space-3);
}

.fanki-auth-layout__brand-content p {
	opacity: 0.9;
}

.fanki-auth-layout__form {
	display: flex;
	align-items: center;
	padding: var(--fanki-space-8);
}

.fanki-auth-layout__form #customer_login {
	max-width: 420px;
	margin: 0;
	flex-direction: column;
	gap: var(--fanki-space-6);
}

/* Lost password / reset password (myaccount/form-lost-password.php,
   myaccount/form-reset-password.php — left un-overridden like the login
   form above; both output the same .woocommerce-ResetPassword class).
   is_account_page() && !is_user_logged_in() covers this whole flow too
   (page.php), so it always renders inside this same branded panel — this
   just gives it the same width/spacing #customer_login gets there. Fields,
   the intro message, and the submit button already inherit correct styling
   from base.css's .form-row, .woocommerce-message/.woocommerce-error, and
   generic .button rules; nothing extra needed for those. */

.woocommerce-ResetPassword {
	display: flex;
	flex-direction: column;
	gap: var(--fanki-space-2);
}

.fanki-auth-layout__form .woocommerce-ResetPassword {
	max-width: 420px;
	width: 100%;
}

.woocommerce-ResetPassword > p:first-child {
	color: var(--fanki-color-text-muted);
	font-size: var(--fanki-font-size-sm);
}

@media (max-width: 1024px) {
	.fanki-auth-layout {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.fanki-auth-layout__brand {
		padding: var(--fanki-space-6);
	}

	.fanki-auth-layout__form {
		padding: var(--fanki-space-6);
	}
}