/**
 * Nullifier Accounts
 *
 * Written entirely against the theme's own custom properties. Every var() has a
 * literal fallback so these pages still look deliberate if the plugin is ever
 * run under a different theme, but under the Nullifier theme nothing here
 * invents a colour, a face or a gutter — change the brand once and the account
 * area follows.
 */

.nf-account {
	--nfa-black:  var(--nf-black, #0A0A0A);
	--nfa-white:  var(--nf-white, #FFFFFF);
	--nfa-line:   var(--nf-line, #262626);
	--nfa-muted:  var(--nf-muted, #A1A1A1);
	--nfa-blue:   var(--nf-blue, #0000FE);
	--nfa-read:   #6B8AFF;
	--nfa-surface: var(--nf-surface, #141414);
	--nfa-gutter: var(--nf-gutter, clamp(1.25rem, 4vw, 3rem));
	--nfa-face:   "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ==========================================================================
   THE TOP OF THE PAGE
   ==========================================================================
 *
 * Measured on /my-account/ at 1440x900: the sign-in panel started 409px down a
 * 900px screen. Walking the ancestor chain, that was five separate things, none
 * of them ours:
 *
 *    36px  <main> margin-top            inline style
 *    96px  page wrapper padding-top     inline style
 *    84px  the "My account" post title  block
 *    24px  .entry-content margin-top
 *    56px  .entry-content padding-top
 *    45px  .woocommerce padding-top
 *
 * Two of those are inline styles written onto the block wrapper by the theme —
 * style="padding-top:var(--wp--preset--spacing--60)" — and an inline style beats
 * any selector in a stylesheet however specific it is. There is no cleaner hook
 * because the padding is generated markup rather than CSS, which is the one case
 * !important actually exists for. Same fix the collections page needed.
 *
 * The post title goes entirely. Every account screen prints its own heading that
 * names the section you are in — Overview, Orders, Saved Pieces — where the block
 * title says "My account" on all of them. Two headings, one of them wrong.
 */

body.nf-account .wp-block-post-title {
	display: none;
}

body.nf-account main > .wp-block-group {
	padding-top: clamp( 0.5rem, 2vh, 1.5rem ) !important;
}

body.nf-account .entry-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body.nf-account .woocommerce {
	padding-top: 0 !important;
}

/*
 * The account area runs to the page's own width, not to the 1000px the block
 * layout was capping it at — the navigation column plus a content column needs
 * the room, and every other full-width section on this site already takes it.
 */
body.nf-account .woocommerce {
	max-width: 1400px !important;
}

/*
 * One gutter, not three.
 *
 * Measured at 390px: <main> contributed 20px a side, .entry-content another 20,
 * and this stylesheet a third 20 — so a phone gave the sign-in panel 270px of a
 * 390px screen and the inputs came out 220px wide. Each of those gutters is
 * correct on its own and nobody wrote them to compound.
 *
 * The two outer ones are switched off here and .woocommerce keeps the single
 * gutter, so the account pages sit at exactly the same distance from the edge of
 * the screen as every other section on the site. The selectors are deliberately
 * one step more specific than the theme's rather than relying on !important or
 * on this file happening to load second.
 */
body.nf-account .wp-site-blocks > main.wp-block-group,
body.nf-account .entry-content.wp-block-post-content {
	padding-inline: 0;
}

/* ==========================================================================
   SHELL — the two-column account layout
   ========================================================================== */

/*
 * A GRID ON THE CONTAINER, AND A SPECIFICITY FIGHT WON PROPERLY.
 *
 * The float below worked when it was written and then stopped, which is the
 * interesting part. WooCommerce ships its own My Account rules at exactly the
 * same specificity as ".nf-account .woocommerce-MyAccount-navigation" — two
 * classes each — and when two rules tie, the later stylesheet wins. Nothing
 * here was wrong; it was simply outranked by load order, which is not a
 * argument you can win by being more correct.
 *
 * So the layout is stated once, on the container, with a selector carrying a
 * tag and three classes. That beats anything WooCommerce ships without
 * reaching for !important, which would only move the same fight one level up.
 *
 * :has() scopes it to the case that has a navigation at all. The signed-out
 * sign-in page renders a single panel inside the same .woocommerce wrapper,
 * and a two-column grid would have wedged it into a 240px column.
 */
body.nf-account .woocommerce:has( > .woocommerce-MyAccount-navigation ) {
	display: grid;
	grid-template-columns: 240px minmax( 0, 1fr );
	column-gap: clamp( 2.5rem, 4vw, 4rem );
	align-items: start;
}

/*
 * PLACED EXPLICITLY, NOT LEFT TO CHILD ORDER.
 *
 * Auto-placement fills cells in document order, so the layout only worked
 * while .woocommerce contained exactly two children. It does not: WooCommerce
 * and its hooks can print an empty wrapper before the navigation, and an
 * invisible element with no height still consumes a cell. That one empty box
 * took the first column, pushed the navigation into the second, and dropped
 * the content onto the next row — into a 240px column, where "OVERVIEW" was
 * sliced off by the overflow:hidden that exists for the float fallback.
 *
 * Naming the row and column for the two elements that matter makes the layout
 * indifferent to what else turns up between them, how many there are, and what
 * order they arrive in.
 */
body.nf-account .woocommerce > .woocommerce-MyAccount-navigation {
	grid-column: 1;
	grid-row: 2;
}

body.nf-account .woocommerce > .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 2;
}

/*
 * Anything else — a notices wrapper, whatever a hook prints — spans the full
 * width above them rather than competing for a column.
 */
body.nf-account .woocommerce:has( > .woocommerce-MyAccount-navigation ) > :not( .woocommerce-MyAccount-navigation ):not( .woocommerce-MyAccount-content ) {
	grid-column: 1 / -1;
	grid-row: 1;
}

/*
 * The float stays as the fallback for a browser without :has(). Harmless where
 * the grid applies — a grid item ignores float — and the whole layout where it
 * does not.
 */
body.nf-account .woocommerce > .woocommerce-MyAccount-navigation {
	float: left;
	width: 240px;
	margin-right: clamp( 2.5rem, 4vw, 4rem );
}

body.nf-account .woocommerce > .woocommerce-MyAccount-content {
	overflow: hidden;
	min-width: 0;
}

/*
 * The toggle exists only on a narrow screen, and only once the script has
 * said it works. Everywhere else the list is simply a list.
 */
.nf-account .nf-acct__nav-toggle {
	display: none;
}

/*
 * Visibility is the hidden attribute and nothing else.
 *
 * The list is display:flex further down, and `display` beats `[hidden]` — so
 * without this rule, hiding it would do nothing at all. This is the entire
 * mechanism, stated once, where it can be read.
 */
.nf-account .woocommerce-MyAccount-navigation ul[hidden] {
	display: none;
}

/*
 * Contain the float so the footer cannot ride up beside the navigation.
 *
 * Switched off wherever the grid applies: a ::after on a grid container is not
 * a clearfix, it is a third grid item, and it would open an empty cell under
 * the two real ones.
 */
.nf-account .woocommerce::after {
	content: "";
	display: table;
	clear: both;
}

body.nf-account .woocommerce:has( > .woocommerce-MyAccount-navigation )::after {
	content: none;
}

/*
 * The page's own frame. Applied to whichever of these wrappers turns out to be
 * there — listing several is cheap, and a selector that matches nothing costs
 * nothing, where a layout that assumed the wrong one cost us an afternoon.
 */
.nf-account .woocommerce,
.nf-account .woocommerce-account-content {
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: var(--nfa-gutter);
	padding-block: clamp(2rem, 5vh, 3.5rem) clamp(4rem, 9vw, 7rem);
	box-sizing: border-box;
}

/* The sign-in page is a single centred column — no navigation to sit beside. */
.nf-account--signin .woocommerce {
	display: block;
}

/*
 * The sign-in page ends sooner than every other account page.
 *
 * The shared bottom padding is 112px, which is right underneath a long orders
 * table and far too much underneath a 30rem panel — it left a dead band between
 * the box and the footer that made the two look unrelated.
 */
.nf-account--signin .woocommerce {
	padding-bottom: clamp( 2rem, 4vw, 3rem );
}

/* --- Navigation ---------------------------------------------------------- */

.nf-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--nfa-line);
}

/*
 * Zero margins, forcefully.
 *
 * Measured from the screenshot: items were sitting about 108px apart where the
 * padding accounts for roughly 45. The rest was margin the block theme puts on
 * every list item — and a flex column does not collapse margins the way normal
 * block flow does, so they stacked up instead of overlapping. !important
 * because the theme sets them through generated block styles.
 */
.nf-account .woocommerce-MyAccount-navigation li {
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--nfa-line);
}

.nf-account .woocommerce-MyAccount-navigation li::marker,
.nf-account .woocommerce-MyAccount-navigation li::before {
	content: none;
}

.nf-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.9375rem 0;
	font-family: var(--nfa-face);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nfa-muted);
	text-decoration: none;
	transition: color 0.2s var(--nf-ease, ease);
}

.nf-account .woocommerce-MyAccount-navigation a:hover,
.nf-account .woocommerce-MyAccount-navigation .is-active > a {
	color: var(--nfa-white);
}

/*
 * The active marker is a blue rule in the gutter rather than a background fill.
 * Same language as the header's underline, and it does not turn the navigation
 * into a stack of buttons.
 */
.nf-account .woocommerce-MyAccount-navigation .is-active {
	position: relative;
}

.nf-account .woocommerce-MyAccount-navigation .is-active::before {
	content: "";
	position: absolute;
	left: -0.875rem;
	top: 50%;
	width: 3px;
	height: 1.125rem;
	background-color: var(--nfa-blue);
	transform: translateY(-50%);
}

/* Log Out sits apart — it is not a section of the account. */
.nf-account .nf-acct__nav-item--customer-logout {
	margin-top: 1.25rem;
	border-top: 1px solid var(--nfa-line);
}

.nf-account .nf-acct__nav-item--customer-logout a {
	color: #6E6E6E;
}

/* --- Panel --------------------------------------------------------------- */

.nf-acct__panel {
	min-width: 0;
}

.nf-acct__title {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	font-family: var(--nfa-face);
	font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
	font-weight: 800 !important;
	line-height: 0.95 !important;
	letter-spacing: -0.035em !important;
	text-transform: uppercase;
	color: var(--nfa-white);
}

.nf-acct__intro {
	margin: 0 0 1.75rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--nfa-muted);
	max-width: 56ch;
}

