/*
 * GLOBAL NAVIGATION — design handoff "option 9A": header, mega-menus, drawer, footer.
 *
 * Spec: design_handoff_navigation/README.md.
 *
 * TOKENS. The COLOURS are declared on `.nv9` / `.nv9f` and nowhere else, the same containment
 * the 6A home page uses — the handoff's palette differs from theme.json's (#1a72b8 vs #1576af).
 * They stay scoped on purpose: the palette is still under review (the client finds the site too
 * blue and too hard), so promoting these values into theme.json now would canonise something
 * provisional. That happens after the visual design pass — board/ui-ux/task6.md phase B.
 *
 * RADII AND THE FRAME WIDTH are no longer written here. The 20/18/14/10/999 scale was declared
 * verbatim in four separate stylesheets and 1280px in four more, so changing a radius meant
 * editing every surface. They now come from theme.json (`custom.radius`, `layout.contentSize`)
 * and the local names below are aliases, so this file still reads in its own vocabulary. The
 * theme's older 2/4/8/9999 scale still exists alongside it and reconciling the two is a visual
 * decision, also deferred to phase B.
 *
 * TYPE: the theme's Roboto Condensed, not Fira Sans Condensed. The handoff allows it —
 * "any pairing with full Cyrillic coverage is acceptable" — and the project forbids adding CDN
 * font dependencies.
 *
 * THE HARD REQUIREMENT, and what implements it:
 *
 *     "every item must survive a label 1.5× longer than shown, with no ellipsis and no
 *      truncation [...] the nav row wraps to a second line of pills instead"
 *
 * Three rules together do that, and none of them works alone:
 *   .nv9__pills   { flex-wrap: wrap }   the row grows downward instead of sideways
 *   .nv9__pill    { flex: 0 0 auto; white-space: nowrap }   a pill is never compressed
 *   .nv9__brandrow is a SEPARATE ROW from the nav, so a long label cannot push the phone block
 *                  out of the header — there is nothing beside it to push.
 * There is no `text-overflow: ellipsis` anywhere in this file, deliberately.
 */

/* =========================================================================
 * TOKENS
 * ====================================================================== */

/* `.nv-footer--9a` is the band that wraps `.nv9f`, so it has to be in scope for the tokens too —
   it now paints the footer's colour and a variable declared on its own child cannot reach it. */
.nv9,
.nv9f,
.nv-footer--9a {
	--nv9-blue: #1a72b8;
	--nv9-blue-hover: #155f9b;
	--nv9-tint: #eef5fb;
	--nv9-tint-border: #cfe0ee;
	--nv9-green: #7ac143;
	--nv9-link-hover: #4c9a2a;
	--nv9-viber: #7a4fbf;

	--nv9-ink: #16232c;
	--nv9-body: #3b4a54;
	--nv9-body-2: #4a5761;
	--nv9-muted: #6b7880;
	--nv9-muted-2: #7b8891;
	--nv9-faint: #8d9aa3;
	--nv9-faint-2: #96a2aa;

	--nv9-border: #e5e9ec;
	--nv9-rule: #eef1f3;
	--nv9-fill: #f6f9fb;
	--nv9-footer-text: #a9b6bf;
	--nv9-footer-rule: #2a3740;

	/* Shape and width come from theme.json — see the RADII note in the file header. The local
	   names stay so the rules below read in this surface's own vocabulary; only the values moved. */
	--nv9-r-shell: var(--wp--custom--radius--shell);
	--nv9-r-block: var(--wp--custom--radius--card);
	--nv9-r-promo: var(--wp--custom--radius--inner);
	--nv9-r-control: var(--wp--custom--radius--control);
	--nv9-r-pill: var(--wp--custom--radius--pill);

	--nv9-frame: var(--wp--style--global--content-size);
	--nv9-gutter: 40px;

	--nv9-condensed: var(--wp--preset--font-family--body, "Roboto Condensed", system-ui, sans-serif);
}

/* =========================================================================
 * HEADER
 * ====================================================================== */

