/*
 * Fivany header + footer — port of the Opnar storefront chrome
 * (components/header.css + components/footer.css).
 *
 * Storefront's own header/footer callbacks are unhooked in
 * inc/chrome.php; this styles the replacement markup.
 */

/* Header styles now live in assets/css/header.css (design port). */

/* ══════════════════════════════════════════════════════════════
   FOOTER — port of Opnar's storefront footer
   (apps/storefront/components/footer.css, "Opnar Footer v3")

   Three stacked bands: promise / nav / dark bottom bar. The design's
   `f3-*` namespace is kept verbatim so the two codebases stay
   diff-able; only the root selector differs (`.fv-footer` for
   `.opnar-footer`).

   Opnar drives its breakpoint with a CONTAINER query — the footer
   adapts to its own parent's width, not the viewport. That is kept
   here: `container-type: inline-size` on the root and
   `@container (max-width: 560px)` below, exactly as the source. It
   behaves identically to a media query while the footer spans the
   page, and correctly if it is ever nested in a narrower column.

   Radii map 1:1 — Opnar's --radius-lg is 0.1875rem, the same value
   as --fv-radius-lg — so the token names are simply substituted.
   ══════════════════════════════════════════════════════════════ */

.fv-footer {
	/* Cream outer + white inner chips: the footer reads as one section
	 * card rather than a flat band. Same pattern as the cart page. */
	--bg: var(--fv-cream);
	--surface: var(--fv-surface);
	--surface-2: var(--fv-surface);
	--ink: var(--fv-ink);
	--ink-2: var(--fv-ink-2);
	--ink-3: var(--fv-ink-3);
	--line: var(--fv-line);
	--accent: var(--fv-accent);
	--accent-ink: var(--fv-accent-hover);
	--accent-soft: var(--fv-accent-soft);

	/* Off-charcoal rather than near-black — premium, less harsh. */
	--footer-dark: var(--fv-dark);
	--footer-dark-ink: var(--fv-dark-ink);
	--footer-dark-ink-2: var(--fv-dark-ink-2);

	--font: var(--fv-font);
	--mono: var(--fv-mono);
	--maxw: var(--fv-maxw);
	--pad-x: var(--fv-pad-x);
	--pad-x-mobile: 10px;

	container-type: inline-size;
	font-family: var(--font);
	background: var(--bg);
	color: var(--ink);
	/* No margin and no top border, matching `.opnar-footer`. The gap above
	 * is `.site-main`'s bottom padding, and the cream ground is what marks
	 * the boundary — a rule on top of a colour change is one too many. */
}

.fv-footer,
.fv-footer *,
.fv-footer *::before,
.fv-footer *::after {
	box-sizing: border-box;
}

.fv-footer a {
	color: inherit;
	text-decoration: none;
}

.fv-footer img {
	max-width: 100%;
	display: block;
}

.fv-footer .i {
	stroke: currentColor;
	stroke-width: 1.6;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

/*
 * The footer's own rail, not the theme's `.col-full`. Storefront wraps
 * the footer contents in `.col-full`, which switches to em margins below
 * 66.5em; this rail is padding-based at every width so the promise chips
 * line up edge-for-edge with the header and the page grid.
 */
.fv-footer .f3-rail {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--pad-x);
}

/* === Band 1: Promise band === */

.fv-footer .f3-promise-band {
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	padding: 10px 0;
}

