/*
 * Structural and brand CSS for the Bloubergstrand portal.
 *
 * Brand look and feel poured in from the Claude Design handoff (docs/handoff),
 * authored against this theme's own bs-* class hooks (the ones the server blocks,
 * templates, parts and patterns emit). No handoff class names, no adapter aliases.
 * Every colour, size and spacing references a token from tokens.css.
 * Load order: tokens.css then theme.css then child style.css.
 */

/* ----------------------------------------------------------------- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
figure { margin: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-family-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: balance;
}
h1 { font-size: var(--font-size-h1); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: var(--focus-offset); }

:focus-visible {
  outline: var(--stroke-accent) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-xs);
}

.bs-icon { width: var(--icon); height: var(--icon); flex: none; fill: none; stroke: currentColor; stroke-width: var(--stroke-2); stroke-linecap: round; stroke-linejoin: round; }
.bs-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.bs-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }

/* --------------------------------------------------------------- Layout --- */
.bs-main { display: block; }

.bs-section { margin-block: var(--space-8); }
.bs-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap;
}
.bs-section__title { font-size: var(--font-size-h2); margin: 0; }
.bs-section__link { font-family: var(--font-family-body); font-size: var(--font-size-sm); font-weight: var(--weight-semibold); }

/* Content plus right rail shell (article, single business, archives) */
.bs-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--layout-sidebar);
  gap: var(--layout-article-gap);
  align-items: start;
}
.bs-article__main { min-width: 0; }
.bs-article__sidebar {
  position: sticky; top: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-6);
}

/* ------------------------------------------------------------ Site header -- */
/* Sticky must sit on the template-part wrapper, not the header itself: the wrapper
   is a direct child of the full-height page, whereas the header's own parent box is
   only header-tall, so sticky on the header alone has no room and scrolls away.
   :has() scopes this to the header's wrapper (the footer wrapper is untouched). */
.wp-block-template-part:has(> .site-header) { position: sticky; top: 0; z-index: 20; }
/* When logged in, the fixed admin bar occupies the top of the viewport, so pin the
   sticky header below it. WP: 32px at >=783px, 46px at <=782px; at <=600px the admin
   bar is position:absolute (it scrolls away), so the header pins to 0 again. */
.admin-bar .wp-block-template-part:has(> .site-header) { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .wp-block-template-part:has(> .site-header) { top: 46px; }
}
@media screen and (max-width: 600px) {
  .admin-bar .wp-block-template-part:has(> .site-header) { top: 0; }
}
.site-header { background: var(--color-surface-0); border-bottom: var(--stroke-hair) solid var(--color-border-100); position: relative; z-index: 20; box-shadow: var(--shadow-1); transition: box-shadow var(--motion-base) var(--motion-ease-out); }
/* Once scrolled, lift the shadow a touch and shave a few pixels off the height so
   the navbar is only at full height at the very top of the page. */
.site-header.is-scrolled { box-shadow: var(--shadow-2); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-h); width: 100%; max-width: var(--layout-max); margin-inline: auto; padding-inline: var(--space-5); transition: min-height var(--motion-base) var(--motion-ease-out); }
.site-header.is-scrolled .site-header__inner { min-height: calc(var(--header-h) - 4px); }
.site-header__brand { font-family: var(--font-family-display); font-weight: var(--weight-bold); font-size: var(--font-size-lg); color: var(--color-primary); text-decoration: none; }
.site-header__brand:hover { color: var(--color-primary); text-decoration: none; }
.site-header__logo img, .site-header__brand img { height: var(--space-6); width: auto; }
.site-header__nav a { font-family: var(--font-family-body); font-size: var(--font-size-sm); font-weight: var(--weight-semibold); color: var(--color-text-2); }
.site-header__nav a:hover { color: var(--color-primary); text-decoration: none; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); }
/* Right-aligned cluster: desktop actions, the search trigger, the account toggle,
   and the mobile menu hamburger. One auto margin pushes the whole group right. */
.site-header__end { display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; }

/* Mobile menu: Login when logged out; My Account + Log out when logged in. */
.site-header__mobile-nav .is-logged-in-only { display: none; }
body.logged-in .site-header__mobile-nav .is-logged-out-only { display: none; }
body.logged-in .site-header__mobile-nav .is-logged-in-only { display: block; }

/* Mobile popup overlay: centre the links on both axes and space them out.
   The open overlay is a fixed full-screen flex column (core); centring it and the
   dialog/content chain places the link list in the middle of the screen. */
.site-header__mobile-nav .wp-block-navigation__responsive-container.is-menu-open {
  justify-content: center; align-items: center;
}
.site-header__mobile-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.site-header__mobile-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.site-header__mobile-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; flex: 1 1 auto;
}
.site-header__mobile-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-6); text-align: center;
}
.site-header__mobile-nav .wp-block-navigation__container .wp-block-navigation-item__content {
  font-size: var(--font-size-h4); font-weight: var(--weight-semibold); color: var(--color-text);
}

/* Desktop: actions + search only. No primary menu, no hamburger.
   The compound selector outranks core's .wp-block-navigation display rule. */
@media (min-width: 782px) {
  .site-header .site-header__mobile-nav { display: none; }
}
/* Mobile: logo, Browse Directory, then search + hamburger pushed right. */
@media (max-width: 781px) {
  .site-header__inner { gap: var(--space-3); padding-inline: var(--space-4); }
  .site-header__actions { display: none; }
}