.nv9 {
	position: relative;
	background: #fff;
	color: var(--nv9-ink);
}

.nv9__rule {
	block-size: 6px;
	background: linear-gradient(90deg, var(--nv9-blue) 0 62%, var(--nv9-green) 62% 100%);
}

.nv9 a {
	color: var(--nv9-blue);
	text-decoration: none;
}

.nv9 a:hover {
	color: var(--nv9-link-hover);
}

.nv9 :is(a, button):focus-visible,
.nv9f :is(a, button):focus-visible {
	outline: 2px solid var(--nv9-blue);
	outline-offset: 2px;
}

/* ------------------------------------------------------- row 1: brand + contact */

.nv9__brandrow {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	max-inline-size: var(--nv9-frame);
	margin-inline: auto;
	padding: 16px var(--nv9-gutter) 12px;
	border-block-end: 1px solid var(--nv9-border);
}

.nv9__brand {
	display: block;
	color: var(--nv9-ink);
}

.nv9__brand:hover {
	color: var(--nv9-ink);
}

/*
 * THE BRAND MARK IS THE REAL LOGO, not the handoff's text wordmark.
 *
 * The business has two artworks — logotip-rus.jpg and logotip-ukr.jpg, both 890x112 — and the
 * wordmark inside them is set per language. The handoff draws type because the prototype had
 * no files to hand; the files exist, so they ship, and the type treatment below survives as the
 * fallback for when no attachment resolves.
 *
 * Sized by HEIGHT with `inline-size: auto`, because the lockup is 8:1 and its width is whatever
 * that ratio makes it. `wp_get_attachment_image()` always emits width/height, so constraining
 * one axis in CSS needs the other released or the aspect ratio is overridden and the logo
 * squashes.
 */
.nv9__wordmark {
	display: block;
	font-family: var(--nv9-condensed);
	font-size: 23px;
	line-height: 1.1;
	white-space: nowrap;
}

/*
 * SCOPED UNDER `.nv9` TO OUT-SPECIFY WOOCOMMERCE, not for readability.
 *
 * woocommerce-layout.css ships `.woocommerce img, .woocommerce-page img { height: auto }`, and
 * WooCommerce puts `woocommerce-page` on the BODY of the shop, the product, the cart and the
 * checkout — so that rule reaches into the site header and matches this logo. At (0,1,1) it
 * beat the bare `.nv9__logo` at (0,1,0), `height: auto` won over `block-size`, and the logo
 * rendered at its intrinsic height on exactly those four page types: measured 90.6px against
 * 40px everywhere else, which made the whole header 198px on a shop page and 148px on every
 * other one. `.nv9 .nv9__logo` is (0,2,0) and wins without `!important`.
 */
/*
 * `aspect-ratio` PINS THE WIDTH TO THE ARTWORK, not to whichever derivative loaded.
 *
 * The srcset offers the logo at 300x37 and 600x76, and WordPress's crops round differently —
 * 8.108:1 against 7.895:1. Which candidate the browser takes varies with DPR and timing, so the
 * same 30px-tall mark measured 238.39px wide on one page and 236.84px on another. Deriving the
 * width from the attachment's own full-size dimensions makes it the same number on every page,
 * and `object-fit: contain` (base.css) letterboxes the odd candidate by under 2px rather than
 * stretching it.
 *
 * THE RATIO IS NOT WRITTEN HERE. It is a fact about whichever image the administrator has set
 * as the logo — `inc/nav-9a.php` reads the attachment's real dimensions and emits
 * `--nv9-logo-ratio` on the element. Hardcoding 890/112 would letterbox any replacement artwork
 * of a different shape, which is a content decision the theme must not make. The `auto`
 * fallback is the pre-existing behaviour, so a logo whose metadata is missing still renders.
 *
 * The two heights are design-system values and live in theme.json (`custom.logo`), not here —
 * the mark is 40px in the brand row and 30px in the mobile row and drawer.
 */
