/*!
 * Baly UI — the shared primitives of all four Baly sites.
 *
 * Handle: `bch-ui` (depends on `bch-tokens`). Registered and enqueued on every
 * front-end page by the theme (inc/chrome/chrome-assets.php). Plugin page CSS
 * lists `bch-ui` as a dependency and never ships its own copy of anything here.
 * API, markup contract and PHP helpers: see the primitives doc (bch_ui_*()
 * functions in inc/ui/ui.php).
 *
 * Rules: tokens only (--bsy-*), logical properties, mobile-first
 * (phone = base, then min-width 641px / 961px / 1281px), no gradients,
 * glows, letter-spacing or italics, motion only under
 * prefers-reduced-motion: no-preference.
 *
 * Contents
 *   1. Layout vars, page wrapper, scope safety nets
 *   2. Focus ring, skip link, visually hidden
 *   3. Buttons, text link, icon button
 *   4. Page title, brand panel
 *   5. Section heading
 *   6. Chips
 *   7. Tags + badges (discount, Pro, feature tag, status)
 *   8. Store badges + QR
 *   9. Forms            → bch-ui-forms.css (handle bch-ui-forms, on demand)
 *  10. FAQ              → bch-ui-faq.css   (handle bch-ui-faq, on demand)
 *  11. Breadcrumbs      → bch-ui-nav.css   (handle bch-ui-nav, on demand)
 *  12. Pagination       → bch-ui-nav.css
 *  13. Card shell + grid
 *  14. Rail
 *  15. Empty / loading / stale states
 *  16. Legacy label pill (kept for markup that still prints it)
 *  17. Site chrome: header + footer (was bch-chrome.css; merged so every page
 *      makes one render-blocking request fewer — the `bch-chrome` handle is
 *      now an alias of `bch-ui`)
 */

/* ── 1. Layout vars, page wrapper, scope safety nets */
:root {
	/* ONE column for header, content and footer on every site (fix round 2):
	   1312px of content, centred, inside the gutter. */
	--bsy-container: 1312px;
	--bsy-gutter: 16px;                 /* 24 from 641px, 32 from 1025px */
	--bsy-page-top: 16px;               /* header → first content (32 from 961px) */
	--bsy-page-bottom: 48px;            /* last content → footer (96 from 961px) */
	--bsy-section-gap: 48px;            /* between top-level sections, baly.iq marketing pages (96 from 961px) */
	--bsy-block-gap: 48px;              /* between top-level sections, app-like pages: food, digital, driverclub, blog, theme pages (64 from 961px) */
	/* Sticky offsets: the header's height (56 phones / 72 desktop). bch-chrome.js
	   keeps it equal to the real .bsy-header height if that ever changes. */
	--bch-header-h: var(--bsy-size-header-sm);
}
@media (min-width: 641px) {
	:root { --bsy-gutter: 24px; }
}
@media (min-width: 1101px) {
	:root { --bch-header-h: var(--bsy-size-header); }
}
@media (min-width: 961px) {
	:root {
		--bsy-page-top: 32px;
		--bsy-page-bottom: 96px;
		--bsy-section-gap: 96px;
		--bsy-block-gap: 64px;
	}
}
@media (min-width: 1025px) {
	:root { --bsy-gutter: 32px; }
}

/* The page column. <main class="baly-shell"> (header.php) is the ONLY place the
   page's outer edges and top/bottom space are set: plugins add no outer
   padding, no top padding before their first element and no bottom padding
   after their last. Header inner and footer inner use the same box. */
.baly-shell {
	box-sizing: border-box;
	max-width: calc(var(--bsy-container) + 2 * var(--bsy-gutter));
	margin-inline: auto;
	padding: var(--bsy-page-top) var(--bsy-gutter) var(--bsy-page-bottom);
}
/* Inside the shell a page stack never adds its own edges. */
.baly-shell .bsy-page__stack { max-width: none; padding-inline: 0; padding-block-end: 0; }
/* wpautop leftovers between shortcodes would add 16–24px holes. */
.baly-shell > br, .baly-shell > p:empty { display: none; }

.bsy-page { font-family: var(--bsy-font); color: var(--bsy-fg-primary); }
/* Links in plugin pages inherit their colour. :where() keeps this at the
   specificity of a single class, so .bsy-btn--* / .bsy-link colours win. */
.bsy-page :where(a) { color: inherit; }
/* Zero specificity, so any component image rule (cover height:100% …) wins. */
:where(.bsy-page) img { max-width: 100%; height: auto; display: block; }
.bsy-page button { font-family: inherit; }

.bsy-page__stack {
	padding: 0 var(--bsy-gutter) 28px;
	max-width: 1320px; margin: 0 auto; box-sizing: border-box;
	display: flex; flex-direction: column; gap: 14px;
}
@media (min-width: 769px) {
	.bsy-page__stack { gap: 18px; }
}

/* Graphik Arabic must never be letter-spaced (it breaks joining). Latin
   all-caps can opt back in with lang="en". */
.bsy-scope :where(h1, h2, h3, h4, h5, h6, p, a, span, li, button, label, strong, b, em, div) {
	letter-spacing: normal;
}
.bsy-scope [lang="en"] { letter-spacing: initial; }

/* Reduced motion safety net for markup that predates this file. !important is
   deliberate: it must beat animation/transition declarations of any
   specificity in older plugin CSS. Every primitive below already animates only
   under prefers-reduced-motion: no-preference. */
@media (prefers-reduced-motion: reduce) {
	.bsy-scope *, .bsy-scope *::before, .bsy-scope *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── 2. Focus ring, skip link, visually hidden */
/* Every site, zero specificity: any component rule can refine it. The
   outline follows the element's own border-radius (pills stay pills). */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):where(:focus-visible) {
	outline: var(--bsy-focus-ring-width) solid var(--bsy-focus-ring-color);
	outline-offset: var(--bsy-focus-ring-offset);
}
/* Inside Baly markup the same ring, at the specificity older plugin CSS
   expects (it beat their outline resets before; it still does). */
.bsy-scope :where(a, button, summary, [tabindex]):focus-visible {
	outline: var(--bsy-focus-ring-width) solid var(--bsy-focus-ring-color);
	outline-offset: var(--bsy-focus-ring-offset);
}
/* Fields keep the ring through the zero-specificity rule above. Inside a
   pill wrapper that draws its own ring (:focus-within), add .bsy-ring-within:
   the inner field then shows no second ring, no native search chrome. */
/* One 2px brand ring: the wrapper's own 1px border turns brand + a 1px outline
   flush on it (no offset gap, which read as a second ring). */
.bsy-ring-within :is(input, select, textarea):is(:focus, :focus-visible) { outline: none; }
.bsy-ring-within:focus-within { border-color: var(--bsy-focus-ring-color); outline: 1px solid var(--bsy-focus-ring-color); outline-offset: 0; }
:where(input[type="search"]) { -webkit-appearance: none; appearance: none; }
:where(input[type="search"])::-webkit-search-cancel-button,
:where(input[type="search"])::-webkit-search-decoration { -webkit-appearance: none; display: none; }
/* White ring on brand-blue and dark grounds. */
:where(.bsy-on-brand, .on-brand, .bsy-panel, .bsy-footer) :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible,
.bsy-scope :where(.bsy-on-brand, .on-brand, .bsy-panel) :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible,
.bsy-footer :where(a, button, summary, input, [tabindex]):focus-visible {
	outline-color: var(--bsy-focus-ring-color-inverse);
}

/* Visually hidden, still read by screen readers. .screen-reader-text is the
   WordPress core name (comment forms, widgets, plugins use it). */
.bsy-vh,
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
/* Core convention: a focusable .screen-reader-text (skip links) shows on focus. */
.screen-reader-text:focus,
.bsy-vh--focusable:focus {
	width: auto; height: auto; margin: 0;
	clip-path: none; overflow: visible;
	white-space: normal;
}

/* Skip link — first focusable element in <body>; hidden until focused. */
.bsy-skip {
	position: absolute;
	inset-block-start: var(--bsy-space-2);
	inset-inline-start: var(--bsy-space-2);
	z-index: 1000;
	display: inline-flex; align-items: center;
	box-sizing: border-box;
	min-height: var(--bsy-size-tap);
	padding: 0 var(--bsy-space-5);
	border-radius: var(--bsy-radius-pill);
	background: var(--bsy-brand); color: var(--bsy-white);
	font-family: var(--bsy-font); font-size: var(--bsy-text-base); font-weight: var(--bsy-fw-bold);
	text-decoration: none;
}
.bsy-skip:not(:focus) {
	width: 1px; height: 1px; min-height: 0;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── 3. Buttons, text link, icon button */
.bsy-btn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--bsy-space-2);
	box-sizing: border-box;
	min-height: var(--bsy-size-btn);
	padding: 0 var(--bsy-space-5);
	margin: 0;
	border: 0;
	border-radius: var(--bsy-radius-pill);
	background: transparent;
	color: var(--bsy-ink);
	font-family: var(--bsy-font);
	font-size: var(--bsy-text-base);
	font-weight: var(--bsy-fw-bold);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.bsy-btn svg { flex: none; width: 18px; height: 18px; }