.fv-footer .f3-promise-band .f3-rail {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.fv-footer .f3-promise-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: var(--surface);
	border: 0;
	border-radius: var(--fv-radius-lg);
	min-width: 0;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.fv-footer .f3-promise-row > span:last-child {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.fv-footer .f3-promise-row .ic-wrap {
	width: 30px;
	height: 30px;
	border-radius: var(--fv-radius-lg);
	background: var(--accent-soft);
	color: var(--accent);
	display: grid;
	place-items: center;
	flex: none;
}

.fv-footer .f3-promise-row .ic-wrap .i {
	width: 15px;
	height: 15px;
}

.fv-footer .f3-promise-row .lbl {
	display: block;
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1.25;
	color: var(--ink);
	letter-spacing: -0.005em;
}

.fv-footer .f3-promise-row .sub {
	display: block;
	font-family: var(--mono);
	font-size: 10.5px;
	color: var(--ink-3);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 2px;
	line-height: 1.1;
}

/* === Band 2: Nav band — 5-col grid === */

.fv-footer .f3-nav-band {
	padding: 20px 0;
}

.fv-footer.desktop-5col .f3-nav-band .f3-rail {
	display: grid;
	/* Source is `1.6fr 1fr 1fr 1fr 1fr`. `--f3-cols` is set inline from PHP
	 * to the number of columns that actually rendered, so a column dropped
	 * for want of a real destination closes the gap instead of leaving a
	 * hole. With all four present this resolves to the source value. */
	grid-template-columns: 1.6fr repeat(var(--f3-cols, 4), 1fr);
	gap: 24px;
	align-items: flex-start;
}

/* Brand mega-column */

.fv-footer .f3-brand-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fv-footer .f3-logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	letter-spacing: -0.025em;
	font-size: 20px;
	color: var(--ink);
	width: fit-content;
}

.fv-footer .f3-logo .mark {
	width: 26px;
	height: 26px;
	background: var(--accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 800;
	border-radius: var(--fv-radius-lg);
	box-shadow: 0 3px 8px -1px rgba(255, 107, 0, 0.4);
}

.fv-footer .f3-logo-img {
	display: block;
	height: 32px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	object-position: left center;
}

.fv-footer .f3-tagline {
	font-size: 13.5px;
	line-height: 1.5;
	max-width: 32ch;
	margin: 0;
	color: var(--ink-2);
	font-weight: 500;
	letter-spacing: -0.005em;
}

/*
 * `.f3-brand-top` is `display: contents` on desktop, so the logo and the
 * mobile helpline chip become direct flex children of `.f3-brand-col`.
 * At mobile it becomes a real flex row, pinning the chip opposite the
 * logo.
 *
 * The mobile chip carries both `f3-helpline` and `f3-helpline-mobile`.
 * A single-class hide rule would tie with the base `.f3-helpline`
 * display rule at (0,2,0) and lose on source order, rendering the chip
 * twice on desktop. Chaining both classes takes it to (0,3,0) so the
 * hide wins regardless of order; the mobile override chains them too,
 * keeping the cascade symmetric.
 */
.fv-footer .f3-brand-top {
	display: contents;
}

.fv-footer .f3-helpline.f3-helpline-mobile {
	display: none;
}

.fv-footer .f3-helpline-desktop-wrap {
	display: block;
}

.fv-footer .f3-helpline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: #fff;
	border: 0;
	border-radius: var(--fv-radius-xl);
	color: var(--ink);
	transition: background 0.12s, box-shadow 0.12s, transform 0.12s;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	width: fit-content;
}

.fv-footer .f3-helpline:hover {
	background: #fffaf5;
	transform: translateY(-1px);
	box-shadow: var(--fv-shadow-md);
	color: var(--ink);
}

/*
 * The placeholder chip renders as a <span>, not an <a> (see
 * fivany_helpline()). Suppress the lift and the pointer so it does not
 * advertise itself as tappable when there is nothing to dial.
 */
.fv-footer span.f3-helpline {
	cursor: default;
}

.fv-footer span.f3-helpline:hover {
	transform: none;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.fv-footer .f3-helpline > span:last-child {
	display: flex;
	flex-direction: column;
	line-height: 1;
	gap: 3px;
	text-align: left;
}

.fv-footer .f3-helpline .ic-wrap {
	width: 30px;
	height: 30px;
	background: var(--accent);
	color: #fff;
	border-radius: var(--fv-radius-lg);
	display: grid;
	place-items: center;
	flex: none;
	box-shadow: 0 2px 6px -1px rgba(255, 107, 0, 0.4);
}

.fv-footer .f3-helpline .ic-wrap svg {
	width: 15px;
	height: 15px;
}

.fv-footer .f3-helpline .k {
	display: block;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-3);
	line-height: 1.1;
}

.fv-footer .f3-helpline .v {
	display: block;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	letter-spacing: -0.01em;
}

/* Social block */

.fv-footer .f3-cap {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-3);
	margin-bottom: 6px;
}

.fv-footer .f3-social {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
}

.fv-footer .f3-social a {
	width: 30px;
	height: 30px;
	border-radius: var(--fv-radius-lg);
	display: grid;
	place-items: center;
	background: var(--surface-2);
	border: 0;
	color: var(--ink-2);
	transition: transform 0.12s, background 0.12s, color 0.12s;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.fv-footer .f3-social a:hover {
	transform: translateY(-1px);
}

.fv-footer .f3-social a.fb:hover {
	background: #1877f2;
	color: #fff;
}

.fv-footer .f3-social a.ig:hover {
	background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	color: #fff;
}

.fv-footer .f3-social a.yt:hover {
	background: #f00;
	color: #fff;
}

.fv-footer .f3-social a.tt:hover {
	background: #000;
	color: #fff;
}

.fv-footer .f3-social a svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	stroke: none;
	display: block;
}

