/**
 * Header — Blocksy Header Builder styled to the prototype (gb-new-elements.css tiers 2 + 3).
 * Level L4: layout + colours of the builder rows are set in the Customizer (row heights/backgrounds);
 * this file covers what Blocksy has no control for (prototype icon buttons, nav pill hover, phone block, badges).
 *
 * Desktop  : middle row = Logo | FiboSearch | Call now | Track · Account · Wishlist · Cart (right)
 *            bottom row = main nav + "Start a bulk order" (stays in the sticky bar, client)
 * Mobile   : middle row = Logo | Account · Cart · Menu ; bottom row = full-width search
 */

/* ---------- shared: everything in the dark rows is light ---------- */
#header [data-row="middle"],
#header [data-row="bottom"] {
	color: var(--gb-on-dark);
	--theme-text-color: var(--gb-on-dark);
	--theme-link-initial-color: var(--gb-on-dark);
	--theme-link-hover-color: #fff;
	--theme-icon-color: #fff;
	--theme-icon-hover-color: #fff;
	--theme-icon-size: 20px;
}

#header [data-row="middle"] {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#header [data-row="bottom"] {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Middle row: logo + search on the left grow, icon cluster hard right (client: "right justify"). */
#header [data-device="desktop"] [data-row="middle"] [data-column="start"] {
	flex: 1 1 auto;
	min-width: 0;
}

#header [data-device="desktop"] [data-row="middle"] [data-column="start"] [data-items] {
	gap: 20px;
}

#header [data-device="desktop"] [data-row="middle"] [data-column="end"] [data-items] {
	gap: 6px;
}

/* ---------- logo ---------- */
#header .site-logo-container img {
	width: 128px;
	height: auto;
	max-height: none;
}

/* ---------- search slot (FiboSearch inside a Header Text element) ---------- */
#header .ct-header-text[data-id="gbsear"] {
	flex: 1 1 320px;
	min-width: 0;
	max-width: 520px;
}

#header [data-device="mobile"] .ct-header-text[data-id="gbsear"] {
	max-width: none;
	padding-block: 10px 12px;
}

#header .ct-header-text .entry-content > * {
	margin: 0;
}

/* ---------- call now ---------- */
#header .gb-header__phone {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	font-size: var(--gb-fs-13);
	line-height: 1.25;
	margin-right: 8px;
}

#header .gb-header__phone-label {
	color: var(--gb-on-dark-muted);
	font-weight: 600;
}

#header .gb-header__phone strong {
	font-weight: 700;
}

#header .gb-header__phone:hover strong {
	color: var(--gb-gold);
}

/* ---------- icon buttons: track, account, wishlist, cart ---------- */
#header .gb-iconbtn,
#header .ct-header-account > a,
#header .ct-header-wishlist,
#header .ct-header-cart > a,
#header .ct-header-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 8px;
	border-radius: var(--gb-r-sm);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s;
}

#header .gb-iconbtn:hover,
#header .ct-header-account > a:hover,
#header .ct-header-wishlist:hover,
#header .ct-header-cart > a:hover,
#header .ct-header-trigger:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

#header .gb-iconbtn .gb-icon {
	display: block;
	color: #fff;
}

/* Badges: gold on near-black, one colour for cart + wishlist (prototype item 2). */
#header .ct-dynamic-count-cart,
#header .ct-dynamic-count-wishlist {
	top: -2px;
	inset-inline-end: -4px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	font-size: var(--gb-fs-12);
	font-weight: 700;
	line-height: 19px;
	border-radius: 999px;
	background: var(--gb-gold);
	color: var(--gb-dark);
}

/* ---------- main nav (bottom row) ---------- */
#header [data-row="bottom"] .ct-container > [data-column] {
	justify-content: center;
}

#header [data-row="bottom"] [data-items] {
	gap: 16px;
}

#header .header-menu-1 .menu {
	gap: 4px;
}

#header .header-menu-1 .menu > li > a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	height: auto;
	padding: 0 12px;
	border-radius: var(--gb-r-sm);
	font-family: var(--gb-font-body);
	font-size: var(--gb-fs-15);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--gb-on-dark);
	white-space: nowrap;
}

/* Normal: no background. Hover / focus / current page: pill. Same-page anchors (/#how etc.) are not
   "current": WordPress flags every one of them on the homepage. */
#header .header-menu-1 .menu > li > a:hover,
#header .header-menu-1 .menu > li > a:focus-visible,
#header .header-menu-1 .menu > li.current-menu-item > a:not([href*="#"]) {
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
}

