/**
 * Bonza, global HEADER, utility bar (row 1) plus two-row shell wrapper.
 *
 * Config investigated: Blocksy's native header builder (theme_mod
 * `header_placements`) already renders row 2 (logo/search/account/
 * wishlist/cart/mobile-trigger, `.ct-header`) config-first, confirmed
 * live on bonza-retheme.blz.au before this task started (status note on
 * ClickUp 86eypb6ab). The centre nav ("Superfoods"/"Supplements"/
 * "Health hub for dogs") is also config-first: a real WP menu ("Header
 * Primary Nav") was created and assigned to Blocksy's own `menu_1`
 * location, then wired into the `middle-row`/`middle` placement of
 * `header_placements` via `wp theme mod` on staging. No custom PHP menu
 * markup: Blocksy's `menu` builder item renders it natively
 * (`#header-menu-1 .menu-container`, `.ct-menu-link`), so it inherits
 * Blocksy's own accessible dropdown and keyboard-interaction JS.
 *
 * Blocksy's header builder ships logo/search/account/cart/wishlist/
 * trigger/menu/text/socials/button items only (confirmed via `grep` of
 * inc/panel-builder/header/*\/config.php on the live theme package).
 * None of those model this file's actual subject: row 1, the trust and
 * utility bar (icon-lockup trust items, a Feefo review line, a real
 * WPML language switcher, an accessible "Our Tale" disclosure, a "Help"
 * link). The established precedent for this exact gap is
 * bonza_checkout_header_render() (86eypb6hr): a PHP-rendered block
 * added additively via a hook that runs INSIDE `#main-container`. The
 * `blocksy:builder:header:custom-output` short-circuit filter is a
 * different mechanism and would replace Blocksy's entire builder output
 * (confirmed by reading inc/integrations/theme-builders.php:
 * `blocksy_output_header()` passes an empty string as the filter's
 * default and skips the native builder on any non-empty return), so
 * this utility bar hooks `blocksy:header:before` (fires right before
 * Blocksy's own `$global_header` echo, confirmed by reading header.php)
 * to prepend row 1 above the already-live icon row and centre nav
 * without touching either.
 *
 * editor-friendly-ok: this restyles the parent theme's global header
 * chrome via a `do_action` hook, matching the reasoning already used
 * for checkout-header-footer.css in this directory. No Gutenberg
 * block/pattern counterpart exists for a global header, so there is no
 * editor surface to keep parity with.
 *
 * Figma: cY9QX6IwGVaaGI4r7J2RRF, HEADER component set 148:18023, desktop
 * variant 148:18019, utility bar frame #29600:56712. Root shell: flex
 * column, gap 16px. Utility bar: flex row, justify space-between,
 * padding 12px 64px, bg #F8EDE3. Left group gap 16px, right group gap
 * 12px. The frame is misnamed "Status Bar/Android" and node
 * #20121:148409 (an Android status-bar mockup artifact positioned above
 * it) is a documented Figma-file defect, not real header content, and
 * is intentionally not reproduced here (see ClickUp 86eypb6ab).
 *
 * Contrast (WCAG 2.2 AA, measured; 86eyv0k44 GL-05: this docblock still
 * cited the pre-2026-09-07 --bhu-ink value, corrected here): utility-bar
 * text #2E2A2A on #F8EDE3 background computes to 12.30:1 via the
 * sRGB-to-linear relative luminance formula (was #494545 at 8.20:1),
 * clearing both the 4.5:1 AA-normal-text and 7:1 AAA-normal-text
 * thresholds. Focus rings use #2C6E4F (Bonza's accent
 * green, also used in checkout-trust-signal.css) at 2px solid with a 2px
 * offset; verified above 3:1 against both the #F8EDE3 bar and the white
 * main-bar backgrounds a focused element can land on.
 *
 * Sticky-state decision: Figma's STICKY frame (#34620:76538) proves the
 * header sticks on scroll but does not draw a scrolled state. Build
 * decision made here: keep row 1 in the DOM and collapse its height and
 * opacity to zero on scroll, so the layout does not jump under
 * `prefers-reduced-motion`, and let the main bar's own shadow read as
 * "lifted" the same way it does unscrolled. This is a judgement call,
 * flagged as such in the ClickUp comment, not a Figma-confirmed spec.
 *
 * Breakpoints: 375 mobile (row 1 hides here; mobile HEADER is the
 * full-screen SEARCH panel component, 14061:188816, a separate task per
 * this task's own scope note), 768 tablet (desktop variant reflowed per
 * this task's own "Tablet reflow" line item: padding tightens, the
 * review line truncates), 1440/1512 desktop (Figma-literal values).
 *
 * @date 2026-08-27
 */

