.woocommerce-account .content-entry,
.woocommerce-account .content-entry__content {
	max-width: none;
}

.woocommerce-account .content-entry {
	display: grid;
	gap: var(--fc-space-2);
	padding-block: var(--fc-space-2) var(--fc-space-4);
}

/*
 * Global inner-page H1 standard (ADR-010), identical to .shop-archive__title.
 * My Account does not define its own colour or clamp, and the shared
 * presentation contract (family, weight, tracking, casing) is owned by
 * app.css — only the page's own scale steps live here.
 */
.woocommerce-account .content-entry__title {
	max-width: var(--fc-container-content);
	margin: 0;
	color: var(--fc-brand-primary);
	font-size: 3rem;
	line-height: 1.05;
	text-align: left;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.woocommerce-account .content-entry__content {
	min-width: 0;
	padding-top: var(--fc-space-2);
}

.fcsu-account-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fc-space-1);
	color: var(--fc-text-muted);
	font-size: 0.875rem;
	line-height: 1.4;
}

.fcsu-account-breadcrumb a {
	color: var(--fc-text);
	font-weight: 700;
	text-decoration: none;
}

.fcsu-account-breadcrumb a:hover,
.fcsu-account-breadcrumb a:focus-visible {
	color: var(--fc-brand-accent);
}

.fcsu-account-breadcrumb span[aria-hidden="true"] {
	color: var(--fc-brand-accent);
}

