/**
 * My account (WooCommerce) — 2026 skin.
 *
 * Markup: woocommerce/myaccount/my-account.php (header + layout) and
 * dashboard.php; the other screens are WooCommerce's own templates. Loaded on
 * account pages only (inc/woocommerce-clean.php). Fields keep the global
 * "field" rules from theme.css; colours are the light-dark() presets, so dark
 * mode needs no extra rules except the card outline.
 *
 * The order wizard prints inline styles for the Orders table and its Saved
 * addresses page (navy headers, 6px buttons) after this file, so the rules
 * for tables, buttons and that page start with the wrapper's id (#pw-account).
 */

.pw-account {
	--pw-account-card-pad: var(--wp--preset--spacing--xl);

	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xl);
	color: var(--wp--preset--color--text-secondary);
}

/* -------------------------------------------------------------------------
 * Header: tag, headline (the dashboard greets with a highlight label), lead
 * ---------------------------------------------------------------------- */
.pw-account__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--sm);
}

.pw-account__eyebrow {
	margin: 0;
	padding: 5px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent-light-blue);
	color: var(--wp--preset--color--brand-navy);
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce .pw-account__title {
	margin: 0;
	color: var(--wp--preset--color--text-primary);
	font-size: clamp(var(--wp--preset--font-size--headline-3), 4vw, var(--wp--preset--font-size--headline-1));
	font-weight: 800;
	line-height: 1.15;
}

.pw-account__lead {
	max-width: 40rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * Layout: navigation card beside the content card, stacked below 900px
 * ---------------------------------------------------------------------- */
.pw-account__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--lg);
	align-items: start;

	@media (min-width: 900px) {
		grid-template-columns: 17.5rem minmax(0, 1fr);
	}
}

/* WooCommerce floats the two at 30% / 68%. */
.woocommerce-account .pw-account :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
	float: none;
	width: auto;
	margin: 0;
}

/* Cards: as .is-style-card in theme.css. */
.pw-account :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
	box-sizing: border-box;
	border: 1px solid light-dark(transparent, rgb(233 228 222 / 0.22));
	border-radius: var(--wp--custom--radius--xl);
	background-color: var(--wp--preset--color--surface-raised);
	box-shadow: light-dark(0 10px 30px rgb(12 31 107 / 0.08), none);
}

.pw-account .woocommerce-MyAccount-content {
	padding: var(--pw-account-card-pad);

	& > :first-child,
	& > .woocommerce-notices-wrapper:first-child + * {
		margin-block-start: 0;
	}

	& > :last-child {
		margin-block-end: 0;
	}

	& :is(h2, h3) {
		margin-block: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm);
		color: var(--wp--preset--color--text-primary);
		font-size: var(--wp--preset--font-size--headline-6);
		font-weight: 700;
	}

	& a:not(.button, .wp-element-button) {
		color: var(--wp--preset--color--text-primary);
		text-underline-offset: 3px;
	}
}

@media (max-width: 599px) {
	.pw-account {
		--pw-account-card-pad: var(--wp--preset--spacing--lg);
	}
}

/* -------------------------------------------------------------------------
 * Navigation: a list in a card; a row of pills when stacked
 * ---------------------------------------------------------------------- */
