/*
 * Fluent Commerce 2026 design system — site chrome (nav + footer).
 *
 * From the export's "Block - Nav" and "Block - Footer". These are site-wide
 * blocks, not blog components: when the rest of the pages are rebuilt they use
 * this same file unchanged, and the old .fc-home-nav / .fc-home-footer in
 * home.css is deleted. Right now the two navs coexist deliberately — this one on
 * blog pages, the old one everywhere else — which is why nothing here is named
 * for the blog.
 *
 * ── DEVIATIONS FROM THE DESIGN, AND WHY ─────────────────────────────────────
 *
 * 1. NO MATERIAL SYMBOLS FONT. The design draws the dropdown row icons with
 *    Material Symbols Rounded, loaded as a webfont. That is a variable icon font
 *    fetched from Google for eleven glyphs on a page that has no other use for
 *    it. The icons are inlined as SVG in inc/ds-nav.php instead. Same drawing,
 *    no request, and they inherit currentColor so the tone system still works.
 *
 * 2. PANEL POSITION IS CSS, NOT MEASURED IN JS. The design's block measures each
 *    trigger against the shell on every render (anchorLeft(), colBox()) and
 *    clamps so a panel cannot leave the canvas. Here each trigger sits in a
 *    position:relative wrapper and the panel is absolutely positioned against
 *    it, with the last group right-aligned. Same result, no layout reads, and it
 *    survives a font swap or a zoom without re-measuring.
 *
 * 3. THE DRAWER IS ABSOLUTE, NOT FIXED. See the containment note in layout.css:
 *    .fc-shell is a container, so a fixed descendant would be positioned against
 *    the page rather than the viewport. The drawer is instead absolutely
 *    positioned inside the sticky nav shell at top:100%, sized against 100dvh.
 *    Because the shell is stuck to the top of the viewport whenever the drawer
 *    can be open, that is the same rectangle a fixed element would have occupied
 *    — and it needs no containment escape hatch.
 *
 * @package Fluent_Commerce
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * ADMIN BAR OFFSET
 * WordPress's admin bar is fixed at the top of the viewport for logged-in users,
 * so a nav stuck at top:0 slides underneath it. Below 783px WordPress switches
 * the bar to position:absolute and it scrolls away, so the offset goes back to 0.
 * Logged-out visitors never have the class and never pay for any of this.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds {
	--fc-admin-h: 0px;
}

body.fc-ds.admin-bar {
	--fc-admin-h: 32px;
}

@media screen and (max-width: 782px) {
	body.fc-ds.admin-bar {
		--fc-admin-h: 0px;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * NAV SHELL
 * Sticky, and it hides on downward scroll. The hide is a transform so it costs
 * no layout, and it is suppressed whenever a panel or the drawer is open —
 * a bar that retracts out from under an open menu is a bug, not an effect.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-navshell {
	position: sticky;
	top: var(--fc-admin-h);
	z-index: 120;
	transform: translateY(0);
	transition: transform var(--dur-base) var(--ease-out);
}

body.fc-ds .fc-navshell[data-hidden="1"] {
	/* 101% so the bottom hairline clears the edge too. */
	transform: translateY(-101%);
}

/* An open menu pins the bar, whatever the scroll handler wants. */
body.fc-ds .fc-navshell[data-open="1"] {
	transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE BAR
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--nav-height);
	padding: 0 clamp(20px, 2.1cqw, 40px);
	gap: var(--logo-clear-nav);
	border-bottom: var(--stroke-1) solid var(--fc-nav-hair);
	background: var(--fc-nav-bg);
	color: var(--fc-nav-on);
}

/*
 * Tone. The nav ships in two surfaces and the page picks one; the blog is light.
 * Everything downstream — links, CTA, hairlines, panels, drawer — reads these
 * three, so a new tone is three values, not a new block.
 */
body.fc-ds .fc-navshell[data-surface="light"] {
	--fc-nav-bg: var(--fc-bone);
	--fc-nav-on: var(--fc-ink-12);
	/*
	 * The resting state, and it is a TINT — this is what makes the hover visible.
	 * A previous revision set it to full strength on both tones to stop the light
	 * bar's links reading as disabled, and that took the hover with it: rest and
	 * hover were then #121212 → #000000 here and #FFFFFF → #FFFFFF on the dark
	 * bar, so five rules further down were animating between two identical
	 * colours. Restored, at 80% rather than the 60% that was the real complaint —
	 * 60% ink on a warm off-white was too light to read as a navigation item, 80%
	 * is a step down from the hover without being grey.
	 *
	 * --text-on-light-muted and not --fc-ink-a80 directly, because that is the
	 * role: the same tint the rest of the system uses for supporting type.
	 */
	--fc-nav-off: var(--text-on-light-muted);
	--fc-nav-hair: var(--fc-ink-a20);
	--fc-nav-hover-bg: var(--fc-ink-a06);
	--fc-nav-on-strong: var(--fc-black);
	/*
	 * The bar's own hover, and the one value in here that is a hue rather than a step
	 * on the ink/bone axis — see .fc-navlink. --fc-violet-bright and not --fc-violet,
	 * because the token's own comment names it "hover / stroke highlight" and it is the
	 * one of the three that holds up on BOTH tones: #793dff is authored for AA on white
	 * and sits at about 2.6:1 on the dark bar, which is not a link.
	 */
	--fc-nav-accent: var(--fc-violet-bright);
}

body.fc-ds .fc-navshell[data-surface="dark"] {
	--fc-nav-bg: var(--fc-ink-12);
	--fc-nav-on: var(--fc-bone);
	/* Bone at 80%, the mirror of the light tone above, hovering up to pure white. */
	--fc-nav-off: var(--text-on-dark-muted);
	--fc-nav-hair: var(--fc-bone-a20);
	--fc-nav-hover-bg: var(--fc-bone-a08);
	--fc-nav-on-strong: var(--fc-white);
	/* The same violet on both tones — the pop colour does not have a dark and a light
	   variant in this system, and it reads on ink and on bone alike. */
	--fc-nav-accent: var(--fc-violet-bright);
}

