/*!
 * 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 */
/* No underlined links anywhere, in any state (owner, 2026-11-08): links are
   told apart by the brand colour and weight. Zero specificity, so a
   component can still style its own anchors. */
:where(a), :where(a):hover, :where(a):focus, :where(a):active { text-decoration: none; }
: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: 1280px) {
	: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); }
	:where(.bsy-on-brand, .bsy-panel) .bsy-link:hover { color: color-mix(in srgb, var(--bsy-white) 80%, transparent); }
}
.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: 1279px) {
	.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 1280px: below that the 10-item
   baly.iq menu does not fit beside the logo and CTA (it slid under the CTA up
   to 1279px; 9 items needed 1101), so tablets, iPads in landscape and small
   laptops get the burger + sheet. */
@media (min-width: 1280px) {
	.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;
	}
	/* Hover bridge: covers the whole gap between the pill and its panel, so
	   the pointer never crosses dead space on its way down (a mega panel
	   hangs under the header bar, 28px below the pill — the old 10px bridge
	   let it close mid-move, owner 2026-11-08). */
	.bsy-nav__pop::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -12px; height: 12px; }
	/* The mega panel is centred under the header, so its pill can sit outside
	   the panel's width: the bridge spans the whole header column (container
	   minus the 900px panel, split per side) and exactly the 28px gap. */
	.bsy-nav__pop--mega::before { inset-block-start: -28px; height: 28px; inset-inline: calc((900px - var(--bsy-container)) / 2); }
	.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; transition-delay: 0s; }
	@media (hover: hover) {
		/* 150ms intent to open; a 250ms grace before a hover-opened panel
		   closes, so a pointer that slips off the edge does not lose it. */
		.bsy-nav__pop { transition: opacity 0s linear 250ms, visibility 0s linear 250ms; }
		.bsy-nav__item.has-pop:not(.is-closed):hover > .bsy-nav__pop { visibility: visible; opacity: 1; transition-delay: 150ms; z-index: 61; }
		.bsy-nav__item.is-closed > .bsy-nav__pop { transition-delay: 0s; }
	}
	@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__pop { transition-delay: 250ms, 250ms, calc(250ms + var(--bsy-duration-fast)); }
		.bsy-nav__item.is-open > .bsy-nav__pop,
		.bsy-nav__item.is-closed > .bsy-nav__pop { 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: visible; /* not hidden: that clipped the hover bridge above the panel */
	}
	.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; scrollbar-width: none;
	}
	.bsy-nav__panel::-webkit-scrollbar { display: none; }
	.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); font-weight: var(--bsy-fw-semibold); }
: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; }