/* ══════════════════════════════════════════════════════════════════════════
   CHL:BP_CHROME v1 — bp-shell.css

   The Business Page SITE SHELL: the two-shell switcher, seven branded
   headers and seven branded footers.

   TOKEN LAW — this sheet declares no colour of its own. Every value comes
   from the Business Page keel (--sbp-*), which reaches .bpshell because the
   keel's own declaration in starter-business.css names it. A palette change
   therefore repaints the chrome with the page, automatically, and there is
   never a second colour authority to keep in sync.

   SCOPE LAW — everything here is under .bpshell, .bpsh (header) or .bpsf
   (footer). Nothing in this file can reach the CHL chrome, the Website
   Studio worlds or any other CHL page.

   STRUCTURE LAW — no !important, no negative-margin patching, no pixel
   nudges, no fixed heights. Composition is done with grid/flex and the
   content decides the height.
   ══════════════════════════════════════════════════════════════════════════ */

.bpshell {
	/* Shell-local roles, each mapped onto one keel token. Naming them once
	   here is what keeps the seven headers and seven footers consistent. */
	--bpsh-ink:      var(--sbp-ink);
	--bpsh-mut:      var(--sbp-mut);
	--bpsh-surface:  var(--sbp-card);
	--bpsh-canvas:   var(--sbp-canvas);
	--bpsh-line:     var(--sbp-line);
	--bpsh-acc:      var(--sbp-acc);
	--bpsh-acc-soft: var(--sbp-acc-soft);
	--bpsh-mark:     var(--sbp-indicator, var(--sbp-acc));
	--bpsh-act:      var(--sbp-org);
	--bpsh-act-hov:  var(--sbp-org-ink);
	--bpsh-act-ink:  var(--sbp-action-ink, #ffffff);
	--bpsh-deep:     var(--sbp-deep, #2b2119);
	--bpsh-deep-ink: var(--sbp-deep-ink, #f5efe7);
	--bpsh-soft:     var(--sbp-soft, var(--sbp-acc-soft));
	--bpsh-r:        var(--sbp-r, 16px);
	--bpsh-r-sm:     10px;
	--bpsh-shadow:   var(--sbp-shadow);

	/* Measure + gutters. One max-width for both ends of the page, so the
	   header wordmark and the footer mark sit on the same left edge. */
	/* CHL:BP_SHOP_STANDARD_NAV v1.4 — THE SAME AXIS AS THE PAGE. The shell sits
	   outside <main>, so --sbp-canvas-max never reaches it and the old 1160px
	   fallback left the bar 50px inside the page on each side. The page axis
	   is 1260px of content + the same gutter; the bar now measures identically. */
	--bpsh-max:   var(--sbp-canvas-max, 1260px);
	--bpsh-gut:   clamp(16px, 4vw, 44px);

	/* The composition dial. S / M / L are density states, never breakpoints:
	   each one still uses clamp() so it also answers the viewport. */
	--bpsh-pad-y: clamp(10px, 1.4vw, 14px);
	--bpsh-gap:   clamp(14px, 1.8vw, 22px);
	--bpsh-fs:    15px;
	--bpsh-name:  clamp(17px, 1.6vw, 20px);
	--bpsh-fpad:  clamp(28px, 4vw, 40px);
	--bpsh-fgap:  clamp(18px, 2.4vw, 28px);

	position: relative;
	display: block;
}

/* ── the composition dial, header ─────────────────────────────────────── */
.bpsh--s { --bpsh-pad-y: clamp(8px, 1.1vw, 12px);  --bpsh-gap: clamp(12px, 1.5vw, 18px); --bpsh-fs: 14.5px; --bpsh-name: clamp(16px, 1.4vw, 18px); }
.bpsh--m { --bpsh-pad-y: clamp(13px, 1.9vw, 20px); --bpsh-gap: clamp(16px, 2.1vw, 26px); --bpsh-fs: 15.5px; --bpsh-name: clamp(18px, 1.8vw, 22px); }
.bpsh--l { --bpsh-pad-y: clamp(19px, 2.8vw, 30px); --bpsh-gap: clamp(20px, 2.8vw, 34px); --bpsh-fs: 16.5px; --bpsh-name: clamp(21px, 2.3vw, 28px); }

/* ── the composition dial, footer ─────────────────────────────────────── */
.bpsf--s { --bpsh-fpad: clamp(22px, 3vw, 30px);  --bpsh-fgap: clamp(14px, 1.8vw, 20px); }
.bpsf--m { --bpsh-fpad: clamp(32px, 4.6vw, 50px); --bpsh-fgap: clamp(20px, 2.6vw, 32px); }
.bpsf--l { --bpsh-fpad: clamp(46px, 6.4vw, 78px); --bpsh-fgap: clamp(26px, 3.4vw, 44px); }

/* ══ SHELL SWITCHING ═══════════════════════════════════════════════════════
   Exactly one shell is ever visible. The inactive one is [hidden] + [inert],
   so it is out of the layout, out of the tab order and out of the
   accessibility tree — a screen reader never meets two navigations.        */

.bpshell__slot[hidden] { display: none; }

.bpshell__slot {
	display: block;
}

/* The crossfade. Motion only: removing it can never remove the switch.

   OPACITY ONLY, and deliberately so. The first version also animated
   translateY with animation-fill-mode: both — which leaves the element
   permanently "in effect" for a transform, and an element with a transform
   becomes the containing block for its position:fixed descendants. The mobile
   drawer lives inside this slot, so it stopped being fixed to the viewport and
   was clipped to the height of the header. A fade needs no transform, so the
   drawer stays anchored to the viewport where it belongs. */
.bpshell[data-bp-shell-motion="on"] .bpshell__slot {
	animation: bpshell-fade 200ms ease-out;
}
@keyframes bpshell-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.bpshell[data-bp-shell-motion="on"] .bpshell__slot { animation: none; }
}

/* The CHL shell's business bar — the mirror of the branded header's platform
   mark, in the same corner, plus the business's own pages so the platform
   shell never costs the visitor the business's navigation. */
.bpshell__return {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 18px;
	padding: 8px var(--bpsh-gut);
	background: var(--bpsh-soft);
	border-bottom: 1px solid var(--bpsh-line);
}
.bpshell__return--foot { border-bottom: 0; border-top: 1px solid var(--bpsh-line); justify-content: flex-end; }
.bpshell__returnnav { min-width: 0; }
.bpshell__returnnav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bpshell__returnnav a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	font-weight: 600; font-size: 13.5px; line-height: 1.3;
	color: var(--bpsh-ink);
	text-decoration: none;
}
.bpshell__returnnav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bpshell__returnnav a[aria-current="page"] { color: var(--bpsh-acc-ink, var(--bpsh-acc)); text-decoration: underline; text-underline-offset: 3px; }
.bpshell__returnnav a:focus-visible { outline: 3px solid var(--bpsh-mark); outline-offset: 2px; border-radius: 4px; }
.bpshell__returnbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 6px 14px;
	border: 1px solid var(--bpsh-line);
	border-radius: 999px;
	background: var(--bpsh-surface);
	color: var(--bpsh-ink);
	font-weight: 600; font-size: 13.5px; line-height: 1.2;
	cursor: pointer;
}
.bpshell__returnbtn { max-inline-size: 100%; }
.bpshell__returnlabel { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; white-space: nowrap; }
.bpshell__returnname {
	display: inline-block;
	max-inline-size: 26ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}
