/*
 * Mein Konto — loaded only on the account page and its endpoints
 * (see inc/account-page.php), render-blocking, because the forms are
 * the first screen.
 *
 * WHICH MARKUP THIS TARGETS
 * WooCommerce's CLASSIC account templates: `#customer_login`, the two
 * `woocommerce-form-…` forms, `.woocommerce-MyAccount-navigation`,
 * `.shop_table`. There is no block markup on this page — the Cart and
 * Checkout blocks have no counterpart for the account area — so nothing
 * here speaks `.wc-block-*`. The frame around it (`.account-section`,
 * `.account-hero`) is the theme's own, written in template-account.php.
 *
 * SPECIFICITY STANDARD
 * Same as the product page and the checkout: WooCommerce's own sheets
 * are on the page and can print after ours, so every rule that touches
 * WooCommerce markup is prefixed
 *
 *   body.woocommerce-account …
 *
 * which is (0,2,x) against plugin CSS that is mostly (0,1,0)–(0,2,0).
 * Keep the prefix even where it looks redundant; the rule that drops it
 * is the one that stops working after the next WooCommerce release.
 *
 * The form fields carry one more piece of defence: they repeat the
 * three `:not()`s from global.css. That rule caps every input on the
 * site at 30rem, which is right in a page of body copy and wrong inside
 * a card — and a plain class would lose to it. Same lesson as the
 * contact form.
 *
 * NO TEMPLATE OVERRIDES
 * German Market adds its account-side output through the same hooks
 * WooCommerce provides. Everything below styles WooCommerce's classes
 * rather than replacing markup, so its additions land inside this design
 * instead of beside it.
 */

/* ==================================================================
 * SECTION FRAME
 * ================================================================== */

/* Full-bleed band, content on the site's column. max() keeps the
   element edge to edge and pushes the padding out to the column edge,
   so no inner wrapper is needed. */
.account-section {
	padding-inline: max(var(--fk-space), (100% - var(--fk-max-width)) / 2);
	background: var(--fk-color-bg);
	color: var(--fk-color-body);
}

/* ---------- Opening band ---------- */

.account-hero {
	padding-block: clamp(2.5rem, 6vw, 4rem);
	background: var(--fk-color-greige);
	text-align: center;
}

.account-hero__head {
	max-width: 46rem;
	margin-inline: auto;
}

/*
 * `overflow-wrap: normal` on purpose: global.css breaks long words in
 * headings, which is right in a narrow product card and wrong in a
 * large one — it once hyphenated "Firmengeschenke" after the k.
 */
.account-hero__title {
	margin: 0;
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.1;
	color: var(--fk-color-text);
	overflow-wrap: normal;
}