/* ------------------------------------------------------------ Site footer -- */
.site-footer { background: var(--color-navy-700); color: var(--color-surface-100); margin-top: var(--space-9); }
.site-footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); max-width: var(--layout-max); margin-inline: auto; padding: var(--space-8) var(--space-5); }
.site-footer h2, .site-footer h3, .site-footer h4 { color: var(--color-surface-0); font-size: var(--font-size-base); margin-bottom: var(--space-3); }
.site-footer a { color: var(--color-surface-100); font-size: var(--font-size-sm); }
.site-footer a:hover { color: var(--color-surface-0); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__copy { color: var(--color-border-cool); font-size: var(--font-size-sm); margin: 0; max-width: 40ch; }
.site-footer__brand img { filter: brightness(0) invert(1); height: var(--space-6); width: auto; }

/* ----------------------------------------------------------------- Hero --- */
/* A full-bleed band of fixed height with the site search centred on both axes.
   It breaks out of the constrained main with the 100vw idiom. overflow:visible
   is deliberate: it lets the live-suggest dropdown escape the band instead of
   being clipped (the media + scrim are absolutely inset, so they stay bounded).
   z-index:1 keeps the band (and its dropdown) painting over the next section. */
.bs-hero {
  position: relative; z-index: 1; isolation: isolate;
  width: 100vw; max-width: 100vw;
  /* !important overrides the constrained-layout auto margins that cap children
     at the content width; this is how the band reaches the viewport edges. */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  min-height: 460px; overflow: visible;
  display: flex; align-items: stretch; justify-content: center;
  background: linear-gradient(160deg, var(--color-navy-600), var(--color-navy-700));
  color: var(--color-surface-0);
}
/* When a hero is the first thing in main (home + directory), it sits flush under
   the top ad. The !important overrides the template's inline top padding on main. */
.bs-main:has(> .bs-hero:first-child) { padding-top: 0 !important; }
/* On mobile the hero is hidden, so whatever follows it becomes the first visible
   element; trim its top margin so it does not reintroduce a large gap under the ad. */
@media (max-width: 781px) {
  .bs-main > .bs-hero + * { margin-top: var(--space-4); }
}
.bs-hero__media { position: absolute; inset: 0; z-index: -2; margin: 0; overflow: hidden; }
.bs-hero__media picture { display: block; width: 100%; height: 100%; }
.bs-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.bs-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--color-scrim-0) 30%, var(--color-scrim-strong) 100%); }
/* Three-row grid so the search sits at the exact vertical centre of the band, with
   the (intentionally compact) copy resting just above it. */
.bs-hero__inner {
  display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center;
  width: 100%; max-width: 46rem; padding: var(--space-6) var(--space-5);
  text-align: center; color: var(--color-surface-0);
}
.bs-hero__copy {
  grid-row: 1; align-self: end; margin-bottom: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3); max-width: 40rem;
}
.bs-hero__title { font-size: var(--font-size-display-m); color: var(--color-surface-0); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); margin: 0; }
.bs-hero__intro { font-size: var(--font-size-base); color: var(--color-surface-100); margin: 0; line-height: var(--leading-body); }
.bs-hero .bs-search { grid-row: 2; width: 100%; max-width: 40rem; text-align: start; }

/* Mobile: drop the hero entirely. The header search icon is the entry point. */
@media (max-width: 781px) {
  .bs-hero { display: none; }
}

/* ----------------------------------------------------------------- Search -- */
.bs-search {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-surface-0); border: var(--stroke-1) solid var(--color-border-200);
  border-radius: var(--radius-pill); padding-inline: var(--space-5) var(--space-2);
  min-height: var(--search-h); box-shadow: var(--shadow-card);
}
.bs-search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 var(--space-1) var(--color-focus-glow); }
.bs-search svg { color: var(--color-text-muted); }
.bs-search input,
.bs-search .wp-block-search__input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-family-body); font-size: var(--font-size-base); color: var(--color-text); }
.bs-search input::placeholder { color: var(--color-text-faint); }

/* ---------------------------------------------------------------- Buttons -- */
.bs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-family-body); font-size: var(--font-size-base); font-weight: var(--weight-semibold);
  line-height: 1; min-height: var(--control-h); padding-inline: var(--space-5);
  border-radius: var(--radius-pill); border: var(--stroke-hair) solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--motion-fast) var(--motion-ease-out),
              transform var(--motion-fast) var(--motion-ease-out),
              border-color var(--motion-fast) var(--motion-ease-out);
}
.bs-btn:hover { text-decoration: none; }
.bs-btn:active { transform: translateY(var(--stroke-hair)); }
.bs-btn svg { width: var(--icon); height: var(--icon); }
.bs-btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.bs-btn--primary:hover { background: var(--color-navy-500); color: var(--color-on-primary); }
.bs-btn--primary:active { background: var(--color-navy-700); }
.bs-btn--secondary { background: var(--color-secondary); color: var(--color-on-secondary); }
.bs-btn--secondary:hover { background: var(--color-green-600); }
.bs-btn--secondary:active { background: var(--color-green-700); }
.bs-btn--ghost { background: var(--color-surface-0); color: var(--color-primary); border-color: var(--color-border-200); }
.bs-btn--ghost:hover { background: var(--color-surface-100); border-color: var(--color-primary); }
.bs-btn--quiet { background: transparent; color: var(--color-text-2); }
.bs-btn--quiet:hover { background: var(--color-surface-100); color: var(--color-text); }
.bs-btn--sm { min-height: var(--control-h-sm); font-size: var(--font-size-sm); padding-inline: var(--space-4); }
.bs-btn--icon { padding-inline: var(--space-3); }
.bs-btn--block { width: 100%; }
.bs-btn[aria-disabled="true"], .bs-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ------------------------------------------------------------------ Chips -- */
.bs-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 0; margin: 0; list-style: none; }
.bs-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-family-body); font-size: var(--font-size-sm); font-weight: var(--weight-semibold);
  min-height: var(--chip-h); padding-inline: var(--space-4);
  border-radius: var(--radius-pill); background: var(--color-surface-0); color: var(--color-text);
  border: var(--stroke-hair) solid var(--color-border-200); cursor: pointer; text-decoration: none;
  transition: color var(--motion-fast) var(--motion-ease-out),
              border-color var(--motion-fast) var(--motion-ease-out),
              background var(--motion-fast) var(--motion-ease-out);
}
.bs-chip:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.bs-chip[aria-pressed="true"], .bs-chip--active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.bs-chip svg { width: var(--icon-sm); height: var(--icon-sm); }
.bs-chip__count { font-weight: var(--weight-medium); opacity: 0.7; }
.bs-chip--sm { min-height: var(--chip-h-sm); font-size: var(--font-size-caption); padding-inline: var(--space-3); }
.bs-chip--business-type { border-style: solid; }