/*
 * The lockup and the CTA are fixed-size; the link row is the only child allowed
 * to give way, so the logo's clear space can never be eaten.
 */
body.fc-ds .fc-nav__brand {
	flex: none;
	display: inline-flex;
	align-items: center;
}

/*
 * 1.2× the lockup token, which is how the design bumped the logo rather than
 * editing the token: --logo-h-nav still drives the clear-space rule beside it
 * (--logo-clear-nav is 0.62 of it), and growing that gap by a fifth as well
 * would crowd the link row on a laptop for no instruction to do so.
 */
body.fc-ds .fc-nav__logo {
	display: block;
	height: calc(var(--logo-h-nav) * 1.2);
	width: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * LINK ROW
 * Each top-level item is a <button> because it opens a panel rather than going
 * anywhere.
 *
 * The design draws a 2px rule under the open item. It is not drawn here: hover opens
 * the panel on any real pointer, so that rule appeared under the cursor on the way
 * past every label, which is a lot of white line for a state the visitor is already
 * being shown — the panel itself is under the label, and the chevron has flipped.
 * Current-section state is colour alone, as it always was.
 *
 * The transparent border stays on the resting link even though nothing colours it in
 * now. It is 2px of the link's box: taking it away would move every label up a pixel
 * inside a fixed-height bar.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-navlinks {
	display: flex;
	align-items: center;
	gap: var(--gap-nav);
	min-width: 0;
	flex-shrink: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.fc-ds .fc-navgroup {
	position: relative;
	display: flex;
	align-items: center;
}

body.fc-ds .fc-navlink {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	height: var(--nav-height);
	padding: 0 4px;
	/* -1px sat the rule on the bar's own bottom hairline; it holds the label's
	   optical centre now that the rule is gone. See the note above.
	   It is also load-bearing for the dropdowns: it shortens .fc-navgroup's margin box
	   by that pixel, so a column panel's `top: 100%` lands its top border exactly on the
	   bar's hairline row instead of a pixel below it. Two lines if that changes. */
	margin-bottom: -1px;
	border: 0;
	border-bottom: var(--stroke-2) solid transparent;
	background: none;
	font-family: var(--font-core);
	/*
	 * 14px flat, not --type-mono-14. That token is a clamp that only reaches 14 at
	 * a ~1920px container and rides down to 12 below it — so on a 1440 laptop the
	 * bar was setting ~13.4 and looked a size small against the design, which
	 * specifies a flat 14 here and in the four rules that follow. The nav is
	 * fixed-height chrome with its own drawer breakpoint; it does not need type
	 * that ramps, and the same argument already won in the footer.
	 */
	font-size: 14px;
	font-weight: var(--fw-medium);
	/* Instrument Sans at 14 in a horizontal row of six wants the extra hair of
	   tracking; --ls-mono is the token that already held this value. */
	letter-spacing: var(--ls-mono);
	line-height: var(--lh-body);
	/*
	 * FULL strength, where the panel rows below rest on --fc-nav-off. The bar is the
	 * one row of the nav that is always on screen and it is set against the page, not
	 * against a panel of its own — the design has it white on the dark tone, ink on the
	 * light one, and hands the state change to the hue below rather than to a step in
	 * brightness. That is also what lets it be full strength without going mute on
	 * hover: rest and hover differ by colour, not by 20% of an alpha.
	 */
	color: var(--fc-nav-on);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out);
}

/* Violet, per the design — the brand's single pop colour, and the whole reason the
   resting state above can sit at full strength. See --fc-nav-accent. */
body.fc-ds .fc-navlink:hover {
	color: var(--fc-nav-accent);
}

/*
 * The current section and the open menu take the resting colour, which is to say they
 * are not marked in colour at all any more — violet is the pointer's, and only the
 * pointer's. Both rules are kept rather than deleted: they are what stops the two
 * states inheriting anything else that lands on this element later, and they are where
 * a mark would go if the design ever wants one back.
 */
body.fc-ds .fc-navlink[data-current="1"] {
	color: var(--fc-nav-on);
}

body.fc-ds .fc-navlink[aria-expanded="true"] {
	color: var(--fc-nav-on);
}

body.fc-ds .fc-navlink__chev {
	flex: none;
	transition: transform var(--dur-base) var(--ease-out);
}

body.fc-ds .fc-navlink[aria-expanded="true"] .fc-navlink__chev {
	transform: rotate(180deg);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * RIGHT GROUP — CTA + drawer toggle
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-navright {
	flex: none;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 20px;
}

/*
 * --fc-nav-on-strong, and not --fc-nav-off like the links beside it: this is the one
 * item in the bar that is an action rather than a destination, and the design gives it
 * the strongest ink on the surface at rest — white on the dark tone, black on the
 * light one. It means the CTA's resting state matches what the links only reach on
 * hover, which is the point: the button should look like the thing you were about to do.
 *
 * .fc-navshell in the selector is what makes that stick. This is an <a> when the demo
 * page is seeded, and tokens.css sets `body.fc-ds [data-surface="dark"] a { color: bone }`
 * — one element more specific than a bare `body.fc-ds .fc-navcta`, so on the dark tone
 * the label came out bone inside a #FFFFFF border: two whites a shade apart in a 44px
 * bar, which reads as a rendering fault rather than a hierarchy. The ancestor outranks
 * it and still yields to the :hover below on source order.
 */
body.fc-ds .fc-navshell .fc-navcta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	height: 44px;
	padding: 0 18px;
	border: var(--stroke-1) solid var(--fc-nav-on-strong);
	border-radius: var(--radius-10);
	background: transparent;
	/* Flat 14 and tracked, with the links beside it — see .fc-navlink. */
	font-size: 14px;
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-mono);
	color: var(--fc-nav-on-strong);
	white-space: nowrap;
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/*
 * Fills with the colour it was outlined in and knocks the label out to the bar — white
 * box, ink label on the dark tone.
 *
 * .fc-navshell here is not cosmetic either, and for a nastier reason than the resting
 * rule above: tokens.css's `body.fc-ds [data-surface="dark"] a:hover` counts THREE
 * class-level parts (.fc-ds, the attribute, :hover) against this rule's two, so it won
 * and painted the label var(--fc-white) — white text on the white fill this rule had
 * just applied. The button's label vanished on hover on every dark-nav page. The
 * ancestor makes it four against three and the label comes out ink, as drawn.
 */
body.fc-ds .fc-navshell .fc-navcta:hover {
	background: var(--fc-nav-on-strong);
	color: var(--fc-nav-bg);
}

/*
 * The demo CTA with nowhere to go — see fluent_commerce_ds_nav_cta_url(). It is a
 * <span> in that state, so the hover above cannot fire on it and no :hover reset is
 * needed; what is left is to stop it *looking* clickable. Dimmed rather than hidden so
 * the bar keeps the design's proportions: removing it would let the nav links spread
 * into the gap, and the layout would visibly change again when it comes back.
 *
 * Now a fallback rather than the normal state. The Request a demo page exists
 * (inc/ds-demo.php), so this is what an environment where that page has not been
 * seeded yet still renders — the button goes quiet instead of linking to a 404.
 *
 * Opacity on the whole control, rather than a lighter colour, because the border and
 * the arrow have to fade with the label — three separate colour overrides that would
 * each need a dark-tone variant, when the tone system's job is to avoid exactly that.
 */
body.fc-ds .fc-navcta--off {
	opacity: 0.45;
	cursor: default;
	/* Nothing to select; a text cursor over a button reads as a broken button. */
	user-select: none;
}

/* Phone takes the short "Demo" form. Room comes from the label, not the lockup. */
body.fc-ds .fc-cta-short {
	display: none;
}

body.fc-ds .fc-navtoggle {
	display: none;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fc-nav-on);
	cursor: pointer;
}

