/*
 * Account - slice 7.
 *
 * BUILT FROM FRAMES `3a` / `3e` / `3f` (log in, tablet / desktop / phone) and
 * `3b` / `3c` / `3d` (dashboard, tablet / desktop / phone), not ported:
 * Shopify's customer accounts are Shopify's pages, not theme code, so there is
 * no live surface to diff against.
 *
 * MOBILE FIRST, min-width only, ascending (traps.md #2), on this theme's own
 * derived pair - 768 and 1520, the same two card.css and checkout.css use. The
 * artboards map 390 -> base, 1240 -> 768, 1600 -> 1520.
 *
 * SINCE 21/10/26 THE THEME DRAWS ITS OWN my-address.php, form-edit-address.php,
 * form-edit-account.php and view-order.php (handoff-2110 frames 3a-4d), ported
 * from WooCommerce 11.1.0's own templates with every field name, nonce and
 * hook read from that source, not written from memory (traps.md #23). Their
 * rules are the last two sections of this file; the fields and the order
 * parts come from checkout.css, which loads on those three endpoints. The
 * rules that used to dress WooCommerce's default markup for these pages are
 * gone.
 *
 * THREE PLACES THE FRAMES DIFFER BY WIDTH IN A WAY THAT IS NOT A RESIZE, and
 * all three are in the markup twice with CSS choosing:
 *
 *   - The switcher is a 250/280px tile rail on tablet and desktop and a
 *     scrolling chip row on phone. Five endpoints stacked at 362px push the
 *     content two screens down.
 *   - The orders list is a five-column table on tablet and desktop and a stack
 *     of cards on phone. Five columns at 362px either truncate the compound
 *     name or force a horizontal scroll, and the lot reference is the one
 *     column that must stay readable.
 *   - Reorder is inside the recent-order panel on PHONE, absent on TABLET, and
 *     at the floor of the Next dispatch panel on DESKTOP. That is the frames,
 *     checked three times because it looks like a mistake.
 */

/* ------------------------------------------------------------- page */

/* 4px each side tops the container's 12px phone gutter up to the 16 that
   frames 3b, 4b and 4d draw (22/10/26), as checkout.css does for the
   checkout; from 768 the container's own gutter is the frames' edge. */
.np-account {
	padding: 20px 4px 26px;
}

.np-account__head {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.np-account__eyebrow {
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--np-muted);
}

.np-account__greeting {
	margin: 8px 0 0;
	font-family: var(--np-font-heading);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--np-ink);
}

.np-account__since {
	font-size: var(--np-size-small);
	font-weight: 500;
	color: var(--np-muted);
}

.np-account__layout {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 16px;
}

.np-account__content {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* ------------------------------------------------------------- switcher */

.np-account__nav {
	min-width: 0;
}

/*
 * Phone: a scrolling chip row. -14px side margins so the row bleeds to the
 * screen edges and the last chip is visibly cut off rather than ending flush,
 * which is what tells someone it scrolls.
 */
.np-account__nav-list {
	display: flex;
	gap: 7px;
	/*
	 * The bleed reads the gutter token, 12/09/26 20:29. It was a literal
	 * -14px against a 12px phone gutter, so the row reached 2px past each
	 * screen edge and the document scrolled sideways - 377 against a 375
	 * client. Corrected HERE rather than shadowed by a later override, so
	 * there is one rule to read and nothing stale underneath it.
	 * Plus the account's own 4px since 22/10/26, so the row still meets both
	 * screen edges and its first chip starts at 16 like 4b's tabs.
	 */
	margin-inline: calc((var(--np-gutter, 12px) + 4px) * -1);
	padding: 0 calc(var(--np-gutter, 12px) + 4px) 2px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.np-account__nav-list::-webkit-scrollbar {
	display: none;
}

.np-account__nav-item {
	flex-shrink: 0;
	list-style: none;
}

.np-account__tile {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px;
	background: var(--np-tile);
	border: 1.5px solid var(--np-field);
	border-radius: var(--np-radius-pill);
	font-family: var(--np-font-body);
	font-size: var(--np-size-small);
	font-weight: 500;
	color: var(--np-body);
	white-space: nowrap;
	text-decoration: none;
}

.np-account__tile.is-on {
	background: var(--np-ink);
	border-color: var(--np-ink);
	color: var(--np-panel);
	font-weight: 600;
}

/* The glyph is the rail's, not the chip row's - frame 3d carries text only. */
.np-account__tile-icon {
	display: none;
	place-items: center;
	width: 20px;
	height: 20px;
}

.np-account__tile-meta {
	font-size: 10px;
	color: var(--np-hint);
}

.np-account__tile.is-on .np-account__tile-meta {
	color: rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------------- panels */

.np-account__panel {
	padding: 20px 18px 22px;
	background: var(--np-panel);
	border-radius: var(--np-radius-panel);
}

.np-account__panel-heading {
	margin: 0;
	font-family: var(--np-font-heading);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: var(--np-track-heading);
	line-height: 1.15;
	color: var(--np-ink);
}

/* ------------------------------------------------------------- stats */

.np-account__dash {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/*
 * The 1px gaps ARE the rules between cells: a grid gap over a #E1E4E8 ground
 * with white cells on top. No borders, so nothing doubles at the joins and the
 * outer radius clips cleanly.
 */
.np-account__stats {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--np-line);
	border-radius: var(--np-radius-panel);
	overflow: hidden;
}

.np-account__stat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 18px;
	background: var(--np-panel);
}

.np-account__stat-value {
	font-family: var(--np-font-heading);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--np-ink);
	order: 2;
}

.np-account__stat-label {
	font-size: var(--np-size-label);
	color: var(--np-ink);
	order: 1;
}

.np-account__dash-row {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ------------------------------------------------------------- recent */

.np-account__recent-row {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 13px;
	padding: 15px 16px;
	background: var(--np-sub);
	border-radius: var(--np-radius-button);
}

.np-account__recent-copy {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.np-account__recent-id {
	font-size: 13px;
	color: var(--np-ink);
	text-decoration: none;
}

.np-account__recent-items {
	font-size: var(--np-size-small);
	font-weight: 500;
	line-height: 1.5;
	color: var(--np-body);
}

.np-account__recent-note {
	margin: 13px 0 0;
	font-size: var(--np-size-small);
	font-weight: 500;
	line-height: 1.6;
	color: var(--np-body);
}

/* ------------------------------------------------------------- badges */

.np-account__badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 27px;
	padding: 0 11px;
	border-radius: var(--np-radius-pill);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.np-account__badge .np-dot {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	border-radius: 50%;
}

/* The five status words' colours, handoff-2310 README "Status words" (pill
   fill, text, dot), 23/10/26. Was: live ink, warn amber, done grey. */
.np-account__badge--awaiting {
	background: #FBF0DF;
	color: #8A5A12;
}

.np-account__badge--awaiting .np-dot {
	background: #C8871E;
}

.np-account__badge--paid {
	background: #E9EDF2;
	color: #14161A;
}

.np-account__badge--paid .np-dot {
	background: #14161A;
}

.np-account__badge--dispatched {
	background: #E7F4EC;
	color: #1E6B3A;
}

.np-account__badge--dispatched .np-dot {
	background: #1E8E4A;
}

.np-account__badge--cancelled {
	background: #FBE9E7;
	color: #9B2C1F;
}

.np-account__badge--cancelled .np-dot {
	background: #C8402F;
}

.np-account__badge--refunded {
	background: #EEF0F3;
	color: #4A5568;
}

.np-account__badge--refunded .np-dot {
	background: #6B7480;
}

/* ------------------------------------------------------------- reorder */

.np-account__reorder {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	background: var(--np-ink);
	color: var(--np-panel);
	border-radius: var(--np-radius-button);
	font-size: var(--np-size-button);
	font-weight: 600;
	text-decoration: none;
}

.np-account__reorder--phone,
.np-account__reorder--inline {
	margin-top: 13px;
}

.np-account__reorder-arrow {
	font-size: var(--np-size-small);
}

/* ------------------------------------------------------------- dispatch */

/*
 * Desktop only. Its ground is also declared inline in inc/head.php, or it
 * paints page-grey for one frame - the same flash the dark heroes had.
 */
.np-account__dispatch {
	display: none;
	flex-direction: column;
	padding: 26px 28px 28px;
	background: var(--np-ink);
	border-radius: var(--np-radius-panel);
}

.np-account__dispatch-eyebrow {
	font-size: var(--np-size-label);
	letter-spacing: 0.1em;
	color: #98A2AE;
}

.np-account__dispatch-clock {
	display: block;
	margin-top: 15px;
	font-family: var(--np-font-data);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--np-panel);
}

.np-account__dispatch-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: var(--np-size-label);
	letter-spacing: 0.07em;
	color: #C4CCD6;
}

.np-account__dispatch-label .np-dot {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--np-dot);
}