/* ----------------------------------------------------------------- Badges -- */
.bs-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-family-body); font-size: var(--font-size-caption); font-weight: var(--weight-bold);
  letter-spacing: 0.01em; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); line-height: 1.1;
}
.bs-badge svg { width: var(--icon-xs); height: var(--icon-xs); }
.bs-badge--sponsored { background: var(--color-sponsored); color: var(--color-sponsored-ink); }
.bs-badge--featured  { background: var(--color-featured); color: var(--color-on-primary); }
.bs-badge--open      { background: var(--color-green-100); color: var(--color-green-700); }
.bs-badge--closed    { background: var(--color-surface-200); color: var(--color-text-muted); }
.bs-badge--type      { background: var(--color-surface-100); color: var(--color-text-2); border: var(--stroke-hair) solid var(--color-border-100); }

/* Rating */
.bs-rating { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-family-body); font-size: var(--font-size-sm); color: var(--color-text); }
.bs-rating__stars { display: inline-flex; gap: 1px; color: var(--color-star); }
.bs-rating__stars svg { width: var(--icon-star); height: var(--icon-star); fill: var(--color-star); stroke: var(--color-star); }
.bs-rating__num { font-weight: var(--weight-bold); }
.bs-rating__count { color: var(--color-text-muted); }

/* ------------------------------------------------------------------ Cards -- */
.bs-card-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bs-card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bs-card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.bs-card-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
/* Dense grids read better with compact card type (#90). */
.bs-card-grid--4 .bs-card__title, .bs-card-grid--5 .bs-card__title { font-size: var(--font-size-base); }
.bs-card-grid--5 .bs-card__excerpt { -webkit-line-clamp: 3; }

/* Listing sections with Load More (#90) */
.bs-listing__empty { font-family: var(--font-family-body); color: var(--color-text-muted); }
.bs-listing__more { display: flex; justify-content: center; margin-top: var(--space-6); }

/* Query-loop cards (no __body wrapper: terms/title/excerpt are direct children) */
.bs-card {
  display: flex; flex-direction: column; background: var(--color-surface-0);
  border: var(--stroke-hair) solid var(--color-border-100); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-card);
  transition: box-shadow var(--motion-base) var(--motion-ease-out), transform var(--motion-base) var(--motion-ease-out);
}
.bs-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(calc(-1 * var(--lift))); }
.bs-card__media { position: relative; display: block; overflow: hidden; margin: 0; background: var(--color-placeholder-media); }
.bs-card__media img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ratio-post);
  transform: scale(1) translateY(0); transform-origin: center;
  transition: transform 200ms var(--motion-ease-out); will-change: transform;
}
.bs-card:hover .bs-card__media img { transform: scale(1.035) translateY(-1.5%); transition-duration: 2600ms; }
.bs-card--business .bs-card__media img { aspect-ratio: var(--ratio-business); }
.bs-card__media-badges { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; gap: var(--space-2); }
/* The optional inner body wrapper (rich cards) and the bare-children loop card share padding */
.bs-card__body { padding: var(--space-4); padding-bottom: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.bs-card__terms { padding: var(--space-4) var(--space-4) 0; font-size: var(--font-size-caption); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); font-weight: var(--weight-semibold); font-family: var(--font-family-body); margin: 0; }
.bs-card__body .bs-card__terms { padding: 0; }
.bs-card__terms a { color: inherit; text-decoration: none; }
.bs-card__terms a:hover { color: var(--color-primary); }
.bs-card__title { padding: var(--space-2) var(--space-4) 0; font-size: var(--font-size-lg); line-height: var(--leading-snug); margin: 0; }
.bs-card__body .bs-card__title { padding: 0; }
.bs-card__title a { color: var(--color-text); text-decoration: none; }
.bs-card__title a:hover { color: var(--color-primary); }
.bs-card__excerpt { padding: var(--space-2) var(--space-4) var(--space-4); font-family: var(--font-family-body); font-size: var(--font-size-sm); color: var(--color-text-2); line-height: var(--leading-body); margin: 0; }
.bs-card__body .bs-card__excerpt { padding: 0; }
/* Equal-height cards (#90): grids stretch the card; the excerpt clamps at six
   lines so body length never staggers the row. */