.bpshell__returnbtn:hover { border-color: var(--bpsh-acc); }
.bpshell__returnbtn:focus-visible { outline: 3px solid var(--bpsh-mark); outline-offset: 2px; }
.bpshell__returnbtn i { color: var(--bpsh-mark); }

/* The polite announcement region for a shell change. */
.bpshell__live {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

/* ══ ONE PAGE NAVIGATION AT A TIME ═════════════════════════════════════════
   The Business Page carries its own in-page page rail (Business · Shop ·
   Reviews). In the CHL shell that rail IS the site navigation and must stay.
   In the business shell the branded header already carries the same
   destinations, so showing both would put two identical menus on one screen
   and two <nav> landmarks in the accessibility tree.

   So in branded mode the shell owns page navigation at BOTH ends of the
   switch: the branded header carries it in the business shell, and the CHL
   slot's business bar carries it in the platform shell. The in-page rail
   stands down in both — which also means switching moves no content, because
   nothing inside <main> appears or disappears.

   Mode A is untouched: with no shell, the in-page rail is still the Business
   Page's own navigation, exactly as it is today.

   The "On this page" anchor rail is untouched either way: it is a different
   level of navigation (sections within a page), not a second copy of this.   */
/* The rail's own rule in starter-shop.css is `.sbp-page .sbp-pagerail`, which
   is exactly as specific as `.bpshell .sbp-pagerail` — and this sheet loads
   FIRST (it is emitted with the shell, above the page's own links), so a tie
   would go to the rail. Naming both ancestors wins on specificity instead of
   reaching for !important or editing the certified shop stylesheet. */
.bpshell .sbp-page .sbp-pagerail { display: none; }

/* ══ HEADER — shared vocabulary ════════════════════════════════════════ */

.bpsh {
	background: var(--bpsh-surface);
	color: var(--bpsh-ink);
	border-bottom: 1px solid var(--bpsh-line);
	position: relative;
	z-index: 6;
}
.bpsh--sticky { position: sticky; top: 0; }

.bpsh__in {
	max-width: calc(var(--bpsh-max) + 2 * var(--bpsh-gut));
	margin-inline: auto;
	padding-inline: var(--bpsh-gut);
	box-sizing: border-box;
}

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

.bpsh__row {
	display: flex;
	align-items: center;
	gap: var(--bpsh-gap);
	padding-block: var(--bpsh-pad-y);
	min-width: 0;
}

/* IDENTITY — the wordmark never truncates to nothing and never collides
   with the controls: it is allowed to wrap onto two lines instead. */
.bpsh__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 0 1 auto;
}
.bpsh__logo {
	width: auto;
	height: clamp(30px, 3vw, 44px);
	max-width: 160px;
	object-fit: contain;
	display: block;
}
.bpsh__mono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(32px, 3vw, 42px);
	height: clamp(32px, 3vw, 42px);
	border-radius: var(--bpsh-r-sm);
	background: var(--bpsh-mark);
	color: #fff;
	font-weight: 700; font-size: 15px; line-height: 1;
	letter-spacing: .02em;
	flex: none;
}
.bpsh__names { display: grid; min-width: 0; }
.bpsh__name {
	font-weight: 700; font-size: var(--bpsh-name); line-height: 1.2;
	letter-spacing: -0.01em;
	/* break-word, not anywhere: a long word breaks only when it cannot fit a
	   line by itself, so ordinary names never split mid-syllable. */
	overflow-wrap: break-word;
}
.bpsh__meta {
	font-size: 12.5px;
	color: var(--bpsh-mut);
	overflow-wrap: anywhere;
}

/* MENU */
.bpsh__nav { min-width: 0; }
.bpsh__nav--inline { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.bpsh__nav--end    { display: flex; justify-content: flex-end; }
.bpsh__nav--centre { display: flex; justify-content: center; }

.bpsh__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px var(--bpsh-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.bpsh__item { position: relative; }
.bpsh__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 4px 2px;
	font-weight: 600; font-size: var(--bpsh-fs); line-height: 1.3;
	color: var(--bpsh-ink);
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}
.bpsh__link:hover { color: var(--bpsh-acc-ink, var(--bpsh-acc)); }
.bpsh__link:focus-visible { outline: 3px solid var(--bpsh-mark); outline-offset: 3px; border-radius: 4px; }
.bpsh__link.is-active::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 6px;
	height: 2px;
	background: var(--bpsh-mark);
	border-radius: 2px;
}