.fcsu-account-page-description {
	max-width: 48rem;
	margin: 0;
	padding-bottom: var(--fc-space-4);
	border-bottom: 1px solid var(--fc-border);
	color: var(--fc-text-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
}

.fcsu-my-account-shell {
	display: grid;
	grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
	min-width: 0;
}

.fcsu-account-nav {
	position: sticky;
	top: calc(var(--fc-header-height) + var(--fc-space-2));
	min-width: 0;
}

.fcsu-account-nav__label {
	margin: 0 0 var(--fc-space-1);
	color: var(--fc-text-muted);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* One calm list inside a single surface, not a stack of separate buttons. */
.fcsu-account-nav ul {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: var(--fc-space-1);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	background: var(--fc-surface);
	list-style: none;
}

.fcsu-account-nav li {
	margin: 0;
}

.fcsu-account-nav a {
	display: flex;
	min-height: 2.75rem;
	align-items: center;
	gap: var(--fc-space-1);
	padding: 0.6rem 0.75rem;
	border: 0;
	border-radius: var(--fc-radius-sm);
	color: var(--fc-text-muted);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.fcsu-account-nav a:hover {
	color: var(--fc-text);
	background: var(--fc-background);
}

/*
 * One quiet active treatment: a copper rail plus a tinted row. No chevron and
 * no second border — the active item should read at a glance, not shout.
 */
.fcsu-account-nav .is-active a,
.fcsu-account-nav a[aria-current="page"] {
	position: relative;
	color: var(--fc-text);
	background: var(--fc-background);
	font-weight: 800;
}

.fcsu-account-nav .is-active a::before,
.fcsu-account-nav a[aria-current="page"]::before {
	position: absolute;
	top: 0.45rem;
	bottom: 0.45rem;
	left: 0;
	width: 3px;
	border-radius: var(--fc-radius-pill);
	background: var(--fc-brand-accent);
	content: "";
}

.fcsu-my-account-content {
	display: grid;
	gap: var(--fc-space-3);
	min-width: 0;
}

.fcsu-account-dashboard {
	display: grid;
	gap: var(--fc-space-3);
}

.fcsu-account-welcome,
.fcsu-account-empty-state,
.fcsu-account-form-card,
.fcsu-address-card,
.fcsu-order-detail-summary,
.fcsu-order-tracking,
.fcsu-order-delivery,
.fcsu-order-updates,
.fcsu-order-consent,
.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details {
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-sm);
	background: var(--fc-surface);
}

.fcsu-account-welcome,
.fcsu-account-empty-state,
.fcsu-account-form-card,
.fcsu-order-detail-summary,
.fcsu-order-tracking,
.fcsu-order-delivery,
.fcsu-order-updates,
.fcsu-order-consent,
.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details {
	padding: clamp(1rem, 3vw, 1.5rem);
}

.fcsu-account-welcome {
	display: grid;
	gap: var(--fc-space-1);
}

.fcsu-account-welcome h2,
.fcsu-account-empty-state h2,
.fcsu-account-form-card h2,
.fcsu-address-card h2,
.fcsu-order-updates h2,
.fcsu-order-consent h2,
.woocommerce-account .woocommerce-order-details h2,
.woocommerce-account .woocommerce-customer-details h2 {
	margin: 0;
	color: var(--fc-text);
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	letter-spacing: 0;
	line-height: 1.18;
	overflow-wrap: anywhere;
}

.fcsu-account-welcome p,
.fcsu-account-empty-state p,
.fcsu-account-muted,
.fcsu-account-section-lead,
.fcsu-order-detail-summary p {
	margin: 0;
	color: var(--fc-text-muted);
	line-height: 1.7;
}

.fcsu-account-welcome a,
.fcsu-account-section-lead a,
.fcsu-order-detail-summary a {
	color: var(--fc-text);
	font-weight: 800;
}

/*
 * Order detail summary: a compact status fact, not a fourth card.
 *
 * It carries one line of facts — order number, date, status — above the real
 * content, so it reads as a quoted statement against the page ground with a
 * copper rule on the inline start instead of as another white panel.
 */
.fcsu-order-detail-summary {
	position: relative;
	padding: 1rem 1.25rem;
	border-inline-start: 3px solid var(--fc-brand-accent);
	background: color-mix(in srgb, var(--fc-background) 72%, var(--fc-surface));
}

.fcsu-order-detail-summary p {
	color: var(--fc-text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.fcsu-account-kicker {
	margin: 0;
	color: var(--fc-brand-accent);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}

/*
 * Three cards on a wide screen, two in the band where the account sidebar is
 * still taking a third of the page, one on a phone (below). `min()` on the
 * track floor keeps the grid from overflowing a 320px viewport.
 */
.fcsu-account-quick-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: var(--fc-space-2);
	min-width: 0;
}

/*
 * The quick links are members of the account card family, not a lighter
 * variant of it: same padding step, same border, same radius, same surface.
 * They share a baseline and an equal height on every row, so the dashboard
 * reads as one grid of cards under the welcome block rather than loose tiles.
 */
.fcsu-account-quick-card {
	display: grid;
	gap: 0.35rem;
	align-content: start;
	height: 100%;
	min-width: 0;
	padding: clamp(1rem, 3vw, 1.5rem);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-sm);
	color: var(--fc-text-muted);
	background: var(--fc-surface);
	font-size: 0.9375rem;
	line-height: 1.55;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.fcsu-account-quick-card:hover,
.fcsu-account-quick-card:focus-visible {
	border-color: color-mix(in srgb, var(--fc-brand-accent) 60%, var(--fc-border));
	background: color-mix(in srgb, var(--fc-brand-accent) 10%, var(--fc-surface));
}

.fcsu-account-quick-card__label {
	color: var(--fc-text);
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.3;
}

.fcsu-account-table-wrap {
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-sm);
	background: var(--fc-surface);
}

.woocommerce-account table.shop_table,
.woocommerce-account table.woocommerce-orders-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td,
.woocommerce-account table.woocommerce-orders-table th,
.woocommerce-account table.woocommerce-orders-table td {
	min-width: 0;
	padding: 1rem;
	border: 0;
	border-bottom: 1px solid var(--fc-border);
	vertical-align: middle;
	overflow-wrap: anywhere;
}

.woocommerce-account table.shop_table thead th,
.woocommerce-account table.woocommerce-orders-table thead th {
	color: var(--fc-text-muted);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}

.woocommerce-account table.shop_table tbody tr:last-child th,
.woocommerce-account table.shop_table tbody tr:last-child td,
.woocommerce-account table.woocommerce-orders-table tbody tr:last-child th,
.woocommerce-account table.woocommerce-orders-table tbody tr:last-child td {
	border-bottom: 0;
}

.woocommerce-account table.shop_table a,
.woocommerce-account table.woocommerce-orders-table a {
	color: var(--fc-text);
	font-weight: 800;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	align-items: center;
	justify-content: flex-end;
}

.woocommerce-account .button,
.woocommerce-account button.button,
.woocommerce-account .woocommerce-button,
.fcsu-account-quick-card,
.fcsu-address-card .edit {
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

/*
 * One button family. WooCommerce's own `.woocommerce a.button` outranks a
 * plain `.woocommerce-account .button`, so it kept its padding, radius and
 * alignment and only the colours (forced with !important) came through — that
 * is why the order actions did not read as our buttons. The `body.` prefix and
 * the element qualifiers win on specificity instead, so the !important flags
 * are no longer needed.
 */
body.woocommerce-account :is(a, button, input[type="submit"]).button,
body.woocommerce-account :is(a, button, input[type="submit"]).woocommerce-button,
body.woocommerce-account .woocommerce-Button.button {
	display: inline-flex;
	min-height: 2.75rem;
	max-width: 100%;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.6rem 1.15rem;
	border: 1px solid var(--fc-brand-accent);
	border-radius: var(--fc-radius-pill);
	color: var(--fc-surface);
	background: var(--fc-brand-accent);
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

/*
 * Secondary actions next to a primary one. Same size, radius and alignment —
 * only the weight differs, so the row still reads as one family. No danger
 * colour: cancelling an order is a normal action, not a destructive warning.
 */
body.woocommerce-account :is(a, button, input[type="submit"]).button:is(.cancel, .order-again, .woocommerce-Button--previous, .woocommerce-Button--next),
body.woocommerce-account :is(a, button, input[type="submit"]).woocommerce-button:is(.cancel, .order-again, .woocommerce-Button--previous, .woocommerce-Button--next) {
	border-color: var(--fc-border);
	color: var(--fc-text);
	background: var(--fc-surface);
}

body.woocommerce-account :is(a, button, input[type="submit"]).button:is(.cancel, .order-again, .woocommerce-Button--previous, .woocommerce-Button--next):is(:hover, :focus-visible),
body.woocommerce-account :is(a, button, input[type="submit"]).woocommerce-button:is(.cancel, .order-again, .woocommerce-Button--previous, .woocommerce-Button--next):is(:hover, :focus-visible) {
	border-color: var(--fc-brand-accent);
	color: var(--fc-brand-accent);
	background: var(--fc-background);
}

/*
 * Primary hover/focus. This used to be a low-specificity rule forced through
 * with !important, which meant it also won over the secondary rule above and
 * repainted cancel / order-again / pagination as primary buttons on hover.
 * It now wins the same way the base rule does — `body.` plus an element
 * qualifier — and explicitly excludes the secondary variants, so the two
 * rules no longer depend on source order.
 */
body.woocommerce-account :is(a, button, input[type="submit"]).button:not(:is(.cancel, .order-again, .woocommerce-Button--previous, .woocommerce-Button--next)):is(:hover, :focus-visible),
body.woocommerce-account :is(a, button, input[type="submit"]).woocommerce-button:not(:is(.cancel, .order-again, .woocommerce-Button--previous, .woocommerce-Button--next)):is(:hover, :focus-visible),
body.woocommerce-account .woocommerce-Button.button:not(:is(.cancel, .order-again, .woocommerce-Button--previous, .woocommerce-Button--next)):is(:hover, :focus-visible) {
	border-color: color-mix(in srgb, var(--fc-brand-accent) 82%, var(--fc-text));
	background: color-mix(in srgb, var(--fc-brand-accent) 82%, var(--fc-text));
}

.woocommerce-account :where(a, button):focus-visible {
	outline: 2px solid var(--fc-brand-accent);
	outline-offset: 3px;
}

.fcsu-account-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fc-space-1);
}

.fcsu-account-empty-state {
	display: grid;
	justify-items: start;
	gap: var(--fc-space-2);
}

/*
 * Theme-owned address layout. my-address.php no longer emits WooCommerce's
 * `u-columns` / `col2-set` / `col-1` / `col-2` / `u-column1` / `u-column2`
 * wrappers, so the `float: left; width: 48%` pair that staggered the two cards
 * on desktop is never applied and nothing has to be neutralised here. Two equal
 * tracks on one row: the grid owns the sizing, the cards own their content.
 */
.fcsu-address-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fc-space-2);
	align-items: stretch;
	min-width: 0;
}