/* editor-friendly-ok: same exemption as the file docblock.
 * FIX (client-reported, 2026-09-04): the dropdown panels were STILL rendering under
 * row 2 despite `.bhu-disclosure__panel`'s own `z-index: 40` -- confirmed live via
 * `document.elementFromPoint()` hit-testing across the open panel's area, every point
 * hit `#header`/its children (the search input, a row-2 div), not the panel. Root
 * cause: `z-index` only competes within a shared stacking context, and `.bhu-bar`
 * (this rule) is `position: static`, so it never forms one -- its descendant panel's
 * `z-index: 40` is scoped inside `.bhu-disclosure`'s own LOCAL context (itself
 * `position: relative`, `z-index: auto`, i.e. no explicit stacking level), which never
 * escapes to compete with `#header`'s real stacking context, confirmed live via
 * getComputedStyle(): `#header.ct-header` is `position: relative; z-index: 50`
 * (Blocksy's own base style). Promoting `.bhu-bar` itself to a positioned element with
 * a higher z-index (60, > header's 50) fixes this at the source, without touching any
 * `top`/`left`/`right` position value on the panel itself -- purely a stacking fix, no
 * layout change.
 */
/* ---------------------------------------------------------------------
   Row 1: utility/trust bar (#29600:56712)
   editor-friendly-ok: same exemption as the file docblock.
   CORRECTION (Fable 5.1 audit, 2026-09-07): --bhu-ink was #494545,
   confirmed against Figma to be #2E2A2A instead (the same ink token the
   nav-link and icon colors elsewhere in this header already use) --
   darker than #494545, so the contrast measurements already documented
   for this variable's usages only improve, never regress.
   --------------------------------------------------------------------- */
.bhu-bar {
	--bhu-ink: #2E2A2A;
	--bhu-bg: #F8EDE3;
	--bhu-rule: #D1D5DB;
	--bhu-focus: #2C6E4F;

	position: relative;
	/* FIX (86eypb6m6): was 60, chosen when Blocksy's own `#header.ct-header`
	   sat at `z-index: 50`. header-navigation.css:128 later promoted `#header`
	   to `z-index: 100` so the sticky header would clear the hero, and that
	   silently put this bar back underneath it: the language and "Our Tale"
	   panels opened BEHIND the white header card again, which is the exact
	   symptom the 60 was introduced to cure. `.bhu-disclosure__panel`'s own
	   `z-index: 40` cannot help, because it only competes inside this bar's
	   stacking context; the bar as a whole has to outrank the header.
	   120 leaves headroom above 100. If `#header` is ever raised again, this
	   has to move with it -- the two numbers are a pair, and there is a
	   matching note at header-navigation.css:128. */
	z-index: 120;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	/* HD-01 (86eypb6ab, 86eyv0k44 parity audit, runs/verify-Header.json
	   NEW-trustbar-height): explicit min-height rather than deriving the
	   box height from padding + line-height math -- measured live height
	   (43px) already diverged from that arithmetic (12px padding x2 + 16px
	   line-height = 40px, not 43px), so a min-height pins the real
	   getBoundingClientRect() box to Figma's 44px (desktop) regardless of
	   font-metric rounding; align-items: center (above) keeps content
	   centered inside it. Tablet/mobile min-height set in their own media
	   queries below (36px, Figma's #34374:77838 / #29600:56712 anchors). */
	min-height: 44px;
	padding: 12px 64px;
	background-color: var(--bhu-bg);
	font-family: "Kobe1.1", var(--theme-font-family, sans-serif);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2; /* was 16px at 14px (1.14x), 86eypb6j8 */
	color: var(--bhu-ink);
}