#pw-account .woocommerce-MyAccount-navigation {
	padding: var(--wp--preset--spacing--sm);

	@media (min-width: 900px) {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem);
	}

	& ul {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	& li {
		margin: 0;
		padding: 0;
	}

	& a {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		min-height: 48px;
		padding: 10px 16px;
		border-radius: var(--wp--custom--radius--md);
		color: var(--wp--preset--color--text-primary);
		font-weight: 600;
		text-decoration: none;
		transition: background-color 0.15s, color 0.15s;

		&:hover {
			background-color: var(--wp--preset--color--surface-natural);
			text-decoration: none;
		}
	}

	& .is-active a {
		text-decoration: none;
		background-color: var(--wp--preset--color--surface-inverse);
		color: var(--wp--preset--color--text-inverse);
	}

	& .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-block-start: 6px;
		padding-block-start: 6px;
		border-top: 1px solid var(--wp--preset--color--border-subtle);

		& a {
			color: var(--wp--preset--color--text-secondary);
			font-weight: 500;
		}
	}

	@media (max-width: 899px) {
		& ul {
			flex-direction: row;
			gap: 6px;
			overflow-x: auto;
			scrollbar-width: none;
		}

		& a {
			min-height: 40px;
			padding: 8px 14px;
			border-radius: var(--wp--custom--radius--pill);
			white-space: nowrap;
		}

		& .woocommerce-MyAccount-navigation-link--customer-logout {
			margin: 0;
			padding: 0;
			border: 0;
		}
	}
}

/* -------------------------------------------------------------------------
 * Buttons: WooCommerce's .button as the theme's pill buttons — Secondary
 * (navy) for actions in tables, Primary (green) for form submits.
 * ---------------------------------------------------------------------- */
#pw-account .pw-account__layout :is(a.button, button.button, .woocommerce-Button),
.woocommerce .pw-account__title--password ~ form .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 0;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--surface-inverse);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--surface-inverse);
	color: var(--wp--preset--color--text-inverse);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;

	&:hover {
		border-color: var(--wp--custom--color--button-secondary-hover);
		background-color: var(--wp--custom--color--button-secondary-hover);
		color: var(--wp--preset--color--text-inverse);
	}
}

/* Form submits: Primary, size M. */
#pw-account .pw-account__layout :is(form button[type="submit"].button, .woocommerce-Button[type="submit"]),
.woocommerce .pw-account__title--password ~ form .button {
	padding: 12px 22px;
	border-color: var(--wp--preset--color--brand-green);
	background-color: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--body);

	&:hover {
		border-color: var(--wp--custom--color--button-primary-hover);
		background-color: var(--wp--custom--color--button-primary-hover);
		color: var(--wp--preset--color--white);
	}
}

/* Saved addresses: "Delete" as a quiet red outline button. */
#pw-account .pw-account__layout .palletways-addresses-page .button.button-danger {
	border-color: var(--wp--preset--color--error);
	background-color: transparent;
	color: var(--wp--preset--color--error);

	&:hover {
		border-color: var(--wp--preset--color--error);
		background-color: var(--wp--preset--color--error-subtle);
		color: var(--wp--preset--color--error);
	}
}

/* -------------------------------------------------------------------------
 * Status pills (orders table, dashboard, order intro)
 * ---------------------------------------------------------------------- */
.pw-account-status,
.pw-account mark.order-status {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--brand-blue-light);
	color: var(--wp--preset--color--text-primary);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

.pw-account-status:is(.pw-account-status--completed, .pw-account-status--fulfilled) {
	background-color: var(--wp--preset--color--brand-green-subtle);
	color: var(--wp--preset--color--brand-green-dark);
}

.pw-account-status:is(.pw-account-status--pending, .pw-account-status--on-hold, .pw-account-status--checkout-draft) {
	background-color: var(--wp--preset--color--warning-subtle);
	color: var(--wp--preset--color--warning);
}

.pw-account-status:is(.pw-account-status--failed, .pw-account-status--cancelled) {
	background-color: var(--wp--preset--color--error-subtle);
	color: var(--wp--preset--color--error);
}

.pw-account-status--refunded {
	background-color: var(--wp--preset--color--surface-natural);
	color: var(--wp--preset--color--text-secondary);
}

/* -------------------------------------------------------------------------
 * Tables: orders, order details, saved addresses
 * ---------------------------------------------------------------------- */