/* Ship-to-billing-only stores render one address; it keeps the same geometry. */
.fcsu-address-grid--single {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Billing and shipping sit on one baseline: equal-height cards on a shared
 * row, with the address body pushing the edit action to a common bottom edge.
 */
.fcsu-address-card {
	display: grid;
	grid-template-rows: auto 1fr;
	align-content: start;
	gap: var(--fc-space-2);
	height: 100%;
	min-width: 0;
	padding: var(--fc-space-3);
}

/* Role tints, not status colours: the shared card border and geometry remain. */
.fcsu-address-card[data-address-role="billing"] {
	background: color-mix(in srgb, var(--fc-background) 55%, var(--fc-surface));
}

.fcsu-address-card[data-address-role="shipping"] {
	background: color-mix(in srgb, var(--fc-brand-primary) 4%, var(--fc-surface));
}

/*
 * Both cards share one head: title on the left, action on the right, on a
 * common baseline. The title may wrap, the action never shrinks, and neither
 * card can drift out of step with its sibling.
 */
.fcsu-address-card .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--fc-space-1) var(--fc-space-2);
	margin: 0;
	min-height: 2.5rem;
}

.fcsu-address-card .woocommerce-Address-title h2 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}

/*
 * The action hugs the right edge while there is room and drops to its own
 * line when the label is long, instead of pushing out past the card. Both
 * cards behave identically, so their heads stay in step.
 */
.fcsu-address-card .woocommerce-Address-title .edit {
	margin-inline-start: auto;
}

.fcsu-address-card .edit {
	display: inline-flex;
	flex: 0 0 auto;
	min-height: 2.5rem;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 0.8rem;
	white-space: nowrap;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-pill);
	color: var(--fc-text);
	font-size: 0.9rem;
	font-weight: 800;
	text-decoration: none;
}

.fcsu-address-card .edit:hover,
.fcsu-address-card .edit:focus-visible {
	border-color: var(--fc-brand-accent);
	background: color-mix(in srgb, var(--fc-brand-accent) 10%, var(--fc-surface));
}

