/*
 * Account area — Opnar's grouped rail and dashboard.
 *
 * Opnar's surface split is carried over verbatim: cream, borderless cards
 * are content; white cards with a border are chrome. It is the same
 * language the cart and checkout already speak here, so the account does
 * not read as a different product.
 */

/*
 * `:has()` scopes the grid to the ONE wrapper that actually contains the
 * rail. `.woocommerce-account .woocommerce` alone also matched the nested
 * `.woocommerce` wrapper around the recently-viewed product loop, turning it
 * into a second 208px-sidebar grid — the cards rendered about 60px wide
 * inside their own column.
 *
 * A structural condition is the right tool here: the layout depends on the
 * element being the account shell, and no class on the markup can express
 * that as reliably as "the one holding the navigation".
 */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 208px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

@media (max-width: 900px) {
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ── Rail ──────────────────────────────────────────────────────── */

/*
 * Three classes, not one. Storefront sizes this rail with
 *   .page-template-template-fullwidth-php .woocommerce-MyAccount-navigation
 *     { width: 21.739%; float: right }
 * at (0,2,0), which outranks a bare `.fv-acc-nav` — and inside a grid that
 * percentage resolves against the TRACK, so the rail rendered at 45px of
 * its own 208px column with every label broken mid-word.
 *
 * Same trap as the product page: a percentage width is not wrong, it is
 * being measured against a containing block the parent theme never
 * anticipated.
 */
.woocommerce-account .woocommerce .fv-acc-nav {
	float: none;
	width: auto;
	margin: 0;
	display: flex;
	flex-direction: column;
	/* Matches the 1px between items inside a group, so Log out — which is
	 * its own group only so a filter can reorder around it — sits at the
	 * same rhythm as everything above it. */
	gap: 1px;
}

.fv-acc-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.fv-acc-group li { margin: 0; }

.fv-acc-group-label {
	font-family: var(--fv-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fv-ink-3);
	margin: 0 0 7px 10px;
}

.fv-acc-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: var(--fv-radius-md);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--fv-ink-2);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.fv-acc-nav a:hover {
	background: var(--fv-cream);
	color: var(--fv-ink);
}

.fv-acc-nav .is-current > a {
	background: var(--fv-accent-soft);
	color: var(--fv-accent-hover);
	font-weight: 700;
}

.fv-acc-i {
	width: 17px;
	height: 17px;
	flex: none;
	opacity: 0.75;
}

.fv-acc-nav .is-current .fv-acc-i { opacity: 1; }

/*
 * Below 900 the rail becomes a horizontal strip above the content. Opnar
 * collapses to icon-and-short-label at this width; here the labels stay,
 * because there are six items rather than nine and they fit.
 */
@media (max-width: 900px) {
	.woocommerce-account .woocommerce .fv-acc-nav {
		flex-direction: row;
		gap: 4px;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
	}

	.fv-acc-nav::-webkit-scrollbar { display: none; }

	/* The group labels are vertical-rail furniture; in a strip they would
	 * interrupt the row. */
	.fv-acc-group-label { display: none; }

	.fv-acc-group ul { flex-direction: row; gap: 4px; }

	.fv-acc-nav a {
		white-space: nowrap;
		border: 1px solid var(--fv-line);
		background: var(--fv-surface);
	}

	.fv-acc-nav .is-current > a { border-color: var(--fv-accent); }
}

/* ── Content column ────────────────────────────────────────────── */

.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;

	/*
	 * A grid item refuses to be narrower than its own content unless it is
	 * told to, and this one holds whatever an account section renders. A
	 * single `white-space: nowrap` line inside — a long ticket subject, an
	 * order's product name — therefore set the column's minimum width and
	 * blew the track out past the viewport: measured 662px inside a 370px
	 * container on a 390px screen. Nothing looked wrong at a glance because
	 * `body` hides the horizontal overflow, so the text was simply cut off
	 * mid-word and the ellipsis it was given never had a chance to appear.
	 */
	min-width: 0;
}

/*
 * Storefront paints a Font Awesome glyph before every account nav link.
 * Ours already carry an inline SVG, so the two stacked — a page icon and a
 * meaningful one, side by side on every row.
 */