body.fc-ds .fc-navtoggle__close,
body.fc-ds .fc-navtoggle[aria-expanded="true"] .fc-navtoggle__open {
	display: none;
}

body.fc-ds .fc-navtoggle[aria-expanded="true"] .fc-navtoggle__close {
	display: block;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * DROPDOWN PANELS
 * Two shapes, and the difference carries meaning. Product gets the full-bleed
 * panel — a shelf of ruled piers, because those three are peers a visitor is
 * choosing between and the choice needs a line of prose each. Every other group
 * gets a squared column flush to the nav rule: a list of destinations.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-navpanel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	max-width: calc(100cqw - 40px);
	background: var(--fc-nav-bg);
	/* Hidden by visibility, not display, so the fade has something to animate. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast) var(--ease-out);
}

body.fc-ds .fc-navpanel[data-open="1"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/*
 * The flush column, ruled on all four sides.
 *
 * ── THE TOP RULE IS DELIBERATE, AND IT USED NOT TO BE THERE ─────────────────
 *
 * The column's own top edge lands exactly on the bar's bottom hairline: the panel is
 * positioned at top:100% of its group, the group is as tall as a nav link's margin box, and
 * the link carries margin-bottom:-1px — so 100% resolves to the row the bar's border occupies.
 * With border-top:0 the column's background painted over that row and the bar's rule broke for
 * the width of the menu, which read as the column hanging off its label.
 *
 * Andrew asked for the rule kept instead, so the border is now on all four sides. Because the
 * top edge and the bar's hairline are the same pixel row, one hairline is what shows: the bar's
 * line runs unbroken across the canvas and the column hangs below it.
 *
 * The full-bleed panel below matches this — see the note there.
 */
body.fc-ds .fc-navpanel--col {
	width: max-content;
	min-width: 240px;
	padding: var(--sp-8) 0;
	border: var(--stroke-1) solid var(--fc-nav-hair);
}

/*
 * ── WHY THE LAST COLUMN IS NOT RIGHT-ALIGNED ────────────────────────────────
 *
 * It used to be: .fc-navgroup:last-child took left: auto; right: 0, standing in for
 * the design's JS canvas clamp on the grounds that the rightmost column is the only
 * one that could run past the page edge. It cannot, so the two columns disagreed
 * about their own trigger for nothing — Community hanging from the left of its
 * label, Everything else from the right of its.
 *
 * Both hang from the left now, which is what the design draws. There is room: the
 * bar is space-between, so the link row sits mid-canvas, and the link row is
 * withheld below 1100 in favour of the drawer — at the narrowest width that shows a
 * column at all, the widest of them still clears the right gutter by the better part
 * of 200px. max-width: calc(100cqw - 40px) above is the only clamp left, and nothing
 * reaches it.
 */

/*
 * The full-bleed panel. A child of .fc-navshell rather than of a group (see
 * inc/ds-chrome.php), so `top: 100%` would resolve against the whole shell —
 * drawer included. It is pinned to the bar's height instead.
 *
 * It stays at the full --nav-height, which is BELOW the bar's bottom hairline, because
 * that height includes it — so the rule runs unbroken above the shelf and the shelf
 * hangs off it. Nothing here or in the grid is pulled up over that row any more: the
 * bar's line is kept under an open menu, deliberately, and both panel shapes agree
 * about it. See the column above and the grid below.
 */
body.fc-ds .fc-navpanel--panel {
	top: var(--nav-height);
	width: 100%;
	max-width: none;
	border-bottom: var(--stroke-1) solid var(--fc-nav-hair);
}

/*
 * The shelf itself: centred on the canvas, three equal piers. The right-hand
 * rule belongs to the grid and each pier draws its own left rule, so the ruling
 * closes at both ends without a border on the outer element.
 *
 * The shelf carries the bar's background, and it starts flush under the bar's bottom
 * hairline rather than a stroke over it. It used to have margin-top: -1px, which broke
 * the rule for the shelf's width the way border-top: 0 broke it under a column; Andrew
 * asked for the line kept, so both are gone. The rule now runs the full canvas above an
 * open menu, and the piers' vertical rules start on it — the shelf hangs off the bar.
 *
 * No border-top here on purpose: the bar's own hairline is that line, and adding one a
 * pixel below it would read as two.
 */
body.fc-ds .fc-navpanel__grid {
	width: 780px;
	max-width: calc(100cqw - 40px);
	margin: 0 auto;
	background: var(--fc-nav-bg);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-right: var(--stroke-1) solid var(--fc-nav-hair);
}

body.fc-ds .fc-navpier {
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
	padding: var(--sp-24) var(--sp-32);
	border-left: var(--stroke-1) solid var(--fc-nav-hair);
	transition: background var(--dur-fast) var(--ease-out);
}

/*
 * The wash, AND the label and icon to the accent with it. The wash alone was all this
 * used to do, and against the column panels next door — whose rows do change colour —
 * the Product shelf read as the one menu in the nav that did not respond. Violet now,
 * the same as the bar above and the panel rows beside it: bone-80 → #9747ff on both.
 *
 * The note is deliberately left where it is. It is a sentence of supporting prose, not
 * a target, and taking all three would turn the pier violet rather than point at it.
 */
body.fc-ds .fc-navpier:hover {
	background: var(--fc-nav-hover-bg);
}

/*
 * .fc-navshell on these two, and here it settles a fight between the hover and the
 * current-page mark further down. Both were four class-level parts against one element,
 * so the tie went to source order and [aria-current="page"] — which is later — won: on
 * the OMS page the Order Management pier was the current one, and its label sat at white
 * through the hover while its icon went violet. The ancestor makes hover the stronger of
 * the two, which is the right way round: where you are is what the pier says at rest.
 */
body.fc-ds .fc-navshell .fc-navpier:hover .fc-navpier__label,
body.fc-ds .fc-navshell .fc-navpier:hover .fc-navrow__icon {
	color: var(--fc-nav-accent);
}

/*
 * The unbuilt pier is a <span>, because its page is not published yet, and it is now
 * styled exactly like a built one — resting colour, wash, violet hover and the hand
 * cursor. Nothing in the shelf distinguishes the two any more; the class is left on the
 * markup as the hook that a build-state treatment would use if one is ever wanted back.
 * See the note on .fc-navshell .fc-navrow for what pointing at one does.
 */
body.fc-ds .fc-navpier.is-unbuilt {
	cursor: pointer;
}

/* 22px here against the row's 20px — the pier leads with the icon. */
body.fc-ds .fc-navpier .fc-navrow__icon {
	width: 22px;
	height: 22px;
	color: var(--fc-nav-off);
	transition: color var(--dur-fast) var(--ease-out);
}

body.fc-ds .fc-navpier__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/*
 * 14, not the 16 this used to be: the pier is a link with a sentence under it, not
 * a heading, and at 16 it competed with the panel's own rows for first read. Same
 * size as its note now, told apart by weight — which is the design's revision. Flat,
 * like every other 14 in the nav — see .fc-navlink.
 *
 * --fc-nav-off and not --fc-nav-on: the Product shelf sits beside the column panels in
 * the same bar, and resting at full strength made it the one submenu that was already
 * lit before the pointer arrived. Every item in every menu now rests on the off tone
 * and reaches white on hover; the pier's weight, not its colour, is what carries the
 * label above its note.
 */
body.fc-ds .fc-navpier__label {
	font-size: 14px;
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--fc-nav-off);
	transition: color var(--dur-fast) var(--ease-out);
}