.fcsu-address-card address {
	min-width: 0;
	margin: 0;
	color: var(--fc-text-muted);
	font-style: normal;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.fcsu-address-card__empty {
	display: block;
	padding: var(--fc-space-2);
	border: 1px dashed var(--fc-border);
	border-radius: var(--fc-radius-sm);
	color: var(--fc-text-muted);
	background: color-mix(in srgb, var(--fc-background) 70%, var(--fc-surface));
}

/* ------------------------------------------------------------------ auth -- */

/*
 * One auth shell for login, register, lost password and reset password: a
 * full-bleed visual surface beside an ordered form surface.
 *
 * The shell uses the account content column end to end instead of sitting as a
 * narrow centred card, so it starts on the same left edge as the `Hesabım`
 * heading and runs to the container's right edge. The form panel comes first in
 * the markup so keyboard and screen-reader order starts at the form on every
 * width; the grid places the visual panel to its left on desktop and lets it
 * reflow underneath on mobile.
 */
.fcsu-auth {
	width: 100%;
	min-width: 0;
}

.fcsu-auth__shell {
	display: grid;
	/* The form track stays the wider of the two so the fields lead the layout. */
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
	min-height: 32rem;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
	background: var(--fc-surface);
	box-shadow: 0 1px 2px rgb(32 35 31 / 5%), 0 28px 60px -42px rgb(32 35 31 / 42%);
}

/*
 * The visual panel carries no copy in either state. With an image it is the
 * image, edge to edge; without one it is a plain brand surface with the site
 * logo centred on both axes. The shell clips both to its own radius, so the
 * panel needs no corner rounding of its own and no frame.
 */
.fcsu-auth__brand {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	display: grid;
	place-items: center;
	min-width: 0;
	overflow: hidden;
	background: var(--fc-brand-primary);
}

.fcsu-auth__brand--media {
	/* No green behind the art: the image is the surface. */
	background: none;
}

/*
 * `<picture>` is only a source switch, never a box: it is pinned to the panel
 * exactly like a bare image so the two markup shapes lay out identically.
 */
.fcsu-auth__picture {
	position: absolute;
	inset: 0;
	display: block;
}

/*
 * Taken out of flow on purpose. As an in-flow grid item the image's intrinsic
 * height sized the panel, so a stacked 16:9 panel showed the top of the picture
 * clipped instead of a proper cover crop. Pinned to the panel box it always
 * fills exactly the panel — and on desktop the panel is then free to take its
 * height from the form beside it.
 */
.fcsu-auth__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fcsu-auth__brand--logo {
	padding: clamp(1.5rem, 4vw, 3rem);
}

.fcsu-auth__logo {
	display: block;
	width: auto;
	max-width: min(100%, 18rem);
	height: auto;
	max-height: 9rem;
	object-fit: contain;
}

/* No logo uploaded: the site name stands in rather than an empty green panel. */
.fcsu-auth__logo-fallback {
	color: var(--fc-surface);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	overflow-wrap: anywhere;
}

.fcsu-auth__panel-form {
	grid-column: 2;
	grid-row: 1;
	display: grid;
	/*
	 * The shell's height is set by whichever panel is taller. Centring the form
	 * keeps the short login screen balanced instead of leaving a slab of empty
	 * surface under the button; a tall register form simply fills the panel.
	 */
	align-content: center;
	justify-items: center;
	gap: clamp(1.25rem, 2.4vw, 1.75rem);
	min-width: 0;
	padding: clamp(1.5rem, 3.5vw, 3rem);
	background: var(--fc-surface);
}

/*
 * The panel grew with the shell; the form inside it did not. A capped measure
 * keeps the fields at a comfortable width and centred in the panel instead of
 * stretching into a very wide input row.
 */
.fcsu-auth__head,
.fcsu-auth__body {
	width: min(100%, 26rem);
	min-width: 0;
}

.fcsu-auth__head {
	display: grid;
	gap: 0.4rem;
}

.fcsu-auth__title {
	margin: 0;
	color: var(--fc-brand-primary);
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	letter-spacing: -0.01em;
	line-height: 1.15;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.fcsu-auth__lead {
	margin: 0;
	color: var(--fc-text-muted);
	font-size: 1rem;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.fcsu-auth__body {
	display: grid;
	gap: clamp(1.25rem, 2.4vw, 1.75rem);
}

/*
 * The segmented control is a radio group: the two state controls below are
 * off-screen but focusable, and the visible pills are their labels. That keeps
 * the switch keyboard-operable and announced as a two-option group with no
 * JavaScript and no ARIA tab emulation.
 */
.fcsu-auth__state {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.fcsu-auth__switch {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.3rem;
	min-width: 0;
	/*
	 * A pill inside a pill: the track needs enough inset that the selected
	 * pill's own rounded end stays inside the container's tighter curve.
	 */
	padding: 0.35rem;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-pill);
	background: var(--fc-background);
}

.fcsu-auth__tab {
	display: flex;
	min-height: 2.85rem;
	min-width: 0;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 0.9rem;
	border-radius: var(--fc-radius-pill);
	color: var(--fc-text-muted);
	font-size: 0.98rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	overflow-wrap: anywhere;
	transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.fcsu-auth__tab:hover {
	color: var(--fc-text);
}

/*
 * Selected pill. The state control precedes the switch and the panels, so the
 * whole component is driven by plain sibling selectors that every browser the
 * storefront targets supports.
 */
#fcsu-auth-tab-login:checked ~ .fcsu-auth__switch [for="fcsu-auth-tab-login"],
#fcsu-auth-tab-register:checked ~ .fcsu-auth__switch [for="fcsu-auth-tab-register"] {
	color: var(--fc-brand-primary);
	background: var(--fc-surface);
	box-shadow: 0 1px 2px rgb(32 35 31 / 12%);
}

/* Focus lands on the off-screen control; the ring is drawn on its pill. */
#fcsu-auth-tab-login:focus-visible ~ .fcsu-auth__switch [for="fcsu-auth-tab-login"],
#fcsu-auth-tab-register:focus-visible ~ .fcsu-auth__switch [for="fcsu-auth-tab-register"] {
	outline: 2px solid var(--fc-brand-accent);
	outline-offset: 2px;
}

.fcsu-auth__panel {
	display: grid;
	gap: var(--fc-space-2);
	min-width: 0;
}

/*
 * Exactly one form at a time. The two forms are never two side-by-side blocks:
 * on every width the shell shows the selected one and nothing else.
 */
.fcsu-auth--tabs .fcsu-auth__panel {
	display: none;
}

#fcsu-auth-tab-login:checked ~ .fcsu-auth__panel--login,
#fcsu-auth-tab-register:checked ~ .fcsu-auth__panel--register {
	display: grid;
}

/* Remember-me and the lost-password link share one baseline. */
.fcsu-auth__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem var(--fc-space-2);
	min-width: 0;
}

.fcsu-auth__meta .lost_password {
	margin: 0;
	font-size: 0.95rem;
}

.fcsu-auth__actions {
	display: grid;
	min-width: 0;
}

.fcsu-auth__note {
	margin: 0;
	padding: 0.85rem var(--fc-space-2);
	border: 1px solid var(--fc-border);
	border-inline-start: 3px solid var(--fc-brand-accent);
	border-radius: var(--fc-radius-sm);
	color: var(--fc-text-muted);
	background: var(--fc-background);
	font-size: 0.95rem;
	line-height: 1.6;
}

.fcsu-auth__footnote {
	margin: 0;
	font-size: 0.95rem;
}

.fcsu-auth__footnote a {
	color: var(--fc-text);
	font-weight: 800;
}

/* The primary action fills the form measure on every width. */
body.woocommerce-account .fcsu-auth__actions :is(a, button, input[type="submit"]).button {
	width: 100%;
}

.fcsu-auth__panel form,
.fcsu-auth__form,
.fcsu-account-form-card {
	display: grid;
	gap: var(--fc-space-2);
	min-width: 0;
}

/*
 * The lost/reset password forms open with WooCommerce's own explanatory
 * paragraph. It reads as supporting copy, like every other lead in the account
 * area, and the legacy `.clear` spacer float is not a grid item.
 */
.fcsu-auth__form > p:not(.form-row) {
	color: var(--fc-text-muted);
	line-height: 1.7;
}

.fcsu-auth__form .clear {
	display: none;
}

/*
 * One layout owner per level.
 *
 * `.woocommerce-address-fields` used to own a two-column grid as well as the
 * `__field-wrapper` it contains, so the address rows were placed by two nested
 * grids and collapsed into the name tracks. The outer wrapper is a plain block
 * now; the field wrapper is the only grid inside the address form.
 */