/* OVERFLOW — a real disclosure, never hover-only. */
.bpsh__moremenu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 20;
	min-width: 200px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--bpsh-surface);
	border: 1px solid var(--bpsh-line);
	border-radius: var(--bpsh-r-sm);
	box-shadow: var(--bpsh-shadow);
}
.bpsh__moremenu[hidden] { display: none; }
.bpsh__moremenu .bpsh__link { min-height: 40px; width: 100%; padding-inline: 10px; }
.bpsh__moremenu .bpsh__link.is-active::after { display: none; }
.bpsh__moremenu .bpsh__link.is-active { background: var(--bpsh-acc-soft); border-radius: 6px; }

/* THE PLATFORM MARK — small, refined, and never optional. */
.bpsh__end { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.bpsh__chl {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 6px 12px 6px 8px;
	border: 1px solid var(--bpsh-line);
	border-radius: 999px;
	background: var(--bpsh-surface);
	color: var(--bpsh-ink);
	font-weight: 600; font-size: 13px; line-height: 1.2;
	cursor: pointer;
}
.bpsh__chl:hover { border-color: var(--bpsh-acc); background: var(--bpsh-acc-soft); }
.bpsh__chl:focus-visible { outline: 3px solid var(--bpsh-mark); outline-offset: 2px; }
/* The platform mark is a WORDMARK: it keeps its own ratio and is capped by
   width, never squeezed into a square. The visible label is the mark itself;
   the accessible name comes from the button's aria-label, and the img alt is
   the fallback if the file ever fails to load. */
.bpsh__chlmark { block-size: 17px; inline-size: auto; max-inline-size: 118px; object-fit: contain; display: block; }
.bpsh__chltxt {
	position: absolute;
	inline-size: 1px; block-size: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}
.bpsh__chl { padding: 6px 12px; }
/* CHL:BP_SHOP_STANDARD_NAV v1.1 — a quiet row with no brand block: the page
   list takes the leading edge, the flip keeps the trailing corner. */
.bpsh--quiet .bpsh__row--nobrand .bpsh__nav--inline { margin-inline-start: 0; }
/* CHL:BP_SHOP_STANDARD_NAV v1.3 — THE LEAD (Shop): host chip + title, leading edge. */
.bpsh__lead { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 0 1 auto; }
.bpsh__leadhost {
	display: inline-flex; align-items: center; gap: 9px; min-width: 0; flex: none;
	padding: 3px 10px 3px 3px; border-radius: 10px;
	color: var(--bpsh-ink); text-decoration: none;
	background: color-mix(in srgb, var(--bpsh-ink) 4%, transparent);
}
.bpsh__leadhost:hover { background: color-mix(in srgb, var(--bpsh-ink) 8%, transparent); }
.bpsh__leadcrest {
	inline-size: 36px; block-size: 36px; border-radius: 9px; object-fit: contain; padding: 3px;
	background: #fff; border: 1px solid var(--bpsh-line); display: block; flex: none;
}
.bpsh__leadcrest--mono { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.bpsh__leadtxt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.bpsh__leadeyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bpsh-mut); }
.bpsh__leadhostname { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 24ch; display: inline-flex; align-items: center; gap: 4px; }
.bpsh__leadverified { font-size: 13px; color: var(--bpsh-ink); }
.bpsh__leadtitle {
	margin: 0; font-size: var(--bpsh-name); font-weight: 700; line-height: 1.1; letter-spacing: -.01em;
	min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 34ch;
}
@media (max-width: 900px) {
	.bpsh__lead { flex-direction: column; align-items: flex-start; gap: 6px; }
	.bpsh__leadtitle { font-size: 17px; max-inline-size: 100%; }
	.bpsh__leadhostname { max-inline-size: 18ch; }
}
/* CHL:BP_NAV_FLIP v1 — the double-arrow flip, compact and quiet. */
.bpsh__chl--flip {
	inline-size: 36px;
	block-size: 36px;
	min-height: 0;
	padding: 0;
	justify-content: center;
	font-size: 14px;
	line-height: 0;
	color: var(--bpsh-mut);             /* soft grey glyph; ink only on hover */
	border-radius: 9px;                 /* a blunted square, not a circle */
}
.bpsh__chl--flip .bi { display: block; }
/* The flip never lights up orange: a quiet ink-tinted edge on hover, and a
   neutral ring only for keyboard focus. */
.bpsh__chl--flip:hover { border-color: color-mix(in srgb, var(--bpsh-ink) 34%, transparent); background: color-mix(in srgb, var(--bpsh-ink) 5%, transparent); color: var(--bpsh-ink); }
.bpsh__chl--flip:focus-visible { outline: 2px solid color-mix(in srgb, var(--bpsh-ink) 55%, transparent); outline-offset: 2px; }
/* The CHL shell's twin: the same glyph, floated in the same corner of the
   platform header, never a bar. */