/* Link columns */

.fv-footer .f3-col {
	min-width: 0;
}

.fv-footer .f3-col h4 {
	margin: 0 0 10px;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-3);
	padding-bottom: 6px;
	border-bottom: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fv-footer .f3-col h4 .accent {
	display: none;
}

.fv-footer .f3-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fv-footer .f3-col li {
	margin: 0;
}

.fv-footer .f3-col li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	font-size: 13px;
	color: var(--ink-2);
	line-height: 1.4;
	transition: color 0.12s;
	font-weight: 500;
	min-height: 22px;
}

.fv-footer .f3-col li a:hover {
	color: var(--accent);
}

.fv-footer .f3-col li a .pill {
	display: inline-flex;
	align-items: center;
	padding: 1px 7px;
	font-family: var(--mono);
	font-size: 9.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--accent-soft);
	color: var(--accent-ink);
	border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
	border-radius: var(--fv-radius-md);
	line-height: 1.4;
}

/*
 * Desktop: `<details>` holds only its `<summary>` and is hidden outright.
 * The `<h4>` and `<ul>` are its siblings and render unconditionally, so
 * nothing depends on the browser's open/closed mechanism — which cannot
 * be bypassed with `display: contents` on every engine. Mobile re-shows
 * `<details>` as a tap toggle and drives the list with
 * `details:not([open]) ~ ul`.
 */
.fv-footer .f3-col details {
	display: none;
}

.fv-footer .f3-col details > summary {
	list-style: none;
}

.fv-footer .f3-col details > summary::-webkit-details-marker {
	display: none;
}

/* === Band 3: Dark bottom bar ===
 *
 * Kept dark deliberately. `--fv-dark` has no other consumer in the theme, so
 * this is the one dark surface on the site — but a cream bar and a warm-tint
 * bar were both tried against the rest of the footer and neither closed the
 * page: with only a hairline under the link columns, the footer stopped
 * rather than ended. The charcoal is what terminates it. Do not "unify" this
 * band with the cream above without replacing what it does.
 */

.fv-footer .f3-bottom {
	background: var(--footer-dark);
	color: var(--footer-dark-ink);
	padding: 10px 0;
}

.fv-footer .f3-bottom-rail {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	align-items: center;
}

.fv-footer .f3-copyright {
	font-size: 11.5px;
	color: var(--footer-dark-ink-2);
	font-family: var(--mono);
	letter-spacing: 0.01em;
	line-height: 1.5;
}

.fv-footer .f3-copyright b {
	color: var(--footer-dark-ink);
	font-weight: 600;
}

.fv-footer .f3-legal {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	font-size: 11px;
	color: var(--footer-dark-ink-2);
	font-family: var(--mono);
	letter-spacing: 0.01em;
}

.fv-footer .f3-legal a {
	color: var(--footer-dark-ink-2);
	transition: color 0.12s;
}

.fv-footer .f3-legal a:hover {
	color: #fff;
}

.fv-footer .f3-legal .sep {
	opacity: 0.4;
}

/* ══════════════════════════════════════════════════════════════
   Container query — the footer adapts to its OWN width.

   No tablet block, matching the source: every width above 560px
   renders the desktop layout. The fluid `1.6fr 1fr 1fr 1fr 1fr`
   grid and the 32ch tagline cap carry it through that whole range.
   ══════════════════════════════════════════════════════════════ */