.fcsu-account-form-card .woocommerce-address-fields {
	display: block;
	width: 100%;
	min-width: 0;
}

.fcsu-account-form-card .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fc-space-2);
	width: 100%;
	min-width: 0;
}

/*
 * The submit row is a block sibling of the field wrapper rather than a grid
 * item, so it carries the step the wrapper's grid gap used to provide. The
 * `body.` prefix is what outranks the card-wide `margin: 0` adapter below,
 * the same way the rest of the account adapters settle Woo without
 * !important.
 */
body.woocommerce-account .fcsu-account-form-card .woocommerce-address-fields > p {
	margin-top: var(--fc-space-2);
}

/*
 * The profile form spans the account content column: one measure for the
 * profile and its password section, and that measure is the column itself.
 */
.fcsu-account-form-card.edit-account {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fc-space-2);
	row-gap: var(--fc-space-3);
	width: 100%;
	max-width: none;
	min-width: 0;
}

/*
 * The name pair is the only two-track row in either form; everything else —
 * wide rows, the password fieldset, the legacy clears and the submit — spans
 * both tracks. The profile form states that as "every direct child that is not
 * a name cell", so a field added through `woocommerce_edit_account_form_fields`
 * cannot land in a half-width track either.
 */
.fcsu-account-form-card.edit-account > :not(.form-row-first):not(.form-row-last),
.fcsu-account-form-card .woocommerce-address-fields__field-wrapper > .form-row:not(.form-row-first):not(.form-row-last),
.fcsu-account-form-card .woocommerce-address-fields,
.fcsu-account-form-card .form-row-wide,
.fcsu-account-form-card .clear {
	grid-column: 1 / -1;
}

/*
 * The form card is a grid, so its gap owns the vertical rhythm. The global
 * WooCommerce adapter in forms.css also gives every `.form-row` a bottom
 * margin — correct for a flow layout, a second gap here — and it outranks a
 * plain two-class selector. The `body.` element prefix settles that without
 * !important, the same way the rest of the account adapters do.
 */
body.woocommerce-account .fcsu-auth .form-row,
body.woocommerce-account .fcsu-auth__panel-form p,
body.woocommerce-account .fcsu-account-form-card .form-row,
body.woocommerce-account .fcsu-account-form-card p {
	min-width: 0;
	margin: 0;
}

/*
 * The legacy float clears are not layout in a grid — they are empty grid items,
 * each taking a full row plus a gap. Same treatment the auth forms already use.
 */
.fcsu-account-form-card .clear {
	display: none;
}

.fcsu-auth .form-row-first,
.fcsu-auth .form-row-last,
body.woocommerce-account .woocommerce .fcsu-account-form-card .form-row-first,
body.woocommerce-account .woocommerce .fcsu-account-form-card .form-row-last {
	float: none;
	width: auto;
}

body.woocommerce-account .woocommerce .fcsu-account-form-card.edit-account > .form-row-first,
body.woocommerce-account .woocommerce .fcsu-account-form-card.edit-account > .form-row-last {
	grid-column: auto;
}

/*
 * Controls, labels, focus and validation come from the global form system in
 * forms.css (ADR-011). The field contract is not restated here; this file only
 * positions the fields.
 */

.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	color: var(--fc-text-muted);
	font-weight: 700;
}

.woocommerce-account input[type="checkbox"] {
	width: 1rem;
	min-width: 1rem;
	height: 1rem;
	accent-color: var(--fc-brand-accent);
}

.woocommerce-account .lost_password {
	margin: 0;
}

.woocommerce-account .lost_password a {
	color: var(--fc-text);
	font-weight: 800;
}

/*
 * The password group is a section of the account form, not a bare browser
 * fieldset. It borrows the quiet inner surface the order-updates list already
 * uses, so a grouped block reads as grouped without a second card style, and
 * its legend takes the same weight as the other block headings on the page.
 * The fields inside are the global form system's (ADR-011); nothing about the
 * control contract is restated here.
 */
.fcsu-account-form-card fieldset {
	min-width: 0;
	margin: 0;
	padding: var(--fc-space-3);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-sm);
	background: color-mix(in srgb, var(--fc-background) 70%, var(--fc-surface));
}

.fcsu-account-form-card legend {
	padding: 0;
	color: var(--fc-text);
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.3;
}

/*
 * The rows inside the fieldset are in normal flow, not in the card grid, so
 * they carry their own rhythm — one step, the same one the grid gap uses.
 */
.fcsu-account-form-card fieldset legend + .form-row,
.fcsu-account-form-card fieldset .form-row + .form-row {
	margin-top: var(--fc-space-2);
}

.woocommerce-account .required {
	color: var(--fc-danger);
}

.woocommerce-account #account_display_name_description {
	display: block;
	margin-top: 0.4rem;
	color: var(--fc-text-muted);
	font-size: 0.9rem;
	line-height: 1.5;
}

/*
 * The marks inside that line are facts, not highlights: WooCommerce's yellow
 * `mark` is neutralised to plain emphatic text, the order number carries the
 * brand green, and only the status keeps a pill so it still reads as state.
 */