/* ==========================================================================
   SIGN IN
   ========================================================================== */

.nf-signin {
	max-width: 30rem;
	margin-inline: auto;
	padding-block: clamp(1rem, 4vh, 2.5rem) 0;
}

.nf-signin__head {
	margin-bottom: 2rem;
}

.nf-signin__title {
	margin: 0 0 0.875rem;
	font-family: var(--nfa-face);
	font-size: clamp(2.25rem, 7vw, 3.25rem) !important;
	font-weight: 800 !important;
	line-height: 0.92 !important;
	letter-spacing: -0.04em !important;
	text-transform: uppercase;
	color: var(--nfa-white);
}

.nf-signin__lede {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--nfa-muted);
}

.nf-signin__panel {
	border: 1px solid var(--nfa-line);
	background-color: var(--nfa-surface);
}

.nf-signin__panel {
	padding: clamp(1.5rem, 4vw, 2rem);
}

/* --- Steps --------------------------------------------------------------- */

.nf-step__ask {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--nfa-muted);
}

/*
 * The address the customer already gave, shown back to them.
 *
 * Not an input. Re-rendering it as a disabled field would invite people to
 * click into something that cannot be typed in; this states the fact and puts
 * the way to change it right beside it.
 */
.nf-known {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.375rem 0.75rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--nfa-line);
	background-color: var(--nfa-black);
}

.nf-known__label {
	flex: 0 0 100%;
	font-family: var(--nfa-face);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #6E6E6E;
}

.nf-known__value {
	font-family: var(--nfa-face);
	font-size: 0.9375rem;
	color: var(--nfa-white);
	word-break: break-all;
	min-width: 0;
}

.nf-known__edit { margin-left: auto; flex: 0 0 auto; }

.nf-signin__error {
	margin: 0 0 1.25rem;
	padding: 0.875rem 1.125rem;
	border: 1px solid var(--nfa-line);
	border-left: 2px solid #F2766B;
	background-color: var(--nfa-surface);
	font-family: var(--nfa-face);
	font-size: 0.875rem;
	color: var(--nfa-white);
}

.nf-fine {
	margin: 0;
	font-family: var(--nfa-face);
	font-size: 0.75rem;
	line-height: 1.6;
	color: #7A7A7A;
}

.nf-signin__guest {
	margin: 1.75rem 0 0;
	text-align: center;
	font-size: 0.875rem;
	color: var(--nfa-muted);
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.nf-form {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	margin: 0;
}

.nf-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
}

.nf-field label,
.nf-account .woocommerce-form-row label {
	font-family: var(--nfa-face);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nfa-muted);
}

/*
 * Inputs.
 *
 * A hairline box on the page's own black, not a filled field. The only state
 * change is the border going white on focus, which is the same restraint the
 * rest of the site uses — no glow, no fill, no shadow.
 */