.bsy-btn__l { min-width: 0; }
@media (prefers-reduced-motion: no-preference) {
	.bsy-btn {
		transition: background-color var(--bsy-duration-fast) var(--bsy-ease-out),
		            color var(--bsy-duration-fast) var(--bsy-ease-out),
		            box-shadow var(--bsy-duration-fast) var(--bsy-ease-out),
		            transform var(--bsy-duration-fast) var(--bsy-ease-out);
	}
}

/* Sizes: 48 hero · 44 section (default) · 40 header, cards, compact. */
.bsy-btn--lg { min-height: var(--bsy-size-btn-lg); padding: 0 var(--bsy-space-6); font-size: var(--bsy-text-base); }
.bsy-btn--md { min-height: var(--bsy-size-btn); padding: 0 var(--bsy-space-5); font-size: var(--bsy-text-base); }
.bsy-btn--sm { min-height: var(--bsy-size-btn-sm); padding: 0 18px; font-size: var(--bsy-text-sm); }
/* 40px controls keep a 44px tap area. */
.bsy-btn--sm::after {
	content: "";
	position: absolute;
	inset: -2px 0;
}
.bsy-btn--block { display: flex; width: 100%; }

/* Variants */
.bsy-btn--primary { background: var(--bsy-brand); color: var(--bsy-white); }
.bsy-btn--secondary { background: var(--bsy-white); color: var(--bsy-ink); box-shadow: inset 0 0 0 1px var(--bsy-line-strong); }
.bsy-btn--ghost { background: transparent; color: var(--bsy-ink); }
.bsy-btn--on-brand { background: var(--bsy-white); color: var(--bsy-brand); }
.bsy-btn--pro { background: var(--bsy-pro); color: var(--bsy-white); } /* the ONE Pro subscribe button only */
.bsy-btn--on-brand-outline {
	background: transparent; color: var(--bsy-white);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bsy-white) 60%, transparent);
}

@media (hover: hover) {
	.bsy-btn--primary:hover { background: var(--bsy-brand-hover); color: var(--bsy-white); }
	.bsy-btn--secondary:hover { background: var(--bsy-grey-50); color: var(--bsy-ink); }
	.bsy-btn--ghost:hover { background: var(--bsy-grey-100); color: var(--bsy-ink); }
	.bsy-btn--on-brand:hover { background: var(--bsy-brand-lighter); color: var(--bsy-brand); }
	.bsy-btn--pro:hover { background: color-mix(in srgb, var(--bsy-pro) 88%, var(--bsy-ink)); color: var(--bsy-white); }
	.bsy-btn--on-brand-outline:hover { background: color-mix(in srgb, var(--bsy-white) 12%, transparent); color: var(--bsy-white); }
}
.bsy-btn--primary:active { background: var(--bsy-brand-pressed); transform: scale(.98); }
.bsy-btn--secondary:active,
.bsy-btn--ghost:active { background: var(--bsy-grey-100); transform: scale(.98); }
.bsy-btn--pro:active { background: color-mix(in srgb, var(--bsy-pro) 76%, var(--bsy-ink)); transform: scale(.98); }
.bsy-btn--on-brand:active,
.bsy-btn--on-brand-outline:active { transform: scale(.98); }

/* Disabled. A disabled LINK does not exist: render a <span aria-disabled>. */
.bsy-btn:disabled,
.bsy-btn[aria-disabled="true"] {
	background: var(--bsy-grey-100);
	color: var(--bsy-muted);
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}
.bsy-btn--secondary:disabled,
.bsy-btn--secondary[aria-disabled="true"] {
	background: var(--bsy-white);
	box-shadow: inset 0 0 0 1px var(--bsy-line);
}

/* Loading: aria-busy="true" + disabled. The label stays (width locked by the
   script before it sets busy), a spinner sits in front of it. */
.bsy-btn[aria-busy="true"] { cursor: progress; opacity: .8; }
.bsy-btn--primary[aria-busy="true"] { background: var(--bsy-brand); color: var(--bsy-white); }
.bsy-btn--secondary[aria-busy="true"] { background: var(--bsy-white); color: var(--bsy-ink); box-shadow: inset 0 0 0 1px var(--bsy-line-strong); }
.bsy-btn[aria-busy="true"]::before {
	content: "";
	flex: none;
	box-sizing: border-box;
	width: 18px; height: 18px;
	border-radius: var(--bsy-radius-pill);
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
	/* Functional progress indicator: it only exists while a request runs. */
	.bsy-btn[aria-busy="true"]::before { animation: bsy-spin .8s linear infinite; }
}
@keyframes bsy-spin { to { transform: rotate(1turn); } }

/* Text link: 16/600 brand + an optional 16px chevron that points to the
   inline end (left in RTL = forward). */
.bsy-link {
	display: inline-flex; align-items: center; gap: var(--bsy-space-1);
	color: var(--bsy-brand);
	font-family: var(--bsy-font); font-size: var(--bsy-text-base); font-weight: var(--bsy-fw-semibold);
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	background: none; border: 0; padding: 0; cursor: pointer;
}
.bsy-link svg { flex: none; width: 16px; height: 16px; }
.bsy-link--sm { font-size: var(--bsy-text-sm); min-height: var(--bsy-size-tap); }
/* Optional shorter phone label: «الكل» for «شوف الكل». */
.bsy-link__long { display: none; }
@media (min-width: 641px) {
	.bsy-link__long { display: inline; }
	.bsy-link__short { display: none; }
}
@media (hover: hover) {
	.bsy-link:hover { color: var(--bsy-brand-hover); text-decoration: underline; text-underline-offset: 4px; }
}
.bsy-link:active { color: var(--bsy-brand-pressed); }
.bsy-link:focus-visible { border-radius: var(--bsy-radius-xs); }
:where(.bsy-on-brand, .bsy-panel) .bsy-link { color: var(--bsy-white); }

/* Icon button: 44 circle, 20px icon (carousel arrows, close). */
.bsy-icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	flex: none;
	box-sizing: border-box;
	width: var(--bsy-size-tap); height: var(--bsy-size-tap);
	margin: 0; padding: 0;
	border: 0;
	border-radius: var(--bsy-radius-pill);
	background: var(--bsy-white);
	color: var(--bsy-ink);
	box-shadow: inset 0 0 0 1px var(--bsy-line-strong);
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.bsy-icon-btn svg { width: var(--bsy-size-icon); height: var(--bsy-size-icon); }
@media (hover: hover) {
	.bsy-icon-btn:hover { background: var(--bsy-grey-50); }
}
.bsy-icon-btn:active { background: var(--bsy-grey-100); transform: scale(.98); }
.bsy-icon-btn:disabled,
.bsy-icon-btn[aria-disabled="true"] {
	background: var(--bsy-white);
	color: var(--bsy-muted);
	box-shadow: inset 0 0 0 1px var(--bsy-line);
	cursor: not-allowed;
	transform: none;
}
.bsy-icon-btn--plain { background: transparent; box-shadow: none; }
@media (hover: hover) {
	.bsy-icon-btn--plain:hover { background: var(--bsy-grey-100); }
}

/* ── 4. Page title, brand panel */
.bsy-ptitle { margin: 0; }
.bsy-ptitle__h {
	margin: 0;
	font-family: var(--bsy-font);
	font-size: var(--bsy-text-h1-sm);
	font-weight: var(--bsy-fw-black);
	line-height: var(--bsy-leading-h1);
	color: var(--bsy-ink);
}
.bsy-ptitle__lede {
	margin: var(--bsy-space-3) 0 0; /* H1 → lede 12 */
	text-wrap: pretty;
	max-width: 680px;
	font-size: var(--bsy-text-base);
	font-weight: var(--bsy-fw-regular);
	line-height: var(--bsy-leading-body);
	color: var(--bsy-fg2);
}
.bsy-ptitle__acts {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--bsy-space-3);
	margin-block-start: var(--bsy-space-6);
}
.bsy-ptitle--center { text-align: center; }
.bsy-ptitle--center .bsy-ptitle__lede { margin-inline: auto; }
.bsy-ptitle--center .bsy-ptitle__acts { justify-content: center; }
:where(.bsy-on-brand, .bsy-panel) .bsy-ptitle__h,
.bsy-ptitle--on-brand .bsy-ptitle__h { color: var(--bsy-white); }
:where(.bsy-on-brand, .bsy-panel) .bsy-ptitle__lede,
.bsy-ptitle--on-brand .bsy-ptitle__lede { color: var(--bsy-white); }
@media (min-width: 641px) {
	.bsy-ptitle__h { font-size: var(--bsy-text-h1); }
	.bsy-ptitle__lede { font-size: var(--bsy-text-md); }
}