.fcsu-order-detail-summary mark {
	padding: 0;
	border-radius: 0;
	color: var(--fc-text);
	background: transparent;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.fcsu-order-detail-summary mark.order-number {
	color: var(--fc-brand-primary);
}

.fcsu-order-detail-summary mark.order-status {
	display: inline-block;
	padding: 0.12rem 0.42rem;
	border-radius: var(--fc-radius-pill);
	background: color-mix(in srgb, var(--fc-brand-accent) 12%, var(--fc-surface));
}

.fcsu-order-updates {
	display: grid;
	gap: var(--fc-space-2);
}

.fcsu-order-updates ol {
	display: grid;
	gap: var(--fc-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fcsu-order-updates li {
	min-width: 0;
	padding: var(--fc-space-2);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-sm);
	background: color-mix(in srgb, var(--fc-background) 70%, var(--fc-surface));
}

.fcsu-order-updates .meta {
	margin: 0 0 0.35rem;
	color: var(--fc-text-muted);
	font-size: 0.9rem;
}

.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details {
	display: grid;
	gap: var(--fc-space-2);
	min-width: 0;
}

/*
 * The order detail card is denser than the account cards it sits beside: it is
 * one statement rather than a stack of panels, so its sections sit closer
 * together and its heading drops one step below the generic card heading.
 */
.woocommerce-account .woocommerce-order-details {
	gap: 0.9rem;
	padding: clamp(1rem, 2vw, 1.25rem);
}

.woocommerce-account .woocommerce-order-details h2 {
	font-size: clamp(1.3rem, 2vw, 1.55rem);
}

/*
 * Order detail — the same reading as the order-received endpoint.
 *
 * FC-024 already settled how an order reads: one neutral card per section, the
 * line items as a quiet typographic table instead of a framed WooCommerce
 * grid, a narrow right-aligned money column against a flexible product column,
 * and the closing total as the only emphasised row. The account's order detail
 * screen showed the same data through the generic account-table skin, which is
 * why it still read as a raw WooCommerce table.
 *
 * Presentation only. `order-details.php` is not overridden, no row WooCommerce
 * prints is hidden or reordered, and the payment-method row is left exactly as
 * WooCommerce renders it.
 */
.woocommerce-account .woocommerce-order-details table.shop_table {
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.woocommerce-account .woocommerce-order-details table.shop_table th,
.woocommerce-account .woocommerce-order-details table.shop_table td {
	padding: 0.7rem 0;
	vertical-align: top;
	line-height: 1.5;
}

/*
 * Line items get one step more air than the head and totals rows, and the
 * first of them opens against a hairline so the list starts on a rule rather
 * than directly under the column labels.
 */
.woocommerce-account .woocommerce-order-details table.shop_table tbody td {
	padding-block: 0.9rem;
}

.woocommerce-account .woocommerce-order-details table.shop_table tbody tr:first-child td {
	border-top: 1px solid var(--fc-border);
}

.woocommerce-account .woocommerce-order-details table.shop_table thead th {
	padding-top: 0;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

/*
 * The line items and the totals block are two halves of one statement; the
 * generic account table drops the rule between the last item and the first
 * total, which is what let them run together.
 */
.woocommerce-account .woocommerce-order-details table.shop_table tbody tr:last-child th,
.woocommerce-account .woocommerce-order-details table.shop_table tbody tr:last-child td {
	border-bottom: 1px solid var(--fc-border);
}

.woocommerce-account .woocommerce-order-details table.shop_table .product-name,
.woocommerce-account .woocommerce-order-details table.shop_table tfoot th {
	width: 62%;
}

.woocommerce-account .woocommerce-order-details table.shop_table .product-total,
.woocommerce-account .woocommerce-order-details table.shop_table tfoot td {
	padding-left: var(--fc-space-2);
	text-align: right;
}

/* An amount never breaks across lines; a payment-method label still may. */
.woocommerce-account .woocommerce-order-details table.shop_table .woocommerce-Price-amount {
	white-space: nowrap;
}

/*
 * Quantity and item meta are supporting detail under the product name, not a
 * second product name. WooCommerce prints the quantity inline as
 * `<strong class="product-quantity">`, so it is quietened rather than moved.
 */
.woocommerce-account .woocommerce-order-details table.shop_table .product-quantity,
.woocommerce-account .woocommerce-order-details table.shop_table .wc-item-meta {
	color: var(--fc-text-muted);
	font-size: 0.875rem;
	font-weight: 600;
}

.woocommerce-account .woocommerce-order-details table.shop_table .wc-item-meta {
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-order-details table.shop_table .wc-item-meta p {
	margin: 0;
}

.woocommerce-account .woocommerce-order-details table.shop_table tfoot th {
	color: var(--fc-text-muted);
	font-weight: 700;
	text-transform: none;
}

/*
 * Totals read as a statement footer: the block opens with the same step the
 * line items use, the subtotal/shipping rows stay quiet supporting copy, and
 * the closing row is the only emphasised one.
 */
.woocommerce-account .woocommerce-order-details table.shop_table tfoot tr:first-child th,
.woocommerce-account .woocommerce-order-details table.shop_table tfoot tr:first-child td {
	padding-top: 0.9rem;
}

.woocommerce-account .woocommerce-order-details table.shop_table tfoot tr:not(:last-child) th,
.woocommerce-account .woocommerce-order-details table.shop_table tfoot tr:not(:last-child) td {
	color: var(--fc-text-muted);
	font-size: 0.925rem;
}

/* The closing row is the order total: readable, without shouting. */
.woocommerce-account .woocommerce-order-details table.shop_table tfoot tr:last-child th,
.woocommerce-account .woocommerce-order-details table.shop_table tfoot tr:last-child td {
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
	border-top: 2px solid color-mix(in srgb, var(--fc-brand-primary) 28%, var(--fc-border));
	border-bottom: 0;
	color: var(--fc-text);
	background: color-mix(in srgb, var(--fc-brand-primary) 4%, var(--fc-surface));
	font-size: 1.1rem;
	font-weight: 850;
}

/* The tinted total row keeps its label and amount off the card edge. */
.woocommerce-account .woocommerce-order-details table.shop_table tfoot tr:last-child th {
	padding-left: 0.65rem;
}

.woocommerce-account .woocommerce-order-details table.shop_table tfoot tr:last-child td {
	padding-right: 0.65rem;
}

/* --------------------------------------------------- address card standard -- */

/*
 * One address-card contract, three places: the address list above, the billing
 * and shipping pair on an order, and the order-received endpoint. Neutral
 * surface, one hairline border, the small radius, one padding step, the card
 * heading scale and a muted address body.
 *
 * The markup is genuinely different in each place — the theme owns the list
 * template, WooCommerce owns the order columns — so what is shared is the
 * visual contract, not a forced common selector or wrapper.
 */
.woocommerce-account .woocommerce-customer-details:has(.woocommerce-columns--addresses) {
	padding: 0;
	border: 0;
	background: none;
}

.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fc-space-2);
	align-items: start;
	min-width: 0;
	margin: 0;
}

.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses::before,
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses::after {
	content: none;
}

.woocommerce-account .woocommerce-customer-details .woocommerce-column {
	float: none;
	width: auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: var(--fc-space-3);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-sm);
	background: var(--fc-surface);
}

.woocommerce-account .woocommerce-customer-details .woocommerce-column__title {
	margin: 0 0 var(--fc-space-2);
}

/*
 * WooCommerce frames the address itself, which would be a second card inside
 * each card. The theme card is the only surface, so the address is reset back
 * to plain text at a specificity core cannot outrank.
 */
.woocommerce-account .woocommerce .woocommerce-customer-details address,
.woocommerce-account .woocommerce-customer-details address {
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--fc-text-muted);
	font-size: 0.9375rem;
	font-style: normal;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.woocommerce-account .woocommerce-customer-details address p {
	margin: 0.35rem 0 0;
}

.woocommerce-account :where(.woocommerce-error, .woocommerce-info, .woocommerce-message) {
	border-radius: var(--fc-radius-sm);
	overflow-wrap: anywhere;
}

/* ADR-010 H1 scale, identical to the shop archive title. */
@media (max-width: 860px) {
	.woocommerce-account .content-entry__title {
		font-size: 2.25rem;
	}
}

@media (max-width: 359px) {
	.woocommerce-account .content-entry__title {
		font-size: 1.85rem;
	}
}

/*
 * My Account already inherits the generic .site-main 3rem desktop top step;
 * its own content entry added another 1rem on top, which pushed the
 * breadcrumb and H1 below the Blog archive baseline. Only that nested desktop
 * offset is removed — mobile spacing stays page-specific below.
 */
@media (min-width: 769px) {
	.woocommerce-account .content-entry {
		padding-block-start: 0;
	}
}

/*
 * The auth shell stacks before the two tracks get cramped. The form panel is
 * first in the markup, so it simply stays first: the visitor lands on the form
 * and the brand panel reflows underneath as a compact supporting surface.
 */
@media (max-width: 900px) {
	.fcsu-auth {
		width: min(100%, 34rem);
		margin-inline: auto;
	}

	.fcsu-auth__shell {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.fcsu-auth__brand,
	.fcsu-auth__panel-form {
		grid-column: 1;
		grid-row: auto;
	}

	.fcsu-auth__panel-form {
		align-content: start;
		justify-items: stretch;
	}

	/*
	 * Stacked, the visual panel is a controlled band rather than a full-height
	 * surface. A purpose-made mobile image gets a balanced 3:2; when only the
	 * desktop image exists it gets 4:3, which keeps noticeably more of a wide
	 * composition than the 16:9 band that was cropping it too hard.
	 */
	.fcsu-auth__brand--media {
		aspect-ratio: 3 / 2;
	}

	.fcsu-auth__brand--desktop-only {
		aspect-ratio: 4 / 3;
	}

	.fcsu-auth__brand--logo {
		min-height: 9rem;
		padding: var(--fc-space-3);
	}

	.fcsu-auth__logo {
		max-width: min(100%, 12rem);
		max-height: 5.5rem;
	}
}

@media (max-width: 960px) {
	.fcsu-my-account-shell {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fc-space-3);
	}

	.fcsu-account-nav {
		position: static;
	}

	/*
	 * Horizontal rail. It scrolls to the container edge so the last item is
	 * never clipped mid-word, and snapping keeps a row aligned after a flick.
	 */
	.fcsu-account-nav ul {
		display: flex;
		gap: 0.35rem;
		overflow-x: auto;
		overflow-y: hidden;
		padding: var(--fc-space-1);
		scroll-padding-inline: var(--fc-space-1);
		scroll-snap-type: x proximity;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	/*
	 * The rail snaps to the centre, matching where assets/js/account-nav.js
	 * parks the active tab on load: a flick lands a tab where the active one
	 * already sits instead of shifting the reference point.
	 */
	.fcsu-account-nav li {
		flex: 0 0 auto;
		max-width: none;
		scroll-snap-align: center;
	}

	.fcsu-account-nav a {
		white-space: nowrap;
		overflow-wrap: normal;
	}

	.fcsu-account-nav .is-active a::before,
	.fcsu-account-nav a[aria-current="page"]::before {
		top: auto;
		right: 0.5rem;
		bottom: 0;
		left: 0.5rem;
		width: auto;
		height: 3px;
	}

	.fcsu-account-quick-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.woocommerce-account .content-entry {
		padding-block: var(--fc-space-1) var(--fc-space-3);
	}

	.fcsu-account-page-description {
		font-size: 1rem;
	}

	.fcsu-order-detail-summary {
		padding: 0.9rem 1rem;
	}

	/* A narrow amount column needs less of the row than it does on desktop. */
	.woocommerce-account .woocommerce-order-details table.shop_table .product-name,
	.woocommerce-account .woocommerce-order-details table.shop_table tfoot th {
		width: 58%;
	}

	.fcsu-account-quick-grid,
	.fcsu-address-grid,
	.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses,
	.fcsu-account-form-card .woocommerce-address-fields__field-wrapper,
	.fcsu-account-form-card.edit-account {
		grid-template-columns: minmax(0, 1fr);
	}

	.fcsu-account-table-wrap {
		overflow: visible;
		border: 0;
		background: transparent;
	}

	.woocommerce-account table.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce-account table.woocommerce-orders-table,
	.woocommerce-account table.woocommerce-orders-table tbody,
	.woocommerce-account table.woocommerce-orders-table tr,
	.woocommerce-account table.woocommerce-orders-table th,
	.woocommerce-account table.woocommerce-orders-table td {
		display: block;
		width: 100%;
	}

	.woocommerce-account table.woocommerce-orders-table tr {
		display: grid;
		gap: 0.55rem;
		margin-bottom: var(--fc-space-2);
		padding: var(--fc-space-3);
		border: 1px solid var(--fc-border);
		border-radius: var(--fc-radius-md);
		background: var(--fc-surface);
	}

	.woocommerce-account table.woocommerce-orders-table th,
	.woocommerce-account table.woocommerce-orders-table td {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--fc-space-1);
		padding: 0;
		border: 0;
		text-align: right;
	}

	.woocommerce-account table.woocommerce-orders-table th::before,
	.woocommerce-account table.woocommerce-orders-table td::before {
		flex: 0 0 6.5rem;
		color: var(--fc-text-muted);
		font-size: 0.78rem;
		font-weight: 700;
		letter-spacing: 0.01em;
		line-height: 1.5;
		text-align: left;
		text-transform: uppercase;
		content: attr(data-title);
	}

	/*
	 * The actions are a group, not another label:value row: the data-title
	 * pseudo-label is dropped, the buttons sit on one wrapped line aligned
	 * with the card content, and a hairline separates them from the data
	 * above so the card does not end in a slab of empty space.
	 */
	.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.45rem;
		justify-content: flex-start;
		margin-top: 0.15rem;
		padding-top: 0.75rem;
		border-top: 1px solid var(--fc-border);
	}

	.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions::before {
		display: none;
		content: none;
	}

	.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
		flex: 1 1 auto;
		width: auto;
		min-width: 8rem;
	}

	.woocommerce-account .woocommerce-order-details table.shop_table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/*
	 * Form submits go full width; the order-card actions keep their own
	 * wrapped group so a row of three does not become three full-width slabs.
	 */
	body.woocommerce-account .fcsu-account-form-card :is(a, button).button,
	body.woocommerce-account .fcsu-auth :is(a, button).button {
		width: 100%;
	}
}