#pw-account .pw-account__layout table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: var(--wp--preset--font-size--small);

	& :is(th, td) {
		padding: 14px 12px;
		border: 0;
		border-top: 1px solid var(--wp--preset--color--border-subtle);
		background: none;
		color: inherit;
		text-align: start;
		vertical-align: middle;
	}

	& thead th {
		padding-block: 0 10px;
		border-top: 0;
		background: none;
		color: var(--wp--preset--color--text-muted);
		font-size: var(--wp--preset--font-size--caption);
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	& :is(th, td):first-child {
		padding-inline-start: 0;
	}

	& :is(th, td):last-child {
		padding-inline-end: 0;
	}

	& tbody th {
		color: var(--wp--preset--color--text-primary);
		font-weight: 700;
	}

	& tbody th a {
		font-weight: 700;
		text-decoration: none;
	}

	& tfoot :is(th, td) {
		padding-block: 10px;
	}

	& tfoot tr:last-child :is(th, td) {
		color: var(--wp--preset--color--text-primary);
		font-weight: 700;
	}
}

.pw-account .woocommerce-orders-table__cell-order-actions {
	text-align: end;
	white-space: nowrap;
}

/* Gap between action buttons; the button rule above resets margins, so match its
   specificity. On phones the cell is a flex row with its own gap. */
@media (min-width: 769px) {
	#pw-account .pw-account__layout .woocommerce-orders-table__cell-order-actions a.button + a.button {
		margin-inline-start: 8px;
	}
}

/* Track (order wizard) is the second action: an outline pill, so "View" stays the
   one filled button in each row. Same look for the dashboard's Track link. */
#pw-account .pw-account__layout a.button.palletways-track,
.pw-account a.pw-account-recent__track {
	border: 1px solid var(--wp--preset--color--surface-inverse);
	background-color: transparent;
	color: var(--wp--preset--color--text-primary);

	&:hover {
		border-color: var(--wp--preset--color--surface-inverse);
		background-color: var(--wp--preset--color--surface-natural);
		color: var(--wp--preset--color--text-primary);
	}
}

/* WooCommerce's small-screen table: each order becomes a block with labels. */
@media (max-width: 768px) {
	#pw-account .pw-account__layout table.shop_table_responsive {
		& thead {
			display: none;
		}

		& tbody tr {
			display: block;
			padding-block: 12px;
			border-top: 1px solid var(--wp--preset--color--border-subtle);

			&:first-child {
				border-top: 0;
				padding-block-start: 0;
			}
		}

		& tbody :is(th, td) {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-end;
			align-items: center;
			gap: 4px 12px;
			padding: 6px 0;
			border: 0;
			text-align: end;

			&::before {
				content: attr(data-title);
				float: none;
				margin-inline-end: auto;
				color: var(--wp--preset--color--text-muted);
				font-size: var(--wp--preset--font-size--caption);
				font-weight: 700;
				letter-spacing: 0.06em;
				text-transform: uppercase;
			}
		}

		& tbody tr:nth-child(2n) :is(th, td) {
			background: none;
		}
	}
}

/* Pagination under the orders table. */
.pw-account .woocommerce-pagination {
	display: flex;
	justify-content: space-between;
	margin-block-start: var(--wp--preset--spacing--lg);
}

/* -------------------------------------------------------------------------
 * Single order
 * ---------------------------------------------------------------------- */
.pw-account--view-order .woocommerce-MyAccount-content > p:first-of-type {
	line-height: 2;

	& mark:not(.order-status) {
		background: none;
		color: var(--wp--preset--color--text-primary);
		font-weight: 700;
	}
}

.pw-account .woocommerce-order-details {
	margin-block-end: var(--wp--preset--spacing--lg);
}

#pw-account .pw-account__layout table.order_details tbody td {
	vertical-align: top;
}

.pw-account .order_details .product-name > a {
	font-weight: 700;
	text-decoration: none;
}

/* The wizard's "Consignment details" disclosure and label button. */
.pw-account .palletways-item-details {
	& details {
		padding: 12px 16px;
		border-radius: var(--wp--custom--radius--md);
		background-color: var(--wp--preset--color--surface);
	}

	& summary {
		color: var(--wp--preset--color--text-primary);
		font-weight: 700;
		cursor: pointer;
	}

	& p {
		margin-block: 8px 0;
	}
}