/* --lh-loose, where the note used to take --lh-body: it is the one place in the
   nav that sets a full sentence, and at the same size as the label above it the
   extra leading is what keeps the two apart. */
body.fc-ds .fc-navpier__note {
	font-size: 14px;
	font-weight: var(--fw-regular);
	line-height: var(--lh-loose);
	color: var(--fc-nav-off);
}

body.fc-ds .fc-navpier[aria-current="page"] .fc-navpier__label {
	color: var(--fc-nav-on-strong);
}

/*
 * Below the panel's own width the three piers stop being a shelf and become a
 * stack, which is a column drop with extra steps — so the grid folds to one
 * column and the piers take their left rule as a top rule instead.
 */
@container page (max-width: 860px) {
	body.fc-ds .fc-navpanel__grid {
		width: 100%;
		grid-template-columns: 1fr;
		border-right: 0;
	}

	body.fc-ds .fc-navpier {
		border-left: 0;
		border-top: var(--stroke-1) solid var(--fc-nav-hair);
		padding: var(--sp-16) var(--gutter-page);
	}

	/*
	 * Except the first one. The shelf now starts flush under the bar's own bottom
	 * hairline rather than a pixel over it, so the first pier's top rule would land
	 * immediately below that line — two full-width hairlines with nothing between
	 * them. The bar's is the one that stays.
	 */
	body.fc-ds .fc-navpanel__grid > .fc-navpier:first-child {
		border-top: 0;
	}
}

body.fc-ds .fc-navpanel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * PANEL ROWS
 * A row is icon + label, with an optional note. Rows for pages that do not exist yet
 * are rendered as plain <span> with .is-unbuilt — no href, so nothing happens when
 * one is clicked, but they are styled and cursored exactly like the built rows on the
 * brief that a menu should look finished while the pages behind it are being written.
 * The class is the hook if a build-state treatment is ever wanted back.
 * ────────────────────────────────────────────────────────────────────────── */
/*
 * .fc-navshell in front of the class, and it is load-bearing — see the note on
 * .fc-navshell .fc-navcta. tokens.css colours every <a> on a dark surface bone with
 * `body.fc-ds [data-surface="dark"] a`, which outranks a plain `body.fc-ds .fc-navrow`
 * by one element. So the two rows in this menu that ARE links (Resources, Case
 * studies) rested at full bone while the nine spans beside them rested at the tone's
 * off colour: two different defaults in one list, and the pair that looked white at
 * rest had no visible hover left to give. The ancestor puts every row, anchor or span,
 * back on --fc-nav-off — and ties with the :hover below, which wins on source order.
 */