/* CTA "Start a bulk order" = prototype .gb-btn--on-dark .gb-btn--sm */
#header .ct-header-cta .ct-button {
	min-height: 40px;
	padding: 0 16px;
	margin-left: 12px;
	border-radius: var(--gb-r-md);
	font-size: var(--gb-fs-14);
	font-weight: 700;
	background: var(--gb-gold);
	color: var(--gb-dark);
	--theme-button-background-initial-color: var(--gb-gold);
	--theme-button-background-hover-color: #c9a56a;
	--theme-button-text-initial-color: var(--gb-dark);
	--theme-button-text-hover-color: var(--gb-dark);
}

/* Tighter nav between Blocksy desktop start and the prototype's 1300px step. */
@media (max-width: 1300px) {
	#header .header-menu-1 .menu > li > a {
		padding: 0 9px;
		font-size: var(--gb-fs-13);
	}
}

/* ---------- mobile (Blocksy ≤999px) ---------- */
@media (max-width: 999.98px) {
	#header [data-device="mobile"] [data-row="middle"] [data-column="end"] [data-items] {
		gap: 0;
	}
}

@media (max-width: 689.98px) {
	#header .site-logo-container img {
		width: 104px;
	}
}

/* ---------- off-canvas (mobile menu drawer) — dark drawer like the prototype ---------- */
#offcanvas .ct-panel-inner {
	background: var(--gb-dark-2);
	color: var(--gb-on-dark);
}

#offcanvas .mobile-menu a {
	min-height: 52px;
	font-weight: 600;
	color: var(--gb-on-dark);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#offcanvas .mobile-menu a:hover {
	color: #fff;
}

#offcanvas .gb-header__phone {
	margin-top: 16px;
	color: var(--gb-on-dark-muted);
}

/* ---------- Header 6: anchor offset below the sticky bar ----------
   Blocksy already puts the sticky header height on the target (:target scroll-margin-top, which follows the
   collapsed bar), so only the prototype's small gap is added here; adding the header height again landed
   sections a full header-height too low (the client's "scrolling too low"). */
html {
	scroll-padding-top: 12px;
}

/* Mobile search row: the start column and its items stretch to the full row. */
#header [data-device="mobile"] [data-row="bottom"] [data-column="start"],
#header [data-device="mobile"] [data-row="bottom"] [data-column="start"] [data-items],
#header [data-device="mobile"] .ct-header-text[data-id="gbsear"] {
	flex: 1 1 100%;
	width: 100%;
	max-width: none;
}

/* ---------- Header 7: footer (Blocksy Footer Builder, bottom row = copyright element) ---------- */
#footer [data-row="bottom"] {
	background: var(--gb-dark);
	color: var(--gb-on-dark-muted);
	padding-block: 36px;
	font-size: var(--gb-fs-14);
	text-align: center;
	--theme-link-initial-color: var(--gb-on-dark);
	--theme-link-hover-color: #fff;
	--theme-text-color: var(--gb-on-dark-muted);
}

/* prototype .gb-wrap column: 1140px inside a 20px gutter, no Blocksy row padding */
#footer [data-row="bottom"] .ct-container {
	min-height: 0;
	width: calc(100% - 2 * var(--gb-gutter));
	max-width: calc(var(--gb-max) - 2 * var(--gb-gutter));
	padding-block: 0;
}

#footer .ct-footer-copyright {
	width: 100%;
	color: var(--gb-on-dark-muted);
	font-size: var(--gb-fs-14);
	line-height: 1.55;
}

/* Centred footer (prototype gb-new-elements §14): logo, address, links; dot separators. */
#footer .gb-footer__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
}

#footer .gb-footer__logo {
	display: block;
	width: 110px;
	height: auto;
	margin-bottom: 6px;
}

#footer .gb-footer__address,
#footer .gb-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	row-gap: 4px;
	column-gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: normal;
}

#footer .gb-footer__address > * + *::before,
#footer .gb-footer__links > li + li::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--gb-on-dark-muted);
	opacity: 0.6;
	margin: 0 12px;
	vertical-align: middle;
}

#footer .gb-footer__links a {
	/* QA #9: 26px tap height (WCAG 2.5.8 asks 24px); the negative margin keeps the row as it was. */
	display: inline-block;
	padding-block: 4px;
	margin-block: -4px;
	color: var(--gb-on-dark);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.3);
	text-underline-offset: 3px;
}