.pw-account .woocommerce-palletways-invoice {
	margin-block-start: var(--wp--preset--spacing--md) !important;
}

#pw-account .woocommerce-customer-details {
	margin-block-start: var(--wp--preset--spacing--lg);

	& address {
		padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
		border: 0;
		border-radius: var(--wp--custom--radius--lg);
		background-color: var(--wp--preset--color--surface);
		font-style: normal;
		line-height: 1.6;
	}

	& :is(p, dl) {
		margin: 6px 0 0;
		padding: 0;
	}

	& p::before {
		display: none;
	}

	& dt {
		font-weight: 700;
	}

	& dd {
		margin: 0;
	}
}

/* -------------------------------------------------------------------------
 * Forms: account details, saved addresses usage
 * ---------------------------------------------------------------------- */
.pw-account form.woocommerce-EditAccountForm,
.woocommerce .pw-account__title--password ~ form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--md);
	max-width: 44rem;

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

	& > *,
	& fieldset > * {
		grid-column: 1 / -1;
	}

	& .form-row-first,
	& .form-row-last {
		grid-column: auto;
	}

	& .clear {
		display: none;
	}

	& .form-row {
		display: flex;
		flex-direction: column;
		gap: 6px;
		float: none;
		width: auto;
		margin: 0;
		padding: 0;
	}

	& label {
		color: var(--wp--preset--color--text-primary);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		line-height: 1.4;
	}

	& .required {
		color: var(--wp--preset--color--error);
		text-decoration: none;
	}

	& :is(input.input-text, select) {
		width: 100%;
	}

	/* WooCommerce's own white 4px fields → the brand field: beige fill,
	   14px corners (card #3). */
	& .form-row :is(input.input-text, select) {
		box-sizing: border-box;
		min-height: 54px;
		padding: 12px 16px;
		border: 1px solid var(--wp--custom--color--field-border);
		border-radius: var(--wp--custom--radius--md);
		background-color: var(--wp--custom--color--field-bg);
		color: var(--wp--preset--color--text-primary);
		font-size: var(--wp--preset--font-size--body);
		line-height: 1.5;

		&:hover:not(:focus) {
			border-color: var(--wp--preset--color--border-bold);
		}

		&:focus {
			border-color: var(--wp--preset--color--focus);
			outline: 0;
			box-shadow: 0 0 0 3px light-dark(rgb(0 163 0 / 0.18), rgb(0 195 0 / 0.25));
		}
	}

	/* WooCommerce's show-password eye sits inside the field. */
	& .password-input {
		display: block;
		position: relative;
	}

	& em {
		font-size: var(--wp--preset--font-size--caption);
		font-style: normal;
	}

	& fieldset {
		display: grid;
		gap: var(--wp--preset--spacing--md);
		margin: var(--wp--preset--spacing--sm) 0 0;
		padding: var(--wp--preset--spacing--lg);
		border: 1px solid var(--wp--preset--color--border-subtle);
		border-radius: var(--wp--custom--radius--lg);
	}

	& legend {
		padding-inline: 8px;
		color: var(--wp--preset--color--text-primary);
		font-weight: 700;
	}

	& > p:last-of-type {
		margin: 0;
	}
}