@media (max-width: 380px) {
	.fcsu-account-nav li {
		max-width: 78vw;
	}

	.fcsu-account-nav a {
		padding-inline: 0.7rem;
	}

	/*
	 * The order detail summary and the order detail card carry their own
	 * padding contracts above (0.9rem 1rem from 720px down, and a clamp that
	 * already bottoms out at 1rem), so they are not part of this step.
	 */
	.fcsu-account-welcome,
	.fcsu-account-empty-state,
	.fcsu-account-form-card,
	.fcsu-address-card,
	.fcsu-order-tracking,
	.fcsu-order-delivery,
	.fcsu-order-updates,
	.fcsu-order-consent,
	.woocommerce-account .woocommerce-customer-details,
	.woocommerce-account .woocommerce-customer-details .woocommerce-column {
		padding: 0.9rem;
	}

	.fcsu-account-form-card fieldset {
		padding: 0.9rem;
	}

	.woocommerce-account table.woocommerce-orders-table tr {
		padding: 0.85rem;
	}

	.woocommerce-account table.woocommerce-orders-table th,
	.woocommerce-account table.woocommerce-orders-table td {
		display: grid;
		gap: 0.25rem;
		text-align: left;
	}

	.woocommerce-account table.woocommerce-orders-table th::before,
	.woocommerce-account table.woocommerce-orders-table td::before {
		flex-basis: auto;
	}
}