@container (max-width: 560px) {
	.fv-footer .f3-rail {
		padding: 0 var(--pad-x-mobile);
	}

	.fv-footer .f3-promise-band {
		padding: 6px 0;
	}

	.fv-footer .f3-promise-band .f3-rail {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 4px;
		padding: 0 10px;
	}

	/* The 4th cell drops so the row stays three across, not wrapped. */
	.fv-footer .f3-promise-row[data-desktop-only] {
		display: none;
	}

	/* Icon tiles are dropped at phone widths — three 30px tiles plus
	 * two lines of text per cell leaves no room for either. */
	.fv-footer .f3-promise-row {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 0;
		padding: 4px 6px;
		min-height: auto;
	}

	.fv-footer .f3-promise-row .ic-wrap {
		display: none;
	}

	.fv-footer .f3-promise-row > span:last-child {
		align-items: center;
		text-align: center;
		gap: 1px;
		min-width: 0;
		flex: 1;
	}

	.fv-footer .f3-promise-row .lbl {
		font-size: 11px;
		line-height: 1.2;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	.fv-footer .f3-promise-row .sub {
		font-size: 9px;
		letter-spacing: 0.04em;
		text-align: center;
		margin-top: 1px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	/* Brand-top becomes a real row: logo left, helpline chip right. */
	.fv-footer .f3-brand-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 6px;
		flex-wrap: nowrap;
		width: 100%;
	}

	.fv-footer .f3-brand-top .f3-logo {
		flex: none;
	}

	.fv-footer .f3-helpline-desktop-wrap,
	.fv-footer .f3-social-block {
		display: none;
	}

	.fv-footer .f3-helpline.f3-helpline-mobile {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 4px 8px;
		background: #fff;
		border: 0;
		border-radius: var(--fv-radius-lg);
		color: var(--ink);
		flex: none;
		box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	}

	.fv-footer .f3-helpline-mobile:hover {
		transform: none;
	}

	.fv-footer .f3-helpline-mobile .ic-wrap {
		width: 30px;
		height: 30px;
	}

	.fv-footer .f3-helpline-mobile .k {
		font-size: 9px;
		letter-spacing: 0.08em;
	}

	.fv-footer .f3-helpline-mobile .v {
		font-size: 12px;
	}

	.fv-footer.desktop-5col .f3-nav-band .f3-rail {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.fv-footer.desktop-5col .f3-brand-col {
		gap: 10px;
		padding-bottom: 12px;
		margin-bottom: 6px;
	}

	.fv-footer .f3-logo {
		font-size: 15px;
		gap: 6px;
	}

	.fv-footer .f3-logo .mark {
		width: 20px;
		height: 20px;
		font-size: 11.5px;
	}

	.fv-footer .f3-logo-img {
		height: 26px;
	}

	.fv-footer .f3-tagline {
		font-size: 13px;
		line-height: 1.45;
	}

	.fv-footer .f3-nav-band {
		padding: 12px 0 14px;
	}

	/* Accordion columns. `<details>` is the toggle; the list is its
	 * sibling, bound to the open state by `details:not([open]) ~ ul`. */
	.fv-footer .f3-col details {
		display: block;
	}

	.fv-footer .f3-col details:not([open]) ~ ul {
		display: none;
	}

	.fv-footer .f3-col {
		border-bottom: 1px solid var(--line);
	}

	.fv-footer .f3-col:last-child {
		border-bottom: 0;
	}

	.fv-footer .f3-col h4 {
		display: none;
	}

	.fv-footer .f3-col details > summary {
		display: flex;
		list-style: none;
		cursor: pointer;
		align-items: center;
		justify-content: space-between;
		padding: 9px 0;
		font-family: var(--mono);
		font-size: 10.5px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--ink);
	}

	.fv-footer .f3-col details > summary::after {
		content: '';
		width: 11px;
		height: 11px;
		border-right: 2px solid var(--ink-3);
		border-bottom: 2px solid var(--ink-3);
		transform: rotate(45deg);
		transition: transform 0.15s;
		margin-right: 4px;
	}

	.fv-footer .f3-col details[open] > summary {
		color: var(--accent);
	}

	.fv-footer .f3-col details[open] > summary::after {
		transform: rotate(-135deg);
		margin-top: 4px;
		border-color: var(--accent);
	}

	.fv-footer .f3-col ul {
		padding: 0 0 8px 4px;
		gap: 0;
	}

	.fv-footer .f3-col li a {
		padding: 5px 0;
		font-size: 13px;
	}

	/* Copyright only, centred. The legal links are already reachable
	 * through the Policies accordion above. */
	.fv-footer.desktop-5col .f3-bottom-rail {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0;
		text-align: center;
		grid-template-columns: none;
	}

	.fv-footer.desktop-5col .f3-bottom-rail .f3-copyright {
		text-align: center;
		font-size: 11px;
		width: 100%;
	}

	.fv-footer.desktop-5col .f3-bottom-rail .f3-legal {
		display: none;
	}
}


/* ── Mobile bottom nav ─────────────────────────────────────────────
 * Port of `.m-nav` from "Fivany Header.html" (Claude Design project
 * "Opnar E-commerce"), scoped under `.fv-mnav` so the design's generic
 * class names (.row, .nv, .mid, .fab, .lb) cannot leak into the theme —
 * the same containment the header port uses.
 *
 * The source's palette is declared locally rather than mapped onto the
 * site tokens: its `--brand` is #ff5c00, a shade off --fv-accent
 * (#ff6b00). Kept exact so the bar matches the header, which was ported
 * under the same rule.
 *
 * Two translations out of the preview harness:
 *   - the source shows the bar at its 768 and 390 breakpoints only, which
 *     becomes `max-width: 1023px` here (matching header.css);
 *   - `position: sticky` in the source works because the bar sits inside a
 *     fixed `.device` frame. On a real page that is `fixed`, with body
 *     padding reserving the height sticky would have taken up in flow.
 */
.fv-mnav {
	--bg: #fff;
	--surface: oklch(0.975 0.003 250);
	--ink: #0d0f12;
	--ink-3: oklch(0.62 0.008 250);
	--line: oklch(0.915 0.005 250);
	--brand: #ff5c00;
	--brand-ink: #e85200;
	--font: 'Inter', ui-sans-serif, system-ui, sans-serif;
	--display: 'Archivo', var(--font);

	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	font-family: var(--font);
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(18px) saturate(1.5);
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	border-top: 1px solid var(--line);
	padding: 7px 6px calc(9px + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -8px 24px -18px rgba(13, 15, 18, 0.35);
}

@media (max-width: 1023px) {
	.fv-mnav {
		display: block;
	}

	/* Reserve the bar's height so the last of the page is not trapped
	 * underneath it — what `position: sticky` gives the source for free. */
	body {
		padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
	}

	/*
	 * Cart and checkout each pin their own action bar to this exact spot
	 * (a Proceed button and a Place order button). Two fixed bars stacked
	 * on the same edge is worse than either alone, and on those two screens
	 * the task bar is the one that matters — so the nav stands down and
	 * gives back the space it reserved.
	 */
	body.fv-cart-page .fv-mnav,
	body.fv-checkout-focus .fv-mnav {
		display: none;
	}

	body.fv-cart-page,
	body.fv-checkout-focus {
		padding-bottom: 0;
	}
}

.fv-mnav .row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: end;
}

.fv-mnav .nv {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 6px 2px 2px;
	min-height: 48px;
	color: var(--ink-3);
	position: relative;
	transition: color 0.15s;
	/* Storefront underlines every link inside `.site-footer`, which is where
	 * this bar is rendered. */
	text-decoration: none;
}

.fv-mnav .nv svg {
	width: 21px;
	height: 21px;
	stroke: currentColor;
	stroke-width: 1.7;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fv-mnav .nv .lb {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.fv-mnav .nv:hover {
	color: var(--ink);
}

.fv-mnav .nv.on {
	color: var(--brand);
}

.fv-mnav .nv.on::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 18px;
	height: 2.5px;
	border-radius: 0 0 3px 3px;
	background: var(--brand);
}

.fv-mnav .nv .pip {
	position: absolute;
	top: 4px;
	right: calc(50% - 17px);
	min-width: 15px;
	height: 15px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-family: var(--display);
	font-size: 9.5px;
	font-weight: 800;
	display: grid;
	place-items: center;
	border: 2px solid #fff;
}

.fv-mnav .mid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding-bottom: 2px;
}

.fv-mnav .fab {
	width: 56px;
	height: 56px;
	margin-top: -26px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	display: grid;
	place-items: center;
	position: relative;
	border: 4px solid #fff;
	box-shadow: 0 8px 20px -6px rgba(255, 92, 0, 0.7);
	transition: transform 0.14s, background 0.15s;
	text-decoration: none;
}

.fv-mnav .fab:hover {
	background: var(--brand-ink);
	color: #fff;
}

.fv-mnav .fab:active {
	transform: scale(0.94);
}

.fv-mnav .fab svg {
	width: 23px;
	height: 23px;
	stroke: currentColor;
	stroke-width: 1.8;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fv-mnav .fab .n {
	position: absolute;
	top: -3px;
	right: -5px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-family: var(--display);
	font-size: 10.5px;
	font-weight: 800;
	display: grid;
	place-items: center;
	border: 2.5px solid #fff;
}

.fv-mnav .mid .lb {
	font-size: 10px;
	font-weight: 700;
	color: var(--brand);
	letter-spacing: -0.005em;
}

/* ══════════════════════════════════════════════════════════════
   Storefront wrapper neutralisation
   ══════════════════════════════════════════════════════════════ */

/* `display: contents` dissolves Storefront's <header> box so `.fv-header`
 * sticks against the page instead of against a short header box. */
.site-header {
	display: contents;
}

/* Storefront paints padding/background/border on the header it no longer
 * owns; these reset the leftovers for browsers that ignore `contents`. */
.site-header.woocommerce-active .site-branding,
.site-header .site-search,
.site-header .storefront-primary-navigation {
	display: none;
}

/* The footer hook fires inside `.col-full`; our bands own their own rail. */
.site-footer {
	background: transparent;
	padding: 0;
	margin: 0;
	color: inherit;
}

.site-footer > .col-full {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Give the content area breathing room now that the header is flush. */
.site-content {
	padding-top: 16px;
}