.nv9 .nv9__logo {
	display: block;
	block-size: var(--wp--custom--logo--height);
	inline-size: auto;
	aspect-ratio: var(--nv9-logo-ratio, auto);
	max-inline-size: 100%;
}

.nv9 .nv9__logo--sm {
	block-size: var(--wp--custom--logo--height-compact);
}

.nv9__wordmark-accent {
	color: var(--nv9-blue);
}

.nv9__tagline {
	display: block;
	margin-block-start: 2px;
	font-size: 11.5px;
	color: var(--nv9-muted-2);
	white-space: nowrap;
}

.nv9__contact {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-inline-start: auto;
	white-space: nowrap;
}

.nv9__phoneblock {
	margin-inline-end: 14px;
	text-align: end;
}

.nv9__phone {
	display: block;
	font-family: var(--nv9-condensed);
	font-size: 20px;
	line-height: 1.15;
	color: var(--nv9-ink);
}

/*
 * The header phone is a `tel:` link, so on any touch width it is a tap target, not a label —
 * 24.1px measured. 1024 matches the rest of the touch floor; the desktop header keeps its
 * tighter block.
 */
@media (max-width: 1024px) {
	.nv9__phone {
		display: inline-flex;
		align-items: center;
		min-block-size: var(--wp--custom--touch--target);
	}
}

.nv9__hours {
	display: block;
	font-size: 11.5px;
	color: var(--nv9-muted-2);
}

.nv9__messengers {
	display: flex;
	gap: 8px;
}

/*
 * Messenger pills. The handoff asks for the real brand glyphs "if you have them licensed" and
 * otherwise a coloured dot — the dot is what ships, because a Telegram or Viber logo is a
 * trademark and this repo has no licence recorded for either.
 */
.nv9__msg {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border: 1px solid var(--nv9-border);
	border-radius: var(--nv9-r-pill);
	color: var(--nv9-ink);
	font-size: 13.5px;
	line-height: 1;
}

.nv9__msg:hover {
	border-color: var(--nv9-blue);
	color: var(--nv9-ink);
}

.nv9__dot {
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: var(--nv9-blue);
}

.nv9__msg--viber .nv9__dot {
	background: var(--nv9-viber);
}

.nv9__cart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid var(--nv9-border);
	border-radius: var(--nv9-r-pill);
	color: var(--nv9-ink);
	font-size: 14px;
	line-height: 1;
}

.nv9__cart:hover {
	border-color: var(--nv9-blue);
	color: var(--nv9-ink);
}

.nv9__cart-count {
	display: grid;
	place-items: center;
	inline-size: 20px;
	block-size: 20px;
	border-radius: 50%;
	background: var(--nv9-green);
	color: #fff;
	font-size: 12px;
	line-height: 1;
}

/* -------------------------------------------------------------- row 2: nav */

.nv9__navrow {
	border-block-end: 1px solid var(--nv9-border);
}

.nv9__pills {
	display: flex;
	/* The wrap IS the label-resilience mechanism — see the file header. */
	flex-wrap: wrap;
	gap: 2px;
	max-inline-size: var(--nv9-frame);
	margin-inline: auto;
	padding: 6px var(--nv9-gutter) 8px;
}

.nv9__pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	padding: 10px 14px;
	border: 0;
	border-radius: var(--nv9-r-pill);
	background: transparent;
	color: var(--nv9-body);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.nv9__pill:hover {
	background: var(--nv9-fill);
	color: var(--nv9-body);
}

.nv9__pill.is-current,
.nv9__pill[aria-expanded="true"] {
	background: var(--nv9-tint);
	color: var(--nv9-blue-hover);
	font-weight: 600;
}

.nv9__caret {
	font-size: 10px;
	line-height: 1;
}

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

/*
 * Absolutely positioned so opening a panel overlays the body and never shifts it — the
 * handoff makes that explicit.
 */
.nv9__panels {
	position: absolute;
	inset-inline: 0;
	z-index: 40;
}

