/*
 * SKATE INSTITUTION — My Account.
 *
 * Layout matches desings/mi_cuenta.html:
 *   - sidebar (account header + endpoint links + separated logout) beside the
 *     active endpoint's content
 *   - dashboard: profile header, three-card bento row, order history
 *   - order history as a CSS grid with ARIA table roles (RULES §7 rules out
 *     <table>), collapsing to one card per order below 768px
 *
 * Mobile-first, breakpoint 768px. Reuses atoms from skc-base.css
 * (.skc-btn, .skc-btn--ghost, .skc-notice) — nothing is redefined here.
 * All colours, spacing and typography go through tokens (var(--skc-*)).
 *
 * The screen needs no JavaScript: the mobile nav is a scrollable strip
 * rather than the drawer used by the product archive.
 *
 * The last section styles the endpoints that are NOT overridden (addresses,
 * account details, payment methods, view order, login) by targeting
 * WooCommerce's own selectors, per the "overrides mínimos" principle.
 */

/* ------------------------------------------------------------------ */
/* Shell                                                               */
/* ------------------------------------------------------------------ */

.skc-account {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--skc-md);
	align-items: start;
	width: 100%;
}

/* WooCommerce's woocommerce-layout.css lays My Account out as two floats:
   .woocommerce-MyAccount-navigation { float: left; width: 30% } and
   .woocommerce-MyAccount-content { float: right; width: 68% }. Both classes
   are kept on our elements so WC and plugin selectors still match, but the
   float sizing has to go or the sidebar renders at 30% of its grid column
   (~84px) instead of filling it. Selectors are specificity-matched to WC's. */
.woocommerce-account .skc-account__nav.woocommerce-MyAccount-navigation,
.woocommerce-account .skc-account__content.woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

@media (min-width: 768px) {
	.skc-account {
		grid-template-columns: var(--skc-sidebar-width) 1fr;
		gap: var(--skc-lg);
	}
}

.skc-account__content {
	display: flex;
	flex-direction: column;
	gap: var(--skc-md);
	min-width: 0;
}

@media (min-width: 768px) {
	.skc-account__content {
		gap: var(--skc-lg);
	}
}

/* ------------------------------------------------------------------ */
/* Sidebar navigation                                                  */
/* ------------------------------------------------------------------ */

.skc-account__nav {
	display: flex;
	flex-direction: column;
	gap: var(--skc-sm);
	min-width: 0;
	background: var(--skc-on-primary);
	border: var(--skc-border-subtle);
	padding: var(--skc-sm);
}

@media (min-width: 768px) {
	.skc-account__nav {
		position: sticky;
		top: calc(var(--skc-header-height) + var(--skc-sm));
		padding: var(--skc-md) var(--skc-sm);
	}
}

/* Mobile trigger -----------------------------------------------------
   Visible only on mobile; hidden at 768px. Acts as the header of the
   drawer. Mirrors the .skc-archive__filter-trigger pattern (see
   archive-product.php). */
.skc-account__nav-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--skc-sm);
	width: 100%;
	padding: var(--skc-sm) var(--skc-md);
	font-family: inherit;
	font-size: var(--skc-label-md);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--skc-on-primary);
	background: var(--skc-primary);
	border: 0;
	cursor: pointer;
	text-align: left;
	transition: background-color var(--skc-transition);
}

.skc-account__nav-trigger:hover,
.skc-account__nav-trigger:focus-visible {
	background: var(--skc-on-primary);
	color: var(--skc-primary);
	box-shadow: inset 0 0 0 2px var(--skc-primary);
}

.skc-account__nav-trigger:focus-visible {
	outline: 2px solid var(--skc-primary);
	outline-offset: 2px;
}

.skc-account__nav-trigger .material-symbols-outlined {
	font-size: 22px;
	line-height: 1;
}

.skc-account__nav-trigger-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.skc-account__nav-trigger {
		display: none;
	}
}

/* Mobile close button inside the drawer. */
.skc-account__nav-close {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	padding: 0;
	margin-bottom: var(--skc-sm);
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--skc-primary);
	transition: color var(--skc-transition);
}