body.fc-ds .fc-navshell .fc-navrow {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--radius-10);
	/* Flat 14 — see .fc-navlink. */
	font-size: 14px;
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	color: var(--fc-nav-off);
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/*
 * Every row, not just the anchors — an unbuilt row is a <span>, and with nine of the
 * eleven rows in this menu unbuilt today, scoping the hover to a.fc-navrow read as a
 * menu with no hover at all rather than as a menu with unfinished pages in it.
 *
 * Violet on hover, matching the bar and the piers — the whole nav now answers the
 * pointer in the pop colour and reserves white for where you already are.
 *
 * .fc-navshell in the selector is load-bearing and more so now that the value is not
 * white: tokens.css's `body.fc-ds [data-surface="dark"] a:hover` counts one class-level
 * part more than a bare .fc-navrow:hover, so without the ancestor it would repaint the
 * two rows that ARE links back to #FFFFFF and only the nine spans would go violet.
 */
body.fc-ds .fc-navshell .fc-navrow:hover {
	background: var(--fc-nav-hover-bg);
	color: var(--fc-nav-accent);
}

body.fc-ds .fc-navrow[aria-current="page"] {
	color: var(--fc-nav-on);
}

/*
 * Unbuilt rows are indistinguishable from built ones now: same --fc-nav-off at rest,
 * same violet hover, same hand cursor. Two things used to set them apart and both have
 * been asked for and removed — the 55% dim (which read as a menu with two different
 * default colours in it) and then cursor: default.
 *
 * cursor: pointer is stated rather than left to inherit because these are <span>s, and
 * the UA only hands the pointer to an <a href>. The trade is deliberate and worth
 * naming: a row can now invite a click and do nothing, which is the cost of a menu that
 * looks finished before its pages are. It goes away on its own as the pages ship.
 */
body.fc-ds .fc-navrow.is-unbuilt {
	cursor: pointer;
}

body.fc-ds .fc-navrow__icon {
	flex: none;
	display: block;
	width: 20px;
	height: 20px;
}

body.fc-ds .fc-navrow__label {
	min-width: 0;
}

/* The flush column's rows run full width, so they lose the pill radius. */
body.fc-ds .fc-navpanel--col .fc-navrow {
	border-radius: 0;
	padding: 10px 20px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * DRAWER
 * Below 1024 the link row is withheld and everything moves in here.
 *
 * The design's note stands: the system has no mobile nav spec (System gaps.md
 * B10), so the drawer is built in the system's existing idiom — an ink or bone
 * plate, hairline rows, square corners, no blur, no slide-and-bounce, a straight
 * ease-out fade. One group open at a time.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-drawer {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	/*
	 * dvh, not vh: on iOS Safari vh is the tallest possible viewport, so the
	 * drawer's bottom would sit behind the browser chrome and its last row would
	 * be unreachable.
	 */
	height: calc(100dvh - var(--nav-height) - var(--fc-admin-h));
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: var(--sp-32) 0 64px;
	background: var(--fc-nav-bg);
	border-bottom: var(--stroke-1) solid var(--fc-nav-hair);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 200ms var(--ease-out), visibility 200ms var(--ease-out);
}

body.fc-ds .fc-drawer[data-open="1"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

body.fc-ds .fc-drawer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.fc-ds .fc-drawer__group + .fc-drawer__group {
	border-top: var(--stroke-1) solid var(--fc-nav-hair);
}

body.fc-ds .fc-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-16);
	width: 100%;
	padding: 20px var(--gutter-page);
	border: 0;
	background: none;
	font-family: var(--font-core);
	font-size: 26px;
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	text-align: left;
	/* Already full strength, which is now what the bar's links do too — the drawer head
	   IS the main menu item below 1024, so it takes the same pair of states. */
	color: var(--fc-nav-on);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out);
}

/* Hover only — the open group is not marked in colour, same as the bar above. */
body.fc-ds .fc-drawer__head:hover {
	color: var(--fc-nav-accent);
}

body.fc-ds .fc-drawer__chev {
	flex: none;
	transition: transform var(--dur-base) var(--ease-out);
}

body.fc-ds .fc-drawer__head[aria-expanded="true"] .fc-drawer__chev {
	transform: rotate(90deg);
}

body.fc-ds .fc-drawer__items {
	display: none;
	padding-bottom: var(--sp-16);
}

body.fc-ds .fc-drawer__head[aria-expanded="true"] + .fc-drawer__items {
	display: block;
}

/* .fc-navshell for the same reason as .fc-navshell .fc-navrow: the drawer's links are
   anchors and would otherwise rest a shade brighter than the spans among them. */
body.fc-ds .fc-navshell .fc-drawer__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px var(--gutter-page);
	font-size: 17px;
	font-weight: var(--fw-semibold);
	color: var(--fc-nav-off);
	/* The drawer renders the same items as the panels and now answers the pointer the
	   same way, so it needs the transition the panels have always had. */
	transition: color var(--dur-fast) var(--ease-out);
}

/* Every item, anchor or not, and violet like the panel it mirrors — same reasoning as
   .fc-navshell .fc-navrow:hover, ancestor included. */
body.fc-ds .fc-navshell .fc-drawer__item:hover {
	color: var(--fc-nav-accent);
}

body.fc-ds .fc-drawer__item[aria-current="page"] {
	color: var(--fc-nav-on);
}

/* Indistinguishable from a built item, cursor included: see .fc-navrow.is-unbuilt. */
body.fc-ds .fc-drawer__item.is-unbuilt {
	cursor: pointer;
}

/* ── Nav responsive steps ── */

/*
 * 1024: the link row is withheld rather than invented at this width, and the
 * drawer takes over. The CTA stays beside the hamburger at every width — it is
 * the primary conversion path.
 */
@container page (max-width: 1100px) {
	body.fc-ds .fc-navlinks {
		display: none;
	}

	body.fc-ds .fc-navtoggle {
		display: inline-flex;
	}

	body.fc-ds .fc-drawer {
		display: block;
	}
}

@container page (max-width: 560px) {
	body.fc-ds .fc-nav {
		gap: 16px;
	}
}