.nf-input,
.nf-account input[type="text"],
.nf-account input[type="email"],
.nf-account input[type="password"],
.nf-account input[type="tel"],
.nf-account input[type="url"],
.nf-account input[type="number"],
.nf-account select,
.nf-account textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.8125rem 0.9375rem;
	font-family: var(--nfa-face);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--nfa-white);
	background-color: var(--nfa-black);
	border: 1px solid var(--nfa-line);
	border-radius: 0;
	transition: border-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.nf-account select {
	/* Room for the native arrow, which we are not replacing. */
	padding-right: 2.25rem;
}

.nf-input:focus,
.nf-account input:focus,
.nf-account select:focus,
.nf-account textarea:focus {
	outline: none;
	border-color: var(--nfa-white);
}

.nf-input:focus-visible,
.nf-account input:focus-visible,
.nf-account select:focus-visible,
.nf-account textarea:focus-visible {
	outline: 2px solid var(--nfa-read);
	outline-offset: 2px;
}

.nf-account input::placeholder,
.nf-account textarea::placeholder { color: #5A5A5A; }

.nf-form__row { margin: 0; }

.nf-form__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin: 0;
}

.nf-check {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--nfa-face);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--nfa-muted);
	cursor: pointer;
}

.nf-check input {
	width: 1rem;
	height: 1rem;
	accent-color: var(--nfa-blue);
	margin: 0;
	flex: 0 0 auto;
}

/*
 * A checkbox whose label is a sentence rather than two words needs the box to
 * stay beside the first line instead of centring itself against the block.
 */
.nf-check--block {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	line-height: 1.5;
	color: var(--nfa-muted);
	font-size: 0.875rem;
}

.nf-check--block input { margin-top: 0.1875rem; }

.nf-note {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--nfa-muted);
}

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

/*
 * White fill, black text, inverting to a blue outline on hover — the same
 * button the rest of the site uses, restated here rather than inherited,
 * because WooCommerce's own .button rules are specific enough to win otherwise.
 */
.nf-btn,
.nf-account .woocommerce-Button,
.nf-account button.button,
.nf-account a.button,
.nf-account input.button {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.9375rem 1.5rem;
	font-family: var(--nfa-face);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--nfa-white);
	background-color: var(--nfa-blue);
	border: 1px solid var(--nfa-blue);
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/*
 * BLUE FILL, WHITE TYPE — THE SAME BUTTON AS ADD TO BAG.
 *
 * The comment above this block claimed these matched the rest of the site.
 * They did not: the site's primary button is a blue fill that turns white on
 * hover, and these were a white fill that turned transparent — so the account
 * area had a button that looked like nothing else in the shop, and hovering it
 * appeared to take the button away rather than respond to you.
 *
 * Restating a style in a second file is how that happens. It only stays true
 * for as long as nobody changes the original, and nobody remembers the copy.
 */
.nf-btn:hover,
.nf-account .woocommerce-Button:hover,
.nf-account button.button:hover,
.nf-account a.button:hover,
.nf-account input.button:hover {
	background-color: var(--nfa-white);
	color: var(--nfa-black);
	border-color: var(--nfa-white);
}

.nf-btn:focus-visible,
.nf-account .button:focus-visible {
	outline: 2px solid var(--nfa-read);
	outline-offset: 2px;
}

/* --- The primary action -------------------------------------------------- *
 *
 * Saving is the one thing these screens exist to do, and it was the quietest
 * thing on them — a bordered box on black, the same weight as everything
 * around it, so the eye had no reason to land on it.
 *
 * The colour now comes from the shared button rule above, which is the same
 * blue as Add to bag — so this only has to say the thing that is different
 * about it: sized to its words rather than stretched across the form, because
 * a full-width bar reads as a banner and a button reads as a button.
 */
.nf-account button[name="save_account_details"],
.nf-account button[name="save_address"],
.nf-account button[name="save_address"].button {
	width: auto;
	min-width: 13rem;
}

.nf-btn--small {
	width: auto;
	padding: 0.625rem 1.125rem;
	font-size: 0.6875rem;
}

.nf-link {
	font-family: var(--nfa-face);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	color: var(--nfa-read);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.nf-link:hover { border-bottom-color: var(--nfa-read); }

/* ==========================================================================
   DASHBOARD
   ========================================================================== */

.nf-dash {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 4vw, 3rem);
}

.nf-dash__hello {
	margin: 0;
	font-family: var(--nfa-face);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nfa-muted);
}

.nf-dash__hello strong { color: var(--nfa-white); font-weight: 600; }

/* --- Stats --------------------------------------------------------------- */

.nf-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1px;
	background-color: var(--nfa-line);
	border: 1px solid var(--nfa-line);
}

.nf-stat {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 1.375rem 1.25rem;
	background-color: var(--nfa-surface);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.nf-stat:hover { background-color: #1A1A1A; }

.nf-stat:focus-visible {
	outline: 2px solid var(--nfa-read);
	outline-offset: -2px;
}

.nf-stat__num {
	font-family: var(--nfa-face);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--nfa-white);
	font-variant-numeric: tabular-nums;
}

.nf-stat__num--word {
	font-size: 1.0625rem;
	letter-spacing: 0.02em;
	padding-block: 0.4375rem;
}

.nf-stat__label {
	font-family: var(--nfa-face);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nfa-muted);
}

/* --- Sections ------------------------------------------------------------ */

.nf-dash__section {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.nf-dash__h {
	margin: 0;
	font-family: var(--nfa-face);
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--nfa-muted);
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--nfa-line);
}

.nf-dash__more { margin: 0; }

.nf-empty {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--nfa-muted);
}

.nf-empty__sub {
	margin: 0.5rem 0 1.25rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: #7A7A7A;
	max-width: 46ch;
}

.nf-empty-state {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* --- Order rows ---------------------------------------------------------- */

.nf-orders {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.nf-order { margin: 0; border-bottom: 1px solid var(--nfa-line); }

/* --- Picking off unfinished checkouts ------------------------------------
 *
 * The tick box sits OUTSIDE the row's link, as its own column. Putting a
 * checkbox inside an anchor means every attempt to tick it navigates away
 * instead, which is the sort of thing that reads as a broken page.
 *
 * The column only exists while there is something to tick — a customer with a
 * normal order history sees the list exactly as it was.
 */
.nf-orders__form--picking .nf-order {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.nf-orders__form--picking .nf-order__link {
	flex: 1 1 auto;
	min-width: 0;
}

.nf-order__pick {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--nfa-blue, #0000FE);
	cursor: pointer;
}

/* An empty box of the same size, so placed orders line up with the rest. */
.nf-order__pick--fixed { cursor: default; }

.nf-orders__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	margin: 1.25rem 0 0;
}

.nf-orders__delete {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--nfa-face);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nfa-muted);
	text-decoration: underline;
	text-underline-offset: 0.28em;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease;
}