#footer .gb-footer__links a:hover {
	color: #fff;
	text-decoration-color: currentColor;
}

@media (max-width: 760px) {
	#footer [data-row="bottom"] {
		padding-block: 28px;
	}

	#footer .gb-footer__address {
		flex-direction: column;
	}

	#footer .gb-footer__address > *::before {
		display: none;
	}

	#footer .gb-footer__links > li:last-child {
		flex-basis: 100%;
	}

	#footer .gb-footer__links > li:last-child::before {
		display: none;
	}
}

/* ---------- prototype header bar geometry (2 Oct): measured against gb-headerbar at 1440px ----------
   1180px wrap / 20px gutter = 1140px row · logo 128 · 20 · search 520 · 20 · Call now · icons right,
   40px buttons 6px apart · gold count badges also at 0. Blocksy's own item margins (10px each side) off. */
@media (min-width: 1000px) {
	#header [data-row="middle"] > .ct-container,
	#header [data-row="bottom"] > .ct-container {
		max-width: calc(var(--gb-max) - 2 * var(--gb-gutter));
	}
	#header [data-device="desktop"] [data-row="middle"] [data-items] > * {
		margin-inline: 0;
	}
	#header [data-device="desktop"] .ct-header-text[data-id="gbsear"] {
		flex: 0 1 520px;
		width: 520px;
	}
	#header [data-device="desktop"] .ct-header-text[data-id="gbsear"] .dgwt-wcas-search-wrapp {
		max-width: none;
		width: 100%;
	}
	#header .gb-header__phone {
		margin-right: 0;
	}
	#header .ct-header-wishlist {
		padding: 0;
	}
}
#header .ct-dynamic-count-cart[data-count="0"],
#header .ct-dynamic-count-wishlist[data-count="0"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Badge sits on the button's top-right corner (prototype: 2px above, 25px in), not on Blocksy's icon wrapper. */
#header .ct-header-wishlist .ct-icon-container,
#header .ct-header-cart .ct-icon-container {
	position: static;
}
#header .ct-header-wishlist .ct-dynamic-count-wishlist,
#header .ct-header-cart .ct-dynamic-count-cart {
	position: absolute;
	top: -2px;
	left: 25px;
	right: auto;
	inset-inline-end: auto;
	transform: none;
}
/* Prototype icons are outlines: stop Blocksy filling the inlined custom SVGs. */
#header .ct-header-account svg,
#header .ct-header-wishlist svg,
#header .ct-header-cart svg,
#header .ct-header-account svg *,
#header .ct-header-wishlist svg *,
#header .ct-header-cart svg * {
	fill: none; /* Blocksy fills .ct-icon / .ct-icon-container svg with the icon colour */
	stroke: currentColor;
}
/* Call now: label centred over the number (prototype .gb-header__phone). */
#header .gb-header__phone {
	align-items: center;
	text-align: center;
}

/* ---------- prototype mobile header (390px): 20px gutters · account, wishlist, cart touching, menu 12px
   apart · search full width under the bar. ---------- */
@media (max-width: 999.98px) {
	#header [data-device="mobile"] [data-row] > .ct-container {
		width: calc(100% - 2 * var(--gb-gutter));
	}
	#header [data-device="mobile"] [data-row="middle"] [data-column="end"] [data-items] {
		gap: 0;
	}
	#header [data-device="mobile"] [data-row="middle"] [data-items] > * {
		margin-inline: 0;
	}
	#header [data-device="mobile"] [data-row="middle"] [data-id="trigger"],
	#header [data-device="mobile"] [data-row="middle"] .ct-header-trigger {
		margin-inline-start: 12px;
	}
	#header [data-device="mobile"] [data-row="bottom"] [data-column="start"] {
		flex: 1 1 100%;
		width: 100%;
		justify-content: stretch; /* Blocksy centres the column grid */
		grid-template-columns: minmax(0, 1fr);
	}
	#header [data-device="mobile"] [data-row="bottom"] [data-column="start"] > div {
		width: 100%;
	}
	#header [data-device="mobile"] .ct-header-text[data-id="gbsear"] {
		flex: 1 1 100%;
		width: 100%;
		margin: 0;
		padding-block: 0 12px;
	}
	#header [data-device="mobile"] .ct-header-text[data-id="gbsear"] .dgwt-wcas-search-wrapp {
		max-width: none;
		width: 100%;
	}
}