.skc-account__nav-close .material-symbols-outlined {
	font-size: 24px;
	line-height: 1;
}

.skc-account__nav-close:hover,
.skc-account__nav-close:focus-visible {
	color: var(--skc-on-primary);
	background: var(--skc-primary);
}

.skc-account__nav-close:focus-visible {
	outline: 2px solid var(--skc-primary);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.skc-account__nav-close {
		display: none;
	}
}

/* Backdrop overlay behind the open drawer. */
.skc-account__backdrop {
	position: fixed;
	inset: 0;
	background: rgb(0 0 0 / 0.4);
	z-index: 90;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--skc-transition);
}

.skc-account__backdrop[data-open='true'] {
	opacity: 1;
	pointer-events: auto;
}

.skc-account__backdrop[hidden] {
	display: block;
}

@media (min-width: 768px) {
	.skc-account__backdrop {
		display: none !important;
	}
}

.skc-account__nav-header {
	display: flex;
	flex-direction: column;
	gap: var(--skc-xs);
	padding: 0 var(--skc-xs) var(--skc-sm);
	border-bottom: var(--skc-border-subtle);
}

.skc-account__nav-eyebrow {
	font-size: var(--skc-label-md);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--skc-secondary);
}

.skc-account__nav-user {
	font-size: var(--skc-headline-md);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--skc-primary);
	overflow-wrap: break-word;
}

/* Mobile: the nav is a fixed-position drawer that slides in from the left
   when the trigger toggles [data-open="true"]. On desktop it falls back to
   the column layout defined in @media (min-width: 768px). */
.skc-account__nav-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.skc-account__nav-item {
	flex: 0 0 auto;
	min-width: 0;
}

@media (min-width: 768px) {
	.skc-account__nav-item {
		flex: 1 1 auto;
	}
}

/* Mobile drawer behaviour ------------------------------------------ */
@media (max-width: 767px) {
	.skc-account__nav {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(85vw, 320px);
		height: 100dvh;
		max-height: 100vh;
		z-index: 100;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--skc-md) var(--skc-sm);
		border-right: 2px solid var(--skc-primary);
		transform: translateX(-100%);
		transition: transform var(--skc-transition);
	}

	.skc-account__nav[data-open='true'] {
		transform: translateX(0);
	}

	/* Push the close button to the right of its row. */
	.skc-account__nav-close {
		justify-content: flex-end;
	}
}

/* Body scroll lock while the drawer is open. :has() is supported in
   evergreen browsers; the JS also toggles a class on <html> as a
   progressive enhancement. */
body:has(.skc-account__nav[data-open='true']) {
	overflow: hidden;
}

html.skc-drawer-open {
	overflow: hidden;
}

.skc-account__nav-link {
	display: flex;
	align-items: center;
	gap: var(--skc-xs);
	padding: var(--skc-xs) var(--skc-sm);
	font-size: var(--skc-label-md);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--skc-secondary);
	background: transparent;
	border: 0;
	transition: background-color var(--skc-transition), color var(--skc-transition);
}

@media (min-width: 768px) {
	.skc-account__nav-link {
		padding: var(--skc-sm);
		white-space: normal;
	}
}

.skc-account__nav-link .material-symbols-outlined {
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.skc-account__nav-link:hover,
.skc-account__nav-link:focus-visible {
	background: var(--skc-surface-container-highest);
	color: var(--skc-primary);
}

.skc-account__nav-link:focus-visible {
	outline: 2px solid var(--skc-primary);
	outline-offset: -2px;
}

/* Active state mirrors .skc-archive__filters-link.is-active in
   archive-product.css so both sidebars read the same. */
.skc-account__nav-link.is-active,
.skc-account__nav-link.is-active:hover,
.skc-account__nav-link.is-active:focus-visible {
	background: var(--skc-primary);
	color: var(--skc-on-primary);
	font-weight: 700;
}

.skc-account__nav-footer {
	padding-top: var(--skc-xs);
	border-top: var(--skc-border-subtle);
}

.skc-account__nav-link--logout {
	color: var(--skc-error);
}

.skc-account__nav-link--logout:hover,
.skc-account__nav-link--logout:focus-visible {
	background: var(--skc-error);
	color: var(--skc-on-primary);
}

/* ------------------------------------------------------------------ */
/* Profile header                                                      */
/* ------------------------------------------------------------------ */

.skc-account__profile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--skc-md);
	padding: var(--skc-md);
	background: var(--skc-on-primary);
	border: var(--skc-border-subtle);
}