.nv9__panel {
	border-block-end: 1px solid var(--nv9-border);
	background: #fff;
	box-shadow: 0 18px 40px rgba(15, 44, 63, 0.1);
}

.nv9__panel[hidden] {
	display: none;
}

.nv9__panel-inner {
	max-inline-size: var(--nv9-frame);
	margin-inline: auto;
	padding: 24px var(--nv9-gutter) 28px;
}

.nv9__panel-label {
	margin: 0 0 14px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nv9-muted-2);
}

/* Only the catalogue panel has a promo column; the rest are a single body. */
.nv9__panel--promo .nv9__panel-body {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 32px;
	align-items: start;
}

/*
 * MULTI-COLUMN, not grid. The handoff's own reasoning: it "lets the list take anything from 3
 * to 15 items and degrade gracefully". A grid would need a row count decided in advance;
 * columns just reflow. `break-inside: avoid` keeps a title and its description together.
 */
.nv9__items {
	column-count: var(--nv9-cols, 2);
	column-gap: 24px;
}

.nv9__item {
	display: block;
	break-inside: avoid;
	padding: 9px 12px;
	border-radius: var(--nv9-r-control);
	color: var(--nv9-ink);
	transition: background-color 150ms ease;
}

a.nv9__item:hover {
	background: var(--nv9-fill);
	color: var(--nv9-ink);
}

.nv9__item-title {
	display: block;
	font-size: 14.5px;
	line-height: 1.35;
}

.nv9__item-desc {
	display: block;
	margin-block-start: 1px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--nv9-muted-2);
}

/* The tool row: the primary action in its panel, and the only starred item on the site. */
.nv9__item--tool {
	background: var(--nv9-fill);
}

.nv9__item--tool .nv9__item-title {
	color: var(--nv9-blue-hover);
	font-weight: 600;
}

.nv9__star {
	margin-inline-end: 4px;
}

/* "Усі товари" — permanent last entry, marked so it never reads as one more category. */
.nv9__item--all .nv9__item-title {
	display: inline-block;
	padding-block-end: 2px;
	border-block-end: 1px solid var(--nv9-tint-border);
	font-weight: 600;
}

/* A destination that has not been written yet. Present, and visibly not clickable. */
.nv9__item--soon .nv9__item-title {
	color: var(--nv9-muted);
}

.nv9__count {
	color: var(--nv9-muted-2);
	font-size: 12.5px;
	font-weight: 400;
}

.nv9__count--soon {
	color: var(--nv9-faint-2);
	font-style: italic;
}

/* ------------------------------------------------------------- promo card */

.nv9__promo {
	display: block;
	padding: 18px 20px;
	border: 1px solid var(--nv9-tint-border);
	border-radius: var(--nv9-r-promo);
	background: var(--nv9-tint);
	color: var(--nv9-ink);
}

.nv9__promo:hover {
	color: var(--nv9-ink);
}

.nv9__promo-kicker {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nv9-blue-hover);
}

.nv9__promo-title {
	display: block;
	margin-block-start: 4px;
	font-family: var(--nv9-condensed);
	font-size: 20px;
	line-height: 1.2;
}

.nv9__promo-body {
	display: block;
	margin-block-start: 6px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--nv9-body-2);
}

.nv9__promo-link {
	display: block;
	margin-block-start: 10px;
	font-size: 13.5px;
	color: var(--nv9-blue);
}

/* ======================================================== mobile header + drawer */

.nv9__mobile {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-block-end: 1px solid var(--nv9-border);
}

/*
 * 44×44, from the mobile handoff's rule 2: "icon-only buttons 44×44". They were 40×40, which is
 * under every platform's own minimum as well as this project's — and these two are the burger
 * and the cart, the first and last thing a phone visitor taps.
 */
.nv9__burger,
.nv9__m-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--wp--custom--touch--icon);
	block-size: var(--wp--custom--touch--icon);
	flex: 0 0 auto;
	padding: 0;
	border: 1px solid var(--nv9-border);
	border-radius: var(--nv9-r-control);
	background: #fff;
	color: var(--nv9-ink);
	font-size: 14px;
	cursor: pointer;
}