.bpshell__slot--head[data-bp-shell-part="chl"] { position: relative; }
.bpshell__flip {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);        /* vertically centred on the platform bar, like its twin */
	right: 12px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	padding: 0;
	border: 1px solid var(--bpsh-line, #e6e1da);
	border-radius: 9px;                 /* a blunted square, not a circle — same tile as the business bar */
	background: var(--bpsh-surface, #fff);
	color: var(--bpsh-mut, #6b6560);    /* soft grey glyph; ink only on hover */
	font-size: 14px;
	line-height: 0;
	cursor: pointer;
}
/* In the platform header's own cluster: flow, not absolute; same tile. */
.bpshell__flip--inline {
	position: static;
	transform: none;
	margin-left: 14px;
	vertical-align: middle;
	flex: none;
	align-self: center;
}
.bpshell__flip:hover { border-color: color-mix(in srgb, var(--bpsh-ink, #1a1a1a) 34%, transparent); background: color-mix(in srgb, var(--bpsh-ink, #1a1a1a) 5%, transparent); color: var(--bpsh-ink, #1a1a1a); }
.bpshell__flip:focus-visible { outline: 2px solid color-mix(in srgb, var(--bpsh-ink, #1a1a1a) 55%, transparent); outline-offset: 2px; }
@media (max-width: 640px) {
	.bpshell__flip { right: 8px; inline-size: 32px; block-size: 32px; font-size: 13px; }
	.bpsh__chl--flip { inline-size: 32px; block-size: 32px; font-size: 13px; }
}

/* MOBILE TOGGLE */
.bpsh__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid var(--bpsh-line);
	border-radius: var(--bpsh-r-sm);
	background: var(--bpsh-surface);
	cursor: pointer;
	flex: none;
}
.bpsh__burger:focus-visible { outline: 3px solid var(--bpsh-mark); outline-offset: 2px; }
.bpsh__burgerbox { display: grid; gap: 4px; width: 18px; }
.bpsh__burgerbox span { display: block; height: 2px; background: var(--bpsh-ink); border-radius: 2px; }

/* UTILITY STRIP */
.bpsh__utility { min-width: 0; }
.bpsh__utilist {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: var(--bpsh-mut);
}
.bpsh__utilist i { margin-right: 6px; color: var(--bpsh-mark); }
.bpsh__utilist a { color: inherit; }
.bpsh__utilist a:hover { color: var(--bpsh-ink); }

/* ══ HEADER VARIANT 1 · QUIET WORDMARK ════════════════════════════════ */
.bpsh--quiet .bpsh__row { justify-content: space-between; }
.bpsh--quiet .bpsh__nav--inline { margin-inline: auto; }

/* ══ HEADER VARIANT 2 · CENTRED ATELIER ═══════════════════════════════ */
/* The two menu groups are sized to their own content and the IDENTITY takes
   the middle. Sizing the identity `auto` instead let a very long trading name
   claim its full max-content width and squeeze both menus into columns — the
   same trap as the ledger. A name may wrap; a menu may not become a list. */
.bpsh--atelier .bpsh__axis {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr) max-content auto;
	align-items: center;
	gap: var(--bpsh-gap);
	padding-block: var(--bpsh-pad-y);
}
.bpsh--atelier .bpsh__nav--left  .bpsh__list { justify-content: flex-start; }
.bpsh--atelier .bpsh__nav--right .bpsh__list { justify-content: flex-end; }
.bpsh--atelier .bpsh__brand--centre { flex-direction: column; gap: 4px; text-align: center; justify-self: center; min-width: 0; }
.bpsh--atelier .bpsh__name { text-align: center; }
.bpsh--atelier .bpsh__secondary {
	margin: 0;
	padding-bottom: var(--bpsh-pad-y);
	text-align: center;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bpsh-mut);
}

/* ══ HEADER VARIANT 3 · SPLIT LEDGER ══════════════════════════════════ */
/* The MENU is sized to its content and the IDENTITY takes what is left.
   The other way round (identity `auto`) let a 90-character trading name claim
   the whole row at max-content width, which squeezed the menu into a column
   one word wide. A name can wrap; a menu turning vertical is a broken menu. */
.bpsh--ledger .bpsh__ledger {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, auto);
	align-items: stretch;
	gap: var(--bpsh-gap);
	padding-block: var(--bpsh-pad-y);
}
.bpsh--ledger .bpsh__ledgerid {
	padding-right: var(--bpsh-gap);
	border-right: 1px solid var(--bpsh-line);
	display: flex;
	align-items: center;
	min-width: 0;
}
.bpsh--ledger .bpsh__brand--stack { align-items: center; }
.bpsh--ledger .bpsh__ledgernav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--bpsh-gap);
	min-width: 0;
}
.bpsh--ledger .bpsh__nav {
	flex: 1 1 auto;
	align-self: stretch;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	border-bottom: 1px solid var(--bpsh-line);
	padding-bottom: 4px;
}
.bpsh--ledger .bpsh__list { justify-content: flex-end; row-gap: 0; flex-wrap: nowrap; }
@media (max-width: 1100px) {
	/* Below the point where the whole menu fits on one line it may wrap — but
	   it wraps as a MENU, in rows, never as a column. */
	.bpsh--ledger .bpsh__list { flex-wrap: wrap; }
}

/* ══ HEADER VARIANT 4 · LOCAL UTILITY ═════════════════════════════════ */
.bpsh--utility .bpsh__strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bpsh-gap);
	padding-block: 6px;
	border-bottom: 1px solid var(--bpsh-line);
	min-width: 0;
}
.bpsh--utility .bpsh__stripend { flex: none; }
.bpsh--utility .bpsh__row--primary { justify-content: space-between; }

/* ══ HEADER VARIANT 5 · FLOATING STUDIO ═══════════════════════════════ */
.bpsh--studio { background: var(--bpsh-canvas); }
.bpsh--studio .bpsh__row--studio { align-items: center; }
.bpsh--studio .bpsh__plane {
	margin-inline: auto;
	padding: 4px clamp(12px, 1.6vw, 20px);
	background: var(--bpsh-surface);
	border: 1px solid var(--bpsh-line);
	border-radius: 14px;
	box-shadow: 0 6px 18px -14px rgba(32, 26, 20, .5);
	min-width: 0;
}
.bpsh--studio .bpsh__link.is-active::after { bottom: 4px; }