@media (min-width: 768px) {
	.skc-account__profile {
		flex-direction: row;
		align-items: center;
		gap: var(--skc-lg);
		padding: var(--skc-lg);
	}
}

.skc-account__avatar {
	position: relative;
	flex-shrink: 0;
	width: 96px;
	height: 96px;
}

@media (min-width: 768px) {
	.skc-account__avatar {
		width: 128px;
		height: 128px;
	}
}

.skc-account__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 2px solid var(--skc-primary);
	background: var(--skc-surface-container-highest);
}

.skc-account__avatar-edit {
	position: absolute;
	right: calc(var(--skc-xs) * -1);
	bottom: calc(var(--skc-xs) * -1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--skc-on-primary);
	background: var(--skc-primary);
	border: 1px solid var(--skc-on-primary);
	text-decoration: none;
	transition: transform var(--skc-transition);
}

.skc-account__avatar-edit:hover,
.skc-account__avatar-edit:focus-visible {
	transform: scale(0.92);
}

.skc-account__avatar-edit:focus-visible {
	outline: 2px solid var(--skc-primary);
	outline-offset: 2px;
}

.skc-account__avatar-edit .material-symbols-outlined {
	font-size: 18px;
	line-height: 1;
}

.skc-account__profile-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--skc-xs);
}

.skc-account__profile-name {
	margin: 0;
	font-size: var(--skc-display-lg);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--skc-primary);
	overflow-wrap: break-word;
}

.skc-account__profile-meta {
	margin: 0;
	font-size: var(--skc-label-md);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--skc-secondary);
}

.skc-account__profile-action {
	flex-shrink: 0;
	text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Stat cards (bento)                                                  */
/* ------------------------------------------------------------------ */

.skc-account__stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--skc-md);
	align-items: start;
}

@media (min-width: 768px) {
	.skc-account__stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.skc-account__stat {
	display: flex;
	flex-direction: column;
	gap: var(--skc-sm);
	min-height: 200px;
	padding: var(--skc-md);
	background: var(--skc-on-primary);
	border: var(--skc-border-subtle);
}

@media (min-width: 768px) {
	.skc-account__stat {
		min-height: 240px;
		padding: var(--skc-lg);
	}
}

/* The "total spent" card is the inverted one in the mockup. */
.skc-account__stat--spent {
	background: var(--skc-primary);
	color: var(--skc-on-primary);
	border-color: var(--skc-primary);
}

.skc-account__stat--active {
	background: var(--skc-surface-container-highest);
}

.skc-account__stat-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--skc-sm);
}

.skc-account__stat-title {
	font-size: var(--skc-label-md);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--skc-secondary);
}

.skc-account__stat--spent .skc-account__stat-title {
	color: var(--skc-on-primary);
	opacity: 0.7;
}

.skc-account__stat-head .material-symbols-outlined {
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
	color: var(--skc-primary);
}

.skc-account__stat--spent .skc-account__stat-head .material-symbols-outlined {
	color: var(--skc-on-primary);
}

/* The mockup sets this at display size, which suits its short "$4,290.00".
   Argentine peso totals are far longer ("$ 448.994,00") and overflow a third
   of the content column at that size, so money uses the headline step and
   only the short integer on the active-orders card keeps display size. */
.skc-account__stat-value {
	margin: 0;
	margin-top: auto;
	font-size: var(--skc-headline-lg);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--skc-primary);
}

.skc-account__stat--active .skc-account__stat-value {
	font-size: var(--skc-display-lg);
}

.skc-account__stat--spent .skc-account__stat-value {
	color: var(--skc-on-primary);
}

.skc-account__stat-foot {
	margin: 0;
	font-size: var(--skc-label-md);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--skc-secondary);
}