/* Flat brand panel: only where the page's main action lives on blue
   (sign-up hero, B2B request hero) and the footer band. */
.bsy-panel {
	box-sizing: border-box;
	background: var(--bsy-brand);
	color: var(--bsy-white);
	border-radius: var(--bsy-radius-lg);
	padding: 28px var(--bsy-space-5);
}
@media (min-width: 641px) {
	.bsy-panel { border-radius: var(--bsy-radius-panel); padding: 56px; }
}

/* ── 5. Section heading
   Markup: .bsy-shead > (.bsy-shead__c > label? title sub?) + .bsy-shead__a?
   Older flat markup (eyebrow/title/sub as direct children) still stacks. */
.bsy-shead {
	display: flex; flex-wrap: wrap; align-items: flex-end;
	column-gap: var(--bsy-space-6);
	margin: 0 0 var(--bsy-space-6);
	text-align: start;
}
.bsy-shead > * { flex: 1 1 100%; min-width: 0; }
.bsy-shead > .bsy-shead__c { flex: 1 1 0; }
.bsy-shead > .bsy-shead__a {
	flex: 0 0 auto;
	display: flex; align-items: center; gap: var(--bsy-space-3);
}
.bsy-shead--lg { margin-block-end: var(--bsy-space-8); }
.bsy-shead--flush { margin-block-end: 0; }
.bsy-shead--center { justify-content: center; text-align: center; }
.bsy-shead--center .bsy-shead__sub { margin-inline: auto; }

.bsy-shead__label {
	margin: 0 0 var(--bsy-space-2);
	font-size: var(--bsy-text-sm); font-weight: var(--bsy-fw-medium); line-height: 1.4;
	color: var(--bsy-muted);
}
.bsy-shead__title {
	margin: 0;
	font-family: var(--bsy-font);
	font-size: var(--bsy-text-section-sm);
	font-weight: var(--bsy-fw-bold);
	line-height: var(--bsy-leading-heading);
	color: var(--bsy-ink);
}
.bsy-shead__ic {
	display: inline-block;
	vertical-align: middle;
	width: var(--bsy-size-icon-lg); height: var(--bsy-size-icon-lg);
	margin-inline-end: var(--bsy-space-3);
	position: relative; inset-block-start: -2px;
}
.bsy-shead__ic svg, .bsy-shead__ic img { display: block; width: 100%; height: 100%; }
.bsy-shead__sub {
	margin: var(--bsy-space-2) 0 0;
	text-wrap: pretty;
	max-width: 640px;
	font-size: var(--bsy-text-sm); font-weight: var(--bsy-fw-regular);
	line-height: var(--bsy-leading-small);
	color: var(--bsy-fg2);
}
.bsy-shead__a .bsy-link { font-size: var(--bsy-text-sm); min-height: var(--bsy-size-tap); }
.bsy-rail__arrows { display: none; gap: var(--bsy-space-2); }
.bsy-rail__arrows[hidden] { display: none; }
@media (min-width: 641px) {
	.bsy-shead__title { font-size: var(--bsy-text-section); }
	.bsy-shead__ic { width: 28px; height: 28px; }
	.bsy-shead__sub { font-size: var(--bsy-text-base); line-height: var(--bsy-leading-body); }
	.bsy-shead__a .bsy-link { font-size: var(--bsy-text-base); min-height: 0; }
	.bsy-rail__arrows:not([hidden]) { display: inline-flex; }
}

/* On a brand ground: one colour, white. --dark is the older name. */
.bsy-shead--on-brand .bsy-shead__title, .bsy-shead--dark .bsy-shead__title,
.bsy-shead--on-brand .bsy-shead__sub, .bsy-shead--dark .bsy-shead__sub,
.bsy-shead--on-brand .bsy-shead__label, .bsy-shead--dark .bsy-shead__label { color: var(--bsy-white); }

/* Older markup: the pill-with-dot eyebrow now reads as the plain label. */
.bsy-shead__eyebrow { margin: 0 0 var(--bsy-space-2); }
.bsy-shead__eyebrow .bsy-pill {
	display: inline; padding: 0; background: none; border-radius: 0;
	font-size: var(--bsy-text-sm); font-weight: var(--bsy-fw-medium); line-height: 1.4;
	color: var(--bsy-muted);
}
.bsy-shead--dark .bsy-shead__eyebrow .bsy-pill { color: var(--bsy-white); }
.bsy-shead__eyebrow .bsy-pill__dot { display: none; }

