/* ============================================================================
 * KATA — My Account
 * Branded login/register + dashboard + WC endpoint styling.
 * Scoped under .kata-on-account (body class) + .kata-page--account.
 * Loaded only on is_account_page(). v5.26.0-rc5.
 * ========================================================================== */

/* ── Hero (mirrors util-hero--thanks; self-contained so it doesn't depend on
 *    pages-utility.css being loaded on account pages) ─────────────────────── */
.util-hero--account {
	background: var(--c-dark);
	color: var(--c-off);
	padding: calc(var(--nav-h, 84px) + 1.75rem) 0 clamp(28px, 4vw, 56px);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.util-hero--account .util-hero__inner {
	max-width: var(--maxw, 1280px);
	margin: 0 auto;
	padding: 0 var(--gutter);
	text-align: left;
}
.util-hero--account .util-hero__title {
	font-family: var(--ff-display, 'Bebas Neue', sans-serif);
	font-weight: 400;
	line-height: .95;
	letter-spacing: -.01em;
	font-size: clamp(2.6rem, 7vw, 5rem);
	margin: 0;
	color: var(--c-white);
}
.util-hero--account .util-hero__lede {
	margin: .875rem 0 0;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	color: var(--c-off);
	opacity: .85;
	max-width: 56ch;
	line-height: 1.45;
}

/* ── Page shell ──────────────────────────────────────────────────────────── */
.kata-page--account {
	background: var(--c-cream);
	padding: clamp(36px, 6vw, 72px) 0 clamp(60px, 8vw, 120px);
	color: var(--c-ink);
}
.kata-page--account .kata-container {
	max-width: var(--maxw, 1280px);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.account-shell {
	display: grid;
	grid-template-columns: 248px 1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}

/* ── Sidebar nav ─────────────────────────────────────────────────────────── */
.account-nav {
	position: sticky;
	top: calc(var(--nav-h, 84px) + 1.25rem);
	background: var(--c-white);
	border: 1px solid var(--c-ink-line);
	border-radius: var(--r-card, 12px);
	padding: .625rem;
}
.account-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .125rem;
}
.account-nav__item a {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .75rem .875rem;
	border-radius: 8px;
	font-family: var(--ff-body);
	font-size: .9375rem;
	font-weight: 500;
	color: var(--c-ink);
	text-decoration: none;
	transition: background .15s var(--ease-out, ease), color .15s var(--ease-out, ease);
}
.account-nav__icon { flex-shrink: 0; color: var(--c-ink-mute); transition: color .15s ease; }
.account-nav__item a:hover { background: var(--c-cream); }
.account-nav__item.is-active a {
	background: var(--c-ink);
	color: var(--c-cream);
}
.account-nav__item.is-active .account-nav__icon { color: var(--c-gold); }
.account-nav__item.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--c-ink-mute); }
.account-nav__item.woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: var(--c-ink); }

/* ── Content base ────────────────────────────────────────────────────────── */
.account-content { min-width: 0; color: var(--c-ink); }
.account-content p { color: var(--c-ink); }
.account-content a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.account-content a:hover { color: var(--c-gold-dark); }
.account-content > p:first-child { margin-top: 0; }

/* Shared card */
.account-card {
	background: var(--c-white);
	border: 1px solid var(--c-ink-line);
	border-radius: var(--r-card, 12px);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.account-card__title {
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 3vw, 2rem);
	letter-spacing: -.005em;
	margin: 0 0 .25rem;
	color: var(--c-ink);
}
.account-card__lede { color: var(--c-ink-mute); margin: 0 0 1.25rem; font-size: .9375rem; }
.account-card__eyebrow {
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	margin: 0 0 .5rem;
}
.account-card__note { color: var(--c-ink-mute); font-size: .875rem; }