.hentry .entry-content .fv-acc-nav ul li a::before,
.fv-acc-nav ul li a::before {
	content: none;
}

/* And its list chrome: borders between rows fight the pill highlight. */
.hentry .entry-content .fv-acc-nav ul,
.hentry .entry-content .fv-acc-nav ul li {
	border: 0;
	margin-left: 0;
}

.hentry .entry-content .fv-acc-nav ul li a {
	padding: 9px 10px;
}

.fv-acc-dash {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Cream = content. */
.fv-acc-hero {
	background: var(--fv-cream);
	border-radius: var(--fv-radius-lg);
	box-shadow: var(--fv-shadow-sm);
	padding: 20px 22px;
}

.fv-acc-hello {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--fv-ink);
	margin: 0 0 4px;
}

.fv-acc-hello-sub {
	font-size: 13px;
	color: var(--fv-ink-2);
	margin: 0;
}

.fv-acc-cta {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 16px;
	margin-top: 14px;
	border-radius: var(--fv-radius-md);
	background: var(--fv-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.fv-acc-cta:hover { background: var(--fv-accent-hover); color: #fff; }

/* ── Recent orders ─────────────────────────────────────────────── */

.fv-acc-section-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 10px;
}

.fv-acc-section-head h2 {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}

.fv-acc-more {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fv-accent-hover);
	text-decoration: none;
}

.fv-acc-more:hover { color: var(--fv-accent); text-decoration: underline; }

.fv-acc-orders {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fv-acc-orders li { margin: 0; }

/* White + border = chrome. */
.fv-acc-order {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-lg);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.fv-acc-order:hover { border-color: var(--fv-line-2); }

.fv-acc-order-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.fv-acc-order-no {
	font-family: var(--fv-mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--fv-ink);
}

.fv-acc-order-date {
	font-size: 11.5px;
	color: var(--fv-ink-3);
}

.fv-acc-order-side {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.fv-acc-order-total {
	font-family: var(--fv-mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--fv-ink);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
	.fv-acc-order { flex-wrap: wrap; }
	.fv-acc-order-side { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ── Status pills ──────────────────────────────────────────────── */

/*
 * Tone, not status name. WooCommerce labels the status; what it has no
 * opinion about is whether the customer should be pleased, waiting or
 * worried — which is the part that has to read without being read.
 */
.fv-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: var(--fv-radius-full);
	font-family: var(--fv-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * Five tones that have to be distinguishable at 10px, in mono, on a cream or
 * white card.
 *
 * `is-wait` used to share --fv-muted with `is-dead`, differing only by one
 * step of ink — so a cancelled order and an order in progress read as the
 * same thing at a glance. Waiting now carries its own amber, which also says
 * "needs attention" rather than "inert".
 *
 * The tints are literals like the green and red already were: they are
 * surface washes for one component, not palette entries other things build
 * on.
 */
.fv-pill.is-good { background: #e8f6ee; color: #0f7a45; }
.fv-pill.is-live { background: var(--fv-accent-soft); color: var(--fv-accent-hover); }
.fv-pill.is-wait { background: #fff4e0; color: #8a5300; }
.fv-pill.is-dead { background: var(--fv-muted); color: var(--fv-ink-3); }
.fv-pill.is-bad  { background: #fff0f1; color: var(--fv-hot-ink); }

/* ── Chrome cards ──────────────────────────────────────────────── */

.fv-acc-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 620px) {
	.fv-acc-cards { grid-template-columns: 1fr; }
}

.fv-acc-card {
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-lg);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fv-acc-card h2 {
	font-family: var(--fv-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--fv-ink-3);
	margin: 0;
}

.fv-acc-card address {
	font-style: normal;
	font-size: 13px;
	line-height: 1.6;
	color: var(--fv-ink-2);
	margin: 0;
}

.fv-acc-card .fv-acc-more { margin-left: 0; margin-top: auto; }

.fv-acc-kv {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
	margin: 0;
	font-size: 13px;
}

.fv-acc-kv dt { color: var(--fv-ink-3); }

.fv-acc-kv dd {
	margin: 0;
	font-family: var(--fv-mono);
	font-size: 12.5px;
	color: var(--fv-ink);
	word-break: break-word;
}

.fv-acc-empty { color: var(--fv-ink-3); font-size: 13px; margin: 0; }

/* ── WooCommerce's own screens inside the content column ───────── */

.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-MyAccount-content legend {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-table--order-details {
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-lg);
	overflow: hidden;
	font-size: 13px;
}

.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-table--order-details th {
	font-family: var(--fv-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fv-ink-3);
	background: var(--fv-muted);
}

.woocommerce-account .woocommerce-Address {
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-lg);
	padding: 16px 18px;
}

/* ── Link underlines ───────────────────────────────────────────────
 * Storefront underlines every anchor inside `.hentry .entry-content`
 * at (0,2,1). The rail rows and order rows are whole tappable blocks
 * with their own chrome; an underline through them reads as body copy
 * that happens to be linked. Three classes wins outright rather than by
 * load order.
 */
.woocommerce-account .woocommerce .fv-acc-nav a,
.woocommerce-account .woocommerce .fv-acc-order,
.woocommerce-account .woocommerce .fv-acc-cta,
.woocommerce-account .woocommerce .fv-acc-order-no {
	text-decoration: none;
}

/* "View all" and "Edit address" are genuine inline links and keep their
 * underline on hover — but not at rest, where they sit inside a card. */
.woocommerce-account .woocommerce .fv-acc-more {
	text-decoration: none;
}

.woocommerce-account .woocommerce .fv-acc-more:hover {
	text-decoration: underline;
}

/* ── List screen (recently viewed) ─────────────────────────────── */

/* Same construction as .fv-orders / .fv-addr / .fv-profile: the screen
 * wrapper is a flex column and owns the spacing, so the gap under the title
 * is the one value every account screen shares. WooCommerce's own margin on
 * ul.products has to go, or it stacks on top of the gap. */
.fv-acc-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fv-acc-list ul.products {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
}

@media (max-width: 900px) {
	.fv-acc-list ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fv-acc-blank {
	background: var(--fv-cream);
	border-radius: var(--fv-radius-lg);
	box-shadow: var(--fv-shadow-sm);
	padding: 34px 24px;
	text-align: center;
}

.fv-acc-blank h2 {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 6px;
}

.fv-acc-blank p {
	font-size: 13px;
	color: var(--fv-ink-2);
	margin: 0 0 16px;
}

/* ══════════════════════════════════════════════════════════════
   PROFILE — port of Opnar's account profile screen
   ══════════════════════════════════════════════════════════════ */

.fv-profile {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fv-profile-head { padding: 0 4px; }

.fv-profile-head h1 {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--fv-ink);
}

@media (min-width: 640px) {
	.fv-profile-head h1 { font-size: 22px; }
}

.fv-profile-head p {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--fv-ink-2);
	max-width: 62ch;
}

/* White + border = chrome, the same split the dashboard uses. */
.fv-card {
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-lg);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	padding: 14px;
}

@media (min-width: 640px) {
	.fv-card { padding: 18px; }
}

.fv-card h2 {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
	color: var(--fv-ink);
}

.fv-card-sub {
	margin: -6px 0 14px;
	font-size: 13px;
	color: var(--fv-ink-2);
}

/* ── Messages ──────────────────────────────────────────────────── */

.fv-profile-msg {
	padding: 10px 12px;
	border-radius: var(--fv-radius-lg);
	font-size: 13px;
}

.fv-profile-msg.is-ok {
	background: color-mix(in oklab, var(--fv-good) 8%, transparent);
	border: 1px solid color-mix(in oklab, var(--fv-good) 45%, transparent);
	color: #0f7a45;
}

.fv-profile-msg.is-err {
	background: color-mix(in oklab, var(--fv-hot) 8%, transparent);
	border: 1px solid color-mix(in oklab, var(--fv-hot) 45%, transparent);
	color: var(--fv-hot-ink);
}

/* ── Forms ─────────────────────────────────────────────────────── */

.fv-profile-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fv-grid-2 {
	display: grid;
	gap: 12px;
}

@media (min-width: 640px) {
	.fv-grid-2 { grid-template-columns: 1fr 1fr; }
}

.fv-lbl {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 14px;
}

.fv-lbl > span {
	font-weight: 500;
	color: var(--fv-ink);
}

.woocommerce-account .fv-lbl input[type="text"],
.woocommerce-account .fv-lbl input[type="date"],
.woocommerce-account .fv-lbl input[type="password"] {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-md);
	font-size: 14px;
	color: var(--fv-ink);
	box-sizing: border-box;
}

.woocommerce-account .fv-lbl input:focus {
	border-color: var(--fv-accent);
	outline: 0;
}

/* ── Gender radios ─────────────────────────────────────────────── */

/*
 * The native control is hidden rather than styled: browsers disagree about
 * what `accent-color` does to a radio's inner dot, and this one has to sit
 * on the same 42px row as the date input beside it.
 */
.fv-radios {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 42px;
	padding: 0 2px;
}

.fv-radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 13.5px;
	color: var(--fv-ink);
}

.fv-radio input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.fv-radio-dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid var(--fv-line-2);
	display: grid;
	place-items: center;
	flex: none;
	transition: border-color 0.12s ease;
}

.fv-radio input:checked + .fv-radio-dot {
	border-color: var(--fv-accent);
}

.fv-radio input:checked + .fv-radio-dot::after {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fv-accent);
}

/* The hidden input still takes focus — show it on the visible proxy. */
.fv-radio input:focus-visible + .fv-radio-dot {
	outline: 2px solid var(--fv-accent);
	outline-offset: 2px;
}

/* ── Buttons ───────────────────────────────────────────────────── */

.fv-actions {
	display: flex;
	justify-content: flex-end;
}

.woocommerce-account .fv-btn-primary {
	height: 38px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--fv-radius-md);
	background: var(--fv-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s ease;
}

.woocommerce-account .fv-btn-primary:hover { background: var(--fv-accent-hover); }

.woocommerce-account .fv-btn-ghost {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-md);
	background: var(--fv-surface);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fv-ink-2);
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.woocommerce-account .fv-btn-ghost:hover {
	background: var(--fv-muted);
	border-color: var(--fv-line-2);
	color: var(--fv-ink);
	text-decoration: none;
}

/* ── Phone & email rows ────────────────────────────────────────── */

.fv-idents {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fv-idents li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	margin: 0;
	border-top: 1px solid var(--fv-line);
}

.fv-idents li:first-child { border-top: 0; padding-top: 0; }
.fv-idents li:last-child { padding-bottom: 0; }

.fv-ident-main { min-width: 0; flex: 1; }

.fv-ident-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--fv-ink);
}