/*
 * 440: the two remaining children (lockup + CTA + toggle) total more than the
 * content box. The CTA shrinks to its short label and the lockup REVERTS to the
 * system's 34px nav size rather than being scaled to fit. The lockup is never
 * scaled down — the width comes from everything around it.
 *
 * THE ARITHMETIC, REDONE FOR 320 RATHER THAN 390 (2026-08-25). This block used to
 * balance its budget at a 390px viewport — "164 lockup + 152 right group = 316 of
 * 350" — and it was wrong twice over. The two shrinking rules below were written as
 * `body.fc-ds .fc-navcta`, one class short of the base rule's
 * `body.fc-ds .fc-navshell .fc-navcta`, so specificity beat source order and the
 * phone CTA never actually shrank: it kept 14px type and 18px padding, ~108px wide
 * against the 88 the budget assumed. And the budget itself only held at 390 — every
 * narrower phone was over the content box regardless.
 *
 * The bar is `justify-content: space-between` with all three children `flex: none`,
 * so an over-wide row overflows its LAST child and .fc-page's `overflow-x: clip`
 * cut the hamburger in half. Reported as "the burger menu is cut off on the right",
 * which is precisely what it was, at 390 and at everything below it.
 *
 * The width comes back from four places, and the lockup is not one of them — nor is
 * anything the CTA is drawn with. That button is the primary conversion path at every
 * width, and it keeps its label AND its arrow here:
 *
 *   fixed  the CTA rule below now matches .fc-navshell, so it applies at all (-30)
 *   -10    the lockup's own left whitespace, taken off the row (see the brand rule)
 *   -10    the flex gap, which the lockup's own RIGHT whitespace already provides
 *   -8     the gap inside the right group, 20 → 12
 *   -4     the toggle's box, 44 → 40 wide (the icon is 24; the row is still 44 tall)
 *
 * which measures 154.5 lockup + 10.6 gap + ~83 CTA + 12 gap + 40 toggle ≈ 300 against
 * the (viewport - 40) the content box gives: 20px of air at 360, 35 at 375, 50 at 390.
 * Everything from 340 up fits with the arrow in place, and the 350 step after this one
 * covers what is left below that. Anything added to the phone bar takes its width from
 * something already in this list.
 */
@container page (max-width: 440px) {
	body.fc-ds .fc-nav {
		--logo-h-nav: 34px;
		/*
		 * Not the full --logo-clear-nav (0.62 × 34 = 21). FC_Logo_*.svg carries 45.4
		 * of its 715 × 148 viewBox as transparent margin on the RIGHT, which is
		 * 0.307 × the rendered height — so the mark's clear space is this gap plus
		 * that, and subtracting the one from the other keeps the brand rule exactly
		 * while handing 10px back to the row.
		 */
		gap: calc(var(--logo-clear-nav) - var(--logo-h-nav) * 0.307);
	}

	/*
	 * The same file's whitespace on the other side, and this one is also the
	 * alignment fix: the lockup's ink starts 42.5 units into that 715-wide viewBox,
	 * so the wordmark sat ~10px right of the section text below it even though the
	 * bar's 20px padding already equals --gutter-page at this width. Pulling the
	 * brand left by 0.287 × the rendered height puts the ink ON the gutter. It is an
	 * optical correction for whitespace baked into the SVG, not a padding override —
	 * which is why the number is tied to the logo's height rather than written -10px.
	 *
	 * Scoped to this step deliberately. Above 440 the bar's padding and the page
	 * gutter are different numbers on purpose (20 vs 40 below 820, 20 vs 72 below
	 * 1100), so there is no alignment to hold and the offset would read as a logo
	 * pushed off the edge.
	 */
	body.fc-ds .fc-nav__brand {
		margin-left: calc(var(--logo-h-nav) * -0.287);
	}

	/* The desktop 1.2× does not apply here: 34px is the size this arithmetic is
	   built on, and 41 would put the row over the content box. */
	body.fc-ds .fc-nav__logo {
		height: var(--logo-h-nav);
	}

	body.fc-ds .fc-cta-long {
		display: none;
	}

	body.fc-ds .fc-cta-short {
		display: inline;
	}

	/* .fc-navshell, not a bare .fc-navcta — see the note above. Without the ancestor
	   this rule loses to the base one and the phone CTA silently keeps its desktop
	   width, which is half of why the row overflowed. */
	body.fc-ds .fc-navshell .fc-navcta {
		font-size: var(--type-label-12);
		padding: 0 12px;
		gap: var(--sp-8);
	}

	/*
	 * 12px between the pair, not the bar's 20. With the link row withheld these are
	 * the only two items left and 20 was a rhythm set against six of them; both are
	 * still 44px-tall targets with a 12px channel, which is a comfortable phone hit.
	 */
	body.fc-ds .fc-navright {
		gap: 12px;
	}

	/*
	 * 40 wide, 44 tall. The icon inside is 24px, so the box still has 8px of slop a
	 * side, and the dimension a thumb actually misses in a fixed 76px bar — the
	 * height — is untouched.
	 */
	body.fc-ds .fc-navtoggle {
		width: 40px;
	}
}

/*
 * 350: the last resort, and the only thing on the bar allowed to go. The step above
 * measures ~300px of row, which the 300px content box of a 340 viewport just meets
 * and a 320 one (iPhone SE 1st gen, older small Androids) is 20px short of — and
 * short means the hamburger is clipped, because the overflow always lands on the
 * last child of a space-between row.
 *
 * So the arrow is dropped, and nothing else: 22px of glyph plus the 8px gap before
 * it takes the row to ~270 and puts the floor at ~310. It is the cheapest thing in
 * the bar — the label still says Demo, the border still says button — where the
 * alternatives were scaling the lockup, dropping the CTA outright, or eating the
 * 20px page gutter the logo was just aligned to. The arrow is kept at every width a
 * current phone actually reports; this is for the ones below them.
 */