.bs-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.bs-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-family: var(--font-family-body); font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: auto; }
.bs-card__meta-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.bs-card__meta-item svg { width: var(--icon-sm); height: var(--icon-sm); }
.bs-card__price { font-weight: var(--weight-bold); color: var(--color-text); }
.bs-card__actions { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.bs-card__actions .bs-btn { flex: 1; }
.bs-card__actions .bs-btn--icon { flex: none; }

/* Card states */
.bs-card--sponsored {
  border-color: transparent; border-width: var(--stroke-1);
  background:
    linear-gradient(var(--color-surface-0), var(--color-surface-0)) padding-box,
    linear-gradient(135deg, var(--color-border-grad-1), var(--color-border-grad-2)) border-box;
}
.bs-card--featured { border-top: var(--stroke-accent) solid var(--color-featured); }

/* Card sizes */
.bs-card--sm .bs-card__title { font-size: var(--font-size-base); }
.bs-card--lg .bs-card__title { font-size: var(--font-size-h2); }

/* Horizontal row card (sidebar related reading) */
.bs-card--row { flex-direction: row; align-items: stretch; box-shadow: none; border-radius: var(--radius-md); }
.bs-card--row:hover { transform: none; box-shadow: none; border-color: var(--color-border-200); }
.bs-card--row .bs-card__media { width: var(--row-media); flex: none; }
.bs-card--row .bs-card__media img { aspect-ratio: 1 / 1; height: 100%; }
.bs-card--row .bs-card__body { padding: var(--space-3); gap: var(--space-1); }
.bs-card--row .bs-card__title { font-size: var(--font-size-sm); }

/* Core post-template wiring (cards rendered by wp:query loops) */
.bs-loop .wp-block-post-template { gap: var(--space-6); list-style: none; padding: 0; margin: 0; }

/* ----------------------------------------------------------- Vertical grid -- */
.bs-vertical-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
.bs-vertical-tile {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: var(--ratio-business); border-radius: var(--radius-xs);
  text-decoration: none; color: var(--color-on-primary); box-shadow: var(--shadow-card);
  transition: transform var(--motion-base) var(--motion-ease-out), box-shadow var(--motion-base) var(--motion-ease-out);
}
.bs-vertical-tile:hover { transform: translateY(calc(-1 * var(--lift))); box-shadow: var(--shadow-card-hover); color: var(--color-on-primary); text-decoration: none; }
.bs-vertical-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transform-origin: center; transition: transform var(--motion-slow) var(--motion-ease-out); }
.bs-vertical-tile:hover .bs-vertical-tile__img { transform: scale(1.08); }
.bs-vertical-tile__overlay {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; padding: var(--space-4);
  text-align: center;
  background: rgba(11, 31, 51, 0.5);
  transition: background var(--motion-base) var(--motion-ease-out);
}
.bs-vertical-tile:hover .bs-vertical-tile__overlay { background: rgba(11, 31, 51, 0.66); }
.bs-vertical-tile__name { font-family: var(--font-family-display); font-weight: var(--weight-semibold); font-size: var(--font-size-base); color: #fff; line-height: 1.15; }

/* Simple vertical-list block fallback (title-only list rendered by the core plugin path) */
.bs-vertical-list { margin-block: var(--space-7); }
.bs-vertical-list__title { font-size: var(--font-size-h2); margin-bottom: var(--space-5); }
.bs-vertical-list__items { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6); grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ------------------------------------------------------------- Breadcrumb -- */
.bs-breadcrumbs { margin-bottom: var(--space-5); }
.bs-breadcrumbs__list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; font-family: var(--font-family-body); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.bs-breadcrumbs a { color: var(--color-text-muted); }
.bs-breadcrumbs a:hover { color: var(--color-primary); }
.bs-breadcrumbs__sep { color: var(--color-text-faint); }
.bs-breadcrumbs__item--current { color: var(--color-text); font-weight: var(--weight-semibold); }

/* Archive / page intro header */
.bs-archive__title { font-size: var(--font-size-h1); margin: 0 0 var(--space-3); }
.bs-archive__intro { font-size: var(--font-size-lg); color: var(--color-text-2); max-width: 65ch; margin: 0 0 var(--space-7); line-height: var(--leading-loose); }

/* ---------------------------------------------------------- Key takeaways -- */
.bs-key-takeaways {
  border: var(--stroke-hair) solid var(--color-border-100); border-left: var(--stroke-accent-lg) solid var(--color-secondary);
  background: var(--color-surface-50); border-radius: var(--radius-md); padding: var(--space-5); margin-block: var(--space-6);
}
.bs-key-takeaways__title { font-size: var(--font-size-h4); margin: 0 0 var(--space-3); }
.bs-key-takeaways__list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--font-family-body); font-size: var(--font-size-sm); color: var(--color-text-2); }
.bs-key-takeaways__list li::marker { color: var(--color-secondary); }

/* ------------------------------------------------------- Table of contents -- */
.bs-toc { border: var(--stroke-hair) solid var(--color-border-100); border-radius: var(--radius-lg); background: var(--color-surface-50); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0 var(--space-6); }
.bs-toc__title { font-size: var(--font-size-sm); margin: 0 0 var(--space-3); }
.bs-toc__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-family-body); font-size: var(--font-size-sm); }
.bs-toc__item--h3 { padding-left: var(--space-4); font-size: var(--font-size-caption); }
.bs-toc a { color: var(--color-text-2); }
.bs-toc a:hover { color: var(--color-primary); }

/* ------------------------------------------------------------------- FAQ --- */
/* The FAQ sits well clear of the article body (#90). */
.bs-faq { margin-block: var(--space-9) var(--space-7); }
.bs-faq__title { font-size: var(--font-size-h2); margin: 0 0 var(--space-4); }
.bs-faq__item { border-bottom: var(--stroke-hair) solid var(--color-border-100); }
.bs-faq__q { list-style: none; cursor: pointer; font-family: var(--font-family-body); font-weight: var(--weight-semibold); font-size: var(--font-size-base); color: var(--color-text); padding: var(--space-4) var(--space-6) var(--space-4) 0; position: relative; }
.bs-faq__q::-webkit-details-marker { display: none; }
.bs-faq__q::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: var(--font-size-h3); font-weight: var(--weight-regular); color: var(--color-primary); line-height: 1; }
.bs-faq__item[open] > .bs-faq__q::after { content: "-"; }
.bs-faq__a { padding: 0 0 var(--space-4); color: var(--color-text-2); font-family: var(--font-family-body); font-size: var(--font-size-base); line-height: var(--leading-body); }

/* -------------------------------------------------------------- Related --- */
.bs-related { border: var(--stroke-hair) solid var(--color-border-100); border-radius: var(--radius-lg); background: var(--color-surface-0); padding: var(--space-4) var(--space-5); }
.bs-related__title { font-size: var(--font-size-base); margin: 0 0 var(--space-4); }
.bs-related__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.bs-related a { color: var(--color-text); }
.bs-related a:hover { color: var(--color-primary); }

/* ------------------------------------------------------------- Ad slots --- */
.bs-ad-slot:empty { display: none; }
.bs-ad-slot {
  position: relative; display: grid; place-items: center; color: var(--color-text-muted);
  background: repeating-linear-gradient(135deg, var(--color-surface-100) 0 var(--space-3), var(--color-surface-50) var(--space-3) var(--space-5));
  font-family: var(--font-family-body); overflow: hidden;
}
.bs-ad-slot__label { font-size: var(--font-size-caption); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--weight-semibold); }
/* Banners go full-bleed but cap at the creative's native width so they never
   upscale (and pixelate) on screens wider than the artwork. Heights come from
   the creative itself (see .bs-ad__img) so the whole ad scales with the window
   instead of being cropped to a fixed height. */
.bs-ad-slot--top { width: 100%; max-width: var(--ad-banner-max); margin: 0 auto; }
.bs-ad-slot--bottom { width: 100%; max-width: var(--ad-banner-max); margin: 0 auto; }
.bs-ad-slot--rail { width: 100%; max-width: var(--ad-rail-w); margin: 0; }
/* The footer's top margin spaces it off page content; with a bottom ad present
   it would reopen a gap above the footer, so collapse it when the slot is filled. */