.skc-account__stat--spent .skc-account__stat-foot {
	color: var(--skc-on-primary);
	opacity: 0.7;
}

.skc-account__stat-link {
	font-size: var(--skc-label-md);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--skc-primary);
	text-decoration: underline;
}

.skc-account__stat-link:hover,
.skc-account__stat-link:focus-visible {
	text-decoration: none;
}

.skc-account__stat--spent .skc-account__stat-link {
	color: var(--skc-on-primary);
}

/* The address card holds more text than the others, so its value slot is the
   address block rather than a single big number. */
.skc-account__stat-address {
	margin: 0;
	margin-top: auto;
	font-size: var(--skc-body-md);
	font-style: normal;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--skc-primary);
}

/* ------------------------------------------------------------------ */
/* Order history                                                       */
/* ------------------------------------------------------------------ */

.skc-account__recent {
	display: flex;
	flex-direction: column;
	gap: var(--skc-md);
	min-width: 0;
}

.skc-account__recent-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--skc-xs) var(--skc-md);
	padding-bottom: var(--skc-sm);
	border-bottom: var(--skc-border-subtle);
}

.skc-account__recent-title {
	margin: 0;
	font-size: var(--skc-headline-lg);
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--skc-primary);
}

.skc-account__recent-count {
	font-size: var(--skc-label-md);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--skc-secondary);
}

.skc-account__orders {
	display: flex;
	flex-direction: column;
	gap: var(--skc-sm);
	min-width: 0;
}

/* Mobile-first: the shared header row is meaningless once each order is a
   card, so it is hidden and every cell carries its own label instead. */
.skc-account__orders-head {
	display: none;
}

.skc-account__order {
	display: flex;
	flex-direction: column;
	gap: var(--skc-xs);
	padding: var(--skc-sm);
	background: var(--skc-on-primary);
	border: var(--skc-border-subtle);
}

.skc-account__order-cell {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--skc-sm);
	min-width: 0;
	font-size: var(--skc-body-md);
	color: var(--skc-primary);
}

.skc-account__order-label {
	font-size: var(--skc-label-md);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--skc-secondary);
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.skc-account__orders {
		gap: 0;
		background: var(--skc-on-primary);
		border: var(--skc-border-subtle);
	}

	.skc-account__orders-head,
	.skc-account__order {
		display: grid;
		grid-template-columns: repeat(var(--skc-order-cols, 5), minmax(0, 1fr));
		gap: var(--skc-sm);
		align-items: center;
		padding: var(--skc-sm) var(--skc-md);
		background: transparent;
		border: 0;
	}

	.skc-account__orders-head {
		background: var(--skc-surface-bright);
		border-bottom: var(--skc-border-subtle);
	}

	.skc-account__order + .skc-account__order {
		border-top: var(--skc-border-subtle);
	}

	.skc-account__order:hover {
		background: var(--skc-surface-bright);
	}

	.skc-account__orders-th {
		font-size: var(--skc-label-md);
		font-weight: 600;
		line-height: 1;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--skc-secondary);
	}

	.skc-account__order-cell {
		display: block;
	}

	/* On desktop the column header carries the label. */
	.skc-account__order-label {
		display: none;
	}

	.skc-account__orders-th--order-actions,
	.skc-account__order-cell--order-actions {
		text-align: right;
	}
}

.skc-account__order-number {
	font-weight: 700;
	color: var(--skc-primary);
	text-decoration: none;
}

.skc-account__order-number:hover,
.skc-account__order-number:focus-visible {
	text-decoration: underline;
}

.skc-account__order-total {
	font-size: var(--skc-price-md);
	font-weight: 700;
	color: var(--skc-primary);
}

/* Orders that never completed show a struck-through total, as in the mockup. */
.skc-account__order--cancelled .skc-account__order-total,
.skc-account__order--refunded .skc-account__order-total,
.skc-account__order--failed .skc-account__order-total {
	color: var(--skc-secondary);
	text-decoration: line-through;
}

.skc-account__order-action {
	display: inline-block;
	font-size: var(--skc-label-md);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--skc-primary);
	text-decoration: underline;
}