.fv-ident-value {
	font-size: 13px;
	color: var(--fv-ink-3);
	font-family: var(--fv-mono);
	word-break: break-word;
}

.fv-ident-side {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

/*
 * Tinted rather than solid: this is a state readout, not an action, and a
 * saturated pill next to a real button would compete with it.
 */
.fv-ident-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--fv-radius-full);
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}

.fv-ident-pill.is-ok {
	background: color-mix(in oklab, var(--fv-good) 12%, transparent);
	color: #0f7a45;
}

.fv-ident-pill.is-warn {
	background: color-mix(in oklab, var(--fv-warn) 18%, transparent);
	color: #8a6410;
}

@media (max-width: 480px) {
	.fv-idents li { flex-wrap: wrap; }
	.fv-ident-side { width: 100%; justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════
   SAVED ADDRESSES — port of Opnar's account address book
   ══════════════════════════════════════════════════════════════ */

.fv-addr {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fv-addr-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 4px;
	flex-wrap: wrap;
}

.fv-addr-head h1 {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--fv-ink);
}

@media (min-width: 640px) {
	.fv-addr-head h1 { font-size: 22px; }
}

/* `.fv-btn-primary` is a button on forms and an anchor here — the anchor
 * needs the height and centring the button gets from its own box. */
.woocommerce-account a.fv-btn-primary {
	display: inline-flex;
	align-items: center;
	height: 40px;
	text-decoration: none;
}

.fv-addr-grid {
	display: grid;
	gap: 12px;
}

@media (min-width: 760px) {
	.fv-addr-grid { grid-template-columns: 1fr 1fr; }
}

.fv-addr-card {
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-lg);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fv-addr-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.fv-addr-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--fv-ink);
}