.nv9__burger-bars,
.nv9__burger-bars::before,
.nv9__burger-bars::after {
	display: block;
	inline-size: 17px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--nv9-ink);
}

.nv9__burger-bars {
	position: relative;
}

.nv9__burger-bars::before,
.nv9__burger-bars::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
}

.nv9__burger-bars::before {
	inset-block-start: -6px;
}

.nv9__burger-bars::after {
	inset-block-start: 6px;
}

.nv9__m-brand {
	display: flex;
	align-items: center;
	/* The mark is 30px but the link around it is a tap target like any other — 44px minimum,
	   without changing how big the logo itself draws. */
	min-block-size: var(--wp--custom--touch--icon);
	min-inline-size: 0;
	font-family: var(--nv9-condensed);
	font-size: 19px;
	color: var(--nv9-ink);
	white-space: nowrap;
}

/*
 * «Подзвонити» is the single most important control on a phone — the handoff says so outright
 * ("Mobile is where the phone button lives"). It measured 31.5px tall against the 48px floor.
 * Centred with flex rather than by inflating the padding, so the pill grows without the label
 * drifting off its optical centre.
 */
.nv9__m-call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--wp--custom--touch--target);
	margin-inline-start: auto;
	padding: 9px 14px;
	border-radius: var(--nv9-r-pill);
	background: var(--nv9-blue);
	color: #fff;
	font-size: 13.5px;
	line-height: 1;
	white-space: nowrap;
}

.nv9__m-call:hover {
	background: var(--nv9-blue-hover);
	color: #fff;
}

.nv9__scrim {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(11, 26, 35, 0.5);
}

.nv9__scrim[hidden],
.nv9__drawer[hidden] {
	display: none;
}

.nv9__drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 61;
	inline-size: min(88vw, 380px);
	overflow-y: auto;
	background: #fff;
	box-shadow: 0 0 40px rgba(15, 44, 63, 0.25);
}

.nv9__drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-block-end: 1px solid var(--nv9-border);
}

.nv9__drawer-close {
	inline-size: 40px;
	block-size: 40px;
	border: 1px solid var(--nv9-border);
	border-radius: var(--nv9-r-control);
	background: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.nv9__drawer-list {
	padding: 4px 16px;
}

.nv9__drow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	inline-size: 100%;
	min-block-size: 48px;
	padding: 14px 4px;
	border: 0;
	border-block-end: 1px solid var(--nv9-rule);
	background: transparent;
	color: var(--nv9-ink);
	font-family: inherit;
	font-size: 16px;
	text-align: start;
	cursor: pointer;
}

.nv9__drow[aria-expanded="true"] {
	color: var(--nv9-blue-hover);
	font-weight: 600;
}

.nv9__drow-mark {
	color: var(--nv9-muted-2);
}

.nv9__dchildren[hidden] {
	display: none;
}

.nv9__dchild {
	display: block;
	padding: 10px 12px;
	border-radius: var(--nv9-r-control);
	color: var(--nv9-body-2);
	font-size: 14.5px;
}

.nv9__dchild--tool,
.nv9__dchild--all {
	color: var(--nv9-blue-hover);
	font-weight: 600;
}

.nv9__dchild--tool {
	background: var(--nv9-fill);
}

.nv9__dchild--soon {
	color: var(--nv9-faint-2);
}

.nv9__drawer-contact {
	padding: 16px;
	border-block-start: 1px solid var(--nv9-border);
	font-size: 13px;
	color: var(--nv9-muted-2);
}

.nv9__drawer-contact p {
	margin: 0 0 4px;
}

.nv9__drawer-phone .nv9__phone {
	font-size: 20px;
}

/* =========================================================================
 * FOOTER
 * ====================================================================== */