.bs-ad-slot--bottom:not(:empty) + .wp-block-template-part .site-footer { margin-top: 0; }
/* The creative scales fluidly: full slot width, height auto so it keeps the
   artwork's aspect ratio at every viewport. The img's width/height attributes
   reserve the right space before load, so there is no layout shift. */
.bs-ad { display: block; width: 100%; }
.bs-ad__link { display: block; }
.bs-ad__img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------- Filter / sort --- */
.bs-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface-0); border: var(--stroke-hair) solid var(--color-border-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.bs-filter-bar__group { display: flex; align-items: center; gap: var(--space-2); }
.bs-filter-bar__sep { width: var(--stroke-hair); align-self: stretch; background: var(--color-border-100); margin-inline: var(--space-1); }
.bs-filter-bar__spacer { flex: 1; }
.bs-select { position: relative; display: inline-flex; align-items: center; }
.bs-select select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-family-body); font-size: var(--font-size-sm); font-weight: var(--weight-medium);
  color: var(--color-text); line-height: 1; background: var(--color-surface-50);
  border: var(--stroke-hair) solid var(--color-border-200); border-radius: var(--radius-md); height: var(--field-h);
  padding: 0 calc(var(--space-3) + var(--icon) + var(--space-2)) 0 var(--space-3); cursor: pointer; width: 100%;
  transition: border-color var(--motion-fast) var(--motion-ease-out), background-color var(--motion-fast) var(--motion-ease-out);
}
.bs-select select:hover { border-color: var(--color-border-cool); background: var(--color-surface-0); }
.bs-select select:focus-visible { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 var(--stroke-accent) var(--color-focus-glow); }
.bs-select::after {
  content: ""; position: absolute; right: calc(var(--space-3) + var(--stroke-1)); top: 50%; pointer-events: none;
  width: 8px; height: 8px; border-right: var(--stroke-2) solid var(--color-ink-500); border-bottom: var(--stroke-2) solid var(--color-ink-500);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--motion-base) var(--motion-ease-out);
}
.bs-select:focus-within::after { transform: translateY(-30%) rotate(225deg); border-color: var(--color-focus); }
.bs-select--block { display: flex; width: 100%; }
/* Brand text field, mirroring the .bs-select control treatment. Used by the
   commerce claim/edit forms (inputs print class="bs-input"). */
.bs-input {
  font-family: var(--font-family-body); font-size: var(--font-size-sm); font-weight: var(--weight-medium);
  color: var(--color-text); background: var(--color-surface-50);
  border: var(--stroke-hair) solid var(--color-border-200); border-radius: var(--radius-md);
  height: var(--field-h); padding: 0 var(--space-3); width: 100%;
  transition: border-color var(--motion-fast) var(--motion-ease-out), background-color var(--motion-fast) var(--motion-ease-out);
}
.bs-input:hover { border-color: var(--color-border-cool); background: var(--color-surface-0); }
.bs-input:focus-visible { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 var(--stroke-accent) var(--color-focus-glow); }
.bs-toggle { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-family-body); font-size: var(--font-size-sm); font-weight: var(--weight-semibold); color: var(--color-text-2); cursor: pointer; user-select: none; }
.bs-toggle__track { width: var(--toggle-w); height: var(--toggle-h); border-radius: var(--radius-pill); background: var(--color-border-200); position: relative; transition: background var(--motion-base) var(--motion-ease-out); }
.bs-toggle__track::after { content: ""; position: absolute; top: var(--stroke-2); left: var(--stroke-2); width: var(--toggle-knob); height: var(--toggle-knob); border-radius: 50%; background: var(--color-surface-0); box-shadow: var(--shadow-1); transition: transform var(--motion-base) var(--motion-ease-out); }
.bs-toggle__input { position: absolute; opacity: 0; pointer-events: none; }
.bs-toggle__input:checked + .bs-toggle__track { background: var(--color-sponsored); }
.bs-toggle__input:checked + .bs-toggle__track::after { transform: translateX(var(--toggle-travel)); }

/* ------------------------------------------------------------ Map preview -- */
.bs-map-preview { position: relative; border: var(--stroke-hair) solid var(--color-border-100); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-map-land); min-height: var(--ad-rail-h); }
.bs-map-preview__canvas { position: absolute; inset: 0; background-image: linear-gradient(var(--color-map-line) var(--stroke-hair), transparent var(--stroke-hair)), linear-gradient(90deg, var(--color-map-line) var(--stroke-hair), transparent var(--stroke-hair)); background-size: var(--map-grid) var(--map-grid); }
.bs-map-preview__water { position: absolute; inset: 0; background: linear-gradient(120deg, var(--color-map-water) 0 38%, transparent 38%); }
.bs-map-preview__pin { position: absolute; width: var(--map-pin); height: var(--map-pin); transform: translate(-50%, -100%); color: var(--color-featured); }
.bs-map-preview__pin svg { width: var(--map-pin); height: var(--map-pin); fill: var(--color-featured); stroke: var(--color-surface-0); stroke-width: var(--stroke-1); }

/* ------------------------------------------------------ Sponsored module --- */
/* Sidebar rail: up to three modules stacked below one another (#90). */
.bs-rail-modules { display: flex; flex-direction: column; gap: var(--space-4); }
.bs-sponsored-module { border: var(--stroke-1) solid transparent; border-radius: var(--radius-lg); background: linear-gradient(var(--color-surface-0), var(--color-surface-0)) padding-box, linear-gradient(135deg, var(--color-border-grad-1), var(--color-border-grad-2)) border-box; padding: var(--space-5); }
.bs-sponsored-module__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.bs-sponsored-module__kind { font-family: var(--font-family-body); font-size: var(--font-size-sm); font-weight: var(--weight-bold); color: var(--color-green-700); display: inline-flex; align-items: center; gap: var(--space-2); }
.bs-sponsored-module__kind svg { width: var(--icon-sm); height: var(--icon-sm); }
.bs-sponsored-module__title { font-size: var(--font-size-lg); margin-bottom: var(--space-1); line-height: var(--leading-snug); }
.bs-sponsored-module__meta { font-family: var(--font-family-body); font-size: var(--font-size-sm); color: var(--color-text-2); margin-bottom: var(--space-4); }