.fv-addr-flags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: flex-end;
}

/* Outlined, not filled: these mark state on a card that already has
 * buttons, and a solid pill would out-shout them. */
.fv-addr-flag {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border: 1px solid var(--fv-line);
	background: var(--fv-muted);
	border-radius: var(--fv-radius-full);
	font-size: 10.5px;
	font-weight: 600;
	color: var(--fv-ink-2);
	white-space: nowrap;
}

.fv-addr-body {
	font-size: 13px;
	line-height: 1.6;
	color: var(--fv-ink-2);
}

.fv-addr-phone {
	font-family: var(--fv-mono);
	font-size: 12.5px;
	color: var(--fv-ink-3);
	margin-top: 2px;
}

.fv-addr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
}

/* Each action is its own POST, so the buttons are separate forms — they
 * must not each claim a line. */
.fv-inline-form { margin: 0; display: inline; }

.woocommerce-account .fv-btn-ghost.is-danger {
	border-color: color-mix(in oklab, var(--fv-hot) 50%, transparent);
	color: var(--fv-hot-ink);
}

.woocommerce-account .fv-btn-ghost.is-danger:hover {
	background: color-mix(in oklab, var(--fv-hot) 8%, transparent);
	border-color: var(--fv-hot);
	color: var(--fv-hot-ink);
}