/* ══ HEADER VARIANT 6 · EDITORIAL MASTHEAD ════════════════════════════ */
.bpsh--masthead .bpsh__mastid {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bpsh-gap);
	padding-top: calc(var(--bpsh-pad-y) * 1.4);
}
.bpsh--masthead .bpsh__brand--display .bpsh__name {
	font-size: calc(var(--bpsh-name) * 1.55);
	letter-spacing: -0.02em;
	line-height: 1.08;
}
.bpsh--masthead .bpsh__mastend { display: flex; align-items: center; gap: 8px; flex: none; }
.bpsh--masthead .bpsh__standfirst {
	margin: 6px 0 0;
	max-width: 62ch;
	font-size: 14.5px;
	color: var(--bpsh-mut);
}
.bpsh--masthead .bpsh__mastrule {
	height: 1px;
	background: var(--bpsh-ink);
	opacity: .22;
	margin-top: calc(var(--bpsh-pad-y) * 0.9);
}
.bpsh--masthead .bpsh__nav--centre { padding-block: calc(var(--bpsh-pad-y) * 0.7); }
.bpsh--masthead .bpsh__list { justify-content: center; }
.bpsh--masthead .bpsh__link {
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: calc(var(--bpsh-fs) - 1.5px);
}

/* ══ HEADER VARIANT 7 · IMMERSIVE OVERLAY ═════════════════════════════
   Over a hero it is absolutely positioned, so it lifts off the image and
   then scrolls away with it — it never becomes a fixed bar, so it can
   never cover content the visitor has scrolled to. The scrim is what
   keeps the type at AA on an unknown photograph. Without hero media the
   variant renders solid, in flow: an intentional design, not a fallback
   that looks broken.                                                      */