.bhu-bar a,
.bhu-bar button.bhu-trigger {
	font: inherit;
	color: inherit;
	text-decoration: none;
}

.bhu-bar a:hover,
.bhu-bar button.bhu-trigger:hover {
	/* source:DERIVED -- Figma's Link "Courtesy" variant (hover-type-contract.md L53) shows
	   NO measured color change at all for this bar's links. Underline is a derived
	   interaction affordance, not a Figma-measured delta; no color/size change added,
	   matching the proven negative (no hover resize/reflow). */
	text-decoration: underline;
}

.bhu-bar *:focus-visible {
	outline: 2px solid var(--bhu-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Left group: trust items + review line ------------------------------- */
.bhu-bar__trust {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.bhu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.bhu-item__icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.bhu-item--review {
	gap: 6px;
	min-width: 0;
}

.bhu-item__stars {
	display: inline-flex;
	flex-shrink: 0;
}

.bhu-item__stars svg {
	/* z8udzke6c8: star height = Kobe1.1 cap height (0.65em; glyph is 14.2/15 of the
	   box, so 0.69em). The em is the review text's: .bhu-item__stars shares its
	   16px rule in kobe-16-floor.css (the bar itself is 14px below 1440). */
	display: block;
	width: auto;
	height: 0.69em;
}

.bhu-item__review-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bhu-item__feefo {
	display: inline-block;
	flex-shrink: 0;
	width: 49px;
	height: 12px;
	color: var(--bhu-ink);
}

.bhu-item__feefo svg {
	display: block;
	width: 49px;
	height: 12px;
}

/* Right group: language, Our Tale, Help -------------------------------- */
.bhu-bar__meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.bhu-rule {
	display: block;
	align-self: stretch;
	width: 0;
	border-left: 1px solid var(--bhu-rule);
	padding: 2px 0;
}

.bhu-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.bhu-trigger__flag {
	display: block;
	width: 21px;
	height: 14px;
	flex-shrink: 0;
	border-radius: 2px;
	object-fit: cover;
}

.bhu-trigger__chevron {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.bhu-disclosure[open] > .bhu-trigger .bhu-trigger__chevron,
.bhu-disclosure[open] > summary.bhu-trigger .bhu-trigger__chevron {
	transform: rotate(180deg);
}

/* <details>/<summary> disclosure: native keyboard + AT support, no JS. */
.bhu-disclosure {
	position: relative;
}

.bhu-disclosure > summary {
	list-style: none;
}

.bhu-disclosure > summary::-webkit-details-marker {
	display: none;
}

/* editor-friendly-ok: same exemption as the file docblock above.
   FIX (CU-86eypb6ab item 3, reported 2026-09-04): `top: calc(100% + 8px)` positioned
   the panel relative to the trigger's own ~16-18px line height, so its ~180px content
   height (4 language links + padding) spilled straight through row 2 (logo/search/
   account/wishlist/cart) below the utility bar, covering the search field -- confirmed
   live via getBoundingClientRect(): panel bottom 218px vs. utility bar bottom 42px at
   1280px.
   CORRECTION (client-reported, 2026-09-04, reversed): the fix above treated "the panel
   overlays row 2" as the bug and pushed `top` down with breakpoint-specific pixel values
   (130/132/174px) to clear the ENTIRE header instead, so the panel opened far below its
   own trigger with a large empty gap -- exactly the "under and too far" behavior the
   client screenshotted. An overlay dropdown covering the content below it is normal,
   expected menu behavior (this is what Figma component 34467:310824's own floating card,
   with its own drop shadow, is for) -- the earlier read was wrong. Reverted to
   `top: calc(100% + 8px)`, position relative to the trigger's own `.bhu-disclosure`
   ancestor (already `position: relative`), so the panel opens directly under whichever
   trigger opened it at every breakpoint, no hardcoded per-breakpoint pixel math needed.
   `z-index: 40` (unchanged) sets this panel's own paint order within its stacking
   context, but does not by itself outrank row 2 -- see the CORRECTION on `.bhu-bar`
   above (this file's docblock) for the actual mechanism that makes this panel render
   above row 2, a separate stacking-context fix on this rule's ancestor, not this
   z-index value alone. Background/radius/shadow unchanged from the first fix above. */
.bhu-disclosure__panel {
	position: absolute;
	top: calc( 100% + 8px );
	right: 0;
	z-index: 40;
	min-width: 180px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 24px 32px; /* Figma TYPE=Events 29560:84461 / CURRENCY 34467:310824: 24px vertical, 32px horizontal */
	background-color: #F8EDE3; /* editor-friendly-ok: same exemption as the file docblock. STALE COMMENT CORRECTED (86eyv0k44 GL-05): this line used to cite --bhu-ink's old, wrong value here; --bhu-ink was already fixed 2026-09-07 (see docblock above). --bhu-ink text on this bg: 12.30:1, matching navbar-overlay.css's own recomputed "ink on cream" figure. */
	border-radius: 12px; /* Figma card radius */
	box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.12); /* Figma drop shadow 0/8/40 at 12% */
}

/* editor-friendly-ok: same exemption as the file docblock.
 * CORRECTION (client-reported, 2026-09-04): `display: block` here becomes `flex` +
 * `gap: 8px` so language-dropdown rows can render a real per-language flag image
 * inline (Figma node 34476:55912, "🇩🇪 DE · German" etc.) instead of bare text --
 * harmless for the plain-text "Our Tale"/"Help" links in this same panel style, which
 * have no second child for the gap to apply to. The active language is now excluded
 * from this list entirely (shown in the trigger instead), so the previous
 * `[aria-current="true"]` styling rule for a "currently selected" row in this same list
 * no longer has a matching element and is removed rather than left dead. */
.bhu-disclosure__panel a,
.bhu-disclosure__panel button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 6px 4px;
	font: inherit;
	color: var(--bhu-ink);
	cursor: pointer;
	white-space: nowrap; /* z8udzkept0: "Bonza FAQ Home" wrapped inside the 180px Help panel */
}

/* G25: the new-tab icon sits in the flex row, so the row gap spaces it. */
.bhu-disclosure__panel .bfd-ext-icon {
	margin-inline-start: 0;
	width: 0.85em;
	height: 0.85em;
}

.bhu-disclosure__panel a:hover,
.bhu-disclosure__panel button:hover {
	/* source:DERIVED -- same Link "Courtesy" no-measured-change basis as .bhu-bar a:hover
	   above; underline is a derived affordance, no color/size change. */
	text-decoration: underline;
}

.bhu-lang-flag {
	width: 18px;
	height: 13px;
	object-fit: cover;
	border-radius: 2px;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Sticky state: row 1 collapses while `.is-sticky` (Blocksy's own
   sticky-header JS class on the ancestor panel) is active. Collapsed in
   place, see file header for the reasoning.
   --------------------------------------------------------------------- */
.ct-header.is-sticky .bhu-bar,
.ct-header-sticky .bhu-bar {
	height: 0;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.bhu-bar {
		transition: height 0.2s ease, opacity 0.15s ease, padding 0.2s ease;
	}
}

/* ---------------------------------------------------------------------
   Reveal on scroll up (z8udzke6c8, Vita: "make the top row show up again
   when we scroll up, instead of scrolling till the top"). `.bhu-bar` is a
   sibling ABOVE the sticky `#header`, so it scrolls away with the page. While
   header-utility-bar.js sees an upward scroll it adds `.bhu-pinned` to <html>
   and sets `--bhu-pin` (the bar's height): the bar goes position:fixed at the
   top, the following header takes a margin of the same height so nothing in
   the page shifts, and the sticky offsets in header-navigation.css add
   `--bhu-pin` so the header and nav strip sit below the bar.
   --------------------------------------------------------------------- */
html.bhu-pinned .bhu-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: auto;
}

html.bhu-pinned .bhu-bar + #header {
	margin-top: var(--bhu-pin, 0px);
}

@media (prefers-reduced-motion: no-preference) {
	html.bhu-pinned .bhu-bar {
		animation: bhu-pin-in 0.2s ease-out;
	}

	#header.ct-header,
	.bhnv-bar {
		transition: top 0.2s ease-out;
	}
}

@keyframes bhu-pin-in {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

/* ---------------------------------------------------------------------
   Tablet + mobile reflow (CU-86eypb6ab QA round, 2026-09-07, item 2).
   Re-pulled the real Tablet (#20168:148733) and Mobile (#20168:149054)
   HEADER component variants this round -- the client's "squished" and
   "missing" complaints both trace to the SAME root cause: this file's
   previous tablet/mobile rules kept the desktop utility bar's full
   content (trust items AND the language/Our Tale/Help `.bhu-bar__meta`
   group) and just tightened padding/gaps to fit it, but neither the
   Tablet nor the Mobile Figma variant includes `.bhu-bar__meta` AT ALL --
   confirmed via get_figma_data on both components, neither has a
   right-hand meta group in its node tree. Cramming a group Figma never
   places there is what produced "English" overlapping the star-rating
   text and the Help link crowding everything else. Hiding it below
   desktop (matching both real variants) removes the overlap outright,
   not just shrinks it.

   Tablet (#20168:148733, `#34374:77838`): padding "8px 24px" (was 10px
   24px, a pre-Figma guess), left-group gap 16px between the 3 trust
   items (was 12px, ditto -- confirmed via `#34374:77839` gap). With the
   meta group gone there is no longer a competing right-hand group to
   protect row height against, so the previous 160px truncation cap on
   the review text is replaced with a flex-shrink approach: the review
   item is the one flex child allowed to shrink/ellipsis, so it fills
   whatever room the (now-freed) row actually has at any width in this
   range instead of a single guessed pixel cap.

   CORRECTION (Fable 5.1 audit, 2026-09-07): moved 991px -> 1099px. This
   exact rule was the audit's 1024px "meta group still overlaps the
   review text" finding -- Blocksy's real tablet/desktop header switch on
   this site is 1100px, not 991/992px (confirmed live), so 992-1099px was
   left with the full desktop utility bar (meta group included) despite
   Blocksy already showing the tablet/mobile header row underneath it.
   --------------------------------------------------------------------- */
@media (max-width: 1439px) {
	.bhu-bar {
		/* HD-01: 36px min-height at tablet+mobile (Figma #34374:77838), same
		   reasoning as the desktop min-height above. This block already
		   covers mobile too (max-width:1099px includes <=599px), so the
		   599px block below does not need to repeat it. */
		min-height: 36px;
		padding: 8px 24px;
		gap: 12px;
	}

	.bhu-bar__trust {
		gap: 16px;
		min-width: 0;
		flex: 1 1 auto;
	}

	.bhu-bar__meta {
		display: none;
	}

	.bhu-item--review {
		flex: 1 1 auto;
		min-width: 0;
	}

	.bhu-item__review-text {
		max-width: none;
	}
}

/* ---------------------------------------------------------------------
   Mobile (#20168:149054, `#34374:81802`): the utility bar is NOT hidden
   in Figma's mobile variant -- confirmed via get_figma_data, it renders
   all 3 trust items (shield-check, delivery truck, star-rating/Feefo) in
   a horizontally-SCROLLING row (`overflowScroll:["x"]` on the frame),
   padding "8px 20px", gap 29px between items (a different, wider gap
   than tablet's 16px -- Figma's own value, not a typo). Previous rule
   here (`display:none`) was based on this file's own earlier note that
   "Figma's real mobile HEADER is a separate full-screen SEARCH panel
   component" -- true for the SEARCH variant (14061:188816, item 8's
   scope) but this task's own client screenshots show the utility bar
   itself is a persistent element the client expects to see, matching
   the Mobile/Default variant, not the Mobile/SEARCH one. Horizontal
   scroll (not wrap/truncate) is Figma's own layout choice here, so each
   item is kept `white-space:nowrap` and the bar scrolls instead of
   clipping or wrapping to a second line.
   --------------------------------------------------------------------- */
@media (max-width: 599px) {
	.bhu-bar {
		display: flex;
		padding: 8px 20px;
		gap: 29px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.bhu-bar::-webkit-scrollbar {
		display: none;
	}

	.bhu-bar__trust {
		/* HD-01 (86eypb6ab, 86eyv0k44 parity audit, runs/verify-Header.json
		   NEW-mobile-trust-gap): re-verified against Figma Frame
		   2147229766 = 16px, not the 29px this file's earlier docblock
		   comment (2026-09-07) had recorded from a different, less
		   specific node lookup -- corrected here to the newer, more
		   targeted audit's value. */
		gap: 16px;
		flex: none;
	}

	.bhu-item {
		white-space: nowrap;
		flex-shrink: 0;
	}

	.bhu-item--review {
		flex: none;
	}

	.bhu-item__review-text {
		max-width: none;
		overflow: visible;
		text-overflow: clip;
	}
}

/* ---------------------------------------------------------------------
   86eypb6ab QA round 3, item 5: the promo row was still clipped between 600
   and 1099px. The phone block above makes the row a horizontal scroller the
   JS ticker can drive, but from 600px the review text kept its
   `text-overflow: ellipsis` and a shrinking flex basis, so the row never
   overflowed: a static "4.8 out of 5 from 79 veri..." at 768 in EN/FR/NL and
   from 600px in DE. Same scroller behaviour here. Where the row fits
   (DE at 768, everything at 900px and up) nothing overflows, so the ticker
   does not start and the row looks exactly as before.
   --------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1439px) {
	.bhu-bar {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.bhu-bar::-webkit-scrollbar {
		display: none;
	}

	.bhu-bar__trust {
		flex: none;
	}

	.bhu-item,
	.bhu-item--review {
		flex: none;
	}

	.bhu-item__review-text {
		overflow: visible;
		text-overflow: clip;
	}
}

/* 86eypb6ab L1 map: Figma utility row text has a 20px line-height at every width
   (tablet and mobile frames 14px/20px, desktop 1536 frame 16px/20px, Kobe1.1 700;
   e.g. nodes 35741:37611, 34097:271026). The bar's min-heights (36px, 44px) already
   equal padding + 20px. Desktop text goes to 16px from 1440px: the Figma row
   (925px trust group + 283px meta group + 128px padding = 1336px) needs that much room. */
.bhu-bar {
	line-height: 20px;
}

@media (min-width: 1440px) {
	.bhu-bar {
		font-size: 16px;
	}
}

/* 86eypb6ab L1 map: with the 20px line-height the language trigger (inline-flex inside the
   <details> block) sat on the text baseline, so the <details> was 23px tall, the meta group
   23px and the whole band 47px (Figma 44px). Top-aligning it removes the baseline gap. */
.bhu-disclosure > .bhu-trigger {
	vertical-align: top;
}

/* 86eypb6ab (Vita, 9 Oct, 1067px: "the top bar still not center"). In the tablet range the
   language and Our Tale group is hidden, so the trust items sat at the left edge. Figma's
   tablet top bar (Home Page - T, 744 frame) centres its content. Auto inline margins centre
   the group and fall back to 0 when the row overflows and scrolls, so the first item is
   never cut off the way `justify-content: center` would cut it. */
@media (min-width: 600px) and (max-width: 1439px) {
	.bhu-bar__trust {
		margin-inline: auto;
	}
}