/* Search sits with the icons (Mitzy, 2 Oct): Logo | ………… | Search 520 · 20 · Call now · 20 · icons (6 apart). */
@media (min-width: 1000px) {
	#header [data-device="desktop"] [data-row="middle"] [data-column="start"] {
		flex: 0 0 auto;
	}
	#header [data-device="desktop"] [data-row="middle"] [data-column="end"] {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: flex-end;
	}
	#header [data-device="desktop"] [data-row="middle"] [data-column="end"] [data-items] {
		justify-content: flex-end;
	}
	#header [data-device="desktop"] [data-row="middle"] [data-column="end"] .ct-header-text[data-id="gbsear"],
	#header [data-device="desktop"] [data-row="middle"] [data-column="end"] .ct-header-text[data-id="gbphon"] {
		margin-inline-end: 14px; /* + 6px gap = 20px */
	}
}
/* Header 2 (QA): from 1161px the prototype centres search + Call now in the bar (grid 1fr · 520 · auto · 1fr);
   the slack opens between the phone and the icons. Row = min(1140, 100vw − 40) (20px gutter, below); group = 520 + 20 + 86 = 626;
   icons = 178, + their 6px gap. At 1440 that is 73px, putting search at 407 and the phone at 947 as the prototype. */
@media (min-width: 1161px) {
	#header [data-device="desktop"] [data-row="middle"] [data-column="end"] .ct-header-text[data-id="gbphon"] {
		margin-inline-end: max(14px, calc((min(1140px, 100vw - 40px) - 626px) / 2 - 184px));
	}
}

/* ---------- Phones and tablets: main menu row under the header (prototype .gb-navbar ≤1160px) ----------
   Markup: custom/header-nav.php. 44px row, sideways scroll, hidden from 1000px (the desktop header has it). */
.gb-mnav {
	background: #27231f;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gb-mnav__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	margin: 0;
	padding: 0 var(--gb-gutter, 20px);
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* A visible thin scrollbar, as the prototype keeps the browser's own: without it the row cannot be
	   scrolled with a mouse at tablet / phone widths on a desktop browser. */
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.gb-mnav__list::-webkit-scrollbar { height: 6px; }
.gb-mnav__list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); border-radius: 3px; }
.gb-mnav__list::-webkit-scrollbar-track { background: transparent; }
.gb-mnav__list > li { flex: 0 0 auto; margin: 0; }
.gb-mnav__list a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 12px;
	border-radius: var(--gb-r-sm);
	color: var(--gb-on-dark);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}