.account-lead {
	max-width: 40rem;
	margin: 1rem auto 0;
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* ---------- The section the account area sits in ---------- */

.account-body {
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

/* ==================================================================
 * NOTICES
 * ================================================================== */

/*
 * Deliberately the same shape as on the cart and the checkout (see
 * checkout.css): a marker on the reading side, the greige ground, no
 * icon. WooCommerce draws its tick from its own webfont — one request
 * for one glyph — and a message about a wrong password should not look
 * like a different site from a message about a coupon.
 */
body.woocommerce-account .site-main .woocommerce-message,
body.woocommerce-account .site-main .woocommerce-info,
body.woocommerce-account .site-main .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	border: 0;
	border-left: 3px solid var(--fk-color-sage-dark);
	border-radius: 0.25rem;
	background: var(--fk-color-greige);
	color: var(--fk-color-text);
	font-size: 0.9375rem;
	line-height: 1.5;
	list-style: none;
}

body.woocommerce-account .site-main .woocommerce-error {
	border-left-color: #b3261e;
}

body.woocommerce-account .site-main .woocommerce-message::before,
body.woocommerce-account .site-main .woocommerce-info::before,
body.woocommerce-account .site-main .woocommerce-error::before {
	content: none;
}

/* WooCommerce prints the notices container on every request, empty or
   not. Empty it is still a grid item, and a grid item still takes its
   row and its gap — 3.5 rem of nothing between the heading and the
   account. `:empty` is exact here: one text node or one notice inside
   and the rule stops applying. */
body.woocommerce-account .site-main .woocommerce-notices-wrapper:empty {
	display: none;
}

/* An error can carry several lines; they are list items and must not
   look like a bulleted list inside a banner. */
body.woocommerce-account .site-main .woocommerce-error li {
	margin: 0;
	list-style: none;
}

/*
 * A notice can carry an action — "Erneut senden" beside the note about
 * a temporary password. WooCommerce writes it BEFORE the sentence, so
 * unstyled it reads as a button with an explanation trailing after it.
 * The text comes first and the action goes to the end of the line.
 *
 * Both the bare button and a form around it are named: which of the two
 * is the flex item depends on the notice, and `order` only moves the
 * item itself.
 *
 * The action is a secondary button here, the same outlined shape the
 * order table uses — a notice is a note, and the solid dark button would
 * outweigh the sentence it belongs to.
 */
body.woocommerce-account .site-main .woocommerce-message > .button,
body.woocommerce-account .site-main .woocommerce-message > form,
body.woocommerce-account .site-main .woocommerce-info > .button,
body.woocommerce-account .site-main .woocommerce-info > form {
	order: 2;
	margin-left: auto;
	margin-bottom: 0;
}

body.woocommerce-account .site-main .woocommerce-message .button,
body.woocommerce-account .site-main .woocommerce-info .button {
	min-height: 0;
	padding: 0.5rem 1.125rem;
	background: transparent;
	border-color: rgba(31, 31, 31, 0.35);
	color: var(--fk-color-text);
	font-size: 0.9375rem;
}

body.woocommerce-account .site-main .woocommerce-message .button:hover,
body.woocommerce-account .site-main .woocommerce-message .button:focus-visible,
body.woocommerce-account .site-main .woocommerce-info .button:hover,
body.woocommerce-account .site-main .woocommerce-info .button:focus-visible {
	background: var(--fk-color-text);
	border-color: var(--fk-color-text);
	color: #fff;
	box-shadow: none;
}

/* ==================================================================
 * LOGIN AND REGISTRATION
 * ================================================================== */

/*
 * A CLEARFIX IS A GRID ITEM. Read this before adding another grid here.
 *
 * WooCommerce clears its floated columns with the classic micro
 * clearfix — `content: " "; display: table` on BOTH `::before` and
 * `::after` of `.col2-set`. Inside a float layout those two boxes are
 * invisible. Inside a grid they are not: a pseudo-element with content
 * is a grid item like any other, and `::before` is the FIRST one.
 *
 * So the empty box took cell 1, "Anmelden" was pushed into cell 2 and
 * "Registrieren" wrapped into a second row — the login card on the
 * right, the registration card below it on the left, exactly as it went
 * live. Nothing about the rules below was wrong; there were four items
 * in a grid built for two.
 *
 * `content: none` removes the pseudo-elements outright rather than
 * hiding them, because a `display: none` grid item still counts. And
 * losing the clearing costs nothing: every float inside these
 * containers is reset a few lines down.
 *
 * The list below is not a guess: it is every clearfix in WooCommerce's
 * own stylesheets that can land inside a container this sheet turns
 * into a grid or a flex row. `.col2-set` covers both the login columns
 * and the addresses; the address heading, every form row and the
 * pagination list carry one each. Two of them were doing visible damage
 * — the address heading pushed its "Bearbeiten" button into the middle
 * of the card, and each form row carried two invisible items' worth of
 * gap. A fourth sits on `div.woocommerce` itself and cost the signed-in
 * page an empty grid row plus its gaps: 112 px of nothing under the
 * heading.
 *
 * Add a grid or a flex row here, and check this list first.
 */
body.woocommerce-account .site-main .woocommerce::before,
body.woocommerce-account .site-main .woocommerce::after,
body.woocommerce-account .site-main #customer_login::before,
body.woocommerce-account .site-main #customer_login::after,
body.woocommerce-account .site-main .woocommerce-Addresses::before,
body.woocommerce-account .site-main .woocommerce-Addresses::after,
body.woocommerce-account .site-main .woocommerce-Address-title::before,
body.woocommerce-account .site-main .woocommerce-Address-title::after,
body.woocommerce-account .site-main form .form-row::before,
body.woocommerce-account .site-main form .form-row::after,
body.woocommerce-account .site-main .woocommerce-pagination ul.page-numbers::before,
body.woocommerce-account .site-main .woocommerce-pagination ul.page-numbers::after {
	content: none;
}

/*
 * WooCommerce writes both columns as floats with declared widths. A
 * grid ignores the floats but not the widths, so both are reset — this
 * is the same trap that once left the account columns at 48% of a cell
 * that was already half the row.
 *
 * One column on a phone, two as soon as there is room. The forms stack
 * in reading order: sign in first, register second.
 */
body.woocommerce-account .site-main #customer_login {
	display: grid;
	/* minmax(0, …), not 1fr: a track's automatic minimum is its
	   min-content, so one unbreakable line inside can push the column
	   wider than the page. */
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
}