.nf-orders__delete:hover,
.nf-orders__delete:focus-visible { color: #F2766B; }

.nf-orders__delete:focus-visible {
	outline: 2px solid var(--nfa-read);
	outline-offset: 4px;
}

.nf-orders__hint {
	font-family: var(--nfa-face);
	font-size: 0.75rem;
	color: var(--nfa-muted);
}

.nf-order__link {
	display: grid;
	grid-template-columns: auto 1fr auto auto auto;
	align-items: baseline;
	gap: 0.5rem 1.25rem;
	padding: 1rem 0;
	font-family: var(--nfa-face);
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--nfa-muted);
	transition: color 0.2s ease;
}

.nf-order__link:hover { color: var(--nfa-white); }

.nf-order__link:focus-visible {
	outline: 2px solid var(--nfa-read);
	outline-offset: 2px;
}

.nf-order__no {
	font-weight: 600;
	color: var(--nfa-white);
	font-variant-numeric: tabular-nums;
}

.nf-order__total {
	font-variant-numeric: tabular-nums;
	color: var(--nfa-white);
	white-space: nowrap;
}

.nf-order__status {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.1875rem 0.5rem;
	border: 1px solid currentColor;
	white-space: nowrap;
}

/*
 * Status colour carries meaning, so it is not the brand blue.
 * Completed reads as done, processing as in-flight, the rest as neutral.
 */