.gb-mnav__list a:hover,
.gb-mnav__list a:focus-visible { background: rgba(255, 255, 255, 0.07); color: #fff; }
@media (min-width: 1000px) {
	.gb-mnav { display: none; }
}
/* Phones and tablets: no rule between the logo row and the search row (prototype). */
@media (max-width: 999.98px) {
	#header [data-device="mobile"] [data-row="middle"] { border-bottom: 0; }
	#header [data-device="mobile"] [data-row="bottom"] { border-top: 0; }
	/* The search row takes the header colour, not the desktop menu row's lighter one (shared Blocksy row). */
	#header [data-device="mobile"] [data-row="bottom"] { background-color: var(--gb-dark); }
}
/* Tablet: "Menu" beside the hamburger in sentence case (prototype .gb-menu-btn). */
#header .ct-header-trigger .ct-label { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; }

/* ---------- Sticky header (Blocksy "Main & Bottom rows") ----------
   Phones / tablets: logo row and search row stay as the page scrolls (prototype .gb-headerbar).
   Desktop: the bottom row is the menu, which the prototype collapses once the page scrolls, so it folds away
   while stuck, and in-page anchors are offset by the main bar only. */
/* Client (Oct 2026): the top menu stays visible while scrolling. Desktop: the menu row stays in the stuck bar
   (it used to fold away, as the prototype); Blocksy's own sticky height covers both rows for anchors.
   Phones / tablets: the menu strip (.gb-mnav, after the header) sticks right under the stuck header. */
@media (max-width: 999.98px) {
	.gb-mnav { position: sticky; top: var(--header-sticky-height, 0px); z-index: 49; }
	body[data-header*="sticky"] { --scroll-margin-top-offset: calc(var(--header-sticky-height, 0px) + 46px); }
}

/* ---------- Menu drawer (prototype .gb-drawer--menu on the cart / wishlist drawer shell) ----------
   Markup: custom/header-nav.php. Behaviour: custom/js/menu-drawer.js. */
.gb-root.gb-drawer--menu { position: fixed; inset: 0; z-index: 62; }
.gb-root.gb-drawer--menu[hidden] { display: none; }
.gb-root.gb-drawer--menu .gb-drawer__scrim { position: absolute; inset: 0; background: rgba(12, 10, 9, 0.62); opacity: 0; transition: opacity .24s cubic-bezier(.4, 0, .2, 1); }
.gb-root.gb-drawer--menu.is-open .gb-drawer__scrim { opacity: 1; }
.gb-root.gb-drawer--menu .gb-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(360px, 88%);
	display: flex; flex-direction: column;
	background: var(--gb-dark); color: var(--gb-on-dark);
	border-left: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: var(--gb-shadow-2);
	transform: translateX(100%);
	transition: transform .24s cubic-bezier(.4, 0, .2, 1);
	outline: 0;
	padding-right: env(safe-area-inset-right, 0px); /* QA #5: clear of an iPhone notch in landscape (0 elsewhere) */
}
.gb-root.gb-drawer--menu.is-open .gb-drawer__panel { transform: translateX(0); }
.gb-root.gb-drawer--menu .gb-drawer__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px var(--gb-gutter, 20px); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.gb-root.gb-drawer--menu .gb-drawer__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--gb-font-display); font-size: 20px; font-weight: 600; line-height: 1.2; color: #fff; letter-spacing: .01em; }
.gb-root.gb-drawer--menu .gb-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 0; padding: 0; flex: 0 0 auto; background: transparent; border: 0; color: var(--gb-on-dark); border-radius: var(--gb-r-sm); cursor: pointer; box-shadow: none; }
.gb-root.gb-drawer--menu .gb-drawer__close:hover,
.gb-root.gb-drawer--menu .gb-drawer__close:focus-visible { background: rgba(255, 255, 255, 0.10); color: #fff; }
.gb-root .gb-menu-drawer { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.gb-root .gb-menu-drawer__nav { display: grid; padding: 6px 0; }
.gb-root .gb-menu-drawer__nav a {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	min-height: 54px; padding: 0 20px;
	color: var(--gb-on-dark); text-decoration: none; font-weight: 600; font-size: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gb-root .gb-menu-drawer__nav a span { color: var(--gb-gold); font-size: 22px; line-height: 1; }
.gb-root .gb-menu-drawer__nav a:hover,
.gb-root .gb-menu-drawer__nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.05); color: #fff; }
.gb-root .gb-menu-drawer__nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gb-gold); }
.gb-root .gb-menu-drawer__cta { padding: 18px 20px 6px; }
.gb-root .gb-menu-drawer__cta .gb-btn { width: 100%; }
.gb-root .gb-menu-drawer__cta .gb-arrow { font-size: 1.1em; line-height: 1; }
.gb-root .gb-menu-drawer__util { padding: 12px 20px 24px; display: grid; gap: 4px; margin-top: auto; }
.gb-root .gb-menu-drawer__util a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--gb-on-dark-muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.gb-root .gb-menu-drawer__util a:hover { color: #fff; }
.gb-root .gb-menu-drawer__util .gb-icon { color: var(--gb-gold); flex: 0 0 auto; }
.gb-root .gb-menu-drawer__util .gb-menu-drawer__email { min-width: 0; overflow-wrap: normal; word-break: normal; } /* QA #2: one line, or a clean break after the @ (<wbr>) */
@media (prefers-reduced-motion: reduce) {
	.gb-root.gb-drawer--menu .gb-drawer__scrim,
	.gb-root.gb-drawer--menu .gb-drawer__panel { transition: none; }
}

/* QA (layout round 1, #1): from 1000px the header rows use the page's 20px gutter (Blocksy's 90vw put the logo 50px
   in while content starts at 20px), and the search keeps at least 20px from the logo (it touched it at 1000 to 1060px). */
@media (min-width: 1000px) {
	#header [data-device="desktop"] [data-row] > .ct-container {
		width: calc(100% - 2 * var(--gb-gutter));
	}
	#header [data-device="desktop"] [data-row="middle"] [data-column="end"] {
		margin-inline-start: 20px;
	}
}

/* QA #6: the phone menu row fades out at the right edge while more links are off screen (menu-drawer.js). */
.gb-mnav__list.has-more {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}

/* The menu row keeps its dark band while the header is stuck (Blocksy's sticky row colour is palette 8, white). */
#header [data-device="desktop"] [data-sticky*="yes"] [data-row*="bottom"] {
	background-color: #27231f;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}