#pw-account .pw-account__layout .palletways-addresses-page {
	& > h3:first-of-type {
		display: none;
	}

	& > p {
		margin-block: 0 var(--wp--preset--spacing--md);
	}

	& .shop_table td {
		white-space: pre-line;
	}

	/* The browser's own arrow sits against the edge, so the form draws one
	   with the same inset as the text. */
	& .palletways-usage-form {
		position: relative;
		width: fit-content;

		&::after {
			content: "";
			position: absolute;
			inset-block: 0;
			inset-inline-end: 16px;
			width: 20px;
			height: 20px;
			margin-block: auto;
			background-color: var(--wp--preset--color--text-primary);
			mask: url("../icons/chevron-down.svg") center / contain no-repeat;
			pointer-events: none;
		}
	}

	& .palletways-select {
		appearance: none;
		min-width: 10rem;
		min-height: 44px;
		padding: 8px 44px 8px 16px;
		border: 1px solid var(--wp--custom--color--field-border);
		border-radius: var(--wp--custom--radius--md);
		background-color: var(--wp--custom--color--field-bg);
		color: var(--wp--preset--color--text-primary);
	}
}

/* Notices inside the content card. */
.pw-account :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	border-radius: var(--wp--custom--radius--md);
}

/* WooCommerce's block notices take the brand Alert style (styles/blocks/group-alert-*.json). */
#pw-account .wc-block-components-notice-banner {
	--pw-notice-bg: var(--wp--preset--color--info-subtle);
	--pw-notice-text: var(--wp--preset--color--info);

	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 5rem;
	margin: 0 0 var(--wp--preset--spacing--md);
	padding: 12px 24px;
	border: 0;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--pw-notice-bg);
	color: var(--pw-notice-text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.28571;

	&.is-success {
		--pw-notice-bg: var(--wp--preset--color--success-subtle);
		--pw-notice-text: var(--wp--preset--color--success);
	}

	&.is-warning {
		--pw-notice-bg: var(--wp--preset--color--warning-subtle);
		--pw-notice-text: var(--wp--preset--color--warning);
	}

	&.is-error {
		--pw-notice-bg: var(--wp--preset--color--error-subtle);
		--pw-notice-text: var(--wp--preset--color--error);
	}

	&:last-child {
		margin-block-end: 0;
	}

	& > svg {
		display: none;
	}

	& > .wc-block-components-notice-banner__content {
		flex: 1 1 auto;
		color: inherit;
		font-size: inherit;

		& a:not(.button) {
			color: currentColor;
		}
	}
}

.pw-account .woocommerce-MyAccount-content > .wc-block-components-notice-banner + .button {
	margin-block-start: var(--wp--preset--spacing--md);
}

/* -------------------------------------------------------------------------
 * Dashboard: link tiles and recent orders
 * ---------------------------------------------------------------------- */
.pw-account-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: var(--wp--preset--spacing--sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pw-account-link {
	margin: 0;

	& a {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 4px;
		box-sizing: border-box;
		height: 100%;
		padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
		padding-inline-end: 3rem;
		border: 1px solid var(--wp--preset--color--border-subtle);
		border-radius: var(--wp--custom--radius--lg);
		color: var(--wp--preset--color--text-secondary);
		text-decoration: none;
		transition: border-color 0.15s, background-color 0.15s;

		&::after {
			content: "";
			position: absolute;
			top: 50%;
			right: var(--wp--preset--spacing--md);
			width: 20px;
			height: 20px;
			background-color: currentColor;
			mask: url("../icons/arrow-right.svg") center / contain no-repeat;
			translate: 0 -50%;
			transition: translate 0.15s;
		}

		&:hover {
			border-color: var(--wp--preset--color--border-bold);
			background-color: var(--wp--preset--color--surface);

			&::after {
				translate: 3px -50%;
			}
		}
	}
}

.pw-account-link__title {
	color: var(--wp--preset--color--text-primary);
	font-size: var(--wp--preset--font-size--headline-6);
	font-weight: 700;
	line-height: 1.3;
}

.pw-account-link__text {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.pw-account-link--quote a {
	border-color: var(--wp--preset--color--brand-green);
	background-color: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--brand-ink);

	& .pw-account-link__title {
		color: var(--wp--preset--color--brand-ink);
	}

	&:hover {
		border-color: var(--wp--custom--color--button-primary-hover);
		background-color: var(--wp--custom--color--button-primary-hover);
	}
}

.pw-account-recent {
	margin-block-start: var(--wp--preset--spacing--xl);
}

.pw-account-recent__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 16px;
	margin-block-end: var(--wp--preset--spacing--sm);

	& .pw-account-recent__title {
		margin: 0;
	}
}