.bpsh--overlay.bpsh--over {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	background: linear-gradient(to bottom, rgba(18, 14, 11, .58), rgba(18, 14, 11, .28) 62%, rgba(18, 14, 11, 0));
	border-bottom: 0;
	color: #fff;
	z-index: 7;
}
.bpsh--overlay.bpsh--over .bpsh__link,
.bpsh--overlay.bpsh--over .bpsh__name,
.bpsh--overlay.bpsh--over .bpsh__meta { color: #fff; }
.bpsh--overlay.bpsh--over .bpsh__link:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.bpsh--overlay.bpsh--over .bpsh__link.is-active::after { background: #fff; }
.bpsh--overlay.bpsh--over .bpsh__chl {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}
.bpsh--overlay.bpsh--over .bpsh__chl:hover { background: rgba(255, 255, 255, .26); }
.bpsh--overlay.bpsh--over .bpsh__burger { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
.bpsh--overlay.bpsh--over .bpsh__burgerbox span { background: #fff; }
.bpsh--overlay.bpsh--over .bpsh__moremenu { color: var(--bpsh-ink); }
.bpsh--overlay.bpsh--over .bpsh__moremenu .bpsh__link { color: var(--bpsh-ink); }
.bpsh--overlay.bpsh--over .bpsh__mono { background: rgba(255, 255, 255, .22); }
.bpsh--overlay .bpsh__row--over { justify-content: space-between; }

/* ══ MOBILE DRAWER ════════════════════════════════════════════════════ */
.bpsh__drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(340px, 88vw);
	z-index: 1200;
	background: var(--bpsh-surface);
	color: var(--bpsh-ink);
	border-left: 1px solid var(--bpsh-line);
	box-shadow: -18px 0 44px -30px rgba(32, 26, 20, .7);
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px 22px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.bpsh__drawer[hidden] { display: none; }
.bpsh__drawerhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bpsh__drawertitle { font-weight: 700; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.bpsh__drawerclose {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--bpsh-line);
	border-radius: var(--bpsh-r-sm);
	background: var(--bpsh-surface);
	color: var(--bpsh-ink);
	cursor: pointer;
	flex: none;
}
.bpsh__drawerclose:focus-visible { outline: 3px solid var(--bpsh-mark); outline-offset: 2px; }
.bpsh__drawernav ul,
.bpsh__drawerutil { list-style: none; margin: 10px 0 0; padding: 0; }
.bpsh__drawernav a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 6px 8px;
	border-radius: 8px;
	font-weight: 600; font-size: 16px; line-height: 1.3;
	color: var(--bpsh-ink);
}
.bpsh__drawernav a:hover { background: var(--bpsh-acc-soft); }
.bpsh__drawernav a.is-active { background: var(--bpsh-acc-soft); color: var(--bpsh-acc-ink, var(--bpsh-ink)); }
.bpsh__drawernav a:focus-visible { outline: 3px solid var(--bpsh-mark); outline-offset: 2px; }
.bpsh__drawerutil { border-top: 1px solid var(--bpsh-line); padding-top: 10px; font-size: 14px; color: var(--bpsh-mut); }
.bpsh__drawerutil li { min-height: 40px; display: flex; align-items: center; }
.bpsh__drawerutil i { margin-right: 8px; color: var(--bpsh-mark); }
.bpsh__drawerutil a { color: inherit; }
.bpsh__drawerchl {
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--bpsh-line);
	border-radius: 999px;
	background: var(--bpsh-soft);
	color: var(--bpsh-ink);
	font-weight: 600; font-size: 14px; line-height: 1.3;
	text-align: left;
	cursor: pointer;
}
.bpsh__drawerchl:focus-visible { outline: 3px solid var(--bpsh-mark); outline-offset: 2px; }
.bpsh__drawerchl .bpsh__chlmark { flex: none; block-size: 14px; max-inline-size: 96px; }
.bpsh__scrim {
	position: fixed;
	inset: 0;
	z-index: 1199;
	background: rgba(18, 14, 11, .44);
	border: 0;
}
.bpsh__scrim[hidden] { display: none; }

/* ══ RESPONSIVE — the drawer takes over below the tablet threshold ════ */
@media (max-width: 900px) {
	.bpsh__burger { display: inline-flex; }
	.bpsh__nav { display: none; }
	.bpsh--atelier .bpsh__axis { grid-template-columns: 1fr auto; }
	.bpsh--atelier .bpsh__brand--centre { justify-self: start; flex-direction: row; text-align: left; }
	.bpsh--atelier .bpsh__name { text-align: left; }
	.bpsh--ledger .bpsh__ledger { grid-template-columns: 1fr auto; }
	.bpsh--ledger .bpsh__ledgerid { border-right: 0; padding-right: 0; }
	.bpsh--masthead .bpsh__mastrule { display: none; }
	.bpsh--studio .bpsh__plane { display: none; }
	.bpsh__chl--compactable .bpsh__chltxt { display: none; }
}
@media (max-width: 600px) {
	.bpsh--utility .bpsh__strip { flex-wrap: wrap; }
	.bpsh--masthead .bpsh__standfirst { display: none; }

	/* A very long trading name and a row of controls cannot share 390px. The
	   identity therefore takes its own row and the controls sit beneath it —
	   which is what stops the name breaking in the middle of a word. */
	.bpsh__row,
	.bpsh--masthead .bpsh__mastid { flex-wrap: wrap; }
	.bpsh__brand { flex: 1 1 100%; }
	.bpsh__end,
	.bpsh--masthead .bpsh__mastend { margin-left: 0; }
	.bpsh--masthead .bpsh__brand--display .bpsh__name { font-size: clamp(20px, 6vw, 27px); }
	.bpshell__returnname { max-inline-size: 16ch; }
}

/* ══ FOOTER — shared vocabulary ═══════════════════════════════════════ */

.bpsf {
	background: var(--bpsh-canvas);
	color: var(--bpsh-ink);
	border-top: 1px solid var(--bpsh-line);
	/* LEGACY RESET — the old marketplace theme styles the bare `footer`
	   element (haseeb/css/style.css) with 230px/70px of padding reserving
	   room for a decorative background image. The shell footer paints its
	   own canvas and owns its spacing through .bpsf__in, so it must also
	   disown that inherited padding — otherwise every Business Page holds
	   300px open for an image it never draws. Scoped to .bpsf: the legacy
	   marketplace footer is untouched. */
	padding-top: 0;
	padding-bottom: 0;
	background-image: none;
}
.bpsf__in {
	max-width: calc(var(--bpsh-max) + 2 * var(--bpsh-gut));
	margin-inline: auto;
	padding: var(--bpsh-fpad) var(--bpsh-gut);
	box-sizing: border-box;
}
.bpsf a { color: inherit; text-decoration: none; }
.bpsf a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bpsf a:focus-visible { outline: 3px solid var(--bpsh-mark); outline-offset: 3px; border-radius: 4px; }

.bpsf__brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.bpsf__logo { width: auto; height: 40px; max-width: 150px; object-fit: contain; display: block; }
.bpsf__mono {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: var(--bpsh-r-sm);
	background: var(--bpsh-mark); color: #fff; font-weight: 700; font-size: 15px; line-height: 1; flex: none;
}
.bpsf__name { font-weight: 700; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.bpsf__brand--lg .bpsf__name { font-size: 21px; }
.bpsf__brand--sm .bpsf__name { font-size: 15px; }

.bpsf__h {
	margin: 0 0 8px;
	font-weight: 700; font-size: 12.5px; line-height: 1.3;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--bpsh-mut);
}
.bpsf__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bpsf__links li { min-height: 32px; display: flex; align-items: center; }
.bpsf__links a { font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.bpsf__links i { color: var(--bpsh-mark); }
.bpsf__links--inline { display: flex; flex-wrap: wrap; gap: 2px 18px; }

.bpsf__blurb { margin: 10px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.6; color: var(--bpsh-mut); }
.bpsf__address { margin: 0 0 8px; font-style: normal; font-size: 14.5px; line-height: 1.6; color: var(--bpsh-mut); max-width: 34ch; }

.bpsf__hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.bpsf__hours li { display: flex; justify-content: space-between; gap: 14px; min-height: 26px; align-items: center; color: var(--bpsh-mut); }
.bpsf__hours li.is-today { color: var(--bpsh-ink); font-weight: 600; }
.bpsf__tz { margin: 8px 0 0; font-size: 12.5px; color: var(--bpsh-mut); }

.bpsf__social { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bpsf__social a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14.5px; }
.bpsf__social i { color: var(--bpsh-mark); font-size: 17px; }
.bpsf__social--row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bpsf__social--row a {
	width: 44px; height: 44px; justify-content: center;
	border: 1px solid var(--bpsh-line); border-radius: 999px;
}

/* the footer end of the switch */
.bpsf__chl {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 10px 18px;
	border: 1px solid var(--bpsh-line);
	border-radius: 999px;
	background: var(--bpsh-surface);
	color: var(--bpsh-ink);
	font-weight: 600; font-size: 14.5px; line-height: 1.2;
	cursor: pointer;
}
.bpsf__chl:hover { border-color: var(--bpsh-acc); background: var(--bpsh-acc-soft); }
.bpsf__chl:focus-visible { outline: 3px solid var(--bpsh-mark); outline-offset: 3px; }
/* Same law as the header mark: the platform logo is a WORDMARK and keeps its
   own ratio. Capping the width and letting the height follow is what stops it
   collapsing into an unreadable sliver. */
.bpsf__chlmark { block-size: 18px; inline-size: auto; max-inline-size: 124px; object-fit: contain; display: block; }
.bpsf__chl i { color: var(--bpsh-mark); }
.bpsf__chl--compact { min-height: 40px; padding: 8px 14px; font-size: 13.5px; }

.bpsf__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 18px;
	margin-top: var(--bpsh-fgap);
	padding-top: 14px;
	border-top: 1px solid var(--bpsh-line);
	font-size: 13px;
	color: var(--bpsh-mut);
}
.bpsf__copy { margin: 0; }
.bpsf__legallinks { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; }
.bpsf__legallinks li { min-height: 32px; display: flex; align-items: center; }

/* ══ FOOTER VARIANT 1 · ESSENTIAL BAR (v2 — CHL:BP_FOOTER_ESSENTIAL) ══════ */
.bpsf--essential .bpsf__ess { display: flex; flex-direction: column; gap: 18px; }
.bpsf--essential .bpsf__essrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.bpsf--essential .bpsf__essid { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bpsf--essential .bpsf__brand--ess .bpsf__name { font-size: 16px; }
.bpsf--essential .bpsf__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; font-size: 13.5px; color: var(--bpsh-mut); }
.bpsf--essential .bpsf__facts li { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; }
.bpsf--essential .bpsf__facts i { color: var(--bpsh-mark); font-size: 13px; }
.bpsf--essential .bpsf__facts a { color: inherit; text-decoration: none; }
.bpsf--essential .bpsf__facts a:hover { color: var(--bpsh-ink); text-decoration: underline; text-underline-offset: 3px; }
.bpsf--essential .bpsf__esspages { flex: 0 1 auto; }
.bpsf--essential .bpsf__esspages .bpsf__links--inline { display: flex; flex-wrap: wrap; gap: 2px 22px; }
.bpsf--essential .bpsf__esspages a { font-size: 14px; font-weight: 600; color: var(--bpsh-ink); text-decoration: none; opacity: .85; }
.bpsf--essential .bpsf__esspages a:hover, .bpsf--essential .bpsf__esspages a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.bpsf--essential .bpsf__essrow--legal {
	align-items: center; padding-top: 14px; border-top: 1px solid var(--bpsh-line);
	font-size: 13px; color: var(--bpsh-mut);
}
.bpsf--essential .bpsf__dot { margin: 0 4px; opacity: .6; }
.bpsf--essential .bpsf__legallinks { margin-left: auto; }
.bpsf__flip {
	display: inline-flex; align-items: center; gap: 10px;
	block-size: 36px; padding: 0 6px 0 12px; border-radius: 9px;
	border: 1px solid var(--bpsh-line); background: var(--bpsh-surface); color: var(--bpsh-mut);
	font-size: 13px; font-weight: 600; cursor: pointer;
}
.bpsf__flip .bi { font-size: 14px; color: var(--bpsh-mut); }
.bpsf__flip:hover { color: var(--bpsh-ink); border-color: color-mix(in srgb, var(--bpsh-ink) 34%, transparent); }
.bpsf__flip:hover .bi { color: var(--bpsh-ink); }
.bpsf__flip:focus-visible { outline: 2px solid color-mix(in srgb, var(--bpsh-ink) 55%, transparent); outline-offset: 2px; }
@media (max-width: 640px) {
	.bpsf--essential .bpsf__essrow--legal { align-items: flex-start; flex-direction: column; gap: 10px; }
	.bpsf--essential .bpsf__legallinks { margin-left: 0; }
}
/* ══ FOOTER VARIANT 1 · ESSENTIAL BAR (v1 rules, kept for other bars) ═══ */
.bpsf--essential .bpsf__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bpsh-fgap);
}
.bpsf--essential .bpsf__inline { flex: 1 1 260px; display: flex; justify-content: center; }