/* --------------------------------------------------------------- Claim CTA -- */
/* A premium-look card (#90): solid gradient border like sponsored modules,
   not the old dashed outline. */
.bs-claim-cta {
  border: var(--stroke-1) solid transparent; border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--color-surface-0), var(--color-surface-0)) padding-box,
    linear-gradient(135deg, var(--color-border-grad-1), var(--color-border-grad-2)) border-box;
  box-shadow: var(--shadow-card); padding: var(--space-5);
}
.bs-claim-cta__title { font-size: var(--font-size-h4); margin: 0 0 var(--space-2); color: var(--color-primary); }
.bs-claim-cta__text { font-family: var(--font-family-body); font-size: var(--font-size-sm); color: var(--color-text-2); margin: 0 0 var(--space-4); line-height: var(--leading-body); }
.bs-claim-cta__text:last-child { margin-bottom: 0; }

/* ----------------------------------------------------- Business listing --- */
.bs-business__media img { width: 100%; height: auto; border-radius: var(--radius-xs); }
/* Google Places / AI image credit appended by bs_pipeline_thumbnail_attribution() */
.bs-photo-credit { display: block; font-family: var(--font-family-body); font-size: var(--font-size-caption); color: var(--color-text-muted); margin-top: var(--space-1); }
.bs-photo-credit a { color: var(--color-text-muted); }
/* On single pages the credit overlays the photo itself, bottom left (#117).
   Same muted colour; a translucent wash keeps it legible on busy photos.
   Cards keep the band treatment below. */
.bs-article__main .wp-block-post-featured-image { position: relative; }
.bs-article__main .wp-block-post-featured-image .bs-photo-credit {
  position: absolute; bottom: 0; left: 0; margin: 0; padding: 1px;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 0 var(--radius-xs) 0 0;
}
/* On cards the credit sits inside the media anchor, whose placeholder
   background read as a coloured band (#90): tiny centred text on the card
   body surface instead. */
/* Google requires the attribution wherever the photo shows, so cards keep it,
   shrunk to the legal minimum footprint and centred (#117). */
.bs-card__media .bs-photo-credit { background: var(--color-surface-0); text-align: center; font-size: 0.5rem; line-height: 1.5; padding: 1px var(--space-2) 0; margin: 0; }
.bs-business__title { font-size: var(--font-size-h1); margin: var(--space-5) 0 var(--space-1); }
/* The type chip hugs the title and stands clear of the copy (#90). */
.bs-business__meta { margin-bottom: var(--space-7); font-family: var(--font-family-body); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.bs-business-modules { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-7); }

/* Contact facts + location in the listing sidebar (#90). */
.bs-business__sidebar .bs-facts {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3);
  border: var(--stroke-hair) solid var(--color-border-100); border-radius: var(--radius-lg);
  background: var(--color-surface-0); padding: var(--space-4) var(--space-5);
  font-family: var(--font-family-body); font-size: var(--font-size-sm);
}
.bs-business__sidebar .bs-facts a { color: var(--color-text); overflow-wrap: anywhere; }
.bs-business__sidebar .bs-facts a:hover { color: var(--color-primary); }
.bs-business__sidebar .bs-facts__verified { color: var(--color-green-700); font-weight: var(--weight-bold); }
.bs-business__sidebar .bs-facts__social { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 0; margin: 0; }
.bs-business__sidebar .bs-module-group--location { border: var(--stroke-hair) solid var(--color-border-100); border-radius: var(--radius-lg); background: var(--color-surface-0); padding: var(--space-4) var(--space-5); }
.bs-business__sidebar .bs-module-group--location .bs-module-group__title { font-size: var(--font-size-base); margin: 0 0 var(--space-3); }
.bs-business__sidebar .bs-module-group__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); font-family: var(--font-family-body); font-size: var(--font-size-sm); }
.bs-business__sidebar .bs-module--location { display: flex; flex-direction: column; gap: var(--space-1); }

/* --------------------------------------------------------------- Article --- */
.bs-article__title { font-size: var(--font-size-h1); margin: 0 0 var(--space-3); }
/* Featured image on single posts (#117): articles never rendered it, the
   template predates posts carrying thumbnails. 16:9 crop for consistency. */
.bs-article__media { margin: 0 0 var(--space-5); }
.bs-article__media img { width: 100%; aspect-ratio: var(--ratio-post); object-fit: cover; border-radius: var(--radius-lg); display: block; }
.bs-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); color: var(--color-text-muted); font-family: var(--font-family-body); font-size: var(--font-size-sm); margin-bottom: var(--space-6); }

/* Prose rhythm: theme.json sets blockGap 0, so restore vertical flow inside
   the long-form post body for articles and business listings. */
.bs-article__main .wp-block-post-content > * + * { margin-top: var(--space-5); }
.bs-article__main .wp-block-post-content > h2 { margin-top: var(--space-7); margin-bottom: var(--space-3); }
.bs-article__main .wp-block-post-content > h3 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
.bs-article__main .wp-block-post-content > ul,
.bs-article__main .wp-block-post-content > ol { padding-left: var(--space-6); }
.bs-article__main .wp-block-post-content > ul > li + li,
.bs-article__main .wp-block-post-content > ol > li + li { margin-top: var(--space-2); }
.bs-article__main .wp-block-post-content > blockquote {
  margin-inline: 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface-100);
  border-radius: var(--radius-md);
  color: var(--color-text-2);
}
.bs-article__main .wp-block-post-content img { max-width: 100%; height: auto; border-radius: var(--radius-xs); }