body.woocommerce-account .site-main #customer_login > div {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
}

/* The card grows to the height of the taller column. Two cards of
   different height beside each other read as one finished and one
   unfinished; the same bottom edge says they are two ways into the same
   thing. */
body.woocommerce-account .site-main #customer_login > div > form {
	flex: 1 1 auto;
}

@media (min-width: 48em) {
	body.woocommerce-account .site-main #customer_login {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3rem;
	}
}

/* The two column headings. Serif and quiet: they label the cards below
   them, they do not compete with the page heading above. */
body.woocommerce-account .site-main #customer_login h2 {
	margin: 0 0 1rem;
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	line-height: 1.2;
	color: var(--fk-color-text);
}

/*
 * ONE form instead of two.
 *
 * WooCommerce only writes `#customer_login` and its two columns when
 * registration on the account page is switched on. With it off — the
 * WooCommerce default — the login form is a direct child of
 * `div.woocommerce`, and so is the heading above it. The same is true of
 * the lost-password and the set-a-new-password screens, whatever that
 * setting says.
 *
 * Without this rule such a form takes the whole 75rem column: a
 * two-field card as wide as the page, with a submit button to match.
 * A lone form is not a column any more, so it gets a reading width and
 * the middle of the page.
 */
body.woocommerce-account .site-main .woocommerce > h2,
body.woocommerce-account .site-main .woocommerce > .woocommerce-form-login,
body.woocommerce-account .site-main .woocommerce > .woocommerce-form-register,
body.woocommerce-account .site-main .woocommerce > .woocommerce-ResetPassword {
	max-width: 34rem;
	margin-inline: auto;
}

/* The heading belongs to the card under it, so it sits on the card's
   left edge rather than in the middle of the page. */
body.woocommerce-account .site-main .woocommerce > h2 {
	margin: 0 auto 1rem;
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	line-height: 1.2;
	color: var(--fk-color-text);
}

/* ---------- The card a form sits in ---------- */

/*
 * Greige on the white section, the way the cards on the contact page
 * are white on their greige band: one step of contrast, so the form
 * reads as a place to do something rather than as more page.
 *
 * No hover lift. A card that rises under the pointer promises a click,
 * and this one is a container for fields — the lesson from the front
 * page, where the hubs are a promise the design keeps.
 */