/* ══ FOOTER VARIANT 2 · BUSINESS DIRECTORY ════════════════════════════
   auto-fit + minmax means a business with two facts gets two columns, not
   four columns with two of them empty.                                    */
.bpsf__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	gap: var(--bpsh-fgap);
	align-items: start;
}
.bpsf__cols--tight { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.bpsf__col--id { grid-column: span 1; }
.bpsf__bridge { margin-top: var(--bpsh-fgap); display: flex; justify-content: flex-start; }

/* ══ FOOTER VARIANT 3 · CONTACT LEDGER ════════════════════════════════ */
.bpsf--ledger .bpsf__ledgerhead { margin-bottom: var(--bpsh-fgap); }
.bpsf--ledger .bpsf__eyebrow {
	margin: 8px 0 0; font-size: 12.5px; letter-spacing: .09em;
	text-transform: uppercase; color: var(--bpsh-mut);
}
.bpsf__dl { margin: 0; display: grid; gap: 0; }
.bpsf__dlrow {
	display: grid;
	grid-template-columns: minmax(120px, 22%) minmax(0, 1fr);
	gap: 12px var(--bpsh-fgap);
	padding-block: 12px;
	border-top: 1px solid var(--bpsh-line);
	align-items: start;
}
.bpsf__dlrow:last-child { border-bottom: 1px solid var(--bpsh-line); }
.bpsf__dlrow dt { font-weight: 700; font-size: 12.5px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--bpsh-mut); }
.bpsf__dlrow dd { margin: 0; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.bpsf--ledger .bpsf__ledgerfoot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bpsh-fgap);
	margin-top: var(--bpsh-fgap);
}
/* The ledger's page links close the block on one line — they are a footnote to
   the ruled rows above, not a column of their own. */
.bpsf--ledger .bpsf__ledgerfoot .bpsf__links { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.bpsf--ledger .bpsf__ledgerfoot .bpsf__col { min-width: 0; }

/* ══ FOOTER VARIANT 4 · CTA TERRACE ═══════════════════════════════════ */
.bpsf--terrace .bpsf__in { padding-top: var(--bpsh-fgap); }
.bpsf--terrace .bpsf__terrace {
	background: var(--bpsh-deep);
	color: var(--bpsh-deep-ink);
	border-radius: var(--bpsh-r);
	margin-bottom: var(--bpsh-fgap);
}
.bpsf--terrace .bpsf__terracein {
	max-width: 62ch;
	margin-inline: auto;
	padding: var(--bpsh-fpad) var(--bpsh-gut);
	text-align: center;
}
.bpsf__cta { margin: 0; font-weight: 700; font-size: clamp(21px, 2.6vw, 30px); line-height: 1.22; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.bpsf__ctasub { margin: 10px 0 0; font-size: 15px; line-height: 1.6; opacity: .86; }
.bpsf__ctabtn {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 48px; margin-top: 18px; padding: 12px 22px;
	border-radius: 999px;
	background: var(--bpsh-act); color: var(--bpsh-act-ink);
	font-weight: 700; font-size: 15px; line-height: 1.2;
}
.bpsf--terrace .bpsf__ctabtn:hover { background: var(--bpsh-act-hov); text-decoration: none; }
.bpsf__utilrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bpsh-fgap);
}
.bpsf__utilrow .bpsf__inline { flex: 1 1 240px; display: flex; justify-content: center; }