/* ── 6. Chips (filters, choices, section chips). Pressable, so pill-shaped. */
.bsy-chips {
	display: flex; flex-wrap: wrap; gap: var(--bsy-space-2);
	margin: 0; padding: 0; list-style: none;
}
.bsy-chips > li { display: flex; }
.bsy-chips--scroll {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	padding-block: 4px; margin-block: -4px; /* room for the focus ring */
}
.bsy-chips--scroll::-webkit-scrollbar { display: none; }
.bsy-chip {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	flex: none;
	box-sizing: border-box;
	min-height: var(--bsy-size-tap);
	padding: 0 var(--bsy-space-4);
	margin: 0;
	border: 1px solid var(--bsy-line-strong);
	border-radius: var(--bsy-radius-pill);
	background: var(--bsy-white);
	color: var(--bsy-ink);
	font-family: var(--bsy-font); font-size: var(--bsy-text-sm); font-weight: var(--bsy-fw-medium);
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.bsy-chip svg { flex: none; width: 16px; height: 16px; }
.bsy-chip__n { color: var(--bsy-muted); font-variant-numeric: tabular-nums; }
/* A chip that wraps a real radio/checkbox: the input is hidden, the label shows. */
.bsy-chip > input {
	position: absolute; opacity: 0;
	width: 1px; height: 1px; margin: 0;
	pointer-events: none;
}
@media (hover: hover) {
	.bsy-chip:hover { background: var(--bsy-grey-50); }
}
.bsy-chip[aria-pressed="true"],
.bsy-chip[aria-current="page"],
.bsy-chip[aria-current="true"],
.bsy-chip[aria-checked="true"],
.bsy-chip.is-active,
.bsy-chip:has(> input:checked) {
	background: var(--bsy-brand);
	border-color: var(--bsy-brand);
	color: var(--bsy-white);
}
.bsy-chip[aria-pressed="true"] .bsy-chip__n,
.bsy-chip[aria-current] .bsy-chip__n,
.bsy-chip.is-active .bsy-chip__n,
.bsy-chip:has(> input:checked) .bsy-chip__n { color: inherit; }
.bsy-chip:has(> input:focus-visible) {
	outline: var(--bsy-focus-ring-width) solid var(--bsy-focus-ring-color);
	outline-offset: var(--bsy-focus-ring-offset);
}
.bsy-chip:disabled,
.bsy-chip[aria-disabled="true"],
.bsy-chip:has(> input:disabled) {
	color: var(--bsy-muted); border-color: var(--bsy-line); cursor: not-allowed;
}
@media (min-width: 641px) {
	.bsy-chip { min-height: var(--bsy-size-chip); }
}
/* On a brand-blue ground: white text, white 60% ring (3.2:1 on --bsy-brand),
   white focus ring; selected = white fill with brand text. 44 tall on phones. */
.bsy-chip--on-brand {
	background: transparent;
	border-color: color-mix(in srgb, var(--bsy-white) 60%, transparent);
	color: var(--bsy-white);
}
@media (hover: hover) {
	.bsy-chip--on-brand:hover { background: color-mix(in srgb, var(--bsy-white) 12%, transparent); }
}
.bsy-chip--on-brand[aria-pressed="true"],
.bsy-chip--on-brand[aria-current="page"],
.bsy-chip--on-brand[aria-current="true"],
.bsy-chip--on-brand[aria-checked="true"],
.bsy-chip--on-brand.is-active,
.bsy-chip--on-brand:has(> input:checked) {
	background: var(--bsy-white); border-color: var(--bsy-white); color: var(--bsy-brand);
}
.bsy-chip--on-brand .bsy-chip__n { color: inherit; }
.bsy-chip--on-brand:focus-visible,
.bsy-chip--on-brand:has(> input:focus-visible) { outline-color: var(--bsy-focus-ring-color-inverse); }

/* ── 7. Tags + badges — 24 tall everywhere. At most one on a photo
   (Pro beats discount), placed with .bsy-on-photo. */
.bsy-tag {
	display: inline-flex; align-items: center; gap: var(--bsy-space-1);
	box-sizing: border-box;
	height: var(--bsy-size-badge);
	padding: 0 var(--bsy-space-2);
	border-radius: var(--bsy-radius-badge);
	background: var(--bsy-grey-100);
	color: var(--bsy-ink);
	font-family: var(--bsy-font); font-size: var(--bsy-text-xs); font-weight: var(--bsy-fw-semibold);
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.bsy-tag--discount { background: var(--bsy-ink); color: var(--bsy-white); font-weight: var(--bsy-fw-bold); }

/* The real Baly Pro badge: --pro pill + the white Pro mark (+ optional text). */
.bsy-pro {
	display: inline-flex; align-items: center; gap: 6px;
	box-sizing: border-box;
	height: var(--bsy-size-badge);
	padding: 0 10px;
	border-radius: var(--bsy-radius-pill);
	background: var(--bsy-pro);
	color: var(--bsy-white);
	font-family: var(--bsy-font); font-size: var(--bsy-text-xs); font-weight: var(--bsy-fw-bold);
	line-height: 1;
	white-space: nowrap;
}
.bsy-pro__mark { display: block; width: auto; height: 14px; flex: none; }
.bsy-page .bsy-pro__mark { height: 14px; }

/* Status: 6px dot + 12/600 word; green only when open. */
.bsy-status {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--bsy-font); font-size: var(--bsy-text-xs); font-weight: var(--bsy-fw-semibold);
	line-height: 1.4;
	color: var(--bsy-muted);
	white-space: nowrap;
}
.bsy-status::before {
	content: "";
	flex: none;
	width: 6px; height: 6px;
	border-radius: var(--bsy-radius-pill);
	background: var(--bsy-grey-500);
}
.bsy-status--open { color: var(--bsy-ok); }
/* Larger, for reading at a glance (driverclub): 14/600 word, 8px dot. */
.bsy-status--lg { gap: var(--bsy-space-2); font-size: var(--bsy-text-sm); }
.bsy-status--lg::before { width: 8px; height: 8px; }
.bsy-status--open::before { background: currentColor; }

/* Separator dot for meta lines. A drawn 4px dot: the «·» glyph next to
   Arabic-Indic digits reads as «٠» in Graphik Arabic. Markup:
   <span class="bsy-sep" aria-hidden="true"></span> between two items
   (keep a normal space or other text break for screen readers). */
.bsy-sep {
	display: inline-block;
	width: 4px; height: 4px;
	margin-inline: 6px;
	border-radius: var(--bsy-radius-pill);
	background: currentColor;
	opacity: .6;
	vertical-align: middle;
}

/* One badge on a photo: top-start, 10px in. The photo box is position:relative. */
.bsy-on-photo {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	z-index: 1;
}

/* ── 8. Store badges + QR — official artwork only, never redrawn.
   40 phone (44 tap area) · 44 band (default) · 48 hero. */
.bsy-badges {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--bsy-space-2);
	margin: 0; padding: 0; list-style: none;
}
.bsy-badges > li { display: flex; }
.bsy-badges--stack { flex-direction: column; align-items: flex-start; }
.bsy-badges--hero { gap: var(--bsy-space-3); }
.bsy-badge {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	line-height: 0;
	text-decoration: none;
	background: transparent;
	border-radius: var(--bsy-radius-sm);
	-webkit-tap-highlight-color: transparent;
}
.bsy-badge img { display: block; width: auto; height: var(--bsy-size-btn-sm); }
.bsy-badge::after { content: ""; position: absolute; inset: -2px 0; }
@media (min-width: 641px) {
	.bsy-badge img { height: var(--bsy-size-btn); }
	.bsy-badge::after { content: none; }
	.bsy-badges--hero .bsy-badge img { height: var(--bsy-size-btn-lg); }
}

/* QR: desktop only (you can't scan your own screen). */
.bsy-qr { display: none; }
.bsy-qr__i { display: block; width: 88px; height: 88px; border-radius: 6px; }
.bsy-qr__c {
	font-family: var(--bsy-font); font-size: var(--bsy-text-xs); font-weight: var(--bsy-fw-medium);
	line-height: 1.4;
	color: var(--bsy-fg2);
	text-align: center;
}
:where(.bsy-on-brand, .bsy-panel) .bsy-qr__c { color: var(--bsy-white); }
@media (min-width: 641px) {
	.bsy-qr {
		display: inline-flex; flex-direction: column; align-items: center;
		gap: 6px; flex: none; margin: 0;
	}
}

/* ── 13. Card shell + grid. Cards: white, 1px hairline, radius 16, no shadow. */
.bsy-card {
	box-sizing: border-box;
	background: var(--bsy-white);
	border: 1px solid var(--bsy-line);
	border-radius: var(--bsy-radius-card);
	padding: var(--bsy-space-4);
	box-shadow: none;
}
@media (min-width: 641px) {
	.bsy-card { padding: var(--bsy-space-6); }
}
.bsy-card--flush { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* The whole card is one link. */
.bsy-card--link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
@media (hover: hover) {
	.bsy-card--link:hover { border-color: var(--bsy-line-strong); }
}
@media (prefers-reduced-motion: no-preference) {
	.bsy-card--link { transition: border-color var(--bsy-duration-fast) var(--bsy-ease-out); }
}
.bsy-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--bsy-grey-100); /* no image: a neutral box, never a hole */
	overflow: hidden;
}
.bsy-card__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bsy-card__media--square { aspect-ratio: 1 / 1; }
.bsy-card__body { display: flex; flex-direction: column; gap: var(--bsy-space-1); padding: var(--bsy-space-3) 14px 14px; min-width: 0; }
.bsy-card__title {
	margin: 0;
	font-family: var(--bsy-font);
	font-size: var(--bsy-text-card-dense); font-weight: var(--bsy-fw-semibold);
	line-height: var(--bsy-leading-heading);
	color: var(--bsy-ink);
}
.bsy-card__title--lg { font-size: var(--bsy-text-card); }
.bsy-card__text { margin: 0; font-size: var(--bsy-text-sm); line-height: var(--bsy-leading-small); color: var(--bsy-fg2); }
.bsy-clamp-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Card grid: 2 per row on phones, 3 on tablets, 4 on desktop (override with
   --bsy-grid-cols / -md / -sm on the list). */
.bsy-grid {
	display: grid;
	grid-template-columns: repeat(var(--bsy-grid-cols-sm, 2), minmax(0, 1fr));
	gap: var(--bsy-space-3);
	margin: 0; padding: 0; list-style: none;
}
.bsy-grid > li { display: flex; flex-direction: column; min-width: 0; }
.bsy-grid > li > * { flex: 1 1 auto; }
@media (min-width: 641px) {
	.bsy-grid { grid-template-columns: repeat(var(--bsy-grid-cols-md, 3), minmax(0, 1fr)); gap: var(--bsy-space-4); }
}
@media (min-width: 961px) {
	.bsy-grid { grid-template-columns: repeat(var(--bsy-grid-cols, 4), minmax(0, 1fr)); gap: var(--bsy-space-6); }
}

/* ── 14. Rail — CSS scroll-snap; a part of the next card always shows.
   Arrows (desktop) come from bch-ui-rail.js via [data-bsy-rail-prev|next]. */