@container page (max-width: 350px) {
	body.fc-ds .fc-navshell .fc-navcta__arrow {
		display: none;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * FOOTER
 * A plate. The stacked lockup takes a quarter, the link columns the rest.
 *
 * Two tones, like the nav, and expressed the same way: a set of custom properties
 * per surface with every rule downstream reading them, so a third tone would be a
 * handful of values and not a second copy of the footer.
 *
 * Which one a view gets is decided in PHP — fluent_commerce_ds_footer_tone() — and
 * the rule is contrast: the plate is the opposite of the section above it. Ink under
 * a page that ends on bone or white, bone under one that ends dark.
 *
 * That is also why there is no rule along the top edge on either tone. The design
 * draws none, and it does not need one: the change of surface IS the join. A footer
 * that matched the section it followed would have to have a hairline drawn in to
 * stop the page dissolving into it.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-footer {
	position: relative;
	z-index: 2;
	padding: 90px var(--gutter-footer) var(--pad-section);
	background: var(--fc-foot-bg);
	color: var(--fc-foot-on);
}

body.fc-ds .fc-footer[data-surface="dark"] {
	--fc-foot-bg: var(--surface-dark);
	--fc-foot-on: var(--fc-white);
	--fc-foot-muted: var(--fc-bone-a50);
	/*
	 * Links dim on hover on ink and on bone alike — the resting state is full
	 * strength, so there is nowhere brighter to go.
	 */
	--fc-foot-hover: var(--fc-bone-a60);
	/* The bottom row starts muted, so its hover goes the other way: up to full. */
	--fc-foot-legal-hover: var(--fc-bone);
}

body.fc-ds .fc-footer[data-surface="light"] {
	--fc-foot-bg: var(--surface-light);
	--fc-foot-on: var(--fc-ink-12);
	--fc-foot-muted: var(--fc-ink-a60);
	--fc-foot-hover: var(--fc-ink-a60);
	--fc-foot-legal-hover: var(--fc-ink-12);
	/*
	 * No lockup filter on either tone any more. The stacked mark only shipped in
	 * white, so bone knocked it to black with brightness(0); the horizontal lockup
	 * that replaced it on 2026-08-25 ships in both, and ds-chrome.php picks the file
	 * by tone exactly as the bar does. If a future mark is white-only again, the
	 * filter belongs here rather than in the rule — see .fc-footer__logo.
	 */
}

/*
 * THE LOGO, THEN THE FOUR LINK COLUMNS.
 *
 * 22% and 72px, where the export has 26% and --gap-blocks (120px). Both numbers were the
 * design's and both were spending width the links needed: at a 1202px measure the old pair
 * took 432px off the top before a single column was drawn, and the four columns that had to
 * share what was left came out at 167px — narrower than "Legacy OMS Modernization", which is
 * 179px at 14px medium. That is the overlap reported on 2026-08-26, and it ran from about
 * 1180px of container all the way up: the columns are widest at the TOP of the four-column
 * band and still too narrow there.
 *
 * 22% is measured off the mark rather than chosen: the lockup renders at 232px, so anything
 * under ~19% is the floor doing the work and the percentage stops meaning anything. 22
 * leaves the column a little air at the wide end and hands 96px back to the links.
 *
 * The floor is 232px and not the export's 220 for the same reason: 220 is narrower than the
 * mark it is holding, so it was never the number that applied.
 */
body.fc-ds .fc-footer-top {
	display: grid;
	grid-template-columns: minmax(232px, 22%) 1fr;
	gap: var(--sp-72);
	align-items: start;
}

@container page (max-width: 1100px) {
	body.fc-ds .fc-footer-top {
		grid-template-columns: 1fr;
		gap: var(--sp-54);
	}
}

/*
 * THE LOCKUP, WHICH IS NOW THE BAR'S. One line — icon, then wordmark beside it — at
 * the size the nav draws it, so the mark at the top of the page and the mark at the
 * bottom are the same object rather than two treatments of it. 232px is the nav's
 * rendered height (--logo-h-nav × 1.2 = 48) at the file's 4.831 box aspect.
 *
 * The two negative margins are OPTICAL CORRECTIONS, not layout. FC_Logo_*.svg spends
 * 5.95% of its width and 30.77% of its height on transparent margin — measured off
 * the ink box, which is why they are written as fractions of the rendered size and
 * not as pixels — where the stacked export it replaced was cropped flush to its ink.
 * Without them the swap alone would have pushed the mark ~14px in from the footer
 * gutter that the link columns and the legal row below it sit on, and dropped it
 * ~15px below the column heads it used to start level with.
 *
 * The clickable box keeps that whitespace, which is a bigger hit area than the ink
 * and no worse for it.
 */
body.fc-ds .fc-footer__brand {
	--fc-foot-logo-w: 232px;
	display: inline-block;
	margin-top: calc(var(--fc-foot-logo-w) / 4.831 * -0.3077);
	margin-left: calc(var(--fc-foot-logo-w) * -0.0595);
}

body.fc-ds .fc-footer__logo {
	display: block;
	width: var(--fc-foot-logo-w);
	/* auto, so the 715 × 148 attributes carry the aspect; max-width is the safety
	   net for a column narrower than the mark, which the 220px minimum and the
	   full-width phone row both clear today. */
	height: auto;
	max-width: 100%;
}

body.fc-ds .fc-footer__cols {
	gap: var(--sp-54) var(--sp-32);
}

body.fc-ds .fc-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * 14px flat through the whole footer — heads, links and the bottom row — where it
 * used to be 12. Flat and not --type-mono-14, which ramps DOWN to 12px in a narrow
 * container and would undo this on exactly the screens where a 12px legal link was
 * hardest to hit. 14 is also the smallest size in the nav, so the two ends of the
 * page now agree.
 */
body.fc-ds .fc-footer__head {
	font-size: 14px;
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--fc-foot-muted);
}

/*
 * The first column's heading is intentionally blank in the design — the top
 * links are the primary destinations and need no label — but the slot still has
 * to occupy its line so all four columns start at the same baseline.
 */
body.fc-ds .fc-footer__head:empty::before {
	content: "\00a0";
}

body.fc-ds .fc-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* .fc-footer in the selector for the same cascade reason as .fc-navshell .fc-navrow:
   the footer carries data-surface, so tokens.css's dark-surface <a> rule outranked a
   bare .fc-footer__link and every column link on the dark footer rested at bone
   instead of --fc-foot-on, taking most of its hover with it. */
body.fc-ds .fc-footer .fc-footer__link {
	font-size: 14px;
	font-weight: var(--fw-medium);
	line-height: var(--lh-body);
	color: var(--fc-foot-on);

	/* ── THESE WRAP, AND THAT IS THE FIX ────────────────────────────────────
	 *
	 * white-space: nowrap used to be here, to hold each label to one line. It said so, and
	 * it said what it cost: "a label longer than its column overflows instead of breaking …
	 * if a long one is ever added, shorten the label rather than reaching for overflow".
	 *
	 * Long ones were added. The Build-13 footer links include "Legacy OMS Modernization"
	 * (179px) and "AI & Agentic Commerce", and nowrap turned a label that did not fit into
	 * a label printed straight across the column beside it. Shortening them is a copy
	 * decision and not this stylesheet's to make, so the nowrap goes instead: a row on two
	 * lines sits a little out of step with the column next to it, which is untidy, where two
	 * labels on top of each other is unreadable. It is also what the export itself does —
	 * nowrap was never in the design.
	 *
	 * The rule above reclaimed enough width that nothing wraps at the top of the range;
	 * below about 1500px of container the two long labels take a second line.
	 *
	 * text-wrap: pretty rather than balance, because these are two- and three-word labels
	 * and balance would split "Order Management" across two lines to even them up. pretty
	 * only steps in to stop a single word being left alone on the last line.
	 *
	 * overflow-wrap is the floor and nothing else: it only ever fires on a single word
	 * wider than its column, which no label here is at any width the grid produces. Without
	 * it, one long compound word added later would put the overlap straight back. */
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* .fc-footer for the specificity, and here it changes what you see: the footer's hover
   goes DIM (bone-60), so the prose a:hover rule winning meant it went white instead —
   a hover that brightened where the design fades. */
body.fc-ds .fc-footer .fc-footer__link:hover {
	color: var(--fc-foot-hover);
}

body.fc-ds .fc-footer__link[aria-current="page"] {
	color: var(--fc-foot-hover);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * CERTIFICATIONS AND SOCIAL
 * Three marks on one line above the legal row, each a redrawn shield and a label,
 * with the two social accounts at the other end of the same line (2026-08-27).
 * The row wraps rather than shrinking: at the narrow end the labels stack, which is
 * legible, where three 14px labels squeezed onto one line is not.
 * ────────────────────────────────────────────────────────────────────────── */

/*
 * The row that holds both lists. space-between puts the certifications left and the
 * accounts right, which is the split .fc-footer-bottom directly below already uses.
 * The margin lives here rather than on the lists so that either list can be absent —
 * both come from filterable arrays — without the row collapsing to nothing but a gap.
 *
 * The gap matters at the narrow end: when the accounts drop onto their own line they
 * land 16px under the certifications, not touching them.
 */
body.fc-ds .fc-footer__marks {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-16) var(--sp-32);
	flex-wrap: wrap;
	margin-top: var(--gap-blocks);
}

body.fc-ds .fc-footer__certs,
body.fc-ds .fc-footer__social {
	display: flex;
	align-items: center;
	gap: var(--sp-16) var(--sp-32);
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: var(--fw-medium);
	color: var(--fc-foot-muted);
}

body.fc-ds .fc-footer__cert {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* The glyph never gives way; the label beside it is what wraps. */
body.fc-ds .fc-footer__cert-icon {
	flex: none;
}

/*
 * A social account is a certification row that happens to be a link: it takes
 * .fc-footer__cert for the glyph-and-label geometry and only says here what being a
 * link adds. colour: inherit and not a value of its own — that is the whole point of
 * "the same colour as the security icons", and it keeps working on both footer tones
 * because the list above sets --fc-foot-muted for it to inherit.
 *
 * .fc-footer IS IN THE SELECTOR FOR SPECIFICITY, not for scope. tokens.css sets
 * `body.fc-ds [data-surface="dark"] a { color: bone }`, which counts two class-level
 * parts and outranks a plain `body.fc-ds .fc-footer__social-link` — without the extra
 * class these two links rested at full strength while the shields beside them sat at
 * 50%, which is the one thing the brief asked them not to do. Same trick, same reason,
 * as .fc-footer__link twelve rules up; see the notes at .fc-navrow for the long version.
 *
 * Hover goes to full strength rather than the columns' --fc-foot-hover, for the reason
 * the legal row gives: a link that starts muted has nowhere dimmer to go.
 */
body.fc-ds .fc-footer .fc-footer__social-link {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

body.fc-ds .fc-footer .fc-footer__social-link:hover,
body.fc-ds .fc-footer .fc-footer__social-link:focus-visible {
	color: var(--fc-foot-legal-hover);
}

/*
 * With the marks row present the legal line follows at 20px, not the block gap: the
 * two rows are one group — the small print — sitting below the footer's body, and
 * --gap-blocks between them would read as two separate sections. The standalone
 * margin on .fc-footer-bottom still applies when there are no marks at all.
 */
body.fc-ds .fc-footer__marks + .fc-footer-bottom {
	margin-top: 20px;
}

body.fc-ds .fc-footer-bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-54);
	flex-wrap: wrap;
	margin-top: var(--gap-blocks);
	font-size: 14px;
	font-weight: var(--fw-medium);
	color: var(--fc-foot-muted);
}

body.fc-ds .fc-footer-bottom__legal {
	display: flex;
	align-items: flex-end;
	gap: var(--sp-24);
	flex-wrap: wrap;
}

body.fc-ds .fc-footer-bottom a {
	color: var(--fc-foot-muted);
}

body.fc-ds .fc-footer-bottom a:hover {
	color: var(--fc-foot-legal-hover);
}