.nf-order__status--completed { color: #5CD68A; }
.nf-order__status--processing { color: #E8B34A; }
.nf-order__status--cancelled,
.nf-order__status--failed,
.nf-order__status--refunded { color: #F2766B; }

/*
 * An unfinished checkout is the one row that is asking to be clicked, so it is
 * the one badge that looks like a button rather than a label. Every other status
 * reports something; this one offers something.
 */
.nf-order__status--checkout-draft {
	color: var(--nfa-white, #FFFFFF);
	background-color: var(--nfa-blue, #0000FE);
	border-color: var(--nfa-blue, #0000FE);
}

.nf-order__link:hover .nf-order__status--checkout-draft,
.nf-order__link:focus-visible .nf-order__status--checkout-draft {
	background-color: var(--nfa-white, #FFFFFF);
	border-color: var(--nfa-white, #FFFFFF);
	color: #0A0A0A;
}

/* ==========================================================================
   SAVED PIECES
   ========================================================================== */

.nf-saved {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--nfa-line);
}

.nf-saved__row {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.25rem;
	padding: 1.25rem 0;
	margin: 0;
	border-bottom: 1px solid var(--nfa-line);
}

.nf-saved__row.is-out { opacity: 0.55; }

.nf-saved__thumb { display: block; }

.nf-saved__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	max-width: 100%;
}

.nf-saved__body { min-width: 0; }

.nf-saved__name {
	margin: 0 0 0.375rem;
	font-family: var(--nfa-face);
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.005em;
}

.nf-saved__name a {
	color: var(--nfa-white);
	text-decoration: none;
}

.nf-saved__name a:hover { color: var(--nfa-read); }

.nf-saved__price {
	margin: 0;
	font-family: var(--nfa-face);
	font-size: 0.875rem;
	color: var(--nfa-muted);
	font-variant-numeric: tabular-nums;
}

.nf-saved__price del { opacity: 0.6; }
.nf-saved__price ins { text-decoration: none; color: var(--nfa-white); }

.nf-saved__stock {
	margin: 0.375rem 0 0;
	font-family: var(--nfa-face);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #F2766B;
}

.nf-saved__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.5rem;
}

/* ==========================================================================
   THE SAVE CONTROL
   ========================================================================== */

.nf-save { margin: 0; }

/*
 * A word with a rule under it — in the grid and on the saved list.
 *
 * On the product page it is a heart instead, beside Add to bag. See
 * .nf-save__btn--icon below.
 */
.nf-save__btn {
	appearance: none;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font-family: var(--nfa-face);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nfa-muted);
	cursor: pointer;
	position: relative;
	transition: color 0.2s ease;
}

.nf-save__btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background-color: var(--nfa-blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.28s var(--nf-ease, cubic-bezier(0.2, 0.7, 0.3, 1));
}

.nf-save__btn:hover { color: var(--nfa-white); }
.nf-save__btn:hover::after { transform: scaleX(1); }

.nf-save__btn.is-saved { color: var(--nfa-white); }
.nf-save__btn.is-saved::after { transform: scaleX(1); }

.nf-save__btn:focus-visible {
	outline: 2px solid var(--nfa-read);
	outline-offset: 4px;
}

.nf-save__btn[aria-busy="true"] { opacity: 0.5; pointer-events: none; }

/* ---------------------------------------------------------------------------
 * THE HEART, BESIDE ADD TO BAG
 *
 * The form is printed before the cart form and is empty of anything visible, so
 * it takes no space and no layout. Only the button shows, and it lives inside
 * the cart form next to the button it belongs beside.
 * ------------------------------------------------------------------------ */

.nf-save--single { display: contents; }

.nf-save__btn--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.875rem;
	height: 2.875rem;
	margin-left: 0.25rem;
	vertical-align: middle;
	border: 0;
	color: var(--nfa-muted, #9A9A9A);
	transition: color 0.2s ease;
}

/* The underline belongs to the worded version, not to this one. */
.nf-save__btn--icon::after { content: none; }

.nf-save__icon {
	width: 1.125rem;
	height: 1.125rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linejoin: round;
	transition: fill 0.2s ease;
}

/*
 * RED ON HOVER, IN BOTH STATES.
 *
 * The one convention a heart carries everywhere, and the only interaction on
 * the product page that is about the customer rather than about the product.
 *
 * It works in both directions, which is why the rule is simply "hover is red"
 * rather than one colour for saving and another for unsaving: on an empty
 * heart the red is the invitation, and on a filled one it is the warning that
 * clicking takes it away.
 *
 * #F2766B is the palette's existing warm red - the one the error notices and
 * the Remove controls use - so no new colour enters the system for this.
 */
.nf-save__btn--icon:hover,
.nf-save__btn--icon:focus-visible,
.nf-save__btn--icon.is-saved:hover,
.nf-save__btn--icon.is-saved:focus-visible {
	color: #F2766B;
}

/*
 * No box, so the focus ring has to be the thing that shows keyboard focus.
 * Without the border there is nothing else drawing the control's edge, and a
 * bare heart with no visible focus is unusable without a mouse.
 */
.nf-save__btn--icon:focus-visible {
	outline: 2px solid var(--nfa-read, #6B8AFF);
	outline-offset: 2px;
}

/*
 * Saved is a filled heart, and it is the one place on the site the brand blue
 * is used as a fill rather than a line. A saved piece is the only thing on a
 * product page the customer has personally done, so it is allowed to be the
 * one coloured thing on it.
 */
.nf-save__btn--icon.is-saved {
	color: var(--nfa-blue, #0000FE);
}

.nf-save__btn--icon.is-saved .nf-save__icon { fill: currentColor; }



/*
 * NO BOX AT ALL.
 *
 * It had a hairline border to give it the same footprint as the button beside
 * it. Removing it is the better call: a heart is already a complete shape and
 * boxing it turned one clear symbol into a symbol inside a container, which
 * reads as a second button rather than as the mark it is.
 *
 * The 2.875rem hit area stays. The box was only ever a drawn edge around it,
 * and a control you can miss with a fingertip is a worse problem than an
 * unframed one.
 */

.nf-save--list .nf-save__btn { color: #7A7A7A; }
.nf-save--list .nf-save__btn::after { background-color: #F2766B; }
.nf-save--list .nf-save__btn:hover { color: #F2766B; }

/* The save control is not part of the account area, so it needs its own vars. */
.nf-save {
	--nfa-black:  var(--nf-black, #0A0A0A);
	--nfa-white:  var(--nf-white, #FFFFFF);
	--nfa-muted:  var(--nf-muted, #A1A1A1);
	--nfa-blue:   var(--nf-blue, #0000FE);
	--nfa-read:   #6B8AFF;
	--nfa-face:   "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ==========================================================================
   WOOCOMMERCE'S OWN TABLES AND NOTICES, restated in the brand
   ========================================================================== */

.nf-account .woocommerce-orders-table,
.nf-account .shop_table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--nfa-face);
	font-size: 0.875rem;
	border: none;
}

.nf-account .shop_table th {
	text-align: left;
	padding: 0.75rem 0.75rem 0.75rem 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nfa-muted);
	border-bottom: 1px solid var(--nfa-line);
}

.nf-account .shop_table td {
	padding: 1rem 0.75rem 1rem 0;
	border-bottom: 1px solid var(--nfa-line);
	color: var(--nfa-muted);
	vertical-align: middle;
}

.nf-account .shop_table td a { color: var(--nfa-white); text-decoration: none; }
.nf-account .shop_table td a:hover { color: var(--nfa-read); }

/* ==========================================================================
   ADDRESSES
   ==========================================================================
 *
 * Our own markup now (templates/myaccount/my-address.php), because the stock
 * one wraps the two addresses in col2-set / u-column1 / col-1 and lays them out
 * with percentage floats from WooCommerce's stylesheet. Measured from a
 * screenshot: the panels came out ~230px wide and pushed to the right-hand half
 * of the page, with the whole left side empty and the address wrapping after
 * every second word.
 */

/*
 * One address, normally. The two-column rule is kept for the bill-to-shipping
 * case and for anything that filters a second address back in.
 */
.nf-addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	align-items: start;
}

/*
 * A lone panel gets its own width rather than half the page with a hole beside
 * it — which is exactly the shape that made this screen look broken before.
 */
.nf-addresses--one {
	grid-template-columns: minmax(0, 1fr);
	max-width: 30rem;
}

.nf-address {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	border: 1px solid var(--nfa-line);
	background-color: var(--nfa-surface);
	padding: 1.5rem;
	min-width: 0;
}

.nf-address__label {
	margin: 0 !important;
	font-family: var(--nfa-face);
	font-size: 0.6875rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nfa-muted);
}

/*
 * An address is a block of lines, not a paragraph. WooCommerce emits it with
 * <br>, so the only job here is to stop the browser italicising <address> and
 * to give the lines room to be read as lines.
 */
.nf-address__body {
	margin: 0;
	font-family: var(--nfa-face);
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--nfa-white);
}

.nf-address__empty {
	margin: 0;
	font-family: var(--nfa-face);
	font-size: 0.9375rem;
	color: #7A7A7A;
}

/* The action sits at the bottom of the panel however tall the address is. */
.nf-address__action {
	margin: 0.25rem 0 0;
	margin-top: auto;
	padding-top: 0.875rem;
	border-top: 1px solid var(--nfa-line);
}

.nf-address.is-empty { border-style: dashed; }

/* An address is short. Two columns of it on a phone is unreadable. */
@media (max-width: 700px) {
	.nf-addresses { grid-template-columns: minmax(0, 1fr); }
}

/*
 * "(optional)" — hidden on the account address form only.
 *
 * WooCommerce stamps <span class="optional">(optional)</span> into the label of
 * every field it does not consider required, and this form deliberately requires
 * nothing (see Nullifier_Addresses::optional_shipping — an address has to be
 * clearable). The result was every single label reading "optional", which says
 * nothing useful and reads like the whole screen is an afterthought.
 *
 * Hidden with visibility rather than display so the words stay in the accessible
 * name a screen reader announces — the field genuinely is optional, that is just
 * not worth twelve repetitions of on screen.
 *
 * Scoped to the address form. Checkout keeps its own labels exactly as they are.
 */
/*
 * The display name's asterisk, gone with the requirement it advertised.
 *
 * WooCommerce prints the asterisk inside its own template, so there is no filter
 * for it — but there is no template override here either, because owning that
 * whole file to delete one character means keeping a WooCommerce template in
 * step with WooCommerce forever. One selector is the cheaper trade.
 *
 * The matching aria-required on the input is dropped in accounts.js, so the
 * label and what a screen reader announces stay in agreement.
 */
.nf-account label[for="account_display_name"] .required {
	display: none;
}

.nf-account .woocommerce-address-fields label .optional {
	visibility: hidden;
	font-size: 0;
}

.nf-account .woocommerce-Address {
	min-width: 0;
}

.nf-account .woocommerce-Address-title h2,
.nf-account .woocommerce-Address-title h3 {
	font-family: var(--nfa-face);
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nfa-muted);
	margin: 0 0 0.75rem;
}

.nf-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
	color: var(--nfa-white);
	font-family: var(--nfa-face);
	font-size: 0.9375rem;
}

.nf-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}

.nf-account .woocommerce-Addresses .woocommerce-Address { margin-bottom: 0; }

/* Two-column address form on wide screens, one on a phone. */
.nf-account .woocommerce-address-fields__field-wrapper {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

/* --- Profile & Security, two columns ------------------------------------- *
 *
 * The form was a single column of full-width boxes, which made six short
 * answers into far more scrolling than they are worth. Two pairs — the two
 * names, then display name beside the phone — halve the page without moving
 * anything somewhere you would not look for it. The email keeps a full row of
 * its own, which is right: it is the one field here that is also how you sign
 * in, and long enough to want the room.
 *
 * Fields are placed by what they ARE, using :has() on the input's id, rather
 * than by counting children. WooCommerce prints <div class="clear"> spacers
 * between rows and an nth-child rule would have been counting those too — the
 * same mistake that put the account navigation in the wrong column.
 */
.nf-account .woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.125rem clamp( 1rem, 2vw, 1.5rem );
	align-items: start;
}

/* Everything runs full width unless it is one of the pairs below. */
.nf-account .woocommerce-EditAccountForm > * {
	grid-column: 1 / -1;
}

/* WooCommerce's float spacers have nothing to do in a grid. */
.nf-account .woocommerce-EditAccountForm > .clear {
	display: none;
}

/*
 * Two pairs, both with their row named as well as their column.
 *
 * Naming only the column was not enough: the email sits between display name
 * and phone in the markup, and it spans the full width, so auto-placement
 * pushed the phone down past it onto a row of its own. With rows 1 and 2 taken
 * explicitly, everything else simply flows underneath in whatever order it
 * arrives — no counting, and nothing to redo when a field is added.
 *
 * THE NAMES ARE MATCHED BY ID, NOT BY .form-row-first / .form-row-last.
 *
 * They used to be matched by those classes, and it put two fields in one cell.
 * WooPayments' multi-currency adds a "Default currency" row to this form and
 * gives it .form-row-first — the class is WooCommerce's generic "this is the
 * left half of a pair", not an identity. So the rule below caught it too and
 * placed it at column 1, row 1, directly on top of First Name: two labels
 * drawn over each other, unreadable.
 *
 * Matching the id is precise. Nothing else on the site is #account_first_name,
 * so nothing else can ever land in this cell, whatever classes a plugin
 * decides to print. Anything unrecognised keeps its full width from the rule
 * above and flows onto a row of its own underneath — which is where the
 * currency selector now sits.
 */
.nf-account .woocommerce-EditAccountForm > :has( #account_first_name ) {
	grid-column: 1;
	grid-row: 1;
}

.nf-account .woocommerce-EditAccountForm > :has( #account_last_name ) {
	grid-column: 2;
	grid-row: 1;
}

.nf-account .woocommerce-EditAccountForm > :has( #account_display_name ) {
	grid-column: 1;
	grid-row: 2;
}

.nf-account .woocommerce-EditAccountForm > :has( #account_phone ) {
	grid-column: 2;
	grid-row: 2;
}

/*
 * The mailing-list preference.
 *
 * Full width and last, below the password section rather than beside a text
 * field. It is the only question on this form that is a choice rather than a
 * fact, and pairing it with half of a name row would read as though it belonged
 * to that name.
 *
 * The row is given its own grid-row so it cannot be pulled up into the pairs
 * above by auto-placement — the same precaution the currency field needed.
 */
.nf-account .woocommerce-EditAccountForm > .nf-optin-row {
	grid-column: 1 / -1;
	margin-top: 0.25rem;
}

.nf-account .nf-optin {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-family: var(--nfa-face);
	font-size: 0.875rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--nfa-white, #fff);
	cursor: pointer;
}

.nf-account .nf-optin input {
	width: 1rem;
	height: 1rem;
	margin: 0.1875rem 0 0;
	accent-color: var(--nfa-blue);
	flex: 0 0 auto;
}

/*
 * When there is nothing to control — already subscribed, or unsubscribed and
 * only they can undo it — the row states the position instead of offering a
 * button that would fail. Styled as a statement, not as a disabled input.
 */
.nf-account .nf-optin__state {
	display: block;
	font-family: var(--nfa-face);
	font-size: 0.875rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--nfa-white, #fff);
}

/*
 * The way out, said in the same breath as the way in. A consent control that
 * does not tell you how to withdraw is only half a control.
 */
.nf-account .nf-optin + .nf-optin__note {
	padding-left: 1.625rem;
}

.nf-account .nf-optin__note {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--nfa-muted);
}

/*
 * "This will be how your name will be displayed in the account section and in
 * reviews" — gone.
 *
 * It explained a field that no longer needs explaining: the label says Display
 * name, the box already has the answer in it, and it is optional now. A line of
 * italic grey under one field in a form of six was doing more to lengthen the
 * page than to help anyone.
 */
.nf-account #account_display_name_description {
	display: none;
}

/*
 * One column on a narrow screen. Two 50% fields on a phone gives you inputs
 * too small to type an email address into.
 */
@media (max-width: 600px) {
	.nf-account .woocommerce-EditAccountForm {
		grid-template-columns: minmax( 0, 1fr );
	}

	.nf-account .woocommerce-EditAccountForm > :has( #account_first_name ),
	.nf-account .woocommerce-EditAccountForm > :has( #account_last_name ),
	.nf-account .woocommerce-EditAccountForm > :has( #account_display_name ),
	.nf-account .woocommerce-EditAccountForm > :has( #account_phone ) {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

.nf-account .form-row { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.nf-account .form-row-first,
.nf-account .form-row-last { width: 100%; float: none; }

.nf-account fieldset {
	border: 1px solid var(--nfa-line);
	padding: 1.5rem;
	margin: 1.5rem 0 0;
}

.nf-account legend {
	font-family: var(--nfa-face);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nfa-muted);
	padding-inline: 0.5rem;
}

.nf-account .woocommerce-form__label-for-checkbox { flex-direction: row; align-items: center; gap: 0.5rem; }

/* --- Save and Remove ------------------------------------------------------
 *
 * Two controls that must not look alike. Save is the button; Remove is a plain
 * word, because it undoes something and a control that undoes something should
 * never be the easiest thing on screen to hit by accident. It picks up the warm
 * red on hover — the same one the error notices use — so the colour means the
 * same thing everywhere on the account.
 */
.nf-account .nf-address-form__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 1.75rem 0 0;
}

.nf-account .nf-address-form__remove {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--nfa-face);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nfa-muted);
	text-decoration: underline;
	text-underline-offset: 0.28em;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease;
}

.nf-account .nf-address-form__remove:hover,
.nf-account .nf-address-form__remove:focus-visible {
	color: #F2766B;
}

.nf-account .nf-address-form__remove:focus-visible {
	outline: 2px solid var(--nfa-read);
	outline-offset: 4px;
}

/* --- Notices ------------------------------------------------------------- */

.nf-account .woocommerce-message,
.nf-account .woocommerce-info,
.nf-account .woocommerce-error {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--nfa-line);
	border-left: 2px solid var(--nfa-blue);
	background-color: var(--nfa-surface);
	font-family: var(--nfa-face);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--nfa-white);
}

.nf-account .woocommerce-error { border-left-color: #F2766B; }

.nf-account .woocommerce-message a,
.nf-account .woocommerce-info a,
.nf-account .woocommerce-error a { color: var(--nfa-read); }

.nf-account .woocommerce-error li,
.nf-account .woocommerce-message li { margin: 0; }

/* WooCommerce's password strength meter, toned down. */
.nf-account .woocommerce-password-strength {
	font-family: var(--nfa-face);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.5rem 0 0;
	background: none;
	border: none;
}

.nf-account .woocommerce-password-strength.short,
.nf-account .woocommerce-password-strength.bad { color: #F2766B; }
.nf-account .woocommerce-password-strength.good { color: #E8B34A; }
.nf-account .woocommerce-password-strength.strong { color: #5CD68A; }
.nf-account .woocommerce-password-hint { display: block; padding-top: 0.5rem; color: var(--nfa-muted); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; font-weight: 400; }

/* ==========================================================================
   NARROW SCREENS
   ========================================================================== */

/*
 * NARROW SCREENS — a plain stack, nothing clever.
 *
 * Jack has asked to focus on desktop, so this is deliberately the minimum that
 * keeps a phone usable rather than the horizontal scrolling nav that was here
 * before. That was a second layout to maintain for a case nobody is looking at
 * yet. When mobile comes back onto the list it gets designed properly.
 */
@media (max-width: 860px) {
	body.nf-account .woocommerce:has( > .woocommerce-MyAccount-navigation ) {
		display: block;
	}

	/* No grid, so nothing to place. */
	body.nf-account .woocommerce > .woocommerce-MyAccount-navigation,
	body.nf-account .woocommerce > .woocommerce-MyAccount-content {
		grid-column: auto;
		grid-row: auto;
	}

	body.nf-account .woocommerce > .woocommerce-MyAccount-navigation {
		float: none;
		width: auto;
		margin-right: 0;
		margin-bottom: 1.5rem;
	}

	body.nf-account .woocommerce > .woocommerce-MyAccount-content {
		overflow: visible;
	}

	.nf-account .nf-acct__nav-item--customer-logout {
		margin-top: 0;
	}

	/*
	 * ACCOUNT, AS ONE CONTROL.
	 *
	 * Seven links stacked full width is most of a phone screen spent on
	 * navigation before the page you asked for begins. Closed, it is one row;
	 * open, it is the same list it always was.
	 */
	.nf-account .woocommerce-MyAccount-navigation.is-enhanced .nf-acct__nav-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		padding: 0.9375rem 0;
		appearance: none;
		background: none;
		border: 0;
		border-block: 1px solid var(--nfa-line);
		font-family: var(--nfa-face);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--nfa-white);
		cursor: pointer;
	}

	.nf-account .nf-acct__nav-toggle::after {
		content: "";
		width: 0.5rem;
		height: 0.5rem;
		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;
		transform: translateY( -0.15rem ) rotate( 45deg );
		transition: transform 0.2s ease;
	}

	.nf-account .nf-acct__nav-toggle[aria-expanded="true"]::after {
		transform: translateY( 0.1rem ) rotate( -135deg );
	}

	.nf-account .nf-acct__nav-toggle:focus-visible {
		outline: 2px solid var(--nfa-read);
		outline-offset: 2px;
	}

	/* The toggle above it already draws that line. */
	.nf-account .woocommerce-MyAccount-navigation.is-enhanced ul {
		border-top: 0;
	}
}

@media (max-width: 560px) {
	.nf-order__link {
		grid-template-columns: auto 1fr;
		gap: 0.25rem 0.875rem;
	}

	.nf-order__items { display: none; }
	.nf-order__status { justify-self: start; grid-column: 1 / -1; }

	.nf-saved__row {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 1rem;
	}

	.nf-saved__actions {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		gap: 1.25rem;
	}

	.nf-stat__num { font-size: 1.625rem; }
}

@media (prefers-reduced-motion: reduce) {
	.nf-save__btn::after,
	.nf-tab,
	.nf-stat,
	.nf-btn { transition: none; }
}

/* ==========================================================================
   DISCORD
   ==========================================================================
 *
 * The one place on this site that carries another brand's mark. Discord's
 * guidelines are explicit that a "Continue with Discord" button should be
 * recognisable as Discord, so the button keeps their blurple and their logo at
 * its correct proportions. Everywhere else in the account area stays Nullifier.
 */

.nf-discord {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

/* --- The three statuses --------------------------------------------------- */

/*
 * State is carried by a coloured edge and the words, not by a filled panel.
 * A green box saying "verified" would be the loudest thing in the account area
 * and it is not the most important thing on the page — the customer's orders
 * are. The stripe is enough to find at a glance.
 */
.nf-status {
	border: 1px solid var(--nfa-line);
	border-left: 2px solid var(--nfa-muted);
	background-color: var(--nfa-surface);
	padding: 1.375rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.nf-status--verified { border-left-color: #5CD68A; }
.nf-status--partial  { border-left-color: #E8B34A; }
.nf-status--none     { border-left-color: #6E6E6E; }

.nf-status__head {
	margin: 0;
	font-family: var(--nfa-face);
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.3 !important;
}

.nf-status--verified .nf-status__head { color: #5CD68A; }
.nf-status--partial  .nf-status__head { color: #E8B34A; }
.nf-status--none     .nf-status__head { color: var(--nfa-white); }

.nf-status__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--nfa-muted);
	max-width: 54ch;
}

/* --- What we know about you ---------------------------------------------- */

.nf-facts {
	margin: 0;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--nfa-line);
}

.nf-facts__row {
	display: grid;
	grid-template-columns: minmax(140px, 40%) 1fr;
	gap: 0.25rem 1.5rem;
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--nfa-line);
}

.nf-facts dt {
	margin: 0;
	font-family: var(--nfa-face);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nfa-muted);
	align-self: center;
}

.nf-facts dd {
	margin: 0;
	font-family: var(--nfa-face);
	font-size: 0.9375rem;
	color: var(--nfa-white);
	align-self: center;
	min-width: 0;
	word-break: break-word;
}

.nf-discord__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

/* A destructive action should not look like the primary one. */
.nf-btn--quiet {
	background-color: transparent;
	color: var(--nfa-muted);
	border-color: var(--nfa-line);
}

.nf-btn--quiet:hover {
	background-color: transparent;
	color: #F2766B;
	border-color: #F2766B;
}

/* --- The Discord button -------------------------------------------------- */

/*
 * Black with a hairline white edge, not Discord blurple.
 *
 * #5865F2 is a strong, saturated violet and this site has exactly one accent.
 * Dropping blurple into the sign-in box would have made the loudest thing on
 * the page a colour borrowed from somebody else's brand, sitting directly above
 * a white Nullifier button — two competing primaries in one panel.
 *
 * Discord's guidelines allow a monochrome version of the mark, so the logo
 * stays theirs, in white, at its correct proportions. It is the wordmark beside
 * it that identifies the service, not the colour of the box.
 */
.nf-discord-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6875rem;
	padding: 0.9375rem 1.375rem;
	font-family: var(--nfa-face);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--nfa-white);
	background-color: transparent;
	border: 1px solid var(--nfa-white);
	border-radius: 0;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/*
 * Inverts on hover — the same gesture as the white Continue button below it,
 * run in the opposite direction. The two buttons then read as a pair with a
 * clear order rather than as two unrelated controls.
 */
.nf-discord-btn:hover {
	background-color: var(--nfa-white);
	color: var(--nfa-black);
}

.nf-discord-btn:focus-visible {
	outline: 2px solid var(--nfa-read);
	outline-offset: 2px;
}

.nf-discord-btn__mark { flex: 0 0 auto; }

/* In the sign-in box it is a full-width primary action. */
.nf-signin .nf-discord-btn { width: 100%; box-sizing: border-box; }

.nf-alt { display: block; }

/*
 * "or", centred on a rule.
 *
 * Two ways in, and the rule says they are alternatives rather than a sequence.
 * Drawn as one element with a line either side of the word, so the gaps stay
 * even at every width instead of drifting the way a three-column grid would.
 */
.nf-or {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 1.5rem 0;
	font-family: var(--nfa-face);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #6E6E6E;
}

.nf-or::before,
.nf-or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background-color: var(--nfa-line);
}

/* --- The box's own heading and footnote ---------------------------------- */

.nf-panel__title {
	margin: 0 0 1.5rem;
	font-family: var(--nfa-face);
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nfa-white);
}

/*
 * The reassurance under the form.
 *
 * Quiet on purpose. It exists to stop somebody hesitating over the Discord
 * button because they think it is now or never — not to sell anything. The
 * discount is deliberately not mentioned anywhere on this page; it is explained
 * once Discord is actually verified, where it is true rather than a promise.
 */
.nf-panel__foot {
	margin: 1.25rem 0 0;
	font-family: var(--nfa-face);
	font-size: 0.8125rem;
	line-height: 1.55;
	color: #7A7A7A;
}

/* --- The Midnight prompt ------------------------------------------------- */

.nf-prompt {
	border: 1px solid var(--nfa-line);
	border-left: 2px solid var(--nfa-blue);
	background-color: var(--nfa-surface);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.nf-prompt__title {
	margin: 0;
	font-family: var(--nfa-face);
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nfa-white);
	line-height: 1.3 !important;
}

.nf-prompt__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--nfa-muted);
	max-width: 48ch;
}

.nf-prompt p:last-child { margin: 0; }

@media (max-width: 560px) {
	.nf-facts__row { grid-template-columns: 1fr; gap: 0.125rem; }
	.nf-discord__actions .nf-btn--small { width: 100%; }
}

/*
 * The line under "Connected — not eligible" that says which condition failed.
 *
 * Set apart from the status sentence above it rather than run on, because one
 * is a fixed statement of state and the other is specific to this customer on
 * this day — and for the tenure case it is the only actionable thing on the
 * screen.
 */
.nf-status__why {
	margin: 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--nfa-line);
	font-family: var(--nfa-face);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--nfa-white);
	max-width: 54ch;
}