.np-account__dispatch .np-account__reorder {
	margin-top: auto;
	background: var(--np-panel);
	color: var(--np-ink);
}

/* ------------------------------------------------------------- orders */

/* Phone: cards. The table head is a table thing and is not rendered here. */
.np-account__orders {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

.np-account__orders-head {
	display: none;
}

.np-account__order {
	display: flex;
	flex-direction: column;
	padding: 16px 18px 18px;
	background: var(--np-panel);
	border-radius: var(--np-radius-panel);
	text-decoration: none;
	color: inherit;
}

.np-account__order-id {
	order: 1;
	font-size: 13px;
	color: var(--np-ink);
}

.np-account__order .np-account__badge {
	order: 2;
	align-self: flex-start;
	margin-top: 9px;
}

.np-account__order-items {
	order: 3;
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 9px;
	min-width: 0;
}

.np-account__order-names {
	font-size: var(--np-size-small);
	font-weight: 500;
	line-height: 1.5;
	color: var(--np-body);
}

.np-account__order-lot {
	font-size: 11px;
	color: var(--np-muted);
}

.np-account__order-date {
	order: 4;
	margin-top: 11px;
	padding-top: 11px;
	border-top: 1px solid var(--np-rule);
	font-size: var(--np-size-label);
	font-weight: 500;
	color: var(--np-muted);
}

.np-account__order-total {
	order: 5;
	margin-top: 6px;
	font-family: var(--np-font-heading);
	font-size: var(--np-size-body);
	font-weight: 600;
	color: var(--np-ink);
}

.np-account__orders-note {
	margin: 0;
	font-size: var(--np-size-small);
	font-weight: 500;
	line-height: 1.6;
	color: var(--np-body);
}

.np-account__pager {
	display: flex;
	gap: 10px;
}

.np-account__pager-link {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 18px;
	background: var(--np-panel);
	border: 1.5px solid var(--np-ink);
	border-radius: var(--np-radius-button);
	font-size: var(--np-size-small);
	font-weight: 600;
	color: var(--np-ink);
	text-decoration: none;
}

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

.np-auth {
	max-width: 362px;
	margin-inline: auto;
	padding: 22px 0 26px;
}

.np-auth__intro {
	text-align: center;
}

.np-auth__eyebrow {
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--np-muted);
}

.np-auth__heading {
	margin: 9px 0 0;
	font-family: var(--np-font-heading);
	font-size: 29px;
	font-weight: 600;
	letter-spacing: -0.032em;
	line-height: 1.05;
	color: var(--np-ink);
}

.np-auth__lede {
	margin: 11px auto 0;
	max-width: 52ch;
	font-size: var(--np-size-button);
	font-weight: 500;
	line-height: 1.65;
	color: var(--np-body);
}

.np-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin-top: 18px;
	padding: 5px;
	background: var(--np-panel);
	border-radius: 12px;
}

.np-auth__tab {
	height: 42px;
	background: transparent;
	color: var(--np-muted);
	border: none;
	border-radius: var(--np-radius-chip-lg);
	cursor: pointer;
	font-family: var(--np-font-body);
	font-size: var(--np-size-button);
	font-weight: 500;
}

.np-auth__tab.is-on {
	background: var(--np-ink);
	color: var(--np-panel);
	font-weight: 600;
}

.np-auth__panel {
	padding: 22px 18px 24px;
	margin-top: 12px;
	background: var(--np-panel);
	border-radius: var(--np-radius-panel);
}

/*
 * BOTH PANELS SHOW UNTIL assets/js/account.js SAYS OTHERWISE. is-ready is
 * added by that file, so a visitor whose script never loaded gets two stacked
 * forms that both work rather than a register form nothing can reveal.
 */
.np-auth.is-ready .np-auth__panel {
	display: none;
}

.np-auth.is-ready .np-auth__panel.is-on {
	display: block;
}

.np-auth__fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.np-auth__fields .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.np-auth__fields label {
	font-family: var(--np-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--np-track-label);
	text-transform: uppercase;
	color: var(--np-ink);
}

.np-auth__fields input[type="text"],
.np-auth__fields input[type="email"],
.np-auth__fields input[type="password"] {
	width: 100%;
	height: 48px;
	box-sizing: border-box;
	background: var(--np-panel);
	border: 1.5px solid var(--np-field);
	border-radius: var(--np-radius-button);
	padding: 0 15px;
	font-family: var(--np-font-body);
	font-size: var(--np-size-button);
	font-weight: 500;
	color: var(--np-ink);
	outline: none;
}

.np-auth__fields input:focus {
	border-color: var(--np-ink);
}

.np-auth__hint {
	font-size: 13px;
	font-weight: 500;
	color: var(--np-muted);
	text-transform: none;
	letter-spacing: normal;
}

.np-auth__hint--block {
	margin: 0;
}

.np-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 13px;
}

.np-auth__check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	font-size: var(--np-size-small);
	font-weight: 500;
	color: var(--np-body);
}

.np-auth__check-box {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin: 0;
	appearance: none;
	background: var(--np-panel);
	border: 1.5px solid var(--np-field);
	border-radius: 6px;
	cursor: pointer;
}

.np-auth__check-box:checked {
	background: var(--np-ink);
	border-color: var(--np-ink);
}

.np-auth__lost {
	font-size: var(--np-size-small);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.np-auth__consent {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 11px;
	align-items: start;
	margin-top: 11px;
	cursor: pointer;
}

.np-auth__consent:first-of-type {
	margin-top: 14px;
}

.np-auth__consent .np-auth__check-box {
	margin-top: 1px;
}

.np-auth__consent-text {
	font-size: var(--np-size-small);
	font-weight: 500;
	line-height: 1.6;
	color: var(--np-body);
}

.np-auth__consent-text a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.np-auth__submit {
	display: block;
	width: 100%;
	height: 52px;
	margin-top: 16px;
	background: var(--np-ink);
	color: var(--np-panel);
	border: none;
	border-radius: var(--np-radius-button);
	cursor: pointer;
	font-family: var(--np-font-body);
	font-size: var(--np-size-body);
	font-weight: 600;
}

.np-auth__perks {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-top: 14px;
	background: var(--np-line);
	border-radius: var(--np-radius-panel);
	overflow: hidden;
}

.np-auth__perk {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 12px;
	align-items: start;
	padding: 15px 18px;
	background: var(--np-panel);
}

.np-auth__perk-icon {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--np-muted);
}