body.woocommerce-account .site-main .woocommerce-form-login,
body.woocommerce-account .site-main .woocommerce-form-register,
body.woocommerce-account .site-main .woocommerce-ResetPassword {
	max-width: none;
	margin: 0;
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
	border: 1px solid rgba(31, 31, 31, 0.12);
	border-radius: 0.75rem;
	background: var(--fk-color-greige);
}

/*
 * BOTH CARDS END ON THE SAME LINE.
 *
 * The two forms hold different things — the login has a checkbox, the
 * registration a privacy notice — so their buttons landed wherever the
 * content above them happened to end. Two dark buttons at two heights
 * read as a mistake, and they are the one thing both cards are for.
 *
 * The form becomes a column and the row that carries the button is
 * pushed to the bottom of it, so both buttons sit on their card's own
 * bottom edge — and the cards are already the same height, being
 * stretched grid items.
 *
 * `:has()` rather than counting from the end: the submit row has no
 * class of its own, and `:last-child` would pick the wrong element the
 * day a plugin appends something. A browser that cannot read the
 * selector drops the rule and the buttons sit where they used to.
 *
 * The lost-password link moves above the button rather than under it —
 * which is also where it reads better, right below the password field
 * it is about.
 */
body.woocommerce-account .site-main #customer_login form {
	display: flex;
	flex-direction: column;
}

body.woocommerce-account .site-main #customer_login form > p:has(button[type="submit"]) {
	order: 2;
	margin-top: auto;
	margin-bottom: 0;
}

body.woocommerce-account .site-main #customer_login .woocommerce-LostPassword {
	order: 1;
	margin: 0.25rem 0 1.5rem;
}

.account-form__intro {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--fk-color-body);
}

/* ---------- Rows, labels, fields ---------- */

body.woocommerce-account .site-main .woocommerce-form-row {
	margin: 0 0 1.25rem;
	padding: 0;
}

body.woocommerce-account .site-main .woocommerce-form-row label:not(.woocommerce-form__label-for-checkbox),
body.woocommerce-account .site-main .woocommerce-ResetPassword label:not(.woocommerce-form__label-for-checkbox) {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--fk-color-text);
}

/* The asterisk is a marker, not a warning. WooCommerce prints it in its
   own red; sage keeps it in the brand and still reads as "required"
   next to a label. */
body.woocommerce-account .site-main .required {
	color: var(--fk-color-sage-text);
	text-decoration: none;
	border: 0;
}

/*
 * The same shape as the contact form, and for the same reason the
 * `:not()` chain is repeated: global.css caps every field on the site
 * at 30rem with three attribute selectors, and a class alone loses that
 * race — the fields would sit at 30rem inside a card that is wider.
 */
body.woocommerce-account .site-main input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
body.woocommerce-account .site-main select,
body.woocommerce-account .site-main textarea {
	width: 100%;
	max-width: none;
	padding: 0.75rem 1rem;
	border: 1px solid #d7d2ca;
	border-radius: 0.5rem;
	background: var(--fk-color-bg);
	color: var(--fk-color-body);
	font-family: var(--fk-font-sans);
	font-size: 1rem;
	line-height: 1.4;
}

/* 4.8:1 on white. A placeholder is a hint, never the label. */
body.woocommerce-account .site-main ::placeholder {
	color: #77726b;
	opacity: 1;
}

/* Border colour plus a soft halo, on :focus rather than :focus-visible —
   a field being typed into should show it whether it was reached by tab
   or by tap. The global outline still applies on top for keyboard
   focus. */
body.woocommerce-account .site-main input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus,
body.woocommerce-account .site-main select:focus,
body.woocommerce-account .site-main textarea:focus {
	border-color: var(--fk-color-sage-dark);
	box-shadow: 0 0 0 3px rgba(111, 124, 104, 0.22);
	outline-offset: 2px;
}

/* Hints WooCommerce prints under a field ("Das Passwort wird an Ihre
   E-Mail-Adresse geschickt", the display-name explanation). */