.bsy-rail { position: relative; min-width: 0; }
.bsy-rail__track {
	--bsy-rail-pad: 0px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--bsy-rail-w, 248px);
	gap: var(--bsy-rail-gap, var(--bsy-space-4));
	margin: -4px 0; /* room for focus rings inside the scroller */
	padding: 4px var(--bsy-rail-pad);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* Same value as the padding, or mandatory snap pulls the first card past
	   the column edge (the CLAUDE.md blog-strip bug). */
	scroll-padding-inline: var(--bsy-rail-pad);
	scrollbar-width: none;
}
.bsy-rail__track::-webkit-scrollbar { display: none; }
.bsy-rail__track > * { position: relative; scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; }
.bsy-rail__item { position: relative; } /* keeps visually-hidden text inside the scroller */
.bsy-rail__track > * > * { flex: 1 1 auto; }
/* Bleed to the screen edge on phones/tablets when the rail sits in the page gutter. */
.bsy-rail--bleed .bsy-rail__track {
	--bsy-rail-pad: var(--bsy-gutter);
	margin-inline: calc(var(--bsy-gutter) * -1);
}
@media (min-width: 961px) {
	.bsy-rail--bleed .bsy-rail__track { --bsy-rail-pad: 0px; margin-inline: 0; }
}
@media (prefers-reduced-motion: no-preference) {
	.bsy-rail__track { scroll-behavior: smooth; }
}

/* ── 15. Empty / loading / stale states */
.bsy-empty {
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
	padding: var(--bsy-space-8) 0;
}
.bsy-empty--center { align-items: center; text-align: center; }
.bsy-empty__ic { display: block; width: 32px; height: 32px; color: var(--bsy-fg2); }
.bsy-empty__ic svg { display: block; width: 100%; height: 100%; }
.bsy-empty__t {
	margin: 4px 0 0;
	font-family: var(--bsy-font);
	font-size: var(--bsy-text-md); font-weight: var(--bsy-fw-semibold);
	line-height: 1.45;
	color: var(--bsy-ink);
}
.bsy-empty__p { margin: 0; max-width: 56ch; font-size: var(--bsy-text-sm); line-height: 1.65; color: var(--bsy-fg2); }
.bsy-empty__acts { display: flex; flex-wrap: wrap; gap: var(--bsy-space-2); margin-block-start: 6px; width: 100%; }
.bsy-empty__acts > .bsy-btn { flex: 1 1 100%; }
.bsy-empty--center .bsy-empty__acts { justify-content: center; }
.bsy-empty__sug { margin-block-start: var(--bsy-space-2); }
@media (min-width: 641px) {
	.bsy-empty__acts { width: auto; }
	.bsy-empty__acts > .bsy-btn { flex: 0 0 auto; }
}

/* Loading placeholder: static blocks shaped like the card (no shimmer loop).
   The list gets aria-busy="true" while it loads. */
.bsy-skel { display: block; background: var(--bsy-grey-100); border-radius: var(--bsy-radius-badge); }

/* Notice (stale cached data, info). */
.bsy-notice {
	display: flex; align-items: flex-start; gap: var(--bsy-space-2);
	margin: 0;
	padding: var(--bsy-space-3) var(--bsy-space-4);
	border-radius: var(--bsy-radius-field);
	background: var(--bsy-grey-50);
	color: var(--bsy-ink);
	font-family: var(--bsy-font); font-size: var(--bsy-text-sm); line-height: var(--bsy-leading-small);
}
.bsy-notice svg { flex: none; width: var(--bsy-size-icon); height: var(--bsy-size-icon); color: var(--bsy-fg2); }
.bsy-notice--warn { background: var(--bsy-warn-bg); }
.bsy-notice[hidden] { display: none; }

/* ── 16. Legacy label pill — printed by markup not yet migrated (driverclub
   service links). New markup
   uses .bsy-chip (pressable) or .bsy-tag (label). Delete when unused. */
.bsy-pill {
	display: inline-flex; align-items: center; gap: var(--bsy-space-2);
	align-self: flex-start;
	width: auto;
	padding: 6px var(--bsy-space-3);
	border-radius: var(--bsy-radius-pill);
	background: var(--bsy-brand-lighter); color: var(--bsy-brand);
	font-size: var(--bsy-text-xs); font-weight: var(--bsy-fw-bold);
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}
.bsy-pill__dot { flex: none; width: 6px; height: 6px; border-radius: var(--bsy-radius-pill); background: var(--bsy-brand); }
.bsy-pill--dark { background: color-mix(in srgb, var(--bsy-white) 16%, transparent); color: var(--bsy-white); }
.bsy-pill--dark .bsy-pill__dot { background: var(--bsy-white); }

/* ── 17. Site chrome — header (bar, dropdowns, mega panel, phone sheet) and footer
   (app band, columns, contact, bar). Phone = base, desktop nav from 961px.
   Logo height: --bch-logo-h / --bch-logo-h-sm from Settings → Baly Chrome. */
#main:focus { outline: none; }

/* ── Header bar */
.bsy-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--bsy-white);
	border-block-end: 1px solid var(--bsy-line);
	font-family: var(--bsy-font);
	color: var(--bsy-ink);
}
.bsy-header__inner {
	position: relative;
	display: flex; align-items: center; gap: var(--bsy-space-2);
	box-sizing: border-box;
	/* Same box as .baly-shell: logo and CTA line up with the page content. */
	max-width: calc(var(--bsy-container) + 2 * var(--bsy-gutter)); height: var(--bsy-size-header-sm);
	margin-inline: auto;
	padding-inline: var(--bsy-gutter);
}
.bsy-header__brand { display: inline-flex; flex: none; border-radius: var(--bsy-radius-xs); }
.bsy-header__brand img { display: block; width: auto; height: var(--bch-logo-h-sm, 28px); }

.bsy-header__cta {
	position: relative;
	display: inline-flex; align-items: center; gap: 6px; flex: none;
	margin-inline-start: auto;
	box-sizing: border-box;
	height: var(--bsy-size-btn-sm); padding: 0 var(--bsy-space-4);
	border-radius: var(--bsy-radius-pill);
	background: var(--bsy-brand); color: var(--bsy-white);
	font-size: var(--bsy-text-sm); font-weight: var(--bsy-fw-bold); line-height: 1;
	text-decoration: none; white-space: nowrap;
}
.bsy-header__cta svg { width: 16px; height: 16px; flex: none; }
.bsy-header__cta::after { content: ""; position: absolute; inset: -2px 0; }
@media (hover: hover) { .bsy-header__cta:hover { background: var(--bsy-brand-hover); color: var(--bsy-white); } }
.bsy-header__cta:active { background: var(--bsy-brand-pressed); transform: scale(.98); }