/* ── Status pills ────────────────────────────────────────────────────────── */
.account-status {
	display: inline-block;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .25rem .625rem;
	border-radius: 999px;
	background: var(--c-ink-line);
	color: var(--c-ink);
}
.account-status--processing,
.account-status--completed { background: rgba(46,125,50,.14); color: #2e7d32; }
.account-status--on-hold,
.account-status--pending   { background: var(--c-gold-dim); color: var(--c-gold-dark); }
.account-status--cancelled,
.account-status--failed,
.account-status--refunded  { background: rgba(180,40,40,.12); color: #a32525; }

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.account-dash { display: flex; flex-direction: column; gap: 1.25rem; }
.account-dash__latest-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .25rem;
}
.account-dash__latest-num {
	font-family: var(--ff-display);
	font-size: 1.5rem;
	letter-spacing: .01em;
	margin: 0;
	color: var(--c-ink);
}
.account-dash__latest-meta { color: var(--c-ink-mute); margin: .25rem 0 1rem; font-size: .9375rem; }
.account-dash__latest-actions { display: flex; flex-wrap: wrap; gap: .625rem; }
.account-dash__empty-lede { color: var(--c-ink-mute); margin: 0 0 1.25rem; }

.account-dash__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
.account-tile {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: 1.25rem 1.375rem;
	background: var(--c-white);
	border: 1px solid var(--c-ink-line);
	border-radius: var(--r-card, 12px);
	text-decoration: none !important;
	color: var(--c-ink) !important;
	transition: border-color .15s var(--ease-out, ease), transform .15s var(--ease-out, ease);
}
.account-tile svg { color: var(--c-ink-mute); transition: color .15s ease; }
.account-tile:hover { border-color: var(--c-ink-line-strong); transform: translateY(-2px); }
.account-tile:hover svg { color: var(--c-gold-dark); }
.account-tile__title { font-weight: 600; font-size: 1rem; }
.account-tile__sub { color: var(--c-ink-mute); font-size: .8125rem; }

/* ── Auth (login + register, logged-out) ─────────────────────────────────── */
.kata-page--login { padding-top: clamp(28px, 4vw, 48px); }
.account-auth { display: block; max-width: 480px; margin: 0 auto; }
.account-auth--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 2.5vw, 2rem);
	max-width: 920px;
	align-items: start;
}
.account-card--register { background: var(--c-white); }

/* ── Forms (login/register/edit-account/edit-address/lost-password) ──────── */
.account-form .form-row,
.kata-page--account form .form-row,
.kata-page--account .woocommerce-form-row {
	display: block;
	margin: 0 0 1rem;
}
.kata-page--account label {
	display: block;
	font-size: .75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	margin: 0 0 .375rem;
	font-weight: 600;
}
.kata-page--account .required { color: var(--c-gold-dark); border: 0; }
.kata-page--account input[type="text"],
.kata-page--account input[type="email"],
.kata-page--account input[type="password"],
.kata-page--account input[type="tel"],
.kata-page--account input[type="number"],
.kata-page--account select,
.kata-page--account textarea {
	width: 100%;
	min-height: 44px;
	padding: .625rem .875rem;
	font-family: var(--ff-body);
	font-size: .9375rem;
	color: var(--c-ink);
	background: var(--c-white);
	border: 1px solid var(--c-ink-line-strong);
	border-radius: 8px;
	transition: border-color .15s var(--ease-out, ease), box-shadow .15s var(--ease-out, ease);
}
.kata-page--account input:focus,
.kata-page--account select:focus,
.kata-page--account textarea:focus {
	outline: none;
	border-color: var(--c-gold-dark);
	box-shadow: 0 0 0 3px var(--c-gold-dim);
}
/* Remember-me + submit row */
.account-form__row-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.account-remember {
	display: inline-flex !important;
	align-items: center;
	gap: .5rem;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	color: var(--c-ink);
	font-size: .875rem;
}
.account-remember input { width: auto; min-height: 0; }
.account-form .lost_password { margin: 1rem 0 0; font-size: .875rem; }
.account-form .lost_password a { color: var(--c-ink-mute); }
.account-form .lost_password a:hover { color: var(--c-ink); }
/* WC "create account password strength" hint */
.kata-page--account .woocommerce-password-strength,
.kata-page--account .woocommerce-password-hint { font-size: .8125rem; margin-top: .375rem; }