/*
 * The message the OAuth round trip comes back with.
 *
 * Deliberately not styled as a WooCommerce notice: it is the answer to
 * something the customer just did, and it needs to be the first thing they read
 * on landing rather than a strip they have learned to skip. Coloured edge by
 * outcome, same language as the Discord status panels.
 */
.nf-flash {
	border: 1px solid var(--nfa-line);
	border-left: 2px solid var(--nfa-line);
	background-color: var(--nfa-surface);
	padding: 1.125rem 1.375rem;
	margin: 0 0 1.75rem;
	max-width: 54ch;
}

.nf-flash p {
	margin: 0;
	font-family: var(--nfa-face);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--nfa-white);
}

.nf-flash--success { border-left-color: #5CD68A; }
.nf-flash--notice  { border-left-color: #E8B34A; }
.nf-flash--error   { border-left-color: #F2766B; }

/* On the sign-in page it sits inside the centred column, not full width. */
.nf-account--signin .nf-flash {
	max-width: 30rem;
	margin-inline: auto;
}

/*
 * The Midnight prompt on a product page.
 *
 * Quieter than the account-page version — it is an aside on a page whose job is
 * selling one piece, not the main event. No percentage in the heading and no
 * button; a link is enough for someone who is interested.
 */
.nf-prompt--product {
	margin-top: 1.5rem;
	padding: 1rem 1.125rem;
	background-color: transparent;
	border-left-color: var(--nfa-read);
}

.nf-prompt--product .nf-prompt__title {
	font-size: 0.6875rem !important;
	letter-spacing: 0.16em;
	color: var(--nfa-muted);
}

.nf-prompt--product .nf-prompt__text {
	font-size: 0.875rem;
}

/* The prompt renders outside .nf-account, so it needs its own tokens. */
.nf-prompt--product {
	--nfa-black:  var(--nf-black, #0A0A0A);
	--nfa-white:  var(--nf-white, #FFFFFF);
	--nfa-line:   var(--nf-line, #262626);
	--nfa-muted:  var(--nf-muted, #A1A1A1);
	--nfa-blue:   var(--nf-blue, #0000FE);
	--nfa-read:   #6B8AFF;
	--nfa-surface: var(--nf-surface, #141414);
	--nfa-face:   "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ==========================================================================
   CLOSING AN ACCOUNT
   ==========================================================================
 *
 * Set apart from the form above it, and quiet.
 *
 * A destructive control should be findable and never inviting. This one is
 * below a rule, in muted text, with an outlined button rather than a filled
 * one — the opposite treatment to Save Changes, which is the blue thing you
 * came to press. Red is spent on the hover and on the button's edge, where it
 * warns without shouting at somebody who only scrolled this far.
 */

.nf-account .nf-danger {
	margin-top: clamp( 3rem, 7vw, 4.5rem );
	padding-top: clamp( 2rem, 4vw, 2.5rem );
	border-top: 1px solid var(--nfa-line);
}

.nf-account .nf-danger__title {
	font-family: var(--nfa-face);
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nfa-muted);
	margin: 0 0 0.875rem;
}

.nf-account .nf-danger__text {
	max-width: 56ch;
	margin: 0 0 0.875rem;
	font-family: var(--nfa-face);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--nfa-muted);
}

.nf-account .nf-danger__form {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.75rem;
}

.nf-account .nf-danger__row {
	margin: 0;
	width: 14rem;
	max-width: 100%;
}

.nf-account .nf-danger__btn {
	appearance: none;
	padding: 0.9375rem 1.5rem;
	background: none;
	border: 1px solid #F2766B;
	border-radius: 0;
	font-family: var(--nfa-face);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #F2766B;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nf-account .nf-danger__btn:hover {
	background-color: #F2766B;
	color: var(--nfa-black);
}

.nf-account .nf-danger__btn:focus-visible {
	outline: 2px solid var(--nfa-read);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.nf-account .nf-danger__form { align-items: stretch; }
	.nf-account .nf-danger__row  { width: 100%; }
	.nf-account .nf-danger__btn  { width: 100%; }
}