/*
 * THE FOOTER IS ONE BAND, NOT A CARD INSIDE ONE.
 *
 * This used to carry the ink background and an 18px radius while `.nv-footer`, the shell element
 * wrapping it, painted its own darker `contrast` and added 48px of padding around it. Measured on
 * the home page at a 1728px viewport: a 1280x333 rounded rectangle in #16232c floating on a
 * 1728x503 band in #18181b, with a visible ledge of the wrong dark on all four sides — the
 * "floating black square". Two elements were each trying to be the footer.
 *
 * So this is now what it should have been: a plain 1280px CONTENT COLUMN with no colour of its
 * own. The band's colour, and the handoff's `#16232c`, belong to `.nv-footer--9a` below, which is
 * the element that actually spans the page.
 */
.nv9f {
	max-inline-size: var(--nv9-frame);
	margin-inline: auto;
	color: var(--nv9-footer-text);
}

/*
 * The band. `background` and `padding` are stated here rather than left to shell.css's
 * `.nv-footer`, whose `contrast` (#18181b) is a different colour from this design's ink and whose
 * `lg` padding is not the 32px the handoff asks for. The top margin goes too: the callback block
 * above already ends the page, and 48px of white between it and the footer was the gap that made
 * the band read as detached.
 */
.nv-footer--9a {
	margin-block-start: 0;
	padding-block: 32px;
	background: var(--nv9-ink);
}

.nv9f a {
	color: var(--nv9-footer-text);
	text-decoration: none;
}

.nv9f a:hover {
	color: #fff;
}

.nv9f__cols {
	display: grid;
	grid-template-columns: 1fr 1.1fr 1.1fr 1fr;
	gap: 28px;
	padding: 34px 32px 30px;
}

.nv9f__h {
	margin: 0 0 14px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
}

.nv9f__col ul {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.nv9f__strong {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
}

.nv9f__soon {
	color: #6d7c86;
}

.nv9f__col--contact p {
	margin: 0 0 9px;
	font-size: 14px;
}

.nv9f__phone .nv9__phone {
	font-family: var(--nv9-condensed);
	font-size: 21px;
	color: #fff;
}

.nv9f__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 16px 32px 20px;
	border-block-start: 1px solid var(--nv9-footer-rule);
	font-size: 13px;
}

.nv9f__entity {
	margin: 0;
	color: var(--nv9-faint);
}

.nv9f__todo {
	color: #e0a33a;
	font-weight: 600;
}

.nv9f__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nv9f__lang {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-inline-start: auto;
}

/*
 * The language switcher lives only in the footer (9A moved it out of the header), so these two
 * links are the ONLY way to change language on a phone. They measured 21.4px tall. Made a real
 * tap target; `inline-flex` keeps them on one line with the generated separator between them.
 */
.nv9f__lang-link {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--touch--target);
}

/* The separator is generated, so it is never read aloud and never copied with the text. */
.nv9f__lang-link + .nv9f__lang-link::before {
	content: "";
	display: inline-block;
	inline-size: 1px;
	block-size: 12px;
	margin-inline-end: 10px;
	background: var(--nv9-body-2);
	vertical-align: -1px;
}

.nv9f__lang-link.is-current {
	color: #fff;
	font-weight: 600;
}

.nv9f__copy {
	margin: 0;
	color: var(--nv9-faint);
}

/* =========================================================================
 * RESPONSIVE
 * ====================================================================== */

@media (max-width: 1024px) {
	.nv9 {
		--nv9-gutter: 16px;
	}

	/* Below 1024 the desktop nav is replaced by the drawer, and the messenger pills move into
	   the drawer's contact block — both from the handoff. */
	.nv9__brandrow,
	.nv9__navrow,
	.nv9__panels {
		display: none;
	}

	.nv9__mobile {
		display: flex;
	}

	.nv9__rule {
		block-size: 5px;
	}

	.nv9f__cols {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		padding: 28px 20px 24px;
	}

	.nv9f__legal {
		padding-inline: 20px;
	}

	.nv9f__lang {
		margin-inline-start: 0;
	}
}

@media (max-width: 560px) {
	.nv9f__cols {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nv9 *,
	.nv9f * {
		transition: none !important;
	}
}