.skc-account__order-action + .skc-account__order-action {
	margin-left: var(--skc-xs);
}

.skc-account__order-action:hover,
.skc-account__order-action:focus-visible {
	text-decoration: none;
}

/* Status badge ---------------------------------------------------- */

.skc-account__badge {
	display: inline-block;
	padding: var(--skc-base) var(--skc-xs);
	font-size: 10px;
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--skc-on-primary);
	background: var(--skc-primary);
}

.skc-account__badge--processing,
.skc-account__badge--on-hold,
.skc-account__badge--pending {
	color: var(--skc-primary);
	background: var(--skc-surface-container-highest);
	box-shadow: inset 0 0 0 1px var(--skc-primary);
}

.skc-account__badge--cancelled,
.skc-account__badge--refunded {
	color: var(--skc-on-primary);
	background: var(--skc-secondary);
}

.skc-account__badge--failed {
	color: var(--skc-on-primary);
	background: var(--skc-error);
}

.skc-account__recent-more {
	display: flex;
	justify-content: center;
}

.skc-account__recent-more .skc-btn {
	text-decoration: none;
}

/* Pagination ------------------------------------------------------- */

.skc-account__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--skc-sm);
}

.skc-account__pagination .skc-btn {
	text-decoration: none;
}

.skc-account__pagination-status {
	font-size: var(--skc-label-md);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--skc-secondary);
}

/* Empty state ------------------------------------------------------ */

.skc-account__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--skc-md);
	padding: var(--skc-lg) var(--skc-md);
	background: var(--skc-on-primary);
	border: var(--skc-border-subtle);
}

.skc-account__empty p {
	margin: 0;
	font-size: var(--skc-body-lg);
	color: var(--skc-secondary);
}

.skc-account__empty .skc-btn {
	text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Endpoints without a template override                               */
/* ------------------------------------------------------------------ */

/* Addresses, account details, payment methods, view order and the logged-out
   login form all keep WooCommerce's own markup (spec §3.3, "overrides
   mínimos"), so they are styled through WC's selectors instead. Everything
   below is scoped to .skc-account__content — or, for the login form, to the
   account page — so it cannot leak into checkout or cart. */

.skc-account__content h2,
.skc-account__content h3 {
	margin: 0 0 var(--skc-sm);
	font-size: var(--skc-headline-md);
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--skc-primary);
}

.skc-account__content > p {
	margin: 0 0 var(--skc-sm);
	color: var(--skc-secondary);
}

/* Plain links in WC's own markup. :not() keeps this off .skc-btn and the
   other components below, whose colour comes from their own rule — without
   it this wins on specificity and paints the black buttons' label black. */
.skc-account__content a:not([class]),
.skc-account__content a.woocommerce-Button--edit,
.skc-account__content a.edit {
	color: var(--skc-primary);
}

/* Forms: edit-account, edit-address, lost-password, login. */
.skc-account__content form,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	display: flex;
	flex-direction: column;
	gap: var(--skc-sm);
	padding: var(--skc-md);
	background: var(--skc-on-primary);
	border: var(--skc-border-subtle);
}

@media (min-width: 768px) {
	.skc-account__content form,
	.woocommerce-account .woocommerce-form-login,
	.woocommerce-account .woocommerce-form-register {
		padding: var(--skc-lg);
	}
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	max-width: 480px;
	margin: 0 auto;
}

.skc-account__content .form-row,
.woocommerce-account .woocommerce-form-login .form-row,
.woocommerce-account .woocommerce-form-register .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--skc-xs);
	margin: 0;
	padding: 0;
	min-width: 0;
}

.skc-account__content label,
.woocommerce-account .woocommerce-form-login label,
.woocommerce-account .woocommerce-form-register label {
	font-size: var(--skc-label-md);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--skc-secondary);
}

.skc-account__content .required,
.woocommerce-account .required {
	color: var(--skc-error);
	text-decoration: none;
	border: 0;
}