/* ------------------------------------------------------------- Pagination -- */
.bs-pagination,
.bs-loop .wp-block-query-pagination { display: flex; justify-content: center; align-items: center; gap: var(--space-2); margin-top: var(--space-7); }
.bs-pagination a, .bs-pagination span,
.bs-loop .wp-block-query-pagination a, .bs-loop .wp-block-query-pagination span { display: inline-grid; place-items: center; min-width: var(--control-h-sm); min-height: var(--control-h-sm); padding-inline: var(--space-3); border-radius: var(--radius-md); font-family: var(--font-family-body); font-size: var(--font-size-sm); font-weight: var(--weight-semibold); color: var(--color-text-2); border: var(--stroke-hair) solid var(--color-border-100); background: var(--color-surface-0); text-decoration: none; }
.bs-pagination a:hover,
.bs-loop .wp-block-query-pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.bs-pagination__current,
.bs-loop .wp-block-query-pagination .wp-block-query-pagination-numbers .current { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }

/* --------------------------------------------------------------- Carousel -- */
.bs-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 18rem); gap: var(--space-5); overflow-x: auto; padding-bottom: var(--space-3); scroll-snap-type: x mandatory; }
.bs-carousel > * { scroll-snap-align: start; }

/* ----------------------------------------------------------- What's on row -- */
.bs-whatson { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --------------------------------------------------------------- Reduced --- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------ Responsive --- */
@media (max-width: 1024px) {
  .bs-vertical-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bs-card-grid, .bs-whatson, .bs-vertical-list__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .bs-article { grid-template-columns: 1fr; }
  .bs-article__sidebar { position: static; }
}
@media (max-width: 600px) {
  .bs-vertical-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-card-grid, .bs-whatson, .bs-card-grid--4, .bs-vertical-list__items { grid-template-columns: 1fr; }
  /* Directory Navigation head on mobile: title left, link below it on the right. */
  .bs-section--verticals .bs-section__head { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .bs-section--verticals .bs-section__link { align-self: flex-end; }
}

/* List your business pricing -------------------------------------------------- */
.bs-pricing { margin-block: var(--space-7); }
.bs-pricing__context { font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); }
.bs-pricing__note { color: var(--color-text-muted); margin: 0 0 var(--space-4); }

.bs-tiers {
  display: grid; gap: var(--space-5); align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: var(--space-6);
}
.bs-tier {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--color-surface-0); border: var(--stroke-hair) solid var(--color-border-100);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6);
}
.bs-tier--premium.is-recommended { border-color: var(--color-primary); box-shadow: var(--shadow-card-hover); }
.bs-tier__flag {
  align-self: flex-start; margin: 0; padding: var(--space-1) var(--space-3);
  background: var(--color-sponsored-bg); color: var(--color-sponsored);
  font-size: var(--font-size-caption); font-weight: var(--weight-semibold); border-radius: var(--radius-pill);
}
.bs-tier__name { margin: 0; }
.bs-tier__price { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.bs-tier__amount { font-size: var(--font-size-h3); font-weight: var(--weight-bold); }
.bs-tier__cycle { color: var(--color-text-muted); }
.bs-tier__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.bs-tier__features li { position: relative; padding-left: var(--space-5); }
.bs-tier__features li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 6px;
  border-left: 2px solid var(--color-secondary); border-bottom: 2px solid var(--color-secondary);
  transform: rotate(-45deg);
}
.bs-tier .bs-btn + .bs-btn { margin-top: var(--space-2); }

/* Source credit on pipeline posts (issue #110). */
.bs-source-credit {
  margin-top: var(--space-5); padding-top: var(--space-3);
  border-top: var(--stroke-hair) solid var(--color-border-100);
  font-size: var(--font-size-sm); color: var(--color-text-muted);
}
.bs-source-credit a { color: inherit; text-decoration: underline; }

/* Free-tier sign-up: the claim form embedded in the Free card (issue #100). */
.bs-tier__signup { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--stroke-hair) solid var(--color-border-100); }
.bs-tier__signup-title { margin: 0 0 var(--space-3); font-size: var(--font-size-h4); }
.bs-tier__signup .bs-claim-form p { margin: 0 0 var(--space-3); }
.bs-tier__signup .bs-claim-form label { font-size: var(--font-size-sm); font-weight: var(--weight-semibold); }
.bs-tier__signup .button {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  font-family: var(--font-family-body); font-size: var(--font-size-base); font-weight: var(--weight-semibold);
  line-height: 1; min-height: var(--control-h); padding-inline: var(--space-5);
  border-radius: var(--radius-pill); border: var(--stroke-hair) solid transparent;
  background: var(--color-primary); color: var(--color-on-primary); cursor: pointer;
}
.bs-tier__signup .button:hover { background: var(--color-navy-500); }
.bs-tier__signup .button:active { background: var(--color-navy-700); }

@media (max-width: 600px) {
  .bs-tiers { grid-template-columns: 1fr; }
}