.fv-addr-empty {
	background: var(--fv-cream);
	border-radius: var(--fv-radius-lg);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	padding: 40px 24px;
	text-align: center;
}

.fv-addr-empty p {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--fv-ink-2);
}

/* ── Form ──────────────────────────────────────────────────────── */

.woocommerce-account .fv-lbl textarea,
.woocommerce-account .fv-lbl select {
	width: 100%;
	padding: 10px 12px;
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-md);
	font-size: 14px;
	color: var(--fv-ink);
	box-sizing: border-box;
	font-family: inherit;
}

.woocommerce-account .fv-lbl select { height: 42px; padding: 0 12px; }

.woocommerce-account .fv-lbl textarea:focus,
.woocommerce-account .fv-lbl select:focus {
	border-color: var(--fv-accent);
	outline: 0;
}

.fv-addr-defaults {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fv-check {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: var(--fv-ink);
	cursor: pointer;
}

.fv-check input {
	width: 17px;
	height: 17px;
	accent-color: var(--fv-accent);
	margin: 0;
	flex: none;
}

.fv-addr .fv-actions { gap: 8px; align-items: center; }

/*
 * Storefront underlines every anchor in `.hentry .entry-content` at
 * (0,2,1), which beats a two-class `.woocommerce-account .fv-btn-ghost`.
 * These are buttons with their own chrome; three classes wins outright
 * rather than by load order.
 */
.woocommerce-account .woocommerce .fv-btn-ghost,
.woocommerce-account .woocommerce .fv-btn-ghost:hover,
.woocommerce-account .woocommerce a.fv-btn-primary,
.woocommerce-account .woocommerce a.fv-btn-primary:hover {
	text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════
   ORDERS — port of Opnar's account orders screen
   ══════════════════════════════════════════════════════════════ */

.fv-orders {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fv-orders-head,
.fv-acc-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 0 4px;
}

.fv-orders-head h1,
.fv-acc-head h1 {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--fv-ink);
}

@media (min-width: 640px) {
	.fv-orders-head h1,
	.fv-acc-head h1 { font-size: 22px; }
}

.fv-orders-count,
.fv-acc-count {
	font-size: 12px;
	color: var(--fv-ink-3);
}

.fv-orders-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
 * One order, one row: number, status, meta, total, actions — all on a
 * single line, with the meta column absorbing the slack so the total and
 * buttons stay put down the list and can be scanned as columns.
 *
 * Cream ground, matching the dashboard: Opnar uses it for order cards
 * specifically, so they read as records rather than chrome.
 */
.fv-order {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--fv-cream);
	border-radius: var(--fv-radius-lg);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	padding: 12px 14px;
	margin: 0;
}

/* Mono, because an order number is a reference a customer reads back over
 * the phone — even digit widths make that easier. */