.skc-account__content input[type='text'],
.skc-account__content input[type='email'],
.skc-account__content input[type='tel'],
.skc-account__content input[type='password'],
.skc-account__content select,
.skc-account__content textarea,
.woocommerce-account .woocommerce-form-login input[type='text'],
.woocommerce-account .woocommerce-form-login input[type='password'],
.woocommerce-account .woocommerce-form-register input[type='text'],
.woocommerce-account .woocommerce-form-register input[type='email'],
.woocommerce-account .woocommerce-form-register input[type='password'] {
	width: 100%;
	padding: var(--skc-sm);
	font-family: inherit;
	font-size: var(--skc-body-md);
	color: var(--skc-on-background);
	background: var(--skc-on-primary);
	border: var(--skc-border);
}

.skc-account__content input:focus-visible,
.skc-account__content select:focus-visible,
.skc-account__content textarea:focus-visible,
.woocommerce-account .woocommerce-form-login input:focus-visible,
.woocommerce-account .woocommerce-form-register input:focus-visible {
	outline: 2px solid var(--skc-primary);
	outline-offset: 1px;
}

/* WooCommerce's own buttons inside these forms. */
.skc-account__content button[type='submit'],
.skc-account__content .woocommerce-Button,
.woocommerce-account .woocommerce-form-login button[type='submit'],
.woocommerce-account .woocommerce-form-register button[type='submit'] {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--skc-xs);
	padding: var(--skc-sm) var(--skc-md);
	font-family: inherit;
	font-size: var(--skc-label-md);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--skc-on-primary);
	background: var(--skc-primary);
	border: 1px solid var(--skc-primary);
	cursor: pointer;
	transition: background-color var(--skc-transition), color var(--skc-transition);
}

.skc-account__content button[type='submit']:hover,
.skc-account__content .woocommerce-Button:hover,
.woocommerce-account .woocommerce-form-login button[type='submit']:hover,
.woocommerce-account .woocommerce-form-register button[type='submit']:hover {
	color: var(--skc-primary);
	background: var(--skc-on-primary);
}

/* Saved addresses (edit-address landing). */
.skc-account__content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--skc-md);
	margin: 0;
}

@media (min-width: 768px) {
	.skc-account__content .woocommerce-Addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.skc-account__content .woocommerce-Address {
	display: flex;
	flex-direction: column;
	gap: var(--skc-xs);
	padding: var(--skc-md);
	background: var(--skc-on-primary);
	border: var(--skc-border-subtle);
}

.skc-account__content .woocommerce-Address address {
	font-style: normal;
	font-size: var(--skc-body-md);
	line-height: 1.5;
	color: var(--skc-primary);
}

/* Saved payment methods table — WooCommerce renders a real <table> here and
   it is not overridden, so it is only restyled. */
.skc-account__content .woocommerce-MyAccount-paymentMethods {
	width: 100%;
	border-collapse: collapse;
	background: var(--skc-on-primary);
	border: var(--skc-border-subtle);
}

.skc-account__content .woocommerce-MyAccount-paymentMethods th,
.skc-account__content .woocommerce-MyAccount-paymentMethods td {
	padding: var(--skc-sm) var(--skc-md);
	text-align: left;
	border-bottom: var(--skc-border-subtle);
}

.skc-account__content .woocommerce-MyAccount-paymentMethods th {
	font-size: var(--skc-label-md);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--skc-secondary);
	background: var(--skc-surface-bright);
}

/* Notices — success and error feedback on the account forms. */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-notice {
	margin: 0 0 var(--skc-md);
	padding: var(--skc-sm) var(--skc-md);
	list-style: none;
	font-size: var(--skc-body-md);
	color: var(--skc-primary);
	background: var(--skc-on-primary);
	border: 1px solid var(--skc-primary);
}

.woocommerce-account .woocommerce-error {
	color: var(--skc-error);
	border-color: var(--skc-error);
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.skc-account__nav,
	.skc-account__backdrop,
	.skc-account__nav-link,
	.skc-account__nav-trigger,
	.skc-account__avatar-edit,
	.skc-account__content button[type='submit'],
	.skc-account__content .woocommerce-Button {
		transition: none;
	}

	.skc-account__avatar-edit:hover,
	.skc-account__avatar-edit:focus-visible {
		transform: none;
	}
}