/* Account area: swap the frontend mobile menu for the account menu. */
/* Visibility depends on the body class WooCommerce adds on account pages (woocommerce-account). */
/* Alignment is handled by .site-header__end now, so no auto margin here. */
.bs-acct-menu-toggle { display: none; border: 1px solid var(--color-border-200, #D6CBB6);
  background: #fff; border-radius: 4px; padding: .4rem .7rem; font-weight: 600; cursor: pointer; }

@media (max-width: 781px) {
  /* On account pages, hide the core nav overlay toggle and show ours opposite the logo. */
  /* wp-block-navigation__responsive-container-open is a core block class; revisit if WordPress renames it. */
  .woocommerce-account .site-header__nav .wp-block-navigation__responsive-container-open { display: none !important; }
  .woocommerce-account .bs-acct-menu-toggle { display: inline-block; }
  /* The desktop horizontal menu collapses on mobile; the overlay carries it. */
  .woocommerce-account .bs-acct-menu { display: none; }
}

@media (min-width: 782px) {
  /* Desktop keeps both menus; the overlay never shows. */
  .bs-acct-overlay { display: none !important; }
}

/* Account pages: drop the header CTAs and the redundant My Account nav item, so
   the account chrome keeps using its own custom menu. */
.woocommerce-account .site-header__actions { display: none; }
.woocommerce-account .site-header__nav .current-menu-item { display: none; }

/* Order confirmation next steps (in theme.css so it also styles the order-received page). */
.bs-order-nextsteps { margin: 1rem 0 1.75rem; padding: 1.25rem; border: 1px solid var(--color-border-100, #E6DCCB);
  border-radius: var(--radius-md, 6px); background: var(--color-surface-50, #FBF7F0); }
.bs-order-nextsteps h2 { margin-top: 0; }

/* Top Local News (homepage) --------------------------------------------------- */
.bs-news-columns { display: grid; gap: 0 var(--space-7); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.bs-news-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.bs-news-item {
  display: grid; grid-template-columns: var(--row-media) minmax(0, 1fr); gap: var(--space-4);
  padding-block: var(--space-4); border-bottom: var(--stroke-hair) solid var(--color-border-100);
}
.bs-news-item__media { display: block; overflow: hidden; border-radius: var(--radius-xs); background: var(--color-placeholder-media); aspect-ratio: 1 / 1; align-self: start; }
.bs-news-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-news-item__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.bs-news-item__title { margin: 0; font-size: var(--font-size-base); line-height: var(--leading-snug); }
.bs-news-item__title a { color: var(--color-text); text-decoration: none; }
.bs-news-item__title a:hover { color: var(--color-primary); }
/* Excerpts clip to two lines; the standards-track line-clamp shorthand needs the
   -webkit- pair in evergreen browsers today. */
.bs-news-item__excerpt {
  margin: 0; font-family: var(--font-family-body); font-size: var(--font-size-sm);
  color: var(--color-text-2); line-height: var(--leading-body);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

@media (max-width: 781px) {
  .bs-news-columns { grid-template-columns: 1fr; gap: 0; }
  .bs-news-list + .bs-news-list .bs-news-item:first-child { border-top: var(--stroke-hair) solid var(--color-border-100); }
}

/* Featured rail empty state: the claim-this-space card ------------------------ */
.bs-card--claim { border: var(--stroke-hair) dashed var(--color-border-200); box-shadow: none; background: var(--color-surface-50); }
.bs-card--claim:hover { transform: none; box-shadow: var(--shadow-card); }
.bs-card__claim {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-2);
  padding: var(--space-6); min-height: 14rem; height: 100%; text-align: center; text-decoration: none;
}
.bs-card__claim:hover { text-decoration: none; }
.bs-card__claim-title { font-family: var(--font-family-display); font-weight: var(--weight-semibold); font-size: var(--font-size-lg); color: var(--color-primary); }
.bs-card__claim-sub { font-family: var(--font-family-body); font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--leading-body); }

/* Categories index (/categories) ----------------------------------------------
   Editorial rows instead of boxed columns (#117): every vertical is a
   full-width section under a hairline rule, so the page reads evenly no
   matter how many sub-levels each vertical carries. */
.bs-categories-index { display: flex; flex-direction: column; }
.bs-categories-index__group {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding-block: var(--space-6);
  border-bottom: var(--stroke-hair) solid var(--color-border-100);
}
.bs-categories-index__group:first-child { padding-top: var(--space-4); }
.bs-categories-index__group:last-child { border-bottom: 0; }
.bs-categories-index__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.bs-categories-index__title { margin: 0; font-size: var(--font-size-h3); }
.bs-categories-index__title a { color: var(--color-text); text-decoration: none; }
.bs-categories-index__title a:hover { color: var(--color-primary); }
.bs-categories-index__empty { margin: 0; font-family: var(--font-family-body); font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Directory sidebar silo nav (#117) --------------------------------------------
   Plain alphabetical text links: verticals as group heads, silos indented
   beneath. No chips, no underlines. */
.bs-silo-nav {
  border: var(--stroke-hair) solid var(--color-border-100); border-radius: var(--radius-lg);
  background: var(--color-surface-0); padding: var(--space-4) var(--space-5);
}
.bs-silo-nav__title { margin: 0 0 var(--space-3); font-size: var(--font-size-base); }
.bs-silo-nav__list, .bs-silo-nav__silos { list-style: none; margin: 0; padding: 0; }
.bs-silo-nav__list { display: flex; flex-direction: column; gap: var(--space-3); }
.bs-silo-nav__group { display: flex; flex-direction: column; gap: var(--space-1); }
.bs-silo-nav__vertical {
  font-family: var(--font-family-body); font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold); color: var(--color-text); text-decoration: none;
}
.bs-silo-nav__silos { padding-left: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.bs-silo-nav__silo {
  font-family: var(--font-family-body); font-size: var(--font-size-sm);
  color: var(--color-text-2); text-decoration: none; line-height: var(--leading-body);
}
.bs-silo-nav__vertical:hover, .bs-silo-nav__silo:hover { color: var(--color-primary); text-decoration: none; }

/* News landing (/news) ---------------------------------------------------------
   Lead story + card grid, served by bloubergstrand/news-index (#117). */
.bs-page-head { margin-bottom: var(--space-6); }
.bs-news-lead {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-6); align-items: center;
  padding-bottom: var(--space-6); margin-bottom: var(--space-6);
  border-bottom: var(--stroke-hair) solid var(--color-border-100);
}
.bs-news-lead__media { display: block; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-placeholder-media); }
.bs-news-lead__media img { width: 100%; aspect-ratio: var(--ratio-post); object-fit: cover; display: block; }
.bs-news-lead__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
/* No thumbnail: let the text own the whole row instead of half a grid. */
.bs-news-lead > .bs-news-lead__body:only-child { grid-column: 1 / -1; max-width: 52rem; }
.bs-news-lead__kicker {
  align-self: flex-start; font-family: var(--font-family-body); font-size: var(--font-size-caption);
  font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-primary); text-decoration: none;
}
.bs-news-lead__kicker:hover { text-decoration: underline; }
.bs-news-lead__title { margin: 0; font-size: var(--font-size-h2); line-height: var(--leading-tight); }
.bs-news-lead__title a { color: var(--color-text); text-decoration: none; }
.bs-news-lead__title a:hover { color: var(--color-primary); }
.bs-news-lead__excerpt {
  margin: 0; font-family: var(--font-family-body); font-size: var(--font-size-lg);
  color: var(--color-text-2); line-height: var(--leading-body);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.bs-news-lead__date { font-family: var(--font-family-body); font-size: var(--font-size-sm); color: var(--color-text-muted); }

@media (max-width: 781px) {
  .bs-news-lead { grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
}