.bsy-header__burger {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: var(--bsy-size-tap); height: var(--bsy-size-tap);
	margin: 0; padding: 0; border: 0;
	border-radius: var(--bsy-radius-pill);
	background: transparent; color: var(--bsy-ink);
	cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bsy-header__burger:active { background: var(--bsy-grey-100); }
.bsy-header__burger-i { display: block; overflow: visible; }
.bsy-header__burger-i path { transform-origin: 12px 12px; transform-box: view-box; }
/* Open: the three bars become an ×. */
.bsy-header__burger[aria-expanded="true"] .bsy-header__burger-i path:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bsy-header__burger[aria-expanded="true"] .bsy-header__burger-i path:nth-child(2) { opacity: 0; }
.bsy-header__burger[aria-expanded="true"] .bsy-header__burger-i path:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Nav: the phone sheet (base) */
.bsy-header__nav { display: none; }
.bsy-header.is-menu-open .bsy-header__nav {
	position: fixed; z-index: 49;
	inset-inline: 0; inset-block-end: 0;
	inset-block-start: var(--bsy-sheet-top, var(--bsy-size-header-sm));
	display: flex; flex-direction: column;
	background: var(--bsy-white);
	overflow-y: auto; overscroll-behavior: contain;
}
html.bsy-menu-lock { overflow: hidden; }
/* Tablets: a 420px sheet on the start edge over a scrim, not an 820px white page. */
@media (min-width: 641px) and (max-width: 1100px) {
	.bsy-header.is-menu-open .bsy-header__nav {
		inset-inline-end: auto; width: 420px;
		border-inline-end: 1px solid var(--bsy-line);
		box-shadow: var(--bsy-shadow-2);
	}
	.bsy-header.is-menu-open::after {
		content: ""; position: fixed; z-index: 48;
		inset: var(--bsy-sheet-top, var(--bsy-size-header-sm)) 0 0 0;
		background: var(--bsy-scrim);
	}
}
/* The burger's icon sits on the gutter line (its 44px hit area overhangs). */
.bsy-header__burger { margin-inline-end: -10px; } /* html only: hiding body overflow breaks the sticky header */
/* Rows' highlight starts at the page gutter (lines up with the logo). */
.bsy-nav { display: flex; flex-direction: column; margin: 0; padding: var(--bsy-space-2) var(--bsy-gutter) 0; list-style: none; }
.bsy-nav__item { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.bsy-nav__link,
.bsy-nav__toggle {
	display: flex; align-items: center; justify-content: space-between; gap: var(--bsy-space-2);
	flex: 1 1 100%;
	box-sizing: border-box;
	min-height: 52px; margin: 0; padding: 0 var(--bsy-space-3);
	border: 0; border-radius: var(--bsy-radius-md);
	background: transparent; color: var(--bsy-ink);
	font-family: var(--bsy-font); font-size: var(--bsy-text-base); font-weight: var(--bsy-fw-medium); line-height: 1.4;
	text-align: start; text-decoration: none;
	cursor: pointer;
}
.bsy-nav__link[aria-current="page"] { background: var(--bsy-brand-lighter); color: var(--bsy-brand); font-weight: var(--bsy-fw-semibold); }
.bsy-nav__item.has-pop > .bsy-nav__link { display: none; }
.bsy-nav__toggle[aria-expanded="true"] { font-weight: var(--bsy-fw-semibold); }
.bsy-nav__chev { flex: none; width: 18px; height: 18px; color: var(--bsy-muted); }
.bsy-nav__toggle[aria-expanded="true"] .bsy-nav__chev { transform: rotate(180deg); }

.bsy-nav__pop { display: none; flex: 1 1 100%; }
.bsy-nav__item.is-open > .bsy-nav__pop { display: block; }
.bsy-nav__subs, .bsy-nav__rail, .bsy-nav__grid {
	margin: 0; padding: 0; list-style: none;
}
.bsy-nav__subs, .bsy-nav__rail {
	margin: 0 var(--bsy-space-3) var(--bsy-space-2);
	padding: 4px 0;
	padding-inline-start: var(--bsy-space-3);
	border-inline-start: 2px solid var(--bsy-line);
}
.bsy-nav__sub, .bsy-nav__cat, .bsy-nav__leaf, .bsy-nav__panel-t {
	display: flex; align-items: center; gap: var(--bsy-space-3);
	box-sizing: border-box; width: 100%;
	min-height: var(--bsy-size-tap); margin: 0; padding: 0 var(--bsy-space-2);
	border: 0; border-radius: 10px;
	background: transparent; color: var(--bsy-fg2);
	font-family: var(--bsy-font); font-size: var(--bsy-text-base); font-weight: var(--bsy-fw-regular); line-height: 1.4;
	text-align: start; text-decoration: none;
	cursor: pointer;
}
.bsy-nav__sub-ic { flex: none; width: var(--bsy-size-icon); height: var(--bsy-size-icon); color: var(--bsy-fg2); }
.bsy-nav__sub-tx { display: flex; flex-direction: column; min-width: 0; }
.bsy-nav__sub-d { display: none; }
.bsy-nav__sub[aria-current="page"], .bsy-nav__leaf[aria-current="page"], .bsy-nav__cat[aria-current="page"] {
	background: var(--bsy-brand-lighter); color: var(--bsy-brand); font-weight: var(--bsy-fw-medium);
}
.bsy-nav__sub[aria-current="page"] .bsy-nav__sub-ic { color: var(--bsy-brand); }
.bsy-nav__cat { justify-content: space-between; }
.bsy-nav__cat-chev { flex: none; width: 16px; height: 16px; color: var(--bsy-muted); }
.bsy-nav__cat[aria-expanded="true"] .bsy-nav__cat-chev { transform: rotate(-90deg); }
.bsy-nav__panel { display: none; padding-inline-start: var(--bsy-space-3); }
.bsy-nav__cat-group.is-open > .bsy-nav__panel { display: block; }
.bsy-nav__panel-t { font-weight: var(--bsy-fw-medium); color: var(--bsy-ink); }
.bsy-nav__panel-t svg { width: 16px; height: 16px; }

.bsy-header__sheet-foot {
	display: flex; flex-direction: column; gap: var(--bsy-space-3);
	margin-block-start: auto;
	padding: var(--bsy-space-4);
	border-block-start: 1px solid var(--bsy-line);
}
.bsy-header__sheet-badges { justify-content: center; }

@media (prefers-reduced-motion: no-preference) {
	.bsy-header.is-menu-open .bsy-header__nav { animation: bsy-fade var(--bsy-duration-fast) var(--bsy-ease-out); }
	.bsy-nav__chev, .bsy-nav__cat-chev, .bsy-header__burger-i path { transition: transform var(--bsy-duration-fast) var(--bsy-ease-out), opacity var(--bsy-duration-fast) var(--bsy-ease-out); }
}
@keyframes bsy-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Desktop bar + dropdowns + mega panel. From 1101px: below that a 9-item
   menu did not fit beside the logo and CTA (it slid under the CTA at 961–1060),
   so tablets and small laptops get the burger + sheet. */
@media (min-width: 1101px) {
	.bsy-header__inner { gap: var(--bsy-space-6); height: var(--bsy-size-header); }
	.bsy-header__brand img { height: var(--bch-logo-h, 32px); }
	.bsy-header__burger, .bsy-header__sheet-foot { display: none; }
	.bsy-header__cta { padding: 0 18px; }
	.bsy-header__cta svg { width: 18px; height: 18px; }
	.bsy-header__cta::after { content: none; }

	.bsy-header__nav,
	.bsy-header.is-menu-open .bsy-header__nav {
		position: static; display: block; flex: 1 1 auto; min-width: 0;
		background: none; overflow: visible; animation: none;
	}
	.bsy-nav { flex-direction: row; align-items: center; gap: 4px; padding: 0; }
	.bsy-nav__item { flex-wrap: nowrap; border-radius: var(--bsy-radius-pill); }
	.bsy-nav__item.has-mega { position: static; }

	.bsy-nav__link,
	.bsy-nav__item.has-pop > .bsy-nav__link {
		display: inline-flex; flex: none;
		min-height: 0; height: var(--bsy-size-btn-sm); padding: 0 14px;
		border-radius: var(--bsy-radius-pill);
		color: var(--bsy-fg2);
		font-size: var(--bsy-text-sm); font-weight: var(--bsy-fw-medium);
		white-space: nowrap;
	}
	@media (hover: hover) {
		.bsy-nav__item:not(.has-pop) > .bsy-nav__link:hover,
		.bsy-nav__item.has-pop:hover { background: var(--bsy-grey-100); }
		.bsy-nav__item:not(.has-pop) > .bsy-nav__link:hover,
		.bsy-nav__item.has-pop:hover > .bsy-nav__link,
		.bsy-nav__item.has-pop:hover > .bsy-nav__toggle { color: var(--bsy-ink); }
	}
	.bsy-nav__item.is-open { background: var(--bsy-grey-100); }
	.bsy-nav__item.is-open > .bsy-nav__link, .bsy-nav__item.is-open > .bsy-nav__toggle { color: var(--bsy-ink); }
	/* Current page (or its group): brand text on the pale brand pill. */
	.bsy-nav__link[aria-current="page"],
	.bsy-nav__item.is-active > .bsy-nav__link,
	.bsy-nav__item.is-active.has-pop,
	.bsy-nav__item.is-active.has-pop:hover { background: var(--bsy-brand-lighter); color: var(--bsy-brand); font-weight: var(--bsy-fw-medium); }
	.bsy-nav__item.is-active > .bsy-nav__toggle,
	.bsy-nav__item.is-active.has-pop > .bsy-nav__link { color: var(--bsy-brand); background: none; }

	/* A link + its disclosure button read as one pill. */
	.bsy-nav__item.has-pop > .bsy-nav__link { padding-inline-end: 2px; background: none; }
	.bsy-nav__toggle {
		flex: none; justify-content: center; gap: 6px;
		min-height: 0; height: var(--bsy-size-btn-sm); width: 30px;
		padding: 0; padding-inline-end: 6px;
		border-radius: var(--bsy-radius-pill);
		color: var(--bsy-fg2);
		font-size: var(--bsy-text-sm); font-weight: var(--bsy-fw-medium);
	}
	.bsy-nav__toggle[aria-expanded="true"] { font-weight: var(--bsy-fw-medium); }
	/* Beside its link the button shows only the chevron; its text (the group
	   label) stays its accessible name. */
	.bsy-nav__toggle { font-size: 0; }
	.bsy-nav__toggle:focus-visible { outline-offset: -2px; }
	.bsy-nav__toggle--solo { width: auto; padding: 0 14px; font-size: var(--bsy-text-sm); }
	.bsy-nav__chev { width: 16px; height: 16px; color: inherit; }

	/* Panels: hidden until opened (click / keyboard via the script, or a
	   150ms hover intent in CSS; keyboard without the script via focus-within). */
	.bsy-nav__pop,
	.bsy-nav__item.is-open > .bsy-nav__pop {
		display: block;
		position: absolute; z-index: 60;
		inset-block-start: calc(100% + 8px); inset-inline-start: 0;
		box-sizing: border-box; width: 340px;
		padding: var(--bsy-space-2);
		background: var(--bsy-white);
		border: 1px solid var(--bsy-line); border-radius: var(--bsy-radius-lg);
		box-shadow: var(--bsy-shadow-2);
		visibility: hidden; opacity: 0;
	}
	.bsy-nav__pop::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -10px; height: 10px; }
	.bsy-nav__item.is-open > .bsy-nav__pop,
	.bsy-header:not(.is-js) .bsy-nav__item.has-pop:focus-within > .bsy-nav__pop { visibility: visible; opacity: 1; }
	@media (hover: hover) {
		.bsy-nav__item.has-pop:not(.is-closed):hover > .bsy-nav__pop { visibility: visible; opacity: 1; transition-delay: 150ms; }
	}
	@media (prefers-reduced-motion: no-preference) {
		.bsy-nav__pop {
			transform: translateY(var(--bsy-motion-rise));
			transition: opacity var(--bsy-duration-fast) var(--bsy-ease-out), transform var(--bsy-duration-fast) var(--bsy-ease-out), visibility 0s linear var(--bsy-duration-fast);
		}
		.bsy-nav__item.is-open > .bsy-nav__pop,
		.bsy-header:not(.is-js) .bsy-nav__item.has-pop:focus-within > .bsy-nav__pop { transform: none; transition-delay: 0s; }
	}
	@media (prefers-reduced-motion: no-preference) and (hover: hover) {
		.bsy-nav__item.has-pop:not(.is-closed):hover > .bsy-nav__pop { transform: none; transition-delay: 150ms; }
	}

	.bsy-nav__subs { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; }
	.bsy-nav__subi--parent { display: none; }
	.bsy-nav__sub { align-items: flex-start; min-height: 0; padding: var(--bsy-space-3); border-radius: var(--bsy-radius-md); color: var(--bsy-ink); }
	.bsy-nav__sub-ic { margin-block-start: 2px; }
	.bsy-nav__sub-tx { font-weight: var(--bsy-fw-semibold); }
	.bsy-nav__sub-d { display: block; font-size: var(--bsy-text-sm); font-weight: var(--bsy-fw-regular); line-height: 1.5; color: var(--bsy-muted); }
	@media (hover: hover) { .bsy-nav__sub:hover, .bsy-nav__leaf:hover { background: var(--bsy-grey-50); } }

	/* Mega: 900px, group rail (300px) + the group's page grid. */
	.bsy-nav__pop--mega,
	.bsy-nav__item.is-open > .bsy-nav__pop--mega {
		inset-inline: 0; margin-inline: auto;
		width: min(900px, 100% - 64px); min-height: 360px;
		padding: 0; overflow: hidden;
	}
	.bsy-nav__rail {
		box-sizing: border-box; width: 300px; min-height: 360px; height: 100%;
		margin: 0; padding: var(--bsy-space-2);
		border: 0; border-inline-end: 1px solid var(--bsy-line);
		display: flex; flex-direction: column; gap: 2px;
	}
	.bsy-nav__cat { min-height: 56px; padding: 0 var(--bsy-space-3); border-radius: var(--bsy-radius-md); color: var(--bsy-ink); font-weight: var(--bsy-fw-medium); }
	.bsy-nav__cat[aria-expanded="true"] { background: var(--bsy-grey-100); font-weight: var(--bsy-fw-semibold); }
	.bsy-nav__cat[aria-expanded="true"] .bsy-nav__cat-chev { transform: none; }
	@media (hover: hover) { .bsy-nav__cat:hover { background: var(--bsy-grey-50); } }
	.bsy-nav__panel,
	.bsy-nav__cat-group.is-open > .bsy-nav__panel {
		display: none;
		position: absolute; inset-block: 0; inset-inline-start: 300px; inset-inline-end: 0;
		padding: var(--bsy-space-6) 28px;
		overflow-y: auto;
	}
	.bsy-nav__cat-group.is-active > .bsy-nav__panel { display: block; }
	.bsy-nav__panel-t {
		display: inline-flex; width: auto; min-height: 0; gap: var(--bsy-space-1);
		margin-block-end: var(--bsy-space-5); padding: 0;
		font-size: var(--bsy-text-md); font-weight: var(--bsy-fw-bold); color: var(--bsy-ink);
	}
	.bsy-nav__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bsy-space-2); }
	.bsy-nav__leaf { min-height: 48px; padding: var(--bsy-space-2) var(--bsy-space-3); border-radius: var(--bsy-radius-md); color: var(--bsy-ink); font-weight: var(--bsy-fw-medium); }
}

