/*
 * My Account (woocommerce/myaccount/form-login.php, navigation.php, my-account.php overrides;
 * page.php's .sl-wc-page wrapper). `body.woocommerce-account` is printed by WooCommerce
 * (is_account_page()) on every account endpoint, including lost-password/reset-password (same
 * page ID, different query var) — every rule below is scoped to it so the un-overridden
 * form-lost-password.php/form-reset-password.php/form-edit-account.php/form-edit-address.php/
 * my-address.php/orders.php/downloads.php/payment-methods.php/view-order.php get the same
 * design-system look with no template copy needed, same tree-shaking reason as the rest of
 * this section (see the comment at its top): literal values, no `@apply`.
 */

/* Form rows everywhere on account pages (form-login.php's login/register cards,
	 form-edit-account.php, form-edit-address.php, form-lost-password.php,
	 form-reset-password.php) — same input/label treatment as the checkout form rows above.
	 `.form-row-first`/`.form-row-last` pairing (first/last name, city/postcode, lost-password's
	 two fields) used to come from woocommerce-layout.css's floats, dequeued in
	 inc/woocommerce.php; see the comment on the checkout version of this rule above. */
.woocommerce-account .form-row {
	margin: 0 0 1rem;
}
.woocommerce-account .form-row:last-child {
	margin-bottom: 0;
}
.woocommerce-account .form-row label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--sl-gray-700);
}
.woocommerce-account .form-row label.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	color: var(--sl-black);
}
.woocommerce-account .form-row .required {
	color: var(--sl-accent);
	text-decoration: none;
	font-weight: 700;
}
.woocommerce-account .form-row input.input-text,
.woocommerce-account .form-row select {
	display: block;
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--sl-border-strong);
	border-radius: var(--sl-r-field);
	font-size: 0.875rem;
	color: var(--sl-black);
	background-color: var(--sl-white);
}
.woocommerce-account .form-row input.input-text:focus,
.woocommerce-account .form-row select:focus {
	outline: none;
	border-color: var(--sl-black);
	box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}
@media (min-width: 768px) {
	.woocommerce-account .form-row-first,
	.woocommerce-account .form-row-last {
		width: calc(50% - 0.5rem);
		display: inline-block;
	}
	.woocommerce-account .form-row-first {
		margin-right: 1rem;
	}
}
.woocommerce-account .woocommerce-form-row + .clear {
	display: none;
}
.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--sl-gray-700);
	margin-bottom: 1rem;
}
.woocommerce-account .woocommerce-form__input-checkbox {
	accent-color: var(--sl-black);
	width: 1rem;
	height: 1rem;
}
.woocommerce-account .woocommerce-LostPassword {
	font-size: 0.8125rem;
}
.woocommerce-account .woocommerce-LostPassword a {
	color: var(--sl-accent);
}

/* Login/register cards (form-login.php's .sl-account-auth, this theme's own wrapper class). */
.sl-account-auth p:last-child {
	margin-bottom: 0;
}

/* Fix round 1: WooCommerce's own woocommerce.css (kept, general — see the comment at the top
	 of this section) draws its own box directly on the form element itself
	 (`form.login, form.checkout_coupon, form.register { border; padding: 20px; margin: 2em 0;
	 border-radius }`), which drew a second, inset border/padding inside `.sl-account-card` — the
	 card itself already provides that chrome. `.lost_reset_password` (form-lost-password.php,
	 form-reset-password.php) isn't in that core selector list so it was never doubled up, but is
	 reset here too as a defensive match against the same class of bug. The header account
	 dropdown's login form (template-parts/header/account-dropdown.php's
	 `.sl-account-login-form`) has neither a `login` nor `register` class, so it was never
	 affected and needs no reset. */
.sl-account-card form.woocommerce-form-login,
.sl-account-card form.woocommerce-form-register,
.woocommerce-account form.lost_reset_password {
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

/* Lost-password / reset-password (form-lost-password.php, form-reset-password.php: not
	 overridden — same card look as the login/register cards above, without needing the
	 `.sl-account-auth` grid since there is only ever one form on those two pages). */
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account .woocommerce-form.woocommerce-lost-password {
	max-width: 28rem;
	background-color: var(--sl-white);
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-r-card);
	padding: 1.5rem;
	box-shadow: 0 1px 2px rgba(17, 18, 21, 0.04), 0 0 0 1px rgba(17, 18, 21, 0.04);
}

/* Account nav active state (this theme's own navigation.php override prints
	 wc_get_account_menu_item_classes()'s `is-active` on the current endpoint's <li>). */
.sl-account-nav-list li a:hover {
	background-color: var(--sl-off-white);
	color: var(--sl-black);
}
.sl-account-nav-list li.is-active a {
	background-color: var(--sl-black);
	color: var(--sl-white);
}
.sl-account-nav-list li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--sl-red-700);
}
.sl-account-nav-list li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background-color: #FEE2E2;
	color: var(--sl-red-700);
}