.np-auth__perk-text {
	font-size: var(--np-size-small);
	font-weight: 500;
	line-height: 1.55;
	color: var(--np-body);
}

.np-auth__open {
	margin: 12px 0 0;
	text-align: center;
	font-size: var(--np-size-small);
	font-weight: 500;
	line-height: 1.6;
	color: var(--np-muted);
}

/* ============================================================= 768 */

/*
 * Frames 3a and 3b, tablet 1240. The switcher becomes a tile rail beside the
 * content, the orders list becomes a table, and the login card takes its
 * 560px width.
 */
@media (min-width: 768px) {

	.np-account {
		padding: 32px 0 44px;
	}

	.np-account__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 24px;
	}

	.np-account__eyebrow {
		font-size: var(--np-size-label);
	}

	.np-account__greeting {
		margin-top: 9px;
		font-size: 34px;
	}

	.np-account__layout {
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr);
		gap: 22px;
		margin-top: 22px;
		align-items: start;
	}

	.np-account__content {
		gap: 16px;
	}

	/* The rail. */
	.np-account__nav-list {
		flex-direction: column;
		gap: 6px;
		margin: 0;
		padding: 16px;
		background: var(--np-panel);
		border-radius: var(--np-radius-panel);
		overflow: visible;
	}

	.np-account__nav-item {
		flex-shrink: 1;
	}

	.np-account__tile {
		display: grid;
		grid-template-columns: 20px 1fr auto;
		align-items: center;
		gap: 12px;
		width: 100%;
		height: auto;
		padding: 12px 13px;
		background: var(--np-tile);
		border: 1px solid var(--np-rule);
		border-radius: var(--np-radius-chip-lg);
	}

	.np-account__tile-icon {
		display: grid;
	}

	.np-account__panel {
		padding: 24px 26px 26px;
	}

	.np-account__panel-heading {
		font-size: 20px;
	}

	.np-account__dash,
	.np-account__dash-row {
		gap: 16px;
	}

	.np-account__stats {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.np-account__stat {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 8px;
		padding: 22px 24px 24px;
	}

	.np-account__stat-value {
		order: 1;
		font-size: 32px;
	}

	.np-account__stat-label {
		order: 2;
	}

	.np-account__recent-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 20px;
		align-items: center;
		margin-top: 14px;
		padding: 16px 18px;
	}

	.np-account__badge {
		height: 30px;
		padding: 0 13px;
		font-size: var(--np-size-label);
		letter-spacing: var(--np-track-label);
	}

	/* Tablet has no Reorder at all - frame 3b. */
	.np-account__reorder--phone {
		display: none;
	}

	/* The orders table. */
	.np-account__orders {
		gap: 0;
		background: var(--np-panel);
		border-radius: var(--np-radius-panel);
		overflow: hidden;
	}

	.np-account__orders-head,
	.np-account__order {
		display: grid;
		grid-template-columns: 150px minmax(0, 1fr) 130px 110px 120px;
		gap: 16px;
		align-items: center;
	}

	.np-account__orders-head {
		padding: 14px 24px;
		background: var(--np-sub);
	}

	.np-account__orders-col {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--np-muted);
	}

	.np-account__order {
		padding: 17px 24px;
		border-top: 1px solid var(--np-rule);
		border-radius: 0;
	}

	.np-account__order-id,
	.np-account__order-items,
	.np-account__order-date,
	.np-account__order-total,
	.np-account__order .np-account__badge {
		order: 0;
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.np-account__order-date {
		font-size: var(--np-size-small);
		color: var(--np-body);
	}

	.np-account__order-total {
		font-size: var(--np-size-button);
	}

	.np-account__order .np-account__badge {
		height: 28px;
		padding: 0 11px;
		font-size: 11px;
		letter-spacing: 0.04em;
		justify-self: start;
	}

	/* Login card. */
	.np-auth {
		max-width: 560px;
		padding: 34px 0 48px;
	}

	.np-auth__heading {
		margin-top: 10px;
		font-size: 38px;
	}

	.np-auth__lede {
		margin-top: 12px;
		font-size: var(--np-size-body);
	}

	.np-auth__tabs {
		margin-top: 22px;
	}

	.np-auth__tab {
		height: 44px;
	}

	.np-auth__panel {
		padding: 28px 30px 30px;
	}

	.np-auth__fields {
		gap: 13px;
	}

	.np-auth__fields .form-row {
		gap: 7px;
	}

	.np-auth__fields label {
		font-size: var(--np-size-label);
	}

	.np-auth__row {
		margin-top: 14px;
		gap: 16px;
	}

	.np-auth__consent:first-of-type {
		margin-top: 15px;
	}

	.np-auth__submit {
		margin-top: 18px;
	}

	.np-auth__perk-text {
		font-size: var(--np-size-button);
	}
}

/* ============================================================= 1520 */

/*
 * Frames 3c and 3e, desktop 1600. The sidebar goes to 280, the order table's
 * columns widen, the login card takes 600 - and the dashboard earns the one
 * thing narrower widths cannot fit: the Next dispatch panel beside the recent
 * order, on a stretched row so the two share a bottom edge.
 */
@media (min-width: 1520px) {

	.np-account {
		padding: 36px 0 52px;
	}

	.np-account__greeting {
		font-size: 40px;
	}

	/* Gap 28 since 22/10/26: frames 3a, 4a and 4c put the content 28px off
	   the rail (972 wide at 1600); the 27/09 frame 3c drew 26. */
	.np-account__layout {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 28px;
		margin-top: 24px;
	}

	.np-account__nav-list {
		padding: 17px;
	}

	.np-account__tile {
		padding: 13px 14px;
	}

	.np-account__content,
	.np-account__dash,
	.np-account__dash-row {
		gap: 18px;
	}

	.np-account__stat {
		padding: 24px 28px 26px;
	}

	.np-account__stat-value {
		font-size: 36px;
	}

	.np-account__dash-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 380px;
		align-items: stretch;
	}

	.np-account__panel {
		padding: 26px 28px 28px;
	}

	.np-account__panel-heading {
		font-size: 21px;
	}

	.np-account__recent-row {
		margin-top: 15px;
		padding: 17px 20px;
	}

	.np-account__recent-note {
		font-size: var(--np-size-button);
		line-height: 1.65;
	}

	.np-account__dispatch {
		display: flex;
	}

	.np-account__orders-head,
	.np-account__order {
		grid-template-columns: 160px minmax(0, 1fr) 140px 120px 130px;
		gap: 18px;
	}

	.np-account__orders-head {
		padding: 15px 28px;
	}

	.np-account__order {
		padding: 18px 28px;
	}

	.np-account__order-names {
		font-size: var(--np-size-button);
	}

	.np-account__order-total {
		font-size: var(--np-size-body);
	}

	.np-auth {
		max-width: 600px;
		padding: 48px 0 60px;
	}

	.np-auth__heading {
		margin-top: 9px;
		font-size: 42px;
	}

	.np-auth__lede {
		margin-top: 11px;
		font-size: 17px;
	}

	.np-auth__tabs {
		margin-top: 24px;
	}

	.np-auth__tab {
		height: 46px;
	}

	.np-auth__panel {
		padding: 30px 32px 32px;
	}

	.np-auth__fields {
		gap: 12px;
	}

	.np-auth__row {
		margin-top: 13px;
		gap: 14px;
	}

	.np-auth__consent:first-of-type {
		margin-top: 14px;
	}

	.np-auth__submit {
		margin-top: 16px;
	}
}