/* FC-036 — the courier delivery section is the same panel, not a second look.
 *
 * A customer sees exactly one of these two blocks on an order: parcel orders get
 * the tracking section, courier orders get the delivery section. Giving them
 * separate styling would make one order type feel like a different page, so the
 * delivery block joins every selector the tracking block already uses and adds
 * nothing of its own — no new token, no new colour, no new spacing scale.
 */

/* FC-035 — shipping and tracking on the order detail page.
 *
 * The section joins the existing card family above (border, radius, surface,
 * padding) rather than introducing a second look for one panel; only the two
 * things it genuinely adds are styled here. Tokens only: no new brand colour is
 * defined, per ADR and `tokens.css`.
 */
.fcsu-order-tracking__list,
.fcsu-order-delivery__list {
	display: grid;
	gap: 0.35rem 1rem;
	margin: 0;
}

@media (min-width: 480px) {
	.fcsu-order-tracking__list,
	.fcsu-order-delivery__list {
		grid-template-columns: auto 1fr;
	}
}

.fcsu-order-tracking__list dt,
.fcsu-order-delivery__list dt {
	color: var(--fc-text-muted);
	font-weight: 600;
}

.fcsu-order-tracking__list dd,
.fcsu-order-delivery__list dd {
	margin: 0;
}

/* A tracking number is a code the customer reads aloud, copies into a courier
 * site, or compares digit by digit against an SMS. A monospace face with
 * generous letter spacing is the difference between that being easy and being a
 * phone call. `break-all` because these run long and must not push the card
 * wider than the viewport on a phone. */
.fcsu-order-tracking__number {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.03em;
	word-break: break-all;
}

.fcsu-order-tracking__actions {
	margin: 0.9rem 0 0;
}

/*
 * FC-040 — the WhatsApp consent block is the same panel as the sections above
 * it, not a bare form at the bottom of the page. It joins every selector the
 * order sections already use and adds only its own two elements. Presentation
 * only: the POST target, the nonce fields and when the block renders at all are
 * the consent module's, untouched here.
 */
.fcsu-order-consent {
	display: grid;
	gap: var(--fc-space-2);
	min-width: 0;
}

.fcsu-order-consent__state {
	margin: 0;
	color: var(--fc-text-muted);
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.fcsu-order-consent__form {
	margin: 0;
}