/* ── Footer */
.bsy-footer {
	background: var(--bsy-grey-900);
	color: var(--bsy-white);
	font-family: var(--bsy-font);
	padding: var(--bsy-space-8) 0 var(--bsy-space-6);
}
.bsy-footer__inner {
	display: flex; flex-direction: column; gap: var(--bsy-space-10);
	box-sizing: border-box; max-width: calc(var(--bsy-container) + 2 * var(--bsy-gutter)); /* = .baly-shell */
	margin-inline: auto; padding-inline: var(--bsy-gutter);
}
.bsy-footer a { color: inherit; }

.bsy-footer__band {
	display: flex; flex-direction: column; gap: var(--bsy-space-5);
	padding: var(--bsy-space-6) var(--bsy-space-5);
	border-radius: var(--bsy-radius-panel);
	background: var(--bsy-brand); color: var(--bsy-white);
}
.bsy-footer__band-copy { flex: 1 1 auto; min-width: 0; }
.bsy-footer__band-t { margin: 0; font-size: var(--bsy-text-lg); font-weight: var(--bsy-fw-bold); line-height: 1.45; color: var(--bsy-white); }
.bsy-footer__band-p { margin: 6px 0 0; font-size: var(--bsy-text-sm); line-height: var(--bsy-leading-small); color: var(--bsy-white); }
.bsy-footer__band-dl { display: flex; align-items: center; gap: var(--bsy-space-4); flex: none; }
.bsy-footer__band .bsy-badges--stack { flex-direction: row; }

.bsy-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bsy-space-6); }
.bsy-footer__brand, .bsy-footer__col--contact { grid-column: 1 / -1; }
.bsy-footer__brand img { display: block; width: auto; height: var(--bch-logo-h-sm, 32px); }
.bsy-footer__lede { margin: var(--bsy-space-4) 0 0; font-size: var(--bsy-text-base); line-height: var(--bsy-leading-body); color: color-mix(in srgb, var(--bsy-white) 72%, transparent); }
/* 700, not the board's 600: the footer is on every page, and 600 there made every
   page download a fifth font file (Lighthouse, 2026-11-07). */
.bsy-footer__col-h { margin: 0 0 var(--bsy-space-2); font-size: var(--bsy-text-base); font-weight: var(--bsy-fw-bold); line-height: 1.4; color: var(--bsy-white); }
.bsy-footer__links { margin: 0; padding: 0; list-style: none; }
/* Link groups are <details> (closed on phones by bch-chrome.js); from 641px the
   summary is just the column heading. */
.bsy-footer__sum { display: block; list-style: none; pointer-events: none; }
.bsy-footer__sum::-webkit-details-marker { display: none; }
.bsy-footer__chev { display: none; }
.bsy-footer__links a {
	display: flex; align-items: center; min-height: var(--bsy-size-tap);
	font-size: var(--bsy-text-base); line-height: 1.5;
	color: color-mix(in srgb, var(--bsy-white) 72%, transparent);
	text-decoration: none;
}
@media (hover: hover) { .bsy-footer__links a:hover, .bsy-footer__ci a:hover { color: var(--bsy-white); } }

.bsy-footer__contact { display: flex; flex-direction: column; margin: 0; font-style: normal; }
.bsy-footer__ci {
	display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--bsy-space-3); align-items: center;
	margin: 0; padding: 6px 0;
	font-size: var(--bsy-text-base); line-height: var(--bsy-leading-relaxed);
	color: color-mix(in srgb, var(--bsy-white) 72%, transparent);
}
.bsy-footer__ci svg { width: var(--bsy-size-icon); height: var(--bsy-size-icon); color: color-mix(in srgb, var(--bsy-white) 60%, transparent); }
.bsy-footer__ci a { display: inline-flex; align-items: center; min-height: var(--bsy-size-tap); text-decoration: none; color: inherit; justify-self: start; }
.bsy-footer__ci small { display: block; font-size: var(--bsy-text-sm); color: color-mix(in srgb, var(--bsy-white) 60%, transparent); }
.bsy-footer__tel { color: var(--bsy-white); font-weight: var(--bsy-fw-medium); font-variant-numeric: tabular-nums; }
/* Phones: dial and mail first. */
.bsy-footer__ci--addr { order: 3; }
.bsy-footer__ci--legal { order: 4; }