body.woocommerce-account .site-main .woocommerce-form-row em,
body.woocommerce-account .site-main form span.description {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-style: normal;
	line-height: 1.6;
	color: var(--fk-color-sage-text);
}

/*
 * The bot trap on the registration form.
 *
 * Moved off canvas rather than hidden with `display: none`: a field that
 * is not rendered is one the simplest bots skip, and then it catches
 * nothing. It has to be there and invisible, not absent.
 */
body.woocommerce-account .site-main .account-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Show-password toggle ---------- */

/*
 * WooCommerce positions its eye button absolutely inside the field
 * wrapper. Two things follow: the field needs room on that side so the
 * text never runs under the icon, and the icon needs a real target —
 * 24 × 24 px is the floor, and the way to get there is to grow the hit
 * area, not the drawing.
 */
body.woocommerce-account .site-main .password-input {
	display: block;
	position: relative;
}

body.woocommerce-account .site-main .password-input input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
	padding-right: 3rem;
}

body.woocommerce-account .site-main .show-password-input {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	right: 0.5rem;
	width: 2.25rem;
	height: 2.25rem;
	transform: translateY(-50%);
	color: var(--fk-color-sage-text);
	cursor: pointer;
}

/* ---------- Checkbox rows ---------- */

/*
 * "Angemeldet bleiben", and whatever consent checkbox German Market or
 * the privacy settings add to the registration form. The label is the
 * target, so it carries the padding: the box stays 1.125rem, the thing
 * you can hit is the whole line.
 */
body.woocommerce-account .site-main label.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
	padding: 0.375rem 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	cursor: pointer;
}

body.woocommerce-account .site-main .woocommerce-form__input-checkbox {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.1875rem 0 0;
	accent-color: var(--fk-color-sage-dark);
}

/* ---------- The row that carries the submit button ---------- */

/*
 * WooCommerce puts "Angemeldet bleiben" and the submit button into one
 * paragraph. Side by side they are two different kinds of thing on one
 * line and the button ends up wherever the checkbox label happens to
 * end; stacked, each gets its own line and the button gets the width of
 * the card. Column, not column-reverse: the DOM order is already right.
 */
body.woocommerce-account .site-main form p.form-row:not(.woocommerce-form-row) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
	margin: 0 0 1rem;
	padding: 0;
}

/* ---------- Buttons ---------- */

/*
 * The shop's primary button: dark fill, sage on hover with the dark
 * label on it (7.7:1). Same shape as the add-to-cart button on the
 * product page, so the one action on this page looks like the one
 * action everywhere else.
 *
 * The selector names the element and the class because global.css
 * styles `button` and `input[type="submit"]` site-wide, and WooCommerce
 * styles `.button` — a bare class would lose to both.
 */