.woocommerce-account .woocommerce .fv-order-no {
	font-family: var(--fv-mono);
	font-size: 14px;
	font-weight: 700;
	color: var(--fv-ink);
	text-decoration: none;
	flex: none;
}

.woocommerce-account .woocommerce .fv-order-no:hover { color: var(--fv-accent); }

.fv-order .fv-pill { flex: none; }

/* The only flexible cell — everything else keeps its natural width, so the
 * right-hand columns line up between rows. */
.fv-order-meta {
	flex: 1;
	min-width: 0;
	font-size: 12px;
	color: var(--fv-ink-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
}

/*
 * Both right-hand cells reserve their width so they form real columns down
 * the list. Without it a row whose order cannot be cancelled loses the
 * Cancel button and pulls its total sideways, which makes the one thing
 * customers scan for — the amount — impossible to compare at a glance.
 */
.fv-order-total {
	flex: none;
	min-width: 92px;
	text-align: right;
	font-family: var(--fv-mono);
	font-size: 14px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--fv-ink);
}

.fv-order-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	flex: none;
	min-width: 152px;
}

.woocommerce-account .woocommerce .fv-btn-ghost.is-quiet {
	color: var(--fv-ink-3);
}

.woocommerce-account .woocommerce .fv-btn-ghost.is-quiet:hover {
	border-color: color-mix(in oklab, var(--fv-hot) 45%, transparent);
	color: var(--fv-hot-ink);
	background: var(--fv-surface);
}

/*
 * Below 760 a single line cannot hold five cells without truncating the
 * one part that matters — so it wraps, with the meta line taking the full
 * width and the total pushed against the actions.
 */
@media (max-width: 760px) {
	.fv-order {
		flex-wrap: wrap;
		gap: 8px 10px;
	}

	.fv-order-meta {
		flex: 1 0 100%;
		white-space: normal;
		order: 3;
	}

	.fv-order-actions {
		order: 5;
		margin-left: auto;
		min-width: 0;
	}

	.fv-order-total {
		order: 4;
		min-width: 0;
		text-align: left;
	}
}

.fv-orders-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 4px 0;
	font-size: 13px;
	color: var(--fv-ink-3);
}

.fv-orders-pager-btns { display: flex; gap: 8px; }


/* ══════════════════════════════════════════════════════════════
   ORDER DETAIL — port of Opnar's account order screen
   ══════════════════════════════════════════════════════════════ */

.fv-od {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.woocommerce-account .woocommerce .fv-od-back {
	align-self: flex-start;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fv-ink-3);
	text-decoration: none;
	padding: 0 4px;
}

.woocommerce-account .woocommerce .fv-od-back:hover { color: var(--fv-accent); }

/* Cream = the record itself, matching the orders list. */
.fv-od-head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--fv-cream);
	border-radius: var(--fv-radius-lg);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	padding: 16px;
}

@media (min-width: 640px) {
	.fv-od-head {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		padding: 20px;
	}
}

.fv-od-head-main { min-width: 0; }

.fv-od-eyebrow {
	font-size: 12px;
	color: var(--fv-ink-3);
}

.fv-od-head h1 {
	font-family: var(--fv-mono);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--fv-ink);
}

@media (min-width: 640px) {
	.fv-od-head h1 { font-size: 22px; }
}

.fv-od-line {
	margin-top: 4px;
	font-size: 13px;
	color: var(--fv-ink-3);
}

.fv-od-line strong { color: var(--fv-ink); font-weight: 600; }

/* The header pill is a size up from the list's — it is the page's status,
 * not one row's. */
/* `align-self` matters on mobile: the header stacks into a column there, so
 * without it the pill stretches the full card width and stops reading as a
 * status chip. */
.fv-pill.is-lg {
	padding: 5px 12px;
	font-size: 12px;
	flex: none;
	align-self: flex-start;
}

/* ── Section cards ─────────────────────────────────────────────── */

.fv-od-card {
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-lg);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	padding: 14px;
}

@media (min-width: 640px) {
	.fv-od-card { padding: 18px; }
}

.fv-od-card h2 {
	font-family: var(--fv-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--fv-ink-3);
	margin: 0 0 12px;
}