.bsy-footer__bar {
	display: flex; flex-direction: column-reverse; gap: var(--bsy-space-4);
	padding-block-start: var(--bsy-space-5);
	border-block-start: 1px solid color-mix(in srgb, var(--bsy-white) 12%, transparent);
}
.bsy-footer__copy { margin: 0; font-size: var(--bsy-text-sm); line-height: 1.5; color: color-mix(in srgb, var(--bsy-white) 60%, transparent); }
.bsy-footer__social { display: flex; flex-wrap: wrap; gap: var(--bsy-space-2); margin: 0; padding: 0; list-style: none; }
.bsy-footer__social a {
	display: flex; align-items: center; justify-content: center;
	width: var(--bsy-size-tap); height: var(--bsy-size-tap);
	border: 1px solid color-mix(in srgb, var(--bsy-white) 16%, transparent);
	border-radius: var(--bsy-radius-pill);
	color: color-mix(in srgb, var(--bsy-white) 80%, transparent);
}
.bsy-footer__social svg { width: var(--bsy-size-icon); height: var(--bsy-size-icon); }
@media (hover: hover) { .bsy-footer__social a:hover { color: var(--bsy-white); border-color: color-mix(in srgb, var(--bsy-white) 40%, transparent); } }

/* Phones: a compact footer (fix round 2 — it was ~1,100px tall). Same
   content and 44px link rows, tighter gaps; phone + email side by side. */
@media (max-width: 640px) {
	.bsy-footer { padding-block: var(--bsy-space-6) var(--bsy-space-5); }
	.bsy-footer__inner { gap: var(--bsy-space-6); }
	.bsy-footer__band { gap: var(--bsy-space-4); padding: var(--bsy-space-5) var(--bsy-space-4); }
	.bsy-footer__cols { gap: var(--bsy-space-5) var(--bsy-space-4); }
	.bsy-footer__brand { display: flex; align-items: center; gap: var(--bsy-space-3); }
	.bsy-footer__brand img { height: 28px; flex: none; }
	.bsy-footer__lede { margin: 0; font-size: var(--bsy-text-sm); line-height: var(--bsy-leading-small); }
	.bsy-footer__col-h { margin-block-end: 0; }
	/* Link groups collapse to 44px disclosure rows (fix round 2: ≤700px footer). */
	.bsy-footer__col:not(.bsy-footer__col--contact) { grid-column: 1 / -1; }
	.bsy-footer__col + .bsy-footer__col:not(.bsy-footer__col--contact) { margin-block-start: calc(var(--bsy-space-5) * -1); }
	.bsy-footer__grp { border-block-end: 1px solid color-mix(in srgb, var(--bsy-white) 12%, transparent); }
	.bsy-footer__sum { display: flex; align-items: center; justify-content: space-between; gap: var(--bsy-space-3); min-height: var(--bsy-size-tap); cursor: pointer; pointer-events: auto; }
	.bsy-footer__chev { display: block; flex: none; color: color-mix(in srgb, var(--bsy-white) 60%, transparent); transition: transform var(--bsy-duration-base) var(--bsy-ease-out); }
	.bsy-footer__grp[open] .bsy-footer__chev { transform: rotate(180deg); }
	.bsy-footer__grp[open] .bsy-footer__links { padding-block-end: var(--bsy-space-2); }
	.bsy-footer__col--contact { margin-block-start: var(--bsy-space-1); }
	.bsy-footer__contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--bsy-space-4); }
	.bsy-footer__ci { padding: 0; }
	.bsy-footer__ci--addr, .bsy-footer__ci--legal { grid-column: 1 / -1; font-size: var(--bsy-text-sm); line-height: var(--bsy-leading-small); padding-block: 4px; }
	.bsy-footer__ci--tel, .bsy-footer__ci--mail { grid-template-columns: 20px minmax(0, 1fr); }
	.bsy-footer__ci--mail a { overflow-wrap: anywhere; }
	.bsy-footer__bar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bsy-space-3); padding-block-start: var(--bsy-space-4); }
	.bsy-footer__social { gap: 4px; }
	.bsy-footer__copy { font-size: var(--bsy-text-xs); }
}
@media (min-width: 641px) {
	.bsy-footer__band-t { font-size: var(--bsy-text-xl); line-height: var(--bsy-leading-heading); }
	.bsy-footer__band-p { font-size: var(--bsy-text-base); }
}
/* Tablets: the three groups side by side under the brand (was 1,145px tall). */
@media (min-width: 641px) and (max-width: 960px) {
	.bsy-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bsy-space-8) var(--bsy-space-6); }
	.bsy-footer__col--contact { grid-column: auto; }
	.bsy-footer__ci--addr, .bsy-footer__ci--legal { align-items: start; }
	:is(.bsy-footer__ci--addr, .bsy-footer__ci--legal) svg { margin-block-start: 3px; }
	.bsy-footer__ci--mail a { overflow-wrap: anywhere; }
	.bsy-footer__bar { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 961px) {
	.bsy-footer { padding: var(--bsy-space-16) 0 var(--bsy-space-10); }
	.bsy-footer__inner { gap: 56px; }
	.bsy-footer__band { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--bsy-space-8); padding: var(--bsy-space-8) var(--bsy-space-10); }
	.bsy-footer__band .bsy-badges--stack { flex-direction: column; }
	.bsy-footer__cols { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--bsy-space-12); }
	.bsy-footer__brand, .bsy-footer__col--contact { grid-column: auto; }
	.bsy-footer__brand img { height: var(--bch-logo-h, 36px); }
	.bsy-footer__col-h { margin-block-end: var(--bsy-space-4); }
	.bsy-footer__links a { min-height: 0; padding: var(--bsy-space-2) 0; }
	.bsy-footer__ci { align-items: start; }
	.bsy-footer__ci svg { margin-block-start: 3px; }
	.bsy-footer__ci a { min-height: 0; }
	.bsy-footer__ci--addr, .bsy-footer__ci--legal { order: 0; }
	.bsy-footer__bar { flex-direction: row; align-items: center; justify-content: space-between; padding-block-start: var(--bsy-space-6); }
}

/* ── 18. Plain page content in the shell — text the_content prints straight into
   <main> outside any plugin scope (e.g. SEO prose after [vendor_list]). Zero
   specificity on direct children only, so plugin roots are untouched. */
.baly-shell { font-family: var(--bsy-font); color: var(--bsy-ink); }
:where(.baly-shell) > :where(p, ul, ol, blockquote, table, h2, h3, h4, h5, h6) { max-width: 720px; }
:where(.baly-shell) > :where(p, ul, ol, blockquote) {
	margin: 0 0 var(--bsy-space-4);
	font-size: var(--bsy-text-base); line-height: var(--bsy-leading-body);
	color: var(--bsy-fg2);
}
:where(.baly-shell) > :where(ul, ol) { padding-inline-start: var(--bsy-space-6); }
:where(.baly-shell) > :where(h2) {
	margin: var(--bsy-space-10) 0 var(--bsy-space-3);
	font-size: var(--bsy-text-section-sm); font-weight: var(--bsy-fw-bold);
	line-height: var(--bsy-leading-heading); color: var(--bsy-ink);
}
:where(.baly-shell) > :where(h3, h4, h5, h6) {
	margin: var(--bsy-space-8) 0 var(--bsy-space-2);
	font-size: var(--bsy-text-md); font-weight: var(--bsy-fw-bold);
	line-height: var(--bsy-leading-heading); color: var(--bsy-ink);
}
:where(.baly-shell) > :where(p, ul, ol) :where(a) { color: var(--bsy-brand); text-underline-offset: 3px; }
:where(.baly-shell) > :where(p, ul, ol) :where(strong, b) { font-weight: var(--bsy-fw-bold); color: var(--bsy-ink); }
@media (min-width: 641px) {
	:where(.baly-shell) > :where(h2) { font-size: var(--bsy-text-section); }
}

/* ── 19. Headings never end on one lonely word (fix round 2, RC11). */
:where(.bsy-ptitle__h, .bsy-shead__title, .bsy-faq__title, .bsy-footer__band-t, .bsy-card__title, .baly-shell h1, .baly-shell h2) { text-wrap: balance; }