.pw-account-recent__all {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.pw-account-recent__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pw-account-recent__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px 16px;
	padding-block: 14px;
	border-top: 1px solid var(--wp--preset--color--border-subtle);
	font-size: var(--wp--preset--font-size--small);

	&:first-child {
		border-top: 0;
	}

	@media (min-width: 600px) {
		grid-template-columns: minmax(0, 1fr) 10rem 8rem 7rem 5rem;
	}

	& .pw-account-status {
		justify-self: start;
	}
}

.pw-account .pw-account-recent__number {
	font-weight: 700;
	text-decoration: none;
}

.pw-account-recent__total {
	color: var(--wp--preset--color--text-primary);
	font-weight: 700;
	text-align: end;
}

.pw-account .pw-account-recent__track {
	grid-column: -2;
	justify-self: end;
	font-weight: 700;

	&:is(a) {
		padding: 4px 14px;
		border-radius: var(--wp--custom--radius--pill);
		font-size: var(--wp--preset--font-size--caption);
		line-height: 1.4;
		text-decoration: none;
	}

	&:empty {
		@media (max-width: 599px) {
			display: none;
		}
	}
}

/* -------------------------------------------------------------------------
 * Lost / reset password (logged out): one card like the login panel
 * ---------------------------------------------------------------------- */
.woocommerce-account main .woocommerce:has(> .pw-account__title--password) {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
	box-sizing: border-box;
	max-width: 40rem !important; /* default.css unsets it with !important */
	margin-inline: auto;
	padding: var(--wp--preset--spacing--xl);
	border: 1px solid light-dark(transparent, rgb(233 228 222 / 0.22));
	border-radius: var(--wp--custom--radius--xl);
	background-color: var(--wp--preset--color--surface-raised);
	box-shadow: light-dark(0 10px 30px rgb(12 31 107 / 0.08), none);

	& .pw-account__title--password {
		font-size: var(--wp--preset--font-size--headline-3);
	}

	& > form {
		max-width: none;
		margin: 0;
		grid-template-columns: minmax(0, 1fr);
	}

	& .form-row-first {
		grid-column: 1 / -1;
	}

	& .button {
		align-self: flex-start;
	}
}

/* -------------------------------------------------------------------------
 * Logged out: the login panel (login.css, shared with the header drawer)
 * as a card on this page, with the 2026 headline weight.
 * ---------------------------------------------------------------------- */
.woocommerce .pw-login-page {
	gap: var(--wp--preset--spacing--lg);
	max-width: 40rem;
	margin-block: var(--wp--preset--spacing--xl) 0;

	& > .pw-login {
		max-width: none;
		padding: var(--wp--preset--spacing--xl);
		border: 1px solid light-dark(transparent, rgb(233 228 222 / 0.22));
		border-radius: var(--wp--custom--radius--xl);
		background-color: var(--wp--preset--color--surface-raised);
		box-shadow: light-dark(0 10px 30px rgb(12 31 107 / 0.08), none);

		@media (max-width: 599px) {
			padding: var(--wp--preset--spacing--lg);
		}
	}

	& .pw-login .pw-login__title {
		color: var(--wp--preset--color--text-primary);
		font-size: var(--wp--preset--font-size--headline-2);
		font-weight: 800;
		line-height: 1.15;
		letter-spacing: 0;
	}

	/* WooCommerce pads and frames form.login / form.register. */
	& .pw-login .pw-login__form {
		margin: 0;
		padding: 0;
		border: 0;
	}

	& .pw-login .pw-login__subtitle {
		color: var(--wp--preset--color--text-primary);
		font-weight: 800;
	}
}