/* ============================================
   My Account — login/register + logged-in dashboard
   Loaded ONLY on is_account_page() (see functions.php).
   Extracted VERBATIM from style.css 2026-07-26 — CSS Phase 1
   (.agent/plans/active/css-architecture.md). Shared .pf-wc-page
   base, notice panels, and form-field styling stay in style.css
   because cart/checkout use them too.
   ============================================ */

/* My Account — login/register card treatment.
 * Default WC markup wraps each form in .u-column1 / .u-column2 with the h2
 * heading as a sibling of the form. Treat the whole column as a card so the
 * heading sits inside the surface instead of floating on the page bg. */
.pf-wc-page #customer_login.u-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin: 0;
}
/* WC's clearfix ::before/::after become grid items and break the layout —
 * the first column ends up in cell 2, the second wraps to a new row. */
.pf-wc-page #customer_login.u-columns::before,
.pf-wc-page #customer_login.u-columns::after {
	display: none;
}
.pf-wc-page #customer_login .u-column1,
.pf-wc-page #customer_login .u-column2 {
	background-color: var(--wp--preset--color--surface-dark);
	border-radius: 4px;
	padding: 2rem;
	float: none;
	width: auto;
}
.pf-wc-page #customer_login .u-column1 > h2,
.pf-wc-page #customer_login .u-column2 > h2 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--text-primary);
	margin: 0 0 1.5rem;
}
/* Kill WC's default form border — the card itself is the container now. */
.pf-wc-page #customer_login form.login,
.pf-wc-page #customer_login form.register {
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
}
@media (max-width: 768px) {
	.pf-wc-page #customer_login.u-columns {
		grid-template-columns: 1fr;
	}
}

/* My Account — logged-in dashboard.
 * WC renders a two-column layout: .woocommerce-MyAccount-navigation sidebar +
 * .woocommerce-MyAccount-content panel. Both get the card treatment so inputs
 * and notices inside sit on a cushion instead of pure black.
 *
 * WC's default layout uses floats with % widths on content-box children. Our
 * card padding pushes the total width past 100% and makes content wrap below
 * the nav. Force a grid on the parent to lock a reliable sidebar + main shape. */
/* Scope the grid to only the logged-in dashboard (when the sidebar nav
 * exists). Without :has(), this rule would also apply to the logged-out
 * login/register page and crush those cards into a 260px left column. */
.pf-wc-page .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 1.5rem;
	align-items: start;
}
/* WC's clearfix pseudos become grid items and push nav + content into the
 * wrong cells (same failure mode as the login page). */
.pf-wc-page .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.pf-wc-page .woocommerce:has(.woocommerce-MyAccount-navigation)::after {
	display: none;
}
.pf-wc-page .woocommerce-MyAccount-navigation,
.pf-wc-page .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	box-sizing: border-box;
}
.pf-wc-page .woocommerce-MyAccount-navigation {
	background-color: var(--wp--preset--color--surface-dark);
	border-radius: 4px;
	padding: 1.5rem;
}
.pf-wc-page .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pf-wc-page .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
}
.pf-wc-page .woocommerce-MyAccount-navigation li + li {
	margin-top: 0.25rem;
}
.pf-wc-page .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.6rem var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
	border-radius: 3px;
	transition: background-color 0.2s ease;
}
.pf-wc-page .woocommerce-MyAccount-navigation a:hover {
	background-color: rgba(240, 236, 228, 0.06);
}
.pf-wc-page .woocommerce-MyAccount-navigation .is-active a {
	background-color: rgba(240, 236, 228, 0.1);
	font-weight: 500;
}

.pf-wc-page .woocommerce-MyAccount-content {
	background-color: var(--wp--preset--color--surface-dark);
	border-radius: 4px;
	padding: 2rem;
}

/* Fieldset inside My Account forms — strip the browser's default groove
 * border. Treat <legend> as a section heading. */
.pf-wc-page .woocommerce-MyAccount-content fieldset {
	border: 1px solid rgba(240, 236, 228, 0.08);
	border-radius: 4px;
	padding: 1.5rem;
	margin: 1.5rem 0;
}
.pf-wc-page .woocommerce-MyAccount-content fieldset legend {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	color: var(--wp--preset--color--text-primary);
	padding: 0 0.5rem;
}

/* Stack nav above content on mobile. Needs the same :has() scope as the
 * desktop rule to beat its specificity, otherwise the two-column layout wins. */
@media (max-width: 768px) {
	.pf-wc-page .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
	}
}