body.woocommerce-account .site-main button.button,
body.woocommerce-account .site-main button.woocommerce-button,
body.woocommerce-account .site-main input.button,
body.woocommerce-account .site-main a.button {
	display: inline-block;
	min-height: 3rem;
	padding: 0.875rem 1.75rem;
	border: 1px solid var(--fk-color-text);
	border-radius: 0.25rem;
	background: var(--fk-color-text);
	color: #fff;
	font-family: var(--fk-font-sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

body.woocommerce-account .site-main button.button:hover,
body.woocommerce-account .site-main button.button:focus-visible,
body.woocommerce-account .site-main button.woocommerce-button:hover,
body.woocommerce-account .site-main button.woocommerce-button:focus-visible,
body.woocommerce-account .site-main input.button:hover,
body.woocommerce-account .site-main input.button:focus-visible,
body.woocommerce-account .site-main a.button:hover,
body.woocommerce-account .site-main a.button:focus-visible {
	background: var(--fk-color-sage);
	border-color: var(--fk-color-sage);
	color: var(--fk-color-text);
	box-shadow: 0 10px 24px rgba(31, 31, 31, 0.18);
}

/* The two form buttons take the width of their card: they are the
   card's own action and there is nothing to put beside them. */
body.woocommerce-account .site-main .woocommerce-form-login__submit,
body.woocommerce-account .site-main .woocommerce-form-register__submit,
body.woocommerce-account .site-main .woocommerce-ResetPassword button.button {
	width: 100%;
}

/* Everything a row of orders or addresses offers is secondary to the
   page it sits on: outlined, filling on hover — the same pair the
   product grid uses. */
body.woocommerce-account .site-main .woocommerce-orders-table a.button,
body.woocommerce-account .site-main .woocommerce-Addresses a.button,
body.woocommerce-account .site-main .woocommerce-MyAccount-content table a.button {
	min-height: 0;
	padding: 0.5rem 1.125rem;
	background: transparent;
	border-color: rgba(31, 31, 31, 0.35);
	color: var(--fk-color-text);
	font-size: 0.9375rem;
}

body.woocommerce-account .site-main .woocommerce-orders-table a.button:hover,
body.woocommerce-account .site-main .woocommerce-orders-table a.button:focus-visible,
body.woocommerce-account .site-main .woocommerce-Addresses a.button:hover,
body.woocommerce-account .site-main .woocommerce-Addresses a.button:focus-visible,
body.woocommerce-account .site-main .woocommerce-MyAccount-content table a.button:hover,
body.woocommerce-account .site-main .woocommerce-MyAccount-content table a.button:focus-visible {
	background: var(--fk-color-text);
	border-color: var(--fk-color-text);
	color: #fff;
	box-shadow: none;
}

/* ---------- The links under a form ---------- */

body.woocommerce-account .site-main .woocommerce-LostPassword {
	margin: 1.25rem 0 0;
	font-size: 0.9375rem;
}

body.woocommerce-account .site-main .woocommerce-LostPassword a,
body.woocommerce-account .site-main .woocommerce-privacy-policy-text a {
	color: var(--fk-color-sage-text);
	text-underline-offset: 0.2em;
}

/* The privacy sentence WooCommerce prints under the registration form
   (WooCommerce → Einstellungen → Konten & Datenschutz). Small, but it
   is a legal notice: 4.5:1 is the floor and this is on the tinted card,
   so it keeps the body colour rather than a lighter grey. */
body.woocommerce-account .site-main .woocommerce-privacy-policy-text {
	margin: 1.25rem 0 1.5rem;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--fk-color-body);
}

body.woocommerce-account .site-main .woocommerce-privacy-policy-text p:last-child {
	margin-bottom: 0;
}

/* ==================================================================
 * THE ACCOUNT ITSELF  (logged in)
 * ================================================================== */

/*
 * Navigation left, content right, from the width where a 15rem column
 * still leaves a readable line beside it. Below that the navigation
 * stays on top, where it is a list of places to go rather than a
 * sidebar squeezed to nothing.
 */
body.woocommerce-account .site-main .woocommerce-MyAccount-navigation,
body.woocommerce-account .site-main .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
}

body.woocommerce-account .site-main .woocommerce-MyAccount-navigation {
	margin-bottom: 2.5rem;
	padding: 0.5rem 1.25rem;
	border: 1px solid rgba(31, 31, 31, 0.12);
	border-radius: 0.75rem;
	background: var(--fk-color-greige);
}

/*
 * The two-column grid is tied to `body.logged-in`, and that is not
 * belt and braces: logged out, the very same `div.woocommerce` holds
 * `#customer_login`, and a grid declared on it would drop the login
 * card into a 16rem sidebar. WordPress prints the class on every
 * signed-in request, and signed in is exactly when this page shows the
 * account rather than the two forms.
 */