/* =========================================================================
   MY ACCOUNT — WooCommerce's stylesheet out-specifies this one, 12/09/26 19:47
   =========================================================================

   The owner: "the whole myaccount check both desktop and mobile" -> "fix it all".

   Nothing below is new design. Every value here is already declared earlier in
   this file, correctly, against frames 3e (desktop 1600) and 3f (phone 390).
   The rules simply lose, because WooCommerce ships selectors that are heavier
   than the ones a theme naturally writes:

     ours    .np-auth__fields input[type="text"]            (0,2,1)
     theirs  .woocommerce form .form-row input.input-text    (0,3,2)   wins

     ours    .np-auth__submit                                (0,1,0)
     theirs  .woocommerce:where(...) button.button           (0,2,1)   wins

   `:where()` contributes NOTHING to specificity, so their long selector is
   still just `.woocommerce` + `button.button`. That is the trap: it reads as
   defensive and low-priority and is neither.

   The tell that this is specificity and not a missing rule: `height: 52px` on
   the submit button DOES apply, because WooCommerce's rule never sets height.
   Ours wins on every property they do not touch and loses on every one they
   do - which is the signature to look for.

   Measured live before writing, at 390:

     input   267x34 at L=54, radius 4, border 1px   frame: 48px, radius 11, 1.5px
     submit  bg #E9E6ED, text #515151, radius 3     frame: #14161A on white
     form    padding 20px, margin 30px, border 1px  <- WooCommerce's OWN card,
                                                      drawn inside ours

   That last one is most of the phone damage: panel 18 + form 20 + row 3 +
   input 7 = the 54px indent, and 20px of lost width on both sides.

   Everything here is scoped under .np-auth, so no other WooCommerce surface
   changes. No !important anywhere - the specificity is earned, not forced. */

/* ------------------------------------- kill WooCommerce's card-inside-a-card */