.fv-od-split {
	display: grid;
	gap: 12px;
}

@media (min-width: 760px) {
	.fv-od-split { grid-template-columns: 1fr 1fr; }
}

/* ── Items ─────────────────────────────────────────────────────── */

.fv-od-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fv-od-items li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	margin: 0;
	border-top: 1px solid var(--fv-line);
}

.fv-od-items li:first-child { border-top: 0; padding-top: 0; }
.fv-od-items li:last-child { padding-bottom: 0; }

.fv-od-thumb {
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: var(--fv-radius-md);
	overflow: hidden;
	background: var(--fv-muted);
}

.fv-od-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fv-od-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.woocommerce-account .woocommerce .fv-od-item-name a {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fv-ink);
	text-decoration: none;
}

.woocommerce-account .woocommerce .fv-od-item-name a:hover { color: var(--fv-accent); }

.fv-od-item-meta {
	font-size: 11.5px;
	color: var(--fv-ink-3);
}

/* WooCommerce wraps item meta in its own <p>/<dl>; flatten it to one line. */
.fv-od-item-meta p,
.fv-od-item-meta dl,
.fv-od-item-meta dt,
.fv-od-item-meta dd {
	display: inline;
	margin: 0;
	font-size: inherit;
	color: inherit;
}

.fv-od-item-qty {
	flex: none;
	font-family: var(--fv-mono);
	font-size: 12.5px;
	color: var(--fv-ink-3);
}

.fv-od-item-total {
	flex: none;
	min-width: 84px;
	text-align: right;
	font-family: var(--fv-mono);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--fv-ink);
}

/* ── Timeline ──────────────────────────────────────────────────── */

/*
 * Milestones, not events. WooCommerce records a status but no history a
 * customer can read, so a step is "reached" when the current status is at
 * or past it — no invented timestamps for transitions nobody logged.
 */
.fv-od-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/*
 * Every row is a station the order actually reached, so there is no muted
 * "not yet" state to style — `align-items: flex-start` because a row now
 * carries a timestamp and sometimes a note under its label, and centring
 * would float the dot to the middle of a three-line block.
 */
.fv-od-timeline li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0 0 18px;
	position: relative;
	font-size: 13.5px;
	color: var(--fv-ink-3);
}

.fv-od-timeline li:last-child { padding-bottom: 0; }

/* The connector is drawn from each dot down to the next. */
.fv-od-timeline li::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 14px;
	bottom: 0;
	width: 2px;
	background: var(--fv-line);
}

.fv-od-timeline li:last-child::before { display: none; }

.fv-od-timeline li.is-done::before { background: var(--fv-accent); }

.fv-od-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--fv-line-2);
	background: var(--fv-surface);
	flex: none;
	z-index: 1;
}

.fv-od-timeline li.is-done .fv-od-dot {
	border-color: var(--fv-accent);
	background: var(--fv-accent);
}

.fv-od-timeline li.is-done .fv-od-step {
	color: var(--fv-ink);
	font-weight: 600;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* ── Where the order is right now ──────────────────────────────── */

/*
 * The last station reached is the interesting one, so it gets the ring that
 * marks a live state. Earlier stations stay solid: they happened, they are
 * done, they should not compete.
 */
.fv-od-timeline li.is-current .fv-od-dot {
	box-shadow: 0 0 0 4px var(--fv-accent-soft);
}

.fv-od-timeline li.is-current .fv-od-step {
	font-weight: 700;
}

/* ── Timestamp ─────────────────────────────────────────────────── */

.fv-od-when {
	font-family: var(--fv-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--fv-ink-3);
}

/* ── An actionable line, where the status warrants one ─────────── */

.fv-od-note {
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--fv-accent);
	max-width: 42ch;
}

/* ── An ending, not a step ─────────────────────────────────────── */

/*
 * A cancelled or returned order has stopped, not progressed. The dot and the
 * line into it take the alert colour so the journey visibly ends rather than
 * appearing to continue in the same orange as every step before it.
 */
/*
 * The ending takes the same tone as the status pill. Only a genuine failure
 * is red; a cancellation or a return is a normal outcome and reads muted, so
 * the timeline stops without implying something broke.
 */