@media (min-width: 48em) {
	body.woocommerce-account.logged-in .account-content .woocommerce {
		display: grid;
		grid-template-columns: 16rem minmax(0, 1fr);
		gap: 3.5rem;
		align-items: start;
	}

	/* A notice belongs above both columns, not inside one of them. */
	body.woocommerce-account.logged-in .account-content .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	/* Beside the content it may follow the reader down the page; above
	   it, on a phone, sticky would mean a menu that never leaves. */
	body.woocommerce-account .site-main .woocommerce-MyAccount-navigation {
		margin-bottom: 0;
		padding-block: 1rem;
		position: sticky;
		top: 1.5rem;
	}
}

body.woocommerce-account .site-main .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-account .site-main .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid rgba(31, 31, 31, 0.12);
}

body.woocommerce-account .site-main .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

/* 0.875rem of padding either side of a 1.25 line box clears the 24 px
   floor for a touch target with room to spare. */
body.woocommerce-account .site-main .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.875rem 0;
	color: var(--fk-color-body);
	font-size: 0.9375rem;
	line-height: 1.25;
	text-decoration: none;
	transition: color 0.2s ease;
}

body.woocommerce-account .site-main .woocommerce-MyAccount-navigation a:hover,
body.woocommerce-account .site-main .woocommerce-MyAccount-navigation a:focus-visible {
	color: var(--fk-color-sage-text);
}

/* The page you are on, marked by weight and colour rather than by a
   background: the item is a link, not a button, and this is the one
   list on the page where "where am I" has to be readable at a glance. */
body.woocommerce-account .site-main .woocommerce-MyAccount-navigation li.is-active > a {
	color: var(--fk-color-text);
	font-weight: 700;
}

/* ---------- Content column ---------- */

body.woocommerce-account .site-main .woocommerce-MyAccount-content p {
	line-height: 1.7;
}

body.woocommerce-account .site-main .woocommerce-MyAccount-content > h2,
body.woocommerce-account .site-main .woocommerce-MyAccount-content > h3,
body.woocommerce-account .site-main .woocommerce-MyAccount-content legend {
	margin: 2.5rem 0 1rem;
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	line-height: 1.25;
	color: var(--fk-color-text);
}

body.woocommerce-account .site-main .woocommerce-MyAccount-content > h2:first-child,
body.woocommerce-account .site-main .woocommerce-MyAccount-content > h3:first-child {
	margin-top: 0;
}

body.woocommerce-account .site-main .woocommerce-MyAccount-content a:not(.button) {
	color: var(--fk-color-sage-text);
	text-underline-offset: 0.2em;
}

/* ---------- Tables: orders, downloads, payment methods ---------- */

body.woocommerce-account .site-main .shop_table {
	width: 100%;
	margin: 0 0 2rem;
	border: 1px solid rgba(31, 31, 31, 0.12);
	border-radius: 0.75rem;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 0.9375rem;
}

body.woocommerce-account .site-main .shop_table th,
body.woocommerce-account .site-main .shop_table td {
	padding: 0.875rem 1rem;
	border: 0;
	border-bottom: 1px solid rgba(31, 31, 31, 0.12);
	text-align: left;
	vertical-align: middle;
}

body.woocommerce-account .site-main .shop_table thead th {
	background: var(--fk-color-greige);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fk-color-sage-text);
}

body.woocommerce-account .site-main .shop_table tbody tr:last-child td {
	border-bottom: 0;
}

/*
 * Stacked rows below the breakpoint. WooCommerce's own smallscreen
 * sheet does this too, but only while it is loaded — and a table that
 * survives on its own is one dependency fewer between a customer and
 * their order number. The label comes from the `data-title` attribute
 * WooCommerce writes on every cell.
 */