/* ── Native WC endpoint tables (orders / view-order / downloads) ─────────── */
.account-content .woocommerce-orders-table,
.account-content .woocommerce-table--order-details,
.account-content .shop_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--c-white);
	border: 1px solid var(--c-ink-line);
	border-radius: var(--r-card, 12px);
	overflow: hidden;
	font-size: .9375rem;
	color: var(--c-ink);
}
.account-content .shop_table th,
.account-content .woocommerce-orders-table th,
.account-content .woocommerce-table--order-details th {
	text-align: left;
	padding: .875rem 1rem;
	background: var(--c-cream);
	color: var(--c-ink);
	font-size: .6875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--c-ink-line);
}
.account-content .shop_table td,
.account-content .woocommerce-orders-table td,
.account-content .woocommerce-table--order-details td {
	padding: .875rem 1rem;
	border-bottom: 1px solid var(--c-ink-line);
	color: var(--c-ink);
	vertical-align: middle;
}
.account-content .shop_table tr:last-child td { border-bottom: 0; }
.account-content .woocommerce-table--order-details tfoot th,
.account-content .woocommerce-table--order-details tfoot td { background: transparent; text-transform: none; letter-spacing: 0; font-size: .9375rem; }
.account-content .woocommerce-orders-table__cell-order-actions { text-align: right; }
.account-content .woocommerce-button { margin: 0 0 0 .375rem; }
.account-content .woocommerce-Price-amount { color: var(--c-ink); }

/* Order again / view buttons row */
.account-content .woocommerce-orders-table__cell-order-actions .button,
.account-content .order-again .button { margin-bottom: .25rem; }

/* ── Addresses (view) ────────────────────────────────────────────────────── */
.account-content .woocommerce-Addresses,
.account-content .addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
.account-content .woocommerce-Address {
	background: var(--c-white);
	border: 1px solid var(--c-ink-line);
	border-radius: var(--r-card, 12px);
	padding: 1.25rem 1.5rem;
}
.account-content .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .75rem;
}
.account-content .woocommerce-Address-title h2,
.account-content .woocommerce-Address-title h3 {
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: 1.25rem;
	margin: 0;
	color: var(--c-ink);
	text-transform: uppercase;
	letter-spacing: .01em;
}
.account-content address {
	font-style: normal;
	color: var(--c-ink);
	line-height: 1.6;
	font-size: .9375rem;
}

/* View-order: addresses below details */
.account-content .woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-top: 1.25rem;
}
.account-content .woocommerce-customer-details .woocommerce-column__title {
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: 1.125rem;
	color: var(--c-ink);
	text-transform: uppercase;
	letter-spacing: .01em;
	margin: 0 0 .5rem;
}
.account-content .woocommerce-order-details__title,
.account-content .woocommerce-column__title { color: var(--c-ink); }