.woocommerce .np-auth .np-auth__panel form.login,
.woocommerce .np-auth .np-auth__panel form.register,
.woocommerce .np-auth form.woocommerce-form {
	/*
	 * flow-root contains any float WooCommerce adds inside this form, now or
	 * later, so a stray float can never again shorten the panel around it.
	 * Belt and braces beside the float: none on the button itself.
	 */
	display: flow-root;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.woocommerce .np-auth .np-auth__fields .form-row,
.woocommerce .np-auth .np-auth__fields .woocommerce-form-row {
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------- the fields */

.woocommerce .np-auth .np-auth__fields input[type="text"],
.woocommerce .np-auth .np-auth__fields input[type="email"],
.woocommerce .np-auth .np-auth__fields input[type="password"],
.woocommerce .np-auth .np-auth__fields input[type="tel"] {
	width: 100%;
	height: 48px;
	box-sizing: border-box;
	padding: 0 15px;
	background: #FFFFFF;
	border: 1.5px solid var(--np-field, #CFD8E2);
	border-radius: 11px;
	font-family: var(--np-font-body, 'Sora', sans-serif);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	color: var(--np-ink, #14161A);
}

.woocommerce .np-auth .np-auth__fields input:focus {
	border-color: var(--np-ink, #14161A);
	outline: none;
}

/*
 * Frames 3e and 3f both put the field label at 700 in near-black. It was
 * rendering at the muted grey this file uses for hints, one step too light to
 * read as a label.
 */
.woocommerce .np-auth .np-auth__fields label,
.woocommerce .np-auth .np-label {
	display: block;
	margin: 0 0 6px;
	font-family: var(--np-font-body, 'Sora', sans-serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--np-ink, #14161A);
}

/* The page eyebrow is the one label that stays muted - 3e says #4A5568. */
.woocommerce .np-auth .np-auth__eyebrow {
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--np-muted, #4A5568);
}

/* --------------------------------------------------------------- the button */

.woocommerce .np-auth .np-auth__submit,
.woocommerce .np-auth button.np-auth__submit {
	/*
	 * float: none is the important one - 20:06.
	 *
	 * WooCommerce floats its buttons left. A floated child contributes NO
	 * height to its parent, so the login form measured 249px against ~285px of
	 * content, the panel came out 36px short, and the button hung out of the
	 * bottom of the white card and over the perks list below it.
	 *
	 * Measured: panel bottom 699, button bottom 735.
	 *
	 * The previous pass set eight properties on this button and not this one,
	 * because the button LOOKED right - the damage was to its parent's height,
	 * not to the button.
	 */
	float: none;
	display: block;
	width: 100%;
	height: 52px;
	margin-top: 16px;
	padding: 0 20px;
	background: var(--np-ink, #14161A);
	border: 0;
	border-radius: 11px;
	font-family: var(--np-font-body, 'Sora', sans-serif);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	color: #FFFFFF;
	cursor: pointer;
}

.woocommerce .np-auth .np-auth__submit:hover {
	background: #000000;
}

/* ----------------------------------------------------------- the checkbox */

.woocommerce .np-auth .np-auth__check-box {
	width: 20px;
	height: 20px;
	background: #FFFFFF;
	border: 1.5px solid var(--np-field, #CFD8E2);
	border-radius: 6px;
}

/* ------------------------------------------------- the log in / register tabs */

/*
 * Frame 3e: grid 1fr 1fr, gap 6, margin-top 24, padding 5, on white at radius
 * 12, buttons 46px tall at radius 9. Frame 3f drops the buttons to 42 and the
 * top margin to 18.
 *
 * These render only when WooCommerce's "allow customers to create an account
 * on the My Account page" is on - it was OFF on staging, which is why the
 * whole control was absent from the DOM rather than merely unstyled. The
 * deploy that ships this turns it on.
 */
.woocommerce .np-auth .np-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin-top: 24px;
	padding: 5px;
	background: #FFFFFF;
	border-radius: 12px;
}

.woocommerce .np-auth .np-auth__tab {
	height: 46px;
	background: transparent;
	border: 0;
	border-radius: 9px;
	font-family: var(--np-font-body, 'Sora', sans-serif);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--np-muted, #4A5568);
	cursor: pointer;
}

.woocommerce .np-auth .np-auth__tab.is-on {
	background: var(--np-ink, #14161A);
	color: #FFFFFF;
}

@media screen and (max-width: 749px) {

	.woocommerce .np-auth .np-auth__tabs {
		margin-top: 18px;
	}

	.woocommerce .np-auth .np-auth__tab {
		height: 42px;
	}

	/* 3f: the panel tightens from 30/32/32 to 22/18/24. */
	.woocommerce .np-auth .np-auth__panel {
		padding: 22px 18px 24px;
	}

	.woocommerce .np-auth .np-auth__fields label,
	.woocommerce .np-auth .np-label {
		font-size: 11px;
	}
}

/* ------------------------------------- the perks list collapses to 16px */
/*
 * The owner, 19:57: "there is these outlier boxes under the login".
 *
 * Measured at 1600: .np-auth__perks computed width 16px inside a parent whose
 * clientWidth is 600, so each row was 36px wide and every line of copy wrapped
 * to roughly one word - three tall thin boxes under the form. 489px of height
 * for three short lines.
 *
 * WHAT I COULD NOT EXPLAIN, stated rather than dressed up: only two rules
 * match that element (this file's own, and base.css's box-sizing reset) and
 * NEITHER sets a width. A freshly created div.np-auth__perks appended to the
 * same parent measures 600. Emptying the real one of all children leaves it at
 * 16. Two siblings, same class, same parent, same computed display - one 600
 * and one 16. I ran out of road isolating why.
 *
 * What IS measured: `width: 100%` restores it to exactly 600, and the rule
 * below is inert on any element that was already laying out correctly, because
 * 100% of the containing block is what `auto` should have produced anyway.
 *
 * So this is a targeted fix on an unexplained cause. If the perks list ever
 * misbehaves again, start here and do not assume this line is innocent.
 */
.np-auth__perks {
	width: 100%;
	box-sizing: border-box;
}

/* The perk row has to fill the list, for the same reason. */
.np-auth__perk {
	width: 100%;
	box-sizing: border-box;
}

/* =========================================================================
 THE DASHBOARD — WooCommerce's two-column float, 12/09/26 20:25
 =========================================================================

 The owner: "now the dashboard both phone and desktop once logged in".

 Same family as the login form and the product card: the theme's layout is
 correct and WooCommerce's stylesheet is heavier.

 woocommerce-layout.css
 .woocommerce-account .woocommerce-MyAccount-navigation float: left; width: 30% 
 .woocommerce-account .woocommerce-MyAccount-content float: right; width: 68% 

 That is (0,2,0). .np-account__layout is already `grid: 280px 1fr` with a
 26px gap, exactly as frame 3c draws it - but its two children then took 30%
 and 68% OF THEIR OWN GRID CELLS and floated inside them.

 Measured at 1600 before the fix, and after injecting the two rules below:

 before after frame 3c
 layout 280/974 280/974 280px 1fr
 navigation 84 280 280
 content 662 974 1fr
 nav tile 50x50 246x50 full-width row
 stats 3 x 220 3 x 324 repeat(3, 1fr)
 dash row 264/380 576/380 1fr 380px

 Nothing else had to change - every one of those is a child that was being
 measured against a parent two thirds too narrow, so one fix at the top
 cascaded the whole page into place.

 WooCommerce's own smallscreen sheet already resets both to float:none and
 width:100% at its breakpoint, so the phone was never affected by this. */

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

/* =========================================================================
 THE ACCOUNT SUB-SECTIONS — 12/09/26 20:32
 =========================================================================

 The owner: "i said check all the section of the accoutn dashboard".

 Checked all four at 1600 and 390. Dashboard was fixed at 20:25. The other
 three are the SAME root cause one level down, plus two WooCommerce defaults
 that were never dressed at all.

 THE FLOATS, again. woocommerce-layout.css:

 .woocommerce .col2-set .col-1 float: left; width: 48% 
 .woocommerce form .form-row-first float: left; width: 47% 

 Both (0,2,0)-ish, both a percentage of a column that is itself already the
 right width - so everything inside ends up roughly half of half.

 Measured at 1600 before this block:

 address card 229px inside a 974 column (48% of 48%)
 edit input 207px inside a 918 fieldset (47% of 47%)

 WooCommerce's smallscreen sheet resets the col2-set pair at its own
 breakpoint, so the phone was never wrong in the same way - same as the
 dashboard columns.

 THE TWO UNDRESSED DEFAULTS, both on the empty Orders page:

 .woocommerce-info 974x91, #F6F5F8, a 3px left rule, square corners
 its .button 257x52, #E9E6ED on #515151, radius 3

 Those are WooCommerce's own notice and button, straight out of the box, on
 a page a customer sees the first time they open Orders with nothing in it.

 Everything here is scoped under .np-account so no other surface moves.

 The float rules for the address cards and the edit-account rows went on
 21/10/26: the theme now draws those templates itself (handoff-2110, end of
 this file). The Orders empty-state rules below stand. */

/* ------------------------------------- the undressed Orders empty state */

/*
 * The notice a customer meets the first time they open Orders with nothing in
 * it. It was WooCommerce's lilac bar with a 3px left rule and square corners.
 */
/*
 * ONE OWNER, 21:17. The 21:10 block restated direction and alignment at
 * (0,2,0) while THIS rule already set them at (0,3,0) - so my newer rules lost
 * to my own older ones and the button stayed centred on the phone. Both live
 * here now; the 21:10 duplicates are deleted.
 *
 * The owner asked twice for the button on the LEFT. WooCommerce prints it before
 * the text, so `row` + flex-start is exactly that.
 */
.woocommerce-account .np-account__content .woocommerce-info,
.woocommerce-account .np-account__content .woocommerce-message,
.woocommerce-account .np-account__content .woocommerce-error {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 18px;
	/*
	 * margin: 0 is the spacing fix, 21:26.
	 *
	 * WooCommerce gives .woocommerce-info a bottom margin of 2em - 30px - and
	 * the account content column is a flex column with its own gap. Both
	 * applied, so the notice sat 48px clear of the panel below it at 1600 and
	 * 42px at 390, while every other pair on the page used the column's gap
	 * alone.
	 *
	 * The container owns the rhythm. The notice contributes nothing.
	 */
	margin: 0;
	padding: 22px 24px;
	background: #FFFFFF;
	/*
	 * NO LEFT ACCENT RULE, 20:48. The owner: "the orders section has a black weird
	 * part in confirm email adress on the left side of the box".
	 *
	 * A 3px square-ended border against a 14px radius leaves a black wedge
	 * poking out of both rounded corners - it reads as damage, not as an
	 * accent. The panel carries its own weight as a white card, the same as
	 * every other panel in the account.
	 */
	border: 0;
	border-radius: 14px;
	font-family: var(--np-font-body, 'Sora', sans-serif);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--np-body, #2F3742);
}

.woocommerce-account .np-account__content .woocommerce-info::before,
.woocommerce-account .np-account__content .woocommerce-message::before,
.woocommerce-account .np-account__content .woocommerce-error::before {
	content: none;
}

@media screen and (max-width: 767px) {

	/*
	 * Same (0,3,0) as the rule above, so it actually wins. The earlier attempt
	 * sat at (0,2,0) and only its flex-direction landed - align-items kept
	 * losing, which is why the button stayed centred at 390.
	 */
	.woocommerce-account .np-account__content .woocommerce-info,
	.woocommerce-account .np-account__content .woocommerce-message,
	.woocommerce-account .np-account__content .woocommerce-error {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

/* Its call to action, to the same button as everywhere else on the account. */
.woocommerce-account .np-account__content .woocommerce-info .button,
.woocommerce-account .np-account__content .woocommerce-message .button {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/*
 * min-height as well as height, 21:17. drawer.css sets a min-height of
 * 51.75px on .button and .customer button - a live-theme value - and a
 * min-height beats a height whatever the specificity, so this button
 * measured 52 while every rule in this file said 48. The owner asked for it to
 * match "Browse the catalogue", which is 48.
 *
 * NOTE, 21:22: that sentence first carried the rule written out in full,
 * braces included. CSS parses comments away so the stylesheet was fine,
 * but every check in verify-chrome.php reads a rule body as [^]* - and a
 * brace inside a comment ends the match early. It reported this button as
 * having no background. Never write CSS syntax inside a CSS comment; see
 * traps.md #47, which is the same thing one language over.
 */
	height: 48px;
	min-height: 48px;
	padding: 0 22px;
	background: var(--np-ink, #14161A);
	border: 0;
	border-radius: 11px;
	font-family: var(--np-font-body, 'Sora', sans-serif);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	color: #FFFFFF;
	text-decoration: none;
}

/* ------------------------ the empty notices wrappers, 20:42 */
/*
 * The owner: "again the fucking alignemtn and shit is off ... check each page".
 *
 * He was right and my checks could not see it, because they assert CSS strings
 * and this is a GEOMETRY fault with no wrong declaration anywhere.
 *
 * Measured on all four sections at 1600, identical every time:
 *
 *   rail card top      278
 *   first real panel   314      -> 36px lower than the rail it sits beside
 *
 * WooCommerce prints TWO .woocommerce-notices-wrapper divs at the top of the
 * account content, and on a page with no notice both are completely empty -
 * 974x0. They are still flex children of a column with `gap: 18px`, so each one
 * costs a gap even at zero height: 18 + 18 = the 36px.
 *
 * Nothing is mis-declared; the boxes are simply there. This is traps.md #1 in
 * its exact original form, and the reason it took four rounds to find is that
 * every assertion I had was about declarations rather than positions.
 *
 * :empty is safe here and I checked rather than assumed - WooCommerce emits no
 * whitespace inside them, so both match :empty. That is the usual reason
 * :empty fails, so it is verified rather than trusted. They keep their place in
 * the DOM for the moment a real notice appears.
 */
.np-account__content .woocommerce-notices-wrapper:empty,
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ------------------------- the orders page, 20:59 */
/*
 * The owner: "the no orders yet has space in the middle then in phone in order
 * confirm email adress box has to be on the left not right".
 *
 * 1. THE SPACE IN THE MIDDLE. The inline "Browse the catalogue" button
 *    measured 918px wide with its label centred - a full-width black bar with
 *    a large empty gap either side of the words. It inherits the reorder
 *    button's block layout, which is right inside the dark dispatch panel
 *    where it spans the card, and wrong as a standalone action in a white
 *    one. It becomes content-width.
 *
 * 2. THE PHONE NOTICE. row-reverse is correct at desktop - WooCommerce prints
 *    the button BEFORE the text, so reversing puts the sentence first and the
 *    action last. On the phone the two wrap, and the reversed row left the
 *    button sitting at L=136 instead of the panel's edge. Stacking it with
 *    column-reverse keeps the same reading order - sentence, then action -
 *    and pins both to the left.
 */
.np-account__content .np-account__reorder--inline {
	display: inline-flex;
	width: auto;
	padding: 0 22px;
}

@media screen and (max-width: 767px) {

	/*
	 * The phone stack moved to the 21:10 block, and flipped from
	 * column-reverse to column so the button comes FIRST. Nothing here now.
	 */
}

/* ------------- the phone chip row, matched to the legal switcher, 21:03 */
/*
 * The owner: "you see the different sections and how they are cornered make it
 * exactly like the legal make the account exactly how legal has it".
 *
 * Measured .novapep-legal-switcher__chip on /terms/ at 390 and copied it,
 * rather than approximating:
 *
 *                     legal chip              account tile (before)
 *   height            32px                    38px
 *   padding           0 13px                  0 14px
 *   border-radius     0                       999px   <- the rounded one
 *   border            1px #D6DAE0             1px
 *   background        #FFFFFF                 -
 *   type              Sora 12/400, ls 0.69px  14/600
 *   colour            #4A5568                 -
 *   active            #0A0A0A bg, #FFFFFF,    same fill, but a pill
 *                     weight 600
 *   row               flex, gap 6px           gap 7px
 *
 * The legal row also carries its own ground (#EEF1F4) and 14px/20px padding,
 * which is within a shade of --np-page, so the band reads as the page rather
 * than as a bar. That is matched too so the two rows sit identically.
 *
 * The tile icon is dropped here: the legal chips are text only, and so are
 * frame 3d's. It stays on the desktop rail, where the frame does draw it.
 */
@media screen and (max-width: 1023px) {

	/*
	 * The layout is a flex column with gap:16px and the row carried a 15px
	 * block margin of its own, so it sat 31px clear on BOTH sides. Measured
	 * against /terms/ at 390, where the same row is 24px under the lede and
	 * flush (0px) against the content below it.
	 *
	 * The layout gap is dropped on the phone and the spacing stated here, so
	 * one rule owns it rather than two adding up.
	 */
	.np-account__layout {
		gap: 0;
	}

	.np-account__nav-list {
		gap: 6px;
		margin-block: 24px 0;
		padding-block: 14px;
		background: #EEF1F4;
	}

	.np-account__tile {
		height: 32px;
		padding: 0 13px;
		background: #FFFFFF;
		border: 1px solid #D6DAE0;
		border-radius: 0;
		font-family: var(--np-font-body, 'Sora', sans-serif);
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0.69px;
		color: var(--np-muted, #4A5568);
	}

	.np-account__tile.is-on,
	.np-account__tile[aria-current="page"] {
		background: #0A0A0A;
		border-color: #0A0A0A;
		font-weight: 600;
		color: #FFFFFF;
	}

	.np-account__tile-icon {
		display: none;
	}
}

/* =====================================================================
   THE ACCOUNT SECTIONS, MEASURED AGAINST FRAME 3c - 12/09/26 22:57

   The owner, 22:19: "account page sections layout none like the design",
   then 22:55: "orders and adresses and account details" / "compare that
   to the design".

   WHICH FRAME IS WHICH, because it was not obvious and it matters:

     3b / 3c / 3d   LOGGED IN, at 1240 / 1600 / 390
     3a / 3e / 3f   LOGGED OUT - the login + register view

   3c is ONE frame carrying all four logged-in sections stacked:
   dashboard, order history, addresses, account details. So there is no
   separate orders frame or addresses frame; they are bands inside 3c.

   MEASURED AT 1600 BEFORE WRITING. Most of this page was already right
   and is deliberately untouched:

     layout grid     280px 1fr, gap 26, margin-top 24, align start   ok
                     (gap 28 since 22/10/26, handoff-2110)
     stats           3-up, gap 1px on #E1E4E8, radius 14, clipped    ok
     stat value      Space Grotesk 36/600/-0.03em, line-height 1     ok
     dash row        1fr 380px, gap 18                               ok
     panels          26px 28px 28px, radius 14, h 21/600             ok
     orders table    160px 1fr 140px 120px 130px, gap 18,
                     head 15px 28px, row 18px 28px                   ok

   SIX THINGS WERE NOT:

     1  WITHDRAWN - THIS WAS A MEASUREMENT ERROR, 23:03. I measured
        .np-account__nav, saw no padding and no ground, and called the
        rail uncarded. The card is on .np-account__NAV-LIST inside
        @media (min-width: 768px) and always was. The rule written for
        it here did two bad things: a card inside a card on desktop,
        and on the phone it wrapped the horizontal chip row in a card
        and forced it to a column - destroying the scrolling chip rail
        that was built to match the legal page at the owner's instruction.
        Deleted, not scoped: there was nothing to fix.
        Measure the element that CARRIES the declaration, not its
        parent.
     2  eyebrow      13px   3c: 12px
     3  tile label   14px   3c: 15px
     4  stat label   13px   3c: 12px
     5  addresses    and 6  details - their rules went on 21/10/26, when
                     the theme began drawing both forms from handoff-2110
                     frames 4a-4d (end of this file).
   ===================================================================== */

/*
 * 2, 3, 4. The three type sizes 3c states.
 *
 * SCOPED TO 768+, 23:03. Written unscoped at 22:57 and that broke the phone:
 * below 768 the rail is not a rail at all, it is the horizontal scrolling chip
 * row typed to match the legal page at the owner's instruction (21:03), and a
 * 15px tile label is not that type. 3c is the DESKTOP frame; 3d draws the
 * phone and it does not restate these.
 */
@media (min-width: 768px) {

	.np-account .np-account__eyebrow {
		font-size: 12px;
	}

	.np-account .np-account__tile-label {
		font-size: 15px;
	}

	.np-account .np-account__stat-label {
		font-size: 12px;
	}
}

/*
 * The show-password toggle WooCommerce's script adds to a password field,
 * pinned inside its field (12/09/26 23:08: a bare `button` rule had thrown it
 * out of its 48px field). The wrapper WooCommerce prints here is `span.password-input`, NOT
 * the `.woocommerce-password-input` its other forms use - measured, because a
 * rule written for the wrong wrapper would have styled nothing.
 */
.np-account .password-input {
	position: relative;
	display: block;
}

.np-account .password-input .show-password-input {
	position: absolute;
	top: 50%;
	right: 12px;
	left: auto;
	width: 24px;
	height: 24px;
	min-height: 0;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	background: none;
	border: 0;
}

/* =========================================================================
   ONE ORDER - 21/10/26, handoff-2110 frames 3a (desktop 1600) and 3b (phone
   390), woocommerce/myaccount/view-order.php.

   The cards, timeline, item lines, totals and address card are the
   order-received page's, from checkout.css (loaded on this endpoint), with
   2d/2e's values, which 3a/3b repeat. What is here is what that page does
   not have: the head with the number and status, the buttons, the help card
   and the order updates. Values are the frames' inline styles; 390 is the
   base, 1600 the 768 block, as everywhere in this file.
   ========================================================================= */

.np-ord {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* checkout.css orders the order-received cards for 2e (order: 6 on the
   address card, 1 on the payment card, which the state card shares since
   23/10/26); here the cards run in source order (traps.md #125). */
.np-ord .np-or__where-to,
.np-ord .np-or__pay {
	order: 0;
}

.np-ord__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 4px 2px;
}

.np-ord__head-copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.np-ord .np-ord__back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	color: #2F3742;
	text-decoration: none;
}

.np-ord__back svg {
	display: block;
	width: 16px;
	height: 16px;
}

.np-ord .np-ord__title {
	margin: 0;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: #14161A;
}

.np-ord__number {
	font-family: 'Space Mono', monospace;
	font-size: 24px;
	letter-spacing: 0.01em;
}

.np-ord__meta {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	color: #2F3742;
}

.np-ord__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.np-ord__chip-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

/* The five status words' colours (handoff-2310 README "Status words"),
   23/10/26. Was: ok green, wait amber, off grey. */
.np-ord__chip--awaiting {
	background: #FBF0DF;
	color: #8A5A12;
}

.np-ord__chip--awaiting .np-ord__chip-dot {
	background: #C8871E;
}

.np-ord__chip--paid {
	background: #E9EDF2;
	color: #14161A;
}

.np-ord__chip--paid .np-ord__chip-dot {
	background: #14161A;
}

.np-ord__chip--dispatched {
	background: #E7F4EC;
	color: #1E6B3A;
}

.np-ord__chip--dispatched .np-ord__chip-dot {
	background: #1E8E4A;
}

.np-ord__chip--cancelled {
	background: #FBE9E7;
	color: #9B2C1F;
}

.np-ord__chip--cancelled .np-ord__chip-dot {
	background: #C8402F;
}

.np-ord__chip--refunded,
.np-ord__chip-- {
	background: #EEF0F3;
	color: #4A5568;
}

.np-ord__chip--refunded .np-ord__chip-dot,
.np-ord__chip-- .np-ord__chip-dot {
	background: #6B7480;
}

/* The head's buttons: two halves of one row on phone (3d, 2c's Invoice and
   Order again), each its own width from 768. */
.np-ord__actions {
	display: flex;
	gap: 10px;
}

.np-ord__actions .np-ord__button {
	flex: 1 1 0;
}

.np-ord__button svg {
	display: block;
	flex-shrink: 0;
	width: 17px;
	height: 17px;
}

.np-ord .np-ord__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	box-sizing: border-box;
	height: 48px;
	padding: 0 12px;
	background: #FFFFFF;
	border: 1.5px solid #14161A;
	border-radius: 11px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: #14161A;
	text-decoration: none;
}

.np-ord .np-ord__button--ink {
	background: #14161A;
	border: none;
	color: #FFFFFF;
}

.np-ord .np-ord__link {
	font-size: 13px;
	font-weight: 600;
	color: #14161A;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.np-ord__card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

/* The help card (3b): copy over a full-width Get help. */
.np-ord__help {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
}

.np-ord__help-copy {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 13px;
	align-items: start;
}

.np-ord__help .np-ord__button {
	display: flex;
	height: 46px;
	padding: 0 24px;
}

/* Order updates: WooCommerce's notes to the customer, kept from its own
   template. Not in the frames; drawn in their card and type. */
.np-ord__note-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.np-ord__note {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid #EDEFF2;
}

.np-ord__note-date {
	font-size: 13px;
	font-weight: 500;
	color: #4A5568;
}

.np-ord__note-text {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	color: #2F3742;
}

.np-ord__note-text p {
	margin: 0;
}

@media (min-width: 768px) {

	.np-ord {
		gap: 16px;
	}

	.np-ord__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 20px;
		padding: 0 0 6px;
	}

	.np-ord .np-ord__back {
		font-size: 14px;
	}

	.np-ord .np-ord__title {
		font-size: 38px;
	}

	.np-ord__number {
		font-size: 32px;
	}

	.np-ord__meta {
		font-size: 15px;
	}

	.np-ord__actions {
		display: flex;
		flex-shrink: 0;
	}

	.np-ord__actions .np-ord__button {
		flex: 0 0 auto;
	}

	.np-ord .np-ord__button {
		padding: 0 24px;
		font-size: 15px;
	}

	/* 3a: copy on the left, Get help on the right. */
	.np-ord__help {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		padding: 22px 26px;
	}

	.np-ord__help .np-ord__button {
		display: inline-flex;
		flex-shrink: 0;
		font-size: 14px;
	}
}

/* =========================================================================
   ADDRESSES AND ACCOUNT DETAILS - 21/10/26, handoff-2110 frames 4a / 4b
   (addresses, the shipping address open) and 4c / 4d (account details).
   woocommerce/myaccount/my-address.php, form-edit-address.php and
   form-edit-account.php, with novapep_render_account_address_form()
   (inc/account.php).

   The fields are checkout.css's field grid (.np-co__fields, loaded on these
   endpoints), which carries the frames' labels, 50px inputs, borders and the
   half rows keyed to WooCommerce's row ids from 768. What is here is the
   page around it, and the two places the account grid differs from the
   checkout's: 4b keeps first/last and postcode/city in pairs on a phone, and
   the grid sits 20px under its title on desktop. Values are the frames'
   inline styles; 390 is the base, 1600 the 768 block.
   ========================================================================= */

.np-acct {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.np-acct__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 4px 2px;
}

.np-acct .np-acct__crumb {
	align-self: flex-start;
	font-size: 13px;
	font-weight: 600;
	line-height: normal;
	color: #2F3742;
	text-decoration: none;
}

.np-acct .np-acct__title {
	margin: 0;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: #14161A;
}

.np-acct .np-acct__lede {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	color: #2F3742;
}

.np-acct__card {
	padding: 20px 18px 22px;
	background: #FFFFFF;
	border-radius: 14px;
}

/* The address being edited: 4a/4b ring it in ink. */
.np-acct__card--edit {
	box-shadow: inset 0 0 0 1.5px #14161A;
}

.np-acct__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.np-acct .np-acct__card-title {
	margin: 0;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: normal;
	color: #14161A;
}

.np-acct__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 28px;
	padding: 0 12px;
	background: #EEF2F6;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	color: #14161A;
}

.np-acct__chip-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #14161A;
}

/* The field grid: checkout.css's, re-paired for 4b and spaced for 4a. */
.np-acct .np-acct__fields {
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 16px;
}

.np-acct .np-acct__fields .form-row {
	grid-column: 1 / -1;
}

.np-acct .np-acct__fields #shipping_first_name_field,
.np-acct .np-acct__fields #shipping_last_name_field,
.np-acct .np-acct__fields #shipping_postcode_field,
.np-acct .np-acct__fields #shipping_city_field,
.np-acct .np-acct__fields #billing_first_name_field,
.np-acct .np-acct__fields #billing_last_name_field,
.np-acct .np-acct__fields #billing_postcode_field,
.np-acct .np-acct__fields #billing_city_field {
	grid-column: auto;
}

/* 4d stacks every account-details field on a phone. */
.np-acct--details .np-acct__fields {
	grid-template-columns: 1fr;
}

.np-acct .np-acct__hint {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: #4A5568;
}

.np-acct__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	margin-top: 18px;
}

.np-acct .np-acct__save {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	box-sizing: border-box;
	height: 52px;
	min-height: 0;
	margin: 0;
	padding: 0 24px;
	background: #14161A;
	border: none;
	border-radius: 11px;
	cursor: pointer;
	font-family: 'Sora', sans-serif;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	color: #FFFFFF;
}

.np-acct--details .np-acct__save {
	width: 100%;
	margin-top: 18px;
}

.np-acct .np-acct__save--outline {
	background: #FFFFFF;
	border: 1.5px solid #14161A;
	color: #14161A;
}

.np-acct .np-acct__cancel {
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	color: #14161A;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* A closed address (4a's billing card). */
.np-acct__card--summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 20px 18px;
}

.np-acct__summary {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.np-acct__lines {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	color: #2F3742;
}

.np-acct__empty {
	color: #4A5568;
}

.np-acct .np-acct__edit {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 9px;
	box-sizing: border-box;
	height: 40px;
	padding: 0 16px;
	background: #FFFFFF;
	border: 1.5px solid #14161A;
	border-radius: 11px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: #14161A;
	text-decoration: none;
}

.np-acct__form-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.np-acct .np-acct__delete {
	margin: 2px 4px 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	color: #4A5568;
}

.np-acct .np-acct__delete a {
	font-weight: 600;
	color: #14161A;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 768px) {

	.np-acct,
	.np-acct__form-wrap {
		gap: 16px;
	}

	.np-acct__head {
		padding: 0 0 6px;
	}

	.np-acct .np-acct__crumb {
		font-size: 14px;
	}

	.np-acct .np-acct__title {
		font-size: 38px;
	}

	.np-acct .np-acct__lede {
		font-size: 15px;
	}

	.np-acct__card {
		padding: 26px 28px 28px;
	}

	.np-acct .np-acct__card-title {
		font-size: 22px;
	}

	.np-acct .np-acct__fields {
		gap: 14px;
		margin-top: 20px;
	}

	/* From here the pairs are checkout.css's (row ids, 768 block), which add
	   country and phone; the account-details form pairs by class. The billing
	   form has no phone (it is the shipping form's), so its country takes the
	   row rather than half of it. */
	.np-acct .np-acct__fields #billing_country_field {
		grid-column: 1 / -1;
	}

	.np-acct--details .np-acct__fields {
		grid-template-columns: 1fr 1fr;
	}

	.np-acct--details .np-acct__fields .np-acct__half {
		grid-column: auto;
	}

	.np-acct .np-acct__hint {
		font-size: 13px;
	}

	.np-acct__actions {
		flex-direction: row;
		align-items: center;
		gap: 18px;
		margin-top: 22px;
	}

	.np-acct .np-acct__save {
		display: inline-flex;
	}

	.np-acct--details .np-acct__save {
		width: auto;
		margin-top: 22px;
	}

	.np-acct__card--summary {
		padding: 24px 28px;
	}
}

/* =========================================================================
   The order-received page's email check, and the account cards' fields -
   23/10/26. inc/enqueue.php loads this file on that page too. Since the
   handoff-2310 build (23/10/26 afternoon) checkout/thankyou.php draws every
   state itself, so the account's order page is no longer drawn there and its
   .np-ord--received rule is gone; the signed-out cards (8a-8d) are the block
   at the end of this file.
   ========================================================================= */

/* The account cards' fields at 16px on phones - 23/10/26. The field rule
   above sets 15px with no phone value, so iPhone Safari zoomed into the
   reset-password, set-new-password and email-check fields (log in and create
   account are the sign-up box, already 16px; traps.md #119, third
   occurrence: the 22/10 phone sweep ran signed in and never saw these
   forms). 16 is the size at which it does not. */
@media (max-width: 767px) {
	.woocommerce .np-auth .np-auth__fields input[type="text"],
	.woocommerce .np-auth .np-auth__fields input[type="email"],
	.woocommerce .np-auth .np-auth__fields input[type="password"],
	.woocommerce .np-auth .np-auth__fields input[type="tel"] {
		font-size: 16px;
	}
}

/* =========================================================================
   SIGNED OUT ON AN ORDER - 23/10/26, handoff-2310 frames 8a/8b (the email
   check) and 8c/8d (the log-in card), inc/account.php
   novapep_render_order_signin(). The template's own values; 390 is the base,
   1600 the 768 block. The page container gives 12px on phone, so 4px more
   makes the frame's 16.
   ========================================================================= */

.np-osign {
	display: flex;
	justify-content: center;
	padding: 24px 4px 32px;
	font-family: 'Sora', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	color: #14161A;
}

.np-osign__inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 480px;
}

.np-osign__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 26px 20px 24px;
	background: #FFFFFF;
	border-radius: 16px;
	text-align: center;
}

.np-osign__mark {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	background: #F2F5F8;
	border-radius: 50%;
	color: #14161A;
}

.np-osign__mark svg,
.np-osign__help svg {
	display: block;
}

.np-osign__eyebrow {
	margin-top: 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #2F3742;
}

.np-osign .np-osign__title {
	margin: 8px 0 0;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.08;
	color: #14161A;
}

.np-osign__lede {
	max-width: 40ch;
	margin: 10px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.65;
	color: #2F3742;
}

/* WooCommerce borders and pads form.login (woocommerce.css, 0,2,1). */
.woocommerce .np-osign form.np-osign__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	margin: 22px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	text-align: left;
}

.np-osign__field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
}

.np-osign__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #14161A;
}

.np-osign .np-osign__input {
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 16px;
	background: #FFFFFF;
	border: 1.5px solid #CFD8E2;
	border-radius: 11px;
	box-shadow: none;
	font-family: 'Sora', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #14161A;
}

/* 8a's example address is #8A94A0; the words are the sign-up box's own
   placeholder (inc/signup.php), not the frame's invented one. */
.np-osign .np-osign__input::placeholder {
	color: #8A94A0;
	opacity: 1;
}

.np-osign .np-osign__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	min-height: 0;
	margin: 4px 0 0;
	padding: 0;
	background: #14161A;
	border: 0;
	border-radius: 11px;
	cursor: pointer;
	font-family: 'Sora', sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	color: #FFFFFF;
}

.np-osign__or {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	font-weight: 500;
	color: #4A5568;
}

.np-osign__or::before,
.np-osign__or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #E1E4E8;
}

.np-osign .np-osign__second {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 50px;
	background: #FFFFFF;
	border: 1.5px solid #14161A;
	border-radius: 11px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	color: #14161A;
}

.np-osign .np-osign__link {
	align-self: center;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: #14161A;
}

/* A refused email or password: the colour the checkout gives a refused code
   (checkout.css .np-co__code-error), as the old email-check card did. */
.np-osign .np-osign__fail {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: #8A5A12;
}

.np-osign__foot {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 13px;
	align-items: start;
	padding: 18px 20px;
	background: #FFFFFF;
	border-radius: 14px;
}

.np-osign__help {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: #F2F5F8;
	border-radius: 50%;
	color: #2F3742;
}

.np-osign__foot-text {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	color: #2F3742;
}

@media (min-width: 768px) {

	.np-osign {
		padding: 64px 0 80px;
	}

	.np-osign__card {
		padding: 34px 34px 32px;
	}

	.np-osign .np-osign__title {
		font-size: 32px;
	}

	.np-osign__lede {
		font-size: 15px;
	}

	.np-osign .np-osign__input {
		font-size: 15px;
	}
}