.fv-od-timeline li.is-ending .fv-od-dot {
	border-color: var(--fv-ink-soft);
	background: var(--fv-ink-soft);
}

.fv-od-timeline li.is-ending.is-bad .fv-od-dot {
	border-color: var(--fv-hot);
	background: var(--fv-hot);
}

.fv-od-timeline li.is-ending.is-wait .fv-od-dot {
	border-color: var(--fv-warn);
	background: var(--fv-warn);
}

/*
 * The connector wanted here is the one arriving at the ending, and that
 * belongs to the row above it — the ending's own ::before is the segment
 * leaving it, which is hidden because it is last. Where :has() is
 * unsupported the line simply stays orange, which is a weaker signal but
 * never a broken one.
 */
.fv-od-timeline li:has(+ .is-ending)::before {
	background: var(--fv-ink-soft);
}

.fv-od-timeline li:has(+ .is-ending.is-bad)::before {
	background: var(--fv-hot);
}

.fv-od-timeline li:has(+ .is-ending.is-wait)::before {
	background: var(--fv-warn);
}

.fv-od-timeline li.is-ending .fv-od-step {
	color: var(--fv-ink-2);
}

.fv-od-timeline li.is-ending.is-bad .fv-od-step {
	color: var(--fv-hot-ink);
}

.fv-od-stopped {
	margin: 0;
	font-size: 13px;
	color: var(--fv-ink-2);
}

/* ── Totals + address ──────────────────────────────────────────── */

.fv-od-totals { margin: 0; display: flex; flex-direction: column; gap: 8px; }

.fv-od-totals > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
}

.fv-od-totals dt { color: var(--fv-ink-3); margin: 0; }

.fv-od-totals dd {
	margin: 0;
	font-family: var(--fv-mono);
	font-variant-numeric: tabular-nums;
	color: var(--fv-ink);
	font-weight: 600;
}

/* The last row is the payable total — it should not read like a line item. */
.fv-od-totals > div:last-child {
	border-top: 1px dashed var(--fv-line-2);
	padding-top: 8px;
	font-size: 14px;
}

.fv-od-totals > div:last-child dd { font-weight: 800; }

.fv-od-card address {
	font-style: normal;
	font-size: 13px;
	line-height: 1.6;
	color: var(--fv-ink-2);
	margin: 0;
}

.fv-od-phone {
	margin-top: 6px;
	font-family: var(--fv-mono);
	font-size: 12.5px;
	color: var(--fv-ink-3);
}

.fv-od-cancel p {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--fv-ink-2);
}

/* ══════════════════════════════════════════════════════════════
   SEARCHABLE SELECTS — district and thana on the address form
   ══════════════════════════════════════════════════════════════ */

/*
 * selectWoo replaces the native select with its own markup, so the field
 * rules above no longer reach it. These make the replacement match: same
 * height, border, radius and focus treatment as every other control on the
 * form, so the two searchable fields do not read as foreign.
 */
.woocommerce-account .fv-lbl .select2-container {
	width: 100% !important;
	display: block;
}

.woocommerce-account .select2-container--default .select2-selection--single {
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-md);
	background: var(--fv-surface);
	display: flex;
	align-items: center;
}

.woocommerce-account .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-account .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--fv-accent);
	outline: 0;
}

.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	font-size: 14px;
	color: var(--fv-ink);
}

.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--fv-ink-3);
}

/* The default arrow sits against the old 20px gutter; this centres it in
 * the padding the field actually has. */
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 40px;
	right: 8px;
}

/* ── Dropdown ──────────────────────────────────────────────────── */

.woocommerce-account .select2-container--default .select2-dropdown {
	border-color: var(--fv-line);
	border-radius: var(--fv-radius-md);
	box-shadow: var(--fv-shadow-sm);
	overflow: hidden;
}

.woocommerce-account .select2-container--default .select2-search--dropdown .select2-search__field {
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-md);
	font-size: 14px;
	font-family: inherit;
}

.woocommerce-account .select2-container--default .select2-results__option {
	padding: 8px 12px;
	font-size: 14px;
}

.woocommerce-account .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--fv-accent);
	color: #fff;
}