@media (max-width: 47.99em) {
	body.woocommerce-account .site-main .shop_table thead {
		display: none;
	}

	body.woocommerce-account .site-main .shop_table,
	body.woocommerce-account .site-main .shop_table tbody,
	body.woocommerce-account .site-main .shop_table tr,
	body.woocommerce-account .site-main .shop_table td {
		display: block;
		width: auto;
	}

	body.woocommerce-account .site-main .shop_table tr {
		padding: 0.5rem 0;
		border-bottom: 1px solid rgba(31, 31, 31, 0.12);
	}

	body.woocommerce-account .site-main .shop_table tr:last-child {
		border-bottom: 0;
	}

	body.woocommerce-account .site-main .shop_table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		border-bottom: 0;
		padding-block: 0.5rem;
		text-align: right;
	}

	body.woocommerce-account .site-main .shop_table td::before {
		content: attr(data-title);
		flex: 0 0 auto;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--fk-color-sage-text);
		text-align: left;
	}
}

/* ---------- Addresses ---------- */

body.woocommerce-account .site-main .woocommerce-Addresses {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	margin: 1.5rem 0 0;
}

@media (min-width: 42em) {
	body.woocommerce-account .site-main .woocommerce-Addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

body.woocommerce-account .site-main .woocommerce-Address {
	float: none;
	width: auto;
	padding: 1.5rem;
	border: 1px solid rgba(31, 31, 31, 0.12);
	border-radius: 0.75rem;
	background: var(--fk-color-greige);
}

body.woocommerce-account .site-main .woocommerce-Address-title h2,
body.woocommerce-account .site-main .woocommerce-Address-title h3 {
	margin: 0 0 0.75rem;
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: 1.25rem;
	color: var(--fk-color-text);
}

body.woocommerce-account .site-main .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	line-height: 1.7;
}

body.woocommerce-account .site-main .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 1rem;
}

/* ---------- Edit account and edit address forms ---------- */

body.woocommerce-account .site-main .woocommerce-EditAccountForm fieldset,
body.woocommerce-account .site-main .woocommerce-address-fields fieldset {
	margin: 2rem 0 0;
	padding: 0;
	border: 0;
	border-top: 1px solid rgba(31, 31, 31, 0.12);
	padding-top: 1.5rem;
}

/* Two fields share a line as soon as there is room for two. Below that
   they stack: a 160px-wide box for a surname is a worse answer than a
   second line. WooCommerce's own halves are percentage floats, which is
   what pushed them into each other inside a narrower column. */
body.woocommerce-account .site-main form .form-row-first,
body.woocommerce-account .site-main form .form-row-last {
	float: none;
	width: auto;
}

@media (min-width: 36em) {
	body.woocommerce-account .site-main .woocommerce-EditAccountForm,
	body.woocommerce-account .site-main .woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 1.5rem;
	}

	body.woocommerce-account .site-main .woocommerce-EditAccountForm > *,
	body.woocommerce-account .site-main .woocommerce-address-fields__field-wrapper > * {
		grid-column: 1 / -1;
	}

	body.woocommerce-account .site-main form .form-row-first {
		grid-column: 1;
	}

	body.woocommerce-account .site-main form .form-row-last {
		grid-column: 2;
	}
}

/* A button inside the account keeps its own width rather than being
   stretched across the column: unlike the two login cards, it is one
   action among several on the page. */
body.woocommerce-account .site-main .woocommerce-MyAccount-content form button.button {
	width: auto;
	min-width: 12rem;
}

/* ---------- Pagination between pages of orders ---------- */

body.woocommerce-account .site-main .woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

body.woocommerce-account .site-main .woocommerce-pagination li {
	border: 0;
}

body.woocommerce-account .site-main .woocommerce-pagination a,
body.woocommerce-account .site-main .woocommerce-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0 0.5rem;
	border: 1px solid rgba(31, 31, 31, 0.18);
	border-radius: 0.25rem;
	background: var(--fk-color-bg);
	color: var(--fk-color-text);
	text-decoration: none;
}

body.woocommerce-account .site-main .woocommerce-pagination .current {
	background: var(--fk-color-text);
	border-color: var(--fk-color-text);
	color: #fff;
}