/* ==========================================================================
   BM Directory Components
   - Strictly tokenised via var(--bm-...)
   - Zero literal colors, px sizes for spacing, or font names outside tokens.css
   - Mobile-first (375px min, 768px tablet, 1280px desktop)
   - Flat BEM prefix: bm- (ready for Bricks Builder custom classes)
   - Accessible: 44px touch targets, visible focus, prefers-reduced-motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Base & Reset Primitives (Full-width viewport edge-to-edge support)
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: clip;
  min-height: 100vh;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-base);
  line-height: var(--bm-line-height-normal);
  color: var(--bm-color-ink-base);
  background-color: var(--bm-color-surface-base);
  -webkit-font-smoothing: antialiased;
}

/* Bricks template parent containers reset */
#bricks-header,
#bricks-footer,
.brx-header,
.brx-footer,
.brxe-section,
.brxe-container,
.brx-container,
.brxe-shortcode,
#brx-content {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* Full-width 100vw edge-to-edge background bands with centered container content */
.bm-header,
.bm-hero,
.bm-cta-strip,
.bm-footer,
.bm-page-header,
.bm-chip-row-wrapper,
.bm-filter-bar,
.bm-business-hero,
.bm-section--full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--bm-color-brand-text); /* = brand-base in light; the light brand shade in dark and auto (brand-base on a dark page was 2.65:1) */
  text-decoration: none;
  transition: color var(--bm-transition-fast);
}

a:hover {
  color: var(--bm-color-brand-dark);
}

:root[data-bm-theme="dark"] a:hover {
  color: var(--bm-color-brand-bright);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) a:hover {
    color: var(--bm-color-brand-bright);
  }
}

:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   1. Layout, Containers & Sections
   -------------------------------------------------------------------------- */
.bm-container {
  width: 100%;
  max-width: var(--bm-container-max);
  margin-inline: auto;
  padding-inline: var(--bm-space-4);
}

@media (min-width: 768px) {
  .bm-container {
    padding-inline: var(--bm-space-6);
  }
}

@media (min-width: 1280px) {
  .bm-container {
    padding-inline: var(--bm-space-8);
  }
}

.bm-section {
  padding-block: var(--bm-space-10);
}

@media (min-width: 768px) {
  .bm-section {
    padding-block: var(--bm-space-12);
  }
}

@media (min-width: 1280px) {
  .bm-section {
    padding-block: var(--bm-space-16);
  }
}

.bm-section--muted {
  background-color: var(--bm-color-surface-muted);
}

.bm-section__header {
  margin-block-end: var(--bm-space-8);
}

.bm-section__title {
  font-size: var(--bm-text-2xl);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  letter-spacing: var(--bm-tracking-tight);
  margin-block-start: 0;
  margin-block-end: var(--bm-space-2);
}

@media (min-width: 768px) {
  .bm-section__title {
    font-size: var(--bm-text-3xl);
  }
}

.bm-section__subtitle {
  font-size: var(--bm-text-base);
  color: var(--bm-color-muted-base);
  line-height: var(--bm-line-height-relaxed);
  margin: 0;
}

.bm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bm-space-6);
}

@media (min-width: 768px) {
  .bm-grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .bm-grid--cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .bm-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .bm-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .bm-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   2. Buttons & Interactive Targets (44px min touch target)
   -------------------------------------------------------------------------- */
.bm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-2);
  min-height: var(--bm-touch-target-min);
  min-width: var(--bm-touch-target-min);
  padding-inline: var(--bm-space-5);
  padding-block: var(--bm-space-2);
  border-radius: var(--bm-radius-full);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  box-shadow: var(--bm-shadow-pill);
  transition: background-color var(--bm-transition-fast), border-color var(--bm-transition-fast), color var(--bm-transition-fast), transform var(--bm-transition-fast), box-shadow var(--bm-transition-fast);
}

.bm-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--bm-shadow-md);
}

.bm-btn:active {
  transform: translateY(0.5px) scale(0.98);
}

.bm-btn--primary {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
}

.bm-btn--primary:hover {
  background-color: var(--bm-color-brand-dark);
  color: var(--bm-color-btn-primary-text);
}

.bm-btn--secondary {
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  border-color: var(--bm-color-line-dark);
}

.bm-btn--secondary:hover {
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-brand-text);
  background-color: var(--bm-color-surface-base);
}

.bm-btn--accent {
  background-color: var(--bm-color-accent-base);
  color: var(--bm-color-on-accent);
}

.bm-btn--accent:hover {
  background-color: var(--bm-color-accent-dark);
  color: var(--bm-color-btn-primary-text);
}

.bm-btn--whatsapp {
  background-color: var(--bm-color-whatsapp-base);
  color: var(--bm-color-on-accent); /* white on #25d366 is 1.9:1; the dark ink is 9:1 and does not flip in dark mode */
}

.bm-btn--whatsapp:hover {
  background-color: var(--bm-color-whatsapp-base);
  color: var(--bm-color-on-accent);
  filter: brightness(0.94);
}

.bm-btn--full {
  width: 100%;
}

/* --------------------------------------------------------------------------
   3. Badges
   -------------------------------------------------------------------------- */
.bm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1);
  padding-inline: var(--bm-space-2);
  padding-block: var(--bm-space-1);
  border-radius: var(--bm-radius-full);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-medium);
  line-height: var(--bm-line-height-tight);
}

.bm-badge:empty,
.bm-card__category-badge:empty,
.bm-business-header__badges:empty {
  display: none;
}

.bm-badge--verified {
  background-color: var(--bm-color-success-tint);
  color: var(--bm-color-success-dark);
  border: 1px solid var(--bm-color-success-base);
}

.bm-badge--featured {
  background-color: var(--bm-color-accent-base);
  color: var(--bm-color-text-on-dark);
}

.bm-badge--area {
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-base);
}

.bm-badge--today {
  background-color: var(--bm-color-hours-today-badge-bg);
  color: var(--bm-color-hours-today-badge-text);
  border: 1px solid var(--bm-color-hours-today-badge-border);
  font-weight: var(--bm-font-weight-bold);
  margin-inline-start: var(--bm-space-2);
}

.bm-badge--open {
  background-color: var(--bm-color-badge-open-bg);
  color: var(--bm-color-badge-open-text);
  border: 1px solid var(--bm-color-badge-open-border);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-badge--closed {
  background-color: var(--bm-color-badge-closed-bg);
  color: var(--bm-color-badge-closed-text);
  border: 1px solid var(--bm-color-badge-closed-border);
  font-weight: var(--bm-font-weight-medium);
}

.bm-badge--count {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-text-on-dark);
  font-size: var(--bm-text-xs);
  padding-inline: var(--bm-space-1);
  min-width: 1.25rem;
  justify-content: center;
}

.bm-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-status-dot-bg);
  display: inline-block;
  box-shadow: 0 0 0 2px var(--bm-color-status-dot-ring);
}


/* --------------------------------------------------------------------------
   4. Header & Navigation (Slim sticky, working mobile menu)
   -------------------------------------------------------------------------- */
.bm-header {
  position: sticky;
  top: 0;
  z-index: var(--bm-z-sticky);
  background-color: var(--bm-color-header-bg);
  backdrop-filter: var(--bm-header-blur);
  -webkit-backdrop-filter: var(--bm-header-blur);
  border-block-end: 1px solid var(--bm-color-header-border);
  box-shadow: var(--bm-shadow-sm);
  transition: background-color var(--bm-transition-normal), border-color var(--bm-transition-normal);
}

.bm-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
}

.bm-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  color: var(--bm-color-brand-text);
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-bold);
  text-decoration: none;
}

.bm-header__logo:hover {
  color: var(--bm-color-brand-dark);
}

.bm-header__nav {
  display: none;
  align-items: center;
  gap: var(--bm-space-2);
}

@media (min-width: 768px) {
  .bm-header__nav {
    display: flex;
  }
}

.bm-header__nav-link {
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--bm-space-3);
  padding-block: var(--bm-space-2);
  border-radius: var(--bm-radius-md);
  border: 1px solid transparent;
  transition: all var(--bm-transition-fast);
}

.bm-header__nav-link:hover {
  color: var(--bm-color-brand-text);
  background-color: var(--bm-color-surface-muted);
}

.bm-header__nav-link.is-active {
  color: var(--bm-color-brand-text);
  background-color: var(--bm-color-brand-tint);
  font-weight: var(--bm-font-weight-bold);
  border-color: var(--bm-color-brand-tint);
  box-shadow: inset 0 -2px 0 var(--bm-color-brand-base);
}

.bm-header__actions {
  display: flex;
  align-items: center;
  gap: var(--bm-space-3);
}

/* Theme Toggle & Mode Switching */
.bm-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-2);
  min-height: 2.75rem;
  padding-inline: var(--bm-space-3);
  padding-block: var(--bm-space-1);
  border-radius: var(--bm-radius-full);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  cursor: pointer;
  transition: all var(--bm-transition-fast);
  user-select: none;
}

.bm-theme-toggle:hover {
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-brand-text);
  background-color: var(--bm-color-surface-base);
}

.bm-theme-toggle__icon {
  display: none;
  width: 1.125rem;
  height: 1.125rem;
}

.bm-theme-toggle__icon svg {
  width: 100%;
  height: 100%;
}

.bm-theme-toggle__label {
  display: inline;
}

@media (max-width: 640px) {
  .bm-theme-toggle {
    padding: var(--bm-space-1);
    min-width: 2.375rem;
  }
  .bm-theme-toggle__label {
    display: none;
  }
}

html[data-bm-theme="light"] .bm-theme-toggle__icon--light,
.bm-theme-toggle[data-current-theme="light"] .bm-theme-toggle__icon--light {
  display: inline-flex;
}

html[data-bm-theme="dark"] .bm-theme-toggle__icon--dark,
.bm-theme-toggle[data-current-theme="dark"] .bm-theme-toggle__icon--dark {
  display: inline-flex;
}

html:not([data-bm-theme="light"]):not([data-bm-theme="dark"]) .bm-theme-toggle__icon--auto,
html[data-bm-theme="auto"] .bm-theme-toggle__icon--auto,
.bm-theme-toggle[data-current-theme="auto"] .bm-theme-toggle__icon--auto,
.bm-theme-toggle:not([data-current-theme]) .bm-theme-toggle__icon--auto {
  display: inline-flex;
}

/* Mobile Segmented Theme Control (in drawer) */
.bm-theme-segmented {
  display: flex;
  background-color: var(--bm-color-surface-dark);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-full);
  padding: 0.25rem;
  gap: 0.25rem;
  width: 100%;
  margin-block: var(--bm-space-3);
  box-sizing: border-box;
}

.bm-theme-segmented__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-1);
  padding-block: var(--bm-space-1-5);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  border: none;
  border-radius: var(--bm-radius-full);
  background: transparent;
  color: var(--bm-color-muted-base);
  cursor: pointer;
  transition: all var(--bm-transition-fast);
}

.bm-theme-segmented__btn.is-active,
.bm-theme-segmented__btn:hover {
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-dark);
  box-shadow: var(--bm-shadow-sm);
}

.bm-theme-segmented__btn.is-active {
  color: var(--bm-color-brand-text);
}

.bm-header__select {
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  padding: var(--bm-space-2) var(--bm-space-3);
  min-height: var(--bm-touch-target-min);
  cursor: pointer;
  max-width: 13rem;
}

@media (max-width: 640px) {
  .bm-header__select {
    max-width: 7.5rem;
    font-size: var(--bm-text-xs);
    padding: var(--bm-space-1) var(--bm-space-2);
  }
}

@media (max-width: 480px) {
  .bm-header__actions {
    gap: var(--bm-space-1-5);
  }

  .bm-header__select {
    max-width: 4.5rem;
    padding-inline: var(--bm-space-1);
    text-overflow: ellipsis;
  }

  .bm-header__logo {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

.bm-header__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bm-touch-target-min);
  min-width: var(--bm-touch-target-min);
  background: transparent;
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  color: var(--bm-color-ink-base);
  cursor: pointer;
}

@media (min-width: 768px) {
  .bm-header__menu-btn {
    display: none;
  }
}

.bm-header__mobile-menu {
  display: none;
  border-block-start: 1px solid var(--bm-color-header-border);
  padding-block: var(--bm-space-4);
  background-color: var(--bm-color-header-bg);
  backdrop-filter: var(--bm-header-blur);
  -webkit-backdrop-filter: var(--bm-header-blur);
}

.bm-header__mobile-menu.is-open {
  display: block;
}

@media (min-width: 768px) {
  .bm-header__mobile-menu {
    display: none !important;
  }
}

.bm-header__mobile-nav {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-3);
}

.bm-header__mobile-link {
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-base);
  padding-block: var(--bm-space-2);
  padding-inline: var(--bm-space-3);
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  border-radius: var(--bm-radius-md);
  text-decoration: none;
  transition: all var(--bm-transition-fast);
}

.bm-header__mobile-link:hover {
  color: var(--bm-color-brand-text);
  background-color: var(--bm-color-surface-muted);
}

.bm-header__mobile-link.is-active {
  color: var(--bm-color-brand-text);
  background-color: var(--bm-color-brand-tint);
  font-weight: var(--bm-font-weight-bold);
  box-shadow: inset 3px 0 0 var(--bm-color-brand-text);
}

/* --------------------------------------------------------------------------
   5. Hero Section & Responsive Search Bar
   -------------------------------------------------------------------------- */
.bm-hero {
  position: relative;
  background: var(--bm-gradient-hero);
  color: var(--bm-color-text-on-dark);
  padding-block-start: var(--bm-space-10);
  padding-block-end: var(--bm-space-8);
  overflow: hidden;
}

@media (min-width: 768px) {
  .bm-hero {
    padding-block-start: var(--bm-space-12);
    padding-block-end: var(--bm-space-10);
  }
}

.bm-hero + .bm-section,
.bm-hero ~ .bm-section:first-of-type {
  padding-block-start: var(--bm-space-8); /* 16px put the first heading right under the hero */
}

.bm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bm-gradient-hero-accent);
  pointer-events: none;
}

.bm-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--bm-container-max);
  height: 100%;
  background: var(--bm-signature-glow);
  pointer-events: none;
}

.bm-hero__title {
  font-size: var(--bm-text-4xl);
  font-weight: var(--bm-font-weight-bold);
  line-height: var(--bm-line-height-tight);
  color: var(--bm-color-hero-title);
  letter-spacing: var(--bm-tracking-tight);
  margin-block-start: 0;
  margin-block-end: var(--bm-space-3);
  max-width: 52rem;
}

@media (min-width: 768px) {
  .bm-hero__title {
    font-size: var(--bm-text-5xl);
  }
}

.bm-hero__subtitle {
  font-size: var(--bm-text-base);
  color: var(--bm-color-hero-subtitle);
  line-height: var(--bm-line-height-relaxed);
  margin-block-start: 0;
  margin-block-end: var(--bm-space-8);
  max-width: 44rem;
}

@media (min-width: 768px) {
  .bm-hero__subtitle {
    font-size: var(--bm-text-lg);
  }
}

/* Search Bar (1 row at 1280, stacks at 375) */
.bm-search-bar {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-2);
  width: 100%;
}

@media (min-width: 768px) {
  .bm-search-bar {
    flex-direction: row;
    align-items: stretch;
    background-color: var(--bm-color-surface-light);
    border-radius: var(--bm-radius-full);
    box-shadow: var(--bm-shadow-bento);
    border: 1px solid var(--bm-color-line-base);
    padding: var(--bm-space-1-5);
    gap: 0;
  }
}

.bm-search-bar__field {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: var(--bm-touch-target-min);
  background-color: var(--bm-color-surface-light);
  border-radius: var(--bm-radius-md);
  border: 1px solid var(--bm-color-line-base);
  padding-inline: var(--bm-space-3);
  color: var(--bm-color-muted-base);
}

@media (min-width: 768px) {
  .bm-search-bar__field {
    border: none;
    border-radius: 0;
    padding-inline: var(--bm-space-3);
  }

  .bm-search-bar__field:first-child {
    flex: 2;
  }

  .bm-search-bar__field:not(:first-child) {
    flex: 1.2;
    border-inline-start: 1px solid var(--bm-color-line-base);
  }
}

.bm-search-bar__icon {
  flex: 0 0 1.25rem;
  color: var(--bm-color-muted-base);
}

.bm-search-bar__input,
.bm-search-bar__select {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-base);
  color: var(--bm-color-ink-base);
  min-height: var(--bm-touch-target-min);
}

.bm-search-bar__submit {
  width: 100%;
  font-weight: var(--bm-font-weight-bold);
}

@media (min-width: 768px) {
  .bm-search-bar__submit {
    width: auto;
    flex: 0 0 auto;
    padding-inline: var(--bm-space-6);
    margin-inline-start: var(--bm-space-1);
  }
}

.bm-search-bar__submit.bm-search-bar__submit {
  background-color: var(--bm-color-accent-dark); /* white on accent-base is 3.19:1; accent-dark is 5.02:1 */
  color: var(--bm-color-text-on-dark);
  border: 1px solid var(--bm-color-accent-dark);
  box-shadow: var(--bm-shadow-sm);
}

.bm-search-bar__submit.bm-search-bar__submit:hover {
  background-color: var(--bm-color-accent-dark);
  filter: brightness(0.9);
  color: var(--bm-color-text-on-dark);
}
/* --------------------------------------------------------------------------
   6. Category Tiles (12 Categories, distinct SVGs, responsive grid)
   -------------------------------------------------------------------------- */
.bm-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bm-space-3);
}

@media (min-width: 640px) {
  .bm-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--bm-space-3);
  }
}

@media (min-width: 768px) {
  .bm-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--bm-space-4);
  }
}

@media (min-width: 1280px) {
  .bm-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--bm-space-4);
  }
}

.bm-category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--bm-space-4) var(--bm-space-3);
  min-height: 8rem;
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  text-decoration: none;
  box-shadow: var(--bm-shadow-sm);
  transition: transform var(--bm-transition-fast), box-shadow var(--bm-transition-fast), border-color var(--bm-transition-fast);
}

.bm-category-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--bm-shadow-md);
  border-color: var(--bm-color-brand-base);
}

.bm-category-tile__icon-wrapper {
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-category-icon-bg);
  color: var(--bm-color-category-icon-color);
  margin-block-end: var(--bm-space-3);
  transition: background-color var(--bm-transition-fast), color var(--bm-transition-fast);
}

.bm-category-tile:hover .bm-category-tile__icon-wrapper {
  background-color: var(--bm-color-category-icon-hover-bg);
  color: var(--bm-color-category-icon-hover-color);
}

.bm-category-tile__name {
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
  line-height: var(--bm-line-height-tight);
  overflow-wrap: break-word;
  word-break: normal;
}

.bm-category-tile__count {
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  color: var(--bm-color-ink-base);
  margin-block-start: var(--bm-space-1);
}
/* --------------------------------------------------------------------------
   7. Listing Cards (Logo framed, Photo full-bleed, Equal heights)
   -------------------------------------------------------------------------- */
.bm-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  overflow: hidden;
  box-shadow: var(--bm-shadow-card);
  transition: transform var(--bm-transition-normal), box-shadow var(--bm-transition-normal), border-color var(--bm-transition-normal);
}

.bm-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow-card-hover);
  border-color: var(--bm-color-line-dark);
}

.bm-card__media-wrapper {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--bm-color-surface-dark);
}

.bm-card__media-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.bm-card__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bm-card__scrim {
  position: absolute;
  inset: 0;
  background: var(--bm-gradient-card-scrim);
  pointer-events: none;
  opacity: 0.6;
  transition: opacity var(--bm-transition-fast);
}

.bm-card:hover .bm-card__scrim {
  opacity: 0.8;
}

/* Centred logo on soft patterned surface with ambient blurred glow backdrop */
.bm-card__media-ambient {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  object-fit: cover;
  filter: blur(28px) saturate(180%);
  opacity: 0.35;
  transform: scale(1.1);
  pointer-events: none;
}

.bm-card__media--logo {
  position: relative;
  z-index: 1;
  object-fit: contain;
  background-color: transparent;
  background-image: var(--bm-pattern-dots);
  background-size: var(--bm-pattern-size);
  padding: var(--bm-space-6);
  transition: transform var(--bm-transition-normal);
}

.bm-card:hover .bm-card__media--logo {
  transform: scale(1.06);
}

/* Fallback for listings with no image */
.bm-card__media--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bm-color-surface-dark);
  background-image: radial-gradient(circle at 50% 50%, var(--bm-color-brand-tint) 0%, transparent 70%), var(--bm-pattern-dots);
  background-size: 100% 100%, var(--bm-pattern-size);
  color: var(--bm-color-brand-text);
}

.bm-card__media--placeholder svg {
  width: 2.75rem;
  height: 2.75rem;
  opacity: 0.85;
  transition: transform var(--bm-transition-normal), opacity var(--bm-transition-fast);
}

.bm-card:hover .bm-card__media--placeholder svg {
  transform: scale(1.08);
  opacity: 1;
}

.bm-card__overlay-top {
  position: absolute;
  top: var(--bm-space-3);
  inset-inline-start: var(--bm-space-3);
  inset-inline-end: var(--bm-space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-2);
  z-index: 2;
  pointer-events: none;
}

.bm-card__category-badge {
  display: inline-flex;
  align-items: center;
  background-color: var(--bm-color-card-badge-bg);
  color: var(--bm-color-card-badge-text);
  border: 1px solid var(--bm-color-card-badge-border);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-bold);
  padding: var(--bm-space-1) var(--bm-space-3);
  border-radius: var(--bm-radius-full);
  box-shadow: var(--bm-shadow-sm);
  pointer-events: auto;
}

.bm-card__category-badge:empty {
  display: none !important;
}

.bm-card__save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  max-width: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
  padding: 0;
  margin: 0;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-save-btn-bg);
  color: var(--bm-color-ink-light);
  border: 1px solid var(--bm-color-line-base);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: var(--bm-shadow-sm);
  box-sizing: border-box;
  flex: 0 0 2.75rem;
  flex-shrink: 0;
  transition: transform var(--bm-transition-fast), color var(--bm-transition-fast), background-color var(--bm-transition-fast), border-color var(--bm-transition-fast);
}

.bm-card__save-btn:hover {
  background-color: var(--bm-color-save-btn-hover);
  color: var(--bm-color-danger-base);
  border-color: var(--bm-color-line-dark);
  transform: scale(1.08);
}

.bm-card__save-btn.is-saved {
  color: var(--bm-color-danger-base);
}

.bm-card__save-btn.is-saved svg {
  fill: var(--bm-color-danger-base);
  stroke: var(--bm-color-danger-base);
}

.bm-card__overlay-bottom {
  position: absolute;
  bottom: var(--bm-space-3);
  inset-inline-start: var(--bm-space-3);
  inset-inline-end: var(--bm-space-3);
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
  z-index: 2;
  pointer-events: none;
}

.bm-card__overlay-bottom .bm-badge {
  pointer-events: auto;
}

.bm-card__ribbon {
  position: absolute;
  top: var(--bm-space-2);
  inset-inline-start: var(--bm-space-2);
  z-index: var(--bm-z-base);
}

.bm-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--bm-space-4);
}

.bm-card__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-2);
  margin-block-start: auto;
  margin-block-end: var(--bm-space-2);
  min-height: 1.5rem;
}

.bm-card__category {
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-brand-text);
  letter-spacing: var(--bm-tracking-wide);
  text-transform: uppercase;
}

.bm-card__title {
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  margin-block-start: 0;
  margin-block-end: var(--bm-space-2);
  line-height: var(--bm-line-height-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1em * var(--bm-line-height-snug));
}

.bm-card__link {
  color: inherit;
  text-decoration: none;
}

.bm-card__link:hover {
  color: var(--bm-color-brand-text);
}

.bm-card__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-bold);
  background-color: var(--bm-color-accent-tint);
  color: var(--bm-color-accent-dark);
  padding-inline: var(--bm-space-2);
  padding-block: 0.125rem;
  border-radius: var(--bm-radius-sm);
  margin-block-end: var(--bm-space-2);
  width: fit-content;
}

.bm-rating-star {
  color: var(--bm-color-accent-base);
  font-size: var(--bm-text-sm);
  line-height: 1;
}

.bm-rating-score {
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-bold);
}

.bm-card__tagline {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
  line-height: var(--bm-line-height-normal);
  margin-block-start: 0;
  margin-block-end: var(--bm-space-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bm-card__tagline:empty {
  display: none !important;
}

.bm-card__price {
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-accent-dark);
  margin-block-end: var(--bm-space-1);
}

.bm-card__footer {
  padding-block-start: var(--bm-space-3);
  border-block-start: 1px solid var(--bm-color-line-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
  width: 100%;
  box-sizing: border-box;
}

.bm-card__location {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1);
}

.bm-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  width: 100%;
  box-sizing: border-box;
}

.bm-card__action-btn {
  flex: 1 1 calc(50% - var(--bm-space-1));
  min-width: 6.5rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-1-5);
  padding-inline: var(--bm-space-2);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  border-radius: var(--bm-radius-md);
  text-decoration: none;
  box-sizing: border-box;
  white-space: nowrap;
  transition: background-color var(--bm-transition-fast), border-color var(--bm-transition-fast), color var(--bm-transition-fast);
}

.bm-card__action-btn span {
  white-space: nowrap;
}

.bm-card__action-btn svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.bm-card__action-btn--whatsapp {
  background-color: var(--bm-color-whatsapp-tint);
  color: var(--bm-color-whatsapp-dark);
  border: 1px solid var(--bm-color-line-base);
}

.bm-card__action-btn--call {
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-line-base);
}

.bm-card__action-btn--call:hover {
  background-color: var(--bm-color-line-dark);
}

.bm-card__action-btn--view {
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-line-base);
}

.bm-card__action-btn--view:hover {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
  border-color: var(--bm-color-brand-base);
}

/* Dark mode polish: soften white-box logos and boost heart button border */
:root[data-bm-theme="dark"] .bm-card__media--logo {
  border-radius: var(--bm-radius-md);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-card__media--logo {
    border-radius: var(--bm-radius-md);
  }
}

:root[data-bm-theme="dark"] .bm-card__save-btn {
  border-color: var(--bm-color-line-dark);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-card__save-btn {
    border-color: var(--bm-color-line-dark);
  }
}

/* Dark mode contrast polish: price and ratings */
:root[data-bm-theme="dark"] .bm-card__price {
  color: var(--bm-color-accent-light);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-card__price {
    color: var(--bm-color-accent-light);
  }
}

:root[data-bm-theme="dark"] .bm-card__rating {
  color: var(--bm-color-accent-light);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-card__rating {
    color: var(--bm-color-accent-light);
  }
}
/* --------------------------------------------------------------------------
   8. Single Business Page
   -------------------------------------------------------------------------- */
.bm-business-hero {
  background-color: var(--bm-color-surface-light);
  border-block-end: 1px solid var(--bm-color-line-base);
  padding-block: var(--bm-space-8) var(--bm-space-10);
}

.bm-business-header {
  margin-block-end: var(--bm-space-6);
}

.bm-business-header--has-logo {
  display: flex;
  align-items: flex-start;
  gap: var(--bm-space-5);
}

.bm-business-header__logo {
  width: 5rem;
  height: 5rem;
  padding: var(--bm-space-2);
  background-color: var(--bm-color-surface-dark);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.bm-business-header__logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.bm-business-header__body {
  flex: 1;
  min-width: 0;
}

:root[data-bm-theme="dark"] .bm-business-header__logo {
  background-color: var(--bm-color-surface-dark);
  border-color: var(--bm-color-line-dark);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-business-header__logo {
    background-color: var(--bm-color-surface-dark);
    border-color: var(--bm-color-line-dark);
  }
}

@media (max-width: 640px) {
  .bm-business-header--has-logo {
    flex-direction: column;
    gap: var(--bm-space-3);
  }
}

.bm-business-header__badges {
  display: flex;
  gap: var(--bm-space-2);
  align-items: center;
  flex-wrap: wrap;
  margin-block-end: var(--bm-space-3);
}

.bm-business-header__badges .bm-badge {
  white-space: nowrap;
}

.bm-business-header__title {
  font-size: clamp(1.75rem, 4vw + 0.5rem, var(--bm-text-4xl));
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  letter-spacing: var(--bm-tracking-tight);
  margin-block: var(--bm-space-1) var(--bm-space-2);
  line-height: var(--bm-line-height-tight);
}

.bm-business-header__tagline {
  font-size: var(--bm-text-lg);
  color: var(--bm-color-muted-base);
  line-height: var(--bm-line-height-relaxed);
  margin: 0;
}

/* Multi-photo Gallery (Adaptive layouts for 1, 2, 3, 4, 5+ photos) */
.bm-business-gallery {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bm-space-3);
  border-radius: var(--bm-radius-lg);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
}

.bm-gallery__item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--bm-color-surface-muted);
}

.bm-gallery__img,
.bm-business-gallery__main,
.bm-business-gallery__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--bm-radius-md);
  transition: transform var(--bm-transition-normal), filter var(--bm-transition-fast);
}

.bm-gallery__item:hover .bm-gallery__img,
.bm-gallery__item:hover .bm-business-gallery__main,
.bm-gallery__item:hover .bm-business-gallery__thumb {
  transform: scale(1.025);
}

.bm-gallery__item:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: -2px;
}

/* 1 Image Variant */
.bm-business-gallery--1 {
  aspect-ratio: 16 / 9;
  max-height: 28rem;
}

/* 2 Images Variant (50/50 side-by-side) */
@media (min-width: 640px) {
  .bm-business-gallery--2 {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 16 / 9;
    max-height: 28rem;
  }
}

/* 3 Images Variant (60% lead + 2 stacked thumbs) */
.bm-business-gallery__side {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-3);
  height: 100%;
  min-height: 0;
}

.bm-business-gallery__side .bm-gallery__item {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
}

@media (min-width: 768px) {
  .bm-business-gallery--3 {
    grid-template-columns: 1.6fr 1fr;
    aspect-ratio: 16 / 9;
    max-height: 28rem;
  }

  /* 4 Images Variant (1.5fr lead + 3 stacked thumbs) */
  .bm-business-gallery--4 {
    grid-template-columns: 1.5fr 1fr;
    aspect-ratio: 16 / 9;
    max-height: 28rem;
  }

  /* 5+ Images Variant (2-row lead on left + 2x2 grid of thumbs on right) */
  .bm-business-gallery--5,
  .bm-business-gallery--more {
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 16 / 9;
    max-height: 28rem;
  }

  .bm-business-gallery--5 .bm-gallery__item--main,
  .bm-business-gallery--more .bm-gallery__item--main {
    grid-column: 1;
    grid-row: 1 / 3;
  }
}

/* Gallery mobile badge: hidden on desktop to prevent loose counter strip */
.bm-gallery__mobile-badge {
  display: none;
}

/* Mobile presentation for 3+ images */
@media (max-width: 767px) {
  .bm-business-gallery {
    aspect-ratio: 16 / 10;
    max-height: 20rem;
  }

  .bm-business-gallery--3 .bm-business-gallery__side,
  .bm-business-gallery--4 .bm-business-gallery__side,
  .bm-business-gallery--5 .bm-gallery__item:not(.bm-gallery__item--main),
  .bm-business-gallery--more .bm-gallery__item:not(.bm-gallery__item--main) {
    display: none;
  }

  .bm-gallery__mobile-badge {
    position: absolute;
    bottom: var(--bm-space-3);
    right: var(--bm-space-3);
    background-color: var(--bm-color-scrim-dark);
    color: var(--bm-color-text-on-dark);
    font-size: var(--bm-text-xs);
    font-weight: var(--bm-font-weight-semibold);
    padding: var(--bm-space-1) var(--bm-space-2-5);
    border-radius: var(--bm-radius-full);
    display: inline-flex;
    align-items: center;
    gap: var(--bm-space-1);
    backdrop-filter: blur(4px);
    pointer-events: none;
    z-index: 2;
  }
}

/* +N Photos Overlay on Last Thumbnail */
.bm-gallery__more-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--bm-color-scrim-dark);
  color: var(--bm-color-text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-1-5);
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-bold);
  backdrop-filter: blur(2px);
  border-radius: var(--bm-radius-md);
  transition: background-color var(--bm-transition-fast);
}

.bm-gallery__item:hover .bm-gallery__more-overlay {
  background-color: rgba(15, 23, 42, 0.78);
}

/* Single image hero variants (Photo wide vs Logo framed) */
.bm-business-hero__media-single--photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--bm-radius-lg);
  overflow: hidden;
  border: 1px solid var(--bm-color-line-base);
  max-height: 24rem;
}

@media (min-width: 768px) {
  .bm-business-hero__media-single--photo {
    aspect-ratio: 21 / 9;
  }
}

.bm-business-hero__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bm-business-hero__media-single--logo {
  display: flex;
  align-items: center;
  margin-block-start: var(--bm-space-4);
}

.bm-business-hero__logo-frame {
  width: 8.5rem;
  height: 8.5rem;
  padding: var(--bm-space-3);
  background-color: var(--bm-color-surface-dark);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bm-business-hero__logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

:root[data-bm-theme="dark"] .bm-business-hero__logo-frame {
  background-color: var(--bm-color-surface-dark);
  border-color: var(--bm-color-line-dark);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-business-hero__logo-frame {
    background-color: var(--bm-color-surface-dark);
    border-color: var(--bm-color-line-dark);
  }
}

/* Layout */
.bm-business-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bm-space-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .bm-business-layout {
    grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr);
    gap: var(--bm-space-8);
  }

  .bm-business-sidebar {
    position: sticky;
    top: var(--bm-space-6);
    align-self: start;
  }

  body.admin-bar .bm-business-sidebar {
    top: calc(32px + var(--bm-space-6));
  }
}

.bm-business-main {
  min-width: 0;
}

.bm-slot-card {
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  padding: var(--bm-space-4);
  margin-block-end: var(--bm-space-6);
  box-shadow: var(--bm-shadow-sm);
}

@media (min-width: 640px) {
  .bm-slot-card {
    padding: var(--bm-space-6);
  }
}

.bm-slot-card--about {
  display: flex;
  flex-direction: column;
}

.bm-slot-card--about .bm-prose {
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-base);
  line-height: var(--bm-line-height-relaxed);
  max-width: 65ch;
}

.bm-slot-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-3);
  margin-block-end: var(--bm-space-4);
  flex-wrap: wrap;
}

.bm-slot-card__title {
  font-size: var(--bm-text-xl);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  margin-block-start: 0;
  margin-block-end: var(--bm-space-4);
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
}

.bm-slot-card__header .bm-slot-card__title {
  margin-block-end: 0;
}

/* Opening hours table with Today highlight (WCAG AA/AAA contrast) */
.bm-hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bm-text-sm);
  line-height: var(--bm-line-height-normal);
}

.bm-hours-table td {
  padding-block: var(--bm-space-3);
  padding-inline: var(--bm-space-2);
  border-block-end: 1px solid var(--bm-color-hours-border);
  color: var(--bm-color-ink-base);
  vertical-align: middle;
}

@media (min-width: 640px) {
  .bm-hours-table td {
    padding-inline: var(--bm-space-3);
  }
}

.bm-hours-table td:first-child {
  width: 1%;
  white-space: nowrap;
  font-weight: var(--bm-font-weight-medium);
}

.bm-hours-table td:last-child {
  color: var(--bm-color-hours-time);
  font-weight: var(--bm-font-weight-medium);
  text-align: right;
  white-space: nowrap;
}

.bm-hours-table tr.is-today {
  background-color: var(--bm-color-hours-row-today-bg);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-hours-row-today-text);
}

.bm-hours-table tr.is-today td {
  color: var(--bm-color-hours-row-today-text);
  border-color: var(--bm-color-hours-row-today-border);
  padding-block: var(--bm-space-3);
}

.bm-hours-table tr.is-today td:last-child {
  color: var(--bm-color-hours-row-today-text);
  font-weight: var(--bm-font-weight-bold);
}

/* Business Sidebar & Booking Widget Placement */
.bm-business-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-6);
}

@media (min-width: 1280px) {
  .bm-business-sidebar {
    position: sticky;
    top: calc(4rem + var(--bm-space-4));
    align-self: start;
  }
}

.bm-booking-slot {
  width: 100%;
  box-sizing: border-box;
}

.bm-booking {
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  padding: var(--bm-space-6);
  box-shadow: var(--bm-shadow-sm);
  box-sizing: border-box;
  width: 100%;
}

.bm-booking__title {
  font-size: var(--bm-text-xl);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  margin-block-start: 0;
  margin-block-end: var(--bm-space-4);
}

/* Contact Card in Sidebar */
.bm-contact-card {
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  padding: var(--bm-space-6);
  box-shadow: var(--bm-shadow-sm);
}

.bm-contact-card__title {
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  margin-block-start: 0;
  margin-block-end: var(--bm-space-4);
}

.bm-contact-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-3);
  margin-block-end: var(--bm-space-4);
}

.bm-contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-3);
}

.bm-contact-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--bm-space-3);
  font-size: var(--bm-text-sm);
  line-height: var(--bm-line-height-normal);
  color: var(--bm-color-ink-base);
}

.bm-contact-list__item:empty {
  display: none !important;
}

.bm-contact-list__item a {
  color: var(--bm-color-ink-base);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--bm-transition-fast);
  word-break: break-word;
}

.bm-contact-list__item a:hover {
  color: var(--bm-color-brand-text);
}

.bm-contact-list__icon {
  flex: 0 0 1.25rem;
  color: var(--bm-color-muted-base);
  margin-block-start: 0.125rem;
}

/* Claim Listing Action Link (Single business sidebar) */
.bm-claim-action {
  margin-block-start: var(--bm-space-4);
  padding-block-start: var(--bm-space-3);
  border-block-start: 1px dashed var(--bm-color-line-base);
  text-align: center;
}

.bm-claim-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-2);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-base);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--bm-transition-fast);
}

.bm-claim-link:hover {
  color: var(--bm-color-brand-text);
}

.bm-claim-link svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--bm-color-brand-text);
}

/* --------------------------------------------------------------------------
   Booking Dialog & Modal (Desktop: Centred Modal, Mobile: Bottom Sheet)
   -------------------------------------------------------------------------- */
dialog.bm-dialog,
dialog.bm-booking-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 90%;
  max-width: 35rem;
  max-height: calc(100vh - var(--bm-space-12));
  padding: 0;
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-dark);
  box-shadow: var(--bm-shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 1001;
}

dialog.bm-dialog:not([open]),
dialog.bm-booking-dialog:not([open]) {
  display: none;
}

dialog.bm-dialog[open],
dialog.bm-booking-dialog[open] {
  display: flex;
}

dialog.bm-dialog::backdrop,
dialog.bm-booking-dialog::backdrop {
  background-color: var(--bm-color-scrim-dark, rgba(15, 23, 42, 0.65));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Progressive enhancement: when JS is disabled or not enhanced, render form inline */
.no-js dialog.bm-booking-dialog,
noscript dialog.bm-booking-dialog {
  display: block;
  position: static;
  max-width: 100%;
  margin-block-start: var(--bm-space-4);
  border-radius: var(--bm-radius-lg);
}

.no-js .bm-dialog__close,
noscript .bm-dialog__close,
.no-js .bm-btn--book,
noscript .bm-btn--book {
  display: none;
}

.bm-popup-backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--bm-color-scrim-dark, rgba(15, 23, 42, 0.65));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bm-transition-normal), visibility var(--bm-transition-normal);
}

.bm-popup-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.bm-popup,
.brx-popup.bm-booking-popup {
  position: fixed;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  box-sizing: border-box;
  transition: transform var(--bm-transition-normal), opacity var(--bm-transition-normal), visibility var(--bm-transition-normal);
}

.bm-popup.is-open,
.brx-popup.bm-booking-popup.is-open {
  opacity: 1;
  visibility: visible;
}

/* Desktop: Centred Modal (>= 768px) */
@media (min-width: 768px) {
  .bm-popup,
  .brx-popup.bm-booking-popup {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: 90%;
    max-width: 34rem;
    max-height: calc(100vh - var(--bm-space-12));
    background-color: var(--bm-color-surface-light);
    border: 1px solid var(--bm-color-line-base);
    border-radius: var(--bm-radius-xl);
    box-shadow: var(--bm-shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .bm-popup.is-open,
  .brx-popup.bm-booking-popup.is-open {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Mobile: Full-width Bottom Sheet (< 768px) */
@media (max-width: 767px) {
  dialog.bm-dialog,
  dialog.bm-booking-dialog {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    margin-block-end: 0;
    margin-inline: 0;
    border-radius: var(--bm-radius-xl) var(--bm-radius-xl) 0 0;
    border-bottom: none;
  }

  .bm-popup,
  .brx-popup.bm-booking-popup {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 88vh;
    transform: translateY(100%);
    background-color: var(--bm-color-surface-light);
    border-top: 1px solid var(--bm-color-line-base);
    border-radius: var(--bm-radius-xl) var(--bm-radius-xl) 0 0;
    box-shadow: var(--bm-shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .bm-popup.is-open,
  .brx-popup.bm-booking-popup.is-open {
    transform: translateY(0);
  }
}

.bm-dialog__inner,
.bm-popup__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.bm-dialog__header,
.bm-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bm-space-4) var(--bm-space-6);
  border-bottom: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-light);
  flex-shrink: 0;
}

.bm-dialog__title,
.bm-popup__title {
  margin: 0;
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
}

.bm-dialog__close,
.bm-popup__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-muted);
  color: var(--bm-color-ink-base);
  cursor: pointer;
  transition: background-color var(--bm-transition-fast), color var(--bm-transition-fast);
}

.bm-dialog__close:hover,
.bm-popup__close:hover {
  background-color: var(--bm-color-line-dark);
  color: var(--bm-color-ink-dark);
}

.bm-dialog__close:focus-visible,
.bm-popup__close:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
}

.bm-dialog__body,
.bm-popup__body {
  padding: var(--bm-space-6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex-grow: 1;
}

/* Dialog & Popup contained form styling & Gap removal */
.bm-dialog .bm-booking,
.bm-booking-dialog .bm-booking,
.bm-popup .bm-booking,
.bm-booking-popup .bm-booking {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.bm-dialog .bm-booking__title,
.bm-booking-dialog .bm-booking__title,
.bm-popup .bm-booking__title,
.bm-booking-popup .bm-booking__title {
  display: none;
}

.bm-form input[type="hidden"] {
  display: none;
}

.bm-form__hp {
  display: none;
}

.bm-form__notice:empty {
  display: none;
  margin: 0;
  padding: 0;
}

.bm-booking__form button[type="submit"] {
  width: 100%;
}

/* FAQs accordion */
.bm-prose details {
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  padding: var(--bm-space-3) var(--bm-space-4);
  margin-block-end: var(--bm-space-3);
  background-color: var(--bm-color-surface-base);
}

.bm-prose summary {
  font-weight: var(--bm-font-weight-semibold);
  cursor: pointer;
  color: var(--bm-color-ink-dark);
}

.bm-prose details[open] summary {
  margin-block-end: var(--bm-space-2);
}

/* Breadcrumbs navigation */
.bm-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-light);
  padding-block: var(--bm-space-2);
  flex-wrap: wrap;
  line-height: var(--bm-line-height-normal);
}

.bm-breadcrumbs a {
  color: var(--bm-color-ink-light);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--bm-space-1);
  border-radius: var(--bm-radius-sm);
  transition: color var(--bm-transition-fast);
}

.bm-breadcrumbs a:hover {
  color: var(--bm-color-brand-text);
}

.bm-breadcrumbs [aria-current="page"] {
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-semibold);
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--bm-space-1);
}

/* Sticky action bar on mobile */
.bm-mobile-sticky-bar {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: var(--bm-z-sticky-bar);
  padding-inline: var(--bm-space-4);
  padding-block: var(--bm-space-3) calc(var(--bm-space-3) + env(safe-area-inset-bottom, 0px));
  background-color: var(--bm-color-surface-light);
  border-block-start: 1px solid var(--bm-color-line-base);
  box-shadow: var(--bm-shadow-sticky-bar);
  display: flex;
  gap: var(--bm-space-2);
}

.bm-mobile-sticky-bar .bm-btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: var(--bm-space-2);
  font-size: var(--bm-text-xs);
  gap: var(--bm-space-1-5);
  justify-content: center;
}

.bm-mobile-sticky-bar .bm-btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .bm-mobile-sticky-bar {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   9. Page Header & Filter UI
   -------------------------------------------------------------------------- */
.bm-page-header {
  background-color: var(--bm-color-surface-base);
  border-block-end: 1px solid var(--bm-color-line-base);
  padding-block: var(--bm-space-6) var(--bm-space-8);
}

.bm-page-header__title {
  font-size: var(--bm-text-3xl);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  letter-spacing: var(--bm-tracking-tight);
  margin-block: var(--bm-space-2) var(--bm-space-1);
}

@media (min-width: 768px) {
  .bm-page-header__title {
    font-size: var(--bm-text-4xl);
  }
}

.bm-page-header__desc {
  font-size: var(--bm-text-base);
  color: var(--bm-color-muted-base);
  line-height: var(--bm-line-height-normal);
  margin: 0;
  max-width: 44rem;
}

/* Category Chips Row */
.bm-chip-row-wrapper {
  background-color: var(--bm-color-surface-light);
  border-block-end: 1px solid var(--bm-color-line-light);
  padding-block: var(--bm-space-3);
}

.bm-chip-row {
  display: flex;
  gap: var(--bm-space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--bm-space-1);
}

.bm-chip-row::-webkit-scrollbar {
  display: none;
}

.bm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  padding-inline: var(--bm-space-4);
  padding-block: var(--bm-space-2);
  min-height: 2.5rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-chip-bg);
  border: 1px solid var(--bm-color-chip-border);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--bm-transition-fast);
}

.bm-chip svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.bm-chip:hover {
  border-color: var(--bm-color-brand-base);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-brand-text);
}

.bm-chip--active {
  background-color: var(--bm-color-chip-active-bg);
  color: var(--bm-color-chip-active-text);
  border-color: var(--bm-color-chip-active-bg);
}

.bm-chip--active:hover {
  background-color: var(--bm-color-brand-dark);
  color: var(--bm-color-surface-light);
  border-color: var(--bm-color-brand-dark);
}

.bm-chip--active svg {
  stroke: var(--bm-color-chip-active-text);
}

/* Filter Bar & Toolbar */
.bm-filter-bar {
  background-color: var(--bm-color-surface-light);
  border-block-end: 1px solid var(--bm-color-line-base);
  padding-block: var(--bm-space-4);
}

.bm-filter-bar__toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-3);
}

@media (min-width: 768px) {
  .bm-filter-bar__toolbar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.bm-filter-bar__count {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
}

.bm-filter-bar__quick-form,
.bm-filter-bar__toolbar-form {
  display: flex;
  gap: var(--bm-space-2);
  align-items: center;
  flex-wrap: wrap;
}

.bm-filter-bar__search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 13rem;
}

.bm-filter-bar__search-wrap svg {
  position: absolute;
  inset-inline-start: var(--bm-space-3);
  color: var(--bm-color-muted-base);
  pointer-events: none;
}

.bm-filter-bar__search-input {
  width: 100%;
  padding-inline-start: calc(var(--bm-space-3) + 1.5rem);
  padding-inline-end: var(--bm-space-3);
  padding-block: var(--bm-space-2);
  border-radius: var(--bm-radius-md);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-base);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
  min-height: var(--bm-touch-target-min);
}

.bm-filter-bar__sort-wrap {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
}

.bm-filter-bar__sort-select {
  padding-inline: var(--bm-space-3);
  padding-block: var(--bm-space-2);
  border-radius: var(--bm-radius-md);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-base);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
  min-height: var(--bm-touch-target-min);
  cursor: pointer;
}

.bm-filter-bar__sort-select:focus {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 1px;
  border-color: var(--bm-color-brand-base);
}

.bm-filter-bar__sort-select--full {
  width: 100%;
}

.bm-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: var(--bm-touch-target-min);
  cursor: pointer;
}

.bm-filter-count-badge {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-surface-light);
  font-size: var(--bm-text-xs);
  border-radius: var(--bm-radius-full);
  padding-inline: var(--bm-space-1);
  min-width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--bm-font-weight-bold);
}

/* Active filter tags */
.bm-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  align-items: center;
  padding-block-start: var(--bm-space-3);
}

.bm-active-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1);
  padding-inline-start: var(--bm-space-3);
  padding-inline-end: var(--bm-space-1);
  min-height: var(--bm-touch-target-min);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-brand-tint);
  border: 1px solid var(--bm-color-brand-light);
  color: var(--bm-color-brand-dark);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-medium);
}

.bm-active-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bm-touch-target-min);
  min-height: var(--bm-touch-target-min);
  color: inherit;
  margin-inline-start: var(--bm-space-1);
  cursor: pointer;
  border-radius: var(--bm-radius-full);
}

.bm-active-filters__clear {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
  text-decoration: underline;
  margin-inline-start: var(--bm-space-2);
  display: inline-flex;
  align-items: center;
  min-height: var(--bm-touch-target-min);
  padding-inline: var(--bm-space-2);
}

.bm-active-filters__clear:hover {
  color: var(--bm-color-danger-base);
}

/* Filter Drawer / Bottom Sheet (No-JS CSS toggle support) */
.bm-filter-drawer-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  width: 0;
  height: 0;
  margin: 0;
}

.bm-filter-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--bm-z-drawer);
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bm-transition-normal), visibility var(--bm-transition-normal);
}

.bm-filter-drawer.is-open,
.bm-filter-drawer-toggle:checked ~ .bm-filter-drawer {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.bm-filter-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--bm-color-scrim-dark);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.bm-filter-drawer__panel {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  max-height: 85vh;
  background-color: var(--bm-color-surface-light);
  border-radius: var(--bm-radius-xl) var(--bm-radius-xl) 0 0;
  box-shadow: var(--bm-shadow-drawer);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
  transform: translateY(100%);
  transition: transform var(--bm-transition-normal);
}

.bm-filter-drawer.is-open .bm-filter-drawer__panel,
.bm-filter-drawer-toggle:checked ~ .bm-filter-drawer .bm-filter-drawer__panel {
  transform: translateY(0);
}

@media (min-width: 768px) {
  .bm-filter-drawer__panel {
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: 26rem;
    max-height: 100vh;
    border-radius: 0;
    transform: translateX(-100%);
  }

  body.admin-bar .bm-filter-drawer__panel {
    top: 32px;
    max-height: calc(100vh - 32px);
  }

  .bm-filter-drawer.is-open .bm-filter-drawer__panel,
  .bm-filter-drawer-toggle:checked ~ .bm-filter-drawer .bm-filter-drawer__panel {
    transform: translateX(0);
  }
}

@media (max-width: 782px) {
  body.admin-bar .bm-filter-drawer__panel {
    top: 46px;
    max-height: calc(100vh - 46px);
  }
}

.bm-filter-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--bm-space-6);
  padding-block: var(--bm-space-4);
  border-block-end: 1px solid var(--bm-color-line-base);
}

.bm-filter-drawer__title {
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
}

.bm-filter-drawer__close {
  background: transparent;
  border: none;
  font-size: var(--bm-text-xl);
  color: var(--bm-color-muted-base);
  cursor: pointer;
  padding: var(--bm-space-2);
}

.bm-filter-drawer__form {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: var(--bm-space-6);
}

.bm-filter-drawer__section {
  margin-block-end: var(--bm-space-6);
}

.bm-filter-drawer__label {
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
  margin-block-end: var(--bm-space-2);
  display: block;
}

.bm-filter-options-list {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-1);
}

.bm-filter-radio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--bm-touch-target-min);
  padding: var(--bm-space-2) var(--bm-space-3);
  border-radius: var(--bm-radius-md);
  cursor: pointer;
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
  box-sizing: border-box;
  transition: background-color var(--bm-transition-fast);
}

.bm-filter-radio:hover {
  background-color: var(--bm-color-surface-base);
}

.bm-filter-radio input {
  margin-inline-end: var(--bm-space-2);
}

.bm-filter-radio__count {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
  background-color: var(--bm-color-surface-dark);
  padding-inline: var(--bm-space-2);
  border-radius: var(--bm-radius-full);
}

.bm-filter-drawer__footer {
  display: flex;
  gap: var(--bm-space-3);
  padding-inline: var(--bm-space-6);
  padding-block: var(--bm-space-4);
  border-block-start: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-base);
  margin-block-start: auto;
}


/* --------------------------------------------------------------------------
   10. Trust Strip & Marketing Highlights
   -------------------------------------------------------------------------- */
.bm-trust-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bm-space-6);
  padding-block: var(--bm-space-8);
  border-block: 1px solid var(--bm-color-line-base);
}

@media (min-width: 768px) {
  .bm-trust-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bm-trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--bm-space-3);
}

.bm-trust-item__icon {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-color-brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bm-trust-item__title {
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
  margin-block: 0 var(--bm-space-1);
}

.bm-trust-item__desc {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
  margin: 0;
  line-height: var(--bm-line-height-normal);
}

/* --------------------------------------------------------------------------
   11. Call-To-Action Strip & Redesigned Footer
   -------------------------------------------------------------------------- */
.bm-cta-strip {
  background: var(--bm-gradient-cta);
  color: var(--bm-color-text-on-dark);
  padding-block: var(--bm-space-10) var(--bm-space-12);
}

.bm-cta-strip__inner {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-6);
}

@media (min-width: 768px) {
  .bm-cta-strip__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.bm-cta-strip__title {
  font-size: var(--bm-text-2xl);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-cta-title);
  margin-block: 0 var(--bm-space-2);
}

.bm-cta-strip__desc {
  font-size: var(--bm-text-base);
  color: var(--bm-color-cta-desc);
  margin: 0;
  max-width: 40rem;
  line-height: var(--bm-line-height-normal);
}

.bm-cta-strip__actions {
  display: flex;
  gap: var(--bm-space-3);
  align-items: center;
  flex-shrink: 0;
}

.bm-cta-strip .bm-btn--accent,
.bm-cta-strip .bm-btn {
  background-color: var(--bm-color-cta-btn-bg);
  color: var(--bm-color-cta-btn-text);
  border: 1px solid transparent;
}

.bm-cta-strip .bm-btn--accent:hover,
.bm-cta-strip .bm-btn:hover {
  background-color: var(--bm-color-cta-btn-hover-bg);
  color: var(--bm-color-cta-btn-hover-text);
}

.bm-footer {
  background-color: var(--bm-color-footer-bg);
  background-image: var(--bm-gradient-footer);
  color: var(--bm-color-footer-text);
  padding-block: var(--bm-space-12) var(--bm-space-6);
}

.bm-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bm-space-8);
  margin-block-end: var(--bm-space-10);
}

.bm-footer__brand {
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {
  .bm-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--bm-space-8);
  }

  .bm-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .bm-footer__grid {
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    gap: var(--bm-space-8);
  }

  .bm-footer__brand {
    grid-column: span 1;
  }

  .bm-footer__col:last-child {
    grid-column: span 1;
  }

  .bm-footer__desc {
    max-width: 100%;
  }
}

.bm-footer__logo {
  color: var(--bm-color-footer-heading);
}

.bm-footer__desc {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-footer-text);
  line-height: var(--bm-line-height-relaxed);
  margin-block: var(--bm-space-3) var(--bm-space-4);
  max-width: 22rem;
}

.bm-footer__social {
  display: flex;
  gap: var(--bm-space-2);
}

.bm-footer__social-btn {
  width: var(--bm-touch-target-min);
  height: var(--bm-touch-target-min);
  border-radius: var(--bm-radius-full);
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--bm-color-footer-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all var(--bm-transition-fast);
}

.bm-footer__social-btn svg {
  width: 1.375rem;
  height: 1.375rem;
}

.bm-footer__social-btn:hover {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-surface-light);
  transform: translateY(-2px);
}

.bm-footer__col {
  display: flex;
  flex-direction: column;
}

.bm-footer__col-title {
  color: var(--bm-color-footer-heading);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--bm-tracking-wide);
  margin-block: 0 var(--bm-space-4);
}

.bm-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-2);
}

.bm-footer__link {
  color: var(--bm-color-footer-text);
  text-decoration: none;
  font-size: var(--bm-text-sm);
  transition: color var(--bm-transition-fast);
}

.bm-footer__link:hover {
  color: var(--bm-color-footer-link-hover);
}

.bm-footer__bottom {
  border-block-start: 1px solid var(--bm-color-footer-line);
  padding-block: var(--bm-space-6);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-footer-text);
  width: 100%;
  box-sizing: border-box;
}

.bm-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-3);
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .bm-footer__bottom-inner {
    flex-direction: row;
    gap: var(--bm-space-4);
  }
}

.bm-footer__copy {
  color: var(--bm-color-footer-text);
}

.bm-footer__meta {
  color: var(--bm-color-footer-text);
}

/* --------------------------------------------------------------------------
   12. Pagination & Responsive Utilities
   -------------------------------------------------------------------------- */
.bm-pagination-wrapper {
  padding-block: var(--bm-space-6) var(--bm-space-16);
}

.bm-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--bm-space-2);
  margin-block: var(--bm-space-8) var(--bm-space-16);
  flex-wrap: wrap;
}

.bm-pagination__btn {
  min-height: var(--bm-touch-target-min);
  min-width: var(--bm-touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-1-5);
  padding-inline: var(--bm-space-3);
  border-radius: var(--bm-radius-md);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color var(--bm-transition-fast), border-color var(--bm-transition-fast), color var(--bm-transition-fast), box-shadow var(--bm-transition-fast);
}

.bm-pagination__btn:hover {
  background-color: var(--bm-color-surface-muted);
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-brand-text);
}

.bm-pagination__btn.is-active,
.bm-pagination__btn[aria-current="page"] {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-surface-light);
  border-color: var(--bm-color-brand-base);
  font-weight: var(--bm-font-weight-bold);
  box-shadow: var(--bm-shadow-sm);
}

.bm-pagination__btn--prev,
.bm-pagination__btn--next {
  padding-inline: var(--bm-space-4);
}

.bm-pagination__arrow {
  font-size: var(--bm-text-base);
  line-height: 1;
}

.bm-pagination__dots {
  border: none;
  background: transparent;
  cursor: default;
  color: var(--bm-color-muted-base);
}

/* Tighten section spacing above Similar businesses */
.bm-business-related {
  padding-block-start: var(--bm-space-6) !important;
  padding-block-end: var(--bm-space-10);
}

/* --------------------------------------------------------------------------
   13. Vanilla Lightbox Component
   -------------------------------------------------------------------------- */
.bm-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--bm-z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bm-color-lightbox-backdrop);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bm-transition-normal), visibility var(--bm-transition-normal);
  padding: var(--bm-space-4);
  box-sizing: border-box;
}

.bm-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.bm-lightbox__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 90vw;
  max-height: 90vh;
  outline: none;
}

.bm-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
  max-height: 80vh;
}

.bm-lightbox__image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--bm-radius-md);
  box-shadow: var(--bm-shadow-lg);
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity var(--bm-transition-fast), transform var(--bm-transition-fast);
}

.bm-lightbox__header {
  position: absolute;
  top: var(--bm-space-4);
  left: var(--bm-space-4);
  right: var(--bm-space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}

.bm-lightbox__counter {
  color: var(--bm-color-lightbox-text);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  background-color: var(--bm-color-lightbox-btn-bg);
  padding: var(--bm-space-1-5) var(--bm-space-3);
  border-radius: var(--bm-radius-full);
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: auto;
  backdrop-filter: blur(8px);
}

.bm-lightbox__close {
  background-color: var(--bm-color-lightbox-btn-bg);
  color: var(--bm-color-lightbox-text);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--bm-radius-full);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color var(--bm-transition-fast), transform var(--bm-transition-fast);
  backdrop-filter: blur(8px);
  margin-inline-start: auto;
}

.bm-lightbox__close:hover {
  background-color: var(--bm-color-lightbox-btn-hover);
  transform: scale(1.05);
}

.bm-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--bm-color-lightbox-btn-bg);
  color: var(--bm-color-lightbox-text);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--bm-radius-full);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background-color var(--bm-transition-fast), transform var(--bm-transition-fast);
  backdrop-filter: blur(8px);
}

.bm-lightbox__nav:hover {
  background-color: var(--bm-color-lightbox-btn-hover);
  transform: translateY(-50%) scale(1.08);
}

.bm-lightbox__nav--prev {
  left: var(--bm-space-4);
}

.bm-lightbox__nav--next {
  right: var(--bm-space-4);
}

.bm-lightbox__caption {
  margin-top: var(--bm-space-3);
  color: var(--bm-color-lightbox-text);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  text-align: center;
  max-width: 40rem;
  background-color: var(--bm-color-lightbox-btn-bg);
  padding: var(--bm-space-1-5) var(--bm-space-4);
  border-radius: var(--bm-radius-full);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
}

@media (max-width: 767px) {
  .bm-lightbox__nav {
    width: 2.75rem;
    height: 2.75rem;
  }
  .bm-lightbox__nav--prev {
    left: var(--bm-space-2);
  }
  .bm-lightbox__nav--next {
    right: var(--bm-space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bm-lightbox,
  .bm-lightbox__image,
  .bm-lightbox__close,
  .bm-lightbox__nav {
    transition: none !important;
  }
}

.bm-hide-mobile {
  display: inline-flex;
}

@media (max-width: 767px) {
  .bm-hide-mobile {
    display: none !important;
  }
}

.bm-empty-hide:empty {
  display: none !important;
}

/* --------------------------------------------------------------------------
   13. Empty States
   -------------------------------------------------------------------------- */
.bm-empty-state {
  text-align: center;
  padding-block: var(--bm-space-12);
  padding-inline: var(--bm-space-4);
  background-color: var(--bm-color-surface-light);
  border-radius: var(--bm-radius-xl);
  border: 1px solid var(--bm-color-line-base);
  box-shadow: var(--bm-shadow-card);
}

.bm-empty-illustration {
  margin-inline: auto;
  margin-block-end: var(--bm-space-4);
  display: block;
}

.bm-empty-state__icon {
  width: 3.5rem;
  height: 3.5rem;
  margin-inline: auto;
  margin-block-end: var(--bm-space-3);
  color: var(--bm-color-muted-light);
}

.bm-empty-state__title {
  font-size: var(--bm-text-xl);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  margin-block: 0 var(--bm-space-2);
}

.bm-empty-state__desc {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
  max-width: 28rem;
  margin-inline: auto;
  margin-block-end: var(--bm-space-6);
  line-height: var(--bm-line-height-normal);
}

.bm-empty-state__actions {
  display: flex;
  justify-content: center;
  gap: var(--bm-space-3);
  flex-wrap: wrap;
}


/* --------------------------------------------------------------------------
   14. Bento Grid (Modern 2026 Bento Layout & Showcase Cards)
   -------------------------------------------------------------------------- */
.bm-bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bm-space-4);
}

@media (min-width: 768px) {
  .bm-bento-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: var(--bm-space-6);
  }
}

.bm-bento-card {
  position: relative;
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-2xl);
  padding: var(--bm-space-6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--bm-shadow-bento);
  transition: transform var(--bm-transition-normal), box-shadow var(--bm-transition-normal), border-color var(--bm-transition-normal);
}

.bm-bento-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow-card-hover);
  border-color: var(--bm-color-line-dark);
}

.bm-bento-card--hero {
  background: var(--bm-gradient-bento-hero);
  color: var(--bm-color-surface-light);
  border: none;
}

@media (min-width: 768px) {
  .bm-bento-card--span-2 {
    grid-column: span 2;
  }
  .bm-bento-card--row-2 {
    grid-row: span 2;
  }
}

.bm-bento-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1-5);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  padding: var(--bm-space-1) var(--bm-space-3);
  border-radius: var(--bm-radius-full);
  background-color: rgba(255, 255, 255, 0.16);
  color: var(--bm-color-surface-light);
  width: fit-content;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bm-bento-card__icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bm-radius-xl);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-brand-text);
  margin-block-end: var(--bm-space-4);
}

.bm-bento-card--hero .bm-bento-card__icon {
  background-color: rgba(255, 255, 255, 0.18);
  color: var(--bm-color-surface-light);
}

.bm-bento-card__title {
  font-size: var(--bm-text-xl);
  font-weight: var(--bm-font-weight-bold);
  letter-spacing: var(--bm-tracking-tight);
  color: var(--bm-color-ink-dark);
  margin-block: 0 var(--bm-space-2);
}

.bm-bento-card__desc {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
  line-height: var(--bm-line-height-relaxed);
  margin: 0;
}

.bm-bento-card--hero .bm-bento-card__title {
  color: var(--bm-color-surface-light);
  font-size: var(--bm-text-2xl);
}

.bm-bento-card--hero .bm-bento-card__desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--bm-text-base);
}

.bm-bento-card__stats {
  display: flex;
  align-items: baseline;
  gap: var(--bm-space-2);
  margin-block-start: var(--bm-space-4);
}

.bm-bento-card__stat-num {
  font-size: var(--bm-text-3xl);
  font-weight: var(--bm-font-weight-extrabold);
  line-height: 1;
}

.bm-bento-card__stat-label {
  font-size: var(--bm-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--bm-tracking-wide);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   15. Scroll-Driven Animations (Pure CSS view-timeline with fallbacks)
   -------------------------------------------------------------------------- */
@keyframes bm-reveal-up {
  from {
    opacity: 0.95;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bm-reveal {
      animation: bm-reveal-up ease-out forwards;
      animation-timeline: view();
      animation-range: entry 5% cover 25%;
    }
  }
}

/* --------------------------------------------------------------------------
   16. Custom Dropdown Selects & Mobile Bottom Sheet
   -------------------------------------------------------------------------- */
/* Visually hide native select while preserving HTML form submission and validation */
/* Doubled class instead of: it beats every single-class rule on selects. If a framework rule with an id selector ever wins, check computed style on staging. */
select.bm-select-native.bm-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.bm-custom-select {
  position: relative;
  display: inline-block;
  width: 100%;
  font-family: var(--bm-font-sans);
}

.bm-custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--bm-touch-target-min);
  padding-inline: var(--bm-space-3);
  padding-block: var(--bm-space-2);
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  color: var(--bm-color-ink-base);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-base);
  line-height: var(--bm-line-height-normal);
  cursor: pointer;
  text-align: start;
  gap: var(--bm-space-2);
  user-select: none;
  transition: border-color var(--bm-transition-fast), box-shadow var(--bm-transition-fast), background-color var(--bm-transition-fast);
}

.bm-custom-select__trigger:hover {
  border-color: var(--bm-color-line-dark);
  background-color: var(--bm-color-surface-light);
}

.bm-custom-select__trigger:focus-visible,
.bm-custom-select.is-open .bm-custom-select__trigger {
  outline: none;
  border-color: var(--bm-color-brand-base);
  box-shadow: var(--bm-shadow-focus);
}

/* Modifiers for specific placements */
.bm-custom-select--search-bar .bm-custom-select__trigger {
  border: none;
  background: transparent;
  padding-inline: 0;
  min-height: var(--bm-touch-target-min);
  text-align: left;
  justify-content: flex-start;
  width: 100%;
}

.bm-custom-select--search-bar .bm-custom-select__value {
  text-align: left;
}

.bm-custom-select--search-bar .bm-custom-select__value--placeholder,
.bm-search-bar .bm-custom-select__value--placeholder {
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-medium);
  text-align: left;
}

.bm-custom-select--search-bar .bm-custom-select__trigger:focus-visible,
.bm-custom-select--search-bar.is-open .bm-custom-select__trigger {
  box-shadow: none;
}

.bm-custom-select--header {
  max-width: 14rem;
}

.bm-custom-select--header .bm-custom-select__trigger {
  font-size: var(--bm-text-sm);
  padding-inline: var(--bm-space-3);
  padding-block: var(--bm-space-1-5);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-base);
}

@media (max-width: 640px) {
  .bm-custom-select--header {
    max-width: 8.5rem;
  }
  .bm-custom-select--header .bm-custom-select__trigger {
    font-size: var(--bm-text-xs);
    padding-inline: var(--bm-space-2);
  }
}

.bm-custom-select--sort {
  min-width: 12rem;
}

.bm-custom-select--sort .bm-custom-select__trigger {
  font-size: var(--bm-text-sm);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-light);
}

.bm-custom-select--full {
  width: 100%;
}

.bm-custom-select.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Trigger Value & Arrow */
.bm-custom-select__value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bm-custom-select__value--placeholder {
  color: var(--bm-color-muted-base);
}

.bm-custom-select__arrow {
  flex: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bm-color-muted-base);
  transition: transform var(--bm-transition-fast), color var(--bm-transition-fast);
}

.bm-custom-select.is-open .bm-custom-select__arrow {
  transform: rotate(180deg);
  color: var(--bm-color-brand-text);
}

/* Mobile Backdrop */
.bm-custom-select__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: var(--bm-color-select-backdrop);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--bm-z-backdrop);
  opacity: 0;
  transition: opacity var(--bm-transition-fast);
}

.bm-custom-select__backdrop.is-open {
  display: block;
  opacity: 1;
}

/* Desktop Portalled Panel */
.bm-custom-select__panel {
  display: none;
  z-index: var(--bm-z-modal);
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  box-shadow: var(--bm-shadow-bento);
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--bm-transition-fast), transform var(--bm-transition-fast);
  max-height: 22rem;
  flex-direction: column;
}

.bm-custom-select__panel.is-open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.bm-custom-select__panel--flipped.is-open {
  transform: translateY(0);
}

.bm-custom-select__handle,
.bm-custom-select__sheet-header {
  display: none;
}

/* Search Box inside Panel */
.bm-custom-select__search-wrap {
  position: relative;
  padding: var(--bm-space-2) var(--bm-space-3);
  border-block-end: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-base);
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
  flex-shrink: 0;
}

.bm-custom-select__search-icon {
  color: var(--bm-color-muted-base);
  flex: 0 0 1rem;
  display: flex;
  align-items: center;
}

.bm-custom-select__search-input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
}

/* Options Container */
.bm-custom-select__options {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--bm-space-1);
  flex: 1;
}

.bm-custom-select__options::-webkit-scrollbar {
  width: 6px;
}
.bm-custom-select__options::-webkit-scrollbar-track {
  background: transparent;
}
.bm-custom-select__options::-webkit-scrollbar-thumb {
  background-color: var(--bm-color-line-dark);
  border-radius: var(--bm-radius-full);
}

.bm-custom-select__group-label {
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-muted-base);
  text-transform: uppercase;
  letter-spacing: var(--bm-tracking-wide);
  padding: var(--bm-space-2) var(--bm-space-3) var(--bm-space-1);
}

.bm-custom-select__option {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2-5);
  min-height: var(--bm-touch-target-min);
  padding: var(--bm-space-2) var(--bm-space-3);
  border-radius: var(--bm-radius-md);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--bm-transition-fast), color var(--bm-transition-fast);
  outline: none;
}

.bm-custom-select__option:hover,
.bm-custom-select__option:focus-visible {
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-dark);
}

.bm-custom-select__option.is-selected {
  background-color: var(--bm-color-select-active);
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-custom-select__option-icon {
  flex: 0 0 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bm-color-muted-base);
}

.bm-custom-select__option.is-selected .bm-custom-select__option-icon {
  color: var(--bm-color-brand-text);
}

.bm-custom-select__option-text {
  flex: 1;
}

.bm-custom-select__option-check {
  display: none;
  color: var(--bm-color-brand-text);
  flex: 0 0 1rem;
  align-items: center;
  justify-content: center;
}

.bm-custom-select__option.is-selected .bm-custom-select__option-check {
  display: inline-flex;
}

.bm-custom-select__empty {
  padding: var(--bm-space-4);
  text-align: center;
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
}

/* Mobile Bottom Sheet (<= 640px) */
@media (max-width: 640px) {
  .bm-custom-select__panel {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 82vh !important;
    border-radius: var(--bm-radius-2xl) var(--bm-radius-2xl) 0 0 !important;
    box-shadow: var(--bm-shadow-drawer) !important;
    border-inline: none !important;
    border-block-end: none !important;
    transform: translateY(100%) !important;
    transition: transform var(--bm-transition-normal) cubic-bezier(0.16, 1, 0.3, 1), opacity var(--bm-transition-fast) !important;
  }

  .bm-custom-select__panel.is-open {
    transform: translateY(0) !important;
  }

  .bm-custom-select__handle {
    display: block;
    width: 2.75rem;
    height: 0.25rem;
    background-color: var(--bm-color-line-dark);
    border-radius: var(--bm-radius-full);
    margin: var(--bm-space-3) auto var(--bm-space-2);
    flex-shrink: 0;
  }

  .bm-custom-select__sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--bm-space-4);
    padding-block-end: var(--bm-space-2);
    border-block-end: 1px solid var(--bm-color-line-base);
    flex-shrink: 0;
  }

  .bm-custom-select__sheet-title {
    font-size: var(--bm-text-base);
    font-weight: var(--bm-font-weight-bold);
    color: var(--bm-color-ink-dark);
  }

  .bm-custom-select__sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--bm-radius-full);
    background: transparent;
    border: none;
    color: var(--bm-color-muted-base);
    cursor: pointer;
  }

  .bm-custom-select__option {
    min-height: 3rem;
    padding-inline: var(--bm-space-4);
    font-size: var(--bm-text-base);
  }

  body.bm-select-sheet-open {
    overflow: hidden !important;
  }
}

/* --------------------------------------------------------------------------
   17. Jet Plugins Styling Integration (JetSearch, JetTabs, JetReviews, JetGeo)
   -------------------------------------------------------------------------- */
.jet-ajax-search {
  width: 100%;
}

.jet-ajax-search__field {
  border-radius: var(--bm-radius-lg);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  font-family: inherit;
}

.jet-ajax-search__results-holder {
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  box-shadow: var(--bm-shadow-xl);
  margin-top: var(--bm-space-2);
  overflow: hidden;
  z-index: var(--bm-z-dropdown);
}

.jet-ajax-search__item {
  padding: var(--bm-space-3) var(--bm-space-4);
  border-bottom: 1px solid var(--bm-color-line-light);
  transition: background-color var(--bm-transition-fast);
}

.jet-ajax-search__item:hover {
  background-color: var(--bm-color-surface-base);
}

.jet-tabs__control {
  font-family: inherit;
  font-weight: var(--bm-font-weight-semibold);
  border-radius: var(--bm-radius-md) var(--bm-radius-md) 0 0;
  color: var(--bm-color-muted-base);
  transition: all var(--bm-transition-fast);
}

.jet-tabs__control.active-tab {
  color: var(--bm-color-brand-text);
  background-color: var(--bm-color-surface-light);
  border-bottom: 2px solid var(--bm-color-brand-base);
}

.jet-reviews-star-rating__item--filled {
  color: var(--bm-color-accent-base);
}

.jet-engine-maps-holder {
  border-radius: var(--bm-radius-lg);
  overflow: hidden;
  border: 1px solid var(--bm-color-line-base);
  box-shadow: var(--bm-shadow-card);
}

/* --------------------------------------------------------------------------
   18. Accessibility: Prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Hero search bar fixes: Automatic.css [class*="btn--"] was overriding our button fill and width. Doubled class = higher specificity, no !important. */
.bm-btn.bm-btn--primary.bm-search-bar__submit {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
  border-color: var(--bm-color-brand-base);
  width: 100%;
}
.bm-btn.bm-btn--primary.bm-search-bar__submit:hover {
  background-color: var(--bm-color-brand-dark);
  border-color: var(--bm-color-brand-dark);
}
@media (min-width: 768px) {
  .bm-btn.bm-btn--primary.bm-search-bar__submit {
    width: auto;
  }
}
.bm-search-bar .bm-custom-select__trigger,
.bm-search-bar .bm-custom-select__value {
  text-align: start;
}
.bm-search-bar .bm-custom-select__value {
  flex: 1 1 auto;
  min-width: 0;
}

/* Card WhatsApp/Call buttons and header: Automatic.css [class*="btn--"] was overriding fill, border, radius and font size.
   Doubled class raises specificity above it; no !important, tokens only. */
.bm-card__action-btn.bm-card__action-btn--whatsapp,
.bm-card__action-btn.bm-card__action-btn--call,
.bm-card__action-btn.bm-card__action-btn--view {
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  line-height: var(--bm-line-height-normal);
  border-radius: var(--bm-radius-md);
  min-height: 2.75rem;
  padding-inline: var(--bm-space-2);
  gap: var(--bm-space-1-5);
}
.bm-card__action-btn.bm-card__action-btn--whatsapp {
  background-color: var(--bm-color-whatsapp-tint);
  color: var(--bm-color-whatsapp-dark);
  border: 1px solid var(--bm-color-whatsapp-base);
}
.bm-card__action-btn.bm-card__action-btn--call,
.bm-card__action-btn.bm-card__action-btn--view {
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-line-dark);
}
.bm-card__action-btn.bm-card__action-btn--call:hover,
.bm-card__action-btn.bm-card__action-btn--view:hover {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
  border-color: var(--bm-color-brand-base);
}

.bm-header .bm-btn.bm-btn--primary {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
  border: 1px solid var(--bm-color-brand-base);
  border-radius: var(--bm-radius-md);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  min-height: 2.5rem;
  padding-inline: var(--bm-space-4);
}
.bm-header .bm-btn.bm-btn--primary:hover {
  background-color: var(--bm-color-brand-dark);
  border-color: var(--bm-color-brand-dark);
}

.bm-header__nav {
  gap: var(--bm-space-2);
}
.bm-header__nav-link {
  min-height: 2.75rem;
  padding: var(--bm-space-2) var(--bm-space-3);
  border-radius: var(--bm-radius-md);
}
.bm-header__nav-link:hover {
  background-color: var(--bm-color-surface-muted);
}
.bm-header__nav-link.is-active {
  color: var(--bm-color-brand-text);
  background-color: var(--bm-color-brand-tint);
  font-weight: var(--bm-font-weight-bold);
  box-shadow: inset 0 -2px 0 var(--bm-color-brand-text);
}

/* Plain WordPress pages (login, dashboard, add business, post ad, my listings, claim).
   The full-width reset on #brx-content uses !important, so the container is applied to the page's children instead.
   Scoped to the default page template so Bricks-built pages are untouched. Tokens only. */
body.page-template-default #brx-content.type-page {
  color: var(--bm-color-ink-base);
  padding-block: var(--bm-space-8);
}
body.page-template-default #brx-content.type-page > * {
  width: 100%;
  max-width: var(--bm-container-max);
  margin-inline: auto;
  padding-inline: var(--bm-space-4);
  box-sizing: border-box;
}
@media (min-width: 768px) {
  body.page-template-default #brx-content.type-page > * { padding-inline: var(--bm-space-6); }
}
@media (min-width: 1280px) {
  body.page-template-default #brx-content.type-page > * { padding-inline: var(--bm-space-8); }
}
body.page-template-default #brx-content.type-page > h1 {
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-3xl, 2rem);
  margin-block: 0 var(--bm-space-6);
}
body.page-template-default #brx-content.type-page a:not(.bm-btn) {
  color: var(--bm-color-brand-text);
}

/* --------------------------------------------------------------------------
   19. Forms, Dashboard, Submissions & Account Styles (Tokens only, AA contrast)
   -------------------------------------------------------------------------- */
.bm-form {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-4);
  width: 100%;
  box-sizing: border-box;
}

.bm-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-1-5);
  width: 100%;
  box-sizing: border-box;
}

.bm-form__label {
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
}

.bm-form__help {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
  line-height: var(--bm-line-height-normal);
}

.bm-form__error {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-danger-base);
  font-weight: var(--bm-font-weight-medium);
}

.bm-form input[type="text"],
.bm-form input[type="email"],
.bm-form input[type="password"],
.bm-form input[type="tel"],
.bm-form input[type="url"],
.bm-form input[type="number"],
.bm-form input[type="date"],
.bm-form input[type="time"],
.bm-form textarea,
.bm-form select {
  width: 100%;
  min-height: var(--bm-touch-target-min);
  padding: var(--bm-space-2-5) var(--bm-space-3);
  border-radius: var(--bm-radius-md);
  border: 1px solid var(--bm-color-line-dark);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-base);
  line-height: var(--bm-line-height-normal);
  box-sizing: border-box;
  transition: border-color var(--bm-transition-fast), box-shadow var(--bm-transition-fast);
}

.bm-form input:focus-visible,
.bm-form textarea:focus-visible,
.bm-form select:focus-visible {
  outline: none;
  border-color: var(--bm-color-brand-base);
  box-shadow: var(--bm-shadow-focus);
}

.bm-form input::placeholder,
.bm-form textarea::placeholder {
  color: var(--bm-color-muted-base);
}

.bm-form__hp {
  display: none !important;
}

.bm-form__notice {
  color: var(--bm-color-ink-base);
  background-color: var(--bm-color-surface-muted);
  padding: var(--bm-space-3) var(--bm-space-4);
  border-radius: var(--bm-radius-md);
  font-size: var(--bm-text-sm);
  line-height: var(--bm-line-height-normal);
  margin-block-end: var(--bm-space-4);
}

.bm-form__notice--ok {
  background-color: var(--bm-color-success-tint);
  border: 1px solid var(--bm-color-success-base);
  color: var(--bm-color-success-dark);
}

.bm-form__notice--err {
  background-color: var(--bm-color-danger-tint);
  border: 1px solid var(--bm-color-danger-base);
  color: var(--bm-color-danger-dark);
}

.bm-booking__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bm-space-3);
}

@media (min-width: 640px) {
  .bm-booking__row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1280px) {
  .bm-business-sidebar .bm-booking__row {
    grid-template-columns: 1fr;
  }
}

/* Dashboard & Listings Management */
.bm-dash-wrap {
  width: 100%;
  overflow-x: auto;
  margin-block: var(--bm-space-6);
}

.bm-dash {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--bm-text-sm);
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  overflow: hidden;
}

.bm-dash th {
  padding: var(--bm-space-3) var(--bm-space-4);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
  background-color: var(--bm-color-surface-dark);
  border-block-end: 2px solid var(--bm-color-line-base);
}

.bm-dash td {
  padding: var(--bm-space-3) var(--bm-space-4);
  color: var(--bm-color-ink-base);
  border-block-end: 1px solid var(--bm-color-line-base);
  vertical-align: middle;
}

.bm-dash tr:last-child td {
  border-block-end: none;
}

.bm-dash tr:hover td {
  background-color: var(--bm-color-surface-muted);
}

.bm-dash__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  align-items: center;
}

.bm-claim {
  margin-block: var(--bm-space-4);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
}

.bm-claim summary {
  cursor: pointer;
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-semibold);
  padding-block: var(--bm-space-2);
}

.bm-login-register {
  margin-block: var(--bm-space-8);
}

/* --------------------------------------------------------------------------
   20. Modern SaaS Owner Dashboard & Bookings Calendar (FLY-1614 / FLY-1621 / FLY-1639)
   Tokens only, AA contrast, light & dark mode, mobile-first responsive.
   -------------------------------------------------------------------------- */

.bm-dash-layout {
  display: flex;
  min-height: 100vh;
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
}

/* Sidebar (Desktop 16rem / 256px, Collapsible/Offcanvas on Mobile) */
.bm-dash-sidebar {
  width: 16rem;
  flex-shrink: 0;
  background-color: var(--bm-color-surface-light);
  border-inline-end: 1px solid var(--bm-color-line-base);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: var(--bm-z-sticky);
  transition: transform var(--bm-transition-normal);
}

@media (max-width: 1023px) {
  .bm-dash-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    transform: translateX(-100%);
    box-shadow: var(--bm-shadow-xl);
    z-index: var(--bm-z-modal);
  }
  .bm-dash-sidebar.is-open {
    transform: translateX(0);
  }
}

.bm-dash-sidebar__header {
  padding: var(--bm-space-4) var(--bm-space-5);
  border-block-end: 1px solid var(--bm-color-line-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bm-dash-sidebar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2-5);
  text-decoration: none;
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-bold);
  font-size: var(--bm-text-base);
}

.bm-dash-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--bm-space-4) var(--bm-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-1);
}

.bm-dash-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--bm-space-3);
  padding: var(--bm-space-2-5) var(--bm-space-3);
  border-radius: var(--bm-radius-md);
  color: var(--bm-color-ink-base);
  text-decoration: none;
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  transition: background-color var(--bm-transition-fast), color var(--bm-transition-fast);
}

.bm-dash-sidebar__link svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--bm-color-muted-base);
  transition: color var(--bm-transition-fast);
}

.bm-dash-sidebar__link:hover {
  background-color: var(--bm-color-surface-muted);
  color: var(--bm-color-ink-dark);
}

.bm-dash-sidebar__link:hover svg {
  color: var(--bm-color-brand-text);
}

.bm-dash-sidebar__link.is-active {
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-dash-sidebar__link.is-active svg {
  color: var(--bm-color-brand-text);
}

.bm-dash-sidebar__badge {
  margin-inline-start: auto;
  padding: 0.125rem 0.5rem;
  border-radius: var(--bm-radius-full);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-bold);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
}

.bm-dash-sidebar__footer {
  padding: var(--bm-space-4);
  border-block-start: 1px solid var(--bm-color-line-light);
  display: flex;
  align-items: center;
  gap: var(--bm-space-3);
}

/* Mobile Bottom Navigation (Visible under 768px) */
.bm-dash-bottom-nav {
  display: none;
}

@media (max-width: 767px) {
  .bm-dash-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3.75rem;
    background-color: var(--bm-color-surface-light);
    border-block-start: 1px solid var(--bm-color-line-base);
    z-index: var(--bm-z-sticky);
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  }

  .bm-dash-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--bm-color-muted-base);
    text-decoration: none;
    font-size: var(--bm-text-xs);
    font-weight: var(--bm-font-weight-medium);
    padding: var(--bm-space-1);
    flex: 1;
  }

  .bm-dash-bottom-nav__item svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .bm-dash-bottom-nav__item.is-active {
    color: var(--bm-color-brand-text);
    font-weight: var(--bm-font-weight-bold);
  }

  /* Leave clearance for bottom nav on mobile */
  .bm-dash-content {
    padding-block-end: 5rem !important;
  }
}

/* Main Area & Topbar */
.bm-dash-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--bm-color-surface-base);
}

.bm-dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-4);
  padding: var(--bm-space-3) var(--bm-space-6);
  background-color: var(--bm-color-surface-light);
  border-block-end: 1px solid var(--bm-color-line-base);
  position: sticky;
  top: 0;
  z-index: var(--bm-z-base);
}

.bm-dash-topbar__start {
  display: flex;
  align-items: center;
  gap: var(--bm-space-3);
  flex: 1;
  max-width: 28rem;
}

.bm-dash-topbar__search {
  position: relative;
  width: 100%;
}

.bm-dash-topbar__search input {
  width: 100%;
  min-height: 2.375rem;
  padding: var(--bm-space-1-5) var(--bm-space-3) var(--bm-space-1-5) 2.25rem;
  border-radius: var(--bm-radius-md);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  box-sizing: border-box;
}

.bm-dash-topbar__search svg {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--bm-color-muted-base);
  pointer-events: none;
}

.bm-dash-topbar__end {
  display: flex;
  align-items: center;
  gap: var(--bm-space-3);
}

.bm-dash-topbar__user {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2-5);
  text-decoration: none;
  color: var(--bm-color-ink-dark);
}

.bm-dash-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--bm-radius-full);
  background: var(--bm-color-brand-base);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--bm-font-weight-bold);
  font-size: var(--bm-text-xs);
  flex-shrink: 0;
}

/* Dashboard Content Area */
.bm-dash-content {
  padding: var(--bm-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-6);
  box-sizing: border-box;
}

@media (max-width: 639px) {
  .bm-dash-content {
    padding: var(--bm-space-4);
    gap: var(--bm-space-4);
  }
}

.bm-dash-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-4);
}

.bm-dash-header__title {
  margin: 0;
  font-size: var(--bm-text-2xl);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
}

.bm-dash-header__desc {
  margin: var(--bm-space-1) 0 0;
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
}

.bm-dash-header__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-2-5);
}

/* KPI Cards Grid */
.bm-kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bm-space-4);
}

@media (min-width: 640px) {
  .bm-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .bm-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.bm-kpi-card {
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  padding: var(--bm-space-5);
  box-shadow: var(--bm-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-3);
  transition: transform var(--bm-transition-fast), box-shadow var(--bm-transition-fast);
}

.bm-kpi-card:hover {
  box-shadow: var(--bm-shadow-md);
  transform: translateY(-2px);
}

.bm-kpi-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bm-kpi-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-color-brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bm-kpi-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.bm-kpi-card__icon--accent {
  background-color: var(--bm-color-accent-tint);
  color: var(--bm-color-accent-dark);
}

.bm-kpi-card__icon--whatsapp {
  background-color: var(--bm-color-whatsapp-tint);
  color: var(--bm-color-whatsapp-dark);
}

.bm-delta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  padding: 0.125rem 0.5rem;
  border-radius: var(--bm-radius-full);
}

.bm-delta-chip--up {
  background-color: var(--bm-color-success-tint);
  color: var(--bm-color-success-dark);
}

.bm-delta-chip--down {
  background-color: var(--bm-color-danger-tint);
  color: var(--bm-color-danger-dark);
}

.bm-delta-chip--neutral {
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-muted-base);
}

.bm-kpi-card__value {
  font-size: var(--bm-text-3xl);
  font-weight: var(--bm-font-weight-extrabold);
  color: var(--bm-color-ink-dark);
  line-height: 1;
}

.bm-kpi-card__label {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
  font-weight: var(--bm-font-weight-medium);
}

/* Charts Grid & Cards */
.bm-charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bm-space-6);
}

@media (min-width: 1024px) {
  .bm-charts-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.bm-chart-card {
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  padding: var(--bm-space-5);
  box-shadow: var(--bm-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-4);
}

.bm-chart-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
}

.bm-chart-card__title {
  margin: 0;
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
}

.bm-chart-card__subtitle {
  margin: 0.125rem 0 0;
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
}

.bm-chart-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.bm-chart-line {
  fill: none;
  stroke: var(--bm-color-brand-base);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bm-chart-area {
  fill: url(#bm-chart-gradient);
  opacity: 0.25;
}

.bm-chart-bar {
  fill: var(--bm-color-brand-base);
  rx: 4;
  transition: fill var(--bm-transition-fast);
}

.bm-chart-bar:hover,
.bm-chart-bar.is-peak {
  fill: var(--bm-color-accent-base);
}

.bm-chart-gridline {
  stroke: var(--bm-color-line-light);
  stroke-dasharray: 4 4;
}

.bm-chart-axis-label {
  font-size: 11px;
  fill: var(--bm-color-muted-base);
  font-family: var(--bm-font-sans);
}

/* Bookings Calendar & Timeline Section (Extra idea) */
.bm-timeline-card {
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  padding: var(--bm-space-5);
  box-shadow: var(--bm-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-4);
}

.bm-next-booking-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-4);
  background: var(--bm-color-surface-dark);
  border: 1px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-lg);
  padding: var(--bm-space-4);
}

.bm-next-booking-callout__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-bold);
}

.bm-timeline-scroll {
  overflow-x: auto;
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
}

.bm-timeline-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 48rem;
  table-layout: fixed;
}

.bm-timeline-table th,
.bm-timeline-table td {
  border: 1px solid var(--bm-color-line-light);
  padding: var(--bm-space-2) var(--bm-space-3);
  text-align: center;
  vertical-align: middle;
}

.bm-timeline-table th {
  background-color: var(--bm-color-surface-dark);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
}

.bm-timeline-table th.is-today,
.bm-timeline-table td.is-today {
  background-color: var(--bm-color-brand-tint);
}

.bm-timeline-table th.is-weekend,
.bm-timeline-table td.is-weekend {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 6px, var(--bm-color-surface-dark) 6px, var(--bm-color-surface-dark) 12px);
}

.bm-timeline-row-label {
  text-align: left !important;
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
  width: 14rem;
  background-color: var(--bm-color-surface-light) !important;
}

.bm-timeline-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--bm-radius-md);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-medium);
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bm-timeline-bar--confirmed {
  background-color: var(--bm-color-success-tint);
  border: 1px solid var(--bm-color-success-base);
  color: var(--bm-color-success-dark);
}

.bm-timeline-bar--pending {
  background-color: var(--bm-color-accent-tint);
  border: 1px solid var(--bm-color-accent-base);
  color: var(--bm-color-accent-dark);
}

.bm-timeline-bar--declined {
  background-color: var(--bm-color-surface-dark);
  border: 1px solid var(--bm-color-line-base);
  color: var(--bm-color-muted-base);
}

/* Status Chips */
.bm-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border-radius: var(--bm-radius-full);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-status-chip--confirmed,
.bm-status-chip--active {
  background-color: var(--bm-color-success-tint);
  color: var(--bm-color-success-dark);
}

.bm-status-chip--pending {
  background-color: var(--bm-color-accent-tint);
  color: var(--bm-color-accent-dark);
}

.bm-status-chip--declined,
.bm-status-chip--expired {
  background-color: var(--bm-color-danger-tint);
  color: var(--bm-color-danger-dark);
}

/* Empty State Card */
.bm-dash-empty {
  background-color: var(--bm-color-surface-light);
  border: 2px dashed var(--bm-color-line-dark);
  border-radius: var(--bm-radius-xl);
  padding: var(--bm-space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bm-space-4);
  max-width: 36rem;
  margin-inline: auto;
}

.bm-dash-empty__icon {
  width: 4rem;
  height: 4rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-color-brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bm-dash-empty__icon svg {
  width: 2rem;
  height: 2rem;
}

/* Add / Manage Widgets Drawer / Panel */
.bm-widget-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: 22rem;
  max-width: 90vw;
  background-color: var(--bm-color-surface-light);
  border-inline-start: 1px solid var(--bm-color-line-base);
  box-shadow: var(--bm-shadow-xl);
  z-index: var(--bm-z-modal);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--bm-transition-normal);
}

.bm-widget-drawer.is-open {
  transform: translateX(0);
}

.bm-widget-drawer__header {
  padding: var(--bm-space-4) var(--bm-space-5);
  border-block-end: 1px solid var(--bm-color-line-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bm-widget-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--bm-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-4);
}

.bm-widget-toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bm-space-3);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-base);
}



/* Single business: price tier badge, amenity list, map block (uses existing tokens only) */
.bm-badge--price {
  background-color: var(--bm-color-surface-muted);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-line-base);
  font-weight: var(--bm-font-weight-semibold);
  letter-spacing: 0.04em;
}

.bm-amenity-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-amenity-list .bm-amenity {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  padding-inline: var(--bm-space-3);
  padding-block: var(--bm-space-2);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-muted);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  line-height: var(--bm-line-height-tight);
}

.bm-slot-card--map .bm-map {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bm-space-3);
}

.bm-slot-card--map .bm-map__frame {
  width: 100%;
  min-height: 16rem;
  border-radius: var(--bm-radius-md);
  overflow: hidden;
}

.bm-slot-card--map .bm-map__frame iframe {
  display: block;
  width: 100%;
  height: 16rem;
  border: 0;
}

.bm-slot-card--map .bm-map__note {
  margin: 0;
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
}

.bm-slot-card--map .bm-map__load,
.bm-slot-card--map .bm-map__directions {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.bm-filter-drawer__hint {
  margin: var(--bm-space-2) 0 0;
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
}

/* Plans ([bm_plans] from bm-plans.php) */
.bm-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--bm-space-4);
  align-items: stretch;
}

.bm-plan {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-3);
  padding: var(--bm-space-5);
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  box-shadow: var(--bm-shadow-sm);
  color: var(--bm-color-ink-base);
}

.bm-plan.bm-plan--featured {
  border-color: var(--bm-color-brand-base);
  border-width: 2px;
}

.bm-plan__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-2);
  margin: 0;
  font-size: var(--bm-text-lg);
}

.bm-plan__badge {
  padding-inline: var(--bm-space-2);
  padding-block: var(--bm-space-1);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-text-on-dark);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-medium);
}

.bm-plan__price {
  margin: 0;
  font-size: var(--bm-text-xl);
  font-weight: var(--bm-font-weight-bold);
}

.bm-plan__period {
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
}

.bm-plan__blurb {
  margin: 0;
  font-size: var(--bm-text-sm);
}

.bm-plan__features {
  margin: 0;
  padding-inline-start: var(--bm-space-4);
  display: grid;
  gap: var(--bm-space-1);
  font-size: var(--bm-text-sm);
}

.bm-plan__cta {
  margin: auto 0 0;
}

.bm-slot-card--map .bm-map__directions {
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Trust: last checked line, report form, safety tips */
.bm-freshness {
  margin: var(--bm-space-2) 0 0;
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
}

.bm-freshness.bm-freshness--stale span {
  font-weight: var(--bm-font-weight-semibold);
}

.bm-report {
  margin-block-start: var(--bm-space-4);
  border-top: 1px solid var(--bm-color-line-base);
  padding-block-start: var(--bm-space-3);
}

.bm-report .bm-report__toggle {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.bm-report .bm-report__form {
  display: grid;
  gap: var(--bm-space-3);
}

.bm-report .bm-report__field {
  display: grid;
  gap: var(--bm-space-1);
  margin: 0;
  font-size: var(--bm-text-sm);
}

.bm-report .bm-report__field select,
.bm-report .bm-report__field textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--bm-space-2);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  font: inherit;
}

.bm-report .bm-report__hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.bm-report .bm-report__actions {
  margin: 0;
}

.bm-report .bm-report__notice {
  margin: var(--bm-space-2) 0;
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
}

.bm-safety {
  padding: var(--bm-space-4);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-color-surface-muted);
  color: var(--bm-color-ink-base);
}

.bm-safety .bm-safety__title {
  margin: 0 0 var(--bm-space-2);
  font-size: var(--bm-text-base);
}

.bm-safety .bm-safety__list {
  margin: 0;
  padding-inline-start: var(--bm-space-4);
  display: grid;
  gap: var(--bm-space-1);
  font-size: var(--bm-text-sm);
}

/* Certificates on the single page: certified (checked by staff) and owner stated look different on purpose */
.bm-cert-list {
  display: grid;
  gap: var(--bm-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-cert-list .bm-cert {
  display: grid;
  gap: var(--bm-space-1);
  padding: var(--bm-space-3);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-muted);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
}

.bm-cert-list .bm-cert--certified {
  border-color: var(--bm-color-success-base);
  background-color: var(--bm-color-success-tint);
  color: var(--bm-color-success-dark);
}

.bm-cert-list .bm-cert__name {
  font-weight: var(--bm-font-weight-bold);
  font-size: var(--bm-text-base);
}

.bm-cert-list .bm-cert__status {
  font-weight: var(--bm-font-weight-semibold);
}

.bm-form__cert {
  display: grid;
  gap: var(--bm-space-2);
  margin-block-end: var(--bm-space-3);
}

/* Reviews (bm-reviews.php) */
.bm-reviews .bm-reviews__title {
  margin: 0 0 var(--bm-space-3);
  font-size: var(--bm-text-xl);
}

.bm-reviews .bm-reviews__summary,
.bm-reviews .bm-reviews__empty,
.bm-reviews .bm-reviews__note,
.bm-reviews .bm-reviews__notice {
  margin: 0 0 var(--bm-space-3);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-base);
}

.bm-reviews .bm-reviews__avg {
  font-weight: var(--bm-font-weight-bold);
  font-size: var(--bm-text-lg);
}

.bm-reviews .bm-reviews__list {
  display: grid;
  gap: var(--bm-space-4);
  margin: 0 0 var(--bm-space-4);
  padding: 0;
  list-style: none;
}

.bm-reviews .bm-review {
  padding-block-end: var(--bm-space-4);
  border-bottom: 1px solid var(--bm-color-line-base);
  color: var(--bm-color-ink-base);
}

.bm-reviews .bm-review__head,
.bm-reviews .bm-review__body {
  margin: 0 0 var(--bm-space-2);
}

.bm-reviews .bm-review__who {
  font-weight: var(--bm-font-weight-semibold);
}

.bm-reviews .bm-review__reply {
  margin-block-start: var(--bm-space-2);
  padding: var(--bm-space-3);
  border-inline-start: 3px solid var(--bm-color-brand-base);
  background-color: var(--bm-color-surface-muted);
  border-radius: var(--bm-radius-md);
  font-size: var(--bm-text-sm);
}

.bm-reviews .bm-review__reply p {
  margin: 0;
}

.bm-reviews .bm-review__reply-label {
  font-weight: var(--bm-font-weight-semibold);
  margin-block-end: var(--bm-space-1);
}

.bm-reviews .bm-review__reply-form summary {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.bm-reviews .bm-review__reply-form form,
.bm-reviews .bm-reviews__form {
  display: grid;
  gap: var(--bm-space-3);
}

.bm-reviews .bm-reviews__field {
  display: grid;
  gap: var(--bm-space-1);
  margin: 0;
  font-size: var(--bm-text-sm);
}

.bm-reviews .bm-reviews__field select,
.bm-reviews .bm-reviews__field textarea,
.bm-reviews .bm-review__reply-form textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--bm-space-2);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  font: inherit;
}

.bm-reviews .bm-reviews__hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.bm-reviews .bm-reviews__login a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-semibold);
}


/* "Write a review" heading: it had no rule, so the page's dark heading colour showed on the dark card */
.bm-reviews .bm-reviews__form-title {
  margin: var(--bm-space-4) 0 var(--bm-space-2);
  font-size: var(--bm-text-lg);
  color: var(--bm-color-ink-base);
}
/* Social link fields on the owner form */
.bm-form__social {
  display: grid;
  gap: var(--bm-space-2);
}

.bm-form__social .bm-form__social-row {
  display: grid;
  gap: var(--bm-space-1);
  font-size: var(--bm-text-sm);
}

.bm-form__social .bm-form__social-row input {
  width: 100%;
  min-height: 2.75rem;
}

/* Special hours */
.bm-hours-notes {
  display: grid;
  gap: var(--bm-space-2);
  margin: 0;
  padding-inline-start: var(--bm-space-4);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
}

.bm-form__hours-special {
  display: grid;
  gap: var(--bm-space-2);
}

.bm-form__hours-special textarea {
  width: 100%;
  min-height: 6rem;
}

/* Saved listings and searches */
.bm-saved .bm-saved__notice,
.bm-saved-tab .bm-saved__notice,
.bm-saved-search .bm-saved__notice {
  margin: 0 0 var(--bm-space-2);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
}

.bm-saved-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-2);
  margin-block-start: var(--bm-space-3);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
}

.bm-saved-search .bm-saved-search__label input {
  min-height: 2.75rem;
  max-width: 100%;
  padding: var(--bm-space-2);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
}

.bm-saved-tab .bm-saved-tab__list {
  display: grid;
  gap: var(--bm-space-3);
  margin: 0 0 var(--bm-space-5);
  padding: 0;
  list-style: none;
}

.bm-saved-tab .bm-saved-tab__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-2);
  padding-block-end: var(--bm-space-3);
  border-bottom: 1px solid var(--bm-color-line-base);
}

.bm-saved-tab .bm-saved-tab__list a {
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-saved-searches__mode-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.bm-saved-searches__mode-select {
  min-height: 2.25rem;
  padding: var(--bm-space-1) var(--bm-space-2);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-xs);
  cursor: pointer;
}

:root[data-bm-theme="dark"] .bm-saved-searches__mode-select {
  border-color: var(--bm-color-line-base);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-saved-searches__mode-select {
    border-color: var(--bm-color-line-base);
    background-color: var(--bm-color-surface-light);
    color: var(--bm-color-ink-base);
  }
}

.bm-saved-searches__mode-select:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
}

.bm-saved-alerts-pref {
  margin-top: var(--bm-space-4);
  padding: var(--bm-space-3) var(--bm-space-4);
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  display: flex;
  align-items: center;
  gap: var(--bm-space-3);
}

:root[data-bm-theme="dark"] .bm-saved-alerts-pref {
  background-color: var(--bm-color-surface-light);
  border-color: var(--bm-color-line-base);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-saved-alerts-pref {
    background-color: var(--bm-color-surface-light);
    border-color: var(--bm-color-line-base);
  }
}

.bm-saved-alerts-pref__label {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
  cursor: pointer;
}
/* Single Buy & Sell (ad) page: price, posted line, sold notice, photo grid (mirrors the business page; tokens only) */
.bm-ad-price {
  margin: var(--bm-space-2) 0 0;
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-2xl, var(--bm-text-xl));
  font-weight: var(--bm-font-weight-bold);
}

.bm-ad-price .bm-ad-price__note {
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
}

.bm-ad-posted {
  margin: var(--bm-space-1) 0 0;
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
}

.bm-ad-sold {
  display: inline-block;
  margin: var(--bm-space-3) 0 0;
  padding-inline: var(--bm-space-3);
  padding-block: var(--bm-space-2);
  border: 1px solid var(--bm-color-badge-closed-border);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-badge-closed-bg);
  color: var(--bm-color-badge-closed-text);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-ad-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  gap: var(--bm-space-2);
  margin-block-start: var(--bm-space-4);
}

.bm-ad-gallery .bm-ad-gallery__item {
  display: block;
  overflow: hidden;
  border-radius: var(--bm-radius-md);
  aspect-ratio: 4 / 3;
  background-color: var(--bm-color-surface-muted);
}

.bm-ad-gallery .bm-ad-gallery__item--main {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.bm-ad-gallery .bm-gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bm-contact-card .bm-contact-card__none {
  margin: 0;
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
}
/* Click-to-load video (bm-video): a 16:9 tile with a Play link; the player replaces it on tap (tokens only). TikTok and Facebook reels use the 9:16 variant. */
.bm-video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: var(--bm-radius-md, 8px);
  background: var(--bm-color-ink-dark);
}

.bm-video.bm-video--vertical {
  aspect-ratio: 9 / 16;
  width: min(100%, calc(var(--bm-space-10) * 9), calc(70vh * 9 / 16));
  margin-inline: auto;
}

.bm-video + .bm-video {
  margin-top: var(--bm-space-3);
}

.bm-video .bm-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-2);
  color: var(--bm-color-surface-base);
  text-decoration: none;
}

.bm-video .bm-video__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bm-color-surface-base);
  position: relative;
}

.bm-video .bm-video__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--bm-color-ink-dark);
}

.bm-video .bm-video__text {
  font-weight: var(--bm-font-weight-bold);
}

.bm-video .bm-video__host {
  font-size: var(--bm-text-sm);
  opacity: 0.8;
}

.bm-video .bm-video__play:focus-visible {
  outline: 3px solid var(--bm-color-brand-light);
  outline-offset: -3px;
}

.bm-video .bm-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.bm-form__video input[type="text"] {
  display: block;
  width: 100%;
  margin-bottom: var(--bm-space-2);
}
/* Sponsored results (bm-promote): a labelled block above the organic results */
.bm-promote {
  padding-block: var(--bm-space-4);
}

.bm-promote .bm-promote__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-2);
  margin: 0 0 var(--bm-space-3);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
}

.bm-promote .bm-promote__badge {
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bm-promote .bm-promote__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.bm-promote .bm-promote__grid {
  min-width: 0;
  max-width: 100%;
}

.bm-promote .bm-promote__grid > * {
  min-width: 0;
}

.bm-promote .bm-promote__fallback {
  overflow-wrap: anywhere;
  color: var(--bm-color-ink-base);
}
/* Seller page (mu-plugins/bm-seller.php) and the generic Page template frame (scripts/seed-templates.php, key "page"). Tokens only. */
.bm-seller .bm-seller-meta {
  margin: var(--bm-space-2) 0 0;
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
}

.bm-seller .bm-seller-report {
  margin: var(--bm-space-6) 0 var(--bm-space-8);
  font-size: var(--bm-text-sm);
}

.bm-seller .bm-seller-report a {
  color: var(--bm-color-ink-base);
  text-decoration: underline;
}

/* Generic page frame (the seeded "page" template, opt-in). Sideways padding is left to Bricks' own #brx-content rules so it does not stack; only the width cap and vertical rhythm are set here. */
.bm-page {
  width: 100%;
  max-width: var(--bm-container-max);
  margin-inline: auto;
  padding-block: var(--bm-space-6);
}
/* Buttons at the foot of the owner form (bm-submit, bm-expiry): Submit and Save as draft side by side, stacked on a phone (tokens only) */
.bm-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-3);
}

.bm-form__actions .bm-btn {
  flex: 0 1 auto;
}

@media (max-width: 480px) {
  .bm-form__actions .bm-btn {
    flex: 1 1 100%;
  }
}
/* Skip link, search suggestions (design/suggest.js) and share buttons (bm-share). Tokens only; light and dark follow the tokens. */

/* Skip to main content: first focusable element on the page, visible only on keyboard focus */
.bm-skip-link {
  position: absolute;
  inset-block-start: var(--bm-space-2);
  inset-inline-start: var(--bm-space-2);
  z-index: var(--bm-z-modal);
  padding: var(--bm-space-3) var(--bm-space-5);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-text-on-dark);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-bold);
  text-decoration: none;
  transform: translateY(-300%);
}

.bm-skip-link:focus,
.bm-skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--bm-color-ink-dark);
  outline-offset: 2px;
  box-shadow: var(--bm-shadow-focus);
}

[data-bm-skip][hidden] {
  display: none;
}

/* Targets of the skip link take programmatic focus only; no ring around the whole page */
#bm-main:focus,
#brx-content:focus {
  outline: none;
}

/* Search suggestions: a listbox in <body> placed under the input (nothing in the page moves) */
.bm-suggest {
  position: absolute;
  z-index: var(--bm-z-dropdown);
  list-style: none;
  margin: var(--bm-space-1) 0 0;
  padding: var(--bm-space-1);
  max-width: min(32rem, calc(100vw - var(--bm-space-4)));
  max-height: min(24rem, 60vh);
  overflow-y: auto;
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  box-shadow: var(--bm-shadow-md);
}

.bm-suggest[hidden] {
  display: none;
}

.bm-suggest .bm-suggest__option {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bm-space-1) var(--bm-space-2);
  min-height: var(--bm-touch-target-min);
  padding: var(--bm-space-2) var(--bm-space-3);
  border-radius: var(--bm-radius-md);
  cursor: pointer;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
}

.bm-suggest .bm-suggest__option.is-active,
.bm-suggest .bm-suggest__option:hover {
  background-color: var(--bm-color-brand-tint);
}

.bm-suggest .bm-suggest__option.is-active {
  outline: 2px solid var(--bm-color-brand-text);
  outline-offset: -2px;
}

.bm-suggest .bm-suggest__title {
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
}

.bm-suggest .bm-suggest__meta {
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
}

.bm-suggest .bm-suggest__kind {
  padding-inline: var(--bm-space-2);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-light);
  font-size: var(--bm-text-xs);
}

.bm-suggest__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Share buttons on business and ad pages */
.bm-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-2) var(--bm-space-3);
  margin-block-start: var(--bm-space-4);
  padding-block-start: var(--bm-space-4);
  border-block-start: 1px solid var(--bm-color-line-base);
}

.bm-share .bm-share__label {
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-light);
}

.bm-share .bm-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bm-share .bm-share__item[hidden] {
  display: none;
}

.bm-share .bm-share__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: var(--bm-touch-target-min);
  padding-inline: var(--bm-space-3);
  border: 1px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.bm-share .bm-share__btn:hover {
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-brand-text);
}

.bm-share .bm-share__status {
  flex-basis: 100%;
  min-height: 1.25rem;
  font-size: var(--bm-text-sm);
  color: var(--bm-color-brand-text);
}

@media (max-width: 480px) {
  .bm-share .bm-share__btn span {
    font-size: var(--bm-text-xs);
  }
}
/* Sponsor slots and promotion statistics (bm-slots, bm-promo-stats). Builds on 34-promote.css. */
.bm-promote .bm-promote__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bm-promote .bm-promote__item > * {
  flex: 1 1 auto;
  min-width: 0;
}

.bm-promo-stats-tab .bm-promo-stats__wrap {
  max-width: 100%;
  overflow-x: auto;
}

.bm-promo-stats-tab .bm-promo-stats th,
.bm-promo-stats-tab .bm-promo-stats td {
  white-space: nowrap;
  text-align: start;
}

.bm-promo-stats-tab .bm-promo-stats td:first-child {
  white-space: normal;
  min-width: 10rem;
}

.bm-promo-stats-tab .bm-promo-stats__note {
  margin-block-start: var(--bm-space-3);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
}
/* Photo order and cover on the owner listing form (bm-submit): tools under each photo, the cover marked. Tokens only; wraps at 375 px. */
.bm-form__photos {
  align-items: flex-start;
}

.bm-form__photo {
  max-width: 100%;
  padding: var(--bm-space-2);
  border: 1px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-md);
}

.bm-form__photo--cover {
  border-color: var(--bm-color-brand-text);
}

.bm-form__photo-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-1);
}

.bm-form__photo-tools .bm-btn.bm-btn--secondary.bm-form__photo-btn {
  padding: var(--bm-space-1) var(--bm-space-2);
  font-size: var(--bm-text-xs);
}

.bm-form__photo-tools .bm-btn.bm-btn--secondary.bm-form__photo-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bm-form__logo-current {
  display: flex;
  align-items: center;
  gap: var(--bm-space-4);
  margin-block-end: var(--bm-space-3);
}

.bm-form__logo-preview {
  width: 4rem;
  height: 4rem;
  padding: var(--bm-space-1);
  border: 1px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bm-form__logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.bm-form__logo-remove {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
  cursor: pointer;
}
/* UI polish pass: account pages (login, dashboard, add business, post ad, my listings, claim), notices, buttons, empty states.
   Tokens only; light and dark follow the tokens. Automatic.css restyles [class*="btn--"], so button rules double the class. */

/* Buttons: Automatic.css turned .bm-btn--primary / --secondary into outline buttons on plain pages */
.bm-btn.bm-btn--primary {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
  border-color: var(--bm-color-brand-base);
}
.bm-btn.bm-btn--primary:hover {
  background-color: var(--bm-color-brand-dark);
  border-color: var(--bm-color-brand-dark);
  color: var(--bm-color-btn-primary-text);
}
.bm-btn.bm-btn--secondary {
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  border-color: var(--bm-color-line-dark);
}
.bm-btn.bm-btn--secondary:hover {
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-brand-text);
  border-color: var(--bm-color-brand-base);
}
.bm-btn.bm-btn--primary:focus-visible,
.bm-btn.bm-btn--secondary:focus-visible {
  outline: 2px solid var(--bm-color-brand-text);
  outline-offset: 2px;
  box-shadow: var(--bm-shadow-focus);
}

/* Cards on account pages: the section reset adds a large flex gap between title and form */
.bm-login-register .bm-slot-card,
.bm-dashboard .bm-slot-card,
.bm-claim-page .bm-slot-card {
  display: block;
}
.bm-login-register {
  margin-block: 0;
  align-items: start;
}
.bm-login-register .bm-slot-card__title,
.bm-dashboard .bm-slot-card__title {
  display: block;
  margin-block-end: var(--bm-space-5);
}
.bm-form > label:has(> input[type="checkbox"]),
.bm-form > label:has(> input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: var(--bm-touch-target-min);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  cursor: pointer;
}
.bm-form input[type="checkbox"],
.bm-form input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--bm-color-brand-base);
}
.bm-form > p {
  margin: 0;
  font-size: var(--bm-text-sm);
}
.bm-form textarea {
  resize: vertical;
}
.bm-form__help {
  color: var(--bm-color-ink-light);
}
.bm-form__error {
  color: var(--bm-color-danger-dark);
}
.bm-form input[aria-invalid="true"],
.bm-form textarea[aria-invalid="true"] {
  border-color: var(--bm-color-danger-base);
}

/* Notices: a direct child of the page content must keep the page gutter instead of running edge to edge */
body.page-template-default #brx-content.type-page > .bm-form__notice {
  width: calc(100% - 2 * var(--bm-space-4));
  max-width: calc(var(--bm-container-max) - 2 * var(--bm-space-4));
  padding: var(--bm-space-3) var(--bm-space-4);
  margin-block-end: var(--bm-space-4);
}
@media (min-width: 768px) {
  body.page-template-default #brx-content.type-page > .bm-form__notice {
    width: calc(100% - 2 * var(--bm-space-6));
    max-width: calc(var(--bm-container-max) - 2 * var(--bm-space-6));
  }
}
@media (min-width: 1280px) {
  body.page-template-default #brx-content.type-page > .bm-form__notice {
    width: calc(100% - 2 * var(--bm-space-8));
    max-width: calc(var(--bm-container-max) - 2 * var(--bm-space-8));
  }
}
.bm-form__notice {
  border: 1px solid var(--bm-color-line-base);
  line-height: var(--bm-line-height-normal);
}
.bm-form__notice--ok {
  color: var(--bm-color-ink-base);
}
.bm-form__notice--err {
  color: var(--bm-color-ink-base);
}
.bm-form__notice a {
  font-weight: var(--bm-font-weight-semibold);
  text-decoration: underline;
}

/* Log in prompt for pages that need an account (add business, post ad, my listings) */
.bm-gate .bm-form__notice {
  margin-block-end: var(--bm-space-4);
}
.bm-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-3);
  margin: 0;
}
.bm-gate__actions .bm-btn {
  text-decoration: none;
}

/* Claim page: business summary, steps, form or state message */
.bm-claim-page {
  display: grid;
  gap: var(--bm-space-4);
  align-items: start;
}
.bm-claim-page .bm-slot-card {
  margin-block-end: 0;
}
.bm-claim-biz__label {
  margin: 0 0 var(--bm-space-1);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bm-color-ink-light);
}
.bm-claim-biz__name {
  margin: 0;
  font-size: var(--bm-text-2xl);
  line-height: var(--bm-line-height-tight);
  color: var(--bm-color-ink-dark);
  overflow-wrap: anywhere;
}
.bm-claim-biz__meta {
  margin: var(--bm-space-2) 0 0;
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-light);
}
.bm-claim-biz__link {
  display: inline-block;
  margin-block-start: var(--bm-space-3);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
}
.bm-claim-steps__title {
  margin: 0 0 var(--bm-space-3);
  font-size: var(--bm-text-lg);
  color: var(--bm-color-ink-dark);
}
.bm-claim-steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bm-claim-step;
  display: grid;
  gap: var(--bm-space-3);
}
.bm-claim-steps__list li {
  counter-increment: bm-claim-step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--bm-space-3);
  align-items: center;
  font-size: var(--bm-text-sm);
  line-height: var(--bm-line-height-normal);
  color: var(--bm-color-ink-base);
}
.bm-claim-steps__list li::before {
  content: counter(bm-claim-step);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-bold);
}
.bm-claim-state__msg {
  margin: 0 0 var(--bm-space-4);
  font-size: var(--bm-text-base);
  line-height: var(--bm-line-height-normal);
  color: var(--bm-color-ink-base);
}
.bm-claim-state--info {
  border-color: var(--bm-color-line-base);
}
.bm-claim-state .bm-btn {
  text-decoration: none;
}
.bm-claim-state .bm-claim-state__alt {
  margin-inline-start: var(--bm-space-2);
}
.bm-claim-state--err {
  border-color: var(--bm-color-danger-base);
}
.bm-claim-formcard .bm-claim {
  margin: 0;
  font-size: var(--bm-text-base);
  color: var(--bm-color-ink-base);
}
/* One open card: the summary is the card heading, not a toggle */
.bm-claim-formcard .bm-claim summary {
  list-style: none;
  cursor: default;
  color: var(--bm-color-ink-dark);
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-bold);
  margin-block-end: var(--bm-space-4);
}
.bm-claim-formcard .bm-claim summary:focus-visible {
  outline: 2px solid var(--bm-color-brand-text);
  outline-offset: 2px;
}

/* Dashboard and my listings */
.bm-dash-wrap {
  margin-block: var(--bm-space-4) var(--bm-space-6);
}
.bm-dash-wrap > h3 {
  margin: var(--bm-space-6) 0 var(--bm-space-3);
  font-size: var(--bm-text-lg);
  color: var(--bm-color-ink-dark);
}
.bm-dash-wrap > ul {
  margin: 0;
  padding-inline-start: var(--bm-space-5);
  display: grid;
  gap: var(--bm-space-2);
  color: var(--bm-color-ink-base);
}
.bm-dash__actions .bm-btn {
  min-height: var(--bm-touch-target-min);
  font-size: var(--bm-text-sm);
}
p.bm-dash__actions {
  margin: 0 0 var(--bm-space-4);
}
.bm-dash small {
  color: var(--bm-color-ink-light);
}
.bm-dash-wrap > .bm-empty-state {
  padding-block: var(--bm-space-8);
}
.bm-dash-wrap > .bm-empty-state .bm-empty-state__title {
  margin-block-end: 0;
}
.bm-dash-wrap > .bm-empty-state .bm-empty-state__desc {
  margin-block-end: 0;
}

/* Dashboard tabs: the page-link colour rule above (a:not(.bm-btn)) made the active tab green on green */
body.page-template-default #brx-content.type-page a.bm-chip.bm-chip--active {
  color: var(--bm-color-chip-active-text);
}
body.page-template-default #brx-content.type-page a.bm-chip.bm-chip--active:hover {
  color: var(--bm-color-surface-light);
}
body.page-template-default #brx-content.type-page a.bm-chip:focus-visible {
  outline: 2px solid var(--bm-color-brand-text);
  outline-offset: 2px;
}
/* Dashboard body: the section sits inside the page gutter already, so no second gutter, and a shorter top and bottom */
.bm-dashboard .bm-section {
  padding-block: var(--bm-space-6) var(--bm-space-10);
}
.bm-dashboard .bm-section > .bm-container {
  padding-inline: 0;
}
.bm-dash .bm-badge {
  background-color: var(--bm-color-surface-dark);
  border: 1px solid var(--bm-color-line-dark);
  color: var(--bm-color-ink-base);
}
.bm-claim-formcard .bm-claim summary::-webkit-details-marker {
  display: none;
}

/* Reviews: the page builder's section rule (flex, big gap and padding, fixed dark text) made this card tall and unreadable in dark mode */
section.bm-reviews {
  display: block;
  gap: 0;
  padding: 0;
  color: var(--bm-color-ink-base);
}
section.bm-reviews .bm-reviews__title {
  color: var(--bm-color-ink-dark);
}

/* Dark mode contrast: --bm-color-surface-light and --bm-color-brand-dark are dark there, so text using them on brand fills fell to 1.7 to 2.3:1 */
.bm-filter-count-badge {
  color: var(--bm-color-btn-primary-text);
}
.bm-active-tag {
  color: var(--bm-color-brand-text);
}
.bm-pagination__btn.is-active,
.bm-pagination__btn[aria-current="page"] {
  color: var(--bm-color-btn-primary-text);
}
/* Card WhatsApp button: --bm-color-whatsapp-dark on its tint is 2.8:1 in light mode */
.bm-card__action-btn.bm-card__action-btn--whatsapp {
  color: var(--bm-color-success-dark);
}
.bm-card__action-btn.bm-card__action-btn--whatsapp:hover,
.bm-card__action-btn.bm-card__action-btn--whatsapp:focus-visible {
  /* Solid WhatsApp green with dark ink in both themes: --bm-color-success-dark and --bm-color-ink-dark flip to light in dark mode (white on light green was 1.4:1). */
  background-color: var(--bm-color-whatsapp-base);
  border-color: var(--bm-color-whatsapp-base);
  color: var(--bm-color-on-accent);
}

/* Report form labels: Bricks' label colour (grey) was 2.7:1 on the card */
.bm-report .bm-report__field label {
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
}

/* Add business form: opening-hours rows (day, opens, closes) and photo thumbnails; same layout as the inline fallback in bm-submit.php, with room for a 375 px screen */
.bm-form__hours {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--bm-space-2);
  align-items: center;
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
}
.bm-form__hours input[type="time"] {
  min-width: 0;
  padding-inline: var(--bm-space-2);
}
.bm-form__photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-3);
}
.bm-form__photo {
  display: grid;
  gap: var(--bm-space-1);
  font-size: var(--bm-text-xs);
}

/* Claim steps: the step the visitor is on is filled, finished steps are ticked by colour only (text says the same) */
.bm-claim-steps__list li.is-current {
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
}
.bm-claim-steps__list li.is-current::before {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
}
.bm-claim-steps__list li.is-done {
  color: var(--bm-color-ink-light);
}
.bm-claim-state__title {
  margin: 0 0 var(--bm-space-2);
  font-size: var(--bm-text-xl);
  color: var(--bm-color-ink-dark);
}
.bm-claim-state--ok {
  border-color: var(--bm-color-success-base);
  background-color: var(--bm-color-success-tint);
}
#bm-register {
  scroll-margin-block-start: var(--bm-space-8);
}
/* --------------------------------------------------------------------------
   Hero search bar fix. Tokens only.
   1. .bm-hero::before/::after are positioned, so they painted OVER the non-positioned bar (cream/peach tint on its right half). The content wrapper is lifted above them.
   2. Desktop: ONE rounded surface (the form). Fields are transparent and square so no second shape shows; only the button and the focus ring are pills.
      No overflow:hidden on the form on purpose: the custom-select panel is a child of the field and must not be clipped.
   3. The hero keeps real space under the bar so it never touches the hero edge.
   4. One type style for placeholder, input, category and area; button has the same height as the fields.
   -------------------------------------------------------------------------- */
.bm-hero > .bm-container {
  position: relative;
  z-index: 1;
}

.bm-hero {
  padding-block-end: var(--bm-space-10);
}

@media (min-width: 768px) {
  .bm-hero {
    padding-block-end: var(--bm-space-12);
  }

  .bm-search-bar {
    align-items: center;
    padding: var(--bm-space-1-5);
    border-color: transparent;
  }

  .bm-search-bar .bm-search-bar__field {
    background-color: transparent;
    border-radius: var(--bm-radius-full);
    padding-inline: var(--bm-space-4);
    align-self: stretch;
  }

  .bm-search-bar .bm-search-bar__field:not(:first-child) {
    border-inline-start: none;
  }

  .bm-search-bar .bm-search-bar__field:not(:first-child)::before {
    content: "";
    flex: 0 0 1px;
    align-self: center;
    height: var(--bm-space-6);
    margin-inline-start: calc(var(--bm-space-4) * -1);
    margin-inline-end: var(--bm-space-3);
    background-color: var(--bm-color-line-base);
  }
}

.bm-search-bar .bm-search-bar__field:focus-within {
  border-color: var(--bm-color-brand-text);
  box-shadow: inset 0 0 0 1px var(--bm-color-brand-text);
}

.bm-search-bar .bm-search-bar__input,
.bm-search-bar .bm-search-bar__select,
.bm-search-bar .bm-custom-select__trigger,
.bm-search-bar .bm-custom-select__value,
.bm-search-bar .bm-custom-select__value--placeholder {
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-regular);
  line-height: var(--bm-line-height-normal);
  color: var(--bm-color-ink-base);
}

.bm-search-bar .bm-search-bar__input::placeholder {
  color: var(--bm-color-muted-base);
  opacity: 1;
}

.bm-search-bar .bm-custom-select__trigger:focus-visible {
  outline: none;
}

.bm-btn.bm-btn--primary.bm-search-bar__submit {
  min-height: var(--bm-touch-target-min);
  border-radius: var(--bm-radius-full);
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-semibold);
  line-height: var(--bm-line-height-normal);
}

@media (max-width: 767.98px) {
  .bm-btn.bm-btn--primary.bm-search-bar__submit {
    border-radius: var(--bm-radius-md);
    min-height: calc(var(--bm-touch-target-min) + 2px);
  }
}

.bm-btn.bm-btn--primary.bm-search-bar__submit:focus-visible {
  outline: 2px solid var(--bm-color-brand-text);
  outline-offset: 2px;
}

/* Stacked layout: the button sits directly on the green hero, so green-on-green had no contrast. White fill, dark green text (hero-title is white in both themes). */
@media (max-width: 767.98px) {
  .bm-btn.bm-btn--primary.bm-search-bar__submit {
    background-color: var(--bm-color-hero-title);
    border-color: var(--bm-color-hero-title);
    color: var(--bm-color-brand-dark);
  }

  .bm-btn.bm-btn--primary.bm-search-bar__submit:hover,
  .bm-btn.bm-btn--primary.bm-search-bar__submit:focus-visible {
    background-color: var(--bm-color-hero-title);
    border-color: var(--bm-color-hero-title);
    color: var(--bm-color-brand-dark);
    box-shadow: var(--bm-shadow-md);
  }

  .bm-btn.bm-btn--primary.bm-search-bar__submit:focus-visible {
    outline: 2px solid var(--bm-color-hero-title);
    outline-offset: 2px;
  }
}
/* Claim vetting: dispute note, proof method fieldset, previous-owner dispute list. Tokens only; light and dark follow the tokens. */
.bm-claim__dispute-note {
  margin: 0 0 var(--bm-space-4);
  padding: var(--bm-space-3) var(--bm-space-4);
  border: 1px solid var(--bm-color-line-dark);
  border-inline-start: 4px solid var(--bm-color-danger-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  line-height: var(--bm-line-height-normal);
}
.bm-claim-proof {
  margin: 0 0 var(--bm-space-4);
  padding: var(--bm-space-3) var(--bm-space-4);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  min-width: 0;
}
.bm-claim-proof legend {
  padding-inline: var(--bm-space-2);
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-bold);
}
.bm-claim-proof__opt {
  display: flex;
  align-items: flex-start;
  gap: var(--bm-space-2);
  min-height: var(--bm-touch-target-min);
  color: var(--bm-color-ink-base);
}
.bm-claim-proof__more {
  display: grid;
  gap: var(--bm-space-1);
  margin: 0 0 var(--bm-space-3);
  padding-inline-start: var(--bm-space-6);
  color: var(--bm-color-ink-base);
}
.bm-claim-proof__more input[type="email"],
.bm-claim-proof__more input[type="file"] {
  max-width: 100%;
  min-width: 0;
}
.bm-claim-proof__note {
  margin: 0;
  color: var(--bm-color-ink-light);
  font-size: var(--bm-text-sm);
}
.bm-claim-owner-disputes {
  margin-block: var(--bm-space-4) var(--bm-space-6);
  padding: var(--bm-space-4);
  border: 1px solid var(--bm-color-danger-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
}
.bm-claim-owner-disputes ul {
  margin: 0;
  padding-inline-start: var(--bm-space-5);
  display: grid;
  gap: var(--bm-space-4);
  color: var(--bm-color-ink-base);
}
.bm-claim-owner-disputes textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Owner dashboard listing tools: search, status filter, sort, rows per page, status chips, paging; and the overview widget "My Published Listings". Tokens only. */
.bm-dash-tools {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto;
  gap: var(--bm-space-3);
  align-items: end;
  margin-block: var(--bm-space-4);
  padding: var(--bm-space-4);
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
}
.bm-dash-tools__field {
  display: grid;
  gap: var(--bm-space-1);
  min-width: 0;
}
.bm-dash-tools__field label {
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-light);
}
.bm-dash-tools input[type="search"],
.bm-dash-tools select {
  width: 100%;
  min-height: var(--bm-touch-target-min);
  box-sizing: border-box;
  padding-inline: var(--bm-space-3);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-md);
}
.bm-dash-tools input[type="search"]:focus-visible,
.bm-dash-tools select:focus-visible,
.bm-dash-chips .bm-chip:focus-visible,
.bm-dash-widget__link:focus-visible,
.bm-dash-pager a:focus-visible {
  outline: 2px solid var(--bm-color-brand-text);
  outline-offset: 2px;
}
.bm-dash-tools__buttons {
  display: flex;
  gap: var(--bm-space-2);
}
.bm-dash-tools__buttons .bm-btn {
  min-height: var(--bm-touch-target-min);
}
.bm-dash-chips ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  margin: 0 0 var(--bm-space-3);
  padding: 0;
  list-style: none;
}
.bm-dash-chips__n {
  font-weight: var(--bm-font-weight-bold);
}
.bm-dash-count {
  margin: 0 0 var(--bm-space-3);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-light);
}
.bm-dash-pager {
  margin-block: var(--bm-space-4) var(--bm-space-6);
}
.bm-dash-nomatch .bm-btn {
  margin-block-start: var(--bm-space-3);
}
/* Overview widget (was inline styles) */
.bm-dash-widget {
  margin-block: 0;
}
.bm-dash-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-3);
  margin-block-end: var(--bm-space-3);
}
.bm-dash-widget__title {
  margin: 0;
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
}
.bm-dash-widget__link {
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-brand-text);
  text-decoration: none;
}
.bm-dash-widget__link:hover {
  text-decoration: underline;
}
.bm-dash-widget__more {
  margin: var(--bm-space-3) 0 0;
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-light);
}
.bm-dash-widget .bm-btn--sm {
  padding: var(--bm-space-1) var(--bm-space-2);
}

@media (max-width: 767px) {
  .bm-dash-tools {
    grid-template-columns: 1fr;
  }
  .bm-dash-tools__buttons .bm-btn {
    flex: 1 1 0;
  }
  .bm-dash-chips ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block-end: var(--bm-space-1);
  }
  .bm-dash-chips .bm-chip {
    flex-shrink: 0;
  }
  /* Listing table becomes stacked cards: one label/value row per cell, no horizontal scroll */
  .bm-dash-wrap {
    overflow-x: visible;
  }
  .bm-dash,
  .bm-dash tbody,
  .bm-dash tr,
  .bm-dash td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .bm-dash thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .bm-dash tr {
    padding-block: var(--bm-space-2);
    border-block-end: 2px solid var(--bm-color-line-base);
  }
  .bm-dash tr:last-child {
    border-block-end: none;
  }
  .bm-dash td[data-label] {
    display: grid;
    grid-template-columns: minmax(5rem, 30%) minmax(0, 1fr);
    gap: var(--bm-space-3);
    border-block-end: none;
    overflow-wrap: anywhere;
  }
  .bm-dash td[data-label]::before {
    content: attr(data-label);
    font-size: var(--bm-text-xs);
    font-weight: var(--bm-font-weight-semibold);
    color: var(--bm-color-ink-light);
  }
  .bm-dash-widget__head {
    flex-wrap: wrap;
  }
}
/* --------------------------------------------------------------------------
   44. Owner dashboard app shell (phase 1 mockup, see docs/dashboard-redesign.md)
   Modern card-based app layout: sidebar + top bar + KPI tiles + chart + attention panel + listings table.
   Block: .bm-dash-app. Elements: .bm-dash-app__*. Nothing here reuses the older .bm-dash-layout / .bm-kpi-* classes of partial 23,
   so the two can live side by side until phase 2 swaps the markup.
   Dark mode: same two-block pattern as tokens.css (prefers-color-scheme unless data-bm-theme="light", or data-bm-theme="dark").
   Wiring phase: add class `bm-page--dashboard-app` to <body> on the dashboard page (hides the site CTA strip and the big footer, see the end of this file).
   -------------------------------------------------------------------------- */

.bm-dash-app {
  /* Semantic aliases used only inside the shell. Text colours are chosen to pass 4.5:1 on their own backgrounds in light and dark. */
  --bm-dash-top: var(--bm-dash-app-top, 0px);
  --bm-dash-sidebar-w: 17.5rem;
  --bm-dash-rail-w: 4.75rem;
  --bm-dash-card-bg: var(--bm-color-surface-light);
  --bm-dash-card-border: var(--bm-color-line-base);
  --bm-dash-text-brand: var(--bm-color-brand-text);
  --bm-dash-nav-active-bg: var(--bm-color-brand-tint);
  --bm-dash-warn-text: #92400e;
  --bm-dash-warn-bg: var(--bm-color-accent-tint);
  --bm-dash-line-1: var(--bm-color-brand-base);
  --bm-dash-line-2: var(--bm-color-accent-base);
  --bm-dash-area-1: color-mix(in srgb, var(--bm-color-brand-base) 14%, transparent);
  --bm-dash-hover-bg: var(--bm-color-surface-dark);
  --bm-dash-ring: var(--bm-color-brand-base);

  display: grid;
  grid-template-columns: var(--bm-dash-sidebar-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--bm-dash-top));
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  line-height: var(--bm-line-height-normal);
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-dash-app {
    --bm-dash-warn-text: #fcd34d;
    --bm-dash-warn-bg: rgba(245, 158, 11, 0.16);
    --bm-dash-line-1: var(--bm-color-brand-text);
    --bm-dash-line-2: var(--bm-color-accent-light);
    --bm-dash-area-1: color-mix(in srgb, var(--bm-color-brand-text) 16%, transparent);
    --bm-dash-nav-active-bg: color-mix(in srgb, var(--bm-color-brand-text) 12%, transparent);
    --bm-dash-hover-bg: rgba(255, 255, 255, 0.06);
    --bm-dash-ring: var(--bm-color-brand-text);
  }
}

:root[data-bm-theme="dark"] .bm-dash-app {
  --bm-dash-warn-text: #fcd34d;
  --bm-dash-warn-bg: rgba(245, 158, 11, 0.16);
  --bm-dash-line-1: var(--bm-color-brand-text);
  --bm-dash-line-2: var(--bm-color-accent-light);
  --bm-dash-area-1: color-mix(in srgb, var(--bm-color-brand-text) 16%, transparent);
  --bm-dash-nav-active-bg: color-mix(in srgb, var(--bm-color-brand-text) 12%, transparent);
  --bm-dash-hover-bg: rgba(255, 255, 255, 0.06);
  --bm-dash-ring: var(--bm-color-brand-text);
}

.bm-dash-app *,
.bm-dash-app *::before,
.bm-dash-app *::after {
  box-sizing: border-box;
}

:where(.bm-dash-app) a {
  color: inherit;
}

/* One focus style for everything interactive in the shell. */
.bm-dash-app a:focus-visible,
.bm-dash-app button:focus-visible,
.bm-dash-app input:focus-visible,
.bm-dash-app select:focus-visible,
.bm-dash-app summary:focus-visible {
  outline: 2px solid var(--bm-dash-ring);
  outline-offset: 2px;
}

.bm-dash-app__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bm-dash-app__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- Sidebar */

.bm-dash-app__sidebar {
  position: sticky;
  top: var(--bm-dash-top);
  align-self: start;
  height: calc(100vh - var(--bm-dash-top));
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-4);
  padding: var(--bm-space-5) var(--bm-space-3) var(--bm-space-4);
  background-color: var(--bm-dash-card-bg);
  border-inline-end: 1px solid var(--bm-dash-card-border);
  z-index: var(--bm-z-sticky);
}

.bm-dash-app__brand {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2-5);
  padding-inline: var(--bm-space-3);
  min-height: var(--bm-touch-target-min);
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-bold);
  font-size: var(--bm-text-base);
  text-decoration: none;
}

.bm-dash-app__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
  flex-shrink: 0;
}

.bm-dash-app__nav {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-1);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.bm-dash-app__nav-heading {
  margin: var(--bm-space-3) var(--bm-space-3) var(--bm-space-1);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  letter-spacing: var(--bm-tracking-wide);
  text-transform: uppercase;
  color: var(--bm-color-muted-base);
}

.bm-dash-app__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--bm-space-3);
  min-height: var(--bm-touch-target-min);
  padding: var(--bm-space-2) var(--bm-space-3);
  border-radius: var(--bm-radius-lg);
  color: var(--bm-color-ink-light);
  font-weight: var(--bm-font-weight-medium);
  text-decoration: none;
  transition: background-color var(--bm-transition-fast), color var(--bm-transition-fast);
}

.bm-dash-app__link:hover {
  background-color: var(--bm-dash-hover-bg);
  color: var(--bm-color-ink-dark);
}

.bm-dash-app__link.is-active {
  background-color: var(--bm-dash-nav-active-bg);
  color: var(--bm-dash-text-brand);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-dash-app__badge {
  margin-inline-start: auto;
  min-width: 1.5rem;
  padding: 0.0625rem var(--bm-space-2);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  text-align: center;
}

.bm-dash-app__badge--alert {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
}

.bm-dash-app__usercard {
  display: flex;
  align-items: center;
  gap: var(--bm-space-3);
  padding: var(--bm-space-3);
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-xl);
  background-color: var(--bm-color-surface-base);
}

.bm-dash-app__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-bold);
  flex-shrink: 0;
}

.bm-dash-app__user {
  flex: 1;
  min-width: 0;
  line-height: var(--bm-line-height-snug);
}

.bm-dash-app__user-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-dash-app__user-role {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
}

.bm-dash-app__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bm-touch-target-min);
  height: var(--bm-touch-target-min);
  margin: calc(var(--bm-space-2) * -1);
  border-radius: var(--bm-radius-md);
  color: var(--bm-color-muted-base);
}

.bm-dash-app__logout:hover {
  color: var(--bm-color-ink-dark);
  background-color: var(--bm-dash-hover-bg);
}

.bm-dash-app__scrim {
  display: none;
}

/* ---------------------------------------------------------------- Main column */

.bm-dash-app__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.bm-dash-app__topbar {
  position: sticky;
  top: var(--bm-dash-top);
  z-index: var(--bm-z-base);
  display: flex;
  align-items: center;
  gap: var(--bm-space-4);
  padding: var(--bm-space-3) var(--bm-space-6);
  background-color: var(--bm-color-header-bg);
  -webkit-backdrop-filter: var(--bm-header-blur);
  backdrop-filter: var(--bm-header-blur);
  border-block-end: 1px solid var(--bm-dash-card-border);
}

.bm-dash-app__crumb {
  min-width: 0;
  line-height: var(--bm-line-height-snug);
}

.bm-dash-app__crumb-trail {
  display: block;
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
}

.bm-dash-app__crumb-title {
  display: block;
  margin: 0;
  color: var(--bm-color-ink-dark);
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-bold);
}

.bm-dash-app__search {
  position: relative;
  flex: 1;
  max-width: 26rem;
  margin-inline-start: auto;
}

.bm-dash-app__search .bm-dash-app__icon {
  position: absolute;
  inset-inline-start: var(--bm-space-3);
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: var(--bm-color-muted-base);
  pointer-events: none;
}

.bm-dash-app__input {
  width: 100%;
  min-height: 2.5rem;
  padding: var(--bm-space-2) var(--bm-space-3) var(--bm-space-2) 2.5rem;
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-dash-card-bg);
  color: var(--bm-color-ink-base);
  font: inherit;
}

.bm-dash-app__input::placeholder {
  color: var(--bm-color-muted-base);
  opacity: 1;
}

.bm-dash-app__tools {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
}

.bm-dash-app__iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bm-touch-target-min);
  height: var(--bm-touch-target-min);
  min-width: var(--bm-touch-target-min);
  min-height: var(--bm-touch-target-min);
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-dash-card-bg);
  color: var(--bm-color-ink-light);
  cursor: pointer;
  transition: background-color var(--bm-transition-fast), color var(--bm-transition-fast);
}

.bm-dash-app__iconbtn:hover {
  background-color: var(--bm-dash-hover-bg);
  color: var(--bm-color-ink-dark);
}

.bm-dash-app__iconbtn-count {
  position: absolute;
  top: -0.375rem;
  inset-inline-end: -0.375rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding-inline: 0.25rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-danger-base);
  color: var(--bm-color-text-on-dark);
  font-size: 0.6875rem;
  font-weight: var(--bm-font-weight-bold);
  line-height: 1.125rem;
  text-align: center;
}

.bm-dash-app__menu-btn {
  display: none;
}

.bm-dash-app__content {
  container-type: inline-size;
  container-name: bm-dash;
  width: 100%;
  padding: var(--bm-space-6);
}

.bm-dash-app__stack {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-6);
}

/* ---------------------------------------------------------------- Greeting */

.bm-dash-app__greeting {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bm-space-4);
}

.bm-dash-app__greeting-title {
  margin: 0;
  color: var(--bm-color-ink-dark);
  font-size: var(--bm-text-2xl);
  font-weight: var(--bm-font-weight-bold);
  line-height: var(--bm-line-height-tight);
  letter-spacing: var(--bm-tracking-tight);
}

.bm-dash-app__greeting-sub {
  margin: var(--bm-space-1) 0 0;
  color: var(--bm-color-muted-base);
}

.bm-dash-app__greeting-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-2);
}

/* ---------------------------------------------------------------- Buttons (own names: Automatic.css restyles [class*="btn--"]) */

.bm-dash-app__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-2);
  min-height: 2.5rem;
  padding: var(--bm-space-2) var(--bm-space-4);
  border: 1px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-dash-card-bg);
  color: var(--bm-color-ink-dark);
  font: inherit;
  font-weight: var(--bm-font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--bm-transition-fast), border-color var(--bm-transition-fast);
}

.bm-dash-app__act:hover {
  background-color: var(--bm-dash-hover-bg);
}

.bm-dash-app__act-primary {
  border-color: var(--bm-color-brand-base);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
}

.bm-dash-app__act-primary:hover {
  border-color: var(--bm-color-brand-dark);
  background-color: var(--bm-color-brand-dark);
}

.bm-dash-app__act-sm {
  min-height: 2rem;
  padding: var(--bm-space-1) var(--bm-space-3);
  font-size: var(--bm-text-xs);
}

/* ---------------------------------------------------------------- Cards */

.bm-dash-app__card {
  min-width: 0;
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-2xl);
  background-color: var(--bm-dash-card-bg);
  box-shadow: var(--bm-shadow-card);
}

.bm-dash-app__card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-3);
  padding: var(--bm-space-5) var(--bm-space-5) var(--bm-space-3);
}

.bm-dash-app__card-title {
  margin: 0;
  color: var(--bm-color-ink-dark);
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-bold);
}

.bm-dash-app__card-sub {
  margin: 0.125rem 0 0;
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
}

.bm-dash-app__card-body {
  padding: var(--bm-space-2) var(--bm-space-5) var(--bm-space-5);
}

.bm-dash-app__card--compact {
  align-self: start;
}

.bm-dash-app__card--fill {
  display: flex;
  flex-direction: column;
}

.bm-dash-app__card--fill > .bm-dash-app__card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.bm-dash-app__nowrap {
  white-space: nowrap;
}

.bm-dash-app__card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-3);
  padding: var(--bm-space-3) var(--bm-space-5);
  border-block-start: 1px solid var(--bm-dash-card-border);
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
}

.bm-dash-app__link-more {
  color: var(--bm-dash-text-brand);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.bm-dash-app__link-more:hover {
  text-decoration: underline;
  color: var(--bm-color-brand-dark);
}

/* ---------------------------------------------------------------- KPI tiles */

.bm-dash-app__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--bm-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-dash-app__kpi {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-1);
  padding: var(--bm-space-4) var(--bm-space-5);
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-2xl);
  background-color: var(--bm-dash-card-bg);
  box-shadow: var(--bm-shadow-card);
}

.bm-dash-app__kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-2);
}

.bm-dash-app__kpi-label {
  margin: 0;
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-dash-app__kpi-value {
  margin: 0;
  color: var(--bm-color-ink-dark);
  font-size: var(--bm-text-3xl);
  font-weight: var(--bm-font-weight-bold);
  line-height: var(--bm-line-height-tight);
  letter-spacing: var(--bm-tracking-tight);
  font-variant-numeric: tabular-nums;
}

.bm-dash-app__kpi-sub {
  margin: 0;
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
}

.bm-dash-app__spark {
  display: block;
  width: 100%;
  height: 2rem;
  margin-block-start: var(--bm-space-2);
  overflow: visible;
}

.bm-dash-app__spark-line {
  fill: none;
  stroke: var(--bm-dash-line-1);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.bm-dash-app__spark-line--alt {
  stroke: var(--bm-dash-line-2);
}

/* ---------------------------------------------------------------- Chips, pills, delta */

.bm-dash-app__delta {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.125rem var(--bm-space-2);
  border-radius: var(--bm-radius-full);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  white-space: nowrap;
  background-color: var(--bm-color-badge-closed-bg);
  color: var(--bm-color-badge-closed-text);
}

.bm-dash-app__delta .bm-dash-app__icon {
  width: 0.75rem;
  height: 0.75rem;
  stroke-width: 3;
}

.bm-dash-app__delta--up {
  background-color: var(--bm-color-badge-open-bg);
  color: var(--bm-color-badge-open-text);
}

.bm-dash-app__delta--down {
  background-color: var(--bm-color-danger-tint);
  color: var(--bm-color-danger-dark);
}

.bm-dash-app__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1);
  padding: 0.125rem var(--bm-space-2-5);
  border-radius: var(--bm-radius-full);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  white-space: nowrap;
  background-color: var(--bm-color-badge-closed-bg);
  color: var(--bm-color-badge-closed-text);
}

.bm-dash-app__pill::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--bm-radius-full);
  background-color: currentColor;
}

.bm-dash-app__pill--ok {
  background-color: var(--bm-color-badge-open-bg);
  color: var(--bm-color-badge-open-text);
}

.bm-dash-app__pill--wait {
  background-color: var(--bm-dash-warn-bg);
  color: var(--bm-dash-warn-text);
}

.bm-dash-app__pill--err {
  background-color: var(--bm-color-danger-tint);
  color: var(--bm-color-danger-dark);
}

.bm-dash-app__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
}

.bm-dash-app__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: 2rem;
  padding: var(--bm-space-1) var(--bm-space-3);
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-dash-card-bg);
  color: var(--bm-color-ink-light);
  font: inherit;
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
}

.bm-dash-app__chip:hover {
  background-color: var(--bm-dash-hover-bg);
}

.bm-dash-app__chip.is-active {
  border-color: var(--bm-color-brand-base);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
}

.bm-dash-app__chip-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* ---------------------------------------------------------------- Layout grids (container queries on __content) */

.bm-dash-app__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bm-space-6);
}

@container bm-dash (min-width: 58rem) {
  .bm-dash-app__grid--main {
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  }
}

/* ---------------------------------------------------------------- Chart */

.bm-dash-app__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-4);
  margin: 0 0 var(--bm-space-5);
  padding: 0;
  list-style: none;
  color: var(--bm-color-ink-light);
  font-size: var(--bm-text-xs);
}

.bm-dash-app__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
}

.bm-dash-app__legend-item::before {
  content: "";
  width: 0.75rem;
  height: 0.1875rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-dash-line-1);
}

.bm-dash-app__legend-item--alt::before {
  background-color: var(--bm-dash-line-2);
}

.bm-dash-app__seg {
  display: inline-flex;
  padding: 0.125rem;
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-color-surface-base);
}

.bm-dash-app__seg-btn {
  min-height: 1.75rem;
  padding: 0 var(--bm-space-3);
  border: 0;
  border-radius: var(--bm-radius-md);
  background: transparent;
  color: var(--bm-color-ink-light);
  font: inherit;
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  cursor: pointer;
}

.bm-dash-app__seg-btn.is-active {
  background-color: var(--bm-dash-card-bg);
  color: var(--bm-color-ink-dark);
  box-shadow: var(--bm-shadow-sm);
}

.bm-dash-app__chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(13rem, 1fr) auto;
  flex: 1;
  margin-block-start: var(--bm-space-3);
  padding-block-start: var(--bm-space-12);
  column-gap: var(--bm-space-2);
  row-gap: var(--bm-space-1);
}

.bm-dash-app__chart-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.bm-dash-app__chart-plot {
  position: relative;
  min-width: 0;
}

.bm-dash-app__chart-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bm-dash-app__chart-grid {
  stroke: var(--bm-color-line-base);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.bm-dash-app__chart-line {
  fill: none;
  stroke: var(--bm-dash-line-1);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.bm-dash-app__chart-line--alt {
  stroke: var(--bm-dash-line-2);
  stroke-width: 2;
}

.bm-dash-app__chart-area {
  fill: var(--bm-dash-area-1);
  stroke: none;
}

.bm-dash-app__chart-hit {
  fill: transparent;
}

.bm-dash-app__chart-hit:hover {
  fill: var(--bm-dash-hover-bg);
}

.bm-dash-app__chart-dot {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  margin: -0.375rem 0 0 -0.375rem;
  border: 2px solid var(--bm-dash-card-bg);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-dash-line-1);
  box-shadow: 0 0 0 1px var(--bm-dash-line-1);
}

.bm-dash-app__chart-tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 0.75rem));
  padding: var(--bm-space-2) var(--bm-space-3);
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-dash-card-bg);
  box-shadow: var(--bm-shadow-md);
  font-size: var(--bm-text-xs);
  line-height: var(--bm-line-height-snug);
  white-space: nowrap;
  pointer-events: none;
}

.bm-dash-app__chart-tip--end {
  transform: translate(-88%, calc(-100% - 0.75rem));
}

@media (max-width: 640px) {
  .bm-dash-app__chart-tip {
    transform: translate(-50%, 0.75rem);
  }
  .bm-dash-app__chart-tip--end {
    transform: translate(-88%, 0.75rem);
  }
}

.bm-dash-app__chart-tip strong {
  display: block;
  color: var(--bm-color-ink-dark);
  font-size: var(--bm-text-sm);
}

.bm-dash-app__chart-tip span {
  color: var(--bm-color-muted-base);
}

.bm-dash-app__chart-x {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
}

/* ---------------------------------------------------------------- Attention panel + activity list */

.bm-dash-app__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-dash-app__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bm-space-3);
  padding: var(--bm-space-3) 0;
  border-block-start: 1px solid var(--bm-color-line-light);
}

.bm-dash-app__item:first-child {
  border-block-start: 0;
}

.bm-dash-app__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-color-badge-closed-bg);
  color: var(--bm-color-badge-closed-text);
}

.bm-dash-app__item-icon--warn {
  background-color: var(--bm-dash-warn-bg);
  color: var(--bm-dash-warn-text);
}

.bm-dash-app__item-icon--err {
  background-color: var(--bm-color-danger-tint);
  color: var(--bm-color-danger-dark);
}

.bm-dash-app__item-icon--ok {
  background-color: var(--bm-color-badge-open-bg);
  color: var(--bm-color-badge-open-text);
}

.bm-dash-app__item-text {
  min-width: 0;
}

.bm-dash-app__item-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-semibold);
  overflow-wrap: break-word;
}

.bm-dash-app__item-meta {
  display: block;
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
}

.bm-dash-app__item-time {
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
  white-space: nowrap;
}

@container bm-dash (min-width: 58rem) {
  .bm-dash-app__list--cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--bm-space-8);
  }

  .bm-dash-app__list--cols .bm-dash-app__item:nth-child(2) {
    border-block-start: 0;
  }
}

/* ---------------------------------------------------------------- Listings table (rows turn into cards in a narrow container) */

.bm-dash-app__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-3);
  padding: 0 var(--bm-space-5) var(--bm-space-4);
}

.bm-dash-app__toolbar .bm-dash-app__search {
  flex: 1 1 14rem;
  margin-inline-start: 0;
  max-width: 20rem;
}

.bm-dash-app__table-wrap {
  container-type: inline-size;
  container-name: bm-dash-table;
  overflow-x: auto;
}

.bm-dash-app__table {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
}

.bm-dash-app__table th {
  padding: var(--bm-space-2) var(--bm-space-3);
  border-block: 1px solid var(--bm-dash-card-border);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  text-align: start;
  white-space: nowrap;
}

.bm-dash-app__table th:first-child,
.bm-dash-app__table td:first-child {
  padding-inline-start: var(--bm-space-5);
}

.bm-dash-app__table th:last-child,
.bm-dash-app__table td:last-child {
  padding-inline-end: var(--bm-space-5);
}

.bm-dash-app__table td {
  padding: var(--bm-space-3) var(--bm-space-3);
  border-block-end: 1px solid var(--bm-color-line-light);
  vertical-align: middle;
}

.bm-dash-app__table tbody tr:hover td {
  background-color: var(--bm-dash-hover-bg);
}

.bm-dash-app__num {
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.bm-dash-app__listing {
  display: flex;
  align-items: center;
  gap: var(--bm-space-3);
  min-width: 0;
}

.bm-dash-app__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-dash-text-brand);
  flex-shrink: 0;
  overflow: hidden;
}

.bm-dash-app__thumb img,
.bm-dash-app__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bm-dash-app__listing-title {
  display: block;
  overflow: hidden;
  max-width: 22rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-semibold);
  text-decoration: none;
}

.bm-dash-app__listing-title:hover {
  text-decoration: underline;
}

.bm-dash-app__listing-meta {
  display: block;
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
}

.bm-dash-app__reason {
  display: block;
  max-width: 16rem;
  margin-block-start: 0.125rem;
  color: var(--bm-color-danger-dark);
  font-size: var(--bm-text-xs);
}

.bm-dash-app__row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bm-space-1);
}

.bm-dash-app__rowbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--bm-space-2);
  border: 0;
  border-radius: var(--bm-radius-md);
  background: transparent;
  color: var(--bm-color-ink-light);
  font: inherit;
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.bm-dash-app__rowbtn::-webkit-details-marker {
  display: none;
}

.bm-dash-app__rowbtn:hover {
  background-color: var(--bm-dash-hover-bg);
  color: var(--bm-color-ink-dark);
}

.bm-dash-app__rowbtn--primary {
  padding-inline: var(--bm-space-3);
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-dash-nav-active-bg);
  color: var(--bm-dash-text-brand);
  font-weight: var(--bm-font-weight-bold);
}

.bm-dash-app__rowbtn--primary:hover {
  border-color: var(--bm-dash-text-brand);
  background-color: var(--bm-dash-nav-active-bg);
  color: var(--bm-dash-text-brand);
}

.bm-dash-app__more {
  position: relative;
}

.bm-dash-app__more-menu {
  position: absolute;
  inset-inline-end: 0;
  top: 100%;
  z-index: var(--bm-z-dropdown);
  min-width: 10rem;
  padding: var(--bm-space-1);
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-dash-card-bg);
  box-shadow: var(--bm-shadow-lg);
}

.bm-dash-app__more-item {
  display: block;
  width: 100%;
  padding: var(--bm-space-2) var(--bm-space-3);
  border: 0;
  border-radius: var(--bm-radius-md);
  background: transparent;
  color: var(--bm-color-ink-base);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.bm-dash-app__more-item:hover {
  background-color: var(--bm-dash-hover-bg);
}

.bm-dash-app__more-item--danger {
  color: var(--bm-color-danger-dark);
}

.bm-dash-app__pager {
  display: flex;
  align-items: center;
  gap: var(--bm-space-1);
}

.bm-dash-app__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--bm-space-2);
  border-radius: var(--bm-radius-md);
  color: var(--bm-color-ink-light);
  font-weight: var(--bm-font-weight-semibold);
  text-decoration: none;
}

.bm-dash-app__page:hover {
  background-color: var(--bm-dash-hover-bg);
}

.bm-dash-app__page.is-current {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
}

.bm-dash-app__page[aria-disabled="true"] {
  color: var(--bm-color-muted-base);
  pointer-events: none;
}

/* Narrow container: each row becomes a card, cells show their data-label. */
@container bm-dash-table (max-width: 46rem) {
  .bm-dash-app__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .bm-dash-app__table,
  .bm-dash-app__table tbody {
    display: block;
  }

  .bm-dash-app__table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bm-space-2) var(--bm-space-4);
    padding: var(--bm-space-4) var(--bm-space-5);
    border-block-end: 1px solid var(--bm-color-line-light);
  }

  .bm-dash-app__table td,
  .bm-dash-app__table td:first-child,
  .bm-dash-app__table td:last-child {
    display: block;
    padding: 0;
    border: 0;
  }

  .bm-dash-app__table tbody tr:hover td {
    background-color: transparent;
  }

  .bm-dash-app__table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--bm-color-muted-base);
    font-size: var(--bm-text-xs);
  }

  .bm-dash-app__cell--wide {
    grid-column: 1 / -1;
  }

  .bm-dash-app__table td.bm-dash-app__cell--bare::before {
    display: none;
  }

  .bm-dash-app__table td.bm-dash-app__num {
    text-align: start;
  }

  .bm-dash-app__listing-title {
    max-width: none;
    white-space: normal;
  }

  .bm-dash-app__row-actions {
    justify-content: flex-start;
    margin-inline-start: calc(var(--bm-space-2) * -1);
  }

  .bm-dash-app__more-menu {
    inset-inline-end: auto;
    inset-inline-start: 0;
  }
}

/* ---------------------------------------------------------------- Empty states + get started */

.bm-dash-app__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bm-space-3);
  padding: var(--bm-space-6);
}

.bm-dash-app__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--bm-radius-xl);
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-dash-text-brand);
}

.bm-dash-app__empty-title {
  margin: 0;
  color: var(--bm-color-ink-dark);
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-bold);
}

.bm-dash-app__empty-text {
  max-width: 34rem;
  margin: 0;
  color: var(--bm-color-ink-light);
}

.bm-dash-app__progress {
  width: 100%;
  max-width: 24rem;
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-dark);
  border: 1px solid var(--bm-color-line-light);
}

.bm-dash-app__progress-bar {
  display: block;
  height: 100%;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-dash-line-1); /* the dark theme's brand-base fill was 2.1:1 on its track; this shell token is 3:1 or more in both themes */
}

.bm-dash-app__steps {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-dash-app__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bm-space-3);
  padding: var(--bm-space-3) 0;
  border-block-start: 1px solid var(--bm-color-line-light);
}

@media (max-width: 640px) {
  .bm-dash-app__step {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    row-gap: var(--bm-space-2);
  }

  .bm-dash-app__step .bm-dash-app__act {
    grid-column: 2;
    justify-self: start;
    margin-block-start: var(--bm-space-1);
  }
}

.bm-dash-app__step-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-full);
  color: var(--bm-color-btn-primary-text);
}

.bm-dash-app__step.is-done .bm-dash-app__step-mark {
  border-color: var(--bm-color-brand-base);
  background-color: var(--bm-color-brand-base);
}

.bm-dash-app__step-mark .bm-dash-app__icon {
  width: 0.875rem;
  height: 0.875rem;
  stroke-width: 3;
}

.bm-dash-app__step-title {
  display: block;
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-dash-app__step.is-done .bm-dash-app__step-title {
  color: var(--bm-color-muted-base);
  text-decoration: line-through;
}

.bm-dash-app__step-meta {
  display: block;
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
}

.bm-dash-app__table-empty {
  padding: var(--bm-space-8) var(--bm-space-5);
  text-align: center;
  color: var(--bm-color-muted-base);
}

/* ---------------------------------------------------------------- Mobile bottom tab bar (hidden on wide screens) */

.bm-dash-app__tabbar {
  display: none;
}

/* ---------------------------------------------------------------- Tablet: icon rail */

@media (max-width: 1099px) and (min-width: 768px) {
  .bm-dash-app {
    grid-template-columns: var(--bm-dash-rail-w) minmax(0, 1fr);
  }

  .bm-dash-app__sidebar {
    align-items: center;
    padding-inline: var(--bm-space-2);
  }

  .bm-dash-app__brand {
    padding-inline: 0;
  }

  .bm-dash-app__brand-text,
  .bm-dash-app__label,
  .bm-dash-app__nav-heading,
  .bm-dash-app__user,
  .bm-dash-app__logout-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .bm-dash-app__nav {
    width: 100%;
    align-items: center;
  }

  .bm-dash-app__link {
    justify-content: center;
    width: var(--bm-touch-target-min);
    padding: var(--bm-space-2);
  }

  .bm-dash-app__badge {
    position: absolute;
    top: 0.125rem;
    inset-inline-end: -0.25rem;
    min-width: 1.125rem;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
  }

  .bm-dash-app__usercard {
    flex-direction: column;
    padding: var(--bm-space-2);
    border: 0;
    background: transparent;
  }

  .bm-dash-app__logout {
    margin: 0;
  }
}

/* ---------------------------------------------------------------- Mobile: off-canvas drawer + bottom tab bar */

@media (max-width: 767px) {
  .bm-dash-app {
    display: block;
    padding-block-end: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }

  .bm-dash-app__sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: var(--bm-z-drawer);
    width: min(19rem, 86vw);
    height: 100%;
    visibility: hidden;
    transform: translateX(-100%);
    box-shadow: var(--bm-shadow-lg);
    transition: transform var(--bm-transition-normal), visibility var(--bm-transition-normal);
  }

  .bm-dash-app.is-nav-open .bm-dash-app__sidebar {
    visibility: visible;
    transform: translateX(0);
  }

  .bm-dash-app.is-nav-open .bm-dash-app__scrim {
    position: fixed;
    inset: 0;
    z-index: var(--bm-z-backdrop);
    display: block;
    background-color: var(--bm-color-scrim-dark);
  }

  .bm-dash-app__topbar {
    flex-wrap: wrap;
    gap: var(--bm-space-3);
    padding: var(--bm-space-3) var(--bm-space-4);
  }

  .bm-dash-app__crumb {
    flex: 1;
  }

  .bm-dash-app__crumb-trail {
    display: none;
  }

  .bm-dash-app__search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
    margin-inline-start: 0;
  }

  .bm-dash-app__content {
    padding: var(--bm-space-4);
  }

  .bm-dash-app__stack {
    gap: var(--bm-space-4);
  }

  .bm-dash-app__grid {
    gap: var(--bm-space-4);
  }

  .bm-dash-app__greeting-title {
    font-size: var(--bm-text-xl);
  }

  .bm-dash-app__kpi {
    padding: var(--bm-space-3) var(--bm-space-4);
  }

  .bm-dash-app__kpi-value {
    font-size: var(--bm-text-2xl);
  }

  .bm-dash-app__card-head {
    padding: var(--bm-space-4) var(--bm-space-4) var(--bm-space-2);
  }

  .bm-dash-app__card-body {
    padding: var(--bm-space-2) var(--bm-space-4) var(--bm-space-4);
  }

  .bm-dash-app__toolbar {
    padding-inline: var(--bm-space-4);
  }

  .bm-dash-app__card-foot {
    padding-inline: var(--bm-space-4);
  }

  .bm-dash-app__chart {
    grid-template-rows: minmax(10rem, 1fr) auto;
  }

  .bm-dash-app__tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--bm-z-sticky-bar);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: var(--bm-space-1) var(--bm-space-2) calc(var(--bm-space-1) + env(safe-area-inset-bottom, 0px));
    background-color: var(--bm-dash-card-bg);
    border-block-start: 1px solid var(--bm-dash-card-border);
    box-shadow: var(--bm-shadow-sticky-bar);
  }

  .bm-dash-app__tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: var(--bm-touch-target-min);
    padding: var(--bm-space-1);
    border: 0;
    border-radius: var(--bm-radius-md);
    background: transparent;
    color: var(--bm-color-ink-light);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: var(--bm-font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
  }

  .bm-dash-app__tab.is-active {
    color: var(--bm-dash-text-brand);
  }

  .bm-dash-app__tab-count {
    position: absolute;
    top: 0.125rem;
    inset-inline-start: calc(50% + 0.375rem);
    min-width: 1.125rem;
    height: 1.125rem;
    padding-inline: 0.25rem;
    border-radius: var(--bm-radius-full);
    background-color: var(--bm-color-brand-base);
    color: var(--bm-color-btn-primary-text);
    font-size: 0.6875rem;
    line-height: 1.125rem;
    text-align: center;
  }

  .bm-dash-app__menu-btn {
    display: inline-flex;
  }

  /* Enforce touch targets >= 44px on mobile screens */
  .bm-dash-app__act {
    min-height: var(--bm-touch-target-min);
  }

  .bm-dash-app__act-sm {
    min-height: var(--bm-touch-target-min);
    padding: var(--bm-space-1-5) var(--bm-space-3);
  }

  .bm-dash-app__chip {
    min-height: var(--bm-touch-target-min);
    padding: var(--bm-space-1-5) var(--bm-space-3);
  }

  .bm-dash-app__seg-btn {
    min-height: var(--bm-touch-target-min);
    padding: 0 var(--bm-space-3);
  }

  .bm-dash-app__rowbtn {
    min-width: var(--bm-touch-target-min);
    min-height: var(--bm-touch-target-min);
  }
}

/* ---------------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .bm-dash-app__sidebar,
  .bm-dash-app__link,
  .bm-dash-app__iconbtn,
  .bm-dash-app__act {
    transition: none;
  }
}

/* ---------------------------------------------------------------- Page class: the app shell is the whole page, so the marketing CTA strip and the big footer go away.
   The wiring phase adds `bm-page--dashboard-app` to <body> (body_class filter) on the page that holds [bm_dashboard]. */

body.bm-page--dashboard-app .bm-cta-strip,
body.bm-page--dashboard-app .bm-footer {
  display: none;
}
/* --------------------------------------------------------------------------
   42. Header account menu, mobile account block, footer account / legal links
   -------------------------------------------------------------------------- */
.bm-account {
  position: relative;
}

.bm-account__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: 2.75rem;
  max-width: 12rem;
  padding-inline: var(--bm-space-2) var(--bm-space-3);
  border-radius: var(--bm-radius-full);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  cursor: pointer;
  transition: border-color var(--bm-transition-fast), color var(--bm-transition-fast);
}

.bm-account__btn:hover,
.bm-account__btn[aria-expanded="true"],
.bm-account__btn.is-active {
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-brand-text);
}

.bm-account__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-bold);
  line-height: 1;
}

.bm-account__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bm-account__chevron {
  display: inline-flex;
  flex: none;
}

.bm-account__chevron svg {
  width: 1rem;
  height: 1rem;
}

.bm-account__btn[aria-expanded="true"] .bm-account__chevron {
  transform: rotate(180deg);
}

.bm-account__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--bm-space-2));
  inset-inline-end: 0;
  z-index: var(--bm-z-dropdown);
  min-width: 13rem;
  max-width: calc(100vw - 2 * var(--bm-space-4));
  padding: var(--bm-space-2);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
  box-shadow: var(--bm-shadow-lg);
}

.bm-account__panel[hidden] {
  display: none;
}

/* Without JavaScript the menu opens while focus is inside it (keyboard users can still reach Log out). */
html:not(.bm-js) .bm-account:focus-within .bm-account__panel[hidden] {
  display: block;
}

.bm-account__nav {
  display: flex;
  flex-direction: column;
}

.bm-account__item {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--bm-space-3);
  border-radius: var(--bm-radius-md);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  text-decoration: none;
}

.bm-account__item:hover {
  background-color: var(--bm-color-surface-muted);
  color: var(--bm-color-brand-text);
}

.bm-account__item.is-active {
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-bold);
}

.bm-account__item--logout {
  margin-block-start: var(--bm-space-1);
  border-block-start: 1px solid var(--bm-color-line-base);
  border-radius: 0 0 var(--bm-radius-md) var(--bm-radius-md);
}

.bm-account__btn:focus-visible,
.bm-account__item:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
}

/* Mobile menu: signed-in name above the account links */
.bm-header__mobile-user {
  margin: var(--bm-space-2) 0 0;
  padding-inline: var(--bm-space-3);
  color: var(--bm-color-muted-dark);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--bm-tracking-wide);
  overflow-wrap: anywhere;
}

/* Footer: columns follow what exists (regions and trust links are hidden when empty) */
@media (min-width: 1024px) {
  .bm-footer__grid.bm-footer__grid--cols-2 {
    grid-template-columns: 1.35fr repeat(2, 1fr);
  }

  .bm-footer__grid.bm-footer__grid--cols-3 {
    grid-template-columns: 1.35fr repeat(3, 1fr);
  }

  .bm-footer__grid.bm-footer__grid--cols-4 {
    grid-template-columns: 1.35fr repeat(4, 1fr);
  }
}

.bm-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bm-space-2) var(--bm-space-4);
}

.bm-footer__legal-link {
  color: var(--bm-color-footer-text);
  text-decoration: underline;
}

.bm-footer__legal-link:hover {
  color: var(--bm-color-footer-link-hover);
}

@media (max-width: 767px) {
  .bm-footer__bottom-inner {
    text-align: center;
  }
}
/* --------------------------------------------------------------------------
   46. Visitor accent presets (docs/accent.md)
   GENERATED by scripts/gen-accent-css.js: do not edit by hand. Checked by tests/bm-accent-contrast.js (WCAG AA for every preset in light and dark).
   No data-bm-accent attribute = the site brand in tokens.css, untouched. The attribute is set from the admin default and the visitor's choice (design/accent.js).
   Each preset only defines a few colours (--bm-ac-*); the shared rules below turn them into the brand tokens. "green" restores the original brand.
   -------------------------------------------------------------------------- */

/* blue */
:root[data-bm-accent="blue"] {
  --bm-ac-light: #1365ea;
  --bm-ac-base: #115bd2;
  --bm-ac-dark: #0e4db1;
  --bm-ac-deep: #0c4095;
  --bm-ac-rgb: 17, 91, 210;
  --bm-ac-text: #115bd2;
  --bm-ac-text-rgb: 17, 91, 210;
  --bm-ac-ring: #115bd2;
  --bm-dk-base: #090d13;
  --bm-dk-card: #111822;
  --bm-dk-raised: #161e2b;
  --bm-dk-muted: #131a24;
  --bm-dk-line: #1e293a;
  --bm-dk-line-strong: #2d3c55;
  --bm-dk-bar: #101721;
  --bm-dk-field: #14171b;
  --bm-dk-deep: #0f1217;
  --bm-dk-footer-a: #0f141d;
  --bm-dk-footer-b: #080b0f;
  --bm-dk-link: #bcd5fd;
}
@media (prefers-color-scheme: dark) {
  :root[data-bm-accent="blue"]:not([data-bm-theme="light"]) {
    --bm-ac-text: #bcd5fd;
    --bm-ac-text-rgb: 188, 213, 253;
    --bm-ac-ring: #bcd5fd;
  }
}
:root[data-bm-accent="blue"][data-bm-theme="dark"] {
  --bm-ac-text: #bcd5fd;
  --bm-ac-text-rgb: 188, 213, 253;
  --bm-ac-ring: #bcd5fd;
}

/* purple */
:root[data-bm-accent="purple"] {
  --bm-ac-light: #7842d7;
  --bm-ac-base: #692dd2;
  --bm-ac-dark: #5b26b5;
  --bm-ac-deep: #4e219c;
  --bm-ac-rgb: 105, 45, 210;
  --bm-ac-text: #692dd2;
  --bm-ac-text-rgb: 105, 45, 210;
  --bm-ac-ring: #692dd2;
  --bm-dk-base: #0d0913;
  --bm-dk-card: #171122;
  --bm-dk-raised: #1e162b;
  --bm-dk-muted: #191324;
  --bm-dk-line: #281e3a;
  --bm-dk-line-strong: #3c2d55;
  --bm-dk-bar: #161021;
  --bm-dk-field: #17141b;
  --bm-dk-deep: #120f17;
  --bm-dk-footer-a: #140f1d;
  --bm-dk-footer-b: #0b080f;
  --bm-dk-link: #dcccf8;
}
@media (prefers-color-scheme: dark) {
  :root[data-bm-accent="purple"]:not([data-bm-theme="light"]) {
    --bm-ac-text: #dcccf8;
    --bm-ac-text-rgb: 220, 204, 248;
    --bm-ac-ring: #dcccf8;
  }
}
:root[data-bm-accent="purple"][data-bm-theme="dark"] {
  --bm-ac-text: #dcccf8;
  --bm-ac-text-rgb: 220, 204, 248;
  --bm-ac-ring: #dcccf8;
}

/* orange */
:root[data-bm-accent="orange"] {
  --bm-ac-light: #b84a0a;
  --bm-ac-base: #a04008;
  --bm-ac-dark: #7e3207;
  --bm-ac-deep: #612705;
  --bm-ac-rgb: 160, 64, 8;
  --bm-ac-text: #a04008;
  --bm-ac-text-rgb: 160, 64, 8;
  --bm-ac-ring: #a04008;
  --bm-dk-base: #130d09;
  --bm-dk-card: #221711;
  --bm-dk-raised: #2b1e16;
  --bm-dk-muted: #241913;
  --bm-dk-line: #3a281e;
  --bm-dk-line-strong: #553c2d;
  --bm-dk-bar: #211610;
  --bm-dk-field: #1b1714;
  --bm-dk-deep: #17120f;
  --bm-dk-footer-a: #1d140f;
  --bm-dk-footer-b: #0f0b08;
  --bm-dk-link: #ffc29e;
}
@media (prefers-color-scheme: dark) {
  :root[data-bm-accent="orange"]:not([data-bm-theme="light"]) {
    --bm-ac-text: #ffc29e;
    --bm-ac-text-rgb: 255, 194, 158;
    --bm-ac-ring: #ffc29e;
  }
}
:root[data-bm-accent="orange"][data-bm-theme="dark"] {
  --bm-ac-text: #ffc29e;
  --bm-ac-text-rgb: 255, 194, 158;
  --bm-ac-ring: #ffc29e;
}

/* red */
:root[data-bm-accent="red"] {
  --bm-ac-light: #d41e1e;
  --bm-ac-base: #be1b1b;
  --bm-ac-dark: #9e1717;
  --bm-ac-deep: #841313;
  --bm-ac-rgb: 190, 27, 27;
  --bm-ac-text: #be1b1b;
  --bm-ac-text-rgb: 190, 27, 27;
  --bm-ac-ring: #be1b1b;
  --bm-dk-base: #130909;
  --bm-dk-card: #221111;
  --bm-dk-raised: #2b1616;
  --bm-dk-muted: #241313;
  --bm-dk-line: #3a1e1e;
  --bm-dk-line-strong: #552d2d;
  --bm-dk-bar: #211010;
  --bm-dk-field: #1b1414;
  --bm-dk-deep: #170f0f;
  --bm-dk-footer-a: #1d0f0f;
  --bm-dk-footer-b: #0f0808;
  --bm-dk-link: #fac2c2;
}
@media (prefers-color-scheme: dark) {
  :root[data-bm-accent="red"]:not([data-bm-theme="light"]) {
    --bm-ac-text: #fac2c2;
    --bm-ac-text-rgb: 250, 194, 194;
    --bm-ac-ring: #fac2c2;
  }
}
:root[data-bm-accent="red"][data-bm-theme="dark"] {
  --bm-ac-text: #fac2c2;
  --bm-ac-text-rgb: 250, 194, 194;
  --bm-ac-ring: #fac2c2;
}

/* teal */
:root[data-bm-accent="teal"] {
  --bm-ac-light: #0e7a6d;
  --bm-ac-base: #0b6358;
  --bm-ac-dark: #07433c;
  --bm-ac-deep: #042723;
  --bm-ac-rgb: 11, 99, 88;
  --bm-ac-text: #0b6358;
  --bm-ac-text-rgb: 11, 99, 88;
  --bm-ac-ring: #0b6358;
  --bm-dk-base: #091312;
  --bm-dk-card: #112220;
  --bm-dk-raised: #162b29;
  --bm-dk-muted: #132422;
  --bm-dk-line: #1e3a37;
  --bm-dk-line-strong: #2d5550;
  --bm-dk-bar: #10211f;
  --bm-dk-field: #141b1a;
  --bm-dk-deep: #0f1716;
  --bm-dk-footer-a: #0f1d1b;
  --bm-dk-footer-b: #080f0e;
  --bm-dk-link: #0cebd1;
}
@media (prefers-color-scheme: dark) {
  :root[data-bm-accent="teal"]:not([data-bm-theme="light"]) {
    --bm-ac-text: #0cebd1;
    --bm-ac-text-rgb: 12, 235, 209;
    --bm-ac-ring: #0cebd1;
  }
}
:root[data-bm-accent="teal"][data-bm-theme="dark"] {
  --bm-ac-text: #0cebd1;
  --bm-ac-text-rgb: 12, 235, 209;
  --bm-ac-ring: #0cebd1;
}

/* pink */
:root[data-bm-accent="pink"] {
  --bm-ac-light: #c72375;
  --bm-ac-base: #b21f69;
  --bm-ac-dark: #931a57;
  --bm-ac-deep: #791547;
  --bm-ac-rgb: 178, 31, 105;
  --bm-ac-text: #b21f69;
  --bm-ac-text-rgb: 178, 31, 105;
  --bm-ac-ring: #b21f69;
  --bm-dk-base: #13090e;
  --bm-dk-card: #22111a;
  --bm-dk-raised: #2b1621;
  --bm-dk-muted: #24131c;
  --bm-dk-line: #3a1e2c;
  --bm-dk-line-strong: #552d41;
  --bm-dk-bar: #211019;
  --bm-dk-field: #1b1418;
  --bm-dk-deep: #170f13;
  --bm-dk-footer-a: #1d0f16;
  --bm-dk-footer-b: #0f080c;
  --bm-dk-link: #f8c1dd;
}
@media (prefers-color-scheme: dark) {
  :root[data-bm-accent="pink"]:not([data-bm-theme="light"]) {
    --bm-ac-text: #f8c1dd;
    --bm-ac-text-rgb: 248, 193, 221;
    --bm-ac-ring: #f8c1dd;
  }
}
:root[data-bm-accent="pink"][data-bm-theme="dark"] {
  --bm-ac-text: #f8c1dd;
  --bm-ac-text-rgb: 248, 193, 221;
  --bm-ac-ring: #f8c1dd;
}

/* graphite */
:root[data-bm-accent="graphite"] {
  --bm-ac-light: #5f6e84;
  --bm-ac-base: #556275;
  --bm-ac-dark: #465160;
  --bm-ac-deep: #39424e;
  --bm-ac-rgb: 85, 98, 117;
  --bm-ac-text: #556275;
  --bm-ac-text-rgb: 85, 98, 117;
  --bm-ac-ring: #556275;
  --bm-dk-base: #0d0e0f;
  --bm-dk-card: #17191c;
  --bm-dk-raised: #1e2023;
  --bm-dk-muted: #191b1e;
  --bm-dk-line: #292b30;
  --bm-dk-line-strong: #3c4046;
  --bm-dk-bar: #16181b;
  --bm-dk-field: #171718;
  --bm-dk-deep: #121314;
  --bm-dk-footer-a: #141618;
  --bm-dk-footer-b: #0b0b0c;
  --bm-dk-link: #cad3e0;
}
@media (prefers-color-scheme: dark) {
  :root[data-bm-accent="graphite"]:not([data-bm-theme="light"]) {
    --bm-ac-text: #cad3e0;
    --bm-ac-text-rgb: 202, 211, 224;
    --bm-ac-ring: #cad3e0;
  }
}
:root[data-bm-accent="graphite"][data-bm-theme="dark"] {
  --bm-ac-text: #cad3e0;
  --bm-ac-text-rgb: 202, 211, 224;
  --bm-ac-ring: #cad3e0;
}

/* Shared mapping: preset colours -> brand tokens (light), then the dark-only values. Green is excluded (it has its own reset below). */
:root[data-bm-accent]:not([data-bm-accent="green"]) {
  --bm-color-brand-light: var(--bm-ac-light);
  --bm-color-brand-base: var(--bm-ac-base);
  --bm-color-brand-dark: var(--bm-ac-dark);
  --bm-color-brand-tint: rgba(var(--bm-ac-rgb), 0.08);
  --bm-color-brand-text: var(--bm-ac-text);
  --bm-color-ring: var(--bm-ac-ring);
  --bm-shadow-focus: 0 0 0 3px rgba(var(--bm-ac-rgb), 0.25);
  --bm-gradient-hero: linear-gradient(135deg, var(--bm-ac-dark) 0%, var(--bm-ac-base) 50%, var(--bm-ac-light) 100%);
  --bm-gradient-cta: linear-gradient(135deg, var(--bm-ac-dark) 0%, var(--bm-ac-base) 60%, var(--bm-ac-deep) 100%);
  --bm-gradient-bento-hero: linear-gradient(135deg, var(--bm-ac-dark) 0%, var(--bm-ac-base) 60%, var(--bm-ac-light) 100%);
  --bm-signature-glow: radial-gradient(circle at 50% 0%, rgba(var(--bm-ac-rgb), 0.18) 0%, transparent 65%);
  --bm-color-chip-active-bg: var(--bm-ac-base);
  --bm-color-category-icon-bg: rgba(var(--bm-ac-rgb), 0.08);
  --bm-color-category-icon-color: var(--bm-ac-base);
  --bm-color-category-icon-hover-bg: var(--bm-ac-base);
  --bm-color-hours-row-today-bg: rgba(var(--bm-ac-rgb), 0.08);
  --bm-color-hours-row-today-text: var(--bm-ac-dark);
  --bm-color-hours-row-today-border: rgba(var(--bm-ac-rgb), 0.25);
  --bm-color-hours-today-badge-bg: rgba(var(--bm-ac-rgb), 0.12);
  --bm-color-hours-today-badge-text: var(--bm-ac-dark);
  --bm-color-hours-today-badge-border: rgba(var(--bm-ac-rgb), 0.3);
  --bm-color-select-active: rgba(var(--bm-ac-rgb), 0.08);
  --bm-color-cta-btn-text: var(--bm-ac-dark);
  --bm-color-brand-bright: color-mix(in srgb, var(--bm-ac-text) 66%, white);
  --bm-color-brand-mid: color-mix(in srgb, var(--bm-ac-text) 80%, black);
  --bm-color-brand-vivid: var(--bm-ac-light);
}
:root[data-bm-accent]:not([data-bm-accent="green"]) .bm-dash-app { --bm-dash-area-1: rgba(var(--bm-ac-rgb), 0.14); }
@media (prefers-color-scheme: dark) {
  :root[data-bm-accent]:not([data-bm-accent="green"]):not([data-bm-theme="light"]) {
    --bm-color-category-icon-bg: rgba(var(--bm-ac-text-rgb), 0.15);
    --bm-color-category-icon-color: var(--bm-ac-text);
    --bm-color-category-icon-hover-bg: var(--bm-ac-text);
    --bm-color-hours-row-today-bg: rgba(var(--bm-ac-text-rgb), 0.14);
    --bm-color-hours-row-today-text: var(--bm-ac-text);
    --bm-color-hours-row-today-border: rgba(var(--bm-ac-text-rgb), 0.35);
    --bm-color-hours-today-badge-bg: rgba(var(--bm-ac-text-rgb), 0.22);
    --bm-color-hours-today-badge-text: var(--bm-ac-text);
    --bm-color-hours-today-badge-border: var(--bm-ac-text);
    --bm-color-select-active: rgba(var(--bm-ac-text-rgb), 0.15);
  }
  :root[data-bm-accent]:not([data-bm-accent="green"]):not([data-bm-theme="light"]) .bm-dash-app {
    --bm-dash-line-1: var(--bm-ac-text);
    --bm-dash-area-1: rgba(var(--bm-ac-text-rgb), 0.16);
    --bm-dash-nav-active-bg: rgba(var(--bm-ac-text-rgb), 0.12);
    --bm-dash-ring: var(--bm-ac-text);
  }
}
:root[data-bm-accent]:not([data-bm-accent="green"])[data-bm-theme="dark"] {
  --bm-color-category-icon-bg: rgba(var(--bm-ac-text-rgb), 0.15);
  --bm-color-category-icon-color: var(--bm-ac-text);
  --bm-color-category-icon-hover-bg: var(--bm-ac-text);
  --bm-color-hours-row-today-bg: rgba(var(--bm-ac-text-rgb), 0.14);
  --bm-color-hours-row-today-text: var(--bm-ac-text);
  --bm-color-hours-row-today-border: rgba(var(--bm-ac-text-rgb), 0.35);
  --bm-color-hours-today-badge-bg: rgba(var(--bm-ac-text-rgb), 0.22);
  --bm-color-hours-today-badge-text: var(--bm-ac-text);
  --bm-color-hours-today-badge-border: var(--bm-ac-text);
  --bm-color-select-active: rgba(var(--bm-ac-text-rgb), 0.15);
}
:root[data-bm-accent]:not([data-bm-accent="green"])[data-bm-theme="dark"] .bm-dash-app {
  --bm-dash-line-1: var(--bm-ac-text);
  --bm-dash-area-1: rgba(var(--bm-ac-text-rgb), 0.16);
  --bm-dash-nav-active-bg: rgba(var(--bm-ac-text-rgb), 0.12);
  --bm-dash-ring: var(--bm-ac-text);
}

/* green: puts the original brand back (a visitor can pick it when the site default is another colour) */
:root[data-bm-accent="green"] {
  --bm-color-brand-light: #15803d;
  --bm-color-brand-base: #166534;
  --bm-color-brand-dark: #14532d;
  --bm-color-brand-tint: rgba(22, 101, 52, 0.08);
  --bm-color-brand-text: #166534;
  --bm-color-ring: #166534;
  --bm-shadow-focus: 0 0 0 3px rgba(22, 101, 52, 0.25);
  --bm-gradient-hero: linear-gradient(135deg, #14532d 0%, #166534 50%, #15803d 100%);
  --bm-gradient-cta: linear-gradient(135deg, #14532d 0%, #166534 60%, #1e3a2f 100%);
  --bm-gradient-bento-hero: linear-gradient(135deg, #14532d 0%, #166534 60%, #15803d 100%);
  --bm-signature-glow: radial-gradient(circle at 50% 0%, rgba(34, 197, 94, 0.18) 0%, transparent 65%);
  --bm-color-chip-active-bg: #166534;
  --bm-color-category-icon-bg: rgba(22, 101, 52, 0.08);
  --bm-color-category-icon-color: #166534;
  --bm-color-category-icon-hover-bg: #166534;
  --bm-color-hours-row-today-bg: rgba(22, 101, 52, 0.08);
  --bm-color-hours-row-today-text: #14532d;
  --bm-color-hours-row-today-border: rgba(22, 101, 52, 0.25);
  --bm-color-hours-today-badge-bg: rgba(22, 101, 52, 0.12);
  --bm-color-hours-today-badge-text: #14532d;
  --bm-color-hours-today-badge-border: rgba(22, 101, 52, 0.3);
  --bm-color-select-active: rgba(22, 101, 52, 0.08);
  --bm-color-cta-btn-text: #14532d;
}
@media (prefers-color-scheme: dark) {
  :root[data-bm-accent="green"]:not([data-bm-theme="light"]) {
    --bm-color-brand-tint: rgba(74, 222, 128, 0.15);
    --bm-color-brand-text: #4ade80;
    --bm-color-ring: #4ade80;
    --bm-color-category-icon-bg: rgba(52, 211, 153, 0.15);
    --bm-color-category-icon-color: #34d399;
    --bm-color-category-icon-hover-bg: #34d399;
    --bm-color-hours-row-today-bg: rgba(52, 211, 153, 0.14);
    --bm-color-hours-row-today-text: #4ade80;
    --bm-color-hours-row-today-border: #2d5545;
    --bm-color-hours-today-badge-bg: rgba(52, 211, 153, 0.22);
    --bm-color-hours-today-badge-text: #4ade80;
    --bm-color-hours-today-badge-border: #34d399;
    --bm-color-select-active: rgba(52, 211, 153, 0.15);
  }
  :root[data-bm-accent="green"]:not([data-bm-theme="light"]) .bm-dash-app {
    --bm-dash-line-1: #4ade80;
    --bm-dash-area-1: rgba(74, 222, 128, 0.16);
    --bm-dash-nav-active-bg: rgba(74, 222, 128, 0.12);
    --bm-dash-ring: #4ade80;
  }
}
:root[data-bm-accent="green"][data-bm-theme="dark"] {
  --bm-color-brand-tint: rgba(74, 222, 128, 0.15);
  --bm-color-brand-text: #4ade80;
  --bm-color-ring: #4ade80;
  --bm-color-category-icon-bg: rgba(52, 211, 153, 0.15);
  --bm-color-category-icon-color: #34d399;
  --bm-color-category-icon-hover-bg: #34d399;
  --bm-color-hours-row-today-bg: rgba(52, 211, 153, 0.14);
  --bm-color-hours-row-today-text: #4ade80;
  --bm-color-hours-row-today-border: #2d5545;
  --bm-color-hours-today-badge-bg: rgba(52, 211, 153, 0.22);
  --bm-color-hours-today-badge-text: #4ade80;
  --bm-color-hours-today-badge-border: #34d399;
  --bm-color-select-active: rgba(52, 211, 153, 0.15);
}
:root[data-bm-accent="green"][data-bm-theme="dark"] .bm-dash-app {
  --bm-dash-line-1: #4ade80;
  --bm-dash-area-1: rgba(74, 222, 128, 0.16);
  --bm-dash-nav-active-bg: rgba(74, 222, 128, 0.12);
  --bm-dash-ring: #4ade80;
}
:root[data-bm-accent="green"] .bm-dash-app { --bm-dash-area-1: rgba(22, 101, 52, 0.14); }

/* Focus ring from --bm-color-ring: the brand fill is only 2.6:1 on the dark page, the ring token is at least 3:1 in every preset */
:focus-visible {
  outline-color: var(--bm-color-ring);
}
.bm-account__btn:focus-visible,
.bm-account__item:focus-visible {
  outline-color: var(--bm-color-ring);
}

/* Accent switcher: a button that opens a panel of named swatches (radio group), or the same group always open (mobile menu, account menu, dashboard topbar) */
.bm-accent {
  position: relative;
  display: inline-flex;
  flex: none;
}
html:not(.bm-js) .bm-accent:not(.bm-accent--inline) {
  display: none;
}
.bm-accent--inline {
  display: block;
  position: static;
  width: 100%;
}
.bm-accent__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-light);
  cursor: pointer;
  transition: border-color var(--bm-transition-fast);
}
.bm-accent__btn:hover,
.bm-accent__btn[aria-expanded="true"] {
  border-color: var(--bm-color-brand-base);
}
.bm-accent__dot {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-brand-base);
  box-shadow: 0 0 0 2px var(--bm-color-surface-light), 0 0 0 3px var(--bm-color-line-dark);
}
.bm-accent__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--bm-space-2));
  inset-inline-end: 0;
  z-index: var(--bm-z-dropdown);
  width: 15rem;
  max-width: calc(100vw - 2 * var(--bm-space-4));
  padding: var(--bm-space-2);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
  box-shadow: var(--bm-shadow-lg);
}
.bm-accent__panel[hidden] {
  display: none;
}
.bm-accent__group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bm-space-1);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.bm-accent__legend {
  grid-column: 1 / -1;
  padding: var(--bm-space-1) var(--bm-space-2);
  color: var(--bm-color-ink-light);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
}
.bm-accent__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: 2.75rem;
  padding-inline: var(--bm-space-2);
  border-radius: var(--bm-radius-md);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  cursor: pointer;
}
.bm-accent__opt:hover {
  background-color: var(--bm-color-surface-muted);
}
.bm-accent__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.bm-accent__swatch {
  flex: none;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-swatch, var(--bm-color-brand-base));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.bm-accent__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bm-accent__input:checked ~ .bm-accent__name {
  font-weight: var(--bm-font-weight-bold);
}
.bm-accent__input:checked ~ .bm-accent__swatch {
  box-shadow: 0 0 0 2px var(--bm-color-surface-light), 0 0 0 4px var(--bm-color-ink-base);
}
.bm-accent__input:checked ~ .bm-accent__swatch::after {
  content: "";
  position: absolute;
  inset-block-start: 0.28rem;
  inset-inline-start: 0.52rem;
  width: 0.35rem;
  height: 0.7rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.bm-accent__input:focus-visible ~ .bm-accent__swatch {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 4px;
}
.bm-accent--inline .bm-accent__group {
  padding-block: var(--bm-space-2);
}
.bm-account__panel .bm-accent--inline {
  margin-block-start: var(--bm-space-1);
  border-block-start: 1px solid var(--bm-color-line-base);
}
.bm-header__mobile-menu .bm-accent--inline {
  margin-block-start: var(--bm-space-2);
}
.bm-accent__btn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Dashboard top bar: the dot gets a visible word beside it (the button is 'Accent colour' to assistive tech and in the tooltip) from 768px up; phones keep the round button. */
@media (min-width: 768px) {
  .bm-dash-app__tools .bm-accent__btn {
    width: auto;
    min-height: 2.25rem;
    height: auto;
    gap: var(--bm-space-2);
    padding-inline: var(--bm-space-3);
  }
  .bm-dash-app__tools .bm-accent__btn .bm-accent__btn-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    color: var(--bm-color-ink-base);
    font-size: var(--bm-text-sm);
    font-weight: var(--bm-font-weight-medium);
  }
}

/* Swatch colours for the picker */
.bm-accent__swatch[data-accent="green"] { --bm-swatch: #166534; }
.bm-accent__swatch[data-accent="blue"] { --bm-swatch: #115bd2; }
.bm-accent__swatch[data-accent="purple"] { --bm-swatch: #692dd2; }
.bm-accent__swatch[data-accent="orange"] { --bm-swatch: #a04008; }
.bm-accent__swatch[data-accent="red"] { --bm-swatch: #be1b1b; }
.bm-accent__swatch[data-accent="teal"] { --bm-swatch: #0b6358; }
.bm-accent__swatch[data-accent="pink"] { --bm-swatch: #b21f69; }
.bm-accent__swatch[data-accent="graphite"] { --bm-swatch: #556275; }
/* --------------------------------------------------------------------------
   47. Owner dashboard app shell, wiring (phase 2, see docs/dashboard-redesign.md)
   Adds what the real markup needs on top of partial 44: classes that replaced inline style attributes, the #56 listing tools (search form, status chips,
   pager, count line) restyled to the app look, the claims list, the widgets drawer and the progress bar steps. Tokens only; light and dark follow the shell.
   -------------------------------------------------------------------------- */

.bm-dash-app__listing-text {
  min-width: 0;
}

.bm-dash-app__card-body--tab {
  padding-block-start: var(--bm-space-5);
}

.bm-dash-app__listings-actions {
  justify-content: flex-end;
  margin-block-end: var(--bm-space-4);
}

.bm-dash-app__subhead {
  margin: var(--bm-space-5) 0 var(--bm-space-3);
  color: var(--bm-color-ink-dark);
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-bold);
}

.bm-dash-app__seg-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.bm-dash-app__seg {
  flex-wrap: wrap;
}

.bm-dash-app__row-actions form {
  margin: 0;
}

.bm-dash-app__more-menu form {
  margin: 0;
}

.bm-dash-app__item form {
  margin: 0;
}

.bm-dash-app__card--start {
  padding-block: var(--bm-space-4);
}

.bm-dash-app__step-title a {
  color: var(--bm-dash-text-brand);
  font-weight: var(--bm-font-weight-semibold);
}

/* Progress bar: ten steps of width, no inline style needed. */
.bm-dash-app__progress-bar--p0 { width: 0; }
.bm-dash-app__progress-bar--p10 { width: 10%; }
.bm-dash-app__progress-bar--p20 { width: 20%; }
.bm-dash-app__progress-bar--p30 { width: 30%; }
.bm-dash-app__progress-bar--p40 { width: 40%; }
.bm-dash-app__progress-bar--p50 { width: 50%; }
.bm-dash-app__progress-bar--p60 { width: 60%; }
.bm-dash-app__progress-bar--p70 { width: 70%; }
.bm-dash-app__progress-bar--p80 { width: 80%; }
.bm-dash-app__progress-bar--p90 { width: 90%; }
.bm-dash-app__progress-bar--p100 { width: 100%; }

/* ---------------------------------------------------------------- Listing tools from partial 43, in the app look */

.bm-dash-app .bm-dash-tools {
  margin: 0 0 var(--bm-space-4);
  padding: var(--bm-space-3);
  background-color: var(--bm-color-surface-base);
  border-color: var(--bm-dash-card-border);
  border-radius: var(--bm-radius-lg);
}

.bm-dash-app .bm-dash-tools__field label {
  color: var(--bm-color-muted-base);
}

.bm-dash-app .bm-dash-tools input[type="search"],
.bm-dash-app .bm-dash-tools select {
  min-height: 2.5rem;
  border-color: var(--bm-color-line-dark);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-dash-card-bg);
  color: var(--bm-color-ink-base);
}

.bm-dash-app .bm-dash-tools__buttons .bm-dash-app__act {
  min-height: 2.5rem;
}

.bm-dash-app .bm-dash-chips ul {
  margin: 0 0 var(--bm-space-3);
}

.bm-dash-app .bm-dash-chips .bm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: 2rem;
  padding: var(--bm-space-1) var(--bm-space-3);
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-dash-card-bg);
  color: var(--bm-color-ink-light);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  text-decoration: none;
}

.bm-dash-app .bm-dash-chips .bm-chip:hover {
  background-color: var(--bm-dash-hover-bg);
}

.bm-dash-app .bm-dash-chips .bm-chip.bm-chip--active {
  border-color: var(--bm-color-brand-base);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
}

.bm-dash-app .bm-dash-chips__n {
  font-variant-numeric: tabular-nums;
}

.bm-dash-app .bm-dash-count {
  margin: 0 0 var(--bm-space-3);
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
}

.bm-dash-app .bm-dash-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-1);
  margin-block: var(--bm-space-4) 0;
}

.bm-dash-app .bm-dash-pager .bm-pagination__btn {
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--bm-space-2);
  border: 0;
  border-radius: var(--bm-radius-md);
  background-color: transparent;
  color: var(--bm-color-ink-light);
  font-weight: var(--bm-font-weight-semibold);
  text-decoration: none;
}

.bm-dash-app .bm-dash-pager a.bm-pagination__btn:hover {
  background-color: var(--bm-dash-hover-bg);
}

.bm-dash-app .bm-dash-pager .bm-pagination__btn.is-active {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
}

.bm-dash-app .bm-dash-nomatch {
  padding-block: var(--bm-space-6);
}

/* ---------------------------------------------------------------- Ownership claims list (claims tab) and the dispute block from partial 42 */

.bm-dash-app .bm-dash-claims {
  display: grid;
  gap: var(--bm-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-dash-app .bm-dash-claims > li {
  padding: var(--bm-space-3) var(--bm-space-4);
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
}

/* ---------------------------------------------------------------- Widgets drawer (overview > Customize) */

.bm-dash-app__drawer-title {
  margin: 0;
  color: var(--bm-color-ink-dark);
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-bold);
}

.bm-dash-app__drawer-note {
  margin: 0;
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
}

.bm-dash-app__drawer-form {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--bm-space-3);
}

.bm-dash-app__drawer-label {
  color: var(--bm-color-ink-dark);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-dash-app__drawer-save {
  margin-block-start: auto;
  padding-block-start: var(--bm-space-4);
}

.bm-dash-app__drawer-save .bm-dash-app__act {
  width: 100%;
}

.bm-widget-drawer:not(.is-open) {
  visibility: hidden;
}

:root[data-bm-theme="dark"] .bm-widget-drawer {
  background-color: var(--bm-color-surface-light);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-widget-drawer {
    background-color: var(--bm-color-surface-light);
  }
}

.bm-dash-app__listings {
  min-width: 0;
}

/* The app shell has its own title in the top bar: hide the page title the site template prints above it (one title only). */
body.bm-page--dashboard-app .bm-page-header,
body.bm-page--dashboard-app .brxe-post-title,
body.bm-page--dashboard-app .wp-block-post-title,
body.bm-page--dashboard-app main > .entry-title {
  display: none;
}

/* The shell takes the whole width of the page area even inside a constrained block-theme layout. */
.bm-dash-app {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* Tabs that still print plugin markup (bookings, saved, promotions) must never widen the page: they scroll inside their card instead. */
.bm-dash-app__card-body--tab {
  overflow-x: auto;
}

.bm-dash-app__card-body--tab select {
  max-width: 100%;
}
/* --------------------------------------------------------------------------
   48. Owner dashboard: fixes seen on the real Bricks page (Bricks container, Automatic.css resets, accent popover)
   - the shell breaks out of the narrow Bricks container to a wide centred column
   - the page title Bricks prints above the shell is hidden (one title: the top bar's)
   - cards are <section>: Automatic.css pads every section, so card padding is reset here
   - primary buttons keep their label colour whatever link colour the site CSS sets
   - the accent popover sits in the top bar without growing it
   -------------------------------------------------------------------------- */

.bm-dash-app {
  font-size: max(14px, var(--bm-text-sm));
}

/* Full bleed on the dashboard page: the Bricks wrappers lose their max-width and padding, the shell takes the viewport width (sidebar flush left),
   and body clips the few pixels the 100vw trick would add for a vertical scrollbar, so there is no horizontal scrollbar. */
body.bm-page--dashboard-app {
  overflow-x: clip;
}

body.bm-page--dashboard-app :is(#brx-content, .brxe-section, .brxe-container, .entry-content, .wp-block-post-content):has(.bm-dash-app) {
  max-width: none;
  padding-inline: 0;
  padding-block: 0;
  margin-inline: 0;
}

/* Outside the plain-page frame (Bricks builds the page): break out of the container with the viewport trick. */
body.bm-page--dashboard-app :not(#brx-content.type-page) > .bm-dash-app {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

/* Main column: fills the width next to the sidebar (same side padding as the top bar), capped at 100rem (1600px) on very wide screens and left aligned, never centred. */
.bm-dash-app__content > .bm-dash-app__stack {
  max-width: 100rem;
  margin-inline: 0;
}

/* One title only: hide the page title the template prints above the shell (but not the shell's own h1). */
body.bm-page--dashboard-app #brx-content :is(h1, .brxe-post-title, .bricks-heading, .entry-title):not(.bm-dash-app *),
body.bm-page--dashboard-app .wp-block-post-title:not(.bm-dash-app *),
body.bm-page--dashboard-app .bm-dash-hide-title {
  display: none;
}

/* Cards: no section padding or margins from the site CSS. */
.bm-dash-app section.bm-dash-app__card {
  margin-block: 0;
  padding: 0;
}

.bm-dash-app :is(.bm-dash-app__card-title, .bm-dash-app__card-sub, .bm-dash-app__kpi-label, .bm-dash-app__kpi-value, .bm-dash-app__kpi-sub, .bm-dash-app__greeting-title, .bm-dash-app__greeting-sub, .bm-dash-app__crumb-title, .bm-dash-app__empty-title, .bm-dash-app__empty-text, .bm-dash-app__item-title, .bm-dash-app__item-meta) {
  margin-block: 0;
}

.bm-dash-app :is(.bm-dash-app__list, .bm-dash-app__kpis, .bm-dash-app__legend, .bm-dash-app__steps) {
  margin-block: 0;
  padding-inline-start: 0;
}

.bm-dash-app__kpi-label,
.bm-dash-app__card-sub,
.bm-dash-app__kpi-sub,
.bm-dash-app__item-meta {
  font-size: max(12px, var(--bm-text-xs));
}

/* Chart: about 260px, not a tall empty band. */
.bm-dash-app__chart-plot {
  height: 13rem;
}

/* Primary buttons and active controls: label colour wins over link colours set by the site (Bricks / Automatic.css). */
.bm-dash-app a.bm-dash-app__act-primary,
.bm-dash-app button.bm-dash-app__act-primary,
.bm-dash-app a.bm-dash-app__act-primary:visited,
.bm-dash-app a.bm-dash-app__act-primary:hover,
.bm-dash-app .bm-dash-chips a.bm-chip.bm-chip--active,
.bm-dash-app .bm-dash-pager a.bm-pagination__btn.is-active,
.bm-dash-app span.bm-pagination__btn.is-active {
  color: var(--bm-color-btn-primary-text, #fff);
}

.bm-dash-app a.bm-dash-app__rowbtn--primary,
.bm-dash-app button.bm-dash-app__rowbtn--primary {
  color: var(--bm-dash-text-brand);
}

.bm-dash-app a.bm-dash-app__act-primary .bm-dash-app__icon {
  stroke: currentColor;
}

/* Accent switcher in the top bar: the compact popover (button + panel), never the open list. */
.bm-dash-app__tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
}

.bm-dash-app__tools .bm-accent {
  position: relative;
}

.bm-dash-app__tools .bm-accent__panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--bm-space-2));
  z-index: var(--bm-z-dropdown);
}

/* No public header on the dashboard: the top bar carries brand (sidebar), back to site, theme, accent, account, the primary action. */
body.bm-page--dashboard-app .bm-header {
  display: none;
}

.bm-dash-app__tools {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.bm-dash-app__tools .bm-account__panel {
  inset-inline-end: 0;
  inset-inline-start: auto;
}

.bm-dash-app__tools .bm-theme-toggle {
  min-height: 2.25rem;
}

.bm-dash-app__tools .bm-account__btn {
  min-height: 2.25rem;
}

@media (max-width: 767px) {
  .bm-dash-app__back-text,
  .bm-dash-app__tools .bm-account__name,
  .bm-dash-app__tools .bm-theme-toggle__label,
  .bm-dash-app__cta span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Skip link: hidden until focused, whatever transform the page applies. Moved fully above the viewport (a clipped 1px box left a sliver at the top edge). */
.bm-skip-link:not(:focus):not(:focus-visible) {
  position: absolute;
  inset-block-start: -9999px;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Template heading rules (Bricks / Automatic.css) must not resize the shell's own headings. */
.bm-dash-app h1.bm-dash-app__crumb-title {
  margin: 0;
  font-size: var(--bm-text-xl);
  line-height: 1.2;
}

.bm-dash-app h2.bm-dash-app__greeting-title {
  margin: 0;
  font-size: var(--bm-text-2xl);
  line-height: 1.2;
}

.bm-dash-app h2.bm-dash-app__card-title,
.bm-dash-app h3.bm-dash-app__empty-title {
  margin: 0;
  line-height: 1.3;
}

.bm-dash-app__topbar {
  flex-wrap: wrap;
}

.bm-dash-app__crumb {
  min-width: 0;
  flex: 1 1 8rem;
}

.bm-dash-app__tools {
  flex: 0 1 auto;
}

.bm-dash-app__back,
.bm-dash-app__cta {
  white-space: nowrap;
}

/* ---- Plain WordPress page frame (body.page-template-default, main#brx-content.type-page): partial 21 gives every child of #brx-content a container width and
   padding, and colours every link brand green (a:not(.bm-btn), specificity 1,2,2). On the dashboard page the shell is full width and keeps its own link colours. */
body.page-template-default.bm-page--dashboard-app #brx-content.type-page {
  padding-block: 0;
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page > :not(.bm-skip-link) {
  width: auto;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page > .bm-dash-app {
  width: 100%;
}

body.admin-bar .bm-dash-app {
  --bm-dash-app-top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .bm-dash-app {
    --bm-dash-app-top: 46px;
  }
}

/* Link colours of the shell (from partial 44), repeated with the page frame's specificity so they win over a:not(.bm-btn). */
body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__brand {
  color: var(--bm-color-ink-dark);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__link {
  color: var(--bm-color-ink-light);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__link:hover {
  color: var(--bm-color-ink-dark);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__logout {
  color: var(--bm-color-muted-base);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__logout:hover {
  color: var(--bm-color-ink-dark);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__iconbtn {
  color: var(--bm-color-ink-light);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__iconbtn:hover {
  color: var(--bm-color-ink-dark);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__seg-btn {
  color: var(--bm-color-ink-light);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__listing-title {
  color: var(--bm-color-ink-dark);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__rowbtn {
  color: var(--bm-color-ink-light);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__rowbtn:hover {
  color: var(--bm-color-ink-dark);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__page {
  color: var(--bm-color-ink-light);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__tab {
  color: var(--bm-color-ink-light);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__act {
  color: var(--bm-color-ink-dark);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__link.is-active,
body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__tab.is-active,
body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__link-more,
body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__rowbtn--primary {
  color: var(--bm-dash-text-brand);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__seg-btn.is-active {
  color: var(--bm-color-ink-dark);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__act-primary,
body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__act-primary:hover,
body.page-template-default.bm-page--dashboard-app #brx-content.type-page a.bm-dash-app__page.is-current {
  color: var(--bm-color-btn-primary-text);
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page .bm-dash-app__tools a.bm-account__item {
  color: var(--bm-color-ink-base);
}

/* The page builder's section rule (flex, large gap, padding, fixed text colour) must not shape the cards. */
.bm-dash-app section.bm-dash-app__card {
  display: block;
  gap: 0;
  color: inherit;
}

/* One continuous sidebar column: the panel colour and divider run the full height of the app, not only as tall as the sticky sidebar. */
@media (min-width: 1100px) {
  .bm-dash-app {
    background-image: linear-gradient(to right, var(--bm-dash-card-bg) calc(var(--bm-dash-sidebar-w) - 1px), var(--bm-dash-card-border) calc(var(--bm-dash-sidebar-w) - 1px), var(--bm-dash-card-border) var(--bm-dash-sidebar-w), transparent var(--bm-dash-sidebar-w));
  }
}

/* ---- Plugin-provided tabs (Saved, Promotions, Bookings, Profile, any bm_dashboard_tab_html) inside the card: one hierarchy, token sizes, list rows like the listings table.
   Scoped under .bm-dash-app so public pages keep their own look. */
.bm-dash-app section {
  display: block;
  gap: 0;
  color: inherit;
}

.bm-dash-app__card-body--tab :is(h2, h3, h4):not([class*="bm-dash-app__"]) {
  margin: var(--bm-space-6) 0 var(--bm-space-3);
  color: var(--bm-color-ink-dark);
  font-size: 1.125rem;
  font-weight: var(--bm-font-weight-semibold, 600);
  line-height: 1.3;
}

.bm-dash-app__card-body--tab :is(h2, h3, h4):not([class*="bm-dash-app__"]):first-child {
  margin-top: 0;
}

.bm-dash-app__card-body--tab p:not([class*="bm-dash-app__"]) {
  margin: 0 0 var(--bm-space-3);
  color: var(--bm-color-ink-light);
  font-size: max(14px, var(--bm-text-sm));
  line-height: var(--bm-line-height-normal);
}

.bm-dash-app__card-body--tab ul:not([class*="bm-dash-app__"]) {
  margin: 0 0 var(--bm-space-4);
  padding: 0;
  list-style: none;
  overflow: hidden;
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-lg);
}

.bm-dash-app__card-body--tab ul:not([class*="bm-dash-app__"]) > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-3);
  margin: 0;
  padding: var(--bm-space-3) var(--bm-space-4);
  border-block-end: 1px solid var(--bm-color-line-light);
}

.bm-dash-app__card-body--tab ul:not([class*="bm-dash-app__"]) > li:last-child {
  border-block-end: 0;
}

.bm-dash-app__card-body--tab ul:not([class*="bm-dash-app__"]) > li form {
  margin: 0;
}

body.page-template-default.bm-page--dashboard-app #brx-content.type-page .bm-dash-app__card-body--tab ul > li > a:not(.bm-btn) {
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-semibold, 600);
  text-decoration: none;
}

/* Buttons printed by the plugins: compact, same look as the shell's own */
.bm-dash-app__card-body--tab .bm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-2);
  min-height: 2rem;
  padding: var(--bm-space-1) var(--bm-space-3);
  border: 1px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-dash-card-bg);
  color: var(--bm-color-ink-dark);
  font: inherit;
  font-size: max(12px, var(--bm-text-xs));
  font-weight: var(--bm-font-weight-semibold, 600);
  text-decoration: none;
  cursor: pointer;
}

.bm-dash-app__card-body--tab .bm-btn--primary {
  border-color: var(--bm-color-brand-base);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
}

/* Tables printed by the plugins (promotions, bookings) */
.bm-dash-app__card-body--tab table.bm-dash {
  width: 100%;
  border-collapse: collapse;
  font-size: max(14px, var(--bm-text-sm));
}

.bm-dash-app__card-body--tab table.bm-dash th {
  padding: var(--bm-space-2) var(--bm-space-3);
  border-block: 1px solid var(--bm-dash-card-border);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-muted-base);
  font-size: max(12px, var(--bm-text-xs));
  font-weight: var(--bm-font-weight-semibold, 600);
  text-align: start;
  white-space: nowrap;
}

.bm-dash-app__card-body--tab table.bm-dash td {
  padding: var(--bm-space-3);
  border-block-end: 1px solid var(--bm-color-line-light);
  vertical-align: middle;
}

/* Forms (profile) and cards inside the tab card: no second card frame */
.bm-dash-app__card-body--tab .bm-slot-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.bm-dash-app__card-body--tab .bm-form__label {
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-semibold, 600);
}

.bm-dash-app__card-body--tab details {
  margin-block-start: var(--bm-space-4);
  padding: var(--bm-space-3) var(--bm-space-4);
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-lg);
}

/* Compact empty state (icon, one line, one action) */
.bm-dash-app__empty--compact {
  padding: var(--bm-space-6) var(--bm-space-4);
}

.bm-dash-app__empty--compact .bm-dash-app__empty-icon {
  width: 2.5rem;
  height: 2.5rem;
}

/* Widgets drawer: a viewport overlay below the WP admin bar, above the shell. */
.bm-widget-drawer {
  inset-block-start: var(--wp-admin--admin-bar--height, 0px);
  z-index: calc(var(--bm-z-modal) + 1);
}

/* Status chips: label colour on the brand fill (partial 40 sets another one for the old tabs). */
body.page-template-default.bm-page--dashboard-app #brx-content.type-page .bm-dash-chips a.bm-chip.bm-chip--active,
body.page-template-default.bm-page--dashboard-app #brx-content.type-page .bm-dash-chips a.bm-chip.bm-chip--active:hover {
  color: var(--bm-color-btn-primary-text);
}

/* No script: the Customize link points at the drawer, so :target opens it. */
.bm-widget-drawer:target {
  transform: translateX(0);
  visibility: visible;
}

.bm-dash-app__empty--compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bm-space-3);
  text-align: center;
}

.bm-dash-app__empty--compact .bm-dash-app__empty-text {
  max-width: 24rem;
  margin: 0;
}

/* Overview: the greeting is the page title (one h1), the "Here is how your N listings did" line sits under it, Customize is a top bar action. */
.bm-dash-app .bm-dash-app__crumb-sub {
  margin: var(--bm-space-1) 0 0;
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-regular);
  line-height: var(--bm-line-height-snug);
}

/* Customize: 44 px tall like the Appearance button next to it (its own rule: the Appearance rule in partial 66 is the one the nav mutant edits). */
.bm-dash-app__tools .bm-dash-app__customize {
  box-sizing: border-box;
  min-height: var(--bm-touch-target-min);
  padding-block: var(--bm-space-1);
  white-space: nowrap;
}

/* The compact chart card (fewer than 5 points) is a block, not Automatic.css's flex column with a gap. */
.bm-dash-app .bm-dash-app__card--few {
  display: block;
  gap: 0;
}
/* --------------------------------------------------------------------------
   Discovery pages and states (audit gaps): categories / areas index, no-results suggestions,
   logged-out gate, claim page actions. Tokens only; light and dark come from the tokens.
   -------------------------------------------------------------------------- */

/* Categories index: the home tile grid, with a count line under the name */
.bm-category-grid--index .bm-category-tile__count {
  font-size: var(--bm-text-xs);
}

/* Areas index: one card per country; each district is its own small card with its sub-areas under it, in a grid (a single long column was hard to scan). */
.bm-area-index {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bm-space-5);
}
/* The page frame already gives the section its side padding; the inner container added a second one (the card sat inset from the title and footer). */
.bm-container.bm-area-index {
  max-width: none;
  padding-inline: 0;
}
.bm-area-index__group {
  padding: var(--bm-space-5);
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  box-shadow: var(--bm-shadow-sm);
}
@media (min-width: 768px) {
  .bm-area-index__group {
    padding: var(--bm-space-8);
  }
}
.bm-area-index__country {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bm-space-2);
  margin: 0 0 var(--bm-space-5);
  font-size: var(--bm-text-2xl);
}
.bm-area-index__country a {
  color: var(--bm-color-ink-base);
  text-decoration: none;
}
.bm-area-index__country a:hover {
  color: var(--bm-color-brand-text);
  text-decoration: underline;
}
.bm-area-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bm-area-index__group > .bm-area-index__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--bm-space-4);
  align-items: start;
}
.bm-area-index__group > .bm-area-index__list > li {
  padding: var(--bm-space-4);
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
}
.bm-area-index__group > .bm-area-index__list > li > .bm-area-index__link {
  font-weight: var(--bm-font-weight-bold);
  font-size: var(--bm-text-lg);
}
.bm-area-index__list--sub {
  margin-block-start: var(--bm-space-2);
  padding-block-start: var(--bm-space-2);
  border-block-start: 1px solid var(--bm-color-line-base);
}
.bm-area-index__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bm-space-3);
  min-height: var(--bm-touch-target-min);
  padding-block: var(--bm-space-2);
  color: var(--bm-color-ink-base);
  text-decoration: none;
}
/* The page title is already above: no second block of padding between it and the first card. */
.bm-section:has(> .bm-container.bm-area-index) {
  padding-block-start: 0;
}
body.page-template-default #brx-content.type-page .bm-area-index__country a:not(.bm-btn) {
  color: var(--bm-color-ink-base);
}
/* Plain pages colour every link brand green (partial 21); the area names read better in ink with the hover in brand. */
body.page-template-default #brx-content.type-page .bm-area-index__link:not(.bm-btn) {
  color: var(--bm-color-ink-base);
}
.bm-area-index__link:hover span:first-child {
  color: var(--bm-color-brand-text);
  text-decoration: underline;
}
.bm-area-index__count {
  flex: none;
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-regular);
  color: var(--bm-color-muted-base);
}
.bm-index__empty {
  margin: 0;
  color: var(--bm-color-muted-base);
}

/* No-results state: ways out under the message */
.bm-no-results .bm-empty-state__actions {
  flex-wrap: wrap;
}
.bm-no-results__block {
  max-width: 40rem;
  margin: var(--bm-space-6) auto 0;
  text-align: start;
}
.bm-no-results__heading {
  margin: 0 0 var(--bm-space-3);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-base);
}
.bm-no-results__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
}
.bm-no-results__tips {
  margin: 0;
  padding-inline-start: var(--bm-space-5);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
  line-height: var(--bm-line-height-normal);
}

/* Logged-out gate on add-business / post-ad: benefits, three steps, then the buttons */
.bm-gate--rich {
  display: grid;
  gap: var(--bm-space-4);
  max-width: 40rem;
}
.bm-gate--rich > * {
  margin-block: 0;
}
.bm-gate__title {
  font-size: var(--bm-text-2xl);
}
.bm-gate__subtitle {
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-bold);
}
.bm-gate__benefits,
.bm-gate__steps {
  margin: 0;
  padding-inline-start: var(--bm-space-5);
  line-height: var(--bm-line-height-normal);
  color: var(--bm-color-ink-base);
}
.bm-gate__benefits li,
.bm-gate__steps li {
  margin-block-end: var(--bm-space-2);
}
.bm-gate__note {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
}

/* Claim / state cards: message on its own line, buttons wrap evenly (the Create account button used to sit offset under Log in at 375 px) */
.bm-claim-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-3);
}
.bm-claim-state > .bm-claim-state__msg,
.bm-claim-state > .bm-claim-state__title {
  flex: 1 0 100%;
  margin: 0;
}
.bm-claim-state .bm-btn.bm-claim-state__alt {
  margin-inline-start: 0;
}
/* Avatar (bm-avatar.php): the picture or the initials circle, and the upload block on the Profile tab. Size comes from --bm-avatar-size (set inline by bm_avatar_html). */
.bm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: var(--bm-avatar-size, 2.5rem);
  height: var(--bm-avatar-size, 2.5rem);
  border-radius: var(--bm-radius-full);
  overflow: hidden;
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
  font-size: calc(var(--bm-avatar-size, 2.5rem) * 0.4);
  font-weight: var(--bm-font-weight-bold);
  line-height: 1;
}

.bm-avatar__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bm-avatar-block__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--bm-space-4);
}

.bm-avatar-block__body {
  display: grid;
  flex: 1 1 14rem;
  min-width: 0;
  gap: var(--bm-space-3);
}

.bm-avatar-block__body input[type="file"] {
  max-width: 100%;
}

.bm-avatar-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
}
/* --------------------------------------------------------------------------
   51. Add your business / Post an ad forms (bm-submit): one card, sections, two-column grid on a wide screen, required marks, counters,
   error summary, photo uploader, opening-hours grid, amenity chips, social grid, sticky action bar on a phone, section list on a desktop.
   Tokens only; light and dark follow the tokens. Scoped to .bm-form--listing / .bm-form-wrap so the login, claim and profile forms are not touched.
   Doubled classes beat Automatic.css and Bricks with no override flag.
   -------------------------------------------------------------------------- */
body.bm-page--submit-form .bm-cta-strip,
body:has(.bm-form--listing) .bm-cta-strip,
body.bm-page--submit-form .wp-block-post-title:not(#brx-content *),
body:has(.bm-form--listing) .wp-block-post-title:not(#brx-content *),
body.bm-page--submit-form main > .entry-title,
body:has(.bm-form--listing) main > .entry-title {
  display: none;
}

.bm-form-wrap {
  width: 100%;
  max-width: 47.5rem;
  margin-inline: auto;
  box-sizing: border-box;
}

.bm-form-wrap__main {
  min-width: 0;
}

.bm-form-nav {
  display: none;
}

@media (min-width: 64rem) {
  .bm-form-wrap--business {
    max-width: 66rem;
    display: grid;
    grid-template-columns: 12.5rem minmax(0, 1fr);
    gap: var(--bm-space-8);
    align-items: start;
  }

  .bm-form-nav {
    display: block;
    position: sticky;
    top: var(--bm-space-8);
    font-size: var(--bm-text-sm);
  }
}

.bm-form-nav__title {
  margin: 0 0 var(--bm-space-2);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--bm-tracking-wide);
  color: var(--bm-color-muted-base);
}

.bm-form-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bm-space-1);
}

.bm-form-nav li {
  margin: 0;
}

.bm-form-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--bm-space-2-5);
  padding: var(--bm-space-2) var(--bm-space-3);
  border-radius: var(--bm-radius-md);
  color: var(--bm-color-ink-base);
  text-decoration: none;
}

.bm-form-nav a:hover {
  background-color: var(--bm-color-surface-dark);
}

.bm-form-nav a:focus-visible {
  outline: none;
  box-shadow: var(--bm-shadow-focus);
}

.bm-form-nav a[aria-current="true"] {
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-form-nav__dot {
  flex: 0 0 0.625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--bm-radius-full);
  border: 2px solid var(--bm-color-line-dark);
  box-sizing: border-box;
}

.bm-form-nav a.is-done .bm-form-nav__dot {
  background-color: var(--bm-color-brand-base);
  border-color: var(--bm-color-brand-base);
}

.bm-form-nav__progress {
  margin: var(--bm-space-3) 0 0;
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
}

/* The card */
.bm-form.bm-form--listing {
  display: block;
  gap: 0;
  box-sizing: border-box;
  padding: var(--bm-space-4);
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  box-shadow: var(--bm-shadow-sm);
  color: var(--bm-color-ink-base);
}

@media (min-width: 40rem) {
  .bm-form.bm-form--listing {
    padding: var(--bm-space-8);
  }
}

.bm-form--listing .bm-form__intro {
  margin: 0 0 var(--bm-space-3);
  font-size: var(--bm-text-base);
  line-height: var(--bm-line-height-normal);
  color: var(--bm-color-ink-light);
}

.bm-form--listing .bm-form__intro-req {
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-sm);
}

.bm-form--listing .bm-form__tips {
  margin: 0 0 var(--bm-space-2);
  padding: var(--bm-space-3) var(--bm-space-4);
  border-inline-start: 3px solid var(--bm-color-brand-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  line-height: var(--bm-line-height-normal);
}

/* Sections */
.bm-form--listing .bm-form__section {
  display: block;
  gap: 0;
  box-sizing: border-box;
  margin: 0;
  padding-block: var(--bm-space-6);
  border: 0;
  border-top: 1px solid var(--bm-color-line-base);
  min-width: 0;
}

.bm-form--listing .bm-form__tips + .bm-form__section {
  margin-top: var(--bm-space-4);
}

.bm-form.bm-form--listing .bm-form__section .bm-form__section-title {
  margin: 0 0 var(--bm-space-4);
  padding: 0;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-semibold);
  line-height: var(--bm-line-height-snug);
  color: var(--bm-color-ink-dark);
}

.bm-form--listing .bm-form__section-hint {
  margin: calc(-1 * var(--bm-space-2)) 0 var(--bm-space-4);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-light);
}

.bm-form--listing .bm-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bm-space-4);
}

.bm-form--listing .bm-form__grid > * {
  grid-column: 1 / -1;
  min-width: 0;
}

@media (min-width: 40rem) {
  .bm-form--listing .bm-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bm-form--listing .bm-form__grid > .bm-form__field--half {
    grid-column: auto;
  }
}

/* Collapsible optional sections */
.bm-form.bm-form--listing .bm-form__section--optional > summary {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
  margin: 0;
  min-height: var(--bm-touch-target-min);
  cursor: pointer;
  list-style: none;
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
}

.bm-form--listing .bm-form__section--optional[open] > summary {
  margin-bottom: var(--bm-space-4);
}

.bm-form--listing summary::-webkit-details-marker {
  display: none;
}

.bm-form--listing .bm-form__section--optional > summary::after,
.bm-form--listing .bm-form__more > summary::after {
  content: "";
  margin-inline-start: auto;
  width: 0.5rem;
  height: 0.5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--bm-transition-fast);
}

.bm-form--listing details[open] > summary::after {
  transform: rotate(-135deg);
}

.bm-form--listing summary:focus-visible {
  outline: none;
  border-radius: var(--bm-radius-md);
  box-shadow: var(--bm-shadow-focus);
}

.bm-form--listing .bm-form__more {
  margin-top: var(--bm-space-4);
  padding-top: var(--bm-space-3);
  border-top: 1px dashed var(--bm-color-line-base);
}

.bm-form--listing .bm-form__more > summary {
  display: flex;
  align-items: center;
  min-height: var(--bm-touch-target-min);
  cursor: pointer;
  list-style: none;
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
}

/* Fields */
.bm-form--listing fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.bm-form--listing .bm-form__section--solo > .bm-form__grid > fieldset > legend,
.bm-form--listing .bm-form__more > fieldset > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bm-form--listing .bm-form__label,
.bm-form--listing legend.bm-form__label {
  color: var(--bm-color-ink-dark);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-form--listing .bm-form__req,
.bm-form--listing .bm-form__opt {
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-regular);
  color: var(--bm-color-muted-base);
}

.bm-form--listing .bm-form__help {
  display: block;
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
  line-height: var(--bm-line-height-normal);
}

.bm-form--listing .bm-form__error {
  display: block;
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  color: var(--bm-color-danger-dark);
}

.bm-form--listing .bm-form__count {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
  text-align: end;
}

.bm-form--listing .bm-form__count.is-near {
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-form--listing .bm-form__count.is-over {
  color: var(--bm-color-danger-dark);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-form--listing input::placeholder,
.bm-form--listing textarea::placeholder {
  color: var(--bm-color-muted-base);
  opacity: 1;
}

.bm-form--listing .bm-form__field--err input,
.bm-form--listing .bm-form__field--err textarea,
.bm-form--listing .bm-form__field--err .bm-custom-select__trigger {
  border-color: var(--bm-color-danger-base);
}

.bm-form--listing input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}

/* Selects: left aligned, grey placeholder (the custom select in design/select.js) */
.bm-form--listing .bm-custom-select.bm-custom-select .bm-custom-select__trigger {
  justify-content: space-between;
  text-align: start;
  background-color: var(--bm-color-surface-light);
  border-color: var(--bm-color-line-dark);
}

.bm-form--listing .bm-custom-select.bm-custom-select .bm-custom-select__value {
  flex: 1 1 auto;
  min-width: 0;
  text-align: start;
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-regular);
  color: var(--bm-color-ink-base);
}

.bm-form--listing .bm-custom-select.bm-custom-select .bm-custom-select__value--placeholder {
  color: var(--bm-color-muted-base);
}

/* Checkboxes (negotiable, the amenity chips) */
.bm-form--listing input[type="checkbox"],
.bm-form--listing input[type="radio"] {
  accent-color: var(--bm-color-brand-base);
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

.bm-form--listing .bm-form__check--solo label,
.bm-form--listing .bm-form__closed {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: var(--bm-touch-target-min);
  font-size: var(--bm-text-base);
  color: var(--bm-color-ink-base);
  cursor: pointer;
}

.bm-form--listing .bm-form__checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--bm-space-2);
}

.bm-form--listing .bm-form__checks .bm-form__check label {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: var(--bm-touch-target-min);
  padding: var(--bm-space-2) var(--bm-space-3);
  border: 1px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  cursor: pointer;
  box-sizing: border-box;
}

.bm-form--listing .bm-form__checks .bm-form__check label:has(input:checked) {
  border-color: var(--bm-color-brand-base);
  background-color: var(--bm-color-brand-tint);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-form--listing .bm-form__checks .bm-form__check label:has(input:focus-visible) {
  box-shadow: var(--bm-shadow-focus);
}

/* Opening hours */
.bm-form--listing .bm-form__hours-head,
.bm-form--listing .bm-form__hours {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas: "day open close closed";
  gap: var(--bm-space-2);
  align-items: center;
}

.bm-form--listing .bm-form__hours-head {
  margin-top: var(--bm-space-2);
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
}

.bm-form--listing .bm-form__hours-head span:nth-child(2) { grid-area: open; }
.bm-form--listing .bm-form__hours-head span:nth-child(3) { grid-area: close; }

.bm-form--listing .bm-form__hours-day {
  grid-area: day;
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  color: var(--bm-color-ink-dark);
}

.bm-form--listing .bm-form__hours > input:nth-of-type(1) { grid-area: open; }
.bm-form--listing .bm-form__hours > input:nth-of-type(2) { grid-area: close; }
.bm-form--listing .bm-form__hours > .bm-form__closed { grid-area: closed; }

.bm-form--listing .bm-form__hours.is-closed input[type="time"] {
  background-color: var(--bm-color-surface-dark);
}

.bm-form--listing .bm-form__hours-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  margin-top: var(--bm-space-3);
}

.bm-form--listing .bm-form__hours-tools .bm-btn.bm-btn--secondary {
  padding: var(--bm-space-2) var(--bm-space-3);
  font-size: var(--bm-text-sm);
}

@media (max-width: 39.99rem) {
  .bm-form--listing .bm-form__hours-head {
    display: none;
  }

  .bm-form--listing .bm-form__hours {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "day closed" "open close";
    padding-block: var(--bm-space-2);
    border-bottom: 1px solid var(--bm-color-line-base);
  }

  .bm-form--listing .bm-form__hours > .bm-form__closed {
    justify-self: end;
    min-height: 0;
  }
}

/* Special hours, social, certificates, video */
.bm-form--listing .bm-form__social-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bm-space-3);
  margin-top: var(--bm-space-3);
}

@media (min-width: 40rem) {
  .bm-form--listing .bm-form__social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bm-form--listing .bm-form__social-row {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-1);
  color: var(--bm-color-ink-base);
}

.bm-form--listing .bm-form__social-name {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  color: var(--bm-color-ink-dark);
}

.bm-form--listing .bm-form__social-icon {
  flex: 0 0 auto;
  color: var(--bm-color-ink-light);
}

.bm-form--listing .bm-form__certs {
  display: grid;
  gap: var(--bm-space-3);
}

.bm-form--listing .bm-form__cert {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bm-space-3);
  padding: var(--bm-space-4);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-color-surface-base);
}

@media (min-width: 40rem) {
  .bm-form--listing .bm-form__cert {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bm-form--listing .bm-form__cert > label:first-child,
  .bm-form--listing .bm-form__cert > .bm-form__help {
    grid-column: 1 / -1;
  }
}

.bm-form--listing .bm-form__cert > label {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-1);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  color: var(--bm-color-ink-base);
}

.bm-form--listing .bm-form__cert > label:first-child {
  flex-direction: row;
  align-items: center;
  gap: var(--bm-space-2);
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-form--listing .bm-form__hours-special label,
.bm-form--listing .bm-form__video > input {
  color: var(--bm-color-ink-base);
}

.bm-form--listing .bm-form__video {
  display: grid;
  gap: var(--bm-space-2);
}

.bm-form--listing .bm-form__hours-special label {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-1);
  font-size: var(--bm-text-sm);
}

.bm-form--listing .bm-form__hours-special label.bm-form__check {
  flex-direction: row;
  align-items: center;
  margin-top: var(--bm-space-3);
}

/* Photo uploader */
.bm-uploader {
  display: grid;
  gap: var(--bm-space-2);
}

.bm-uploader.is-enhanced input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  opacity: 0;
}

.bm-uploader__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bm-space-2);
  padding: var(--bm-space-6) var(--bm-space-4);
  border: 2px dashed var(--bm-color-line-dark);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-light);
  font-size: var(--bm-text-sm);
  text-align: center;
}

.bm-uploader__drop.is-dragover {
  border-color: var(--bm-color-brand-base);
  background-color: var(--bm-color-brand-tint);
}

.bm-uploader__count {
  margin: 0;
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
}

.bm-uploader__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--bm-space-3);
}

.bm-uploader__item {
  position: relative;
  margin: 0;
  display: grid;
  gap: var(--bm-space-1);
  font-size: var(--bm-text-xs);
  color: var(--bm-color-ink-light);
  min-width: 0;
}

.bm-uploader__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--bm-radius-md);
  border: 1px solid var(--bm-color-line-dark);
}

.bm-uploader__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bm-uploader__cover {
  position: absolute;
  inset-block-start: var(--bm-space-1);
  inset-inline-start: var(--bm-space-1);
  padding: 0 var(--bm-space-2);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-brand-dark);
  color: var(--bm-color-text-on-dark);
  font-size: var(--bm-text-xs);
}

.bm-uploader .bm-uploader__remove {
  position: absolute;
  inset-block-start: var(--bm-space-1);
  inset-inline-end: var(--bm-space-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-scrim-dark);
  color: var(--bm-color-text-on-dark);
  font-size: var(--bm-text-lg);
  line-height: 1;
  cursor: pointer;
}

.bm-uploader .bm-uploader__remove:focus-visible {
  outline: none;
  box-shadow: var(--bm-shadow-focus);
}

.bm-uploader__msgs {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--bm-text-sm);
  color: var(--bm-color-danger-dark);
}

.bm-uploader__msgs:empty {
  display: none;
}

/* Error summary */
.bm-form__summary {
  margin: 0 0 var(--bm-space-4);
  padding: var(--bm-space-4);
  border: 1px solid var(--bm-color-danger-base);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-color-danger-tint);
  color: var(--bm-color-ink-base);
}

.bm-form__summary:focus-visible {
  outline: none;
  box-shadow: var(--bm-shadow-focus);
}

.bm-form__summary .bm-form__summary-title {
  margin: 0 0 var(--bm-space-2);
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-danger-dark);
}

.bm-form__summary ul {
  margin: 0 0 var(--bm-space-2);
  padding-inline-start: var(--bm-space-5);
  font-size: var(--bm-text-sm);
}

.bm-form__summary a {
  color: var(--bm-color-danger-dark);
  text-decoration: underline;
}

/* Action bar: sticky at the bottom of the screen on a phone */
.bm-form--listing .bm-form__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--bm-space-3);
  margin-top: var(--bm-space-2);
  padding-top: var(--bm-space-5);
  border-top: 1px solid var(--bm-color-line-base);
}

.bm-form--listing .bm-form__actions .bm-btn {
  flex: 1 1 0;
  justify-content: center;
}

@media (min-width: 40rem) {
  .bm-form--listing .bm-form__actions .bm-btn {
    flex: 0 1 auto;
  }
}

@media (max-width: 39.99rem) {
  .bm-form--listing .bm-form__actions {
    position: sticky;
    bottom: 0;
    z-index: var(--bm-z-sticky-bar);
    margin-inline: calc(-1 * var(--bm-space-4));
    padding: var(--bm-space-3) var(--bm-space-4);
    background-color: var(--bm-color-surface-light);
    box-shadow: var(--bm-shadow-sticky-bar);
    border-radius: 0;
  }
}

.bm-form--listing .bm-form__next {
  margin-top: var(--bm-space-4);
  padding: var(--bm-space-3) var(--bm-space-4);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  font-size: var(--bm-text-sm);
  line-height: var(--bm-line-height-normal);
  color: var(--bm-color-ink-light);
}

.bm-form--listing .bm-form__next strong {
  color: var(--bm-color-ink-dark);
}

.bm-form-nav__state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.bm-form--listing .bm-form__hours-block > .bm-form__label,
.bm-form--listing .bm-uploader > label.bm-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.bm-form--listing .bm-form__more > summary {
  gap: var(--bm-space-2);
}

.bm-form--listing .bm-form__tips strong,
.bm-form--listing .bm-form__next strong {
  display: block;
  margin-bottom: var(--bm-space-1);
}
/* --------------------------------------------------------------------------
   52. Add / Edit forms inside the dashboard shell (bm-submit: ?bm_tab=ads&bm_view=new), the one "New listing" menu, the compact account button and the
   "All clear" banner on the overview. Tokens only; light and dark follow the tokens. Doubled classes beat Automatic.css and Bricks with no override flag.
   The form is the same markup as on the standalone page; only the frame changes (sidebar, top bar, no bottom tab bar, section list by container width).
   -------------------------------------------------------------------------- */

.bm-dash-app__formview {
  min-width: 0;
}

/* The page builder gives every <section> side padding (partial 51 only sets the block padding), which pushed the section headings and fields 2rem in from the
   <details> sections and narrowed the fields on a phone. Inside the shell the form card already has its own padding. */
.bm-dash-app .bm-form--listing .bm-form__section {
  display: block;
  gap: 0;
  padding-inline: 0;
}

/* The form wrap fills the content area up to a readable width; the standalone page rules (partial 51) keep working outside the shell. */
.bm-dash-app .bm-form-wrap {
  margin-inline: 0;
}

.bm-dash-app .bm-form-wrap.bm-form-wrap--business {
  display: block;
  max-width: 66rem;
}

/* Section list: above the form while the content area is narrow (it is sized by the area, not by the screen, because the sidebar takes 16rem of it) */
.bm-dash-app .bm-form-wrap--business .bm-form-nav {
  display: block;
  position: static;
  margin-block-end: var(--bm-space-4);
  padding: var(--bm-space-3) var(--bm-space-4);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-color-surface-light);
}

.bm-dash-app .bm-form-wrap--business .bm-form-nav ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-1) var(--bm-space-2);
}

.bm-dash-app .bm-form-wrap--business .bm-form-nav__progress {
  margin-block-start: var(--bm-space-2);
}

@container bm-dash (min-width: 50rem) {
  .bm-dash-app .bm-form-wrap.bm-form-wrap--business {
    display: grid;
    grid-template-columns: 12.5rem minmax(0, 1fr);
    gap: var(--bm-space-8);
    align-items: start;
  }

  .bm-dash-app .bm-form-wrap--business .bm-form-nav {
    position: sticky;
    top: calc(var(--bm-dash-top, 0px) + 5.5rem);
    margin-block-end: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
  }

  .bm-dash-app .bm-form-wrap--business .bm-form-nav ol {
    display: grid;
    gap: var(--bm-space-1);
  }
}

/* Phone: no bottom tab bar on a form (it would sit on top of the form's own sticky action bar); the drawer opens from the top bar instead.
   The top bar button exists only in the form view. */
.bm-dash-app__menu-btn {
  flex: none;
}

@media (max-width: 767px) {
  .bm-dash-app.bm-dash-app--form {
    padding-block-end: 0;
  }

  .bm-dash-app.bm-dash-app--form .bm-dash-app__crumb-trail {
    display: block;
  }

  .bm-dash-app.bm-dash-app--form .bm-dash-app__content {
    padding-inline: var(--bm-space-4);
  }
}

/* One add action: the "New listing" menu in the top bar */
.bm-dash-newmenu .bm-dash-app__cta {
  gap: var(--bm-space-2);
}

.bm-dash-newmenu .bm-dash-app__cta .bm-account__chevron {
  display: inline-flex;
}

.bm-dash-newmenu .bm-dash-app__cta[aria-expanded="true"] .bm-account__chevron {
  transform: rotate(180deg);
}

.bm-dash-newmenu .bm-account__panel {
  min-width: 12rem;
}

/* Account button: initial and chevron only; the menu header carries name and role */
.bm-account__btn.bm-account__btn--compact {
  padding-inline: var(--bm-space-1) var(--bm-space-2);
  max-width: none;
}

.bm-account__head {
  display: grid;
  gap: var(--bm-space-1);
  margin: 0 0 var(--bm-space-1);
  padding: var(--bm-space-2) var(--bm-space-3) var(--bm-space-3);
  border-block-end: 1px solid var(--bm-color-line-base);
}

.bm-account__head-name {
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
  overflow-wrap: anywhere;
}

.bm-account__head-role {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
}

/* Overview: nothing urgent = one line instead of an empty card */
.bm-dash-app__allclear {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-2) var(--bm-space-4);
  padding: var(--bm-space-3) var(--bm-space-5);
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-dash-card-bg);
  color: var(--bm-color-ink-light);
  font-size: var(--bm-text-sm);
}

.bm-dash-app__allclear-icon {
  display: inline-flex;
  flex: none;
  color: var(--bm-color-success-dark, var(--bm-color-brand-text));
}

.bm-dash-app__allclear-icon .bm-dash-app__icon {
  width: 1.125rem;
  height: 1.125rem;
}

.bm-dash-app__allclear-text strong,
.bm-dash-app__allclear-tip strong {
  color: var(--bm-color-ink-dark);
}

.bm-dash-app__allclear-tip {
  color: var(--bm-color-muted-base);
}

/* Plain WordPress page frame (partial 48): every link in the frame is coloured brand green (specificity 1,2,2); the error summary keeps its own link colour. */
body.page-template-default.bm-page--dashboard-app #brx-content.type-page .bm-form__summary a {
  color: var(--bm-color-danger-dark);
}
/* My bookings tab: the search form has two cells (field, buttons), not the five of the listing tools. Tokens only. */
.bm-dash-tools--bookings {
  grid-template-columns: minmax(0, 1fr) auto;
}
@media (max-width: 767px) {
  .bm-dash-tools--bookings {
    grid-template-columns: 1fr;
  }
}

/* Booking mode inline form: dropdown and Save button side by side */
.bm-booking-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  flex-wrap: nowrap;
  vertical-align: middle;
}

.bm-booking-inline select {
  min-height: var(--bm-touch-target-min);
  padding-inline: var(--bm-space-3) var(--bm-space-8);
  padding-block: var(--bm-space-2);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  accent-color: var(--bm-color-brand-base);
  cursor: pointer;
  transition: border-color var(--bm-transition-fast), box-shadow var(--bm-transition-fast);
}

.bm-booking-inline select:hover {
  border-color: var(--bm-color-line-dark);
}

.bm-booking-inline select:focus,
.bm-booking-inline select:focus-visible {
  outline: none;
  border-color: var(--bm-color-brand-base);
  box-shadow: var(--bm-shadow-focus);
}

.bm-booking-inline select option {
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  padding-block: var(--bm-space-2);
  padding-inline: var(--bm-space-3);
}

.bm-booking-inline select option:checked,
.bm-booking-inline select option:hover,
.bm-booking-inline select option:focus {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-surface-light);
}

.bm-booking-inline .bm-btn {
  min-height: var(--bm-touch-target-min);
  padding-inline: var(--bm-space-4);
  font-size: var(--bm-text-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Empty state: subtle inline presentation with explanation, removing bare card styling */
.bm-bookings > .bm-empty-state:not(.bm-dash-nomatch) {
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding-block: var(--bm-space-8) var(--bm-space-6);
  padding-inline: 0;
  text-align: center;
}

.bm-bookings > .bm-empty-state:not(.bm-dash-nomatch) .bm-empty-state__title {
  margin-block-end: var(--bm-space-2);
}

.bm-bookings > .bm-empty-state:not(.bm-dash-nomatch) .bm-empty-state__title::after {
  content: "When customers request a reservation or make an enquiry on your listings, they will appear here.";
  display: block;
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-regular);
  color: var(--bm-color-muted-base);
  max-width: 32rem;
  margin-inline: auto;
  margin-block-start: var(--bm-space-2);
  line-height: var(--bm-line-height-normal);
}

/* Hide single-row count when table has only 1 row */
.bm-bookings .bm-dash-count:has(+ .bm-dash tbody > tr:only-child) {
  display: none;
}

/* Dark mode: ensure native options and selects align with dark theme tokens */
:root[data-bm-theme="dark"] .bm-booking-inline select,
:root[data-bm-theme="dark"] .bm-booking-inline select option {
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-base);
  border-color: var(--bm-color-line-base);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-booking-inline select,
  :root:not([data-bm-theme="light"]) .bm-booking-inline select option {
    background-color: var(--bm-color-surface-dark);
    color: var(--bm-color-ink-base);
    border-color: var(--bm-color-line-base);
  }
}
/* Plan comparison table ([bm_plans compare="1"]), upgrade notes in the owner form and the dashboard Plan tab (bm-plans.php, bm-entitlements.php) */
.bm-plans-compare {
  position: relative;
  overflow-x: auto;
  max-inline-size: 100%;
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
}

.bm-plans-compare:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
}

.bm-plans-compare__table {
  inline-size: 100%;
  min-inline-size: 36rem;
  border-collapse: collapse;
  font-size: var(--bm-text-sm);
}

.bm-plans-compare__caption {
  padding: var(--bm-space-3) var(--bm-space-4);
  text-align: start;
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-plans-compare__table th,
.bm-plans-compare__table td {
  padding: var(--bm-space-3) var(--bm-space-4);
  border-block-start: 1px solid var(--bm-color-line-base);
  text-align: start;
  vertical-align: middle;
}

.bm-plans-compare__plan,
.bm-plans-compare__corner {
  background-color: var(--bm-color-surface-base);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-plans-compare__plan.bm-plans-compare__plan--featured {
  border-block-end: 3px solid var(--bm-color-brand-base);
}

.bm-plans-compare__feature {
  font-weight: var(--bm-font-weight-medium);
}

.bm-plans-compare__cell--yes {
  color: var(--bm-color-ink-base);
}

.bm-plans-compare__cell--no,
.bm-plans-compare__cell--na {
  color: var(--bm-color-ink-light);
}

.bm-plans-compare__cell--cta {
  white-space: nowrap;
}

.bm-plans-compare__sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Upgrade note shown instead of a field the plan does not include */
.bm-ent-note {
  padding: var(--bm-space-3) var(--bm-space-4);
  border: 1px dashed var(--bm-color-line-dark);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
}

.bm-ent-note__text {
  margin: 0;
  font-size: var(--bm-text-sm);
}

/* Dashboard "Plan" tab */
.bm-ent {
  display: grid;
  gap: var(--bm-space-4);
}

.bm-ent__title,
.bm-ent__biz-title {
  margin: 0;
}

.bm-ent__biz {
  display: grid;
  gap: var(--bm-space-3);
  padding: var(--bm-space-4);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
}

.bm-ent__now,
.bm-ent__status,
.bm-ent__lead,
.bm-ent__pay {
  margin: 0;
}

.bm-ent__until {
  color: var(--bm-color-ink-light);
}

.bm-ent__status {
  padding: var(--bm-space-2) var(--bm-space-3);
  border-radius: var(--bm-radius-sm);
  background-color: var(--bm-color-surface-dark);
}

.bm-ent__status.bm-ent__status--ok {
  background-color: var(--bm-color-success-tint);
}

.bm-ent__status.bm-ent__status--no {
  background-color: var(--bm-color-danger-tint);
}
/* Restaurant menu (bm-menu): the Menu card, order buttons, cuisine / service chips and the owner form rows. Tokens only; light and dark come from the tokens. */
.bm-menu__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  margin: 0 0 var(--bm-space-4);
  padding: 0;
  list-style: none;
}

.bm-menu__chips .bm-menu__chip {
  padding: var(--bm-space-1) var(--bm-space-3);
  border: 1px solid var(--bm-color-chip-border);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-chip-bg);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  line-height: 1.4;
}

.bm-menu__chips .bm-menu__chip--cuisine {
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-ink-dark);
}

.bm-card .bm-menu__chips {
  margin: var(--bm-space-2) 0 0;
}

.bm-card .bm-menu__chips .bm-menu__chip {
  padding: 0 var(--bm-space-2);
  font-size: var(--bm-text-xs);
}

/* Sections: <details>, open by default; a phone closes all but the first (small script) */
.bm-slot-card--menu .bm-menu__section {
  border-block-start: 1px solid var(--bm-color-line-base);
}

.bm-slot-card--menu .bm-menu__section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-3);
  padding: var(--bm-space-3) 0;
  min-height: 44px;
  cursor: pointer;
  color: var(--bm-color-ink-dark);
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-bold);
}

.bm-slot-card--menu .bm-menu__count {
  min-width: 1.75em;
  padding: 0 var(--bm-space-2);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-muted);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  text-align: center;
}

.bm-slot-card--menu .bm-menu__items {
  display: grid;
  gap: var(--bm-space-3);
  margin: 0;
  padding: 0 0 var(--bm-space-4);
  list-style: none;
}

.bm-menu-item {
  display: flex;
  align-items: flex-start;
  gap: var(--bm-space-3);
}

.bm-menu-item .bm-menu-item__photo {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--bm-radius-md);
  object-fit: cover;
}

.bm-menu-item .bm-menu-item__body {
  flex: 1 1 auto;
  min-width: 0;
}

.bm-menu-item .bm-menu-item__name {
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-semibold);
  overflow-wrap: anywhere;
}

.bm-menu-item .bm-menu-item__tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--bm-space-1);
  margin-inline-start: var(--bm-space-2);
  vertical-align: middle;
}

.bm-menu-item .bm-menu-item__desc {
  margin: var(--bm-space-1) 0 0;
  color: var(--bm-color-ink-light);
  font-size: var(--bm-text-sm);
  overflow-wrap: anywhere;
}

.bm-menu-item .bm-menu-item__price {
  flex: none;
  margin-inline-start: auto;
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

.bm-menu-item.is-sold-out .bm-menu-item__name,
.bm-menu-item.is-sold-out .bm-menu-item__price {
  color: var(--bm-color-ink-light);
  text-decoration: line-through;
}

.bm-menu-item .bm-menu__tag {
  padding: 0 var(--bm-space-2);
  border: 1px solid var(--bm-color-chip-border);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-chip-bg);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-medium);
  line-height: 1.6;
}

.bm-menu-item .bm-menu__tag--halal,
.bm-menu-item .bm-menu__tag--vegetarian,
.bm-menu-item .bm-menu__tag--vegan {
  border-color: var(--bm-color-success-base);
  background-color: var(--bm-color-success-tint);
  color: var(--bm-color-success-dark);
}

.bm-menu-item .bm-menu__tag--spicy {
  border-color: var(--bm-color-danger-base);
  background-color: var(--bm-color-danger-tint);
  color: var(--bm-color-danger-dark);
}

.bm-menu-item .bm-menu__tag--popular,
.bm-menu-item .bm-menu__tag--new {
  border-color: var(--bm-color-accent-base);
  background-color: var(--bm-color-accent-tint);
  color: var(--bm-color-ink-dark);
}

.bm-slot-card--menu .bm-menu__actions,
.bm-slot-card--order .bm-menu__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-3);
  margin-block-start: var(--bm-space-3);
}

.bm-menu__actions .bm-btn.bm-menu__btn {
  flex: 1 1 14rem;
  justify-content: center;
  text-align: center;
}

.bm-slot-card--menu .bm-menu__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--bm-space-2);
  margin-block-start: var(--bm-space-3);
}

.bm-menu__gallery .bm-menu__thumb {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-muted);
}

.bm-menu__gallery .bm-menu__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bm-slot-card--menu .bm-menu__note {
  margin: var(--bm-space-4) 0 0;
  color: var(--bm-color-ink-light);
  font-size: var(--bm-text-sm);
}

/* Owner form: the Menu and ordering section */
.bm-menu-form {
  display: grid;
  gap: var(--bm-space-4);
  grid-column: 1 / -1;
  min-width: 0;
}

.bm-menu-form .bm-menu-form__group {
  min-width: 0;
  margin: 0;
}

.bm-menu-form .bm-menu-form__checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2) var(--bm-space-4);
}

.bm-menu-form .bm-menu-form__checks label,
.bm-menu-form .bm-menu-form__tags label,
.bm-menu-form .bm-menu-form__files label {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: 32px;
}

.bm-menu-form .bm-menu-form__files {
  display: grid;
  gap: var(--bm-space-2);
  margin: 0 0 var(--bm-space-3);
  padding: 0;
  list-style: none;
}

.bm-menu-form .bm-menu-form__files li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-3);
}

.bm-menu-form .bm-menu-form__order {
  display: grid;
  gap: var(--bm-space-2);
  margin-block-end: var(--bm-space-3);
}

@media (min-width: 640px) {
  .bm-menu-form .bm-menu-form__order {
    grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 1fr);
  }
}

.bm-menu-form .bm-menu-form__section {
  display: grid;
  gap: var(--bm-space-3);
  min-width: 0;
  margin: 0 0 var(--bm-space-4);
  padding: var(--bm-space-3);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-muted);
}

.bm-menu-form .bm-menu-form__section-head {
  display: flex;
  gap: var(--bm-space-2);
}

.bm-menu-form .bm-menu-form__section-head input {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--bm-font-weight-semibold);
}

.bm-menu-form .bm-menu-form__items {
  display: grid;
  gap: var(--bm-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-menu-form .bm-menu-form__item {
  display: grid;
  gap: var(--bm-space-2);
  padding: var(--bm-space-3);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
}

.bm-menu-form .bm-menu-form__item-main {
  display: grid;
  gap: var(--bm-space-2);
  grid-template-columns: minmax(0, 1fr) 7rem;
}

.bm-menu-form .bm-menu-form__item-main .bm-menu-form__desc {
  grid-column: 1 / -1;
}

.bm-menu-form .bm-menu-form__item input,
.bm-menu-form .bm-menu-form__item select:not(.bm-select-native),
.bm-menu-form .bm-menu-form__section-head input,
.bm-menu-form .bm-menu-form__order input,
.bm-menu-form .bm-menu-form__order select:not(.bm-select-native) {
  width: 100%;
  min-width: 0;
}

.bm-menu-form .bm-menu-form__item-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-2);
}

.bm-menu-form .bm-menu-form__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-1) var(--bm-space-3);
  padding-block: var(--bm-space-2);
}

.bm-menu-form .bm-menu-form__photo {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
}

.bm-menu-form .bm-menu-form__photo select:not(.bm-select-native) {
  width: auto;
}

.bm-menu-form .bm-menu-form__tools {
  display: inline-flex;
  gap: var(--bm-space-1);
}

.bm-menu-form .bm-menu-form__tools[hidden] {
  display: none;
}

.bm-menu-form .bm-menu-form__tools button,
.bm-menu-form .bm-menu-form__add {
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--bm-space-3);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-dark);
  font: inherit;
  cursor: pointer;
}

.bm-menu-form .bm-menu-form__add[hidden] {
  display: none;
}

.bm-menu-form .bm-menu-form__cur {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  margin-block-end: var(--bm-space-3);
}

.bm-menu-form [data-bm-menu-item][hidden],
.bm-menu-form [data-bm-menu-section][hidden] {
  display: none;
}
/* Deals and offers (bm-deals): the Deals card on a business page, the /deals/ page, the "Deal" badge on cards and the owner's Deals tab.
   Tokens only; every colour below already has a dark value in tokens.css. No layout shift: the image box has a fixed ratio, text wraps. */
.bm-badge.bm-badge--deal {
  background-color: var(--bm-color-badge-open-bg);
  color: var(--bm-color-badge-open-text);
  border: 1px solid var(--bm-color-badge-open-border);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-deals {
  display: grid;
  gap: var(--bm-space-4);
  grid-template-columns: minmax(0, 1fr);
}

.bm-deals.bm-deals--grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.bm-deal {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
}

.bm-deal .bm-deal__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--bm-color-surface-dark);
}

.bm-deal .bm-deal__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bm-deal .bm-deal__body {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-2);
  padding: var(--bm-space-4);
  min-width: 0;
}

.bm-deal .bm-deal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-2);
}

.bm-deal .bm-deal__ends {
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-base);
}

.bm-deal .bm-deal__title {
  margin: 0;
  font-size: var(--bm-text-lg);
  line-height: var(--bm-line-height-tight);
  color: var(--bm-color-ink-dark);
  overflow-wrap: anywhere;
}

.bm-deal .bm-deal__biz,
.bm-deal .bm-deal__desc,
.bm-deal .bm-deal__qty,
.bm-deal .bm-deal__until,
.bm-deal .bm-deal__terms {
  margin: 0;
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
  overflow-wrap: anywhere;
}

.bm-deal .bm-deal__until,
.bm-deal .bm-deal__terms {
  color: var(--bm-color-ink-light);
}

.bm-deal .bm-deal__qty {
  font-weight: var(--bm-font-weight-semibold);
}

.bm-deal .bm-deal__terms-label {
  font-weight: var(--bm-font-weight-semibold);
}

.bm-deal .bm-deal__code summary {
  display: inline-block;
  cursor: pointer;
  padding: var(--bm-space-2) var(--bm-space-3);
  border: 1px dashed var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
}

.bm-deal .bm-deal__code summary:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
}

.bm-deal .bm-deal__code code {
  display: inline-block;
  margin-top: var(--bm-space-2);
  padding: var(--bm-space-2) var(--bm-space-3);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-dark);
  font-size: var(--bm-text-base);
  letter-spacing: 0.08em;
  user-select: all;
}

.bm-deal .bm-deal__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  margin-top: var(--bm-space-1);
}

/* The /deals/ page */
.bm-deals-page .bm-deals-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--bm-space-3);
  margin-block-end: var(--bm-space-4);
}

.bm-deals-page .bm-deals-filter__field {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-1);
  min-width: min(100%, 200px);
}

.bm-deals-page .bm-deals-filter__field label,
.bm-deals-page .bm-deals-filter__check {
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  color: var(--bm-color-ink-base);
}

.bm-deals-page .bm-deals-filter__field select {
  min-height: 44px;
  padding-inline: var(--bm-space-3);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-dark);
}

.bm-deals-page .bm-deals-filter__check {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: 44px;
}

.bm-deals-page .bm-deals-filter__buttons {
  display: flex;
  gap: var(--bm-space-2);
}

.bm-deals-page .bm-deals-page__count {
  margin: 0 0 var(--bm-space-3);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-light);
}

.bm-deals-page .bm-deals-page__empty {
  padding: var(--bm-space-8) var(--bm-space-4);
  text-align: center;
  color: var(--bm-color-ink-base);
  border: 1px dashed var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
}

/* Owner dashboard: the Deals tab and its form */
.bm-deals-tab .bm-deals-tab__limits {
  margin: 0 0 var(--bm-space-3);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-light);
}

.bm-deal-form .bm-deal-form__title {
  margin: 0 0 var(--bm-space-3);
  font-size: var(--bm-text-xl);
  color: var(--bm-color-ink-dark);
}

.bm-deal-form .bm-deal-form__section {
  margin: 0 0 var(--bm-space-4);
  padding: var(--bm-space-4);
  min-width: 0;
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
}

.bm-deal-form .bm-deal-form__section input[type="text"],
.bm-deal-form .bm-deal-form__section input[type="date"],
.bm-deal-form .bm-deal-form__section select,
.bm-deal-form .bm-deal-form__section textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.bm-deal-form .bm-deal-form__check {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: 44px;
  color: var(--bm-color-ink-base);
}

.bm-deal-form .bm-deal-form__photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  margin-top: var(--bm-space-3);
}

.bm-deal-form .bm-deal-form__photo {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  padding: var(--bm-space-1);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  color: var(--bm-color-ink-base);
}

.bm-deal-form .bm-deal-form__photo img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--bm-radius-sm, 4px);
}
/* Card heart: a real save form (members) or a login link (visitors). Pairs with design/save.js and bm_saved_card_html(). */
.bm-card__save {
  display: contents;
}

/* Reset Automatic.css [class*="btn--"] overrides on .bm-card__save-btn--login and button */
.bm-card__save-btn.bm-card__save-btn,
a.bm-card__save-btn.bm-card__save-btn,
button.bm-card__save-btn.bm-card__save-btn,
a.bm-card__save-btn--login.bm-card__save-btn--login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  max-width: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
  padding: 0;
  margin: 0;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-save-btn-bg);
  color: var(--bm-color-ink-light);
  border: 1px solid var(--bm-color-line-base);
  box-shadow: var(--bm-shadow-sm);
  box-sizing: border-box;
  flex: 0 0 2.75rem;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  line-height: 1;
}

.bm-card__save-btn.bm-card__save-btn:hover,
a.bm-card__save-btn.bm-card__save-btn:hover,
button.bm-card__save-btn.bm-card__save-btn:hover,
a.bm-card__save-btn--login.bm-card__save-btn--login:hover {
  background-color: var(--bm-color-save-btn-hover);
  color: var(--bm-color-danger-base);
  border-color: var(--bm-color-line-dark);
  transform: scale(1.08);
}

.bm-card__save-btn[aria-pressed="true"] {
  color: var(--bm-color-danger-base);
}

.bm-card__save-btn[aria-pressed="true"] svg {
  fill: var(--bm-color-danger-base);
  stroke: var(--bm-color-danger-base);
}

.bm-card__save-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

.bm-card__save-btn:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
}

.bm-saved__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.bm-saved__notice--toast {
  position: fixed;
  inset-block-end: var(--bm-space-4);
  inset-inline: var(--bm-space-4);
  z-index: 50;
  max-width: 28rem;
  margin-inline: auto;
  padding: var(--bm-space-3) var(--bm-space-4);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-dark);
  box-shadow: var(--bm-shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
  .bm-card__save-btn:hover,
  .bm-card__save-btn.bm-card__save-btn:hover,
  a.bm-card__save-btn.bm-card__save-btn:hover,
  button.bm-card__save-btn.bm-card__save-btn:hover,
  a.bm-card__save-btn--login.bm-card__save-btn--login:hover {
    transform: none;
  }
}

/* Saved tab inside dashboard cards */
.bm-saved-tab .bm-saved-tab__text {
  display: grid;
  min-width: 0;
  gap: var(--bm-space-1);
}

.bm-saved-tab .bm-saved-tab__meta {
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
}

.bm-saved-tab .bm-saved-tab__list:last-child {
  margin-block-end: 0;
}
/* --------------------------------------------------------------------------
   59. Header and dashboard top bar clean-up: colour names never truncate, one compact account button, tighter overview chart
   -------------------------------------------------------------------------- */

/* Accent picker: names are never cut ("Orange", "Graphite"). The popover grows to its content; the always-open group uses cells wide enough for the longest name. */
.bm-accent .bm-accent__name {
  flex: none;
  min-width: max-content;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.bm-accent .bm-accent__panel {
  width: max-content;
  min-width: 15rem;
  max-width: calc(100vw - 2 * var(--bm-space-4));
}

.bm-accent .bm-accent__group {
  grid-template-columns: repeat(2, minmax(max-content, 1fr));
}

.bm-accent.bm-accent--inline .bm-accent__group {
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}

/* Dashboard top bar account button: a compact pill like Back to site / theme / colour, whatever default button styles the theme prints.
   Only keyboard focus draws a ring (the open menu is shown by aria-expanded, not by an outline). */
.bm-dash-app__tools .bm-account__btn.bm-account__btn--compact {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  height: 2.25rem;
  min-height: 2.25rem;
  padding: 0 var(--bm-space-2) 0 var(--bm-space-1);
  gap: var(--bm-space-1);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-light);
  box-shadow: none;
  color: var(--bm-color-ink-base);
  line-height: 1;
  appearance: none;
}

.bm-dash-app__tools .bm-account__btn.bm-account__btn--compact:hover,
.bm-dash-app__tools .bm-account__btn.bm-account__btn--compact[aria-expanded="true"] {
  border-color: var(--bm-color-brand-base);
}

.bm-dash-app__tools .bm-account__btn.bm-account__btn--compact:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

.bm-dash-app__tools .bm-account__btn.bm-account__btn--compact:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

.bm-dash-app__tools .bm-account__btn--compact .bm-avatar,
.bm-dash-app__tools .bm-account__btn--compact .bm-account__avatar {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
}

.bm-dash-app__tools .bm-account__btn--compact .bm-account__chevron {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
}

/* Overview chart: legend, then the plot straight away (no empty band); plot about 240 px. */
.bm-dash-app .bm-dash-app__chart {
  flex: none;
  padding-block-start: var(--bm-space-2);
  grid-template-rows: 15rem auto;
}

.bm-dash-app .bm-dash-app__chart .bm-dash-app__chart-plot {
  height: auto;
}

@media (max-width: 767px) {
  .bm-dash-app .bm-dash-app__chart {
    grid-template-rows: 11rem auto;
  }
}

/* --------------------------------------------------------------------------
   59b. Header: one Appearance control (theme + accent colours), quiet row.
   Every rule starts with .bm-header on purpose: the dashboard top bar uses the same .bm-theme-toggle, .bm-account__panel and .bm-accent classes and must not change.
   -------------------------------------------------------------------------- */
.bm-header .bm-header__logo {
  min-width: 0;
  min-height: 2.75rem;
}

.bm-header .bm-header__logo span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bm-header .bm-header__nav-link {
  white-space: nowrap;
}

.bm-header .bm-header__actions {
  flex: none;
  gap: var(--bm-space-2);
}

.bm-header .bm-header__actions .bm-btn {
  min-height: 2.75rem;
  white-space: nowrap;
}

.bm-header .bm-appearance {
  position: relative;
  display: inline-flex;
  flex: none;
}

.bm-header .bm-appearance__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  cursor: pointer;
  transition: border-color var(--bm-transition-fast), color var(--bm-transition-fast);
}

.bm-header .bm-appearance__btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.bm-header .bm-appearance__btn:hover,
.bm-header .bm-appearance__btn[aria-expanded="true"] {
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-brand-text);
}

.bm-header .bm-appearance__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--bm-space-2));
  inset-inline-end: 0;
  z-index: var(--bm-z-dropdown);
  box-sizing: border-box;
  width: max-content;
  min-width: 16rem;
  max-width: calc(100vw - 2 * var(--bm-space-4));
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--bm-space-3);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
  box-shadow: var(--bm-shadow-lg);
}

.bm-header .bm-appearance__panel[hidden] {
  display: none;
}

.bm-header .bm-appearance__label {
  margin: 0 0 var(--bm-space-1);
  padding: var(--bm-space-1) var(--bm-space-2);
  color: var(--bm-color-ink-light);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-header .bm-appearance__panel .bm-theme-segmented {
  margin-block: 0;
  background-color: var(--bm-color-surface-muted);
}

.bm-header .bm-appearance__panel .bm-theme-segmented__btn {
  min-height: 2.75rem;
  padding-block: 0;
  color: var(--bm-color-ink-base);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
}

.bm-header .bm-appearance__panel .bm-theme-segmented__btn svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.bm-header .bm-appearance__panel .bm-theme-segmented__btn:hover {
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
}

.bm-header .bm-appearance__panel .bm-theme-segmented__btn[aria-pressed="true"] {
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-bold);
  box-shadow: inset 0 0 0 2px var(--bm-color-brand-text);
}

/* the colour group: always open inside the panel, two columns so the whole panel stays short */
.bm-header .bm-appearance__panel .bm-accent.bm-accent--inline {
  margin-block-start: var(--bm-space-3);
  padding-block-start: var(--bm-space-2);
  border-block-start: 1px solid var(--bm-color-line-base);
}

.bm-header .bm-appearance__panel .bm-accent.bm-accent--inline .bm-accent__group {
  grid-template-columns: repeat(2, minmax(max-content, 1fr));
  padding-block: 0;
}

/* Between 768 and 1023 px the signed-in account button is the avatar only, so the row does not wrap */
@media (min-width: 768px) and (max-width: 1023px) {
  .bm-header .bm-account__name {
    display: none;
  }
}
/* END 59b */

/* --------------------------------------------------------------------------
   59c. Brand logo (bm_logo_html): header = light and dark variant (CSS picks one by the theme attribute / device scheme, so no JS and no flash; the hidden one is display:none),
   footer = the dark variant only. Rules start with .bm-header or .bm-footer (a :root theme prefix is allowed): the dashboard shell has no logo and must not change.
   -------------------------------------------------------------------------- */
.bm-header .bm-logo,
.bm-footer .bm-logo {
  display: block;
  width: auto;
  max-width: none;
  height: 2.5rem;
}

@media (max-width: 767px) {
  .bm-header .bm-logo {
    height: 2rem;
  }
}

.bm-header .bm-logo--dark {
  display: none;
}

:root[data-bm-theme="dark"] .bm-header .bm-logo--light {
  display: none;
}

:root[data-bm-theme="dark"] .bm-header .bm-logo--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-header .bm-logo--light {
    display: none;
  }

  :root:not([data-bm-theme="light"]) .bm-header .bm-logo--dark {
    display: block;
  }
}
/* END 59c */
/* --------------------------------------------------------------------------
   60. One focus treatment for the whole site
   Keyboard focus: a 2px ring in --bm-color-ring (offset 2px, follows the element's radius). A mouse or touch click on a button, link or select draws nothing.
   A text field always counts as keyboard-focusable for the browser, so it shows the same token ring: on a field inside a rounded container (search bar, select popover)
   the ring is drawn on the container (:focus-within) and the inner field draws none, so a square default rectangle never appears inside a rounded shape.
   ":root:root body" in front (specificity 0,3,1 with :focus-visible) keeps this above third-party rules such as [type="search"]:focus { outline } (Automatic.css, Bricks) with no forced-priority flag.
   -------------------------------------------------------------------------- */
:root:root body :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

/* A field shows the ring only: no second halo from a form, a plugin or the browser. */
:root:root body :where(input, select, textarea):focus-visible {
  box-shadow: none;
}

:root:root body :where(a, button, select, summary, [tabindex]):focus:not(:focus-visible) {
  outline: 0;
}

/* Fields inside a rounded container: the container carries the ring. */
:root:root body .bm-custom-select__search-wrap input.bm-custom-select__search-input:focus,
:root:root body .bm-custom-select__search-wrap input.bm-custom-select__search-input:focus-visible,
:root:root body .bm-search-bar .bm-search-bar__field input:focus,
:root:root body .bm-search-bar .bm-search-bar__field input:focus-visible {
  outline: 0;
  box-shadow: none;
}

:root:root body .bm-search-bar .bm-custom-select__trigger:focus-visible {
  outline: 0;
}

/* Popover search: a 2px ring-coloured underline under the field row (a full box would read as a square rectangle inside the rounded panel). */
:root:root body .bm-custom-select__search-wrap:focus-within {
  box-shadow: inset 0 -2px 0 var(--bm-color-ring);
}

/* Containers that only take programmatic focus (the lightbox stage) draw no ring. */
:root:root body .bm-lightbox [tabindex="-1"]:focus-visible {
  outline: 0;
}

:root:root body .bm-search-bar .bm-search-bar__field:focus-within {
  border-color: var(--bm-color-ring);
  box-shadow: inset 0 0 0 2px var(--bm-color-ring);
}
/* --------------------------------------------------------------------------
   61. Buy & Sell inside the owner dashboard (docs/buysell-dashboard.md)
   Seller overview tiles and lists, the My ads performance columns, the Saved ads cards, and three fixes seen on the live Profile and My ads pages:
   the row "more" menu button (same compact icon button as View and Edit), the profile picture file picker, and the Delete my account control.
   Tokens only; light and dark follow the shell. Classes: .bm-sell*, .bm-sell-card*, .bm-filepick*, .bm-danger-details*.
   -------------------------------------------------------------------------- */

/* KPI grid: six tiles read as 3 x 2 on a wide column, 2 x 3 on a phone (the base grid would leave one tile alone on the last row) */
.bm-dash-app .bm-sell__kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container bm-dash (min-width: 44rem) {
  .bm-dash-app .bm-sell__kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bm-sell__item-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bm-space-1);
}

.bm-sell__item-actions form {
  margin: 0;
}

.bm-sell__url {
  overflow-wrap: anywhere;
}

.bm-sell__url a {
  color: var(--bm-dash-text-brand);
  font-family: var(--bm-font-mono);
  font-size: var(--bm-text-sm);
  overflow-wrap: anywhere; /* wraps, never an ellipsis: the end of the address (the slug) is the part that differs */
  word-break: break-all;
}

.bm-sell .bm-dash-app__item-text {
  min-width: 0;
}

/* a narrow screen moves the row buttons under the text (column 2) instead of squeezing the title */
@container bm-dash (max-width: 40rem) {
  .bm-sell .bm-dash-app__item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .bm-sell .bm-sell__item-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

.bm-sell .bm-dash-app__item-title,
.bm-sell .bm-dash-app__item-title a {
  overflow-wrap: anywhere;
  white-space: normal;
  text-overflow: clip;
}

.bm-sell__left {
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
}

.bm-sell__left--warn {
  color: var(--bm-dash-warn-text);
}

.bm-sell__left--err {
  color: var(--bm-color-danger-dark);
}

.bm-sell__hint {
  margin: 0 0 var(--bm-space-4);
  padding: var(--bm-space-3) var(--bm-space-4);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-dash-warn-bg);
  color: var(--bm-dash-warn-text);
  font-size: var(--bm-text-sm);
}

.bm-sell__quiet {
  border-end-start-radius: var(--bm-radius-2xl); /* the card does not clip its children, so the tinted footer follows the card's bottom corners itself */
  border-end-end-radius: var(--bm-radius-2xl);
  background-color: var(--bm-dash-warn-bg);
}

.bm-sell__quiet .bm-dash-app__allclear-tip,
.bm-sell__quiet .bm-dash-app__allclear-tip strong,
.bm-sell__quiet .bm-dash-app__allclear-tip a {
  color: var(--bm-dash-warn-text);
}

.bm-sell__quiet .bm-dash-app__allclear-tip a {
  text-decoration: underline;
}

/* Saved ads: one card per ad */
.bm-sell-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--bm-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-sell-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-xl);
  background-color: var(--bm-dash-card-bg);
  box-shadow: var(--bm-shadow-card); /* static: the card is not itself a control (only its title and Remove are), so no hover lift */
}

.bm-sell-card--gone {
  background-color: var(--bm-color-surface-base);
}

.bm-sell-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-light);
}

.bm-sell-card__media svg {
  width: 2.5rem;
  height: 2.5rem;
}

.bm-sell-card--gone .bm-sell-card__img {
  opacity: 0.55;
}

.bm-sell-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bm-sell-card__body {
  display: grid;
  flex: 1 1 auto;
  gap: var(--bm-space-1);
  padding: var(--bm-space-3) var(--bm-space-4);
}

.bm-sell-card__body p {
  margin: 0;
}

.bm-sell-card__title {
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-semibold);
  overflow-wrap: anywhere;
}

.bm-sell-card__link {
  color: var(--bm-color-ink-dark);
  text-decoration: none;
}

.bm-sell-card__link:hover {
  text-decoration: underline;
}

.bm-sell-card__price {
  color: var(--bm-dash-text-brand);
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-bold);
}

.bm-sell-card__meta,
.bm-sell-card__when {
  color: var(--bm-color-ink-light);
  font-size: var(--bm-text-sm);
}

.bm-sell-card__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-2);
}

.bm-sell-card__foot {
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--bm-space-4) var(--bm-space-3);
}

.bm-sell-card__remove {
  margin: 0;
}

/* Row "more" menu: the same compact icon button as View and Edit (the browser and the site reset gave the summary a box and a 48px touch size) */
.bm-dash-app details.bm-dash-app__more > summary.bm-dash-app__rowbtn {
  box-sizing: border-box;
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--bm-radius-md);
  background-color: transparent;
  box-shadow: none;
}

.bm-dash-app details.bm-dash-app__more > summary.bm-dash-app__rowbtn:hover,
.bm-dash-app details.bm-dash-app__more[open] > summary.bm-dash-app__rowbtn {
  background-color: var(--bm-dash-hover-bg);
  color: var(--bm-color-ink-dark);
}

.bm-dash-app details.bm-dash-app__more > summary.bm-dash-app__rowbtn:focus-visible {
  outline: 2px solid var(--bm-dash-ring);
  outline-offset: 2px;
}

.bm-dash-app details.bm-dash-app__more > summary.bm-dash-app__rowbtn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.bm-dash-app details.bm-dash-app__more .bm-dash-app__more-menu {
  inset-inline-end: 0;
  inset-inline-start: auto;
}

/* Profile picture: the native file input stays (keyboard, screen reader, no JavaScript) but is visually hidden; its label is the button */
.bm-filepick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-3);
  position: relative;
}

.bm-filepick .bm-filepick__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bm-filepick__btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--bm-space-4);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-dark);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  cursor: pointer;
}

.bm-filepick__btn:hover {
  background-color: var(--bm-color-surface-dark);
}

.bm-filepick__input:focus-visible + .bm-filepick__btn {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
}

.bm-filepick__name {
  min-width: 0;
  color: var(--bm-color-ink-light);
  font-size: var(--bm-text-sm);
  overflow-wrap: anywhere;
}

/* Delete my account: a danger outline button as the details summary */
.bm-danger-details > summary.bm-danger-details__btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--bm-space-4);
  border: 1px solid var(--bm-color-danger-dark);
  border-radius: var(--bm-radius-md);
  background-color: transparent;
  color: var(--bm-color-danger-dark);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  list-style: none;
  cursor: pointer;
}

.bm-danger-details > summary.bm-danger-details__btn::-webkit-details-marker {
  display: none;
}

.bm-danger-details > summary.bm-danger-details__btn:hover,
.bm-danger-details[open] > summary.bm-danger-details__btn {
  background-color: var(--bm-color-danger-tint);
}

.bm-danger-details > summary.bm-danger-details__btn:focus-visible {
  outline: 2px solid var(--bm-color-danger-dark);
  outline-offset: 2px;
}

.bm-danger-details[open] > summary.bm-danger-details__btn {
  margin-block-end: var(--bm-space-4);
}

/* Saved tab: one card per section (no card inside a card), saved searches as rows with their filters */
.bm-saved-tab {
  display: grid;
  gap: var(--bm-space-4);
}

.bm-saved-tab__note {
  margin: var(--bm-space-3) 0 0;
  color: var(--bm-color-ink-light);
  font-size: var(--bm-text-sm);
}

.bm-saved-searches {
  display: grid;
  gap: var(--bm-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-saved-searches__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-3);
  padding: var(--bm-space-3) var(--bm-space-4);
  border: 1px solid var(--bm-dash-card-border);
  border-radius: var(--bm-radius-lg);
}

.bm-saved-searches__main {
  display: grid;
  flex: 1 1 14rem;
  min-width: 0;
  gap: var(--bm-space-2);
}

.bm-saved-searches__name {
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-semibold);
  overflow-wrap: anywhere;
}

.bm-saved-searches__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-saved-searches__chip {
  padding: 2px var(--bm-space-3);
  border-radius: var(--bm-radius-full, 999px);
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-light);
  font-size: var(--bm-text-xs);
  overflow-wrap: anywhere;
}

.bm-saved-searches__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
}

.bm-saved-searches__actions form {
  margin: 0;
}

/* Avatar sizes as classes (bm_avatar_html): the span carries no style attribute */
.bm-avatar--px24 {
  --bm-avatar-size: 24px;
}

.bm-avatar--px30 {
  --bm-avatar-size: 30px;
}

.bm-avatar--px32 {
  --bm-avatar-size: 32px;
}

.bm-avatar--px36 {
  --bm-avatar-size: 36px;
}

.bm-avatar--px40 {
  --bm-avatar-size: 40px;
}

.bm-avatar--px48 {
  --bm-avatar-size: 48px;
}

.bm-avatar--px56 {
  --bm-avatar-size: 56px;
}

.bm-avatar--px64 {
  --bm-avatar-size: 64px;
}

.bm-avatar--px72 {
  --bm-avatar-size: 72px;
}

.bm-avatar--px80 {
  --bm-avatar-size: 80px;
}

.bm-avatar--px96 {
  --bm-avatar-size: 96px;
}

.bm-avatar--px120 {
  --bm-avatar-size: 120px;
}

.bm-avatar--px160 {
  --bm-avatar-size: 160px;
}

.bm-avatar--px256 {
  --bm-avatar-size: 256px;
}
/* Business page polish (FLY-1863 / FLY-1867). Scoped to the single business page and its share row; tokens only. */

/* Social chips: the network's glyph (brand colour only where it reaches 3:1, see --bm-glyph-* in tokens.css), the label always in ink. */
.bm-social-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  margin-block-start: var(--bm-space-4);
}

.bm-social-chips .bm-social-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: var(--bm-touch-target-min);
  padding-inline: var(--bm-space-3);
  border: 1px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  line-height: 1;
  text-decoration: none;
}

.bm-social-chips .bm-social-chip:hover {
  border-color: var(--bm-color-brand-base);
}

.bm-social-chip .bm-social-chip__icon {
  flex: none;
  color: currentColor;
}

.bm-social-chip--facebook .bm-social-chip__icon { color: var(--bm-glyph-facebook); }
.bm-social-chip--instagram .bm-social-chip__icon { color: var(--bm-glyph-instagram); }
.bm-social-chip--youtube .bm-social-chip__icon { color: var(--bm-glyph-youtube); }
.bm-social-chip--linkedin .bm-social-chip__icon { color: var(--bm-glyph-linkedin); }
.bm-social-chip--whatsapp .bm-social-chip__icon { color: var(--bm-glyph-whatsapp); }
.bm-social-chip--telegram .bm-social-chip__icon { color: var(--bm-glyph-telegram); }
.bm-social-chip--twitter .bm-social-chip__icon { color: var(--bm-glyph-x); }
.bm-social-chip--x .bm-social-chip__icon { color: var(--bm-glyph-x); }
.bm-social-chip--tiktok .bm-social-chip__icon { color: var(--bm-glyph-tiktok); }

/* Share chips: the same glyph colour tokens as the social chips (the label stays ink). */
.bm-share .bm-share__icon {
  flex: none;
}

.bm-share .bm-share__ch-facebook .bm-share__icon { color: var(--bm-glyph-facebook); }
.bm-share .bm-share__ch-whatsapp .bm-share__icon { color: var(--bm-glyph-whatsapp); }
.bm-share .bm-share__ch-telegram .bm-share__icon { color: var(--bm-glyph-telegram); }
.bm-share .bm-share__ch-x .bm-share__icon { color: var(--bm-glyph-x); }

/* Save button on the business page: the heart is filled only while the server says it is saved (aria-pressed), so it cannot show a state that is not real. */
.bm-saved .bm-btn svg {
  flex: none;
}

.bm-saved .bm-btn[aria-pressed="true"] svg {
  fill: var(--bm-color-danger-base);
  stroke: var(--bm-color-danger-base);
}

/* Opening hours card: the Open now badge and "closes at" sit together; the text is ink, not a colour. */
.bm-slot-card--hours .bm-hours-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-1) var(--bm-space-2);
}

.bm-slot-card--hours .bm-hours-closes {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
}

/* Location card: the address above the map block. */
.bm-slot-card--map .bm-location__address {
  margin: 0 0 var(--bm-space-3);
  font-size: var(--bm-text-sm);
  line-height: var(--bm-line-height-normal);
  color: var(--bm-color-ink-base);
}

/* Action hierarchy: Book is the one filled action; WhatsApp is an outline (the secondary style, ink text) with its mark in green. The light-mode green text on white is only 3.10:1,
   so the green is on the mark (a graphic, 3:1) and never on the words. Doubled classes beat Automatic.css's [class*="btn--"]. */
.bm-btn.bm-btn--wa .bm-btn__icon--whatsapp {
  flex: none;
  color: var(--bm-color-whatsapp-dark);
}

/* While hovered the secondary button turns its label brand-coloured on the page-tint background, where the light green mark would fall under 3:1: the mark follows the label. */
.bm-btn.bm-btn--wa:hover .bm-btn__icon--whatsapp {
  color: currentColor;
}

/* Contact grouping: how to reach them, then how to find them (a quiet divider above the directions row). */
.bm-contact-list .bm-contact-list__item--find {
  padding-block-start: var(--bm-space-3);
  border-block-start: 1px dashed var(--bm-color-line-base);
}

/* Share: a disclosure. One 44px Share button; the channels are plain links in a two-column grid inside it, so six chips do not take three rows of the card when closed. */
.bm-share .bm-share__disclosure {
  flex: 1 1 100%;
}

.bm-share .bm-share__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: var(--bm-touch-target-min);
  padding-inline: var(--bm-space-4);
  border: 1px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  list-style: none;
  cursor: pointer;
}

.bm-share .bm-share__toggle::-webkit-details-marker {
  display: none;
}

.bm-share .bm-share__disclosure[open] .bm-share__toggle {
  border-color: var(--bm-color-brand-base);
}

.bm-share .bm-share__toggle .bm-share__label {
  color: var(--bm-color-ink-base);
}

.bm-share .bm-share__disclosure .bm-share__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bm-space-2);
  margin-block-start: var(--bm-space-3);
}

.bm-share .bm-share__disclosure .bm-share__item {
  min-width: 0;
}

.bm-share .bm-share__disclosure .bm-share__btn {
  width: 100%;
  justify-content: flex-start;
}

/* FAQ accordion on the business page: the summary is the 44px target (the default marker is replaced by a chevron). Focus is drawn by partial 60, not here. */
.bm-slot-card--faqs .bm-prose details {
  padding: 0;
}

.bm-slot-card--faqs .bm-prose summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-3);
  min-height: var(--bm-touch-target-min);
  padding-inline: var(--bm-space-4);
  padding-block: var(--bm-space-2);
  list-style: none;
}

.bm-slot-card--faqs .bm-prose summary::-webkit-details-marker {
  display: none;
}

.bm-slot-card--faqs .bm-prose summary::after {
  content: "";
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--bm-transition-fast);
}

.bm-slot-card--faqs .bm-prose details[open] summary {
  margin-block-end: 0;
}

.bm-slot-card--faqs .bm-prose details[open] summary::after {
  transform: rotate(-135deg);
}

.bm-slot-card--faqs .bm-prose details > p {
  margin: 0;
  padding: 0 var(--bm-space-4) var(--bm-space-3);
}

/* Claim / Dispute and Report: one quiet row with 44px targets. The Report summary sits in the row; its opened form takes the full width. */
.bm-contact-card .bm-legal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--bm-space-4);
  margin-block-start: var(--bm-space-4);
  padding-block-start: var(--bm-space-2);
  border-block-start: 1px dashed var(--bm-color-line-base);
}

.bm-legal-row .bm-claim-action {
  margin: 0;
  padding: 0;
  border: 0;
  text-align: start;
}

.bm-legal-row .bm-claim-link {
  min-height: var(--bm-touch-target-min);
}

.bm-legal-row .bm-report {
  margin: 0;
  padding: 0;
  border: 0;
}

.bm-legal-row .bm-report[open] {
  flex: 1 1 100%;
}

/* The hidden native select inside the Report form was 100% wide (the report rule in partial 26 beats the visually-hidden rule in partial 19 on width), and being absolutely positioned
   it pushed the page 40px wider than the screen whenever Report was opened at 768px and below. Same visually-hidden size, with enough specificity to win. */
.bm-report .bm-report__field select.bm-select-native.bm-select-native {
  width: 1px;
  min-height: 0;
  padding: 0;
}

/* Unclaimed imported listing (bm-unclaimed.php): a plain, quiet note under the title */
.bm-unclaimed-note {
  margin: var(--bm-space-2) 0 0;
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
}
/* --------------------------------------------------------------------------
   63. WordPress Login Screen Brand (wp-login.php)
   Brands the WordPress authentication screens (sign in, lost password, reset password,
   and FluentAuth two-factor authentication) to match the BM Directory design system.
   Tokens strictly from design/tokens.css. Zero forced priority. Light and dark modes.
   -------------------------------------------------------------------------- */

:root:root body.login {
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  font-family: var(--bm-font-sans);
  line-height: var(--bm-line-height-normal);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: var(--bm-space-4);
  box-sizing: border-box;
}

:root:root body.login #login {
  width: 100%;
  max-width: 24rem;
  padding: var(--bm-space-4) 0;
  margin: auto;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  :root:root body.login #login {
    padding: var(--bm-space-6) 0;
  }
}

/* 63a. Header & Logo */
:root:root body.login #login h1 {
  text-align: center;
  margin: 0 0 var(--bm-space-6) 0;
}

:root:root body.login #login h1 a {
  background-image: none;
  text-indent: 0;
  overflow: visible;
  width: auto;
  height: auto;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: var(--bm-text-2xl);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-base);
  min-height: var(--bm-touch-target-min);
  border-radius: var(--bm-radius-sm);
  outline-offset: 4px;
  transition: color 0.15s ease;
}

:root:root body.login #login h1 a:hover {
  color: var(--bm-color-brand-text);
}

:root:root body.login #login .bm-logo {
  display: block;
  width: auto;
  max-width: 16rem;
  height: 2.5rem;
}

@media (max-width: 767px) {
  :root:root body.login #login .bm-logo {
    height: 2rem;
  }
}

:root:root body.login #login .bm-logo--dark {
  display: none;
}

:root[data-bm-theme="dark"] body.login #login .bm-logo--light {
  display: none;
}

:root[data-bm-theme="dark"] body.login #login .bm-logo--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) body.login #login .bm-logo--light {
    display: none;
  }

  :root:not([data-bm-theme="light"]) body.login #login .bm-logo--dark {
    display: block;
  }
}

/* 63b. Login / Auth Card Form */
:root:root body.login #login form {
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  box-shadow: var(--bm-shadow-card);
  padding: var(--bm-space-6);
  margin-top: 0;
  margin-bottom: var(--bm-space-4);
  box-sizing: border-box;
}

:root:root body.login #login form p {
  margin-bottom: var(--bm-space-4);
}

:root:root body.login #login form label {
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  line-height: var(--bm-line-height-normal);
  display: block;
  margin-bottom: var(--bm-space-1);
}

/* 63c. Form Inputs */
:root:root body.login #login form .input,
:root:root body.login #login form input[type="text"],
:root:root body.login #login form input[type="password"],
:root:root body.login #login form input[type="email"],
:root:root body.login #login form input[type="tel"],
:root:root body.login #login form input[type="number"] {
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-base);
  line-height: var(--bm-line-height-normal);
  min-height: var(--bm-touch-target-min);
  padding: var(--bm-space-2) var(--bm-space-3);
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--bm-space-1);
  margin-bottom: var(--bm-space-3);
  box-shadow: none;
  transition: border-color 0.15s ease;
}

:root:root body.login #login form .input:focus,
:root:root body.login #login form input[type="text"]:focus,
:root:root body.login #login form input[type="password"]:focus,
:root:root body.login #login form input[type="email"]:focus,
:root:root body.login #login form input[type="tel"]:focus,
:root:root body.login #login form input[type="number"]:focus,
:root:root body.login #login form .input:focus-visible,
:root:root body.login #login form input[type="text"]:focus-visible,
:root:root body.login #login form input[type="password"]:focus-visible,
:root:root body.login #login form input[type="email"]:focus-visible,
:root:root body.login #login form input[type="tel"]:focus-visible,
:root:root body.login #login form input[type="number"]:focus-visible {
  border-color: var(--bm-color-brand-base);
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 1px;
  box-shadow: none;
}

/* Password reveal toggle button */
:root:root body.login #login .wp-pwd {
  position: relative;
}

:root:root body.login #login .button.wp-hide-pw {
  min-height: var(--bm-touch-target-min);
  min-width: var(--bm-touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bm-color-muted-base);
  border-radius: var(--bm-radius-sm);
  background: transparent;
  border: none;
  box-shadow: none;
}

:root:root body.login #login .button.wp-hide-pw:hover {
  color: var(--bm-color-ink-base);
}

:root:root body.login #login .button.wp-hide-pw:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

/* 63d. Remember Me Checkbox */
:root:root body.login #login .forgetmenot {
  float: none;
  display: flex;
  align-items: center;
  margin-top: var(--bm-space-2);
  margin-bottom: var(--bm-space-4);
}

:root:root body.login #login .forgetmenot label {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  font-size: var(--bm-text-sm);
  cursor: pointer;
  min-height: var(--bm-touch-target-min);
  margin-bottom: 0;
  user-select: none;
}

:root:root body.login #login .forgetmenot input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 1.25rem;
  border-radius: var(--bm-radius-sm);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-base);
  margin: 0;
  cursor: pointer;
}

:root:root body.login #login .forgetmenot input[type="checkbox"]:checked {
  background-color: var(--bm-color-brand-base);
  border-color: var(--bm-color-brand-base);
}

:root:root body.login #login .forgetmenot input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

/* 63e. Submit & Primary Buttons */
:root:root body.login #login .submit {
  margin: 0;
  padding: 0;
  float: none;
  clear: both;
}

:root:root body.login #login .button.button-primary,
:root:root body.login #login .button-primary,
:root:root body.login #login input[type="submit"] {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
  border: 1px solid var(--bm-color-brand-dark);
  border-radius: var(--bm-radius-md);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-semibold);
  min-height: var(--bm-touch-target-min);
  width: 100%;
  padding: var(--bm-space-2) var(--bm-space-4);
  text-shadow: none;
  box-shadow: var(--bm-shadow-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
  float: none;
}

:root:root body.login #login .button.button-primary:hover,
:root:root body.login #login .button-primary:hover,
:root:root body.login #login input[type="submit"]:hover {
  background-color: var(--bm-color-brand-dark);
  border-color: var(--bm-color-brand-dark);
  color: var(--bm-color-btn-primary-text);
}

:root:root body.login #login .button.button-primary:active,
:root:root body.login #login .button-primary:active,
:root:root body.login #login input[type="submit"]:active {
  background-color: var(--bm-color-brand-dark);
}

:root:root body.login #login .button.button-primary:focus-visible,
:root:root body.login #login .button-primary:focus-visible,
:root:root body.login #login input[type="submit"]:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

/* 63f. Notice & Error Banners */
:root:root body.login #login #login_error,
:root:root body.login #login .notice,
:root:root body.login #login .message {
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  border-radius: var(--bm-radius-md);
  border: 1px solid var(--bm-color-line-base);
  border-left-width: 4px;
  box-shadow: var(--bm-shadow-sm);
  padding: var(--bm-space-3) var(--bm-space-4);
  margin-top: 0;
  margin-bottom: var(--bm-space-4);
  font-size: var(--bm-text-sm);
  line-height: var(--bm-line-height-normal);
  box-sizing: border-box;
}

:root:root body.login #login #login_error,
:root:root body.login #login .notice.notice-error {
  border-left-color: var(--bm-color-danger-base);
}

:root:root body.login #login .message,
:root:root body.login #login .notice.notice-info,
:root:root body.login #login .notice.notice-success {
  border-left-color: var(--bm-color-brand-base);
}

:root:root body.login #login #login_error a,
:root:root body.login #login .notice a,
:root:root body.login #login .message a {
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-medium);
}

/* 63g. Navigation Links below Form */
:root:root body.login #login #nav,
:root:root body.login #login #backtoblog {
  padding: 0;
  margin: var(--bm-space-2) 0;
  text-align: center;
  font-size: var(--bm-text-sm);
}

:root:root body.login #login #nav a,
:root:root body.login #login #backtoblog a,
:root:root body.login #login .privacy-policy-page-link a {
  color: var(--bm-color-brand-text);
  text-decoration: none;
  font-weight: var(--bm-font-weight-medium);
  display: inline-flex;
  align-items: center;
  min-height: var(--bm-touch-target-min);
  padding: var(--bm-space-1) var(--bm-space-2);
  border-radius: var(--bm-radius-sm);
  transition: color 0.15s ease;
}

:root:root body.login #login #nav a:hover,
:root:root body.login #login #backtoblog a:hover,
:root:root body.login #login .privacy-policy-page-link a:hover {
  color: var(--bm-color-brand-dark);
  text-decoration: underline;
}

:root[data-bm-theme="dark"] body.login #login #nav a:hover,
:root[data-bm-theme="dark"] body.login #login #backtoblog a:hover,
:root[data-bm-theme="dark"] body.login #login .privacy-policy-page-link a:hover {
  color: var(--bm-color-brand-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) body.login #login #nav a:hover,
  :root:not([data-bm-theme="light"]) body.login #login #backtoblog a:hover,
  :root:not([data-bm-theme="light"]) body.login #login .privacy-policy-page-link a:hover {
    color: var(--bm-color-brand-light);
  }
}

:root:root body.login #login #nav a:focus-visible,
:root:root body.login #login #backtoblog a:focus-visible,
:root:root body.login #login .privacy-policy-page-link a:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

:root:root body.login #login .privacy-policy-page-link {
  text-align: center;
  margin: var(--bm-space-3) 0 0;
}

/* 63h. FluentAuth Two-Factor Authentication & Additional Login Screens
   Source: Fluent Security (fluent-security 3.1.0)
   Covers TOTP, Email 2FA, Passkey 2FA, Bypass/Lockout Help, Passkey Login, Magic Login,
   TOTP/Passkey Enrollment Setup, and Cloudflare Turnstile widgets.
   Scoped to body.login #login. Zero forced priority. All tokens from design/tokens.css. */

/* 2FA Form Container */
:root:root body.login #login form#fls_2fa_form,
:root:root body.login #login form.fls_2fs,
:root:root body.login #login #fls_setup_form {
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  box-shadow: var(--bm-shadow-card);
  padding: var(--bm-space-6);
  margin-top: 0;
  margin-bottom: var(--bm-space-4);
  box-sizing: border-box;
}

/* 2FA Prompt Text & Headings */
:root:root body.login #login form.fls_2fs p,
:root:root body.login #login form.fls_2fs h3,
:root:root body.login #login form#fls_2fa_form p,
:root:root body.login #login form#fls_2fa_form h3,
:root:root body.login #login #fls_setup_form p,
:root:root body.login #login #fls_setup_form h2 {
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  line-height: var(--bm-line-height-normal);
  margin-top: 0;
  margin-bottom: var(--bm-space-4);
}

:root:root body.login #login form.fls_2fs .user-pass-wrap > p:first-child {
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-medium);
  color: var(--bm-color-ink-base);
  margin-bottom: var(--bm-space-4);
}

/* 2FA Verification Inputs */
:root:root body.login #login form.fls_2fs #login_passcode,
:root:root body.login #login #login_passcode,
:root:root body.login #login #fls_magic_logon,
:root:root body.login #login #fls_totp_confirm_code {
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  font-family: var(--bm-font-mono);
  font-size: var(--bm-text-base);
  letter-spacing: 0.15em;
  text-align: center;
  min-height: var(--bm-touch-target-min);
  padding: var(--bm-space-2) var(--bm-space-3);
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--bm-space-1);
  margin-bottom: var(--bm-space-4);
  box-shadow: none;
  transition: border-color 0.15s ease;
}

:root:root body.login #login form.fls_2fs #login_passcode:focus,
:root:root body.login #login #login_passcode:focus,
:root:root body.login #login #fls_magic_logon:focus,
:root:root body.login #login #fls_totp_confirm_code:focus,
:root:root body.login #login form.fls_2fs #login_passcode:focus-visible,
:root:root body.login #login #login_passcode:focus-visible,
:root:root body.login #login #fls_magic_logon:focus-visible,
:root:root body.login #login #fls_totp_confirm_code:focus-visible {
  border-color: var(--bm-color-brand-base);
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

/* FluentAuth Action Buttons (TOTP Confirm, Passkey Start, Magic Submit, Setup Submit) */
:root:root body.login #login #fls_2fa_confirm,
:root:root body.login #login #fls_passkey_start,
:root:root body.login #login #fls_setup_passkey_start,
:root:root body.login #login #fls_totp_submit,
:root:root body.login #login #fls_magic_submit,
:root:root body.login #login .fls_magic_show_btn {
  background-color: var(--bm-color-brand-base);
  border: 1px solid var(--bm-color-brand-dark);
  color: var(--bm-color-btn-primary-text);
  border-radius: var(--bm-radius-md);
  min-height: var(--bm-touch-target-min);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-semibold);
  cursor: pointer;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  padding: var(--bm-space-2) var(--bm-space-4);
  box-shadow: var(--bm-shadow-sm);
  box-sizing: border-box;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

:root:root body.login #login #fls_2fa_confirm:hover,
:root:root body.login #login #fls_passkey_start:hover,
:root:root body.login #login #fls_setup_passkey_start:hover,
:root:root body.login #login #fls_totp_submit:hover,
:root:root body.login #login #fls_magic_submit:hover,
:root:root body.login #login .fls_magic_show_btn:hover {
  background-color: var(--bm-color-brand-dark);
  border-color: var(--bm-color-brand-dark);
  color: var(--bm-color-btn-primary-text);
}

:root:root body.login #login #fls_2fa_confirm:active,
:root:root body.login #login #fls_passkey_start:active,
:root:root body.login #login #fls_setup_passkey_start:active,
:root:root body.login #login #fls_totp_submit:active,
:root:root body.login #login #fls_magic_submit:active,
:root:root body.login #login .fls_magic_show_btn:active {
  background-color: var(--bm-color-brand-dark);
}

:root:root body.login #login #fls_2fa_confirm:focus-visible,
:root:root body.login #login #fls_passkey_start:focus-visible,
:root:root body.login #login #fls_setup_passkey_start:focus-visible,
:root:root body.login #login #fls_totp_submit:focus-visible,
:root:root body.login #login #fls_magic_submit:focus-visible,
:root:root body.login #login .fls_magic_show_btn:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

/* Secondary Button Variants in Setup / Recovery */
:root:root body.login #login .button.button-secondary.fls_passkey_login__button,
:root:root body.login #login #fls_passkey_login_button {
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  min-height: var(--bm-touch-target-min);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-medium);
  width: 100%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-2);
  padding: var(--bm-space-2) var(--bm-space-4);
  box-shadow: var(--bm-shadow-sm);
  box-sizing: border-box;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

:root:root body.login #login #fls_passkey_login_button:hover {
  background-color: var(--bm-color-surface-base);
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-brand-text);
}

:root:root body.login #login #fls_passkey_login_button:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

/* 2FA Alternative Links ("Lost your device?", "Resend Code", "Use recovery code") */
:root:root body.login #login form.fls_2fs .fls_alt_nav,
:root:root body.login #login .fls_alt_nav,
:root:root body.login #login form.fls_2fs p.fls_alt_nav {
  margin: var(--bm-space-3) 0 0;
  text-align: center;
  font-size: var(--bm-text-sm);
}

:root:root body.login #login form.fls_2fs .fls_alt_nav a,
:root:root body.login #login .fls_alt_nav a,
:root:root body.login #login #fls_passkey_recovery,
:root:root body.login #login #fls_totp_skip,
:root:root body.login #login #fls_setup_show_app,
:root:root body.login #login #fls_setup_show_passkey {
  color: var(--bm-color-brand-text);
  text-decoration: none;
  font-weight: var(--bm-font-weight-medium);
  display: inline-flex;
  align-items: center;
  min-height: var(--bm-touch-target-min);
  padding: var(--bm-space-1) var(--bm-space-2);
  border-radius: var(--bm-radius-sm);
  transition: color 0.15s ease;
}

:root:root body.login #login form.fls_2fs .fls_alt_nav a:hover,
:root:root body.login #login .fls_alt_nav a:hover,
:root:root body.login #login #fls_passkey_recovery:hover,
:root:root body.login #login #fls_totp_skip:hover,
:root:root body.login #login #fls_setup_show_app:hover,
:root:root body.login #login #fls_setup_show_passkey:hover {
  color: var(--bm-color-brand-dark);
  text-decoration: underline;
}

:root[data-bm-theme="dark"] body.login #login form.fls_2fs .fls_alt_nav a:hover,
:root[data-bm-theme="dark"] body.login #login .fls_alt_nav a:hover,
:root[data-bm-theme="dark"] body.login #login #fls_passkey_recovery:hover,
:root[data-bm-theme="dark"] body.login #login #fls_totp_skip:hover,
:root[data-bm-theme="dark"] body.login #login #fls_setup_show_app:hover,
:root[data-bm-theme="dark"] body.login #login #fls_setup_show_passkey:hover {
  color: var(--bm-color-brand-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) body.login #login form.fls_2fs .fls_alt_nav a:hover,
  :root:not([data-bm-theme="light"]) body.login #login .fls_alt_nav a:hover,
  :root:not([data-bm-theme="light"]) body.login #login #fls_passkey_recovery:hover,
  :root:not([data-bm-theme="light"]) body.login #login #fls_totp_skip:hover,
  :root:not([data-bm-theme="light"]) body.login #login #fls_setup_show_app:hover,
  :root:not([data-bm-theme="light"]) body.login #login #fls_setup_show_passkey:hover {
    color: var(--bm-color-brand-light);
  }
}

:root:root body.login #login form.fls_2fs .fls_alt_nav a:focus-visible,
:root:root body.login #login .fls_alt_nav a:focus-visible,
:root:root body.login #login #fls_passkey_recovery:focus-visible,
:root:root body.login #login #fls_totp_skip:focus-visible,
:root:root body.login #login #fls_setup_show_app:focus-visible,
:root:root body.login #login #fls_setup_show_passkey:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

/* 2FA Lockout Help / Bypass Section */
:root:root body.login #login #fls_lockout_help {
  margin-top: var(--bm-space-4);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
}

:root:root body.login #login #fls_lockout_help details {
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  padding: var(--bm-space-3);
}

:root:root body.login #login #fls_lockout_help details summary {
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: var(--bm-touch-target-min);
  padding: 0 var(--bm-space-1);
}

:root:root body.login #login #fls_lockout_help details summary:hover {
  color: var(--bm-color-brand-dark);
}

:root:root body.login #login #fls_lockout_help textarea,
:root:root body.login #login #fls_lockout_help textarea#fls_recovery_code,
:root:root body.login #login textarea[readonly] {
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  font-family: var(--bm-font-mono);
  font-size: var(--bm-text-xs);
  padding: var(--bm-space-2) var(--bm-space-3);
  width: 100%;
  box-sizing: border-box;
}

/* Magic Login Container */
:root:root body.login #login #fls_magic_login {
  margin-top: var(--bm-space-4);
}

/* Passkey Separator ("or") */
:root:root body.login #login .fls_passkey_login__or,
:root:root body.login #login .fls_or_wrap {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--bm-space-3) 0;
}

:root:root body.login #login .fls_passkey_login__or span,
:root:root body.login #login .fls_magic-or {
  color: var(--bm-color-muted-base);
}

:root:root body.login #login .fls_passkey_login__or span[style*="height:1px"],
:root:root body.login #login .fls_passkey_login__or span[style*="height: 1px"] {
  background-color: var(--bm-color-line-base);
}

/* Status Notifications in FluentAuth */
:root:root body.login #login #fls_passkey_status,
:root:root body.login #login #fls_passkey_login_status,
:root:root body.login #login #fls_setup_passkey_status {
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
  text-align: center;
  margin-top: var(--bm-space-2);
  margin-bottom: var(--bm-space-2);
}

/* TOTP Setup Secret Display */
:root:root body.login #login #fls_totp_secret_display {
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  font-family: var(--bm-font-mono);
  font-size: var(--bm-text-sm);
  padding: var(--bm-space-2) var(--bm-space-3);
  text-align: center;
  letter-spacing: 0.1em;
  margin: var(--bm-space-2) 0;
}

/* Magic Login Back Button */
:root:root body.login #login .fls_magic_show_regular {
  background: transparent;
  border: none;
  color: var(--bm-color-brand-text);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  cursor: pointer;
  min-height: var(--bm-touch-target-min);
  padding: var(--bm-space-1) var(--bm-space-2);
}

:root:root body.login #login .fls_magic_show_regular:hover {
  color: var(--bm-color-brand-dark);
  text-decoration: underline;
}

/* Turnstile Widget Centering */
:root:root body.login #login .fls_turnstile,
:root:root body.login #login .cf-turnstile {
  margin: var(--bm-space-3) 0;
  display: flex;
  justify-content: center;
}

/* 63i. Language Switcher */
:root:root body.login #login .language-switcher {
  margin-top: var(--bm-space-4);
  text-align: center;
}

:root:root body.login #login .language-switcher select {
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  min-height: var(--bm-touch-target-min);
  padding: var(--bm-space-1) var(--bm-space-3);
  font-size: var(--bm-text-sm);
}

:root:root body.login #login .language-switcher select:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}
/* --------------------------------------------------------------------------
   64-fx: Multi-currency price display, switcher, and attribution.
   Tokens only; accessible contrast across light and dark modes.
   -------------------------------------------------------------------------- */

.bm-fx-approx {
  display: block;
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-regular);
  color: var(--bm-color-ink-light);
  margin-top: var(--bm-space-1);
}

.bm-card__price .bm-fx-approx {
  display: block;
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-regular);
  color: var(--bm-color-ink-light);
  margin-top: var(--bm-space-1);
}

.bm-ad-price .bm-fx-approx {
  display: block;
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-regular);
  color: var(--bm-color-ink-light);
  margin-top: var(--bm-space-1);
}

.bm-fx-switcher {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  font-size: var(--bm-text-xs);
  color: var(--bm-color-ink-light);
}

.bm-fx-switcher--toolbar {
  margin-inline-start: auto;
}

.bm-fx-switcher--single {
  margin-top: var(--bm-space-2);
  margin-bottom: var(--bm-space-3);
}

.bm-fx-switcher__label {
  font-weight: var(--bm-font-weight-medium);
  color: var(--bm-color-ink-light);
  margin: 0;
}

.bm-fx-switcher__select {
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  padding: var(--bm-space-1) var(--bm-space-3);
  font-size: var(--bm-text-xs);
  line-height: 1.5;
  cursor: pointer;
  min-height: 36px;
}

.bm-fx-switcher__select:focus {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

.bm-fx-attribution {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-ink-light);
}

.bm-fx-attribution a {
  color: var(--bm-color-ink-light);
  text-decoration: underline;
}

.bm-fx-attribution a:hover,
.bm-fx-attribution a:focus {
  color: var(--bm-color-brand-text);
}

.bm-fx-footer-note {
  font-size: var(--bm-text-xs);
}

.bm-fx-footer-note a {
  color: var(--bm-color-footer-link-hover);
  text-decoration: underline;
}

.bm-fx-disclaimer {
  display: block;
  font-size: var(--bm-text-xs);
  color: var(--bm-color-ink-light);
  margin-top: var(--bm-space-1);
  margin-bottom: var(--bm-space-2);
}

/* Dark mode adjustments (separate rules, no comma before @media) */
:root[data-bm-theme="dark"] .bm-fx-approx {
  color: var(--bm-color-ink-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-fx-approx {
    color: var(--bm-color-ink-light);
  }
}

:root[data-bm-theme="dark"] .bm-fx-disclaimer {
  color: var(--bm-color-ink-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-fx-disclaimer {
    color: var(--bm-color-ink-light);
  }
}

:root[data-bm-theme="dark"] .bm-fx-switcher__select {
  background-color: var(--bm-color-surface-base);
  border-color: var(--bm-color-line-base);
  color: var(--bm-color-ink-base);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-fx-switcher__select {
    background-color: var(--bm-color-surface-base);
    border-color: var(--bm-color-line-base);
    color: var(--bm-color-ink-base);
  }
}

:root[data-bm-theme="dark"] .bm-fx-attribution a:hover,
:root[data-bm-theme="dark"] .bm-fx-attribution a:focus {
  color: var(--bm-color-brand-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-fx-attribution a:hover,
  :root:not([data-bm-theme="light"]) .bm-fx-attribution a:focus {
    color: var(--bm-color-brand-text);
  }
}
/* --------------------------------------------------------------------------
   64. BM Public Sign-in & Registration Page (/login/, /register/)
   Pure focus authentication layout: single centered logo, ambient glow,
   glass card, no header/footer clutter, 100% WCAG AAA contrast.
   Tokens from design/tokens.css.
   -------------------------------------------------------------------------- */

/* Hide standard site header and multi-column footer on auth pages */
body.bm-auth-page #brx-content :is(h1, .brxe-post-title, .bricks-heading, .entry-title):not(.bm-login-shell *),
body.bm-auth-page .wp-block-post-title:not(.bm-login-shell *),
body.bm-auth-page main > .entry-title,
body:has(.bm-login-shell) #brx-content :is(h1, .brxe-post-title, .bricks-heading, .entry-title):not(.bm-login-shell *),
body:has(.bm-login-shell) .wp-block-post-title:not(.bm-login-shell *),
body:has(.bm-login-shell) main > .entry-title {
  display: none;
}

body.bm-auth-page .bm-header,
body.bm-auth-page .bm-header__login,
body.bm-auth-page .bm-header__mobile-link,
body.bm-auth-page .bm-cta-strip,
body.bm-auth-page .bm-footer,
body:has(.bm-login-shell) .bm-header,
body:has(.bm-login-shell) .bm-header__login,
body:has(.bm-login-shell) .bm-header__mobile-link,
body:has(.bm-login-shell) .bm-cta-strip,
body:has(.bm-login-shell) .bm-footer,
body:has(.bm-login-shell) :is(header.wp-block-template-part, footer.wp-block-template-part) {
  display: none;
}

/* Auth Shell: Centered with full viewport balance */
.bm-login-shell {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--bm-space-8) var(--bm-space-4);
  position: relative;
  box-sizing: border-box;
}

/* Ambient glow background effect behind the header & card */
.bm-login-shell::before {
  content: '';
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100%, 46rem);
  height: 42rem;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--bm-color-brand-base) 10%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

:root[data-bm-theme="dark"] .bm-login-shell::before {
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--bm-color-brand-text) 12%, transparent) 0%, transparent 70%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-shell::before {
    background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--bm-color-brand-text) 12%, transparent) 0%, transparent 70%);
  }
}

/* Top Utilities: Return Link & Quiet Theme Toggle */
.bm-login-back-link {
  position: absolute;
  top: var(--bm-space-4);
  left: var(--bm-space-4);
  z-index: 10;
}

@media (min-width: 640px) {
  .bm-login-back-link {
    top: var(--bm-space-6);
    left: var(--bm-space-6);
  }
}

.bm-btn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: 44px;
  min-width: 44px;
  padding: var(--bm-space-2) var(--bm-space-3);
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--bm-radius-full);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--bm-color-line-base);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--bm-transition-fast);
}

.bm-btn-back:hover {
  color: var(--bm-color-brand-text);
  border-color: var(--bm-color-brand-base);
  background: var(--bm-color-surface-base);
  text-decoration: none;
}

.bm-btn-back:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
}

:root[data-bm-theme="dark"] .bm-btn-back {
  color: #94a3b8;
  background: rgba(15, 22, 18, 0.7);
  border-color: color-mix(in srgb, var(--bm-color-brand-text) 20%, transparent);
}

:root[data-bm-theme="dark"] .bm-btn-back:hover {
  color: var(--bm-color-brand-text);
  border-color: var(--bm-color-brand-text);
  background: var(--bm-dk-card);
}

:root[data-bm-theme="dark"] .bm-btn-back:focus-visible {
  outline-color: var(--bm-color-brand-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-btn-back {
    color: #94a3b8;
    background: rgba(15, 22, 18, 0.7);
    border-color: color-mix(in srgb, var(--bm-color-brand-text) 20%, transparent);
  }
  :root:not([data-bm-theme="light"]) .bm-btn-back:hover {
    color: var(--bm-color-brand-text);
    border-color: var(--bm-color-brand-text);
    background: var(--bm-dk-card);
  }
  :root:not([data-bm-theme="light"]) .bm-btn-back:focus-visible {
    outline-color: var(--bm-color-brand-text);
  }
}

@media (max-width: 480px) {
  .bm-btn-back span {
    display: none;
  }
  .bm-btn-back {
    padding: var(--bm-space-2);
    justify-content: center;
  }
}

/* Top-Right Quiet Theme Toggle */
.bm-login-theme-toggle {
  position: absolute;
  top: var(--bm-space-4);
  right: var(--bm-space-4);
  z-index: 10;
}

@media (min-width: 640px) {
  .bm-login-theme-toggle {
    top: var(--bm-space-6);
    right: var(--bm-space-6);
  }
}

.bm-login-theme-toggle .bm-theme-toggle {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-full);
  padding: var(--bm-space-2);
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--bm-color-ink-base);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--bm-transition-fast);
}

.bm-login-theme-toggle .bm-theme-toggle:hover {
  background: var(--bm-color-surface-base);
  border-color: var(--bm-color-brand-base);
}

:root[data-bm-theme="dark"] .bm-login-theme-toggle .bm-theme-toggle {
  background: rgba(15, 22, 18, 0.7);
  border-color: color-mix(in srgb, var(--bm-color-brand-text) 20%, transparent);
  color: #f1f5f9;
}

:root[data-bm-theme="dark"] .bm-login-theme-toggle .bm-theme-toggle:hover {
  background: var(--bm-dk-card);
  border-color: var(--bm-color-brand-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-theme-toggle .bm-theme-toggle {
    background: rgba(15, 22, 18, 0.7);
    border-color: color-mix(in srgb, var(--bm-color-brand-text) 20%, transparent);
    color: #f1f5f9;
  }
  :root:not([data-bm-theme="light"]) .bm-login-theme-toggle .bm-theme-toggle:hover {
    background: var(--bm-dk-card);
    border-color: var(--bm-color-brand-text);
  }
}

/* Header & Logo Medallion Badge */
.bm-login-badge {
  text-align: center;
  margin-block-end: var(--bm-space-6);
  position: relative;
  z-index: 1;
}

/* Centered Circular Logo Medallion */
.bm-login-badge__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-light);
  border: 2.5px solid color-mix(in srgb, var(--bm-color-brand-base) 25%, transparent);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 0 22px color-mix(in srgb, var(--bm-color-brand-base) 18%, transparent);
  margin-block-end: var(--bm-space-4);
  padding: var(--bm-space-3);
  text-decoration: none;
  box-sizing: border-box;
  transition: transform var(--bm-transition-normal), box-shadow var(--bm-transition-normal);
}

.bm-login-badge__logo:hover {
  transform: scale(1.05);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12), 0 0 28px color-mix(in srgb, var(--bm-color-brand-base) 35%, transparent);
}

:root[data-bm-theme="dark"] .bm-login-badge__logo {
  background-color: #0f1612;
  border-color: color-mix(in srgb, var(--bm-color-brand-text) 38%, transparent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 25px color-mix(in srgb, var(--bm-color-brand-text) 25%, transparent);
}

:root[data-bm-theme="dark"] .bm-login-badge__logo:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 32px color-mix(in srgb, var(--bm-color-brand-text) 40%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-badge__logo {
    background-color: #0f1612;
    border-color: color-mix(in srgb, var(--bm-color-brand-text) 38%, transparent);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 25px color-mix(in srgb, var(--bm-color-brand-text) 25%, transparent);
  }
  :root:not([data-bm-theme="light"]) .bm-login-badge__logo:hover {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 32px color-mix(in srgb, var(--bm-color-brand-text) 40%, transparent);
  }
}

.bm-login-badge__logo img.bm-logo {
  width: 4.5rem;
  height: auto;
  max-height: 4.5rem;
  object-fit: contain;
  transition: transform var(--bm-transition-fast);
}

.bm-login-badge__logo .bm-logo--dark {
  display: none;
}
.bm-login-badge__logo .bm-logo--light {
  display: block;
}

:root[data-bm-theme="dark"] .bm-login-badge__logo .bm-logo--light {
  display: none;
}
:root[data-bm-theme="dark"] .bm-login-badge__logo .bm-logo--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-badge__logo .bm-logo--light {
    display: none;
  }
  :root:not([data-bm-theme="light"]) .bm-login-badge__logo .bm-logo--dark {
    display: block;
  }
}

/* Medallion backward-compat class */
.bm-login-badge__medallion {
  display: inline-flex;
}

.bm-login-shell__title {
  font-size: var(--bm-text-2xl);
  font-weight: 700;
  color: var(--bm-color-ink-dark);
  margin: 0 0 var(--bm-space-2) 0;
  letter-spacing: -0.02em;
}

.bm-login-shell__title span {
  color: var(--bm-color-brand-text);
  background: linear-gradient(135deg, var(--bm-color-brand-light) 0%, var(--bm-color-brand-base) 60%, var(--bm-color-brand-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

:root[data-bm-theme="dark"] .bm-login-shell__title span {
  color: var(--bm-color-brand-text);
  background: linear-gradient(135deg, var(--bm-color-brand-bright) 0%, var(--bm-color-brand-text) 60%, var(--bm-color-brand-mid) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-shell__title span {
    color: var(--bm-color-brand-text);
    background: linear-gradient(135deg, var(--bm-color-brand-bright) 0%, var(--bm-color-brand-text) 60%, var(--bm-color-brand-mid) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.bm-login-shell__subtitle {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
  margin: 0 auto;
  max-width: 36ch;
  line-height: var(--bm-line-height-relaxed);
}

@media (min-width: 640px) {
  .bm-login-shell__subtitle {
    max-width: 48ch;
  }
}

/* Card Container & Grid */
.bm-login-register {
  position: relative;
  z-index: 1;
  width: 100%;
  gap: var(--bm-space-6);
  margin-block: 0;
  align-items: stretch;
}

/* Centered single form card (standard /login/ and /register/ views) */
.bm-login-register:not(.bm-grid--cols-2) {
  max-width: 28rem;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .bm-login-register.bm-grid--cols-2 {
    gap: var(--bm-space-8);
  }
}

/* Glass Card */
.bm-login-register .bm-slot-card,
.bm-slot-card--login,
.bm-slot-card--register,
.bm-ev-resend.bm-slot-card {
  display: block;
  gap: 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-radius: var(--bm-radius-xl);
  padding: var(--bm-space-6);
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  box-shadow: var(--bm-shadow-sm);
  transition: border-color var(--bm-transition-normal), box-shadow var(--bm-transition-normal);
}

@media (min-width: 640px) {
  .bm-login-register .bm-slot-card,
  .bm-slot-card--login,
  .bm-slot-card--register,
  .bm-ev-resend.bm-slot-card {
    padding: var(--bm-space-8);
  }
}

/* Top Subtle Glow Line */
.bm-login-register .bm-slot-card::before,
.bm-slot-card--login::before,
.bm-slot-card--register::before,
.bm-ev-resend.bm-slot-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--bm-color-brand-base) 50%, transparent 100%);
  pointer-events: none;
}

:root[data-bm-theme="dark"] .bm-login-register .bm-slot-card::before,
:root[data-bm-theme="dark"] .bm-slot-card--login::before,
:root[data-bm-theme="dark"] .bm-slot-card--register::before,
:root[data-bm-theme="dark"] .bm-ev-resend.bm-slot-card::before {
  background: linear-gradient(90deg, transparent 0%, var(--bm-color-brand-base) 50%, transparent 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-register .bm-slot-card::before,
  :root:not([data-bm-theme="light"]) .bm-slot-card--login::before,
  :root:not([data-bm-theme="light"]) .bm-slot-card--register::before,
  :root:not([data-bm-theme="light"]) .bm-ev-resend.bm-slot-card::before {
    background: linear-gradient(90deg, transparent 0%, var(--bm-color-brand-base) 50%, transparent 100%);
  }
}

/* Dark Theme Glass Card */
:root[data-bm-theme="dark"] .bm-login-register .bm-slot-card,
:root[data-bm-theme="dark"] .bm-slot-card--login,
:root[data-bm-theme="dark"] .bm-slot-card--register,
:root[data-bm-theme="dark"] .bm-ev-resend.bm-slot-card {
  background-color: var(--bm-color-surface-light);
  border-color: var(--bm-color-line-base);
  box-shadow: var(--bm-shadow-sm);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-register .bm-slot-card,
  :root:not([data-bm-theme="light"]) .bm-slot-card--login,
  :root:not([data-bm-theme="light"]) .bm-slot-card--register,
  :root:not([data-bm-theme="light"]) .bm-ev-resend.bm-slot-card {
    background-color: var(--bm-color-surface-light);
    border-color: var(--bm-color-line-base);
    box-shadow: var(--bm-shadow-sm);
  }
}

/* Card Titles: shown in 2-column view, hidden in single view where outer header exists */
.bm-login-register:not(.bm-grid--cols-2) .bm-slot-card--login .bm-slot-card__title,
.bm-login-register:not(.bm-grid--cols-2) .bm-slot-card--register .bm-slot-card__title {
  display: none;
}

.bm-login-register.bm-grid--cols-2 .bm-slot-card__title {
  display: block;
  font-size: var(--bm-text-xl);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  margin-block: 0 var(--bm-space-4);
}

/* Fallback text logo if svg not present */
.bm-logo--text {
  display: inline-block;
  font-weight: 700;
  font-size: var(--bm-text-xl);
  color: var(--bm-color-brand-text);
  line-height: 1;
}

/* Field Labels: Sentence case, 0.875rem, contrast >= 4.5, normal letter spacing */
.bm-login-register .bm-form__label,
.bm-ev-resend .bm-form__label {
  display: block;
  font-size: var(--bm-text-sm);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--bm-color-ink-base);
  margin-block-end: var(--bm-space-2);
}

:root[data-bm-theme="dark"] .bm-login-register .bm-form__label,
:root[data-bm-theme="dark"] .bm-ev-resend .bm-form__label {
  color: var(--bm-color-ink-base);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-register .bm-form__label,
  :root:not([data-bm-theme="light"]) .bm-ev-resend .bm-form__label {
    color: var(--bm-color-ink-base);
  }
}

/* Split Label Row for "Forgot your password?" */
.bm-form__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bm-space-3);
  width: 100%;
}

.bm-form__forgot {
  font-size: var(--bm-text-xs);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--bm-color-brand-text);
  margin-inline-start: auto;
  transition: color var(--bm-transition-fast);
}

.bm-form__forgot:hover {
  color: var(--bm-color-brand-dark);
}

:root[data-bm-theme="dark"] .bm-form__forgot {
  color: var(--bm-color-brand-text);
}

:root[data-bm-theme="dark"] .bm-form__forgot:hover {
  color: var(--bm-color-brand-bright);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-form__forgot {
    color: var(--bm-color-brand-text);
  }
  :root:not([data-bm-theme="light"]) .bm-form__forgot:hover {
    color: var(--bm-color-brand-bright);
  }
}

/* Even Vertical Rhythm: var(--bm-space-4) between fields */
.bm-login-register .bm-form__field,
.bm-ev-resend .bm-form__field {
  margin-block-end: var(--bm-space-4);
}

/* Text Inputs */
.bm-login-register .bm-form input[type="text"],
.bm-login-register .bm-form input[type="email"],
.bm-login-register .bm-form input[type="password"],
.bm-ev-resend .bm-form input[type="email"] {
  width: 100%;
  min-height: var(--bm-touch-target-min);
  height: var(--bm-touch-target-min);
  padding: 0 var(--bm-space-4);
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-md);
  color: var(--bm-color-ink-dark);
  font-size: var(--bm-text-base);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color var(--bm-transition-fast), box-shadow var(--bm-transition-fast), background-color var(--bm-transition-fast);
}

.bm-login-register .bm-form input[type="text"]:focus-visible,
.bm-login-register .bm-form input[type="email"]:focus-visible,
.bm-login-register .bm-form input[type="password"]:focus-visible,
.bm-ev-resend .bm-form input[type="email"]:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
  border-color: var(--bm-color-ring);
  box-shadow: var(--bm-shadow-focus);
}

.bm-login-register .bm-form input[type="text"]:focus:not(:focus-visible),
.bm-login-register .bm-form input[type="email"]:focus:not(:focus-visible),
.bm-login-register .bm-form input[type="password"]:focus:not(:focus-visible),
.bm-ev-resend .bm-form input[type="email"]:focus:not(:focus-visible) {
  border-color: var(--bm-color-brand-base);
  box-shadow: var(--bm-shadow-focus);
  outline: 0;
}

/* Dark Mode Inputs */
:root[data-bm-theme="dark"] .bm-login-register .bm-form input[type="text"],
:root[data-bm-theme="dark"] .bm-login-register .bm-form input[type="email"],
:root[data-bm-theme="dark"] .bm-login-register .bm-form input[type="password"],
:root[data-bm-theme="dark"] .bm-ev-resend .bm-form input[type="email"] {
  background-color: var(--bm-color-surface-base);
  border-color: var(--bm-color-line-dark);
  color: var(--bm-color-ink-dark);
}

:root[data-bm-theme="dark"] .bm-login-register .bm-form input:focus-visible,
:root[data-bm-theme="dark"] .bm-ev-resend .bm-form input:focus-visible {
  border-color: var(--bm-color-ring);
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-register .bm-form input[type="text"],
  :root:not([data-bm-theme="light"]) .bm-login-register .bm-form input[type="email"],
  :root:not([data-bm-theme="light"]) .bm-login-register .bm-form input[type="password"],
  :root:not([data-bm-theme="light"]) .bm-ev-resend .bm-form input[type="email"] {
    background-color: var(--bm-color-surface-base);
    border-color: var(--bm-color-line-dark);
    color: var(--bm-color-ink-dark);
  }
  :root:not([data-bm-theme="light"]) .bm-login-register .bm-form input:focus-visible,
  :root:not([data-bm-theme="light"]) .bm-ev-resend .bm-form input:focus-visible {
    border-color: var(--bm-color-ring);
    outline: 2px solid var(--bm-color-ring);
    outline-offset: 2px;
  }
}

/* Input Placeholders with WCAG AA Contrast */
.bm-login-register .bm-form input::placeholder,
.bm-ev-resend .bm-form input::placeholder {
  color: var(--bm-color-muted-base);
  opacity: 0.85;
}

:root[data-bm-theme="dark"] .bm-login-register .bm-form input::placeholder,
:root[data-bm-theme="dark"] .bm-ev-resend .bm-form input::placeholder {
  color: #94a3b8;
  opacity: 0.85;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-register .bm-form input::placeholder,
  :root:not([data-bm-theme="light"]) .bm-ev-resend .bm-form input::placeholder {
    color: #94a3b8;
    opacity: 0.85;
  }
}

/* Password Toggle Wrapper & Button with Visible Label */
.bm-pw-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.bm-pw-wrap input[type="password"],
.bm-pw-wrap input[type="text"] {
  padding-inline-end: 5.25rem;
}

.bm-pw-toggle {
  position: absolute;
  right: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  height: 2.5rem;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-1);
  padding: 0 var(--bm-space-2);
  background: transparent;
  border: none;
  border-radius: var(--bm-radius-md);
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--bm-transition-fast), background-color var(--bm-transition-fast);
}

.bm-pw-toggle:hover {
  color: var(--bm-color-brand-text);
  background-color: var(--bm-color-brand-tint);
}

.bm-pw-toggle:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: -2px;
}

:root[data-bm-theme="dark"] .bm-pw-toggle {
  color: #94a3b8;
}

:root[data-bm-theme="dark"] .bm-pw-toggle:hover {
  color: var(--bm-color-brand-text);
  background-color: color-mix(in srgb, var(--bm-color-brand-text) 15%, transparent);
}

:root[data-bm-theme="dark"] .bm-pw-toggle:focus-visible {
  outline-color: var(--bm-color-brand-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-pw-toggle {
    color: #94a3b8;
  }
  :root:not([data-bm-theme="light"]) .bm-pw-toggle:hover {
    color: var(--bm-color-brand-text);
    background-color: color-mix(in srgb, var(--bm-color-brand-text) 15%, transparent);
  }
  :root:not([data-bm-theme="light"]) .bm-pw-toggle:focus-visible {
    outline-color: var(--bm-color-brand-text);
  }
}

.bm-pw-toggle__icon--hide {
  display: none;
}

.bm-pw-toggle.is-active .bm-pw-toggle__icon--show {
  display: none;
}

.bm-pw-toggle.is-active .bm-pw-toggle__icon--hide {
  display: block;
}

/* Checkbox Spacing & Alignment */
.bm-login-register .bm-form > label {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  margin-block-start: 0;
  margin-block-end: var(--bm-space-4);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
  cursor: pointer;
  user-select: none;
  min-height: var(--bm-touch-target-min);
  line-height: var(--bm-line-height-tight);
}

.bm-login-register .bm-form input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--bm-color-brand-base);
  border-radius: var(--bm-radius-sm);
  cursor: pointer;
  vertical-align: middle;
}

:root[data-bm-theme="dark"] .bm-login-register .bm-form input[type="checkbox"] {
  accent-color: var(--bm-color-brand-base);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-register .bm-form input[type="checkbox"] {
    accent-color: var(--bm-color-brand-base);
  }
}

/* Primary Submit Button */
.bm-login-register .bm-form > div:has(.bm-btn--primary),
.bm-login-register .bm-form .bm-btn--primary {
  margin-block-start: 0;
  margin-block-end: 0;
}

.bm-login-register .bm-btn--primary {
  width: 100%;
  height: 3rem;
  min-height: var(--bm-touch-target-min);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
  font-weight: 700;
  font-size: var(--bm-text-base);
  border: 1px solid var(--bm-color-brand-base);
  border-radius: var(--bm-radius-lg);
  box-shadow: var(--bm-shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-2);
  cursor: pointer;
  transition: background-color var(--bm-transition-fast), transform var(--bm-transition-fast), box-shadow var(--bm-transition-fast);
}

.bm-login-register .bm-btn--primary:hover {
  background-color: var(--bm-color-brand-dark);
  border-color: var(--bm-color-brand-dark);
  box-shadow: var(--bm-shadow-md);
}

.bm-login-register .bm-btn--primary:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

/* This glow button was written for the Auto form only, so explicit dark showed a flat button; both forms now match (found by tests/bm-autodark-browser.js). */
:root[data-bm-theme="dark"] .bm-login-register .bm-btn--primary {
  background: linear-gradient(135deg, var(--bm-color-brand-vivid) 0%, var(--bm-color-brand-base) 60%, var(--bm-color-brand-dark) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 10px color-mix(in srgb, var(--bm-color-brand-text) 18%, transparent);
}
:root[data-bm-theme="dark"] .bm-login-register .bm-btn--primary:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 16px color-mix(in srgb, var(--bm-color-brand-text) 32%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-register .bm-btn--primary {
    background: linear-gradient(135deg, var(--bm-color-brand-vivid) 0%, var(--bm-color-brand-base) 60%, var(--bm-color-brand-dark) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 10px color-mix(in srgb, var(--bm-color-brand-text) 18%, transparent);
  }
  :root:not([data-bm-theme="light"]) .bm-login-register .bm-btn--primary:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 16px color-mix(in srgb, var(--bm-color-brand-text) 32%, transparent);
  }
}

/* Secondary Action: "New here? Create an account" / "Already have an account? Log in" as full-width secondary button */
.bm-login-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bm-space-3);
  margin-block-start: var(--bm-space-5);
  padding-block-start: var(--bm-space-5);
  border-block-start: 1px solid var(--bm-color-line-dark);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
  text-align: center;
}

:root[data-bm-theme="dark"] .bm-login-switch {
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-switch {
    border-block-start: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
  }
}

.bm-login-switch a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: var(--bm-space-3) var(--bm-space-4);
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-lg);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  transition: all var(--bm-transition-fast);
}

.bm-login-switch a:hover {
  background-color: var(--bm-color-surface-light);
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-brand-text);
  text-decoration: none;
}

.bm-login-switch a:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

:root[data-bm-theme="dark"] .bm-login-switch a {
  background-color: var(--bm-color-surface-base);
  border-color: var(--bm-color-line-dark);
  color: var(--bm-color-ink-base);
}

:root[data-bm-theme="dark"] .bm-login-switch a:hover {
  background-color: var(--bm-color-surface-dark);
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-brand-text);
}

:root[data-bm-theme="dark"] .bm-login-switch a:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-switch a {
    background-color: var(--bm-color-surface-base);
    border-color: var(--bm-color-line-dark);
    color: var(--bm-color-ink-base);
  }
  :root:not([data-bm-theme="light"]) .bm-login-switch a:hover {
    background-color: var(--bm-color-surface-dark);
    border-color: var(--bm-color-brand-base);
    color: var(--bm-color-brand-text);
  }
  :root:not([data-bm-theme="light"]) .bm-login-switch a:focus-visible {
    outline: 2px solid var(--bm-color-ring);
    outline-offset: 2px;
  }
}

/* Secondary Links & Help Text */
.bm-login-register p {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
}

.bm-login-register .bm-form__help,
.bm-ev-resend .bm-form__help {
  display: block;
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
  margin-block-start: var(--bm-space-2);
  line-height: var(--bm-line-height-normal);
}

:root[data-bm-theme="dark"] .bm-login-register .bm-form__help,
:root[data-bm-theme="dark"] .bm-ev-resend .bm-form__help {
  color: #94a3b8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-register .bm-form__help,
  :root:not([data-bm-theme="light"]) .bm-ev-resend .bm-form__help {
    color: #94a3b8;
  }
}

/* Email Verification Resend Disclosure */
.bm-ev-resend--details {
  margin-block-start: var(--bm-space-5);
  padding-block-start: var(--bm-space-4);
  border-top: 1px dashed var(--bm-color-line-base);
}

/* Hide disclosure UNLESS it is opened by PHP (e.g. after reg_verify or ev_* messages) */
details.bm-ev-resend--details:not([open]) {
  display: none;
}

.bm-ev-resend__summary {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
  cursor: pointer;
  padding: var(--bm-space-1) 0;
  transition: color var(--bm-transition-fast);
}

.bm-ev-resend__summary:hover {
  color: var(--bm-color-brand-text);
}

.bm-ev-resend__summary:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
  border-radius: var(--bm-radius-sm);
}

.bm-ev-resend--details[open] .bm-form {
  margin-block-start: var(--bm-space-3);
}

:root[data-bm-theme="dark"] .bm-ev-resend--details {
  border-top-color: color-mix(in srgb, var(--bm-color-brand-text) 25%, transparent);
}

:root[data-bm-theme="dark"] .bm-ev-resend__summary {
  color: var(--bm-color-brand-text);
}

:root[data-bm-theme="dark"] .bm-ev-resend__summary:hover {
  color: var(--bm-color-brand-bright);
}

:root[data-bm-theme="dark"] .bm-ev-resend__summary:focus-visible {
  outline-color: var(--bm-color-brand-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-ev-resend--details {
    border-top-color: color-mix(in srgb, var(--bm-color-brand-text) 25%, transparent);
  }
  :root:not([data-bm-theme="light"]) .bm-ev-resend__summary {
    color: var(--bm-color-brand-text);
  }
  :root:not([data-bm-theme="light"]) .bm-ev-resend__summary:hover {
    color: var(--bm-color-brand-bright);
  }
  :root:not([data-bm-theme="light"]) .bm-ev-resend__summary:focus-visible {
    outline-color: var(--bm-color-brand-text);
  }
}

/* Resend card outside login-register (standalone view) */
.bm-ev-resend.bm-slot-card,
section.bm-ev-resend {
  display: block;
  margin-block-start: var(--bm-space-8);
  max-width: 28rem;
  margin-inline: auto;
}

.bm-ev-resend .bm-slot-card__title {
  display: block;
  margin-block-start: 0;
  margin-block-end: var(--bm-space-4);
  font-size: var(--bm-text-lg);
  font-weight: 700;
  color: var(--bm-color-ink-dark);
}

.bm-ev-resend .bm-form {
  display: block;
  margin-block-start: 0;
}

/* Minimal Quiet 1-Line Footer for Auth Pages */
.bm-auth-footer {
  margin-block-start: var(--bm-space-8);
  padding-block-end: var(--bm-space-4);
  text-align: center;
  position: relative;
  z-index: 1;
  width: 100%;
}

.bm-auth-footer__meta {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
  margin: 0;
}

.bm-auth-footer__meta a {
  color: var(--bm-color-muted-base);
  text-decoration: none;
  transition: color var(--bm-transition-fast);
}

.bm-auth-footer__meta a:hover {
  color: var(--bm-color-brand-text);
  text-decoration: underline;
}

:root[data-bm-theme="dark"] .bm-auth-footer__meta,
:root[data-bm-theme="dark"] .bm-auth-footer__meta a {
  color: #94a3b8;
}

:root[data-bm-theme="dark"] .bm-auth-footer__meta a:hover {
  color: var(--bm-color-brand-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-auth-footer__meta,
  :root:not([data-bm-theme="light"]) .bm-auth-footer__meta a {
    color: #94a3b8;
  }
  :root:not([data-bm-theme="light"]) .bm-auth-footer__meta a:hover {
    color: var(--bm-color-brand-text);
  }
}
/* Meetup spots (curated public exchange locations on classified ads) */
.bm-slot-card--safespots {
  display: flex;
  flex-direction: column;
}

.bm-safespots {
  display: grid;
  gap: var(--bm-space-3);
}

.bm-safespots .bm-safespots__title {
  margin: 0;
  font-size: var(--bm-text-xl);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
}

.bm-safespots .bm-safespots__intro {
  margin: 0;
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
  line-height: var(--bm-line-height-relaxed);
}

.bm-safespots .bm-safespots__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--bm-space-3);
}

.bm-safespots .bm-safespots__item {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-3);
  padding: var(--bm-space-3);
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
}

@media (min-width: 640px) {
  .bm-safespots .bm-safespots__item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.bm-safespots .bm-safespots__info {
  display: grid;
  gap: var(--bm-space-1);
}

.bm-safespots .bm-safespots__name {
  margin: 0;
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
}

.bm-safespots .bm-safespots__address {
  margin: 0;
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
}

.bm-safespots .bm-safespots__note {
  margin: 0;
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
}

.bm-safespots .bm-safespots__action {
  flex-shrink: 0;
}

.bm-safespots .bm-safespots__directions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-2);
  min-height: 2.75rem;
  padding: var(--bm-space-2) var(--bm-space-3);
  border-radius: var(--bm-radius-md);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  text-decoration: none;
}

/* Post-ad submission seller picks field */
.bm-safespots-picks {
  display: grid;
  gap: var(--bm-space-2);
  margin-block-end: var(--bm-space-4);
}

.bm-safespots-picks .bm-safespots-picks__list {
  display: grid;
  gap: var(--bm-space-2);
}

/* Dark mode */
:root[data-bm-theme="dark"] .bm-safespots .bm-safespots__item {
  background-color: var(--bm-color-surface-muted);
  border-color: var(--bm-color-line-base);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-safespots .bm-safespots__item {
    background-color: var(--bm-color-surface-muted);
    border-color: var(--bm-color-line-base);
  }
}
/* --------------------------------------------------------------------------
   66. BM Password Reset Pages (/lost-password/, /reset-password/)
   Align reset and forgot password forms with live markup generated by
   mu-plugins/bm-reset.php (shortcodes [bm_lost_password], [bm_reset_password]).
   Card title visibility, input field styles, help text, submit button,
   notices, and expired link alert card. Tokens strictly from design/tokens.css.
   -------------------------------------------------------------------------- */

/* Card Title: Reset pages have no outer header badge, so the card title must display */
.bm-login-shell > .bm-slot-card--login .bm-slot-card__title {
  display: block;
  font-size: var(--bm-text-2xl);
  font-weight: var(--bm-font-weight-bold);
  line-height: var(--bm-line-height-tight);
  color: var(--bm-color-ink-dark);
  margin-block: 0 var(--bm-space-2);
  letter-spacing: -0.02em;
}

:root[data-bm-theme="dark"] .bm-login-shell > .bm-slot-card--login .bm-slot-card__title {
  color: var(--bm-color-ink-base);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-shell > .bm-slot-card--login .bm-slot-card__title {
    color: var(--bm-color-ink-base);
  }
}

/* Auth Reset Card: Constrain width and center in shell, defeat Automatic.css flex-gap on section */
.bm-login-shell > .bm-slot-card--login,
.bm-login-shell .bm-slot-card {
  display: block;
  gap: 0;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  box-sizing: border-box;
  border-radius: var(--bm-radius-xl);
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  box-shadow: var(--bm-shadow-sm);
  padding: var(--bm-space-6);
  transition: border-color var(--bm-transition-normal), box-shadow var(--bm-transition-normal);
}

@media (min-width: 640px) {
  .bm-login-shell > .bm-slot-card--login,
  .bm-login-shell .bm-slot-card {
    padding: var(--bm-space-8);
  }
}

/* Reset Intro Subtitle Paragraph */
.bm-login-shell > .bm-slot-card--login > p:not(.bm-login-switch) {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
  line-height: var(--bm-line-height-normal);
  margin-block: 0 var(--bm-space-5);
}

:root[data-bm-theme="dark"] .bm-login-shell > .bm-slot-card--login > p:not(.bm-login-switch) {
  color: var(--bm-color-muted-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-shell > .bm-slot-card--login > p:not(.bm-login-switch) {
    color: var(--bm-color-muted-light);
  }
}

/* Form Field Rhythm */
.bm-login-shell .bm-form__field {
  margin-block-end: var(--bm-space-4);
}

/* Field Labels */
.bm-login-shell .bm-form__label {
  display: block;
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  text-transform: none;
  letter-spacing: normal;
  color: var(--bm-color-ink-base);
  margin-block-end: var(--bm-space-2);
}

:root[data-bm-theme="dark"] .bm-login-shell .bm-form__label {
  color: var(--bm-color-ink-base);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-shell .bm-form__label {
    color: var(--bm-color-ink-base);
  }
}

/* Form Inputs */
.bm-login-shell .bm-form input[type="text"],
.bm-login-shell .bm-form input[type="email"],
.bm-login-shell .bm-form input[type="password"] {
  width: 100%;
  min-height: var(--bm-touch-target-min);
  height: var(--bm-touch-target-min);
  padding: 0 var(--bm-space-4);
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-md);
  color: var(--bm-color-ink-dark);
  font-size: var(--bm-text-base);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color var(--bm-transition-fast), box-shadow var(--bm-transition-fast), background-color var(--bm-transition-fast);
}

.bm-login-shell .bm-form input[type="text"]:focus-visible,
.bm-login-shell .bm-form input[type="email"]:focus-visible,
.bm-login-shell .bm-form input[type="password"]:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
  border-color: var(--bm-color-ring);
  box-shadow: var(--bm-shadow-focus);
}

.bm-login-shell .bm-form input[type="text"]:focus:not(:focus-visible),
.bm-login-shell .bm-form input[type="email"]:focus:not(:focus-visible),
.bm-login-shell .bm-form input[type="password"]:focus:not(:focus-visible) {
  border-color: var(--bm-color-brand-base);
  box-shadow: var(--bm-shadow-focus);
  outline: 0;
}

:root[data-bm-theme="dark"] .bm-login-shell .bm-form input[type="text"],
:root[data-bm-theme="dark"] .bm-login-shell .bm-form input[type="email"],
:root[data-bm-theme="dark"] .bm-login-shell .bm-form input[type="password"] {
  background-color: var(--bm-color-surface-base);
  border-color: var(--bm-color-line-dark);
  color: var(--bm-color-ink-dark);
}

:root[data-bm-theme="dark"] .bm-login-shell .bm-form input:focus-visible {
  border-color: var(--bm-color-ring);
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-shell .bm-form input[type="text"],
  :root:not([data-bm-theme="light"]) .bm-login-shell .bm-form input[type="email"],
  :root:not([data-bm-theme="light"]) .bm-login-shell .bm-form input[type="password"] {
    background-color: var(--bm-color-surface-base);
    border-color: var(--bm-color-line-dark);
    color: var(--bm-color-ink-dark);
  }
  :root:not([data-bm-theme="light"]) .bm-login-shell .bm-form input:focus-visible {
    border-color: var(--bm-color-ring);
    outline: 2px solid var(--bm-color-ring);
    outline-offset: 2px;
  }
}

/* Password Toggle Wrapper & Input Padding */
.bm-login-shell .bm-pw-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.bm-login-shell .bm-pw-wrap input[type="password"],
.bm-login-shell .bm-pw-wrap input[type="text"] {
  padding-inline-end: 5.25rem;
}

/* Help text under fields */
.bm-login-shell .bm-form__help {
  display: block;
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
  margin-block-start: var(--bm-space-1-5);
  line-height: var(--bm-line-height-normal);
}

:root[data-bm-theme="dark"] .bm-login-shell .bm-form__help {
  color: var(--bm-color-muted-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-shell .bm-form__help {
    color: var(--bm-color-muted-light);
  }
}

/* Error text under fields */
.bm-login-shell .bm-form__error {
  display: block;
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-medium);
  color: var(--bm-color-danger-base);
  margin-block-start: var(--bm-space-1);
  line-height: var(--bm-line-height-normal);
}

:root[data-bm-theme="dark"] .bm-login-shell .bm-form__error {
  color: #fca5a5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-shell .bm-form__error {
    color: #fca5a5;
  }
}

/* Submit Button Layout and Spacing */
.bm-login-shell .bm-form > div:not(.bm-form__field) {
  margin-block-start: var(--bm-space-5);
  margin-block-end: 0;
}

.bm-login-shell .bm-btn--primary {
  width: 100%;
  height: 3rem;
  min-height: var(--bm-touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--bm-space-6);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
  border: 1px solid var(--bm-color-brand-base);
  border-radius: var(--bm-radius-md);
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-semibold);
  letter-spacing: normal;
  cursor: pointer;
  box-shadow: var(--bm-shadow-sm);
  transition: all var(--bm-transition-fast);
}

.bm-login-shell .bm-btn--primary:hover {
  background-color: var(--bm-color-brand-dark);
  border-color: var(--bm-color-brand-dark);
  box-shadow: var(--bm-shadow-md);
}

.bm-login-shell .bm-btn--primary:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

/* Notices above card in auth shell */
.bm-login-shell > .bm-form__notice {
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  margin-block-end: var(--bm-space-4);
  padding: var(--bm-space-3) var(--bm-space-4);
  border-radius: var(--bm-radius-lg);
  font-size: var(--bm-text-sm);
  line-height: var(--bm-line-height-normal);
  box-sizing: border-box;
}

.bm-login-shell .bm-form__notice--ok {
  background-color: var(--bm-color-success-tint);
  border: 1px solid var(--bm-color-success-base);
  color: var(--bm-color-success-dark);
}

/* fixed on purpose: the success notice stays green in every accent (it means "done", not the brand) */
:root[data-bm-theme="dark"] .bm-login-shell .bm-form__notice--ok {
  background-color: rgba(22, 101, 52, 0.25);
  border-color: rgba(74, 222, 128, 0.4);
  color: #86efac;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-shell .bm-form__notice--ok {
    background-color: rgba(22, 101, 52, 0.25);
    border-color: rgba(74, 222, 128, 0.4);
    color: #86efac;
  }
}

.bm-login-shell .bm-form__notice--err {
  background-color: var(--bm-color-danger-tint);
  border: 1px solid var(--bm-color-danger-base);
  color: var(--bm-color-danger-dark);
}

:root[data-bm-theme="dark"] .bm-login-shell .bm-form__notice--err {
  background-color: rgba(185, 28, 28, 0.2);
  border-color: rgba(248, 113, 113, 0.4);
  color: #fca5a5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-shell .bm-form__notice--err {
    background-color: rgba(185, 28, 28, 0.2);
    border-color: rgba(248, 113, 113, 0.4);
    color: #fca5a5;
  }
}

/* Expired/Invalid link state: styled as a card alert */
.bm-login-shell:not(:has(.bm-slot-card)) .bm-form__notice--err {
  display: block;
  gap: 0;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  padding: var(--bm-space-6);
  border-radius: var(--bm-radius-xl);
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-danger-base);
  box-shadow: var(--bm-shadow-sm);
  text-align: center;
  font-size: var(--bm-text-base);
  line-height: var(--bm-line-height-relaxed);
  color: var(--bm-color-ink-dark);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .bm-login-shell:not(:has(.bm-slot-card)) .bm-form__notice--err {
    padding: var(--bm-space-8);
  }
}

.bm-login-shell:not(:has(.bm-slot-card)) .bm-form__notice--err::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--bm-color-danger-base) 50%, transparent 100%);
  pointer-events: none;
}

:root[data-bm-theme="dark"] .bm-login-shell:not(:has(.bm-slot-card)) .bm-form__notice--err {
  background-color: var(--bm-color-surface-light);
  border-color: var(--bm-color-danger-base);
  color: var(--bm-color-ink-dark);
  box-shadow: var(--bm-shadow-sm);
}

:root[data-bm-theme="dark"] .bm-login-shell:not(:has(.bm-slot-card)) .bm-form__notice--err::before {
  background: linear-gradient(90deg, transparent 0%, var(--bm-color-danger-base) 50%, transparent 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-shell:not(:has(.bm-slot-card)) .bm-form__notice--err {
    background-color: var(--bm-color-surface-light);
    border-color: var(--bm-color-danger-base);
    color: var(--bm-color-ink-dark);
    box-shadow: var(--bm-shadow-sm);
  }
  :root:not([data-bm-theme="light"]) .bm-login-shell:not(:has(.bm-slot-card)) .bm-form__notice--err::before {
    background: linear-gradient(90deg, transparent 0%, var(--bm-color-danger-base) 50%, transparent 100%);
  }
}

.bm-login-shell:not(:has(.bm-slot-card)) .bm-login-switch {
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  margin-block-start: var(--bm-space-4);
  padding-block-start: 0;
  border-block-start: none;
}

.bm-login-shell:not(:has(.bm-slot-card)) .bm-login-switch a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--bm-touch-target-min);
  padding: var(--bm-space-3) var(--bm-space-6);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
  border: 1px solid var(--bm-color-brand-base);
  font-weight: var(--bm-font-weight-semibold);
  font-size: var(--bm-text-base);
  text-decoration: none;
  box-sizing: border-box;
  box-shadow: var(--bm-shadow-sm);
  transition: background-color var(--bm-transition-fast), transform var(--bm-transition-fast), box-shadow var(--bm-transition-fast);
}

.bm-login-shell:not(:has(.bm-slot-card)) .bm-login-switch a:hover {
  background-color: var(--bm-color-brand-dark);
  border-color: var(--bm-color-brand-dark);
  color: var(--bm-color-btn-primary-text);
  box-shadow: var(--bm-shadow-md);
  text-decoration: none;
}

.bm-login-shell:not(:has(.bm-slot-card)) .bm-login-switch a:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

:root[data-bm-theme="dark"] .bm-login-shell:not(:has(.bm-slot-card)) .bm-login-switch a {
  background-color: var(--bm-color-brand-base);
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
  box-shadow: var(--bm-shadow-sm);
}

:root[data-bm-theme="dark"] .bm-login-shell:not(:has(.bm-slot-card)) .bm-login-switch a:hover {
  background-color: var(--bm-color-brand-dark);
  border-color: var(--bm-color-brand-dark);
  box-shadow: var(--bm-shadow-md);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-login-shell:not(:has(.bm-slot-card)) .bm-login-switch a {
    background-color: var(--bm-color-brand-base);
    border-color: var(--bm-color-brand-base);
    color: var(--bm-color-btn-primary-text);
    box-shadow: var(--bm-shadow-sm);
  }
  :root:not([data-bm-theme="light"]) .bm-login-shell:not(:has(.bm-slot-card)) .bm-login-switch a:hover {
    background-color: var(--bm-color-brand-dark);
    border-color: var(--bm-color-brand-dark);
    box-shadow: var(--bm-shadow-md);
  }
}
/* --------------------------------------------------------------------------
   66. Bump and Urgency Badges (bm-bump)
   -------------------------------------------------------------------------- */

.bm-badge--bumped {
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-card-badge-border);
  font-weight: var(--bm-font-weight-medium);
}

.bm-badge--urgent {
  background-color: rgba(220, 38, 38, 0.1);
  color: #991b1b;
  border: 1px solid rgba(220, 38, 38, 0.3);
  font-weight: var(--bm-font-weight-medium);
}

/* fixed on purpose (light, dark and auto below): green means "price dropped" (success), not the brand; it stays green in every accent (docs/accent.md) */
.bm-badge--price-drop {
  background-color: rgba(22, 163, 74, 0.1);
  color: #14532d;
  border: 1px solid rgba(22, 163, 74, 0.3);
  font-weight: var(--bm-font-weight-medium);
}

:root[data-bm-theme="dark"] .bm-badge--urgent {
  background-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-badge--urgent {
    background-color: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
  }
}

:root[data-bm-theme="dark"] .bm-badge--price-drop {
  background-color: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-badge--price-drop {
    background-color: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.4);
  }
}

.bm-bump__section {
  margin-top: var(--bm-space-4);
  padding-top: var(--bm-space-4);
  border-top: 1px solid var(--bm-color-line-base);
}

.bm-bump__title {
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-semibold);
  margin-bottom: var(--bm-space-2);
}

.bm-bump__item {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-2);
  padding: var(--bm-space-3);
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  margin-bottom: var(--bm-space-3);
}

.bm-bump__item-title {
  font-weight: var(--bm-font-weight-medium);
}

.bm-bump__status {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-ink-light);
}

.bm-bump__form {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-2);
  margin-top: var(--bm-space-2);
}

.bm-bump__pay {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-ink-base);
  background-color: var(--bm-color-surface-muted);
  padding: var(--bm-space-2) var(--bm-space-3);
  border-radius: var(--bm-radius-md);
  margin-bottom: var(--bm-space-2);
}
/* 66. Dashboard top bar: the same Appearance control as the public header (theme choice + accent colours in one popover). Every selector is scoped to .bm-dash-app__tools. */
.bm-dash-app__tools .bm-appearance {
  position: relative;
  display: inline-flex;
  flex: none;
}

.bm-dash-app__tools .bm-appearance__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  cursor: pointer;
  transition: border-color var(--bm-transition-fast), color var(--bm-transition-fast);
}

.bm-dash-app__tools .bm-appearance__btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.bm-dash-app__tools .bm-appearance__btn:hover,
.bm-dash-app__tools .bm-appearance__btn[aria-expanded="true"] {
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-brand-text);
}

.bm-dash-app__tools .bm-appearance__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--bm-space-2));
  inset-inline-end: 0;
  z-index: var(--bm-z-dropdown);
  box-sizing: border-box;
  width: max-content;
  min-width: 16rem;
  max-width: calc(100vw - 2 * var(--bm-space-4));
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--bm-space-3);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
  box-shadow: var(--bm-shadow-lg);
}

.bm-dash-app__tools .bm-appearance__panel[hidden] {
  display: none;
}

.bm-dash-app__tools .bm-appearance__label {
  margin: 0 0 var(--bm-space-1);
  padding: var(--bm-space-1) var(--bm-space-2);
  color: var(--bm-color-ink-light);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-dash-app__tools .bm-appearance__panel .bm-theme-segmented {
  margin-block: 0;
  background-color: var(--bm-color-surface-muted);
}

.bm-dash-app__tools .bm-appearance__panel .bm-theme-segmented__btn {
  min-height: 2.75rem;
  padding-block: 0;
  color: var(--bm-color-ink-base);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
}

.bm-dash-app__tools .bm-appearance__panel .bm-theme-segmented__btn svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.bm-dash-app__tools .bm-appearance__panel .bm-theme-segmented__btn:hover {
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
}

.bm-dash-app__tools .bm-appearance__panel .bm-theme-segmented__btn[aria-pressed="true"] {
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-bold);
  box-shadow: inset 0 0 0 2px var(--bm-color-brand-text);
}

/* the colour group: always open inside the panel, two columns so the whole panel stays short */
.bm-dash-app__tools .bm-appearance__panel .bm-accent.bm-accent--inline {
  margin-block-start: var(--bm-space-3);
  padding-block-start: var(--bm-space-2);
  border-block-start: 1px solid var(--bm-color-line-base);
}

.bm-dash-app__tools .bm-appearance__panel .bm-accent.bm-accent--inline .bm-accent__group {
  grid-template-columns: repeat(2, minmax(max-content, 1fr));
  padding-block: 0;
}

/* Between 768 and 1023 px the signed-in account button is the avatar only, so the row does not wrap */
/* --------------------------------------------------------------------------
   67. BM Premium Cards & Placeholder Polish
   - Premium card elevation, hover lift, consistent 16/10 aspect ratio.
   - Restyled .bm-card__media--placeholder with accent tint, token pattern,
     centered category emblem.
   - Dashboard 40px thumbnail matching treatment.
   - Business page hero banner when listing has no photo.
   - Restrained Featured card treatment: thin accent border, inner glow,
     and corner star ribbon.
   - Distinct quiet container for sponsored blocks (.bm-promote).
   - Space for "Bumped" and "Urgent" badges.
   - Full-card click target with protected secondary actions.
   - Respects prefers-reduced-motion. Strict tokens from design/tokens.css.
   -------------------------------------------------------------------------- */

/* 1. Base Card Structure & Stretched Click Target */
.bm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  overflow: hidden;
  box-shadow: var(--bm-shadow-card);
  transition: transform var(--bm-transition-normal), box-shadow var(--bm-transition-normal), border-color var(--bm-transition-normal);
}

.bm-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow-card-hover);
  border-color: var(--bm-color-line-dark);
}

:root[data-bm-theme="dark"] .bm-card {
  background-color: color-mix(in srgb, var(--bm-dk-field) 85%, transparent);
  border-color: rgba(255, 255, 255, 0.08);
}

:root[data-bm-theme="dark"] .bm-card:hover {
  border-color: color-mix(in srgb, var(--bm-color-brand-text) 35%, transparent);
  box-shadow: 0 16px 32px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--bm-color-brand-text) 20%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-card {
    background-color: color-mix(in srgb, var(--bm-dk-field) 85%, transparent);
    border-color: rgba(255, 255, 255, 0.08);
  }
  :root:not([data-bm-theme="light"]) .bm-card:hover {
    border-color: color-mix(in srgb, var(--bm-color-brand-text) 35%, transparent);
    box-shadow: 0 16px 32px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--bm-color-brand-text) 20%, transparent);
  }
}

/* Stretched Link: whole card is clickable target */
.bm-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Secondary interactive controls sit above stretched link */
.bm-card__save-btn,
.bm-card__action-btn,
.bm-saved-form,
.bm-card__overlay-top a,
.bm-card__overlay-top button,
.bm-card__overlay-bottom a,
.bm-card__overlay-bottom button {
  position: relative;
  z-index: 2;
}

/* Accessible Focus Rings */
.bm-card:focus-within {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
}

:root[data-bm-theme="dark"] .bm-card:focus-within {
  outline-color: var(--bm-color-brand-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-card:focus-within {
    outline-color: var(--bm-color-brand-text);
  }
}

/* 2. Media Area & Scrim Overlay */
.bm-card__media-wrapper {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--bm-color-surface-dark);
}

.bm-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, 0.25) 70%, rgba(15, 23, 42, 0.65) 100%);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity var(--bm-transition-fast);
}

.bm-card:hover .bm-card__scrim {
  opacity: 0.9;
}

/* 3. Restyled No-Photo Placeholder (.bm-card__media--placeholder) */
.bm-card__media--placeholder {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bm-color-surface-base);
  background-image:
    radial-gradient(ellipse at 60% 40%, var(--bm-color-brand-tint) 0%, transparent 65%),
    radial-gradient(ellipse at 20% 80%, var(--bm-color-accent-tint) 0%, transparent 55%),
    var(--bm-pattern-dots);
  background-size: 100% 100%, 100% 100%, var(--bm-pattern-size);
  color: var(--bm-color-brand-text);
  overflow: hidden;
  transition: background-color var(--bm-transition-normal);
}

/* No-photo cards: no dark scrim over the light placeholder (it turned it muddy grey), and no brand watermark (the brand name is a setting). */
.bm-card__media--placeholder + .bm-card__scrim {
  display: none;
}

:root[data-bm-theme="dark"] .bm-card__media--placeholder::before {
  background-color: color-mix(in srgb, var(--bm-dk-deep) 60%, transparent);
  color: var(--bm-color-brand-text);
  border-color: color-mix(in srgb, var(--bm-color-brand-text) 25%, transparent);
  opacity: 0.55;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-card__media--placeholder::before {
    background-color: color-mix(in srgb, var(--bm-dk-deep) 60%, transparent);
    color: var(--bm-color-brand-text);
    border-color: color-mix(in srgb, var(--bm-color-brand-text) 25%, transparent);
    opacity: 0.55;
  }
}

/* Category Emblem in Center of Placeholder */
.bm-card__media--placeholder svg {
  width: 3.25rem;
  height: 3.25rem;
  padding: var(--bm-space-2-5);
  box-sizing: border-box;
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  color: var(--bm-color-brand-text);
  opacity: 0.95;
  transition: transform var(--bm-transition-normal), box-shadow var(--bm-transition-normal), border-color var(--bm-transition-normal);
  z-index: 1;
}

.bm-card:hover .bm-card__media--placeholder svg {
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
  border-color: var(--bm-color-brand-light);
}

:root[data-bm-theme="dark"] .bm-card__media--placeholder {
  background-color: color-mix(in srgb, var(--bm-dk-deep) 70%, transparent);
  background-image:
    radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--bm-color-brand-text) 12%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse at 20% 80%, rgba(245, 158, 11, 0.08) 0%, transparent 55%),
    var(--bm-pattern-dots);
  color: var(--bm-color-brand-text);
}

:root[data-bm-theme="dark"] .bm-card__media--placeholder svg {
  background-color: rgba(22, 33, 26, 0.85);
  border-color: color-mix(in srgb, var(--bm-color-brand-text) 25%, transparent);
  color: var(--bm-color-brand-text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

:root[data-bm-theme="dark"] .bm-card:hover .bm-card__media--placeholder svg {
  border-color: color-mix(in srgb, var(--bm-color-brand-text) 50%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 12px color-mix(in srgb, var(--bm-color-brand-text) 20%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-card__media--placeholder {
    background-color: color-mix(in srgb, var(--bm-dk-deep) 70%, transparent);
    background-image:
      radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--bm-color-brand-text) 12%, transparent) 0%, transparent 65%),
      radial-gradient(ellipse at 20% 80%, rgba(245, 158, 11, 0.08) 0%, transparent 55%),
      var(--bm-pattern-dots);
    color: var(--bm-color-brand-text);
  }
  :root:not([data-bm-theme="light"]) .bm-card__media--placeholder svg {
    background-color: rgba(22, 33, 26, 0.85);
    border-color: color-mix(in srgb, var(--bm-color-brand-text) 25%, transparent);
    color: var(--bm-color-brand-text);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  }
  :root:not([data-bm-theme="light"]) .bm-card:hover .bm-card__media--placeholder svg {
    border-color: color-mix(in srgb, var(--bm-color-brand-text) 50%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 12px color-mix(in srgb, var(--bm-color-brand-text) 20%, transparent);
  }
}

/* 4. Dashboard Rows: 40px Thumbnail Treatment */
.bm-dash-app__thumb {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-base);
  background-image:
    radial-gradient(circle at 50% 50%, var(--bm-color-brand-tint) 0%, transparent 70%),
    var(--bm-pattern-dots);
  background-size: 100% 100%, 0.5rem 0.5rem;
  border: 1px solid var(--bm-color-line-base);
  color: var(--bm-color-brand-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.bm-dash-app__thumb svg {
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.9;
}

:root[data-bm-theme="dark"] .bm-dash-app__thumb {
  background-color: color-mix(in srgb, var(--bm-dk-field) 70%, transparent);
  border-color: color-mix(in srgb, var(--bm-color-brand-text) 20%, transparent);
  color: var(--bm-color-brand-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-dash-app__thumb {
    background-color: color-mix(in srgb, var(--bm-dk-field) 70%, transparent);
    border-color: color-mix(in srgb, var(--bm-color-brand-text) 20%, transparent);
    color: var(--bm-color-brand-text);
  }
}

/* 5. Business Page Hero Banner without Photo */
.bm-business-hero:not(:has([class*="gallery"], [class*="media-single"])) {
  background-color: var(--bm-color-surface-base);
  background-image:
    radial-gradient(ellipse at 80% 20%, var(--bm-color-brand-tint) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, var(--bm-color-accent-tint) 0%, transparent 50%),
    var(--bm-pattern-dots);
  background-size: 100% 100%, 100% 100%, var(--bm-pattern-size);
  border-block-end: 1px solid var(--bm-color-line-base);
  position: relative;
  overflow: hidden;
  padding-block: var(--bm-space-10) var(--bm-space-12);
}

.bm-business-hero:not(:has([class*="gallery"], [class*="media-single"]))::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bm-color-brand-base) 0%, var(--bm-color-accent-base) 50%, var(--bm-color-brand-light) 100%);
  pointer-events: none;
}

:root[data-bm-theme="dark"] .bm-business-hero:not(:has([class*="gallery"], [class*="media-single"])) {
  background-color: rgba(10, 16, 13, 0.95);
  background-image:
    radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--bm-color-brand-text) 8%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(245, 158, 11, 0.06) 0%, transparent 50%),
    var(--bm-pattern-dots);
  border-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-business-hero:not(:has([class*="gallery"], [class*="media-single"])) {
    background-color: rgba(10, 16, 13, 0.95);
    background-image:
      radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--bm-color-brand-text) 8%, transparent) 0%, transparent 60%),
      radial-gradient(ellipse at 20% 80%, rgba(245, 158, 11, 0.06) 0%, transparent 50%),
      var(--bm-pattern-dots);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

/* 6. Featured Listing Restrained Card Polish & Ribbon */
.bm-card:has(.bm-badge--featured) {
  border-color: rgba(217, 119, 6, 0.35);
  box-shadow: var(--bm-shadow-sm), 0 0 0 1px rgba(217, 119, 6, 0.15), 0 4px 16px rgba(217, 119, 6, 0.06);
}

.bm-card:has(.bm-badge--featured):hover {
  border-color: var(--bm-color-accent-base);
  box-shadow: var(--bm-shadow-card-hover), 0 0 0 1px rgba(217, 119, 6, 0.3), 0 8px 24px rgba(217, 119, 6, 0.12);
}

.bm-card:has(.bm-badge--featured)::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 2.25rem 2.25rem 0 0;
  border-color: var(--bm-color-accent-base) transparent transparent transparent;
  z-index: 3;
  pointer-events: none;
}

.bm-card:has(.bm-badge--featured)::after {
  content: '★';
  position: absolute;
  top: 0.2rem;
  inset-inline-start: 0.35rem;
  font-size: 0.65rem;
  color: #ffffff;
  line-height: 1;
  z-index: 4;
  pointer-events: none;
}

:root[data-bm-theme="dark"] .bm-card:has(.bm-badge--featured) {
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(245, 158, 11, 0.2), 0 0 15px rgba(245, 158, 11, 0.08);
}

:root[data-bm-theme="dark"] .bm-card:has(.bm-badge--featured):hover {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 158, 11, 0.4), 0 0 20px rgba(245, 158, 11, 0.15);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-card:has(.bm-badge--featured) {
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(245, 158, 11, 0.2), 0 0 15px rgba(245, 158, 11, 0.08);
  }
  :root:not([data-bm-theme="light"]) .bm-card:has(.bm-badge--featured):hover {
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 158, 11, 0.4), 0 0 20px rgba(245, 158, 11, 0.15);
  }
}

/* 7. Sponsored Placement Quiet Container (.bm-promote) */
.bm-promote {
  position: relative;
  width: min(100% - var(--bm-space-8), var(--bm-container-max));
  margin-inline: auto;
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-2xl);
  padding: var(--bm-space-6) var(--bm-space-4);
  margin-block: var(--bm-space-6);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .bm-promote {
    padding: var(--bm-space-8) var(--bm-space-6);
  }
}

/* One sponsored listing: a centred card of normal width instead of one third of an empty frame. */
.bm-promote .bm-promote__grid:has(> :only-child) {
  grid-template-columns: minmax(0, 22rem);
  justify-content: center;
}

.bm-promote__label {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
  margin-block: 0 var(--bm-space-4);
}

.bm-promote__badge {
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  letter-spacing: var(--bm-tracking-wide);
  text-transform: uppercase;
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-muted-base);
  border: 1px solid var(--bm-color-line-dark);
  padding: 0.15rem var(--bm-space-2-5);
  border-radius: var(--bm-radius-full);
}

.bm-promote__sr {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-light);
}

:root[data-bm-theme="dark"] .bm-promote {
  background-color: color-mix(in srgb, var(--bm-dk-deep) 45%, transparent);
  border-color: rgba(255, 255, 255, 0.08);
}

:root[data-bm-theme="dark"] .bm-promote__badge {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--bm-color-muted-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-promote {
    background-color: color-mix(in srgb, var(--bm-dk-deep) 45%, transparent);
    border-color: rgba(255, 255, 255, 0.08);
  }
  :root:not([data-bm-theme="light"]) .bm-promote__badge {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--bm-color-muted-light);
  }
}

/* 8. Badge Room: Bumped, Urgent, Deal, and Overlay Badges */
.bm-card__overlay-bottom {
  position: absolute;
  bottom: var(--bm-space-3);
  inset-inline-start: var(--bm-space-3);
  inset-inline-end: var(--bm-space-3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  z-index: 2;
  pointer-events: none;
}

.bm-card__overlay-bottom .bm-badge {
  pointer-events: auto;
  box-shadow: var(--bm-shadow-sm);
}

.bm-card__overlay-top {
  position: absolute;
  top: var(--bm-space-3);
  inset-inline-start: var(--bm-space-3);
  inset-inline-end: var(--bm-space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-2);
  z-index: 2;
  pointer-events: none;
}

.bm-card__category-badge {
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-card-badge-border);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  padding: 0.2rem var(--bm-space-2-5);
  border-radius: var(--bm-radius-full);
  box-shadow: var(--bm-shadow-sm);
  /* One line: a long name such as "Government & Public Services" wrapped onto two lines and ran into the centred icon. */
  max-width: calc(100% - 3.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bm-badge--bumped {
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-brand-text);
  border: 1px solid var(--bm-color-brand-base);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-bold);
  padding: 0.15rem var(--bm-space-2);
  border-radius: var(--bm-radius-full);
}

.bm-badge--urgent {
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-danger-base);
  border: 1px solid var(--bm-color-danger-base);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-bold);
  padding: 0.15rem var(--bm-space-2);
  border-radius: var(--bm-radius-full);
}

@media (prefers-reduced-motion: no-preference) {
  .bm-badge--urgent {
    animation: bm-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}

@keyframes bm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.bm-card__overlay-bottom .bm-badge--deal {
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-brand-text);
  border: 1px solid var(--bm-color-card-badge-border);
}

/* 9. Refined Ad Price & Typography Hierarchy */
.bm-card__title {
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  margin-block-start: 0;
  margin-block-end: var(--bm-space-1-5);
  line-height: var(--bm-line-height-snug);
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1em * var(--bm-line-height-snug));
}

:root[data-bm-theme="dark"] .bm-card__title {
  color: var(--bm-color-ink-base);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-card__title {
    color: var(--bm-color-ink-base);
  }
}

.bm-card__tagline {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
  line-height: var(--bm-line-height-normal);
  margin-block: 0 var(--bm-space-2-5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:root[data-bm-theme="dark"] .bm-card__tagline {
  color: var(--bm-color-muted-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-card__tagline {
    color: var(--bm-color-muted-light);
  }
}

.bm-card__price {
  display: inline-block;
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-accent-dark);
  letter-spacing: -0.01em;
  margin-block-end: var(--bm-space-1);
}

:root[data-bm-theme="dark"] .bm-card__price {
  color: var(--bm-color-accent-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-card__price {
    color: var(--bm-color-accent-light);
  }
}

.bm-card__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  margin-block-start: auto;
  margin-block-end: var(--bm-space-2);
  min-height: 1.5rem;
}

.bm-card__location {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1);
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
}

:root[data-bm-theme="dark"] .bm-card__location {
  color: var(--bm-color-muted-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-card__location {
    color: var(--bm-color-muted-light);
  }
}

/* 10. Prefers-Reduced-Motion Governance */
@media (prefers-reduced-motion: reduce) {
  .bm-card,
  .bm-card:hover,
  .bm-card__media,
  .bm-card__media--placeholder svg,
  .bm-card__save-btn,
  .bm-badge--urgent {
    transform: none;
    transition: none;
    animation: none;
  }
}
/* ==========================================================================
   68. Single Business Page Polish & Lightbox Experience
   Refined header facts, photo gallery with lightbox presentation,
   clean opening hours card, and prominent mobile sticky action bar.
   Tokens only, WCAG AA/AAA compliant, zero important.
   ========================================================================== */

/* 1. Hero Container & Ambient Hierarchy */
.bm-business-hero {
  background-color: var(--bm-color-surface-base);
  border-block-end: 1px solid var(--bm-color-line-base);
  padding-block: var(--bm-space-8) var(--bm-space-10);
  position: relative;
}

/* 2. Tidy Facts Row & Refined Status Pills */
.bm-business-header {
  margin-block-end: var(--bm-space-6);
}

.bm-business-header__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  margin-block-end: var(--bm-space-3);
}

.bm-business-header__badges .bm-badge {
  white-space: nowrap;
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-medium);
  padding-inline: var(--bm-space-2-5);
  padding-block: var(--bm-space-1);
  border-radius: var(--bm-radius-full);
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1-5);
  box-shadow: var(--bm-shadow-sm);
  line-height: var(--bm-line-height-tight);
}

.bm-business-header__badges .bm-badge--area {
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-card-badge-border);
}

.bm-business-header__badges .bm-badge--verified {
  background-color: var(--bm-color-badge-open-bg);
  color: var(--bm-color-badge-open-text);
  border: 1px solid var(--bm-color-badge-open-border);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-business-header__badges .bm-badge--price {
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-brand-text);
  border: 1px solid var(--bm-color-card-badge-border);
  font-weight: var(--bm-font-weight-bold);
  letter-spacing: 0.05em;
}

.bm-business-header__badges .bm-badge--open {
  background-color: var(--bm-color-badge-open-bg);
  color: var(--bm-color-badge-open-text);
  border: 1px solid var(--bm-color-badge-open-border);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-business-header__badges .bm-badge--closed {
  background-color: var(--bm-color-badge-closed-bg);
  color: var(--bm-color-badge-closed-text);
  border: 1px solid var(--bm-color-badge-closed-border);
  font-weight: var(--bm-font-weight-medium);
}

/* Typography Hierarchy */
.bm-business-header__title {
  font-size: clamp(2rem, 3.5vw + 0.75rem, var(--bm-text-4xl));
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  letter-spacing: var(--bm-tracking-tight);
  margin-block: var(--bm-space-1) var(--bm-space-2);
  line-height: var(--bm-line-height-tight);
}

.bm-business-header__tagline {
  font-size: var(--bm-text-base);
  color: var(--bm-color-muted-base);
  line-height: var(--bm-line-height-relaxed);
  margin: 0;
  max-width: 75ch;
}

/* 3. Photo Gallery with Lightbox Look & Framing */
.bm-business-gallery {
  position: relative;
  border-radius: var(--bm-radius-xl);
  overflow: hidden;
  box-shadow: var(--bm-shadow-card);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-muted);
}

.bm-gallery__item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--bm-color-surface-muted);
}

.bm-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  opacity: 0;
  transition: opacity var(--bm-transition-fast);
  pointer-events: none;
}

.bm-gallery__item:hover::after {
  opacity: 1;
}

.bm-gallery__img,
.bm-business-gallery__main,
.bm-business-gallery__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform var(--bm-transition-normal), filter var(--bm-transition-fast);
}

@media (prefers-reduced-motion: no-preference) {
  .bm-gallery__item:hover .bm-gallery__img,
  .bm-gallery__item:hover .bm-business-gallery__main,
  .bm-gallery__item:hover .bm-business-gallery__thumb {
    transform: scale(1.025);
  }
}

/* Sleek +N Photos Overlay Badge on 5th Thumbnail */
.bm-gallery__more-overlay {
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--bm-dk-deep) 45%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--bm-color-text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-bold);
  letter-spacing: 0.02em;
  transition: background-color var(--bm-transition-fast);
}

.bm-gallery__item:hover .bm-gallery__more-overlay {
  background-color: color-mix(in srgb, var(--bm-dk-deep) 60%, transparent);
}

/* Logo Hero Frame */
.bm-business-hero__logo-frame {
  width: 9rem;
  height: 9rem;
  border-radius: var(--bm-radius-2xl);
  overflow: hidden;
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  box-shadow: var(--bm-shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bm-space-3);
  transition: transform var(--bm-transition-normal), box-shadow var(--bm-transition-normal);
}

/* 4. Slot Cards & Content Area Polish */
.bm-business-main {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-6);
}

.bm-slot-card {
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  padding: var(--bm-space-6);
  box-shadow: var(--bm-shadow-card);
  transition: box-shadow var(--bm-transition-fast);
}

.bm-slot-card__title {
  font-size: var(--bm-text-xl);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  letter-spacing: var(--bm-tracking-tight);
}

/* 5. Clean Opening Hours Card */
.bm-slot-card--hours .bm-slot-card__header {
  border-block-end: 1px solid var(--bm-color-line-light);
  padding-block-end: var(--bm-space-4);
  margin-block-end: var(--bm-space-4);
}

.bm-hours-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--bm-text-sm);
}

.bm-hours-table td {
  padding-block: var(--bm-space-3);
  padding-inline: var(--bm-space-3);
  border-block-end: 1px solid var(--bm-color-hours-border);
  color: var(--bm-color-ink-base);
  vertical-align: middle;
}

.bm-hours-table td:last-child {
  font-variant-numeric: tabular-nums;
}

.bm-hours-table tr.is-today {
  background-color: var(--bm-color-hours-row-today-bg);
}

.bm-hours-table tr.is-today td {
  border-color: var(--bm-color-hours-row-today-border);
  color: var(--bm-color-hours-row-today-text);
  font-weight: var(--bm-font-weight-bold);
}

.bm-hours-table tr.is-today td:first-child {
  border-start-start-radius: var(--bm-radius-md);
  border-end-start-radius: var(--bm-radius-md);
}

.bm-hours-table tr.is-today td:last-child {
  border-start-end-radius: var(--bm-radius-md);
  border-end-end-radius: var(--bm-radius-md);
}

/* 6. Desktop Direct Connect & Action Buttons */
.bm-contact-card {
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  padding: var(--bm-space-6);
  box-shadow: var(--bm-shadow-card);
}

.bm-contact-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-3);
  margin-block-end: var(--bm-space-5);
}

/* Book Appointment Primary */
.bm-contact-card__actions .bm-btn--book.bm-btn--primary {
  min-height: 48px;
  border-radius: var(--bm-radius-lg);
  font-weight: var(--bm-font-weight-bold);
  box-shadow: var(--bm-shadow-sm);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-text-on-dark);
}

/* WhatsApp Secondary Button (Ink label per test assertion!) */
.bm-contact-card__actions .bm-btn--wa {
  min-height: 48px;
  border-radius: var(--bm-radius-lg);
  font-weight: var(--bm-font-weight-semibold);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  transition: border-color var(--bm-transition-fast), background-color var(--bm-transition-fast);
}

.bm-contact-card__actions .bm-btn--wa .bm-btn__icon--whatsapp {
  color: var(--bm-color-ink-base); /* same colour as the label: the green glyph measured 2.96:1 light and 2.07:1 dark on this button */
}

.bm-contact-card__actions .bm-btn--wa:hover {
  background-color: var(--bm-color-brand-tint);
  border-color: var(--bm-color-brand-base);
}

/* Call Button */
.bm-contact-card__actions a[href^="tel:"] {
  min-height: 48px;
  border-radius: var(--bm-radius-lg);
  font-weight: var(--bm-font-weight-semibold);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  transition: border-color var(--bm-transition-fast), background-color var(--bm-transition-fast);
}

.bm-contact-card__actions a[href^="tel:"]:hover {
  background-color: var(--bm-color-surface-muted);
  border-color: var(--bm-color-ink-light);
}

/* Save Button */
.bm-saved .bm-btn {
  min-height: 44px;
  border-radius: var(--bm-radius-lg);
  font-weight: var(--bm-font-weight-semibold);
}

/* Contact List & Directions Link */
.bm-contact-list__item--find a[data-bm-track="directions"] {
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-brand-text);
}

/* 7. Mobile Sticky Action Bar */
@media (max-width: 767px) {
  .bm-mobile-sticky-bar {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: var(--bm-z-sticky-bar);
    padding-inline: var(--bm-space-4);
    padding-block: var(--bm-space-3) calc(var(--bm-space-3) + env(safe-area-inset-bottom, 0px));
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-block-start: 1px solid var(--bm-color-line-base);
    box-shadow: var(--bm-shadow-sticky-bar);
    display: flex;
    align-items: center;
    gap: var(--bm-space-2);
  }

  :root[data-bm-theme="dark"] .bm-mobile-sticky-bar {
    background-color: color-mix(in srgb, var(--bm-dk-base) 95%, transparent);
    border-block-start-color: var(--bm-color-line-base);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-bm-theme="light"]) .bm-mobile-sticky-bar {
      background-color: color-mix(in srgb, var(--bm-dk-base) 95%, transparent);
      border-block-start-color: var(--bm-color-line-base);
    }
  }

  .bm-mobile-sticky-bar .bm-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding-inline: var(--bm-space-2);
    font-size: var(--bm-text-xs);
    font-weight: var(--bm-font-weight-semibold);
    border-radius: var(--bm-radius-lg);
    gap: var(--bm-space-1-5);
    justify-content: center;
    box-shadow: var(--bm-shadow-sm);
  }

  .bm-mobile-sticky-bar .bm-btn--wa {
    background-color: var(--bm-color-brand-base);
    color: var(--bm-color-text-on-dark);
    border: none;
  }

  .bm-mobile-sticky-bar .bm-btn--wa .bm-btn__icon--whatsapp {
    color: inherit; /* the glyph takes the label colour: green on the green button measured 2.3:1 */
  }

  .bm-mobile-sticky-bar .bm-btn--book {
    background-color: var(--bm-color-brand-dark);
    color: var(--bm-color-text-on-dark);
  }

  .bm-mobile-sticky-bar .bm-btn span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Safe padding under main layout so fixed sticky bar does not obstruct footer content */
  body:has(.bm-mobile-sticky-bar) {
    padding-block-end: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
}
/* ==========================================================================
   69. Ad Detail Page Polish
   Big photo gallery showcase, clear price & negotiable pill,
   refined area/condition badges, seller card with safe meetup hints,
   and mobile sticky contact bar.
   Tokens only, WCAG AA/AAA compliant, zero important declarations.
   ========================================================================== */

/* 1. Hero Container & Branded No-Photo State */
.bm-ad-hero {
  background-color: var(--bm-color-surface-base);
  border-block-end: 1px solid var(--bm-color-line-base);
  padding-block: var(--bm-space-8) var(--bm-space-10);
  position: relative;
}

/* Branded No-Photo State for Ads without Images */
.bm-ad-hero:not(:has(.bm-ad-gallery)) {
  background-color: var(--bm-color-surface-base);
  background-image:
    radial-gradient(ellipse at 75% 25%, var(--bm-color-brand-tint) 0%, transparent 60%),
    radial-gradient(ellipse at 25% 75%, var(--bm-color-accent-tint) 0%, transparent 50%),
    var(--bm-pattern-dots);
  background-size: 100% 100%, 100% 100%, var(--bm-pattern-size);
}

.bm-ad-hero:not(:has(.bm-ad-gallery))::before {
  content: "BM";
  position: absolute;
  bottom: var(--bm-space-4);
  inset-inline-end: var(--bm-space-6);
  font-family: inherit;
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-extrabold);
  letter-spacing: 0.12em;
  color: var(--bm-color-brand-text);
  opacity: 0.35;
  padding: 0.125rem 0.375rem;
  border-radius: var(--bm-radius-sm);
  border: 1px solid var(--bm-color-line-dark);
  background-color: var(--bm-color-surface-light);
  pointer-events: none;
  line-height: 1.2;
}

:root[data-bm-theme="dark"] .bm-ad-hero:not(:has(.bm-ad-gallery))::before {
  background-color: color-mix(in srgb, var(--bm-dk-deep) 60%, transparent);
  color: var(--bm-color-brand-text);
  border-color: color-mix(in srgb, var(--bm-color-brand-text) 25%, transparent);
  opacity: 0.45;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-ad-hero:not(:has(.bm-ad-gallery))::before {
    background-color: color-mix(in srgb, var(--bm-dk-deep) 60%, transparent);
    color: var(--bm-color-brand-text);
    border-color: color-mix(in srgb, var(--bm-color-brand-text) 25%, transparent);
    opacity: 0.45;
  }
}

/* 2. Badges: Area, Condition, Type, Featured, Urgent, Bumped */
.bm-ad-hero .bm-business-header__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  margin-block-end: var(--bm-space-3);
}

.bm-ad-hero .bm-business-header__badges .bm-badge {
  white-space: nowrap;
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-medium);
  padding-inline: var(--bm-space-2-5);
  padding-block: var(--bm-space-1);
  border-radius: var(--bm-radius-full);
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1-5);
  box-shadow: var(--bm-shadow-sm);
  line-height: var(--bm-line-height-tight);
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-card-badge-border);
}

.bm-ad-hero .bm-business-header__badges .bm-badge svg {
  color: inherit;
}

.bm-ad-hero .bm-business-header__badges .bm-badge--area {
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-card-badge-border);
}

.bm-ad-hero .bm-business-header__badges .bm-badge--verified {
  background-color: var(--bm-color-badge-open-bg);
  color: var(--bm-color-badge-open-text);
  border: 1px solid var(--bm-color-badge-open-border);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-ad-hero .bm-business-header__badges .bm-badge--featured {
  background-color: var(--bm-color-accent-base);
  color: var(--bm-color-on-accent);
  border: 1px solid var(--bm-color-accent-dark);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-ad-hero .bm-business-header__badges .bm-badge--urgent {
  background-color: var(--bm-color-badge-closed-bg);
  color: var(--bm-color-badge-closed-text);
  border: 1px solid var(--bm-color-badge-closed-border);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-ad-hero .bm-business-header__badges .bm-badge--bumped {
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-base);
  border: 1px solid var(--bm-color-card-badge-border);
  font-weight: var(--bm-font-weight-medium);
}

.bm-ad-hero .bm-business-header__badges .bm-badge--closed {
  background-color: var(--bm-color-badge-closed-bg);
  color: var(--bm-color-badge-closed-text);
  border: 1px solid var(--bm-color-badge-closed-border);
  font-weight: var(--bm-font-weight-semibold);
}

/* 3. Title, Price & Negotiable Tag */
.bm-ad-hero .bm-business-header__title {
  font-size: clamp(2rem, 3.5vw + 0.75rem, var(--bm-text-4xl));
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  letter-spacing: var(--bm-tracking-tight);
  margin-block: var(--bm-space-1) var(--bm-space-2);
  line-height: var(--bm-line-height-tight);
}

.bm-ad-hero .bm-ad-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bm-space-3);
  margin-block: var(--bm-space-3) var(--bm-space-2);
  line-height: var(--bm-line-height-tight);
}

.bm-ad-hero .bm-ad-price__amount {
  font-size: clamp(1.75rem, 3.2vw + 0.5rem, var(--bm-text-3xl));
  font-weight: var(--bm-font-weight-extrabold);
  color: var(--bm-color-ink-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--bm-tracking-tight);
}

.bm-ad-hero .bm-ad-price__note {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--bm-space-2-5);
  padding-block: var(--bm-space-1);
  border-radius: var(--bm-radius-full);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  background-color: var(--bm-color-badge-open-bg);
  color: var(--bm-color-badge-open-text);
  border: 1px solid var(--bm-color-badge-open-border);
  box-shadow: var(--bm-shadow-sm);
  letter-spacing: 0.02em;
}

.bm-ad-hero .bm-ad-posted {
  margin-block-start: var(--bm-space-1);
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-sm);
}

/* 4. Big Gallery Showcase */
.bm-ad-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
  gap: var(--bm-space-3);
  margin-block-start: var(--bm-space-6);
}

.bm-ad-gallery .bm-ad-gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--bm-radius-lg);
  border: 1px solid var(--bm-color-line-base);
  aspect-ratio: 4 / 3;
  background-color: var(--bm-color-surface-muted);
  box-shadow: var(--bm-shadow-sm);
  transition: transform var(--bm-transition-normal), box-shadow var(--bm-transition-normal), border-color var(--bm-transition-fast);
  cursor: pointer;
  text-decoration: none;
}

.bm-ad-gallery .bm-ad-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  opacity: 0;
  transition: opacity var(--bm-transition-fast);
  pointer-events: none;
}

.bm-ad-gallery .bm-ad-gallery__item:hover::after {
  opacity: 1;
}

.bm-ad-gallery .bm-ad-gallery__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--bm-shadow-md);
  border-color: var(--bm-color-brand-base);
}

.bm-ad-gallery .bm-ad-gallery__item--main {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
  border-radius: var(--bm-radius-xl);
  box-shadow: var(--bm-shadow-card);
}

@media (max-width: 767px) {
  .bm-ad-gallery .bm-ad-gallery__item--main {
    aspect-ratio: 4 / 3;
  }
}

.bm-ad-gallery .bm-gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bm-transition-normal);
}

@media (prefers-reduced-motion: no-preference) {
  .bm-ad-gallery .bm-ad-gallery__item:hover .bm-gallery__img {
    transform: scale(1.02);
  }
}

/* 5. Seller Card & Safe Meetup Guidance */
.bm-slot-card--seller {
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  padding: var(--bm-space-6);
  box-shadow: var(--bm-shadow-card);
}

.bm-slot-card--seller p {
  margin: 0;
  font-size: var(--bm-text-base);
  color: var(--bm-color-ink-base);
}

.bm-slot-card--seller p a {
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
  text-decoration: none;
}

.bm-slot-card--seller p a:hover {
  color: var(--bm-color-brand-text);
  text-decoration: underline;
}

.bm-slot-card--seller .bm-seller-profile__meta {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
  margin-block-start: var(--bm-space-1);
}

/* Public Meetup Places (Safespots) Card */
.bm-slot-card--safespots {
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  padding: var(--bm-space-6);
  box-shadow: var(--bm-shadow-card);
}

.bm-safespots__title {
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  margin-block-end: var(--bm-space-2);
}

.bm-safespots__intro {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
  margin-block-end: var(--bm-space-4);
  line-height: var(--bm-line-height-relaxed);
}

.bm-safespots__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-3);
}

.bm-safespots__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-4);
  padding: var(--bm-space-4);
  background-color: var(--bm-color-surface-dark);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
}

.bm-safespots__name {
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
  margin: 0;
}

.bm-safespots__address {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
  margin-block-start: var(--bm-space-1);
  margin-block-end: 0;
}

.bm-safespots__note {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-brand-text);
  margin-block-start: var(--bm-space-1);
  margin-block-end: 0;
  font-weight: var(--bm-font-weight-medium);
}

.bm-safespots__directions {
  min-height: 40px;
  padding-inline: var(--bm-space-4);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  white-space: nowrap;
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1-5);
  border-radius: var(--bm-radius-md);
  text-decoration: none;
}

.bm-safespots__directions svg {
  color: inherit;
}

@media (max-width: 640px) {
  .bm-safespots__item {
    flex-direction: column;
    align-items: stretch;
  }

  .bm-safespots__directions {
    width: 100%;
    justify-content: center;
  }
}

/* Safety Tips Card */
.bm-slot-card--safety {
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  padding: var(--bm-space-6);
  box-shadow: var(--bm-shadow-card);
}

/* 6. Contact Sidebar for Ads (Desktop) */
body:has(.bm-ad-hero) .bm-contact-card__actions .bm-btn--whatsapp {
  min-height: 48px;
  border-radius: var(--bm-radius-lg);
  font-weight: var(--bm-font-weight-semibold);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-text-on-dark);
  border: none;
  box-shadow: var(--bm-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-2);
}

body:has(.bm-ad-hero) .bm-contact-card__actions .bm-btn--whatsapp svg {
  color: inherit;
}

body:has(.bm-ad-hero) .bm-contact-card__actions .bm-btn--secondary {
  min-height: 48px;
  border-radius: var(--bm-radius-lg);
  font-weight: var(--bm-font-weight-semibold);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-2);
}

body:has(.bm-ad-hero) .bm-contact-card__actions .bm-btn--secondary svg {
  color: inherit;
}

/* 7. Mobile Sticky Contact Bar for Ads */
@media (max-width: 767px) {
  body:has(.bm-ad-hero) .bm-mobile-sticky-bar {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: var(--bm-z-sticky-bar);
    padding-inline: var(--bm-space-4);
    padding-block: var(--bm-space-3) calc(var(--bm-space-3) + env(safe-area-inset-bottom, 0px));
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-block-start: 1px solid var(--bm-color-line-base);
    box-shadow: var(--bm-shadow-sticky-bar);
    display: flex;
    align-items: center;
    gap: var(--bm-space-2);
  }

  :root[data-bm-theme="dark"] body:has(.bm-ad-hero) .bm-mobile-sticky-bar {
    background-color: color-mix(in srgb, var(--bm-dk-base) 95%, transparent);
    border-block-start-color: var(--bm-color-line-base);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-bm-theme="light"]) body:has(.bm-ad-hero) .bm-mobile-sticky-bar {
      background-color: color-mix(in srgb, var(--bm-dk-base) 95%, transparent);
      border-block-start-color: var(--bm-color-line-base);
    }
  }

  body:has(.bm-ad-hero) .bm-mobile-sticky-bar .bm-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding-inline: var(--bm-space-2);
    font-size: var(--bm-text-xs);
    font-weight: var(--bm-font-weight-semibold);
    border-radius: var(--bm-radius-lg);
    gap: var(--bm-space-1-5);
    justify-content: center;
    box-shadow: var(--bm-shadow-sm);
  }

  body:has(.bm-ad-hero) .bm-mobile-sticky-bar .bm-btn--whatsapp {
    background-color: var(--bm-color-brand-base);
    color: var(--bm-color-text-on-dark);
    border: none;
  }

  body:has(.bm-ad-hero) .bm-mobile-sticky-bar .bm-btn--whatsapp svg {
    color: inherit;
  }

  body:has(.bm-ad-hero) .bm-mobile-sticky-bar .bm-btn--secondary {
    background-color: var(--bm-color-surface-base);
    color: var(--bm-color-ink-base);
    border: 1px solid var(--bm-color-line-base);
  }

  body:has(.bm-ad-hero) .bm-mobile-sticky-bar .bm-btn--secondary svg {
    color: inherit;
  }

  body:has(.bm-ad-hero) {
    padding-block-end: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
}
/* 69. Dashboard sidebar: the real brand logo (light and dark variant) and a desktop fold button that turns the sidebar into the icon rail. */

.bm-dash-app__brandrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-2);
}

.bm-dash-app__brand--logo {
  flex: 1;
  min-width: 0;
}

.bm-dash-app__brand-logo .bm-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 2.25rem;
}

.bm-dash-app__brand-logo .bm-logo--dark {
  display: none;
}

:root[data-bm-theme="dark"] .bm-dash-app__brand-logo .bm-logo--light {
  display: none;
}

:root[data-bm-theme="dark"] .bm-dash-app__brand-logo .bm-logo--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-dash-app__brand-logo .bm-logo--light {
    display: none;
  }

  :root:not([data-bm-theme="light"]) .bm-dash-app__brand-logo .bm-logo--dark {
    display: block;
  }
}

/* the small mark replaces the logo when the sidebar is a rail */
.bm-dash-app__brand-mark--fold {
  display: none;
}

.bm-dash-app__fold {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-full);
  background-color: transparent;
  color: var(--bm-color-muted-base);
  cursor: pointer;
}

.bm-dash-app__fold:hover {
  color: var(--bm-color-ink-base);
  border-color: var(--bm-color-line-dark);
}

.bm-dash-app__fold:focus-visible {
  outline: none;
  box-shadow: var(--bm-shadow-focus);
}

.bm-dash-app__fold svg {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--bm-transition-fast);
}

.bm-dash-app.is-folded .bm-dash-app__fold svg {
  transform: rotate(180deg);
}

@media (min-width: 1100px) {
  .bm-dash-app__fold {
    display: inline-flex;
  }

  .bm-dash-app {
    transition: grid-template-columns var(--bm-transition-fast);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bm-dash-app,
  .bm-dash-app__fold svg {
    transition: none;
  }
}

/* the tablet rail has no logo either */
@media (max-width: 1099px) and (min-width: 768px) {
  .bm-dash-app__brand-logo {
    display: none;
  }

  .bm-dash-app__brand-mark--fold {
    display: inline-flex;
  }

  .bm-dash-app__brandrow {
    justify-content: center;
  }

  .bm-dash-app__brand--logo {
    flex: none;
  }
}

/* folded on a desktop: same rail as the tablet one */
@media (min-width: 1100px) {
  .bm-dash-app.is-folded {
    --bm-dash-sidebar-w: var(--bm-dash-rail-w); /* the grid column AND the full-height divider gradient (48-dashboard-live.css) both read this */
    grid-template-columns: var(--bm-dash-rail-w) minmax(0, 1fr);
  }

  .bm-dash-app.is-folded .bm-dash-app__sidebar {
    align-items: center;
    padding-inline: var(--bm-space-2);
  }

  .bm-dash-app.is-folded .bm-dash-app__brandrow {
    flex-direction: column;
    gap: var(--bm-space-2);
  }

  .bm-dash-app.is-folded .bm-dash-app__brand {
    padding-inline: 0;
  }

  .bm-dash-app.is-folded .bm-dash-app__brand-logo {
    display: none;
  }

  .bm-dash-app.is-folded .bm-dash-app__brand-mark--fold {
    display: inline-flex;
  }

  .bm-dash-app.is-folded .bm-dash-app__brand-text,
  .bm-dash-app.is-folded .bm-dash-app__label,
  .bm-dash-app.is-folded .bm-dash-app__nav-heading,
  .bm-dash-app.is-folded .bm-dash-app__user,
  .bm-dash-app.is-folded .bm-dash-app__logout-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .bm-dash-app.is-folded .bm-dash-app__nav {
    width: 100%;
    align-items: center;
  }

  .bm-dash-app.is-folded .bm-dash-app__link {
    justify-content: center;
    width: var(--bm-touch-target-min);
    padding: var(--bm-space-2);
  }

  .bm-dash-app.is-folded .bm-dash-app__badge {
    position: absolute;
    top: 0.125rem;
    inset-inline-end: -0.25rem;
    min-width: 1.125rem;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
  }

  .bm-dash-app.is-folded .bm-dash-app__usercard {
    flex-direction: column;
    padding: var(--bm-space-2);
    border: 0;
    background: transparent;
  }

  .bm-dash-app.is-folded .bm-dash-app__logout {
    margin: 0;
  }
}
/* ==========================================================================
   70. Static Pages Typography & Help Hub Architecture
   Privacy, Terms, About, Contact, Help, Safe Trade, How Verification Works.
   Readable long-text typography (65-75ch line length, clear heading scale,
   refined lists, links, responsive tables, blockquotes, table of contents),
   plus Help Hub search hero, topic cards grid, and FAQ directory.
   Tokens only, WCAG AA/AAA compliant, zero important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scope & Reading Measure Container
   -------------------------------------------------------------------------- */
.bm-static-page {
  width: 100%;
  padding-block: 0 var(--bm-space-16);
}

.bm-page--help {
  padding-block: var(--bm-space-6) var(--bm-space-16);
}

/* --------------------------------------------------------------------------
   2. Breadcrumbs Navigation
   -------------------------------------------------------------------------- */
.bm-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
  margin-block-end: var(--bm-space-6);
}

.bm-breadcrumbs a {
  color: var(--bm-color-muted-base);
  text-decoration: none;
  transition: color var(--bm-transition-fast);
}

.bm-breadcrumbs a:hover {
  color: var(--bm-color-brand-text);
  text-decoration: underline;
}

.bm-breadcrumbs__separator {
  color: var(--bm-color-muted-light);
  user-select: none;
}

.bm-breadcrumbs [aria-current="page"] {
  color: var(--bm-color-ink-base);
  font-weight: var(--bm-font-weight-medium);
}

/* --------------------------------------------------------------------------
   3. Static Page Header
   -------------------------------------------------------------------------- */
.bm-static-page__header {
  margin-block-end: var(--bm-space-8);
  padding-block-end: var(--bm-space-6);
  border-block-end: 1px solid var(--bm-color-line-base);
}

.bm-static-page__header .bm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1-5);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-medium);
  padding-inline: var(--bm-space-2-5);
  padding-block: var(--bm-space-1);
  border-radius: var(--bm-radius-full);
  margin-block-end: var(--bm-space-3);
  line-height: var(--bm-line-height-tight);
}

.bm-static-page__title {
  font-size: clamp(1.75rem, 4vw, var(--bm-text-4xl));
  font-weight: var(--bm-font-weight-extrabold);
  line-height: var(--bm-line-height-tight);
  letter-spacing: var(--bm-tracking-tight);
  color: var(--bm-color-ink-dark);
  margin-block: 0 var(--bm-space-3);
}

.bm-static-page__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
}

/* --------------------------------------------------------------------------
   4. Table of Contents (Short Nav for Long-Form Pages)
   -------------------------------------------------------------------------- */
.bm-toc {
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  padding: var(--bm-space-5);
  margin-block: var(--bm-space-6) var(--bm-space-8);
  box-shadow: var(--bm-shadow-sm);
}

.bm-toc__header {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--bm-tracking-wide);
  color: var(--bm-color-muted-base);
  margin-block-end: var(--bm-space-3);
}

.bm-toc__icon {
  color: inherit;
  flex-shrink: 0;
}

.bm-toc__title {
  color: inherit;
}

.bm-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-1-5);
}

.bm-toc__list li {
  margin: 0;
  padding: 0;
}

.bm-toc__list a {
  display: inline-block;
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  text-decoration: none;
  padding-inline: var(--bm-space-2);
  padding-block: var(--bm-space-1);
  border-radius: var(--bm-radius-md);
  transition: background-color var(--bm-transition-fast), color var(--bm-transition-fast);
}

.bm-toc__list a:hover {
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-brand-text);
}

/* --------------------------------------------------------------------------
   5. Long-Form Prose Typography
   -------------------------------------------------------------------------- */
.bm-static-page .bm-prose,
.bm-prose--article {
  max-width: 50rem;
  color: var(--bm-color-ink-base);
}

.bm-static-page .bm-prose p,
.bm-prose--article p {
  font-size: var(--bm-text-base);
  line-height: var(--bm-line-height-relaxed);
  color: var(--bm-color-ink-base);
  margin-block: 0 var(--bm-space-5);
  text-wrap: pretty;
}

.bm-static-page .bm-prose h2,
.bm-prose--article h2 {
  font-size: var(--bm-text-2xl);
  font-weight: var(--bm-font-weight-bold);
  line-height: var(--bm-line-height-snug);
  letter-spacing: var(--bm-tracking-tight);
  color: var(--bm-color-ink-dark);
  margin-block: var(--bm-space-10) var(--bm-space-4);
  padding-block-end: var(--bm-space-2);
  border-block-end: 1px solid var(--bm-color-line-base);
  scroll-margin-top: calc(var(--bm-space-16) + var(--bm-space-8));
}

.bm-static-page .bm-prose h3,
.bm-prose--article h3 {
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-semibold);
  line-height: var(--bm-line-height-snug);
  color: var(--bm-color-ink-dark);
  margin-block: var(--bm-space-6) var(--bm-space-3);
}

.bm-static-page .bm-prose h4,
.bm-prose--article h4 {
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
  margin-block: var(--bm-space-5) var(--bm-space-2);
}

.bm-static-page .bm-prose ul,
.bm-static-page .bm-prose ol,
.bm-prose--article ul,
.bm-prose--article ol {
  padding-inline-start: var(--bm-space-6);
  margin-block: 0 var(--bm-space-5);
}

.bm-static-page .bm-prose li,
.bm-prose--article li {
  font-size: var(--bm-text-base);
  line-height: var(--bm-line-height-relaxed);
  color: var(--bm-color-ink-base);
  margin-block-end: var(--bm-space-2);
}

.bm-static-page .bm-prose li::marker,
.bm-prose--article li::marker {
  color: var(--bm-color-muted-base);
}

.bm-static-page .bm-prose ul ul,
.bm-static-page .bm-prose ol ol,
.bm-static-page .bm-prose ul ol,
.bm-static-page .bm-prose ol ul,
.bm-prose--article ul ul,
.bm-prose--article ol ol {
  margin-block: var(--bm-space-2);
  padding-inline-start: var(--bm-space-5);
}

.bm-static-page .bm-prose a,
.bm-prose--article a {
  color: var(--bm-color-brand-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--bm-transition-fast), text-decoration-color var(--bm-transition-fast);
}

.bm-static-page .bm-prose a:hover,
.bm-prose--article a:hover {
  color: var(--bm-color-accent-base);
  text-decoration-color: var(--bm-color-accent-base);
}

.bm-static-page .bm-prose blockquote,
.bm-prose--article blockquote {
  margin: var(--bm-space-6) 0;
  padding-inline: var(--bm-space-5);
  padding-block: var(--bm-space-4);
  background-color: var(--bm-color-surface-base);
  border-inline-start: 3px solid var(--bm-color-brand-text);
  border-radius: 0 var(--bm-radius-lg) var(--bm-radius-lg) 0;
  color: var(--bm-color-ink-base);
  font-style: normal;
}

.bm-static-page .bm-prose blockquote p,
.bm-prose--article blockquote p {
  margin-block-end: var(--bm-space-2);
}

.bm-static-page .bm-prose blockquote p:last-child,
.bm-prose--article blockquote p:last-child {
  margin-block-end: 0;
}

/* The theme styles blockquotes in a serif face and the seeded pages hold one blockquote per quoted line,
   so reset the face, hide empty ones and join neighbours into one card. */
.bm-static-page .bm-prose blockquote,
.bm-prose--article blockquote {
  font-family: inherit;
}

.bm-static-page .bm-prose blockquote:has(> p:empty:only-child),
.bm-prose--article blockquote:has(> p:empty:only-child) {
  display: none;
}

.bm-static-page .bm-prose blockquote + blockquote,
.bm-prose--article blockquote + blockquote {
  margin-block-start: calc(var(--bm-space-6) * -1);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.bm-static-page .bm-prose hr,
.bm-prose--article hr {
  border: 0;
  border-block-start: 1px solid var(--bm-color-line-base);
  margin-block: var(--bm-space-8);
}

/* --------------------------------------------------------------------------
   6. Accessible Data Tables
   -------------------------------------------------------------------------- */
.bm-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--bm-space-6) var(--bm-space-8);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
  box-shadow: var(--bm-shadow-sm);
}

.bm-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--bm-text-sm);
  line-height: var(--bm-line-height-normal);
}

.bm-table-wrapper th {
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-dark);
  font-weight: var(--bm-font-weight-semibold);
  padding-inline: var(--bm-space-4);
  padding-block: var(--bm-space-3);
  border-block-end: 1px solid var(--bm-color-line-base);
  white-space: nowrap;
}

.bm-table-wrapper td {
  padding-inline: var(--bm-space-4);
  padding-block: var(--bm-space-3);
  border-block-end: 1px solid var(--bm-color-line-light);
  color: var(--bm-color-ink-base);
  vertical-align: top;
}

.bm-table-wrapper tbody tr:nth-child(even) {
  background-color: var(--bm-color-surface-base);
}

.bm-table-wrapper tbody tr:last-child td {
  border-block-end: none;
}

/* --------------------------------------------------------------------------
   7. Help Hub Architecture & Layout
   -------------------------------------------------------------------------- */
.bm-help-hub {
  width: 100%;
  max-width: var(--bm-container-max);
  margin-inline: auto;
}

.bm-help-hero {
  text-align: center;
  padding-inline: var(--bm-space-6);
  padding-block: var(--bm-space-10);
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-3xl);
  margin-block-end: var(--bm-space-10);
  position: relative;
  overflow: hidden;
}

.bm-help-hero .bm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1-5);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-medium);
  padding-inline: var(--bm-space-2-5);
  padding-block: var(--bm-space-1);
  border-radius: var(--bm-radius-full);
  margin-block-end: var(--bm-space-3);
  line-height: var(--bm-line-height-tight);
}

.bm-help-hero__title {
  font-size: clamp(1.75rem, 4vw, var(--bm-text-4xl));
  font-weight: var(--bm-font-weight-extrabold);
  letter-spacing: var(--bm-tracking-tight);
  color: var(--bm-color-ink-dark);
  margin-block: 0 var(--bm-space-2);
}

.bm-help-hero__subtitle {
  font-size: var(--bm-text-base);
  color: var(--bm-color-muted-base);
  max-width: 56ch;
  margin-inline: auto;
  margin-block-end: var(--bm-space-6);
}

.bm-help-search__field {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 580px;
  margin-inline: auto;
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-full);
  padding-inline: var(--bm-space-4) var(--bm-space-1-5);
  padding-block: var(--bm-space-1-5);
  box-shadow: var(--bm-shadow-md);
  transition: border-color var(--bm-transition-fast), box-shadow var(--bm-transition-fast);
}

.bm-help-search__field:focus-within {
  border-color: var(--bm-color-ring);
  box-shadow: var(--bm-shadow-focus);
}

.bm-help-search__icon {
  color: var(--bm-color-muted-base);
  margin-inline-end: var(--bm-space-2);
  flex-shrink: 0;
}

.bm-help-search__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-dark);
  outline: none;
  padding-inline-end: var(--bm-space-2);
  min-width: 0;
}

.bm-help-search__btn {
  border-radius: var(--bm-radius-full);
  padding-inline: var(--bm-space-5);
  font-size: var(--bm-text-xs);
  height: 38px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   8. Topic Cards Grid
   -------------------------------------------------------------------------- */
.bm-help-section {
  margin-block-end: var(--bm-space-12);
}

.bm-help-section__header {
  margin-block-end: var(--bm-space-6);
}

.bm-help-section__title {
  font-size: var(--bm-text-2xl);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  margin-block: 0 var(--bm-space-1);
}

.bm-help-section__desc {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
  margin: 0;
}

.bm-help-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--bm-space-5);
}

.bm-help-card {
  display: flex;
  flex-direction: column;
  padding: var(--bm-space-6);
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-2xl);
  text-decoration: none;
  box-shadow: var(--bm-shadow-card);
  transition: transform var(--bm-transition-fast), box-shadow var(--bm-transition-fast), border-color var(--bm-transition-fast);
}

.bm-help-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bm-shadow-card-hover);
  border-color: var(--bm-color-brand-text);
}

@media (prefers-reduced-motion: reduce) {
  .bm-help-card:hover {
    transform: none;
  }
}

.bm-help-card__icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: var(--bm-space-4);
  flex-shrink: 0;
}

.bm-help-card__icon-wrap svg {
  color: inherit;
}

.bm-help-card__title {
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  margin-block: 0 var(--bm-space-2);
}

.bm-help-card__desc {
  font-size: var(--bm-text-xs);
  line-height: var(--bm-line-height-normal);
  color: var(--bm-color-muted-base);
  margin-block: 0 var(--bm-space-4);
  flex: 1;
}

.bm-help-card__meta {
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-brand-text);
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1);
}

/* --------------------------------------------------------------------------
   9. Frequently Asked Questions Directory
   -------------------------------------------------------------------------- */
.bm-help-faq {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-3);
}

.bm-help-faq__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-4);
  padding-inline: var(--bm-space-5);
  padding-block: var(--bm-space-4);
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  text-decoration: none;
  box-shadow: var(--bm-shadow-sm);
  transition: border-color var(--bm-transition-fast), background-color var(--bm-transition-fast);
}

.bm-help-faq__item:hover {
  border-color: var(--bm-color-brand-text);
  background-color: var(--bm-color-surface-base);
}

.bm-help-faq__content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bm-space-3);
  flex: 1;
  min-width: 0;
}

.bm-help-faq__title {
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  color: var(--bm-color-ink-dark);
}

.bm-help-faq__arrow {
  color: var(--bm-color-muted-base);
  flex-shrink: 0;
  transition: transform var(--bm-transition-fast), color var(--bm-transition-fast);
}

.bm-help-faq__item:hover .bm-help-faq__arrow {
  transform: translateX(2px);
  color: var(--bm-color-brand-text);
}

@media (prefers-reduced-motion: reduce) {
  .bm-help-faq__item:hover .bm-help-faq__arrow {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   10. Still Need Help Direct Action Strip
   -------------------------------------------------------------------------- */
.bm-help-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bm-space-6);
  padding-inline: var(--bm-space-8);
  padding-block: var(--bm-space-8);
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-2xl);
  margin-block-start: var(--bm-space-8);
  box-shadow: var(--bm-shadow-sm);
}

.bm-help-contact__content {
  flex: 1;
  min-width: 260px;
}

.bm-help-contact__title {
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  margin-block: 0 var(--bm-space-1);
}

.bm-help-contact__desc {
  font-size: var(--bm-text-xs);
  line-height: var(--bm-line-height-normal);
  color: var(--bm-color-muted-base);
  margin: 0;
  max-width: 52ch;
}

.bm-help-contact__actions {
  display: flex;
  align-items: center;
  gap: var(--bm-space-3);
  flex-wrap: wrap;
}

.bm-help-contact__actions .bm-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
}

.bm-help-contact__actions .bm-btn svg {
  color: inherit;
}
/* --------------------------------------------------------------------------
   9. Page chrome (bm-pages.php, bm_pages_wrap): meta line, side list, numbered section cards
   -------------------------------------------------------------------------- */
body.page-template-default #brx-content.type-page:has(> .bm-static-page) {
  padding-block: var(--bm-space-10) 0;
}

body.page-template-default #brx-content.type-page > h1:has(+ .bm-static-page) {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: var(--bm-font-weight-extrabold);
  line-height: var(--bm-line-height-tight);
  letter-spacing: var(--bm-tracking-tight);
  color: var(--bm-color-ink-dark);
  margin-block: 0 var(--bm-space-3);
}

.bm-static-page__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-2) var(--bm-space-3);
  margin-block-end: var(--bm-space-8);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
}

.bm-static-page__stamp {
  display: inline-flex;
  align-items: center;
  padding: var(--bm-space-1) var(--bm-space-3);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-static-page__read::before {
  content: "\00b7";
  margin-inline-end: var(--bm-space-3);
}

.bm-static-page__layout {
  display: block;
}

.bm-static-page--toc .bm-static-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bm-space-6);
}

@media (min-width: 1024px) {
  .bm-static-page--toc .bm-static-page__layout {
    grid-template-columns: 16rem minmax(0, 50rem);
    gap: var(--bm-space-12);
    align-items: start;
  }
}

/* Side list: a fold-out above the text on small screens, a sticky card from 1024px. */
.bm-static-page__side .bm-toc {
  margin: 0;
}

.bm-toc--fold > summary {
  cursor: pointer;
  list-style: none;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  margin: 0;
}

.bm-toc--fold > summary::-webkit-details-marker {
  display: none;
}

.bm-toc--fold > summary::after {
  content: "+";
  margin-inline-start: auto;
  font-size: var(--bm-text-lg);
  line-height: 1;
}

.bm-toc--fold[open] > summary::after {
  content: "\2212";
}

.bm-toc--fold[open] > summary {
  margin-block-end: var(--bm-space-3);
}

.bm-toc--side {
  display: none;
}

@media (min-width: 1024px) {
  .bm-toc--fold {
    display: none;
  }

  .bm-toc--side {
    display: block;
    max-height: calc(100vh - var(--bm-space-16) - var(--bm-space-16));
    overflow-y: auto;
  }

  /* The sticky box is the column itself: a sticky child cannot leave a parent that is only as tall as the child. */
  .bm-static-page__side {
    position: sticky;
    top: calc(var(--bm-space-16) + var(--bm-space-6));
  }
}

.bm-toc__list {
  counter-reset: none;
}

.bm-toc__list a {
  display: flex;
  align-items: baseline;
  gap: var(--bm-space-3);
  min-height: 2.75rem;
  align-items: center;
  line-height: var(--bm-line-height-snug);
}

.bm-toc__num {
  flex: none;
  min-width: 1.5rem;
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-muted-base);
  font-variant-numeric: tabular-nums;
}

.bm-toc__list a[aria-current="true"] {
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-color-brand-text);
}

.bm-toc__list a[aria-current="true"] .bm-toc__num {
  color: var(--bm-color-brand-text);
}

.bm-toc__list a:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

/* One card per h2 section, the number as a badge. */
.bm-static-page .bm-prose .bm-sec {
  display: block; /* Automatic.css turns every <section> into a flex column with a large gap */
  gap: 0;
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  box-shadow: var(--bm-shadow-sm);
  padding: var(--bm-space-5);
  margin-block-end: var(--bm-space-5);
}

@media (min-width: 768px) {
  .bm-static-page .bm-prose .bm-sec {
    padding: var(--bm-space-8);
  }
}

.bm-static-page .bm-prose .bm-sec > :last-child {
  margin-block-end: 0;
}

.bm-static-page .bm-prose .bm-sec h2 {
  display: flex;
  align-items: center;
  gap: var(--bm-space-3);
  margin-block: 0 var(--bm-space-4);
  padding-block-end: 0;
  border-block-end: 0;
  font-size: var(--bm-text-xl);
}

@media (min-width: 768px) {
  .bm-static-page .bm-prose .bm-sec h2 {
    font-size: var(--bm-text-2xl);
  }
}

.bm-sec__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-color-brand-text);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.bm-static-page .bm-prose__intro {
  font-size: var(--bm-text-lg);
  line-height: var(--bm-line-height-relaxed);
  margin-block-end: var(--bm-space-6);
}

.bm-static-page .bm-prose__intro p {
  font-size: inherit;
}

/* A quote inside a card sits on the page colour so it reads as an inset note. */
.bm-static-page .bm-prose .bm-sec blockquote {
  background-color: var(--bm-color-surface-base);
}

.bm-static-page .bm-prose .bm-sec h3:first-of-type {
  margin-block-start: var(--bm-space-4);
}

.bm-static-page .bm-prose > hr,
.bm-static-page .bm-prose .bm-sec > hr:last-child {
  display: none;
}

@media (max-width: 767px) {
  .bm-static-page .bm-prose .bm-sec {
    border-radius: var(--bm-radius-lg);
  }
}
/* 70. FluentSupport customer portal (the Support tab and /support/): its own --fs-* colour variables are pointed at our tokens, so the portal follows the
   light and dark theme and the accent colour instead of showing a white box on a dark page. Only variables are set; the plugin's own layout stays.
   `html` in front beats the plugin's plain .fs_client_portal rule (it also ships a dark set that only applies under html.dark, which this site does not use). */

html .fs_client_portal {
  --fs-primary: var(--bm-color-brand-base);
  --fs-primary-dark: var(--bm-color-brand-base);
  --fs-primary-hover: var(--bm-color-brand-base);
  --fs-btn-primary: var(--bm-color-brand-base);
  --fs-btn-primary-bg: var(--bm-color-brand-base);
  --fs-btn-primary-hover: var(--bm-color-brand-base);
  --fs-btn-text: var(--bm-color-btn-primary-text);
  --fs-white: var(--bm-color-surface-base);
  --fs-bg-white: var(--bm-color-surface-base);
  --fs-bg-primary: var(--bm-color-surface-base);
  --fs-global-component-bg: var(--bm-color-surface-dark);
  --fs-bg-weak: var(--bm-color-surface-dark);
  --fs-bg-light: var(--bm-color-surface-dark);
  --fs-bg-lighter: var(--bm-color-surface-dark);
  --fs-bg-subtle: var(--bm-color-surface-dark);
  --fs-bg-hover: var(--bm-color-surface-dark);
  --fs-subtle-btn-bg: var(--bm-color-surface-dark);
  --fs-table-header-bg: var(--bm-color-surface-dark);
  --fs-table-hover-bg: var(--bm-color-surface-dark);
  --fs-text-strong: var(--bm-color-ink-base);
  --fs-text-heading: var(--bm-color-ink-base);
  --fs-text-dark: var(--bm-color-ink-base);
  --fs-text-primary: var(--bm-color-ink-base);
  --fs-text-sub: var(--bm-color-muted-base);
  --fs-text-label: var(--bm-color-muted-base);
  --fs-text-secondary: var(--bm-color-muted-base);
  --fs-text-light: var(--bm-color-muted-base);
  --fs-text-lighter: var(--bm-color-muted-base);
  --fs-text-muted: var(--bm-color-muted-base);
  --fs-text-inactive: var(--bm-color-muted-base);
  --fs-inline-btn-text: var(--bm-color-ink-base);
  --fs-icon: var(--bm-color-muted-base);
  --fs-icon-light: var(--bm-color-muted-base);
  --fs-border-soft: var(--bm-color-line-base);
  --fs-border-light: var(--bm-color-line-base);
  --fs-border-lighter: var(--bm-color-line-base);
  --fs-border-default: var(--bm-color-line-base);
  --fs-border-input: var(--bm-color-line-base);
  --fs-border-input-hover: var(--bm-color-line-dark);
  --fs-border-focus: var(--bm-color-brand-base);
  --fs-link: var(--bm-color-brand-base);
  --fs-link-hover: var(--bm-color-brand-base);
  color: var(--bm-color-ink-base);
}

/* inside the dashboard the tab's own card wraps the portal: no card in a card */
.bm-dash-app__card.bm-support-portal {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* staff view of the Support tab: the dashboard's own card is the only card; plain content with room to breathe */
.bm-support-staff {
  padding: var(--bm-space-6);
}

.bm-support-staff__title {
  margin: 0 0 var(--bm-space-2);
  font-size: var(--bm-text-lg);
  color: var(--bm-color-ink-base);
}

.bm-support-staff p {
  margin: 0 0 var(--bm-space-4);
  color: var(--bm-color-muted-base);
}
/* ==========================================================================
   71. Listing Submit and Edit Forms Polish
   Step sections, photo uploader (drop zone, thumbnails, cover marker, remove),
   logo field integration (#132), validation & help states, mobile sticky bar.
   Tokens only, zero override flags, WCAG AA/AAA compliant.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Step Sections & Headings
   -------------------------------------------------------------------------- */
.bm-form.bm-form--listing .bm-form__section {
  display: block;
  gap: 0;
  box-sizing: border-box;
  min-width: 0;
  padding-block: var(--bm-space-6);
  border: 0;
  border-top: 1px solid var(--bm-color-line-base);
}

.bm-form--listing .bm-form__tips + .bm-form__section {
  margin-top: var(--bm-space-4);
}

.bm-form.bm-form--listing .bm-form__section .bm-form__section-title {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
  margin: 0 0 var(--bm-space-4);
  padding: 0;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-semibold);
  line-height: var(--bm-line-height-snug);
  color: var(--bm-color-ink-dark);
}

.bm-form--listing .bm-form__section-hint {
  margin: calc(-1 * var(--bm-space-2)) 0 var(--bm-space-4);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-light);
  line-height: var(--bm-line-height-normal);
}

/* Optional details disclosure header */
.bm-form.bm-form--listing .bm-form__section--optional > summary {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
  margin: 0;
  min-height: var(--bm-touch-target-min);
  cursor: pointer;
  list-style: none;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-semibold);
  line-height: var(--bm-line-height-snug);
  color: var(--bm-color-ink-dark);
}

.bm-form--listing .bm-form__section--optional[open] > summary {
  margin-bottom: var(--bm-space-4);
}

.bm-form--listing .bm-form__opt {
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-regular);
  color: var(--bm-color-muted-base);
}

/* --------------------------------------------------------------------------
   2. Photo Uploader (.bm-uploader)
   -------------------------------------------------------------------------- */
.bm-form--listing .bm-uploader {
  display: grid;
  gap: var(--bm-space-3);
}

/* Drop Zone */
.bm-form--listing .bm-uploader__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-2);
  padding: var(--bm-space-6) var(--bm-space-4);
  border: 2px dashed var(--bm-color-line-dark);
  border-radius: var(--bm-radius-xl);
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  text-align: center;
  transition: border-color var(--bm-transition-fast), background-color var(--bm-transition-fast), box-shadow var(--bm-transition-fast);
}

.bm-form--listing .bm-uploader__drop svg {
  color: var(--bm-color-brand-text);
  flex-shrink: 0;
}

.bm-form--listing .bm-uploader__drop:hover {
  border-color: var(--bm-color-brand-base);
  background-color: var(--bm-color-surface-base);
}

.bm-form--listing .bm-uploader__drop.is-dragover {
  border-color: var(--bm-color-brand-base);
  background-color: var(--bm-color-brand-tint);
  box-shadow: 0 0 0 3px var(--bm-color-brand-tint);
}

.bm-form--listing .bm-uploader__drop .bm-btn--secondary {
  padding: var(--bm-space-2) var(--bm-space-4);
  font-size: var(--bm-text-sm);
  border-radius: var(--bm-radius-md);
}

/* Photo Counter */
.bm-form--listing .bm-uploader__count {
  margin: 0;
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-dark);
}

/* Thumbnails Grid */
.bm-form--listing .bm-uploader__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--bm-space-3);
}

/* Thumbnail Item Card */
.bm-form--listing .bm-uploader__item {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--bm-radius-lg);
  overflow: hidden;
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-dark);
  box-shadow: var(--bm-shadow-sm);
  transition: transform var(--bm-transition-fast), box-shadow var(--bm-transition-fast);
}

.bm-form--listing .bm-uploader__item:hover {
  box-shadow: var(--bm-shadow-md);
}

.bm-form--listing .bm-uploader__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--bm-color-line-base);
}

.bm-form--listing .bm-uploader__name {
  padding: var(--bm-space-1) var(--bm-space-1-5);
  font-size: var(--bm-text-xs);
  color: var(--bm-color-ink-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* Cover Badge Marker */
.bm-form--listing .bm-uploader__cover {
  position: absolute;
  inset-block-start: var(--bm-space-1-5);
  inset-inline-start: var(--bm-space-1-5);
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1);
  padding: 0 var(--bm-space-2);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-btn-primary-text);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-bold);
  letter-spacing: var(--bm-tracking-wide);
  line-height: var(--bm-line-height-normal);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

/* Remove Button */
.bm-form--listing .bm-uploader .bm-uploader__remove {
  position: absolute;
  inset-block-start: var(--bm-space-1-5);
  inset-inline-end: var(--bm-space-1-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-scrim-dark);
  color: #ffffff;
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-bold);
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color var(--bm-transition-fast), transform var(--bm-transition-fast);
  z-index: 2;
}

.bm-form--listing .bm-uploader .bm-uploader__remove:hover {
  background-color: var(--bm-color-danger-base);
  color: #ffffff;
}

.bm-form--listing .bm-uploader .bm-uploader__remove:focus-visible {
  outline: none;
  box-shadow: var(--bm-shadow-focus);
}

/* --------------------------------------------------------------------------
   3. Logo Field (.bm-form__logo) - Merged in #132
   -------------------------------------------------------------------------- */
.bm-form--listing .bm-form__logo {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-3);
}

.bm-form--listing .bm-form__logo-current {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bm-space-4);
  padding: var(--bm-space-4);
  border: 1px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-color-surface-dark);
}

.bm-form--listing .bm-form__logo-preview {
  width: 4.5rem;
  height: 4.5rem;
  min-width: 4.5rem;
  padding: var(--bm-space-1-5);
  border: 1px solid var(--bm-color-line-dark);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--bm-shadow-sm);
}

.bm-form--listing .bm-form__logo-preview img,
.bm-form--listing .bm-form__logo-preview .bm-form__logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.bm-form--listing .bm-form__logo-remove {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  color: var(--bm-color-ink-base);
  cursor: pointer;
  min-height: var(--bm-touch-target-min);
}

.bm-form--listing .bm-form__logo-remove:hover {
  color: var(--bm-color-danger-base);
}

.bm-form--listing .bm-form__logo-remove input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--bm-color-danger-base);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   4. Validation & Help States
   -------------------------------------------------------------------------- */
/* Error Summary Alert */
.bm-form__summary {
  display: block;
  gap: 0;
  box-sizing: border-box;
  margin-block-end: var(--bm-space-6);
  padding: var(--bm-space-4) var(--bm-space-5);
  border: 1px solid var(--bm-color-danger-base);
  border-radius: var(--bm-radius-xl);
  background-color: var(--bm-color-danger-tint);
  color: var(--bm-color-ink-base);
  box-shadow: var(--bm-shadow-sm);
}

.bm-form__summary:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
  box-shadow: var(--bm-shadow-focus);
}

.bm-form__summary .bm-form__summary-title {
  margin: 0 0 var(--bm-space-2);
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-danger-dark);
}

.bm-form__summary ul {
  margin: 0 0 var(--bm-space-2);
  padding-inline-start: var(--bm-space-5);
  font-size: var(--bm-text-sm);
}

.bm-form__summary a {
  color: var(--bm-color-danger-dark);
  text-decoration: underline;
  font-weight: var(--bm-font-weight-medium);
  transition: opacity var(--bm-transition-fast);
}

.bm-form__summary a:hover {
  opacity: 0.85;
}

.bm-form__summary .bm-form__help {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-ink-light);
  margin-block-start: var(--bm-space-2);
}

/* Field Error Rings & Error Text */
.bm-form--listing .bm-form__field--err input,
.bm-form--listing .bm-form__field--err textarea,
.bm-form--listing .bm-form__field--err select,
.bm-form--listing input[aria-invalid="true"],
.bm-form--listing textarea[aria-invalid="true"],
.bm-form--listing select[aria-invalid="true"] {
  border-color: var(--bm-color-danger-base);
  box-shadow: 0 0 0 1px var(--bm-color-danger-base);
}

.bm-form--listing .bm-form__field--err input:focus-visible,
.bm-form--listing .bm-form__field--err textarea:focus-visible,
.bm-form--listing .bm-form__field--err select:focus-visible,
.bm-form--listing input[aria-invalid="true"]:focus-visible,
.bm-form--listing textarea[aria-invalid="true"]:focus-visible,
.bm-form--listing select[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px var(--bm-color-danger-tint);
  border-color: var(--bm-color-danger-base);
  outline: 2px solid var(--bm-color-danger-base);
  outline-offset: 2px;
}

.bm-form--listing .bm-form__error {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1);
  margin-block-start: var(--bm-space-1);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-medium);
  color: var(--bm-color-danger-dark);
}

.bm-form--listing .bm-form__help {
  display: block;
  margin-block-start: var(--bm-space-1);
  font-size: var(--bm-text-xs);
  color: var(--bm-color-ink-light);
  line-height: var(--bm-line-height-normal);
}

/* Live Character Counters */
.bm-form--listing .bm-form__count {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
  transition: color var(--bm-transition-fast);
}

.bm-form--listing .bm-form__count.is-near {
  color: var(--bm-color-accent-dark);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-form--listing .bm-form__count.is-over {
  color: var(--bm-color-danger-dark);
  font-weight: var(--bm-font-weight-bold);
}

/* --------------------------------------------------------------------------
   5. Action Bar & Mobile Sticky Dock
   -------------------------------------------------------------------------- */
.bm-form--listing .bm-form__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--bm-space-3);
  margin-top: var(--bm-space-4);
  padding-top: var(--bm-space-5);
  border-top: 1px solid var(--bm-color-line-base);
}

.bm-form--listing .bm-form__actions .bm-btn {
  flex: 1 1 0;
  justify-content: center;
  min-height: var(--bm-touch-target-min);
}

.bm-form--listing .bm-form__actions .bm-btn:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 2px;
}

@media (min-width: 40rem) {
  .bm-form--listing .bm-form__actions .bm-btn {
    flex: 0 1 auto;
  }
}

@media (max-width: 39.99rem) {
  .bm-form--listing .bm-form__actions {
    position: sticky;
    bottom: 0;
    z-index: var(--bm-z-sticky-bar);
    margin-inline: calc(-1 * var(--bm-space-4));
    padding: var(--bm-space-3) var(--bm-space-4);
    padding-bottom: max(var(--bm-space-3), env(safe-area-inset-bottom, var(--bm-space-3)));
    background-color: var(--bm-color-surface-light);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--bm-shadow-sticky-bar);
    border-top: 1px solid var(--bm-color-line-dark);
    border-radius: 0;
  }
}

/* --------------------------------------------------------------------------
   6. Accessibility & Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bm-form.bm-form--listing *,
  .bm-uploader *,
  .bm-form-nav * {
    transition: none;
    transform: none;
  }
}

/* Sign-up agreement line (Terms and Privacy Policy): a 44px tap row with the box aligned to the first line of text. */
.bm-form__agree {
  margin: var(--bm-space-4) 0;
}

.bm-form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--bm-space-3);
  min-height: 2.75rem;
  font-size: var(--bm-text-sm);
  line-height: var(--bm-line-height-relaxed);
  color: var(--bm-color-ink-base);
  cursor: pointer;
}

.bm-form__check input[type="checkbox"] {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2rem 0 0;
  accent-color: var(--bm-color-brand-base);
}

.bm-form__check a {
  color: var(--bm-color-brand-text);
  text-decoration: underline;
}
/* 72. Help hub details that the static mockup did not need: hidden articles while searching, and the "still need help" block printed by [bm_help_hub]. */

.bm-prose [hidden],
.bm-help-hub [hidden] {
  display: none;
}

.bm-help-search__none {
  margin: var(--bm-space-4) 0 0;
  color: var(--bm-color-muted-base);
}

.bm-help-hub > .bm-help-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bm-space-3);
  padding: var(--bm-space-6);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  background-color: var(--bm-color-surface-dark);
  color: var(--bm-color-ink-base);
}

.bm-help-hub > .bm-help-contact p {
  margin: 0;
  color: var(--bm-color-muted-base);
}
/* --------------------------------------------------------------------------
   72. Homepage Polish & Simplified Architecture (Job 4)
   - Search Hero: compact vertical rhythm ensuring Top Categories are visible
     above the fold on 1280x800 laptop viewports.
   - Top Categories: 10-tile balanced 5x2 grid on desktop, 2-column on mobile.
   - District Shortcuts: responsive district cards (.bm-district-grid) and
     enhanced area index styling (.bm-area-index).
   - Recently Added Strip: optimized listing card grid emphasizing the no-photo
     placeholder with accent tints, token dots, and BM watermark.
   - Featured Partner Strip: quiet container with distinct badge and card-level
     promotional accents.
   - Call to Action Strip: high-contrast, responsive submission banner.
   - Zero override flags. Tokens only from design/tokens.css.
   -------------------------------------------------------------------------- */

/* 1. Search Hero: Above-the-fold Laptop Optimization */
.bm-hero {
  padding-block-start: clamp(var(--bm-space-6), 3vw, var(--bm-space-8));
  padding-block-end: clamp(var(--bm-space-6), 3vw, var(--bm-space-8));
}

@media (min-width: 768px) {
  .bm-hero {
    padding-block-start: var(--bm-space-8);
    padding-block-end: var(--bm-space-8);
  }
}

.bm-hero__title {
  font-size: clamp(var(--bm-text-2xl), 3.5vw, var(--bm-text-4xl));
  margin-block-end: var(--bm-space-2);
  line-height: var(--bm-line-height-tight);
}

.bm-hero__subtitle {
  font-size: var(--bm-text-base);
  margin-block-end: var(--bm-space-5);
  max-width: 44rem;
  line-height: var(--bm-line-height-normal);
}

@media (min-width: 768px) {
  .bm-hero__subtitle {
    font-size: var(--bm-text-base);
    margin-block-end: var(--bm-space-6);
  }
}

/* 2. Top Categories: 10-tile 5x2 Desktop Grid */
@media (min-width: 1024px) {
  .bm-category-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--bm-space-4);
  }
}

.bm-category-tile {
  min-height: 7.25rem;
  padding: var(--bm-space-3) var(--bm-space-2-5);
}

.bm-category-tile__icon-wrapper {
  width: 2.75rem;
  height: 2.75rem;
  margin-block-end: var(--bm-space-2);
}

.bm-category-tile__icon-wrapper svg {
  width: 1.375rem;
  height: 1.375rem;
}

.bm-category-tile__name {
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
}

.bm-category-tile__count {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
  margin-block-start: var(--bm-space-1);
}

/* 3. Browse by District Grid (.bm-district-grid, .bm-district-card) */
.bm-district-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bm-space-3);
}

@media (min-width: 640px) {
  .bm-district-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--bm-space-3);
  }
}

@media (min-width: 1024px) {
  .bm-district-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--bm-space-4);
  }
}

.bm-district-card {
  display: flex;
  align-items: center;
  gap: var(--bm-space-3);
  padding: var(--bm-space-3) var(--bm-space-4);
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-dark); /* the dark card sits on a band of almost the same colour: line-base was invisible there */
  border-radius: var(--bm-radius-xl);
  text-decoration: none;
  box-shadow: var(--bm-shadow-sm);
  transition: transform var(--bm-transition-fast), box-shadow var(--bm-transition-fast), border-color var(--bm-transition-fast);
  min-height: var(--bm-touch-target-min);
}

.bm-district-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bm-shadow-md);
  border-color: var(--bm-color-brand-base);
}

.bm-district-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--bm-radius-lg);
  background-color: var(--bm-color-brand-tint);
  color: var(--bm-color-brand-text);
  flex-shrink: 0;
}

.bm-district-card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.bm-district-card__name {
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-base);
  line-height: var(--bm-line-height-tight);
}

.bm-district-card__region {
  font-size: var(--bm-text-xs);
  color: var(--bm-color-muted-base);
  margin-block-start: 0.125rem;
}

.bm-district-card__count {
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-medium);
  color: var(--bm-color-muted-base);
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-full);
  padding: 0.125rem var(--bm-space-2);
  flex-shrink: 0;
}

/* 3b. Browse section: one section, two tabs (By category / By area). [bm_browse] in bm-render.php.
   Without JavaScript both panels are shown one under the other, each under its own small heading, and the tab buttons are hidden (a button that does nothing is a fake control).
   Tab mode (.bm-browse--tabs) is switched on by an inline line before the section and by design/browse-tabs.js; data-active picks the visible panel before the script has run. */
section.bm-section.bm-browse {
  display: block; /* Automatic.css turns every <section> into a flex column with a large gap */
  gap: 0;
}

.bm-browse__tabs {
  display: none;
}

.bm-browse__panel + .bm-browse__panel {
  margin-block-start: var(--bm-space-8);
}

.bm-browse__panel-title {
  margin: 0 0 var(--bm-space-4);
  font-size: var(--bm-text-lg);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-base);
}

.bm-browse__more {
  margin: var(--bm-space-5) 0 0;
  text-align: end;
}

.bm-browse--tabs .bm-browse__tabs {
  display: flex;
  gap: var(--bm-space-1);
  margin-block-end: var(--bm-space-6);
  border-block-end: 1px solid var(--bm-color-line-base);
}

.bm-browse--tabs .bm-browse__panel-title {
  display: none;
}

.bm-browse--tabs[data-active="cat"] [data-bm-panel="area"],
.bm-browse--tabs[data-active="area"] [data-bm-panel="cat"],
.bm-browse__panel[hidden] {
  display: none;
}

.bm-browse__tab {
  appearance: none;
  flex: 1 1 0;
  min-height: var(--bm-touch-target-min);
  min-width: var(--bm-touch-target-min);
  padding: var(--bm-space-2) var(--bm-space-4);
  margin-block-end: -1px; /* the selected tab's bar sits on the row's line */
  background: transparent;
  border: 0;
  border-block-end: 3px solid transparent;
  color: var(--bm-color-muted-base);
  font: inherit;
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-semibold);
  cursor: pointer;
  transition: color var(--bm-transition-fast), border-color var(--bm-transition-fast);
}

.bm-browse__tab:hover {
  color: var(--bm-color-ink-base);
}

.bm-browse__tab[aria-selected="true"] {
  color: var(--bm-color-ink-base);
  border-block-end-color: var(--bm-color-brand-text);
}

@media (min-width: 640px) {
  .bm-browse__tab {
    flex: 0 0 auto;
    min-width: 10rem;
  }
}

/* 4. Section Header Layout & Outbound Links */
.bm-section__header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  margin-block-end: var(--bm-space-6);
}

.bm-section__link {
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-brand-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1);
  transition: color var(--bm-transition-fast);
}

.bm-section__link:hover {
  color: var(--bm-color-brand-text);
  text-decoration: underline;
}

/* 5. Area Index Enhancement for Shortcode Consistency */
.bm-area-index__group {
  transition: transform var(--bm-transition-fast), box-shadow var(--bm-transition-fast);
}

.bm-area-index__group:hover {
  box-shadow: var(--bm-shadow-md);
}

:root[data-bm-theme="dark"] .bm-area-index__group {
  background-color: color-mix(in srgb, var(--bm-dk-field) 85%, transparent);
  border-color: rgba(255, 255, 255, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-area-index__group {
    background-color: color-mix(in srgb, var(--bm-dk-field) 85%, transparent);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

/* 6. Call to Action Strip Polish */
.bm-cta-strip {
  border-block-start: 1px solid var(--bm-color-line-base);
}

:root[data-bm-theme="dark"] .bm-cta-strip {
  border-block-start-color: rgba(255, 255, 255, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-cta-strip {
    border-block-start-color: rgba(255, 255, 255, 0.08);
  }
}

.bm-cta-strip .bm-btn--accent {
  box-shadow: var(--bm-shadow-md);
  font-weight: var(--bm-font-weight-bold);
}

/* 7. Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .bm-district-card,
  .bm-category-tile,
  .bm-area-index__group,
  .bm-section__link {
    transform: none;
    transition: none;
  }
}
/* 74. Description editor on the add and edit forms (bold, italic, lists, link). Looks like the other fields; the textarea stays behind it as the sent field. */

.bm-rte {
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-base);
}

.bm-rte:focus-within {
  border-color: var(--bm-color-brand-base);
  box-shadow: var(--bm-shadow-focus);
}

.bm-rte__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-1);
  padding: var(--bm-space-2);
  border-bottom: 1px solid var(--bm-color-line-base);
}

.bm-rte__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bm-touch-target-min);
  height: var(--bm-touch-target-min);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--bm-radius-md);
  background: transparent;
  color: var(--bm-color-ink-base);
  cursor: pointer;
}

.bm-rte__btn:hover {
  background-color: var(--bm-color-surface-dark);
}

.bm-rte__btn[aria-pressed="true"] {
  background-color: var(--bm-color-brand-tint);
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-brand-text);
}

.bm-rte__btn:focus-visible {
  outline: none;
  box-shadow: var(--bm-shadow-focus);
}

.bm-rte__link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  padding: var(--bm-space-2);
  border-bottom: 1px solid var(--bm-color-line-base);
}

.bm-rte__link[hidden] {
  display: none;
}

.bm-rte__url {
  flex: 1 1 14rem;
  min-height: var(--bm-touch-target-min);
  padding-inline: var(--bm-space-3);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  font: inherit;
}

.bm-rte__area {
  min-height: 9rem;
  max-height: 28rem;
  overflow-y: auto;
  padding: var(--bm-space-3);
  color: var(--bm-color-ink-base);
  line-height: var(--bm-line-height-relaxed, 1.6);
  outline: none;
}

.bm-rte__area p {
  margin: 0 0 var(--bm-space-3);
}

.bm-rte__area ul,
.bm-rte__area ol {
  margin: 0 0 var(--bm-space-3);
  padding-inline-start: var(--bm-space-6);
}

.bm-rte__area a {
  color: var(--bm-color-brand-text);
  text-decoration: underline;
}
/* --------------------------------------------------------------------------
   74. Search & Archive Pages Polish (Job 8)
   - Filter bar: elevated responsive toolbar layout, refined search input with
     focus rings and contrast-safe search icon, sort dropdown, and filter drawer toggle.
   - Active filter chips: removable filter tags with clear label, 44px tap target
     close button, and accessible "Clear all" link.
   - Sort control: clean native & custom select styling with full keyboard
     navigation support.
   - Pagination: centered, responsive page navigation with 44px tap targets,
     high-contrast active state, and mobile-optimized chevron labels.
   - Result count: crisp typographic hierarchy ("Showing 1 to 12 of 340").
   - Empty-results state and no-match state (.bm-no-results, .bm-no-results--ads):
     centered container, empty illustration, helpful next steps, popular category chips,
     and search tips block.
   - Zero override rules. Strict tokens from design/tokens.css.
   - Respects prefers-reduced-motion. High contrast in light and dark modes.
   -------------------------------------------------------------------------- */

/* 1. Filter Bar & Responsive Toolbar */
.bm-filter-bar {
  background-color: var(--bm-color-surface-light);
  border-block-end: 1px solid var(--bm-color-line-base);
  padding-block: var(--bm-space-4);
  transition: background-color var(--bm-transition-fast), border-color var(--bm-transition-fast);
}

:root[data-bm-theme="dark"] .bm-filter-bar {
  background-color: color-mix(in srgb, var(--bm-dk-bar) 95%, transparent);
  border-block-end-color: rgba(255, 255, 255, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-filter-bar {
    background-color: color-mix(in srgb, var(--bm-dk-bar) 95%, transparent);
    border-block-end-color: rgba(255, 255, 255, 0.08);
  }
}

.bm-filter-bar__toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-3);
}

@media (min-width: 768px) {
  .bm-filter-bar__toolbar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--bm-space-4);
  }
}

.bm-filter-bar__toolbar-form {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .bm-filter-bar__toolbar-form {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bm-space-2);
  }

  .bm-filter-bar__search-wrap {
    grid-column: 1 / -1;
    width: 100%;
  }

  .bm-filter-bar__sort-wrap {
    width: 100%;
  }

  .bm-filter-bar__sort-select {
    width: 100%;
  }

  .bm-filter-toggle-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Search within results */
.bm-filter-bar__search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 14rem;
  min-width: 12rem;
}

.bm-filter-bar__search-wrap svg {
  position: absolute;
  inset-inline-start: var(--bm-space-3);
  color: var(--bm-color-muted-base);
  pointer-events: none;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
}

:root[data-bm-theme="dark"] .bm-filter-bar__search-wrap svg {
  color: var(--bm-color-muted-light);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-filter-bar__search-wrap svg {
    color: var(--bm-color-muted-light);
  }
}

.bm-filter-bar__search-input {
  width: 100%;
  min-height: var(--bm-touch-target-min);
  padding-inline-start: 2.5rem;
  padding-inline-end: var(--bm-space-3);
  padding-block: var(--bm-space-2);
  border-radius: var(--bm-radius-md);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-base);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
  transition: border-color var(--bm-transition-fast), box-shadow var(--bm-transition-fast), background-color var(--bm-transition-fast);
}

.bm-filter-bar__search-input:focus {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 1px;
  border-color: var(--bm-color-brand-base);
  background-color: var(--bm-color-surface-light);
  box-shadow: var(--bm-shadow-sm);
}

:root[data-bm-theme="dark"] .bm-filter-bar__search-input {
  background-color: color-mix(in srgb, var(--bm-dk-field) 85%, transparent);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--bm-color-ink-base);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-filter-bar__search-input {
    background-color: color-mix(in srgb, var(--bm-dk-field) 85%, transparent);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--bm-color-ink-base);
  }
}

:root[data-bm-theme="dark"] .bm-filter-bar__search-input:focus {
  background-color: color-mix(in srgb, var(--bm-dk-field) 95%, transparent);
  border-color: color-mix(in srgb, var(--bm-color-brand-text) 40%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-filter-bar__search-input:focus {
    background-color: color-mix(in srgb, var(--bm-dk-field) 95%, transparent);
    border-color: color-mix(in srgb, var(--bm-color-brand-text) 40%, transparent);
  }
}

/* 2. Result Count Typography */
.bm-filter-bar__count {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-muted-base);
  font-weight: var(--bm-font-weight-regular);
  line-height: var(--bm-line-height-normal);
  white-space: nowrap;
}

.bm-filter-bar__count strong {
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
}

:root[data-bm-theme="dark"] .bm-filter-bar__count {
  color: var(--bm-color-muted-light);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-filter-bar__count {
    color: var(--bm-color-muted-light);
  }
}

:root[data-bm-theme="dark"] .bm-filter-bar__count strong {
  color: var(--bm-color-ink-dark);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-filter-bar__count strong {
    color: var(--bm-color-ink-dark);
  }
}

/* 3. Sort Control */
.bm-filter-bar__sort-wrap {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
}

.bm-filter-bar__sort-select {
  min-height: var(--bm-touch-target-min);
  padding-inline: var(--bm-space-3);
  padding-block: var(--bm-space-2);
  border-radius: var(--bm-radius-md);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-base);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
  cursor: pointer;
  transition: border-color var(--bm-transition-fast), box-shadow var(--bm-transition-fast);
}

.bm-filter-bar__sort-select:focus {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 1px;
  border-color: var(--bm-color-brand-base);
}

:root[data-bm-theme="dark"] .bm-filter-bar__sort-select {
  background-color: color-mix(in srgb, var(--bm-dk-field) 85%, transparent);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--bm-color-ink-base);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-filter-bar__sort-select {
    background-color: color-mix(in srgb, var(--bm-dk-field) 85%, transparent);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--bm-color-ink-base);
  }
}

/* 4. Filter Toggle Button & Badge */
.bm-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-2);
  min-height: var(--bm-touch-target-min);
  padding-inline: var(--bm-space-3);
  padding-block: var(--bm-space-2);
  border-radius: var(--bm-radius-md);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--bm-transition-fast), border-color var(--bm-transition-fast), color var(--bm-transition-fast);
}

.bm-filter-toggle-btn svg {
  color: var(--bm-color-muted-base);
  flex-shrink: 0;
}

.bm-filter-toggle-btn:hover {
  background-color: var(--bm-color-brand-tint);
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-brand-text);
}

.bm-filter-toggle-btn:hover svg {
  color: var(--bm-color-brand-text);
}

.bm-filter-toggle-btn:focus-visible {
  outline: 2px solid var(--bm-color-ring);
  outline-offset: 1px;
}

:root[data-bm-theme="dark"] .bm-filter-toggle-btn {
  background-color: color-mix(in srgb, var(--bm-dk-field) 85%, transparent);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--bm-color-ink-base);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-filter-toggle-btn {
    background-color: color-mix(in srgb, var(--bm-dk-field) 85%, transparent);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--bm-color-ink-base);
  }
}

:root[data-bm-theme="dark"] .bm-filter-toggle-btn svg {
  color: var(--bm-color-muted-light);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-filter-toggle-btn svg {
    color: var(--bm-color-muted-light);
  }
}

:root[data-bm-theme="dark"] .bm-filter-toggle-btn:hover {
  border-color: color-mix(in srgb, var(--bm-color-brand-text) 40%, transparent);
  background-color: color-mix(in srgb, var(--bm-color-brand-text) 10%, transparent);
  color: var(--bm-color-brand-text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-filter-toggle-btn:hover {
    border-color: color-mix(in srgb, var(--bm-color-brand-text) 40%, transparent);
    background-color: color-mix(in srgb, var(--bm-color-brand-text) 10%, transparent);
    color: var(--bm-color-brand-text);
  }
}

:root[data-bm-theme="dark"] .bm-filter-toggle-btn:hover svg {
  color: var(--bm-color-brand-text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-filter-toggle-btn:hover svg {
    color: var(--bm-color-brand-text);
  }
}

.bm-filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.375rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-surface-light);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-bold);
  line-height: 1;
}

:root[data-bm-theme="dark"] .bm-filter-count-badge {
  background-color: var(--bm-color-brand-light);
  color: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-filter-count-badge {
    background-color: var(--bm-color-brand-light);
    color: #ffffff;
  }
}

/* 5. Active Filter Chips (Removable) */
.bm-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-2);
  padding-block-start: var(--bm-space-3);
  margin-block-start: var(--bm-space-3);
  border-block-start: 1px dashed var(--bm-color-line-base);
}

:root[data-bm-theme="dark"] .bm-active-filters {
  border-block-start-color: rgba(255, 255, 255, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-active-filters {
    border-block-start-color: rgba(255, 255, 255, 0.08);
  }
}

.bm-active-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-1-5);
  padding-inline-start: var(--bm-space-3);
  padding-inline-end: var(--bm-space-1);
  padding-block: 0.25rem;
  min-height: 2rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-medium);
  box-shadow: var(--bm-shadow-sm);
  transition: background-color var(--bm-transition-fast), border-color var(--bm-transition-fast);
}

:root[data-bm-theme="dark"] .bm-active-tag {
  background-color: color-mix(in srgb, var(--bm-dk-field) 90%, transparent);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--bm-color-ink-base);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-active-tag {
    background-color: color-mix(in srgb, var(--bm-dk-field) 90%, transparent);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--bm-color-ink-base);
  }
}

.bm-active-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--bm-radius-full);
  color: var(--bm-color-muted-base);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--bm-transition-fast), color var(--bm-transition-fast);
}

.bm-active-tag__remove svg {
  width: 0.875rem;
  height: 0.875rem;
  stroke: currentColor;
}

.bm-active-tag__remove:hover {
  background-color: var(--bm-color-line-base);
  color: var(--bm-color-danger-base);
}

:root[data-bm-theme="dark"] .bm-active-tag__remove {
  color: var(--bm-color-muted-light);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-active-tag__remove {
    color: var(--bm-color-muted-light);
  }
}

:root[data-bm-theme="dark"] .bm-active-tag__remove:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--bm-color-danger-dark);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-active-tag__remove:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--bm-color-danger-dark);
  }
}

.bm-active-filters__clear {
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-medium);
  color: var(--bm-color-muted-base);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: var(--bm-touch-target-min);
  padding-inline: var(--bm-space-2);
  transition: color var(--bm-transition-fast);
}

.bm-active-filters__clear:hover {
  color: var(--bm-color-danger-base);
}

:root[data-bm-theme="dark"] .bm-active-filters__clear {
  color: var(--bm-color-muted-light);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-active-filters__clear {
    color: var(--bm-color-muted-light);
  }
}

:root[data-bm-theme="dark"] .bm-active-filters__clear:hover {
  color: var(--bm-color-danger-dark);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-active-filters__clear:hover {
    color: var(--bm-color-danger-dark);
  }
}

/* 6. Pagination Polish */
.bm-pagination-wrapper {
  padding-block: var(--bm-space-8) var(--bm-space-12);
}

.bm-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--bm-space-1-5);
  flex-wrap: wrap;
  margin: 0;
}

.bm-pagination__btn {
  min-height: var(--bm-touch-target-min);
  min-width: var(--bm-touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-1);
  padding-inline: var(--bm-space-3);
  border-radius: var(--bm-radius-md);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  text-decoration: none;
  box-sizing: border-box;
  box-shadow: var(--bm-shadow-sm);
  transition: background-color var(--bm-transition-fast), border-color var(--bm-transition-fast), color var(--bm-transition-fast), box-shadow var(--bm-transition-fast);
}

.bm-pagination__btn:hover {
  background-color: var(--bm-color-surface-base);
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-brand-text);
  box-shadow: var(--bm-shadow-md);
}

.bm-pagination__btn.is-active,
.bm-pagination__btn[aria-current="page"] {
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-surface-light);
  border-color: var(--bm-color-brand-base);
  font-weight: var(--bm-font-weight-bold);
  box-shadow: var(--bm-shadow-md);
  pointer-events: none;
}

.bm-pagination__btn--prev,
.bm-pagination__btn--next {
  padding-inline: var(--bm-space-3);
}

.bm-pagination__arrow {
  font-size: var(--bm-text-lg);
  line-height: 1;
}

.bm-pagination__dots {
  border-color: transparent;
  background: transparent;
  cursor: default;
  color: var(--bm-color-muted-base);
  box-shadow: none;
  min-width: 2rem;
}

.bm-pagination__dots:hover {
  border-color: transparent;
  background: transparent;
  color: var(--bm-color-muted-base);
  box-shadow: none;
}

:root[data-bm-theme="dark"] .bm-pagination__btn {
  background-color: color-mix(in srgb, var(--bm-dk-field) 85%, transparent);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--bm-color-ink-base);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-pagination__btn {
    background-color: color-mix(in srgb, var(--bm-dk-field) 85%, transparent);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--bm-color-ink-base);
  }
}

:root[data-bm-theme="dark"] .bm-pagination__btn:hover {
  border-color: color-mix(in srgb, var(--bm-color-brand-text) 35%, transparent);
  background-color: color-mix(in srgb, var(--bm-color-brand-text) 10%, transparent);
  color: var(--bm-color-brand-text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-pagination__btn:hover {
    border-color: color-mix(in srgb, var(--bm-color-brand-text) 35%, transparent);
    background-color: color-mix(in srgb, var(--bm-color-brand-text) 10%, transparent);
    color: var(--bm-color-brand-text);
  }
}

:root[data-bm-theme="dark"] .bm-pagination__btn.is-active,
:root[data-bm-theme="dark"] .bm-pagination__btn[aria-current="page"] {
  background-color: var(--bm-color-brand-base);
  color: #ffffff;
  border-color: var(--bm-color-brand-base);
  box-shadow: 0 0 12px color-mix(in srgb, var(--bm-color-brand-text) 25%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-pagination__btn.is-active,
  :root:not([data-bm-theme="light"]) .bm-pagination__btn[aria-current="page"] {
    background-color: var(--bm-color-brand-base);
    color: #ffffff;
    border-color: var(--bm-color-brand-base);
    box-shadow: 0 0 12px color-mix(in srgb, var(--bm-color-brand-text) 25%, transparent);
  }
}

:root[data-bm-theme="dark"] .bm-pagination__dots {
  color: var(--bm-color-muted-light);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-pagination__dots {
    color: var(--bm-color-muted-light);
  }
}

/* 7. Empty Results & No Match States (.bm-empty-state.bm-no-results, .bm-no-results--ads) */
.bm-empty-state.bm-no-results {
  max-width: 44rem;
  margin-inline: auto;
  margin-block: var(--bm-space-8) var(--bm-space-12);
  text-align: center;
  padding: clamp(var(--bm-space-8), 4vw, var(--bm-space-12)) var(--bm-space-6);
  background-color: var(--bm-color-surface-light);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-xl);
  box-shadow: var(--bm-shadow-card);
}

:root[data-bm-theme="dark"] .bm-empty-state.bm-no-results {
  background-color: color-mix(in srgb, var(--bm-dk-field) 85%, transparent);
  border-color: rgba(255, 255, 255, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-empty-state.bm-no-results {
    background-color: color-mix(in srgb, var(--bm-dk-field) 85%, transparent);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

.bm-empty-state.bm-no-results .bm-illustration,
.bm-empty-state.bm-no-results .bm-empty-illustration {
  margin-inline: auto;
  margin-block-end: var(--bm-space-4);
  max-width: 13rem;
  height: auto;
  display: block;
}

.bm-empty-state.bm-no-results .bm-empty-state__title {
  font-size: clamp(var(--bm-text-xl), 3vw, var(--bm-text-2xl));
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  margin-block-end: var(--bm-space-2);
}

.bm-empty-state.bm-no-results .bm-empty-state__desc {
  font-size: var(--bm-text-base);
  color: var(--bm-color-muted-base);
  max-width: 32rem;
  margin-inline: auto;
  margin-block-end: var(--bm-space-6);
  line-height: var(--bm-line-height-normal);
}

:root[data-bm-theme="dark"] .bm-empty-state.bm-no-results .bm-empty-state__desc {
  color: var(--bm-color-muted-light);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-empty-state.bm-no-results .bm-empty-state__desc {
    color: var(--bm-color-muted-light);
  }
}

.bm-empty-state.bm-no-results .bm-empty-state__actions {
  display: flex;
  justify-content: center;
  gap: var(--bm-space-3);
  flex-wrap: wrap;
  margin-block-end: var(--bm-space-6);
}

.bm-no-results__block {
  max-width: 36rem;
  margin: var(--bm-space-5) auto 0;
  text-align: start;
  padding: var(--bm-space-4) var(--bm-space-5);
  background-color: var(--bm-color-surface-base);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-lg);
}

:root[data-bm-theme="dark"] .bm-no-results__block {
  background-color: color-mix(in srgb, var(--bm-dk-deep) 60%, transparent);
  border-color: rgba(255, 255, 255, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bm-theme="light"]) .bm-no-results__block {
    background-color: color-mix(in srgb, var(--bm-dk-deep) 60%, transparent);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

.bm-no-results__heading {
  margin: 0 0 var(--bm-space-2-5);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-bold);
  color: var(--bm-color-ink-dark);
  text-transform: uppercase;
  letter-spacing: var(--bm-tracking-wide);
}

.bm-no-results__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
}

.bm-no-results__tips {
  margin: 0;
  padding-inline-start: var(--bm-space-5);
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
  line-height: var(--bm-line-height-normal);
}

.bm-no-results__tips li + li {
  margin-block-start: var(--bm-space-1-5);
}

/* 8. Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .bm-filter-bar,
  .bm-filter-bar__search-input,
  .bm-filter-toggle-btn,
  .bm-active-tag,
  .bm-active-tag__remove,
  .bm-pagination__btn {
    transition: none;
    transform: none;
  }
}
/* --------------------------------------------------------------------------
   75. Greens that stay green in every accent (docs/accent.md)
   These elements use green because it MEANS something (open now, verified, success, WhatsApp, price drop, confirmed, active), not because it is the brand.
   --bm-accent-keep is read by tests/bm-autodark-browser.js ("with accent blue or purple no brand green is left"); it styles nothing.
   It is set on the element that carries the colour, never on a container (custom properties inherit, so a container would exempt everything inside).
   -------------------------------------------------------------------------- */
.bm-badge--open,
.bm-badge--verified,
.bm-badge--price-drop,
.bm-status-dot,
.bm-dash-app__pill--ok,
.bm-delta-chip--up,
.bm-timeline-bar--confirmed,
.bm-status-chip--active,
.bm-cert-list .bm-cert--certified,
.bm-form__notice--ok,
.bm-login-shell .bm-form__notice--ok,
.bm-btn--whatsapp,
.bm-btn--wa .bm-btn__icon--whatsapp,
.bm-card__action-btn--whatsapp,
.bm-kpi-card__icon--whatsapp,
.bm-social-chip--whatsapp .bm-social-chip__icon,
.bm-share .bm-share__ch-whatsapp .bm-share__icon {
  --bm-accent-keep: 1;
}
/* 75. The description on a business or ad page (.bm-slot-card--about .bm-prose): paragraphs, lists and links now come from the editor on the add and edit forms
   (and from imports), so they need the spacing the page builder's reset removes. Only margins, list markers and link colour; sizes stay as they are. */

.bm-slot-card--about .bm-prose p {
  margin: 0 0 var(--bm-space-4);
}

.bm-slot-card--about .bm-prose > :last-child {
  margin-block-end: 0;
}

.bm-slot-card--about .bm-prose ul,
.bm-slot-card--about .bm-prose ol {
  margin: 0 0 var(--bm-space-4);
  padding-inline-start: var(--bm-space-6);
}

.bm-slot-card--about .bm-prose ul {
  list-style: disc;
}

.bm-slot-card--about .bm-prose ol {
  list-style: decimal;
}

.bm-slot-card--about .bm-prose li {
  margin-block-end: var(--bm-space-1);
}

.bm-slot-card--about .bm-prose a {
  color: var(--bm-color-brand-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
/* 76. Street address line on a listing card (bm-render.php, bm_card): tells two branches with the same name apart. One line, muted, cut with an ellipsis. */

.bm-card__address {
  margin: 0;
  overflow: hidden;
  color: var(--bm-color-muted-base);
  font-size: var(--bm-text-xs);
  line-height: var(--bm-line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* --------------------------------------------------------------------------
   77. Footer Polish
   Scope:
   - Multi-column layout with link groups (Brand, Explore, Regions, Account, Trust)
   - Proper dedicated row for legal links (Privacy, Terms, About, Contact, Help, Safe trade, Verification)
   - Clean bottom bar with copyright and region line
   - Responsive collapse to single column on mobile (< 640px) with 44px touch targets
   - Strict tokens only, zero rule overrides, WCAG AA compliance across light & dark themes
   -------------------------------------------------------------------------- */

.bm-footer {
  background-color: var(--bm-color-footer-bg);
  background-image: var(--bm-gradient-footer);
  color: var(--bm-color-footer-text);
  padding-block: var(--bm-space-12) var(--bm-space-8);
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* Multi-column Grid */
.bm-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bm-space-8);
  margin-block-end: var(--bm-space-10);
}

/* Tablet (640px - 1023px): 2 or 3 columns, brand column spans top */
@media (min-width: 640px) and (max-width: 1023px) {
  .bm-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--bm-space-8) var(--bm-space-6);
  }

  .bm-footer__brand {
    grid-column: 1 / -1;
    max-width: 32rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .bm-footer__grid.bm-footer__grid--cols-3,
  .bm-footer__grid.bm-footer__grid--cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }

  .bm-footer__brand {
    grid-column: 1 / -1;
  }
}

/* Desktop (1024px+): Brand column (1.4fr) + equal link columns (1fr each) */
@media (min-width: 1024px) {
  .bm-footer__grid {
    gap: var(--bm-space-8) var(--bm-space-6);
  }

  .bm-footer__grid.bm-footer__grid--cols-2 {
    grid-template-columns: 1.4fr repeat(2, 1fr);
  }

  .bm-footer__grid.bm-footer__grid--cols-3 {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }

  .bm-footer__grid.bm-footer__grid--cols-4 {
    grid-template-columns: 1.4fr repeat(4, 1fr);
  }

  .bm-footer__brand {
    grid-column: span 1;
    padding-inline-end: var(--bm-space-4);
  }
}

/* Brand Column */
.bm-footer__brand {
  display: flex;
  flex-direction: column;
}

.bm-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  color: var(--bm-color-footer-heading);
  text-decoration: none;
  font-weight: var(--bm-font-weight-bold);
  font-size: var(--bm-text-lg);
  min-height: var(--bm-touch-target-min);
  transition: opacity var(--bm-transition-fast);
}

.bm-footer__logo:hover {
  opacity: 0.9;
}

.bm-footer__logo svg {
  color: var(--bm-color-brand-text);
  width: 1.5rem;
  height: 1.5rem;
}

.bm-footer__desc {
  font-size: var(--bm-text-sm);
  color: var(--bm-color-footer-text);
  line-height: var(--bm-line-height-relaxed);
  margin-block: var(--bm-space-3) var(--bm-space-5);
  max-width: 24rem;
}

/* Social Buttons: accessible 44px tap targets */
.bm-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  margin-block-start: auto;
}

.bm-footer__social-btn {
  width: var(--bm-touch-target-min);
  height: var(--bm-touch-target-min);
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-footer-line);
  color: var(--bm-color-footer-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid var(--bm-color-footer-line);
  transition: background-color var(--bm-transition-fast), color var(--bm-transition-fast), border-color var(--bm-transition-fast), transform var(--bm-transition-fast);
}

.bm-footer__social-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.bm-footer__social-btn:hover {
  background-color: var(--bm-color-brand-base);
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-surface-light);
  transform: translateY(-2px);
}

.bm-footer__social-btn:focus-visible {
  outline: 2px solid var(--bm-color-footer-link-hover);
  outline-offset: 2px;
}

/* Nav Link Columns */
.bm-footer__col {
  display: flex;
  flex-direction: column;
}

.bm-footer__col-title {
  color: var(--bm-color-footer-heading);
  font-size: var(--bm-text-xs);
  font-weight: var(--bm-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--bm-tracking-wide);
  margin-block: 0 var(--bm-space-4);
}

.bm-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-1);
}

.bm-footer__link {
  display: inline-flex;
  align-items: center;
  color: var(--bm-color-footer-text);
  text-decoration: none;
  font-size: var(--bm-text-sm);
  padding-block: var(--bm-space-1-5);
  border-radius: var(--bm-radius-sm);
  transition: color var(--bm-transition-fast), padding-inline-start var(--bm-transition-fast);
}

.bm-footer__link:hover {
  color: var(--bm-color-footer-link-hover);
  padding-inline-start: var(--bm-space-1);
}

.bm-footer__link:focus-visible {
  outline: 2px solid var(--bm-color-footer-link-hover);
  outline-offset: 2px;
  color: var(--bm-color-footer-link-hover);
}

/* Bottom Bar: Clean hierarchy & dedicated legal row */
.bm-footer__bottom {
  border-block-start: 1px solid var(--bm-color-footer-line);
  padding-block: var(--bm-space-6) var(--bm-space-2);
  width: 100%;
  box-sizing: border-box;
}

.bm-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-4);
  align-items: center;
  text-align: center;
}

/* Legal links row: dedicated row across the top of the bottom bar */
.bm-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--bm-space-2) var(--bm-space-5);
  padding-block-end: var(--bm-space-4);
  border-block-end: 1px solid var(--bm-color-footer-line);
  width: 100%;
}

.bm-footer__legal-link {
  color: var(--bm-color-footer-text);
  text-decoration: none;
  font-size: var(--bm-text-xs);
  padding: var(--bm-space-1) 0;
  border-radius: var(--bm-radius-sm);
  transition: color var(--bm-transition-fast);
}

.bm-footer__legal-link:hover {
  color: var(--bm-color-footer-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bm-footer__legal-link:focus-visible {
  outline: 2px solid var(--bm-color-footer-link-hover);
  outline-offset: 2px;
  color: var(--bm-color-footer-link-hover);
}

.bm-footer__copy {
  color: var(--bm-color-footer-text);
  font-size: var(--bm-text-xs);
  line-height: var(--bm-line-height-normal);
}

.bm-footer__meta {
  color: var(--bm-color-footer-text);
  font-size: var(--bm-text-xs);
  line-height: var(--bm-line-height-normal);
}

/* Desktop layout for bottom bar (>= 768px): one row, so it costs one line of height.
   Copyright and legal links on the left, region line on the right. */
@media (min-width: 768px) {
  .bm-footer__bottom-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "copy legal meta";
    column-gap: var(--bm-space-6);
    align-items: center;
    text-align: start;
  }

  .bm-footer__legal {
    grid-area: legal;
    justify-content: flex-start;
    padding-block-end: 0;
    border-block-end: 0;
    width: auto;
  }

  .bm-footer__copy {
    grid-area: copy;
    text-align: start;
  }

  .bm-footer__meta {
    grid-area: meta;
    text-align: end;
  }
}
/* --------------------------------------------------------------------------
   78. Header and Mobile Menu Polish
   Scope:
   - Desktop header: refined spacing, logo, nav, search entry, account menu
   - Clear active state indicator on active navigation links
   - Smooth sticky header with backdrop blur and subtle scroll elevation shadow
   - Mobile menu: full-height panel below sticky bar with 44px touch targets
   - Close button styling and mobile navigation layout
   - 100% token-based colors, zero hard-coded colors, WCAG AA contrast compliance
   -------------------------------------------------------------------------- */

.bm-header {
  position: sticky;
  top: 0;
  z-index: var(--bm-z-sticky);
  background-color: var(--bm-color-header-bg);
  backdrop-filter: var(--bm-header-blur);
  -webkit-backdrop-filter: var(--bm-header-blur);
  border-block-end: 1px solid var(--bm-color-header-border);
  box-shadow: var(--bm-shadow-sm);
  transition: background-color var(--bm-transition-fast), border-color var(--bm-transition-fast), box-shadow var(--bm-transition-fast);
  width: 100%;
  box-sizing: border-box;
}

.bm-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* logo and links together on the left, the actions pushed right: space-between left the links floating in the middle */
  gap: var(--bm-space-4);
  min-height: 4rem;
  box-sizing: border-box;
}

.bm-header__inner > .bm-header__actions {
  margin-inline-start: auto;
}

/* Logo */
.bm-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  min-height: var(--bm-touch-target-min);
  color: var(--bm-color-ink-base);
  text-decoration: none;
  font-size: var(--bm-text-base);
  font-weight: var(--bm-font-weight-bold);
  flex-shrink: 0;
  transition: opacity var(--bm-transition-fast);
}

.bm-header__logo:hover {
  opacity: 0.9;
}

.bm-header__logo svg {
  color: var(--bm-color-brand-text);
  flex-shrink: 0;
}

/* Primary Navigation */
.bm-header__nav {
  display: none;
  align-items: center;
  gap: var(--bm-space-1);
}

@media (min-width: 768px) {
  .bm-header__nav {
    display: flex;
    margin-inline-start: var(--bm-space-6);
  }
}

.bm-header__nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--bm-touch-target-min);
  padding: var(--bm-space-2) var(--bm-space-3);
  border-radius: var(--bm-radius-md);
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-medium);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color var(--bm-transition-fast), background-color var(--bm-transition-fast), border-color var(--bm-transition-fast);
}

.bm-header__nav-link:hover {
  color: var(--bm-color-brand-text);
  background-color: var(--bm-color-surface-muted);
}

.bm-header__nav-link:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
}

.bm-header__nav-link.is-active,
.bm-header__nav-link[aria-current="page"] {
  color: var(--bm-color-brand-text);
  background-color: var(--bm-color-brand-tint);
  font-weight: var(--bm-font-weight-semibold);
  border-color: var(--bm-color-brand-tint);
  box-shadow: inset 0 -2px 0 var(--bm-color-brand-text);
}

/* Search Entry (Desktop) */
.bm-header__search {
  display: none;
  align-items: center;
  position: relative;
  flex: 1;
  max-width: 18rem;
}

@media (min-width: 1024px) {
  .bm-header__search {
    display: flex;
  }
}

.bm-header__search-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.5rem;
  padding-inline: var(--bm-space-3);
  background-color: var(--bm-color-surface-muted);
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-full);
  transition: border-color var(--bm-transition-fast), box-shadow var(--bm-transition-fast), background-color var(--bm-transition-fast);
}

.bm-header__search-wrap:focus-within {
  border-color: var(--bm-color-brand-base);
  background-color: var(--bm-color-surface-light);
  box-shadow: var(--bm-shadow-focus);
}

.bm-header__search-icon {
  color: var(--bm-color-ink-light);
  width: 1rem;
  height: 1rem;
  margin-inline-end: var(--bm-space-2);
  flex-shrink: 0;
}

.bm-header__search-input {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--bm-color-ink-base);
  font-size: var(--bm-text-sm);
  font-family: inherit;
  outline: none;
  padding: 0;
}

.bm-header__search-input::placeholder {
  color: var(--bm-color-ink-light);
}

/* Actions */
.bm-header__actions {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2);
  flex-shrink: 0;
}

.bm-header__actions .bm-btn {
  min-height: var(--bm-touch-target-min);
  white-space: nowrap;
}

.bm-header__login {
  min-height: var(--bm-touch-target-min);
  padding-inline: var(--bm-space-4);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  color: var(--bm-color-ink-base);
  text-decoration: none;
}

.bm-header__login:hover {
  color: var(--bm-color-brand-text);
  background-color: var(--bm-color-surface-muted);
}

.bm-header__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bm-touch-target-min);
  height: var(--bm-touch-target-min);
  padding: 0;
  border: 1px solid var(--bm-color-line-base);
  border-radius: var(--bm-radius-md);
  background-color: var(--bm-color-surface-light);
  color: var(--bm-color-ink-base);
  cursor: pointer;
  transition: background-color var(--bm-transition-fast), border-color var(--bm-transition-fast), color var(--bm-transition-fast);
}

@media (min-width: 768px) {
  .bm-header__menu-btn {
    display: none;
  }
}

.bm-header__menu-btn:hover,
.bm-header__menu-btn[aria-expanded="true"] {
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-brand-text);
  background-color: var(--bm-color-surface-muted);
}

.bm-header__menu-btn:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
}

.bm-header__menu-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Mobile Menu Drawer Panel */
@media (max-width: 767px) {
  .bm-header__mobile-menu {
    display: none;
    position: fixed;
    inset-block-start: 4rem;
    inset-inline: 0;
    inset-block-end: 0;
    width: 100%;
    height: calc(100vh - 4rem);
    height: calc(100dvh - 4rem);
    z-index: var(--bm-z-modal);
    background-color: var(--bm-color-header-bg);
    backdrop-filter: var(--bm-header-blur);
    -webkit-backdrop-filter: var(--bm-header-blur);
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--bm-space-4);
    border-block-start: 1px solid var(--bm-color-header-border);
    box-shadow: var(--bm-shadow-lg);
  }

  .bm-header__mobile-menu.is-open {
    display: flex;
    flex-direction: column;
    gap: var(--bm-space-4);
  }

  .bm-header__mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block-end: var(--bm-space-3);
    border-block-end: 1px solid var(--bm-color-line-base);
    min-height: var(--bm-touch-target-min);
  }

  .bm-header__mobile-title {
    font-size: var(--bm-text-base);
    font-weight: var(--bm-font-weight-bold);
    color: var(--bm-color-ink-base);
  }

  .bm-header__close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bm-touch-target-min);
    height: var(--bm-touch-target-min);
    border: 1px solid var(--bm-color-line-base);
    border-radius: var(--bm-radius-md);
    background-color: var(--bm-color-surface-light);
    color: var(--bm-color-ink-base);
    cursor: pointer;
    transition: all var(--bm-transition-fast);
  }

  .bm-header__close-btn:hover {
    border-color: var(--bm-color-brand-base);
    color: var(--bm-color-brand-text);
  }

  .bm-header__close-btn:focus-visible {
    outline: 2px solid var(--bm-color-brand-base);
    outline-offset: 2px;
  }

  .bm-header__close-btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .bm-header__mobile-nav {
    display: flex;
    flex-direction: column;
    gap: var(--bm-space-2);
  }

  .bm-header__mobile-link {
    display: flex;
    align-items: center;
    min-height: var(--bm-touch-target-min);
    padding: var(--bm-space-2) var(--bm-space-3);
    border-radius: var(--bm-radius-md);
    color: var(--bm-color-ink-base);
    font-size: var(--bm-text-base);
    font-weight: var(--bm-font-weight-medium);
    text-decoration: none;
    transition: color var(--bm-transition-fast), background-color var(--bm-transition-fast);
  }

  .bm-header__mobile-link:hover {
    color: var(--bm-color-brand-text);
    background-color: var(--bm-color-surface-muted);
  }

  .bm-header__mobile-link:focus-visible {
    outline: 2px solid var(--bm-color-brand-base);
    outline-offset: 2px;
  }

  .bm-header__mobile-link.is-active,
  .bm-header__mobile-link[aria-current="page"] {
    color: var(--bm-color-brand-text);
    background-color: var(--bm-color-brand-tint);
    font-weight: var(--bm-font-weight-bold);
    box-shadow: inset 3px 0 0 var(--bm-color-brand-text);
  }

  .bm-header__mobile-user {
    margin: var(--bm-space-2) 0 0;
    padding-inline: var(--bm-space-3);
    color: var(--bm-color-ink-light);
    font-size: var(--bm-text-xs);
    font-weight: var(--bm-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--bm-tracking-wide);
    overflow-wrap: anywhere;
  }

  .bm-header__mobile-menu .bm-btn--full {
    min-height: var(--bm-touch-target-min);
    margin-block-start: var(--bm-space-2);
  }
}

@media (min-width: 768px) {
  .bm-header__mobile-menu {
    display: none;
  }
}
/* Tap to reveal (mu-plugins/bm-reveal.php, design/reveal.js): the "Show phone number" / "Show WhatsApp number" control that stands in for a call or
   WhatsApp link, the live region that replaces it, and the one-line notes. Tokens only. The control keeps the classes of the link it replaces, so
   cards, the contact box, the sticky bar, deals and menu rows look as they did; this partial only adds what the plain link rules matched by href. */

.bm-reveal {
  min-height: var(--bm-touch-target-min);
  min-width: var(--bm-touch-target-min);
  cursor: pointer;
  text-align: center;
  line-height: var(--bm-line-height-normal);
}

/* Same look as the Call link in the contact box (68-single-business-polish.css matches it by href^="tel:", which the button does not have). */
.bm-contact-card__actions .bm-reveal.bm-btn--secondary:not(.bm-btn--wa) {
  min-height: 48px;
  border-radius: var(--bm-radius-lg);
  font-weight: var(--bm-font-weight-semibold);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
}

.bm-contact-card__actions .bm-reveal.bm-btn--secondary:not(.bm-btn--wa):hover {
  background-color: var(--bm-color-surface-muted);
  border-color: var(--bm-color-ink-light);
}

.bm-reveal:focus-visible,
.bm-reveal__result a:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
}

.bm-reveal.is-loading {
  opacity: 0.7;
  cursor: progress;
}

/* The live region that holds the revealed link (and any further numbers). It takes the place of the button in its row or column. */
.bm-reveal__result {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-2);
  min-width: 0;
}

.bm-reveal__result > a:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.bm-reveal__more {
  display: inline-flex;
  align-items: center;
  min-height: var(--bm-touch-target-min);
  padding-inline: var(--bm-space-2);
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-semibold);
  font-size: var(--bm-text-sm);
}

.bm-reveal__note,
.bm-reveal__error {
  margin: 0;
  font-size: var(--bm-text-sm);
  color: var(--bm-color-ink-base);
}

.bm-reveal__error {
  color: var(--bm-color-danger-dark);
  flex-basis: 100%;
}

.bm-card__actions .bm-reveal__error {
  font-size: var(--bm-text-xs);
}

/* Cards: two buttons in a narrow row. Let the label wrap rather than overflow. */
.bm-card__action-btn.bm-reveal {
  text-align: center;
  padding-block: var(--bm-space-1);
}

.bm-card__action-btn.bm-reveal span {
  white-space: normal; /* 08-listing-cards.css keeps the plain "Call" on one line; "Show WhatsApp number" must wrap inside the 44px button */
  min-width: 0;
  line-height: var(--bm-line-height-tight);
}

/* Sticky bar (phone widths): two buttons share the row, so "Show WhatsApp number" wraps to two lines instead of ending in an ellipsis. */
.bm-mobile-sticky-bar .bm-reveal span,
.bm-mobile-sticky-bar .bm-reveal__result a span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: var(--bm-line-height-tight);
  text-align: start;
}

.bm-mobile-sticky-bar .bm-reveal__result {
  flex: 1 1 0;
  min-width: 0;
}

/* Two labels are printed; a touch screen shows the short one ("Call", "WhatsApp"), because its tap goes straight to the dialler or the chat. */
.bm-reveal .bm-reveal__touch {
  display: none;
}

@media (pointer: coarse) {
  .bm-reveal .bm-reveal__fine {
    display: none;
  }

  .bm-reveal .bm-reveal__touch {
    display: inline;
  }
}

/* Mouse: the number as text with a Copy button. */
.bm-reveal__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-2);
  flex: 1 1 100%;
  min-height: var(--bm-touch-target-min);
}

.bm-reveal__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.bm-reveal__number {
  font-weight: var(--bm-font-weight-bold);
  font-size: var(--bm-text-base);
  color: var(--bm-color-ink-dark);
  overflow-wrap: anywhere;
}

.bm-reveal__number:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
  border-radius: var(--bm-radius-sm);
}

.bm-reveal__copy,
.bm-reveal__retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bm-touch-target-min);
  min-width: var(--bm-touch-target-min);
  padding-inline: var(--bm-space-4);
  border-radius: var(--bm-radius-full);
  border: 1px solid var(--bm-color-line-base);
  background-color: var(--bm-color-surface-base);
  color: var(--bm-color-ink-base);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  font-weight: var(--bm-font-weight-semibold);
  cursor: pointer;
}

.bm-reveal__copy:hover,
.bm-reveal__retry:hover {
  background-color: var(--bm-color-surface-muted);
  border-color: var(--bm-color-ink-light);
}

.bm-reveal__copy:focus-visible,
.bm-reveal__retry:focus-visible,
.bm-reveal__open:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
}

.bm-reveal__open {
  display: inline-flex;
  align-items: center;
  min-height: var(--bm-touch-target-min);
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-semibold);
  font-size: var(--bm-text-sm);
}

.bm-reveal__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-2);
}

/* Contact block: WhatsApp is the primary, filled button; the phone button stays the secondary outline one. */
.bm-contact-card__actions .bm-reveal.bm-btn--wa,
.bm-contact-card__actions .bm-reveal.bm-btn--whatsapp,
.bm-mobile-sticky-bar .bm-reveal.bm-btn--wa,
.bm-mobile-sticky-bar .bm-reveal.bm-btn--whatsapp {
  min-height: 48px;
  border-radius: var(--bm-radius-lg);
  font-weight: var(--bm-font-weight-bold);
  border: 1px solid var(--bm-color-brand-base);
  background-color: var(--bm-color-brand-base);
  color: var(--bm-color-text-on-dark);
}

.bm-contact-card__actions .bm-reveal.bm-btn--wa:hover,
.bm-contact-card__actions .bm-reveal.bm-btn--whatsapp:hover {
  background-color: var(--bm-color-brand-dark);
  border-color: var(--bm-color-brand-dark);
  color: var(--bm-color-text-on-dark);
}

.bm-contact-card__actions .bm-reveal.bm-btn--wa svg,
.bm-contact-card__actions .bm-reveal.bm-btn--whatsapp svg {
  color: inherit;
}

.bm-card__action-btn.bm-reveal.bm-card__action-btn--whatsapp {
  background-color: var(--bm-color-brand-base);
  border-color: var(--bm-color-brand-base);
  color: var(--bm-color-text-on-dark);
}

/* A number typed into a description, shown as a small button; revealed it is the number with Copy. */
.bm-reveal-inline {
  display: inline-flex;
  align-items: center;
  min-height: var(--bm-touch-target-min);
  color: var(--bm-color-brand-text);
  font-weight: var(--bm-font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.bm-reveal-inline:focus-visible {
  outline: 2px solid var(--bm-color-brand-base);
  outline-offset: 2px;
}

.bm-reveal__result--inline {
  display: inline-flex;
  vertical-align: middle;
}
/* Install app control in the footer Explore column (design/pwa.js, mu-plugins/bm-pwa.php). The script adds it only when the browser offers installation
   and the PWA setting is on; nothing here draws anything otherwise. Buttons that look like the footer links next to them. Tokens only. */

.bm-pwa-install {
  display: flex;
  align-items: center;
  gap: var(--bm-space-1);
}

.bm-pwa-install[hidden] {
  display: none;
}

.bm-pwa-install__btn,
.bm-pwa-install__dismiss {
  min-height: var(--bm-touch-target-min);
  background: transparent;
  border: 0;
  color: var(--bm-color-footer-text);
  font: inherit;
  font-size: var(--bm-text-sm);
  cursor: pointer;
  border-radius: var(--bm-radius-sm);
}

.bm-pwa-install__btn {
  display: inline-flex;
  align-items: center;
  padding-inline: 0;
  text-align: start;
}

.bm-pwa-install__dismiss {
  min-width: var(--bm-touch-target-min);
}

.bm-pwa-install__btn:hover,
.bm-pwa-install__dismiss:hover {
  color: var(--bm-color-footer-link-hover);
}

.bm-pwa-install__btn:focus-visible,
.bm-pwa-install__dismiss:focus-visible {
  outline: 2px solid var(--bm-color-footer-link-hover);
  outline-offset: 2px;
  color: var(--bm-color-footer-link-hover);
}