/* ══ FOOTER VARIANT 5 · EDITORIAL SIGNATURE ═══════════════════════════ */
.bpsf--signature .bpsf__sig { max-width: 66ch; }
.bpsf__story { margin: 0; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.7; }
.bpsf__sigmark { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; }
.bpsf__brand--sig .bpsf__name { font-size: 19px; }
.bpsf__sigplace { font-size: 13.5px; color: var(--bpsh-mut); }
.bpsf__sigrule { height: 1px; background: var(--bpsh-ink); opacity: .2; margin-block: var(--bpsh-fgap); }

/* ══ FOOTER VARIANT 6 · COMMUNITY BRIDGE ══════════════════════════════
   The band is the hand-off: it is the business's own deep tone, so the
   move to the platform reads as one continuous place.                     */
.bpsf--bridge .bpsf__bridgeband {
	margin-top: var(--bpsh-fgap);
	background: var(--bpsh-deep);
	color: var(--bpsh-deep-ink);
	border-radius: var(--bpsh-r);
}
.bpsf__bridgein { padding: var(--bpsh-fpad) clamp(18px, 3vw, 34px); }
.bpsf__bridgekicker { margin: 0; font-weight: 700; font-size: 12px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.bpsf__bridgeh { margin: 10px 0 0; font-weight: 600; font-size: clamp(18px, 2.2vw, 25px); line-height: 1.3; max-width: 40ch; overflow-wrap: anywhere; }
.bpsf__bridgeacts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.bpsf__chl--onband { background: transparent; color: var(--bpsh-deep-ink); border-color: rgba(255, 255, 255, .42); }
.bpsf__chl--onband:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .7); }
.bpsf__bridgealt { font-size: 14.5px; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }

/* ══ FOOTER VARIANT 7 · RICH SITEMAP ══════════════════════════════════ */
.bpsf__map {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: var(--bpsh-fgap);
	align-items: start;
}
.bpsf--sitemap .bpsf__col--id { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.bpsf--sitemap .bpsf__col--id { grid-column: span 1; }
}

/* ══ FOOTER RESPONSIVE ════════════════════════════════════════════════ */
@media (max-width: 720px) {
	.bpsf__dlrow { grid-template-columns: 1fr; gap: 4px; }
	.bpsf__legal { justify-content: flex-start; }
	.bpsf--essential .bpsf__inline,
	.bpsf__utilrow .bpsf__inline { justify-content: flex-start; }
}

/* ══ CHL:BP_OVERLAY_READABILITY v1 — THE HEADER CONTROLS READABILITY; THE
   PHOTOGRAPH DOES NOT. ════════════════════════════════════════════════════
   The Immersive Overlay's original scrim (.58 → .28 → 0 above) was tuned on
   agreeable photography. Owner law: it must hold AA on very light, busy and
   awkwardly-cropped images without ever reading as a heavy veil on dark
   ones — so the ladder is: a deeper top-weighted scrim, a soft text shadow
   that only registers against light pixels, and a translucent backing plate
   under the brand block (the light-logo-on-light-image case). None of this
   samples the image: a brightness flip was explicitly ruled out. */
.bpsh--overlay.bpsh--over {
	background: linear-gradient(to bottom,
		rgba(14, 12, 10, .68) 0%,
		rgba(14, 12, 10, .46) 46%,
		rgba(14, 12, 10, .20) 78%,
		rgba(14, 12, 10, 0) 100%);
}
.bpsh--overlay.bpsh--over .bpsh__link,
.bpsh--overlay.bpsh--over .bpsh__name,
.bpsh--overlay.bpsh--over .bpsh__meta {
	text-shadow: 0 1px 2px rgba(0, 0, 0, .38), 0 0 14px rgba(0, 0, 0, .22);
}
/* Logo protection — a quiet plate, not a badge: visible exactly as much as
   the photograph demands, invisible against a dark one. */
.bpsh--overlay.bpsh--over .bpsh__brand {
	background: rgba(12, 11, 10, .30);
	border-radius: 12px;
	padding: 4px 10px 4px 4px;
	backdrop-filter: blur(6px) saturate(1.1);
	-webkit-backdrop-filter: blur(6px) saturate(1.1);
}
/* Phone crops put faces/sky behind the type far more often: the safe text
   zone deepens and the menu collapses into the drawer anyway. */
@media (max-width: 760px) {
	.bpsh--overlay.bpsh--over {
		background: linear-gradient(to bottom,
			rgba(14, 12, 10, .78) 0%,
			rgba(14, 12, 10, .52) 56%,
			rgba(14, 12, 10, 0) 100%);
	}
}

/* ══ CHL:BP_IDENTITY_OWNERSHIP v1 — ONE COMPONENT OWNS PRIMARY IDENTITY. ═══
   When the deliberate Immersive Overlay header is active it already presents
   logo + business name (+ the CHL switch) over the hero, so the masthead
   band directly beneath stands down from repeating them: the crest and the
   duplicated name/slogan give way, and the band leads with what the header
   does NOT say — category · location · open state, trust chips and the
   actions. Rendering ownership only: the H1 stays in the document for
   assistive tech and search, and no vendor content is touched. The page
   emits .sbp-masthead--shellid only under that exact condition
   (_site_shell.php, CHL:BP_IDENTITY_OWNERSHIP v1), and this sheet is loaded
   precisely when the branded shell renders. */
.sbp-masthead--shellid .sbp-crest { display: none; }
.sbp-masthead--shellid .sbp-info__descriptor { display: none; }
.sbp-masthead--shellid .sbp-info__name {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0;
	white-space: nowrap;
}