/* ── WC notices (scoped) ─────────────────────────────────────────────────── */
.kata-page--account .woocommerce-message,
.kata-page--account .woocommerce-info,
.kata-page--account .woocommerce-error {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: .875rem 1.125rem;
	border-radius: 8px;
	font-size: .9375rem;
	border: 1px solid var(--c-ink-line);
	background: var(--c-white);
	color: var(--c-ink);
}
.kata-page--account .woocommerce-message { border-left: 3px solid #2e7d32; }
.kata-page--account .woocommerce-info    { border-left: 3px solid var(--c-gold-dark); }
.kata-page--account .woocommerce-error   { border-left: 3px solid #a32525; }
.kata-page--account .woocommerce-error li { list-style: none; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.account-content .woocommerce-pagination { margin-top: 1.5rem; }
.account-content .woocommerce-pagination ul { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.account-content .woocommerce-pagination a,
.account-content .woocommerce-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 .5rem;
	border: 1px solid var(--c-ink-line);
	border-radius: 8px;
	text-decoration: none;
	color: var(--c-ink);
}
.account-content .woocommerce-pagination .current { background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink); }

/* ── WooCommerce default-layout overrides ────────────────────────────────────
   WC core (woocommerce-layout.css / woocommerce.css) floats the account nav +
   content and the address columns with fixed % widths, which collapse our grid
   (narrow nav, mis-placed address cards). Neutralise the floats/widths so our
   grid + cards own the layout. !important warranted to beat WC's body-scoped
   selectors regardless of stylesheet print order. v5.26.0-rc6. */
.kata-page--account .woocommerce-MyAccount-navigation,
.kata-page--account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}
.kata-page--account .col2-set,
.kata-page--account .u-columns,
.kata-page--account .woocommerce-Addresses,
.kata-page--account .woocommerce-columns--addresses {
	width: auto !important;
}
.kata-page--account .col2-set .col-1,
.kata-page--account .col2-set .col-2,
.kata-page--account .u-columns .col-1,
.kata-page--account .u-columns .col-2,
.kata-page--account .woocommerce-Address {
	float: none !important;
	width: auto !important;
}
.kata-page--account .woocommerce-Address { padding: 1.25rem 1.5rem; }
/* WC's .col2-set / address containers add clearfix ::before + ::after pseudo-
   elements. Under display:grid those become phantom grid cells, pushing the two
   real cards into a diagonal (billing top-right, delivery bottom-left). Kill
   them so the cards sit side by side. v5.26.0-rc7. */
.kata-page--account .woocommerce-Addresses::before,
.kata-page--account .woocommerce-Addresses::after,
.kata-page--account .col2-set::before,
.kata-page--account .col2-set::after,
.kata-page--account .woocommerce-columns--addresses::before,
.kata-page--account .woocommerce-columns--addresses::after {
	display: none !important;
}

/* ── Buttons — Kata pill over WC's gray .button ──────────────────────────────
   woocommerce.css's .button loads after main.css and overrides .btn. Re-skin
   all account buttons as Kata ink pills; gold primary + ghost-ink variants. */
.kata-page--account .button,
.kata-page--account .woocommerce-button,
.kata-page--account button[type="submit"],
.kata-page--account input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 44px;
	padding: .7rem 1.5rem;
	font-family: var(--ff-body);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	color: var(--c-cream);
	background: var(--c-ink);
	border: 1px solid var(--c-ink);
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s var(--ease-out, ease), color .15s var(--ease-out, ease), transform .15s var(--ease-out, ease);
}
.kata-page--account .button:hover,
.kata-page--account .woocommerce-button:hover,
.kata-page--account button[type="submit"]:hover,
.kata-page--account input[type="submit"]:hover { transform: translateY(-1px); }
.kata-page--account .btn--primary {
	background: var(--c-gold) !important;
	color: var(--c-ink) !important;
	border-color: var(--c-gold) !important;
}
.kata-page--account .btn--primary:hover { background: var(--c-gold-secondary) !important; }
.kata-page--account .btn--ghost-ink {
	background: transparent !important;
	color: var(--c-ink) !important;
	border-color: var(--c-ink) !important;
}
.kata-page--account .btn--ghost-ink:hover { background: var(--c-ink) !important; color: var(--c-cream) !important; }
.kata-page--account .btn--sm { min-height: 38px; padding: .5rem 1.1rem; font-size: .85rem; }

/* ── WC notice glyph — hide the WooCommerce-font ::before icon (renders as a
   garbled box when the icon font isn't enqueued) + give text room. ─────────── */
.kata-page--account .woocommerce-message::before,
.kata-page--account .woocommerce-info::before,
.kata-page--account .woocommerce-error::before { display: none !important; }
.kata-page--account .woocommerce-error,
.kata-page--account .woocommerce-message,
.kata-page--account .woocommerce-info { padding-left: 1.125rem; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
	.account-shell { grid-template-columns: 1fr; }
	.account-nav {
		position: static;
		top: auto;
	}
	.account-nav__list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: .375rem;
	}
	.account-nav__item { flex: 1 1 auto; }
	.account-nav__item a { justify-content: center; }
	.account-auth--split { grid-template-columns: 1fr; max-width: 480px; }
	.account-content .woocommerce-Addresses,
	.account-content .addresses,
	.account-content .woocommerce-customer-details .woocommerce-columns--addresses { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.account-dash__grid { grid-template-columns: 1fr; }
	.util-hero--account .util-hero__inner { text-align: left; }
	/* Orders table → stacked card rows on small screens (WC adds data-title attrs) */
	.account-content .woocommerce-orders-table thead { display: none; }
	.account-content .woocommerce-orders-table tr { display: block; border-bottom: 1px solid var(--c-ink-line); padding: .5rem 0; }
	.account-content .woocommerce-orders-table td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		border: 0;
		padding: .375rem 1rem;
		text-align: right;
	}
	.account-content .woocommerce-orders-table td::before {
		content: attr(data-title);
		font-size: .6875rem;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--c-ink-mute);
		text-align: left;
	}
	.account-content .woocommerce-orders-table__cell-order-actions { text-align: left; }
}