/* Orders table (myaccount/orders.php, view-order.php's line-items table) and downloads/
	 payment-methods tables: same `shop_table`/`shop_table_responsive` base as the cart/checkout
	 totals tables above, redrawn as stacked rows on narrow screens via `data-title` (WooCommerce's
	 own woocommerce-smallscreen.css used to do this at <=768px; it is dequeued, so the theme
	 redraws it here, at the same breakpoint the tables already assume via `data-title`). */
.woocommerce-account table.shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	padding: 0.875rem 0.5rem;
	border-bottom: 1px solid var(--sl-gray-100);
	font-size: 0.8125rem;
	text-align: left;
	color: var(--sl-gray-700);
}
.woocommerce-account table.shop_table th {
	font-weight: 600;
	color: var(--sl-gray-500);
	text-transform: uppercase;
	font-size: 0.6875rem;
	letter-spacing: 0.025em;
}
.woocommerce-account table.shop_table td a {
	color: var(--sl-black);
	text-decoration: underline;
}
.woocommerce-account table.shop_table .button {
	white-space: nowrap;
}
@media (max-width: 639px) {
	.woocommerce-account table.shop_table_responsive thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}
	.woocommerce-account table.shop_table_responsive,
	.woocommerce-account table.shop_table_responsive tbody,
	.woocommerce-account table.shop_table_responsive tr,
	.woocommerce-account table.shop_table_responsive th,
	.woocommerce-account table.shop_table_responsive td {
		display: block;
		width: 100%;
	}
	.woocommerce-account table.shop_table_responsive tr {
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--sl-border);
	}
	.woocommerce-account table.shop_table_responsive td {
		border-bottom: 0;
		padding: 0.25rem 0.5rem;
		display: flex;
		justify-content: space-between;
		gap: 1rem;
	}
	.woocommerce-account table.shop_table_responsive td::before {
		content: attr(data-title) ": ";
		font-weight: 600;
		color: var(--sl-gray-500);
	}
}
.woocommerce-account mark.order-status {
	color: inherit;
	background: none;
	font-weight: 600;
}

/* Addresses (my-address.php: `.u-columns.col2-set.woocommerce-Addresses`, each
	 `.u-column1/.u-column2.woocommerce-Address` — woocommerce-layout.css's float 2-up layout,
	 dequeued in inc/woocommerce.php, replaced with a `sm:grid-cols-2` grid; not overridden as a
	 template since the brief limits overrides to layout files, so `.col2-set`/`.col-1`/`.col-2`
	 stay in the markup unused). Each address becomes its own card, matching the rest of the
	 account page's card look. */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	gap: 1.5rem;
}
@media (min-width: 640px) {
	.woocommerce-account .woocommerce-Addresses:has(.u-column2) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.woocommerce-account .woocommerce-Address {
	background-color: var(--sl-white);
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-r-card);
	padding: 1.5rem;
}
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.875rem;
}
.woocommerce-account .woocommerce-Address-title h2 {
	font-family: var(--sl-font-display);
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--sl-black);
	margin: 0;
}
.woocommerce-account .woocommerce-Address-title .edit {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--sl-accent);
	text-decoration: none;
}
.woocommerce-account .woocommerce-Address-title .edit:hover {
	text-decoration: underline;
}
.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--sl-gray-700);
}

/* Dashboard intro (myaccount/dashboard.php, not overridden: two plain <p> tags with links). */
.woocommerce-account .woocommerce-MyAccount-content > p a {
	color: var(--sl-accent);
	text-decoration: underline;
}

/* Account page layout: navigation (3 cols) + content card (9 cols). */
.sl-account-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}
@media (min-width: 1024px) {
	.sl-account-page { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.sl-account-page__nav { grid-column: span 3 / span 3; }
	.sl-account-page__main { grid-column: span 9 / span 9; }
}

/* Guest page: sign-in (+ register when enabled) cards. */
.sl-account-auth { display: grid; }
.sl-account-auth--one { max-width: 28rem; }
.sl-account-auth--two { gap: 2rem; }
@media (min-width: 768px) {
	.sl-account-auth--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sl-account-card {
	padding: 1.5rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-card);
	background: var(--sl-white);
}
@media (min-width: 640px) {
	.sl-account-card { padding: 2rem; }
}
.sl-account-card__title {
	margin-bottom: 1.5rem;
	color: var(--sl-black);
	font-family: var(--sl-font-display);
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: .025em;
}

/* Account navigation card. */
.sl-account-nav {
	padding: .75rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-card);
	background: var(--sl-white);
}
.sl-account-nav-list > * + * { margin-top: .25rem; }
.sl-account-nav__link {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .625rem .75rem;
	border-radius: var(--sl-r-small);
	color: var(--sl-gray-700);
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 500;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-duration: var(--sl-duration);
	transition-timing-function: var(--sl-ease-std);
}